Starten met Dreamweaver - gestructureerd werken
Het is heel verleidelijk om in Dreamweaver op gevoel wat menu's te gebruiken, en je site compleet te verklaren, zodra het er aardig uitziet. Op zich is daar ook niets mis mee.
Maar wanneer je professioneel en tijdsbesparend wilt werken, is een gestructureerde werkwijze aan te raden. Gestructureerd werken scheelt veel onnodige foutmeldigen van Dreamweaver.
Stap 1: Definieer je Site in Dreamweaver
Dreamweaver geeft foutmeldingen als onderstaande, wanneer je deze stap en het vervolgens bewaren van je document, overslaat:
Dreamweaver weet dan namelijk niet waar de Local Site Root zich zal bevinden. Begin daarom elk project met de definitie van een nieuwe site:
Kies de folder of directory waar je de bestanden van de nieuwe site wilt bewaren:
Als je nog geen gegevens hebt van het webserver-account waar je site uiteindelijk online zal staan, kun je de volgende vraag nu met "none" beantwoorden:
Later kun je deze gegevens altijd aanpassen via het Roluitmenu Site -->Manage Sites...
Stap 2: Maak een nieuw HTML-document aan in Dreamweaver
Vervolgens maak je een nieuw HTML-document aan......:
......dat je meteen bewaart om foutmeldingen als deze te voorkomen:
Stap 3: De CSS-mogelijkheden van Dreamweaver inschakelen
Controleer vervolgens of je Dreamweaver-preferences goed staan:
Check of "Use CSS instead of HTML tags" aangevinkt staat:
Stap 4: CSS-style sheets maken in Dreamweaver
De eenvoudigste manier om Style Sheets aan te maken in Dreamweaver, is via het Page Property -palet.
Kies in het Roluitmenu Modify de optie Page Properties. In het dialoogvenster dat volgt kun je de layout-eigenschappen van de pagina instellen. Je kunt er voorgedefinieerde lijstjes met Fonts kiezen, of er, via de popup-optie Edit Font List, zelf fonts aan het lijstje toevoegen. Deze fonts zullen later in je Style Sheet aangeroepen worden:
Ook de kleuren van de pagina kun je er instellen. In het kleurpalet vind je de web-kleuren, kies je het kleurzoeker-ikoontje rechts in de popup, dan zal dat het dialoogvenster Colors openen, waar je een andere kleur kunt kiezen:
Ook kun je in dit Page Properties-palet een achtergrond-afbeelding voor je pagina definieren, net als de wijze waarop die zich moet herhalen of juist niet:
Zodra je op OK klikt zal je Style Sheet in je HTML-document opgenomen zijn, en te zien zijn in je code en in het preview-venster van Dreamweaver:
Stap 5: je Style-sheet exporteren
Interne Style-sheets hebben als nadeel dat ze alleen per document werken. Wanneer je ze exporteert naar een extern bestand dat je in elk HTML-document aanroept, kun je ze hergebruiken in je hele site. Het voordeel daarvan is dat je door 1 bestandje, -je CSS-bestand,- te veranderen, het uiterlijk van je hele site kunt veranderen. Gebruik je daarentegen interne style-sheets, dan zul je elk HTML-document afzonderlijk moeten editten om je site bijv. een andere kleur ofeen ander font te geven. Heb je een grote site, dan kan dit weken handwerk opleveren.
We vertellen je vast niets nieuws: externe CSS-bestanden zijn daarom aan te bevelen.
Check eerst of het Tabblad "All" in je CSS-palet geselacteerd is. Klik daarna met de rechtermuisknop (met de Alt-toets voor de mac)
Ook via het Roluitmenu Text kun je je CSS Styles exporteren naar een extern Style-sheet-bestand:
Na Export... hoef je alleen een naam in te geven:
Zodra je Save of Enter heb gegeven, zal je bestand in de lijst met webbestanden staan, en kun je het zo je wenst verder bewerken:
Stap 6: je Style-sheet aanroepen in een pagina
Wil je het Style-sheet-bestand koppelen aan een HTML-pagina dan doe je dat als volgt. In het Roluitmenu Text kies je achter CSS Styles de optie Attach Style Sheet:
In het dialoogvenster dat volgt kun je bladeren naar het CSS-bestand dat je wilt aanroepen in je HTML-pagina:
De interne CSS Styles, die nog in de <head> van je document staan, kun je nu wissen. Je selecteert dan de <style>-tag in je CSS-styles-palet, en klikt op het prullenbak-ikoontje rechtsonder in het palet: Delete Embedded Stylesheet:
In de <head> van je HTML-document zul je nu alleen nog de HTML-tag vinden die je externe CSS-style-bestand aanroept:
De basis voor je HTML-document is nu klaar: je kunt de content gaan positioneren. Wanneer je alle layoutzaken als kleur, fontgrootte, interlinie, kolombreedte etcetera opslaat in je externe Stylesheet, kun je voortaan je hele site wijzigen, door slechts dat ene bestand aan te passen.