Html raamid
Raamide e. frame abil saab kuvada rohkem kui ühte veebilehte, samas brauseri aknas.
Iga Html dokument on raamis ja iga raam on sõltumatu teiste raamide suhtes. Selline veebilehe kujundus võimaldab manipuleerida iga raami eraldi. Üldiselt loetakse "frame" elementi keeruliseks ning paljud veebidisainerid ei kasuta seda. Arvan, et asi nõuab lihtsalt veidi rohkem harjutamist. Kui asi selge siis võib saavutada väga huvitavaid ja üllatavaid tulemusi.
Ebamugavused raamide kasutamisel:
- Veebiarendaja peab tegelema mitme Html dokumendiga korraga
- Tervet lehekülge on raske printida
- Veebilehe allalaadimine aeglustub kuna brauser peab leidma mitu dokumenti korraga
Enne kui alustad tee selgeks mitmest raamist hakkab sinu veebidokument koosnema. Soovitan mitte üle kolme. Palju raamistusi muudab veebilehe kirjuks ja raskesti arusaadavaks.
Alustada tuleb sellest, et määrata veebidokumendi tüüp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Minu esimene raamistusega koduleht</title> </head>
Oletame, et soovid veebilehte kahe vertikaalse raamistusega nii, et vaskpoolne raam on kitsam ja kuulub navigeerimisele (200px) ning ülejäänud vaba ruum brauseri aknas kuulub pealehele. Kuna raamistusi loetakse vasakult paremale ja ülevalt alla siis kirjuta nii:
<frameset cols="200,*">
Element frameset ütleb brauserile mismoodi jaotub aken eraldi raamideks. cols omakorda ütleb, et raamistus kuvatakse tulpadena. Seega esimene 200 pikselit lai raamistus jääb brauseri akna vasakusse serva ning teine raamistus hõlmab ülejäänud ruumi sest see on määratud tärniga (*).
Raamistuse väärtuseid saab määrata ka protsentides (%)
frame märgis ütleb brauserile kust ta need raamid leiab. Soovitan kirjutada need sellises järjekorras nagu need brauseri aknas kuvatakse. Näiteks nii:
<frame src="navigatsioon.html" /> <frame src="pealeht.html" />
Lõpetuseks lisame noframe märgise juhuks kui külastaja brauser ei toeta raamistust:
<noframes> <p>Tänan, et külastasid minu kodulehte. Juhul kui sinu brauser ei toeta raamistust siis mine otse<a href="pealeht.html">pealehele</a>. </p> </noframes> </body> </html>
Navigatsiooni raamistus
Niisiis otsustasid luua veebilehe koos kahe raamistusega millest üks on raam kus külastaja saab sinu saidis navigeerida.
Esmalt on vaja luua dokument (navigatsioon.html) ning see internetti üleslaadida.
Loome näiteks sellise dokumendi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Navigatsiooni Raam</title> </head>
Kuigi hiljem "title" elemendis olevat teksti ei kuvata, soovitan siiski seda kasutada sest aja möödudes dokumendi nimi ununeb ning siis on lihtne meelde tuletada millise dokumendiga on tegemist.
Lisame dokumendile ka veidi värvi:
<body bgcolor="#99ccff">
Navigatsiooni raam on kitsas (200px) seega hoia linkide nimed lühikesed.
Nüüd anname dokumendile sisu:
<p> <a href="pealeht.html" target="main">Pealeht</a><br /> <a href="pildid.html" target="main">Pildid</a><br /> <a href="endast.html" target="main">Endast</a> </p> <address><a href="mailto:sinu email"> Siia kirjuta oma nimi</a></address> </body> </html>
Nüüd säilita see dokument nimega navigatsioon.html.
Tulemus peaks olema selline.
Pealehe raamistus
Pealeht on esimene mida külastajad näevad kõigepealt. See tähendab, et see leht on nagu index.html ilma raamistuseta veebisaidis.
Alusta jälle dokumendi tüübist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Minu esimene raamistusega pealeht</title> </head> <body> <h1>Minu esimene raamistusega pealeht</h1> <p> Siia kirjuta mida soovid... näiteks enda huvid, hobid,
harrastused jne. Lisada võid samuti pilte, fotosid, graafika elemente. </body> </html>
Ülalpool toodud dokumenti soovitaksin lisada ka samad lingid mis on navigatsioonis, juhuks kui külastaja brauser ei toeta raamistust.
Säilita dokument nimega pealeht.html ning pärast Internetti üleslaadimist peaks tulemus olema selline
Samamoodi loo dokumendid kõikide linkide kohta millised on navigatsioonis.
Nüüd vaata lehe alguses olevat näidet raamistusega dokumendi loomisest. Sama näite abil kirjuta oma dokument ja säilita nimega koduleht.html.
Lõpptulemus peaks olema selline
Märkused
Kui raamidel on nähtavad äärised siis saab kasutaja ise nende suurust muuta. Selle toimingu keelamiseks kasutatakse noresize="noresize" elementi <frame> märgise sees.
Lisa <noframes> märgis juhuks kui kasutaja brauser ei toeta raame.
Tähelepanu! Ei saa kasutada "body" elementi koos "frameset" elemendiga. Sisu mis on määratud kasutajatele kellede brauserid ei toeta raame, kirjutatakse <body></body> elementi ning see omakorda <noframes></noframes> elementi.
Näited
<noframes> märgis
Kuidas kasutatakse <noframe> märgist.
Segatud raamistus
Nii saab kombineerida tulpasid ja ridu raamistuses. Iga tulp/rida on html dokument.
Kindla kujuga ("noresize") raamistus
Hiirekursoriga üle raamistuse liikudes on näha, et raamistuse kuju ei saa muuta.
Navigatsioon raamistuses
Navigatsiooni raamis on linkide nimekiri millede sihtmärgiks on kõrvalolev raam.
Raamistus Html lehekülje sees (Inline frame)
Kuidas luua "inline" raamistust Html dokumendi sisse.
Kindlaksmääratud koht raamistuses
Link liigutab raamis oleva sisu valitud kohale.
Raami märgised:
| Märgis | Kirjeldus |
|---|---|
| <frameset> | Määratleb raamistuse |
| <frame> | Määratleb raami |
| <noframes> | Määratleb raamistuseta ala |
| <iframe> | Määratleb raamistuse alajaotuse |
