Vi har nu opbygget en side med et rammesystem, hvor du kan ændre to rammer med et museklik. Nu udvider vi kreationen. Der er to måder at udvide på: Tilføje links eller tilføje rammer.
Først tilføjer vi et link: som dette.
Du får brug for hurtigt at piske 2 målsider mere frem. Gem det som al_frank.html:
<HTML>
<FONT SIZE="3">Als ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE="4">Frank</FONT>
</HTML>
Og gem dette som al_steve.html:
<HTML>
<FONT SIZE="3">Als ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE="4">Steve</FONT>
</HTML>
Nu skal der tilføjes noget i menurammen (direct.html):
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hughs venner</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Rons venner</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Als venner</A><P>
</BODY>
</HTML>
Dermed siges, at ved klik på 'Als venner' sendes al_frank.html & al_steve.html til funktionen (multiLoad()).
Lad os lave en til. Igen får vi brug for to målsider mere. Gem følgende som jake_bob.html:
<HTML>
<FONT SIZE="3">Jakes' ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE="4">Bob</FONT>
</HTML>
Og gem det her som jake_bub.html:
<HTML>
<FONT SIZE="3">Jakes' ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE="4">Bubba</FONT>
</HTML>
Indsæt nu i direct.html:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hughs venner</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Rons venner</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Als venner</A><P>
<A HREF="javascript:multiLoad('jake_bob.html', 'jake_bub.html')">Jakes venner</A><P>
</BODY>
</HTML>
Ikke så slemt, vel?? Det troede jeg heller ikke.
Det sidste, vi skal lære, er at udvide antallet af rammer. Jeg tror, den letteste måde at gøre det på, er at vende tilbage til, da vi kun 2 links i vores menuramme. Derfor redigerer vi 'Als venner' og 'Jakes venner' væk, så du kun har følgende tilbage:
Nu inddeler vi højre side i 4 rammer, sådan her.
Først skal bruge nogle flere målsider - igen.
Gem dette som hugh_jim.html:
<HTML>
<FONT SIZE="3">Hughs ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Jim</FONT>
</HTML>
Og dette som hugh_bil.html...
<HTML>
<FONT SIZE="3">Hughs ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Bill</FONT>
</HTML>
Dette som ron_paul.html...
<HTML>
<FONT SIZE="3">Rons ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE="4">Paul</FONT>
</HTML>
Og dette som ron_sam.html:
<HTML>
<FONT SIZE="3">Rons ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE="4">Sam</FONT>
</HTML>
Nu skulle du i din folder have (foruden andre filer):
1) mastersiden (index.html)
2) menusiden (direct.html)
3) og otte målsider:
- hugh_ed.html
- hugh_cal.html
- hugh_jim.html
- hugh_bil.html
- ron_mike.html
- ron_pete.html
- ron_paul.html
- ron_sam.html
Nu laver vi om på vores masterside. Jeg tror, det er bedst at starte helt forfra. Indlæs derfor index.html og slet hele indholdet. Indsæt derefter følgende for at komme i gang:
<HTML>
</HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
Del vinduet lodret. Til venstre placerer vi direct.html og det højre deler vi mere endnu.
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
SE DET (husk på, at vi ikke er færdige med dette arbejde)
Nu deles højre side vandret i to halvdele ved at indsætte et FRAMESET mærkepar både i topdelen og bunddelen.
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET>
</FRAMESET>
<FRAMESET>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
SE DET (ingen synlige ændringer)
Nu skal hver af disse rammer yderligere deles lodret på midten.
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
</FRAMESET>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
SE DET (ingen synlige ændringer)
Indsæt dine FRAME mærker. (Vi udfylder dem om lidt.)
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Specificer hvilke dokumenter der først skal indlæses i rammerne.
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html">
<FRAME SRC="hugh_bil.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Og - særdeles vigtigt - rammerne skal navngives (igen er det kun nødvendigt at døbe de rammer, som skifter indhold.)
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html" NAME="Frame_C">
<FRAME SRC="hugh_bil.html" NAME="Frame_D">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
SE DET (ingen synlige ændringer)
Nu skal vi pille lidt ved direct.html. Det er sådan, der burde se ud i øjeblikket:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hughs venner</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Rons venner</A><P>
</BODY>
</HTML>
Først skal vi udvide links, så et antal af fire dokumenter kan sendes til funktionen.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hughs venner</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Rons venner</A><P>
</BODY>
</HTML>
Nu tilføjer vi funktionen:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
function multiLoad(doc1,doc2,doc3,doc4) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
parent.Frame_C.location.href=doc3;
parent.Frame_D.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hughs venner</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Rons venner</A><P>
</BODY>
</HTML>
- og det var det!
Jeg vil lige nævne en ting mere, før vi slutter kapitlet. Selvom det er let at lave rammer og smarte måder at navigere imellem dem, husk altid på, at brugeren skal kunne finde rundt i dit system. Og husk, at selvom du kender din hjemmeside ud og ind, gør besøgende det sikkert ikke. Hvis din hjemmeside er kompliceret at finde rundt i, vil de besøgende blot surfe videre på andre hjemmesider og ikke vende tilbage.
Held og lykke!
Tilbage til Ramme Tutor - kapitel 7.