TNPW1 Cvičení 6 20.3.2014 aneta.bartuskova@uhk.cz

Tip: stránka na střed prohlížeče TNPW1 Cvičení Tip: stránka na střed prohlížeče Obalit celou stránku elementem <div>, např. <div id=”obal”> … </div> Přidat CSS pravidlo, kde width je požadovaná šířka stránky, může být i v procentech #obal { width:960px; margin: 0 auto; }

Tip: sdružené definice TNPW1 Cvičení Tip: sdružené definice Některé CSS vlastnosti lze deklarovat sdruženě border: 1px solid black; (obsahuje popořadě vlastnosti border-width, border-style a border-color) margin: 5px 10px 5px 10px; (obsahuje popořadě vlastnosti margin-top, margin-right, margin-bottom, margin-left) padding: 5px 10px 5px 10px; (obdobně) margin: 5px 10px; (první hodnota je pro margin-top a margin-bottom, druhá pro margin-right a margin-left) margin: 5px; (margin na všech stranách je 5px)

Pozicování umístění elementu v rámci stránky TNPW1 Cvičení Pozicování umístění elementu v rámci stránky Statické – implicitní pozicování, normální tok - blokové elementy pod sebe, řádkové vedle sebe Absolutní a relativní – relativní umístění vzhledem k pozici obsahového bloku Plovoucí umístění – element je obtékán obsahem, posune se maximálně doleva / doprava jak je to možné v rámci rodičovského elementu

Obsahový blok Neviditelný obalující čtyřúhelník, může být: TNPW1 Cvičení Obsahový blok Neviditelný obalující čtyřúhelník, může být: Pro kořenový element: zobrazovací plocha prohlížeče (výchozí) Pro element umístěný staticky nebo relativně: nejbližší rodičovský (nadřazený) element Pro element umístěný absolutně: nejbližší rodičovský element, který je sám umístěný absolutně nebo relativně

Relativní x Absolutní umístění TNPW1 Cvičení Relativní x Absolutní umístění Relativní: vyjme element z běžné pozice a posune ho o určitou vzdálenost do nové pozice Element stále zabírá místo v původní pozici, nijak tedy nezmění pozici jiných elementů na stránce Absolutní: vyjme element z běžné pozice a umístí ho relativně vzhledem k pozici jeho obsah. bloku Element přestane zabírat místo v původní pozici (do tohoto prostoru se posunou následující elementy), v nové pozici taky nezabírá místo – překreslí případné elementy na té samé pozici

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Relativní pozicování #normaldiv { width: 200px; height: 100px; background-color: Green; } #relativediv position: relative; width: 100px; height:90px; top: -20px; left: 30px; background-color: Grey; #normaldiv #relativediv -20px 30px Normálně by se #relativediv zobrazil pod #normaldiv (normální tok vykreslování elementů) Díky relativnímu pozicování se jeho umístění změní podle definice. Posune se 0 -20 px od svého normálního horního okraje a o 30px od svého normálního levého okraje Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Absolutní pozicování Oranžová plocha = stránka #absolutediv { position: absolute; width: 100px; height: 70px; left: 30px; top: 50px; } 30px 50px 100px 70px <div id=“absolutediv“></div> Definovaný prvek bude při tomto formátování umístěn nezávisle na ostatních prvcích na stránce tak, že jeho levý hodní roh bude mít souřadnice [30;50]. Při absolutním pozicování tedy definujeme vždy umístění levého/pravého horního rohu boxu. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

TNPW1 Cvičení Z-index Řídí překrývání absolutně umístěných elementů (výchozí vykreslení je podle umístění ve zdrojovém kódu) – pomocí virtuální osy z Čím vyšší celé číslo, tím větší je priorita zobrazení – tím více nahoře bude prvek div.spodni {z-index: 0;} div.horni {z-index: 10;}

TNPW1 Cvičení Plovoucí umístění Elementy v plovoucím umístění mohou být obtékány ostatním obsahem - jsou mimo běžný tok vykreslování, ostatní obsah je prohlížečem upraven, aby plovoucím boxům vytvořil místo Nutné definovat plovoucímu boxu šířku Posune se maximálně doleva / doprava jak je to možné v rámci rodičovského elementu

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Plovoucí boxy #floatdiv { float: left; width: 100px; height: 50px; background-color: Red; } V XHTML dokumentu je nutné nejprve definovat plovoucí box, teprve poté definovat obsah, který bude obtékat tento plovoucí box. Pokud nechceme aby následující obsah již obtékal, přidělíme mu vlastnost clear (clear:left – neobtéká plovoucí elementy vlevo, clear:right – vpravo, clear:both – žádné) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Layout stránky = vizuální rozvržení webové stránky TNPW1 Cvičení Layout stránky = vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu, obsah, hlavička…) Pro definici oblastí stránky zpravidla používáme element <div> - blokový element, který může sloužit jako kontejner pro další obsah

Základní koncepty layoutu Kompletní třísloupcový layout Hlavička – logo, grafika, login, vyhledávání Oblast s navigačními prvky, šířka je většinou pevně dána Obsahová část – šířka by se měla přizpůsobovat šířce stránky Oblast s navigačními prvky (kontextová navigace, info..), šířka je většinou pevně dána Patička Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Konstrukce třísloupcového layoutu Obsahová část – šířka je vždy auto, nastaven margin left a right na hodnotu (šířka postraního sloupce + odsazení) kvůli zamezení obtékání pod sloupce. Obsahové části se též nikdy nenastavuje pevná výška Pravý sloupec – zpravidla pevná šířka, nastavený float na right. Výška sloupce je vždy proměnná (auto) Patička – definice zpravidla na celou šířku stránky, výška bývá pevně definovaná, nutné použít clear:both. Při použití margin se bude patička odsazovat od prostředka – neplovoucího elementu, proto v případě odsazování nuno vložit prázdný div nad patičku a clear nastavit jemu Levý sloupec – zpravidla pevná šířka, nastavený float na left. Výška sloupce je vždy proměnná (auto) Hlavička – definice zpravidla na celou šířku stránky, výška bývá pevně definovaná

Bodovaný úkol Vytvořit kompletní třísloupcový layout (validní XHTML 1.0 Strict) Hlavička, postranní plovoucí sloupce, obsahová část a patička. Pro rozlišení použijte barvy Obsahová část bude naplněna odstavci textu, text nebude přetékat pod postranní sloupce Hlavička bude obsahovat nadpis druhé úrovně Patička bude obsahovat vycentrovaný text Postranní divy budou mít též nějaký obsah Definice obsahových kontejnerů bude v CSS souboru Barvu textu přizpůsobit kontrastně vzhledem k pozadí (formátováno v CSS souboru)