4. Okná
Okna (frames) ponúkajú mechanizmus na "rozdelenie" dokumentu na viacero okien, ktoré sú zobrazene súčasne. To sa využíva napr. pri zobrazovaní menu zároveň s aktuálnym dokumentom.
V ďalšom texte sa vyskytne pojem "rodičovské (nadradene) okno". O čo ide? Každé okno, ktoré sa rozdelí na ďalšie okna, sa pre ne stáva rodičovským oknom. V prípade, že je dokument rozdelený na jednotlivé okna, je pre tieto okna rodičovským oknom cele "okno prehliadača" - priestor, v ktorom sa zobrazuje normálna stránka. Keď sa má v okne zobraziť nejaký dokument (napr. pri kliknutí na linku - a, použije sa meno okna, ale v prípade potreby sa môže použiť aj označenie pre rodičovské okno (_parent) alebo cely priestor prehliadača, ktorý je v skutočnosti tiež iba okno - so špeciálnym menom _top.
Pri používaní okien treba mať na pamäti, že frameset nahrádza body. Je potrebné umožniť prezeranie stránky aj prehliadačom, ktoré nepodporujú okna (náhradný obsah stránky - napr. linky na jednotlivé okna v noframes.
4.1. Vytvorenie štruktúry okien
<html>
<frameset>
... definícia obsahu okna ...
</frameset>
</html>
Frameset vytvorí štruktúru okien dokumentu. Pomocou parametrov rows a cols sa okno rozdelí na horizontálne okna - "riadky" resp. vertikálne okna - "stĺpce", prípadne sieť okien, ak sú špecifikované oba. Okna sa vytvárajú zľava doprava a zhora nadol (ak sú špecifikované rows aj cols súčasne, vytvárajú sa postupne zľava doprava v jednotlivých "riadkoch". Počet okien je rovný počtu hodnôt v jednotlivých parametroch. Každé okno ma špecifikovanú veľkosť a bude slúžiť na umiestnenie jedného dokumentu.
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset rows="200,*">
... zvyšok definície frames ...
<noframes>
Táto stránka obsahuje frames, ktoré Váš prehliadač nepozná.
</noframes>
</frameset>
</html>
výška = 200 bodov
|
výška = zvyšok
|
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset cols="25%,50%,*">
... zvyšok definície frames ...
<noframes>
... alternatívny obsah ...
</noframes>
</frameset>
</html>
<— 25% —>
|
<— 50% —>
|
<— 25% —>
|
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset cols="33%,33%,*" rows="33%,33%,*">
... zvyšok definície frames ...
<noframes>
... alternatívny obsah ...
</noframes>
</frameset>
</html>
|
|
|
<— 33% —> |
<— 33% —> |
<— 34% —> |
|
|
|
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset rows="150,*">
... zvyšok definície frames ...
<frameset cols="50%,50%">
... zvyšok definície frames ...
</frameset>
<noframes>
... alternatívny obsah ...
</noframes>
</frameset>
</html>
výška = 150 |
|
<— 50% —> |
<— 50% —> |
Poznámka: ak prehliadač nepodporuje okná, zobrazí obsah v noframes.
4.2. Určenie obsahu okna
Frame určí dokument, ktorý sa nahrá ako obsah okna pri zobrazení stránky. Poradie frame korešponduje s poradím veľkosti okien, ktoré sú špecifikované v frameset (prvá veľkosť okna patri k prvému frame atď.)
Pomocou parametrov môžeme určiť spôsob zobrazovania jednotlivých okien.
| Parametre | Hodnoty | Default | Opis | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src = | "uri" | povinný | uri - určuje adresu alebo cestu k dokumentu, ktorý sa pri zobrazení stránky objaví v danom okne | |||||||||
| name = | "text" | povinný | jednoznačne identifikuje okno v rámci dokumentu. Slúži na určenie cieľového okna pri použití parametra target v a. | |||||||||
| width = | "velkosť" | - | určuje šírku vloženého okna v bodoch alebo percentách šírky stránky | |||||||||
| height = | "velkosť" | - | určuje výšku vloženého okna v bodoch alebo percentách výšky stránky | |||||||||
| frameborder = | ("1" | "0") | 1 | 0/1 - vypne/zapne orámovanie okolo okna | |||||||||
| scrolling = | ("yes" | "no" | "auto") | auto |
| |||||||||
| marginheight = | "velkost" | - | určuje, koľko bodov sa ma vynechať medzi obsahom okna a horným resp. dolným okrajom okna | |||||||||
| marginwidth = | "velkost" | - | určuje, koľko bodov sa ma vynechať medzi obsahom okna a ľavým resp. pravým okrajom okna |
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset rows="150,*">
<frame src="menu.html" scrolling="no" name="Menu">
<frame src="main.html" noresize scrolling="yes" name="Main">
<noframes>
Táto stránka obsahuje frames, ktoré Váš prehliadač nepozná.
</noframes>
</frameset>
</html>
menu.html |
main.html |
<html>
<head>
<title>Príklad: okná</title>
</head>
<frameset rows="150,*">
<frame src="title.html" scrolling="no" name="title">
<frameset cols="50%,50%">
<frame src="menu.html" scrolling="auto" name="menu">
<frame src="main.html" scrolling="auto" name="main">
</frameset>
<noframes>
... alternatívny obsah ...
</noframes>
</frameset>
</html>
title.html |
|
menu.html |
main.html |
4.3. Úlohy
- Vytvorte 4 web stránky:
- hlavna.html (XHTML 1.0 Frameset)
- menu.html (XHTML 1.0 Strict)
- ochranari.html (XHTML 1.0 Strict)
- formular.html (XHTML 1.0 Strict)
Ukážky:
kliknutím na obrazok sa zobrazí v originálnej veľkosti:
Texty a obrázok ku stránke ochranari.html:
- Základný text
- kódovanie windows-1250
- kódovanie iso-8859-2
- kódovanie utf-8 - Text pre obrázok
- kódovanie windows-1250
- kódovanie iso-8859-2
- kódovanie utf-8 - Obrázok
Formátovanie pre menu.html:
- Menu má širku 150px
- Položky menu sú odsadené 50px zhora a 10px zľava
- Odkazy sú modrej farby, tyčne a počiarknuté
- Ak je kurzor myši nad odkazom, zmeni sa na červene písmo bez počiarknutia
- Farba pozadia je #E1E1FF
- Písmo je verdana, 10pt
Formátovanie pre ochranari.html, formular.html:
- Písmo je verdana
- Texty sú odsadené z každej strany o 10px od okraja
- Nadpis je úrovne h1 o veľkosti 12pt
- Texty odstavcov majú veľkosť 10pt
- Okolo obrázka je 3px medzera vyplnená farbou #E1E1FF a celé je to ohraničené ramčekom hrúbky 1px šedej farby
- Vo formulári je ľavá časť zarovnaná vpravo a pravá časť vľavo
- Krajina obsahuje názvy štátov v tomto poradí: Česko, Maďarsko, Poľsko, Rusko, Slovensko
- Vo formulári sú preddefinované: Stav - slobodná/ý, Vek - viac ako 18 menej ako 60, Krajina - Slovensko
Požiadavky:
- Stránky musia spĺňať štandardy w3c (www.w3c.org - validácia HTML)
