Hniezdenie je vytvorenie štruktúry a prvkov návrhu webovej stránky. Písanie kódu webovej stránky vykoná vývojár softvéru alebo vývojový partner. Používa grafický program na krájanie rozložení, editor kódu a ďalšie programy na urýchlenie procesu.

Čo je usporiadanie

Kód rozloženia je kostra stránky, napísaná v značkovacom jazyku html. Skladá sa z logicky rozbitých prvkov častí stránky - značky. Každý z nich je zodpovedný za oblasť: menu, suteréne, médiá, formuláre, mapy, vyhľadávanie stránok, čas. Majú atribúty, ktoré identifikujú jednotlivé položky s ich pomocou. Kaskádové štýly zodpovedajú dizajnu a dynamické efekty sú java-script. Dobre navrhnuté rozloženie je rovnako zobrazené vo všetkých prehliadačoch. Výsledok je určený sériou testov. Schopnosť pracovať na viacerých hardvérových platformách sa nazýva crossplatform. Existuje niekoľko prístupov k implementácii usporiadania pomocou rôznych rámcov.


Na vytváranie stránok podľa moderných štandardov sa používajú rôzne metódy adaptívneho usporiadania. Tým sa zabezpečí správne zobrazenie položiek na všetkých typoch obrazoviek.

Typy usporiadaní

Štandardy sa neustále zlepšujú a v dôsledku toho sa menia spôsoby vývoja usporiadania. V súčasnosti existujú 3 hlavné typy stránok:

statické;

guma;

je prispôsobivý.

Statické rozloženia stránok, ktoré nie sú schopnézmeniť svoj dizajn. Ich dizajn sa nemení a rozmery prvkov majú jasný význam. Adaptívne rozloženie znamená, že prvky stránky budú prispôsobené veľkosti obrazovky zariadenia. Pri zmene šírky dokumentu dochádza k reorganizácii blokov, niektoré časti sú nahradené inými, niektoré prvky zmiznú. Myšlienka prispôsobivosti prišla nahradiť mobilné verzie stránky, ktoré žijú na jednotlivých subdoménach. Hlavným princípom vytvárania prispôsobivosti je návrh dizajnu pod tromi obrazovkami: počítačom, tabletom, smartfónom.

Pri vytváraní gumového vzoru sa berie do úvahy aj zmena veľkosti obrazovky a všetky prvky sú prispôsobiteľné. Hlavným rozdielom od adaptívneho je to, že rozloženie sa rozširuje alebo zužuje pod obrazovkou pri každom momente zmeny. Skontrolujte, ktorý z princípov sa používa nasledovne. Ak stretnete stránku s úsekom okna prehliadača s ním, je to gumová väzba. Keď sa stránka stránok zmení iba na niekoľko pozícií - je to prispôsobivá.

Rozmery adaptačného usporiadania

Na vytvorenie prispôsobivých usporiadaní sa namiesto štandardných statických px používajú relatívne meracie jednotky. Najbežnejšie sú:

em;

rem;

%.

V adaptačnom rozložení sa html em používa na určenie veľkosti písma a odsadenia. Štandardne je 1 em 16 pixelov. Ak chcete špecifikovať písmo pre odsek p 32 pixelov, musíte zadať nasledovné: p {font-size: 2em; } Zvláštnosťou používania jednotky je, že 1em je rovnakýveľkosť písma jeho elementu. To znamená, že 1em má rôzne hodnoty v rôznych častiach kódu. Napríklad v bloku, kde veľkosť písma je 2m (32px), okraj v 1em bude 32 pixelov. Ale kde písmo je 1em (16px), výplň v 1em sa bude rovnať štandardným 16 pixelom.
Rem je root em, ktorý je definovaný v tagu. 1 root-em, na rozdiel od 1em, sa za akýchkoľvek okolností rovná číslu. Hodnota sa zmení iba vtedy, keď sú zmeny vykonané povinne. Percentá sa zvyčajne používajú na nastavenie šírky blokov alebo obrázkov. Bez ohľadu na veľkosť obrazovky bude zodpovedať určenej hodnote, napríklad 80%.

Žiadosti o médiá

CSS podporuje rôzne technické parametre zariadení. Je definovaný smartphone s malou obrazovkou, pre jeho hodnotu je špecifikovaná vlastnosť štýlu. Požiadavky na médiá odhaľujú rozdiely v orientácii: na výšku a na šírku. Široko používané na vytváranie prispôsobivého rozloženia. Rozloženie sa prispôsobí špecifikovanému rozlíšeniu obrazovky a zmena štruktúry dokumentu v súlade s kódom. Typy zariadení sú definované:

braillovské zariadenia a tlačiarne vytlačené pre nevidiacich;

tlač obyčajných tlačiarní;

obrazovka monitora obrazovky;

reč syntetizátorov reči;

televízory

Význam mena dotazu označuje niekoľko podmienok. Napríklad výstupný obsah iba pre monitory a maximálna šírka 600 px. Vyzerá to takto: @media obrazovka a (max-width: 600px) {výstupný kód}. Adaptívny dizajn je založený na použití mediálnych dopytov. Vytvára rozloženie pre obrazovky, v ktorých jeMinimálna šírka je 1200 pixlov, telo kódu sa umiestni na obrazovku @media a (max-width: 1200 px) {}. Nasleduje blok pre obrazovky @media a (min-width: 700px) {} a @media a (max-width: 699px) {} mobilné zariadenia.

Mobilné prvé

Podľa najnovších údajov mobilné zariadenia a tablety prechádzajú oveľa častejšie ako počítače. Z tohto dôvodu je mobilná doprava pre webové stránky čoraz dôležitejšia. Vďaka funkciám, ako sú malé veľkosti obrazovky, používatelia modulov gadget preferujú weby s prvými riadkami vyhľadávania, trávia menej času hľadaním informácií. Prístup Mobile First zahŕňa zobrazenie najdôležitejšieho obsahu jednoduchých a optimalizovaných webových stránok a odmietanie prevzatia ďalších zdrojov. Adaptívne usporiadanie stránky pre túto metodiku zahŕňa prvotné vytvorenie stránky pre malé obrazovky a následné pridanie prvkov podľa požiadaviek dizajnu stránky pre veľký monitor. Napriek transparentnosti prístupu, zákazníci a realizátori vynakladajú veľké úsilie na úplné preskúmanie bežnej metódy vývoja lokality.

Bootstrap

Jedným z populárnych rámcov, ktoré dali jednoduchú odpoveď na otázku, ako vytvoriť prispôsobivé rozloženie, je Twitter Bootstrap. S 12-stĺpcovou mriežkou spustenia sa vytvoria stránky, ktoré sú správne zobrazované na obrazovkách mobilných zariadení. Používajú sa hlavné nástroje:

preddefinovaná šírka stĺpikov, ktorá môže určiť šírku prvkov;

pevné a gumové komponenty dokumentu;

vstavané písma a triedy pre ne;

prostriedky na kreslenie tabuliek;

triedy návrhov menu, panely s nástrojmi.

Dynamické efekty sú napísané v jQuery, prepracovanie SASS sa používa na opis vzhľadu a funkčnosti populárnych webových písiem. Stránky určené pre bootstrap najnovšiu verziu, nezobrazujú správne zriedka používané verzie prehliadačov, ako IE8 a IE9 iOS 6. Je pozoruhodné, že aj veľkosť písma niektorých prvkov použitých koreň em. Oficiálna webová stránka obsahuje podrobné manuály v angličtine a ruštine, príklady adaptívneho usporiadania, spôsoby použitia vložených komponentov.

Nadácia

Nadácia je silný rámec, jeden z hlavných konkurentov Twitter Bootstrap. Podporuje akúkoľvek veľkosť siete, má niekoľko výhod, ktoré v Bootstrap nestačí. Komponenty obsahujú širokú škálu animačných efektov, ktoré je možné prispôsobiť. Prevodník SASS sa používa na ovládanie štýlov. Zoznam základných šablón obsahuje posuvníky, navigačné panely a ikony sociálnych médií.
Rozmery sú dané hodnotami uvedenými v tabuľke.



0



smedium



420px
63)

, stredná



640



veľký



1024px (78 )









1440px

Rozloženie mriežky

Ďalším systémom, ktorý si zaslúži pozornosť, je Rozloženie siete. Ide o súbor rutinných vertikálnych a horizontálnych línií. Tvoria stĺpce a riadky. Prvky sú v mriežke, ich veľkosťsú označené v súlade s riadkami a tabuľkami. Je možné použiť fixné veľkosti, ako sú px a flexibilné - percentá, rem a em. Najskôr musí byť oznámený kontajner na mriežku. zobrazenie: mriežka Vlastnosť Grid-template-columns sa používa na špecifikovanie stĺpcov šírky riadkov a šablón-riadkov. Dimenzie je možné špecifikovať v jednej vlastnosti grid-template-columns. Šírka sa meria v jednotkách fr, čo predstavuje zlomok dostupného priestoru v kontajneri. Predpokladá sa, že fx a px môžu byť použité v jednom vlastníctve. Napríklad šablóna šablóny-stĺpcov: 500px 1fr 2fr.

Záver

Úplné uplatňovanie adaptačného usporiadania A až Z zahŕňa použitie maximálneho počtu metód. Ak chcete rozobrať od začiatku, aké rozloženie pre všetky zariadenia, musíte manuálne použiť mediálne dotazy, vypočítať veľkosť obrázkov a písma. Keď získate správne zručnosti, môžete začať používať rámce.