Vi starter med at opbygge det første eksempel fra grunden af. Lad mig først bemærke, at disse instruktioner er tilpasset brugere af Windows95 (eller ethvert operativsystem, som kan håndtere lange filnavne). Hvis du bruger Windows3x, er du nødt til at bruge filekstension .htm og justere scriptet tilsvarende.
Først skal du bruge nogle målsider. Kopier følgende til NotePad og gem det som hugh_ed.html i en ny folder.
<htm>
<FONT SIZE="3">Hughs ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Ed</FONT>
</HTML>
Gem det som hugh_cal.html.
<HTML>
<FONT SIZE="3">Hughs ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Calvin</FONT>
</HTML>
Gem det som ron_mike.html.
<HTML>
<FONT SIZE="3">Rons ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Mike</FONT>
</HTML>
Og det som ron_pete.html.
<HTML>
<FONT SIZE="3">Rons ven</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE="4">Pete</FONT>
</HTML>
Du bør nu have en folder med fire dokumenter:
Som næste har du brug for en masterside. Den skal have en venstre "menu" ramme og den højre side skal deles vandret i to. Gem det følgende som index.html.
<HTML>
<FRAMESET COLS="160,*">
</HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAME>
<FRAMESET ROWS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Og nu skal vi specificere, hvad der skal vises i hver ramme, når hjemmesiden først indlæses.
(Vi har jo ikke lavet direct.html endnu)
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
</FRAMESET>
</HTML>
Og specielt på grund af det vi arbejder med her, skal du give rammerne et NAME. Eller burde jeg sige: Kun de rammer, som ændrer indhold. I vores eksempel er menu konstant, så den behøver vi faktisk ikke at navngive.
<HTML>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
</FRAMESET>
</HTML>
SE DET (Husk på, at vi ikke har lavet menusiden endnu)
Og dermed er mastersiden færdig.
Det næste, vi behøver, er nu menusiden. Start med det nedenstående og gem det som direct.html.
<HTML>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
</BODY>
SE DET
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
Alt, vi nu mangler, er at tilføje information og JavaScript kommandoer til direct.html.
Først sætter vi links ind:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
Hughs venner<P>
Rons venner<P>
</BODY>
</HTML>
Sæt nu anker mærker omkring links.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A>Hughs venner</A><P>
<A>Rons venner</A><P>
</BODY>
</HTML>
Her bliver det lidt forvirrende, og hvis du er ligesom jeg, bør du tage det stille og roligt.
Først indsættes et sæt JavaScript mærker i dokumentets hoved <HEAD>. Vær sikker på, at det ER i HEAD mærket og ikke nede i BODY mærket.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Gem for gamle, udslidte browsere
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Menu</H3>
<A>Hughs venner</A><P>
<A>Rons venner</A><P>
</BODY>
</HTML>
(ingen synlige ændringer)
Indsæt nu scriptet. Vær ikke bekymret for, hvad det betyder endnu. Bare indsæt det nu - forklaring følger senere.
<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>Hughs venner</A><P>
<A>Rons venner</A><P>
</BODY>
</HTML>
(ingen synlige ændringer)
Nu gør vi links færdige. Endnu engang, skal jeg nok forklare lidt senere, hvad der sker.
<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>
Og det var det.
Nu ser vi nærmere på, hvad der egentlig sker. (hvis du ikke allerede har regnet det ud)
Med hensyn til links:
<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>
indsætter du simpelthen navnene på html filerne. I head mærket anbringer vi en funktion. Det kaldes en funktion, fordi den udfører en handling.
Lad os antage, vi har lavet en funktion ved navn stege(). Den ville stege alt, vi sender til den. Vi kunne stege('kylling') -eller- stege('bacon') -eller- stege('kylling','bacon'). Slutresultatet ville afhænge af hvad vi sender til stege().
I vores eksempel kalder vi funktionen multiLoad(). Og vi giver funktionen ordre til multiLoad('hugh_ed.html', 'hugh_cal.html') eller multiLoad('ron_mike.html', 'ron_pete.html') afhængigt af, hvilket link der klikkes på.
Der er mere:
I funktions delen:
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
... definerer vi funktionen.
Lad mig fortsætte med 'stege' forklaringen. Den første linje i vores funktion svarer til at sige stege(x,y), vi kan sende den kylling,bacon eller fisk,chips eller pandekager,pølser
(bliver du ikke også sulten?).
I vores funktion multiLoad(doc1,doc2) sender vi til den hugh_ed.html,hugh_cal.html eller ron_mike.html,ron_pete.html afhængigt af, hvilke link der klikkes på.
De næste to linjer kode definerer, hvad der skal gøres med hugh_ed.html etc.
I en nøddeskal siger den:
1- Placer doc1 i Frame_A (doc1 er det første argument, der blev sendt til funktionen - hugh_ed.html)
2- Placer doc2 i Frame_B (doc2 er det andet argument, der blev sendt til funktionen - hugh_cal.html)
Jeg ved godt, at jeg sikkert overforklarer dette, men tror at det er bedre end at under-forklare.