een pagina met CSS bouwen in Dreamweaver

We gaan in Dreamweaver proberen direct een website te bouwen. Dit kan voor het grootste gedeelte in de Design-mode, al krijg je soms mooiere code door het in de code-weergave in te typen. Je hebt daar wel enige CSS ervaring voor nodig, wellicht doe je die met deze training wel op. Als je in de code-weergave werkt, zie je bij het intypen van code, dat Dreamwaever een idee heeft welke code je wilt invoegen. door op de Enter-toets te drukken, bevestig je de keuze van Dreamweaver. Behalve een winst in snelheid, voorkom je typefouten. In deze tutorial wordt ervan uitgegaan, dat je in de Designmode werkt.

Het resultaat van deze tutorial levert een site op als deze. Ook de inhoud is lezenswaardig.

voorbereiding

Maak een map aan met de naam CSStraining en maak daarin 3 mappen: pags, afb, stijlen.
Start Dreamweaver en kies Site>>New Site.
1. In de Basic-mode kies je allereerst een naam die je aan deze site wilt geven. Deze naam blijft alleen in Dreamweaver.
2. In het volgende venster server technology doe je niets. (no servertechnology)
3. in het derde venster geef je aan waar de map staat waar je site in staat: de map CSStraining. Je doet dit het makkelijkst door op de map achter het invulvak te klikken.
4. in het vierde venster Remote Server kies je None.
Bij deze site-definitie voorkomt Dreamweaver dat je bestanden gaat koppelen, die buiten de sitemap staan. Dreamwaever bakent de site dus duidelijk af. Bovendien kun je binnen Dreamweaver nu bestandsnamen aanpassen. Dreamweaver zal alle verwijzingen in de code dan ook aanpassen, zodat de koppelingen behouden blijven. Tot slot kun je met het venster Files (rechtsonder in Dreamweaver) makkelijk koppelingen maken en bestanden openen. Deze stap is dus beslist een aanrader. (Helaas zul je op de computers op onze school deze stap elke keer moeten herhalen als de computer opnieuw gestart is.) Zie ook video-tutorial.

de pagina centreren

Maak een nieuw document aan, en sla deze op als index.html in de map pags. Geef als paginatitel je eigen naam op.
Voeg eerst alle inhoud aan dit lege document toe. Gebruik daarvoor de inhoud van de site over jezelf, die je in het vorig project hebt gebruikt. Maak zonodig alleen gebruik van sematische opmaak, ofwel tekstwaardering ook wel teksthiërarchie genoemd. Je werkt dus alleen met tags als h1 (Heading1), h3 (Heading3), p (paragraaf), ol, li en ul (voor opsommingslijsten). Hier een voorbeeld.
Open het CSS opmaak venster (rechtsboven in Dreamweaver) en klik op de +-icoon om een stijl toe te voegen. In het opspringende venster kies je voorlopig voor This document only. Hierdoor ontstaat een interne stylesheet.

(Een externe stylesheet is beter, je mag daar ook voor kiezen. Je moet dan wel een bestandsnaam voor de stylesheet kiezen. Als je dat doet, zorg er dan meteen voor dat deze in de map stijlen komt. Bij een externe stylesheet moet je bij de preview wel telkens de pagina herladen, omdat anders de wijzigingen in het stylesheet, niet worden ingelezen. Daarom zal in deze tutorial met een interne stylesheet worden gewerkt, die op het eind extern wordt gemaakt.)
Kies als Selector Type Tag en daarbij de tag body. Je krijgt dan weer het venster met vele CSS-categoriën.

Kies daaruit de categorie Box en je stelt de margin en padding beide op 0.
De achtergrondkleur stel je op #930, of je kiest er een naar eigen smaak (categorie Background).
Tot slot centreer je de inhoud: bij de categorie Block het vakje Text align. Dit laatste is ervoor omdat het voor sommige browsers niet voldoende is om een div een auto-waarde te geven voor de linker en rechter marge (wat straks gebeurd). Hierdoor wordt ook de tekst zelf gecentreerd. Maar dat gaan wij straks in een omvattende div weer ongedaan maken.

Selecteer de hele inhoud, inclusief de links. Ga naar de menubalk: Insert >> Layout Objects >> Div Tag er komt nu een menu waarin je bij het ID-veld als naam geheel ingeeft. Direct daarna klik je in het CSS-venster op de +-icoon om een nieuwe stijlbeschrijving te maken. Dreamweaver stelt dan een stijlselector #geheel voor (of een iets langere naam, die je inperkt tot #geheel). Na de OK knop te hebben geklikt kun je weer enkele categorieën gaan vormgeven.
Als je tussentijds op de Apply-knop klikt, zie je de gevolgen daarvan in je lay-out. Stijl als volgt:
1. De achtergrondkleur #ffc of een kleur naar eigen smaak, maar anders dan die van de body (categorie Background)
2. Tekst linkslijnend (onder de Categorie Block) om het gecentreer in de body-stijl te compenseren.
3. Vak breedte op 600 pixels en een linker- en rechtermarge met de waarde auto (onder de categorie Box). De inhoud moet nu duidelijk gemarkeerd op de pagina staan.
Hier een tussentijds resultaat.

een achtergrondafbeelding in de kop

In dit gecentreerde middendeel wordt een afbeelding geplaatst. Deze afbeelding is precies 600 pixels breed. Je kunt een van onderstaande afbeeldingen downloaden en daar je eigen naam in paatsen. Ook kun je natuurlijk zelf een exemplaar maken van 600 bij 120 pixels:

Nadat je naam erin geplaatst is, sla je de afbeelding op in de map afb.
Dan ga je opnieuw de div #geheel bewerken. Je klikt in het CSS-venster op de div #geheel en vervolgens op het potloodje, of dubbel op de naam #geheel. In de categorie Background plaats je de achtergrond van je keuze, je selecteert bij Repeat: no-repeat, en onder Horizontal Position: center en onder Vertical Position: top.
Maak direct van de gelegenheid gebruik om de tekst in te stellen: onder de Categorie Type: het Font Georgia, kleur: #900 en grootte 14px of 12 px. Hier het tussentijds resultaat.

de elementen in positie brengen

De teksten van het menu en de inhoud lopen nu nog dwars door de afbeelding heen. Ze moeten elk een eigen div krijgen, waarna we ze kunnen positioneren met CSS.

Selecteer de linken en maak daar via Insert>>Layout Objects>>Div Tag daar een div van met de ID menu.
Selecteer de afsluitende regel met copyright en maak daar op dezelfde manier een div van met ID footer.
Maak van de tussenliggende inhoud een div met een ID inhoud.

Ga met je muis in de div inhoud staan en voeg via het +-icoon in het CSS-venster een CSS-stijl toe. Dit moet een div worden met als naam #inhoud. We geven deze in de categorie Box voor de padding de volgende waarden: Top: 120px, Right: 20px, Bottom: 5px en Left: 100px. Hierdoor "zakt" de inhoud onder de afbeelding. Voorlopig lijkt het iets te ver, maar dat komt omdat de links er nog boven staan. Ook schijft de inhoud zover naar rechts, dat deze in lijn komt met de grens tussen het lichte en donkere deel in de afbeelding erboven.
Ga zo ook met je muis in de linken staan. Voeg weer via het CSS venster een CSS stijl voor #menu toe.
1. Geef deze met de CSS een eigen achtergrondkleur;
2. Ga onder de categorie Positioning aan de slag: geef het menu als Type absolute mee,
3. Width een waarde van 120px,
4. de afstand van boven: Top: 200px
5. en de linkerpositie Left:-50px.
Dit lijkt nu helemaal fout te gaan. Het menu loopt 50px links van het venster. We hadden gehoopt dat de postitie absoluut werd ingenomen ten opzichte van de linker bovenhoek van de div #geheel. Nu blijkt dat ten opzichte te zijn van de body zelf. Dit komt omdat de #geheel zelf niet gepositioneerd is. Dat kan alsnog:
We geven de #geheel een relatieve positie mee: wijs in het CSS-venster #geheel aan en klik op het potloodje. Ga naar de categorie Positioning en zet de Type om naar Relative. Nu moet de positie van het menu overeenkomen met dit tussentijdse resultaat. De positie van #geheel lijkt niet veranderd, maar van alle divs in #geheel (zoals #menu) kunnen nu gepositioneerd worden ten opzicht van #geheel. Intussen is de inhoud nu dicht tegen de afbeelding gekomen.

de links in het menu vormgeven

De links in het menu staan nog niet onder elkaar, en hebben nog geen vormgeving meegekregen. Klik weer met een muis op een link. Voeg vervolgens met de +-icoon van het CSS-venster weer een beschrijving toe. Dit moet een selector van het type ID worden met als naam #menu a.
Dit betekent een vormgeving van de linken (a) in de div #menu. Deze krijgen een speciale vormgeving, die niet toegepast wordt op de linken die eventueel in de #inhoud kunnen voorkomen.
We noemen #menu a een contextuele selector. Het is dus een selector, die een combinatie is van de selector #menu en de selector a.
Ga in CSS-bewerkingsvenster van #menu a naar:

de categorie Block en zet Display om naar block; (klik weer op de Apply-knop om te zien wat het effect hiervan is!);
de categorie Type en zet daar de Decoration om naar none, en kies als kleur #600 of een eigen kleur;
de categorie Box en geef daar voor de padding links 2px, boven en onder elk 0px;
de categorie Border en geeft daar links een rand van het Type solid, breedte 5px en kleur #000 of een eigen kleurkeuze.

We willen ook een roll-over effect in ons menu. Dan is het beter om selectors te hebben van het type a:link, a:visited en a:hover (worden ook wel pseudoclasses genoemd). Hierbij zijn a:link en a:visited precies gelijk. We kunnen daarom van de selector #menu a beter een selector #menu a:link, #menu a:visited maken. Als er tussen twee selectors een komma staat, dan geldt dat de beschrijving voor beide selectors geldt.
Ga naar de code weergave van je document (of naar de CSS-code van je stylesheet) en vervang #menu a door #menu a:link, #menu a:visited.
Keer weer terug de Design-weergave van je document en voeg via het CSSvenster de volgende ID-selector toe: #menu a:hover. Kies een andere tekstkleur dan in het vorige punt (#cc0)en een andere kleur van de linkerrand (#093).

het laatste fine-tunen

Met behulp van de contextuele selector #inhoud p, h1, h3 gaan we elke paragraaf in de #inhoud-div vormgeven. De vormgeving van de kop1 en de kop3 moeten ook dezelfde marges krijgen. Druk op de +-icoon van het CSS-venster en maak de selector #inhoud p, h1, h3 aan. Voeg in de categorie Box een margin-top van 0.5ems en een margin-bottom van 0 in. Hierdoor worden de witruimtes tussen koppen en elke paragraaf verkleind.
Nu moet je nog #footer stijlen. De achtergrondkleur moet dezelfde als die van de body worden. De tekstkleur is licht (#ffc), de tekst italic, rechts gelijnd op een afstand van 20px van de rechterkant van #geheel.
Als er in jouw site ook in de inhoud linken voorkomen, kun je de kleur daarvan via #inhoud a aanpassen en eventueel via een #inhoud a:hover van een roll-over effect voorzien.

van een intern naar een extern stylesheet

Als je tevreden bent met het resultaat, kun je de intern stylesheet omzetten naar een extern stylesheet. Hiervoor kies je in Dreamweaver File>>Export>>CSS Styles... Je slaat de te exporteren bestand op in de map stijlen, waarbij je de besandsnam met .css laat eindigen.
Er is in jouw html-document nog steeds een goede vormgeving te zien. Als je in het CSS-venster <style> aanwijst en daarna op het vuilnisemmertje drukt, zijn de gevolgen wel degelijk te zien: alle opmaak is weg.
Door op het koppelteken te klikken, kun je de nieuwbakken externe stijl koppelen, en heb je een volledig externe stylesheet. Resultaat.

Je kunt zelfs een tweede stylesheet aanmaken voor print: Maak een nieuw CSS-document, en sla deze als print.css ook in de map stijlen op.
De inhoud heb ik als volgt gemaakt:

body {
	color: #000000;
	background-color: #FFFFFF;
}
#menu {
	display: none;
	visibility: hidden;
}
#geheel{
	border: medium double #666666;
	margin: 1cm;
	padding: 1cm;
	width: 15cm;
	color: #333333;
}
#inhoud {
	padding: 0px;
}
#inhoud a {
	color: #999999;	
}

Sla dit op en koppel dit ook aan je document, waarbij je het vak Media openklapt en print kiest. Voor de opmaak in een webbrowser mag dit geen verschil geven, maar als je het document afdrukt (bijvoorbeeld als pdf), zal alles zwart-wit en zonder menu worden afgedrukt.
In de 5 andere pagina's van jouw site, kun je de stylesheets koppelen en de divs aanmaken via Insert>>Layout Objects>>DivTag. De naam van de divTag kun je selecteren uit het uitklapmenu als de stylesheet al gekoppeld is.
Lever deze training in via N@tschool. Bewaar ook een kopie om op de CD te branden als CSSTraining.