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 <div> tag met de ID menu een knop (<a> tag) staan met de ID home. Zie onderstaande code. <div id='menu'> <a href='index.html' id='home'></a> 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: <div id='menu'> <a href='index.html' id='home'></a> <a href='index.html' id='over-ons'></a> <a href='index.html' id='nieuws'></a> <a href='index.html' id='contact'></a> We laten de href nog onaangepast.
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);
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 <div> 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.
<div id='midden'> <div id='header'> Boven de <div> met de ID footer plaats je de sluitings van midden. <div id="footer"> 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.
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; background: #fff; #zijkant{ width:230px; 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 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; background: #fff; #zijkant{ width:230px; background: #ccc; 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. <div id='tekstvak'> <h1>well Water</h1> <p> 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! </p> Stap 14: Plaats tekst in de zijkant In de zijkant voegen we een kopje nieuws toe en enkele nieuws-items. We hebben al een <h1> tag. Alleen de h1 tag mag maar 1 keer voormen. Nieuws wordt daarom in een <h2>. We gebruiken wel meerdere <h3> tags. Die komen er namelijk hetzelfde uit te zien. Gebruik de code op de volgende pagina.
<div id='zijkant'> <h2>nieuws</h2> <h3>buurman en Buurman</h3> <p> Vanaf week 48 kunt u nu ook de speciale flesjes bronwater van Buurman & Buurman bij Xenos kopen. </p> <h3>run for Kika</h3> <p> De afgelopen tien jaar is het genezingspercentage van kinderkanker gestegen naar 75% </p> 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; background: #fff; padding:30px; #zijkant{ width:230px; background: #ccc; 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 <h1> tag in de div tekstvak. Met #zijkant h2 bewerken we de <h2> tag in de div zijkant (het kopje Nieuws ). Met #zijkant h3 bewerken we de <h3> 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); 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 r.hazebroek@cibap.nl - Vermeld je naam en klas.