Iframe a Frame - co to je a jak nejlépe používat rámce v Html
Takže rámečky... k čemu jsou a jaké výhody poskytují? Pokusím se o tom mluvit v této kapitole a samozřejmě o tom, jak je implementovat a pracovat s nimi.
Při vytváření webových stránek je často nutné otevřít několik HTML dokumentů současně v jednom okně prohlížeče... takže byly vytvořeny rámce pro definování pracovních oblastí pro každý dokument. Kromě toho jsou rámy dobrým nástrojem, pomocí kterého můžete udělat rozložení stránky, slouží jako důstojná „alternativa“ k tabulkové metodě rozložení stránky... Slovo „alternativní“ dávám do uvozovek, protože je to úplně jiný způsob; budování webu s vlastními výhodami a nevýhodami a je docela těžké to srovnávat s dosud známou konstrukcí webu.. ale nejdřív..
No, začneme? Řekněme, že potřebujeme otevřít tři HTML dokumenty najednou v jednom okně prohlížeče a uspořádat je například takto:
Co k tomu potřebujeme? Pro začátek si samozřejmě musíme vytvořit tři samostatné html dokumenty, které vlastně otevřeme v jednom okně Nechť první dokument obsahuje grafický obrázek a funguje jako logo, říkejme mu logotyp.html, druhý dokument bude. nějaký obsah.. říkejme tomu menu .html a třetí je dokument s velkým množstvím textu. text.html. Samozřejmě si můžete vymyslet svá vlastní jména, stejně jako obsah dokumentů, ale zatím je lepší zkopírovat moje... bude to pohodlnější pro mě i pro vás.
Máme tedy tři soubory logotype.html, menu.html a text.html.. které musíme umístit pod jednu střechu, ale střechu ještě nemáme.
Napíšeme „střechu“, hlavní dokument, ke kterému připojíme naše soubory. Protože to bude hlavní, dáme mu název index.html.
rámy
Zde je nám známá struktura dokumentu, kterou jsme žvýkali na samém začátku našeho tréninku Rámy narušují stávající stereotypy! Struktura rámce dokumentu vypadá takto:
rámy
Žádný štítek
kompenzuje novou značku - nainstalujte rám nebo sadu rámů. S tímto chlapem budeme dále pracovat.
Štítek má atributy řádky A sloupce- tyto atributy říkají prohlížeči, jak umístit rámce do okna prohlížeče
řádky- vodorovně
sloupce- svisle
V našem případě potřebujeme horizontální umístění rámečků... takže píšeme takto:
rámy
Procenta za rovnítkem nejsou nic jiného než velikosti našich rámových oken v jednom velkém okně prohlížeče, máme tedy umístit tři okna - proto jsou zde také tři hodnoty oddělené čárkami. Pamatujte, jak nastavujeme velikosti buněk pro tabulku, zde platí stejný princip, jako v případě buněk tabulky, lze velikosti rámců zadat v procentech z celkové plochy a v pixelech.
Zde je několik příkladů psaní:
- tato položka označuje, že budou tři horizontální okna, z nichž poslední bude zabírat 70 % plochy okna prohlížeče a první dvě budou zabírat 15 %.
- zde jsou svisle umístěna tři okna, jejichž šířka je uvedena v pixelech.
- takové zadání znamená, že první a třetí okno bude mít šířku 100, respektive 180 pixelů a druhý snímek bude zabírat celou zbývající plochu.
S umístěním dokumentů jsme hotovi, teď už je zbývá jen spojit a užít si první výsledek..
Štítek
a jeho atribut src bude prohlížeči indikovat cestu k html dokumentu, který by měl být otevřen v prostoru k tomu určeném. Máme tři samostatné dokumenty logotype.html, menu.html a text.html, nyní musíme pro každý určit cestu, což vlastně děláme. (Předpokládám, že všechny čtyři soubory jsou ve stejné složce a cesty k nim mají nejjednodušší zápis jako:
)
soubor index.html
rámy
Soubor logotype.html
rámy
Soubor menu.html
rámy
Menu:
Žampionová polévka
Fazole v hrnci, italský styl
Australský letní salát
... ... ...
Soubor text.html
rámy
Žampionová polévka hodně textu..
V tomto příkladu jsem rozložil všechny čtyři HTML dokumenty, kde index.html je hlavní, a další tři jsou stránky plug-in, z nichž každá může v principu fungovat autonomně a obsahovat cokoli chcete, obrázky, tabulky, texty, odkazy.. Udělal jsem to Abychom pochopili princip práce s rámečky. V dalších příkladech zveřejním pouze soubor hlavy s rámečky (jinak všechny zabírají příliš mnoho místa na stránce) a víte, že mám „někde venku“ všechny ostatní soubory obsahující grafiku, texty, možná něco jinak.. no, nezůstávejte za mnou, pomalu upravujte své vlastní stránky pro budoucí tréninkový web.. Nevím, o čem budete psát ty své, ale slíbil jsem, že pomůžu jedné dívce při psaní stránky věnované k vaření..)) takže jsem se rozhodl takříkajíc zamířit na dvě mouchy jednou ranou.. zajíčka a stránky..)) něco takového..))
Ve výše uvedeném příkladu jsme všechna okna umístili vodorovně a změnili jsme atribut řádky na sloupce můžete je uspořádat vertikálně. Ale co když potřebujete umístit naše okna?
takhle?: nebo takhle?: nebo dokonce takhle?:
Existuje cesta ven. Podívejme se na příklady.
Začněme prvním případem... co vidíme? A vidíme dva řádky, kde druhý je rozdělen do dvou sloupců.
A nyní v pořadí:
- rozdělte okno prohlížeče na dva řádky
- načtěte naše logo do prvního řádku- a rozdělte druhý řádek na dva sloupce
- v první bude menu
- a ve druhém je hodně textu
- zavřete značku dělení sloupců
- zavřete značku dělení řádkuObecně je nesprávné říkat sloupce a řádky, protože rámce nemají s tabulkami nic společného než vizuální podobnost, je správné říkat horizontální a vertikální rámce... no, říkám to tak, aby to tak bylo být ti jasnější...
Dobře, podívejme se na příklad:
rámy
Ve druhém případě máme dva sloupce, ve kterých je druhý rozdělen na dva řádky, takže budeme psát takto:
- rozdělte okno na dva sloupce
- první bude obsahovat obsah - a druhý rozdělte na dva řádky
- logo
- a hlavní text
- uzavřete dělení čáry
- uzavřít rozdělení do sloupců
rámy
Třetí případ je trochu komplikovanější, ale neměli byste se ho bát... zvláště proto, že jsem osobně zvolil tento druh konstrukce pro web o kulinářském umění, níže vysvětlím proč. co máme? tři sloupce a druhý sloupec v podstatě obsahuje náš první případ..
- rozdělte okno na tři sloupce (všimněte si, že druhý sloupec zabírá přesně 800 pixelů a dva vnější nemají přesnou velikost a rozdělí zbývající prostor na polovinu)
-v prvním sloupci načteme html dokument, který bude plnit čistě dekorativní funkci -
-
- Do druhého sloupce vložíme náš „první případ“
-
-
-
-
- ve třetím sloupci načteme stejný soubor s dekoracemi
- bouchnout
Podívejte se na příklad a pak vysvětlím, proč jsem zvolil cestu pěti oken
rámy
Proč tedy pět oken? Vzpomínám si, že jsem již psal o tom, že různí uživatelé internetu mají na svých monitorech různá rozlišení a podle toho na různých obrazovkách budou naše stránky vypadat jinak... a pokud nebudou žádné konkrétní velikosti, budou všechny naše výkresy, texty, tabulky , jak se říká, „plovoucí“ pro uživatele, jejichž rozlišení monitoru se liší od vašeho. Když jsme web rozložili pomocí tabulky, problém s rozměry stránky byl vyřešen přiřazením konkrétní šířky a výšky k této tabulce, bohužel to nelze provést s rámy... i když zadáte šířku rámců, které nejsou v procentech, ale v pixelech je to stále poslední sloupec, který se roztáhne přes zbývající šířku okna prohlížeče a stránka, jak se říká, ztratí svůj „obchodovatelný vzhled“. Co bychom tedy měli dělat? Musíme se uchýlit k drobným trikům... Nastavením středního sloupce (ve kterém máme vlastně celou stránku) o velikosti 800 pixelů jednou provždy určíme jeho šířku a bezrozměrný první a třetí sloupec v Kromě dekorace fungují jako jakési „pružiny“, na kterých je středový sloupek. Takže pro lidi s malým rozlišením monitoru budou tato okna/pole úzká a pro lidi s vysokým rozlišením široká, takže středový sloup nebude nijak ovlivněn a nyní do něj můžeme s naprostou jistotou umístit jakékoli předměty s přesnou referencí lokálně, bez obav o jejich budoucí osud. Porovnejte první příklad, kde jsou tři okna, a třetí, kde už jich je pět, není to lepší?
Skončíme s rozmístěním a velikostmi rámečků... a už jsme se tu dlouho zasekli... pojďme dál.
Uvádíme rámy do úhledného vzhledu.
V našem posledním příkladu vás jako první zaujme celá hromada posuvníků, které jsou tam, kde jsou potřeba a kde nejsou potřeba. Zbavme se jich, dobře, můžeme je někde nechat.. To se provádí pomocí atributu rolování- tag
, může mít jednu ze tří hodnot:
- žádný
- Ano- vždy ukázat
- auto
rámy
Pole rámečků, nebo jinak vzdálenost od hranic rámečku k textu nebo obrázku, jako v našem případě, se zadávají v pixelech pomocí atributů šířka okraje A výška okraještítek
rámy
Promluvme si trochu o rámci kolem našich rámů.
Pokud jste si v minulém příkladu všimli, že najetím kurzoru na okraj rámečku získá kurzor, tedy kurzor, jiný vzhled (uchopte a posuňte) a nyní lze tento okraj přetáhnout v libovolném směru při držení levé tlačítko myši. Někdy tato „mobilita“ hranic rámců hraje do karet webmasterovi, ale častěji stále překáží... Aby se uživateli zabránilo hrát si s velikostí oken pro značku
přišel s atributem noresize
rámy
To je ale atribut, který je nám povědomý už dlouho pohraniční nastavuje šířku v pixelech právě těchto snímků mezi snímky.. píše se uvnitř tagu . Význam stejný jako předtím border="0" nás zcela osvobodí od rámců.
rámy
Rámečky a odkazy.
Je čas oživit naše stránky pomocí odkazů, ale tady je problém, známý obyčejný odkaz Fazole v hrnci, italský styl otevře tento dokument ve stejném rámci, kde se nachází, v našem případě přímo v rámci s obsahem a samotný obsah v okamžiku kliknutí na tento odkaz upadne v zapomnění.. můžete se podívat na neohrabaný příklad. klikněte na libovolný odkaz v něm.. Aby k tomu v budoucnu nedocházelo, je nutné prohlížeči naznačit, v jakém rámci má být dokument, který potřebujeme, otevřen, pokud jej samozřejmě opravdu nepotřebujete otevřít v stejný rám.
Pamatuji si, že jsme se již seznámili v kapitole věnované odkazům s atributy jméno- jméno a cíl- branka, používají se i při práci s rámy, mechanismus je mírně pozměněn a je téměř stejný. Nejprve je nutné, aby rám, ve kterém bychom chtěli otevřít jakékoli dokumenty, dostal individuální název.
píše se to takto:
name="osnovnoe"> jméno můžete vymyslet jakékoliv.. hlavní je nezapomenout..
Píše se to takto:
target="osnovnoe">Fazole v hrnci, italský styl
No, myslím, že vám není třeba vysvětlovat, že než se odkážete na nějaké dokumenty, musíte je vytvořit... v mém případě mají soubory (recepty) názvy text.html, text1.html, text2.html ...
Podívejte se na příklad:
soubor index.html
rámy
Soubor menu.html
rámy
Menu:
target="osnovnoe"> Žampionová polévka
target="osnovnoe">Fazole v hrnci, italský styl
target="osnovnoe"> Australský letní salát
... ... ...
Stejně jako dříve lze dokument otevřít v samostatném okně. Připomínám, že se to píše takto:
target="_blank">Fazole v hrnci, italský styl
Nebo přiřazením atributu cíl význam _top otevřete to ve stejném okně prohlížeče, ale na celou obrazovku.. „vynulování“ všeho, co tam je.. je to napsáno takto:
target="_top">Fazole v hrnci, italský styl
Takhle dopadl web... samozřejmě je na něm ještě co dělat... navíc podle mé představy bude mít trochu jinou strukturu, co se týče navigace po webu, bude mít hromada stránek, krásné menu, ale co se týče rámové struktury, myslím, že zůstane stejná..
plovoucí rám
Někdy je nutné vložit další HTML dokument nebo dokonce sérii takových dokumentů na stránku obsahující nerámcovou strukturu v samostatném okně. K dosažení tohoto účelu existuje značka
Příklad dokumentu s plovoucím rámem:
plovoucí rám
plovoucí rám
Na tuto stránku byl zaveden tzv. "plovoucí rám".
V samostatném okně otevře další html dokument pro zobrazení.
… … …
Noframes
Některé prohlížeče nepodporují strukturu rámce dokumentu nebo ji nesprávně interpretují, uživatelé navíc často v nastavení prohlížeče záměrně zakazují podporu struktury rámce dokumentu HTML. A i když je procento takových prohlížečů a uživatelů malé, přesto existují.
Nyní si představte, že jste vytvořili svůj web pomocí rámové struktury a někteří návštěvníci, možná aniž by věděli, v čem je problém, se pokusí otevřít váš web a jejich prohlížeč zobrazí chybu! Co si budou myslet o vašem webu? Myslím něco jako: "Uf.. nějaký nesmysl.. Už sem nepřijdu!"
Aby bylo uživateli jasné, že jeho nastavení prohlížeče/prohlížeče rámce nepodporuje, je zde tag <![CDATA[
</b> .</p>
<p>Štítek <b><noframes>
</b> zobrazí text v něm uzavřený, pokud prohlížeč uživatele nepodporuje rámce nebo jsou v jeho nastavení násilně zakázány. Pokud jsou rámce podporovány prohlížečem uživatele, pak je tato značka jednoduše ignorována.</p>
<p> <html> <br>
<head> <br>
<title>rámy</title> <br>
</head> <br>
<frameset cols="*,800,*" border="0"> <br><b><noframes>Omlouváme se, ale váš prohlížeč nepodporuje rámy.]]>
Výsledek příkladu bude patrný, pokud váš prohlížeč opravdu nepodporuje rámy (tady jsem dlouho přemýšlel.. :) pokud je to tak, tak proč vůbec číst tuto kapitolu?) nebo jste podporu rámců vypnuli ve svém prohlížeč jako experiment.
Štítek <![CDATA[
</b> musí být umístěn uvnitř značky <b><frameset>
</b></p>
<p>S plovoucím rámečkem je vše ještě jednodušší, stačí mezi něj napsat požadovaný text <b><iframe> </iframe>
</b> a tato zpráva se zobrazí na obrazovce, pokud prohlížeč nepodporuje rámce.</p>
<p>
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Omlouváme se, ale váš prohlížeč nepodporuje rámy.</b></iframe>
</p>
<ul><p>Než začnete vytvářet stránku pomocí struktury rámců, analyzujte její rozvržení, velikost každého okna, přítomnost nebo nepřítomnost posuvníků v nich atd. Poté můžete vytvářet soubory HTML plug-in, aniž byste si museli dělat starosti s jejich relativním pozici vůči sobě navzájem.</p><p>Použijte značku <b><noframes>
</b>. Pamatujte, že pokud ve vašem prohlížeči stránka funguje a zobrazuje se tak, jak jste zamýšleli, pro ostatní uživatele se věci mohou lišit!</p>
</ul>
<p>Definuje strukturu rámců na webové stránce. Rámy rozdělují okno prohlížeče na samostatné oblasti umístěné blízko sebe. Každá z těchto oblastí načte samostatnou webovou stránku definovanou pomocí prvku <frame>. Rámce se používají k rozdělení webové stránky na dva nebo více dokumentů, které obvykle obsahují navigaci a obsah webu. Mechanismus rámečku umožňuje otevřít dokument v jednom rámci z odkazu, na který jste klikli v úplně jiném rámci. Živel <frameset>(z angl <i>rámová sada</i>- sada rámů) nahrazuje <body>na webové stránce. Je přípustné použít vnořenou strukturu prvků, což umožňuje rozdělit jeden snímek na dvě nebo více oblastí.</p><p>Při používání rámů zvažte následující vlastnosti:</p><ul><li>Vyhledávače nepracují dobře s rámovými strukturami, protože stránky, které obsahují obsah, obvykle nemají odkazy na jiné dokumenty.</li><li>Rámce skrývají adresu stránky, na které se návštěvník nachází, a nastavují se prostřednictvím prvku <title>a vždy zobrazovat pouze adresu webu. Z tohoto důvodu nelze stránku, která se vám líbí, umístit do sekce „Oblíbené“ v prohlížeči.</li><li>Uživatel často skončí na webu, aniž by vůbec tušil, kde skončil, protože jen klikl na odkaz přijatý ve vyhledávači. Aby návštěvník webu snáze zjistil, kde se nachází, je na každé stránce umístěn název webu, název stránky a navigace. Rámce mají tendenci tento princip porušovat tím, že oddělují název webu od obsahu a navigaci od obsahu. Představte si, že ve vyhledávači najdete vhodný odkaz, kliknete na něj a nakonec se vám otevře dokument bez názvu a navigace. Abyste pochopili, kde jsme, nebo se podívali na jiné materiály, budete muset upravit cestu v adresním řádku, což je v každém případě nepohodlné.</li><li>Velký počet snímků vyžaduje, aby prohlížeč přidělil více paměti než obvykle.</li>
</ul><p>Tato položka je zastaralá, nepoužívejte ji.</p><h2>Syntax</h2><p><frameset>
<frame>
</frameset></p><h2>Uzavírací štítek</h2><p>Požadovaný.</p><h2>Příklad</h2><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FRAMESET</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="page/top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="page/left.html" name="leftFrame" scrolling="no" noresize>
<frame src="page/main.html" name="mainFrame">
</frameset>
</frameset>
</html>
</p><p>Některé příklady organizace rámců jsou uvedeny níže.</p><table><tr><td style="width: 49%; padding-right: 5px"><table style="width:100%" class="data"><tr><td style="background:#f0f0f0">Rám 1</td><td style="background:#FFCC99">Rám 2</td>
</tr><tr><td style="background:#f0f0f0">Rám 3</td><td style="background:#FFCC99">Rám 4</td>
</tr><tr><td style="background:#f0f0f0">Rám 5</td><td style="background:#FFCC99">Rám 6</td>
</tr></table></td><td style="width: 49%; padding-left: 5px; vertical-align: top"><table style="width:100%" class="data"><tr><td rowspan="2" style="width:28%; background:#f0f0f0">Rám 1</td><td style="width:72%; background:#FFCC99">Rám 2</td>
</tr><tr><td>Rám 3</td>
</tr></table></td>
</tr><tr><td> <frameset rows="33%,33%,*" cols="50%, 50%">
<frame src="r1c1.html" name="Фрейм 1">
<frame src="r1c2.html" name="Фрейм 2">
<frame src="r2c1.html" name="Фрейм 3">
<frame src="r2c2.html" name="Фрейм 4">
<frame src="r3c1.html" name="Фрейм 5">
<frame src="r3c2.html" name="Фрейм 6">
</frameset>
</td><td style="vertical-align: top"> <frameset rows="*" cols="80,*">
<frame src="frame1.html" name="Фрейм 1">
<frameset rows="80,*">
<frame src="frame2.html" name="Фрейм 2">
<frame src="frame3.html" name="Фрейм 3">
</frameset>
</frameset>
</td>
</tr></table><h2>Specifikace</h2><p>Každá specifikace prochází několika fázemi schvalování.</p><ul><li>Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.</li><li>Doporučení kandidáta ( <span>Možné doporučení</span>) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.</li><li>Navrhované doporučení <span>Doporučené doporučení</span>) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.</li><li>Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.</li><li>Předloha editora ( <span>Redakční návrh</span>) - návrhová verze normy po změnách, které provedli redaktoři projektu.</li><li>Koncept ( <span>Návrh specifikace</span>) - první verze návrhu normy.</li>
</ul><p>Živý standard HTML (Living) vyniká - nedodržuje tradiční číslování verzí, protože se neustále vyvíjí a je pravidelně aktualizován.</p>
<p>Štítek <b>sada rámů</b> definuje strukturu rámců na webové stránce. Rámy rozdělují okno prohlížeče na samostatné oblasti umístěné blízko sebe. Každá z těchto oblastí načte samostatnou webovou stránku definovanou pomocí značky FRAME. Rámce se používají k rozdělení webové stránky na dva nebo více dokumentů, které obvykle obsahují navigaci a obsah webu. Mechanismus rámečku umožňuje otevřít dokument v jednom rámci z odkazu, na který jste klikli v úplně jiném rámci. Značka FRAMESET nahrazuje prvek BODY na webové stránce. <br>Je přípustné používat vnořenou strukturu prvků, což umožňuje rozdělit jeden snímek na dvě nebo více oblastí.</p>
<p>Při používání rámů zvažte následující vlastnosti:</p>
<ul><li>Vyhledávače nepracují dobře s rámovými strukturami, protože stránky, které obsahují obsah, obvykle nemají odkazy na jiné dokumenty.</li>
<li>Rámce skrývají adresu stránky, na které se návštěvník nachází a nastavují pomocí tagu TITLE a zobrazují vždy pouze adresu webu. Z tohoto důvodu nelze stránku, která se vám líbí, umístit do sekce „Oblíbené“ v prohlížeči.</li>
<li>Uživatel často skončí na webu, aniž by vůbec tušil, kde skončil, protože jen klikl na odkaz přijatý ve vyhledávači. Aby návštěvník webu snáze zjistil, kde se nachází, je na každé stránce umístěn název webu, název stránky a navigace. Rámce mají tendenci tento princip porušovat tím, že oddělují název webu od obsahu a navigaci od obsahu. Představte si, že ve vyhledávači najdete vhodný odkaz, kliknete na něj a nakonec se vám otevře dokument bez názvu a navigace. Abyste pochopili, kde jsme, nebo se podívali na jiné materiály, budete muset upravit cestu v adresním řádku, což je v každém případě nepohodlné.</li>
<li>Velký počet snímků vyžaduje, aby prohlížeč přidělil více paměti než obvykle.</li>
</ul><p><b>Syntax</b><br><frameset><br> <frame><br></frameset></p>
<p><b>Uzavírací štítek</b><br>Požadovaný.</p>
<p><b>Možnosti</b><br>border - tloušťka hranice mezi rámečky. <br>bordercolor - barva hraniční čáry. <br>cols – Nastavuje šířku nebo proporce rámečků sloupců. <br>frameborder - zobrazí rámeček kolem rámečku nebo ne. <br>framespacing - analogicky k parametru border nastavuje šířku okraje. <br>řádky – nastaví velikost nebo proporce rámečků jako řádků.</p>
<p>Příklad 1: Použití tagu FRAMESET</p>
<blockquote>
<p><html><br><frameset rows="80,*" cols="*" frameborder=NO border=0 framespacing=0><br> <frame src=top.html name=topFrame scrolling=no noresize><br> <frameset cols="80,*" frameborder=no border=0 framespacing=0><br> <frame src=left.html name=leftFrame scrolling=no noresize><br> <frame src=main.html name=mainFrame><br> </frameset><br></frameset><br></html></p>
</blockquote>
<p>Některé příklady organizace rámců jsou uvedeny níže.</p>
<table style="border-collapse: collapse; width: 75%;" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><td width="50%">
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td bgcolor="#f0f0f0">Rám 1</td>
<td bgcolor="#ffcc99">Rám 2</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Rám 3</td>
<td bgcolor="#ffcc99">Rám 4</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Rám 5</td>
<td bgcolor="#ffcc99">Rám 6</td>
</tr></tbody></table></td>
<td>
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td rowspan="2" width="28%" bgcolor="#f0f0f0">Rám 1</td>
<td width="72%" bgcolor="#ffcc99">Rám 2</td>
</tr><tr><td height="55" align="middle">Rám 3</td>
</tr></tbody></table></td>
</tr><tr valign="top"><td><frameset rows="33%,33%,*" cols="50%, 50%"><br><frame src=r1c1.html name="Фрейм 1"><br><frame src=r1c2.html name="Фрейм 2"><br><frame src=r2c1.html name="Фрейм 3"><br><frame src=r2c2.html name="Фрейм 4"><br><frame src=r3c1.html name="Фрейм 5"><br><frame src=r3c2.html name="Фрейм 6"><br></frameset><br></td>
<td><frameset rows="*" cols="80,*"><br><frame src=frame1.html name="Фрейм 1"><br><frameset rows="80,*"><br><frame src=frame2.html name="Фрейм 2"><br><frame src=frame3.html name="Фрейм 3"><br></frameset><br></frameset>
</td>
</tr></tbody></table><h3>Popis parametrů tagu FRAMESET</h3>
<h4>parametr BORDER</h4>
<p><b>Popis</b><br>Nastaví tloušťku okraje mezi rámečky. Ve výchozím nastavení je čára zobrazena trojrozměrně pomocí parametrů bordercolor a border, její vzhled si můžete přizpůsobit podle svého uvážení. Prohlížeče interpretují parametry tagu FRAMESET a zobrazují řádek jinak. Například pro černou čáru o tloušťce 5 pixelů.</p>
<p>Jak můžete vidět z obrázku, Opera vůbec nemění barvu čáry, ale správně zobrazuje požadovanou hodnotu. Prohlížeč Internet Explorer bere střední část čáry vyplněnou černou jako tloušťku, zatímco Netscape bere celou šířku nebo výšku, včetně malých čar po stranách, což vytváří zvýšený efekt.</p>
<p>Pokud má tag FRAMESET framespacing=0 , pak prohlížeč Opera vůbec nezobrazí ohraničení a Internet Exporer ignoruje hodnoty atributů bordercolor a border.</p>
<p><b>Syntax</b><br><frameset border=значение>...</frameset></p>
<p><b>Argumenty</b><br>Kladné celé číslo. Hodnota 0 skryje rámec.</p>
<p><b>Výchozí hodnota</b><br>Záleží na prohlížeči a operačním systému.</p>
<p><b>Podobné jako CSS</b><br>pohraniční</p>
<p>Příklad 2: Změna tloušťky okraje</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5
><br><frame src=left.html name=leftFrame><br><frameset rows="80,*"><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Parametr BORDERCOLOR</h4>
<p><b>Popis</b><br>Definuje barvu viditelných hranic mezi rámečky. Barvu nadřazeného prvku FRAMESET lze změnit pomocí podřízeného tagu FRAMESET nebo jednotlivého prvku FRAME. Prohlížeč Opera tento parametr obecně ignoruje.</p>
<p><b>Syntax</b><br><frameset bordercolor=цвет>...</frameset></p>
<p><b>Argumenty</b><br>Hodnotu barvy lze nastavit dvěma způsoby.</p>
<p>1. Podle jména <br>Prohlížeče podporují některé barvy podle jejich názvu.</p>
<p>2. Podle hexadecimální hodnoty <br>K určení barev se používají hexadecimální čísla. Šestnáctková soustava je na rozdíl od desítkové soustavy založena, jak její název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho. Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě. Aby se předešlo zmatkům při určování číselné soustavy, před hexadecimální číslo se umístí symbol hash #, například #666999. Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF. Barevný symbol je tedy rozdělen na tři složky #rrggbb, kde první dva symboly označují červenou složku barvy, prostřední dva - zelenou a poslední dva - modrou.</p>
<p><b>Výchozí hodnota</b><br>Závisí na nastavení prohlížeče a operačního systému.</p>
<p><b>Podobné jako CSS</b><br>pohraniční</p>
<p>Příklad 3: Změna barvy ohraničení</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5><br><frame src=left.html name=leftFrame><br><frameset rows="80,*" bordercolor=red
border=5><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Parametr COLS</h4>
<p><b>Popis</b><br>Určuje velikosti nebo proporce sloupců rámců ve struktuře FRAMESET. Pokud je vytvořeno více sloupců, musí být parametr cols nastaven na konkrétní hodnotu. K tomu existují tři možnosti:</p>
<ol><li>velikost v pixelech;</li>
</ol><p>Chcete-li nastavit velikost rámce na danou šířku, použijte hodnotu v pixelech. To je užitečné zejména pro zobrazení obsahu dané velikosti, například obrázku. Pro proporcionální rozdělení snímků je vhodné použít procenta v tomto případě, bez ohledu na velikost okna prohlížeče, budou zachovány proporce, hlavní je, že celková šířka sloupců je rovna 100%. Pokud se hodnoty nesčítají do 100 %, prohlížeč zobrazí rámečky, ale šířka nebude nastavena přesně. Nakonec, pokud je požadováno přidělení zbývajícího prostoru snímku, použije se symbol hvězdičky. V tomto případě prohlížeč vypočítá šířku rámce, když jsou již nastaveny velikosti ostatních rámců. Jednotlivé typy hodnot je možné míchat tak, že je uvedete oddělené čárkami. Poté úkol vypočítat požadovanou šířku připadne prohlížeči.</p>
<p><b>Syntax</b><br><frameset cols="ширина 1, ширина 2, ...">...</frameset></p>
<p><b>Argumenty</b><br></p>
<p><b>Výchozí hodnota</b><br>100%</p>
<p>Příklad 4: Šířka rámu</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%"
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Parametr FRAMEBORDER</h4>
<p><b>Popis</b><br>Určuje, zda se má zobrazit hranice mezi snímky nebo ne. Prohlížeč Opera stejně zobrazuje tenkou čáru, pokud není použit framespacing=0.</p>
<p><b>Syntax</b><br><frameset frameborder=yes | no>...</frameset><br><frameset frameborder=1 | 0>...</frameset></p>
<p><b>Argumenty</b><br>Můžete použít ano nebo 1 pro zobrazení ohraničení a ne nebo 0 pro jeho skrytí.</p>
<p><b>Výchozí hodnota</b><br>Ve výchozím nastavení je tato možnost povolena.</p>
<p>Příklad 5: Skrytí hranice mezi snímky</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%" frameborder=no
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Parametr FRAMESPACING</h4>
<p><b>Popis</b><br>Parametr framespacing je analogický s parametrem frameborder a je určen k nastavení velikosti hranice mezi snímky. Důvodem, proč existují dva různé atributy s podobnými vlastnostmi, je to, že framespacing je starší nastavení a je podporováno prohlížeči z důvodu kompatibility s jejich dřívějšími verzemi.</p>
<p><b>Syntax</b><br><frameset framespacing=значение>...</frameset></p>
<p><b>Argumenty</b><br>Kladné celé číslo. S framespacing=0 prohlížeč Opera zcela skryje hranice mezi snímky a Internet Explorer nastaví jejich parametry na výchozí. Tento atribut prohlížeč Netscape zcela ignoruje.</p>
<p><b>Výchozí hodnota</b><br>2</p>
<p>Příklad 6. Skrytí hranice mezi snímky</p>
<blockquote>
<p><html><br><frameset cols="150,*" framespacing=0
frameborder=0><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html></p>
</blockquote>
<h4>Parametr ROWS</h4>
<p><b>Popis</b><br>Určuje výšku nebo poměr stran snímků ve struktuře FRAMESET jako řádků. Pokud je vytvořeno více řádků, musí být parametr rows nastaven na konkrétní hodnotu. K tomu existují tři možnosti:</p>
<ol><li>velikost v pixelech;</li>
<li>velikost jako procento dostupné šířky rámu;</li>
<li>Symbol hvězdičky (*) představuje veškerou volnou šířku zbývající po zadání rozměrů v pixelech nebo procentech.</li>
</ol><p>Výhodou použití parametru rows ve spojení s hodnotou * je, že rámec lze definovat ve spodní části okna prohlížeče. Když potřebujete vytvořit jednotnou mřížku snímků, použijte parametry rows a cols v tagu FRAMESET. Pro složitější strukturu je třeba vnořit jeden tag FRAMESET do druhého.</p>
<p><b>Syntax</b><br><frameset rows="высота 1, высота 2, ...">...</frameset></p>
<p><b>Argumenty</b><br>Uvedené hodnoty, oddělené čárkami, jako pixely (px nebo jiné označení nejsou povinné), procenta nebo symbol *.</p>
<p><b>Výchozí hodnota</b><br>100%</p>
<p>Příklad 7: Výška rámu</p>
<blockquote>
<p><html><br><frameset rows="*,100"
><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html</p>
</blockquote>
<p>Rámce jsou prvky HTML, které umožňují rozdělit okno webového prohlížeče na několik nezávislých oken, z nichž každé může načíst samostatný dokument HTML. Každé takové okno (rám) může mít své posuvníky a fungovat nezávisle na ostatních nezávislých oknech nebo naopak ovládat jejich obsah. Lze je použít k uspořádání nabídky, která je neustále umístěna v jednom okně, zatímco informace samotné jsou umístěny v jiném okně. Uživatelé mohou k nabídce přistupovat kdykoli a nemusí se vracet na předchozí stránku, aby vybrali jinou položku nabídky. Použití rámců vám umožňuje „připnout“ obrázky nebo jiné prvky statického rozhraní do okna prohlížeče, zatímco se zbytek stránky posouvá v rámci. <br>Je však třeba poznamenat, že rámce jsou dnes považovány za zastaralý nástroj a stránky s rámečky jsou nyní považovány za nedůstojné, protože profesionální webmasteři rámce ve svých projektech nikdy nepoužívají. Rámy mají řadu notoricky známých problémů. Matou vyhledávače například proto, že stránky obsahující obsah neodkazují na jiné dokumenty. Pokud chcete získat návštěvníky z vyhledávačů, zapomeňte na rámečky. Uživatel nemůže umístit stránku, která se mu líbí, do sekce záložek prohlížeče, protože rámce skrývají adresu stránky, na které se nachází, a vždy zobrazují pouze adresu webu. Z tohoto důvodu způsobují prohlížečům problémy při sledování historie a také nejsou příliš přizpůsobivé různým velikostem obrazovky a mobilním zařízením. <br>Navzdory skutečnosti, že projekty s rámečky jsou na World Wide Web stále vzácnější, učení HTML by bylo neúplné, pokud by se téma rámců nezabývalo. Rámy spolu se svými nevýhodami mají také některé výhody, které nám nedovolují tuto technologii zavrhnout jako neperspektivní.</p>
<h2>Vytváření rámců</h2>
<p>Struktura dokumentu HTML s rámečky je vzhledově velmi podobná formátu běžného dokumentu HTML. Stejně jako v běžném HTML dokumentu je veškerý kód umístěn mezi párové značky <b><html>
</b> A <b></html>
</b> a v kontejneru <b><head>
</b> jsou umístěny hlavičky. Hlavní rozdíl mezi dokumentem s rámečky a běžným HTML dokumentem je ten, že dokument s rámečky místo tagu <b><body>
</b> je použita spárovaná značka <b><frameset>
</b>(z anglického frame set - sada rámů). <br>Následující příklad ukazuje strukturu HTML dokumentu s rámečky:</p>
<h3>Příklad: Struktura dokumentu HTML s rámečky</h3>
<ul><li>Zkuste to sami »</li>
</ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">frame_top</td>
</tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">frame_left</td>
<td style="width: 80%;background-color:lime;color: white;">frame_right</td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Dokument s rámečky</title>
</head>
<frameset rows="100, *">
<frame src="frame_top.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
<noframes>
]]>
