Ramme Tutor - Lektion 5

Nu skal vi lave en rammebaseret side fra grunden af.

Ikke en fantastisk kreation, kun noget i denne retning.

Før vi starter, vil jeg betone, at KISS princippet i højeste grad gælder ved design med rammer (KISS = Keep It Simple, Stupid). En hjemmeside med en masse rammer og links til alverdens steder bliver let forvirrende at opbygge og endnu mere forvirrende at navigere.

Og da det er sagt, så lad os komme i gang!

Først skal vi planlægge, hvordan slutresultatet skal se ud. Jeg tror, vi får et godt og enkelt design med et banner på tværs af toppen, en menuramme til venstre og hovedrammen til højre. Vi laver mastersiden først.

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

Lav en anden ny folder og gem mastersiden som index.html. Billedet til banneret er overskriften "MY FRAMZ PAGE" (Min rammende side) og hedder framz1.gif og det ligger i framz folderen. Kopier det til arbejdsfolderen, du lige har oprettet.


Opdel skærmen vandret.

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
</FRAMESET>

</HTML>

Bemærk, at vi får 83 ved at lægge 8 til billedets højde (75+8=83). Også, at da vi bruger en absolut dimension, skal vi inkludere en elastisk ramme.


Som næste placerer vi siden banner.html i toprammen (vi laver først siden banner.html om lidt). Vi sætter også et <FRAMESET> mærkepar ind, fordi vi vil dele bundsektionen yderligere.

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

SE DET

Du kan godt se hjemmesiden nu, men får fejlmeddelelser, fordi den endnu ikke er komplet.


Vi opdeler bundrammen i to sektioner og angiver, at den venstre ramme indlæser directry.html og den højre ramme indlæser home.html. (Men vi har stadig ikke lavet disse sider, så du får igen en fejlmeddelelse (eller to) (eller tre)).

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directry.html">
    <FRAME SRC="home.html">
  </FRAMESET>
</FRAMESET>

</HTML>

SE DET


Da menuen skal være til venstre, og siderne indlæses i højre ramme, bør vi give den højre ramme et navn. Det er den eneste af siderne, der får stof indlæst og derfor også den eneste, der har brug for et navn.

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directry.html">
    <FRAME SRC="home.html" NAME="MAIN-WINDOW">
  </FRAMESET>
</FRAMESET>

</HTML>

SE DET

OK, så er vi færdig med mastersiden - i øjeblikket.


Nu laver vi banner.html. Start med følgende og gem det.

<HTML>
<HEAD>
<TITLE>Test side - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>

Noter, at vi angav baggrundsfarven til at være blå.

SE banner.html          SE Master Page


Indsæt billedet og <CENTER> (centrer) det.

<HTML>
<HEAD>
<TITLE>Testside - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>

SE banner.html          SE masterside

Når vi er ved det, vil jeg nævne, at hvis du ser på koden til mine sider for at hjælpe dig med at opbygge dine egne sider, finder du sikkert noget, som ikke giver mening eller strider mod, hvad jeg fortæller andetsteds.

Det er fordi, jeg nogle gange er nødt til at få mine sider tilpasset med et par kneb, så lektionerne ser rigtigt ud for læserne. Lyder det fornuftigt?

Hvis ikke, så lad være med at se på htmlkoden, for så er der ikke grund til at forvirre dig selv.


Allright. Som du ser, er der nogle problemer. Vi har et rullegardin i vejen og billedet er ikke anbragt godt i rammen. Åben din masterside. Sluk for rullegardinet og slip af med marginerne.

<HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directry.html">
    <FRAME SRC="home.html" NAME="MAIN-WINDOW">
  </FRAMESET>
</FRAMESET>

</HTML>

SE DET


Nu laver vi menusiden. Start med følgende og gem det som directry.html.

<HTML>
<HEAD>
<TITLE>Testside - menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>

SE directry.html          SE masterside


Giv den en overskrift og skriv teksten til alle links. Vi indsætter linkinfo om et øjeblik.

<HTML>
<HEAD>
<TITLE>Testside - Menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Menu</H3>

Hjem<P>

Gå hertil<BR>
eller dertil<P>

eller besøg<BR>
Yahoo<BR>
Netscape

</BODY>
</HTML>

SE directry.html          SE masterside


Nu tilsætter vi link information.

<HTML>
<HEAD>
<TITLE>Testside - Menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.html">Hjem</A><P>

<A HREF="here.html">Gå hertil</A><BR>
<A HREF="there.html">eller dertil</A><P>

eller besøg<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>

</BODY>
</HTML>

SE directry.html          SE masterside


Var DET ikke sjovt! Næ, det tror jeg heller ikke. Tag pause nummer 5, stræk, gå på toilettet, få en kop kaffe, klø dig på ... et eller andet, gør noget! Kort sagt, tag en lille pause. Det gør jeg!

<--TILBAGE        NÆSTE-->

Introduktion Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7
PROFESSIONAL WEB DESIGN