STAP 1: eerste stylesheet (achtergrondkleur) is al gelinkt in stap 6
Open je index.html in de browser en bekijk het resultaat tot nu toe.
Dat kan wel een beetje vormgeving gebruiken, toch???
Ga verder met de volgende stap....
STAP 2: vormgeving van de blokken
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_02_blocks.css"> <!-- link naar het css-document -->
Ga naar je index.html in Dreamweaver
Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de eerste stylesheet
STAP 3: vormgeving van het menu (nav)
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_03_menu.css"> <!-- link naar het css-document -->
Ga naar je index.html in Dreamweaver
Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de tweede stylesheet
STAP 4: vormgeving van de typografie
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_04_typography.css"> <!-- link naar het css-document -->
Ga naar je index.html in Dreamweaver
Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de derde stylesheet
STAP 5: vormgeving aangepassen voor verschillende schermbreedtes
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_05_tablet_smartphone.css"> <!-- link naar het css-document -->
Ga naar je index.html in Dreamweaver
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
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_setting_fixed_position.css"> <!-- link naar het css-document -->
Ga naar je index.html in Dreamweaver
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
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_setting_responsive_scroll.css"> <!-- link hier het css-document -->
Ga naar je index.html in Dreamweaver
Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar de eerste settings-stylesheet
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
Kopieer onderstaande regel code:
<link rel="stylesheet" href="css/layout_setting_fixed_vertical_menu.css"> <!-- link hier het css-document -->
Ga naar je index.html in Dreamweaver
Plak de zojuist gekopieerde code in de HEAD SECTION onder de link naar detweede settings-stylesheet
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:
Wijzig in layout_01_body_container.css de achtergrondkleur: body { background-color: ..... ;}
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.
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
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)
Maak en bewaar 3 verschillende pagina's door in index.html te varieren met de class: - hele_breedtevoorbeeld - driekwart_breedtevoorbeeld - halve_breedtevoorbeeld - kwart_breedtevoorbeeld
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.