<FRAMESET> mærket styrer alle inddelinger af vinduet i rammer. Og det er den eneste funktion, mærket har ... at dele vinduet i rammer. Du kan specificere detaljer angående hvordan vinduet skal deles, men husk, at når du bruger inddelinger, så brug <FRAMESET>.
Kan vi opdele et vindue i mere end 2 dele?
Ja, men pas på at specificere en side for hver ramme, ellers bliver browseren forvirret.
<FRAMESET COLS="20%,20%,20%,20%,20%">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
Det er soleklart, at vi kan lave rammer i flere forskellige størrelser. Husk at checke, at du har regnet rigtigt med hensyn til størrelser, ellers bruger browseren sin egen fortolkning.
<FRAMESET COLS="10%,20%,30%,15%,25%">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
Hvis vi specificerer inddeling til ROWS (vandret) i stedet for COLS (lodret) får vi noget helt andet.
<FRAMESET ROWS="10%,20%,30%,15%,25%">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
Lad os vende tilbage til 2 rammer af samme størrelse, delt lodret.
<FRAMESET COLS="50%,50%">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
</FRAMESET>
Vi kan specificere 50 pixels (punkter) i stedet for 50%. Og vi kan bruge * i stedet for et tal. Tegnet * betyder: brug den resterende plads.
<FRAMESET COLS="50,*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
</FRAMESET>
Det følgende er vigtigt ... lad os antage, at du laver en 100 pixels bred ramme til venstre, og en 100 pixels bred ramme til højre. Da du kører med en 800x600 skærm, laver du det sidste og midterste område 600 pixels bredt. Alting ser flot ud - for dig på din maskine! Min skærm er 640x480. De to 100 pixels brede rammer i kanterne af din side er nu 80 pixels brede på min skærm. Hvis du bruger absolutte dimensioner i dine <FRAMESET> mærker, så husk ALTID at have mindst en * som elastisk ramme. På den måde vil det hele se godt ud for alle, og 'freden vil igen hvile over landet.'
Det er grunden til et hyppigt problem omkring brugen af rammer, som jeg vil rette din opmærksomhed på. Et populært rammelayout er en smal menuramme til venstre og en større hovedramme til højre som det her. Problemet er følgende: Hvis du deler vinduet i rammer med procenter (som fx. <FRAMESET COLS="15%,85%">) ser det sikkert flot ud på din maskine, men for andre med en anden skærmopløsning ser det måske sådan ud.
Grunden er, du angav, at det venstre vindue skulle være 15%. 15% af hvad? 15% af læserens vandrette skærmopløsning. Det betyder, at det venstre vindue kan se anderledes ud på forskellige computere. Hvordan retter vi det, spørger du? Jeg er glad for, du spurgte. Det klares med et absolut tal for venstre ramme og ved at gøre den højre ramme elastisk (såsom <FRAMESET COLS="120,*">). Sådan. Problemet er løst.
Det er fornuftigt at lave en absolut dimension lidt større end nødvendigt, og dermed give indholdet i venstre ramme lidt albueplads. For eksempel - hvis 100 pixels passer lige præcis, så sæt rammens bredde til 120 eller 125 pixels.
En god og smertefri måde til at checke dit layout ved flere forskellige skærmopløsninger er med et smart lille MicroSoft PowerToy ved navn Quickres. Det placerer en lille ikon i bundlinjens bakke og tillader dig herefter at skifte skærmopløsning lynhurtigt og uden genstart af maskine.
Vi kan have mere end en elastisk ramme og angive et størrelsesforhold imellem dem.
<FRAMESET COLS="50,*,2*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
</FRAMESET>
Oversat betyder det: Lav 3 rammer. Lav den første 50 pixels bred. Rest skal deles mellem ramme 2 og ramme 3, men ramme 3 skal være dobbelt så stor som ramme 2. Anbring Lisa i den første ramme, Terri i den anden og Kim i den tredje.
Det er værd at bemærke, at kommandoerne gives i rækkefølge. Den første <RAMME> vises som angivet i den første attribut for størrelse i <FRAMESET> mærket (50/lisa) og den anden med den anden (*/terri) og den tredje med den tredje (2*/kim). Jeg ved, det lyder som logik for burhøns, men det er vigtigt og nødvendigt at understrege specielt.
Hvad nu, hvis vi vil dele kim i to halvdele - vandret? Husk, jeg nævnte, at hvis du vil dele, skal du bruge <FRAMESET> mærket. Først skal vi erstatte Kim med et <FRAMESET> mærkepar.
<FRAMESET COLS="50,*,2*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
Lav 3 rammer.
Lav den første 50 pixels bred.
Resten deles mellem ramme 2 og 3, men ramme 3 skal være dobbelt så stor som ramme 2.
Sæt Lisa i den første ramme, Terri i den anden, og den tredje ramme vil vi dele endnu engang.
Nu skal vi angive hvordan den tredje ramme skal deles.
Vi deler den i to halvdele vandret.
<FRAMESET COLS="50,*,2*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
</FRAMESET>
</FRAMESET>
Og jeg synes, vi skal have Kim tilbage foroven og Tina nederst. Det var det!
<FRAMESET COLS="50,*,2*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
Det var så sjovt, at vi gør det en gang til! Vi deler Lisa vandret i 3 sektioner. Toprammen skal være 50 pixels høj. De andre to kan deles midtvejs. Vi placerer Lisa i alle tre rammer. Her ser du alle ændringerne på en gang.
<FRAMESET COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
Jeg ved, det ikke ser ud af meget. Men faktisk er det sådan, at hvis der laves så mange rammer som her, får hele siden et dårligt layout. En tommelfinger regel angiver 3 rammer som det maksimale på en side. Hvis du helt kan undgå rammerne, er det endnu bedre!
Man bør også tænke på de stakkels mennesker, som bruger browsere uden support af rammer. Selvom næsten alle dine besøgende kan se rammer, findes der det ulykkelige mindretal, som forsøger at surfe nettet med forældet udstyr. Hvis du vil tage lidt hensyn til dem, kan du skrive en rammeløs version af din hjemmeside og indsætte den sådan:
<FRAMESET COLS="50,*,2*">
Men du har sikkert et par spørgsmål nu.
Skal jeg skrive en helt ny side? Sikkert.
</BODY>
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Anbring din rammeløse side her. Hvis nogen bruger en gammel
browser, vil den springe alt det ovenstående over og starte
direkte hernede. Browsere med rammer vil ignore alt mellem
<NOFRAMES> mærkerne.
Hvor mange besøger ikke min side, hvis jeg ikke gør det? Kun få.
Tror jeg, jeg skal gøre noget ved det? Næh.
Bekymrer det dig? Næh.
Hvorfor skrev du så det afsnit i denne tutor?
Fordi det er en hovedfunktion, og jeg ville gerne have, at du
kendte muligheden for at bruge begge udgaver samtidig.
Er du altid ligeså vittig og charmerende? Selvfølgelig.
</NOFRAMES>
Noter, at bortset fra min personlige mening, er der stærke argumenter for at bruge <NOFRAMES> mærket. En hel del virksomheder bruger stadig ældre browsere uden rammesupport. Handicappedes skærmlæse-programmer har reelle problemer med rammer. Og besøgende fra resten af verden (dvs. udenfor USA) kan ofte slet ikke navigere på hjemmesider med rammer af forskellige grunde. Konklusioner er, at hvis din side er "kun med rammer", afskærer du nogle mennesker. Hvis det er vigtigt for dig at nå ud til alle, så tag tiden til at bruge <NOFRAMES> mærket. Jeg takker Matthew Miller fra HTML Writers Guild for at påpege dette.
Introduktion | Lektion 1 | Lektion 2 | Lektion 3 | Lektion 4 | Lektion 5 | Lektion 6 | Lektion 7 |
PROFESSIONAL WEB DESIGN |