Pagina-eigenschappen

Door middel van de pagina-eigenschappen kun je, de naam zegt het al, een aantal eigenschappen opgeven die voor de hele pagina gelden.

Wanneer je werkt met HTML, dan zijn de pagina eigenschappen in feite alle attributen (eigenschappen) van het body-element (de body tag bevat de gehele inhoud van de zichtbare elementen op een pagina), het head-element (een aantal niet-zichtbare eigenschappen van de pagina), en de titel van de pagina (het title-element).

De belangrijkste eigenschappen zijn:
-text: de tekstkleur van de pagina
-bgcolor: de achtergrondkleur van de pagina
-background: een achtergrond afbeelding, die als "tegel" over de hele pagina vertoond wordt.
-link, alink en vlink: de kleuren van nog niet bezochte links, actieve en bezochte links.

Deze eigenschappen kunnen dus aan de body tag worden gekoppeld, maar kunnen ook door middel van CSS worden opgegeven. Dreamweaver biedt beide mogelijkheden.

Tot de pagina-eigenschappen worden verder ook de kopjes gerekend, en er is nog de mogelijkheid een overtrekafbeelding te gebruiken, wat niets met html of css te maken heeft.

De pagina-eigenschappen worden dus opgenomen binnen de body tag, en voor CSS in de head tag (embedded styles). Dit is niet de meest effectieve wijze, zoals we later zullen zien. Deze stijlen kunnen echter later nog wel verplaatst worden naar een gekoppeld stijlblad.

De pagina eigenschappen instellen

Via drie wegen zijn de pagina eigenschappen op te roepen:

- Wanneer niets in het document is geselecteerd, is in het Eigenschappen paneel (Venster > Eigenschappen) een knop te zien: Pagina-eigenschappen. Die zal het dialoogvenster openen.
- Via het hoofdmenu: Wijzigen > Pagina eigenschappen.
- De sneltoets Ctr+J.

De categorieën:
Na het kiezen van een van bovenstaande mogelijkheden wordt het venster Pagina eigenschappen geopend. Aan de linkerzijde zijn daar een aantal categorieën te vinden:

Weergave (CSS)

Lettertype van de pagina: het lettertype, plus vet of schuin gedrukt.
Grootte: de grootte. Naast pixels zijn er nog een aantal andere eenheden te gebruiken. Maar van size moeten enkel de cijfers worden gebruikt, en van het soort enkel pixels, ems of percentages. (zie verder CSS)
Tekstkleur: kleur van de tekst
Achtergrond kleur: kleur van de achtergrond van de pagina
Achtergrondafbeelding: achtergrond afbeelding op de pagina. Standaard vult deze de gehele pagina.
Herhalen: naar keuze wordt de achtergrond wel, niet, horizontaal of verticaal herhaald.
Marges: de afstand van de rand van de pagina tot de inhoud.

Weergave (HTML)

Hier kunnen dezelfde eigenschappen met HTML worden gedefinieerd. De mogelijkheden zijn iets beperkter. Vet en cursief zijn niet mogelijk om voor de hele pagina op te geven. Er is ook geen keuze voor het herhalen van een achtergrondafbeelding, dit gebeurt standaard in alle richtingen.
Tevens zijn hier al de koppelingen opgenomen, die voor CSS in het volgende venster opgegeven kunnen worden. Ook hier biedt CSS een extra mogelijkheid: Koppelingen die worden aangewezen (de cursor staat boven de koppeling)

Links

Lettertype van de koppeling: lettertype dat gebruikt wordt voor de links, alsmede vet of schuin gedrukt.
Grootte:de grootte. Naast pixels zijn er nog een aantal andere eenheden te gebruiken. Maar van size moeten enkel de cijfers worden gebruikt, en van het soort enkel pixels, ems of percentages. (zie verder CSS)
Kleuren: Vier opties om de kleuren aan te geven voor nog niet bezochte links (Kleur van koppeling), wel bezochte links (Bezochte koppelingen), actieve links (het moment van klikken) en Koppelingen die worden aangewezen, dwz wanneer de cursor op de link staat.
Onderstrepingsstijl: altijd links onderstrepen, nooit onderstrepen, alleen bij rollover (aangewezen) of juist niet bij rollover. (CSS biedt veel meer mogelijkheden, voor elk van de vier staten apart)

Koppen

De HTML elementen h1 tm h6 geven teksten weer in aflopende groottes: h1 is zeer groot, h6 erg klein. Dreamweaver biedt hier de mogelijkheid deze elementen te herdefiniëren met CSS. De grootte en de kleur kan gewijzigd worden. Hoewel met CSS de eigenschappen van praktisch alle HTML-elementen gewijzigd kunnen worden, is het een begrijpelijke keus deze mogelijkheid hier aan te bieden: de kopjes worden normaal ook altijd gebruikt voor kopjes, en als je de kopjes herdefinieert, dan worden jouw veranderingen automatisch toegepast op het moment dat deze kopjes in de pagina worden gebruikt. Indien je hier eigenschappen aangeeft voor koppen voor je tekst, dan zullen die ook als koppen worden getoond als iemand een browser mocht hebben die geen CSS ondersteund. Hoewel dat zeldzaam is, is de toepassing dan logisch, en valt binnen het idee van de zogenaamde "gracefull degradation". Dit wil zeggen, dat een auteur ervoor zorgt dat de inhoud er toch nog goed uitziet of het geheel goed blijft werken, als een bepaalde techniek die hij gebruikt niet ondersteund wordt door een programma.

Tevens is het gebruik van koppen goed om een zekere "betekenis" aan tekst te geven: hoe groter de kop, hoe belangrijker de tekst. Dit past bij moderne opvattingen over "het semantische web", een web dat door machines begrepen kan worden. Belangrijker op dit moment is, dat zoekmachines er gebruik van maken. Gebruik de kopjes dus, en ook op een logische manier.

Titel / Codering

Titel: de titel, zoals die in de bovenbalk van de browser te zien zal zijn. Geef elke pagina altijd een relevante titel, want zoekmachines letten er ook op. En "Naamloos Document" staat niet mooi boven je pagina.
Codering: de karakterset die gebruikt wordt om de tekens weer te geven die in het document staan. Standaard staat hier Unicode, omdat op die wijze alle karakters kunnen worden weergegeven, dus ook de andere uit de lijst.
Unicode-formulier: Dit kan zo gewoon blijven staan, optie C is de meest gebruikte.
Unicode-handtekening opnemen: Een paar bytes opnemen in het bestand, waarmee het als het ware "getekend" is.

Overtrekafbeelding

Dit is iets wat noch met HTML, noch met CSS te maken heeft, maar alles met page-design. Pagina lay-outs worden dikwijls paginagroot gemaakt, bv in Photoshop of Illustrator. Je ziet dan alles, en krijgt een indruk van wat "look and feel" wordt genoemd. Zoiets kan een bedrijf aan een klant laten zien. Als hier dan een site van moet worden gemaakt, dan moeten alle elementen losgeknipt worden, dus logo, knoppen, andere elementen. In Dreamweaver moet dat dan weer in elkaar gepast worden.
Als Overtrekafbeelding kan dan dat originele ontwerp worden gebruikt. Het komt dan op de achtergrond van de pagina te staan, en de transparantie dekking kan aangepast worden, zodat het fijner werkt. De elementen die werkelijk worden gebruikt in de site, kunnen hier dan zo perfect mogelijk overheen geplaatst worden. Als het ontwerp klaar is, wordt de overtrekafbeelding verwijderd. Deze zal overigens nooit in de browser worden vertoond, mocht deze nog gedefinieerd zijn.

kop Tags

Naast de zichtbare eigenschappen zijn er ook nog eigenschappen die voor de gebruiker onzichtbaar zijn, de koptags (in html: head-tags). In de head tag kunnen import instructies staan voor CSS of Javascript bestanden, maar ook andere tags, die iets over de pagina zelf vertellen. Dan spreekt men van Meta-tags. Deze kunnen ook informatie over de pagina aan de server doorgeven. Ze zijn in te voegen vanuit het hoofdmenu: Invoegen > HTML > Koptags, of vanuit het Invoegen paneel in de categorie Algemeen.

Koptags bekijken: Via Weergave > Kopinhoud zijn eerder ingevoerde head tags te bekijken en te wijzigen.

Invoegen vanuit het invoegen paneel

Meta
Hier kun je zelf opgeven welke Meta tag je wilt gebruiken. Er opent een dialoogvenster.

Kenmerk
Naam geeft aan dat het een attribuut is dat iets over de pagina zelf verteld. Je kunt zelf een Waarde en een Inhoud invullen, bijvoorbeeld als Waarde: Auteur, en als Inhoud je naam.
HTTP-equivalent geeft informatie aan de server door. Bijvoorbeeld de vervaldatum van de pagina, of een verversing van de pagina (zie verderop).

Trefwoorden
Als je deze optie kiest, opent er een dialoogvenster met een enkel invul vak. Je kunt dan de belangrijkste steekwoorden van je site opgeven. Ze zijn vooral van belang voor zoekmachines, maar zoveel misbruikt (om dus een hoge notering te krijgen) dat ze niet meer van veel waarde zijn. Maar toch altijd goed om ze nog even in te vullen. Scheidt de trefwoorden door komma's te gebruiken.

Beschrijving
Ook hier een simpel dialoogvenster om een omschrijving van je site in te vullen. Hier geldt hetzelfde verhaal als bij de trefwoorden.

Vernieuwen

Na een aantal seconden kun je de pagina doorsturen naar een ander adres, en zo een andere pagina laten verschijnen. Kan wel eens handig zijn als er mensen op een bepaalde pagina op je site komen, terwijl je ze ergens anders wilt hebben. Je kunt ook de huidige pagina verversen. Dit wordt bijvoorbeeld gedaan om webcams te vertonen. Elke 20 seconden bijvoorbeeld wordt er door de webcam een nieuwe afbeelding op de server geplaatst. De pagina moet dan verversen, om steeds deze nieuwe afbeelding te laten zien.

Letterlijn

Dit geeft de mogelijkheid om alle document-relatieve links niet relatief te maken aan deze pagina, maar aan een andere. Er is ook de optie om een Doel aan te geven. Dit wordt dan het venster waarin alle links op de pagina zullen openen. Handig als je met een frameset werkt, dan hoef je niet bij elke link het doel op te geven. Als je daarnaast toch een doel opgeeft, dan heeft die voorrang boven deze aanwijzing.

Koppeling
Geeft een relatie aan tussen het bestand en een ander. Wordt o.a gebruikt om externe stylesheets aan de pagina te koppelen. (Al kan dat in Dreamweaver makkelijker via het CSS paneel) Het is iets anders als een hyperlink!

href: de naam en lokatie van het bestand dat gelinkt wordt.
ID: een unieke id waar b.v Javascript gebruik van kan maken
Titel: een omschrijving van de relatie tussen de pagina en het gelinkte bestand
Rel: Dit geeft aan om welke specifieke relatie het gaat. Mogelijke waarden zijn: Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark.
Rev: Om een omgekeerde relatie aan te duiden. Kan dezelfde waarden hebben als Rel.