Websites met stijl

25. Een website over het Apollo-project

In dit hoofdstuk

Waarom
De bestanden
Over de website
Meer over de website

Waarom

In de hoofdstukken 25-29 komt een website aan de orde over het Apollo project, het Amerikaanse ruimtevaartprogramma om mensen op te maan te laten landen.

Waarom nog een website?

Om een website met een heel andere opmaak te laten zien.
Om nog enkele nieuwe onderwerpen aan de orde te stellen.

Bekijk de website en experimenteer er mee.

Ook op deze site zijn de teksten niet bepaald sterk; pas ze gerust aan, als je dat wilt.
Mij gaat het hier alleen om de bouw van websites, niet om de inhoud.

De bestanden

Alle bestanden van de website vind je bij het cursusmateriaal dat je in hoofdstuk 2 hebt gedownload.
Ze staan in de map apollo (html-bestanden) en de submappen img (voor de afbeeldingen) en css (voor het stijlblad).

Je kan de website lokaal (op je eigen computer) bekijken door in die map het bestand index.html te openen in de browser.
En je kan de verschillende html bestanden bekijken en naar believen wijzigen.

Over de website

Kenmerken

De website is niet responsive.
Het is een mooie uitdaging om de site responsive te maken.
De achtergrond is vast (fixed). Bij het scrollen blijven de sterren op hun plaats.
De afbeelding met de astronauten is geen rechthoek. Dat komt door transparantie. (zie hoofdstuk 26)
De tekst 'bestemming maan' is een kwart slag gekanteld. (zie hoofdstuk 27)
Er is (op de pagina 'Retourtje maan') een submenu dat inspringt. (zie hoofdstuk 28)
Op de pagina 'Apollovluchten' staat een tabel. Die zijn we nog niet eerder tegen gekomen. (zie hoofdstuk 29)

Structuur van de html

De struktuur van de webpagina's ziet er als volgt uit: <body>
<div id="container">
<h1>HET APOLLO-PROJECT</h1>

<h2>bestemming maan<h2>

<nav></nav>

<article></article>
</div>
</body>

div#container houdt de website bij elkaar en gecentreerd.
h1 bevat de titel HET APOLLO-PROJECT en de achtergrondafbeelding met de astronauten
h2 bevat de tekst bestemming maan; die tekst is een kwart slag gekanteld.

De css

Het stijlbestand apollo.css in de map stijlen zorgt voor de opmaak.

Het element article heeft een linker margin van 330px om plaats te maken voor het menu en de kop h2.
Het menu (nav) heeft de eigenschap float: left; en komt daardoor links van article in de margin ervan.
Nav krijgt een breedte van 240px: width: 240px;, zodat er nog 120px ruimte is voor de verticale titel 'bestemming maan'.

Meer

Meer over de website in de volgende hoofdstukken.