<<< terug1 Head Section2 Body Section3 Responsive CSS

CODE VOOR DE CSS (code voor de vormgeving)

STAP 1: eerste stylesheet (achtergrondkleur) is al gelinkt in stap 6

1. Open je index.html in de browser en bekijk het resultaat tot nu toe.
2. Dat kan wel een beetje vormgeving gebruiken, toch???
3. Ga verder met de volgende stap....

STAP 2: vormgeving van de blokken

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_02_blocks.css"> <!-- link naar het css-document -->


2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de eerste stylesheet

STAP 3: vormgeving van het menu (nav)

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_03_menu.css"> <!-- link naar het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de tweede stylesheet

STAP 4: vormgeving van de typografie

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_04_typography.css"> <!-- link naar het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de derde stylesheet

STAP 5: vormgeving aangepassen voor verschillende schermbreedtes

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_05_tablet_smartphone.css"> <!-- link naar het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de vierde stylesheet

Bekijk het resultaat in de browser
Sleep je venster groter/kleiner voor het Responsive effect

Hierondert enkele extra css-settings voor scroll en menu-variaties...

CSS-SETTING 1: fixed position van header en footer

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_setting_fixed_position.css"> <!-- link naar het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de vijfde stylesheet

Bekijk het resultaat in de browser
Sleep je venster groter/kleiner voor het Responsive effect

CSS-SETTING 2: gelaagd scrollen over een afbeelding/slideshow

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_setting_responsive_scroll.css"> <!-- link hier het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de eerste settings-stylesheet
4. Plak vervolgens VOOR/BOVEN de sluit-tag van de div container (</div>) deze code, die zorgt dat de achtergrond van de #container zo hoog wordt als de pagina:
   
   <br style="clear:both;">

Bekijk het resultaat in de browser
Sleep je venster groter/kleiner voor het Responsive effect

CSS-SETTING 3: vaste vertikale menubalk links

1. Kopieer onderstaande regel code:
   
   <link rel="stylesheet" href="css/layout_setting_fixed_vertical_menu.css"> <!-- link hier het css-document -->
    
2. Ga naar je index.html in Dreamweaver
3. Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar detweede settings-stylesheet
4. Plak vervolgens achter de de open-tag van nav deze code, die zorgt dat het menu vertikaal en aan de linkerkant komt te staan:
   
   class="v-nav"
   
   De HTML-code ziet er dan zo uit: <nav class="v-nav">

Bekijk het resultaat in de browser
Sleep je venster groter/kleiner voor het Responsive effect

OEFENINGEN

Je kunt de vormgeving aanpassen door de CSS te wijzigen:

1. Wijzig in layout_01_body_container.css de achtergrondkleur: body { background-color: .....  ;}
    
2. Haal bij body in layout_01_body_container.css de commentaartekens ( /* */)  weg bij: /*background-image:url(../images/wolk_zon.png);*/
   Je website heeft nu een beeldvullende foto als achtergrond. Probeer het ook met een eigen afbeelding.
    
3. Kies een ander Google webfont
   - pas de font-naam in de head-section aan
   - pas de font-naam in de body { font-family: ..... ;} in het css-document: 4_layout_typografie.css
    
4. Maak voor een afbeelding in de header.top in Photoshop een afbeelding van 1024px x 100px. Plaats deze code onder de sluit-tag </nav>:
   <img src="images/afbeelding.jpg" title="" alt="">
   (zet de afbeelding in de images-map en wijzig de code afbeelding.jpg naar jouw eigen afbeeldingsnaam)
    
5. Maak en bewaar 3 verschillende pagina's door in index.html te varieren met de class:
   - hele_breedtevoorbeeld
   - driekwart_breedtevoorbeeld
   - halve_breedtevoorbeeld
   - kwart_breedtevoorbeeld
   
   
6. Open je websitemap. Pas met behulp van Photoshop de bestanden: apple-touch-icon.png en favicon.ico aan.
   Zoek via Google waar deze bestanden voor dienen.