Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TNPW1 Cvičení 6 20.3.2014

Podobné prezentace


Prezentace na téma: "TNPW1 Cvičení 6 20.3.2014"— Transkript prezentace:

1 TNPW1 Cvičení

2 TNPW1 Cvičení Tip: stránka na střed prohlížeče Obalit celou stránku elementem, např. … 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; } 2

3 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) 3

4 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 4

5 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ě 5

6 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 6

7 Relativní pozicování Technologie pro publikování na webu 1, Ing. Jiří Štěpánek #normaldiv #relativediv 30px -20px #normaldiv { width: 200px; height: 100px; background-color: Green; } #relativediv { position: relative; width: 100px; height:90px; top: -20px; left: 30px; background-color: Grey; } 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 px od svého normálního horního okraje a o 30px od svého normálního levého okraje

8 Absolutní pozicování Technologie pro publikování na webu 1, Ing. Jiří Štěpánek 30px 50px 100px 70px #absolutediv { position: absolute; width: 100px; height: 70px; left: 30px; top: 50px; } Oranžová plocha = stránka 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.

9 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;} 9

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 10

11 Plovoucí boxy Technologie pro publikování na webu 1, Ing. Jiří Štěpánek #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é)

12 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 - blokový element, který může sloužit jako kontejner pro další obsah 12

13 Základní koncepty layoutu Kompletní třísloupcový layout Technologie pro publikování na webu 1, Ing. Jiří Štěpánek 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

14 Konstrukce třísloupcového layoutu Hlavička – definice zpravidla na celou šířku stránky, výška bývá pevně definovaná 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) Pravý sloupec – zpravidla pevná šířka, nastavený float na right. Výška sloupce je vždy proměnná (auto) 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

15 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) Bodovaný úkol


Stáhnout ppt "TNPW1 Cvičení 6 20.3.2014"

Podobné prezentace


Reklamy Google