Les 4 - Je webpagina verbeteren met afbeeldingen

Nu je in basislayout hebt, is het tijd om er wat meer kleur aan te geven, door middel van afbeeldingen en achtergronden. Dit kunt je heel makkelijk doen door middel van CSS. We pakken onze stylsheet er weer even bij:

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 1em;
 color: #111111;
}
h1, h2, h3, h4, h5, h6, p {
 margin-top: 0px;
 margin-bottom: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
}
#wrapper {
 width: 600px;
 margin-left: auto;
 margin-right: auto
}
#header {
 width: 600px;
 height: 100px;
 background-color: #A8A8A8;
 text-align: center;
}

#content {
 width: 600px;
 background-color: #888888;
}
#footer {
 width: 600px;
 height: 20px;
 background-color: #707070;
 text-align: center;
}

Er staat nu "background-color". Om hier een achtergrondafbeelding van te maken, verander je dit in background-image:url('linknaardeachtergrond.png');.
Om je wat te helpen, heb ik hier 3 achtergrondafbeeldingen, waarmee je deze code mee uit kunt proberen. Klik op deze link om de afbeeldingen te downloaden.

We passen nu de achtergrond aan. Om te voorkomen dat de achtergrond zich herhaalt, voegen we ook de code background-repeat: no-repeat; toe.

#header {
 width: 600px;
 height: 100px;
 background-image:url('images/header.png');
 background-repeat: no-repeat;
 text-align: center;
}
#content {
 width: 600px;
 background-image:url('images/content.png');
 background-repeat: no-repeat;
}
#footer {
 width: 600px;
 height: 30px;
 background-image:url('images/footer.png');
 background-repeat: no-repeat;
 text-align: center;
}

Nu ziet het er al iets beter uit, alleen rekt de achtergrond van het middelste blok niet mee. Dat kunnen we oplossen door de background-repeat regel bij content op background-repeat: repeat-y; te zetten.

De achtergronden staan goed, nu moeten we alleen nog even de titels en de tekst goed uitlijnen en op de juiste afstand van de randen zetten. Voor de "hoofdtekst" moeten we nog een apparte ID aanmaken om ervoor te zorgen dat de tekst ook op goede afstand van de rand staat:

#header {
 width: 600px;
 height: 100px;
 background-image:url('images/header.png');
 background-repeat: no-repeat;
 text-align: center;
 line-height: 5em;
}
#content {
 width: 600px;
 background-image:url('images/content.png');
 background-repeat: no-repeat;
 padding: 10px;
}
#text {
 width: 580px;
 margin-left: auto;
 margin-right: auto;
}
#footer {
 width: 600px;
 height: 30px;
 background-image:url('images/footer.png');
 background-repeat: no-repeat;
 text-align: center;
 line-height: 1.9em;
}

Nu je klaar bent, ziet je pagina er zo uit.
Natuurlijk wil je, als je een site met meerdere pagina's hebt, ook een navigatiebalk maken. Dat gaan we nu doen.

Eerst zullen we even een nieuwe DIV-tag toevoegen en wat links plaatsen, naar de andere pagina's:

<div id="header">
 <h1>Website titel - Pagina titel</h1>
</div>
<div id="navigation">
 <a href="index.html">Homepage</a>
 <a href="overmij.html">Over mij</a>
 <a href="fotos.html">Foto's</a>
 <a href="contact.html">Contact</a>
</div>
<div id="content">
 <p>Tussen deze tag komt je tekst te staan</p>
</div>
<div id="footer">
 <h6>Copyright (c) 2009 Jouwnaam</h6>
</div>

Nu moeten we de CSS stijl voor het navigatieblok invoeren:

#navigation {
 margin-top: 39px;
 width: 590px;
 height: 22px;
 margin-left: auto;
 margin-right: auto;
}

Nu staan de links nog verkeerd uitgelijnd en hebben nog steeds de standaard link-stijl. Dit kunnen we oplossen door aan de links in het menu een class te hangen en deze class in de stylesheet uit te werken. Dit is de HTML code:

<a href="index.html" class="button">Homepage</a>
<a href="overmij.html" class="button">Over mij</a>
<a href="fotos.html" class="button">Foto's</a>
<a href="contact.html" class="button">Contact</a>

En dit is de code voor in de stylesheet:

a.button {
 display: block;
 float: left;
 width: 118px;
 height: 22px;
 background-color: #787878;
 color: #FFFFFF;
}
a.button:hover {
 background-color: #989898;
 color: #000000;
}
a.button:active {
 background-color: #686868;
 color: #FFFFFF;
}

Zoals je kan zien, veranderd de kleur van de link als je er met je muis overheen gaat. Dit zie je in de class a.button:hover { }. Als je de link indrukt, veranderd de tekstkleur weer in wit. Verder zie je dat de links ook een achtergrondkleur hebben, aan de linkerkant aansluiten en dat ze weergeven worden als blokken.

Nu ziet je pagina er zo uit.

In plaats van een achtergrondkleur, zou je ook een achtergrondafbeelding kunnen gebruiken.

Hieronder nog een keer de volledige code van de pagina die je nu hebt gemaakt.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>De titel van je pagina</title>
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <h1>Website titel - Pagina titel</h1>
   <div id="navigation">
    <a href="index.html" class="button">Homepage</a>
    <a href="overmij.html" class="button">Over mij</a>
    <a href="fotos.html" class="button">Foto's</a>
    <a href="download.html" class="button">Downloads</a>
    <a href="contact.html" class="button">Contact</a>
   </div>
  </div>
  <div id="content">
   <div id="text">
    <p>Hier komt je tekst te staan!</p>
   </div>
  </div>
  <div id="footer">
   <h6>Copyright (c) 2009 Jouwnaam</h6>
  </div>
 </div>
</body>
</html>

CSS:

body {
 font-family: arial, helvetica, sans-serif;
 font-size: 1em;
 color: #111111;
}
h1, h2, h3, h4, h5, h6, p {
 margin-top: 0px;
 margin-bottom: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
}
#wrapper {
 width: 600px;
 margin-left: auto;
 margin-right: auto
}
#header {
 width: 600px;
 height: 100px;
 background-image:url('images/header.png');
 background-repeat: no-repeat;
 text-align: center;
 line-height: 5em;
}
#content {
 width: 600px;
 background-image:url('images/content.png');
 background-repeat: no-repeat;
 padding: 10px;
}
#text {
 width: 580px;
 margin-left: auto;
 margin-right: auto;
}
#footer {
 width: 600px;
 height: 30px;
 background-image:url('images/footer.png');
 background-repeat: no-repeat;
 text-align: center;
 line-height: 1.9em;
}
#navigation {
 margin-top: 39px;
 width: 590px;
 height: 22px;
 margin-left: auto;
 margin-right: auto;
}
a.button {
 display: block;
 float: left;
 width: 118px;
 height: 22px;
 background-color: #787878;
 color: #FFFFFF;
}
a.button:hover {
 background-color: #989898;
 color: #000000;
}
a.button:active {
 background-color: #686868;
 color: #FFFFFF;
}