Multimedia
Les 5

CSS - navigatie

Doelstelling

In deze les leren we:

1. hoe je menu's opmaakt in CSS;
2. hoe je lettertypes kiest
3. en hoe je de lettergrootte bepaalt;

Leerpad

1. Wat zijn css pseudo-klassen?
2. Een kleurenpalet kiezen
3. Lettertype - terminologie
4. CSS eigenschap: font-family
5. CSS eigenschap: font-size

Oefening

1. Maak een kopie van het marsman.html bestand en geef er de naam marsman-positioneren.html aan.
2. Maak een kopie van app.css en geef er de naam app-positioneren.css aan.
3. We werken verder in marsman.html en app.css.
4. De oefening vind je in Navigatie opmaken met CSS.
5. Bekijk het filmpje Bloemlezing Marsman navigatie opmaak.

Opdracht

1. Maak een kleurenpalet en voeg die toe in je Word document dat je de vorige les al hebt gemaakt.
2. Maak zowel de horizontale als de verticale navigatie in je webpagina's op. Plaats de CSS in app.css.
3. Stel een tabel op met de fontfamilie (lettertype) voor de verschillende tekstonderdelen van de pagina's op je website. Je vindt hier een voorbeeld. Je hoeft niet dezelfde groottes te gebruiken. Je maakt je eigen keuze. Voeg die tabel toe aan je dossier (het Word document dat je de vorige les al hebt gemaakt).
4. Voeg de de gekozen fontfamilies toe in je app.css bestand.
5. Stel een tabel op met de lettergrootte voor de verschillende elementen van je website. Je vindt hier een voorbeeld. Je hoeft niet dezelfde groottes te gebruiken. Je maakt je eigen keuze. Voeg die tabel toe aan je dossier (het Word document dat je de vorige les al hebt gemaakt).
6. Voeg de lettergroottes toe in je app.css bestand.
7. Stuur mij een email (jef.inghelbrecht@telenet.be) waarmee je me uitnodigt je workspace op Cloud9 te delen. Lezen en schrijven. Ik zal op je Cloud9 IDE je werk bekijken. In het filmpje Een workspace op Cloud9 delen kan je zien hoe je dat doet.
8. Stuur je dossier (Word document) via de link op tegel les 4.
9. Deadline: 20 november 2017.