CSS 2, Expression Web en DIV

1 Evaluatie van vandaag

Evaluatie van vandaag
- Grote css-opdracht: 25 punten + 5 punten: kleurkeuze
- Eindresultaat experimenteren met DIV’s: 20 punten
- Uitdaging 2 met DIV’s: 15 punten
- Uitdaging 3 met DIV’s: 15 punten
TOTAAL: 80 punten

2 Eerste lesuur: Herhalingsopdracht

1 LESDOELSTELLINGEN

In het eerste deel van deze les herhalen we alles wat we van CSS gezien hebben in de vorige les en leer je voor eenzelfde tag (zoals bijvoorbeeld hyperlinks) met CSS verschillende opmaken afdwingen.

2 GROTE CSS-OPDRACHT

- Kies vier basiskleuren om mee te werken in deze opdracht en die bij elkaar MOETEN passen. Je mag geen zwart en wit gebruiken!!!

- Gebruik het gratis programma Expression Web om de volgende bestanden aan te maken:
1.) index.html
2.) lyrics.html
3.) toekomst.html

Hoe met Expression Web werken?

1. Als je het programma voor de eerste maal opendoet, zie je een tekstveld klaarstaan met als naam Untitled_1.html. Ga in het horizontale menu naar File en kies daar Save As om dit bestand eens op te slaan als index.html, lyrics.html en toekomst.html.

2. Onderaan het witte tekstvak waarin je kunt typen, heb je de keuze uit Design, Split en Code.

Design: je ziet hoe de webpagina er op het internet zal uitzien.
Code: je ziet enkel de code van de webpagina.
Split: je ziet zowel de Design and de Code. Dit is het handigste scherm om in te werken.

3. Je kunt met Expression Web je kunt automatisch codes laten genereren bijvoorbeeld om een tabel in te voegen (Table - Insert table ...), een hyperlink te maken (IInsert - Hyperlink), een afbeelding invoegen (Insert - HTML - Image), enzovoort. Probeer eens een paar invoegfuncties uit.

- Maak een stijl.css als externe stylesheet aan en zorg ervoor dat die op deze drie webpagina's van kracht wordt. Plaats daarvoor de juiste verwijzingscode tussen de <head></head>s van iedere webpagina. Dat is de volgende code

<link href="stijl.css" rel="stylesheet" type="text/css" />

- Op de index.html moet het volgende komen:
1.) Maak een tabel van twee kolommen met een smalle linkerkolom (geef die een kleur als achtergrond) en een brede rechterkolom. Zorg ervoor dat je kolommen reiken tot de bodem van de hele webpagina.
2.) Tik het woord "Menu" als titel (met de <h1>-code) in de linkerkolom en plaats daaronder hyperlinks naar de twee andere bestanden.
3.) Schrijf een korte tekst van 5 regels over jezelf (die moet je toch schrijven voor jullie eindwerksite) die moet komen in de brede rechterkolom en plaats daarboven de titel "Mezelf".

- Op de lyrics.html moet het volgende komen:
1.) opnieuw een tabel met een smalle linkerkolom en een brede rechterkolom met in de linkerkolom onder het woord "Menu" hyperlinks naar de twee andere webpagina's;
2.) een gekleurde achtergrond (met stijl.css af te dwingen) voor de linkerkolom die afwijkt van het kleur van de achtergrond in de linkerkolom op de index.html;
3.) een foto van een zanger of muziekgroep die je graag hoort;
4.) de lyrics van een van hun songs die je graag hoort;
5.) een You-Tube filmpje van die song.

- Op de toekomst.html moet het volgende komen:
1.) opnieuw een tabel met een smalle linkerkolom en een brede rechterkolom met in de linkerkolom onder het woord MENU hyperlinks naar de twee andere webpagina's;
2.) dezelfde gekleurde achtergrond als van lyrics.html in de linkerkolom;
3.) wat je volgend jaar wil studeren en waarom in de rechterkolom onder de titel "Mijn plannen";
4.) welk beroep je later graag zou doen en waarom.

- Dwing met CSS in stijl.css het volgende af:
1.) De hyperlinks mogen niet onderstreept zijn.
2.) Als je met de muis over de hyperlinks gaat, moet de kleur veranderen.
3.) De hyperlinks op index.html moeten een andere kleur hebben dan de hyperlinks op de twee andere webpagina's (zie http://htmlhelp.com/nl/faq/html/links.html#link-2color voor de uitleg)
4.) Geef de titels een kleur die verschilt van de tekstkleur.
5.) Zorg voor een gekleurde achtergrond in de linkerkolom van lyrics.html en toekomst.html (zie punt 3 voor de techniek met classes) die verschilt van de achtergrondkleur van de linkerkolom op index.html.
6.) Ik wil Comic Sans MS als lettertype zien.
7.) Alle tekst in de rechterkolom van je tabel moet steeds op 100px van de linkerkant van deze kolom staan
8.) Als je met je muis over de afbeelding van je muziekgroep / zanger / zangeres gaat, moet die veranderen in een andere afbeelding van dezelfde grootte. Dat kun je met Expression Web als volgt doen door gebruik te maken van Behaviours:

Tweede lesuur: DIV

1 LESDOELSTELLINGEN

In deze les leer je om met de tag <div> in combinatie met CSS een site op te bouwen in verschillende onderdelen. Met Expression Web kun je wel layers maken, maar het nadeel van die layers zijn dat die een vaste plaats en afmeting hebben terwijl jij soms layers zult nodig hebben die zich aan de grootte van het beeldscherm van de bezoeker van je site zullen aanpassen.

2 EXPERIMENTEREN MET DIV

Stap 1:
Maak een HTML-bestand met de volgende HTML-code. Noem dit bestand div.html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenteren met DIV</title>
<link href="stijl_experimenteren.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div1">Div 1<br /><br /></div>
<div id="div2">Div 2<br /><br /></div>
<div id="div3">Div 3<br /><br /></div>
<div id="div4">Div 4<br /><br /></div>
<div id="div5">Div 5<br /><br /></div>
</body>
</html>

Iedere <div></div> zal overeenkomen met een doos of een box op je webpagina. Iedere <div> heeft een id of een identiteit. Zo knap de eerste

Code:

“div1”.

Stap 2:
Alle opmaak in div.html wordt bepaald door een CSS-bestandje genaamd stijl_experimenteren.css dat in de HEAD wordt opgeroepen met de volgende regel:

Code:

Maak nu dat CSS-bestandje aan met als inhoud de volgende code:

Code:

#div1
{
position:relative;
background-color: #CCC}
#div2
{
position:relative;
background-color: #999;
}
#div3
{
position:relative;
background-color: #CCC;
}
#div4
{
position:relative;
background-color: #999;
}
#div5
{
position:relative;
background-color:#CCC;
}

Laat ons die CSS-code nu ons van dichtbij bekijken.
1.) Alle namen van de DIV’s uit ons HTML-bestandje vinden we hier terug na een #.
bv.

Code:

#div1

2.) Momenteel is er voor ieder DIV-box een kleur gedefinieerd met het attribuut background-colour.
3.) Ook heeft iedere DIV-box als attribuut

Code:

position:relative

.
Dat wil zeggen dat zo’n DIV-box zich moet plaatsen ten opzichte (vaak onder) de vorige DIV-box.

Stap 3:
Bekijk het resultaat in je browser.

Stap 4:
Nu kun je in de CSS-code met de attributen width en height ook de breedte en de hoogte van een DIV-box bepalen. Probeer dat eens.
- Zorg ervoor dat de eerste en de vijfde DIV-box 900px breed zijn en 150px hoog.
- Maak de tweede DIV-box 300px breed en 500px hoog.
- Maak de derde DIV-box 600px breed en 500px hoog.
- Maak de vierde DIV-box 900px breed en 300px hoog.
Bekijk even het resultaat in je browser.

Stap 5:
Nu willen we dat de tweede DIV-box en de derde DIV-box naast elkaar zullen verschijnen. Op die manier zouden ze op een site kunnen dienen als een menu en als een tekstvak.
Hiervoor beschikken we over twee mogelijke attributen om te gebruiken in het CSS-bestandje:

Code:

float:left

(“zweef links”)

Code:

float:right

(“zweef rechts”)
Probeer deze codes uit totdat je de juiste combinatie vindt om de tweede en de derde DIV-box naast elkaar te laten verschijnen!

Opmerking!
Als de div3-box te veel naar rechts zou blijven staan, dan kun je dat oplossen door al die DIV-boxen binnen een andere DIV-box te plaatsen en die als breedte 900px in dit geval te geven. Zie Stap 6 om te weten hoe dat moet.

Opmerking:
Als je wilt afdwingen dat een DIV-box verschijnt onder twee naast elkaar staande DIV-boxen, gebruik dan het attribuut

Code:

clear:both

Stap 6:
Als alles goed verlopen is, dan staan de DIV-boxen nu juist. Wel plakt je site nu links tegen het scherm aan en heb je rechts een witte ruimte. Nu gaan we ervoor zorgen dat onze site met DIV-boxen netjes in het midden staat.
Dat doen we door in ons HTML-bestand een <div> met als id “container” toe te voegen rond de andere DIV’s. De HTML-code zal er dan als volgt uitzien:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenteren met DIV</title>
<link href="stijl_experimenteren.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="div1">Div 1<br /><br /></div>
<div id="div2">Div 2<br /><br /></div>
<div id="div3">Div 3<br /><br /></div>
<div id="div4">Div 4<br /><br /></div>
<div id="div5">Div 5<br /><br /></div>
</div>
</body>
< /html>

Nu moet je in je CSS-bestand natuurlijk die nieuwe container-DIV benoemen en beschrijven. Doe dat door de volgende code toe te voegen:

Code:

#container {
margin:0 auto;
width:900px;
}

Merk op dat de width moet overeenkomen met de maximale width van de andere DIV’s! In dit geval was dat 900px.
De 0 naar de margin betekent dat je 0px afstand hebt ten opzichte van de bovenkant van de browser. Helaas passen niet alle browsers dat even strikt toe.
De auto naar de margin betekent dat hij links en rechts dezelfde afstand zoekt waardoor de DIV’s van binnen de containter-DIV in het midden komen te staan.
Laat me het resultaat zien voor je beoordeling!

3 UITDAGINGEN
1.) Uitdaging 1:
Maak een site met DIV’s die er als volgt uitziet:

Laat me het resultaat zien!

2.) Uitdaging 2:
Maak een site met DIV’s die er als volgt uitziet:

Laat me het resultaat zien!

Last update 23/11/2017