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

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

Pozicování, CSS layout, alternativní styly Ing. Jiří Štěpánek.

Podobné prezentace


Prezentace na téma: "Pozicování, CSS layout, alternativní styly Ing. Jiří Štěpánek."— Transkript prezentace:

1 Pozicování, CSS layout, alternativní styly Ing. Jiří Štěpánek

2  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  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  training/css/positioning/ training/css/positioning/ Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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

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

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

10  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 (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  Dvousloupcový layout Technologie pro publikování na webu 1, Ing. Jiří Štěpánek 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

12  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

13  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  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

15

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

17  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


Stáhnout ppt "Pozicování, CSS layout, alternativní styly Ing. Jiří Štěpánek."

Podobné prezentace


Reklamy Google