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

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

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

Podobné prezentace


Prezentace na téma: "Návrh a tvorba WWW Cvičení 3 Pokročilá práce s HTML5 a CSS 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 vzorvýznam E FSelektor následníka – všechny elementy F, které jsou uvnitř elementu E E>FE>FSelektor přímého následovníka – všechny elementy F, které jsou přímím následovníkem E E~FE~FSelektor následných sourozenců – všechny elementy F, které jsou následnými sourozenci elementu E E+FSelektor následného sourozence – elementy F, který je následným (prvním) sourozencem elementu E

5 Selektory skrz atributy vzorvý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 vzorvýznam E:linkještě nenavštívený odkaz E:visitedjiž navštívený odkaz E:activeaktivovaný odkaz E:hoverzaměřený odkaz (myší) E:focuszaměřený odkaz (tab) E:lang(en)element E v jazykové mutaci en E:emptyelement, který nemá potomky E:first-childprvní potomek elementu E E:last-childposlední potomek elementu E

7 Pseudoelementy vzorvýznam E::first-lineprvní řádka elementu E::first-letterPrvní písmeno elementu

8 @ –definice znakové sady –import stylu ze zadaného –svazuje styly s konkrétním typem –pravidlo pro stránková média –umožňuje import vlastních print {/* stylové vlastnosti pro tisk :first {margin-top: {font-family: "Scarborough Light"; src: url("http://www.font.site/s/scarbo-lt");}

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 1.Jaké je výchozí zobrazovací schéma dokumentu? 2.Co jsou to plovoucí elementy? 3.Jaké máme formy pozicování elementů? 4.Jak je možné v CSS řídit vykreslování překrývajících se elementů? 5.Co to jsou „at“ pravidla?


Stáhnout ppt "Návrh a tvorba WWW Cvičení 3 Pokročilá práce s HTML5 a CSS 3."

Podobné prezentace


Reklamy Google