Gniježđenje je stvaranje strukture i elemenata dizajna web-stranice. Pisanje kôda web-stranice obavlja programer za razvoj softvera ili razvojni programer. Ona koristi grafički program za rezanje izgleda, uređivač koda i dodatne programe za ubrzanje procesa.
Što je izgled
Šifra izgleda je kostur stranice, napisana u označni jezik html. Sastoji se od logički razbijenih elemenata dijelova stranice - oznaka. Svaki od njih odgovoran je za svoje područje: izbornik, podrumski prostor, medije, obrasce, karte, pretraživanje stranica, vrijeme. Imaju svojstva, identificirajući pojedine stavke uz njihovu pomoć. Kaskadni stilovi odgovaraju dizajnu, a dinamički efekti su java-skripta. Dobro osmišljen izgled jednako je prikazan na svim preglednicima. Rezultat se određuje nizom testova. Mogućnost rada na više od jedne hardverske platforme naziva se crossplatform. Postoji nekoliko pristupa implementaciji rasporeda, koristeći različite okvire.
\ t Time se osigurava ispravan prikaz stavki na svim vrstama zaslona.
Vrste rasporeda
Standardi se stalno poboljšavaju i, kao posljedica toga, mijenjaju se načini izrade izgleda. Trenutno postoje 3 glavne vrste stranica:
statički;
guma;
je prilagodljiv.
Statički izgledi koji su stranice koje nisu sposobnepromijenite svoj dizajn. Njihov dizajn se ne mijenja, a dimenzije elemenata imaju jasno značenje. Adaptivni raspored znači da će se elementi stranice prilagoditi veličini zaslona uređaja. Kod promjene širine dokumenta dolazi do reorganizacije blokova, neki dijelovi zamjenjuju se drugim, neki elementi nestaju. Ideja prilagodljivosti došla je zamijeniti mobilne verzije stranice koje žive na pojedinim poddomenama. Glavni princip stvaranja prilagodljivosti je dizajn dizajna pod tri ekrana: računalo, tablet, pametni telefon.
Prilikom izrade gumenog uzorka uzimaju se u obzir i promjene u veličini zaslona, a svi elementi se mogu prilagoditi. Glavna razlika od adaptivnog je to što se raspored širi ili sužava ispod zaslona pri svakom trenutku promjene. Provjerite koji se principi koriste kako slijedi. Ako se proteže stranica s protežu prozor preglednika s njom, onda je guma vezanje. Kada se stranica stranica mijenja samo na nekoliko mjesta - tako je prilagodljiva.
Dimenzije prilagodljivog rasporeda
Za izradu prilagodljivih rasporeda koriste se relativne mjerne jedinice umjesto standardnog statičkog px. Najčešći su:
em;
rem;
%.
U adaptivnom rasporedu, html em se koristi za određivanje veličine i udubljenja fonta. Prema zadanim postavkama, 1 em ima 16 piksela. Prema tome, za određivanje fonta za paragraf p od 32 piksela, morate navesti sljedeće: p {font-size: 2em; } Osobitost korištenja jedinice je da je 1em jednakveličinu fonta elementa. To jest, 1em uzima različite vrijednosti u različitim dijelovima koda. Na primjer, u bloku u kojem je veličina fonta 2em (32px), marža u 1em bit će 32 piksela. Ali gdje je font 1em (16px), padding u 1em će biti jednak standardnim 16 piksela. Rem je korijen em, koji je definiran u oznaci. 1 root-em, za razliku od 1em, jednak je broju pod bilo kojim okolnostima. Vrijednost se mijenja samo kada se promjene obavezno izvrše. Postoci se obično koriste za postavljanje širine blokova ili slika. Bez obzira na veličinu zaslona, ona će odgovarati navedenoj vrijednosti, primjerice 80%.
Zahtjevi medija
CSS podržava različite tehničke parametre uređaja. Definiran je pametni telefon s malim zaslonom, određeno je svojstvo stila za njegovu vrijednost. Zahtjevi za medije otkrivaju razlike u orijentaciji: portret i krajolik. Široko se koristi za stvaranje prilagodljivog izgleda. Raspored se prilagođava određenoj razlučivosti zaslona, mijenjajući strukturu dokumenta u skladu s kodom. Definirani su tipovi uređaja:
uređaji za Brailleovo pismo i tiskari za slijepe;
obični pisači ispisuju;
zaslon monitora;
govor govora sintetizatora;
Televizori s TV-om
Značenje imena upita označava nekoliko uvjeta. Na primjer, ispišite sadržaj samo za monitore i samo maksimalnu širinu od 600 px. Izgleda ovako: @media zaslon i (max-width: 600px) {output code}. Adaptivni dizajn temelji se na korištenju medijskih upita. Stvara raspored za zaslone u kojimaMinimalna širina je 1200 piksela, tijelo koda je postavljeno na @media zaslonu i (max-width: 1200 px) {}. Slijedi blok za @media zaslon i (min-width: 700px) {} i @media zaslon i (max-width: 699px) {} mobilnih uređaja.
mobitel prvi
Prema nedavnim podacima, mobilni uređaji i tableti idu mnogo češće od računala. Prema tome, promet mobilnih uređaja postaje sve relevantniji za web-lokacije. Zbog značajki kao što su male veličine zaslona, korisnici gadgeta preferiraju mjesta s prvim redovima pretraživanja, troše manje vremena na traženje informacija. Pristup Mobile First uključuje prikazivanje najvažnijeg sadržaja jednostavnog i optimiziranog web-mjesta te odbijanje preuzimanja drugih resursa. Prilagodljivi izgled stranice za ovu metodologiju uključuje početno stvaranje stranice za male zaslone i naknadno dodavanje elemenata kako je potrebno dizajnu stranice za veliki monitor. Unatoč transparentnosti pristupa, klijenti i implementatori ulažu velike napore kako bi u potpunosti preispitali uobičajenu metodu razvoja stranice.
Bootstrap
Jedan od popularnih okvira koji je dao jednostavan odgovor na pitanje kako napraviti adaptivni raspored je Twitter Bootstrap. S mrežom za pokretanje s 12 stupaca, web-mjesta koja su ispravno prikazana na zaslonima mobilnih uređaja po zadanom se stvaraju. Koriste se glavni alati:
unaprijed određena širina stupova, koja može odrediti širinu elemenata;
fiksne i gumene komponente dokumenta;
ugrađene fontove i klase za njih;
sredstva za crtanje stolova;
klasa dizajna izbornika, alatne trake.
Dinamički učinci zapisani su u jQuery, SASS pretprocesor se koristi za opisivanje izgleda i funkcionalnosti popularnih web-fontova. Web-lokacije razvijene na najnovijoj verziji bootstrap-a ne prikazuju se ispravno u rijetko korištenim verzijama preglednika, kao što su IE8 IE9 i iOS 6. Važno je napomenuti da se ukorijenjeni em koristi kao veličina fonta za neke elemente. Službena web stranica sadrži detaljne priručnike na engleskom i ruskom, primjere prilagodljivog izgleda, načine korištenja ugrađenih komponenti.
Osnova
Zaklada je moćan okvir, jedan od glavnih konkurenata Twitter Bootstrap. Podržava bilo koju veličinu mreže, ima nekoliko prednosti koje nisu dovoljne u Bootstrap. Komponente imaju širok raspon animacijskih efekata koji se mogu prilagoditi. Procesor SASS koristi se za upravljanje stilovima. Popis osnovnih predložaka sadrži klizače, navigacijske ploče i ikone programa Social Media. Dimenzije su dane u vrijednostima navedenima u tablici.
0
smedium
63)
srednji
640px
veliki
1024px )
xlarge
1200 px 1440px
Izgled mreže
Drugi sustav koji zaslužuje pozornost je Izgled mreže. To je skup rutinskih vertikalnih i horizontalnih linija. Oni oblikuju stupce i retke. Elementi su u mreži, njihova veličinaoznačeni su u skladu s crtama i tablicama. Moguće je koristiti fiksne veličine kao što su px i fleksibilne veličine - procenti, rem, i em. Prvo se mora najaviti mrežni spremnik. display: grid Svojstvo grid-template-columns se koristi za određivanje širine i stupaca grid-template-rows. Dimenzije se mogu specificirati u jednom svojstvu grid-template-columns. Širina se mjeri u fr jedinicama, što predstavlja udio raspoloživog prostora u spremniku. Pretpostavlja se da se fx i px mogu koristiti u jednom svojstvu. Na primjer, grid-template-stupci: 500px 1fr 2fr.
Zaključak
Potpuna praksa prilagodljivog rasporeda A do Z uključuje korištenje maksimalnog broja metoda. Za rastavljanje od nule, kakav raspored za sve uređaje, morate ručno koristiti upite medija, izračunati veličinu slika i fontova. Kada dobijete odgovarajuće vještine, možete početi koristiti okvire.
