Prilagodljivi izgled web-lokacije: upute korak-po-korak s primjerima

Izgled je stvaranje strukture i dizajna elemenata web stranice. Kôd za pisanje za web-stranicu je dizajner izgleda ili razvojni programer. Koristi grafički program za rezanje rasporeda, uređivač koda, dodatne programe za ubrzanje procesa.

Što je izgled

Šifra izgleda je kostur stranice stranice, napisana u označni jezik html. Sastoji se od logički podijeljenih na dijelove stranice - oznake. Svaki od njih odgovoran je za svoje područje: izbornik, podnožje, mediji, obrasci, karte, pretraživanje web-mjesta, vrijeme. Imaju atribute, uz njihovu pomoć identificiraju se pojedini elementi. Cascading style sheets su odgovorni za dizajn, a javascript za dinamičke učinke.

Kvalitativni 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 cross-platform. Postoji nekoliko pristupa implementaciji rasporeda, koristeći različite okvire.

Za izradu stranica prema suvremenim standardima koriste se različite metode adaptivnog rasporeda. Time se osigurava ispravan prikaz elemenata na svim vrstama zaslona.

Vrste izgleda

Standardi se konstantno poboljšavaju, i kao rezultat toga, mijenjaju se načini izrade rasporeda. Trenutno postoje 3 glavne vrste stranica:

• statična;
• guma;
• prilagodljiva.

Statični izgledi su stranice koje ne mogu promijeniti svoj dizajn. Njihov dizajn se ne mijenja, a dimenzije elemenata imaju jasno značenje.

Adaptivni raspored podrazumijeva da će se elementi stranice prilagoditi veličini zaslona uređaja koji se koristi. Kada se promijeni širina dokumenta, blokovi se ponovno izgrađuju, neki dijelovi zamjenjuju drugi, neki elementi nestaju. Ideja o prilagodljivosti zamijenila je mobilne verzije stranice, živeći na odvojenim poddomenama. Glavni princip stvaranja prilagodljivosti je razviti dizajn za tri ekrana: računalo, tablet, pametni telefon.

Prilikom izrade gumenog izgleda uzima se u obzir i promjena veličine zaslona, ​​a svi elementi se podešavaju. Glavna razlika od adaptivnog je u tome što se raspored širi ili skuplja ispod zaslona u svakom trenutku promjene.

Provjerite koja se od načela koriste kako slijedi. Ako se, prilikom istezanja prozora preglednika, zajedno s njom rastegne stranica, onda je to gumeni izgled. Kada se stranica stranice promijeni na samo nekoliko mjesta, to znači da je prilagodljiva.

Veličine prilagodljivog rasporeda

Za stvaranje prilagodljivih rasporeda koriste se relativne jedinice mjerenja umjesto standardnog statičkog px. Najčešći:

• em;
• rEM;
• %.

U adaptivnom rasporedu na html, em se koristi za postavljanje veličina fonta i uvlake. Prema zadanim postavkama, 1 em ima 16 piksela. Prema tome, da biste postavili font za paragraf p veličine 32 piksela, morate navesti sljedeće:

p {

veličina fonta: 2em;

}

Osobitost korištenja jedinice je u tome što je 1em jednak veličini fonta njegovog 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 bit će jednak standardnim 16 piksela.

Rem - root em, koji je definiran u oznaci , 1 root-em, za razliku od 1em, jednak je jednom broju pod bilo kojim okolnostima. Vrijednost se mijenja samo kada su promjene prisiljene.

Postoci se obično koriste za postavljanje širine blokova ili slika. Bez obzira na veličinu zaslona, ​​ona će odgovarati navedenoj vrijednosti, primjerice 80%.

Upiti za medije

CSS uključuje podršku za različite tehničke parametre uređaja. Određuje se pametni telefon s proširenjem malog zaslona, ​​a svojstvo stila označava se ispod njegove vrijednosti. Medijski upiti otkrivaju razlike u orijentaciji: portret i krajolik. Široko se koristi za stvaranje prilagodljivog izgleda. Izgled prilagoditi navedenom razlučivosti zaslona struktura dokumenta mijenja se u skladu s kodom.

Određene vrste uređaja:

• uređaji za Brailleovo pismo i pisači reljefni za slijepe;
• konvencionalni pisači ispisuju;
• zaslon monitora;
• govor sintetizatora;
• tv tv.

U vrijednosti imena zahtjeva postoji nekoliko uvjeta. Na primjer, prikazati sadržaj samo za zaslone monitora 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 ekrane minimalne širine 1200 piksela, tijelo koda je postavljeno na @media zaslonu i (max-width: 1200px) {}. Zatim se stvara blok za @media zaslon i (min-width: 700px) tableti {} i @media zaslon i (max-width: 699px) {} mobilni uređaji.

Prvo mobitel

Prema najnovijim pokazateljima, od mobilnih uređaja i tableta do Interneta dolaze češće nego s računala. Prema tome, mobilni promet postaje sve značajniji za web-lokacije. Zbog takvih značajki kao što je mala veličina zaslona, ​​korisnici gadgeta preferiraju web-lokacije iz prvih redaka rezultata pretraživanja, troše manje vremena na traženje informacija.

Pristup tvrtke First First uključuje prikazivanje najvažnijeg sadržaja, jednostavnu i optimiziranu web-lokaciju, odbijanje preuzimanja drugih resursa.

Prilagodljivi raspored stranice prema ovoj metodologiji osigurava 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 revidirali uobičajenu metodu razvoja web-mjesta.

bootstrap

Jedan od popularnih okvira koji je dao jednostavan odgovor na pitanje kako napraviti prilagodljivi raspored je Twitter Bootstrap. Uz pomoć rešetke za pokretanje s 12 stupaca, web-mjesta se stvaraju tako da se odmah prikazuju ispravno prema zadanim postavkama na zaslonima mobilnih uređaja. Glavni korišteni alati su:

• unaprijed određena širina stupova, koja može odrediti širinu elemenata;
• komponente fiksnih i gumenih dokumenata;
• ugrađene fontove i klase za njih;
• sredstva za dizajniranje stolova;
• dizajn klase u alatnoj traci izbornika.

Dinamički efekti su napisani u jQuery, SASS procesor SASS se koristi za opisivanje izgleda, a popularni web fontovi ugrađeni su u funkcionalnost. Web-lokacije razvijene na najnovijoj verziji bootstrap-a nisu ispravno prikazane u rijetko korištenim verzijama preglednika kao što su IE8, IE9 i iOS 6. Važno je napomenuti da se root em koristi kao veličina fonta za neke elemente. Službena web stranica ima detaljne priručnike na engleskom i ruskom jeziku, primjere prilagodljivog izgleda, načine korištenja ugrađenih komponenti.

temelj

Zaklada je snažan okvir, jedan od glavnih konkurenata Twitter Bootstrap. Ona podržava sve veličine rešetke, ima brojne prednosti koje nedostaju u Bootstrap.

Komponente se odlikuju velikim skupom različitih animacijskih efekata koji se mogu prilagoditi. Za upravljanje stilovima koristi se SASS pretprocesor. Popis osnovnih predložaka sadrži klizače, navigacijske trake, ikone programa Social Media.

Veličine se određuju prema vrijednostima navedenim u tablici.

Izgled mreže

Drugi sustav koji zaslužuje pozornost je Grid Layout. To je skup presječenih vertikalnih i horizontalnih linija. Oni oblikuju stupce i retke. Elementi su smješteni u mrežu, a njihove su veličine označene u skladu s redovima i tablicama. Moguće je koristiti fiksne veličine, kao što su px, i fleksibilni - postotci, rem i em.

Prvo se mora deklarirati mrežni spremnik.

prikaz: rešetka

Svojstvo grid-template-columns se koristi za postavljanje širine retka, a svojstvo grid-template-rows koristi se za stupce. Dimenzije se mogu specificirati u jednom svojstvu grid-template-columns. Širina traka mjeri se u jedinicama fr, koje predstavljaju udio raspoloživog prostora u spremniku. Moguće je koristiti fx i px u jednom svojstvu. Na primjer, grid-template-stupci: 500px 1fr 2fr.

zaključak

Potpuna praksa prilagodljivog rasporeda od A do Z uključuje korištenje maksimalnog broja metoda. Da biste rastavili od nule ono što je raspored za sve uređaje, morate ručno koristiti upite medija, izračunati veličine slika i fontova. Nakon dobivanja odgovarajućih vještina, možete početi koristiti okvire.