Dreambits Webdesign cursussen - Dreamweaver, Flash

CSS (Cascading Style Sheets)

HTML is er om de structuur van een webpagina vorm te geven, CSS (Cascading Style Sheets) verzorgt het uiterlijk. Om te beginnen kan CSS de opmaak van teksten voor z'n rekening nemen: het soort lettertype, kleur, grootte. Het uiterlijk van kopjes, van links, enz.
Maar CSS kan ook de totale lay-out van een site regelen. Dit wordt ook wel CSS-positioning genoemd. Hier wordt dan gebruik gemaakt van <div> tags. De DIV tag doet zelf niets, hij fungeert als een container waar alle inhoud van een pagina in kan worden gezet. Door de hele pagina op te splitsen in zulke containers, die op een bepaalde manier gepositioneerd zijn ten opzichte van elkaar, kun je dan een pagina lay-out maken, die je in je hele site kunt gebruiken.

Voordelen van het gebruik van CSS

Meer mogelijkheden
CSS biedt meer mogelijkheden dan HTML. CSS biedt bv de mogelijkheid het uiterlijk van een link te veranderen op het moment dat de muis erboven staat. Maar biedt ook de mogelijkheid om randen, marges en achtergrondkleuren op elk gewenst element toe te passen. (Voor zover van toepassing; een achtergrondkleur op een afbeelding zal niet lukken)

Makkelijk onderhoud
De site wordt veel makkelijker te onderhouden. CSS biedt de mogelijkheid stijlen toe te kennen aan HTML elementen. Er kan gebruik gemaakt worden van een aparte CSS-pagina, waar alle html pagina's aan gelinkt worden. Worden dan de stijlen in de CSS pagina veranderd, dan zal elke HTML pagina deze veranderingen meteen laten zien.

Nettere en minder code
De code van een HTML pagina wordt dus ook veel overzichtelijker, omdat er veel minder informatie in staat die met de opmaak te maken heeft. Zo is de <font> tag bijvoorbeeld in ongerede geraakt. Voorheen moest bij elke alinea steeds weer opnieuw het soort lettertype, kleur en grootte worden aangegeven. Nu kan dat op 1 of twee plaatsen in de CSS pagina, voor de hele site.

Consistente opmaak
Het gebruik van CSS leidt bijna automatisch tot een meer consistente opmaak van een site. Wanneer consequent toegepast zullen alle HTML pagina's die aan het stylesheet zijn gekoppeld, op eenzelfde wijze worden opgemaakt.

Toepassen van CSS

CSS kan op drie niveaus worden toegepast:
Binnen een tag
De css code staat dan in de html-tag waar een bepaalde eigenschap aan moet worden gegeven. Dit is het minst handig, omdat het nog steeds dezelfde herhaling van code inhoudt als bij HTML. Wel te gebruiken als de code echt maar eenmalig ergens toegepast moet worden. Deze vorm wordt door Dreamweaver niet automatisch toegepast. Deze kan enkel via het werken met code worden ingevoerd, met behulp van het "style" attribuut.

In de <HEAD> tag
Stijl informatie kan neergezet worden in de head tag. In de body van de pagina, waar de stijlen toegepast worden, wordt dan waar nodig verwezen naar deze stijlen. Steeds nog niet heel erg handig, omdat dezelfde stijlinformatie in elke pagina moet worden gebruikt. Elke pagina zal aangepast moeten worden, als er een stijl veranderd.

Een apart Stylesheet (een css-pagina)
Dit is de beste manier om CSS te gebruiken. De stijlen worden gedefinieerd voor de hele site, en het onderhoud hoeft slechts in één bestand te gebeuren. Natuurlijk kunnen er voor een site meerdere stylesheets gebruikt worden. Het is ook mogelijk in een enkele pagina meerdere stylesheets te gebruiken. Aparte stylesheet bestanden worden niet automatisch door Dreamweaver gemaakt, maar op verschillende plaatsen wordt wel aangeboden ze aan te maken. Ook kunnen in het dialoogvenster "Nieuwe pagina" standaard lay-outs worden gekozen, die door externe stylesheets vorm worden gegeven.

Werken met Stijlen binnen Dreamweaver

In vergelijking met de vorige versie van Dreamweaver zijn er weer veranderingen aangebracht in het werken met stijlen. Het is duidelijker geworden, wanneer met CSS wordt gewerkt, en wanneer met HTML. Het eigenschappen venster is nu in twee delen opgebouwd, met knoppen "CSS" en "HTML" om te schakelen tussen deze twee manieren:

Hierboven is de HTML modus geactiveerd. Bij "Formaat" zijn de kopjes te kiezen, en ook vet en cursief is door middel van HTML tags in te stellen. Wat het uiterlijk betreft, blijft het daarbij. Wil men bijvoorbeeld een ander lettertype toepassen, of de tekst centreren, dan moet men naar de CSS modus overschakelen.

Wanneer het hoofdmenu "Formaat" wordt gekozen, is het echter nog steeds mogelijk om HTML voor tekstopmaak te gebruiken:

De opties "Lettertype" en "Uitlijnen" zullen hier HTML opmaak gebruiken, terwijl deze opties ook in het CSS gedeelte van het eigenschappen palet te vinden zijn. Vooral voor het gebruik van lettertypes moet dit voorkomen worden.

Eigenschappen: CSS modus

Indien we bijvoorbeeld een stuk tekst selecteren, en een ander lettertype selecteren uit het uitklapmenu, zal Dreamweaver automatisch het dialoogvenster "Nieuwe CSS Regel" openen:

Nu zal er een nieuwe CSS klasse worden gemaakt, die naar believen een aantal keer kan worden toegepast. Wordt later de klasse veranderd (bijvoorbeeld, er wordt voor een ander lettertype gekozen in de klasse) dan zal deze verandering onmiddelijk te zien zijn op alle punten waar de klasse is toegepast.

Klikt men in dit venster OK, dan kan de opmaak en verdere eigenschappen van de stijl vastgelegd worden:

Maar stijlen moeten niet zomaar lukraak worden aangemaakt. Voor een effectief werken met stijlen, is het belangrijk te weten in welke context de stijlen werkzaam zijn. Daarvoor moeten we eerst terug naar het eerste dialoogvenster, waar we het juiste type kiezer moeten selecteren.

Contextueel typen kiezers

Wanneer een nieuwe stijl wordt aangemaakt, moet er om te beginnen een type kiezer worden gekozen:

Dreamweaver biedt vier opties:

Tag
Wanneer men kiest voor tag, zullen de eigenschappen van de stijl automatisch worden toegepast op deze tag, wanneer die in de pagina wordt gebruikt. We kiezen bijvoorbeeld voor Tag, en vullen dan H3 in (of we kiezen de tag uit het uitklapmenu dat beschikbaar is als men voor Tag kiest:

Hier is al te lezen, dat deze regel zal worden toegepast op alle <h3> elementen. We klikken hier OK, en het volgende venster opent:

In de definitie kiezen we nu enkel in de categorie "Type" een rode kleur. Voortaan zal een kopje met de grootte H3 altijd rood worden weergegeven. De kop blijft wel de eigenschappen vertonen die hij al van nature gekregen heeft: Een h3 kopje wordt vet weergegeven, en is groter dan gewone tekst. Deze eigenschappen zouden echter ook veranderd kunnen worden.

In het dialoogvenster "Nieuwe CSS Regel" kan gekozen worden waar de stijl wordt opgeslagen. In dit geval hebben we er nog voor gekozen dat de CSS in de HTML pagina wordt geplaatst. De code wordt dan in het <head> gedeelte van de pagina geplaatst:

Door gebruik te maken van de contextuele kiezer "Tag" kunnen dus bestaande html-elementen een ander uiterlijk krijgen. Dit is een zeer krachtige mogelijkheid. Dit kan bijvoorbeeld worden gebruikt om een standaard lettertype voor de site aan te geven. Daarvoor kan dan gebruik worden gemaakt van de tag <body>. Alle zichtbare tekst staat binnen de body, dus de stijl zal dan over de hele pagina worden toegepast.
Maar wat als we maar af en toe een kopje een andere kleur willen geven, of als we dit toe willen passen op een bepaalde selectie? Dan komt een Klasse van pas.

Klasse
Een Klasse is een stijl die men naar believen overal kan toepassen wanneer men waar wil. Wanneer men bijvoorbeeld binnen een tekst een enkel woord selecteert, en dan bij eigenschappen een rode kleur kiest uit de kiezer onderin...

Dan zal weer het venster Nieuwe CSS Regel openen.

In dit geval wordt nu voor Klasse gekozen, en kan een eigen naam worden ingevuld. Kies voor de naam een enkel woord, en begin de stijl met een gewone letter. In dit geval kunt u geen verdere eigenschappen van de stijl kiezen, omdat u al een eigenschap hebt gekozen. Dreamweaver gaat er daarom van uit, dat dit alles is wat gedaan moet worden. Later kunnen echter meer eigenschappen aan de stijl worden toegevoegd.

Id
Een id is in principe hetzelfde als een klasse, echter kan deze maar eenmaal worden toegepast. Id's zijn van een hogere orde, en worden in het algemeen toegepast om de layout van een pagina vast te leggen. Een bepaald onderdeel of blok van een pagina zal immers maar eenmaal worden gebruikt.

Samengesteld (op basis van uw selectie)
Dit is de meest geavanceerde mogelijkheid. We zien deze mogelijkheid onder andere bij het maken van stijlen voor links, omdat dit van nature al samengestelde kiezers zijn. Maar vooral komt het naar voren in de demo bij het maken van het CSS menu.

Een nieuwe stijl is te maken met het knopje Nieuwe CSS Regel onderin het Styles palet:

Van hieruit zijn de stijlen ook te bewerken, maar we gaan eerst kijken naar de mogelijkheden die CSS heeft.

Type

Font-family
Het lettertype. Meestal worden verschillende lettertypes gebruikt. Het lettertype moet aanwezig zijn op de computer van de bezoeker, wil het gebruikt kunnen worden. Is het eerste lettertype niet aanwezig, dan zal het tweede worden gebruikt. Als laatste wordt dikwijls serief (het standaard lettertype met schreven) of sans-serif (een lettertype zonder schreven) opgegeven, als laatste mogelijke onderscheid.

Font-size
De grootte van het lettertype. Kies hier voor een cijfer, de relatieve maten worden slecht ondersteund door de browsers. Daarna wordt het vak actief, waar je de eenheid kunt aangeven. Pixels geeft een afmeting in pixels, % in procenten van de standaard grootte, en em is de hoogte van het huidige lettertype. Gebruik van pixels heeft het resultaat dat de gebruiker de font grootte niet kan aanpassen via het browser menu, met procenten en em is dat wel mogelijk.
De meeste andere opties zijn bedoelt voor drukwerk.

Font-Weight
Normal of Bold worden ondersteund door de browsers, de andere eigenschappen nog niet.

Font-Style
Normal, is de standaard, italic is schuin, en oblique is ook schuin.

Font-Variant
Small Caps: het lettertype wordt weergegeven als kleine hoofdletters. Soms ziet dit er hetzelfde uit als gewone hoofdletters.

Transform
Capitalize
de eerste letter van elk woord wordt een hoofdletter.
Uppercase
Alles wordt met een hoofdletter geschreven
Lowercase
Alles wordt kleine letters

Color
De kleur van de tekst

Decoration
Een bepaalde versiering. (Hier wordt underline of juist none veel gebruikt om links op te maken.)

achtergrond

Background color
Een achtergrond kleur instellen.

Background image
Een achtergrond afbeelding opgeven.

Repeat
Of de achtergrond afbeelding eenmalig vertoond moet worden, of herhaald moet worden om de beschikbare ruimte te vullen.

Attachment
Scroll
De achtergrond scrollt mee met de pagina. Dit is het standaard gedrag.
Fixed
De achtergrond blijft stilstaan, en de inhoud van de pagina scrollt er overheen.

position (X)
Waar de afbeelding wordt gepositioneerd op de pagina. Wanneer de afbeelding herhaald wordt, dan is dit ook het beginpunt van waaruit de pagina verder opgevuld wordt.

position (Y)
Zelfde als Horizontal position, maar dan in vertikale richting.

Blok

Categorie Blok wordt gebruikt voor spatiëring en uitlijning.

Word spacing
Definieer de afstand tussen de woorden.

Letter Spacing
Definieer de afstand tussen de letters.

Vertical align
De verticale uitlijning van het element.

Text align
Uitlijning van tekst binnen het element

Text indent
Geeft aan hoe ver de eerste regel van de tekst inspringt.

Whitespace
Normal
Geen spaties
Pre
Hetzelfde als de <pre> tag in HTML. Alle witruimte wordt gehandhaafd.
Nowrap
De tekst gaat enkel naar een nieuwe regel bij een <br> tag.

Display
Of het element wordt vertoont, en hoe. Kies None om het element niet te vertonen.

kader

Elk HTML block-level element bevindt zich in een denkbeeldige doos. Deze doos heeft een marge aan de buitenkant, die ervoor zorgt dat afstand wordt gehouden van andere elementen. De doos heeft ook een eigenschap die de inhoud van de rand afhoudt, dit is de padding. De doos heeft ook nog een rand (border), die in de volgende categorie wordt besproken.

Width
De breedte van het element

Height
De hoogte van het element

Float
Bepaald aan welke zijde andere elementen zullen zweven.

Clear
Aan welke kant geen andere elementen mogen zweven.

Padding
Afstand van de inhoud van het element tot de rand.

Margin
Afstand die het element behoudt tot andere elementen.

rand

De rand om een element.

Style
De soort rand.

Width
De dikte van de rand.

Color
De kleur van de rand.

Same for All
Alle zijden krijgen dezelfde eigenschap.

Lijst

Opties om lijsten vorm te geven

Type
het type lijst waarvoor gekozen wordt.

image
Selecteer een afbeelding als teken voor de lijst items

Position
Outside
De tekst van een item springt in
Inside
De tekst van een item staat tegen de linker kantlijn.

Positioneren

Positioning regelt de plaatsing van een element, en wordt vooral gebruikt om met behulp van <DIV> elementen de lay-out van een pagina te regelen.

Position
Absolute
De positie wordt bepaald vanaf de linkerbovenhoek van het browser venster.
Relative
De positie wordt bepaald relatief aan het parent element.
Static
Het element volgt de tekstloop van de pagina

Visibility
Inherit
De zichtbaarheid wordt overgenomen van het parent element.
Visible
Het element is zichtbaar
Hidden
Het element is niet zichtbaar

Z-index
De stapel volgorde van het element

Overflow
Wat gebeurt met inhoud die niet past binnen de afmetingen van het element.
Visible
het element wordt vergroot zodat de inhoud zichtbaar is.
Hidden
Inhoud die niet past is niet zichtbaar.
Scroll
Er worden altijd scrollbalken toegevoegd aan het element.
Auto
Er worden scrollbalken toegevoegd aan het element als de inhoud niet past binnen de afmetingen.

Placement
Waar het element geplaatst moet worden. Dit kan afhankelijk zijn van het browservenster, als bij Position Absolute is gekozen, of afhankelijk van het moeder element als als positie Relative is gekozen.

Clip
Welk gedeelte van het element zichtbaar is. Binnen de ruimte van het element kan dus een gebied onzichtbaar zijn.

Extensies

Dit zijn een aantal extra's. De visual effects werken enkel in Internet Explorer.

Page break
geeft aan wanneer een nieuwe pagina moet beginnen tijdens printen.
Before
Begin een nieuwe pagina voor het element
After
Begin een nieuwe pagina na het element.

Visual effect
Cursor
De cursor kan veranderd worden. Werkt enkel in Internet Explorer.
Filter
Een aantal overgangen die enkel in Internet Explorer werken.

Stijlen toepassen in de pagina

Tag
Indien je bij het maken van de nieuwe stijl voor "tag"hebt gekozen, dan heb je een bepaalde html tag opgegeven. De stijl die aan de tag is gegeven, zal dan automatisch worden toegepast, overal waar de tag wordt gebruikt. Je hoeft dan in de html-pagina verder niets meer toe te voegen.
Dit is perfect voor een algemene stijl voor de pagina , via de <body> tag. Ook voor opmaak van kopjes, door middel van de <H1> tm <H6> tags. (Te vinden in het Eigenschappen paneel onder Formaat: Kop 1 enz). En natuurlijk voor links.

Let erop dat als je tags gebruikt voor CSS regels, je dat zo logisch mogelijk doet. Een H1 is de grootste kop, en dit zou in je CSS stijlen ook de meest opvallende moeten zijn. De <strong> tag maakt tekst normaliter vet, en het zou vreemd zijn als je die nu de functie van schuingedrukte tekst zou geven.
Logisch werken zorgt ervoor dat je zelf veel makkelijker het overzicht bewaard. Daarbij komt, dat het overeenstemt met de meest moderne opvattingen over het web: het semantische web. Dit gaat uit van het principe dat het gebruik van bepaalde code een betekenis met zich mee draagt. Als je hier rekening mee houdt, dan is dat in je eigen voordeel, al was het alleen maar omdat de zoekmachines er ook rekening mee houden.

Klasse (Class)
Een class is een zelfgemaakte stijl die je naar believen ergens kunt toepassen. Pas je het toe op een inline element, bijvoorbeeld een stuk tekst, dan selecteer je de tekst eerst. pas je het toe op een block-level element, bijvoorbeeld een alinea, dan volstaat het de cursor in de alinea te plaatsen.
Vervolgens kan de stijl aan het element worden gekoppeld door in Eigenschappen paneel via het uitklapmenu "Style" de juiste stijl te selecteren.
Fijn hieraan is, dat de opmaak van een stijl hier al duidelijk is:

Het kan ook vanuit de CSS modus:

Onder "Klasse toepassen" staan de al gedefinieerde klassen. De eigenschappen zijn hier echter niet zichtbaar, dus men moet hier volledig op de naam van de stijl afgaan.

Het is echter wel zaak op te letten: dikwijls zijn er verschillende elementen waaraan een class kan worden gekoppeld, bijvoorbeeld een alinea, of de cel van een tabel. Daarom kan deze werkwijze soms een ongewenst effect geven.

Het is ook mogelijk classes toe te wijzen via de statusbalk van het documentvenster. Klik in het element, selecteer het element in de balk onderin het documentvenster, klik dan met de rechtermuisknop. Nu opent een dialoogvenster, waarmee een class aan het element kan worden gekoppeld:

Op dezelfde manier kan een class van een element worden verwijderd. In de documentbalk is meteen ook zichtbaar welke class aan een element is gekoppeld, zodat het ook een makkelijke referentie biedt.

Pagina eigenschappen als basis voor een extern stylesheet

We hadden in het tekstbestand over de pagina-eigenschappen de volgende definities vastgelegd voor de pagina (via Wijzigen > Pagina eigenschappen):

Een basis lettertype:

En kleuren voor de links:

Een stylesheet verplaatsen

Door de CSS van de pagina te verplaatsen van de pagina naar een nieuw css bestand, verkrijgen we een extern stylesheet:

- Open het CSS panel (Venster > CSS stijlen)

- Selecteer de bovenste regel, hou de Shift toets ingedrukt, en selecteer daarna de onderste.

- Klik op de rechter muisknop, en selecteer "Verplaats CSS-stijlen"

- Het dialoogvenster "Verplaatsen naar externe stijlpagina" opent. Kies hier voor de optie "Een nieuwe stijl pagina" (je kunt de stijlen ook in een bestaand bestand plaatsen), klik o.k en geef het bestand een naam. Het bestand wordt meteen gekoppeld aan je pagina. De pagina veranderd dus niet van uiterlijk.

We krijgen dan een CSS pagina die er bijvoorbeeld als volgt uitziet:

De bovenste stijlregel correspondeert met het eerste venster van de pagina eigenschappen. De "body" tag omsluit alle zichtbare informatie van een pagina, en moet dus voldoen om de hele pagina dezelfde tekstopmaak te geven. Omdat echter Internet Explorer het formaat van tekst in tabellen niet overneemt vanuit de CSS voor body, is de html code voor een cel en een header cel ook opgenomen. Dit zorgt er voor dat alle browsers de gehele pagina zullen weergeven zoals bedoeld.
De stijlregels die beginnen met "a" zijn gemaakt door het definieren van de links.

Na het exporteren zijn de stijlen verwijderd uit de pagina, maar er blijft nog een lege <style> tag achter in het CSS venster. Deze kan verwijderd worden via het Stijlen paneel. Selecteer de tag daar en klik onderin op het vuilnisbakje.

Stijlen verwijderen

Open het Stijlen paneel door Venster > CSS-stijlen te kiezen uit het hoofdmenu. Zorg dat de knop "Alles" is geselecteert, zodat alle stijlen binnen de pagina zichtbaar zijn.

In het venster selecteer je vervolgens de bovenste regel, "style", en klik op het vuilnisbakje onderin het palet om alle stijlen te verwijderen.

Het is natuurlijk ook mogelijk een enkele regel te verwijderen, door die te selecteren.

Een stijlpagina koppelen aan een bestaande pagina

Klik in de onderste balk van het panel op het knopje met het kettinkje erin:

Dit opent het volgende dialoogvenster:

Bladeren
Kies het CSS bestand dat zojuist gemaakt is, of een ander bestand van de harde schijf.

Toevoegen als
Koppeling is de standaard manier, die door alle browsers wordt ondersteund.
Importeren is te gebruiken om het ene stylesheet in het andere te laden. Er zijn ook subtiele verschillen tussen de browsers, als een stylesheet met de import optie wordt gekoppeld aan een html pagina. Dit kan wel eens gebruikt worden om browser-specifieke stylesheets te laden.

Als we nu in het CSS panel kijken, zien we de stijlen daar weergegeven:

Een stylesheet koppelen aan een nieuwe pagina

Wanneer je een nieuwe pagina maakt en je hebt al een stylesheet, kun je het meteen koppelen. Rechtsonder in het dialoogvenster "Nieuwe Pagina" is de optie te vinden om een stylesheet aan de nieuwe pagina te koppelen. Na het klikken op "Stijlpagina koppelen" zal het dialoogvenster met deze naam weer verschijnen.

In de kolom "Layout" van dit dialoogvenster is echter ook te zien, dat er een groot aantal standaard layouts kunnen worden gekozen. Naast een layout zullen deze ook al een eerste font definitie geven.
De CSS voor de pagina kan naar wens in de pagina zelf worden geplaatst (in de HEAD tag), in een nieuw extern stylesheet, of een bestaand stylesheet.

Op deze manier is het mogelijk makkelijk CSS layouts te maken, waarop je later verder kunt bouwen.

Stijl eigenschappen bewerken

De eigenschappen van de bestaande stijlen zijn te bewerken door een van de stijlen te selecteren, en in het "Eigenschappen" deel van het Stijlen paneel de eigenschap te wijzigen, toe te voegen of te verwijderen. In de onderstaande afbeelding wordt de eigenschap "font-style" toegevoegd.

In het bovenstaande voorbeeld is "toon gedefinieerde eigenschappen" geselecteert (knopjes linksonder).

Laat de stijlen in categorieën ingedeeld.

Lijstweergave tonen, een alfabetisch overzicht.

Alleen gedefinieerde eigenschappen tonen. Enkel de aanwezige eigenschappen worden getoont. Er wordt nu een link "eigenschap toevoegen" getoont, waarmee je zelf een nieuwe eigenschap en een waarde kunt opgeven.

Het is ook mogelijk op een stijl te dubbelklikken of onderin op het potloodje (Stijl bewerken) te klikken. Dan opent het dialoogvenster "Definitie van CSS-regel voor..."

Indien men vanuit het HTML bestand op deze manier CSS eigenschappen heeft veranderd, zal het CSS bestand standaard geopend worden, en de veranderingen worden daarin doorgevoerd. Wil men nu het html bestand voorvertonen in de browser, dan zal een venster verschijnen:

Het gaat hier om het CSS bestand. Dit is immers veranderd.

Wat er gebeurt bij dubbelklikken op stijlen, en of het CSS bestand geopend moet worden, is te wijzigen in de voorkeuren (Bewerken > Voorkeuren , tab CSS Stijlen).