Joonis 7. Üks väga levinud raamiskeem.
Raamide (ingl. k. frame; eestikeelseteks vasteteks on pakutud ka "paanid" ja "kaadrid") kasutamine tuli HTML-i alates versioonist 3.2. See lubab luua "leht lehes"-süsteeme - mitmest osast koosnevaid lehekülgi, kus erinevates akendes saab vaadata erinevaid lehekülgi, sooritada mitmesuguseid operatsioone jpm. Oskusliku kujunduse korral annab raamide kasutamine märkimisväärset efekti, samas aga ei ole neid sugugi vaja igas olukorras ning tänaseks on olemas ka alternatiivsed lahendused CSSi näol.
Nii ongi raamid alates XHTML 1.1-st jäetud põhistandardist välja ning neid saab kasutada üksnes lisamoodulitena. Käesolevas peatükis on lihtsuse mõttes jäetud kasutusse varasem XHTML 1.0, mis defineeris eraldi alamvariandi (frameset). Üldiselt aga tuleks raamitehnikat pidada minevikku jäänud asjaks ning seda mitte kasutada. Et aga veebis kohtab laialdaselt ka veel päris vanu HTML-lehekülgi, siis on see peatükk siiski siia sisse jäetud.
Tuleb meeles pidada, et raamitehnikas lehekülg ei ole mõnedele lugejatele tehniliselt kättesaadav, kuna kõik veebilehitsejad seda ei tunista. Seepärast tuleb enne "raamima" asumist endalt küsida - kas seda on vaja? Jaatava vastuse korral aga tuleks vähegi tähtsama infolehe korral kindlasti luua ka "varuventiil" ehk raamideta lehekülg neile, kes raame ei näe. See aga tähendab praktiliselt topelttööd.
Raamitehnika hiilgeajaks oli üldiselt HTML 3.2 standardi valitsusaeg - raamid võimaldasid sarnaselt tabelimärgenditega vabamat veebikujundust ning erinevalt tabelimärgendite "mittesihipärasusest" kujundamisel olid raamid täiesti standardne ning otseselt selleks otstarbeks mõeldud tehnika. CSS-i esilekerkimine koos mitmete täiendavate veebitehnoloogiatega on raamide kasutamist tublisti vähendanud. Siiski on raamid esindatud ka XHTML 1.0 standardis, kuid nende kasutamise korral tuleb mängu eraldi päisedeklaratsioon. Kui XHTML 1.0 levinuim päisedeklaratsioon oli alljärgnev:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
siis raamide puhul näeb see välja nii:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
NB! Mõlemal juhul on tegelikult tegemist üheainsa pika tekstireaga - mitte kasutada Enter-klahviga reavahetusi!
Raamidega lehekülg on koosneb tegelikult peafailist ehk "sõrestikust", mis kujundab lehekülje üldilme, ning erinevatest lehekülgedest, mida kuvatakse eri raamides. Vaatleme üht laialdaselt kasutatavat kujundusviisi:
Joonis 7. Üks väga levinud raamiskeem.
Sellise kujunduse korral koosneb lehekülg sõrestikufailist (mis määrab tegelikult lehekülje aadressi - lehekülje lugemiseks tuleb sisestada sõrestikufaili aadress) ning kolmest eraldi leheküljest pealkirja, sisukorra ja põhiinfo tarvis.
Pealkirjaraami ainuke otstarve on hoida lehekülje pealkiri kogu aeg kasutaja silme ees (tavaline pealkiri keritakse pikema lehe lugemisel ekraanilt välja). See on kõige vähem tähtis raam, mis vahel ka hoopis ära jäetakse.
Sisukorraraam annab hea ülevaate erinevatest lehekülgedest loetavas WWW-süsteemis ja võimaldab kerge vaevaga ühelt leheküljelt teisele liikuda. Sinna paigutatakse harilikult kas siis teksti- või graafilised viited teistele sama süsteemi lehekülgedele.
Põhiraam on mõeldud info kuvamiseks - kui raamideta süsteemis tuuakse dokument nähtavale kogu lugemisakna suurusena, siis raamidega süsteemis paigutatakse ta põhiraami. Keerulisemates süsteemides võib põhiraame olla ka mitu. Vaatame ühe sellise veebilehe sõrestikufaili:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xml:lang="et" lang="et"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Padavere Padjaklubi</title>
</head>
<frameset cols="15%,85%" border="1">
<frame src="sisukord.html" name="sisukord" />
<frameset rows="17%,83%" border="4">
2~ <frame src="pealkiri.html" name="pealkiri" />
<frame src="algus.html" name="põhiraam" />
</frameset>
</frameset>
<noframes>
<h1> Vabandust...</h1>
<p>See leht on tehtud HTML 3.2/XHTML 1.0 raamitehnoloogia abil,
mida Teie veebilehitseja ei tunnista. Teil on võimalus
<br />
<a href="http://www.mozilla.org" title="Firefox">a) tõmmata endale
uus Firefox</a>,<br />
<a href="http://www.microsoft.com" title="Microsoft">b)tõmmata uus
Internet Explorer</a> või<br />
<a href="raamita.html">c) vaadata selle lehe raamideta
varianti.</a></p>
</noframes>
</html>
Siin määrab <frameset>-märgend ära esiteks veergude (cols) ja teiseks ridade (rows) protsentjaotuse raamide vahel - esmalt pannakse sisukorra- ja põhiraami laiuste suhteks 15 : 85 ning seejärel pealkirja- ja põhiraami kõrguste suhteks 17 : 83. Eraldusjoon kahe esimese raami vahel on tavalise paksusega (border="1"), joon teise ja kolmanda raami vahel aga märksa paksem (border="4"). Joone puudumist tähistab sarnaselt eespool kirjeldatud märgenditega border="0".
<frame>-märgend sarnaneb mõneti graafikamärgendiga - ka siin tuleb määrata soovitava faili nimi. name-osa märgendis annab raamile nime, mida saab hilisemates märgendites kasutada.
Hea toon nõuab ka <noframes>-märgendi kasutamist - siin pakutakse lugejale alternatiivina kas sobiva veebilehitseja hankimist Internetist või siis sama lehe raamideta variandi lugemist.
Nüüd paneme esmalt paika pealkirja. Loome faili pealkiri.html (mille kogu sisuks on lehe pealkirja kuvamine):
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Padavere Padjaklubi</title> </head> <body> <h1 align="center">Padavere Padjaklubi</h1> </body> </html>
Järgmise sammuna loome sisukorra - sisukord.html:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Padavere Padjaklubi</title> </head> <body> <h3 align="center">Sisukord</h3> <p><a href="algus.html" name="esileht" target="põhiraam">Esileht</a></p> <p><a href="tervitus.html" name="tervitus" target="põhiraam">Klubi esinaise tervituskõne</a></p> <p><a href="ajalugu.html" name="ajalugu" target="põhiraam">Senine ajalugu</a></p> <p><a href="tegemine.html" name="tegevus" target="põhiraam">Padjaklubi tegemised</a></p> <hr /> <p><a href="album.html" name="pildialbum" target="põhiraam">Padjaklubi fotoalbum</a></p> <p><a href="kylalised.html" name="külalisteraamat" target="põhiraam">Padjaklubi külalisteraamat</a></p> </body> </html>
Siin võiks ka title-märgendi ära või tühjaks jätta - akna ülaserva pealkiri määrati sõrestikufailis ära ning raamis oleva lehe pealkirja ei näidata. Samas võib mõni huviline aga viidata meie lehele ka raamiväliselt - tema veebilehitseja näitab meil raamis olevat lehte üleekraanirezhiimis ning sel juhul tuleb ka pealkiri nähtavale.
target-osa viidetes määrab raami nime (põhiraam), kuhu selle viitega määratud dokumenti tuleb kuvada.
Ja nüüd võime hakata tegema lehekülgi endid (meie näites siis algus.html, tervitus.html jne). Raamis kuvatav lehekülg ei erine põhimõtteliselt millegi poolest tavalisest leheküljest, tuleb vaid arvesse võtta lugemisruumi väiksemat laiust (osa ekraani võtab enda alla sisukorraveerg) ja mitte kasutada väga suuremõõtmelisi elemente (suured tabelid ja fotod vms).
Üks sageli vajaminev võte väärib siin eraldi mainimist. Nagu nägime, sai target-parameetri abil suunata viiteid avanema teise raami (vastavalt name-väärtusele). Sageli on aga tarvis "murda raamidest välja", s.t. avada raamis asuvaid viiteid väljaspool raame. Võimalused on järgmised:
2003-2024 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või
uuem).
Litsentsi ingliskeelne täistekst