Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

JavaScript.nu / HTML-kurs / Frames och ramar

Frames och ramar

I detta kapitel:
Vad är frames?
Göra frames
Länkar med TARGET
   _top
   _parent
   _self
   _blank
   Namnet du har valt till din ram
Base target
Exempel
Attribut
Noframes
Fler exempel
Test



Att göra frames är inte svårt och det är väldigt praktiskt. Att göra frames (eng. ramar) är till för att snabbare och lättare hitta omkring på en sajt. Sidor med frames har olika "fönster", eller så kallade "ramar". Du kan då t.ex. scrolla en av sidorna samtidigt som de andra rutorna är stilla. På denna sida ska du lära dig att göra frames, alltså en sida som innehåller "rutor" där varje ruta innehåller en egen sida (".html"-fil).
För att göra frames behöver du MINST 3 htm (html) dokument. Den första är den med frames, det är den jag ska lära dig göra nu.

I de andra 2 finns text, bilder, länkar m.m.
De andra två är alltså helt vanliga sidor som dyker upp i "framesidans" ramar.


Låt oss börja med en vanlig hemsida med ramar.
Så här kan en hemsida med 2 lika stora rutor (ramar) se ut.
<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_b.html" NAME="ruta_b">
</FRAMESET>
</HTML>
Vill du testa hur resultatet blivit?
Tryck då här (ett nytt fönster öppnas).

Detta var en enkel framesida. Vi ska under denna framekurs visa hur vi steg för steg utvecklar sidan genom att ändra HTML-koden här ovan och ha mer och mer avancerade saker på sidan. Efter varje ändring i HTML-koden som jag gör skriver jag i en tabell (som nedan) vad den taggen eller det attributet har för funktion (vet du inte vad taggar och attribut är, tryck då här).

<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
Denna kod är de första raderna i framesidan och måste finnas där. Detta berättar att vi har ett HTML-dokument (en vanlig hemsidefil, alltså en fil vars namn slutar på .htm eller .html) och att rubriken är Hej på dig.
<FRAMESET...
Detta gör så att sidan förstår att detta är en framesida och att man har olika ramar. Attributen i denna tagg bestämmer delvis hur sidorna ska visas.
...ROWS="*,*">
ROWS är ett attribut till FRAMESET (se ovan). Den bestämmer att sidorna som visas hamnar varandra. Byter jag ut ROWS mot COLS hamnar sidorna bredvid varandra.
Värdet på ROWS är satt som *,*. Detta betyder att sidorna ska ta lika stor plats på skärmen. Alltså ska båda ramarna vara exakt lika stora.
<FRAME...
FRAME bestämmer att en "frame" kommer att dyka upp här, dvs. att en ram med en sida kommer upp här. Vilken sida som finns i just denna ram bestäms av attributet SRC (läs mer om SRC här nedan).
För varje ram som finns (i var ram finns en egen hemsida) ska en sådan här tagg finnas.
...SRC="ram_a.html"...
Här bestäms att sidan ram_a.html ska dyka upp här på skärmen i denna ram.
...NAME="ruta_a">
Här namnger man denna ruta. Varför man gör detta får du lära dig sedan, men kort sagt så används namnet på ramen då man vill länka till denna ram från en annan ram. Det spelar ingen som helst roll vad namnet är.
</FRAMESET>
Här avslutas FRAMESET. Observera att det måste finnas lika många FRAMESET-taggar (<FRAMESET...) som </FRAMESET>.
</HTML>
Här slutar sidan (HTML-dokumentet).

Antag nu att vi vill ha tre ramar, två små längst upp på sidan och en stor längst ned.
Genom att ändra HTML-koden som vi hade i början så kan vi få en sådan sida. Låt oss testa med denna kod och se om det blir bra (det jag lagt till eller ändrat på skrivs i fet stil. Färgerna är endast till för att du lättare ska se vad som hör till vad):

<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAMESET COLS="*,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
<FRAME SRC="ram_b.html" NAME="ruta_b">
</FRAMESET>
</HTML>
Se resultatet av sidan här.

20%,*
Värdet på ROWS ändras nu till 20%,*. Detta gör så att den första taggen som kommer under denna FRAMESET-tagg (raden med FRAMESET) kommer att vara 20% medan resten av sidan täcks av den tagg som kommer sist i HTML-koden.
Svårt att hänga med?
Låt mig förklara såhär:
Efter raden med 20%,* kommer <FRAMESET COLS="*,*">, som omfattar:
<FRAMESET COLS="*,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
Detta ska alltså motsvara 20% av den yta som webbläsaren har att visa hemsidan på. Eftersom det står ROWS="20%,*" förstår vi att det blir de 20 översta (=rows) procenten av sidan.
Resten av framen (=de ramar som är kvar = <FRAME SRC="ram_b.html" NAME="ruta_b">) kommer att motsvara resten av sidan (de nedersta 80 procenten av sidan).

Låt säga att vi vill minska sidan ram_a.html på så sätt att sidan ram_c.html ökar.
Låt oss även dela upp sidan ram_b.html i två delar, sida ram_b.html och ram_d.html. Låt delningen gå till på så sätt att sidorna som bildas kommer bredvid varandra.
Sida ram_b.html (den nya ram_b.html som uppstår) ska vara lika bred som sida ram_a.html och ska ligga under sida ram_a.html.

Åter igen får man sitta och testa sig fram hur resultatet ska bli. Vi kommer fram till denna HTML-kod:

<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAMESET COLS="200,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
<FRAMESET COLS="200,*">
<FRAME SRC="ram_b.html" NAME="ruta_b">
<FRAME SRC="ram_d.html" NAME="ruta_d">
</FRAMESET>
</FRAMESET>
</HTML>

Resultatet av HTML-koden ovan syns här.

200,*
Det som är nytt med dessa värden är att den inte tar upp ett visst antal procent av sidan, utan ett visst antal bildpunkter (även kallat pix). Kom ihåg att olika skärmar och olika datorer visar olika antal bildpunkter. Vissa visar bara 640*480 pix (640 bildpunkter i bredd och 480 bildpunkter i höjd) medan andra datorer kan visa över 1280*1024 pix. Värdet 200 tar alltså upp mellan ca 30% av skärmen till över 15% av skärmen (beroende på upplösningen).

För att kommentera lite om vad som gör vad i HTML-koden så gör <FRAMESET ROWS="20%,*"> så att...
<FRAMESET COLS="200,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
...Täcker 20% av webbläsarens översta del och att...
<FRAMESET COLS="200,*">
<FRAME SRC="ram_b.html" NAME="ruta_b">
<FRAME SRC="ram_d.html" NAME="ruta_d">
</FRAMESET>
...Täcker resten (*) av dokumentet (100-20=80%).


Nu har vi lyckats bygga upp en framesida med 4 ramar. Totalt måste vi alltså ha 5 sidor (en sida med själva frameskoden och fyra helt vanliga sidor).

Vad ska du nu göra för att länka från en sida i en ruta till en annan sida i en annan ruta, t.ex. så att man trycker på en länk i sidan "ram_a.html" och så dyker en ny sida upp i "ruta_b" (där sidan "ram_b.html" först varit/fortfarande finns)?
Jo, man använder TARGET-attribut i A-taggarna, t.ex. såhär:
<A HREF="en_ny_sida.html" TARGET="ruta_b">text</A>

Om man skriver in ett namn på en ram som inte finns öppnas ett nytt fönster med det namnet i ett nytt fönster.

Nu kan man ju fråga sig hur man gör så att alla ramar försvinner när man trycker på en länk eller delar av ramar försvinner när man trycker på en länk.
Jo, man kan använda något av följande värden:

<A HREF="ensida.html" TARGET="_top">text/bild</A>

Så dyker länken upp över hela sidan. Den dyker alltså INTE upp i en ram.
Detta är vanligt om du gör länkar till andras hemsidor, för det är inte bra att ha andras hemsidor i dina frames, det är alltid bättre att låta deras sidor komma upp i helskärm.

<A HREF="ensida.html" TARGET="_parent">text/bild</A>

Om du skriver _parent så försvinner hela framen och den nya sidan dyker upp. Skillnaden mellan _top och _parent är att parent bara tar bort den frame som länken finns i. Alltså, om du har en frame sida (#1), och du har en annan framesida (#2) i framesidan (#1) så gör funktionen _parent i frame #2 att bara frame #2 försvinner. Frame #1 (den första (som man ser adressen till i adressfältet)) finns alltså kvar.

<A HREF="ensida.html" TARGET="_self">text/bild</A>

Detta värde på TARGET gör så att den länkade sidan dyker upp i samma fönster som länken befann sig på. Om ingen TARGET finns anges detta som standard.
Nu undrar du säkert varför detta värde över huvud taget finns, svaret är att man kan skriva <BASE TARGET="något värde"> på sidan, då får alla länkar ett TARGET="något värde"-attribut (mer information kommer senare på sidan). Skulle du då vilja ha en länk som länkar till samma ram så skriver du TARGET="_self".

<A HREF="ensida.html" TARGET="_blank">text/bild</A>

Med denna funktion så öppnas ett nytt och namnlöst fönster med den länkade sidan.

<A HREF="ensida.html" TARGET="namnet du har valt till din ram">text/bild</A>

Observera att "namnet du har valt till din ram" är namnet du har valt till din ram. Namnet kan vara vad som helst, t.ex. "text" eller "meny". Namnet bestämmer du när du gör framesidan.


Vanligtvis har STOR eller liten bokstav inte någon betydelse i HTML, men när det gäller texten efter TARGET har det betydelse, så det är viktigt att du t.ex. skriver "_top", inte "_TOP".


Om du har många taggar på en sida och där alla ska länka en speciell ram (t.ex. alla TARGET på sidan är TARGET="nere") så kan du skriva detta inom HEAD (efter <HEAD> men före </HEAD>):
<BASE TARGET="nere">
Då blir alla länkar på sidan TARGET="nere" om annat inte anges. Naturligtvis kan du skriva in annat, t.ex.:
<BASE TARGET="_top">

BASE
BASE ska finnas i HEAD och bestämmer från vilken adress relativa länkar ska utgå ifrån samt vad standardvärdet för TARGET ska vara.
Attribut
TARGET   Om en länk saknar TARGET-värde kommer det som anges här användas som TARGET.
HREF   Från denna adress kommer alla relativa länkar att utgå. Exempel: Om du har en länk som länkar till "sida.html" och värdet här är "http://www.javascript.nu/" kommer länken länka till "http://www.javascript.nu/sida.html", oavsett vart själva sidan med länken finns.


Om du vill ändra dina ramars färg, ändra tjockleken på ramarna eller t.ex. göra ramarna oscrollbara (så att man inte ska kunna scrolla sidan i ramen med rullningslister) så skriver man in vissa speciella attribut i FRAME- eller FRAMESET-taggarna.
Här nedan har jag skrivit vilka attribut man kan använda och vad dem gör.
För att visa hur en färdig framesida kan vara har jag gjort detta exempel:
<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
   <FRAMESET COLS="200,*">
      <FRAME SRC="ram_a.html" NAME="ruta_a" MARGINWIDTH="50" SCOLLING="no">
      <FRAME SRC="ram_c.html" NAME="ruta_c" NORESIZE MARGINHEIGHT="30">
   </FRAMESET>
   <FRAMESET COLS="*,10*">
      <FRAME SRC="ram_b.html" NAME="ruta_b" BORDER="30" FRAMESPACING="20">
      <FRAME SRC="http://www.passagen.se/" NAME="passagen" SCOLLING="no">
   </FRAMESET>
</FRAMESET>
</HTML>
Tryck här om du vill se exemplet ovan i ett nytt fönster.

Attribut Funktion/information FRAME FRAMESET
SRC
Värdet ska vara adressen till den hemsida som du vill ska komma upp i ramen.
Måste finnas
Ja
Nej
COLS/ROWS
Du skriver COLS eller ROWS beroende på om du vill att ramarna ska vara (= rows) eller bredvid (= cols) varandra. Värdet beror på antal sidor som du vill ha. För varje <FRAME>-tagg (eller ny <FRAMESET>-tagg) ska du ha ett värde, som separeras med ett komma. Såhär kan du ha om du t.ex. har tre sidor på varandra ROWS="*,65,34%". Värdet "asterisk" (*) betyder "resten av dokumentet". Har du t.ex. skrivit såhär...
ROWS="*,*"
...Så delas ramarna i 2 lika stora rutor. Skriver du såhär...
ROWS="2*,*"
...Så blir det 2 rutor och en är dubbelt så stor som den andra.
Måste finnas
Nej
Ja
BORDERCOLOR
Detta ändrar ramarnas färg. Det stöds inte av Internet Explorer 3.XX. Skrivs det i <FRAMESET>-taggen gäller det alla ramarna i ramverket. Värdet som anges ska vara en rgb-kod eller ett engelskt färgnamn.
Ja
Ja
NORESIZE
Gör så att man inte kan dra i ramarna (kanterna på sidorna).
Ja
Nej
SCROLLING
Värden:
no: Gör så att det inte bildas rullningslister, varken det behövs eller ej.
auto: Blir rullningslister om det behövs. Skriver du inget SCROLLING-attribut så blir detta valt automatiskt.
yes: Gör så att det bildas rullningslister, varken det behövs eller ej.
Ja
Nej
BORDER
Här anger du tjockleken på dina ramar.
Fungerar inte i Internet Explorer 3.
Nej
Ja
FRAMEBORDER
Om du vill ha ramar ska du skriva "1" som värde, annars skriver du "0".
Ja
Ja
FRAMESPACING
Här anger du tjockleken på ramarna i pixlar (= bildpunkter), ju högre värde du anger, ju tjockare blir ramarna. Fungerar bara i Internet Explorer.
Nej
Ja
NAME
Namnger ramarna så att du med ett TARGET-attribut kan kontrollera vart sidorna som du öppnar ska dyka upp.
Bra att ha
Ja
Nej
MARGINWIDTH
Värdet som du anger ska vara så mycket som indraget blir på den ramen. Alltså blir det t.ex. ett 100 pix (pix = mått vid datasammanhang) tjockt "tomrum" vid höger och vänster sida av sidan som finns i ramen om man anger värdet "100".
Ja
Nej
MARGINHEIGHT
Värdet som du anger ska vara så mycket som indraget blir på den ramen. Alltså blir det t.ex. ett 100 pix (pix = mått vid datasammanhang) tjockt "tomrum" längst upp och ner på sidan som finns i ramen om man anger värdet "100".
Ja
Nej


Vissa gamla webbläsare klarar inte av att visa frames, de förstår helt enkelt inte vad som ska hända när man skriver <FRAMESET...
Sådana webbläsarna kommer då att visa en helt tom sida för besökaren. För att hindra att "förlora" besökare med gamla webbläsare så kan du använda en NOFRAMES-tagg. Alltså kan man skriva såhär:
<HTML>
<HEAD>
<TITLE>Hej på dig</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME SRC="a.html" NAME="ruta_a">
<FRAME SRC="b.html" NAME="ruta_b">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="white" TEXT="black">
Din webbläsare kan inte hantera frames,
därför kan du inte se min hemsida.
</BODY>
</NOFRAMES>
</HTML>
Om någon med en webbläsare utan stöd för frames (t.ex. en väldigt gammal webbläsare) kommer till din sida så ser besökaren denna text:
Din webbläsare kan inte hantera frames, därför kan du inte se min hemsida.

Om du vill kan du göra en hel hemsida inom NOFRAMES med bilder, länkar, tabeller, text etc.
Detta stör inte de som kan klara av frames, det visas bara för dem med webbläsare som inte kan klara av frames.

NOFRAMES
NOFRAMES visar en text för de besökare som har en webbläsare som inte stödjer frames.


Nu ser du hur lätt det är att skapa frames.
Om du vill se några exempel, tryck på någon av länkarna här nedan (Jag har bara gjort mallen. För att ta bort, färga, minska eller förstora ramarna etc. får du använda dig av attributen som står längre upp på denna sida):
  1. Exempel 1
  2. Exempel 2
  3. Exempel 3
  4. Exempel 4


Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Vilken länk öppnar en sida i hela webbläsarfönstret (dvs. inte i en FRAME)?
<A HREF="http://www.server.se/" TARGET="_TOP">Länk</A>
<A HREF="http://www.server.se/" TARGET="top">Länk</A>
<A HREF="http://www.server.se/" TARGET="_top">Länk</A>

Vad är viktigt att kontrollera när du gör en sida med frames?
Att du har lika många <FRAMESET>-taggar som </FRAMESET>-taggar
Att du har lika många <FRAMESET>-taggar som <FRAME>-taggar
Att du har lika många COLS-attribut som ROWS-attribut

Vad måste finnas i en FRAMESET-tagg
COLS eller ROWS
NAME
SRC

Vad har SCROLLING för standardvärde? (Det värde SCROLLING får om man inte ger SCROLLING ett värde i FRAME-taggen)
YES
NO
AUTO

Vilken av följande ramar kommer bli störst? <FRAMESET ROWS="2*,50%,*">
Det som har 2* i storlek
Det som har 50% i storlek
Det som har * i storlek

Varför har man en NOFRAMES-tagg?
För att besökare med webbläsare utan frame-stöd ska se ett meddelande.
För att besökare med webbläsare med frame-stöd ska se ett meddelande.
NOFRAMES har ingen funktion. Den måste dock finnas för att FRAMESET ska fungera.







Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]