STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

Frames - dela in sidan i ramar

Koden för Frames
Taggar/Attribut
Name, namnge ramar
Target
Problem, fungerar ej dina frames?
Iframe, gubbe i lådan
Exempel på olika frames
Hålla ihop ramarna
Uppdatera två frames
Meny-box i frames
Frames + och -

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.

Ett exempel på frames

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. targetNu 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:

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/.

Ö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

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML