Názov vrstiev je hlavička päta. Použitie značky päty na vytvorenie päty na stránke

Dobrý deň, milí čitatelia blogu. Pokračujeme v téme blokového usporiadania, ktorá bola začatá a pokračovala v troch predchádzajúcich článkoch. V zásade sa nám už podarilo vytvoriť dvoj- aj trojstĺpcové usporiadanie stránok a dokonca sa nám podarilo zvážiť nuansy vytvorenia plynulého usporiadania.

Okrem toho sa v prvých článkoch o rozložení webových stránok () diskutovalo o niektorých základných konceptoch webmasteringu, bez pochopenia ktorých by bolo dosť ťažké pochopiť nuansy.

Dnes sa pokúsime vyriešiť jeden malý problém, ktorý môže nastať s rozložením, ktoré sme vytvorili predtým. Najčastejšie táto situácia nastáva pri jej prezeraní na veľkých monitoroch (s vysokým rozlíšením) a pri zobrazení stránky s malým množstvom informácií.

V tomto prípade sa môže ukázať, že päta nebude stlačená na spodok obrazovky, ale bude umiestnená takmer v jej strednej výške, čo vo väčšine prípadov bude vyzerať škaredo a nie esteticky.

Napriek tomu je podľa môjho názoru potrebné stlačiť pätu až na koniec rozloženia stránky, a to platí najmä v prípade, keď je výška stránky menšia ako výška obrazovky používateľa. Schematicky to možno znázorniť takto:

Tie. Správne správanie päty v prípade malého množstva informácií na stránke a veľkej používateľskej obrazovky bude nasledovné:

Aby sme to mohli implementovať, musíme vykonať množstvo manipulácií s kódom nášho rozloženia. Okrem toho urobíme zmeny nielen v súbore CSS štýlu Style.css, ale aj v Index.html, ktorý obsahuje Html kód a tvorí bloky Div. Ale prvé veci.

Ako príklad použijeme rozloženie webových stránok s tromi stĺpcami, ktoré sme vytvorili predtým. V tomto prípade bude Index.html vyzerať takto:

Hlavička Hlavička Obsah strany Obsah strany Obsah strany Obsah strany Päta

A v súbore Style.css boli napísané nasledujúce vlastnosti CSS:

Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (farba pozadia:#FFC0FF; jasná: obe; )

Samotné rozloženie vyzeralo asi takto:

Ako vidíte, päta nie je stlačená dole, a preto nespĺňa naše požiadavky (vždy sa nachádza pod najnižším stĺpcom), takže budeme musieť vykonať úpravy v kóde. To isté možno urobiť pre rozloženie s dvoma stĺpcami a tiež pre rozloženie gumy. Metóda je univerzálna.

Musíme teda presunúť kontajner Div s pätou do spodnej časti obrazovky. Na to budete musieť najskôr nastaviť výšku celej stránky na sto percent (zaberie celú obrazovku). Bude to potrebné, aby sa potom zmenila veľkosť hlavného bloku s rozložením na 100%.

Celý obsah stránky je umiestnený v otváracej a zatváracej značke Body, a preto musíme pridať ďalšiu vlastnosť CSS pre značku Body v Style.css s nastavením výšky na 100%:

Text, html ( margin:0px; padding:0px; height: 100%; )

Zapnuté vzhľad Zatiaľ to nebude mať žiadny účinok, ale teraz je možné hlavný blog roztiahnuť na celú výšku obrazovky. Tie. bola to akási prípravná etapa.

Základné vlastnosti CSS, ak chcete, si môžete pozrieť. Teraz nastavme kontajner Div, ktorý obsahuje celé naše rozloženie, na minimálnu výšku 100 %:

Chcem to tiež zvýrazniť (div s id="maket"). Aby som to urobil, dám mu rámec pomocou zodpovedajúcej vlastnosti Border():

Vlastnosť Border: solid 3px black umožňuje pre tento kontajner nastaviť plný okraj (plný) s hrúbkou 3 pixely v čiernej farbe. To vám umožní jasne vidieť, že kontajner s rozložením sa roztiahol na celú výšku obrazovky, a to aj pri malom množstve informácií na stránke:

Teraz budeme musieť vybrať blok päty zo všeobecného kontajnera a umiestniť ho nižšie, hneď za všeobecný. Čo to dá? A skutočnosť, že nakoniec sa päta v rozložení rozhodne ísť dole a nebude, ako predtým, pritlačená k svojmu najdlhšiemu stĺpcu. V tomto prípade bude Index.html vyzerať takto:

Záhlavie Záhlavie Ľavý stĺpec Menu Menu Menu Pravý stĺpec Menu Menu Menu Menu Menu Obsah stránky Obsah stránky Obsah Päta

Upozorňujeme, že blok s pätou sa už nenachádza vo vnútri všeobecného kontajnera (maket), a preto jeho šírka už nie je regulovaná CSS vlastnosťami špecifikovanými pre maket v súbore Style.css. Šírka päty sa roztiahne cez celú obrazovku, ale stále sa bude nachádzať v spodnej časti obrazovky, bezprostredne pod hlavným blokom:

Opäť však nastáva problém, pretože na to, aby ste videli pätu, musíte teraz posúvať obrazovku v prehliadači (pozri posúvač na obrázku vyššie).

Stáva sa to preto, že hlavný kontajner (maket) zaberá celú výšku obrazovky (určuje to vlastnosť min-height: 100 %) a päta sa nachádza hneď za ním a na jeho zobrazenie budete musieť rolovať, čo nie je veľmi pohodlné a funkčné.

Tento problém môžete vyriešiť nastavením zápornej výplne pre kontajner Div s pätou tak, aby sa posunul nahor o vzdialenosť rovnajúcu sa jeho výške. V tomto prípade bude kontajner päty prekrývať hlavný kontajner a zapadne do výšky obrazovky prehliadača (t. j. na zobrazenie ho nebudete musieť posúvať).

Aby ste však mohli nastaviť záporný posun zhora, potrebujete poznať práve túto výšku päty, ale zatiaľ ju nepoznáme.

Preto najprv nastavíme výšku kontajnera obsahujúceho pätu nastavením zodpovedajúcej vlastnosti v Style.css:

#footer( background-color:#FFC0FF; clear:both; height: 50px; )

A potom pre ňu nastavíme zápornú rezervu v hornej časti na výšku rovnajúcu sa jej výške:

To umožní, aby sa päta zdvihla presne do svojej vlastnej výšky, a tým sa zmestila na obrazovku prehliadača (teraz môžeme odstrániť ohraničenie vlastnosti CSS: plné 3px čierne z pravidla maket, aby hrúbka okraja nebránila celému nášmu rozloženie vrátane päty od zapadnutia do výšky obrazovky):

Ako vidíte, posúvacia lišta sa teraz v prehliadači nezobrazuje a celé naše trojstĺpcové rozloženie stránky založené na blokoch sa zmestí na jednu obrazovku (v prípade, že je na stránke málo informácií) a má pätu umiestnenú úplne dole . Čo je presne to, čo sme potrebovali urobiť.

Vzniká však problém, ktorý sa objaví až vtedy, keď je na stránke rozloženia viac informácií a môže nastať nasledujúca situácia:

Ukazuje sa, že môže nastať situácia, keď informácie v jednom zo stĺpcov rozloženia prekryjú pätu, čo nebude vyzerať pekne. Stáva sa to kvôli notoricky známej negatívnej výplni, ktorú sme na to nastavili a ktorá pomohla zdvihnúť náš suterén oproti hlavnému kontajneru usporiadania.

Tie. Ukazuje sa, že v spodnej časti obrazovky sú dva bloky, ktoré sa navzájom prekrývajú v suteréne.

Riešením tohto problému je pridanie nového prázdneho kontajnera Div (tzv. spacer) do hlavného kontajnera nášho layoutu (maketu), na mieste, kde sa predtým nachádzal blok s pätou.

Nastavením tohto nového kontajnera na výšku rovnajúcu sa výške päty môžeme zabrániť tomu, aby informácie z hlavného kontajnera kolidovali s blokom s pätou. Priraďme ID () tomuto kontajneru s názvom Rašporka a výsledkom bude Index.html nášho trojstĺpcového rozloženia:

Hlavička Hlavička Ľavý Stĺpec Ponuka Ponuka Ponuka Ponuka Pravý Stĺpec Ponuka Ponuka Ponuka Ponuka Ponuka Obsah stránky Obsah strany Obsah strany Strany Strany Strany päta

A v Style.css to napíšeme ( , čím sa výška tohto rozperného kontajnera nastaví na výšku suterénu:

#rasporka ( výška: 50px; )

Výsledkom je, že päta nebude stlačená zospodu k informáciám obsiahnutým v hlavnom kontajneri (napríklad text v najvyššom stĺpci), ale do oblasti rovnajúcej sa výške päty s oddeľovacím kontajnerom, ktorý neobsahuje žiadne informácie. .

Týmto spôsobom sa vyhneme kolíziám a deformáciám v našom rozložení v troch stĺpcoch. Všetko bude jasné a krásne (jemné a vznešené):

Ako som spomenul vyššie, šírka päty sa teraz musí nastavovať samostatne, pretože... tento kontajner už nie je súčasťou hlavného. Ak to chcete urobiť, musíte do súboru CSS pridať ďalšie vlastnosti pre pätu, čo vám umožní nastaviť jej šírku a zarovnať ju vodorovne v strede obrazovky.

Má zmysel nastaviť šírku rovnajúcu sa šírke celého rozloženia pomocou vlastnosti Width a horizontálne zarovnanie je možné vykonať rovnakým spôsobom, ako sme to urobili pre celé rozloženie na blokovom rozložení.

Preto budeme musieť pridať ďalšie vlastnosti pre pätu ID:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Pomocou vlastnosti width:800px sa šírka nastaví na 800 pixelov a pomocou dvoch vlastností margin-left: auto a margin-right: auto sa nastavenie odsadenia na ľavej a pravej strane päty nastaví automaticky v dôsledku ktoré budú tieto zarážky rovnaké a náš hrdina bude zarovnaný na stred:

No, zdá sa, že už nie je čo zlepšovať, ale nebolo to tak. Náš obľúbený prehliadač Internet Explorer 6 ako vždy nerozumie niečomu z vlastností CSS, ktoré používame. V tomto prehliadači (a možno aj v niektorých iných starých prehliadačoch) napriek všetkému úsiliu nebude päta stlačená nadol, ale zostane v najvyššom stĺpci rozloženia stránky.

Toto všetko sa deje preto, že ( nerozumie vlastnosti min-height: 100%, ktorú sme použili na nastavenie minimálnej výšky hlavného bloku rovnajúcej sa výške obrazovky.

Preto na vyriešenie tohto problému budeme musieť použiť takzvaný hack, ktorý nám umožní vysvetliť (na prstoch) starším prehliadačom, čo robiť. Predtým zoznam CSS vlastnosti pre maket budete musieť vložiť nasledujúcu kombináciu:

* html #maket (výška: 100 %; )

Toto pravidlo sa bude vzťahovať iba na internetový prehliadač Explorer 6, zvyšok to nebude brať do úvahy a implementovať.

Takže konečný vzhľad Style.css s pätou stlačenou na spodok obrazovky bude takýto:

Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket (výška: 100%; ) #maket (šírka:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto ) #rasporka ( height: 50px; )

Finálna podoba Index.html bola uvedená tesne vyššie. To je všetko, túto sériu článkov venovanú blokovému usporiadaniu 2 a 3 stĺpcových pevných a plynulých rozložení webových stránok možno považovať za kompletnú.

Môžete si tiež pozrieť video „Práca so značkou div HTML“:

Nech sa vám darí! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás to zaujímať

Blokové rozloženie – Pre stránku vytvárame dvojstĺpcové, trojstĺpcové a plynulé rozloženie
DiV layout – Vytvorte bloky pre dvojstĺpcový layout v HTML, určte ich veľkosti a nastavte umiestnenie v CSS

Pamätám si, že v momente, keď som začal prechádzať z tabuliek na rozloženie div, jedným z problémov, s ktorými som sa stretol, bolo toto - ako stlačiť pätu stránky úplne dole v okne prehliadača, aby stránka vyzerala roztiahnutá plnú výšku, bez ohľadu na objem textu, a ak je výška stránky väčšia ako výška okna prehliadača (keď sa objaví rolovanie), päta zostane na svojom správnom mieste.

Ak sa pomocou tabuliek tento problém vyrieši iba zadaním výšky tabuľky a/alebo bunky v nej vnorenej, potom pomocou CSS blokové usporiadanie používa úplne iný prístup.

V procese praxe som identifikoval 5 spôsobov, ako zatlačiť pätu do spodnej časti okna prehliadača pomocou CSS.

HTML kód všetkých prezentovaných metód má nasledujúcu štruktúru (jediný rozdiel je CSS kód):

Kód CSS uvedený nižšie obsahuje iba tie vlastnosti, ktoré sú minimálne potrebné na implementáciu príslušnej metódy. Pre každý z nich môžete vidieť živý príklad.

Päta sa stlačí tak, že sa absolútne umiestni a roztiahne výšku rodičovských blokov (html , telo a .wrapper) na 100 %. V tomto prípade musí obsah block.content určiť spodný okraj, ktorý je rovnaký alebo väčší ako výška päty, inak päta zakryje časť obsahu.

* ( okraj: 0; odsadenie: 0; ) html, telo ( výška: 100 %; ) .wrapper ( poloha: relatívna; minimálna výška: 100 %; ) .obsah ( odsadenie-dole: 90px; ) .päta ( poloha : absolútne vľavo: 0;

Päta sa stlačí nadol potiahnutím bloku obsahu a jeho „rodičov“ na celú výšku okna prehliadača a zdvihnutím päty cez záporný okraj (horný okraj), aby sa zbavilo zvislého posúvania, ktoré sa objaví. IN v tomto prípade Je potrebné uviesť výšku suterénu a musí sa rovnať množstvu priehlbiny.

* ( margin: 0; padding: 0; ) html, body, .wrapper ( height: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) . päta ( výška: 80px; okraj-vrchol: -80px; )

Vďaka vlastnosti box-sizing: border-box bránime tomu, aby box s triedou .content presiahol 100 % výšky. To znamená, že v tomto prípade min-height: 100% + padding-bottom: 90px sa rovná 100% výšky okna prehliadača.

Je to dobré, pretože na rozdiel od iných spôsobov (okrem 5.) na výške päty nezáleží.

* ( okraj: 0; výplň: 0; ) html, telo ( výška: 100 %; ) .wrapper ( zobrazenie: tabuľka; výška: 100 %; ) .obsah ( zobrazenie: riadok tabuľky; výška: 100 %; )

Tu emulujeme správanie tabuľky tak, že blok .wrapper zmeníme na tabuľku a blok .content na riadok tabuľky (zobrazenie: tabuľka a zobrazenie: vlastnosti riadka tabuľky). Vďaka tomu a skutočnosti, že blok .content a všetky jeho nadradené kontajnery sú nastavené na 100% výšku, sa obsah roztiahne na celú výšku mínus výška päty, ktorá je určená automaticky - emulácia tabuľky zabraňuje predĺženiu päty nad výšku okna prehliadača.

V dôsledku toho je päta stlačená nadol.

Táto metóda sa nepodobá žiadnej z predchádzajúcich a jej zvláštnosťou je použitie CSS funkcie calc() a mernej jednotky vh, ktoré podporujú len moderné prehliadače. Tu potrebujete vedieť presnú výšku suterénu.

* ( okraj: 0; odsadenie: 0; ) .obsah ( min-výška: calc(100vh – 80px); )

100vh je výška okna prehliadača a 80px je výška päty. A pomocou funkcie calc() odpočítame druhú hodnotu od prvej, čím stlačíme pätu dole.

Ktoré prehliadače podporujú calc() a vh, môžete zistiť na caniuse.com pomocou nasledujúcich odkazov: podpora funkcie calc(), podpora jednotiek vh.

Toto najlepší spôsob zo všetkých prezentovaných však funguje iba v moderné prehliadače. Rovnako ako v treťom spôsobe nezáleží na výške päty.

* ( okraj: 0; výplň: 0; ) html, telo ( výška: 100 %; ) .wrapper ( displej: ohyb; smer ohybu: stĺpec; min-výška: 100 %; ) .obsah ( ohyb: 1 0 auto ; ) .päta (flex: 0 0 auto; )

Môžete sa dozvedieť o podpore prehliadača pre vlastnosť flex.

Toto je nejaký druh nočnej mory! Prečo sa päta vašej stránky opäť „vyskakuje“ a posúva dizajn? Naozaj je nemožné niečím poriadne stlačiť pätu na spodok stránky? Obsah alebo aspoň kocky! Tehla sa nezmestí do monitora?

Vidím, potom si sadnite a nerobte nič, kým si neprečítate náš článok až do konca.

Mnoho majiteľov webových stránok sa stretáva s týmto problémom, keď sa päta stránky jednoducho vznáša hore. A potom nie je jasné, čo robiť. Touto nevýhodou najčastejšie trpia návrhy webových stránok zostavené narýchlo, nezávisle (zakrúžkujte „bláznivé ruky“) alebo začínajúcimi webmastermi.

Zároveň sa v prvých fázach života stránky nedeje nič strašné. A táto idylka pokračuje dovtedy, kým obsah „záťaží“ na suterén a bráni mu v stúpaní. Oplatí sa však umiestniť na stránku menšie objemy materiálu a nedávno „pokojná“ päta sa okamžite zdvihne nahor, čím celý dizajn stránky získa nevhodný vzhľad.

Na odstránenie tejto „vady“ navrhnutej šablóny nie je potrebné míňať peniaze za služby webmastera. Pätu stránky môžete najčastejšie umiestniť sami. Zvážme všetko možné možnosti Ak chcete vyriešiť tento problém:

Prvý spôsob ukotvenia päty k spodnej časti stránky je založený na CSS. Začnime s ukážkovým kódom a potom sa bližšie pozrime na jeho implementáciu:

html ( výška: 100 %; ) hlavička, navigácia, sekcia, článok, bokom, päta ( zobrazenie: blok; ) telo ( výška: 100 %; ) #wrapper ( šírka: 1000px; okraj: 0 auto; min-výška: 100 %; výška: auto !dôležité; výška: 100 % ; ) #footer ( šírka: 1000px; okraj: -100px automaticky 0; výška: 100px; pozícia: relatívna; farba pozadia: rgb(51,51,204); )

Aby sme pripevnili pätu na spodok stránky, presunuli sme značku mimo kontajnera (layer wrapper ). Natiahneme celú stránku a obsah „tela“ k okrajom obrazovky. Aby sme to dosiahli, v kóde CSS nastavíme výšku značiek na 100%:

html ( výška: 100 %; ) telo ( výška: 100 %; )

Nastavíme tiež minimálnu výšku kontajnerovej vrstvy na 100%. V prípade, že je šírka obsahu väčšia ako výška kontajnera, nastavte vlastnosť na auto . Vďaka tomu sa obal automaticky prispôsobí šírke obsahu umiestneného na stránke:

#wrapper ( min-výška: 100 %; výška: auto !dôležité; výška: 100 %; )

Riadok kódu "height: 100%" je určený pre staršie verzie IE, ktoré neakceptujú vlastnosť min-height.

Aby sme oddelili priestor pre pätu v dizajne stránky, nastavili sme odsadenie značky na 100 pixelov:

#content ( padding: 100px; )

V tejto fáze máme webovú stránku, ktorá je široká na celú obrazovku a má ďalších 100 pixelov, ktoré sú „neutralizované“ zápornou hodnotou okraja pre pätu (okraj: -100 px), keď je jej pozícia nastavená na relatívnu (pozícia: relatívna). Takže pomocou zápornej hodnoty výplne „vytiahneme“ pätu do oblasti kontajnera, ktorý má výšku nastavenú na 100 %.

V tomto príklade je označenie webového dokumentu špecifikované pomocou relatívne nového HTML tagy 5, ktorý môžu staršie prehliadače nesprávne interpretovať. Z tohto dôvodu sa nemusí správne zobraziť celý dizajn stránky. Aby ste tomu zabránili, musíte nahradiť nové značky z arzenálu verzie 5 hypertextového jazyka bežnými značkami:

hlavička obsah päta

Vyššie diskutovaná metóda, ako urobiť pätu v dolnej časti stránky „neotrasiteľnou“, nie je vhodná pre každého. Ak sa v budúcnosti chystáte upraviť a vylepšiť dizajn vašej stránky pomocou vyskakovacích okien, potom je lepšie prestať používať predchádzajúcu implementáciu.

Najčastejšie pri implementácii vyskakovacích okien sa vlastnosť používa Z-index CSS. Pomocou jeho hodnôt nastavíte poradie, v akom sa vrstvy na seba ukladajú.

Čím vyššia je hodnota z-indexu prvku, tým vyššia je jeho hodnota v celkovom vrstvení.

Ale pretože sme v predchádzajúcom príklade použili zápornú hodnotu výplne pre pätu, spodná časť kontextového okna bude prekrývať hornú oblasť päty. Aj keď bude mať vyššiu hodnotu z-indexu. Pretože rodič (obal) vyskakovacieho okna má pre túto vlastnosť stále nižšiu hodnotu.

Tu je pokročilejšia možnosť:

CSS - príklad kódu:

html, body ( height: 100%; ) .header ( height:120px; background-color: rgb(0,255,102); ) .main (min-height:100%; position: relativní; background-color: rgb(100,255,255); ) .footer ( výška: 150px; pozícia: absolútna; vľavo: 0; dole: 0; šírka: 100 %; farba pozadia: rgb(0,0,153); )

Ako môžete vidieť z kódu, pätu sme umiestnili ako súčasť hlavného prvku. Pre kontajner sme nastavili relatívne umiestnenie a pre pätu absolútne umiestnenie. Upevnili sme suterén na samom spodku kontajnera a nastavili sme jeho polohu vľavo a hore na 0.

Predchádzajúce implementácie môžu zabezpečiť, že päta bude vždy v spodnej časti stránky. Ale iba ak má päta pevnú šírku. Čo ak však množstvo obsahu uverejneného v ňom nemožno predvídať?

To si bude vyžadovať pokročilejšiu možnosť pre neopevnený suterén. Nastaví pätu na riadok tabuľky pre svoju vlastnosť zobrazenia. Tým sa zobrazí ako riadok tabuľky.

Ak sú topánky poslednou súčasťou akéhokoľvek oblečenia, potom je päta stránky elektronického obchodu konečným prvkom jej predajného dizajnu. Zameraním sa na spodný prvok, pätu, sú moderné webové stránky pripravené predviesť svoju osobnosť všetkými možnými spôsobmi. V konkurenčnom prostredí elektronického obchodu je toho dosť originálne nápady, kreativita a trendy dizajnu. Pred diverzifikáciou päty stránky elektronického obchodu je potrebné zvážiť dôležité body. Čo umiestniť ako prvé a aký je najlepší spôsob, ako to urobiť? Náš súhrn inšpiratívnych návrhov päty má niekoľko zaujímavých možností.

Prečítajte si tiež: 13 e-commerce marketingových trendov roku 2019

Zaujímavé štatistiky z Chartbeatu. Štúdia správania 25 miliónov používateľov ukázala, ako hlboko prehliadajú stránky. Ukazuje sa, že pozornosť používateľa priťahuje priestor pod čiarou skladania. Viac prakticky užitočné informácie, návštevníci sa zdržujú najdlhšie v oblasti 1200 pixelov od hornej časti stránky (s priemernou vertikálnou obrazovkou v prehliadači 700 pixelov) alebo za druhou obrazovkou.

Čas zobrazenia (s) / Vzdialenosť od hornej časti stránky (v pixeloch)

Existuje veľká medzera v trvaní sledovania prvej a druhej obrazovky. TOP je 4 sekundy, trvanie dosahuje maximum (16 sekúnd) pri 1200 pixeloch zhora a s ďalším posúvaním sa pomaly znižuje.

Podiel návštevníkov (%) / Vzdialenosť od hornej časti stránky (v pixeloch)

Značná časť návštevníkov (viac ako 25 %) ani nečaká, kým sa obsah načíta a začne stránku posúvať. To znamená, že iba 75 % uvidí ako prvý úplne vrchol. Najprezeranejšia oblasť stránky je 550 pixelov (tesne nad čiarou ohybu).

Štúdia vyvracia mýtus, že používatelia neskrolujú na koniec stránky a nepozerajú celý obsah. Päta je dôležitá aj pre moderný web elektronického obchodu a má dokonca svoje výhody.

Týchto 10 tipov vám povie, ako krásne navrhnúť pätu pre webovú stránku - podľa pravidiel kompozície vo webdizajne a riešení prioritných úloh. Aplikujte najvhodnejšie taktiky na zlepšenie použiteľnosti, UX (užívateľskej skúsenosti) a dokonca aj na zvýšenie predaja.

Tradične sú požadované organizačné a právne záležitosti pokryté v päte stránky. Upozornenia sú navrhnuté s menej výrazným textom, čo uvoľňuje ostatné oblasti stránok pre zmysluplnejšie prvky. Tu je vzorový zoznam, ktorý treba zvážiť:

• Oznámenia o autorských právach
• Právne obmedzenia
• Fakturačné údaje
• Oznámenie o súboroch cookie

Webová stránka predávajúca produkt musí spĺňať zákonné požiadavky a poskytovať informácie o postupe a lehotách na vrátenie. Jeho umiestnenie v päte je vhodné pre predajný zdroj aj pre návštevníkov.

Internetový obchod značky Yves Rocher: celoobrazovková päta s príjemným dizajnom striedajúcich sa vrstiev. Informuje o spoločnosti, infraštruktúre predajnej stránky – od sledovania objednávok až po politiku osobných údajov. Nechýbajú ani tipy na používanie produktu, bonusy, akcie

Na predajcov výživových doplnkov sa vzťahujú zvýšené zákonné požiadavky. zodpovednosť. Existuje pomerne málo vecí, ktoré by mali/nemali uvádzať na svojich predajných stránkach. Odkazy na právne informácie sú pre lepšiu viditeľnosť zvýraznené tučným písmom.

Päta s krásnym obrázkom na pozadí veľmi organicky zapadá do celkového dizajnu stránky. Neexistuje jasná hranica, skôr samotný obsah slúži ako oddeľovač

Predajný web s krásnym retro dizajnom hlavičky a päty. 100-ročná záruka na chyby materiálu a povrchovej úpravy. Podmienky vrátenia sú sprevádzané zaujímavé príbehy Ukazuje sa, že s potrebnými informáciami o elektronickom obchode nie je všetko také smutné

Pri obmedzovaní počtu odkazov v päte nešetrite negatívnym priestorom – bude to mať ohromujúci vplyv na vizuálne vnímanie a zlepší čitateľnosť. Všeobecné pravidlo: Pri zachovaní vizuálnej hierarchie sú centrálne prvky zaznamenané rýchlejšie (možno ich využiť vo svoj prospech!).

Vďaka minimalistickému štýlu a pevnému rozbaľovaciemu menu si internetový obchod môže dovoliť priestrannú pätu

O veľké množstvá mikronegatívny priestor (medzi malými prvkami) možno povedať takto: pokiaľ sú prítomné všetky potrebné informácie, sú čitateľné a rýchlo vnímateľné - všetko je v poriadku

Priestranná päta kaviarne je vynikajúcim dotvorením čistej dizajnovej kompozície, v ktorej je veľa makro-negatívneho priestoru („vzduch“ medzi sekciami/sekciami)

Prečítajte si tiež: 30+ príkladov a nápadov na navrhovanie cieľových akčných tlačidiel

Štýlový dizajn päty hovorí veľa o samotnom zdroji. Je dôležité poznamenať: kupujúci sa tu zdrží o niečo dlhšie ako v iných častiach stránky. Výhodná príležitosť na ďalšiu poslednú výzvu na akciu. Často ide o predplatné/newsletter, ale hovor s výzvou na akciu môžete prepojiť aj s registráciou účtu.

Greetabl má skromne navrhnutý spodok svojich stránok, ktorý obsahuje výzvu na predplatenie. S minimom prvkov sa hovor stáva viditeľným a v harmónii s tyrkysovým pozadím sa mení na ozdobu lokality

Pekný dizajn s výzvami na akciu v spodnej časti stránok. Štruktúra predávajúceho tvorcu webových stránok je univerzálna. Pre milión zákazníkov bol preložený do 35 jazykov.

Prístup k nákupnému košíku zo spodnej časti stránky je skvelý spôsob, ako zlepšiť použiteľnosť a predajné kvality stránky.

Predajná stránka cateringovej spoločnosti je príjemná na pohľad a pohodlná pre kupujúceho

Spodná časť stránky je ideálna pre informácie, ktoré sa často nezobrazujú: o spoločnosti, zmluvných podmienkach a zásadách ochrany osobných údajov. Funkciou päty je v tomto prípade zachrániť všetkých. Niekto sa cíti stratený v prostredí eCommerce a začne sa zaujímať o infraštruktúru elektronický obchod, inštinktívne posúvanie ďalej...

Negatívny priestor je nevyhnutný pre čitateľnosť obsahu. Vo všeobecnosti „päta“ neslúži na navigačné účely, na rozdiel od ponuky alebo mapy lokality. Len v ojedinelých prípadoch stránky elektronického obchodu umiestňujú jednotlivé kategórie produktov do päty (

V HTML5 sa zaviedlo niekoľko nových značiek pre štruktúru kódu: , , , , , ktoré v niektorých prípadoch nahrádzajú obvyklé . Aj keď sa zdá, že medzi značkami nie je veľký rozdiel, je medzi nimi obrovská priepasť. Značky nie sú zamerané na ľudí, ktorí nemajú dôvod na to pozerať zdrojový kód stránky, ale na stroje, ktoré interpretujú kód. Stroje alebo roboty nerozumejú, pre nich je to typický značkovací tag - nahraďte ho a význam sa nezmení. Ďalšou vecou je, že robot, ktorý deteguje túto značku, ju vníma presne ako hlavičku stránky alebo sekcie.

Čo to v konečnom dôsledku dáva? Vyhľadávače Začnú lepšie indexovať stránku, pretože jasne oddeľujú obsah stránky od pomocných prvkov. Prehliadače reči určené pre nevidiacich preskočia hlavičku a prejdú priamo k obsahu. Stránky môžu navzájom automaticky zdieľať obsah a ďalšie informácie. Všetky tieto funkcie sa nazývajú sémantika a umožňujú vám prezentovať údaje vo forme vhodnej pre roboty.

Najprv urobme hlavičku stránky pomocou značky (príklad 6.2).

Príklad 6.2. Použitie

Pokus o pridanie pozadia do tagu v štýloch k ničomu neviedol, pozadie sa v niektorých prehliadačoch nechce zobrazovať. Všetky nové značky by mali byť najskôr nastavené na úrovni bloku prostredníctvom vlastnosti display, potom sa začnú správne zobrazovať (príklad 6.3).

Príklad 6.3. Hlavička stránky

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

hlavička ( display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; )

Tento príklad bude fungovať vo všetkých prehliadačoch okrem IE7 a IE8. Internet Explorer nepridáva štýl prvkom, ktorým nerozumie. Toto nedorozumenie je možné napraviť vytvorením fiktívneho prvku pomocou JavaScriptu. Aby sme to dosiahli, zahrnieme to do kódu.

document.createElement("hlavička");

Ak je na stránke jeden tag, tento skript je pre danú úlohu celkom vhodný. Nechceme však opakovať riadok desaťkrát pre desať rôznych značiek, takže tento proces automatizujeme pomocou slučky. Samotné značky sú uvedené v zozname oddelenom čiarkami (príklad 6.4).

Príklad 6.4. Skript pre IE

var e = ("článok,strana,nápis obrázku,obrázok,päta,hlavička,hskupina,nav,sekcia,čas").split(",");< e.length; i++) { document.createElement(e[i]); }

pre (var i = 0; i

Samotný skript je uzavretý v podmienených komentároch, takže je spustený iba pre IE verzie 8.0 a nižšej. IE9 už obsahuje podporu pre nové značky HTML5.

Vyššie uvedený príklad nemusíte vkladať na svoje webové stránky, môžete použiť verejne dostupný skript napísaný Remy Sharp a distribuovaný pod licenciou MIT. Ak to chcete urobiť, stačí naň poskytnúť odkaz, ako je uvedené v príklade 6.5.

Príklad 6.5. Skript pre IE

Všetky špecifikované skripty sa musia nachádzať v kóde pred CSS.

v štýloch pre nové značky nastavte display: block.

Teraz sa pozrime na niektoré značky HTML5 podrobnejšie, aby sme pochopili ich rozsah.

Príklad 6.6. Použitie značky

HTML5 IE Cr Op Sa Fx

článok Stopy bezprecedentných zvierat Príbeh o tom, ako sa v blízkosti jedálne objavili záhadné ružové stopy so šiestimi prstami a prečo sa to stalo.

Definuje blok, ktorý nesúvisí s hlavným obsahom pre umiestnenie kategórií, odkazov na archív, tagov a iných informácií (príklad 6.7). Takýto blok, ak je umiestnený na boku, sa zvyčajne nazýva „bočný panel“ alebo „bočný panel“.

Príklad 6.6. Použitie značky

Príklad 6.7. Použitie

aside document.createElement("aside");

document.createElement("článok");

aside ( pozadie: #f0f0f0; /* Farba pozadia */ výplň: 10px; /* Okraje */ šírka: 200px; /* Šírka bočného panela */ plávajúca: vpravo; /* Zalomiť vľavo */ ) článok ( okraj-vpravo: 240px ; /* Zarážka vpravo */ zobrazenie: blok /* Prvok bloku */ )

Dobrý jazyk

Koho palica je väčšia

Príklad 6.6. Použitie značky

obrázok document.createElement("figura");

Katedrála svätej Sofie

Poľský kostol

Obsahuje popis značky. Značka musí byť prvým alebo posledným prvkom v skupine.

Príklad 6.6. Použitie značky

Definuje „pätu“ stránky alebo sekcie, zvyčajne obsahuje meno autora, dátum dokumentu, kontaktné a právne informácie (príklad 6.9).

Príklad 6.9. Použitie

Som rád, že vás môžem privítať na mojej stránke.

Copyright Kristína Vetrová

Definuje „hlavičku“ lokality alebo sekcie.

Príklad 6.6. Použitie značky

Používa sa na zoskupenie nadpisov webových stránok alebo sekcií (príklad 6.10).

Príklad 6.10. Použitie

hgroup Kristína Vetrová Osobná stránka

Príklad 6.6. Použitie značky

Nastaví navigáciu na stránke (príklad 6.11). Ak je na stránke niekoľko blokov odkazov, zvyčajne sa do nich umiestňujú prioritné odkazy. V dokumente je tiež prijateľné použiť viacero značiek. Nevkladajte dovnútra.

Príklad 6.11. Použitie

nav Cheburashka a krokodíl Gena Cheburashka | Gene |

Príklad 6.6. Použitie značky

Shapoklyak | Lariska Vitajte!

Definuje časť dokumentu, ktorá môže obsahovať nadpisy, hlavičky, päty a telo (príklad 6.12). Je povolené vkladať jeden tag do druhého.

sekcia Filmovanie Polypropylén

Príbeh je o tom, ako nakrútili film, kde hrdinovia oddychovali na pláži, potom prišiel antagonista, zmlátil hrdinov, hodil ich do bazéna a čo sa stalo.

Dobrý jazyk

Príbeh je o tom, ako vznikol ateliér na štúdium esperanta, pričom nad ním na verande bolo žartovné štúdio, kde sa rozprávali vtipy a čo z toho vzniklo.

• Označí text v značke ako dátum, čas alebo dátum a čas. Môže byť špecifikovaný priamo v kontajneri alebo špecifikovaný prostredníctvom atribútu datetime (príklad 6.13).
• Dátum a čas sú uvedené v medzinárodnom formáte ISO 8601. Príklady formátovania sú uvedené v tabuľke. 6.1.
• Každá jednotka má svoj vlastný špecifikovaný tvar a obmedzenia.
• Rok je špecifikovaný štyrmi číslicami (1860).
• Minúty sú dve číslice od 00 do 59.
• Sekundy sú dve číslice od 00 do 59.
• Časové pásmo - hodiny a minúty označené znamienkom plus alebo mínus.

Dátum a čas sú oddelené veľkým latinským písmenom T. Časové pásmo sa v prípade potreby píše za časom so znamienkom plus alebo mínus. Napríklad pre Moskvu bude časové pásmo +03:00.

Príklad 6.13. Použitie

Príklad 6.6. Použitie značky

čas

1957-10-04 Prvý umelý satelit Zeme bol vypustený.

1960-08-19 prvý let psov do vesmíru.

1961-04-12 prvý vesmírny let s ľudskou posádkou.

1963-06-16 prvý let kozmonautky.

1969-07-21 pristátie človeka na Mesiaci.