Technologie pro publikování na webu 1

1. Pozicování, CSS layout, alternativní styly Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

2. Pozicování • Slouží k definici umístění elementu v rámci stránky. • Pozicování = klíčový prvek při tvorbě layoutu • Kladen velký důraz na testování výsledného kódu v různých prohlížečích (odlišnosti v interpretaci) • V současné době není rozdíl v zobrazení stránky v různých prohlížečích tak velký. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3. Typy pozicování • Statické – implicitní pro všechny prvky • Prvky na stránce jsou automaticky řazeny – blokové elementy pod sebe, řádkové vedle sebe dle normálního toku vykreslování • Absolutní pozicování • Pozice vůči levému/pravému hornímu rohu stránky • Relativní pozicování • Pozice vůči nadřazenému prvku • Plovoucí box • Element je obtékán obsahem • http://www.barelyfitz.com/screencast/html-training/css/positioning/ Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

4. Absolutní pozicování • Element s nastaveným absolutním pozicováním je vyjmut z normálního toku vykreslování elementů • Je samostatně pozicovaný (jeho umístění nezávisí na jiných elementech) • Může překrývat jiné elementy (popředí/pozadí určuje vlastnost z-index) • Variantou absolutního pozicování je position:fixed – prvek je fixován na obrazovku a nemění se při posunu stránky. Při tisku se zobrazuje znovu na každé stránce ve stejném místě Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

5. Absolutní pozicování Oranžová plocha = stránka #absolutediv { position: absolute; width: 100px; height: 70px; left: 30px; top: 50px; } 50px 30px 70px 100px <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

6. Relativní pozicování • Při relativním pozicování je prvek posunut oproti pozici při normálním řazení. • Nejprve je zformátován, poté je posunut. • Při relativním pozicování může dojít k překrytí prvků, jejich pořadí je opět určeno vlastností z-index • Ostatní boxy vnímají prvek na jeho normální pozici, jako by nebyl posunut Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

7. Relativní pozicování #normaldiv { width: 200px; height: 100px; background-color: Black; } #relativediv { position: relative; width: 100px; height:90px; top: -20px; left: 30px; background-color: Red; } #normaldiv #relarivediv -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

8. Plovoucí boxy • Mohou být obtékány ostatním obsahem • Jsou umístěny vzhledem k pravému nebo levému okraji stránky • Nutné je definovat plovoucímu boxu šířku • Jsou mimo běžný tok vykreslování, ostatní obsah je prohlížečem upraven, aby plovoucím boxům vytvořil místo Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

9. 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. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10. Konstrukce CSS layoutu • Layout – visuální rozvržení webové stránky • CSS layout – 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></div> (division-oblast) • Div je implicitně blokový element, slouží jako kontejner pro další obsah a proto je nutné ho při tvorbě layoutu stylovat Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

11. Základní koncepty layoutu • Dvousloupcový layout Hlavička – není nezbytně nutná, ve většině případů se používá 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 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

12. 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ínawebu 1, Ing. JiříŠtěpánek

13. Základní koncepty layoutu • U obou dvou konceptů je nutné použít plovoucí boxy • Po definici plovoucích boxů zpravidla rušíme obtékání vlastností clear u následujícího prvku – u 3s layoutu by to bylo v patičce. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

14. Styly pro různá média • Do XHTML stránky lze nalinkovat více souborů stylů pro různá média. Typ média určuje atribut media prvku link. • U stylu pro jiné médium jsou definovány stejné selektory jako ve stylu pro obrazovku, ovšem jsou jinak formátovány např. pro tisk: • Schování menu, přihlašování, vyhledávání… • Roztažení obsahu stránky do míst kde bylo menu • Úpravy barev textů Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

15. Typy média <linkrel="Stylesheet"href="style.css"type="text/css"media="print"/> Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

16. Alternativní styly Umožňují výběr jiného stylu zobrazení stránky, jsou bohužel podporovány minimálním množstvím prohlížečů (mozilla). Za pomoci JavaScriptu je lze využívat i v ostatních prohlížečích, například kliknutím na určitý objekt na stránce. Základní styl <linkrel="Stylesheet"href="style.css"type="text/css"media="screen"/> <linkrel="Alternate"href="style2.css"type="text/css"media="screen"/> Alternativní styl Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

17. Příští přednáška • Centrování obsahu na střed • 3px bug v IE • Box model • Plovoucí fotogalerie Technologie pro publikování na webu 1, Ing. Jiří Štěpánek