Frames

1. Frames

Det som tillkom i HTML 4.0 standarden var frames, eller ramar som det heter på svenska. Denna teknik har stöd från och med Netscape 2.0 och Internet Explorer 3.0

När vi använder ramar delar vi egentligen upp bildskärmen i olika delar och dessa består av separata och helt skilda sidor, exempelvis link.html, banner.html och huvudsidan.html. Dessa tre html-dokument kan synas samtidigt på bildskärmen genom tekniken med ramar. Fastän det är olika sidor, ser vi dem som en enhet på bildskärmen.

Med lite teknik kan vi ha en samling länkar på en sida till vänster på bildskärmen och när vi klickar laddas sidorna till höger, utan att länksidan laddas om och länksidan kommer hela tiden att ligga fast och stilla.

2. Kodstrukturen

Det vi gör först och främst är att skapa själva sidan med "ramstrukturen". Den innehåller HTML-stommen (utom BODY) och de koder som behövs för att dela upp bildskärmen i lämpliga delar. Här infogar vi alltså inga bilder, bakgrundsfärger eller text. Detta skall istället vara med på de sidor som senare skall ingå i de respektive delarna.

När vi skapar frames ersätts body med andra koder, nämligen frameset. Med denna kod kan vi benämna vilken storlek de enskilda delarna av bildskärmen skall ha. I koden frames anger vi sedan vilka sidor dessa enskilda delar skall innehålla.

Nedan följer exempel på en enkel kodstruktur med frames. Observera att när vi sparar detta, skall det sparas som index.html eller index.htm om sidan skall vara en "startsida".

<html> <head> <title>Frames</title> </head> <frameset cols="200,*"> <frame src="links1.html"> <frame name="Huvud" src="ljusbla.html"> </frameset> </html>

Vad har vi nu gjort? Med frameset delar vi upp bildskärmen i olika stora delar och med koden <frameset cols="200,*"> har vi delat upp denna i två delar. En del till vänster som är 200 pixlar bred och en del till höger som genom tecknet * kommer att täcka hela den återstående sidan. En bildskärm är inte enbart 200 pixlar bred, det vet vi, men vi vet inte hur många pixlar som behövs för den andra delen. Det är nämligen helt beroende av mottagarens teknik och varierar alltså från mottagare till mottagare. Hade jag använd procent, hade det inte varit svårt att lista ut hur många procent den högra delen skulle ha, om den vänstra delen hade 15%. Emellan delarna går en vertikal ram som skiljer dem åt. I delen till vänster har vi placerat sidan links1.html. Detta är gjort genom koden <frame src="links1.html">. Ordet src heter på engelska source och betyder källa.

Jag hade kunnat ange det i procent istället och då hade det blivit koden <frameset cols="15%,85%"> alternativt <frameset cols="15%,*">. Anledningen till att jag valde pixlar är att ramarna inte i lika stor utsträckning kommer att vara beroende på mottagarens bildskärm, utan ramarna ligger där de ligger. Man kommer alltså att kunna skapa en mycket fastare struktur med pixlar.

Den högra delen av bildskärmen har jag döpt till Huvud genom koden frame name="Huvud". Detta namn blir en vägvisare för länkarna, ett namn som visar vart de skall laddas. Se mer om detta ämne längre ner i avsnitt 8. När sidan laddas, kan det vara bra att det redan finns en "förvald" sida placerad där. I detta fall placerade jag in sidan ljusbla.html. Denna del kan givetvis heta andra saker än just Huvud och det är du som avgör detta.

Om vi döper sidan med ramstrukturen till index.html och lägger ut den på Internet, är det dessa sidor som kommer fram först. Om vi vill att någon annan sida än links1.html eller ljusbla.html skall vara förvald, är det bara att ändra i koden.

3. Nestlade frames

I exemplen ovan har vi bara delat in bildskärmen i antingen vertikala eller horisontella delar. Men om vi vill kombinera dessa tekniker måste vi skapa "nestlade" frames.

Studera sättet nedan att bygga upp koden på. Under respektive bild ger jag HTML-koden för denna:

Figur 1

Ram

<html> <head> <title>Frames</title> </head> <frameset cols="200,*"> <frame name="Left" src="lankar.html"> <frameset rows="150,*"> <frame name="Top" src="rubrik1.html"> <frame name="Huvud" src="ljusbla.html"> </frameset> </frameset> </html>

Figur 2

Ram

<html> <head> <title>Frames</title> </head> <frameset rows="180,*"> <frame name="Top" src="rubrik1.html"> <frameset cols="100,600,*"> <frame name="Left" src="lankar.html"> <frame name="Huvud" src="ljusbla.html"> <frame src="green.html"> </frameset> </frameset> </html>

I det första figuren började vi med att dela upp bildskärmen i en del till vänster och i en del till höger. Den vänstra delen tar upp 200 pixlar av ytan, medan den högra tar upp resterande del. Sedan delade vi upp bildskärmen en gång till, denna gång i en övre del och en undre. Den övre delen tar upp 150 pixlar och den undre resterande del.

I figur 2 delade vi först upp bildskärmen i en övre (180 pixlar) och en undre del (resterande antal pixlar). Sedan fortsatte vi att dela upp den i tre delar, en del till vänster (100 pixlar), en del i mitten (600 pixlar) och en del till höger (resterande antal pixlar).

Genom frame src anger vi sedan vilka sidor de de olika delarna skall innehålla.

4. Gör ramarna helt osynliga

Ibland ser det bra ut att ha med listerna som skiljer delarna åt, men ibland ser det bara fult ut. Då kan det vara bra att kunna ta bort dem, eller rättare sagt att göra dem helt osynliga.

I frameset skriver vi attributen frameborder="0" och border="0", så försvinner ramen helt. Det senare attributet är ett måste om sidorna är färgade, annars blir det en ful vit skarv där ramarna varit.

5. Egenskaper för rullningslisterna

Om innehållet på någon sida är tillräckligt stort kommer rullningslister automatiskt att synas och vi kan "scrolla" sidan upp och ner.

I vissa fall kan det faktiskt vara bra att ta bort dessa. Det kan vi göra genom att i frame skriva attributet scrolling="no". Attributet kan också ha värdet "yes" och kommer då att synas vare sig det behövs eller inte. Värdet "auto" behövs egentligen inte skrivas, då detta är det förvalda, d.v.s att rullningslisterna kommer att synas om de behövs.

I exemplet nedan har jag lagt in scrolling="no" i den första frame -koden.

6. För äldre webbläsare

Det är inte alla mottagare som har teknik som stöder frames och därför kan de inte se våra sidor som vi skapat. Då kan det vara bra att lägga in ett meddelande till dem i HTML-koden och detta sker genom noframes.

När vi använder noframes kan vi också använda body. Webbläsare som inte klarar av att tolka övriga koden, kan dock läsa vad som står här inom och det meddelande vi skriver. Vi skulle kunna tala om varför de inte kan läsa sidan, vad de kan göra åt saken eller varför inte inom dessa taggar skapa en hel sida utan frames! Här skulle i så fall vara det enda stället i "ramstruktur-sidan" där vi kan lägga in bilder, text och bakgrundsbilder m.m.

noframes koden placeras alltid inom frameset och koden skulle kunna se ut så här:

<html> <head> <title>Sidor med frames</title> </head> <frameset rows="180,*"> <frame src="rubrik1.html" scrolling="no"> <frameset cols="600,100,*"> <frame src="lankar.html"> <frame name="Huvud" src="ljusbla.html"> <frame src="green.html"> </frameset> <noframes> <body> Du kan tyvärr inte läsa denna sida, för din webbläsare stödjer inte denna teknik. Men du kan ladda hem en senare version gratis hos <A HREF=http://www.netscape.com>Netscape</A> eller hos <A HREF=http://www.microsoft.com>Microsoft</A> </body> </noframes> </frameset> </html>

7. Flyttbara eller fasta ramar?

Väljer vi att låta ramarna vara synliga i besökarnas bildskärmar, är standardinställningen att de själva kan flytta på dem. Det sker på så sätt att de klickar med musknappen på ramen och drar den till önskat läge. Detta är en funktion som vi kan välja ta bort och istället låta ramstrukturen ligga fast. Detta sker genom att lägga till attributet norsize i koden frame.

En kod skulle kunna se ut så här: <frame src="utbildning.html" norsize>

8. Ladda sidorna i rätt del

Nu har jag gått igenom många viktiga saker när det gäller frames. Nu återstår kanske det viktigaste, nämligen att ladda sidorna i rätt del. Utgå ifrån avsnitt 3 och figur 1 inkl. koden. Sidan med länkarna placerade vi på vänster sida. Där kan vi dirigera vart sidorna skall laddas, nämligen i delen "Huvud". Länksidan och sidan med rubriken ligger fast och laddas inte om igen, när vi klickar på länkarna. Den enda som rör sig är delen Huvud.

Koden för länksidan kan se ut så här:

<html> <head> <title>Länkar</title> <base target="Huvud"> </head> <body bgcolor="#009c31" text="#000000"> <font face="Verdana" size="3"> <table border="0"> <tr> <td> <b>LÄNKAR</b> <br> <br> <a href="ljusbla.html">En ljusblå sida</A> </tr> <tr> <td> <a href="morkbla.html">En mörkblå sida</a> </tr> <tr> <td> <a href="vit.html">En vit sida</a> </tr> <tr> <td> <a href="green.html">En grön sida</a> </tr> </table> </font> </body> </html>

Observera att jag inom head-sektionen använt koden <base target="Huvud"> Denna konstruktion måste alltid stå inom denna sektion. När jag gör så här, slipper jag att för varje länk ange vart den skall laddas och jag spar mycket tid. Detta gäller om alla länkar leder till samma ställe. target betyder mål och med detta menas målet för länkarna, vart de skall laddas och i vårt exempel var det i delen "Huvud". Kom ihåg att det var en bildskärmsdel vi döpte till detta namn!

Kika gärna på delen i HTML-Guiden som handlar just om länkar, om du är osäker. Där beskriver jag hur man gör både interna och externa länkar, samt länkar via bilder.

Har du en länk som leder till en helt annan webbplats, en extern länk, är det inte lyckat att låta denna laddas inom delen "Huvud". Det kommer att se fult ut. Ett sätt är att skriva koden: <a href="http://www.stefandahlen.com" target="_top"> och länken laddas i en hel separat bildskärm.





kontakt	© Stefan Dahl�n	S�ndag 5:e februari 2012