TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
V této lekci se podíváme na rámce.
K čemu jsou rámce dobré?
Rámce se používájí, když chcete udělat jednu část stránky statickou (pořád stejnou) a druhou část dynamickou (měnící se). Pokud děláme rámcovanou stránku (celou stránku rozdělujeme třeba na 2 rámce), tak vše napíšeme do tagu <HEAD> a </HEAD> a tag <BODY> tam bude jen k tomu, co se má vypsat, když prohlížeč neumí rámce. V případě použití vloženého rámce, se vše zapisuje tak, jak má. Možná si řeknete: „To musí být strašně obtížné“. Ale naopak. Tato zdánlivě náročná část si vyžádá jen několik minut psaní kódu.
Nyní se podíváme, jak bude vypadat syntaxe.
<frameset>
<frame>
<frame>
</frameset>Toto je taková hodně ořezaná syntaxe rámcované stránky. Teď si rozebereme parametry, jejich obvyklé hodnoty a k jakému tagu je přiřadíme.
Tag frameset musí obsahovat minimálně jeden parametr navíc. Máme na výběr ze dvou parametrů. Můžeme použít parametr cols – použijeme, pokud chceme stránku rozdělovat na sloupce; parametr rows – při rozdělování stránky na řádky. Tomuto parametru musíme přiřadit nějakou hodnotu. Bude to číslo, a to buď v pixelech (jednotka px) nebo v procentech (jednotka %). Jednotlivé velikosti rámů oddělíme čárkou.
<frameset rows="25%, 50%, 25%">Takto docílíme toho, že stránka se rozdělí na tři části: První bude vysoká 25 % požadované stránky, druhá 50 % požadované stránky a třetí opět 25 % stránky. Dohromady 100 %, akorát se nám to tam vejde. Pokud chceme použít pixely, postupujeme následovně:
<frameset rows="25px, 50px, 25px">Tím se stránka rozdělí na 25, 50 a 25 pixelů. Rozdíl je v tom, že při použití procent na vyšším rozlišení vyjdou rámce akorát na celou stránku a při nižším také, ale při použití pixelů to na jednom rozlišení vychází přesně a na nižším třeba kousek přebývá.
Jak rámce používat a jak do nich odkazovat?
Nyní jsme si vysvětlili, jak nadefinujeme počet rámců a jejich velikost. Nyní každému rámu nastavíme
- jak se má jmenovat (důležité pro otevření stránky v rámu)
- jaký soubor se v něm má otevřít po otevření stránky
- vypnutí možnosti přenastavení velikosti
Jedna z nejdůležitějších nastavení rámce je jeho jméno. Jméno využijeme, když budeme chtít stránku otevřít v určitém rámci. Uvedu příklad:
Na rámec s nastavením
<frame name="super_ramec">do něj odkážeme odkazem
<a href="soubor.html" target="super_ramec">Odkaz zde</a>Při nastavování vlastností rámců postupujeme podle toho, jak jsme zadali hodnotu u cols/rows. Jednoduše řešeno, první tag frame bude nastavení toho, co je v cols/rows napsáno jako první. Celá syntaxe by ve výsledku mohla vypadat třeba takto:
<frameset rows="25%, 49%, 26%">
<frame name="horni" src="horni_ramec.html"> (nastavení rámce co měří, 25%)
<frame name="prostredni" src="stredni_ramec.html"> (nastavení rámce, co měří 49%)
<frame name="dolni" src="dolni_ramec.html"> (nastavení rámce, co měří 26%)
</frameset>
Jak vydíte, u tagu frame jsem použil nový parametr src. Tím se určuje, co se zobrazí v rámci hned po načtení stránky jako takové. Pokud není stránka nastavena v src nalezena, vyhodí to v rámci chybu 404 (nenalezeno).
Jak zrušit zvětšovnání:
Pokud nastavíte rámcovanou stránku tak, jak jsem před chvílí napsal, uživatel si bude moci za dělící čáru mezi rámci prostě chytnout a rozšířít ji tak, jak potřebuje. To se dá jednoduše vypnout přidáním parametru noresize k tagu frame.
Pokud při definici velikosti rámců použijeme znak *, znamená to zbytek stránky oproti ostatním hodnotám.
Pokud někde místo frame dáte frameset, můžete třeba zkombinovat rows a cols, čímž vám vznikne třeba stránka 4 rámů ve tvaru čtverce.
Rámce vložené
Pokud máme stránku, kde chceme mít stejné okolí a měnit pouze jedno místo nebo plochu, můžeme tak učinit pomocí vložených rámcu. Tento tag je PÁROVÝ. Syntaxe tagu:
<iframe name="jmeno_ramce" width="500" height="500"></iframe>Přičemž name je jméno rámce a ostatní parametry by neměly být ničím neznámým.
Shrnutí
Na závěr dnešní lekce si shrneme, jak vypadá kompletní syntaxe rámců, vložených (inline) rámců a jak do nich odkazujeme.
Rámce:
<html>
<head>
<frameset cols="25%, *">
<frame name="levy" src="leva_strana.html" noresize>
<frame name="hlavni" src="hlavni_strana.html" noresize>
</head>
</html>A pokud chceme, aby se stránka zobrazila v hlavním rámci, do levého umístíme kód:
<a href="sranka.html" target="hlavni">Odkaz</a>Rámec vložený:
<iframe name="iframe" width="500" height="500"></iframe>Odkážeme stejným způsobem, jen pozor, aby se hodnoty parametrů name a target při odkazování do rámců shodovaly!
Domácí úkol
Udělejte mi stránku, ktérá bude rozdělena na rámce do sloupce, přičemž jeden bude mít velikost 45 %, druhý 25 % a třetí 40 %. Jak jednoduché že?
Příště
Příště se podíváme na DOCTYPE.
