Share
Grilă 960 este un CSS Framework care permite dezvoltatorilor să proiecteze rapid prototipuri. Ele sunt instrumente excelente pentru crearea de machete. De ce? Pentru că fac toate ridicările grele, permițându-vă să obțineți rezultate mai rapide.
Sună frumos, dar cum facem asta? Există o mulțime de articole pe internet care exploatează sau susțin cadrele CSS, dar niciunul nu are conținut pentru a ajuta cititorii fără experiență să decidă. Aceasta este diferită. Acest articol acoperă întregul proces de prototipare. Imaginați-vă că vă este dat un design și aveți nevoie de o machetă pentru client. Acest articol explică elementele de bază ale rețelei 960, planificarea rețelei pentru un design și codarea prototipului. Proiectarea eșantionului va exploata cele mai multe capabilități ale Grid 960, oferindu-vă o bază de cunoștințe fermă pentru a lucra la. După ce ați văzut designul de mai jos, este timpul să aflați cum funcționează Grilă 960.
Grila 960 funcționează prin folosirea clasei prin moștenire. Grilă 960 oferă două grile: 12 și 16 coloane. Containerul principal are întotdeauna o lățime de 960 pixeli. Utilizarea 960 permite cele mai multe combinații de coloane în timp ce este ușor de utilizat. Vom folosi grila de coloană 12 pentru a codifica acest design, dar nu vom folosi toate cele 12 coloane. Fiecare celulă de rețea are a margine: 0 10px. Acest lucru creează un jet de 20 de pixeli. Când creați un rând, lățimea totală a tuturor elementelor adaugă până la 960. Uitați-vă la pagina demo a Grid 960. Veți vedea o rețea frumoasă cu tot felul de combinații. Fiecare celulă de rețea are o clasă care specifică ce lățime va fi. Aici este ruperea lățimii coloanelor pentru o grilă de 12 coloane.
Fiecare lățime corespunde unui nume de clasă format astfel: grid_X unde X este un număr din lista de mai sus. Dacă doriți un bloc cu lățime 940 de clasă de utilizare grid_12. Cum știe grila 960 ce lățime ar trebui să fie? Fiecare grid_x este un selector container_Y .grid_X unde Y este fie 12, fie 16 pentru coloane. Să ne aruncăm într-un anumit cod. Iată cum puteți crea o rețea de două rânduri într-un container cu 12 coloane. Fie primul rând 940 de pixeli, iar al doilea rând conține două coloane egale.
940px
460px
460px
Atunci când creați un rând în rețea, asigurați-vă că toate numerele grid_X copilului ajung până la numărul de coloane pe care le utilizați. Aceasta asigură lățimea corectă. Două grid_6 div sunt de până la 12. Nu ești limitat la aceleași numere. Puteți utiliza, de asemenea, 6, 4 și 2. Acolo îl aveți, o grilă rapidă pregătită pentru conținut. Acum că știți cum funcționează Grid 960, vă permite să vedeți cum să creați macheta.
Vizualizarea grilei designului este ușoară. Există un rând pentru imaginea antetului, un rând pentru bara de navigație, un rând cu 2 coloane pentru povestea principală și poster, un distanțier, 4 coloane, un distanțier, decât un subsol cu 3 coloane. Faceți clic pe imaginea pentru cod.
După verificarea vizualului, ar trebui să înțelegeți cum să creați grila mockup-ului. Folosind lățimea, potriviți clasa # din lista și permiteți aruncarea unui cod împreună. Nu uitați să adăugați div divizarea la sfârșitul fiecărui rând. Nu uitați să includeți foile de stil incluse în pachetul Grid 960.
Scheletul este gata. Este timpul să începeți suprapunerea proiectului. Barele verzi sunt doar divuri cu o culoare de fundal și înălțime. Navbar nu are o înălțime setată. În schimb, acesta va fi controlat de dimensiunea legăturilor din interior. Nu uitați să adăugați și imaginea antetului.
div.spacer background-color: # 8FC73E; înălțime: 1em; div # navbar culoare-fundal: # 8FC73E; padding: 10px 0;
Aplicați clasa pentru a corecta grid_12 divs și setați ID-ul.
Coloanele din mijloc nu necesită efecte. Adăugați un text pentru titularul locului pentru a completa proiectul. Puteți face ceva aici. Înainte de a aborda secțiunea de sus, treceți la subsol. În captura de ecran, subsolul este o culoare solidă. Nu puteți realiza acest lucru cu codul curent. Un înveliș div în jurul celor trei coloane de jos rezolvă problema. Deci, crezi că nu e mare lucru, introdu un div. Asta sparge grila deoarece Grid 960 se bazeaza pe parinti si copii pentru a aplica stilurile (aminteste-ti selectorul container_12 .grid_4?) Un subgrid rezolva problema. Grila 960 permite rețelele imbricate. Creați un subgrid prin adăugarea unui grid_12 div, apoi plasați grid_4 în interiorul acestuia. Atunci când se utilizează grilaje imbricate, elementele de copii necesită clase speciale. Primul copil are nevoie de o clasă "alfa", iar ultimul copil o clasă &qout;omega "Modificați marcajul pentru a reflecta modificările și pentru a aplica modificări stilistice la subsol.
div # footer fundal-culoare: # e5e5e6;
Excelent! Acum, subsolul are o culoare de fond solidă și puteți ajusta dimensiunile coloanelor, dacă este necesar. Adăugați un text fictiv în coloana subsolului pentru acum și permiteți mutarea la navbar. Navbar este o listă simplă neordonată. Adăugați câteva linkuri și un stil adecvat.
div # navbar ul stil-list: nici unul; afișare: bloc; margine: 0 10px; div # navbar ul ul float: left; marja: 0 1,5; font: bold 1em Arial;
Dulce. Pagina se apropie cu adevărat. Tot ce a mai rămas este crearea efectelor de blocare în secțiunea de sus. Acest lucru este mai sinistru decât pare. Înainte de a ne scufunda, trebuie să realizați câteva lucruri despre cadrele Grid 960 și CSS în general.
Este posibil ca cititorii să fi realizat ceva. Pagina este extrem de rigidă. Totul are o dimensiune definită, iar modificarea mărimii creează probleme sau poate întrerupe designul. Designerii sacrifică, de asemenea, unele dintre obiectivele noastre de proiectare pentru că ceea ce permite Grid 960. De exemplu, designul eșantionului a fost de 1000 pixeli lățime. Grilă 960 creează numai grile cu lățimea de 960 pixeli, astfel încât dimensiunea suplimentară este pierdută. Ce se întâmplă dacă doriți să faceți pagina dvs. 1000px în loc de 960? Pe scurt, nu puteți face fără a face unele modificări grele la cod. Cadrul încadrează designerii într-un set de constrângeri. Spune clientul dorește un design mai larg sau mai subțire. Designerul va trebui cel mai probabil să elimine codul pe care l-au scris pentru a-și atinge noile obiective. Există o altă problemă care încă nu a fost dezvăluită - coloane de înălțime egale. Deoarece toate coloanele din mijloc au același fundal, ele par a fi înalte egale. În subsolul dvs., un wrap div pune un fundal în spatele celor 3 coloane. Grila 960 nu vă oferă coloane de înălțime egale. Există, desigur, un mod în care puteți realiza acest lucru pe cont propriu. Din moment ce suntem un prototip un design, nu vă faceți griji cu privire la detaliile mai fine despre modul în care designul va funcționa atunci când în producție. Încercați doar să transmiteți ideile în acest stadiu. Există, de asemenea, un alt aspect al Grilei 960 care trebuie luat în considerare înainte de a aborda secțiunea de sus. Grilă 960 se bazează pe elemente și margini dimensionate pentru a crea un rând corect dimensionat. Dacă aplicați umplutură sau margini, proiectul se rupe. Dacă faceți acest lucru, trebuie să ajustați mărimea div pentru a reflecta modificările. Fii obosit de asta. Ajustarea dimensiunilor elementelor în două locuri va duce întotdeauna la confuzie și va face ca proiectul să fie mai greu de întreținut. Acestea fiind spuse. Permite terminarea secțiunii de sus.
Din fericire puteți manevra în jurul coloanelor cu înălțime egală în secțiunea de sus. Deoarece imaginea din dreapta, ca înălțime și lățime setată, știm dimensiunea celeilalte coloane. Creați efectul de bloc prin adăugarea unui nou div cu o margine în divs existente. Nu uitați să setați înălțimile. Nu setați căptușeala pe div, deoarece aceasta va schimba lățimea blocului și va rupe grilă. În schimb, specificați o marjă pentru un element copil. Aceasta nu va schimba lățimea blocului. Aplicați o marjă unui element inline. Aceasta creează efectul dorit, iar textul se înfășoară.
Utilizați o clasă în loc de ID, deoarece clasa topSection este aplicată la două divizii. Acest lucru ne permite, de asemenea, să schimbăm mai ușor înălțimile. Alegeți o înălțime (acest număr este cu adevărat dependent de dvs.) și creați o clasă.
div.topSecția div graniță: solid 10px # e5e5e6; înălțime: 280px; div.topSection div p (margine: 10px;
Rece! Să verificăm progresul.
Sunteți pregătit să umpleți cele două cutii? Mergeți înainte și completați partea stângă cu câteva exemple de text. Nu face prea mult sau se va depasi cutia. Acest lucru creează o problemă potențială în proiectarea finală. De unde știi cât de mult este prea mult textul? Pentru designul de producție, designerul ar trebui să creeze o funcție care să permită doar cantitatea de cuvinte X pentru a opri fluxul de peste. E timpul să obțineți imaginea posterului. Înainte de a introduce o imagine, determinați dimensiunile. Dacă sunteți un matematician bun și înțelegând modelul cutiei, știți cel mai probabil cât de mare ar trebui să fie. Dacă nu, ardeți FireBug și faceți un vârf în DOM. Faceți clic pe Inspectați. Mergeți la div și faceți clic pe el. Deschideți fila Aspect. FireBug va afișa o referință de referință pentru modelul cutie. Consultați imaginea pentru ajutor. Faceți clic pe imagine pentru a afișa dimensiunea maximă.
Imaginea de ecran afișează posterul div este 360x280. Găsiți o imagine și creați un stil. Am decis să las imaginea să umple întreaga div (spre deosebire de modelul de eșantion.) Dacă doriți să creați o marjă de 10px, asigurați-vă că pentru a reduce dimensiunile cu 20px pe fiecare parte.
img # poster lățime: 360px; înălțime: 280px;
Ar trebui să obțineți asta. Mockup-ul este complet. Simțiți-vă liber să aruncați niște text real și să schimbați imaginea în jur.
Acum, când prototipul este terminat, să ia în considerare ceea ce sa făcut. Ați reușit să prototipați rapid un design. Grilă 960 a creat cu ușurință grila pentru noi. Unde merg de aici? Firește, i-am arăta clientului și să vedem ce cred ei. Există însă câteva avertismente. Ați testat acest design în IE6 sau IE7? Nu. Nu. Acesta este un prototip. Așa ar arăta în producție. Este normal ca orice tip de browser să fie elaborat înainte de producție. Ce se întâmplă dacă clienții doresc să creeze un design mai complex? În acest caz, veți începe rapid să vedeți limitele cadrului. Ce se întâmplă dacă designul trebuie să fie lichid sau elastic? Cadrul nu va face asta. Va trebui să începeți de la zero. Amintiți-vă că CSS Framework-urile nu vă rezolvă toate problemele, dar vă ajută cu unii. Grila 960, precum și altele sunt excelente pentru aruncarea împreună a prototipurilor. Puteți utiliza la fel de bine și conceptele Grid 960 din codul de producție, dar nu este recomandat să lipiți cu un cadru tot timpul prin producție. Cadrele CSS sunt la fel ca orice instrument, au utilizările lor. Având în vedere acest lucru, mergeți mai departe și prototipul!
Accentsconagua