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

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

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

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

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

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

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

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

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

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

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

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

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

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

Typy média screen Obrazovka tty Teletype – pevná šířka znaků, konzole tv Televize, jiná média s nízkým rozlišením a omezenými scrollovacími schopnostmi projection Projektory handheld Mobilní zařízení print Tiskárny / náhled tisku braille Zařízení využívající braillovo písmo aural Syntetizátory řeči all Všechna zařízení <link rel="Stylesheet" href="style.css" type="text/css" media="print" /> Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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 <link rel="Stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="Alternate" href="style2.css" type="text/css" media="screen" /> Alternativní styl Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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