Gnezdenje je oblikovanje strukture in elementov zasnove spletne strani. Pisanje kode spletne strani opravi razvijalec programske opreme ali razvijalec. Uporablja grafični program za rezanje postavitev, urejevalnik kod in dodatne programe za pospešitev procesa.

Kaj je postavitev

Koda postavitve je okostje strani, napisano v označevalnem jeziku html. Sestoji iz logično lomljenih delov delov strani - oznak. Vsak od njih je odgovoren za svoje območje: meni, kletni prostor, medije, obrazce, zemljevide, iskanje po lokaciji, čas. Imajo atribute, ki identificirajo posamezne predmete z njihovo pomočjo. Cascading style sheets ustrezajo zasnovi, dinamični učinki pa so java-script. Dobro oblikovana postavitev je enako prikazana v vseh brskalnikih. Rezultat se določi s serijo testov. Sposobnost dela na več kot eni strojni platformi se imenuje crossplatform. Obstaja več pristopov k izvedbi postavitve, ki uporabljajo različne okvire.


Za izdelavo strani po sodobnih standardih se uporabljajo različne metode prilagodljive postavitve. To zagotavlja pravilen prikaz predmetov na vseh vrstah zaslonov.

Vrste postavitev

Standardi se nenehno izboljšujejo in posledično se spreminjajo načini oblikovanja načrtov. Trenutno obstajajo 3 glavne vrste strani:

statična;

guma;

je prilagodljiv.

Statične postavitve, ki niso zmožnespremenite obliko. Njihova zasnova se ne spreminja in dimenzije elementov imajo jasen pomen. Prilagodljiva postavitev pomeni, da bodo elementi spletnega mesta prilagojeni velikosti zaslona naprave. Pri spreminjanju širine dokumenta pride do reorganizacije blokov, nekateri deli nadomestijo drugi, nekateri elementi izginejo. Zamisel o prilagodljivosti je zamenjala mobilne različice spletnega mesta, ki živijo na posameznih poddomenah. Glavno načelo ustvarjanja prilagodljivosti je oblikovanje modela pod tremi zasloni: računalnik, tablični računalnik, pametni telefon.

Pri izdelavi gumijastega vzorca se upoštevajo tudi spremembe velikosti zaslona in vsi elementi so prilagodljivi. Glavna razlika od prilagodljivega je ta, da se postavitev ob vsakem trenutku spremembe razširi ali zoži pod zaslonom. Preverite, katera od načel se uporablja, kot sledi. Če se stran raztegne z razponom okna brskalnika z njo, potem je to povezava z gumo. Ko se stran spletnega mesta spremeni le v nekaj položajih - tako je prilagodljiva.

Mere za prilagodljivo razporeditev

Za ustvarjanje prilagodljivih postavitev se uporabijo relativne merilne enote namesto standardnega statičnega px. Najpogostejši so:

em;

rem;

%.

V prilagodljivi postavitvi se html em uporablja za določanje velikosti pisav in vdolbin. Privzeto je 1 em 16 slikovnih pik. Za določitev pisave za odstavek p 32 pikslov morate določiti naslednje: p {font-size: 2em; } Posebnost uporabe enote je, da je 1em enakvelikost črk svojega elementa. To pomeni, da 1em ima različne vrednosti v različnih delih kode. Na primer, v bloku, kjer je velikost pisave 2em (32 px), bo rob v 1em 32 slikovnih pik. Če pa je pisava 1em (16 px), bo oblazinjenje v 1em enako standardnim 16 slikovnim pikam.
Rem je koren em, ki je definiran v oznaki. 1 root-em, za razliko od 1em, je v nobenem primeru enako številu. Vrednost se spremeni le, če so spremembe obvezne. Odstotki se običajno uporabljajo za nastavitev širine blokov ali slik. Ne glede na velikost zaslona se bo ujemala z določeno vrednostjo, na primer 80%.

Zahteve za medije

CSS podpira različne tehnične parametre naprav. Definiran je pametni telefon z majhnim zaslonom, za njegovo vrednost je podano lastnost sloga. Medijske zahteve razkrivajo razlike v orientaciji: portret in pokrajina. Uporablja se za ustvarjanje prilagodljive postavitve. Postavitev se prilagodi določeni ločljivosti zaslona in spremeni strukturo dokumenta v skladu s kodo. Opredeljene so vrste naprav:

Braillove naprave in tiskalniki, vtisnjeni za slepe;

tiskanje navadnih tiskalnikov;

zaslon monitorja;

govora sintetizatorjev govora;

TV-televizije

Pomen imena poizvedbe označuje več pogojev. Na primer, izhodna vsebina je samo za monitorje in le največja širina 600 px. Izgleda takole: @media zaslon in (max-width: 600px) {output code}. Prilagodljivo oblikovanje temelji na uporabi medijskih poizvedb. Ustvari postavitev zaslonov, v katerihNajmanjša širina je 1200 slikovnih pik, telo kode je postavljeno na @media zaslon in (max-width: 1200 px) {}. Spodaj je blok za @media zaslon in (min-width: 700px) {} in @media zaslon in (max-width: 699px) {} mobilnih naprav.

Mobilna prva

Po najnovejših podatkih mobilne naprave in tablice veliko pogosteje uporabljajo internet kot računalniki. V skladu s tem postaja mobilni promet vse bolj pomemben za spletne strani. Zaradi funkcij, kot so majhne velikosti zaslona, ​​uporabniki pripomočkov dajejo prednost mestom s prvimi vrsticami iskanja, porabijo manj časa za iskanje informacij. Pristop Mobile First vključuje prikazovanje najpomembnejše vsebine enostavne in optimizirane spletne strani ter zavračanje prenosa drugih virov. Prilagodljiva postavitev spletnega mesta za to metodologijo vključuje začetno izdelavo strani za majhne zaslone in naknadno dodajanje elementov, ki jih zahteva oblikovanje strani za velik monitor. Kljub preglednosti pristopa si stranke in izvajalci prizadevajo za popoln pregled običajne metode razvoja spletnega mesta.

Bootstrap

Eden od priljubljenih okvirov, ki je dala preprost odgovor na vprašanje, kako narediti prilagodljivo postavitev, je Twitter Bootstrap. Z zagonsko mrežo z 12 stolpci se ustvarijo mesta, ki so pravilno prikazana na zaslonih mobilnih naprav. Uporabljajo se glavna orodja:

vnaprej določena širina stolpcev, ki lahko določi širino elementov;

fiksni in gumijasti deli dokumenta;

vgrajene pisave in razredi za njih;

sredstva za risanje tabel;

razredi oblikovanja menijev, orodne vrstice.

Dinamični učinki so zapisani v jQuery, predprocesor SASS se uporablja za opis videza in funkcionalnosti priljubljenih spletnih pisav. Spletne strani, razvite na najnovejši različici zagonskega programa, se ne prikazujejo pravilno v redko uporabljenih različicah brskalnikov, kot so npr. IE8 IE9 in iOS 6. Upoštevati je treba, da se korenina em uporablja kot velikost pisave za nekatere elemente. Uradna spletna stran vsebuje podrobne priročnike v angleščini in ruščini, primere prilagodljive postavitve, načine uporabe vgrajenih komponent.

Temelj

Fundacija je močan okvir, eden glavnih tekmecev storitve Twitter Bootstrap. Podpira vsako velikost mreže, ima več prednosti, ki jih v Bootstrapu ne zadostuje. Komponente imajo širok spekter animacijskih učinkov, ki jih lahko prilagodite. Preprocesor SASS se uporablja za krmiljenje slogov. Seznam osnovnih predlog vsebuje drsnike, navigacijske plošče in ikone v družabnih omrežjih.
Mere podajajo vrednosti iz tabele.



0



smedium



420px
63)

medium



640px



velika



1024px
)






xlarge



1200 px
1440px

Postavitev mreže

Drug sistem, ki si zasluži pozornost, je postavitev mreže. Gre za niz rutinskih navpičnih in vodoravnih črt. Oblikujejo stolpce in vrstice. Elementi so v mreži, njihova velikostoznačeni v skladu s črtami in tabelami. Možno je uporabiti fiksne velikosti, kot so px, in prilagodljive - odstotki, rem in em. Najprej je treba napovedati mrežni zabojnik. display: grid Lastnost Grid-template-columns se uporablja za določitev širine črte in stolpcev grid-template-rows. Dimenzije je mogoče podati v lastnostih grid-template-columns. Širina se meri v enotah fr, kar predstavlja delež razpoložljivega prostora v posodi. Predvideva se, da se lahko fx in px uporabita v eni lastnosti. Na primer, grid-template-column: 500px 1fr 2fr.

Sklepna ugotovitev

Popolna praksa prilagodljive postavitve A do Z vključuje uporabo največjega števila metod. Za razstavljanje iz nič, kakšna postavitev za vse naprave, morate ročno uporabiti poizvedbe medijev, izračunati velikost slik in pisav. Ko pridobite prave veščine, lahko začnete uporabljati okvire.