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>
<FRAMESET>
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
</FRAMESET>
Opdel skærmen vandret.
<HTML>
<FRAMESET ROWS="83,*">
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
</FRAMESET>
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>
<FRAMESET ROWS="83,*">
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
<FRAME SRC="banner.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
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>
<FRAMESET ROWS="83,*">
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html">
</FRAMESET>
</FRAMESET>
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>
<FRAMESET ROWS="83,*">
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>
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>
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>
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>
<FRAMESET ROWS="83,*">
</HTML>
<HEAD>
<TITLE>En testside</TITLE>
</HEAD>
<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>
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>
Giv den en overskrift og skriv teksten til alle links. Vi indsætter linkinfo om et øjeblik.
<HTML>
<H3>Menu</H3>
Hjem<P>
Gå hertil<BR>
eller besøg<BR>
<HEAD>
<TITLE>Testside - Menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
eller dertil<P>
Yahoo<BR>
Netscape
</HTML>
Nu tilsætter vi link information.
<HTML>
<H3>Directory</H3>
<A HREF="home.html">Hjem</A><P>
<A HREF="here.html">Gå hertil</A><BR>
eller besøg<BR>
</BODY>
<HEAD>
<TITLE>Testside - Menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A HREF="there.html">eller dertil</A><P>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>
</HTML>
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!
Introduktion | Lektion 1 | Lektion 2 | Lektion 3 | Lektion 4 | Lektion 5 | Lektion 6 | Lektion 7 |
PROFESSIONAL WEB DESIGN |