Frames

Med Frames kan du dela upp webbläsarens fönster i flera mindre rutor. I varje sådan ruta kan man ladda in varsin webbsida oberoende av de andra rutorna på sidan. Varje ruta kan uppdateras för sig, och varje ruta får egna rullningslister ifall det behövs.

Ett typiskt användningsområde för Frames är att ha en innehållsförteckning i en separat ruta bredvid själva webbsidan. På så vis finns innehållsförteckningen alltid tillgänglig och behöver inte laddas om varje gång användaren byter sida.

Frames fungerar inte i alla webbläsare, och därför bör man vara försiktig med att använda den här funktionen. De användare som har webbläsare som inte stöder Frames kommer att få se en helt tom sida, såvida inte webbdesignern har lagt in ett alternativt innehåll speciellt för dem.

Det finns en annan orsak till att vara restriktiv med användningen av Frames: många användare, även bland dem som har webbläsare som klarar Frames, är irriterade på funktionen och undviker sidor som är designade med Frames. Därför bör du bara använda Frames om detta verkligen tillför något av värde till din sida.

Frameset

Sidans uppdelning i rutor definieras med diverse attribut till styrkoden <FRAMESET>. Koden avslutas med </FRAMESET> och mellan dessa koder beskriver man vad de olika rutorna på sidan ska innehålla med hjälp av styrkoden <FRAME> (se nedan).

I varje ruta på sidan laddas en komplett webbsida in. Varje sådan sida är alltså ett eget HTML-dokument.

Varken styrkoderna <BODY> och </BODY> eller någon annan styrkod eller text som normalt sett placeras inom dessa koder får finnas före <FRAMESET>, annars kommer hela uppdelningen i Frames att ignoreras av webbläsaren. <FRAMESET> måste alltså komma direkt efter <HEAD> </HEAD>.

Rutuppdelning i sidled

Sidan delas upp i sidled med <FRAMESET COLS="värdelista">. I värdelistan anges uppdelningen i pixlar, i procent eller som relativa värden. De olika värdena i värdelistan separeras med kommatecken.

Fast värde: Ett värde som anges som bara ett tal tolkas som rutans bredd i pixlar. Detta är användbart om rutan ska innehålla en bild med känd storlek, men kan vara vanskligt i andra sammanhang eftersom man inte vet hur stor en pixel är på användarens skärm. Om man använder fasta värden bör man blanda dem med procentvärden eller relativa värden så att alla rutor tillsammans fyller 100% av användarens fönster.
Procentvärde: Ett tal med ett procenttecken direkt efter tolkas som rutans bredd i procent av hela fönstrets bredd. Om summan av alla procentvärden är större än 100 kommer webbläsaren att minska alla värden proportionerligt. Om summan är mindre än 100 och det finns relativa värden kommer de att få den extra platsen. Om det inte finns några relativa värden kommer alla procentvärden ökas proportionerligt.
Relativa värden: Ett ensamt *-tecken ger en ruta som är så bred som det går, efter att rutor med fast värde och procentvärde fått plats. Om det finns flera relativa värden (d.v.s. flera ensamma *-tecken) kommer den tillgängliga platsen fördelas lika mellan dem. Om det finns en siffra framför *-tecknet kommer den rutan få motsvarande utrymme. "2*,*" ger den första rutan 2/3 av utrymmet, och 1/3 till den andra.

Om COLS inte anges alls tolkas detta som att fönstret inte är uppdelat på bredden. Exempel:

<FRAMESET COLS="50%,50%"> Fönstret delas på bredden i två lika stora rutor.
<FRAMESET COLS="10%,80%,10%"> En smal ruta på vardera sidan och en bred i mitten.
<FRAMESET COLS="200,*"> En 200 pixlar bred ruta till vänster, och en så bred som fönstret tillåter till höger.

Rutuppdelning i höjdled

Sidan delas upp i höjdled med <FRAMESET ROWS="värdelista">. ROWS fungerar på samma sätt som COLS. Ofta börjar man med att dela upp fönstret på bredden med ett yttre <FRAMESET> och sedan delar man upp varje sådan ruta på höjden med flera underordnade <FRAMESET>.

Man kan också göra tvärt om; dela in på höjden först och på bredden sedan. Det är också tillåtet att dela upp på bredden och höjden samtidigt i samma <FRAMESET> detta åstadkommer ett rutnät.

Definiera rutornas innehåll och egenskaper

I varje ruta på sidan laddas en komplett webbsida in. Vilken sida som ska laddas in anges, tillsammans med några andra egenskaper, med styrkoden <FRAME>. Man bestämmer vad rutan ska innehålla, vad den ska heta, om den ska få ha rullningslister, om användaren ska få ändra storlek på den och hur breda marginaler den ska ha. <FRAME> har ingen slutkod. Till <FRAME> kan man lägga följande attribut:

SRC="url" anger webbadressen till det dokument som ska laddas in i rutan. Den anges som vanligt antingen som relativ adress eller absolut adress. Rutor som saknar SRC kommer att visas som blanka rutor i den storlek som angetts i <FRAMESET>.

NAME="rutans_namn" används för att ge en ruta ett namn så att den kan bli refererad till från länkar i andra rutor inom samma fönster. Man behöver inte ange NAME, då blir rutan namnlös. Om man vill att länkar i en ruta ska göra så att webbsidor laddas in i andra rutor måste man namnge dessa. Namngivna rutor kan adresseras med TARGET (se nedan). Ett namn måste börja med en bokstav eller siffra och får bestå av bokstäver a-z, siffror, bindstreck och understreck.

Med MARGINWIDTH="value" och MARGINHEIGHT="value" kan man ange extra marginal mellan rutans kant och innehållet i rutan. MARGINWIDTH anger marginalen åt vänster och höger medan MARGINHEIGHT anger marginalen uppåt och nedåt. Värdet räknas i pixlar. Värdet kan inte vara mindre än ett. Anges inte MARGINWIDTH och MARGINHEIGHT kommer webbläsaren själv att avgöra vilken marginal som behövs.

Normalt sett drar webbläsaren en kantlinje mellan de olika rutorna i fönstret. Med FRAMEBORDER="0" anger man att rutan inte ska ha en kant. Observera att det ändå kan bli en kantlinje, ifall angränsande ruta har kantlinje specifierad, antingen genom att ha FRAMEBORDER="1" eller genom att sakna FRAMEBORDER-attributet.

SCROLLING="yes|no|auto" anger ifall rutan ska ha en rullningslist eller ej. Anges "yes" kommer rutan alltid ha en rullningslist, anges "no" kommer den aldrig ha det, och anges "auto" kommer webbläsaren sätta in rullningslister när det behövs. Anges inte SCROLLING alls kommer webbläsaren även då att sätta in rullningslister när det behövs.

Normalt sett kan användaren ändra storleken på en ruta genom att dra rutans kant till önskat läge. Om man anger NORESIZE i <FRAME>-koden så tillåts inte detta.

Kantlinje mellan rutorna

Förutom att man kan visa eller ta bort kantlinjen mellan rutorna genom att ange attributet FRAMEBORDER till styrkoden <FRAME> (enligt ovan) tillåter också en del webbläsare att man anger attributen BORDER="0" och/eller FRAMEBORDER="0" till styrkoden <FRAMESET>. Med dessa attribut, som inte stöds av alla webbläsare, kan man även ange valfri bredd på kantlinjen, till exempel med BORDER="5".

Alternativ sida

Webbläsare som inte stöder Frames kommer att visa upp en helt tom sida, såvida inte webbdesignern har lagt in ett alternativt innehåll speciellt för dem. Detta görs mellan styrkoderna <NOFRAMES> och </NOFRAMES>. En webbläsare som hanterar Frames ignorerar allt som ligger mellan dessa styrkoder.

Var noga med att erbjuda ett vettigt alternativ här, speciellt på din webbplats framsida. Att bara skriva att besökaren har fel typ av webbläsare är oartigt. Om ditt frameset till exempel består av två rutor; en med en innehållsförteckning och en med själva sidorna så är en enkel noframes-lösning att erbjuda en länk till sidan med innehållsförteckningen. Om du har tillgång till server-side includes (se detta avsnitt) kan du rent av lägga in hela innehållsförteckningen som "include file".

Notera att man med <NOFRAMES> kan dölja innehåll för webbläsare som visar Frames, även på webbsidor som inte alls är indelade i rutor.

Kod

<HTML>
<HEAD><TITLE>Firmans fina webbsida</TITLE></HEAD>
<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="allan.html" NORESIZE NAME="left-1"> 
    <FRAME SRC="kakan.html" SCROLLING="yes" NAME="left-2"> 
  </FRAMESET> 
  <FRAMESET ROWS="33%,33%,33%"> 
    <FRAME SRC="innehall.html" NAME="right-1"> 
    <FRAME SRC="stork.html" NAME="right-2"> 
    <FRAME SRC="http://en.annan.server.se/" NAME="right-3"> 
  </FRAMESET> 
</FRAMESET> 
<NOFRAMES> 
  <BODY BGCOLOR="#FFFFFF">
    Detta är Firmans fina webbsida.<P>
    <A HREF="innehall.html">Innehållsförteckning</A>
  </BODY>
</NOFRAMES> 
</HTML>

Webbläsarens fönster delas upp i fem rutor som fylls med var sin separat webbsida.

Om besökaren använder en webbläsare som inte stöder Frames, eller en där användaren kan välja att slå av Frames-funktionen, kommer hon att se den alternativa sidan.

Styra länkar till rätt ruta

Normalt sett när en användare klickar på en länk kommer det nya dokumentet att visas i samma fönster som det förra. Detsamma gäller på en sida uppdelad i rutor. Varje ruta kan ses som ett separat fönster, och det som händer i en ruta eller ett fönster påverkar inte innehållet i de andra. Men ofta vill man att en länk i en ruta (till exempel i en innehållsförteckning) ska göra att den aktuella webbsidan laddas in i en annan ruta på sidan.

Med attributen NAME och TARGET kan webbdesignern namnge de olika rutorna och sedan tvinga webbsidor att hamna i dessa. En rutas namn är inte det samma som fönstertiteln som anges med <TITLE>.

En rutas namn definieras med <FRAME NAME="rutans_namn"> (se ovan) och för att tvinga ett länkat dokument att hamna i just den rutan anger man TARGET i själva länken:

<A HREF="url" TARGET="rutans_namn">Allan tar kakan</A>

När användaren klickar på texten Allan tar kakan kommer dokumentet med adressen "url" laddas in i rutan med namnet "rutans_namn".

Om alla (eller de flesta) länkar i en ruta ska ladda in dokument i en viss, annan ruta kan man ange <BASE TARGET="rutans_namn">

Anger man ett TARGET-attribut i en individuell <A>-kod har den företräde framför TARGET-attributet i <BASE>. <BASE> ska ligga i "head"-delen av dokumentet.

TARGET fungerar även i en client-side imagemap. Exempel: <AREA SHAPE="rect" COORDS="12, 10, 25, 30" HREF="url" TARGET="rutans_namn">

TARGET kan också sättas i styrkoden <FORM>. Detta gör att resultatet från ett formulär i en ruta (det som servern skickar tillbaka till användaren efter att hon klickat på "submit") hamnar i en annan ruta. Exempel: <FORM ACTION="url" TARGET="rutans_namn">

Om man anger en TARGET-länk till ett rute-NAME som inte finns kommer istället ett nytt fönster att öppnas som då tilldelas det namnet.

Magiska namn

Namnet på en ruta måste börja med en bokstav eller en siffra för att vara giltigt. Alla andra namn kommer att ignoreras. Undantaget är fyra "magiska" namn som alla börjar med ett understrykningstecken.

TARGET="_blank": Det länkade dokumentet kommer att laddas in i ett nytt, tomt fönster utan namn.
TARGET="_self": Det länkade dokumentet kommer att laddas in i samma ruta eller fönster som länken finns i. Detta är användbart för att gå förbi ett rutenamn som satts i <BASE>.
TARGET="_parent": Det länkade dokumentet kommer att laddas in i närmaste överordnat FRAMESET. Finns det inget sådant laddas dokumentet in i samma ruta eller fönster som länken finns i (samma som för _self).
TARGET="_top": Det länkade dokumentet kommer att laddas in i hela det aktuella fönstret. Alla indelningar i rutor kommer att försvinna. Detta är användbart för att komma ur många nivåer av ruteindelningar (d.v.s. en ruta som i sin tur är uppdelad i rutor). Om sidan inte innehåller några rutor blir effekten samma som för _self.

Den vanligaste användningen av TARGET är för att tvinga länkade dokument att visas i rätt ruta. Men TARGET kan också användas utan rutor. Effekten blir då att dokumenten hamnar i olika fönster. Detta kan kanske vara användbart ibland, exempelvis för att behålla besökare kvar på sina sidor, även när man erbjuder länkar bort från dem, men för det allra mesta är det bara irriterande. Användarens skärm fylls av fönster med olika webbsidor i, istället för att visa de nya webbsidorna i samma fönster hela tiden.

<<< Förra avsnittet Innehåll Nästa avsnitt >>>