Macromedia Dreamweaver 8

Transcriptie

1 Macromedia Dreamweaver 8 Ontwerp van statische websites met XHTML, CSS en JavaScript Versie juni 2006 Adobe, Macromedia, Dreamweaver, UltraDev, Fireworks, Flash, Contribute, FlashPaper en FreeHand zijn handelsmerken of gedeponeerde handelsmerken van Adobe Systems Inc. in de Verenigde Staten en/of andere landen. Alle overige handelsmerken en merknamen zijn eigendom van hun respectieve eigenaars. Speciale dank aan Lieve, Hilde, Guy en Bart voor hun meer dan gewaardeerde medewerking. 1

2 Verhaert, Patrick Macromedia Dreamweaver 8 / Patrick Verhaert; Geel: Campinia Media vzw, 2006; 511 p; index; 25 cm; gelijmd. ISBN: ; NUGI 854; UDC ; Wettelijk depot België: D/2006/3941/1 Campinia Media vzw Kleinhoefstraat 4 B 2440 GEEL (Belgium) Tel.: (+32) 014/ Fax: (+32) 014/ <info@campiniamedia.be> URL: < Copyright 2006: No part of this book may be reproduced in any form, by print, photoprint, microfilm or any other means without written permission of the publisher. Niets uit deze uitgave mag worden verveelvoudigd en/of openbaar gemaakt door middel van druk, fotokopie, print, microfilm of op welke andere wijze ook, zonder voorafgaande schriftelijke toestemming van de uitgever.

3 Inhoud 1 Inleiding Historiek Nieuw in Dreamweaver Conventies Systeemvereisten Microsoft-Windows Mac-OS Lesmateriaal bij dit handboek Lesmateriaal installeren op PC Lesmateriaal installeren op Macintosh De helpfunctie Technische ondersteuning en training Statische en dynamische websites Statische webpagina's Statische website Dynamische webpagina's Dynamische website of Web applicatie Bronnen Lay-out van het programma Werkomgeving Startpagina De interface Essentiële paletten en functies Het Insert palet De Property inspector of het Properties palet Extensions Het Files palet Preview in een Browser Browserlijst uitbreiden Check Browser Support HTML validation Bronnen Filosofie achter een website Hosting Lokaal op harde schijf of op CD-ROM Intranet Internet Domeinnaam Webruimte Webservers Naamgeving van documenten Structuur van een website Bronnen Inhoud - 3

4 5 Een website publiceren De voorbereiding Een nieuwe site definiëren Website publiceren Bronnen Site management Een nieuwe site definiëren en publiceren Documenten sorteren Documenten herbenoemen Documenten verplaatsen Foutieve links herstellen Overbodige documenten wissen De website synchroniseren Alle bestanden wissen en volledig opnieuw publiceren Gewijzigde bestanden dadelijk uploaden Bestanden synchroniseren Design notes Cloaking Check In - Check Out Site Map Lay-out Overige opties in het Site Definition palet Rubriek: Local Info Rubriek: Remote Info Rubriek: Testing Server Rubriek: File View Columns Rubriek: Contribute Bronnen HTML als basis Elementen of tags Attributen HTML in Dreamweaver Code en Design View Code Hints in Code View Het Tag Inspector palet De Tag Selector De Quick Tag editor Het Reference palet Coding Toolbar Historiek HTML HTML HTML Browsers en HTML-versies Browserafhankelijke tags en attributen Roundtrip HTML Documenten gelijktijdig bewerken in meerdere editors Code herschrijven Foutief geneste code Clean Up HTML Dreamweaver 8

5 7.7 Het Snippets palet XHTML vs. HTML Maak een nieuw XHTML-document Default XHTML-documenten aanmaken Bestaande webpagina's converteren naar XHTML XHTML Traditional of Strict Bronnen Tekst Eigenschappen van tekst Het Properties palet of de Property Inspector Blokafhankelijke eigenschappen Selectieafhankelijke eigenschappen Hyperlinks Absolute links Document vs. siterelatieve links Documentrelatieve links Siterelatieve links Target Ankers Achtergrond-, tekst- en linkeigenschappen Rubriek Appearance Rubriek Links Rubriek Headings Rubriek Title/Encoding Rubriek Tracing Image Tekst uit andere programma's importeren Microsoft Word webpagina's Opdracht Bronnen Vormgeven met Cascading Style Sheets (CSS) Historiek Terminologie De voordelen van een style sheet Structuur van een eenvoudige stijl Interne of externe stijlen Inline styles Embedded of internal style sheets Linked of external style sheets Cascading? Het CSS Styles palet Nieuwe stijl aanmaken Stijleigenschappen wijzigen vanuit het CSS Styles palet Class en ID selector Pseudo-class selector Teksteigenschappen Font-family Color Font-size Font-weight Inhoud - 5

6 Line-height Overige eigenschappen Besluit Het box model Padding border Margin Absolute en relatieve eenheden Breedte en hoogte van de box Inline elementen Elementen plaatsen HTML-stijlen vs CSS stijlen Website vervolledigen Basisstijlen definiëren Externe style sheet aanmaken Lay-out verfijnen Lijsten, een geval apart Navigatielinks aanpassen Bronnen Afbeeldingen Beeldformaten GIF (.gif): JPEG (.jpg): Animated GIF (.gif): PNG (.png): Een afbeelding aan de pagina toevoegen Eigenschappen van een afbeelding HTML-eigenschappen Afgekeurde attributen van de img-tag in HTML Eenvoudige bewerkingen Bewerkingen binnen Dreamweaver Bewerkingen in combinatie met Fireworks Image Placeholders Placeholder toevoegen Placeholder koppelen aan een afbeelding Image Map Een hotspot toevoegen Een hotspot aanpassen Volledige afbeelding linken Afbeeldingen aangemaakt met Fireworks Pagina-achtergrond aanpassen Achtergrondkleur toevoegen Achtergrondpatroon toevoegen Bronnen Web fotoalbum Fotoalbum ontwerpen Navigatie aanpassen Bronnen Dreamweaver 8

7 12 Tabellen Tabel toevoegen Tabel- en celeigenschappen Tabeleigenschappen Celeigenschappen Gegevens importeren Tabellen importeren vanuit MS Excel, Word of Access Tabel vormgeven met style sheets Table-tag definiëren Een class aanmaken Een ID aanmaken Celranden met CSS Lay-outtabellen Standard mode en Layout mode Layout mode Tabel en cellen tekenen Cellen verplaatsten Spacer Image Make All Cell Widths Consistent Tabel centreren Autostretch Tabel- en celeigenschappen Tabeleigenschappen in Layout mode Celeigenschappen in Layout mode Lay-out optimaliseren voor print- en schermweergave Lay-outtabel met een vaste breedte Lay-outtabel met een variabele breedte Vervolledig de oefening Besluit Elementen positioneren met CSS Tweekolommen lay-out met absolute en relatieve positionering Relatieve positionering Stapelvolgorde van de elementen aanpassen Absolute positionering Driekolommen lay-out met absolute positionering Driekolommen lay-out met zwevende elementen Lay-outtabel vervangen door div-tags Lay-outtabel verwijderen Pagina vormgeven voor schermweergave De pagina printklaar maken Welke positionering gebruiken? Lay-outtabellen vs. div-tags Browser hacks Bronnen Inhoud - 7

8 15 Templates Een template ontwerpen Editable Regions toevoegen Editable Region Optional Region Overige objecten in het Insert palet Bestaande pagina's koppelen aan een template Een template aanpassen Nieuwe pagina's koppelen aan een template Editable Region wissen Pagina's van een template losmaken Paginatitels aanpassen Library items Een library item ontwerpen Een library item aan een pagina toevoegen Een library item aanpassen Een library item op een pagina losmaken Behaviors (JavaScript) Behaviors, Events en Actions Action op de body-tag Action op een link Action op een formulierelement Enkele voorbeeldscripts Popup Message Een banner openen Het bannervenster sluiten Een eenvoudige login pagina Spam-mail voorkomen Toon Internet Explorer versie in titel Een behavior wissen Plaats van een JavaScript op de pagina JavaScripts kopiëren en downloaden Broncode beveiligen CSS-eigenschappen dynamisch wijzigen Syntax regels Objecten Functies en events Object-eigenschappen aanpassen innerhtml Opdracht Bronnen Jump menu Een jump menu toevoegen Het jump menu aanpassen Het menu vormgeven met een style sheet Rollovereffect met Afbeeldingen Een Rollover Image toevoegen Dreamweaver 8

9 19.2 Een Rollover Image aanpassen Disjoint rollover Navigatiebalk verfraaien Downloadsnelheid optimaliseren Rollovereffect met CSS Rollovereffect met tekstlinks Rollovereffect met een opsommingslijst Enkele varianten Navigatie van links naar rechts verplaatsen Afstand tussen de knoppen vergroten Horizontale navigatiebalk Bronnen Frames Een frameset en frames aanmaken Eigenschappen van de frameset Eigenschappen van een frame Vervolledig de frameset Pagina's linken Targets Titel van de frameset Noframes-sectie Navigation bar Een Navigation Bar toevoegen Initiële toestand aangeven Frames en zoekrobots Voor- en nadelen van frames Formulieren Formulierobjecten toevoegen Form-tag Text Field Textarea Hidden Field Checkbox Radio Group Radio Button List/Menu Button Image Field File Field Een formulier aanmaken Verzenden via een mailprogramma Verzenden via een formprocessor Inhoud van het formulier controleren Formulierelementen vormgeven vanuit een style sheet Bronnen Inhoud - 9

10 23 Layers Layers zichtbaar en onzichtbaar maken Layers positioneren Navigatie toevoegen Navigatiebalk verplaatsbaar maken Eigenschappen van een layer Van tabel naar layers en omgekeerd Van tabel naar layers Van layers naar een tabel Bronnen Multimedia-objecten Flash Buttons Flash Text Flash Movie Flash elements Documentrelatieve links in een Flashbestand QuickTime VR Audio Audio in een Flashbestand FlashPaper Flash Video Bronnen Meta-tags Zoekmachines en meta-tags Uw website aanmelden op een zoekmachine Website volledig afwerken Meta-tags toevoegen Pagina's afschermen voor zoekrobots Website manueel aanmelden bij een zoekmachine Website automatisch aanmelden bij een zoekmachine Enkele nuttige tips Meta-tags en templates Make Attribute Editable Editable Attribute aanpassen of wissen Redirect Bronnen XML en Client-Side XSL Inleiding XML Wat betekent XML? Structuur van een XML-document Well-formed en Valid XML DTD en XML Schema Namespaces XHTML is XML XML vormgeven met CSS XML verwerken in een webpagina Data eilanden JavaScript (AJAX) Dreamweaver 8

11 26.4 Inleiding XSL Client-Side XSLT vs. Server-Side XSLT Een eenvoudige XSL Transformatie XSLT proloog xsl:template en xsl:value-of XPath expressies xsl:for-each Sorteren (xsl:sort) XPath operatoren XPath functies Dynamische HTML-attributen Personeel.xml en pers_tabel.xsl koppelen Inleiding RSS Feeds RSS versies RSS varianten Soorten nieuwslezers RSS verwerken in een webpagina Opdrachten Ontwerp een eigen RSS Feed itunes Feed generator Bronnen Dreamweaver - Fireworks integratie Dreamweaver configureren Fireworks als Primary Editor instellen Over de website Achtergrond voor de website ontwerpen De hoofding aanmaken De navigatiebalk ontwerpen Index Inhoud - 11