Frames
av Kevin Yank
(kyank@ibm.net)
27 September 1998
Kevin Yank

Videregående

 • Introduksjon

Elementære Frames

 • Vårt første Frameset
 • Mer om <FRAMESET>
 • Mer om <FRAME>

Videregående

 • Målrettede Lenker
 • Spesialmål
 • En Frames-basert site

Avanserte emner

 • Multi-Frame Lenker
 • Scripted Frames

Oppsummering og forslag til videre arbeid

Nå som du vet hvordan du skal lage frames, er det på tide å lære hvordan du skal bruke dem. Denne seksjonen vil lære hvordan frames innvirker på måten linkene på sida di fungerer. Deretter skal vi bruke det vi har lært til å lage en Web site som anvender en velkjent "menu bar" layout.


Målrettede Linker

Før 'frames' gjorde sin entré, var det å finne dokumentet som skulle hentes inn det eneste en Web programmerer trengte å bekymre seg om. Med 'frames' har det dukket opp et nytt problem - Hvilken frame bør dokumentet lastes inn i?

Enhver med urlite kjennskap til HTML vet at man oppretter en hypertekstlenke ved å anvende tag'en <A> sammen med HREF attributtet.

<A HREF="newdoc.html">...</A>

I utgangspunktet vil newdoc.html bli lastet inn i frame'n der du klikket på linken. Noen ganger er dette akkurat det du ønsker. Men, hva om du har laget en side med to frames – en som inneholder en meny som kan laste dokumenter inn i den andre? I det tilfellet vil du ønske at linkene i meny frame'n er innstilt på hovedframe'n.

Det første du må gjøre for å oppnå det er å gi dine frames names. Som forklart i det forrige kapittelet, gjør du dette ved hjelp av NAME attributtet til <FRAME> tag'en. I vårt eksempel er det greitt å navngi framene våre menu og main (main=hoved) som vist her:

<FRAMESET COLS="75,*" FRAMEBORDER=0>
  <FRAME SRC="ourmenu.html" NAME="menu">
  <FRAME SRC="introduction.html" NAME="main">
</FRAMESET>

For så å få alle linkene i menu frame'n til å laste inn dokumentene i main frame'n, må vi bruke TARGET attributtet til <BASE> tag'en i HEAD delen til ourmenu.html, som er fila som er lastet inn i vår menu frame.

<HTML>
<HEAD>
<BASE TARGET="main">
</HEAD>
<BODY>
...

"Okey, dette er vel og bra," sier du. "Men hva om jeg ønsker at forskjellige linker i en enkelt fil skal laste dokumenter inn i ulike framer?" Det er ikke noe problem! <A> tag'en støtter også et TARGET attributt som overstyrer samtlige TARGET du måtte ha spesifisert med <BASE> tag'en.

<A HREF="newdoc.html" TARGET="main">...</A>

Bruker du kodingen ovenfor, kan du bare glemme <BASE> tag'en og plassere TARGET på alle linkene dine. Men, med mindre du ikke har et klart definert mål for linkene dine, kan du jo spare litt plass ved å bruke <BASE> tag'en øverst i fila.


Spesiell bruk av TARGET

Siden du ikke alltid ønsker at en link skal laste dokument inn til dine egne frame'r, er det flere spesielle TARGETs du kan bruke. Disse kan brukes enten med <BASE> eller <A HREF> tag'er, og må skrives inn nøyaktig slik de presenteres her, da de skiller mellom store og små bokstaver (case sensitive).

  • TARGET="_self"

    Laster inn måldokumentet i samme frame som linken selv. Dette fungerer på samme måte som om TARGET attributtet ikke var spesifisert i det hele tatt.

  • TARGET="_top"

    Denne pusser ut alle frame'er på skjermen din, og laster så det nye dokumentet på hele den rensa skjermen. Dette er noe du ofte vil bruke når du har link til en annen site. Dersom du ikke gjør det, vil den andre site'n lastes inn i f.eks. den frame'n der du har plassert linken, noe som lett gir stygge og uønskede resultater. Bruk primært denne muligheten når du linker deg opp til noe utenfor din egen site. Det kan ofte være svært irriterende for en bruker å være fanget i en annens frame :-)

  • TARGET="_parent"
  • Laster linkmålet til den frame'n som ligger 'over' den aktive, dvs. 'the parent' til den aktive. Enkelt sagt slettes frameset'et som omgir den frame'n der du har linken, og laster inn måldokumentet der. Forskjellen på _parent og _top er kun merkbar dersom du har nested framesets, der du ønsker å laste inn måldokumentet i neste oppadgående nivå i nøstingen uten å slette eventuelle andre "ytre" frameset. I et enkelt, ikke-nested (nøstet) frameset gjør _parent og _top det samme.

  • TARGET="_blank"

    Åpner et nytt browservindu og laster måldokumentet inn i det samtidig som det aktive framesettet forblir upåvirket i det 'gamle' browservinduet. Enkelte ganger kan dette være å foretrekke fremfor _top når du setter opp en link til en annen site.


En Frame-basert Site

Nå som vi har dekket det grunnleggende mht. bruk av frames, skal vi kombinere alt vi har lært i forbindelse med at vi gjennomgår et konkret eksempel. Som de fleste har sett på Webben, er det svært vanlig å ha en layout der en bruker et menyfelt nedover på venstresiden av skjermen. I mange slike tilfelle er dette menyfeltet plassert inni en frame slik at man kan scrolle seg gjennom hovedinnholdet på siden uten å miste menyen av syne.

Som vanlig begynner vi med å definere frameset'et vårt. Vi kaller fila som inneholder frameset'et for index.html, og viser med det at dette er den første fila som blir lastet når noen kommer til sida vår. Akkurat som enhver frameset fil inneholder heller ikke denne noen <BODY> tag, men bruker i stedet <FRAMESET>, <FRAME>, og <NOFRAMES> tag'er til å definere layouten.

<HTML>
<HEAD>
<TITLE> Velkommen til min Web site! </TITLE>
</HEAD>

<FRAMESET FRAMEBORDER=0 COLS="150,*">
  <FRAME NAME="menu" NORESIZE SRC="mainmenu.html">
  <FRAME NAME="main" SRC="welcome.html">
</FRAMESET>

<NOFRAMES>
<H1>Welcome / velkommen!</H1> <P>This site was designed to use frames to provide a menu bar to ease navigation; however, your browser does not support frames. Click <A HREF="welcome.html">here</A> to go to the main page of our site, where you can use the alternative links we have provided to get around the site. / Denne site'n er skrevet for browsere som kan lese frames. Klikk <A HREF="welcome.html">here</A> for å komme til hovedsiden, der du kan bruke alternative linker.
</NOFRAMES>

</HTML>

Her er det flere ting å kommentere. Vi har brukt FRAMEBORDER=0 i <FRAMESET> tag'en for å skjule de 3D rammene som opprinnelig skiller frames'ene. I mange tilfelle vil dette få en framesbasert side til å virke mer elegant.

Vi har brukt NAME attributtet til <FRAME> tag'en til å gi hver av frames'ene et passende navn. Dette er nyttig når vi senere skal definere linker med dertil hørende måldokument.

Legg også merke til NORESIZE attributtet i vår første <FRAME> tag.Dette forhindrer brukeren fra å endre bredden på menyfeltet (-frame'n), og opprettholder den layouten vi har bestemt. Vi trenger ikke å spesifisere NORESIZE for main frame'n fordi dette går automatisk når vi bruker NORESIZE for meny frane'n. Vi har altså to frames. Det er ganske logisk at dersom vi hindrer brukeren i å endre bredden på den ene, vil han/hun heller ikke kunne endre bredden på den andre.

Til slutt har vi brukt <NOFRAMES> tag'en til å sørge for en velkomstmelding til brukere med browsere som ikke støtter frames. Siden vi ikke ønsker å lage en ekstra versjon av vår site for slike brukere, legger vi ganske enkelt inn en link til den samme fila som vi ønsker å laste inn i vår main frame ved start. I den fila kan vi ha et lite linke-sett, f.eks. nederst på sida.

Deretter ønsker vi å lage menyen vår. Som det fremkommer av frameset'et vårt, vil menyen ligge i mainmenu.html fila. Dette er da en helt normal HTML fil. Vi trenger der en <TITLE> tag. Dette er fordi frames ikke har tittelfelt.

<HTML>
<HEAD>
<BASE TARGET="main">
</HEAD>
<BODY BGCOLOR="DarkSlateBlue" BACKGROUND="menuback.gif" TEXT="white" LINK="LightSkyBlue" ALINK="Orange" VLINK="#FF9900">
<BASEFONT SIZE=2 FACE="Arial, Helvetica, sans-serif" SIZE=-1>

<H3>Main Menu</H3>
<HR NOSHADE>
<A HREF="welcome.html">Velkommen</A>
<P><A HREF="products.html">Varer</A>
<P><A HREF="order.html">Bestill</A>
<P><A HREF="support.html">Service</A>
<P><A HREF="info.html">Info</A>
<HR NOSHADE>

</BODY>
</HTML>

Det som det er viktig å merke seg her, er <BASE> tag'en som vi har brukt for å spesifisere det generelle målet for linkene i denne fila. Enkelt og greitt får den alle linkene i fila til å laste sine målfiler inn i main frame'n.

Alt som gjenstår er å sette opp hovedsidene til site'n. Disse skriver vi nøyatig som om det ikke eksisterte noen frames i det hele tatt. Det er ingen grunn til å bruke <BASE> tag'en, fordi vi ønsker at linkene i alle sidene som lastes inn i main-framen, skal lastes inn i den samme main-framen. Pass på at du husker på brukere som ikke takler frames, og følgelig har et sett navigasjonsmuligheter på samtlige sider.

Jeg har nå sørget for det du trenger til å lage en ok site. Bruk linkene under til å sjekke resultatet, og bruk gjerne koden til å lage din egen site.


 
See it in Action!   |   View the Code

 


Basic Frames   < >   Advanced Issues