In het vorige deel van deze cursus heb je zelf een postzegelpagina gemaakt. Je hebt als het goed is geleerd om rollover plaatjes te maken, layers te plaatsen en deze layers met behulp van behaviors te laten verschijnen en verdwijnen. Ook kun je al links en afbeeldingen in teksten plaatsen en weet je al met kleuren, lettertypes en tabellen te werken. In dit deel zul je leren om zelf style sheets te maken. Hiermee wordt het document opgemaakt. Later in dit deel zullen we ingaan op het zoeken naar en vervangen van stukjes HTML code. Tot slot gaan we de site online zetten en een FTP-connectie maken.

Style sheets
Als je Dreamweaver hebt opgestart en je hebt de postzegelpagina weer voor je, druk dan op het Code-knopje in de documentbalk (zie deel 1). Je ziet nu de HTML code die door Dreamweaver is gegenereerd. Als je naar een stukje getypte tekst kijkt, dan zie je dat dit is omringd door de style tag (zie hieronder).


In vorige versies van Dreamweaver werden nog niet automatisch de font tags in een style gezet. Om de teksten heen stonden allemaal verschillende fontcodes, voor kleur, lettertype, grootte etcetera. Dreamweaver MX maakt automatisch een style sheet aan als je een tekst een bepaalde eigenschap geeft, zoals lettertype en -grootte. De verzameling van verschillende styles zie je bovenin je document staan. In je document zelf wordt hiernaar verwezen met de style tag.

Een extern stylesheet geeft je meer controle over de gebruikte stijlen. Bovendien kun je een extern stylesheet koppelen aan meerdere documenten of webpagina's. Een wijziging in een bepaalde stijl wordt dan automatisch op elke pagina doorgevoerd waar die stijl voorkomt. Je gaat nu zelf een style sheet maken.

Open een nieuw bestand in dreamweaver (File / New / Basic). Ga nu naar Text / CSS Styles / Manage Styles. In het venster Edit Style Sheet klik je op New. Geef een toepasselijke naam, zoals "tekst" en druk op OK. Er opent zich nu een scherm waarin je allerlei kenmerken van de later te bewerken tekst kunt aangeven. Geef het volgende aan:

Font: Verdana,Arial,Helvetica,sans-serif
Size: 10
Color: #000000

Klik nu op OK en vervolgens weer op New.
Noem deze bijvoorbeeld "kopjes" en geef nu het volgende aan:

Font: Verdana,Arial,Helvetica,sans-serif
Size: 10
Weight: Bold
Color: #0000CC

Druk weer op OK en nog een keer op new. Noem deze b.v. "wit" En geef het volgende aan:

Font: Verdana,Arial,Helvetica,sans-serif
Size: 10
Weight: Normal
Color: #FFFFFF

Druk nu op OK en vervolgens op Done, nogmaals op Done. Je hebt nu drie styles gemaakt die je gaat opslaan als stylesheet. Voor je dat doet open je eerst de HTML code met de 'Code-knop' linksboven je document. In de code zie je nu de drie stijlen binnen de style tag staan en verder nog wat html-tags in een verder leeg bestand. Het is belangrijk dat er geen andere tags meer in dit bestand staan, zoals html en body.
Verwijder alle codes uit het bestand, behalve de style-tags en alles wat daartussen staat. Klik op Bestand / Opslaan en sla het op als bijvoorbeeld style.css (Let op: de extensie .css) in dezelfde directory als je postzegel homepage. Sluit het bestand.

De tekst in je pagina ziet er nu weer onbewerkt en kaal uit. We gaan het externe style sheet aan de pagina koppelen en het document hiermee opmaken. Klik in je postzegelpagina op Text / CSS Styles / Manage Styles in de menubalk. In het venster dat zich nu opent, klik je op Attach en vervolgens op Browse. Selecteer nu je style sheet in het bladervenster en klik op OK. Druk nu op OK en op Done. Je pagina is gelinkt aan de style sheet die je net gemaakt hebt.

Ga nu met je cursor ergens in de bovenste cel van de middelste kolom staan en klik op Window / CSS styles in de menubalk. Rechtsboven in je scherm krijg je een venster te zien met je aangemaakte stijlen. Klik op het plus-teken voor de stylesheet om de verschillende stijlen te zien. Rechstonder in beeld zie je de kenmerken van de tags.
Onderin je scherm zie je het Properties-venster van de tabelcel waar je in staat. Selecteer hierin achter Style de gewenste stijl, bijvoorbeeld "tekst". Je zult zien dat alle tekst in die cel weer het goede lettertype krijgt. Doe dit ook voor de twee cellen hier onder. Selecteer nu de kopjes van elk stukje en in het Properties-venster bij Style "kopjes". Doe hetzelfde bij de onderste cel van de rechter kolom en de bovenste en de onderste rij van de hele tabel waarin de titel staat. Klik hier op wit in je Properties-venster bij Style.
Kijk eens in je HTML code (switch via Code-button) voor het resultaat. De oude style tags zijn vervangen voor je eigen styletags, die een duidelijke naam hebben en naar een extern .css document verwijzen.

Stylesheets zijn dus heel erg handig om je HTML code tot een minimum te beperken. Niet alleen tekst, maar ook tabellen, links achtergrondplaatjes, formulierattributen, layers etc. kun je met deze stylesheets definiëren. Als je hier wat mee experimenteert krijg je er vanzelf handigheid in. Het is een goede gewoonte om aan te leren met stylesheets te werken als je veel met HTML bezig bent. Uiteindelijk kan het een heel stuk schelen in de grootte van je document en natuurlijk de verwerkingstijd van je pagina.

Uploaden van je pagina
Voor het uploaden of FTP-en van je pagina heb je een FTP-programma nodig. Dat is een programma dat ervoor zorgt dat de bestanden en mappen van jouw homepage worden overgezet naar de server waar je homepage op draait, zodat iedereen deze kan benaderen via internet. In Dreamweaver is zo'n FTP-programma ingebouwd.
Klik op Site / Manage Sites in de menubalk. In het nieuwe venster dat verschijnt kies je New/ Site. Er opent zich nu een wizardvenster waarin je je sitegegevens kunt invullen. Klik eerst op het Advanced-tabblad en vul dan het volgende in.

Bij Local info:
Site Name: een willekeurige naam voor je site
Local Root Folder: De map waar je postzegelpagina in staat.
Gebruik hiervoor de browse knop

Klik nu links op Remote Info en selecteer FTP uit het Access-menu. Vul nu het volgende in.

FTP Host: home.hccnet.nl
Host Directory: hier komen we zo op terug. Nu even niets invullen.
Login: je gebruikersnaam waarmee je verbinding maakt met HCCnet
Password: het wachtwoord dat daarbij hoort.
Klik ook op het vinkje bij Save
Klik nu op OK en in het volgende venster op Done.

Rechts krijg je nu bij het Files / Site-panel de directory-structuur van je eigen PC te zien. Klik nu op de Connect-knop (de twee stekkertjes) . Dreamweaver legt nu verbinding met de server van HCCnet. Als je de inloggegevens correct hebt ingevuld krijg je nu de directory-structuur van de homepage server van HCCnet waarop jij bent ingelogd, te zien. Aan de rechter kant van het menubalkje van het Files / Site-panel zit een expand/collapse-knopje . Als je hier op klikt krijg je de FTP-module van Dreamweaver helemaal te zien. Rechts de directory op je lokale computer en links de directory op de HCCnet server. We gaan nu een nieuwe map op de server aanmaken. Klik daarvoor met je rechter muisknop op het open mapje helemaal links bovenaan in het homepage server gedeelte (zie afbeelding).

Klik nu op File / New Folder in de menubalk. Noem deze folder "postzegel". Er is nu een nieuwe map gemaakt waarin we al je gemaakte bestanden gaan zetten.
Klik nu weer op Site / Manage Sites en selecteer je net aangemaakte verbinding. Klik op Edit en klik links weer op Remote Info. Nu zet je bij Host Directory neer: postzegel/ (Let op de eind slash). KLik vervolgens op OK en Done.

Nu is het een simpele kwestie van overzetten. Klik aan de rechter kant de lokale map open waar je postzegel pagina, de style sheet (style.css) en de map met al je plaatjes in staan. Klik nu al je bestanden aan en druk op de put knop bovenin (blauwe pijl naar boven). Dreamweaver zet alle bestanden op de juiste plek neer. Je kunt nu een kijkje nemen op internet. Kijk op http://home.hccnet.nl/jegebruikersnaam/postzegel/index.html.