Learnit

5. Tekst

Een belangrijk deel van de informatie op het web bestaat uit tekst. Als je met Dreamweaver tekst wilt invoegen in een pagina, dan doe je dat door de tekst in het Document Window te typen. Tekst is hiermee binnen Dreamweaver het enige object dat niet door Insert van de menubalk of door middel van het Object Panel wordt ingevoegd.

Standaard staat tekst ingesteld op Times New Roman, dit kun je veranderen bij de preferences.

Oefening 5.1. Standaardlettertype instellen

1. Kies in de menubalk de menuoptie Edit.
2. Kies de optie Preferences.
3. Kies Fonts uit de Category lijst.
4. Verander de Proportional font naar Century Gothic.
5. Druk op OK.

Figuur 5.1: Preferences, categorie Fonts.

• Font Settings: hiermee kun je het font type specificeren dat gebruikt moet worden in Dreamweaver voor documenten die een bepaald type encoding hebben.
• Proportional Font: dit is het lettertype dat Dreamweaver gebruikt voor normale tekst.
• Fixed Font: het lettertype dat Dreamweaver gebruikt voor pre, code en tt tags.
• Code view: is het lettertype dat verschijnt in de code view en code inspector. De standaard is afhankelijk van welke lettertypen op het systeem geïnstalleerd zijn.
• Size: geeft de grootte aan van het lettertype.

Het opmaken van tekst (o.a. lettertypen en -grootte aanpassen) gaat in Dreamweaver op een vergelijkbare manier als in de tekstverwerkers als Word en WP. In Word doe je dit met behulp van een toolbar en in Dreamweaver door middel van de hiermee vergelijkbare Property Inspector. Zodra je met de cursor in tekstgedeelte gaat staan, geeft de Property Inspector de eigenschappen van de tekst aan.

Figuur 5.2: Property Inspector voor tekst.

Als je tekst eigenschappen wilt veranderen, dan kan het op twee manieren. Als je bijvoorbeeld een woord vetgedrukt wilt weergeven, dan kun je in de Property Inspector kiezen voor vetgedrukt, het gewenste woord typen en vervolgens in de Property Inspector deze eigenschap weer uitschakelen.

Als je het woord al geschreven hebt, dan kun je met de muis het woord selecteren en dan kiezen voor vetgedrukt. Doordat het woord van tevoren geselecteerd is, weet Dreamweaver dat je alleen dat woord vetgedrukt wilt weergeven. In de praktijk zul je deze twee methoden vaak door elkaar heen gebruiken.

5.1 Font (Lettertypen)

Het lettertype veranderen doe je met het dropdown menu voor fonts in de Property Inspector. Er staan telkens drie fonts achter elkaar in dit menu. Dit is gedaan omdat niet elke browser dezelfde fonts ondersteunt. Als de browser het eerste font niet ondersteunt probeert het ’t tweede font en tenslotte het derde. Zo voorkom je dat als je voor Verdana gekozen heb,en dit lettertype is niet aanwezig op de computer van de bezoeker, de tekst als Times New Roman wordt weergegeven. Geef dan als tweede lettertype bijvoorbeeld Arial aan. Dit lijkt nog altijd meer op Verdana dan Times New Roman.

Oefening 5.2. Font instellen

1. Plaats je cursor in het Document Window.
2. Klik in de Property Inspector op het neerwaartse pijltje naast Font.
3. Selecteer het Fonttype Verdana.

Figuur 5.3: Font instellen in de Property Inspector.

Zoals je in het menu ziet, staan er een aantal fonts standaard ingesteld. Soms wil je echter 3 andere fonts gebruiken dan diegene die gespecificeerd zijn. Dreamweaver biedt de mogelijkheid zelf een font lijst samen te stellen. Dit doe je met behulp van Edit font list. Let er wel op dat de derde optie altijd een font type is dat door alle browsers ondersteund wordt.

Oefening 5.3. Fonttypen toevoegen

1. Plaats je cursor in het Document Window.
2. Klik in de Property Inspector op het neerwaartse pijltje naast Font.
3. Kies Edit Font List… uit het pulldown menu.
4. Selecteer het Font Arial.
5. Klik op het pijltje om het Font toe te voegen.
6. Selecteer voor de tweede keus Arial Narrow en voor de derde Times New Roman.
7. Druk op OK.

Font grootte

Naast het lettertype kun je ook lettergrootte instellen. In de Property Inspector kun je achter Size deze grootte bepalen met het pulldown menu. Als de font grootte ingesteld staat op None (=geen), dan wordt het lettertype (font) weergegeven in de standaardgrootte, namelijk 3. Het aangeven van None of 3 geeft dus hetzelfde effect.

Oefening 5.4. Tekst invoeren

1. Voer onderstaande tekst in, in het Document Window.
   

   Hier kun je de geschiedenis vinden van verschillende muziekstijlen met foto’s en muziekfragmenten. Door op een van de hoofdcategorieën te klikken in het navigatiemenu kun je per muziekstijl meer gedetailleerde informatie krijgen van de verschillende stromingen.

2. Selecteer de tekst die je net hebt ingevoerd.
3. Open het Size pulldown menu in de Property Inspector.
4. Geef de tekst de Size 14 pixels.

5.2. Kleurenschema

De standaard tekstkleur die ingesteld is bij de Page Properties kun je wijzigen om bijvoorbeeld 1 woord of een zin extra te benadrukken. Dit doe je in de Property Inspector.

Oefening 5.5. Tekstkleur instellen

1. Zet boven de ingevoerde tekst van oefening 5.4 de volgende kop:
   

   Muziekgeschiedenis van 1600 tot nu.

2. Selecteer de kop.
3. Klik in de Property Inspector op het neerwaartse pijltje naast het tekstkleur vakje.
4. Selecteer de kleur #660000 uit het kleurenpalet.

5.3. Headings

Teksten in kranten en tijdschriften maken vaak gebruik van kopjes en paragrafen. De kopjes worden vaak in een groter lettertype en vetgedrukt weergegeven. In Dreamweaver kun je ook gebruik maken van kopjes. Hiervoor worden headers gebruikt. Dreamweaver heeft 6 verschillende headers, heading 1 tot 6. Heading 1 is de grootste en heading 6 de kleinste.

Let op: Het is belangrijk om te weten dat de headings gekoppeld zijn aan de standaardinstellingen van de lettertypen in de browser zelf.

Oefening 5.6. Heading gebruiken

1. Selecteer de tekst: Muziekgeschiedenis van 1600 tot nu in het Document Window. Hier gaan we een heading aan toekennen.
2. Open het Format pulldown menu in de Property Inspector.
3. Geef de tekst de Heading 2.
4. Druk op Enter.

Tekst kan ook benadrukt worden door het in een andere stijl weer te geven. In Dreamweaver kun je kiezen uit:

dikgedrukt ("Bold")
en
schuingedrukt ("Italics")

Binnen Dreamweaver is geen knop voor het onderstrepen van tekst, aangezien er wordt aangeraden om alleen hyperlinks onderstreept weer te geven. Mocht je dit toch willen dan kan het op de volgende manier:

Oefening 5.7. Headings onderstrepen

1. Selecteer de tekst: 'Muziekgeschiedenis van 1600 tot nu' in het Document Window.
2. Kies in de menubalk de menuoptie Text.
3. Kies voor Style.
4. Druk op Underline.
5. Druk op Enter.

Je kunt natuurlijk ook een tekst dikgedrukt en schuingedrukt laten weergeven.

Oefening 5.8. Heading opmaken

1. Selecteer de tekst: 'Muziekgeschiedenis van 1600 tot nu' in het Document Window.
2. Klik op de knop om de tekst vetgedrukt weer te geven en klik op de knop om de tekst schuingedrukt weer te te geven.

Meestal zie je dat tekst aan de linkerkant is uitgelijnd (op het Web, maar ook in de boeken). In Dreamweaver staat uitlijning standaard ingesteld op links uitlijnen. De tekst kan ook op een andere manier worden uitgelijnd, de mogelijkheden zijn:

Links
Midden
Rechts
Blok

Oefening 5.9. Tekst uitlijnen

1. Selecteer de koptekst.
2. Laat de kop rechts uitlijnen door op de knop te klikken in de Property Inspector.

Inspringen

Veel mensen beginnen hun alinea's met inspringen van de eerste regel. Dit kun je ook instellen met Dreamweaver.

Oefening 5.10. Tekst laten inspringen

1. Selecteer de tekst die je bij oefening 5.4 hebt ingevoerd.
2. Klik eenmaal op de knop in de Property Inspector.

Het inspringen kan weer ongedaan gemaakt worden door op de knop te klikken.

5.5 Lijsten

Als er opsommingen voor komen in een stuk tekst is het handig om een lijst te gebruiken om de verschillende punten weer te geven. In Dreamweaver kunnen twee soorten lijsten worden toegepast, geordende en ongeordende lijsten.

Ongeordende lijst	Geordende lijst
Software van Adobe: Dreamweaver Flash Fireworks	Software van Adobe: Dreamweaver Flash Fireworks

Oefening 5.11. Lijst maken

1. Voer onderstaande tekst in, druk eerst op Enter om een nieuwe alinea te maken. Geef na iedere muziekstijl een Enter.
   

   De volgende muziekstijlen kunt vinden op deze site:
   Klassieke muziek
   Jazz
   House
   Wereldmuziek

2. Geef de tekst de grootte 14 pixels.
3. Selecteer de verschillende muziekstijlen.
4. Klik in de Property Inspector op de knop geordende lijsten.

5.5.1. Ongeordende lijsten

Het opsommingsteken dat standaard wordt gebruikt voor een ongeordende lijst is een gesloten cirkel. Het is mogelijk om een ander teken te gebruiken, er zijn 2 verschillende mogelijkheden:

• een bolletje

• een blokje

Figuur 5.4: Venster List Properties met instellingen voor ongeordende lijsten.

Soms wil je in een ongeordende lijst verschillende opsommingtekens gebruiken. Dit is ook mogelijk in Dreamweaver.

Oefening 5.12. Verschillende tekens gebruiken in een ongeordende lijst

1. Selecteer de eerste drie muziekstijlen.
2. Kies in de menubalk de menuoptie List.
3. Kies uit de opties Properties.
4. Kies List type: Bulleted List.
5. Open het dropdown menu achter New Style.
6. Selecteer nu in dit menu het gewenste teken, Square.
7. Druk op OK.

5.5.2 Geordende lijsten

Ook in geordende lijsten heb je een keus van tekensoorten. De mogelijkheden zijn: default (1,2,3…), Number (1,2,3…), Roman Small (i, ii, iii, …), Roman Large (I, II, III…), Alphabet Small (a,b,c…) en Alphabet Large (A, B, C…).

Figuur 5.5: Venster List Properties met instellingen voor geordende lijsten.

Oefening 5.12. Teken wijzigen van een geordende lijst

1. Selecteer de eerste drie muziekstijlen.
2. Kies in de menubalk de menuoptie List.
3. Kies uit de opties Properties.
4. Kies List type: Numbered List.
5. Open het dropdown menu achter New Style.
6. Selecteer nu in dit menu het gewenste teken, Large (I, II, III…).
7. Druk op OK.

Als je wilt dat een lijst niet start met nummer 1, kun je zelf instellen waar de lijst begint.

Oefening 5.13. Instellen waar de lijst begint

1. Kies in de menubalk de menuoptie List.
2. Kies uit de opties Properties.
3. Kies List type: Numbered List.
4. Vul als startnummer het nummer 3 in bij Start Count.
5. Klik op OK.

Als een deel van de nummer in Romeinse cijfers wordt weergegeven, dan moet je bovenstaande stappen nog een keer doorlopen en achter het dropdown menu New style, number (1,2,3…) selecteren en dan op OK drukken.

Oefening 5.14. Nummer instellen waar vanaf geteld moet worden

1. Zet de cursor in het Document Window in het lijst item dat je een andere nummering wilt geven.
2. Klik op rechtermuisknop, kies List en dan Properties.
3. Een venster opent zich met List Properties. Type nu achter Reset Count To, het nieuwe nummer 5 waar vandaan geteld moet worden. Deze nummering geldt dan voor dit item en alle volgende items.

Net zo als bij de ongeordende lijst kunnen verschillende stijlen in de geordende lijst worden toegepast. Ook kan voor ieder item de nummering opnieuw worden ingesteld.

Oefening 5.14. Verschillende tekens gebruiken in een geordende lijst

1. Zet de cursor in het Document Window in de tekst achter de tekst Klassieke Muziek waarvan het opsommingteken gewijzigd moet worden.
2. Klik op rechtermuisknop, kies List en dan Properties.
3. Een venster opent zich met List Properties. Open het dropdown menu achter New Style.
4. Selecteer in dit menu het teken Alphabet Small (a,b,c…). Dit teken zal nu worden toegepast voor dit item waar je met de cursor staat.

5.5.3 Geneste lijsten

Je kunt ook lijsten maken van dingen die zelf ook weer op te sommen zijn in lijsten. Hiervoor gebruik je zogenaamde geneste lijsten. Je kunt het bijvoorbeeld gebruiken bij opsommingen van categorieën die ieder zelf weer een subcategorie vormen.

Voorbeeld van een geordende lijst Development Dreamweaver Flash HTML Frontpage Grafisch FireWorks Programmeren ASP Javascript Eind gebruiker Effectief internetgebruik

Voorbeeld van een geneste lijst Development Dreamweaver Flash HTML Frontpage Grafisch FireWorks Programmeren ASP Javascript Eind gebruiker Effectief internetgebruik

Oefening 5.15. Verschillende tekens gebruiken in een geordende lijst

1. Om een geneste lijst te kunnen maken gaan we onze geordende lijst uitbreiden. Breidt de bestaande lijst uit, totdat je onderstaande lijst hebt.
   

   Klassieke muziek
   Barok
   Classicisme
   Romantiek
   20e eeuw
   Jazz
   Klassieke Jazz
   Swing
   Mainstream
   Bossa Nova
   Afro-cuban Jazz
   Europese
   House
   Techno
   Hardcore
   Club
   Trance
   Wereldmuziek
   Zigeunermuziek
   Rai-muziek
   Flamenco
   Highlife-music

2. Selecteer de hele lijst, druk op de knop geordende lijst in de Property Inspector.
3. Selecteer de tekst Klassieke muziek en de muziekstijlen die daarbij horen
4. Druk op rechtermuisknop, kies List en dan Properties.
5. Een venster opent zich met List Properties. Type nu achter List type: numbered list, kies bij de optie Style: Roman Large (I, II, III…), vul nummer 1 in bij Start count, de letter a, hier vandaan moet worden geteld.
6. Kies bij New style: Alphabet Small (a,b,c…) en plaats het nummer 1 achter Reset Count To.
7. Selecteer de muziekstijlen onder Jazz.
8. Herhaal de stappen 4 en 5.
9. Doe dit ook voor de muziekstijlen House en Wereldmuziek.
10. Als de hoofdcategorieën zoals Jazz en House niet het Romeinse nummer II en III krijgen, kun je dat op de volgende manier voor elkaar krijgen.
11. Ga met de cursor in de tekst Jazz staan, kies in de menubalk de optie List, Properties.
12. Het venster List Properties wordt geopend, kies bij New style: Roman Large en zet achter Reset Count To de waarde 2.
13. Herhaal de stappen 10-12 maar geef voor House de waarde 3 in achter de Reset Count To en voor Wereldmuziek de waarde 4.

5.6. Eindopdracht

1. Maak een nieuw document aan.
2. Sla dit document op onder de naam wereldmuziek.
3. Maak het onderstaande voorbeeld na.
4. Controleer hoe de pagina eruitziet in de browser door de functietoets F12 te gebruiken.

De volgende gegevens kun je gebruiken bij het maken van je pagina over wereldmuziek:

• Lettertype is Georgia.
• Voor platte tekst is de grootte van het lettertype 15.
• De standaard tekstkleur is wit (#FFFFFF).
• In dit document worden 2 headings gebruikt, Heading voor de koptekst en heading 3 voor de subparagrafen.
• Laat de koptekst rechts uitlijnen en vetgedrukt weergeven.
• De subparagrafen moeten dikgedrukt en schuingedrukt worden weergegeven.
• De tekst vanaf de zigeuner muziek en de tekst op de andere twee schermen kun je vinden in het mapje met de oefenbestanden onder de naam wereldmuziek. Het is een Worddocument.

Figuur 5.6: Voorbeeld wereldmuziek.htm

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.