Koden för Frames
Det kan vara praktiskt att använda frames, eller ramar (fönster), när
man har mycket information som kan delas upp och visas i olika ramar.
Det fungerar som så att web-sidan delas upp
i ett antal mindre ramar som man sedan kan läsa i genom att använda rullningslisterna.
Det ger användaren möjlighet att se flera sidor på en
enda sida. Detta ger (förhoppningsvis) kortare nedladdningstider och
slut på zappandet hit och dit. Det finns shareware-editorer
som klarar av att göra frames (dock oftast med dåligt resultat), det går lika snabbt att skriva
in dem manuellt i editorn.
Här ovan ser du ett exempel på hur en frame kan se ut. Startsidan (index.html) är basen. Det är här du anger med taggar/attribut hur framen ska se ut. Men startsidan är bara en tom mall. Du måste fylla upp mallen med andra html-dokument. Här ovan har jag alltså startsidan som består av index.html, sedan laddas huvud.html, sida.html och text.html in för att fylla upp framen med text och bilder. Så för en frame med tre ramar är det fyra (4) html-dokument du måste göra iordning. Tycker du det verkar svårt? Jag har förtydligat det lite mer på begäran, kika in här!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title></title>
</head>
<frameset rows="50,*">
<frame src="huvud.html">
<frameset cols="25%,*">
<frame src="sida.html" name="sida">
<frame src="text.html" name="text">
</frameset>
<noframes>
<body>
Här skriver du ett meddelande till dem som ännu inte har
en browser som klarar av frames. denna text syns bara för
dem.
</body>
</noframes>
</frameset>
</html>
Lite mer om taggarna/attributen
Frameset talar om för browsern att här ska
sidan delas upp upp i ramar.
<frameset rows="50,*">
rows="50,*" anger hur den ska delas upp, i detta exempel delas
sidan upp i två på varandra liggande fönster. Det översta
bestämt till 50, dvs 50 pixels och den andra resten av skärmen.
Men den nedersta delen kommer att döljas av de två andra
fönstrena.
<frameset cols="25%,*">
cols="25%,*" delar upp skärmen i bredvidliggande
kolumner. Här har det ena fönstret, vänster sida angetts
till 25% av skärmen och * anger att den högra kolumnen ska uppta
resten
Vilket html-dokument som ska laddas in i ramen anges via frame src="filnamn.html". Själva startdokumentet innehåller inget förutom den "mall" som anger hur sidan ska delas upp, vilka dokument som ska laddas in och eventuellt specifikationer på hur det ska se ut, se nedan.
Attributet name="huvud" ger ramen ett namn som gör det möjligt
att länka andra dokument dit.
<frame src="huvud.html" name="huvud">
Vill du inte ha några rullningslister får du i den ramen du avser lägga till
scrolling="no". Andra attribut är Yes (alltid) eller Auto (vid behov). Skriver du inget
blir det auto som är default (standard).
<frame src="huvud.html" scrolling="no">
Attributet noresize anger att fönsterramarna är fasta, finns inte detta
attribut kan listerna dras isär av användaren.
<frame src="sida.html" name="sida" noresize>
Attributen marginheight och marginwidth anger som det låter, marginalerna
inne i ramarna. Du anger det i den frame src=du vill ändringen ska synas i.
Att ange värdet till 0 är inte tillämpligt i praktiken. Ex.
<frame src="logga.html" marginheight="1" marginwidth="1">
Vill du ha en frame med eller utan kanter? Enligt HTML 4.0 Sätter du frameborder till 0 i den/de
frame src-tagg/ar som avses tar du bort "ramens kant", värden kan vara 0 eller 1.
<frame src="sida.html" frameborder="0">
Dock en reservation, en lösning som fungerar i både NS och MSIE för nuvarande och ger s.k kantlösa frames är att i yttersta frameset-taggen sätta:
<frameset rows="50,*" frameborder="0" framespacing="0" border="0">
så gäller det alla ramar i framen. Vill du se ett handgripligt exempel på en frame utan kanter som fungerar på
både IE 3.0 och Netscape? Kolla här.
Du kan ange att du vill ha en bred 3D-kant genom att ange ett antal pixlar i attributet, ex. border="10", motsvarande åstadkomms MSIE med framespacing="10".
Vill du ha en kraftig ram skriv då framespacing="10" frameborder="1" samt om du är smart lägger du till border="10" så funkar det i både NS och MSIE.
<frameset rows="50,*" framespacing="10" frameborder="1" border="10">
Vill du ha en färgad ram i Netscape skriver du
in ex. bordercolor="yellow". Och för att öka avståndet mellan ramarna
i pixels framespacing="önskad siffra".
Vill du inte ha 3D-ramar utan smala enkla kanter runt dina frames. Prova då exempelvis för ett snyggt och enkelt resultat
<frameset rows="50,*" framespacing="2" frameborder="0" border="2">
Blev det krångligt?
Förhoppningsvis kanske både NS och MSIE kan *samsas* om vilka attribut som ska gälla för frameset och frame src (HTML 4.0) så att förvirringen inte blir så total.
Taggen noframes används för att kunna visa text till de som har en
browser som inte kan tyda koderna för frames. <noframes>text till de browsers som inte kan hantera frames</noframes>
Du kan även med hjälp av att lägga in en body start- och
sluttag fixa till en snygg sida för dem utan möjlighet att se dina frames. Vem har sagt
att man måste visa upp en tråkig grå default-sida åt dem. Observera att body överhuvudtaget inte används i en frame-mall förutom då eventuellt inom noframes.
Name, namnge ramar
Förmodligen
vill du väl kunna utnyttja dina ramar maximalt genom att kunna
länka hit och dit. I exemplet ovan så
namngavs de två ramarna (via name) som skapades som två kolumner
bredvid varandra. I ramen högst upp, (row="50,*")
laddas dokumentet huvud.html in. Men jag behöver inte namnge den ramen
då inget ytterligare ska laddas in i den ramen.
Se till att du väljer namn både på dokumenten och ramarna
som underlättar för dig att hålla isär dem, ex:
<frame src="text.html" name="text">
Target
När du har kommit så här långt har du alltså
fyra HTML-dokument om du följer exemplet ovan, index.html med framemallen, huvud.html högst upp, sida.html på
vänster sida och text.html på höger sida.
Nu ska de länkas
ihop med hjälp av name och target.
Du behandlar de andra sidorna som vanligt (utom index.html). Du skriver
din text och lägger in din grafik som vanligt. Det är när
du ska länka dem som du använder attributet target i taggen a href.
Ska du länka från sida.html till en annan av dina sidor,
som i sin tur ska laddas in i fönstret du namnget som text ser det
ut så här:
<a href="din_sida.html" target="text">Länktext</A>
Klickar du på länken laddas det länkade dokumentet in i den ram du namngett till text i name i frame src.
Ska du länka till externa sidor ute på webben bör du inte länka in dem i dina ramar utan se till att länken laddas in i fullskärm.
Byt bara till
<a href="http://www.tele2.se/" target="_top">Länktext</A>
Visst kan du använda ankare inom frames (se avsnitt Text).
<a href="bilaga.html#vanligaste" target="text">titta
gärna på resultatet</A>
Här leder en klickning på texten "titta gärna på
resultatet"att dokumentet bilaga.html laddas in i fönstret text
och web-läsaren söker upp ankaret #vanligaste och stannar där.
target="namnet_du_angett_i_name" laddar in dokumentet i det valda fönstret
target="_parent" laddar in dokuemntet i ovanliggande frameset (vid nästlade frames).
target="_self" laddar in det nya dokumentet i samma fönster varifrån det länkades. Är default så om du glömmer att ange target blir det detta. Kanske inte alltid det man vill.
target="_top" laddar in i dokumentet i fullskärm ovanför dina frames (surfar ut), men genom att använda back-knappen kan man komma tillbaks till din sida. Rekommenderas om du länkar till andras sidor via din sida, det uppskattas inte av alla att bli inlänkade i andras frames.
target="_blank" laddar in det nya dokumentet i ett nytt, namnlöst fönster och dina ramar ligger kvar bakom om de stänger ned det.
Jag har tidigare sagt att det spelar ingen roll om man kodar i stora eller små bokstäver, men i just detta fall är det är stor skillnad mellan target=" _top" och target="_TOP". Så använd så som jag skrivit här, små bokstäver efter_-strecket.
För den slöa finns ett utmärkt redskap här. Om alla
länkar på en sida är av samma typ, ex target="_top"
eller target="text" kan du istället för att skriva
det efter varje länk skriva in inom head:
<base target="_top">
eller <base target="text">.
Problem, fungerar ej dina frames?
Några vanliga fel som gör att inte dina frames funkar är:
- Du har kvar en body-tagg i frame mallen. body-taggen får ENDAST finnas inom ett eventuellt noframes-alternativ.
- Antalet start och slut-taggar för <frameset> stämmer inte överens. Antalet ska vara lika, två startaggar innebär att det MÅSTE finnas två sluttaggar </frameset>.
- Du har kastat om src i name src, vanligt fel att skriva scr istället :)
- Tänk på att filnamn, name och target är case sensitiva, dvs mycket viktigt att använda samma *stavning* med små och/eller stora bokstäver.
- Har du gjort och laddat upp de html-dokument som ska LADDAS in i framen vid start?
- Har du angett rätt sökvägar till de dokument som ska laddas in?
- Blir inte dina mönsterpassade ramar bra kolla att du angett marginwidth="0" samt marginheight="0" i varje frame src samt border="0" framespacing="0" frameborder="0" i yttersta frameset-taggen. För bästa resultat bör de bilder som ska ingå i mönsterpassningen läggas in som bakgrundsfiler i respektive html-dokument.
Iframe, gubbe i lådan.
Du kan lägga en iframes mitt på sidan eller vart du nu skulle önska
ha den. Du anger storlek på den via attributen height och width.
I IE kommer en frames med scrollbars att visas på sidan där koden står. I denna
iframes kommer den filen att laddas in som du hänvisartill i src="filnamn.html". De browsers som inte stödjer detta får nöja sig med att läsa
budskapet du skriver ned mellan iframe-taggarna. Genom att ge iframen ett name kan du länka dit dokument med hjälp av target.
<iframe name="content_frame" width="200" height="200" src="filnamn.html">
Här skriver du
lite text som kommer enbart att synas i Netscape eller andra browsers som inte stödjer iframe. </iframe>
Vill du se ett exempel på iframe?
Lite exempel på olika frames
Jag har nedan sammanställt några enkla och en del mer avancerade exempel på frames.
Men givetvis täcker det ju inte alla behov.
Här finns länkar till engelska guider som behandlar frames.
Vill du ha tips på hur du skapar olika frames finns denna länk, http://www.bagism.com/frameshop/index.html samt http://www.memoro.com/frames/.
- Exempel på 4 enkla frames
- Frames i frames, nästlade ramar
- Svenska flaggan
- Web-TV
- Mönsteranpassade frames
Övning ger färdighet säger de. Öva och prova så hittar du din personliga favorit. Det är en hel vetenskap det här med frames. Men lite grann kan du nog nu efter att ha läst det här. Till sist ett tips. När du håller på och trixar och ändrar, bli inte förvånad om du inte kan se någon förändring. Ibland måste man, om inte det hjälper att trycka på CTRL + R för att ladda om sidan, starta om hela browserna så den får "läsa" in frame-mallen igen. Först då ser man sina förändringar/justeringar av ex. bredden på cols eller rows.
Hålla ihop ramarna
Ibland vill man undvika att de separata ramarna öpnnas separat av dina besökare. Ibland kan det bero på att de hamnar fel då sökmotorerna indexerat varje unik sida för sig, de tar inte hänsyn till huruvida
de tillhör ett frameset eller icke. Läs om detta under Diverse, Meta och hur du undviker att sidor indexeras av sökmotorerna. Men för att försäkra dig om att det inte händer kan du i de dokument som laddas in i ramverket lägga
till ett litet javascript som tar reda på om dokumentet ska in i ett ramverk och laddar då in din framemall istället, kika in här för att se hur det fungerar.
Här kan du även se ett exempel på hur du unviker att bli inlänkad i andras ramverk.
Att uppdatera två frames samtidigt
Ibland kanske man vill att två fönster ska uppdateras samtidigt när någon klickar på en länk. Då är ett javascript användbart, här finns ett exempel.
Vill du ha flera länkar så döper du varje funktion med ett unikt namn.
Tänk på att framen numreras uppifrån och ned, från vänster till höger och startar med 0.
En varning kan vara befogad. En del avaktiverar java/javascript
funktionen i sin läsare, och då faller ju hela konceptet.
Meny-box i frames
Det kan vara praktiskt att ha sina länkar i en meny-box, en rullgardinsmeny.
Man numrerar ramarna, se ovan Att uppdatera två frames samtidigt, uppifrån och ned, vänster till höger samt börjar med 0.
Interna länkar blir som target="frame_name", fast du skriver i koden t.ex parent.frames[2].location. Externa länkar blir som target="_top" och du skriver i koden top.location.
Så ett litet pekfinger, som vanligt :)! Tänk på att en del avaktiverar java/javascript i sina browsers. Så de kan
alltså inte följa dina länkar i detta exempel.
Frames + och -
Själv är jag numera inte så förtjust i frames, men förstår att många gillar dem. De har blivit
väldigt populära och finns även med i HTML 4.0. Det finns både + och - när det gäller frames.
Har man en hemsida som blir populär och innehåller fakta som människor antas ha behov av att skriva ut eller kommer att vilja göra bookmarks på kan det bli problem.
Många vet inte om att vid utskrift av innehållet av en ram, måste de klicka i densamma (aktivera) den för att få utskrift av innehållet i just den ramen.
Att göra bokmärke på en hemsida med frames brukar oftast innebära att man alltid hamnar på startsidan. Det finns knep och knåp för att underlätta för besökaren, besök gärna denna sida för mer information.
Artikel om frames publicerad i Internetguiden 1997