Listor Formulär

Använda ramar
Den här webbsidan är gjord med ramar

Den består av följande tre html-sidor:

  • index.html
    Den här sidan - som lika gärna hade kunnat heta till exempel home.html - är själva ramdokumentet. I den sidan finns koden som bestämmer hur de tre andra sidorna skall uppföra sig.
  • vsida.html
    Det här är menylisten till vänster. Den laddas bara en gång och ligger sedan kvar hela tiden så länge du är kvar i HTML-skolan. 
  • ramar.html
    Det här är själva huvudsidan - den som den här texten visas på. När du öppnar HTML-skolan är det filen text.html som hamnar här, men alla länkar till de olika avsnitten i skolan öppnas i den här ramen.
Det finns några undantag från det som visas inom ramarna
  • Ett är popup-fönstren, till exempel Haj i Hjälmaren, som jag har valt att lägga i egna fönster. Det gör att du kan ha dessa fönster öppna samtidigt som du fortsätter i själva HTML-skolan.
  • Ett annat är de externa länkarna, länkar till andra platser på Internet. De visas i ett nytt webbläsarfönster, för att det skall bli enklare för dig att komma tillbaka hit.
  • Ett tredje undantag är länkarna till de specialavsnitt som i sig består av kompletta ramdokument med egna sidor: Handbok i JavaScript, SDN:s JavaScript och SDN:s startsida.

I det här avsnittet kommer jag att använda popup-fönster för att visa hur olika ramsidor kommer att se ut.

Varför använder man ramar?

I HTML-skolan har jag valt att lägga länkarna till alla olika avsnitt för sig, i en ram till vänster. Om de här länkarna inte låg i en egen ram, utan på själva "huvudsidan", skulle två saker inträffa:

  • För det första skulle länkarna försvinna uppåt när du rullade nedför sidan. Varje gång du ville byta sida, till exempel för att slå upp något i Ordboken, skulle du vara tvungen att gå tillbaka till början av sidan för att komma åt länken. Nu har du hela tiden alla länkar lätt tillgängliga, vilket gör det lättare att hitta bland alla sidorna.
  • För det andra skulle hela menyn få laddas på nytt varje gång du växlade sida. Detta skulle göra att det tog längre tid att läsa in den nya sidan. Jag kan alltså använda tekniken med ramar för att uppdatera en del av hela sidan, medan andra delar förblir oförändrade och inte behöver laddas om.
Gör en ramsida

Det jag här kallar ramsida är hela den uppsättning av html-sidor som öppnas samtidigt: ramdokumentet och de sidor som laddas i de minst två ramarna. En ramsida kommer därmed att bestå av minst tre html-sidor.

Jag skall nu göra en ramsida med en list till vänster och en huvudsida. Listen till vänster kallar jag list.html och huvudsidan får heta huvud.html. Själva ramdokumentet som laddar in dessa sidor får heta home.html.

Först gör jag då två nya sidor, list.html och huvud.html. Båda sidorna är till en början tomma och koden till dem ser ut som vanligt - med ett undantag.

Det här är koden till huvud.html:

<HTML>
<HEAD>
<TITLE>Närkes Expressblad</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Och det här är koden till list.html:

<HTML>
<HEAD>
<TITLE>Närkes Expressblad</TITLE>
<BASE TARGET="main">
</HEAD>
<BODY>
</BODY>
</HTML>

 

Du ser att den enda skillnaden mellan dem - och det enda som skiljer från de tidigare sidor du har gjort - är <BASE TARGET="main"> i list.html. Du kommer alldeles strax att förstå vad den här snutten gör för nytta.

Nu när de här båda sidorna är sparade, skall vi nämligen ge oss på själva ramdokumentet - det som gör alltsammans till en ramsida.

Du ser koden här nedanför. Under rutan kommer förklaringarna. För att det skall bli lättare att koppla fram och tillbaka mellan koden och förklaringarna, har jag numrerat raderna i koden. Numreringen skall inte vara med i den "riktiga" koden.

1. <HTML>
2. <HEAD>
3. <TITLE>Närkes Expressblad</TITLE>
4. </HEAD>
5. <FRAMESET COLS="150,*">
6. <FRAME NAME="contents" TARGET="main" SRC="list.html">
7. <FRAME NAME="main" SRC="huvud.html">
8. </FRAMESET>
9. </HTML>

Den här sidan sparar jag som home.html.

Ytligt sett ser det ut som en vanlig html-sida, men som du ser finns det ingen BODY-tagg. I stället finns en FRAMESET, och det är den som innehåller allt som ramdokumentet "behöver veta".

Rad 5 <FRAMESET COLS="150,*">

COLS betyder att sidan skall delas i kolumner. COLS="150,*" innebär att sidan delas i två ramar, där den vänstra är 150 pixlar bred medan den högra - * - tar resten av utrymmet i webbläsarfönstret. 

Om jag ville dela sidan i tre ramar, skulle jag i stället skriva till exempel COLS="150,*,120". Det skulle ge en 150 pixlar bred ram längst till vänster, en 120 pixlar bred ram längst till höger och resten av webbläsarfönstrets bredd i en ram i mitten.

Du kan ange uppdelningen i procent i stället för pixlar, till exempel COLS="30%,*".

Om du i stället vill dela sidan i ramar på höjden - i rader - ändrar du COLS till ROWS, men vi återkommer till det.

Rad 6 <FRAME NAME="contents" TARGET="main" SRC="list.html">

Här finns uppgifterna som gäller för den första ramen (FRAME). NAME talar om vad den heter, TARGET visar i vilken ram länkar från den här ramen skall öppnas och SRC talar om vilken sida som skall laddas i just den här ramen.

TARGET="main" kan du ha med här eller ta bort - det gör du som du vill. I sidan list.html finns ju koden <BASE TARGET="main"> och den gör samma sak som TARGET="main" i FRAMESET-koden: Den säger att länkar i första hand skall öppnas i den ram som heter "main". Om du vill öppna enstaka länkar på en annan plats, kan du ange det direkt i <A>-taggen.

Rad 7 <FRAME NAME="main" SRC="huvud.html">

Här finns uppgifterna som gäller för den andra ramen. Raden anger vad ramen heter och vilken sida som skall laddas i den när ramsidan öppnas.

Rad 8 </FRAMESET>

Här slutar FRAMESET-koden.

Men om man inte kan hantera ramar?

Fortfarande används äldre webbläsare som saknar stöd för ramar. Du kan lägga in en extrasnutt på din ramsida, för att hänvisa dessa besökare till en annan sida. Den snutten läggs inom taggarna <NOFRAMES> ... </NOFRAMES> och webbläsare som hanterar ramar hoppar över den helt. Så här kan det se ut:

......

<NOFRAMES>
<BODY>
<H3>Din webbläsare saknar stöd för ramhantering.</H3>
<P>Gå istället till <A HREF="http://www.adressen_till_din_sida_utan_ramar.se">den här sidan.</A></P>
</BODY>
</NOFRAMES>

</FRAMESET>
</HTML>

Observera att BODY-taggarna finns med här, men de ligger inom NOFRAMES-taggarna som hoppas över av webbläsare som kan hantera ramar. FRAMESET-taggen skall inte innehålla någon BODY-del.
Stila till ramsidan

När du har gjort de här tre sidorna - home.html, list.html och huvud.html - och öppnar home.html i webbläsaren, har du en sida som är delad i två delar med en tydlig kantlinje mellan de båda ramarna.

Nästan alla ramsidor blir snyggare om man tar bort kantlinjen. Det gör du med ett av de många attributen till FRAME.

Först attributen till FRAMESET
  • COLS="..."
    Delar webbläsarfönster eller ramar i kolumner. Bredden anges i pixlar, procent av webbläsarfönstret/ramen eller med en asterisk (*). Asterisken säger att ramen skall ta upp resten av utrymmet eller, om du har flera *-ramar, delas lika mellan dem.
  • ROWS="..."
    Gör detsamma som COLS, men delar i stället webbläsarfönstret/ramen i rader.
  • ONLOAD="..."
    Anger en händelse som skall inträffa när html-sidan läses in
  • ONUNLOAD="..."
    Anger en händelse som skall inträffa när html-sidan stängs
Och attributen till FRAME
  • NAME="..."
    Anger ramens namn, till exempel "main", "left", "right" eller "ram_1"
  • SRC="..."
    Anger vilken html-sida som skall visas i ramen
  • FRAMEBORDER="..." 
    Anger om kantlinje skall visas mellan ramar - värdet sätts till 0 (inga kantlinjer) eller 1 (visa kantlinje)
  • MARGINWIDTH="..."
    Anger i pixlar utrymmet på bredden mellan ramens kant och dess innehåll
  • MARGINHEIGHT="..."
    Anger i pixlar utrymmet på höjden mellan ramens kant och dess innehåll
  • NORESIZE
    Gör att det inte går att ändra storlek på ramen i webbläsaren
  • SCROLLING="..." (yes, no, auto)
    Anger om rullningslist skall visas - "auto" gör att rullningslisten visas när den behövs

Alldeles strax skall du lära dig hur man kan göra ramsidor mycket mer sammansatta, men ta först en titt på Haj i Hjälmaren, som nu har blivit en ramsida.
En massa ramar i varandra

FRAMESET-taggarna går att kapsla in i varandra - på samma sätt som när du gjorde listor i flera nivåer. Det går alltså att lägga nya block av <FRAMESET> ... </FRAMESET> inne i tidigare block, och på så sätt få fram en ramsida som blir nästan hur komplicerad som helst.

Jag visar detta med ett popup-fönster. Öppna det och låt det ligga öppet medan du läser koden, så kan du direkt se vad som händer. Observera att jag har "städat bort" nästan alla attribut ur koden, för att det skall bli lättare att koncentrera sig på uppbyggnaden. Ramsidan består av 17 html-sidor med 16 ramar.

1   <FRAMESET ROWS="64,39%,15%,*">
     <FRAME NAME="top" SRC="ram3.html">
2       <FRAMESET COLS="104,13%,*">
         <FRAME NAME="contents" SRC="ram4.html">
         <FRAME NAME="main" SRC="ram2.html">
3           <FRAMESET COLS="18%,21%,20%,*">
             <FRAME NAME="spalt1" SRC="ram6.html">
             <FRAME NAME="spalt2" SRC="ram7.html">
4                <FRAMESET ROWS="20%,20%,20%,20%,20%">
                  <FRAME NAME="rad1" SRC="ram9.html">
                  <FRAME NAME="rad2" SRC="ram10.html">
                  <FRAME NAME="rad3" SRC="ram11.html">
                  <FRAME NAME="rad4" SRC="ram12.html">
                  <FRAME NAME="rad5" SRC="ram13.html">
/4               </FRAMESET>
             <FRAME NAME="spalt3" SRC="ram8.html">
/3          </FRAMESET>
/2      </FRAMESET>
    <FRAME NAME="bottom" SRC="ram5.html">
5       <FRAMESET COLS="17%,20%,24%,39%">
         <FRAME NAME="spalt4" SRC="ram14.html">
         <FRAME NAME="spalt5" SRC="ram15.html">
         <FRAME NAME="spalt6" SRC="ram16.html">
         <FRAME NAME="spalt7" SRC="ram17.html">
/5      </FRAMESET>
/1  </FRAMESET>

Indragen är gjorda för att förtydliga, och siffrorna i grönt - som inte skall vara med i koden - visar var de olika delarna börjar (1) och slutar (/1).

Så här krånglig behöver man sannolikt aldrig göra en ramsida...

Övningsuppgifter
Kunskapstest

Listor Formulär

SupportData.Net