Lektion 8


Ramar – flera fönster

Ramar (frames på engelska) gör det möjligt att dela upp skärmen i flera fönster och visa olika saker i de olika fönstren. Om du till exempel har en sida med favoritlänkar kan du dela upp skärmen i två delar. I det ena fönstret visas en lista med länkarna och i det andra visas sidan för den länk man valt.

Nu ska vi lära oss hur man bygger en sida som innehåller ramar.

Först talar vi om att vi vill göra ramar:

<FRAMESET ROWS="60,*">

FRAMESET är startkoden för ramar. ROWS=”60,*” (rader) talar om att vi vill ha två fönster ovanför varandra och att det övre ska vara 60 pixlar högt och det nedre ska uppta resten av skärmen (*). Hade vi velat ha två lika stora fönster hade vi skrivit ROWS=”50%,50%”. Då tar varje fönster upp halva skärmens höjd. Vill du ha fönster bredvid varandra kan du i stället för ROWS skriva COLS (kolumner). ROWS och COLS går att kombinera så att skärmen delas upp i många fönster. Tänk på att om du har för många fönster kan det bli rörigt.


Vi fortsätter med att beskriva det första (övre) fönstret:

<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">

FRAME är startkoden för ett fönster. Koden SRC talar om vad vi vill visa i fönstret när det laddas. lektion7.htm är sidan med Googles sökmotor. När ram-sidan laddas kommer vi alltså att se sidan med sökmotorn i det övre fönstret. Med SCROLLING=”no”talar vi om att det inte ska finnas några rullningslister i fönstret. Förutom no kan du välja yes eller auto. Om du utelämnar SCROLLING helt blir det auto. NAME=”huvud” döper fönstret till “huvud”. Jag ska strax förklara varför man döper fönstren.

Vi går vidare till nästa fönster:

<FRAME SRC="lektion6.htm" NAME="visa">

SRC=”lektion6.htm”: När fönstret laddas visas sidan vi skapade i lektion 6. NAME=”visa”: Fönstret döps till “visa”.

Det som återstår nu är att avsluta avsnittet med ramar:

</FRAMESET>

Ingen överraskning direkt. Här är hela koden för våra ramar:

<FRAMESET ROWS="60,*">
<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">
<FRAME SRC="lektion6.htm" NAME="visa">
</FRAMESET>

Vi skapar en ny HTML-sida och lägger in koden:

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">
<FRAME SRC="lektion6.htm" NAME="visa">
</FRAMESET>
</HTML>

En del webbläsare kan inte visa ramar. Vad kommer de som har sådana webbläsare att se? En tom sida. Vad kan vi göra åt det? Vi kan lägga till en kod som heter <NOFRAMES>. Det som står mellan <NOFRAMES>-koderna visas i de webbläsare som inte kan visa ramar. Vi ska vara hyggliga och lägga till det i vår ram-sida:

<HTML>
<HEAD>
<TITLE>Min första hemsida</TITLE>
</HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">
<FRAME SRC="lektion6.htm" NAME="visa">
<NOFRAMES>
<P>
Den här sidan kräver att man har en
internetläsare som kan visa så kallade "ramar".
</P>
<P>
Du som inte har det kan titta
<A HREF="lektion6.htm">här</A>
</P>
</NOFRAMES>
</FRAMESET>
</HTML>

Spara sidan under namnet lektion8.htm.

Innan vår hemsida fungerar som den ska måste vi lägga till en kod i sidan vi skapade i lektion 7, om sökmotorer. På det sättet har vi kvar sökmotorn i det övre fönstret även när vi har gjort en sökning. Så här gör vi:

<HTML>
<HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000" LINK="#0000FF"
VLINK="#333333" ALINK="#FFFF80">
</HEAD>
<BODY>
<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/searchTARGET="visa">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value="en">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->
</BODY>
</HTML>

Med TARGET (mål på engelska) kan du tala om för webbläsaren i vilket fönster du vill visa någonting. Vi vill att svaret på sökningar ska visas i det nedre fönstret som vi döpte till “visa”. Det är därför man namnger de olika fönstren i frames. TARGET-koden kan du använda i vanliga länkar också, exempelvis <A HREF=”html.htm” TARGET=”visa”>. Den länken öppnar sidan “html.htm” i det fönster vi döpte till “visa”. Spara nu sidan och glöm inte att den ska heta lektion7.htm.

Nu kan vi titta på sidan.

 

Lektion 8 - HTML på svenska

Klicka för att förstora

Tycker du att det är krångligt med frames? Vi gör ett till exempel med lite fler fönster i.

Ramexempel

Klicka för att förstora

Här är koden för den sidan:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="1"> <FRAME SRC="x.htm" NAME="2">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="3"> <FRAME SRC="x.htm" NAME="4">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="5"> <FRAME SRC="x.htm" NAME="6">
</FRAMESET>
</FRAMESET>
</HTML>

Nu stuvar vi om bland koderna och ritar ut några hjälplinjer så att det blir lite tydligare:

 Ramexempelkod

Vi börjar med att ange hur många rader ram-sidan ska ha och hur höga de ska vara. Det gör du med <FRAMESET ROWS=”*,*,*”>. Sen måste vi, för varje rad, tala om hur många kolumner den ska innehålla och hur breda de ska vara. Det gör vi med <FRAMESET COLS=”*,*”>. Därefter talar vi, för varje fönster i raden, om vilken sida vi vill visa i fönstret och vad det ska heta (FRAME SRC …). Till sist avslutar vi raden med slutkoden </FRAMESET>. Vi fortsätter på samma sätt med rad 2 och 3. Frame-sidan avslutas med </FRAMESET>. Visst blev det lite tydligare så?

Vi fortsätter med sista lektionen.