Ramme Tutor
Hvordan man indlæser 2 (eller flere) rammer med et museklik
Del 2

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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">

<FONT SIZE="3">Als ven</FONT><BR>
<FONT SIZE="4">Frank</FONT>

</BODY>
</HTML>

SE DET


Og gem dette som al_steve.html:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">

<FONT SIZE="3">Als ven</FONT><BR>
<FONT SIZE="4">Steve</FONT>

</BODY>
</HTML>

SE DET


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>

SE DET

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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">

<FONT SIZE="3">Jakes' ven</FONT><BR>
<FONT SIZE="4">Bob</FONT>

</BODY>
</HTML>

SE DET


Og gem det her som jake_bub.html:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">

<FONT SIZE="3">Jakes' ven</FONT><BR>
<FONT SIZE="4">Bubba</FONT>

</BODY>
</HTML>

SE DET


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>

SE DET


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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE="3">Hughs ven</FONT><BR>
<FONT SIZE="4">Jim</FONT>

</BODY>
</HTML>

SE DET


Og dette som hugh_bil.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE="3">Hughs ven</FONT><BR>
<FONT SIZE="4">Bill</FONT>

</BODY>
</HTML>

SE DET


Dette som ron_paul.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">

<FONT SIZE="3">Rons ven</FONT><BR>
<FONT SIZE="4">Paul</FONT>

</BODY>
</HTML>

SE DET


Og dette som ron_sam.html:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">

<FONT SIZE="3">Rons ven</FONT><BR>
<FONT SIZE="4">Sam</FONT>

</BODY>
</HTML>

SE DET


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>
<HEAD>
<TITLE>Masterside</TITLE>
</HEAD>

</HTML>


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>

</HTML>

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>

SE DET


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>

SE DET


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>

SE DET


- 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.


PROFESSIONAL WEB DESIGN