Typické rozvržení webových stránek. Rozvržení HTML. Rozložení zápatí stránky
Tato podsekce popisuje oblíbená rozvržení webových stránek, která se v rozvržení nejčastěji používají, a také několik technik, které jim dodávají atraktivnější vzhled. Rozvržení jsou vytvořena pomocí , takže budete potřebovat znalost těchto jazyků, abyste plně porozuměli principu rozvržení. Pokud je znáte, pak víte, že v HTML a CSS lze stejného výsledku dosáhnout zcela odlišnými způsoby. Zde jsou uvedeny pouze některé z možných metod.
Rozvržení jsou rozdělena do tří hlavních typů:
- Pevný- to jsou rozvržení s pevná šířka(CSS) optimalizované tak, aby vyhovovaly většině moderní monitory uživatele nebo s „plovoucí“ šířkou, která má omezení na maximální (CSS) a minimální (CSS) šířku stránky. Obvykle je obsah v takových případech umístěn uprostřed, ale někteří webmasteři preferují přitlačit stránky webu na jednu stranu okna prohlížeče.
- Guma- rozložení, která mají měnit velikost, přizpůsobí se oknu prohlížeče a zaberou celou jeho dostupnou šířku. Stejně jako pevné jsou však také často dodatečně uváděny maximální a/nebo minimální šířka. Jednou z možností, jak tohoto efektu dosáhnout, by bylo orámovat bloky stránky HTML v dalším bloku obalu (pokud takový ještě není v rozvržení), způsobem pevných rozvržení, na který se poté použijí vlastnosti úpravy šířky. To je nutné, aby se při zmenšení okna prohlížeče sloupce navzájem nepřekrývaly nebo nesjížděly dolů.
- S obsahem dopředu- jsou gumové popř pevné rozvržení, ve kterém se sloupec s hlavním obsahem stránky (obsahem) objevuje v HTML kódu výše než většina ostatních prvků. To se děje tak, že v prohlížečích s vypnutým CSS mohou uživatelé nejprve vidět, pro co přišli, a teprve poté navigaci a další drobné prvky HTML stránky. Rozvržení takových rozvržení je však poněkud obtížnější na implementaci a vyžaduje, aby návrhář rozvržení měl určitou úroveň dovedností a znalostí nezbytných pro identické zobrazení webu v různých prohlížečích.
Kromě sloupců obsahují rozvržení nejlepší část(header) a bottom (footer), protože jsou již dlouho známou a nedílnou součástí téměř všech stránek na internetu. Ze stejného důvodu zde naleznete příklady, které umožňují zápatí tisku na konec stránky a udělejte sloupy stejné výšky.
Vezměte prosím na vědomí, že téměř ve všech rozvrženích můžete zaměnit některé sloupce, aniž byste změnili HTML kód stránek. Proto za prvé, na základě těchto rozvržení můžete vytvořit některé ze svých vlastních možností, a za druhé, pokud se ukáže, že již
Kde obvykle začíná proces rozvržení? Začíná se studiem rozvržení nebo rozvržení budoucího webu. Nejčastěji jsou tato rozložení vytvořena v programu Adobe Photoshop, proto jako návrhář rozvržení musíte být schopni používat tento program, konkrétně umět vyjmout obrázky z rozvržení, měřit odsazení mezi prvky, vypočítat velikosti a parametry různých součástí budoucí webové stránky atd. . Nejprve si nastavíme pracovní prostor program Adobe Photoshop pro snadné použití.
Všechny příklady budou uvedeny v programu Adobe Photoshop CS5, s rozhraním v angličtině.
Když otevřete Adobe Photoshop, uvidíte něco takového:
- Lišta hlavního menu;
- Panel možností;
- Panel nástrojů;
- Další panely.
Musíme nakonfigurovat sadu dalších panelů. Chcete-li začít, přejděte do nabídky Okno – Nový pracovní prostor:
Zadejte název nového pracovního prostoru, např. můj pracovní prostor a stiskněte Uložit. Nyní musíme vybrat potřebné panely, se kterými budeme pracovat. Přejděte do okna a zaškrtněte políčka vedle Dějiny, Info, Vrstvy, Navigátor, Možnosti, Nástroje. Můžete zrušit zaškrtnutí zbývajících panelů, pokud jsou zaškrtnuté.
Nyní musíme tyto panely zajistit. Chcete-li to provést, klikněte na horní část panelu a přetáhněte jej na požadované místo tak, aby váš pracovní prostor vypadal takto:
Když se objeví modrý průhledný proužek, uvolněte kurzor a panel ukotvíte na toto místo:
Chcete-li zavřít nepotřebné karty, klikněte na ikonu vpravo horní roh a vyberte položku z rozevírací nabídky Zavřít:
První rozložení, které vytvoříme, se nazývá jednoduchý_text.psd, je umístěn ve složce šablony. Otevřete jej v Adobe Photoshopu podržením kláves Ctrl+O(nebo přes menu Soubor – OTEVŘENO) a vyberte soubor.
Zapněte pravítko pomocí klávesových zkratek Ctrl+R nebo přes menu Pohled – Vládci:
Nyní dvakrát klikněte na pravítko a otevřete kartu Jednotky a pravítka pro nastavení jednotek měření. Vyberte v bloku Jednotky Pro Vládci A Typ jednotky měření pixelů:
Nyní je vše připraveno, můžete začít tvořit rozvržení.
Vytvoření struktury webové stránky
Vytvořte složku na ploše a pojmenujte ji jednoduchý text. V této složce vytvořte dva soubory index.html A styl.css.
Jak si pamatujete, vytváříme strukturu webové stránky na jazyk HTML. Nejprve tedy otevřeme soubor index.html a napište do něj původní kód:
Nyní mezi tagy
vytvořit blok pomocí značky :
Štítek
Zapišme si do tohoto bloku prvky, které jsou přítomné na rozvržení, jmenovitě nadpis a odstavce:
Přidejte text mezi tyto značky sami.
Nyní v kontejneru
napište cestu k souboru se styly:
Styl webové stránky
Pokud otevřete index.html v prohlížeči uvidíte zapsanou webovou stránku čisté HTML. Je velmi odlišný od toho, který je zobrazen na modelu. Vyřešíme to pomocí kaskádové tabulky styly.
Otevřete svůj soubor style.css a resetujte všechny výplně pomocí univerzálního selektoru hvězdičky:
* ( okraj: 0; odsazení: 0; )
Nyní si zapišme vlastnosti značky
:Text (barva pozadí: #e35b5b; velikost písma: 16px; výška řádku: 24px; barva: bílá; rodina písem: Arial; )
Jak zjistit barvu pozadí webové stránky v Adobe Photoshopu? Chcete-li to provést, klikněte na jeden ze dvou políček s barvou:
Poté klikněte kapátkem na pozadí rozvržení a zkopírujte hexadecimální kód, prezentované v okně Výběr barvy :
Jak zjistím velikost, řádkování, styl, rodinu písem a barvu textu? Chcete-li to provést, vyberte vrstvu s textem a otevřete panel Charakter. Zobrazí se tento panel následující parametry:
Vezměte prosím na vědomí, že pro barvu textu jsme místo hexadecimálního kódu napsali název odstínu: barva: bílá; . Je vhodné používat názvy odstínů pro černou a bílý white , protože název se zapisuje mnohem rychleji než hexadecimální kód. Všechny názvy barevných odstínů naleznete v této tabulce.
Vlastnosti pro blok
U tohoto bloku určíme šířku a také horní, levé a pravé odsazení:
U mnoha vlastností uvidíte hodnoty zapsané v následujících formátech:
- okraj: hodnota1 hodnota2 hodnota3 hodnota4;
- okraj: hodnota1 hodnota2 hodnota3;
- okraj: hodnota1 hodnota2;
- okraj: hodnota1;
V prvním případě specifikujeme hodnoty pro každou ze čtyř stran, například margin: 10px 12px 20px 15px; : 10px – horní odsazení, 12px – pravé odsazení, 20px – spodní odsazení, 15px – levé odsazení. Tento zápis se obvykle používá, když jsou odsazení na každé straně jiné.
V druhém případě zapisují se tři hodnoty, například margin: 10px 12px 20px; : 10px – horní výplň, 12px pravá a levá výplň, 20px – spodní výplň. Tento zápis je vhodné použít, když jsou hodnoty vpravo a vlevo stejné, ale hodnoty nahoře a dole se liší. Hodnota auto se používá, když chcete, aby prohlížeč automaticky vypočítal odsazení vlevo a vpravo.
Ve třetím případě jsou použity dvě hodnoty, například margin: 10px 12px; : horní a spodní okraj 10px, pravý a levý okraj 12px. Pokud jsou odsazení nahoře a dole stejné a odsazení vpravo a vlevo jsou stejné, pak je vhodné zapsat pouze dvě hodnoty, jako v našem příkladu.
Ve čtvrtém případě zapíše se jedna hodnota, např. margin: 10px; : odsazení na každé straně je 10px. Když jsou parametry na všech stranách stejné, je vhodné použít právě takový zápis.
Jak změřit šířku nebo výšku prvku v Adobe Photoshopu? Zvažme jeden způsob: vezměte si nástroj Nástroj obdélníkový výběr ( klávesová zkratka M):
Poté vybereme oblast, například potřebujeme zjistit odsazení od horního okraje rozložení k začátku obsahu, vyberte jej:
V panelu Info podívejte se na hodnoty výšky H nebo hodnota šířky W pokud potřebujete znát šířku prvku:
Pojďme k názvu
Zde musíme určit velikost, řádkování, stín a spodní výplň. Již víte, jak zaregistrovat první dvě nemovitosti.
K určení stínu potřebujeme vlastnost stín textu:
- Tady 0
– odsazení podél osy X;
- 1px– posunutí podél osy Y;
- 0
– poloměr rozostření stínu;
- rgba(0,0,0,0,3)- barva stínu. V v tomto případě používáme formát RGBA, včetně alfa kanálu, který nastavuje průhlednost prvku. V závorkách jsou první tři hodnoty odpovědné za barvu ve formátu rgb, A poslední hodnota zodpovědný za transparentnost. Tato hodnota se zapisuje v rozsahu od 0 do 1, kde 0 představuje plnou průhlednost a 1 představuje neprůhlednost.
Jak zjistit parametry stínu v Adobe Photoshopu? Vybrat požadovanou vrstvu na panelu vrstev a klikněte na ikonu ƒx:
Otevře se okno Styl vrstvy
. Musíte vybrat kartu Vrhat stín:
Zde je parametr Neprůhlednost zodpovědný za transparentnost, parametr Vzdálenost je zodpovědný za odsazení podél osy Y, parametr Velikost je zodpovědný za rozostření a parametr Úhel je zodpovědný za posun podél osy X Protože náš stín dopadá v pravém úhlu, posun podél osy X bude nulový. Barvu stínu najdete v rámečku naproti parametru Režim prolnutí:
Hodnota barvy v RGB formát a s alfa kanálem to v tomto případě bude vypadat takto:
Text-shadow: 0 1px 0 rgba(0,0,0,0,3);
Zbývá zapsat odsazení níže.
Pokud potřebujete napsat hodnotu pro jednu ze čtyř stran, použijte tento zápis:
- margin-top– horní odsazení;
- okraj-pravý– pravé odsazení;
- okraj-dole– spodní odsazení;
- okraj-levý– levé odsazení.
Protože potřebujeme určit spodní okraj, napíšeme margin-bottom: 30px;
Výsledkem je, že tento kód dostaneme do souboru styl.css:
* ( margin: 0; padding: 0; ) body ( background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; ) div ( width: 724px; margin : 43px auto 0 ) h1 (velikost písma: 60px; výška řádku: 62px; stín textu: 0 1px 0 rgba(0,0,0,0,3); okraj-dolní: 30px; )
První odstavec. Sousední voliče
Zapišme si vlastnosti pro první odstavec:
P ( font-size: 24px; line-height: 30px; color: #a42727; text-shadow: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; )
Nyní, pokud uložíte změny a otevřete soubor index.html v prohlížeči uvidíte, že tyto vlastnosti jsou aplikovány na všechny odstavce na stránce. Vzhledem k tomu, že tyto vlastnosti potřebujeme zapsat pouze pro první odstavec, v tomto případě můžeme použít sousední voliče. co to je? V html šablona, značky
A
(vezměme první odstavec) jděte jeden po druhém, což znamená, že se jedná o sousední značky v CSS, sousední selektory jsou zapsány takto:
H1+p (velikost písma: 24px; výška řádku: 30px; barva: #a42727; stín textu: 0 1px 0 rgba(255,255,255,0,35); okraj-dolní: 42px; )
Nyní se tyto vlastnosti budou vztahovat pouze na první odstavec.
Poslední odstavec. Třídy v CSS
Nyní přejdeme k poslednímu odstavci. Protože se také liší od hlavního textu, přiřadíme mu třídu. V html šabloně napište atribut class pro poslední odstavec s hodnotou last-p . Název třídy, stejně jako identifikátor, musí začínat písmeny latinské abecedy:
V CSS jsou třídy zapsány takto:
P.last-p ( barva: #ffbfbf; zarovnání textu: vpravo; stín textu: 0 1px 0 rgba(0,0,0,0,3); )
Tyto vlastnosti budou fungovat pouze pro poslední odstavec v naší šabloně.
Na rozdíl od identifikátorů třída s určitou hodnotu můžete jej na stránce použít tolikrát, kolikrát chcete.
Vlastnost text-align s hodnotou right se používá, když chcete zarovnat text doprava. Můžete použít i jiné hodnoty, například text-align: center; v tomto případě bude text zarovnán na střed bloku.
Další odstavce
Pro zbývající odstavce zapíšeme následující vlastnost:
P (okraj-dolní: 30px; )
Další vlastnosti: barva, rodina písem, velikost, řádkování tato značka bude dědit z nadřazeného prvku, tzn. štítek
.
Pokud okno prohlížeče zmenšíme, uvidíme, že obsah je přilepený po stranách okna. Chcete-li to vyřešit, přidejte odsazení do selektoru div:
Seskupení voličů
Pokud několik prvků webové stránky obsahuje identické vlastnosti S stejné hodnoty, například jako v našem příkladu má nadpis a poslední odstavec obecný majetek je stín, pak můžete tyto selektory seskupit tak, že je napíšete oddělené čárkami:
H1,p.last-p ( text-shadow: 0 1px 0 rgba(0,0,0,0,3); )
Nezapomeňte odebrat vlastnosti z jednotlivých prvků v našem případě je potřeba odstranit stín z selektorů h1 a p.last-p.
Video k lekci
Část 1
Bootstrap framework: rychlé adaptivní rozložení
Videokurz krok za krokem o základech adaptivní rozložení v rámci Bootstrap.
Naučte se jednoduše, rychle a efektivně sázet pomocí výkonného a praktického nástroje.
Layout na objednávku a dostat zaplaceno.
Bezplatný kurz „Stránky na WordPressu“
Chcete ovládat WordPress CMS?
Získejte lekce o designu a rozložení webových stránek na WordPress.
Naučte se pracovat s motivy a stříhat rozvržení.
Zdarma video kurz kreslení návrhu webu, rozložení a instalace na CMS WordPress!
*Najetím myší pozastavíte rolování.
Zpět dopředu
Zvládnutí CSS: Rozvržení stránky
Jeden z hlavních výhody CSS- schopnost ovládat vzhled stránky bez použití značek HTML design. Vytváření šablon CSS má však nespravedlivou pověst, protože je obtížné, zejména mezi vývojáři, kteří teprve začínají. tuto technologii. Částečně je to způsobeno tím, že ne všechny prohlížeče interpretují CSS stejně, ale ještě více tím, že existuje obrovské množství různé techniky vytváření rozvržení pomocí šablon stylů.
Zdá se, že každý webový vývojář má své vlastní techniky rozvržení CSS a začínající webmasteři často používají techniku, aniž by chápali, jak to funguje. Tento přístup „černé skříňky“ k používání CSS samozřejmě pomáhá rychle získat výsledky, ale v konečném důsledku brání rozvoji porozumění jazyku vývojáře.
Všechny tyto různé techniky jsou však založeny na třech základních konceptech: polohování, balení a manipulace s vycpávkami. Různé techniky při bližším prozkoumání se zas tak neliší, a pokud si osvojíte základní pojmy a koncepty, bude pro vás poměrně snadné vytvořit si vlastní šablonu CSS stránky.
Centrování návrhu
Dlouhé řádky textu jsou velmi nepohodlné nebo dokonce obtížně čitelné. Jak monitory a jejich rozlišení neustále rostou, problém čitelnosti obrazovky se stává stále větším problémem. Jedním ze způsobů, jak se s tímto problémem vypořádat, je vycentrovat obsah stránky. Namísto roztahování obsahu přes celou šířku obrazovky zabírají vycentrované návrhy pouze část obrazovky, čímž dávají řádkům snadno čitelnou délku.
Stránky zaměřené na obsah jsou v dnešní době běžné, takže naučit se vytvářet design zaměřený na střed pomocí CSS je jednou z prvních věcí, které se chtějí noví vývojáři webu naučit. Existují dva hlavní způsoby, jak vycentrovat design: jeden používá automatické vycpávání, druhý používá polohování a negativní vycpávky.
Centrování pomocí automatického polstrování
Předpokládejme, že stojíte před typickým úkolem horizontálně centrovat div s id obal("obal").
K tomu v praxi stačí nastavit šířku div obal a nastavte vodorovné okraje na auto.
V tomto příkladu je šířka nastavena v pixelech. Ale samozřejmě to můžete stejně snadno určit jako procento šířky těla hlavního dokumentu nebo použít velikost v „em“ vzhledem k velikosti textu.
Tato metoda funguje ve všech moderní prohlížeče, ale ne v IE 6. Naštěstí IE interpretuje vlastnost nesprávně zarovnání textu: na střed, zarovnává na střed vše, nejen text. Toho můžete využít ve svůj prospěch tím, že vše v tagu vycentrujete tělo, včetně div obal, poté znovu přiřazení zarovnání k vlevo, odjet pro obsah bloku obal.
Text ( text-align: center; ) #wrapper ( width: 720px; margin: 0 auto; text-align: left; )
Používání nemovitosti zarovnání textu jako toto je v podstatě hack, ale je zcela neškodný a neovlivní nepříznivě váš kód. Nyní náš blok obal středem v IE 6, stejně jako v jiných prohlížečích, které jsou více v souladu se specifikací.
Centrování návrhu pomocí polohování a záporného vycpávky
Metoda automatického vyplnění je nejoblíbenější přístup, ale vyžaduje hack. Vyžaduje také stylizaci dvou prvků namísto jednoho. Z tohoto důvodu mnoho lidí preferuje umístění a záporné marže.
Začneme, stejně jako v předchozím příkladu, nastavením šířky obal. Poté nastavíme vlastnost pozice Pro obal ve smyslu relativní a majetek vlevo, odjet ve smyslu 50%
. To nám umožňuje umístit levý okraj bloku obal ve středu stránky.
#wrapper ( šířka: 720px; pozice: relativní; vlevo: 50 %; )
My však potřebujeme něco trochu jiného – chceme vidět střed bloku uprostřed stránky obal. Toho lze dosáhnout použitím negativního odsazení na levé straně bloku. obal rovnající se polovině šířky tohoto bloku. Tím se blok posune obal polovinu jeho šířky doleva a přesunout jej do středu obrazovky:
Výběr způsobu centrování závisí zcela na vašem vkusu. Vždy je však užitečné znát několik metod a technik, protože nemůžete odhadnout, co se vám může hodit.
Vzory založené na zábalu
Existuje několik způsobů, jak vytvořit vzory pomocí CSS, včetně absolutního umístění a negativního odsazení. Myslím, že nejjednodušší způsob použití je založen na obalení některých prvků kolem jiných. Jak název napovídá, v tomto typu šablony jednoduše nastavíte šířku umístěných prvků a poté je zalomíte vlevo nebo vpravo.
Protože takto „zatopené“ prvky již nezabírají žádný prostor v toku dokumentu, nemají žádný vliv na své okolí. blokové prvky. Chcete-li obejít toto chování, budete muset rozbalit různé referenční body vaši šablonu. Namísto postupného nanášení a rozbalování je pohodlnější použít trochu jiný přístup: aplikujte zalomení téměř na všechno a poté jej jednou nebo dvakrát zrušte na „strategických“ bodech dokumentu, jako je zápatí.
Šablona se dvěma sloupci pomocí obtékání
Chcete-li vytvořit jednoduchou šablonu se dvěma sloupci pomocí zalamování, začneme se základní strukturou (X)HTML. V našem příkladu se (X)HTML framework skládá ze zón: branding, obsah, navigace a zápatí. Všechno tato struktura uzavřeno v "obalu" - obal, který bude zarovnán vodorovně pomocí jedné z výše popsaných metod.
...
...
Hlavní navigace bude na levé straně a obsah bude na pravá strana. Ve struktuře stránky jsem však oblast obsahu umístil nad oblast navigace. Hlavním důvodem je to, že obsah stránky je nejdůležitější a měl by být umístěn v dokumentu co nejvýše, blízko začátku.
Obvykle, když lidé vytvářejí šablony a používají obalování, dávají vlastnost plovák význam vlevo, odjet pro oba sloupce a poté vytvořte „okraj“ mezi sloupci pomocí vlastností margin nebo padding. Při použití tohoto přístupu jsou reproduktory pevně zatlačeny do prostoru, který mají k dispozici - takže není prostor pro dýchání. To obvykle nezpůsobuje problémy, ale některé prohlížeče tento "těsný" design porušují a sloupce jsou naskládány pod sebou.
To se může stát v IE, protože IE to zakládá na „velikosti“ obsahu spíše než na prvku obsahujícím obsah. V prohlížečích založených na standardech, pokud se obsah nevejde do bloku, jednoduše jde mimo blok. Pokud se však v IE obsah nevejde do obsahujícího prvku, prvek „roztáhne“, čímž se zvětší. Pokud se něco takového stane v těsném, stísněném provedení, pak prvky již nemají prostor, aby zůstaly vedle sebe, a jeden z nich jako by „propadl“ a klesl níže než druhý.
Chcete-li se tomuto scénáři vyhnout, snažte se nepřeplňovat blok obsahující váš návrh obalu. Místo použití vodorovných okrajů, odsazení, můžete vytvořit "virtuální okraje" tím, že dáte jeden blok plavat vlevo a na druhou - plovák:vpravo.
Nyní, pokud se jeden z prvků mírně (v rámci několika pixelů) zvětší, místo zničení celého návrhu a přemístění jednoho z bloků pod druhý blok „vyplave“ do oblasti „virtuálního pole“.
CSS kód k dosažení tohoto cíle je samozřejmý. Jednoduše nastavíme požadovanou šířku pro každý ze sloupců a poté určíme pro navigaci plavat vlevo a za obsah - plovák:vpravo.
#content ( šířka: 520px; plovoucí: vpravo; ) #mainNav ( šířka: 180px; plovoucí: vlevo; )
Poté, abyste správně umístili zápatí pod navigaci a obsah, musíte jej rozbalit.
#footer ( jasné: obojí; )
Základní verze je připravena. Přidejme ještě pár doteků. Horní a spodní odsazení pro celý navigační blok a levé a pravé odsazení pro seznam položek v navigační nabídce.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
Pojďme také odsadit pravou stranu oblasti obsahu:
#content h1, h2, p ( padding-right: 20px; )
To je vše, nyní máme připravený jednoduchý dvousloupcový CSS layout.
Šablona tří sloupců pomocí balení
Rámec HTML pro vytváření šablony se třemi sloupci je velmi podobný tomu, který jsme použili u šablony se dvěma sloupci, pouze s tím rozdílem, že má dva další div blok: jeden pro hlavní obsah a jeden další pro doplňkový obsah.
…
…
Pomocí stejného CSS pravidla, stejně jako v případě šablony se dvěma sloupci, můžeme dát hlavní obsahový blok plavat vlevo a další blok - plovák:vpravo. To vše se bude dít uvnitř již správně umístěného hlavního obsahu bloku. Tímto způsobem rozdělíme druhý sloupec obsahu na dva a vytvoříme rozvržení se třemi sloupci.
Stejně jako dříve je kód CSS velmi jednoduchý. Stačí zadat požadovanou šířku pro každý z bloků a dát každému jeho vlastní obal.
#mainContent ( šířka: 320px; plovoucí: vlevo; ) #secondaryContent ( šířka: 180px; plovoucí: vpravo; )
Vyjmutím můžete šablonu trochu vyčistit vycpávka z bloku obsah aplikováním přímo na obsah bloku sekundární Obsah:
#secondaryContent h1, h2, p ( padding-left: 20px; padding-right: 20px; )
Tak získáme toto pěkné třísloupcové rozložení.
Andy Budd, Cameron Moll a Simon Collison: „CSS Mastery: Advanced Web Standards Solutions“
webreference.com
Překlad - Dmitrij Naumenko
P.S. Chtít více materiálů pro aplikované rozložení? Podívejte se na bezplatné kurzy níže. Toto je série videí na gumové rozložení místo a volný kurz o základech adaptivního uspořádání. Pomohou vám rychle získat potřebné dovednosti:
Líbil se vám materiál a chcete mi poděkovat?
Stačí sdílet se svými přáteli a kolegy!
Vytvoření vzhledu webové stránky slouží k uspořádání prvků na webu. Aby byly text, obrázky, videa umístěny na webu krásně a přehledně, je nutné vytvořit strukturu stránky.
Chcete-li to provést, nejprve nakreslete tabulku a buňky v ní. Tabulka rozdělená do buněk umožňuje jasně definovat polohu každého prvku webu.
Kreslení tabulky rozložení
1. Na panelu nástrojů programu na úvodní stránce klikněte na " Stůl" a vybrat si "Tabulky rozložení a buňky"
Jak vytvořit rozvržení webové stránky v programu frontpage
2. Vpravo se zobrazí panel nástrojů. zmáčknout tlačítko "Nakreslete tabulku rozložení". Kurzor se stane tužkou. Nyní nakreslíme libovolný obdélník. Dále v panelu vpravo nastavte rozměry: Šířka - 850, Výška - 150, Zarovnání- uprostřed.
Náš první stůl je připraven! Záhlaví webu bude umístěno zde. Nyní musíme nakreslit druhou tabulku pod tělem webu. Bude obsahovat hlavní informace o webu.
3. Chcete-li to provést, proveďte přesně stejné kroky jako při kreslení první tabulky. Nezapomeňte ULOŽIT! V důsledku toho byste měli mít dvě stejné tabulky:
Kreslení buněk rozložení pro webovou stránku
Nyní vložíme buňku do horní tabulky a napíšeme název našeho webu.
4. Chcete-li to provést, vyberte tabulku č. 1. Abyste pochopili, že tabulka byla vybrána, její okraje by měly zezelenat, v rozích by se měly objevit značky a po stranách by se měla objevit čísla s rozměry tabulky.
Kreslení buněk v tabulkách na Frontpage
5. Na panelu nástrojů vpravo klikněte na tlačítko "Nakreslit buňku rozvržení". Kurzor se stane tužkou. Umístěte jej do rohu stolu a nakreslete obdélník přesně stejné velikosti, jako stůl. Upozorňujeme, že na rozdíl od tabulky ohraničení buňky jsou zvýrazněny modře.
Vytvoření rozvržení webové stránky - nakreslení buňky
Program na titulní stránce
Poté, co nakreslíte buňku pro horní tabulku, udělejte to stejné akce a nakreslete buňku pro tabulku č. 2. V něm bude umístěno tělo našeho webu. Nezapomeňte uložit!
Poté, co jste v Program na titulní stránce vytvořené rozložení webové stránky, přejdeme k dalšímu kroku tvorby webu. Toto je vytvoření záhlaví pro web.
27.02.2016 4,8 tis V tomto článku chci mluvit o čtyřech různé způsoby x vytváření rozvržení s více sloupci. Každá metoda má své pro a proti. Abych demonstroval, jak tato rozložení fungují a jak vypadají, vytvořil jsem jednoduchý web, který používá HTML tabulky, vlastnost CSS float, CSS framework a Flexbox.
První den nového života
V tomto článku používáme čtyři různé způsoby rozvržení webu:
- Tabulky. Nemusíte ani používat samostatný soubor styly. A co je důležitější, nelámou se.
- Plovák Mluvíme o vlastnosti CSS. Jedná se o poměrně běžný způsob, jak vytvořit rozložení webové stránky. A v tomto případě budeme muset použít samostatný stůl styly. Soubor HTML se používá pouze k definování obsahu webové stránky. Pokud chcete zarovnat obsah, měli byste použít CSS soubor.
- CSS frameworky. Fungují stejně JavaScriptové rámce. Připojit původní soubor v záhlaví (např. ), a je to připraveno! Hodnoty vlastností nemusíte nastavovat sami. K tomu použijte třídy, které pro vás vývojáři frameworku připravili.
- Flexbox. Flexbox je krátké jméno Modul flexibilního rozvržení krabice CSS. Jedná se o novější technologii ve srovnání s vlastností float. Základním principem Flexboxu je dát kontejneru možnost měnit šířku, výšku a pořadí prvků, které obsahuje. Pokud chceš nejlepší způsob vše vyplnit volný prostor, by měl být použit pro rozvržení div flexbox. Například pro pokrytí všech typů zařízení a velikostí obrazovky. Plovoucí kontejner rozšíří prvky, které obsahuje, aby vyplnil celou obrazovku.
Nyní je čas vyzkoušet každý z nich.
Metody tvorby
Toto je design mého webu:
Tabulky
K vytvoření záhlaví webu jsem použil vlastnost pozice: relativní . Zkusme to udělat od začátku pomocí rozložení tabulky.
Zde je můj HTML kód:
Cinematron
DOMOV
PREMIÉRY
POKLADNA
FOTKY
A tohle jsem dostal:
Jak vidíte, není to stejný klobouk. Vypadá povědomě, ale jeho umístění se trochu změnilo. A právě proto. Víte, že stoly jsou skvělé pro symetrické umístění. Ale pro jiné účely nejsou tak dobré. Pozor také na těžkopádnost kódu. Ale tabulky mají jednu užitečnou funkci. Zde je trik, který můžeme udělat: tabulka, td ( border-collapse: kolaps; border: 1px plná červená; )
A uvidíte, že rozložení vypadá takto:
Tímto způsobem můžete snadno určit, co je kde, pokud budete zmateni. Teď ta špatná zpráva. Podívejte se znovu na HTML kód. Tento jednoduchý stůl, ale představte si, jak by to vypadalo s desítkami buněk. To je co zdroj Mám:
Cinematron
Vše, co potřebujete vědět o filmech
A soubor CSS:
#header ( height: 230px; background-image: url(../images/header1.jpg); background-repeat: no-repeat; font-family: "Shift", sans-serif; ) #header h2 ( font- velikost: 4em; pozice: relativní nahoře: 30px; zobrazení: inline; zobrazení: vložené ; zobrazení: inline; text-transform: velká písmena; okraj-vpravo: 14px; )
V tomto případě musíte použít blokové rozložení webu pomocí CSS. Aplikací něčeho takového:
div ( pozice: relativní; nahoře: 100px; vlevo: 100px; )
Specifikujete přesun
100 pixelů dolů a 100 pixelů doprava vzhledem k původní poloze. Tyto vlastnosti usnadňují přesouvání textu na stránce. Můžete jej přesunout z jednoho rohu do druhého a určit, která poloha je nejlepší. Je to lepší než stůl.
Plovák
Vlastnost float je široce používána v blokové rozložení místo. Tuto vlastnost použijeme k zobrazení oblasti hlavního obsahu. Malý příklad vám pomůže lépe pochopit, jak to funguje:
Má tři různé barevné prvky
. Zelená pro hlavní články, červená pro zpravodajské články a modrá pro zápatí.
A zde je soubor CSS:
#green ( šířka: 200px; výška: 200px; ohraničení: 1px plná zelená; plovoucí: vlevo; okraj: 5px; ) #red (šířka: 100px; výška: 200px; rám: 1px plná červená; okraj: 5px; plovoucí: vlevo ; ) #modrá ( šířka: 310px; výška: 100px; ohraničení: 1px plná modrá; okraj: 5px; jasné: obojí; )
A tohle jsme dostali:
Při rozvržení do vrstev určíte prostřednictvím vlastnosti float, jaký má váš prvek být byl plovoucí. Poté pro něj nastavíte směr odsazení. To je obvykle float: left nebo float: right . Když ukážete prvek přesunout doleva, bude to dělat, dokud nedojde volné místo. Další plovoucí prvek se bude pohybovat, dokud nenarazí na první a tak dále. Živel následující za plovoucím kolem něj obteče jako voda! Pokud ale nechcete uvolnit všechny své objekty, můžete použít vlastnost clear. Určuje, které strany prvku by se neměly obtékat kolem plovoucích prvků.
Zde je část mého rozvržení pro hlavní obsah:
První záhlaví článku
První článek bodyPřečtěte si více
Druhé záhlaví článku
Druhý článek bodyPřečtěte si více
První záhlaví novinového článku
Tělo prvního zpravodajského článku
Druhé záhlaví novinového článku
Druhé tělo zpravodajského článku
Teď to necháme plavat:
#main-content ( šířka: 780px; plovoucí: vlevo; ) #news (levý okraj: 20px; plovoucí: vlevo; šířka: 180px; )
My máme velký blok pro články a menší blok pro zprávy. Vlastnost float: left jsme použili i pro obrázky. Všimněte si, jak jsou obaleny visačkou. Toto rozložení vypadá jako váš oblíbený časopis. CSS frameworky
Pokud jste trochu líní
Pokud nemáte čas šťourat se s kódem, kdy CSS rozložení, můžete použít některý z frameworků CSS. V našem příkladu používáme Bootstrap. Chcete-li to provést, musíte si jej stáhnout a zahrnout do souboru HTML.
Bootstrap obsahuje mřížku, která se skládá z 12 stejně velkých sloupců. Prvky HTML jsou uspořádány tak, aby pokrývaly různé množství sloupců. Tímto způsobem se vytvoří vlastní rozvržení. Každá část obsahu je zarovnána k této mřížce prostřednictvím zadaného počtu sloupců, přes které se rozprostírají.
Zde je příklad:
V tomto příkladu jsme vytvořili řetězec. Poté do něj byly umístěny dva stejně velké sloupy. Každý z nich pokrývá šest z dvanácti dostupných sloupců.
HTML kód:
Již brzy:
A tohle jsem dostal:
Vypadá dobře. A když navrhujete web z PSD, nemusíte ani upravovat soubor CSS. Ale vy nevidíte, co se děje uvnitř. Flexbox
Klasika zítřka
K vytvoření části webu Box Office použijeme Flexbox. Zde je HTML kód:
- Popelka: 67,9 milionů dolarů
- Běžet celou noc: 11,0 milionů $
- Kingsman: Tajná služba: 6,2 milionu dolarů
- Zaměření: 5,7 milionů dolarů
- Chappie: 5,7 milionů dolarů
- McFarland USA: 3,6 milionu dolarů
- DUFF: 2,9 milionu dolarů
- Americký sniper: 2,8 milionu dolarů
Zde je kód CSS pro kontejner „boxoffice“:
#boxoffice ( šířka: 780px; výška: 500px; background-image: url(../images/box_office_cropped.jpg); background-repeat: cover; border-radius: 5px; padding: 20px; )
Nyní je čas vytvořit flex kontejner. K tomu je třeba nastavit pro zobrazovací prvek:flex. Podle pravidel rozvržení jsou všechny prvky flexboxu umístěny podél hlavní a příčné osy:
Pro Flexbox jsou nastaveny dva typy vlastností. První se používá pro správu flex kontejneru, druhý se používá k plnění flex předmětů. Podívejme se blíže na první typ. Ve výchozím nastavení je hlavní osa vodorovná, takže prvky se budou roztahovat v řadě. Pro změnu hlavní osy můžeme použít vlastnost flex-direction. Může nabývat následujících hodnot: row , row-reverse , column a column-reverse . Použijeme hodnotu sloupce. Dodejme také vlastnost výšky. O něco později pochopíte, proč je to potřeba:
flex-container ( výška: 300px; display: flex; flex-direction: column; )
Takto vypadá naše malá pokladna:
Vlastnost height jsme použili, protože nechceme, aby kontejner flexboxu překrýval obrázek šipky ve spodní části pozadí. Flexbox vám také dává možnost provádět změny obsahu bez změny souboru HTML. Pokud například chcete obrátit rozvržení prvků, můžete změnit hodnotu flex-direction na columns-reverse . Tím se obrátí směr flexboxu. Ale také budete muset změnit pořadí prvků uvnitř kontejneru.
K tomu používáme vlastnost justify-content. Dostupné hodnoty jsou flex-start , flex-end , center , space-between a space-around . Musí být nastaven na justify-content , což je ekvivalentní flex-end .
Zde je náš kód:
Flex-container ( výška: 300px; displej: flex; flex-direction: column-reverse; justify-content: flex-end; )
A takto se tyto změny projevily:
Prvky můžete také přesouvat podél příčné osy. K tomu slouží vlastnost align-items. Můžete jej nastavit na následující hodnoty: flex-start , flex-end , center , baseline nebo stretch . Chcete-li jej použít, přidejte vlastnost do selektoru flexboxu:
Flex-kontejner ( align-items: flex-end; )
Všechny prvky se přesunou k pravému okraji:
Existuje další užitečná vlastnost - flex-wrap. Představte si, že pokladna rychle expanduje. Co se stane, když bude větší než nádoba? Nic špatného, pokud použijete vlastnost flex-wrap. Zkuste přidat následující kód:
Flex-kontejner ( výška: 300px; displej: flex; flex-direction: sloupec; flex-wrap: wrap; )
A toto bude výsledek:
Jak vidíte, prvky jsou nyní naskládány do několika sloupců. Výchozí hodnota pro tuto vlastnost je nowrap . Po použití budou prvky uspořádány do jednoho sloupce ( nebo čára - to závisí na hodnotě flex-direction). Můžete použít hodnotu wrap-reverse. Poté budou prvky uspořádány v opačném pořadí. Je jich mnoho užitečné vlastnosti. S jejich pomocí můžete změnit parametry každého jednotlivého prvku kontejneru. Například vlastnost order umožňuje změnit pořadí prvků, aniž byste museli měnit HTML kód.
Jakou metodu zvolit?
Tabulky. Tabulky se nepoužívají v platném rozložení stránky. Znečišťují kód. Používání tabulek není tak snadné, jak by se mohlo zdát. Pokud stále nejste rozhodnuti, zda použít tabulky pro rozvržení stránky, podívejte se na tento web.
Ale mohou být užitečné, pokud mluvíme o o rozložení e-maily. Prohlížečů, které lidé v dnešní době používají, není tolik, ale e-mailových agentů je prostě obrovské množství. Desktop, online a mobilní aplikace používat různé zobrazovací nástroje. HTML tabulky vypadají ve všech stejně. Proto je skvělá možnost pro rozložení e-mailů.
Plovák Vlastnost float je nejlepší volba, pokud vaše požadavky nejsou příliš vysoké. Je to snadný způsob, jak zatraktivnit váš web. Jeho použití na obrázky je podle mě známkou dobrého vkusu. Jen si musíte pamatovat, jak fungují plovoucí vlastnosti a jasné. Pro začátek to stačí.
Když už jsme u jeho nevýhod, musíme přiznat, že plovoucí prvky jsou vázány na tok dokumentu a to může výrazně snížit jeho flexibilitu.
CSS frameworky. Pokud potřebujete rychle vytvořit rozvržení, použijte frameworky. Dnes je jich mnoho. Vyberte si mezi nimi tu, která vám nejvíce vyhovuje.
Flexbox. Budete muset strávit nějaký čas učením se, jak to funguje. Myslím, že už chápete, jak pohodlné jsou flexboxy pro správu jednotlivých prvků.
Špatně
© 2024 Mobilní telefony a komunikace
Horní
U tohoto bloku určíme šířku a také horní, levé a pravé odsazení:
U mnoha vlastností uvidíte hodnoty zapsané v následujících formátech:
- okraj: hodnota1 hodnota2 hodnota3 hodnota4;
- okraj: hodnota1 hodnota2 hodnota3;
- okraj: hodnota1 hodnota2;
- okraj: hodnota1;
V prvním případě specifikujeme hodnoty pro každou ze čtyř stran, například margin: 10px 12px 20px 15px; : 10px – horní odsazení, 12px – pravé odsazení, 20px – spodní odsazení, 15px – levé odsazení. Tento zápis se obvykle používá, když jsou odsazení na každé straně jiné.
V druhém případě zapisují se tři hodnoty, například margin: 10px 12px 20px; : 10px – horní výplň, 12px pravá a levá výplň, 20px – spodní výplň. Tento zápis je vhodné použít, když jsou hodnoty vpravo a vlevo stejné, ale hodnoty nahoře a dole se liší. Hodnota auto se používá, když chcete, aby prohlížeč automaticky vypočítal odsazení vlevo a vpravo.
Ve třetím případě jsou použity dvě hodnoty, například margin: 10px 12px; : horní a spodní okraj 10px, pravý a levý okraj 12px. Pokud jsou odsazení nahoře a dole stejné a odsazení vpravo a vlevo jsou stejné, pak je vhodné zapsat pouze dvě hodnoty, jako v našem příkladu.
Ve čtvrtém případě zapíše se jedna hodnota, např. margin: 10px; : odsazení na každé straně je 10px. Když jsou parametry na všech stranách stejné, je vhodné použít právě takový zápis.
Jak změřit šířku nebo výšku prvku v Adobe Photoshopu? Zvažme jeden způsob: vezměte si nástroj Nástroj obdélníkový výběr ( klávesová zkratka M):
Poté vybereme oblast, například potřebujeme zjistit odsazení od horního okraje rozložení k začátku obsahu, vyberte jej:
V panelu Info podívejte se na hodnoty výšky H nebo hodnota šířky W pokud potřebujete znát šířku prvku:
Pojďme k názvu
Zde musíme určit velikost, řádkování, stín a spodní výplň. Již víte, jak zaregistrovat první dvě nemovitosti.
K určení stínu potřebujeme vlastnost stín textu:
- Tady 0 – odsazení podél osy X;
- 1px– posunutí podél osy Y;
- 0 – poloměr rozostření stínu;
- rgba(0,0,0,0,3)- barva stínu. V v tomto případě používáme formát RGBA, včetně alfa kanálu, který nastavuje průhlednost prvku. V závorkách jsou první tři hodnoty odpovědné za barvu ve formátu rgb, A poslední hodnota zodpovědný za transparentnost. Tato hodnota se zapisuje v rozsahu od 0 do 1, kde 0 představuje plnou průhlednost a 1 představuje neprůhlednost.
Jak zjistit parametry stínu v Adobe Photoshopu? Vybrat požadovanou vrstvu na panelu vrstev a klikněte na ikonu ƒx:
Otevře se okno Styl vrstvy . Musíte vybrat kartu Vrhat stín:
Zde je parametr Neprůhlednost zodpovědný za transparentnost, parametr Vzdálenost je zodpovědný za odsazení podél osy Y, parametr Velikost je zodpovědný za rozostření a parametr Úhel je zodpovědný za posun podél osy X Protože náš stín dopadá v pravém úhlu, posun podél osy X bude nulový. Barvu stínu najdete v rámečku naproti parametru Režim prolnutí:
Hodnota barvy v RGB formát a s alfa kanálem to v tomto případě bude vypadat takto:
Text-shadow: 0 1px 0 rgba(0,0,0,0,3);
Zbývá zapsat odsazení níže.
Pokud potřebujete napsat hodnotu pro jednu ze čtyř stran, použijte tento zápis:
- margin-top– horní odsazení;
- okraj-pravý– pravé odsazení;
- okraj-dole– spodní odsazení;
- okraj-levý– levé odsazení.
Protože potřebujeme určit spodní okraj, napíšeme margin-bottom: 30px;
Výsledkem je, že tento kód dostaneme do souboru styl.css:
* ( margin: 0; padding: 0; ) body ( background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; ) div ( width: 724px; margin : 43px auto 0 ) h1 (velikost písma: 60px; výška řádku: 62px; stín textu: 0 1px 0 rgba(0,0,0,0,3); okraj-dolní: 30px; )
První odstavec. Sousední voliče
Zapišme si vlastnosti pro první odstavec:
P ( font-size: 24px; line-height: 30px; color: #a42727; text-shadow: 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 42px; )
Nyní, pokud uložíte změny a otevřete soubor index.html v prohlížeči uvidíte, že tyto vlastnosti jsou aplikovány na všechny odstavce na stránce. Vzhledem k tomu, že tyto vlastnosti potřebujeme zapsat pouze pro první odstavec, v tomto případě můžeme použít sousední voliče. co to je? V html šablona, značky
A
(vezměme první odstavec) jděte jeden po druhém, což znamená, že se jedná o sousední značky v CSS, sousední selektory jsou zapsány takto:
H1+p (velikost písma: 24px; výška řádku: 30px; barva: #a42727; stín textu: 0 1px 0 rgba(255,255,255,0,35); okraj-dolní: 42px; )
Nyní se tyto vlastnosti budou vztahovat pouze na první odstavec.
Poslední odstavec. Třídy v CSS
Nyní přejdeme k poslednímu odstavci. Protože se také liší od hlavního textu, přiřadíme mu třídu. V html šabloně napište atribut class pro poslední odstavec s hodnotou last-p . Název třídy, stejně jako identifikátor, musí začínat písmeny latinské abecedy:
V CSS jsou třídy zapsány takto:
P.last-p ( barva: #ffbfbf; zarovnání textu: vpravo; stín textu: 0 1px 0 rgba(0,0,0,0,3); )
Tyto vlastnosti budou fungovat pouze pro poslední odstavec v naší šabloně.
Na rozdíl od identifikátorů třída s určitou hodnotu můžete jej na stránce použít tolikrát, kolikrát chcete.
Vlastnost text-align s hodnotou right se používá, když chcete zarovnat text doprava. Můžete použít i jiné hodnoty, například text-align: center; v tomto případě bude text zarovnán na střed bloku.
Další odstavce
Pro zbývající odstavce zapíšeme následující vlastnost:
P (okraj-dolní: 30px; )
Další vlastnosti: barva, rodina písem, velikost, řádkování tato značka bude dědit z nadřazeného prvku, tzn. štítek
.Pokud okno prohlížeče zmenšíme, uvidíme, že obsah je přilepený po stranách okna. Chcete-li to vyřešit, přidejte odsazení do selektoru div:
Seskupení voličů
Pokud několik prvků webové stránky obsahuje identické vlastnosti S stejné hodnoty, například jako v našem příkladu má nadpis a poslední odstavec obecný majetek je stín, pak můžete tyto selektory seskupit tak, že je napíšete oddělené čárkami:
H1,p.last-p ( text-shadow: 0 1px 0 rgba(0,0,0,0,3); )
Nezapomeňte odebrat vlastnosti z jednotlivých prvků v našem případě je potřeba odstranit stín z selektorů h1 a p.last-p.
Video k lekci
Část 1
Bootstrap framework: rychlé adaptivní rozložení
Videokurz krok za krokem o základech adaptivní rozložení v rámci Bootstrap.
Naučte se jednoduše, rychle a efektivně sázet pomocí výkonného a praktického nástroje.
Layout na objednávku a dostat zaplaceno.
Bezplatný kurz „Stránky na WordPressu“
Chcete ovládat WordPress CMS?
Získejte lekce o designu a rozložení webových stránek na WordPress.
Naučte se pracovat s motivy a stříhat rozvržení.
Zdarma video kurz kreslení návrhu webu, rozložení a instalace na CMS WordPress!
*Najetím myší pozastavíte rolování.
Zpět dopředu
Zvládnutí CSS: Rozvržení stránky
Jeden z hlavních výhody CSS- schopnost ovládat vzhled stránky bez použití značek HTML design. Vytváření šablon CSS má však nespravedlivou pověst, protože je obtížné, zejména mezi vývojáři, kteří teprve začínají. tuto technologii. Částečně je to způsobeno tím, že ne všechny prohlížeče interpretují CSS stejně, ale ještě více tím, že existuje obrovské množství různé techniky vytváření rozvržení pomocí šablon stylů.
Zdá se, že každý webový vývojář má své vlastní techniky rozvržení CSS a začínající webmasteři často používají techniku, aniž by chápali, jak to funguje. Tento přístup „černé skříňky“ k používání CSS samozřejmě pomáhá rychle získat výsledky, ale v konečném důsledku brání rozvoji porozumění jazyku vývojáře.
Všechny tyto různé techniky jsou však založeny na třech základních konceptech: polohování, balení a manipulace s vycpávkami. Různé techniky při bližším prozkoumání se zas tak neliší, a pokud si osvojíte základní pojmy a koncepty, bude pro vás poměrně snadné vytvořit si vlastní šablonu CSS stránky.
Centrování návrhu
Dlouhé řádky textu jsou velmi nepohodlné nebo dokonce obtížně čitelné. Jak monitory a jejich rozlišení neustále rostou, problém čitelnosti obrazovky se stává stále větším problémem. Jedním ze způsobů, jak se s tímto problémem vypořádat, je vycentrovat obsah stránky. Namísto roztahování obsahu přes celou šířku obrazovky zabírají vycentrované návrhy pouze část obrazovky, čímž dávají řádkům snadno čitelnou délku.
Stránky zaměřené na obsah jsou v dnešní době běžné, takže naučit se vytvářet design zaměřený na střed pomocí CSS je jednou z prvních věcí, které se chtějí noví vývojáři webu naučit. Existují dva hlavní způsoby, jak vycentrovat design: jeden používá automatické vycpávání, druhý používá polohování a negativní vycpávky.
Centrování pomocí automatického polstrování
Předpokládejme, že stojíte před typickým úkolem horizontálně centrovat div s id obal("obal").
K tomu v praxi stačí nastavit šířku div obal a nastavte vodorovné okraje na auto.
V tomto příkladu je šířka nastavena v pixelech. Ale samozřejmě to můžete stejně snadno určit jako procento šířky těla hlavního dokumentu nebo použít velikost v „em“ vzhledem k velikosti textu.
Tato metoda funguje ve všech moderní prohlížeče, ale ne v IE 6. Naštěstí IE interpretuje vlastnost nesprávně zarovnání textu: na střed, zarovnává na střed vše, nejen text. Toho můžete využít ve svůj prospěch tím, že vše v tagu vycentrujete tělo, včetně div obal, poté znovu přiřazení zarovnání k vlevo, odjet pro obsah bloku obal.
Text ( text-align: center; ) #wrapper ( width: 720px; margin: 0 auto; text-align: left; )
Používání nemovitosti zarovnání textu jako toto je v podstatě hack, ale je zcela neškodný a neovlivní nepříznivě váš kód. Nyní náš blok obal středem v IE 6, stejně jako v jiných prohlížečích, které jsou více v souladu se specifikací.
Centrování návrhu pomocí polohování a záporného vycpávky
Metoda automatického vyplnění je nejoblíbenější přístup, ale vyžaduje hack. Vyžaduje také stylizaci dvou prvků namísto jednoho. Z tohoto důvodu mnoho lidí preferuje umístění a záporné marže.
Začneme, stejně jako v předchozím příkladu, nastavením šířky obal. Poté nastavíme vlastnost pozice Pro obal ve smyslu relativní a majetek vlevo, odjet ve smyslu 50% . To nám umožňuje umístit levý okraj bloku obal ve středu stránky.
#wrapper ( šířka: 720px; pozice: relativní; vlevo: 50 %; )
My však potřebujeme něco trochu jiného – chceme vidět střed bloku uprostřed stránky obal. Toho lze dosáhnout použitím negativního odsazení na levé straně bloku. obal rovnající se polovině šířky tohoto bloku. Tím se blok posune obal polovinu jeho šířky doleva a přesunout jej do středu obrazovky:
Výběr způsobu centrování závisí zcela na vašem vkusu. Vždy je však užitečné znát několik metod a technik, protože nemůžete odhadnout, co se vám může hodit.
Vzory založené na zábalu
Existuje několik způsobů, jak vytvořit vzory pomocí CSS, včetně absolutního umístění a negativního odsazení. Myslím, že nejjednodušší způsob použití je založen na obalení některých prvků kolem jiných. Jak název napovídá, v tomto typu šablony jednoduše nastavíte šířku umístěných prvků a poté je zalomíte vlevo nebo vpravo.
Protože takto „zatopené“ prvky již nezabírají žádný prostor v toku dokumentu, nemají žádný vliv na své okolí. blokové prvky. Chcete-li obejít toto chování, budete muset rozbalit různé referenční body vaši šablonu. Namísto postupného nanášení a rozbalování je pohodlnější použít trochu jiný přístup: aplikujte zalomení téměř na všechno a poté jej jednou nebo dvakrát zrušte na „strategických“ bodech dokumentu, jako je zápatí.
Šablona se dvěma sloupci pomocí obtékání
Chcete-li vytvořit jednoduchou šablonu se dvěma sloupci pomocí zalamování, začneme se základní strukturou (X)HTML. V našem příkladu se (X)HTML framework skládá ze zón: branding, obsah, navigace a zápatí. Všechno tato struktura uzavřeno v "obalu" - obal, který bude zarovnán vodorovně pomocí jedné z výše popsaných metod.
Hlavní navigace bude na levé straně a obsah bude na pravá strana. Ve struktuře stránky jsem však oblast obsahu umístil nad oblast navigace. Hlavním důvodem je to, že obsah stránky je nejdůležitější a měl by být umístěn v dokumentu co nejvýše, blízko začátku.
Obvykle, když lidé vytvářejí šablony a používají obalování, dávají vlastnost plovák význam vlevo, odjet pro oba sloupce a poté vytvořte „okraj“ mezi sloupci pomocí vlastností margin nebo padding. Při použití tohoto přístupu jsou reproduktory pevně zatlačeny do prostoru, který mají k dispozici - takže není prostor pro dýchání. To obvykle nezpůsobuje problémy, ale některé prohlížeče tento "těsný" design porušují a sloupce jsou naskládány pod sebou.
To se může stát v IE, protože IE to zakládá na „velikosti“ obsahu spíše než na prvku obsahujícím obsah. V prohlížečích založených na standardech, pokud se obsah nevejde do bloku, jednoduše jde mimo blok. Pokud se však v IE obsah nevejde do obsahujícího prvku, prvek „roztáhne“, čímž se zvětší. Pokud se něco takového stane v těsném, stísněném provedení, pak prvky již nemají prostor, aby zůstaly vedle sebe, a jeden z nich jako by „propadl“ a klesl níže než druhý.
Chcete-li se tomuto scénáři vyhnout, snažte se nepřeplňovat blok obsahující váš návrh obalu. Místo použití vodorovných okrajů, odsazení, můžete vytvořit "virtuální okraje" tím, že dáte jeden blok plavat vlevo a na druhou - plovák:vpravo.
Nyní, pokud se jeden z prvků mírně (v rámci několika pixelů) zvětší, místo zničení celého návrhu a přemístění jednoho z bloků pod druhý blok „vyplave“ do oblasti „virtuálního pole“.
CSS kód k dosažení tohoto cíle je samozřejmý. Jednoduše nastavíme požadovanou šířku pro každý ze sloupců a poté určíme pro navigaci plavat vlevo a za obsah - plovák:vpravo.
#content ( šířka: 520px; plovoucí: vpravo; ) #mainNav ( šířka: 180px; plovoucí: vlevo; )
Poté, abyste správně umístili zápatí pod navigaci a obsah, musíte jej rozbalit.
#footer ( jasné: obojí; )
Základní verze je připravena. Přidejme ještě pár doteků. Horní a spodní odsazení pro celý navigační blok a levé a pravé odsazení pro seznam položek v navigační nabídce.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
Pojďme také odsadit pravou stranu oblasti obsahu:
#content h1, h2, p ( padding-right: 20px; )
To je vše, nyní máme připravený jednoduchý dvousloupcový CSS layout.
Šablona tří sloupců pomocí balení
Rámec HTML pro vytváření šablony se třemi sloupci je velmi podobný tomu, který jsme použili u šablony se dvěma sloupci, pouze s tím rozdílem, že má dva další div blok: jeden pro hlavní obsah a jeden další pro doplňkový obsah.
Pomocí stejného CSS pravidla, stejně jako v případě šablony se dvěma sloupci, můžeme dát hlavní obsahový blok plavat vlevo a další blok - plovák:vpravo. To vše se bude dít uvnitř již správně umístěného hlavního obsahu bloku. Tímto způsobem rozdělíme druhý sloupec obsahu na dva a vytvoříme rozvržení se třemi sloupci.
Stejně jako dříve je kód CSS velmi jednoduchý. Stačí zadat požadovanou šířku pro každý z bloků a dát každému jeho vlastní obal.
#mainContent ( šířka: 320px; plovoucí: vlevo; ) #secondaryContent ( šířka: 180px; plovoucí: vpravo; )
Vyjmutím můžete šablonu trochu vyčistit vycpávka z bloku obsah aplikováním přímo na obsah bloku sekundární Obsah:
#secondaryContent h1, h2, p ( padding-left: 20px; padding-right: 20px; )
Tak získáme toto pěkné třísloupcové rozložení.
Andy Budd, Cameron Moll a Simon Collison: „CSS Mastery: Advanced Web Standards Solutions“
webreference.com
Překlad - Dmitrij Naumenko
P.S. Chtít více materiálů pro aplikované rozložení? Podívejte se na bezplatné kurzy níže. Toto je série videí na gumové rozložení místo a volný kurz o základech adaptivního uspořádání. Pomohou vám rychle získat potřebné dovednosti:
Líbil se vám materiál a chcete mi poděkovat?
Stačí sdílet se svými přáteli a kolegy!
Vytvoření vzhledu webové stránky slouží k uspořádání prvků na webu. Aby byly text, obrázky, videa umístěny na webu krásně a přehledně, je nutné vytvořit strukturu stránky.
Chcete-li to provést, nejprve nakreslete tabulku a buňky v ní. Tabulka rozdělená do buněk umožňuje jasně definovat polohu každého prvku webu.
Kreslení tabulky rozložení
1. Na panelu nástrojů programu na úvodní stránce klikněte na " Stůl" a vybrat si "Tabulky rozložení a buňky"
Jak vytvořit rozvržení webové stránky v programu frontpage
2. Vpravo se zobrazí panel nástrojů. zmáčknout tlačítko "Nakreslete tabulku rozložení". Kurzor se stane tužkou. Nyní nakreslíme libovolný obdélník. Dále v panelu vpravo nastavte rozměry: Šířka - 850, Výška - 150, Zarovnání- uprostřed.
Náš první stůl je připraven! Záhlaví webu bude umístěno zde. Nyní musíme nakreslit druhou tabulku pod tělem webu. Bude obsahovat hlavní informace o webu.
3. Chcete-li to provést, proveďte přesně stejné kroky jako při kreslení první tabulky. Nezapomeňte ULOŽIT! V důsledku toho byste měli mít dvě stejné tabulky:
Kreslení buněk rozložení pro webovou stránku
Nyní vložíme buňku do horní tabulky a napíšeme název našeho webu.
4. Chcete-li to provést, vyberte tabulku č. 1. Abyste pochopili, že tabulka byla vybrána, její okraje by měly zezelenat, v rozích by se měly objevit značky a po stranách by se měla objevit čísla s rozměry tabulky.
Kreslení buněk v tabulkách na Frontpage
5. Na panelu nástrojů vpravo klikněte na tlačítko "Nakreslit buňku rozvržení". Kurzor se stane tužkou. Umístěte jej do rohu stolu a nakreslete obdélník přesně stejné velikosti, jako stůl. Upozorňujeme, že na rozdíl od tabulky ohraničení buňky jsou zvýrazněny modře.
Vytvoření rozvržení webové stránky - nakreslení buňky Program na titulní stránce
Poté, co nakreslíte buňku pro horní tabulku, udělejte to stejné akce a nakreslete buňku pro tabulku č. 2. V něm bude umístěno tělo našeho webu. Nezapomeňte uložit!
Poté, co jste v Program na titulní stránce vytvořené rozložení webové stránky, přejdeme k dalšímu kroku tvorby webu. Toto je vytvoření záhlaví pro web.
27.02.2016 4,8 tisV tomto článku chci mluvit o čtyřech různé způsoby x vytváření rozvržení s více sloupci. Každá metoda má své pro a proti. Abych demonstroval, jak tato rozložení fungují a jak vypadají, vytvořil jsem jednoduchý web, který používá HTML tabulky, vlastnost CSS float, CSS framework a Flexbox.
První den nového života
V tomto článku používáme čtyři různé způsoby rozvržení webu:
- Tabulky. Nemusíte ani používat samostatný soubor styly. A co je důležitější, nelámou se.
- Plovák Mluvíme o vlastnosti CSS. Jedná se o poměrně běžný způsob, jak vytvořit rozložení webové stránky. A v tomto případě budeme muset použít samostatný stůl styly. Soubor HTML se používá pouze k definování obsahu webové stránky. Pokud chcete zarovnat obsah, měli byste použít CSS soubor.
- CSS frameworky. Fungují stejně JavaScriptové rámce. Připojit původní soubor v záhlaví (např. ), a je to připraveno! Hodnoty vlastností nemusíte nastavovat sami. K tomu použijte třídy, které pro vás vývojáři frameworku připravili.
- Flexbox. Flexbox je krátké jméno Modul flexibilního rozvržení krabice CSS. Jedná se o novější technologii ve srovnání s vlastností float. Základním principem Flexboxu je dát kontejneru možnost měnit šířku, výšku a pořadí prvků, které obsahuje. Pokud chceš nejlepší způsob vše vyplnit volný prostor, by měl být použit pro rozvržení div flexbox. Například pro pokrytí všech typů zařízení a velikostí obrazovky. Plovoucí kontejner rozšíří prvky, které obsahuje, aby vyplnil celou obrazovku.
Nyní je čas vyzkoušet každý z nich.
Metody tvorby
Toto je design mého webu:
Tabulky
K vytvoření záhlaví webu jsem použil vlastnost pozice: relativní . Zkusme to udělat od začátku pomocí rozložení tabulky.
Zde je můj HTML kód:
| Cinematron | |||||
| DOMOV | PREMIÉRY | POKLADNA | FOTKY | ||
A tohle jsem dostal:
Jak vidíte, není to stejný klobouk. Vypadá povědomě, ale jeho umístění se trochu změnilo. A právě proto. Víte, že stoly jsou skvělé pro symetrické umístění. Ale pro jiné účely nejsou tak dobré. Pozor také na těžkopádnost kódu. Ale tabulky mají jednu užitečnou funkci. Zde je trik, který můžeme udělat:
tabulka, td ( border-collapse: kolaps; border: 1px plná červená; )
A uvidíte, že rozložení vypadá takto:
Tímto způsobem můžete snadno určit, co je kde, pokud budete zmateni.
Teď ta špatná zpráva. Podívejte se znovu na HTML kód. Tento jednoduchý stůl, ale představte si, jak by to vypadalo s desítkami buněk. To je co zdroj Mám:
Cinematron
Vše, co potřebujete vědět o filmech
A soubor CSS:
#header ( height: 230px; background-image: url(../images/header1.jpg); background-repeat: no-repeat; font-family: "Shift", sans-serif; ) #header h2 ( font- velikost: 4em; pozice: relativní nahoře: 30px; zobrazení: inline; zobrazení: vložené ; zobrazení: inline; text-transform: velká písmena; okraj-vpravo: 14px; )
V tomto případě musíte použít blokové rozložení webu pomocí CSS. Aplikací něčeho takového:
div ( pozice: relativní; nahoře: 100px; vlevo: 100px; )
Specifikujete přesun
Plovák
Vlastnost float je široce používána v blokové rozložení místo. Tuto vlastnost použijeme k zobrazení oblasti hlavního obsahu. Malý příklad vám pomůže lépe pochopit, jak to funguje:
Má tři různé barevné prvky
A zde je soubor CSS:
#green ( šířka: 200px; výška: 200px; ohraničení: 1px plná zelená; plovoucí: vlevo; okraj: 5px; ) #red (šířka: 100px; výška: 200px; rám: 1px plná červená; okraj: 5px; plovoucí: vlevo ; ) #modrá ( šířka: 310px; výška: 100px; ohraničení: 1px plná modrá; okraj: 5px; jasné: obojí; )
A tohle jsme dostali:
Při rozvržení do vrstev určíte prostřednictvím vlastnosti float, jaký má váš prvek být
Další plovoucí prvek se bude pohybovat, dokud nenarazí na první a tak dále. Živel následující za plovoucím kolem něj obteče jako voda! Pokud ale nechcete uvolnit všechny své objekty, můžete použít vlastnost clear. Určuje, které strany prvku by se neměly obtékat kolem plovoucích prvků.
Zde je část mého rozvržení pro hlavní obsah:
První záhlaví článku
První článek bodyPřečtěte si více
Druhé záhlaví článku
Druhý článek bodyPřečtěte si více
První záhlaví novinového článku
Tělo prvního zpravodajského článku
Druhé záhlaví novinového článku
Druhé tělo zpravodajského článku
Teď to necháme plavat:
#main-content ( šířka: 780px; plovoucí: vlevo; ) #news (levý okraj: 20px; plovoucí: vlevo; šířka: 180px; )
My máme velký blok pro články a menší blok pro zprávy. Vlastnost float: left jsme použili i pro obrázky. Všimněte si, jak jsou obaleny visačkou. Toto rozložení vypadá jako váš oblíbený časopis.
CSS frameworky
Pokud jste trochu líní
Pokud nemáte čas šťourat se s kódem, kdy CSS rozložení, můžete použít některý z frameworků CSS. V našem příkladu používáme Bootstrap. Chcete-li to provést, musíte si jej stáhnout a zahrnout do souboru HTML.
Bootstrap obsahuje mřížku, která se skládá z 12 stejně velkých sloupců. Prvky HTML jsou uspořádány tak, aby pokrývaly různé množství sloupců. Tímto způsobem se vytvoří vlastní rozvržení. Každá část obsahu je zarovnána k této mřížce prostřednictvím zadaného počtu sloupců, přes které se rozprostírají.
Zde je příklad:
V tomto příkladu jsme vytvořili řetězec. Poté do něj byly umístěny dva stejně velké sloupy. Každý z nich pokrývá šest z dvanácti dostupných sloupců.
HTML kód:
Již brzy:
A tohle jsem dostal:
Vypadá dobře. A když navrhujete web z PSD, nemusíte ani upravovat soubor CSS. Ale vy nevidíte, co se děje uvnitř.
Flexbox
Klasika zítřka
K vytvoření části webu Box Office použijeme Flexbox. Zde je HTML kód:
- Popelka: 67,9 milionů dolarů
- Běžet celou noc: 11,0 milionů $
- Kingsman: Tajná služba: 6,2 milionu dolarů
- Zaměření: 5,7 milionů dolarů
- Chappie: 5,7 milionů dolarů
- McFarland USA: 3,6 milionu dolarů
- DUFF: 2,9 milionu dolarů
- Americký sniper: 2,8 milionu dolarů
Zde je kód CSS pro kontejner „boxoffice“:
#boxoffice ( šířka: 780px; výška: 500px; background-image: url(../images/box_office_cropped.jpg); background-repeat: cover; border-radius: 5px; padding: 20px; )
Nyní je čas vytvořit flex kontejner. K tomu je třeba nastavit pro zobrazovací prvek:flex. Podle pravidel rozvržení jsou všechny prvky flexboxu umístěny podél hlavní a příčné osy:
Pro Flexbox jsou nastaveny dva typy vlastností. První se používá pro správu flex kontejneru, druhý se používá k plnění flex předmětů. Podívejme se blíže na první typ.
Ve výchozím nastavení je hlavní osa vodorovná, takže prvky se budou roztahovat v řadě. Pro změnu hlavní osy můžeme použít vlastnost flex-direction. Může nabývat následujících hodnot: row , row-reverse , column a column-reverse . Použijeme hodnotu sloupce. Dodejme také vlastnost výšky. O něco později pochopíte, proč je to potřeba:
flex-container ( výška: 300px; display: flex; flex-direction: column; )
Takto vypadá naše malá pokladna:
Vlastnost height jsme použili, protože nechceme, aby kontejner flexboxu překrýval obrázek šipky ve spodní části pozadí.
Flexbox vám také dává možnost provádět změny obsahu bez změny souboru HTML. Pokud například chcete obrátit rozvržení prvků, můžete změnit hodnotu flex-direction na columns-reverse . Tím se obrátí směr flexboxu. Ale také budete muset změnit pořadí prvků uvnitř kontejneru.
K tomu používáme vlastnost justify-content. Dostupné hodnoty jsou flex-start , flex-end , center , space-between a space-around . Musí být nastaven na justify-content , což je ekvivalentní flex-end .
Zde je náš kód:
Flex-container ( výška: 300px; displej: flex; flex-direction: column-reverse; justify-content: flex-end; )
A takto se tyto změny projevily:
Prvky můžete také přesouvat podél příčné osy. K tomu slouží vlastnost align-items. Můžete jej nastavit na následující hodnoty: flex-start , flex-end , center , baseline nebo stretch .
Chcete-li jej použít, přidejte vlastnost do selektoru flexboxu:
Flex-kontejner ( align-items: flex-end; )
Všechny prvky se přesunou k pravému okraji:
Existuje další užitečná vlastnost - flex-wrap. Představte si, že pokladna rychle expanduje. Co se stane, když bude větší než nádoba? Nic špatného, pokud použijete vlastnost flex-wrap.
Zkuste přidat následující kód:
Flex-kontejner ( výška: 300px; displej: flex; flex-direction: sloupec; flex-wrap: wrap; )
A toto bude výsledek:
Jak vidíte, prvky jsou nyní naskládány do několika sloupců. Výchozí hodnota pro tuto vlastnost je nowrap . Po použití budou prvky uspořádány do jednoho sloupce ( nebo čára - to závisí na hodnotě flex-direction). Můžete použít hodnotu wrap-reverse. Poté budou prvky uspořádány v opačném pořadí.
Je jich mnoho užitečné vlastnosti. S jejich pomocí můžete změnit parametry každého jednotlivého prvku kontejneru. Například vlastnost order umožňuje změnit pořadí prvků, aniž byste museli měnit HTML kód.
Jakou metodu zvolit?
Tabulky. Tabulky se nepoužívají v platném rozložení stránky. Znečišťují kód. Používání tabulek není tak snadné, jak by se mohlo zdát. Pokud stále nejste rozhodnuti, zda použít tabulky pro rozvržení stránky, podívejte se na tento web.
Ale mohou být užitečné, pokud mluvíme o o rozložení e-maily. Prohlížečů, které lidé v dnešní době používají, není tolik, ale e-mailových agentů je prostě obrovské množství. Desktop, online a mobilní aplikace používat různé zobrazovací nástroje. HTML tabulky vypadají ve všech stejně. Proto je skvělá možnost pro rozložení e-mailů.
Plovák Vlastnost float je nejlepší volba, pokud vaše požadavky nejsou příliš vysoké. Je to snadný způsob, jak zatraktivnit váš web. Jeho použití na obrázky je podle mě známkou dobrého vkusu. Jen si musíte pamatovat, jak fungují plovoucí vlastnosti a jasné. Pro začátek to stačí.
Když už jsme u jeho nevýhod, musíme přiznat, že plovoucí prvky jsou vázány na tok dokumentu a to může výrazně snížit jeho flexibilitu.
CSS frameworky. Pokud potřebujete rychle vytvořit rozvržení, použijte frameworky. Dnes je jich mnoho. Vyberte si mezi nimi tu, která vám nejvíce vyhovuje.
Flexbox. Budete muset strávit nějaký čas učením se, jak to funguje. Myslím, že už chápete, jak pohodlné jsou flexboxy pro správu jednotlivých prvků.
Špatně
