Při sestavování své závěrečné práce se můžete inspirovat pracemi svých kolegů, kteří již předmět úspěšně absolvovali – viz téma Seminární práce na konci osnovy.

Nejprve si ovšem zopakujeme a procvičíme to, co jsme se naučili v předchozí lekci.

Tvorbu tabulek a seznamů si procvičíme na příkladech - slovníčku pojmů a několika tabulkách.

Sestavování tabulek v textovém editoru je práce hodně náročná na pozornost. V následujícím vzorovém dokumentu naleznete několik tabulek, které zkuste přepsat do HTML a patřičně zformátovat. Přeju vám opravdu bystré oko a pevné nervy:-))

Pro inspiraci přikládám odkaz na další nevšední možnosti zobrazení tabulek.

V lekci tohoto tématu se poprvé setkáme s externími zdroji používanými v kódu HTML - s obrázky, naučíme se též vytvářet spojení mezi soubory pomocí odkazů.

V následujícím cvičení si ukážeme roli odkazů při vytváření větších vzájemně provázaných celků webových stránek.

Cvičení - odkazy

Vytvořte nový soubor, uložte ho ke svým ostatním souborům z minulých cvičení, pojmenujte ho index.html.
V tomto novém souboru sestavte odrážkový seznam, v němž budou odkazy na soubory HTML vytvořené v předchozích cvičeních. Stránku opatřete rovněž hlavním nadpisem, popř. dalšími informacemi podle vlastního uvážení.
Může to dopadnout např. takto:

Do všech souborů, které jste takto navázali na index, vložte zpětné odkazy na index.html, např.

Cvičení - obrázky

Vkládání obrázků si procvičíme při sestavování tabulky s obrázky a jednoduché obrázkové galerie, v níž navíc uplatníme odkazy.

Pro inspiraci přikládám komentovanou tabulku stylů, kterou můžete porovnat se svým návrhem formátování galerie obrázků.

Pro srovnání vám nabízím vlastní návrh tabulky stylů CSS.

Cílem lekce je zvládnutí dalších technik - připojení vnějších formátovacích stylů k dokumentům HTML a formátování dokmentů pomocí mechanismu tříd.

V rámci opakování vytvoříme osnovu rozsáhlejšího dokumentu s využitím záložek.

Nejprve si stáhněte a rozbalte zdrojové soubory:

Mezi nimi naleznete soubor plyocyemata.html, ten využijeme pro editaci.

Pro obrázky vytvořte novou složku (nazvěte např. obrazky).

V dokumentu vytvořte obsah, tj. seznam nadpisů s odkazy na příslušné záložky v nadpisech.

V dnešní lekci si ukážeme, jakým způsobem můžeme stránku rozdělit na dílčí bloky (hlavičku, navigační menu, vlastní věcný obsah). Využijeme k tomu obecné blokové prvky div.

Formátování dokumentu s využitím mechanismu tříd v CSS bude hlavním obsahem následujícího cvičení.

Zdrojový text zformátujte do podoby výsledného vzorového dokumentu

Cílem dnešní lekce je seznámit se s časovou osou (panel Timeline), ve kterém se nastavuje a řídí mj. i průběh animace.

Dále se seznámíme s prvním typem animace používané ve Flashi - Motion Tween.

Naznačíme si rovněž obecný postup při navrhování a sestavování animovaných scén.

V dnešní lekci si zopakujeme tvoření animace pohybu po křivce. Na příkladu si procvičíme rovněž práci s časovou osou. Seznámíme se s prvními interaktivními prvky - tlačítky - a ukážeme si, jak se s pomocí jednoduchých skriptů ovládá průběh animace.

Programování tlačítek v AS2

Tento případ je nejjednodušší: stačí vytvořit instanci tlačítka na scéně, vybrat ji, otevřít panel Akce (F9) a zde připsat kód

on (press) { ... kod, ktery se ma provest ... } 

popř.

tl_start.onPress = function() { ... kod, ktery se ma provest ... } 

Programování tlačítek v AS3

 Zde je třeba

1. pojmenovat instanci tlačítka
2. vytvořit ovládací funkci
3. přiřadit tuto funkci ovladači tlačítka

např. pro tlačítko pojmenované tl_start:

function prehrat(event) { play()}


tl_start.addEventListener(MouseEvent.CLICK, prehrat);

V dnešní lekci vytvoříme komplexnější scénu - ukázku pohybu nabitých i neutrálních částic v magnetickém poli, v níž budou animace Motion Tween doplněné ovládacími prvky (tlačítky se skripty).

V dnešní lekci si ukážeme, jakým způsobem lze vytvářent vnořené animace.

V souvislosti s tím se seznámíme se třetím typem symbolů používaných ve Flashi, s Movie Clipy.

Ukážeme si též, jak fungují časové osy jednotlivých typů symbolů. S tlačítky jsme se už seznámili, dnes jsou na řadě symboly typu Graphic a Movie Clip.

Nejprve si zopakujeme tvorbu animací typu Motion a Shape Tween. Zkuste sami vytvořit následující animaci allosterické inhibice enzymů.

Obrázek na pozadí scény

V dnešní lekci si rozšíříme spektrum vlastností Movie Clipů, které lze ovládat skripty, zkombinujeme s maskovací vrstvou.

Ukážeme si, jak lze vytvořit vlastní kurzor a jak lze vkládat do flashové scény odkazy na internetové stránky.

V této lekci si ukážeme, jak můžeme do flashových animcí nahrávat multimediální objekty - zvuky a obrázky, uložené v samostatných souborech.

Obrázky pro galerii

Zvuky pro vyzkoušení

Jako další možnost zápočtové práce nabízím sestavení a realizaci grafického návrhu stránek, splňující parametry:

• 5 barevných variant (pro jednotlivé jazyky s použitím příslušného loga - angličtina, němčina, španělština) a univerzálního loga barevného a černobílého (viz odkaz níže)
• šířka webu min. 750 px, možno i relativní velikost
• šablonu pro stránku bez menu i s levým, popř. pravým vertikálním menu
• v patičce povinně texty a logolink OPVK - viz např. patička u http://is.muni.cz/do/1499/el/estud/prif/ps09/kruh/web/index.html
• nastylování prvků table, th, td, ul, ol, li, dl, dt, dd, h1 - h3, p, blockquote; em, strong 

Můžete se inspirovat pracemi vašich kolegů v předchozích semestrech:

Svou práci vložte do níže odkazované složky.