Tillbaka till "Ramar"  Kunskapstest

Övningsuppgifter - Ramar

När du nu skall göra om din hemsida till en ramsida, föreslår jag att du först av allt skapar en mapp som du kallar "reserv" och kopierar alla dina hemsidesfiler dit. Då har du alltid originalet kvar om något skulle gå på tok.

Öppna sedan din förstasida - index.html - i textredigeraren och spara den under namnet text.html. Lägg den i samma mapp som den ursprungliga index.html - alltså i den mapp där du har dina html-sidor. Sedan kan du ta bort den gamla index.html (inte ur mappen "reserv", alltså, utan ur mappen där du sparade text.html).

Gör sedan en ny html-fil med den vanliga koden:

<HTML>
<HEAD>
<TITLE>Skriv titeln på din hemsida här</TITLE>
<BASE TARGET="right">
</HEAD>
<BODY>
</BODY>
</HTML>

Det här är allt som behövs just nu. Spara filen som sida.html, i samma mapp som text.html.

Sedan är det dags för FRAMESET-filen. Gör ytterligare en html-fil, med följande kod:

<HTML>
<HEAD>
<TITLE>Skriv titeln på din hemsida här</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME NAME="left" SRC="sida.html" FRAMEBORDER="0" SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="right" SRC="text.html" FRAMEBORDER="0" SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
<NOFRAMES>
<H3>Den här är en ramsida, men din webbläsare saknar stöd för ramar.</H3> 
</NOFRAMES>
</HTML>

Spara den här filen med namnet home.html, i samma mapp som sida.html och text.html. 

Du kan naturligtvis ändra proportionerna mellan vänsterramen och högerramen. Det gör du i taggen <FRAMESET COLS="150,*">. Tänk bara på att den före detta förstasidan skall få plats i den högra ramen. Om du har en eller flera tabeller i den, bör tabellens bredd + vänstersidans bredd inte blir mer än 700 pixlar.

Rubrikram i stället?

Du kanske väljer att ha sidan delad på höjden i stället, till exempel med en rubrikram och en ram där sidans innehåll visas.

Ändra då koden ovan så här:

<HTML>
<HEAD>
<TITLE>Skriv titeln på din hemsida här</TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAME NAME="top" SRC="rubrik.html" FRAMEBORDER="0" NORESIZE SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="main" SRC="text.html" FRAMEBORDER="0" SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
<NOFRAMES>
<H3>Den här är en ramsida, men din webbläsare saknar stöd för ramar.</H3> 
</NOFRAMES>
</HTML>

Ändra också namnet på sida.html till rubrik.html, och ändra BASE-taggen till <BASE TARGET="main">. Det här ger en ramsida med en 80 pixlar hög rubrikram och resten till innehållet. Rubriken får ingen rullningslist och det går inte att ändra storlek på den i webbläsaren.

Du sätter SCROLLING="no" därför att rubrikramen skall vara utformad så att den aldrig behöver någon rullningslist - du vill att den här ramen alltid skall synas i sin helhet.

En rubrikram har en klar fördel

Du kan göra om rubriken, med eventuell logga och allt, till en snygg bild som öppnas i den här ramen och sedan ligger kvar där utan att behöva laddas fler gånger. Genom att rubriken är en bild kan du använda snygga teckensnitt som dina besökare normalt inte har på sin dator.

Både rubrik och sidfot?

En annan variant är att göra en rubrikram, en ram för huvudinnehållet och en sidfot. I sidfoten kan du placera länken till din e-postadress, räknaren och länkarna till gästboken.

Då gör du först en html-sida till, med samma innehåll som i rubrik.html ovan. Spara den nya filen som sidfot.html och ändra FRAMESET-koden så här:

<HTML>
<HEAD>
<TITLE>Skriv titeln på din hemsida här</TITLE>
</HEAD>
<FRAMESET COLS="80,*,60">
<FRAME NAME="top" SRC="rubrik.html" FRAMEBORDER="0" NORESIZE SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="main" SRC="text.html" FRAMEBORDER="0" SCROLLING="auto" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME NAME="bottom" SRC="sidfot.html" FRAMEBORDER="0" NORESIZE SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
<NOFRAMES>
<H3>Den här är en ramsida, men din webbläsare saknar stöd för ramar.</H3> 
</NOFRAMES>
</HTML>

Den här varianten ger tre ramar, varav den översta och den nedersta saknar rullningslister och inte kan ändras i webbläsaren.

En vänsterram och en huvudram

Här utgår jag ifrån att du har gjort två ramar, en till vänster och en till höger. Om du har fler ramar eller ramar i rader i stället, behöver du bara anpassa det jag skriver nedan till just din rammodell.

Öppna home.html i webbläsaren. Som du ser har du nu fått en hemsida som är delad i två delar. Den vänstra innehåller tills vidare ingenting, men i den högra har du din tidigare förstasida.

Fixa till vänstersidan

I den vänstra ramen skall du lägga allt sådant inte behöver ändras medan besökaren surfar igenom din hemsida: länkar, din logga, din e-postadress, räknaren, gästboken... Glöm inte att lägga länkar till dina övriga sidor här, och att lägga in en länk tillbaka till förstasidan! Din besökare skall med hjälp av den här ramen kunna ta sig till alla delar av din webbplats.

Du ger dessutom ramen snygg bakgrund, med färg eller med en liten bild som upprepas över hela ramen. Eftersom du anger bakgrundsbilden direkt i BODY-taggen, kan du sedan lägga in andra bilder ovanpå denna bakgrundsbild.

Högst upp i koden till sida.html står <BASE TARGET="rigth">. Det innebär att alla länkar från den här ramen kommer att öppnas i ramen till höger. Om du vill att de skall öppnas någon annanstans - till exempel när det gäller länkar till andra webbplatser - skriver du länkadressen till just den länken så här:

<A HREF="http://www.supportdata.net" TARGET="_blank">SupportData.Net</A>

om du vill att länken skall öppnas i ett eget webbläsarfönster, eller

<A HREF="http://www.supportdata.net" TARGET="_top">SupportData.Net</A>

om du vill att länken skall öppnas i hela det aktuella webbläsarfönstret

Om du inte anger en ny TARGET för de externa länkarna, kommer de att öppnas i ditt högra fönster. Detta kan bli förvirrande för besökarna och många retar sig på det - det är inte roligt att "fastna i andras fönster".

I avsnittet om JavaScript kommer du att lära dig hur du gör för att din egen hemsida inte skall råka ut för detta.

Stilmallar i ramar

Den stilmall du redan har kommer att fungera även för filen text.html - den som nu är din förstasida och öppnas tillsammans med home.html. Vill du ha en stilmall även för sidoramen, men med ett annat innehåll än för huvudsidan, gör du helt enkelt ytterligare en stilmall. Kalla den till exempel sida.css och spara den i samma mapp som den förra. Du måste naturligtvis koppla ihop den med sida.html, vilket du gör med koden:

<LINK REL="stylesheet" HREF="sida.css" TYPE="text/css">

När du har sparat allt öppnar du filen home.html i webbläsaren och kontrollerar att alltsammans fungerar. Klicka på Uppdatera i webbläsaren, så att du blir säker på att det är den senaste versionen som visas.

Läs igenom avsnittet Ramar en gång till innan du övergår till Kunskapstestet.

Tillbaka till "Ramar"  Kunskapstest

© SupportData.Net