Richard,
Wat de structuur van de pagina betreft...
Mijn voorbeeld-pagina staat online, dus kun je die downloaden. Maar ik ben ook zo vrij geweest om de bestanden te zippen en naar jouw mailadres te sturen. Overigens betekent dat niet dat jouw mailadres hier publiek opvraagbaar is, maar als beheerder van MozBrowser heb ik uiteraard wel die mogelijkheid.
Als je het zip-bestand uitpakt dan zie je een bestand met de naam home_en_nieuw.html
Die pagina mag je elke andere naam geven, dat maakt voor de werking niet uit.
CSS
Het volgende bestand is stijl.css. Dat is een stylesheet (stijlblad in Kompozer). Daarin staat zoveel mogelijk de opmaak van de pagina. Als je dat bestand een andere naam geeft dan zul je zien dat de browser niet meer weet hoe die pagina eruit moet zien. Dan is het nog steeds een webpagina en worden alle onderdelen nog steeds getoond, maar niet met de juiste opmaak en ook niet op de juiste plaats. Dat kun je dus eens proberen om te zien hoe dat eruit ziet, maar zet het daarna maar weer snel terug naar de originele naam. Als je deze naam echt wilt aanpassen dan moet je ook de verwijzing in de code van de HTML-pagina naar de nieuwe naam verwijzen. Dan zou dat geen probleem zijn. Vergeet dus ook niet bij het uploaden van de website om dit stijl.css bestand mee te uploaden, want anders ziet de website er heel anders uit. Dan ben je bijvoorbeeld de achtergrondkleur van de pagina kwijt, maar dat zul je dan snel genoeg zien.
Ook in elke nieuwe pagina zul je dus voor de opmaakkenmerken naar dit bestand moeten verwijzen. Dat kan heel eenvoudig en ook Kompozer heeft wel een manier (via het menu Extra > CSS bewerken) om een extern stijlblad aan een webpagina te koppelen. Uiteindelijk moet er in de head van de webpagina de volgende verwijzing komen te staan:
Code: Selecteer alles
<link rel="stylesheet" href="stijl.css" type="text/css">
Daarmee voeg je in 1 klap de opmaak en de structuur van de website aan je webpagina toe en hoef je eigenlijk alleen nog maar de tekst van de pagina in te vullen. Dit is vooral handig als je iets in de opmaak wilt wijzigen, want dat kan dan ook zoveel mogelijk in dat ene 1 centraal CSS-bestand. Al begrijp ik best dat je als leek hier totaal geen verstand van hebt, dus voorlopig hoef je alleen maar te weten dat dit centrale CSS-bestand er is en wat het ongeveer doet.
Titel
De titel van de pagina heb ik nog wat aangepast naar "Pinokkio Alkmaar - tweedehands kinder- en dameskleding". Bedenk dat zo'n titel ook door een zoekmachine als Google wordt gebruikt, dus het is wel handig om daar een goed pakkende titel voor te bedenken. In het geval van de Engelse pagina kun je daar dus ook een Engelse titel bovenaan plaatsen. Je kunt zelfs de taal van de webpagina aangeven, zodat een zoekmachine daar ook weer iets mee kan doen.
Opbouw (div's)
De pagina is vooral uit div's opgebouwd. Als je de code bekijkt dan zie je dat er ook nog wel ergens een table in staat, maar die wordt alleen gebruikt op plaatsen waar een tabelstructuur voor jou waarschijnlijk net wat makkelijker te onderhouden is. Bijvoorbeeld als enkele cellen naast elkaar moeten worden getoond (zoals in het menu, de uitleg van de verdiepingen van het pand en de footer).
Verder is de opzet zo eenvoudig mogelijk: ik ben begonnen met het aangeven van een div met de naam
container. Die heb ik
980 pixels breed gemaakt en voor het centreren heb ik
margin-left: auto; en
margin-right: auto; gebruikt.
Als je dan verder naar onderen kijkt, dan zie je de volgende div's:
header, spacer,
menu,
content, spacer en
footer. Je ziet dus dat ik die spacers gebruik voor de zwarte stukjes tussen de vlakken.
Daarna is de inhoud van de verschillende vlakken redelijk recht-toe-recht-aan. Zo af en toe gebruik ik een
float: left en een
float: right als ik bepaalde zaken naast elkaar wil plaatsen. Al bedenk ik me net dat in het geval van afbeeldingen ook een
align="left" en een
align="right" hetzelfde effect zouden hebben gehad. Dergelijke zaken moet je in Kompozer ook wel via de eigenschappen van een afbeelding kunnen instellen, dus je hoeft zeker niet voor elke aanpassing in de HTML-code van de pagina te duiken.
Tenslotte heb ik op de linkjes naar Twitter en Facebook nog een
target="_blank" geplaatst, zodat ze in een nieuw venster geopend worden. Dan blijft jouw website tenminste nog in het originele venster in het zicht.
Dat is zo ongeveer alles wat ik over de opbouw van de pagina kan vertellen, dus ik hoop dat je zo een goed beeld heb van wat ik heb gedaan en dat je hier zelf verder mee kunt. Mocht je toch nog ergens vragen over hebben dan kun je die gewoon hier op het forum stellen.
