Learnit

2. Dreamweaver Introductie

Zoals gezegd is Dreamweaver een HTML-editor. Het programma maakt dus de HTML-code voor je, terwijl jij in de WYSIWYG mode lekker aan het vormgeven bent. Voor een introductie gaan we eerst kijken naar de belangrijkste componenten van het programma waarna terminologie en de preferences die je kunt instellen worden besproken.

2.1 Wat kun je met Dreamweaver?

Dreamweaver is een computerprogramma waarmee je internetpagina's kunt maken. In de vroege jaren van het internet gebeurde dat nog "met de hand". Dat betekende dat je alle gebruikte HTML codes uit je hoofd moest kennen, en in moest typen. Websites maken was dus niet zomaar wat. Dreamweaver biedt de mogelijkheid om op een visuele wijze webpagina's te maken. Je hoeft dus geen enkele code te kennen, om een complete website te maken. Laat staan dat je codes moet intypen.

Dreamweaver is een programma dat door professionele webdesigners vrijwel dagelijks wordt gebruikt. Zelfs door mensen die hun HTML codes nog met de hand schrijven, wordt met respect gekeken naar Dreamweaver. Dat is niet zomaar. Dreamweaver is namelijk erg goed in het maken van die HTML codes.

Dreamweaver biedt tal van handigheidjes die een moderne webdesigner zichzelf kan wensen. De mogelijkheden om HTML codes te genereren zijn zeer geavanceerd, zodat zelfs de meest visueel georiënteerde vormgevers prettig kunnen werken. Het maken van webpagina's is zodoende bijna hetzelfde geworden als tekenen in een tekenprogramma. Je hoeft alleen de elementen op je pagina te plakken en deze op te slaan. Dreamweaver zorgt ervoor dat alles onder de motorkap blijft kloppen.

Dreamweaver is ook instaat om hele andere programmeertalen te maken. De zogenaamde behaviours genereren handige Javascript code, zonder dat je zelf een regel hoeft te typen. Laat staan dat je er überhaupt iets van hoeft te snappen. Alleen het resultaat dat telt. Een rollover-plaatje (een plaatje dat verandert als je er met je muis over beweegt) is met behulp van een paar muisklikken te maken.

Om de net gemaakte website te kunnen bekijken, moet ie op internet staan. Anders kun je er namelijk alleen zelf van genieten, en dat is zonde van je tijd. Zonder moeite zorgt Dreamweaver ervoor dat je website op internet, gesynchroniseerd wordt met de site die je op je eigen computer hebt staan. Plaatjes, HTML bestanden, Flash filmpjes en noem maar op worden automatisch up to date gehouden. Eén klik op de knop is voldoende.

Naast dit alles biedt Dreamweaver de mogelijkheid om efficiënter te werken. Elke keer dezelfde paginaopmaak maken? Gebruik een template. Dan voorkom je ook nog eens dat je per ongeluk elementen wist. Veel voorkomende elementen stop je in een bibliotheek. Pagina elementen maak je op met behulp van Cascading StylesSheets.

En er is nog veel meer dat Dreamweaver te bieden heeft. Kortom: allemaal redenen om eens stevig vast te bijten in Dreamweaver. Laten we beginnen bij het begin. De opbouw van het programma.

2.2. Werkomgeving

Als je Dreamweaver voor het eerst opent, zie je dat het scherm uit verschillende panelen is opgebouwd. Hiervan zijn er drie het belangrijkste: het documentvenster, het Objects Palet en de Property Inspector. Aan de rechterkant staan nog een aantal kleine venstertjes, waar we gedurende de onderwerpen op in gaan. Later in dit gedeelte gaan we in op de Site Window, waar een goed overzicht van de bestanden van je internetsite kan worden verkregen.

Figuur 2.1: Document venster

Het document venster is de werkplaats van Dreamweaver. Dit is de plek waar je direct aan de inhoud en opmaak van je site werkt. Je kunt hier tekst, plaatjes, tabellen en al die andere elementen die een website kan bevatten invoegen. Het document venster toont je het resultaat van je acties zoals een browser dit ook zou weergeven. Wat je ziet is dus wat het uiteindelijk wordt: WYSIWYG. Zo kom je niet voor verassingen te staan als je je site uiteindelijk op het web publiceert.

Property Inspector

Figuur 2.2: Property Inspector

De Property Inspector geeft de eigenschappen weer van het object wat je hebt geselecteerd. Dit kan tekst zijn, maar ook afbeeldingen, tabellen etc. Ben je bijvoorbeeld bezig met het invoegen van tekst, dan zie je in de Property Inspector tekstgerelateerde eigenschappen als tekstgrootte en font type staan. Naast het weergeven van de eigenschappen, stelt de Property Inspector je in staat om de eigenschappen in een handomdraai te wijzigen.

Het is mogelijk de Property Inspector klein en groter weer te geven. Door op het driehoekje rechtsonder te klikken wordt hij groter (dit werkt natuurlijk niet als hij al compleet is geopend).

Object paneel

Figuur 2.3: Object Paneel

Het object paneel dient om objecten in te voegen. Alle items die je via het object paneel kan invoegen zijn ook te vinden door op insert in de taakbalk te klikken. Door middel van het object paneel is het mogelijk om afbeeldingen, layers, tabellen, Flash, animaties en nog veel meer in te voegen.

Een speciale eigenschap van het object paneel is dat het van uiterlijk kanveranderen. Dit doe je door op 'Common' te klikken (bovenin het object paneel). Je kunt dan kiezen uit:

Tabel 2.1: Uitleg van de elementen die via het object paneel ingevoegd kunnen worden.
Common	De standaard weergave.
Layout	Om pagina’s op te maken.
Forms	Voor het invoegen van formulieren en formulierobjecten.
Text	Invoegen van tekst elementen.
HTML	Voor het invoegen van HTML tags
Application	Voor invoegen van bijvoorbeeld dynamische data.
Flash elements	Invoegen van flashelementen zoals filmpjes.
Favorites	Om bijvoorbeeld URL variabelen in te voegen.

Site window

Figuur 2.5: Site window

Het site window geeft een duidelijk overzicht van de bestanden waaruit je internetsite bestaat. Je kunt hier bestanden hernoemen of verplaatsen, een map aanmaken enz. Bij het veranderen van bestanden (zowel naam als plaats) zorgt Dreamweaver altijd dat verwijzingen naar dit bestand (bijvoorbeeld door hyperlinks) tegelijk worden veranderd zodat hyperlinks en paden naar afbeeldingen blijven werken! Het site window is te benaderen door op site en Manage Sites te klikken. De site window wordt verder besproken bij het opzetten van een site.

2.3. Introductie van begrippen

Binnen Dreamweaver is het handig om een aantal begrippen goed op een rijtje te hebben.

• Site: een site binnen Dreamweaver is de gehele verzameling van HTML pagina’s, afbeeldingen en andere bestanden waaruit de website bestaat. Meestal wordt de hele site in één map opgeslagen.
• Assets: Hiermee worden alle bestanden van een site bedoeld die geen HTML pagina’s zijn, zoals afbeeldingen.
• Local Root Folder: de map waar de bestanden in bewaard worden heet de local root folder.
• File: een file is een (HTML) bestand, en dus een internetpagina.
• Page: een page is één HTML pagina, dus een onderdeel van een site. De HTML pagina wordt opgeslagen in een bestand.
• Homepage: de homepage is een bestand met meestal de naam index.htm. Door deze naam wordt het bestand automatisch geopend als een bezoeker jouw internetadres intikt. Zorg ervoor dat dit bestand in de hoofdmap staat.

2.4. Dreamweaver preferences

Om op een nog makkelijkere manier met Dreamweaver om te gaan is het mogelijk om de interface van Dreamweaver aan te passen en voorkeuren op een aantal gebieden aan Edit en dan Preference te kiezen. Dreamweaver heeft Preference instellingen die de interface weergave bepalen en opties die specifieke aspecten regelen zoals:

• layers
• stylesheets
• externe editors
• het bekijken van een voorbeeld in de browser (preview in browser)
• weergave van HTML en JavaScript code.

Het venster waarin je de preferences kunt aangeven krijg je te zien door op Edit in de menublak te klikken en daarna op Preferences.

Figuur 2.6: Venster voor instellen van preferences

Oefening 2.1 preferences aanpassen

1. Kies in de menubalk voor de menuoptie Edit.
2. Kies de optie Preferences.
3. Wijzig de preferences van het tabblad Fonts, kies Proportional font. Kies het lettertype 'Century gothic' en voor Size 11 pt.
4. Wijzig de preferences van het tabblad Highlighting, kies de kleur rood (#FF0000) voor Mouse-Over en de kleur groen (#336600) voor Editable regions.

In dit venster zie je aan de linkerkant een rij van onderwerpen, door deze te selecteren krijg je de preferences van dit onderwerp. Voor het complete overzicht van de instellingen verwijzen we naar de helpfunctie van Dreamweaver. De helpfunctie is overzichtelijk en heel goed bruikbaar ook voor andere onderdelen.

Tabel 2.2: Uitleg van de verschillende categorieën van het preference venster.
General	Opgeven van bestandexenties, openen van bestanden, weergeven van het object paneel en de spellingscorrectie.
Code Coloring	Aangeven van kleuren voor tekst, tags en achtergrond.
Code Format	Hiermee kun je aangeven welke soort code gebruikt moet worden als er een keuze is tussen verschillende codes.
Code Rewriting	Aangeven van rechten aan Dreamweaver om je code te verbeteren.
CSS Styles	Opties voor maken en aanpassen van Cascading Styles Sheets.
File Types/Editors	Aangeven welke bestandsformaten met welke editor moet worden geopend.
Fonts/Encoding	Instellen van een standaard lettertype (proportional font) en lettertype coderingen.
Highlighting	Opgeven van kleuren van Templates (Editable Regions) en library items.
Invisible Elements	Aangeven van visuele hulpmiddelen bij onzichtbare elementen.
Layers	Instellen van layer-opties.
Layout Mode	Opgeven van het uiterlijk van tabellen die in de layout view zijn gemaakt.
Panels	Aangeven hoe de verschillende panelen worden weergegeven en welke in de launcher worden weergegeven.
Preview in Browser	Opgeven van de primaire en secundaire browser.
Quick Tag Editor	Bij het aanbrengen van wijzigingen door de Quick tag Editor kunnen de veranderingen direct in het document venster worden veranderd.
Site	Weergave Site Window en FTP-opties zoals FTP-timeout en Firewallport.
Satus Bar	Aangeven van de modemsnelheid waarop de geschatte downloadtijd wordt gebaseerd.

Bovenstaande lijst is niet compleet, de onderwerpen worden allemaal genoemd, maar niet alle opties. Kijk daarvoor inde helpfunctie van Dreamweaver.

Oefening 2.2. Zoeken in de helpfunctie

1. Kies in de menubalk de menuoptie Help.
2. Kies de optie Using Dreamweaver.
3. Klik op het tabblad Index en dan op P.
4. Scroll vervolgens naar de tekst Preferences.
5. Kijk even wat Dreamweaver hierover te zeggen heeft.

Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.