Frenetic - HTML/Ramar del 1

HTML - Ramar

Ramar är idag ett väldigt populärt verktyg som används av många sidor, stora som små. Den här guiden kommer steg för steg visa hur man bygger upp en sida med hjälp av ramar, men innan vi börjar med detta kommer en presentation av lite för- och nackdelar. Under denna guide förutsätts det att du kan grunderna i HTML. Kan du inte detta, rekommenderar jag att du börjar med att läsa igenom Introduktionen till HTML.

Det finns uppenbara fördelar med att använda sig av ramar: du har navigationen i ett enda dokument vilket innebär att sidan blir betydligt mycket lättare att administrera. Dessutom bevhöer mindre data skickas till klienten, just eftersom navigation inte föjer med varje sida, utan bara laddas en gång.

Om vi går över till nackdelarna med att använda ramar till hemsidan, finns det några även här. Lyckligtvis finns lösningar på det mesta. Till att börja med är det svårare att bokmärka en sida som ligger i en ramuppsättning, eftersom navigationen inte följer med. Detta har dock Microsoft rått bot på från Internet Explorer 4, som kommer ihåg vilka sidor som visas när du bokmärker sidan. Du kan hamna på en undersida direkt, speciellt om man kommer från någon sökmotor, och får då inte med navigationen. Detta kan du dock lösa med JavaScript och med vanliga länkar i dokumenten. En nackdel som inte är lika självklar, är att ramdokument gör en browser betydligt långsammare. Från Internet Explorer 5.5 är detta lite bättre, men övriga läsare har fortfarande samma problem. Sist men inte minst, äldre läsare och textbaserade läsare klarar inte av ramar, vilket utelämnar viss publik helt och hållet. Förut var detta ett ganska allvarligt problem, eftersom man var tvungen att göra två versioner, men nuförtiden är ramar näst intill standard.

Som det ser ut ovan, är nackdelarna fler än fördelarna. Däremot väger fördelarna väldigt tungt, vilket kan leda till att man väljer ramar i alla fall. Som sagt, de flesta nackdelar går att råda bot på!

Hur fungerar då ramar? Varje ram är egentligen en separat internetläsare. Tänk dig att du öppnar två läsare samtidigt. Du lägger den ena lite smalt på vänstersidan och den andra på högersidan. I läsaren till vänster öppnar du ett HTML-dokument som bara innehåller länkar, själva navigationen. I högra läsaren visas dokumenten du länkar till från vänstra dokumentet. Fortfarande svårt att visualisera? Titta på den här bilden. Precis på det här sättet fungerar ramar, fast du behöver bara öppna en internetläsare. Smart va? :)

Jaha, nu när vi vet för- och nackdelar och vet själva tekniken bakom ramar, är det väl lika bra att vi sätter igång? Vi börjar med ett minimalt ramuppsättningsdokument.

<html>
<head>
<title>Lär dig ramar med Frenetic!</title>
</head>

<frameset cols="150,*">
<frame name="navigation" src="navigation.html">
<frame name="display" src="start.html">
</frameset>
</html>

Vad dokmentet ovan anger, är att vi öppnar två dokument bredvid varandra, ungefär som jag visade med bilden ovan. På vänstersidan har vi navigationen och på högersidan visas länkarna. För att visa tydligare, har jag använt samma dokument för att visa hur det fungerar. Titta på den här bilden.

Då vet vi det, dags att gå in på koden: Först definerar vi att det är <html> vi håller på med. Sedan definerar vi huvudet (head) och även titeln, precis som vanligt. Därefter börjar det nya. Kommandot frameset anger hur ramarna ska presenteras. Med cols (från "columns") anger vi att skärmen ska delas på bredden. Den första ramen ska vara 150 pixlar bred. Stjärnan ( * ) anger att den andra ramen ska ta upp vad som finns kvar på skärmen. Läsaren läser vilka dokument som ska visas uppifrån och ner, från höger till vänster. Detta resulterar i att den bredd som presenteras först kommer längst till vänster.

Man kan även dela upp skärmen i höjdled. Då använder man istället "rows". Hade vi velat ha navigationen högst upp, hade det frameset-raden sett ut så här:

Nästa kommando vi stöter på är <frame>. Här definerar vi vilka sidor som ska presenteras i de olika ramarna. Det måste finnas lika många <frame>-taggar, som det finns värden i <frameset>-taggen. Eftersom vi angav två värden (150,*), behöver vi alltså två frame-taggar. Det första dokumentet kommer längst till vänster, vilket innebär att "navigation.html" hamnar längst till vänster, i en ram som är 150 pixlar bred. Resten av bredden på läsaren går åt till att visa "start.html". Name anger vad ramen har för namn. Detta kommer vi att ha nytta av senare, när vi ska börja länka mellan de olika ramarna.

Vi har gått igenom två olika sätt att definera bredd/höjd påen ram. Dels med fasta pixlar (150 i vårt fall), dels med "*", som tar hand om kvarvarande utrymme. Det finns ett tredje sätt, och det är med "%". Detta är bra om du vill dela in en sida helt på mitten, men annars bör du undvika detta, eftersom sidan kommer att se väldigt olika ut beroende på vilken upplösning sidan visas i.

Som du kanske märkt kan du nu ta tag i ramkanterna och ändra storlek som du vill. Om du vill undvika detta kan du ange "noresize", då kan du inte ta tag i ramkanterna.

Sist men inte minst, kan man faktiskt styra hur dokumentens marginaler ska vara i en ram. Detta kan vara bra om man vill ha en bild direkt in till kanten. Med "marginwidth" anger du hur stora marginalrna är i sidled, med "marginheight" marginalerna i höjdled. Båda attributen godtar endast pixlar som värde. Om du inte vill ha några marginaler i en ram, skriver du alltså följande: