NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov

Prezentace na téma: "NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov"— Transkript prezentace:

1 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/

2 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

3 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

4 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ů

5 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ů.

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

7 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É!

8 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.

9 Ú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.

10 Zobrazení v prohlížeči

11 Ú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.

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

13 Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora