Je moet eerst de nodige voorbereidingen treffen voor het opzetten van de website. Maak de gewenste directorystructuur aan. Dit zou er bijvoorbeeld als volgt uit kunnen zien:
boekhouder
---afbeeldingen
---css
Dit is een heel typische directorystructuur. Op het hoofdniveau plaatst men de HTML-pagina's. De CSS-bestanden verhuizen naar de css-directory, terwijl alle afbeeldingen in de afbeeldingen-directory worden opgeslagen. Voeg dus alle afbeeldingen toe aan de afbeeldingen-directory die je eerder uit het ontwerp hebt geknipt.
De basisstructuur opzetten
Maak binnen de css-directory een nieuw CSS-bestand aan. Bind dit vervolgens in je HTML-bestand in. (In mijn voorbeeld zal het HTML-bestand de naam index.html hebben). Dit bestand is vanaf nu het middelpunt van de volgende tutorials.
Voeg allereerst het je al bekende HTML-basiskader toe aan index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Je boekhouder</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Zorg er ook voor dat je meteen het stylesheet-bestand toevoegt. En dan kunnen we beginnen.
Het buitenste element is een div-container.
<div class="hoofdcontainer"> </div>
Deze container kun je meteen opmaken met CSS-syntax.
.hoofdcontainer {
breedte: 100%;
float: links;
}
De hoofdcontainer wordt voorzien van een breedte van 100 procent en float naar links. Voordeel van de breedte ingesteld op 100 procent: je kunt bijvoorbeeld een achtergrondafbeelding met een kleurverloop toevoegen. Deze achtergrond zou dan over de hele schermgrootte lopen.
Ik maak twee extra div-elementen binnen de hoofdcontainer.
<div class="hoofdcontainer"> <div class="container"> <div class="pagina"> </div> </div> </div>
Deze elementen worden ook opgemaakt. Het eigenlijke inhoudsgebied krijgt een breedte van 1000 pixels. Door de opgave van marge: 0px auto; wordt tevens een horizontale centrering van het element bereikt.
.container {
breedte: 1000px;
marge: 0px auto;
}
We gaan verder met de opmaak van het pagina-element.
.pagina {
breedte: 1000px;
float: links;
opvulling: 40px 0px 0px 0px;
}
Dit element is het eigenlijke inhoudsgebied van de pagina. Hierin worden dus alle verdere elementen geplaatst. Ook dit element krijgt een vaste breedte van 1000 pixels. De padding-opgave zorgt voor de definitie van de binnenafstanden. Daarbij wordt de bovenste binnenafstand op 40 pixels gezet, de andere randen op 0 pixels.
Daarmee hebben we nu al de (zeer) ruwe structuur van de lay-out geïmplementeerd.
Nu is het tijd om deze structuur met inhoud te vullen. De pagina wordt eerst in drie rijen verdeeld.
• Koptekst
• Inhoud
• Voettekst
Hiervoor worden drie andere div-gebieden gedefinieerd.
<div class="bovenkant"> </div> <div class="inhoud"> </div> <div class="onderkant"> </div>
Ook deze drie gebieden worden natuurlijk weer opgemaakt met behulp van CSS.
.bovenkant {
achtergrondkleur: #f6f7f7;
breedte: 980px;
float: links;
opvulling: 0px 10px 10px 10px;
}
.inhoud {
breedte: 980px;
float: links;
bovenste opvulling: 8px;
}
.onderkant {
tekstuitlijning: centrum;
breedte: 1000px;
hoogte: 110px;
float: links;
}
De individuele gebieden kunnen nu verder worden vormgegeven.
Laten we eerst kijken naar het koptekstgebied van de pagina. Dit bestaat op zijn beurt uit meerdere elementen:
• Logo/Titel
• Bovenste menu
• Grote afbeelding
Deze drie elementen worden gedefinieerd binnen top.
<div class="bovenkant"> <div class="koptekst"> <div class="bovenkant-koptekst"> <h1>Je boekhouder</h1> </div> <div class="bovenmenu"> Het bovenste menu </div> <div class="koptekst-afbeelding"> </div> </div>
Dit is de basistructuur van het koptekstgebied van de pagina. Ook dat wordt nu natuurlijk weer vormgegeven met behulp van CSS.
.koptekst {
breedte: 980px;
float: links;
}
.bovenkant-koptekst {
breedte: 980px;
hoogte: 87px;
float: links;
}
.bovenmenu {
achtergrondafbeelding: url(../images/menu.jpg);
achtergrond-herhaling: herhaal-x;
breedte: 978px;
hoogte: 37px;
float: links;
}
.koptekst-afbeelding {
achtergrondafbeelding: url(../images/koptekst.jpg);
achtergrond-herhaling: no-herhaling;
achtergrond-positie: links boven;
breedte: 980px;
hoogte: 213px;
float: links;
}
De syntaxis bevat twee "bijzonderheden". Kijk eerst naar de inhoud van de klasse topmenu. Hier vallen twee specificaties over de achtergrondafbeelding.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
De een-pixelafbeelding menue.jpg. wordt ingevoegd. Dit is de kleurovergang in het bovenste menu die jullie bekend is. Met de specificatie background-repeat: repeat-x; wordt de afbeelding horizontaal herhaald totdat het element volledig is opgevuld.
De inhoudssectie verdelen
We gaan verder met het gedeelte van de pagina waar uiteindelijk de inhoud wordt weergegeven. Dit gebeurt binnen het div-element content. Dit gebied is verdeeld in verschillende elementen. Allereerst is er een kleine teaserafbeelding en een welkomstgroet.
De bijbehorende HTML-syntaxis ziet er als volgt uit:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Welkom op onze website</h1> <p>Hier volgt een welkomsttekst</p> </div> </div>
Dit gebied is dus ook opgesplitst in twee delen. Aan de linkerkant wordt de afbeelding weergegeven, aan de rechterkant daarvan de welkomstgroet. Belangrijk hierbij is de klasse content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Deze klasse omvat de afbeelding en de groet. Binnen content-image zijn er nog eens twee andere gebieden.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Welkom</div>
Als u in plaats van deze tweedeling slechts een grote afbeelding of iets dergelijks wilt weergeven, voegt u deze twee delen samen tot een div-element. De CSS-syntaxis voor de tweeelementenvariant ziet er echter als volgt uit:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Het resultaat zou er in de browser nu als volgt uit moeten zien:
We gaan verder met drie andere elementen:
• een linkervak voor tekst,
• een rechtervak voor tekst,
• het rechtermenu.
De HTML-syntaxis ziet er in dit geval als volgt uit:
<div class="teaser"> <div class="left"> Container voor tekst links </div> <div class="right"> Container voor tekst rechts </div> </div> </div> <div class="content-right"> Het rechtermenu </div> </div>
En natuurlijk ook hier de CSS-syntaxis:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Aan het einde van deze tutorial staat de basisstructuur van onze website.
Deze basisstructuur moet nu natuurlijk nog worden gevuld met de bijbehorende inhoud. Dit zal gebeuren in de volgende tutorial.
