6.Díl: Rámy
Rámy
Rámy nám umožňují rozdělit stránku na menší díly a v každém z těchto dílů je jiná webová stránka. V tomto díle již nebude stačit soubor index.htm, ale je nutné si vytvořit nejméně další dva, které pak propojíme mezi sebou.
Hlavním tagem bude <FRAMESET> a dále ROWS a COLS, které nám rozdělí rámy na sloupce a řádky.
6.1 Vzhled rámu
1. rozdělení na horizontálně
<FRAMESET ROWS="50%, 50%">
.
.
.
</FRAMESET>
2. rozdělení vertikálně
<FRAMESET COLS="50%, 50%">
.
.
.
.
</FRAMESET>
3. multi rámy
<FRAMESET ROWS="20%,80%">
.
.
.
.
<FRAMESET COLS="30%,70%">
.
.
.
</FRAMESET>
</FRAMESET>
6.2- Rámy v praxi
Umístení rámu v HTML kódu:
<HTML>
<HEAD>....</HEAD>
<FRAMESET>
.
.
.
</FRAMESET>
<BODY>
.
.
.
</BODY>
</HTML>
6.2.1- První rámy
HTML soubory popsané zde jsou zjednodušené, takže pro správný chod je nutné doplnit požadované kostry HTML souboru (viz. 2. díl- Základy HTML). Vytvorte si krome index.htm ješte hlavicka.htm, uvod.htm, menu.htm, 1.htm, 2.htm.
SOUBOR: INDEX.HTM
<FRAMESET rows="80,*">
<FRAME src="hlavicka.htm" frameborder="0">
<FRAMESET cols= "20%,80%">
<FRAME src="menu.htm" name="menu">
<FRAME src="uvod.htm" name="uvod">
</FRAMESET>
</FRAMESET>
Náš hlavní soubor index.htm bude startovací stránkou. Nadefinujeme příslušné rámy a samozřejmě je pojmenujeme.
Rozpitváme tento kód:
<FRAME src="menu.htm" name="menu">
src="menu.htm" - udává nám umístění dané stránky, v tomto rámu
name="menu" - rámy je nutné pojmenovat
SOUBOR: MENU.HTM
MENU
<ul>
<li> <a href="1.htm" target="uvod">Prvni stranka </a> </li>
<li> <a href="2.htm" target="uvod">Druha stranka </a> </li>
<li> <a href="3.htm" target="uvod">Treti stranka </a> </li>
<li> <a href="4.htm" target="uvod">Ctvrta stranka </a> </li>
</ul>
K tomu, aby při kliknutí na odkaz PRVNI ODKAZ, byl směřován do rámu UVOD, je nutné přidat TARGET="JMENO KAM TO CHCEME ABY SE STRANKA ZORBAZILA". V tomto případě jsme napsali target="uvod", takže stránka 1.htm se zobrazí v rámu UVOD, přesně tak, jak to chceme.
SOUBOR: UVOD.HTM
Vitejte na moji skvele strance.
SOUBOR: HLAVICKA.HTM
HLAVIČKA
SOUBOR: 1.HTM
PRVNI STRANKA
Při prvním spuštění index.htm souboru se nám zobrazí toto
Při kliknutí v menu na odkaz PRVNI STRANKA se nám zobrazí obsah 1.htm.