"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.
- 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.
de stylesheet aanpassen in Dreamweaver
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.