Vlad Merjevici
Termenul „design fix” este folosit pentru a se referi la aranjament în pagină, care este creat pe baza de straturi lățimea dată. Alegerea lățimii depinde de orientare rezoluție specifică monitorul utilizatorului. Deci, pentru o rezoluție de 1024x768 pixeli, dimensiunea tabelului nu trebuie să depășească 1000 pixeli. Această lățime se obține prin scăderea lățimii barei de defilare verticale și a marginilor ferestrei browser din valoarea 1024. Pentru toți utilizatorii, un site construit pe un astfel de aspect va fi afișat corect, dar rezoluții mai mari se dovedește a fi prea mult spațiu gol. Deoarece cea mai populară rezoluție în rândul utilizatorilor de internet este 1024x768, dezvoltatorii de site-uri web se concentrează pe ea și folosesc o lățime totală a stratului de 900–1000 pixeli.
Cu un design fix, blocul de material este de obicei plasat la marginea stângă sau în centrul ecranului. Ultima varianta de preferat, atunci câmpurile largi din jur nu sunt atât de vizibile la rezoluții mari ale monitorului (Fig. 1).
Orez. 1. Tipic grilă modulară cu design fix
Denumirile numerice utilizate în această figură: 1 - titlul site-ului; 2 - stratul din stânga, de obicei conține elemente de navigare; 3 - stratul din dreapta, conține conținutul informativ al paginii; 4 - „subsol”, partea de jos a paginii web, de regulă, plasează informații de contact si diverse butoane.
Pentru a crea aspectul prezentat în Fig. 1, ar trebui să luați în considerare câteva puncte preliminare - care va fi lățimea totală a tuturor elementelor; unde va fi plasat aspectul - în centrul paginii sau la marginea stângă; ce culori și fonturi vor fi folosite etc. Pașii care trebuie urmați înainte de a scrie codul sunt descriși mai jos.
Lățimea stratului
În primul rând, ar trebui să determinați lățimea totală a elementelor vizuale ale paginii web. După cum am menționat mai sus, această valoare este determinată de designer însuși pe baza colectării preliminare a datelor despre viitorii utilizatori ai site-ului. Deși majoritatea designerilor stabilesc lățimea, care se numește „de la lanternă”, pe baza propriei lor comoditati. Deci, în exemplul 1, folosind același principiu, lățimea tuturor straturilor este aleasă să fie de 750 de pixeli.
Deci, întreaga lățime este cunoscută, acum trebuie să o împărțim în două părți. Stratul indicat cu numărul 2 (Fig. 1) este rezervat meniului lățimea acestuia trebuie să fie minimă, dar suficientă pentru lectură confortabilă text. Să-l facem un număr rotund, de exemplu, 200 de pixeli. Restul va fi preluat de conținut.
Înălțimea stratului
Înălțimea unui strat se modifică dinamic în funcție de conținutul acestuia. Dacă doriți să setați singur înălțimea stratului, puteți utiliza proprietatea înălțime și setați înălțimea în pixeli, procente sau alte unități CSS. Vă rugăm să rețineți că, cu această abordare, conținutul stratului este întotdeauna aliniat de-a lungul marginii sale superioare, așa că nu ar trebui să setați înălțimea prea mare (exemplul 1).
Exemplul 1: Setarea înălțimii stratului
În mod similar, înălțimea stratului poate fi modificată prin umplutură prin modificarea valorilor padding-top și padding-bottom (exemplul 2). Dar această metodă este mai puțin universală.
Exemplul 2: Setarea înălțimii stratului folosind căptușeală
În acest caz, înălțimea stratului este suma căptușelii de sus și de jos și a înălțimii conținutului, care va fi centrat vertical.
Dacă înălțimea conținutului unui strat depășește înălțimea specificată de proprietatea înălțime, browserul lasă dimensiunile stratului neschimbate și suprapune conținutul deasupra acestuia.
Alinierea la centru
Dacă este necesar să lăsați aspectul aliniat la marginea stângă a ferestrei, nu trebuie să faceți nimic, acest efect se va întâmpla de la sine. Dar pentru a vă asigura că aspectul este în centrul ferestrei browserului, un alt strat suplimentar va ajuta, care va servi drept cadru și va include toate celelalte straturi. Să-l numim container și să scriem următorul stil pentru el (exemplul 3).
Exemplul 3: Alinierea la centru
Proprietățile margin-right și margin-left cu valoare auto setați alinierea stratului la centrul paginii web. În același selector indicăm lățimea totală a tuturor straturilor.
Alinierea unui aspect de pagină web la dreapta nu se face, în general, niciodată - este folosită alinierea la centru sau la stânga.
Indentare pe o pagină web
Orizontală şi margini verticale de la marginea browserului până la conținutul paginii web sunt încorporate implicit în browser. Cu toate acestea, puteți modifica valoarea acestor proprietăți făcând umplutura mai mare sau mai mică, după cum doriți. De exemplu, puteți seta o indentație de la marginea de sus a ferestrei la titlul paginii sau o puteți elimina cu totul.
Indentațiile sunt stabilite de proprietăți Marja CSSși umplutură pentru selectorul BODY. Prezența a două proprietăți în loc de una, necesită din nou interesele diferitelor browsere, marjă - Internet Explorer, și umplutură - Opera și Firefox. Combinarea diferitelor proprietăți asigură afișarea paginii web browsere diferite va fi la fel.
Puteți controla marginile individuale de la diferite margini ale ecranului folosind proprietățile margin-top , margin-bottom , margin-right și margin-left, care modifică, respectiv, distanța de la marginile de sus, jos, dreapta și stânga ale ferestrei browserului. Înainte de a le utiliza, trebuie să setați proprietatea marginii la zero (exemplul 4).
Exemplul 4: modificarea marginii superioare de la marginea browserului
Culori
CSS are mai multe opțiuni pentru definirea textului și a culorii de fundal a unui strat. Proprietatea culoare specifică culoarea textului din strat, iar proprietatea fundal specifică culoarea fundalului (exemplul 5).
Exemplul 5: Schimbarea culorii
Culoarea de fundal pentru stratul de meniu din exemplu este specificată ca verde închis, iar culoarea textului este albă.
La așezarea următorului proiect (sau doar la proiectarea unei grile de aspect), mulți s-au confruntat cu o dilemă - să folosească o lățime fixă de aspect sau o grilă „de cauciuc” care se adaptează la dimensiunea ferestrei browserului.
Fiecare dintre aceste soluții are propriile sale avantaje și dezavantaje Vreau să mă concentrez pe minusuri, deoarece de obicei tocmai reflectând minusurile acestor decizii trebuie să alegeți între două rele.
Lățimea grilei de aspect fix
Aspectul este forțat într-o dimensiune orizontală de 960-980 pixeli (astfel încât totul să fie inclus pe majoritatea dispozitivelor în majoritatea rezoluțiilor), care, cu dimensiuni mari ale ferestrelor orizontale, arată cumva rece - subțire dungă verticală conținut util al paginii și câmpuri imense inutile de spațiu neutilizat pe laterale.Grilă de aspect „cauciuc” pe lățimea ferestrei
Din nou, cu dimensiuni mari ale ferestrelor orizontale, există o altă problemă: liniile de text devin foarte lungi, iar citirea lor nu devine deloc atât de confortabilă pe cât ne-am dori.O altă problemă comună cu această soluție este că marginile laterale cu dimensiuni mari de ferestre orizontale nu mai sunt în concordanță vizual cu dimensiunile orizontale ale elementelor, ceea ce, de asemenea, nu adaugă confort atunci când se privește aspectul.
Aș dori să propun o soluție simplă - limitați dimensiunea orizontală minimă la o valoare fixă în pixeli și faceți maximul relativ ca procent din lățimea ferestrei. Aceasta este o soluție foarte banală prin mijloace simpleÎncă 2 versiuni ale specificației CSS.
Actualizați: Aș dori să fac o rezervă că nu vorbim despre efectul clasic de cauciuc și adaptarea la absolut toate rezoluțiile, ci doar despre o anumită gamă rezonabilă de rezoluții pentru care este conceput layout-ul. În exemplele de mai jos, acesta este intervalul clasic de rezoluție desktop cu o dimensiune orizontală de rezoluție de 1024 pixeli.Permiteți-mi să subliniez din nou: Postarea nu vorbește despre o soluție pentru toate tipurile de dispozitive și toate gamele de rezoluție. Această problemă nu poate fi rezolvată în principiu în cadrul unui singur layout., pentru a o rezolva într-un fel sau altul va fi nevoie de mai multe machete. Zboară separat, cotlet separat.
Creați un container de aspect:
...
Îl decoram cu cod de stil simplu:
div.page-container ( lățime minimă: 960 px; lățime maximă: 75%; marjă: 0 automat; umplutură: 0; )
Cu toate acestea, această soluție poate părea insuficientă pentru unii din cauza faptului că, la dimensiuni foarte mari ale ferestrelor orizontale, apar din nou probleme cu lungimea liniilor. Acest lucru poate fi rezolvat printr-o tehnică suplimentară la fel de simplă: crearea unui container extern suplimentar în interiorul celui deja descris și limitarea acestuia latime maxima o valoare fixă (subiectiv, mi se pare că valorile în intervalul 1400-1600 pixeli sunt cele mai potrivite). Din nou, folosim doar Instrumente CSS 2.0. Această soluție este în locul celei propuse în primul comentariu simplă adăugare lățimea ca procent pentru containerul original va funcționa și în IE, care până la versiunea 9 nu înțelege indicarea simultană a valorilor.
Adăugarea HTML:
Și schimbați puțin CSS-ul:
div.page-container ( lățime maximă: 75%; lățime minimă: 960 px; marjă: 0 automat; padding: 0; ) div.page-container-inner ( lățime minimă: 960 px; lățime maximă: 1600 px; margine : 0 auto;
După cum puteți vedea, soluția este extrem de simplă și destul de universală, poate fi folosită pentru orice element de bloc.
Când creăm un formular, Tabelul de cuvinte, avem nevoie ca atunci când umplem celulele, dimensiunea acestora să nu se modifice, astfel încât masa să nu se miște. Pentru a face acest lucru, trebuie să instalați dimensiunea celulei fixă în tabelCuvânt
. Cum să faci o broșură în Word, vezi in articol„Crearea unei broșuri în Word”.
Cum se modifică înălțimea rândului într-un tabelCuvânt.
Pentru a modifica lățimea rândurilor și coloanelor, trebuie mai întâi să le selectați.
Prima varianta.
Se recomandă să mergeți la fila „Aspect pagină” din „Opțiuni pagină” iar pe fila „Linie” puneți marimea corecta linii. În fila „Coloană”, setați dimensiunea fiecărei coloane. 
Cum să fixați o masă laCuvânt.
Pentru a preveni mișcarea mesei Foaie de cuvinte, în fila „Tabel”, faceți clic pe butonul „în jur”. Faceți clic pe butonul „Plasare” - configurați parametrii de plasare a tabelului.
A doua varianta.
Faceți clic pe tabel și pe fila „Aspect” ajustați dimensiunile rândurilor și coloanelor. În secțiunea „Dimensiunea celulei”, faceți clic pe butonul „Potrivire automată”. Dacă facem clic pe „ lățime fixă coloană”, atunci lățimea coloanei nu se va modifica pe măsură ce celula este completată. 
Dar amuzant este că în unele versiuni de Word, o fereastră complet diferită de configurare a paginii. Nu există marcaje „Rând” și „Coloană”.
Cum se fixează înălțimea și lățimea liniei Coloana cu cuvinte
, în acest caz. 
Mai întâi la panou acces rapid Să plasăm un buton pentru funcția „Proprietăți tabel”. Clic butonul „Personalizați bara de instrumente de acces rapid”(triunghi cu buton liniuță). Selectați funcția „Alte comenzi”.
Acest buton apare în bara de instrumente Acces rapid și se numește „Proprietăți tabel”. Devine activ când facem clic pe tabel.
Avem nevoie fixați înălțimea rândului în tabelCuvânt.
În secțiunea „Înălțimea rândului” a casetei de dialog, setați-o la „Exact”. Și în linia „Valoare” punem numărul înălțimii liniei. Dar valoarea nu este dată în mm. sau vezi, iar în PT. PT este un punct.
1 pt = 0,35 mm. Este mai simplu – înălțimea standard de rând într-un tabel este de 12 pt. Înălțimea foii A4 orientare portret– 878 pt (29 cm fără margini).
Să punem „48 pt”. Debifați cuvintele „Permiteți împachetarea liniilor pagina următoare».
Faceți clic pe „OK”. A ieșit așa.
