Un aspect bazat pe grilă CSS vă permite să împărțiți spațiul ecranului în coloane și rânduri folosind o dimensiune precalculată. Puteți personaliza complet acest aspect prin aranjarea elementelor pe linii de grilă - liniile care separă coloanele și rândurile - și pe celule - zonele dreptunghiulare care sunt intersecțiile rândurilor și coloanelor.

Aspectul grilei joacă un rol foarte important, vă permite să creați un design proporțional care poate fi adaptat cu ușurință la diferite rezoluții. Printre alte beneficii, aveți posibilitatea de a seta pozițiile elementelor indiferent de ordinea în care este afișat conținutul. Ca exemplu, puteți lua o listă de articole (care este de obicei afișată ca o singură coloană verticală) și o puteți afișa într-o orientare de grilă rând-coloană.

Puteți găsi exemple practice de utilizare a aspectului CSS bazat pe grilă la următoarea locație:

Acest tip de aspect este de obicei numit „flexbox” (dispoziție „cauciuc”). Această metodă de layout este folosită pentru a crea atât structuri simple, cât și complexe de pagină care se adaptează la diferite ecrane. Avantajul acestui aspect este că poziția relativă a conținutului rămâne aceeași chiar dacă dimensiunea ecranului se modifică. Folosind această structură și distribuind uniform spațiul gol, vă puteți asigura că obiectul este întotdeauna în centrul paginii sau al altui container.

Aspectul fluid este util atunci când este utilizat cu un control ViewBox. Aceste două componente sunt combinate pentru a crea o aplicație de aspect fix în Blend sau Visual Studio. O aplicație cu aspect fix face posibilă crearea unei ferestre de vizualizare fixă ​​pentru conținut, ceea ce înseamnă că dimensiunile nu se vor schimba - spre deosebire de o aplicație care utilizează un aspect bazat pe grilă. Acest aspect poate fi util atunci când creați jocuri JavaScript în care aveți nevoie ca terenul de joc să aibă o anumită lățime și înălțime, indiferent de dimensiunea ecranului.

Puteți găsi exemple practice de utilizare a aspectului CSS fluid la următoarea adresă:

Domeniile CSS vă permit să luați o secvență de conținut HTML - text, imagini - și să o distribuiți în mai multe containere goale definite într-un șablon HTML standard. Șabloanele HTML sunt structurate folosind containere goale care sunt dimensionate și poziționate pentru a oferi conținutului viitor o poziție specifică și pentru a-l limita în limitele containerului.

Zonele CSS nu sunt la fel de importante ca alte forme de aspect. Cu toate acestea, acestea sunt acceptate și vă vor permite să creați structuri complexe de conținut, cum ar fi în reviste. Acestea vă permit să distribuiți aleatoriu un flux secvenţial de conținut (text, imagini, fragmente video). Această schemă de aspect poate fi utilă pe tablete, unde aspectul se modifică în funcție de orientarea ecranului sau, de exemplu, când se afișează o aplicație fixată în Windows 8.

Puteți găsi exemple practice de utilizare a zonelor CSS la următoarea locație:

Aplicațiile WinRT acceptă implicit două formate grafice native: Canvas (pânză) și SVG (Scalable Vector Graphics). Deoarece acestea sunt formate încorporate, putem crea grafice folosind cod - în loc de abordarea tradițională de a folosi fișiere grafice .png sau .jpg prefabricate. Atât pânza, cât și SVG au puncte forte și puncte slabe, dar, în general, s-ar putea să le vedeți ca elemente ale interfeței de utilizare - cum ar fi butoanele de control al jucătorului; sunt ilustrații care pot fi animate și sunt folosite în scopuri de vizualizare a datelor – sub formă de grafice și diagrame.

Canvas este un control care oferă o suprafață de desen pe o pagină. În această suprafață puteți crea forme folosind culori, degrade și umplere cu modele. Puteți manipula pixelii de pe ecran în mod interactiv, puteți scoate text și puteți exporta conținutul rezultat ca fișiere de imagine statice, cum ar fi .png. De asemenea, puteți adăuga animații JavaScript sau CSS pentru a face obiectele pe care le creați să se miște, să dispară, să schimbe dimensiunile și așa mai departe. Deși eticheta< canvas >adăugat la un document HTML, este doar o suprafață pentru desen. Tot ceea ce este legat de acesta este creat folosind JavaScript. De asemenea, odată rezultat, conținutul pânzei este o imagine în pixeli, în timp ce SVG este o grafică vectorială.

SVG folosește modelul obiect element, atributele și stilurile, în acest sens este mai asemănător cu sintaxa HTML. Când un element apare în HTML, se comportă ca și cum ar fi parte din HTML.

Deși ambele formate sunt acceptate, elementele SVG sunt folosite în aplicațiile WinRT pentru a afișa imagini direct. Programele de editare a imaginilor, cum ar fi Adobe Illustrator, vă permit să exportați imagini vectoriale în format .svg. Ilustrațiile și pictogramele pot fi create și utilizate foarte ușor în cadrul aplicației. Deoarece imaginile vectoriale sunt independente de rezoluție, puteți utiliza aceste elemente în design-ul dvs. și se vor redimensiona fără a pierde calitatea, chiar și pe ecrane mai mari. În plus, sunt acceptate filtrele SVG, care vă permit să aplicați efecte de bază, cum ar fi încețoșarea sau nuanța sepia.

Controlul pânzei poate fi utilizat în aplicațiile WinRT pentru aplicații care se concentrează pe captarea datelor de la intrarea utilizatorului tactil și redarea acestora, la fel ca aplicațiile de desen. Controlul pânzei este adesea folosit când se creează jocuri sau în situații în care datele sunt generate în timp real, cum ar fi vizualizarea datelor folosind diagrame și grafice.

În modul, ați învățat cum sunt utilizate principiile de bază ale HTML5 și CSS3 în aplicații și ați experimentat cu exemple practice de aplicare a acestora. Ați învățat despre modele de aspect, interogări media, animații. În special, ați învățat cum să creați un aspect folosind zone, o grilă, cum să creați un aspect „fluid”, un aspect cu mai multe coloane și cum să utilizați interogări media. Ați învățat despre transformări 2D și 3D, tranziții, animații, degrade, umbre, colțuri rotunjite, imagini SVG în linie și despre utilizarea controlului pânzei.

Imaginează-ți că oaspeții vin la tine și că lucrurile sunt împrăștiate în jurul apartamentului tău. Cum crezi că poți „îngriji” rapid dacă nu ai timp de curățat? Răspunsul este simplu: trebuie să aranjați lucrurile în grămezi mici. Acest lucru va crea imediat un sentiment de ordine, apartamentul va arăta ordonat.

O grilă modulară, care este un set de ghidaje, funcționează într-un mod similar. Ghidajele (de obicei verticale și orizontale) formează un fel de cadru. Să spunem asta:

Da, nu există reguli, dar există bun simț. Cu alte cuvinte, mai întâi trebuie să vă gândiți la ce este grila și abia apoi să o construiți. De exemplu, cadrul desenat mai sus poate servi ca un teren excelent pentru a juca tic-tac-toe;)

Apropo, rezultatul utilizării unei grile poate fi... grila în sine. Un exemplu sunt picturile lui Piet Mondrian, care a construit compoziții bazate pe o grilă spațială construită liber, care umplea pânza.

Un exemplu izbitor de opțiune intermediară, când grila este atât parte a designului, cât și rezolvă o problemă specifică, este interfața sistemului de operare mobil Windows Phone.

Deci, pe ce vă puteți baza și pe ce ar trebui să vă bazați atunci când creați o grilă modulară?

Destul de des, în articolele despre grile modulare, puteți întâlni o propoziție care sună astfel:

Nu încadrați designul într-o grilă, creați o grilă care se potrivește cu designul.

La prima vedere, totul pare a fi corect: grila este, în primul rând, un instrument de lucru care nu are sens fără instrucțiuni de utilizare care descriu aranjarea elementelor principale (text, imagini etc.).

Cu toate acestea, după cum arată practica, ambele opțiuni sunt posibile și au loc:

• Designul se potrivește în grilă;
• Grila este creată conform designului.

Să luăm în considerare fiecare dintre ele separat.

Exemplul unu: trebuie să creați un design de site web pentru o revistă științifică. În același timp, clientul dorește ca revista să fie „fața” site-ului și cere să o plaseze pe pagina principală. Coperta nu arată foarte bine, ca să spunem ușor:

Nu vom discuta despre valoarea artistică a acestei coperți. Să ne concentrăm mai bine pe execuție - este clar șchiop:

• Există sentimentul că elementele au fost „schițate” în planul paginii în grabă, pozițiile lor nu sunt justificate în niciun fel;
• Dimensiunile din layout sunt incomensurabile și disproporționate, nu este clar ce determină cutare sau cutare dimensiune;
• Nu există accente, marginile sunt înguste, obiectele intră în conflict între ele, ochiul rătăcește peste copertă;
• Lucrări incompetente cu text, atât din punct de vedere al fonturilor (autorul a numărat cel puțin 5), cât și din punct de vedere al tipografiei (există „găuri” între articolele individuale din lista articolelor cheie);
• Culori „murdare”.

Evident, oricât de bun am venit cu un design de site web, o astfel de copertă îl va duce la nimic. Trebuie adus în minte și grila ne va ajuta în acest sens. Să luăm ca bază înălțimea dungii visiniu (7 mm) și să desenăm o grilă cu un pas similar vertical și orizontal. Apropo, benzile de sus și de jos „cad” miraculos în el.

Grila demonstrează în mod clar natura deplorabilă a situației: obiectele nu sunt aliniate unele față de altele, au dimensiuni de neînțeles, în general, „unele sunt în pădure, altele sunt pentru lemn de foc”.

Pentru a restabili ordinea, haideți să încadram designul în grilă, luați în considerare doar o mică nuanță. Elementele individuale (numele revistei, sigla APEL, numărul) sunt supradimensionate, făcând coperta să pară grea. Să reducem pasul grilei cu 1 mm, acest lucru ne va oferi în cele din urmă un design ușor și fără sudură în percepție:

Acoperiți cu sau fără grilă

• Elementele sunt dispuse pe o grilă și sunt proporționale între ele, au apărut margini largi bune;
• Accentul principal este pe titlul revistei;
• Au fost corectate fonturile și tipografia, ceea ce împreună cu grila ne oferă o soluție completă.

Drept urmare, obținem această imagine minunată pentru pagina principală a site-ului:

Să mergem mai departe. Într-unul dintre articolele anterioare, autorul a discutat în detaliu etapele creării unui site web pentru cărți de vizită. Citiți-l dacă nu ați făcut-o deja și acordați atenție modului în care este construit designul: obiectele de pe pagină sunt plasate secvenţial - de la general la specific, de la elementele principale la cele secundare.

Cu această abordare, atunci când aspectul este determinat de sarcină, elementele sunt de obicei localizate pe pagină „prin ochi”, ele, deși nu mult, „dansează” unul față de celălalt; Din nou, nu este clar pe ce să ne concentrăm atunci când alegeți dimensiunea imaginilor, blocurilor de text etc. Într-o astfel de situație, potrivirea designului într-o grilă ne va ajuta din nou.

Tot ceea ce ne înconjoară are propriile sale proporții. Chiar și în copilărie, desenul animat „38 de papagali” ne-a învățat că totul poate fi împărțit în părți egale între ele (lungimea boa constrictor a fost formată din 38 de papagali). De asemenea, știm cu toții că înălțimea unei persoane este egală cu șapte din capetele sale, un centimetru este format din zece milimetri, un metru este format din o sută de centimetri și așa mai departe. Astfel, un papagal din desene animate, un cap de om, un milimetru și un centimetru sunt module.

Din toate acestea putem înțelege că un modul este o unitate convențională, un pas în ritmul grilei. Și grila în sine este un sistem de proporții.

Cum ne va ajuta această grilă modulară? În primul rând, va grăbi munca, deoarece nu va trebui să petrecem mult timp încercând să aranjam toate elementele armonios. În al doilea rând, cu ajutorul grilei putem înțelege ce punct trebuie să folosim și ce dimensiune ar trebui să aibă fiecare bloc. În general, o grilă modulară este un cadru care facilitează foarte mult construirea unui site web.

Să ne uităm la ce sunt ochiurile.

1. Cel mai simplu tip este o grilă bloc. Adică face marcaje brute, împărțind zona în blocuri.

3. Grila modulară are nu numai diviziune verticală, ci și diviziune orizontală. Astfel, ceea ce se obține la intersecțiile liniilor este modulul.

4. Există și o grilă ierarhică, blocurile în care sunt plasate intuitiv și nu urmează niciun tipar.

Deci, cum să creați o grilă modulară.

1. În primul rând, trebuie să înțelegem ce funcție va avea de îndeplinit site-ul nostru, vom identifica structura și compoziția paginilor acestuia. Apoi stabilim care pagini vor fi cele mai importante și va începe lucrul cu ele. Pentru ei, vom crea o listă de funcționalități și o vom sorta după prioritate.

Trebuie să descriem fiecare bloc de funcționalitate și să-l detaliem până la cel mai mic detaliu. Rezultatul ar trebui să fie o listă în care blocurile și elementele lor sunt listate pe nivel. Astfel, acum avem puzzle-uri turnate din cutie și tot ce trebuie să facem este să le asamblam într-o imagine completă.

3. Începem construirea grilei prin determinarea dimensiunilor zonei de lucru. În continuare trebuie să facem grila de fonturi. Pentru a face acest lucru, selectați înălțimea rândului, care ar trebui să fie aceeași pentru întregul aspect. În elementele care au o dimensiune a fontului diferită de dimensiunea fontului textului principal, spațiul de linie trebuie să fie un multiplu al înălțimii liniei noastre.

Astfel, obținem baza viitoarei noastre plase. Întregul text se va sprijini pe această bază.

4. Acum trebuie să decidem cât de larg va fi modulul nostru. Aici putem începe de la lățimea oricărui element permanent. Dacă aveți sarcina de a plasa niște elemente identice pe lățimea paginii, atunci totul devine și mai ușor, pentru că le cunoașteți deja dimensiunile.

Pentru comoditate, trebuie să stabilim care va fi distanța dintre module. Trebuie să fie egală cu cel puțin o înălțime de linie din paragraful anterior.

Există o avertizare - trebuie să alegeți dimensiunile corecte ale modulelor, deoarece, dacă sunt prea mari, flexibilitatea rețelei va dispărea, iar dacă sunt mici, plasa se va pierde pur și simplu.

5. Împărțirea orizontală este destul de simplu de făcut. Înălțimea sa trebuie să fie un multiplu al înălțimii liniei noastre. Și câte linii introduceți într-o diviziune depinde de schița dvs.

În această lecție ne vom pregăti pentru aspectul site-ului folosind un aspect PSD, folosind doar sistemul Grid din cadrul Bootstrap 4. Învățând această metodă de aspect, vă scutiți de posibile probleme cu adaptabilitatea site-ului, acest lucru este deosebit de bun pentru începători.

Adaptabilitatea site-ului atunci când este aranjat folosind grila Bootstrap este asigurată de sistemele flexbox, suportate de toate browserele majore și chiar de Internet Explorer, începând cu IE9+. Pentru versiunile anterioare IE 9, includem scripturi care ajută la afișarea corectă a aspectului nostru.

Și cel mai important, aspectul PSD trebuie desenat inițial ținând cont de aspectul Bootstrap ulterioar. Și așa, nu există alte motive pentru care să nu dispuneți folosind o grilă bootstrap, atât în ​​proiectele dvs., cât și la comandă. Voi încerca să dau mai puțină teorie, fără apă și mai multă practică.

Deschideți aspectul în Photoshop și asigurați-vă că are un aspect cu 12 coloane de-a lungul liniilor directoare și că toate elementele de design sunt aliniate la liniile directoare. Distanța dintre ghidajele exterioare este de obicei de 1170 pixeli.

Descărcați pe site https://getbootstrap.com/ CSS și JS compilat pentru o integrare ușoară în proiectul dvs.

Copiați din secțiune Introducere / șablon de pornire- șablonul de pagină de pornire și inserați-l în fișierul HTML index al proiectului dvs. Am creat un șablon pentru viitorul document HTML.

Se crede că fișierul bootstrap.min.css se va încărca mai repede, deoarece se află pe mai multe servere, și nu pe un singur server. Aceasta înseamnă că site-ul se va deschide mai repede. Dacă tot decideți să descărcați acest fișier pentru dvs., atunci specificați calea corectă către folderul cu fișiere Bootstrap. În orice caz, trebuie să creați un fișier CSS gol în care vă veți scrie stilurile.

Important! Fișierul dvs. CSS din fișierul index ar trebui să fie inclus mai jos decât bootstrap.min.css .

Conectăm fonturile. Ce fonturi și pictograme folosește designerul în aspect pot fi văzute în Photoshop sau în extensia browser Chrome - WhatFont.

Fișierul CSS bootstrap.min.css este o bibliotecă în care nici măcar nu trebuie să intri. Lucrăm cu un singur fișier - main.css, dar trebuie să ne asigurăm că numele noilor clase pentru fișierul dvs. CSS nu coincid accidental cu cel „biblioteca”.

În fișierul bootstrap.min.css, stilurile pentru grila flexbox au fost deja create și au fost scrise interogări media, trebuie doar să adăugăm clasele corespunzătoare la blocurile necesare de pe pagina HTML. Numele claselor pot fi găsite pe pagina cadru din secțiune Grilă. Designerii de aspect cu experiență pentru aspectul Bootstrap conectează pluginurile (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) la editorul de cod Sublime Text.

Vedem că site-ul este format din 8 blocuri: un antet cu meniu de navigare (nav), 6 secțiuni (secțiune) și un subsol.

În secțiuni (secțiunea: #servicii, #portfolio) apar coloane pe care le vom dispune în funcție de componenta principală Bootstrap - grila.

Mai întâi facem marcajul HTML al structurii principale, vom adăuga detalii pe măsură ce aspectul progresează.

În partea următoare, vom începe aspectul, dar nu întregul aspect, ci blocurile sale individuale. Deoarece scopul acestor lecții este de a le arăta începătorilor cum să combine cu succes aspectul de aspect convențional cu aspectul de grilă Bootstrap.

Un aspect bazat pe grilă este un aspect cu ghiduri orizontale și verticale care ajută la organizarea conținutului și la menținerea unei structuri consistente pe parcursul creării unui proiect.

De foarte mult timp, designerii profesioniști folosesc grile pentru a dezvolta modele care au proporții optime. Ele, la rândul lor, ajută la îmbunătățirea citirii textului. Grila folosită astăzi în design web a fost creată încă din anii 1920 de designeri elvețieni foarte talentați, iar de atunci designul cu care au venit a devenit standardul mondial pentru organizarea conținutului pe paginile proiectelor de pe Internet.

Datorită standardului, designerii web pot rezolva cu ușurință multe dintre problemele pe care le întâmpină atunci când lucrează cu aspecte bazate pe grilă. Să ne uităm la câteva aspecte ale unui aspect bun care pot fi aduse la viață printr-un sistem de rețea.

Împărțirea conținutului în anumite coloane îi ajută pe dezvoltatorii web să înțeleagă cum vor fi acțiunile lor pe diferite dimensiuni de ecran. De asemenea, puteți crea o „grilă flexibilă” în HTML și CSS care se bazează mai degrabă pe procente decât pe valori fixe. Pur și simplu puteți reduce numărul unor coloane și puteți transforma conținutul.

Tot conținutul va fi aliniat de-a lungul coloanelor verticale pe toată lungimea paginii. Acest lucru vă permite să creați un echilibru vizual excelent utilizând aceleași distanțe și containere orizontale pe tot parcursul.

Dacă utilizați același sistem de grile pe tot parcursul designului dvs., puteți prezenta doar un aspect consistent și puteți crea un șablon care vă organizează textul. În acest fel, puteți economisi timp utilizând același aspect pentru diferite pagini ale site-ului dvs., iar toate elementele vor avea aceeași dimensiune.

Să ne uităm la un exemplu de site care utilizează un sistem grilă.

În imagine puteți vedea o grilă cu 12 coloane, care este cel mai popular aspect în design web. Cu atâtea coloane, vă puteți împărți cu ușurință conținutul în patru, trei sau două coloane. Dacă luați un aspect cu 16 coloane, puteți obține mai multe oportunități, dar, în același timp, vor apărea o serie de dificultăți în lucrul cu designul. Un aspect cu opt coloane este o opțiune bună de utilizat, dar nu vă va permite să vă împărțiți conținutul în mai mult de trei coloane. Prin urmare, designerii web profesioniști recomandă utilizarea unei grile cu 12 coloane.

Principiul principal al proiectării unui aspect al grilei este ca fiecare coloană din grilă să aibă aceeași lățime și să aibă spații egale între ele. Pentru a calcula lățimea coloanelor, puteți folosi matematică simplă.

De exemplu, lățimea paginii va fi de 1140 de pixeli, grila va fi formată din 12 coloane și vor fi 11 spații. Inițial, trebuie să înțelegeți care va fi lățimea spațiilor: de exemplu, 12 pixeli.

După ce am făcut toate calculele, ajungem la un aspect care va avea 12 coloane de 84 de pixeli și 11 spații de 12 pixeli, iar întreaga lățime va fi de 1140 pixeli. Această tehnică poate fi folosită pentru orice calcul, principalul lucru este să cunoașteți lățimea paginii și spațiile.

Aceasta este o sarcină destul de plictisitoare și care necesită timp. Pentru a face acest proces mai rapid și mai distractiv, majoritatea designerilor recomandă utilizarea Photoshop CC 2014. Vine cu o nouă caracteristică numită Guide Layout. Va face posibilă crearea plasei dorite cu curbe verticale și orizontale într-un timp scurt.

Există câteva nuanțe în grătare care le fac greu de perceput. Înainte de a începe configurarea aspectului, trebuie să vă asigurați că sistemul de grilă pe care îl utilizați va fi ușor de utilizat pentru dezvoltatorii web atunci când vă creează designul.

Utilizarea grilelor în dezvoltarea unui design de aspect pentru un proiect web poate fi foarte utilă. Această practică este destul de simplă și populară printre majoritatea designerilor.

Să ne uităm la câteva exemple destul de interesante de site-uri web și la modul în care grila este utilizată și umplută cu text.