Att g�ra frames �r inte sv�rt och det �r v�ldigt praktiskt. Att g�ra frames
(eng. ramar) �r till f�r att snabbare och l�ttare
hitta omkring p� en sajt. Sidor med frames har olika "f�nster",
eller s� kallade "ramar". Du kan d� t.ex. scrolla en av sidorna
samtidigt som de andra rutorna �r stilla. P� denna
sida ska du l�ra dig att g�ra frames, allts� en sida som inneh�ller "rutor"
d�r varje ruta inneh�ller en egen sida (".html"-fil).
F�r att g�ra frames beh�ver du MINST 3 htm (html) dokument. Den f�rsta
�r den med frames, det �r den jag ska l�ra dig g�ra nu.
I de andra 2 finns text, bilder, l�nkar m.m.
De andra tv� �r allts� helt vanliga sidor som dyker upp i "framesidans"
ramar.
L�t oss b�rja med en vanlig hemsida med ramar.
S� h�r kan en hemsida med 2 lika stora rutor (ramar) se ut.
Vill du testa hur resultatet blivit?
Tryck d� h�r (ett nytt f�nster �ppnas).
Detta var en enkel framesida.
Vi ska under denna framekurs visa hur vi steg f�r steg utvecklar sidan genom
att �ndra HTML-koden h�r ovan och ha mer och mer avancerade saker p� sidan.
Efter varje �ndring i HTML-koden som jag g�r skriver jag i en tabell (som nedan)
vad den taggen eller det attributet har f�r funktion (vet du inte vad taggar och attribut �r,
tryck d� h�r).
<HTML>
<HEAD>
<TITLE>Hej p� dig</TITLE>
</HEAD>
Denna kod �r de f�rsta raderna i framesidan och m�ste finnas d�r.
Detta ber�ttar att vi har ett HTML-dokument (en vanlig hemsidefil, allts� en fil vars namn slutar p�
.htm eller .html) och att rubriken �r Hej p� dig.
<FRAMESET...
Detta g�r s� att sidan f�rst�r att detta �r en framesida och att man har olika ramar.
Attributen i denna tagg best�mmer delvis hur sidorna ska visas.
...ROWS="*,*">
ROWS �r ett attribut till FRAMESET (se ovan).
Den best�mmer att sidorna som visas hamnar p�
varandra. Byter jag ut ROWS mot COLS hamnar sidorna bredvid
varandra.
V�rdet p� ROWS �r satt som *,*. Detta betyder att sidorna
ska ta lika stor plats p� sk�rmen. Allts� ska b�da ramarna vara exakt
lika stora.
<FRAME...
FRAME best�mmer att en "frame" kommer att dyka upp h�r,
dvs. att en ram med en sida kommer upp h�r.
Vilken sida som finns i just denna ram best�ms av attributet SRC (l�s mer om SRC h�r nedan).
F�r varje ram som finns (i var ram finns en egen hemsida) ska en s�dan h�r tagg finnas.
...SRC="ram_a.html"...
H�r best�ms att sidan ram_a.html ska dyka upp h�r p� sk�rmen i denna ram.
...NAME="ruta_a">
H�r namnger man denna ruta.
Varf�r man g�r detta f�r du l�ra dig sedan,
men kort sagt s� anv�nds namnet p� ramen d� man vill
l�nka till denna ram fr�n en annan ram.
Det spelar ingen som helst roll vad namnet �r.
</FRAMESET>
H�r avslutas FRAMESET.
Observera att det m�ste finnas lika m�nga FRAMESET-taggar
(<FRAMESET...) som </FRAMESET>.
</HTML>
H�r slutar sidan (HTML-dokumentet).
Antag nu att vi vill ha tre ramar, tv� sm� l�ngst upp p� sidan och en stor l�ngst ned.
Genom att �ndra HTML-koden som vi hade i b�rjan s� kan vi f� en s�dan sida.
L�t oss testa med denna kod och se om det blir bra (det jag lagt till eller �ndrat
p� skrivs i fet stil. F�rgerna �r endast till f�r att du l�ttare ska
se vad som h�r till vad):
V�rdet p� ROWS �ndras nu till 20%,*.
Detta g�r s� att den f�rsta taggen som kommer
under denna FRAMESET-tagg (raden med FRAMESET) kommer att vara 20% medan resten av sidan t�cks
av den tagg som kommer sist i HTML-koden.
Sv�rt att h�nga med?
L�t mig f�rklara s�h�r:
Efter raden med 20%,* kommer <FRAMESET COLS="*,*">, som omfattar:
<FRAMESET COLS="*,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
Detta ska allts� motsvara 20% av den yta som webbl�saren har att visa hemsidan p�.
Eftersom det st�r ROWS="20%,*" f�rst�r vi att det blir de 20 �versta (=rows)
procenten av sidan.
Resten av framen (=de ramar som �r kvar =
<FRAME SRC="ram_b.html" NAME="ruta_b">)
kommer att motsvara resten av sidan (de nedersta 80 procenten av sidan).
L�t s�ga att vi vill minska sidan ram_a.html p� s� s�tt att sidan
ram_c.html �kar.
L�t oss �ven dela upp sidan ram_b.html i tv� delar, sida ram_b.html och ram_d.html.
L�t delningen g� till p� s� s�tt att sidorna som bildas kommer bredvid varandra.
Sida ram_b.html (den nya ram_b.html som uppst�r)
ska vara lika bred som sida ram_a.html
och ska ligga under sida ram_a.html.
�ter igen f�r man sitta och testa sig fram hur resultatet ska bli.
Vi kommer fram till denna HTML-kod:
Det som �r nytt med dessa v�rden �r att den inte tar upp ett visst antal procent av sidan,
utan ett visst antal bildpunkter (�ven kallat pix).
Kom ih�g att olika sk�rmar och olika datorer visar olika antal bildpunkter.
Vissa visar bara 640*480 pix (640 bildpunkter i bredd och 480 bildpunkter i h�jd)
medan andra datorer kan visa �ver 1280*1024 pix.
V�rdet 200 tar allts� upp mellan ca 30% av sk�rmen till �ver 15% av sk�rmen
(beroende p� uppl�sningen).
F�r att kommentera lite om vad som g�r vad i HTML-koden s� g�r
<FRAMESET ROWS="20%,*"> s� att...
<FRAMESET COLS="200,*">
<FRAME SRC="ram_a.html" NAME="ruta_a">
<FRAME SRC="ram_c.html" NAME="ruta_c">
</FRAMESET>
...T�cker 20% av webbl�sarens �versta del och att...
<FRAMESET COLS="200,*">
<FRAME SRC="ram_b.html" NAME="ruta_b">
<FRAME SRC="ram_d.html" NAME="ruta_d">
</FRAMESET>
...T�cker resten (*) av dokumentet (100-20=80%).
Nu har vi lyckats bygga upp en framesida med 4 ramar.
Totalt m�ste vi allts� ha 5 sidor (en sida med sj�lva frameskoden och fyra helt vanliga sidor).
Vad ska du nu g�ra f�r att l�nka fr�n en sida i en ruta till en annan sida i en annan ruta,
t.ex. s� att man trycker p� en l�nk i sidan "ram_a.html" och s� dyker en ny sida upp i
"ruta_b" (d�r sidan "ram_b.html" f�rst varit/fortfarande finns)?
Jo, man anv�nder TARGET-attribut i A-taggarna, t.ex. s�h�r:
<A HREF="en_ny_sida.html" TARGET="ruta_b">text</A>
Om man skriver in ett namn p� en ram som inte finns �ppnas ett nytt f�nster
med det namnet i ett nytt f�nster.
Nu kan man ju fr�ga sig hur man g�r s� att alla ramar f�rsvinner n�r man trycker p�
en l�nk eller delar av ramar f�rsvinner n�r man trycker p� en l�nk.
Jo, man kan anv�nda n�got av f�ljande v�rden:
<A HREF="ensida.html" TARGET="_top">text/bild</A>
S� dyker l�nken upp �ver hela sidan. Den dyker allts� INTE upp i en ram.
Detta �r vanligt om du g�r l�nkar till andras hemsidor, f�r det �r inte
bra att ha andras hemsidor i dina frames, det �r alltid b�ttre att l�ta
deras sidor komma upp i helsk�rm.
Om du skriver _parent s� f�rsvinner hela framen och
den nya sidan dyker upp. Skillnaden mellan _top
och _parent �r att parent bara tar bort den frame
som l�nken finns i. Allts�, om du har en frame sida (#1), och du har en annan
framesida (#2) i framesidan (#1) s� g�r funktionen _parent
i frame #2 att bara frame #2 f�rsvinner. Frame #1 (den f�rsta (som
man ser adressen till i adressf�ltet)) finns allts� kvar.
Detta v�rde p� TARGET g�r s� att den l�nkade sidan dyker upp i samma f�nster
som l�nken befann sig p�. Om ingen TARGET finns anges detta som standard.
Nu undrar du s�kert varf�r detta v�rde �ver huvud taget finns,
svaret �r att man kan skriva <BASE TARGET="n�got v�rde">
p� sidan, d� f�r alla l�nkar ett TARGET="n�got v�rde"-attribut
(mer information kommer senare p� sidan).
Skulle du d� vilja ha en l�nk som l�nkar till samma ram s� skriver du
TARGET="_self".
Med denna funktion s� �ppnas ett nytt och namnl�st f�nster med den l�nkade sidan.
<A HREF="ensida.html" TARGET="namnet du har valt till din ram">text/bild</A>
Observera att "namnet du har valt till din ram" �r
namnet du har valt till din ram.
Namnet kan vara vad som helst, t.ex. "text" eller "meny".
Namnet best�mmer du n�r du g�r framesidan.
Vanligtvis har STOR eller liten bokstav inte n�gon betydelse i HTML,
men n�r det g�ller texten efter TARGET har det betydelse, s� det �r viktigt
att du t.ex. skriver "_top", inte "_TOP".
Om du har m�nga taggar p� en sida och d�r alla ska l�nka en speciell ram
(t.ex. alla TARGET p� sidan �r TARGET="nere")
s� kan du skriva detta inom HEAD
(efter <HEAD> men f�re </HEAD>):
<BASE TARGET="nere">
D� blir alla l�nkar p� sidan TARGET="nere" om annat inte anges.
Naturligtvis kan du skriva in annat, t.ex.:
<BASE TARGET="_top">
BASE
BASE ska finnas i HEAD och best�mmer fr�n vilken adress relativa l�nkar ska utg� ifr�n samt vad standardv�rdet f�r TARGET ska vara.
Attribut
TARGET
Om en l�nk saknar TARGET-v�rde kommer det som anges h�r anv�ndas som TARGET.
HREF
Fr�n denna adress kommer alla relativa l�nkar att utg�. Exempel: Om du har en l�nk som l�nkar till "sida.html" och v�rdet h�r �r "http://www.javascript.nu/" kommer l�nken l�nka till "http://www.javascript.nu/sida.html", oavsett vart sj�lva sidan med l�nken finns.
Om du vill �ndra dina ramars f�rg, �ndra tjockleken p� ramarna eller t.ex.
g�ra ramarna oscrollbara (s� att man inte ska kunna scrolla sidan i ramen med rullningslister)
s� skriver man in vissa speciella attribut i FRAME- eller FRAMESET-taggarna.
H�r nedan har jag skrivit vilka attribut man kan anv�nda och vad dem g�r.
F�r att visa hur en f�rdig framesida kan vara har jag gjort detta exempel:
V�rdet ska vara adressen till den hemsida som du vill ska komma upp
i ramen.
M�ste finnas
Ja
Nej
COLS/ROWS
Du skriver COLS eller ROWS beroende p� om du vill
att ramarna ska vara p� (= rows) eller bredvid
(= cols) varandra.
V�rdet beror p� antal sidor som du vill ha.
F�r varje <FRAME>-tagg (eller ny <FRAMESET>-tagg)
ska du ha ett v�rde, som separeras med ett komma.
S�h�r kan du ha om du t.ex. har tre sidor p� varandra
ROWS="*,65,34%". V�rdet "asterisk"
(*)
betyder "resten av dokumentet".
Har du t.ex. skrivit s�h�r...
ROWS="*,*"
...S� delas ramarna i 2 lika stora rutor.
Skriver du s�h�r...
ROWS="2*,*"
...S� blir det 2 rutor och en �r dubbelt s� stor som den andra.
M�ste finnas
Nej
Ja
BORDERCOLOR
Detta �ndrar ramarnas f�rg.
Det st�ds inte av Internet Explorer 3.XX.
Skrivs det i <FRAMESET>-taggen g�ller det alla ramarna
i ramverket.
V�rdet som anges ska vara en rgb-kod eller ett engelskt f�rgnamn.
Ja
Ja
NORESIZE
G�r s� att man inte kan dra i ramarna (kanterna p� sidorna).
Ja
Nej
SCROLLING
V�rden: no:
G�r s� att det inte bildas rullningslister,
varken det beh�vs eller ej.
auto:
Blir rullningslister om det beh�vs.
Skriver du inget SCROLLING-attribut s� blir
detta valt automatiskt.
yes:
G�r s� att det bildas rullningslister,
varken det beh�vs eller ej.
Ja
Nej
BORDER
H�r anger du tjockleken p� dina ramar.
Fungerar inte i Internet Explorer 3.
Nej
Ja
FRAMEBORDER
Om du vill ha ramar ska du skriva "1" som v�rde,
annars skriver du "0".
Ja
Ja
FRAMESPACING
H�r anger du tjockleken p� ramarna i pixlar (= bildpunkter),
ju h�gre v�rde du anger, ju tjockare blir ramarna.
Fungerar bara i Internet Explorer.
Nej
Ja
NAME
Namnger ramarna s� att du med ett TARGET-attribut kan
kontrollera vart sidorna som du �ppnar ska dyka upp.
Bra att ha
Ja
Nej
MARGINWIDTH
V�rdet som du anger ska vara s� mycket som indraget blir p� den ramen.
Allts� blir det t.ex. ett 100 pix (pix = m�tt vid datasammanhang)
tjockt "tomrum" vid h�ger och v�nster sida av sidan som finns i ramen
om man anger v�rdet "100".
Ja
Nej
MARGINHEIGHT
V�rdet som du anger ska vara s� mycket som indraget blir p� den ramen.
Allts� blir det t.ex. ett 100 pix (pix = m�tt vid datasammanhang)
tjockt "tomrum" l�ngst upp och ner p� sidan som finns i ramen
om man anger v�rdet "100".
Ja
Nej
Vissa gamla webbl�sare klarar inte av att visa frames,
de f�rst�r helt enkelt inte vad som ska h�nda n�r man skriver
<FRAMESET...
S�dana webbl�sarna kommer d� att visa en helt tom sida f�r bes�karen.
F�r att hindra att "f�rlora" bes�kare med gamla webbl�sare s� kan du anv�nda en NOFRAMES-tagg.
Allts� kan man skriva s�h�r:
<HTML>
<HEAD>
<TITLE>Hej p� dig</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME SRC="a.html" NAME="ruta_a">
<FRAME SRC="b.html" NAME="ruta_b">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="white" TEXT="black">
Din webbl�sare kan inte hantera frames,
d�rf�r kan du inte se min hemsida.
</BODY>
</NOFRAMES>
</HTML>
Om n�gon med en webbl�sare utan st�d f�r frames (t.ex. en v�ldigt gammal webbl�sare)
kommer till din sida s� ser bes�karen denna text:
Din webbl�sare kan inte hantera frames, d�rf�r kan du inte se min hemsida.
Om du vill kan du g�ra en hel hemsida inom NOFRAMES med bilder, l�nkar, tabeller, text etc.
Detta st�r inte de som kan klara av frames, det visas bara f�r dem med webbl�sare som
inte kan klara av frames.
NOFRAMES
NOFRAMES visar en text f�r de bes�kare som har en webbl�sare som inte st�djer frames.
Nu ser du hur l�tt det �r att skapa frames.
Om du vill se n�gra exempel, tryck p� n�gon av l�nkarna h�r nedan
(Jag har bara gjort mallen.
F�r att ta bort, f�rga, minska eller f�rstora ramarna etc. f�r du anv�nda dig av attributen
som st�r l�ngre upp p� denna sida):
I slutet av varje kapitel i HTML-kursen finns n�gra fr�gor som
du ska svara p� f�r att testa dina kunskaper inom HTML.
Om du har f�tt alla r�tt s� �r det bara att g� vidare,
fast har du haft n�got fel kan det kanske vara klokt att f�rs�ka
lista ut vad som kan ha varit fel. Givetvis kan du g� vidare �ven om du
inte svarar r�tt p� alla fr�gor.
