I huvuddokumentet, även kallat FRAMESET-dokumentet, därför att uppdelningen sker med hjälp av elementet FRAMESET, specificerar du hur skärmen ska delas upp. Vidare uppger du vilket dokument som ska laddas i vilken ram (elementet FRAME). Slutligen uppger du det innehåll som ska visas i de www-klienter som inte har något FRAMES-stöd. När en besökare kommer till din index.html-sida kommer de specificerade dokumenten att laddas i ramarna.
När besökaren besöker index.hml enligt exemplet kommer han/hon att se denna bild
För att skapa ramarna behövs tre element: FRAMESET, FRAME och NOFRAMES. Huvuddokumentet (index.html) strukturerar du enligt följande:
index.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML> - <HEAD> <TITLE>Referensböcker</TITLE>
</HEAD> - <FRAMESET cols="25%, 75%">
- <FRAME src="inneh.html" name=contents>
<FRAME src="hej.html" name=display> - <NOFRAMES>
<P><A href="inneh.html">Innehåll</A>
<P><A href="hej.html">Välkomstsida</A> - </NOFRAMES>
</FRAMESET>
</HTML>
Dokumentet börjar med en DOKUMENTTYP-deklaration
Huvuddel som i "vanliga" dokument
Denna efterföljs av FRAMESET istället för BODY där du delar upp skärmen i kolumner med hjälp av attributet COLS och/eller rader med attributet ROWS.
Vidare listar du dokument som ska laddas i de respektive ramarna samt namnger ramarna för att kunna hänvisa till dem från andra dokument.
Innehåll för www-klienter utan FRAMES-stöd. Det du skriver här kommer att visas i dessa klienter
Sluttaggar
FRAMESET och dess attribut
Det behövs minst ett FRAMESET element för att skapa ramarna. Början på varje set markerar du med starttaggen <FRAMESET> och du slutar med </FRAMESET>. Båda är obligatoriska. I starttaggen listar du antal kolumner (attributet COLS), rader (attributet ROWS) eller båda genom att uppge deras bredd eller höjd i förhållande till skärmen
Attribut i <FRAMESET>
Elmentet FRAMESET kan ta följande attribut: COLS, ROWS, onload, onunload och ID, CLASS, STYLE, TITLE. Attributen skrivs i starttaggen och åtskiljs med ett mellanslag.
COLS delar upp skärmen vertikalt. Det finns så många kolumner som det finns värden tilldelade detta attribut. Värdena listas ett efter ett och separeras med ett komma. <FRAMESET cols="20%, 30%, 50%"> till exempel delar upp skärmen i tre kolumner varav den första upptar 20%, den andra 30% och den tredje 50%. Observera att värdena citeras
ROWS delar upp skärmen horisontellt. F.ö. gäller samma regler som för COLS.
Ramarna skapas på basis av om och hur attributen COLS och ROWS förekommer. Följande regler gäller:
- COLS saknas - varje rad upptar sidans bredd
- ROWS saknas - varje kolumn upptar sidans längd
- ROWS och COLS saknas - en ram som upptar sidans storlek skapas
- COLS specificeras - ramarna skapas från vänster till höger
- ROWS specificeras - ramarna skapas uppifrån och ned
- Både ROWS och COLS specificeras - ett rutnät skapas, först på den första raden från vänster till höger, sedan på den andra raden från vänster till höger osv.
Värdena som specificerar ramarnas och kolumnernas storlek kan uppges i pixlar, procent eller genom relativa enheter. Standardvärdet är 100%.
- <FRAMESET COLS="30%, 70%">
- Två kolumner: den första upptar 30% av skärmen coh den andra 70%
- <FRAMESET COLS="30%, *">
- Två kolumner: den första upptar 30% och den andra resterande (dvs 70%)
- <FRAMESET COLS="*, 70%">
- Två kolumner, den första upptar det som är över från den andra kolumnen
- <FRAMESET COLS="*, *, *">
- Tre proportionella kolumner
- <FRAMESET COLS="100, 200">
- Den första kolumnen upptar 100 pixlar och den andra 200.
- <FRAMESET COLS="1*, 250, 3*">
- Den andra kolumnen upptar 250 pixlar, den första 25% och den tredje 75% av det som är över.
Attributen ID, CLASS, STYLE, TITLE är flitigt återkommande i HTML 4.0 då nästan varje element kan ta dem.
ID - Unik identifiering av specifik förekomst (instans) av ett element som gäller hela dokumentet. Genom att identifiera ett element kan man skapa en länk till det, skriva över stilinformation, referera till det från ett skript eller namnge ett deklarerat objekt. Det unika värdet kan bara tilldelas en enda förekomst av ett element.
<FRAMESET COLS="1*, 250, 3*" ID=evp34>
CLASS - Tilldelar en specifik förekomst (instans) av ett element eller grupp av element en klass eller grupp av klasser. Valfritt element kan tillhöra en klass. Klassade element kan tilldelas ett specifikt värde, t ex en unik stil
<FRAMESET COLS="1*, 250, 3*" CLASS=eva>
STYLE - Inline stilinformation för ett specifikt element. Ett stilspråk, t ex Cascading Style Sheets, används för att specificera denna stil.
<FRAMESET COLS="1*, 250, 3*" STYLE="margin: 0">
TITLE - Elementets titel, det tilldelade värdet kan visas som ett meddelande när musen passerar över den som kan vara en bra informationskälla i icke visuella www-klienter.
<FRAMESET COLS="1*, 250, 3*" TITLE="Ett ramat dokument">
ID och CLASS oftast används tillsammans med stilmallar. Du kan bara tilldela ID ett element men CLASS kan få vilket element som helst. Dessa två attribut låter dig deklarera unik still till de berörda elementen. Till exempel:
<HEAD>
<STYLE TYPE="text/css">
<!--
#evp34 {magin: 0}
.eva {margin: 0}
-->
</STYLE>
</HEAD>
Denna stil anropar du när du tilldelar de berörda elementen attributen ID eller CLASS
<FRAMESET COLS="1*, 250, 3*" ID=evp34>
eller
<FRAMESET COLS="1*, 250, 3*" CLASS=eva>
Onload och onunload är s.k. inre händelser och används tillsammans med ett skript. Vad som händer beror på de parametrar som uppgivits i skriptet. Onload orsakar en händelse när alla ramar inuti ett FRAMESET har laddats och onunload när dokumentet är borttaget från ett fönster eller en ram.
FRAME och dess attribut
Du ska ha så många FRAME-element som det finns ramar specificerade i det aktuella setet. Varje ram/dokument-par markerar du med taggen <FRAME>. Sluttaggen saknas.
Dokumenten tilldelas följande ramar: dokument enligt det FRAME-element (i exemplet inneh.html) visas i den ram som först specificeras i FRAMESET (i exemplet 25%), dokument enligt det FRAME-element (i exemplet hej.html) visas i den ram som näst specificras i FRAMESET (i exemplet 75%) osv.
Genom att namnge ramar (attributet NAME) kan du senare lätt target dem, dvs hänvisa underordnade dokument till specifika ramar genom att uppge deras namn (se dokument B).
Attribut i <FRAME>
Med attribut tilldelade elementet FRAME kan du specificera i detalj hur varje enskild ram ska se ut. Attributen skrivs i starttaggen och åtskiljs med ett mellanslag. Elementet tar följande attribut:
ID, CLASS, STYLE, TITLE (se <FRAMESET>)
SRC - hänvisar till den plats där dokumentet som ska laddas i den aktuella ramen finns
<FRAME SRC="css.html">NAME - namnger den aktuella ramen
<FRAME SRC="css.html" NAME=display>FRAMEBORDER - ritar en ram runt den aktuella ramen. Värdena kan vara 1 eller 0. Värdet 0 ritar inga ramar. På så sätt kan du skapa FRAMES med osynliga ramar.
<FRAME SRC="css.html" NAME=display FRAMEBORDER=0>MARGINWIDTH - justerar avstånd mellan ramens innehåll och dess högra och vänstra marginal. Värdet uppges i pixlar som måste vara större än 1.
MARGINHEIGHT - justerar avstånd mellan ramens innehåll och dess topp- och bottenmarginal. Värdet uppges i pixlar som måste vara större än 1.
NORESIZE - talar om att ramens storlek ska inte ändras. Värdet är samma som attribut och behöver inte uppges. NORESIZE=noresize. Därför skriver du enbart:
<FRAME SRC="css.html" NAME=display FRAMEBORDER=0 NORESIZE>SCROLLING - specificerar rullningslistinformation. Värdena är:
- auto - standardvärdet som inte behöver uppges och som förser ramen med en rullningslist om en sådan behövs
- yes - ramen kommer alltid ha en rullningslist
- no - ramen kommer aldrig ha en rullningslist
LONGDESC (long description) - för en längre beskrivning av ramens innehåll som kan användas av icke visuella www-klienter. Värdet hänvisar till en adress där sådan beskrivning finns
<FRAME SRC="css.html" NAME=display LONGDESC="rambeskrivning.html">
NOFRAMES och dess attribut
Detta element använder du för att förse www-klienter utan FRAMES-stöd med någon form av innehåll. Om elementet inte finns kommer besökaren få ett felmeddelande, t ex "För att komma åt detta dokument behöver du ha en www-klient med FRAMES-stöd". Om elementet finns kommer besökaren se det innehåll du har skrivit.
Elementet markerar du med starttaggen <NOFRAMES> och slutar med </NOFRAMES>. Båda är obligatoriska. Elementet får innehålla alla element som normalt finns i dokumentets kropp inklusive BODY.
<NOFRAMES>
innehåll
</NOFRAMES>
eller
<NOFRAMES>
<BODY>
innehåll
</BODY>
</NOFRAMES>
Innehåll i elementet NOFRAMES bestämmer du själv. Jag skulle dock inte rekommendera dig att skriva "Your browser doesn't support frames. Please download ....." då det retar väldig många användare.
Personligen skulle jag hellre se innehåll av inneh.html som innehåll i elementet NOFRAMES. Varför tala om för mig något som jag redan vet? Därför tar jag (och många andra) sådana meddelanden som en ohövlig fingervisning.
Då inneh.html kommer med största sannolikhet hänvisa till några specifika ramar skulle jag skapa ett nytt dokument, utan attributen target och name och använda detta som innehåll i elementet NOFRAMES.
Ha även i åtanke att i www-klienten Opera finns en möjlighet att stänga av frames och de flesta som använder denna klient utnyttjar detta alternativ. Därför blir de bara irriterade när FRAMES nämns överhuvudtaget.
Du bör även förse dokumentet med väl synliga länkar till "fria från frames"- dokument så att även användare utan "Stäng av frames"-möjligheten kan ha tillgång till dem. Bara därför att min www-klient stödjer frames behöver inte betyda att jag vill använda dem.
Attribut i <NOFRAMES>
Elementet tar följande attribut:
ID, CLASS, STYLE, TITLE (se <FRAMESET>)
DIR (text riktning) med värden RTL eller LTR
RTL (right to left) höger till vänster eller
LTR (left to right) vänster till höger, t ex <noframes dir=rtl>. Om inget attribut uppges gäller standardvärdet LTR. Detta attribut är användbart om texten innehåller t ex arabiska ord som skrivs åt "fel håll".- LANG (language - språk)
Med detta attribut kan du specificera språk som användes. Värdet uppges oftast som en två-bokstavs-språkkod t ex sv för svenska eller en för engelska, t ex <NOFRAMES LANG=sv>. Hela listan med språkkoder finns i ISO 639 som kan hittas på http://www.oasis-open.org/cover/iso639a.html.
Följande attribut använder du tillsammans med ett skript. De är s.k. inre händelser som sker först när besökaren har uppgivit något slags av kommando antingen med musen eller tangentbordet. Det som händer beror på de instruktioner som skriptet innehåller.
- onclick - händelse sker när pekdonet klickas på ett element
- ondblclick- händelse sker när pekdonet dubbelklickas på ett element
- onmousedown - händelse sker när när pekdonet trycks över ett element
- onmouseup - händelse sker när när pekdonet släpps från ett element
- onmouseover - händelse sker när pekdonet flyttas över ett element
- onmousemove - händelse sker när pekdonet flyttas då den befinner sig över ett element
- onmouseout - händelse sker när pekdonet flyttas från ett element
- onkeypress - händelse sker när pekdonet trycks och släpps
- onkeydown - händelse sker när pekdonet trycks ner över ett element
- onkeyup - händelse sker när pekdonet släpps över ett element
