4. Page Properties
In Dreamweaver kun je op eenvoudige wijze eigenschappen instellen die gelden voor de gehele pagina. Je doet dit door te kiezen voor Modify, Page Properties.
De verschillende mogelijkheden worden hier besproken:
4.1 Appearance
Figuur 4.1: Page Properties, categorie appearance.
- Page Font: voor opgeven van een lettertype voor de tekst op de webpagina’s.
- Size:opgeven van een standaardgrootte voor de tekst op de webpagina’s.
- Text Color: instellen van de standaard kleur van de tekst.
- Background Color: Je kunt ook een achtergrondkleur instellen. Standaard is de achtergrondkleur ingesteld op wit. Als je de kleurcode van je gewenste kleur weet, kun je deze direct in typen, in het vakje waar in bovenstaand voorbeeld nog #FFFFFF (de kleurcode van wit) staat. Makkelijker is om te klikken op het pijltje naast het kleurvakje bij Background Color en de gewenste kleur te kiezen uit het kleurenpalet.
- Background Image: vaak zie je dat de tekst van een site getypt is over de achtergrond van een plaatje heen. Door op Browse te klikken ga je op zoek naar het plaatje. Je komt in de mappenstructuur van de computer terecht en kunt het gewenste plaatje selecteren. Let er bij het kiezen van een achtergrond plaatje op dat de rest van de pagina hierdoor niet onleesbaar wordt.
- Netzo als in tekstverwerkingsprogramma’s kun je marges specificeren. Marges zijn de witruimtes aan de zijkanten van de pagina’s, dit maakt de pagina prettig leesbaar.
- Left Margin instellen van de linkermarge (in pixels). TIP: als je niets invult is hier een standaardwaarde van toepassing. Als je een tabel of een afbeelding strak tegen de linkerkant wilt aanzetten vul je hier 0 in.
- Right Margin: instellen van de rechtermarge (in pixels).
- Top Margin: instellen van de bovenmarge (in pixels).
- Bottom margin: instellen van de ondermarge (in pixels).
Oefening 4.1 lettertype, kleur en grootte instellen.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Appearance uit de Category lijst.
- Vul achter Page font het lettertype Century Gothic en achter Size 11.
- Geef als standaardkleur voor tekst zwart aan.
- Doe dit door achter Text color op het pijltje naast het kleurvakje te klikken, en daar de kleur zwart aan te klikken.
- Klik op OK.
- Klik op Apply.
- Klik op OK.
Het lettertype van de tekst Home wordt, als het goed is weergeven in Century Gothic met een grootte van 11 punten. De kleur van de tekst is blauw, dit komt doordat Dreamweaver de kleur van een link standaard instelt op blauw. In een van de komende opdrachten gaan we de kleur van verschillende links aanpassen.
Oefening 4.2 Achtergrondafbeelding instellen.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Appearance uit de Category lijst.
- Klik achter Background image op Browse.
- Ga naar Mijn documenten, Cursus Dreamweaver.
- Selecteer de map Images en klik op het background_image.jpg.
- Klik op OK.
- Klik op Apply.
De achtergrondafbeelding is nu te zien in het document.
Oefening 4.3 Marges instellen.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Appearance uit de Category lijst.
- Vul achter Left margin de waarde 1 in en kies cm in plaats van pixels.
- Vul achter Right margin de waarde 1 in en kies cm.
- Geef de Top en Bottom margin beiden even eens de waarde 1 cm.
- Klik op OK.
- Klik op Apply.
De tekst van de link begint nu 1 centimeter van links en 1 centimer van boven. Als de hele pagina vol zou staan met tekst zou de tekst eindigen op 1 centimeter van rechts en 1 centimer van onder.
Naast de achtergrondkleur, kun je ook de kleur van de tekst instellen. Dreamweaver (en HTML in het algemeen) maakt onderscheid tussen verschillende typen tekst: gewone tekst en tekst die een link aangeeft. Met links kun je snel springen naar andere plaatsen in de tekst of zelfs naar andere pagina’s. Meestal wordt aan links een andere kleur gegeven dan de gewone tekst van de site, zodat ze er duidelijk uitspringen.
4.2 Links
Figuur 4.2: Page Properties, categorie Links.
- Link Font: instellen van het lettertype voor de links
- Size: instellen van de grootte van het lettertype
- Link Color: instellen van de kleur van links waar de gebruiker nog niet op heeft geklikt. Gebruikelijk voor deze links is de kleur blauw.
- Visited Links: instellen van de kleur van links die al door de gebruiker gevolgd zijn. Deze worden vaak in rood weergegeven.
- Active Links: instellen van de kleur die een link krijgt zodra je erop klikt.
- Rollover Links: instellen van de kleur die een link krijgt als er met een muis over heen wordt gegaan.
- Underline Style: instellen van de onderstreepstijl van een link
Oefening 4.4 Kleuren instellen van links.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Links uit de Category lijst.
- Geef de achter Link color de volgende kleur donkerblauw (#3333FF) aan.
- De Visited link krijgt de kleur rood (#990000).
- De Rollover link krijgt een lichtblauwe kleur (#99FFFF).
- Als laatste geven we de Active link een fel rode kleur (#FF0000).
- Klik daarna op Apply en op OK.
4.3 Headings
Figuur 4.3: Page Properties, categorie Headings.
- Heading Font: instellen van een ander lettertype dan het standaard lettertype voor de webpagina’s.
- Heading 1-6: instellen van de font grootte voor de 6 niveaus van heading tags.
Oefening 4.5 Instellen van headings
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Headings uit de Category lijst.
- Geef als Heading Font het lettertype 'Courier new'.
- Voer voor Heading 1 als grootte 10 pixels in, voor Heading 2 de grootte 12. en voor Heading 3 de grootte 14.
- Klik op Apply.
- Klik op OK.
4.4 Title/encoding
De title/encoding Page Properties categorie maakt het mogelijk basis eigenschappen van de webpagina’s in te stellen.
Figuur 4.4: Page Properties, categorie Title Encoding.
- Title: instellen van de titel van de pagina, dit komt in de titelbalk van het document window en veel browser windows te staan.
- Document Encoding: verschillende landen hebben een verschillend alfabet (Westers, Russisch, Chinees….). In Dreamweaver kan het te gebruiken alfabet in worden gesteld. Als standaardwaarde staat het alfabet Western/ Europeaan ingesteld.
Oefening 4.6 Titel en Document encoding.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Title/encoding uit de Category lijst.
- Geef de pagina de titel: Muziekgeschiedenis door dit achter Title in te voeren.
- Selecteer achter Document Encoding uit het drop down menu het alfabet 'Western European'.
- Klik op Apply.
- Klik op OK.
4.5 Tracing Image
Tegenwoordig wordt het ontwerp van een site vaak vooraf door een ontwerper gedaan en aangeleverd in een Photoshop document. Dit document wordt vervolgens in stukken geknipt en de elementen worden als basis voor de site gebruikt. Het is soms lastig om de elementen goed te positioneren. Gelukkig heeft Dreamweaver hier een goede optie voor ingebouwd: tracing image. Een tracing image is een functie die werkt als overtrekpapier. De afbeelding die je hier aangeeft dient alleen ter oriëntatie waar je elementen in Dreamweaver gaat neerzetten. Hoewel het figuur zichtbaar is in de ontwerpweergave in Dreamweaver, zie je het niet in de browser.
Figuur 4.5: Page Properties, categorie tracing image.
- Tracing Image: hier geef je aan welk plaatje je gebruikt als tracing image.
- Image Transparency: hier stel je de mate van zichtbaarheid van je figuur in. Bij transparant is het geheel doorzichtig (geen plaatje zichtbaar), terwijl het bij opaque gehele zichtbaar is.
Oefening 4.7 Instellen van een Tracing image.
- Kies in de menubalk de menuoptie Modify.
- Kies de optie Page Properties.
- Kies Tracing image uit de Category lijst.
- Typ achter Tracing image het adres van het bestand dat je wilt invoeren, door op Browse te drukken.
- Ga naar Mijn documenten, Cursus Dreamweaver.
- Selecteer de map Images en selecteer het bestand trommel.jpg.
- Kies OK, het adres van het gekozen bestand staat nu gespecificeerd.
- Klik op Apply.
- Klik op OK.
Disclaimer: The free online courses have been put to your disposal and have been developed by the Learnit company. This course is free but should not be used for any commercial purposes. This work is copyright protected; copyright is in the keeping of Learnit.