 Frames
En html-fil, der bruger frames bruger "rammerne" (frames) til at vise andre html-filer. En
frame-side har altså ikke noget indhold i sig selv, men viser andre siders indhold.
En html-fil med frames er altså opbygget således:
Koden, som definerer frames (framesettet) placeres ALTID i <head>-sektionen!
Vi vil lave en side, som er opbygget på følgende måde:
Frame 1 skal indeholde en overskrift og et logo for siden
Frame 2 er til en menu
Frame 3 er til selve indholdet på siden
Frame 4 er til nyheder og andre aktuelle ting på siden
Først skal vi definere, at der er to rækker af frames på siden (rækken med frame 1 og rækken med frame 2-4).
Det gør vi med tagget <frameset>
Til det tag hører attributterne rows og cols, som hver især definerer størrelsen på de enkelte rækker (rows) og kolonner (cols).
Skriver man fx rows="85px,*" bestemmer man, at den øverste række skal fylde præcis 85 pixels fra toppen af siden og nedad. * (stjerne) indikerer, at den nederste række skal udfylde den resterende plads.
Samlet bliver det til:
Man kunne også vælge at angive størrelsen i procent. Forskellen er, at med pixels forbliver rækkens højde den samme, uanset om man ændrer på browservinduet størrelse. Med procent følger størrelsen med.
Med procent:
Nu skal vi have defineret, hvad den første frame (frame 1) skal indeholde. Det gør vi med tagget <frame>, hvor vi skal bruge følgende attributter:
name giver framen et navn (skal bruges til navigation)
src bestemmer, hvilken fil framen skal vise
scrolling bestemmer, om man skal kunne se en scrollbar. (Værdierne: yes, no, auto)
frameborder bestemmer, om der skal være en ramme om framen (Værdierne 1 og 0)
<frameset rows="85px,*">
<frame name="logo" src="logo.html" scrolling="no" frameborder="0"> |
Her har vi angivet, at framens navn er "logo", og at den fil, som skal vises i framen, hedder "logo.html".
Desuden har vi angivet, at man ikke skal kunne scrolle i framen (den skal alligevel kun vise et logo), og at der ikke skal være en ramme om framen.
Den næste række i framesettet indeholder tre kolonner (frame 2, 3 og 4), og dem skal vi først ha' defineret størrelsen på i et nyt frameset.
<frameset cols="150px,*,200px"> |
Her er angivet, at frame 2 skal være præcis 150 pixels bred.
Frame 3 (*) skal udfylde al resterende plads, og
Frame 4 skal være præcis 200 pixels bred.
Med det hele ser vores frameset nu sådan ud:
<frameset rows="85px,*">
<frame name="logo" src="logo.html" scrolling="no" frameborder="0">
<frameset cols="150px,*,200px"> |
Nu mangler vi kun at definere de sidste tre frames, samt at afslutte vores frameset-tags, og det kommer til at se sådan ud:
<frameset rows="85px,*">
<frame name="logo" src="logo.html" scrolling="no" frameborder="0">
<frameset cols="150px,*,200px">
<frame name="menu" src="menu.html" scrolling="no" frameborder="0">
<frame name="indhold" src="home.html" scrolling="auto" frameborder="0">
<frame name="news" src="news.html" scrolling="yes" frameborder="0">
</frameset>
</frameset> |
Læg mærke til, at i indholds-framen (frame 3) er scrolling sat til "auto". Dette betyder, at hvis indholdet i framen kommer til at fylde mere, end der er plads til, så tilføjer browseren automatisk en scrollbar.
I nyheds-framen (frame 4) er scrolling sat til "yes", hvilket betyder, at der altid vil være en synlig scrollbar (aktiv eller pasiv).
Så laver man en html-fil, der ser ud som følger:
<html>
<head>
<title>Min hjemmeside</title>
<frameset rows="85px,*">
<frame name="logo" src="logo.html" scrolling="no" frameborder="1">
<frameset cols="75px,*,100px">
<frame name="menu" src="menu.html" scrolling="no" frameborder="1">
<frame name="indhold" src="home.html" scrolling="auto" frameborder="1">
<frame name="news" src="news.html" scrolling="yes" frameborder="1">
</frameset>
</frameset>
</head>
<body>
Min side bruger frames, og derfor kan (næsten) ingen browsere se dette!
</body>
</html> |
- og gemmer den som "index.html"
HUSK, at framesettet placeres imellem <head> og </head>
Det eneste man mangler at gøre nu, er at lave de html-filer, som de forskellige frames skal vise.
I dette tilfælde altså:
logo.html
menu.html
home.html
news.html
ex.6: Se "index.html" i et vindue
|
F A G E T
formål
