Frames var från början en specifik funktion för Netscape, men stöds idag även av Internet Explorer. Frames ingår inte i HTML 3.2, men finns med som standard i HTML 4.0.
Med hjälp av frames kan man visa många olika sidor samtidigt i web-läsarens fönster, i princip hur många som helst. På detta sätt kan man göra nya smarta menysystem på webben där det exempelvis är möjligt att hålla en del av web-läsarfönstret med viktiga länkar, eller en innehållsförteckning, helt stilla samtidigt som man kan rulla en text i en annan del av fönstret upp och ned. En frame skulle på svenska kunna kallas en ram.
Man kan som sagt dela in web-läsarfönstret i olika ramar, och varje ram kan innehålla ett eget HTML-dokument. För att detta ska fungera krävs att sidan fortfarande har en HTML-fil som principiellt utgör själva sidan. Men i dess HTML-kod finns egentligen bara de skellettaggar som delar upp sidan i ramar. Själva innehållet i sidan finns i fristående HTML-filer. Lägg märke till att vi talar om en web-sida, trots att sidan i sin tur anropar andra HTML-filer. När toppdokumentet och alla frames har laddats ner, går det fort att hoppa mellan de olika dokumenten - betydligt fortare än om varje dokument laddats ner för sig.
Nackdelar med frames är att en del användare har webbläsare som inte stöder frames. Nedladdningstiden blir längre eftersom det är många dokument som ska sökas upp och laddas ner. Sidan med FRAMES-kommandon får en egen adress, men sidans frames får det inte eftersom de inte räknas som självständiga sidor. Varje ruta tar upp plats på användarens skärm. De frames som inte innehåller dokument bör man försöka hålla så små som möjligt.
När man ska bygga upp en sida med ramar gör man en HTML-fil vars kropp ersätts av beskrivningen för hur web-fönstret ska delas upp. Där ska alltså inte <BODY> och </BODY> finnas.
Man kan antingen dela upp en ram i flera kolumner eller rader. Dessa rader och kolumner kommer sedan i sig att bli egna ramar. Systematiskt inleds en uppdelning av en ram med starttaggen <FRAMESET> och avslutas med </FRAMESET>.
Starttaggen ska ha attributet COLS om man vill dela upp ramen i
kolumner och ROWS om man istället vill ha rader. Efter attributet
anger man hur stor del av ramen respektive rad eller kolumn ska uppta.
Tänk dig att du har en ram som du vill dela upp i två kolumner, den
vänstra ska uppta 20% av ramens bredd och den andra 80%.
Då skriver du:
|
<FRAMESET COLS="20%,80%"> ... </FRAMESET> |
|
På samma sätt, om du har en ram som du vill dela upp i fyra rader där den första ska ta upp 20% av ramens bredd, den andra 15%, den tredje 30% och den fjärde 35%, skriver du:
|
<FRAMESET ROWS="20%,15%,30%,35%"> ... </FRAMESET> |
|
Lägg märke till att du får så många ramar som du begär efter
attributen COLS och ROWS, och helst ska det totala procentantalet bli
100. Om inte får web-läsaren göra det bästa av situationen, och fylla
ut utrymmet bäst det går. Ett annat sätt att bestämma storleken på
fönstret är att ange storleken i pixlar, Man kan också med fördel
använda sig av värdet ":*". Om man till exempel ska ha en
sida bestående av två kolumner skriver man <FRAMESET
COLS="120,*">. Detta innebär att den första kolumnen får en
bredd på 120 pixlar och att den andra kolumnen fyller upp resten av
sidan. Skriver man
<FRAMESET COLS="*,*,*"> delas
sidan upp i tre lika stora fönster, vilket även
"33%,33%,33%" gör.
Användaren kan själv ändra dimensionerna på de olika ramarna genom att med musen dra i marginallinjerna mellan dem.
Inuti <FRAMESET>-taggarna talar man sedan om, i tur och ordning för alla ramar, vilken web-sida som ska visas i respeltive ram. Detta sker med taggen <FRAME> som alltid tar attributet SRC som sätts till en URL (kan vara en relativ sådan).
Med märket <!DOCTYPE> berättar man vilken typ ett dokument är. Vanliga HTML-dokument måste innehålla ett huvud och en kropp, men dokument med <FRAMESET> har ingen kropp. För att markera det ska alla sådana dokument börja med märket:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
Det är viktigt att komma ihåg att användare av vissa web-läsare inte kan se dina ramar. All information finns inuti taggarna <FRAMESET> och <FRAME>. Andra web-läsare än Netscape Navigator 2 och Microsoft Internet Explorer 3 (eller senare), förstår dem inte och struntar därför i dem helt och hållet-resultatet blir därför en helt tom sida.
För att visa en web-sida för dessa finns ett knep. Skriv den HTML-kod som ska visas för dem inuti de nya <NOFRAMES> och </NOFRAMES>-taggarna. Visserligen förstår inte web-läsarna de taggarna heller, men det som finns mellan dem visas i alla fall. Poängen är att web-läsare som kan visa ramar struntar i allting mellan <NOFRAMES> och </NOFRAMES>.
Exempel på ROWS och NOFRAMES:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="content.htm">
<FRAME SRC="start.htm">
<NOFRAMES>
<H2>Välkommen till min hemsida</H2>
Du har en web-läsare som inte kan visa frames.
För dig har jag en
<A HREF="noframes.htm">alternativ
sida/A utan frames.
</NOFRAMES>
</FRAMESET>
</HTML>
| Resultatet blir att fönstret delas upp i två rader. Den ena raden utgör 20% av fönstrets bredd, den andra 80%. |
|
<FRAME> kan ta många fler attribut än SRC. MARGINHEIGHT talar om vilken höjd marginallinjerna mellan ramarna ska ha räknat i bildpunkter. På samma sätt fungerar attributet MARGINWIDTH, fast med marginallinjernas bredd istället.
Om man inte vill att nätsurfaren ska kunna dra i kanterna och ändra ramarnas storlek ger man <FRAME> attributet NORESIZE.
Vanligtvis dyker det upp rullningslistor i en ram om den är för stor för att få plats i sin helhet. Attributet SCROLLING bestämmer hur detta ska fungera. Om man sätter det till SCROLLING="no" kommer inte några rullningslister att visas. SCROLLING="yes" visar dem alltid och SCROLLING="auto" låter web-läsaren bestämma själv, vilket är lämpligast.
Attributet FRAMEBORDER, kan antingen anta värdet 1 eller också 0. Med FRAMEBORDER=0 innebär det att kanten runt själva ramen försvinner helt. Det här är ett attribut där Navigator och Internet Explorer fungerade olika tidigare. I Navigator hade man värdena "yes" och "no", men man valde Microsoft lösning 1 eller 0 för HTML 4.0-standarden.
Netscape har ytterligare två attribut. BORDER, som avgör hur tjock ramen ska vara. Förvalt värde är 5. BORDERCOLOR, avgör vilken färg som ramen ska ha. Värdet anges precis som andra färger. BORDERCOLOR fungerar nu även i Internet Explorer 4.0.
<FRAME SRC="resor.htm" SCROLLING="yes" MARGINHEIGHT=5 MARGINWIDTH=20 NORESIZE>
För att ändra innehåll i en ram säger man till den att den ska visa något annat istället. Alltså måste den ha ett slags namn, så att det går att skilja på de olika ramarna. Ge därför varje ram som du vet att du någon gång tänker byta innehåll i ett lämpligt namn med hjälp av <FRAME>-taggens attribut NAME.
<FRAME SRC="link.htm" NAME="huvud"> <FRAME SRC="start.htm" NAME="text">
En vanlig användnig av ramar är att skapa en ram där några viktiga länkar alltid syns. Bredvid kan text finnas i en annan ram. Genom att klicka på länkarna kan man enkelt byta innehåll i ramen med texten. Hur åstadkommer man det?
Du har förstås till att börja med namngivit den ram vars innehåll du vill ändra. Det enda du nu behöver göra är att ändra länkarna en smula. En länk som innebär att ramen med namnet text ska byta innehåll till filen welcome.htm skrivs.
<A HREF="welcome.htm" TARGET="text">Välkomstsidan</A>
Det ända nya är att taggen <A> tar det nya attributet TARGET som talar om vilken ram (baserat på det namn som definerats med NAME) som ska ändras när länken aktiveras.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>Framestest</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="content.htm" NAME="innehall"> <FRAME SRC="resor.htm" NAME="text"> <NOFRAMES>...</NOFRAMES> </FRAMESET> </HTML>
| Resultatet blir att fönstret delas upp i två kolumner. Den ena kolumnen utgör 30% av fönstrets bredd, den andra 70%. |
|
Något som ger stor frihet vid utformningen av webbsidor är att ramar delas upp i delramar. Man anger helt enkelt märket <FRAMESET> istället för ett <FRAME>-märke.
Exempel:Här nedan visas ett exempel på hur fönstret först delas upp i två rader, den understa raden delas sedan upp i två kolumner.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAMESET>
<FRAME SRC="logo.htm" NAME="huvud" SCROLLLING="no" NORESIZE>
</FRAMESET>
<FRAMESET COLS="30%,70%">
<FRAME SRC="content.htm" NAME="innehall" SCROLLING="auto" NORESIZE>
<FRAME SRC="resor.htm" NAME="text" SCROLLING="yes"
MARGINHEIGHT=5 MARGINWIDTH=20 NORESIZE>
</FRAMESET>
<NOFRAMES>
<H2>Välkommen till min hemsida</H2>
Du har en web-läsare som inte kan visa frames.
För dig har jag en
<A HREF="noframes.htm">alternativ
sida/A utan frames.
</NOFRAMES>
</FRAMESET>
</HTML>
| Resultatet blir att fönstret delas upp i två rader. Den ena raden utgör 20% av fönstrets höjd, den andra 80%. Den understa raden delas i sin tur upp i två kolumner, den ena 30% av fönstrets bredd, den andra 70%. |
|
||||
Ytterligare ett exempel:Här nedan visas ett exempel på hur fönstret först delas upp i två kolumner, den högra raden delas sedan upp i två rader.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAMESET>
<FRAME SRC="content.htm" NAME="innehall" SCROLLING="auto" NORESIZE>
</FRAMESET>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="logo.htm" NAME="huvud" SCROLLLING="no" NORESIZE>
<FRAME SRC="resor.htm" NAME="text" SCROLLING="yes"
MARGINHEIGHT=5 MARGINWIDTH=20 NORESIZE>
</FRAMESET>
<NOFRAMES>
<H2>Välkommen till min hemsida</H2>
Du har en web-läsare som inte kan visa frames.
För dig har jag en
<A HREF="noframes.htm">alternativ
sida/A utan frames.
</NOFRAMES>
</FRAMESET>
</HTML>
| Resultatet blir att fönstret delas upp i två kolumner. Den ena kolumnen utgör 30% av fönstrets bredd, den andra 70%. Den högra kolumnen delas i sin tur upp i två rader, den ena 20% av fönstrets höjd, den andra 80%. |
|
Det går att göra fler saker med ramar än att bara ändra dess innehåll. TARGET kan sättas till några mycket viktiga specialvärden, och dessa är "_top", "_blank", "_self", och "_parent".
<A HREF="annanfil.htm" TARGET="_top"> Ta bort alla ramar och visa en ny web-sida!</A>
Koden ovan tar bort alla ramar som finns i web-läsarfönstret och visar annanfil.htm istället.
<A HREF="nyfil.htm" TARGET="_blank"> Starta ett nytt web-läsarfönster!</A>
Ovanstående kod öppnar ett nytt web-läsarfönster på skärmen med nyfil.htm inladdad. Om man tidigare haft ett enda web-läsarfönster på skärmen har man alltså två efter att man följt denna länk. Detta kan upplevas som lite irriterande.
TARGET="_self innebär helt enkelt att samma ram som själva länken finns i ändras.
Ibland händer det att en ram fylls med flera nya ramar, som fylls med nya ramar m.m. TARGET="_parent är då bra, eftersom det ändrar och återgår till länkarmens "moderarm". Anvädaren kan därför "backa tillbaka" en ramnivå och bli av med några ramar på skärmen.
För att skapa "flytande" frame, som ligger inuti en vanlig webbsida, som en bild ungefär, använder man sig av märket <IFRAME>. Det här attributet var länge ett Explorer-kommando, men ingår numera i HTML 4.0-standarden. En del nya möjligheter öppnar sig eftersom man kan ladda in andra dokument i frames. Man kan lägga in en tabell t.ex. Märket kan ha samma märken som <FRAME>, det vill säga NAME, SRC, LONGDESC, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT och SCROLLING. <IFRAME> kan även ha attributet ALIGN.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H3>Märket <IFRAME><,/H3>
<P>Här nedan följer en tabell
med vägavstånd</P>
<IFRAME SRC="tabell.htm
WIDTH="400" HEIGHT=60>
</IFRAME>
</BODY>
</HTML>
|
|
||||||||||||
Ett sätt att ändra två (eller flera frames) samtidigt är att använda sig av flera indexsidor. Om man har en sida som består av tre olika frames. En sida till vänster med länkknappar till dom olika avdelningarna, kallad innehall. En sida med t.ex innehålsförteckning till de olika sidorna inom avdelningarna, kallad huvud. En sida där själva dokumenten visas, kallad text. Då kan det se ut på följande sätt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAMESET>
<FRAME SRC="content.htm" NAME="innehall" SCROLLING="auto" NORESIZE>
</FRAMESET>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="logo.htm" NAME="huvud" SCROLLLING="no" NORESIZE>
<FRAME SRC="resor.htm" NAME="text" SCROLLING="yes"
MARGINHEIGHT=5 MARGINWIDTH=20 NORESIZE>
</FRAMESET>
<NOFRAMES>
<H2>Välkommen till min hemsida</H2>
Du har en web-läsare som inte kan visa frames.
För dig har jag en
<A HREF="noframes.htm">alternativ
sida/A utan frames.
</NOFRAMES>
</FRAMESET>
</HTML>
| Resultatet blir att fönstret delas upp i två kolumner. Den ena kolumnen utgör 30% av fönstrets bredd, den andra 70%. Den högra kolumnen delas i sin tur upp i två rader, den ena 20% av fönstrets höjd, den andra 80%. |
|
I sidan innehall finns fyra knappar med länkar till de olika avdelningarna. Koden för sidan ser ut på följande sätt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Innehållssida</TITLE>
</HEAD>
<BODY BACKGROUND="bground/sunset.jpg">
<A HREF="index.htm" TARGET="_top"><IMG SRC="buttons\start.jpg" ALT=""
BORDER=0 VSPACE=2 HSPACE=0></A><BR>
<A HREF="indx2.htm" TARGET="_top"><IMG SRC="buttons\resor.jpg" ALT=""
BORDER=0 VSPACE=2 HSPACE=0></A><BR>
<A HREF="indx3.htm" TARGET="_top"><IMG SRC="buttons\e-mail.jpg" ALT=""
BORDER=0 VSPACE=2 HSPACE=0></A><BR>
<A HREF="indx4.htm" TARGET="_top"><IMG SRC="buttons\links.jpg" ALT=""
BORDER=0 VSPACE=2 HSPACE=0></A><BR>
</BODY>
</HTML>
Det som händer när man trycker på en av knapparna är att man kommer till en ny sida som innehåller tre ramar med samma propertioner. Sidan content i ramen innehall är densamma, men innehållet i ramarna huvud och text ändras.
Ett annat sätt att åstadkomma detta är att använda sig av ett javascript som klarar av att ändra innehållet i två ramar samtidigt.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999