<<< 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

1. Download deze bronbestanden naar je computer
2. 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

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. 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

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. 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

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:
   
   <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 04_head_modernizr -->

STAP 5: link naar Google Webfonts

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. 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

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. 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???

STAP 7: javascripten en jquery

1. Kopieer de code uit deze link
2. Ga naar je index.html in Dreamweaver
3. 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...