Návrh a tvorba WWW Cvičení 3

Prezentace na téma: "Návrh a tvorba WWW Cvičení 3"— Transkript prezentace:

1 Návrh a tvorba WWW Cvičení 3
Pokročilá práce s HTML5 a CSS 3

2 Box

3 Pozicování

4 Pokročilá práce se selektory
vzor význam E F Selektor následníka – všechny elementy F, které jsou uvnitř elementu E E>F Selektor přímého následovníka – všechny elementy F, které jsou přímím následovníkem E E~F Selektor následných sourozenců – všechny elementy F, které jsou následnými sourozenci elementu E E+F Selektor následného sourozence – elementy F, který je následným (prvním) sourozencem elementu E

5 Selektory skrz atributy
vzor význam E[foo] element E s atributem “foo” E[foo=“bar”] element E s atributem “foo” jehož hodnota se rovná “bar” E[foo~=“bar”] element E s atributem “foo” jehož jedna z hodnota se rovná “bar” E[foo^=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar” E[foo$=“bar”] element E s atributem “foo” jehož hodnota končí řetězcem “bar” E[foo*=“bar”] element E s atributem “foo” jehož hodnota obsahuje subřetězec “bar” E[foo|=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar”, po které následuje pomlčka

6 Pseudotřídy vzor význam E:link ještě nenavštívený odkaz E:visited
již navštívený odkaz E:active aktivovaný odkaz E:hover zaměřený odkaz (myší) E:focus zaměřený odkaz (tab) E:lang(en) element E v jazykové mutaci en E:empty element, který nemá potomky E:first-child první potomek elementu E E:last-child poslední potomek elementu E

7 Pseudoelementy vzor význam E::first-line první řádka elementu
E::first-letter První písmeno elementu

8 @ pravidla @charset @import @media @page @font-face
definice znakové sady stylesheetu @import import stylu ze zadaného stylesheetu @media svazuje styly s konkrétním typem výstupu @page pravidlo pro stránková média @font-face umožňuje import vlastních fontů @charset "iso " @import url("styl.css"); @media print {/* stylové vlastnosti pro tisk */} @page :first {margin-top: 10cm} @font-face {font-family: "Scarborough Light"; src: url("

9 header zdrojový kód: blok_3/css/basic01.htm

10 navigation zdrojový kód: blok_3/css/basic02.htm

11 aside zdrojový kód: blok_3/css/basic03.htm

12 section middle zdrojový kód: blok_3/css/basic04.htm

13 section customers zdrojový kód: blok_3/css/basic05.htm

14 footer zdrojový kód: blok_3/css/basic06.htm

15 UML UML (Unified Modeling Language) je jazyk umožňující specifikaci, vizualizaci, konstrukci a dokumentaci artefaktů softwarového systému. Specifikace vyjadřuje zásadu vytvoření přesných, jednoznačných a úplných modelů softwarového procesu. Vizualizace znamená, že se jedná o grafický jazyk. Konstrukce odpovídá požadavku přímého napojení jazyka na širokou škálu programovacích jazyků. UML se skládá z řady diagramů umožňujících postihnout různé aspekty systému. Jedná se celkem o čtyři základní náhledy (funkční, logický, dynamický, implementační).

16 Příklad UML use case

17 Příklad UML activity diagram

18 Kontrolní otázky Jaké je výchozí zobrazovací schéma dokumentu?
Co jsou to plovoucí elementy? Jaké máme formy pozicování elementů? Jak je možné v CSS řídit vykreslování překrývajících se elementů? Co to jsou „at“ pravidla?