Multimedia
Les 6

CSS - pseudoklassen

Doelstelling

In deze les leren we hoe je met selectoren interactieve webpagina's kan maken.

Nu worden alle gedichten getoond. Als de bezoeker een gedicht selecteert, springt de pagina naar het geselecteerde gedicht. Maar het menu en de header springen ook naar boven. Om een ander gedicht te kunnen selecteren moet de bezoeker terug naar boven scrollen. We willen de webpagina zo wijzigen dat als de bezoeker een gedicht selecteert, alleen het geselecteerde gedicht getoond wordt zodat het menu en de paginaheader zichtbaar blijven.

Stappenplan

We gaan verder met selectoren en in het bijzonder:

1. de klasse-selector;
2. de algemene verwantschapselector;
3. de :target selector;

Oefening

1. Open je Cloud9 workspace.
2. Maak een map met de naam les6.
3. Kopiëer de bestanden uit de map les5 naar de les6.
4. Stap voor stap wordt de oefening uitgelegd in Met de :target pseudo-klasse kan je een element opmaken dat de target is van een interne hyperlink op een webpagina.
5. In het filmpje De target pseudoklasse kan je stap voor stap volgen hoe je de oefening maakt.

Opdracht

1. Pas de techniek, die je in de oefening geleerd hebt, toe op je eigen webpagina.
2. Download de map met de naam les6 van Cloud9 en stuur ze op via onderstaande link.
3. Deadline: 26 maart 2018