Hoe codeer ik een layout?

Ik word redelijk vaak gevraagd om uit te leggen hoe je een layout codeert.. Ik ben graag aardig tegen mijn visitors dus leg het ze uit. Het is alleen veel werk om het zo váák uit te leggen. Daarom is hier de tutorial 'hoe codeer ik mijn layout?'

Om te beginnen heb je een plaatje nodig dat je layout wordt. Het is het handigst om een plaatje van 800 x 600 pixels te nemen, want dan kunnen ook mensen met een klein beeldscherm je site goed zien. Ik ga er van uit dat iedereen zijn plaatje heeft. Dit is de mijne - klikkie. Je mag dit plaatje ook gebruiken, maar geef wel credit!
Ok?. Nu hebben we eerst een programma nodig waarmee je coordinaten kan berekenen. Klik hier om het te downloaden. Dit programma heet Handy Image Mapper. Open het programma, en klik op het gele mapje rechtsboven. Open je plaatje. (Dit ziet er misschien veel donkerder uit, maar daar moet je niet op letten.) Klik op het vierkantje rechtsboven in het scherm. Nu selecteer je het woord 'Home'. Je vult bij tooltip 'home' in en bij HREF 'home.html'. Als je iets niet kan vinden kun je alles bekijken op dit plaatje: klikkie. Doe nu hetzelfde voor 'Me', 'You' en 'Site'. Als je klaar bent klik je op de knop 'Place on Clipboard'.
Nu open je kladblok en neem het volgende over:

<html>

<head>
<title>Titel van je website</title>
</head>

<body>


</body>

</html>

Nu plak je (door op ctrl+V te drukken) de code die je hebt gekopieerd van Handy Image Mapper. Als je de code hierboven had gekopieërd moet je even opnieuw op de knop 'Place on Clipboard' drukken. Nu staat er bij de tag IMG SRC een heel lang woord. Dit is de plek waar je je layout-plaatje hebt opgeslagen op je computer. Dit moet je vervangen door een url. Als het goed is staat er nu dit in je kladblok-document: klikkie.
Als je dit nu opent als internetpagina zie je het plaatje al. Maar we willen natuurlijk niet alleen het plaatje, maar ook de tekst. Daar heb je een iframe voor nodig. Zet deze code tussen je bodytags:

<iframe ALLOWTRANSPARENCY FRAMEBORDER="0" BORDER=0 width=490 height=438 src="home.html" target="inlineframe" iframe name= "inlineframe" style="position:absolute; left:27; top:117" style=background: #EFDCD5; "FILTER: chroma (color=000000)"scrolling=auto></iframe>

Ik ben zo lief geweest om hem al goed neer te zetten voor jullie, maar je hoort dat zelf te doen. Width is de breedte van je iframe, height is de hoogte van je iframe, left is de ruimte tussen de rand aan de linkerkant en je iframe en top is de ruimte tussen de bovenkant en je iframe.
Nu ziet je kladblok-document er zo uit: klikkie. Nu klopt het al bijna helemaal, je hoeft alleen nog TARGET="inlineframe" te zetten achter de 4 links want ze moeten wel openen en je iframe. *maar waar moeten we dat dan zetten juf Karen?* Nou, dat zal ik eens vertellen:

<AREA SHAPE="RECT" COORDS="79,69,174,99" HREF="home.html" TARGET="inlineframe" TITLE="home">
Zo, dat doe je dus bij alle vier de links en klaar is je codering. Nu even je bestand opslaan (bestand > opslaan als > alle bestanden > index2.html) en vous etes fini!


Ik zou het zeer op prijs stellen als je me linkt als je iets hebt aan deze tutorial. Een plaatsje op een credit-page is altijd leuk!
Heb je nog vragen? Stel ze dan op mijn tagboard; klikkie!