Knutselpagina: fase 1
De header
In deze eerste fase van het knutselwerk maken we de kop in orde.
De achtergrond-afbeelding voor de kop wordt er in gezet, het logo wordt geplaatst, de
website-titel wordt in de kop gezet, en het horizontale menu wordt aangelegd.
- Zie de broncode voor hoe dat in dit geval gedaan is.
De opletpunten om nu rekening mee te houden zijn:
- Alle links
<a href="...">naar de pagina's in het hoofdmenu moeten het "absolute pad" hebben om er te komen, met alle tussenstappen vanaf het begin van de site. - Dus niet:
<a href="uitvindingen/wiel.php">of<a href="../homepage.php">
maar:
<a href="http://developerscorner.nl/csshunter/phpsite/uitvindingen/wiel.php">en
<a href="http://developerscorner.nl/csshunter/phpsite/homepage.php"> - Voor de
src="..."van alle images in de kop geldt hetzelfde: ook die moeten hun absolute naam krijgen. - Voor de
{ background: url(/images/...); }achtergrond-afbeeldingen in de css hoeft het niet persé. Daar kan later een kleine aanpassing voor plaatsvinden om de verwijzingen in orde te krijgen. Maar het is wel zo makkelijk om ook daar steeds het absolute pad op te geven.
De reden hiervoor is, dat de kop later apart wordt gezet als in te sluiten php-include. Die is voor alle pagina's hetzelfde, en dan moeten de links/images dus geopend kunnen worden vanuit alle pagina's in willekeurige mapjes op de site. En een "relatief pad" dat voor een bepaalde pagina geldt, hoeft helemaal niet te kloppen voor een andere pagina. - Ook css-styles komen later als stylesheet in een apart mapje, met een eigen relatie tot het images-mapje.
Verdere tips:
- Controleer al knutselend de resultaten in verschillende browsers (en niet in
ingebouwde browsers van html-editors).
Aanbeveling: begin met Firefox, en pas als die goed gaat Internet Explorer bekijken (momenteel in gebruik: versies 6, 7 en 8; die kunnen verschillen...) en daarvoor zonodig aanpassingen maken.
Bekijk de resultaten ook in Opera, Safari en Chrome (Google). - Check ook regelmatig de html-validator en de css-validator.
- Repareer meteen ook "kleine foutjes", want een kleine afwijking in het begin kan na tig uren verder coderen blijken kilometers naast het doel uit te komen.
- Sla regelmatig de knutselpagina op, telkens met een nieuw versie-nummer.
Mocht dan later blijken dat je tussendoor per ongeluk iets hebt weggeknipt wat had moeten blijven staan, of dat je iets verkeerd hebt veranderd, dan heb je altijd nog oude versies om op terug te vallen. - Meer ontwerptips in de Golden Rules of CSS.
O ja, nog een tip:
- Op de pagina Online Page Creator van developerscorner.nl kan je de html- en css-code ophalen voor de ruwe basislayout van een pagina met kop / linker-menukolom / inhoud.
Kop klaar? Dan naar Knutselpagina: fase 2