Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.

Prezentace na téma: "Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek."— Transkript prezentace:

1 Ing. Jiří Štěpánek

2 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3

4

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

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

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

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

14

15

16

17

18 screenObrazovka ttyTeletype – pevná šířka znaků, konzole tvTelevize, jiná média s nízkým rozlišením a omezenými scrollovacími schopnostmi projectionProjektory handheldMobilní zařízení printTiskárny / náhled tisku brailleZařízení využívající braillovo písmo auralSyntetizátory řeči allVšechna zařízení

19 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

20 #obal #centrovanybox #obal { text-align: center; } #centrovanybox { margin: 20px auto 20px auto; text-align: left; }

21 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

22 Foto Popisek fotky Odkaz na detail Obalový kontejner obrázek Obyčejný text, span, odstavec…

23 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek MENU

24 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek