Du er her: WebStudie Websmeden Frames / Rammer Retur til start

Frames / rammer

Mange af de websteder du ser på Internet benytter frames. Frames er en måde, hvorpå du har mulighed for at opdele browser-vinduet i flere selvstændige rammer. Ofte benyttes frames til at indsætte en navigationsbar enten yderst til venstre og/eller i toppen af siden.

Til toppen

Fordele og ulemper

Fordele:

  1. Hurtig og nem navigation på webstedet.
  2. Personen der skal konstruere webstedet undgår unødigt arbejde.
  3. Webstedet fylder mindre fordi koden kun skal optræde èn gang.
  4. Sikrer et sammenhængende design.
  5. Giver en nem mulighed for at vise søgekriterier sammen med resultatet.
  6. Nedsætter access-tiden (tilgangstiden), da det normalt kun er HTML-dokumenter i den ene ramme, som udskiftes ved link eller søgninger. Indholdet i øvrige rammer bevares.

Ulemper:

  1. Udskrivning af et enkelt HTML-dokument er lidt mere kompliceret.
  2. Da bogmærker/favoritter kun kan indeholde én URL kan du ikke bogmærke en specifik kombination af rammer.
  3. Nogle (ældre) browsere understøtter ikke frames (rammer).
Til toppen

Grundlæggende frames (ramme) kommandoer:

<Frameset …>

Anvendes med attributterne rows, cols, frameborder, border, framespacing, bordercolor, onfocus, onblur, onload og onunload. Det er dog kun rows, cols og frameborder der understøttes af både Internet Explorer og Netscape Communicator, så du skal nok være forsigtig med resten, medmindre det skal anvendes på et intranet og du ved at den anvendte browser understøtter de valgte "teknikker".
Til toppen

Rows

Angiver antallet af vandrette rækker, som du vil have browser-vinduet opdelt i. Højden af de enkelte rækker angives enten i procent (%), pixels eller du kan vælge at tage resten (*). Du kan dele det resterende mellem to rækker, så den ene får 2/3 og den anden 1/3 af pladsen (2*, *).

EKSEMPEL
<FRAMESET ROWS="150, 20%, *">

. . .

</FRAMESET>

Ovenstående opdeler browser-vinduet i tre vandrette rækker. En der er 150 pixels høj, en der er 20 % af den samlede tilgængelige højde, og en der fylder "resten" i højden.
Til toppen

Cols

Angiver antallet af kolonner, som du vil have browser-vinduet opdelt i. Bredden af de enkelte kolonner angives enten i procent (%), pixels eller du kan vælge at tage resten (*). Anvendes præcist som rows, blot får du altså lodrette kolonner med en bOlivede i stedet.
Til toppen

Frameborder (synlig rammekant)

Angiver om der skal være en synlig kant mellem rammerne. Ved værdien "0" vil der ikke være en synlig rammekant, hvorimod værdien "1" angiver, at der skal vises en rammekant

EKSEMPEL
<FRAMESET ROWS="150, 20%, *" FRAMEBORDER="1">

. . .

</FRAMESET>

Ovenstå;ende vil resultere i, at der vises en tydelig kant mellem rammerne.
Til toppen

Border, Framespacing (tykkelsen af rammekant)

Border (Netscape) og Framespacing (Explorer) angiver tykkelsen af rammekanten i pixels. En værdi på "0" betyder, at der ikke skal være en tydelig kant. En værdi på "1" og opefter angiver kantens tykkelse i pixels. Standard (default) værdien er "5".

EKSEMPEL
<FRAMESET ROWS="150, 20%, *" FRAMEBORDER="1" BORDER="2" FRAMESPACING="2">

. . .

</FRAMESET>

Ovenstående sætter tykkelsen af rammekanten til 2 pixels. Da rammekanten skal have effekt både i Netscape og Explorer benyttes både attributterne BORDER og FRAMESPACING. Hvis attributten FRAMEBORDER var sat til "0" ville dette undertrykke den angivne tykkelse af rammekanten.
Til toppen

onFocus, onBlur

Anvendes til at eksekvere JavaScript kode, når en ramme er henholdsvis aktiv og passiv. Efter traditionelle JavaScript regler bør attributterne skrives som onFocus og onBlur.
Til toppen

onLoad, onUnload

Anvendes til at eksekvere JavaScript kode når en ramme henholdsvis loades og unloades. Efter traditionelle JavaScript regler bør attributterne skrives som onLoad og onUnload.
Til toppen

<Frame …>

Name (rammenavn)

Attributten NAME tildeler den enkelte ramme et navn. Rammenavnet benyttes af target kommandoen for at kunne navigere mellem rammerne og kan også anvendes af Java applets til at indsætte elementer på det rigtige sted vha. getappletcontext ( ).showdokument. Der findes fire reserveOlivee navne ( _blank, _top, _parent og _self ) der anvendes sammen med target kommandoen.

EKSEMPEL
<FRAMESET ROWS="150, 20%, *" FRAMEBORDER="1" BORDER="2" FRAMESPACING="2">

   <FRAME NAME="navi">
   <FRAME NAME="bann">
   <FRAME NAME="main">

</FRAMESET>

Tip: Den ramme, hvor du typisk vil vise dine HTML-dokumenter, bør du give rammenavnet "main". Mange Java-applets mv. kræver en ramme med navnet "main".
Til toppen

SRC (kilden/adressen på et HTML-dokument)

Attributten SRC bestemmer hvilke HTML-dokumenter, som skal vises i de forskellige rammer, når framesettet indlæses i browseren. SRC-værdien angives som URL'en (adressen) på HTML-dokumentet. Værdien kan fx. angives som "min-side.html" eller som absolut adresse "http://www.mit-websted.dk/min-side.html"

EKSEMPEL
<FRAMESET ROWS="150, 20%, *" FRAMEBORDER="1" BORDER="2" FRAMESPACING="2">

   <FRAME NAME="navi" SRC="navigation.html">
   <FRAME NAME="bann" SRC="banner.html">
   <FRAME NAME="main" SRC="hoved.html">

</FRAMESET>

Navigation.html er URL’en på det HTML-dokument, der skal vises i rammen "navi" osv.
Til toppen

Scrolling (elevator)

Attributten SCROLLING styrer om der må vises scrollbarer i de enkelte rammer. Scrollbarer er aktuelle, hvis HTML-dokumentet fylder mere en rammens størrelse. Syntaksen for SCROLLING er som følger:

"yes" resulterer i at der altid er en scrollbar (i Netscape) mens der er kun er en scrollbar (i Explorer) hvis dokumentet er større end den allokeOlivee plads.

"auto" betyder (i Netscape) det samme som "yes" betyder (i Explorer).

"no" angiver i begge browsere at scrollbars ikke fremkommer.

EKSEMPEL
<FRAMESET ROWS="150, 20%, *" FRAMEBORDER="1" BORDER="2" FRAMESPACING="2">

   <FRAME NAME="navi" SRC="navigation.html" SCROLLING="yes">
   <FRAME NAME="bann" SRC="banner.html" SCROLLING="no">
   <FRAME NAME="main" SRC="hoved.html" SCROLLING="auto">

</FRAMESET>

Til toppen

Marginwidth (margenbOlivede)

Attributten MARGINWIDTH specificerer bOliveden af højre og venstre rammemargen. Værdien angives i pixels.
Til toppen

Marginheight (margenhøjde)

Attributten MARGINHEIGHT specificerer højden af øverste og nederste rammemargen. Værdien angives i pixels.
Til toppen

Noresize (ingen tilpasning af ramme størrelsen)

I standard tilstanden kan størrelsen af en ramme ændres af brugeren ved at trække i linierne. Attributten NORESIZE slår denne mulighed fra.
Til toppen

Avancerede frames (rammer)

Undgå at blive fanget i fremmed frameset (rammer i rammer)

Når du endelig har fået lavet dit eget lille websted, så er du selvfølgelig ikke interesseret i, at webstedet eller dine HTML-dokumenter bliver vist som en del af et fremmed websted, som også anvender rammer.

Det er der heldigvis råd for. Med et simpelt lille JavaScript, der placeres i HEAD-sektionen sikrer du dig, at dit websted eller dine HTML-dokumenter altid vil fylde hele browser-vinduet. Hvis du selv anvender frames, skal JavaScriptet kun placeres i det dokument, hvor du har defineret dit frameset. Hvis du ikke anvender frames, skal JavaScriptet placeres på samtlig HTML-dokumenter.

Nedenfor ser du et eksempel på, hvorledes JavaScriptet kan placeres:

EKSEMPEL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Indholdsfortegnelse</TITLE>
<SRCIPT LANGUAGE="JavaSrcipt">
<!—
if (self != top) top.location.href = document.location.href;
// -->
</SRCIPT>
</HEAD>
<BODY>

Her står selve brødteksten.

</BODY>
</HTML>

Til toppen

Sikrer at dit HTML-dokument kun kan vises i dit frameset

Når du har været på nettet i en periode med dit eget websted, så vil du på et tidspunkt opleve, at et andet websted eller en af nettets mange søgetjenester henviser eller linker direkte til mindst et af dine HTML-dokumenter.

Forestil dig, at du anvender et frameset, hvor du eksempelvis har en navigationsbar og en besøgstæller fordelt på to rammer til venstre, og selve tekstsiderne vises i "main"-rammen til højre (se nedenfor). Hvis der så henvises eller linkes direkte til en af de sider, som normalt vises i rammen "main", vil siden blive vist uden navigationsbaren og tælleren til venstre. Dette kan betyde, at brugeren af dit websted mister overblikket over webstedet.

BROWSER-VINDUE
Denne ramme hedder NAME="menu" og viser HTML-dokumentet "menu.html". Denne ramme hedder NAME="main" og viser fx. HTML-dokumentet "velkomst.html".

Det er i denne ramme, at alle tekstsider vises.
Denne ramme hedder NAME="counter" og viser HTML-dokumentet "counter.html".

Ved hjælp af et avanceret frameset og et simpelt JavaScript på hver eneste af de tekstsider, som skal vises i "main"-rammen, kan du sikrer dig, at alle dine sider altid vises i dit frameset.

Nedenfor ser du et eksempel på, hvordan koden til framesettet kan se ud:

EKSEMPEL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Mit websted</TITLE>
<SCRIPT>
function ReadCookie() {
if (document.cookie) {
CookieString = document.cookie;

i = CookieString.indexOf("WSContent");

if (i>=0) {

CookieString = CookieString.substring(i+9,CookieString.length);

i = CookieString.indexOf("=");
j = CookieString.indexOf(";");

if (j<0) j=CookieString.length;

if ((i>=0) && (i<j)) return CookieString.substring(i+1,j);
};
};
return "";
};

document.write('<frameset cols="160,*" rows="100%" frameborder="no" border="0" framespacing="0">');
document.write('<frameset rows="*,65">');
document.write('<frame src="menu.html" name="menu" scrolling="auto" marginwidth="0" marginheight="10">');
document.write('<frame src="counter.html" name="counter" scrolling="auto" marginwidth="0" marginheight="0">');
document.write('</frameset>');
dest=ReadCookie(); dest=unescape(dest)
if (dest.length)
document.write('<frame src="' + dest + '" name="main" border="0" frameborder="no" marginwidth="15" marginheight="10" scrolling="auto">');
else
document.write('<frame src="velkomst.html" name="main" border="0" frameborder="no" marginwidth="15" marginheight="10" scrolling="auto">');
document.write('</frameset>');
</SCRIPT>
</HEAD>

<NOFRAMES>

Dette websted anvender frames (=rammer), hvilket din browser ikke kan vise.

</NOFRAMES>

</HTML>

I alle de HTML-dokumenter, der normalt skal vises i den ramme som hedder "main", placeres et JavaScript. Dette JavaScript tjekker om der er en ramme som hedder "menu" til venstre. Hvis dette ikke er opfyldt indlæses ovennævnte frameset med det aktuelle HTML-dokument i rammen "main".

Nedenfor ser du et eksempel på et HTML-dokument:

EKSEMPEL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Mit HTML-dokument</TITLE>
<SRCIPT LANGUAGE="JavaSrcipt">
<!—

function checkFrames() {
if ((top.frames.length) && (top.frames[0].name == "menu"))
document.cookie="WSContent=; path=/";
else
loadFrameset();
};

function loadFrameset() {
if ((window.location.href) && (window.location.href.length)) {
document.cookie="WSContent=" + escape(window.location.href) + "; path=/";
};
top.window.location.href = "/";
};

// -->
</SRCIPT>
</HEAD>
<BODY ONLOAD="checkFrames()">

Her står selve brødteksten.

</BODY>
</HTML>

path=/" angiver den sti, som vises i browser-vinduets adressefelt.

For at JavaScriptet kan aktiveres skal onLoad="checkFrames()" placeres i dokumentets BODY-element.
Til toppen

Aktivering af sider i frames (rammer)

Target (mål)

Attributten TARGET bestemmer målet for et givent link. Hvis du klikker på et link for at åbne et nyt HTML-dokument, så vil værdien for TARGET angive, hvor (i hvilken ramme eller i hvilket browser-vindue) det nye HTML-dokument åbnes.

Værdien angives som navnet på den ramme, hvor HTML-dokumentet skal åbnes. Eksempelvis betyder TARGET="main" at dokumentet åbnes i den ramme som har navnet NAME="main".

Nedenfor ser du de standard værdier, som findes for attributten TARGET. Du skal altså ikke give dine rammer et af nedennævnte navne.

I eksemplet herunder vil alle links åbne et nyt HTML-dokument i rammen "main".

EKSEMPEL
<HTML>
<HEAD> </HEAD>

<BODY>

<H1>Navigation</H1>
<A HREF="overs.html" TARGET="main">Oversigt</A><BR>
<A HREF="spec.html" TARGET="main">Specifikationer</A><BR>
<A HREF="bestil.html" TARGET="main">Bestilling</A>

</BODY>
</HTML>

Ved at angive <BASE TARGET="main"> i HEAD sektionen opnås det samme resultat som i ovenstående eksempel.
Til toppen

Flere samtidige opdateringer

Har du behov for at indlæse forskellige HTML-dokumenter i flere rammer samtidig, når der klikkes på et link, kan dette gøres på to måder. Du kan enten samle rammerne i et enkelt frameset, eller du kan benytte JavaScript. Metoden med at samle rammerne i et enkelt frameset fungerer, men har den væsentlige ulempe at rammerne skal være "naboer". JavaScript løsningen er mere elegant, men forudsætter at browseren understøtter JavaScripts. Dette er dog ikke noget problem, hvis du benytter Internet Explorer eller Netscape Navigator, da de begge understøtter JavaScripts fra og med version 3.

I det viste eksempel anvendes en JavaScript løsning.

Først laves et frameset. Nedenfor ser du et frameset, som består af to vandrette rækker (rows), hvor den nederste række er opdelt i tre lodrette kolonner (cols).

BROWSER-VINDUE
Denne ramme hedder NAME="top" og viser dokumentet "Top-Frame.html"
Denne ramme hedder NAME="bund-left" og viser dokumentet "bund-left.html" Denne ramme hedder NAME="bund-middle" og viser dokumentet "bund-middle.html" Denne ramme hedder NAME="bund-right" og viser dokumentet "bund-right.html"

Koden til det viste frameset er lidt mere kompliceret end du har set tidligere, da det er sammensat af to framesets. Koden kunne eksempelvis se ud som nedenfor:

EKSEMPEL
<HTML>
<HEAD>
<TITLE>Updaterer Flere Frames Samtidigt</TITLE>
</HEAD>
<!-- danner to vandrette rækker -->
<FRAMESET ROWS="50%,*">
          <!-- dokumentet "Top-Frame.html" vises i den øverste af de vandrette rækker, som har navnet "top" -->
          <FRAME SRC="Top-Frame.html" NAME="top">
          <!-- danner tre kolonner i den nederste vandrette række -->
          <FRAMESET COLS="*,*,*">
                    <!-- dokumentet "bund-left.html" vises i den venstre kolonne, som har navnet "bund-left" -->
                    <FRAME SRC="bund-left.html" NAME="bund-left">
                    <!-- dokumentet "bund-middle.html" vises i kolonnen i midten, som har navnet "bund-middle" -->
                    <FRAME SRC="bund-middle.html" NAME="bund-middle">
                    <!-- dokumentet "bund-right.html" vises i den højre kolonne, som har navnet "bund-right" -->
                    <FRAME SRC="bund-right.html" NAME="bund-right">
          </FRAMESET>
</FRAMESET>

HTML-dokumentet "Top-Frame.html", som vises i den øverste ramme med navnet NAME="top", kan indeholde et link, som ved aktivering både indlæser HTML-dokumentet "Resultat1.html" i rammen NAME="bund-left" og HTML-dokumentet "Resultat2.html" i rammen NAME="bund-right" i samme sekvens. Nedenfor kan du se hvordan koden til HTML-dokumentet "Top-Frame.html" kunne se ud:

EKSEMPEL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Indholdsfortegnelse</TITLE>
<SRCIPT LANGUAGE="JavaSrcipt">
<!—
function UpdaterCeller() {
top.bund-left.location = "Resultat1.html";
top.bund-right.location = "Resultat3.html";
}
// -->
</SRCIPT>
<!-- når funktionen UpdaterCeller kaldes indsættes "Resultat1.html" i rammen der er navngivet bund-left osv. -->
</HEAD>
<BODY BGCOLOR="white" TEXT="black">

Når dette <A HREF="Resultat1.html" TARGET="bund-left" OnClick="UpdaterCeller()"> link </A> aktiveres med browsere der understøtter JavaScript, vil kolonnerne bund-left og bund-right bliver opdateret samtidig.

</BODY>
</HTML>

I det sidste eksempel nedenfor ser du et forslag til koden for HTML-dokumentet "Resultat1.html". BODY-elementet sætter baggrundsfarven til hvid og tekstfarven til sort, og dokumentet indeholder teksten "Resulterende Celle 1", der er defineret som en centreret overskrift.

EKSEMPEL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Resulterende Celle 1</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">

<H1 ALIGN="center">Resulterende Celle 1</H1>

</BODY>
</HTML>

Til toppen

[ start ]   [ indhold ]   [ e-mail ]