HOME    SKRIPTY
6. díl seriálu o HTML - Rámy
Le Hai Anh | 31. května 2007

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ám

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.

HTML

 

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

 

HTML


Při kliknutí v menu na odkaz PRVNI STRANKA se nám zobrazí obsah 1.htm.