Att använda Ramar (Frames) på en Internet web-sida

Ramar (Frames)

Ramar är ett sätt att organisera och strukturera innehållet i ett HTML dokument genom att dela upp webb-läsarens fönster i två eller flera ramar. Ramar kräver en modern webb-läsare. Man måste skapa tre HTML-dokument (minst) för att visa en sida med ramar: ett huvud-dokument och ett dokument för varje ram som web-sidan innehåller.

HTML kommandona FRAMESET och FRAME används för att skapa ramar. För varje ram, specificeras ett "vanligt" HTML dokument med text, bilder, länkar m.m. som innehåll.

Ett vanligt exempel av användande av ramar är att visa innehållsförteckning i en ram och själva innehållet i en annan.

Innehållsförteckning

Del 1: Kommando och deras attribut

FRAMESET
FRAME
NOFRAMES
A

Del 2: Exempel

Två ramar
Tre ramar
Tre osynliga ramar med namn

FRAMESET

<FRAMESET>...</FRAMESET>: Detta är huvud-behållaren för en ram. Innanför FRAMESET ska man ha två eller fler FRAME kommandon eller kanske FRAMESET kommandon för att bygga upp denna ram.
<FRAMESET ROWS="..." eller COLS="...">: Detta kräver en lista av värden, en för varje ram, separerade med kommatecken. Dessa bestämmer ramens storlek i pixlar eller som ett procenttal av fönsterstorleken. Tecknet * används för att precisera "det som är kvar av fönstret". Exempel:
<FRAMESET COLS="20%,*">
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">: Osynliga Ramar: Internet Explorer och Netscape har olika metoder för att skapa osynliga ramar. För att fungera på alla webb-läsare använd:
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">

FRAME

<FRAME SRC="URL">: Detta är kommandot för att infoga en ram. SRC attributen måste användas för att specificera var ramen finns.
Exempel: <FRAME SRC="welcome.html">
<FRAME NAME="ram-namn">: NAME attributen används för att döpa en ram så dens innehåll kan ändras via länkar, genom att använda <A HREF="URL" TARGET="ram-namn"> Detta gör man vanligtvis ifrån ett annat dokument i samma "FRAMESET". Ett namn måste börja med en bokstav eller en siffra. Använd inte ÅÄÖ.
<FRAME SCROLLING="yes" el. "no" el. "auto">: Denna attribut används för att bestämma utseendet på rullisten.
<FRAME NORESIZE>: Om denna attribut används, kan användaren inte ändra ramarnas storlek genom att dra på ramen med musen.

NOFRAMES

<NOFRAMES>...</NOFRAMES>: Om en webb-läsare stöder ramar ignoreras innehållet av <NOFRAMES>. Om den ej stöder ramer, då visas innehållet av <NOFRAMES> och istället ignoreras <FRAMESET> och <FRAME>.

A

<A HREF="URL" TARGET="ram-namn">...</A>: För att specifisera vilken ram en länk ska laddas i används TARGET attributen. Finns vissa specialnamn av betydelse som alltid börjar med '_'. Använd TARGET="_top" för att ladda länken i huvudramens fönster. Använd TARGET="_parent" för att ladda länken i den FRAMESET som innehåller denna länk. Om man ej använder sig av attributen TARGET=, kommer dokumentet att visas i den ram som innehåller länken.

I följande exempel skapas länkar som visar antingen vov.html eller mjau.html i ramen som heter "text":

<A HREF="vov.html" TARGET="text">Hundar</A>
<A HREF="mjau.html" TARGET="text">Katter</A>

Två ramar

För att dela upp fönstret i två lika stora ramar och fylla dessa med olika dokument kan följande exempel av ett HTML dokument användas:

Filen RAM2.HTML

<HTML>
<HEAD>
<TITLE>VÅRT FRAME EXEMPEL</TITLE>
</HEAD>
<FRAMESET COLS="50%,*">
<FRAME SRC=dok1.html>
<FRAME SRC=dok2.html>
</FRAMESET>
</HTML>

Filen DOK1.HTML

<HTML>
<BODY>
Denna fil heter dok1.html.<BR>
Den har bara fem rader.<BR>
Den har bara fem rader.<BR>
Den har bara fem rader.<BR>
Den har bara fem rader.<BR>
</BODY>
</HTML>

Filen DOK2.HTML

<HTML>
<BODY>
Denna fil heter dok2.html.<BR>
Fönstret har delats i ramar.<BR>
Du kan använda musen för att ändra storleken<BR>
- bara dra, men detta blir bara tillfälligt.<BR>
Klicka <A HREF="htmldoc5.html" TARGET="_top">här</A> för att komma till html kursen.<BR>
Obs! länken har attributen TARGET="_top".<BR>
Klicka <A HREF="htmldoc5.html">här</A> för att komma till html kursen.<BR>
Warning! länken har inte attributen TARGET="_top".<BR>
</BODY>
</HTML>

Sidan kommer att se ut så här i din webb-läsare....

Denna fil heter dok1.html.
Den har bara fem rader.
Den har bara fem rader.
Den har bara fem rader.
Den har bara fem rader.

Denna fil heter dok2.html.
Fönstret har delats i ramar.
Du kan använda musen för att ändra storleken
- bara dra, men detta blir bara tillfälligt.
Klicka här för att komma till html kursen.
Obs! länken har attributen TARGET="_top".
Klicka här för att komma till html kursen.
Warning! länken har inte attributen TARGET="_top".

Klicka här för att se sidan.

I detta exempel specificerar attributen COLS= i kommandot FRAMESET vidden av ramarna. Vidden av den första ramen är 50% av fönstret. Vidden av den andra ramen är satt till asterisk (som betyder "det som är kvar av fönstret"). Notera att dokumentet ej innehåller ett BODY kommando, vilket beror på att dokument som definierar ramar har inget innehåll. Istället används attributen SRC= i varje FRAME kommando som specificerar ett dokument med innehåll. I vårt exempel är dok1.html och dok2.html filerna innehållet av ramerna.

Fönstret kan delas in i rader likaväl som i kolumner genom att använda attributen ROWS=. Vidare kan man dela individuella rader i rader och kolumner genom att använda kommandot FRAMESET innanför ett annat FRAMESET kommando.

Tre ramar

Följande exempel visar hur man delar ett fönster i två rader där den sista raden är delad i två kolumner:

Filen RAM3.HTML

<HTML>
<HEAD>
<TITLE>FRAMSET innanför FRAMSET</TITLE>
</HEAD>
<FRAMESET ROWS="10%,*">
<FRAME SCROLLING=NO SRC=dok0.html>
<FRAMESET COLS="20%,*">
<FRAME SRC=dok1.html>
<FRAME SRC=dok2.html>
</FRAMESET>
</FRAMESET>
</HTML>

Filen DOK0.HTML

<HTML>
<BODY>
<CENTER><FONT SIZE=+2><B>EXEMPEL AV RAMAR</B></FONT></CENTER>
</BODY>
</HTML>

Sidan kommer att se ut så här i din webb-läsare....

EXEMPEL AV RAMAR
Denna fil heter dok1.html. Den har bara fem rader. Den har bara fem rader. Den har bara fem rader. Den har bara fem rader.	Denna fil heter dok2.html. Fönstret har delats i ramar. Du kan använda musen för att ändra storleken - bara dra, men detta blir bara tillfälligt. Klicka här för att komma till html kursen. Obs! länken har attributen TARGET="_top". Klicka här för att komma till html kursen. Warning! länken har inte attributen TARGET="_top".

Klicka här för att se sidan.

I detta exempel används SCROLLING=NO för att tala om för webb-läsare att inte visa bläddringslisten i den första ramen. Görs ej detta, visas en bläddringslist om hela innehållet av ramen ej får plats (annars kommer man inte kunna läsa slutet av innehållet).

En viktig funktion i kommandot FRAME är attributen NAME=. Denna ger varje ram ett eget namn. Man använder sedan detta namn när man skapar länkar som ska visa ett dokument i en viss utvald ram. För att skapa en sådan länk används attributen TARGET= i kommandot A. Om man ej använder sig av attributen TARGET=, kommer dokumentet att visas i samma ram som länken finns i. Ska länken visas i hela fönstret, och ej bara i en ram, ska attributen TARGET="_top" användas.

Tre osynliga ramar med namn

I följande exempel har vi gett varje ram sitt eget namn och gjort ramarna osynliga:

Filen RAM4.HTML

<HTML>
<HEAD>
<TITLE>FRAMSET innanför FRAMSET</TITLE>
</HEAD>
<FRAMESET ROWS="10%,*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME SCROLLING=NO SRC=dok0.html NAME="rubrik">
<FRAMESET COLS="20%,*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME SRC=dok1.html NAME="index">
<FRAME SRC=dok2.html NAME="text">
</FRAMESET>
</FRAMESET>
</HTML>

Sidan kommer att se ut så här i din webb-läsare....

EXEMPEL AV RAMAR
Denna fil heter dok1.html. Den har bara fem rader. Den har bara fem rader. Den har bara fem rader. Den har bara fem rader.	Denna fil heter dok2.html. Fönstret har delats i ramar. Du kan använda musen för att ändra storleken - bara dra, men detta blir bara tillfälligt. Klicka här för att komma till html kursen. Obs! länken har attributen TARGET="_top". Klicka här för att komma till html kursen. Warning! länken har inte attributen TARGET="_top".

Klicka här för att se sidan.

Uppdaterad 19:e november 2000