Lad os vende tilbage til noget lidt enklere.
<FRAMESET COLS="50%,50%">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
</FRAMESET>
Vi kan placere billeder i rammerne efter behov. I folderen 'examples' finder du billedet world.gif. Gå videre og kopier det til din arbejdsfolder (der hvor du plejer at gemme dine arbejdsfiler).
<FRAMESET COLS="50%,50%">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
<FRAME SRC="terri.html">
</FRAMESET>
Husk det altid er god praksis at inkludere HEIGHT (højde) & WIDTH (bredde) attributter til alle billedmærker.
Lad os prøve at indramme billedet pænt og ordentligt. Først mindsker vi den venstre ramme til 146 pixels bredde. Da vi bruger en absolut dimension, bør den anden ramme være elastisk.
<FRAMESET COLS="146,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
<FRAME SRC="terri.html">
</FRAMESET>
Som næste deles den venstre ramme vandret i 2 sektioner. En topsektion med 162 pixels højde og bundsektionen til det resterende. Vi indsætter world.gif og Lisa hhv.
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
</FRAMESET>
Som du kan se, er der et lille problem.
Rullegardinerne, du kan se, kan angives som YES, NO eller AUTO.
YES betyder at rammen får rullegardiner - hvad enten der er behov for dem eller ej.
NO betyder ingen rullegardiner, uanset om dit rammeindhold er på størrelse med Amager. Browseren viser simpelthen, hvad den har plads til.
AUTO er standardværdien. Hvis der er behov for rullegardinerne, kommer de frem - hvis der ikke er behov for dem, holder de sig diskret væk.
Lad os nu slippe af med rullegardinerne i vores eksempel.
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
</FRAMESET>
Vi har stadig et lille problem. Billedet mangler lidt til højre i rammen. De næste to attributter tager sig af det med margins. Browseren giver automatisk hver ramme lidt tom plads udenom rammens indhold. Det er normalt nødvendigt af æstetiske grunde. Du kan kontrollere størrelsen af marginer ved at bruge MARGINWIDTH og MARGINHEIGHT. De kontrollerer venstre & højre hhv. top & bund marginer. Vi sætter dem begge til 1. (1 er minimum)
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
</FRAMESET>
Uheldigvis klarer det ikke alt. Ramme dimensioner måles fra center til center.
Der er ogå minimumskanten på 1 pixel at tage hensyn til. Da standarden for kantstørrelse er 6 pixels, skal vi tilføje 8 til hvert billedes dimensioner (halvdelen af 6 plus 1, ganget med 2). Hvis det forvirrer, så tilføj blot 8 til hvert billedes dimensioner for at få rammestørrelsen.
<FRAMESET COLS="154,*">
<FRAMESET ROWS="170,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
</FRAMESET>
Nu vises vores billede perfekt i rammen, eller i det mindste næsten perfekt. Har du nogensinde set et billede i en ramme, der manglede noget på en eller flere af siderne? Hvis du bruger absolutte dimensioner sammen med en elastisk, og hvis du tilføjer 8 til billedstørrelsen for at finde dine rammedimensioner, så skal dit værk nok finde nåde selv for kritiske øjne!*
Introduktion | Lektion 1 | Lektion 2 | Lektion 3 | Lektion 4 | Lektion 5 | Lektion 6 | Lektion 7 |
PROFESSIONAL WEB DESIGN |