<<< terug1 Head Section2 Body Section3 Responsive CSS
CMD/CTRL + C = kopieren
CMD/CTRL + V = plakken
CODE VOOR DE HEAD-SECTION (code voor de browsers)
STAP 1: download bronbestanden
- Download deze bronbestanden naar je computer
- Open index.html in Dreamweaver
Gewoon code gaan kopieren en plakken op de juiste plek die is aangegeven. Dat is alles :).
De docent kopieert en plakt er een paar voor, zodat er geen misverstand meer kan ontstaan.
Zo ziet de index.html er uit. Je begint met de head-section. Vervang de grijze teksten in je index.html door code:

STAP 2: browser herkenning en metadata voor mobiele apparaten
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 02_head_browser_device -->
STAP 3: zoekmachine metadata: keywords & description
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 03_head_metadata -->
STAP 4: link naar modernizr: html5 voor oudere borwsers
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 04_head_modernizr -->
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 05_head_google_webfonts -->
STAP 6: link naar eerste stylesheet (CSS) voor de vormgeving
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 06_head_css -->
Link hier later ook de andere 4 stylesheets (totaal 5 layout css-bestanden + 3 layout-settings bestanden)
TIP: check nu al even je pagina in de browser. Welke achtergrondkleur heeft je pagina???
- Kopieer de code uit deze link
- Ga naar je index.html in Dreamweaver
- Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
<!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 07_head_scripten -->
Plaats hier later ook javascripten voor de slideshow en foto-popup.
De code in de head-section ziet er nu ongeveer zo uit:

Bekijk het resultaat in de browser
Voeg nu Body Section toe...