NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov AUTOR: Ivana Mačková NÁZEV: VY_32_INOVACE_SADA5_INF.9.17 TÉMA: HTML - rámy ČÍSLO PROJEKTU: CZ.1.07/1.4.00/21.2609

Anotace Materiál HTML - rámy Vzdělávací obor Informatika Tematický okruh HTML – tvorba www stránek Anotace Výukový materiál slouží k vysvětlení a procvičení příkazu k vytvoření rámů v html dokumentu. Očekávaný výstup Žák se naučí pomocí příkazu <frameset> a <frame> rozdělit hlavní dokument v prohlížeči na části (hlavičku s logem, nabídkové menu a hlavní okno). Poznatky aplikuje při řešení úkolů. Druh učebního materiálu Prezentace Stupeň a typ vzdělávání Základní vzdělávání – druhý stupeň, 9. ročník

HTML - RÁMY Výhody použití rámů Na některých www stránkách, když klikneme na odkaz v nabídce, objeví se stránka v nějakém „okně“ stávající stránky. Toto umožňují tzv. rámy (z angličtiny frames = rámy, rámce). Výhody použití rámů snadná navigace složité pozadí v menu a v hlavičce se nemusí stále načítat při kliknutí na odkaz

Postup při tvorbě rámů Na začátku je nutné si ujasnit, kolik rámů a jak poskládaných bude www stránka mít a podle toho pak vytvořit odpovídající počet html dokumentů.  Nejčastější případy rozložení rámů Názvy rámů

Vytvoření html dokumentu – definice rámů Toto rozložení má 2 rámy: nabídka – zde bude zobrazen dokument nabidka.html hlavní – zde bude zobrazen dokument hlavni.html ; budou se zde otevírat odkazy z nabídky Je třeba vytvořit dokument index.html – nadřazený dvěma výše uvedeným dokumentům a obsahující definice rámů.

Takto vypadá soubor index.html v prohlížeči.

Atributy tagů frameset a frame cols – sloupcové rámy rows – řádkové rámy border – šířka rámečku mezi rámy Frame src – zdrojový soubor zobrazované stránky (URL) name – jméno rámu pro adresování odkazů noresize – zakáže měnit velikosti rámů (bez hodnoty) scrolling – zobrazení rolovacích lišt (hodnoty auto, yes, no) marginwidth a marginheight – horizontální a vertikální prázdný okraj Červeně vyznačené atributy jsou POVINNÉ!

PROČ? Jedná se o řádkové rámy. Čím se bude lišit předchozí soubor index.html pro toto uspořádání rámů (horní – nabídka, spodní – hlavní rám)? Bude se lišit atributem u tagu frameset – místo cols bude rows. PROČ? Jedná se o řádkové rámy.

ÚKOL: Vytvořte soubor index2 ÚKOL: Vytvořte soubor index2.html pro zadané rozložení rámů (horní – hlavička, dolní – nabídka a hlavní). Soubor uložte a zobrazte v prohlížeči.

Zobrazení v prohlížeči

ÚKOL: Vytvořte soubor index3 ÚKOL: Vytvořte soubor index3.html pro zadané rozložení rámů (vlevo - nabídka, horní – hlavička, dolní –hlavní). Soubor uložte a zobrazte v prohlížeči.

A opět, jak by se měl soubor zobrazit v prohlížeči.

Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora www.office.microsoft.com www.office.microsoft.com