"Cascading Style Sheets" zijn heel goed met het kladblok te maken.
In Dreamwaever is dat ook mogelijk. Op deze pagina is dit uitgewerkt voor
het maken en bewerken van een externe stylesheet. We gaan daarbij uit van
een pagina waar nog geen opmaak is; dat moet immers in de extra stylesheet.
een externe stylesheet toevoegen
Open het
onopgemaakte document. Je kunt nu prima in de design-mode werken.
Rechtsboven zie het CSS venster. Mocht dit er niet zijn kies je: Kies
Window >> CSS
Styles.
Rechtsonder daarin zie je 4 knopjes: Als
de tab CSS styles nog niet gekozen is dan doe je dat
nu.
Je ziet dat er nog geen gedefinieerde stijlen zijn.
Klik op de tweede knop rechtsonder op het Design-venster met het +teken:
New CSS Style
Kies de tweede optoie: Tag (redefines the look of a specific
tag) (wijzig de vormgeving van een bepaalde HTML-tag) Selecteer daaronder
de tag die je wil veormgeven, i n dit geval body
zodat je stijlkenmerken aan de body kan toevoegen. Dit wordt dan de selector
in een neieuwe stylesheet.
Zodra je op de OK-knop klikt krijg je de gelegenheid om de de externe stylesheet
op te slaan. Doe dit in ieder geval in de map waar ook de rest van de website
staat. (Er zijn ontwikkelaars, die bij grote sites een aparte map binnen
de map van de website aanmaken waarin de externe stylesheets opgeslagen
staan. Daar is natuurlijk geen enkel bezwaar tegen.)
Dreamweaver voegt eventueel zelf de extensie .css achter
de naam toe.
Je komt nu in een venster waarin je in het opgeslagen stijldocument (hier
is dat theo.css) voor de selector bodybij verschillende categoriën
waarden kunt teovoegen aan stijldefenities. In de figuur hierboven is
van de categorie Background de achtergrondkleur op magenta gezet.
Als je al jouw categoriën hebt doorgenomen en de waarden hebt gezet
voor wat je nodig vindt, klik je op de OK-knop. Op dat moment wordt de
stylesheet bijgewerkt en opgeslagen.
Bovendien heeft Dreamweaver de pagina waarin je werkt gekoppeld aan de
stylesheet.
Ook zie
je het effect op je pagina weergegeven zo goed als Dreamweaver dat maar
kan. Deze zin suggereert al dat dit niet helemaal kloppend is in onze versie
van Dreamweaver. je zult de pagina dan altijd weer opnieuw moeten testen..
Dit is nu eenmaal inherent aan complexere HTML: DreamWeaver is nu eenmaal
geen webbrowser en ook webbrowsers gan in de weergave van moeilijkere HTML
nu eenmaal afwijkingen gaan vertonen. Dit zal bij eenvoudige CSS nog wel
meevallen. Maar uitgebreid testen in meerder browsers is voor een webdesigner
nu eenmaal geboden.
in de voorbeeldafbeelding hiernaast zijn er dus waarden voor de selectors
body, a:hover en .nadruk gemaakt.
de stylesheet aanpassen in Dreamweaver
als je een selector weer wilt aanpassen, klik je in het venster dubbel
op de selector in het venster Css-venster. Je kunt in
dat venster ook een selector aanwijzen en op het derde icoontje met het
potloodje klikken om de selector aan te passen.
als je weer een selector wilt toevoegen klik je weer op het +teken rechtsonder
aan het venster Design.
met DreamWeaver in een HTML-document een <div> maken
Selecteer de
bewuste tekst en kies uit de menubalk: Insert >> Layout Objects >>Div
Tag. Er komt nu een menu, waar je een al bestaande (maar nog niet
gebruikte) div-tag kan selcteren , of een nieuwe ID (selector) kunt maken.