Adobe Dreamweaver CS4

Transcriptie

1 Adobe Dreamweaver CS4 Ontwerp van statische websites met XHTML, CSS en Spry Versie juni 2009 Adobe, Macromedia, Dreamweaver, Fireworks en Flash 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 en Guy voor hun meer dan gewaardeerde medewerking. 1

2 Verhaert, Patrick Dreamweaver initiatie CS4 / Patrick Verhaert; Geel: Campinia Media vzw, 2008; 484 p; index; 25 cm; gelijmd. ISBN: ; NUGI 854; UDC ; Wettelijk depot België: D/2008/3941/6 Campinia Media vzw Kleinhoefstraat 4 B 2440 GEEL (Belgium) Tel.: (+32) 014/ Fax: (+32) 014/ <info@campiniamedia.be> URL: < Copyright 2008: 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 CS 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 gebruikersinterface Essentiële paletten en functies Het Insert palet Het Properties palet Extensions Het Files palet Preview in een Browser Browserlijst uitbreiden Check Browser Compatibility HTML validation Online HTML en CSS validation Firefox add-ons 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 ordenen 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 Overige opties in het Site Definition palet Rubriek: Local Info Rubriek: Remote Info Rubriek: Testing Server Rubriek: Version Control Rubriek: Contribute Rubriek: Spry 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 (Properties palet) De Quick Tag editor (Design View) Het Reference palet Coding Toolbar De geschiednis van HTML HTML HTML HTML Browsers en HTML-versies XHTML vs. HTML Maak een nieuw XHTML-document Bestaande webpagina's converteren naar XHTML XHTML 1.0 Transitional of Strict De toekomst van HTML Dreamweaver CS4

5 7.8 Browserafhankelijke tags en attributen Roundtrip HTML Documenten gelijktijdig bewerken in meerdere editors Code herschrijven Foutief geneste code Clean Up XHTML Het Snippets palet Bronnen Tekst Eigenschappen van tekst Het Properties palet Eigenschappen in HTML view Eigenschappen in CSS view Hyperlinks Absolute links Document vs. siterelatieve links Documentrelatieve links Siterelatieve links Het title-attribuut Target Ankers Achtergrond-, tekst- en linkeigenschappen Rubriek Appearance (CSS) Rubriek Links (CSS) Rubriek Headings (CSS) 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 Contextual selector Pseudo-class selector Related files en Code navigator Live View Inhoud - 5

6 9.13 Teksteigenschappen Font-family Color Font-size Font-weight Line-height Overige eigenschappen Besluit Het box model Padding border Margin Absolute en relatieve eenheden Breedte en hoogte van de box Inline elementen Shorthand CSS Standard mode en Quirks mode Conditional comments in Internet Explorer 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 Dreamweaver CS4

7 Achtergrondpatroon toevoegen Bronnen 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 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 Pagina-inhoud horizontaal centreren Pagina-inhoud horizontaal en verticaal positioneren 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 Lay-out sjablonen Bronnen 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 Inhoud - 7

8 14 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 Een behavior wissen Plaats van een JavaScript op de pagina JavaScripts kopiëren en downloaden Downloadsnelheid optimaliseren Broncode beveiligen CSS-eigenschappen dynamisch wijzigen Syntax regels Objecten Functies en events Object-eigenschappen aanpassen innerhtml Opdracht Bronnen Spry Framework Adobe Spry Framework for AJAX Nadelen van Spry toepassingen Spry versies Spry effecten Enkelvoudige effecten Gecombineerde effecten Spry widgets Spry Tabbed Panels Spry Accordion Spry Collapsible Panel Spry Tooltip Spry Menu Bar Spry widgets en accessibility Fotoalbum met effecten Bronnen Rollovermenu met CSS Verticaal menu met tekstlinks Verticaal menu met een opsommingslijst Dreamweaver CS4

9 17.3 Enkele varianten Navigatie van links naar rechts verplaatsen Afstand tussen de knoppen vergroten Horizontaal menu met een opsommingslijst Spry menu's Bronnen Formulieren Formulierobjecten toevoegen Form-tag Text Field Textarea Hidden Field Checkbox Radio Group Radio Button List/Menu Button Image Field File Field Een formulier verzenden Het formulier vervolledigen Verzenden via PHP of ASP Eenvoudige formuliervalidatie (JavaScript) Uitgebreide formuliervalidatie (Spry widgets) Spry Validation Text Field Spry Validation Textarea Spry Validation Select Spry Validation Checkbox Spry Validation Password Spry Validation Confirm Formulierelementen vormgeven vanuit een style sheet Multimedia-objecten QuickTime VR Audio Audio in een Flashbestand FlashPaper (Print2Flash) Flash Video Bronnen Meta-informatie 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 Inhoud - 9

10 20.3 Meta-tags en templates Make Attribute Editable Editable Attribute aanpassen of wissen Redirect Favicon Een favicon aan de webpagina koppelen Het favicon controleren Het favicon vernieuwen 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) 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 Spry datasets Inleiding AJAX Spry datasets Een HTML dataset aanmaken Een XML dataset aanmaken Hoofd- en detailgebieden (spry:region en spry:detailregion) Datalus (spry:repeat en spry:repeatchildren) Dreamweaver CS4

11 Gegevens sorteren (Spry:sort) Datareferenties Gegevens filteren Voorwaardelijke instructies (spry:if en spry:choose) Controletoestanden (spry:state) Debugmode Master/detail relatie met één dataset Master/detail relatie met twee datasets Master/detail relatie met tabbed panels Bronnen Index Inhoud - 11