Typy rozvržení HTML. Podstata blokového uspořádání. Jaké problémy vznikají při rozvržení

Zdravím všechny, přátelé. Dnes se dotkneme velmi důležitého tématu – rychlého a správného rozvržení HTML. Pojďme se ponořit hlouběji do problému a podívat se na všechny možné způsoby, jak zrychlit layout bez ztráty kvality ve všech fázích. Tato otázka zajímá mnoho webových vývojářů a zajímala mě i v době, kdy jsem se již vážněji ponořil do vývoje webu. Nyní se rád podělím o své nashromážděné znalosti, triky a triky vysokorychlostního rozložení, abyste vy, moji milí přátelé, mohli vydělat více peněz za jednotku času. Ostatně právě rychlost rozložení ovlivňuje, jakou klobásu budete snídat. Pomalí webdesignéři obvykle snídají klobásu za 80 rublů z emulze kůží, zatímco ti bystřejší a rychlejší jedí dobrého doktora za 900 rublů / kg. Samozřejmě existuje mnoho webových designérů, kteří řeknou: „Dělám práci promyšleně a efektivně, a proto pomalu.“ Nebudu se dlouho vrtat v psychologických rozborech, ale to jsou výmluvy a sebeospravedlňování. Můžete to vysázet velmi rychle a efektivně, není to jako malovat olejomalbu.

Chladný

Plus

Koktat

Pojďme analyzovat, jaké fáze musíme provést v procesu rozvržení. To nám umožní identifikovat hlavní problémy a úzká místa rozložení, které lze automatizovat nebo zrychlit. Mimochodem, zrychlení rozvržení HTML ve skutečnosti spočívá v automatizaci (použití nástrojů) a zrychlení (rychlost vašeho psaní, předběžná analýza, inteligence).

1. Analýza dispozičních řešení a příprava na dispoziční řešení

Pojďme si projít chronologii vašich akcí – od práce s rozložením PSD (nebo jiného zdrojového kódu) až po, přísně vzato, rozložení. Samozřejmě hraje důležitou roli rozvržení, které bylo nakresleno před vámi nebo vy sami, protože správně připravené rozvržení vám umožní ušetřit spoustu času. Na konci této lekce poskytnu návrhářům připomenutí ohledně přípravy rozvržení pro rozvržení. Nyní si představme, že jste jednoduchý designér layoutu a z určitých důvodů jste museli navrhnout layout designéra, který se nestará o vaše problémy a který nemá ponětí, co se s jeho layoutem dělá dál. To je v dnešní době typická situace.

1.1 Vizuálně rozdělit rozvržení na opakující se části, definovat mřížku

První věc, kterou musíte udělat, je otevřít rozvržení a analyzovat ho. Věnujte tomu nějaký čas a podívejte se na to. opakující se části rozvržení. Pokud se například jedná o vstupní stránku, opakující se části jsou sekce, které mají s největší pravděpodobností mnoho stejných nadpisů. Pokud se jedná o vícestránkový web, všechny stránky by měly mít záhlaví a zápatí. Poté, co se vizuálně seznámíte s rozložením, definujte základní proměnné a parametry projektu pomocí vašeho preprocesoru a připravte kódovou stránku.

Obecně použití CSS frameworků hraje velmi důležitou roli v rychlosti práce. Ať už stylujete všechny prvky v rámci CSS, jako je Bootstrap, nebo jen používáte mřížku, při umísťování prvků na stránku a při zajišťování odezvy webu zrychlíte na bleskovou rychlost. Nejčastěji je v našich těžkých časech vyžadováno adaptivní uspořádání. Pokud jste webové studio, chcete rychleji dokončit projekty a potěšit své designéry layoutu (pokud máte takový systém pro rozdělování povinností), naučte webdesignéry používat grid. Nespokojené výkřiky nad standardizací webdesignu a omezeními lze ignorovat, na Něvského si malujeme obrázky, což znamená, že musíme používat efektivní a rychlé nástroje pro maximální standardizaci. Ne na úkor kvality, samozřejmě. Mřížka rozhodně nebude nadbytečná a poskytne pevný základ pro rozvržení.

Pokud jste originální designér 80lvl layoutu a myslíte si, že sami můžete vytvořit projektový grid lépe než Bootstrap – vyviňte si vlastní grid, otestujte jej a připojte jej ke svému projektu. Projekt bez síťky je hemoroidy na mnoho let, příznivé a teplé prostředí pro reprodukci HTML berliček v budoucnu.

1.2 Definujte parametry projektu

Bez ohledu na to, zda používáte jakýkoli rámec CSS, nezapomeňte použít preprocesor CSS. To je velmi důležité, protože vám to ušetří čas při psaní CSS. Když otevřu jakýkoli z mých dokončených projektů, s hrůzou vidím, kolik času bylo vynaloženo na psaní CSS, můžeme říci, že 60–70 % práce ve fázi rozvržení tvoří psaní CSS. A bylo by logické tuto fázi zautomatizovat. Doporučuji použít preprocesor Sass, ale zde si můžete vybrat libovolný preprocesor, který se vám líbí. Pokud se vám líbí syntaxe Sass, doporučuji prostudovat si příručku Sass for Little Ones, kde mluvím o výhodách použití preprocesoru a uvádím příklady, které demonstrují efektivitu rozložení pomocí Sass. Je docela obtížné vysvětlit začátečníkovi výhody použití preprocesoru, ale kluci, kteří, jak se říká, „už nakousli“, chápou, jak účinný je tento nástroj. Myslím, že po rozložení 10-15 rozložení k vám toto pochopení dojde, ale zatím mě vezměte za slovo - rozložení s CSS preprocesorem rychlejší.

Vytvořte soubor _typografie.html, připojte k němu všechny potřebné styly a knihovny. To bude váš základ s typickými prvky. Na základě dat rozvržení otevřených v grafickém editoru určete následující parametry projektu:

1. Základní písmo. Definováno pro volič tělo. Jedná se o velikost a písmo textu v rozložení textu webu, například na stránce Článek, nebo velikost a písmo textu nejčastěji se opakujících textových bloků na rozložení vstupní stránky. Pokud nemůžete určit velikost, protože například všechny prvky jedné stránky jsou jiné, napište font-size: 16px, to je průměrná hodnota pro nemocnici. Zobrazte základní rozložení v _typography.html;
2. V souboru _vars.sass definovat proměnnou pro barvu zvýraznění a další explicitní barvy rozvržení. Zde a dále použiji Sass jako příklad, ale informace můžete snadno promítnout do svého preprocesoru. Pokuste se nastavit intuitivní názvy proměnných a komentáře proměnných, abyste se v budoucnu nepletli;
3. Projděte všechny stránky projektu a určete z nich nadpisy h1 před h6(Rozměry, velká/nevelká, písmo, barva). Tím, že to uděláte předem, ušetříte asi 10 minut svého času nebo 1 hodinu s přihlédnutím k času na prokrastinaci. Definujte také inverzní hodnotu pro nadpisy a barvy textu. Přidejte nadřazenou třídu .tmavý řez do všech nadpisů a typografických značek p, blockquote, ol, ul, pokud má vaše rozvržení světlé části. Zobrazit základní typografické rozložení v _typography.html;
4. Bylo by také užitečné okamžitě definovat typografii vašeho projektu. Pro značku tělo definovat parametr jako výška čáry, obvykle je to 1,4 - 1,7 bez uvedení měrných jednotek. Vzdálenost mezi řádky základního textu by měla být přibližně stejná jako na rozvržení v grafickém editoru. Velmi důležitou roli zde hraje vaše oko, které výrazně ovlivňuje rychlost vaší práce. Nemusíte nic a vše měřit pravítkem, pokud vám oko funguje jak má. Tato dovednost se bohužel rozvíjí pouze se zkušenostmi a nedovedu si představit lepší cvičení než rozložení, samotný pracovní postup.
5. Definujte tlačítka. Vaše rozložení pravděpodobně obsahuje tlačítka. Definujte parametry největšího tlačítka a použijte modifikátor CSS pro získání tlačítek jiné velikosti. Nepředurčujte vztah prvků k „vnějšímu světu“, jako je kupř plovák, pouze vzhled. Jediná věc, která byla experimentálně odhalena, je, že nejčastěji jsou tlačítka nejuniverzálnější ve vztahu k externím prvkům, pokud jsou definovány jako displej: inline-block výchozí. Zobrazte základní rozložení tlačítek v _typography.html;
6. Podle svého uvážení definujte předem další specifické parametry projektu a opakující se bloky. Pokud si myslíte, že jste na něco zapomněli, napište komentář.

1.3 Zrychlení exportu dat z layoutu

Dříve existovalo něco jako „Řezání obrázku“ nebo „Řezání rozvržení“. Nyní tato definice není zcela správná a je vhodnější Export dat z rozvržení. Export dat se skládá z exportu obrázků a definování parametrů pro CSS.

Pokud jste uživatelem Photoshopu, můžete použít pluginy k definování vlastností CSS, jako je CSS Hat. Výbornou alternativou k podobným pluginům a nástrojům je vyvinuté oko. Jakmile budete mít dostatek zkušeností, přirozeně od takových nástrojů odejdete. Vezměte prosím na vědomí, že zkopírováním absolutně všech vlastností CSS z CSS Hat uděláte layout o něco rychlejší, ale ztratíte kvalitu a možnosti přizpůsobení. CSS Hat totiž ne vždy správně určuje vztah prvků k ostatním. Tam, kde je potřeba vycpávka, definuje okraj, kde je potřeba šířka gumy nebo procentuální hodnota, definuje pevné hodnoty. Rozvíjejte proto své oko a ukládejte základní parametry do proměnných.

Pro rychlý export obrázků stačí použít nový Adobe Photoshop nebo Adobe Experience Design. U prvního stačí kliknout pravým tlačítkem na vrstvu a vybrat Rychlý export jako PNG. V Adobe XD je proces exportu obrázků také jednoduchý a nechybí ani možnost exportovat nakreslené ikony do formátu SVG. V této fázi se příliš nestarejte o optimalizaci obrázků, protože to je úkol pro správce úloh. Více o tom později.

Co se týče ikon:

1. Pokud se jedná o složité ikony nebo ikony obrázků, které by měl správce obsahu změnit prostřednictvím panelu správce webu, exportujte je jako png a zahrňte je do značky img, jako běžné obrázky;
2. Pokud se jedná o „pevné“ ikony, které se na webu za žádných okolností nezmění a správce obsahu je nemusí měnit (například ikony telefonů, pošty, map atd.), můžete je spojit do sprite a použijte je prostřednictvím CSS, čímž jeden obrázek získá různé souřadnice pozadí-pozice. Tuto operaci lze automatizovat pomocí Doušek zapojit css-sprite. I když to můžete udělat sami, pokud je ikon málo, jednoduše rozdělením pole pomocí vodítek na matici čtverců dané šířky a výšky. Ke Gulpu se vrátíme o něco později a podíváme se blíže na důležitost správce úloh při rychlém kódování. Nejprve se ujistěte, že návrhář nepoužil žádnou sadu ikon písem. Pokud tomu tak je, pak bude stačit k projektu připojit příslušný iConpack;
3. Pokud se jedná o jednobarevné jednoduché ikony, ujistěte se také, že návrhář nepoužil písmo iConpack. V takovém případě připojte k projektu příslušný iConpack. Nejčastěji používaným balíkem písem je Font Awesome. Pokud jsou ikony originální, převeďte je na vektory a vytvořte si vlastní písmo iConpack. Máme pro vás tutoriál na toto téma: Vytvoření sady ikon písem pomocí služby Fontello.

2. Rychlost tisku

Poté, co připravíte všechny materiály, vyexportujete obrázky, vytvoříte sadu ikon fontů pro projekt, připravíte všechny ikony, nastavíte projekt, můžete začít s rozložením. Myslím, že je zřejmé, že pokud dobře znáte tagy a vlastnosti CSS, může být úzkým hrdlem rychlosti pouze rychlost psaní na klávesnici při rozvržení HTML a psaní vlastností CSS. Ke zlepšení této dovednosti postačí osvojit si nějakou metodu rychlého psaní znaků na klávesnici. Existuje mnoho metod a tyto informace Google snadno získá. Studujte, cvičte a všechno půjde. Důležitou roli zde hraje i nácvik rozvržení.

Jednou mi napsal začínající webový vývojář a stěžoval si, že jeho sny o snadném vydělávání peněz se nesplnily a že mu bylo nabídnuto 2 000 rublů za vytvoření vzhledu vstupní stránky na burzách na volné noze. Poslal mi hrubý nákres. Ptal jsem se, kolik peněz by za tento model vzal, na což mi chudák odpověděl - 10-12 tr. Kdyby mi byla nabídnuta možnost sestříhat LP pro rok 2000, kdy jsem měl malou hrstku zkušeností jako tento chlápek, byl bych za takové příležitosti upřímně rád. Samozřejmě, nyní rozložení, které provádím, stojí o něco více než toto číslo, ale kdybych vzal takové projekty za 2 000 rublů, při současné rychlosti práce bych snadno získal 4–5 tisíc rublů denně bez ztráty kvality, práce v 7 hodin denně. Není tlustý, ale není špatný. Obecně se vám, přátelé, přiznávám, vadí mi fňukaři, kteří se mají špatně, takoví lidé budou mít vždy hromadu výmluv a koblihu v kapse; Opusťme proto tento příběh a přejděme k našemu cíli rychlé a efektivní sazby.

3. Použijte Emmet a/nebo Jade

Miluju Emmeta. Díky této užitečné věci je moje práce 10x rychlejší než bez ní. Bez dalších okolků se podívejte na tutoriál:

Chladný

Plus

Koktat

Také můžete použít Jade nebo jakýkoli jiný HTML preprocesor. Věc je také pohodlná a cool, ale Emmet na mé úkoly stačí. Wang má spoustu nespokojených fanoušků Jade, ale přes všechny výhody a funkce, zahrnout Pro mě není o moc jednodušší vložit záhlaví pomocí Ctrl+V a opakování mixu není o nic jednodušší než Ctrl+Shift+D. Teoreticky, když se nad tím zamyslíte, změnou mixinové šablony se nemusíte obtěžovat s přeskupováním stejného typu zkopírovaných prvků, ale já takové chyby nedělám a velké projekty mi nejdou, proto tam není třeba takové okamžiky urychlovat. Vyzkoušejte, přátelé, experimentujte, třeba se vám tento nástroj bude líbit :-)

4. Využijte své zkušenosti

Použití Github Gist pro uložení vaší práce, částí kódu, bloků a dokonce celých sekcí. Vše, co se vám může během procesu rozvržení rychle hodit. Máme pro vás návod, jak nastavit Github Gist v editoru Sublime Text pro rychlý přístup a hledání požadovaného Gistu: Výukový program YouTube s časovým kódem na připojení Gist A samostatná lekce o Gist.

5. Použijte správce úloh

Pomocí správce úloh, např. Doušek- nejdůležitější prvek rychlé práce na layoutu. S pomocí správce úloh můžete automatizovat věci jako: vytvoření funkčního webového serveru s automatickou aktualizací stránky při ukládání v editoru kódu; pohodlné používání preprocesorů; automatizace rutinních úkolů, jako je optimalizace obrázků, komprese CSS, JS, v případě potřeby HTML a mnoho dalších úkolů.

Můžete také použít nástroje jako Prepros, ale Prepros není Gulp. Pro Gulp existují tisíce užitečných pluginů – od práce se souborovým systémem, vytváření sprajtů až po generování ikon písem a mnoho dalšího. Velmi často se mě ptají, jaký je rozdíl mezi Gulp a Prepros, zde je odpověď. Jedním tahem můžete nastavit celý kombajn, vybudovat neuronovou síť úkolů a propouštět teplou vodu potrubím, vše bude fungovat automaticky a ušetří vám čas při práci na více či méně složitých projektech.

6. Naučte se jQuery

Pokud by tato příručka byla napsána pro vývojáře front-endu, vše by se scvrklo na učení JavaScriptu a jeho rámců, jako je Angular. Ale nejsem silný ve front-endu, stejně jako v programování obecně, mým prvkem je webdesign, takže skutečný hluboký front-end nechejte programátorským žralokům, aby si ho mohli vychutnat. Více často než ne, během procesu rozvržení musíte vyřešit několik dalších problémů. Jmenovitě: animace libovolných bloků, nastavení řazení v tabulkách, vytváření tabulátorů a akordeonů, propojování knihoven, definování záložního souboru pro SVG soubory, definování parametrů dokumentu pro jednoduché operace a další drobné práce se skripty. Pro tyto účely neexistuje lepší knihovna než jQuery, kterou milují všichni návrháři rozvržení. Je jednoduchý, elegantní a má obrovské množství pluginů, které řeší téměř všechny potřebné úkoly malých a středně velkých projektů.

Procvičte si řešení některých problémů pomocí jQuery, prostudujte si základ (naštěstí toho moc není) a protáhněte si mozek tvorbou zajímavých dynamických prvků a jQuery pluginů.

jQuery byl z nějakého důvodu umístěn do samostatného odstavce. Nejčastěji je časovým omezením rozvržení strávení mnoha hodin práce s projektovými skripty, a čím lépe rozumíte jQuery, tím rychleji dokončíte projekty bez vyčerpávajícího hledání řešení na Stack Overflow.

K řešení typických problémů (kolotoče, galerie, vyskakovací okna, ověřování formulářů atd.) používejte pluginy jQuery, neměli byste psát vlastní kola - je to dlouhé, nestabilní a ve většině případů neúčinné.

Průvodce pro webové designéry o přípravě rozvržení pro rychlé rozvržení

V zásadě je toho hodně popsáno v článku „Jak se stát skvělým webdesignérem“, ale zde uvedu hlavní body konkrétně o přípravě rozvržení pro rozvržení a správné organizaci práce, což v důsledku toho urychlí práci v Všeobecné:

1. Nezvětšujte fotografii nad její původní velikost - taková fotografie bude mít nekvalitní rozložení;
2. Neproporcionálně neškálujte grafiku - takovou vadu nelze opravit rozložením;-);
3. Nepoužívejte jiné režimy prolnutí vrstev než Normální – v rozvržení NENÍ MOŽNÉ reprodukovat jakékoli režimy prolnutí, jako v grafickém editoru;
4. Snažte se neaplikovat filtry na obrázky, které by měly mít více stavů (obvykle například při umístění kurzoru). Všechny překryvy a změny se provádějí pouze přidáním nové vrstvy. Vše by mělo být snadno reprodukovatelné v rozložení HTML. To neplatí pro retuše a přípravu fotografií;
5. Neměňte měřítko fotografie před převedením na inteligentní objekt – návrhář rozvržení určí velikost obrázku v Responzivním rozvržení, originál uloží jako inteligentní objekt;
6. Ořízněte fotografii pouze pomocí ořezové masky pro postavu, původní fotografii, stejně jako v předchozím bodě, musíte uložit do chytrého objektu - nezapomeňte: „Při každém načtení obrázku pro web a jeho zaokrouhlení ručně ve Photoshopu; , někde ve světě se pláče kočičko...“;
7. Pokud kreslíte ikony ve Photoshopu, nerastrujte je ve zmenšené velikosti. Nezapomeňte, že rozvržení má stále fázi rozvržení a všechny ikony bude třeba vektorizovat. Původní inteligentní objekty s ikonami musí být dostatečně velké pro kvalitní trasování;
8. V ideálním případě byste měli mít všechny ploché ikony a grafiku ve formátu SVG v samostatné složce. Pokud jste líný designér, zvažte možnost kvalitního převodu nebo exportu ikon do SVG;
9. Vždy vytvořte samostatnou složku se všemi fonty, které používáte ve formátu TTF nebo OTF. Do této složky by měla být také umístěna písma ikon;
10. Vytvářejte rozvržení 1 v 1 (72 ppi). Při 100% zobrazení by rozvržení měla být ve stejném měřítku jako zamýšlený výsledek rozvržení HTML;
11. Ujistěte se, že ve své práci používáte nějaký druh mřížkového systému. Můžete si ho vyvinout sami, ale doporučuji použít mřížkový systém Bootstrap. Šířku obsahu lze přizpůsobit z původní šířky mřížky Bootstrapu, k tomu můžete použít pluginy pro vytváření mřížek, pokud jste uživatelem Photoshopu;

Okamžitě odpovím na nejočekávanější a nejsložitější otázky týkající se rozvržení:

1. Adobe Muse a podobné nástroje?- ano, můžete to použít a bude to rychlé. Pokud váš projekt není větší než jednostránkový jednostránkový server, který nepotřebuje vývoj, propagaci ani systém řízení.

2. A co Perfect Pixel?- Jsem si upřímně jistý, že Responsive Design a Perfect Pixel jsou různé koncepty a dokonce nejsou kompatibilní. Jako webdesignér mám samozřejmě nějaké rysy perfekcionisty, ale pokud je nápad dobrý, bude zářit v Responzivním rozložení, pokud je nápad, omluvte výraz, kecy, pak bez ohledu na to, jak moc to vypilujete a upravovat to pixel po pixelu, zůstane nepracujícím parchantem. Zapněte proto své přesvědčovací schopnosti, zásobte se argumenty a promluvte si s klientem o marnosti takového přehnaného perfekcionismu.

3. Proč neudělat všechny obrázky sprite, protože pak bude na server pouze jeden požadavek?- existují obrázky, které musí načíst správce obsahu. Je nepravděpodobné, že by správce obsahu byl schopen rychle a bezbolestně vypočítat souřadnice nového obrázku přidaného do spritu. Nezapomeňte na ty, kteří budou web udržovat a plnit.

4. Kde končí čára rozložení a začíná to Přední konec, není to to samé?- vše je jednoduché, pokud je úkolem vyvinout komplexní interaktivní rozhraní pro službu nebo webovou aplikaci, která vyžaduje úzkou spolupráci s databází - jedná se o Front-End. Takovéto unikátní projekty většinou přesahují rámec a rozpočet jednoho freelancera, podobné úkoly jsou zadávány týmu vývojářů a přístupy k takovým projektům jsou zcela odlišné.

Kompetentní vývoj webových stránek je komplexní vícefázový proces. Rozvržení webových stránek je nedílnou součástí procesu výroby webových stránek. Co je rozvržení webu - jedná se o proces vytváření webové stránky na základě hotového rozvržení. Tento proces zahrnuje vytvoření kódu stránky pomocí hypertextového značkovacího jazyka html, který je vhodný pro prohlížeč, a jeho styling pomocí kaskádových stylů (CSS). Není třeba zkoušet rozvržení webu sami, je vhodnější objednat si služby návrháře rozložení. Koneckonců, musí vzít v úvahu četné funkce, jak pravidla rozvržení, tak parametry pro zobrazování dokumentů v různých prohlížečích.

Tvorba webových stránek s ohledem na základní pravidla slušného chování

Návrh rozvržení a šířky stránky

Vývoj webu, aby nenarušil původně promyšlený design, musí počítat s tím, že uživatelé internetu mají monitory s různým rozlišením. V tomto případě existují dvě možnosti rozvržení návrhu webu: web s pevnou šířkou a flexibilní web. Šířka pevného webu se určuje na základě skutečnosti, že podle statistik většina uživatelů používá monitory s rozlišením 1024x768 pixelů. Proto, abyste se vyhnuli vzhledu vodorovného posuvníku a zkreslení návrhu, musíte mít průměrnou šířku rozložení přibližně 800-990 pixelů. Nevýhodou tohoto způsobu uspořádání je neefektivní využití volného prostoru. Plynulé rozvržení webových stránek je dosaženo díky skutečnosti, že měrnými jednotkami pro rozvržení návrhu jsou většinou procenta, což umožňuje roztažení rozvržení přes celou šířku okna prohlížeče. Nejvýhodnější je rozložení a provedení pryžového rozložení.

Rozvržení webu zohledňující kompatibilitu mezi prohlížeči

Dnes existuje řada oblíbených prohlížečů, které lidé používají k surfování na internetu. Patří mezi ně: Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari a další. Každá z nich má několik verzí a každá může zobrazit stejnou stránku ve formátu html různými způsoby. Všichni tvůrci prohlížečů se snaží dosáhnout jednotného standardu pro používání hypertextového značkovacího jazyka, ale stále existují neshody, takže rozvržení webových stránek musí brát v úvahu kompatibilitu mezi různými prohlížeči.

Kompetentní rozložení webu s čistým kódem

Dalším pravidlem slušného chování při navrhování webu je čistý a krásný kód. Co to znamená? To znamená, že značkovací kód HTML stránky je krásně naformátovaný, obsahuje komentáře a zvýrazněné logické bloky. Použití kaskádových stylů (CSS) vyčistí kód od nepotřebných značek a výrazně odlehčí váhu webu jako celku. Uspořádání webu pomocí všech těchto manipulací je potřeba pro zjednodušení kódu a při jeho opravách, úpravách a finalizaci narazíte na nejmenší počet problémů. Správný kompaktní kód usnadní vyhledávačům indexování vašeho webu a jeho nízká hmotnost zkrátí dobu načítání vašeho webu.

Tabulkové a blokové rozložení webu

Webovou stránku je možné navrhnout dvěma zásadně odlišnými způsoby. Prvním způsobem je použití tabulek. Rozvržení tabulky používá značkovací prvky, které neodpovídají sémantice, kterou nesou, za účelem získání externích efektů, pokud tabulky původně nebyly určeny k vytvoření rámce stránky, ale sloužily pro standardní zadávání dat. Aby bylo možné rozvržení webu pomocí rozložení tabulky, je často nutné použít mnoho vnořených tabulek. Tento přístup často velmi ztěžuje prohlížeči zpracování stránek, zvětšuje velikost dokumentu a snižuje rychlost načítání souborů a může vést k chybám v kódu. Pohodlnější a správnější je z hlediska přesvědčení o oddělení obsahu a designu rozvržení webu pomocí vrstev (bloků). Rozvržení webových stránek založené na blocích poskytuje více příležitostí, umožňuje vytvořit kompaktnější kód a zvýšit rychlost načítání webové stránky. Je mnohem pohodlnější přizpůsobit vlastnosti vrstvy pomocí CSS. Pomocí vrstveného rozložení můžete mnohem efektivněji vytvořit web, který se bude správně zobrazovat v prohlížečích.

Uspořádání webu je záležitostí profesionálů

Web je lepší objednat u profesionála. Profesionálně navržený web má jednotný styl a zobrazuje všechny prvky designového konceptu. Má dobré navigační vlastnosti a umožňuje snadnou navigaci na webu i nezkušenému uživateli. Uspořádání webu někdy zohledňuje potřebu určitých pracovních nástrojů: výkonný počítač s velkou zásobou RAM. A konečně jen profesionál se zkušenostmi rozumí složitosti chování různých prohlížečů a správně používá různé stylové prvky k přesnému zobrazení designu webových stránek.

Od autora: Dobrý den, milí čtenáři. V tomto článku se pokusíme podrobně zvážit, jaké je rozložení webu a jaké to je. Materiál je určen pro začátečníky v tvorbě webových stránek.

Definování vzhledu webu

Abychom mohli začít naši exkurzi do světa webových technologií, musíme nejprve porozumět definici. Takže rozložení webu – co to je?

Jednoduše řečeno, je to proces vytváření webových stránek pomocí speciálních jazyků, které jsou k tomu určeny. K tomuto účelu slouží HTML, CSS a JavaScript. Ten je jedním z programovacích jazyků a umožňuje vám psát webové skripty, první dva vám umožňují zcela vytvořit stránky budoucího webu, umístit na ně potřebný obsah a správně jej formátovat. Ve skutečnosti na tom není nic složitého, jak si někteří lidé myslí.

HTML je hypertextový značkovací jazyk.

S jeho pomocí se tvoří samotná struktura, rámec webu. Proto je rozložení bez HTML prostě nemožné!

Dále musíme pochopit, co je druhý jazyk – CSS. Tato zkratka znamená kaskádové styly. Tedy kaskádové styly. Pokud jste začátečník, pak už teď skoro ničemu nerozumíte. Ale zkusme to vysvětlit jednoduchými slovy. CSS je vše, co souvisí s designem stránek.

Například v HTML můžeme vytvářet odstavce, tabulky, bloky a cokoli chceme. Ale to vše bude vypadat velmi nepopsatelně. K nastylování drátěného modelu a vytvoření skutečně krásné šablony potřebujeme CSS. Takže otázka: "Co je rozložení webu?", doufám, zmizela z vaší mysli. Aspoň ti to bylo jasnější.

No, co je JavaScript? "Proč o něm nic neřekneš?" ptáš se správně. Jak již bylo zmíněno, jedná se o programovací jazyk a je velmi aktivně používán v rozložení. Pravděpodobně jste více než jednou navštívili stránky, kde určité akce způsobují určité věci. Když například kliknete na nabídku, objeví se další blok, najetím na prvek se změní jeho vzhled, nebo když přepnete tlačítka, změní se obsah zobrazený v některém kontejneru. To vše jsou velmi užitečné věci, ale nelze je implementovat pomocí čistého HTML a CSS.

JavaScript tedy potřebují weboví vývojáři k psaní skriptů (to znamená, že sdělují prohlížeči, co, kdy a jak má za určitých podmínek dělat s webovými stránkami našeho webu).

Podstata rozložení

Skvělé, úspěšně jsme přišli na definici. Ale proč potřebujete rozložení webových stránek?

Otázka je samozřejmě logická, zvláště pro začátečníka. Odpověď na ni je neuvěřitelně jednoduchá – za účelem vytvoření webu. No, jak jinak? Samozřejmě každý sází jinak. Oblíbené jsou dnes například takzvané konstruktory, ve kterých si můžete vytvořit vlastní projekt, aniž byste znali jakékoli jazyky. Ale v tomto případě v podstatě jen předáváte stroji zápis kódu. Program vygeneruje kód sám podle vašich pokynů. Samozřejmě tím může utrpět kvalita, protože člověk může psát v každém případě lépe, kratší a krásnější.

Jak vzniká web?

Dříve jste si mohli přečíst něco o tom, jaké jazyky se používají v layoutu a k čemu jsou potřeba. Pojďme se ale na samotný proces podívat trochu blíže. Představme si sami sebe v kůži webového vývojáře. Chcete-li tedy začít, potřebujete rozvržení webu vytvořené návrhářem ve Photoshopu. Samozřejmě pokud se bavíme o odborné práci. Pro studium a školení nemusíte mít rozvržení, ale jednoduše si rozložíte primitivní stránku, kterou pak můžete postupně zdobit a přivádět do krásnějšího stavu.

Někteří lidé to mohou udělat přímo v poznámkovém bloku, ale to je možná velmi obtížná a nepohodlná možnost. Je lepší používat speciální programy. Je jich poměrně hodně. Například Notepad++, SublimeText, DreamVeawer a další. Nebudeme je podrobně zvažovat, ale funkčnost těchto programů může výrazně urychlit proces psaní kódu, a to i pro začátečníka. Některé editory mají zvýraznění značek a stylů, což je velmi pohodlné.

Obr. 1. Rozvržení webu v Notepad++

Máme rozvržení, máme program. Můžete začít pracovat.

Co znamená rozvržení webu pro webového vývojáře? Nejprve popíše strukturu budoucího projektu na základě vrstev v rozvržení. Poté nastaví konkrétní styly pro strukturální bloky v CSS. Poté se začíná pracovat na menších částech rozložení a designu různých prvků. V tomto videokurzu se můžete dozvědět více o tom, jaké techniky rozvržení webových stránek existují. Poté vývojář začne psát webové skripty, pokud jsou potřeba pro konkrétní web. Při práci může využívat některé hotové knihovny, frameworky a nástroje, které usnadňují psaní kódu.

Jaké typy rozvržení existují?

Musíme se ještě vypořádat s jedním problémem, abychom získali více či méně jasný obrázek. Ukazuje se, že rozložení lze provést různými způsoby.

jak přesně? Za prvé, existuje pevné rozložení. To je, když jsou rozměry webu přesně specifikovány ve stylech (obvykle v pixelech). Při změně velikosti okna se tedy stránka nijak nemění, její rozměry zůstávají stejné. To znamená, že na malých obrazovkách bude posuvník, ale na větších obrazovkách může vše vypadat jako malé. To je hlavní nevýhoda pevných velikostí. Jednou z výhod je jednoduchost této metody. Technika pevného rozložení je mnohem jednodušší než ostatní.

Rýže. 2. Horizontální rolování při zmenšení okna je jasnou známkou pevných rozměrů

Rozložení pryže je pokročilejší možností. Liší se tím, že velikosti všech nádob jsou uvedeny pouze v procentech. Podle toho se při změně šířky okna změní stránka tak, že se do ní její obsah vždy celý vejde a nezobrazí se žádný vodorovný posuvník. Potíže začínají na stejných malých a velkých obrazovkách.

Při nízkém rozlišení se obsah může stát nečitelným a na velmi velkých monitorech se mohou objevit velmi dlouhé čáry. Můžete je číst, ale je to velmi nepohodlné. Jak vyrobit gumové layouty se můžete naučit pomocí našeho praktického kurzu o gumovém layoutu.

Co je to adaptivní rozvržení webu?

Ach, tady se dostáváme k nejmodernějšímu, nejpokročilejšímu a nejkomplexnějšímu způsobu vytváření šablony. Slovo „adaptivní“ ve skutečnosti stačí k tomu, abyste pochopili, co se s takovou stránkou děje.

Je to tak, přizpůsobí se různým rozlišením obrazovky, perfektně zobrazí na mobilních telefonech, tabletech a dokonce i na velkých obrazovkách. Samozřejmě pouze v případě, že je kód napsán šikovně. V dnešní době je stále více webových stránek responzivních. To je výrazně zlepšuje z hlediska pohodlí pro návštěvníky. Zcela správné adaptivní rozvržení pro všechna rozlišení je vrcholem dovednosti, o kterou by se měl webový vývojář snažit. Může vám pomoci zvládnout tuto obtížnou techniku.

Podívali jsme se tedy na definici rozvržení, co to je a jak se vytváří. Pokud se vám výše uvedené líbilo a máte náladu prozkoumávat svět tvorby webových stránek, přihlaste se k odběru našeho blogu, přibude spousta dalších zajímavých věcí!

Dříve byl na internetu rozšířený tabulkový typ rozložení, kterému je věnována tato stránka. Postupem času však tento přístup k vytváření struktury webu zastaral a byl nahrazen blokovým rozložením.

Rozdíly mezi rozložením bloků a tabulkovým rozložením

Pokud rozložení tabulky naznačuje, že obsah stránky je uvnitř značky

Jedinou znatelnou nevýhodou blokového uspořádání je to, že stránky na něm vytvořené se mohou v prohlížečích zobrazovat jinak. Abyste tomu zabránili, musíte rozvržení nastavit jako „cross-browser“, to znamená, že se zobrazí stejně v jakémkoli prohlížeči.

Podstata blokového uspořádání

Rozvržení webu se vytvoří v grafickém editoru: je označeno, kde se která oblast stránky (záhlaví, spodek, postranní panel, hlavní obsah) bude nacházet a kolik místa zabere, jsou připraveny obrázky a pozadí.

Každá část stránky je umístěna ve vlastním bloku