Inhalen les 7 (versie B)

Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet “Startmap Les 6”. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map “Website”. Open de map. Versleep hem eventueel naar je favorieten aan de linkerkant van je Finder-venster.

Stap 2: Open index.html en style.css Open in de map “Website” de bestanden index.html en style.css in Dreamweaver (rechter muisknop > openen met > Dreamweaver ….). Je hebt nu twee tabs (zie afbeelding), zorg dat je de de tab index.html open hebt staan en dat je “Gedeeld” geselecteerd hebt.

Stap 3: Toevoegen van de andere knoppen In je index.html heb je in de
tag met de ID menu een knop ( tag) staan met de ID home. Zie onderstaande code.

Kopieer deze knop, totdat je 4 knoppen hebt. Hiervan moeten we de ID’s gaan aanpassen, zodat we ook deze knoppen verschillende achtergronden kunnen geven. We geven de ID’s de zelfde namen als de namen van de afbeeldingen. Dit komt er zo uit te zien:

We laten de href nog onaangepast. Ga verder op de volgende pagina

Stap 4: Open style.css We gaan de knoppen nu een achtergrond geven. Je opent daarvoor nu de tab style.css.

Stap 5: Geef het menu een achtergrond We geven het menu een achtergrondskleur. In mijn voorbeeld is dit een blauwe achtergrond. In style.css begin je boven #home een nieuwe regel. We gaan de div menu een breedte, hoogte en achtergrondkleur geven. Dit ziet er als volgt uit:

#menu{ width: 960px; height: 50px; }

background:#5089c3;

Bekijk telkens eens je resultaat. Open je index.html telkens in Safari of Chrome. Om de webpagina te herladen gebruik je de sneltoets CMD+R of op windows: CTRL+R .

Stap 6: Geef de knoppen een achtergrond In style.css begin je onder de eind accolade ( } ) van #home een nieuwe regel. Kopieer en plak #home op deze regel. Verander de van #home in #over-ons. Nu bewerk je de knop met de ID over-ons. Dit ziet er als volgt uit:

#home{ width:140px; height:20px; }

display:inline-block; background: url(img/home.jpg);

#over-ons{ width:140px; height:20px;

display:inline-block; background: url(img/home.jpg);

Ga verder op de volgende pagina

}

Verander de background van #over-ons naar jouw bestandsnaam voor deze knop. In het voorbeeld van les 6 is dat over-ons.jpg

background: url('img/over-ons.jpg');

Let er op dat je een tags altijd afsluit met een accolade naar links ( } ) en dat je waarden altijd afsluit met een punt-komma ( ; ).

Stap 7: Herhaal stap 6 voor de andere knoppen Herhaal stap 6 voor de knoppen met de ID’s nieuws en contact. Let er op dat de bestandsnamen die je in je background plaatst overeen komt met jouw bestandsnamen en dat het bestand ook in de map img staat.

Stap 8: Zet de knoppen in het midden In style.css begin je binnen #menu een nieuwe regel. We gaan witruimte toevoegen in je menu. Dit doen we met de eigenschap padding. Lees eerst slide 29 t/m 33 van les 6. Voor de eigenschap padding zijn er 4 waarden nodig. Ruimte boven, ruimte rechts, ruimte onder en ruimte links binnen in de tag. Zie slide 33. Padding wordt als volgt toegevoegd:

#menu{

width: 960px; height: 50px; background:#5089c3;

}

padding: 10px 10px 10px 10px;

Stap 9: Voeg de div ‘midden’ toe Boven de
met de ID header plaats je een nieuwe div. Deze krijgt de ID midden. Alle andere div’s komen hier straks in te staan en worden zo in het midden geplaatst.


Boven de
met de ID footer plaats je de sluitings
van midden.

Selecteer alles wat tussen de start- en sluittag staat van de div midden en druk op tab. Nu is duidelijk te zien dat de andere div’s kinderen zijn van de div midden.

Stap 10: Zet de div ‘midden’ in het midden met CSS Ga weer terug naar je style.css. Begin onderin de pagina een nieuwe regel. Voeg hier de div met de ID midden toe. We geven deze dezelfde breedte als de header en het menu, namelijk 960 pixels breed.

#midden{ width:960px;

Druk op enter. Nu voegen we witruimte buiten de tag toe. Dit noemen we margin. Voor de eigenschap margin zijn er 4 waarden nodig. Ruimte boven, ruimte rechts, ruimte onder en ruimte links buiten de tag. Zie slide 33 (margin heeft dezelfde waarden als padding). Aan de bovenkant voegen we 50 pixels ruimte toe. Aan de rechterkant willen we dat de ruimte automatisch wordt bepaald, dat doen we met auto). Aan de onderkant voegen we geen ruimte toe en aan de linkerkant weer auto. Dit komt er zo uit te zien:

#midden{ width:960px; margin: 50px auto 0px auto; }

Let erop dat je #midden ook weer afsluit met een accolade naar links }. Als je de bestanden index.html en style.css nu opslaat kun je het resultaat gaan bekijken. Open index.html in Safari of Chrome en klik op CMD+R of op Windows: CTRL R. Je website staat als het goed is in het midden en je extra knoppen zijn toegevoegd. Ga verder op de volgende pagina

Stap 11: Geef body een achtergrondskleur We geven je website een achtergrondskleur. Gebruik je de blauwe kleurstelling, dan kun je de kleurcode #9fdefa gebruiken:

body{ background: #9fdefa; }

Stap 12: Maak de vakken tekstvak en zijkant We gaan nu de div met de ID tekstvak en de div met de ID zijkant hoogtes en breedtes geven met width (breedte) en height (hoogte). Daarna geef je tekstvak de achtergrondkleur wit (#fff) en zijkant de kleur grijs (#ccc).

#tekstvak{ width:730px; height:500px; background: #fff; } #zijkant{

width:230px; height:500px; background: #ccc;

}

De vakken staan nu onder elkaar. Dit kun je zien als je het resultaat in je browser bekijkt en herlaad met CMD+R of CTRL+R. Om vakken naast elkaar te plaatsen moeten we aan beide div’s float:left; toevoegen in CSS. Voeg de regel van padding toe onder je background. Typ dus niet alles hieronder opnieuw in! Bekijk de code op de volgende pagina.


#tekstvak{

width:730px; height:500px; background: #fff;

float:left; } #zijkant{ width:230px;

height:500px; background: #ccc; float:left;

}

Stap 13: Plaats tekst in het tekstvak Ga terug naar je index.html. In het tekstvak voegen we een koptekst 1 en een paragraaf toe. Bekijk Wellwater Template ingevuld.psd hoe het eruit gaat zien straks.

Well Water

Well Water biedt een uitgebreid assortiment van zuiver bronwater en

aanverwante producten. Onze formule is heel eenvoudig: drink Well en u werkt mee aan een betere wereld. Well Water doneert een vast bedrag (5 eurocent per liter) per verkochte fles ten gunste van schoon drinkwater projecten. Zo helpt u bijvoorbeeld mensen in Afrika en Azië aan schoon drinkwater. En het mooie is, Well Water hanteert buitengewoon concurrerende prijzen. Voor hetzelfde geld helpt u dus ook een ander!

Stap 14: Plaats tekst in de zijkant In de zijkant voegen we een kopje ‘nieuws’ toe en enkele nieuws-items. We hebben al een
tag. Alleen de h1 tag mag maar 1 keer voormen. ‘Nieuws’ wordt daarom in een
. We gebruiken wel meerdere
tags. Die komen er namelijk hetzelfde uit te zien. Gebruik de code op de volgende pagina.


Nieuws

Buurman en Buurman

Vanaf week 48 kunt u nu ook de speciale flesjes bronwater van Buurman &

Buurman bij Xenos kopen.

Run for Kika

De afgelopen tien jaar is het genezingspercentage van kinderkanker gestegen naar 75%…

Als je de bestanden index.html en style.css nu opslaat kun je het resultaat gaan bekijken. Open index.html in Safari of Chrome en klik op CMD+R of op Windows: CTRL R. De tekst staat overal in de vakken, maar het staat allemaal erg dicht op de rand. Daar gebruikten we padding voor! Padding was witruimte binnen een tag.

Stap 15: Witruimte in tekstvak en zijkant toevoegen We geven tekstvak en zijkant beide 30px padding (witruimte). Voeg de regel van padding toe onder je float. Typ dus niet alles hieronder opnieuw in!

#tekstvak{

width:730px; height:500px; background: #fff;

float:left; padding:30px; } #zijkant{

width:230px; height:500px; background: #ccc;

}

float:left; padding:30px;


Stap 16: Witruimte in tekstvak en zijkant toevoegen We voegen witruimte toe buiten de kopjes in tekstvak en zijkant (dit doen we met margin). Verder veranderen we de kleur van de teksten. Met #tekstvak h1 bewerken we de
tag in de div tekstvak. Met #zijkant h2 bewerken we de
tag in de div zijkant (het kopje ‘Nieuws’). Met #zijkant h3 bewerken we de
tag in de div zijkant (de nieuws kopjes). font-size en color zijn bekend. Ook margin hebben we behandeld. Margin krijgt altijd net als padding 4 waarden mee: ruimte aan de bovenkant, ruimte aan de rechterkant, ruimte aan de onderkant en ruimte aan de linkerkant (van boven met de klok mee).

#tekstvak h1{ margin: 0 0 30px 0; font-size:40px; color:#003399; } #zijkant h2{

margin: 0 0 30px 0; font-size:30px; color:#003399;

} #zijkant h3{ margin: 10px 0 5px 0; font-size:30px; }

color:#99c9df;

Stap 17: Voeg de footer toe Als laatste ga je deze les de footer toevoegen. Het principe is exact hetzelfde als het toevoegen van de header. Je geeft de footer een breedte van 960 pixels (net zo breed als de header) en een hoogte van 200 pixels. Er wordt een margin toegevoegd voor de ruimte eronder en het in het midden plaatsen van de footer. Daarna wordt de achtergrond van je header toegevoegd. Dit is de afbeelding footer.jpg in je mapje ‘img’ van je mapje ‘Website’ uit de startmap. Heb je die niet dan mag je ook een kleurcode toevoegen als achtergrondkleur. Gebruik onderstaande code:

}

#footer{ width:960px; height:200px; margin: 0 auto 100px auto; background: url(img/footer.jpg);


Je footer bestaat nu, maar komt nu achter alle andere vakken te staan. Dit komt omdat de div ervoor (met de ID zijkant) een float: left; heeft. In dat geval moet de div #footer ook een float left krijgen. Deze voegen we dus onder background nog toe:

#footer{ width:960px;

height:200px; margin: 0 auto 100px auto; background: url(img/footer.jpg);

}

float:left;

Stap 18: Bewaar je bestanden in en lever ze in Bewaar index.html en style.css door in beide bestanden naar bestand > opslaan te gaan (of druk op cmd+s of in Windows: ctrl+s ). Open je startmap in Finder. Maak van de map Website een zip bestand, door met de rechter muisknop op de map te klikken en “Compreer Website” te klikken. Zie de afbeelding op de volgende bladzijde. Mail het zojuist ontstaande Website.zip naar [email protected] - Vermeld je naam en klas.


Inhalen les 7 (versie B)

Recommend Documents

Well Water

tag. Alleen de h1 tag mag maar 1 keer voormen. ‘Nieuws’ wordt daarom in een

. We gebruiken wel meerdere

Nieuws

Buurman en Buurman

Run for Kika

tag in de div tekstvak. Met #zijkant h2 bewerken we de

tag in de div zijkant (het kopje ‘Nieuws’). Met #zijkant h3 bewerken we de