Dnes je Přidat k oblíbeným
Rámce v HTML
Co jsou to rámce?
Rámce jsou oblasti v rámci webové stránky, které rozdělují okno prohlížeče do několika částí. V každé oblasti je možné zobrazit jiný dokument, který je ale většinou hypertextově nebo jinak provázán s dokumenty v ostatních částích. Nejčastěji bývá okno rozděleno na užší sloupec umístěný vlevo (menu), větší část uprostřed (text) a opět úzký pruh vpravo (ankety, reklamy...). K tomuto rozvržení ještě někdy přibývá hlavička nebo patička.Vytváření rámců
Rámce se vytváří v html dokumentu, který má poněkud odlišnou strukturu než běžná stránka. To znamená, že neobsahuje příkaz <body> pro definování těla dokumentu, ale místo něj je použit párový tag <frameset>. Uvnitř něj je definován počet rámců, jejich velikost a rozmístění v okně prohlížeče. Tag frameset má několik možných atributů. Atribut cols definuje vertikální (svislé) rozdělení stránky, atribut rows rozdělení horizontální (vodorovné). Hodnota těchto atributů udává šířku nebo výšku jednotlivých rámců. Je zadávána číslem bez jednotky (počet pixelů), v procentech nebo hvězdičkou. Hvězdička znamená, že rámec vyplní celý zbylý prostor (mezi ostatními rámci). Počet hodnot atributů rows a cols udává počet rámců.
Mezi tagy <frameset> a </frameset> se používá nepárový tag <frame>. K němu přiřazujeme atribut src, který udává URL adresu dokumentu, který bude v daném rámci zobrazen. Atributem name přiřazujeme rámci jméno, které potom slouží jako cíl hypertextových odkazů. Dalším atributem příkazu frame je scrolling. Tento atribut může mít tři hodnoty (yes | no | auto). Udává to, jestli se zobrazí posuvník (vždy | nikdy | jen při delším textu).
<html>
<head>
<title>Kekel</title>
</head>
<frameset cols="180,*,15%">
<frame src="menu.htm" name="menu" scrolling="no">
<frame src="text.htm" name="obsah" scrolling="auto">
<frame src="ankety.htm" name="ankety" scrolling="auto">
</frameset>
</html>
Takto získáme tři sloupce. První s názvem menu a šířkou 180px; třetí se jmenuje ankety a bude mít šířku 15% okna a prostřední (obsah) bude vyplňovat celou zbylou šířku.
<head>
<title>Kekel</title>
</head>
<frameset cols="180,*,15%">
<frame src="menu.htm" name="menu" scrolling="no">
<frame src="text.htm" name="obsah" scrolling="auto">
<frame src="ankety.htm" name="ankety" scrolling="auto">
</frameset>
</html>
Takto získáme tři sloupce. První s názvem menu a šířkou 180px; třetí se jmenuje ankety a bude mít šířku 15% okna a prostřední (obsah) bude vyplňovat celou zbylou šířku.
Složitější struktura stránky
Pokud chceme mít stránku rozdělenou na více oblastí, použijeme vnořování více příkazů frameset do sebe.
<html>
<head>
<title>Kekel</title>
</head>
<frameset rows="150,*,35">
<frameset> <frame src="logo.htm" name="hlavicka">
</frameset>
<frameset cols="25%,*,25%">
<frame src="menu.htm" name="levy">
<frame src="obsah.htm" name="stredni">
<frame src="ankety.htm" name="pravy">
</frameset>
<frameset>
<frame src="paticka.htm" name="paticka">
</frameset>
</frameset>
</html>
Přibližný výsledek:
<head>
<title>Kekel</title>
</head>
<frameset rows="150,*,35">
<frameset> <frame src="logo.htm" name="hlavicka">
</frameset>
<frameset cols="25%,*,25%">
<frame src="menu.htm" name="levy">
<frame src="obsah.htm" name="stredni">
<frame src="ankety.htm" name="pravy">
</frameset>
<frameset>
<frame src="paticka.htm" name="paticka">
</frameset>
</frameset>
</html>
Přibližný výsledek:
Pohyb a odkazy mezi rámci
Největší síla rámců přichází ve chvíli, kdy odkazy v jednom rámci odkazují na různé dokumenty, které pomocí atributu "target", jehož hodnotou je jméno cílového rámce, směřují do rámce jiného. Nejlepší vysvětlení opět poskytne příklad.
Ukázka části zdrojového kódu dokumentu menu.htm, který je zobrazen v rámu s názvem "levy". Všechny odkazy se otevřou v rámu s názvem "stredni".
<a href="zaklady.htm" target="stredni">Základy</a>
<a href="syntaxe.htm" target="stredni">Syntaxi jazyka</a>
<a href="strukturovani.htm" target="stredni">Strukturování dokumentu</a>
<a href="syntaxe.htm" target="stredni">Syntaxi jazyka</a>
<a href="strukturovani.htm" target="stredni">Strukturování dokumentu</a>
Prohlížeče bez podpory rámců
Některé prehistorické prohlížeče nepodporují rámce. Jejich podíl je však již opravdu mizivý (psáno 05/2007). Ale přeci jen je lepší na tuto možnost pamatovat použitím párového tagu <noframes>, jehož obsah se zobrazí pouze v prohlížeči, který rámce nepodporuje. Mezi tagy <noframes> a </noframes> umístíme celé tělo dokumentu, kam umístíme buď upozornění, že je třeba mít prohlížeč s podporou rámců anebo alternativní nerámcové provedení stránek.
<html>
<head>
<title>Kekel</title>
</head>
<frameset cols="180,*,15%">
<frame src="menu.htm" name="menu" scrolling="no">
<frame src="text.htm" name="obsah" scrolling="auto">
<frame src="ankety.htm" name="ankety" scrolling="auto">
</frameset>
<noframes>
<body bgcolor="#ffffff">
<h2> HTML dokument vyžaduje podporu rámců</h2><br>
Prohlížeč, který rámce podporuje, můžete zdarma získat na adrese:
<a href="http://www.czilla.cz"> http://www.czilla.cz</a>
</body>
</noframes>
</html>
<head>
<title>Kekel</title>
</head>
<frameset cols="180,*,15%">
<frame src="menu.htm" name="menu" scrolling="no">
<frame src="text.htm" name="obsah" scrolling="auto">
<frame src="ankety.htm" name="ankety" scrolling="auto">
</frameset>
<noframes>
<body bgcolor="#ffffff">
<h2> HTML dokument vyžaduje podporu rámců</h2><br>
Prohlížeč, který rámce podporuje, můžete zdarma získat na adrese:
<a href="http://www.czilla.cz"> http://www.czilla.cz</a>
</body>
</noframes>
</html>
| Tag | Párový | Význam | Atributy |
|---|---|---|---|
| frameset | Párový | slouží k rozdělení okna; používá se místo příkazu <body>; uvnitř tohoto tagu se smí vyskytovat pouze příkaz <frame>, případně další skupina <frameset> | rows="vodorovné dělení okna; seznam jednotlivých velikostí je oddělován čárkou" |
| cols="svislé dělení okna; seznam jednotlivých velikostí je oddělován čárkou" | |||
| frame | Nepárový | Definuje jeden rám uvnitř prvku <frameset> | src="URL adresa dokumentu, zobrazeného v tomto rámu" |
| name="jméno rámu" | |||
| marginheight="vzdálenost mezi textem a okrajem rámu svisle" | |||
| marginwidth="vzdálenost mezi textem a okrajem rámu vodorovně" | |||
| scrolling="udává, jestli bude mít rám posuvníky (yes | no | auto= ano | ne | v případě potřeby)" | |||
| noresize="noresize" Zákaz, aby uživatel měnil velikost rámu | |||
| noframes | Párový | Obsahuje dokument, zobrazený v prohlížeči, který neumí zobrazovat rámy |
Jak se dělá web?
Jazyk HTML
Vytváříme první webovou stránku
Základy jazyka HTML
Strukturování textů
Formátování textu
Tvorba seznamů
Tvorba odkazů
Grafika stránek
Barvy na webu
Tvorba tabulek
Tvorba rámců
Tvorba formulářů
Neutrální tagy
Vývoj HTML- XHTML
Kompletní přehled HTML tagů
CSS kaskádové styly
Rady a tipy
Užitečné nástroje
Problém? Poradíme!
Reference a odkazy
O autorovi