Ne-am familiarizat deja cu structura șablonului, am învățat cum să determinăm tipul de șablon și am dezasamblat comenzile de bază pentru afișarea conținutului. Dar nu am făcut cel mai important lucru - nu am făcut un șablon. În acest articol, vom începe să creăm un marcaj de șabloane, vom fi familiarizați cu crearea unui șablon "din cauciuc".
Aș dori să clarific faptul că există două tipuri de șabloane - fix și cauciuc. Un șablon "din cauciuc" va fi denumit un șablon care se adaptează automat la o anumită lățime a ferestrei browserului utilizatorului. Acest aspect are mai multe avantaje:
- Utilizați tot spațiul disponibil al browserului
- Utilizatorii cu monitoare "mici" nu au bare de derulare orizontale
- Utilizatorii de monitoare "mari" se pot bucura de eficiența întregii zone a ecranului, ceea ce înseamnă că banii pentru monitor nu au fost irosiți :)
- Astfel de șabloane sunt imprimate convenabil pe hârtie de orice format
Majoritatea designerilor folosesc pentru a crea un tabel de tabel de cauciuc, sau, cu alte cuvinte, aspectul tabelului unui șablon. Da, cu siguranță este mai ușor să învățați aspectul unei mese decât într-un layout pe straturi, dar, în opinia mea, utilizarea tablelor are dezavantaje, sa spus mai sus și voi adăuga:
- Cu mese mari de cuiburi este dificil să găsiți piesa potrivită de cod și să o înlocuiți. Imaginați-vă cât de mult timp este nevoie pentru a găsi două sau trei linii între tabelul infinit / tr / td!
Și trebuie să clarificăm încă un lucru: atunci când creați un aspect, vom folosi stiluri (CSS), deci dacă ați auzit despre CSS pentru prima dată, atunci înainte de a crea șablonul direct, citiți ghidul "Pas cu Pas" către CSS. De ce am ales acest ghid? Este scris într-un limbaj literar, ușor de înțeles și este prevăzut cu un număr mare de exemple.
În acest exemplu, pentru claritate, am definit stilurile din titlul documentului, dar, din nou, doar pentru claritate. Mai târziu, noi "luăm" toate stilurile din document într-un fișier separat. Acum, să începem să studiem codul.
Am plasat marcajul șablonului într-un container comun
, pentru care am stabilit o lățime de 80% din rezoluția ecranului utilizatorului. Coloanele din stânga, din centru și din dreapta au o lățime proprie, care este de asemenea stabilită în procente. Lățimea fiecărei coloane este calculată din lățimea containerului părinte (). Pentru fiecare coloană, parametrul float: stânga este utilizat pentru a plasa toate coloanele orizontal. Pentru "subsolul" șablonului, am aplicat clauza: ambele proprietăți, care indică sfârșitul aliniamentului spre stânga și, ca rezultat, obținem un "subsol" sub toate cele trei coloane.Pentru a adăuga eleganța șablonului nostru, precum și pentru a îmbunătăți lizibilitatea textului, trebuie să adăugați linii de la marginile coloanelor pentru elementele incluse în fiecare coloană. Toată lumea, fără ezitare, a folosit proprietatea de umplutură, dar Internet Explorer nu interpretează întotdeauna stilurile așa cum ne-ar plăcea. Prin urmare, pentru a suporta compatibilitatea cu browserele încrucișate (suport pentru diferite browsere) în șablonul nostru, voi adăuga încă un strat pentru fiecare coloană:
: