HTML på svenska - Lektion 8

http://monkeytoys.com/htmlkurs/

Senast uppdaterad: 1997-04-16 klockan: 19.00

HTML på svenska

Lektion 8: "Frames" - Flera fönster

"Frames" gör det möjligt att dela upp skärmen i flera fönster och visa olika saker i de olika fönstren. Om man t ex har en sida med favoritlänkar kan man dela upp skärmen i två delar. En med länkarna och en där den länk man väljer visas.

Det man ska tänka på är att inte alla internetläsare kan visa frames. Två av de program som kan det är Netscape Navigator version 2.0 eller senare och Microsoft Internet Explorer version 3.0 eller senare.

Har du en internetläsare som kan visa frames? Om du är osäker kan du testa här. Har du inte det bör du skaffa ett om du vill lära dig hur man gör frames.

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

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

<FRAMESET ROWS="60,*">

FRAMESET är startkoden för frames. 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 (*). Om vi hade velat ha två lika stora fönster hade vi skrivit ROWS="50%,50%". Då tar varje fönster upp 50% av skärmens höjd. Vill man ha fönster bredvid varandra kan man 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. Har man 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 Lycos sökmaskin. När framesidan laddas kommer vi alltså att se sidan med sökmaskinen 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 man välja yes eller auto. Om man 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 sektionen med frames:

</FRAMESET>

Ingen överraskning direkt. Så här ser hela definitionen av våra frames ut:

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

Vi skapar en ny 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>

Vad kommer den som har en internetläsare som inte kan visa frames att se? En tom sida. Vad kan vi göra åt det? Vi kan lägga till en kod som heter <NOFRAMES>. Det man skriver mellan <NOFRAMES>-koderna kommer de som inte har en internetläsare som kan visa frames att se. Vi ska vara hövliga och lägga till det i vår frames-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> Den här sidan kräver att man har en internetläsare som kan visa s k "frames". <P> Du som inte har det kan titta <A HREF="lektion6.htm">här</A> </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. Det är meningen att när vi gör en sökning med sökmaskinen ska svarssidan hamna i det nedre fönstret. På det sättet har vi ju kvar sökmaskinen i det övre fönstret även efter sökningen. Så här gör vi:

<HTML>
<HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080" LINK="#8080FF" 
VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
<CENTER>
<FORM ACTION="http://www.lycos.com/cgi-bin/pursuit" 
TARGET="visa">
Sök med Lycos: <INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>
</BODY>
</HTML>

Med TARGET-koden kan man tala om för internetläsaren i vilket fönster man 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 man 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.

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

Här är koden till 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>

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

Beskrivning av frames

Nu ser vi att man börjar med att tala om hur många rader frame-sidan ska innehålla, och hur höga de ska vara, 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å?!

[ Lektion 7 ] - [ Visa fördjupningsavsnitt ] - [ Frågesidan ] - [ Lektion 9 ]