Adobe Dreamweaver CS4 startersgids Ontwerp van statische websites met XHTML en CSS Versie 1.0 - 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
Verhaert, Patrick Dreamweaver CS4 startersgids / Patrick Verhaert; Geel: Campinia Media vzw, 2009; 260p; index; 25 cm; gelijmd. ISBN: 97890.356.1238.9; NUGI 854; UDC 681.3.06; Wettelijk depot België: D/2009/3941/4 Campinia Media vzw Kleinhoefstraat 4 B 2440 GEEL (Belgium) Tel.: (+32) 014/59 09 59 Fax: (+32) 014/59 03 44 e-mail: <info@campiniamedia.be> URL: <www.campiniamedia.be> Copyright 2009: 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.
Inhoud 1 Inleiding....9 1.1 Historiek...9 1.2 Conventies...10 1.3 Systeemvereisten....10 1.3.1 Microsoft-Windows...10 1.3.2 Mac-OS...10 1.4 Lesmateriaal bij dit handboek....10 1.4.1 Lesmateriaal installeren op PC....11 1.4.2 Lesmateriaal installeren op Macintosh....11 1.5 De helpfunctie....11 1.6 Technische ondersteuning en training....12 1.7 Statische en dynamische websites...12 1.7.1 Statische webpagina's....12 1.7.2 Statische website....12 1.7.3 Dynamische webpagina's....13 1.7.4 Dynamische website of Web applicatie...13 1.8 Bronnen....14 2 Lay-out van het programma...15 2.1 Werkomgeving...15 2.2 Startpagina...15 2.3 De gebruikersinterface...16 3 Essentiële paletten en functies....21 3.1 Het Insert palet....21 3.2 Het Properties palet....22 3.3 Extensions....23 3.4 Het Files palet...24 3.5 Preview in een Browser....29 3.6 Browserlijst uitbreiden...30 3.7 Check Browser Compatibility....32 3.8 HTML validation...34 3.9 Online HTML en CSS validation....35 3.10 Firefox add-ons...37 3.11 Bronnen....37 4 Filosofie achter een website....39 4.1 Hosting....39 4.1.1 Lokaal op harde schijf of op CD-ROM....39 4.1.2 Intranet...39 4.1.3 Internet...40 4.1.4 Domeinnaam...41 4.1.5 Webruimte...41 4.2 Webservers...41 4.3 Naamgeving van documenten....42 4.4 Structuur van een website....43 4.5 Bronnen....44 Inhoud - 3
5 Een website publiceren....45 5.1 De voorbereiding....45 5.2 Een nieuwe site definiëren...46 5.3 Website publiceren....49 5.4 Bronnen....52 6 Site management....53 6.1 Een nieuwe site definiëren en publiceren....53 6.2 Documenten ordenen....55 6.3 Documenten herbenoemen....55 6.4 Documenten verplaatsen...57 6.5 Foutieve links herstellen....58 6.6 Overbodige documenten wissen....58 6.7 De website synchroniseren...59 6.7.1 Alle bestanden wissen en volledig opnieuw publiceren....59 6.7.2 Gewijzigde bestanden dadelijk uploaden...60 6.7.3 Bestanden synchroniseren...61 7 HTML als basis...63 7.1 Elementen of tags...65 7.2 Attributen...66 7.3 HTML in Dreamweaver....67 7.3.1 Code en Design View...67 7.3.2 Code Hints in Code View....69 7.3.3 Het Tag Inspector palet....69 7.3.4 De Tag Selector...70 7.3.5 Het Reference palet....71 7.3.6 Coding Toolbar....72 7.4 De geschiednis van HTML...72 7.4.1 HTML 2.0....72 7.4.2 HTML 3.2....73 7.4.3 HTML 4.01....73 7.5 XHTML vs. HTML....73 7.5.1 Maak een nieuw XHTML-document...74 7.5.2 Bestaande webpagina's converteren naar XHTML...74 7.6 XHTML 1.0 Transitional of Strict....75 7.7 De toekomst van HTML....77 7.8 Browserafhankelijke tags en attributen...77 7.9 Roundtrip HTML....77 7.9.1 Code herschrijven....78 7.9.2 Foutief geneste code...78 7.9.3 Clean Up XHTML...79 7.10 Het Snippets palet....80 7.11Bronnen....83 8 Tekst...85 8.1 Eigenschappen van tekst...85 8.2 Het Properties palet....87 8.2.1 Eigenschappen in HTML view...88 8.2.2 Eigenschappen in CSS view....92 8.3 Hyperlinks....97 4 - Dreamweaver CS4 - startersgids
8.3.1 Absolute links....97 8.3.2 Document vs. siterelatieve links...99 8.3.3 Documentrelatieve links...100 8.3.4 Het title-attribuut...102 8.4 Target...103 8.5 Ankers...103 8.6 Achtergrond-, tekst- en linkeigenschappen...104 8.6.1 Rubriek Appearance (CSS)...105 8.6.2 Rubriek Links (CSS)...105 8.6.3 Rubriek Headings (CSS)...106 8.6.4 Rubriek Title/Encoding....106 8.6.5 Rubriek Tracing Image...106 8.7 Tekst uit andere programma's importeren....107 8.8 Microsoft Word webpagina's...107 8.9 Bronnen....108 9 Vormgeven met Cascading Style Sheets (CSS)...109 9.1 Historiek....110 9.2 Terminologie....111 9.3 De voordelen van een style sheet...113 9.4 Structuur van een eenvoudige stijl...114 9.5 Interne of externe stijlen...114 9.5.1 Inline styles...114 9.5.2 Embedded of internal style sheets....115 9.5.3 Linked of external style sheets....115 9.6 Cascading?...116 9.7 Het CSS Styles palet....117 9.7.1 Nieuwe stijl aanmaken....117 9.7.2 Stijleigenschappen wijzigen vanuit het CSS Styles palet...120 9.8 Class en ID selector...122 9.9 Contextual selector....125 9.10 Pseudo-class selector...127 9.11 Related files en Code navigator....130 9.12 Live View...132 9.13 Teksteigenschappen....133 9.13.1 Font-family...133 9.13.2 Color...133 9.13.3 Font-size....134 9.13.4 Font-weight....137 9.13.5 Line-height....138 9.13.6 Overige eigenschappen....139 9.13.7 Besluit....139 9.14 Het box model...140 9.14.1 Padding...141 9.14.2 border...142 9.14.3 Margin....142 9.14.4 Absolute en relatieve eenheden...144 9.14.5 Breedte en hoogte van de box...144 9.14.6 Inline elementen...145 9.14.7 Shorthand CSS....146 Inhoud - 5
9.15 Standard mode en Quirks mode...148 9.16 Conditional comments in Internet Explorer....149 9.17 HTML-stijlen vs CSS-stijlen....151 9.18 Website vervolledigen...152 9.18.1 Basisstijlen definiëren....153 9.18.2 Externe style sheet aanmaken...154 9.18.3 Lay-out verfijnen...154 9.18.4 Lijsten, een geval apart...156 9.18.5 Navigatielinks aanpassen....160 9.19 Bronnen....162 10 Afbeeldingen....163 10.1 Beeldformaten....164 10.1.1 GIF (.gif):...164 10.1.2 JPEG (.jpg):...164 10.1.3 Animated GIF (.gif):...164 10.1.4 PNG (.png):...164 10.2 Een afbeelding aan de pagina toevoegen....165 10.3 Eigenschappen van een afbeelding...167 10.3.1 HTML-eigenschappen...167 10.3.2 Afgekeurde attributen van de img-tag in HTML 4...170 10.4 Eenvoudige bewerkingen....171 10.4.1 Bewerkingen binnen Dreamweaver....172 10.4.2 Bewerkingen in combinatie met Fireworks...173 10.5 Image Placeholders....173 10.5.1 Placeholder toevoegen....173 10.5.2 Placeholder koppelen aan een afbeelding...174 10.6 Image Map...175 10.6.1 Een hotspot toevoegen....176 10.6.2 Een hotspot aanpassen....177 10.6.3 Volledige afbeelding linken...177 10.7 Afbeeldingen aangemaakt met Fireworks...179 10.8 Pagina-achtergrond aanpassen...180 10.8.1 Achtergrondkleur toevoegen....180 10.8.2 Achtergrondpatroon toevoegen...183 10.9 Bronnen....186 11 Tabellen...187 11.1 Tabel toevoegen...188 11.2 Tabel- en celeigenschappen....190 11.2.1 Tabeleigenschappen....191 11.2.2 Celeigenschappen...193 11.3 Gegevens importeren....194 11.4 Tabellen importeren vanuit MS Excel, Word of Access...196 11.5 Tabel vormgeven met style sheets...196 11.5.1 Table-tag definiëren...197 11.5.2 Een class aanmaken....198 11.5.3 Een ID aanmaken...200 11.5.4 Celranden met CSS....202 6 - Dreamweaver CS4 - startersgids
12 Elementen positioneren met CSS....205 12.1 Tweekolommen lay-out met absolute en relatieve positionering....206 12.1.1 Relatieve positionering...208 12.1.2 Stapelvolgorde van de elementen aanpassen...209 12.1.3 Absolute positionering....211 12.2 Driekolommen lay-out met absolute positionering...214 12.3 Driekolommen lay-out met zwevende elementen...217 12.4 Pagina-inhoud horizontaal centreren...221 12.5 Pagina-inhoud horizontaal en verticaal positioneren....223 12.6 Lay-outtabel vervangen door div-tags....225 12.6.1 Lay-outtabel verwijderen...225 12.6.2 Pagina vormgeven voor schermweergave...226 12.7 De pagina printklaar maken...231 12.8 Welke positionering gebruiken?...236 12.9 Lay-outtabellen vs. div-tags....236 12.10 Browser hacks....237 12.11 Lay-out sjablonen...240 12.12 Bronnen....242 13 Templates...243 13.1 Een template ontwerpen...244 13.2 Editable Regions toevoegen...245 13.2.1 Editable Region...246 13.2.2 Optional Region....246 13.2.3 Overige objecten in het Insert palet....248 13.3 Bestaande pagina's koppelen aan een template...249 13.4 Een template aanpassen....251 13.5 Nieuwe pagina's koppelen aan een template....253 13.6 Editable Region wissen....253 13.7 Pagina's van een template losmaken....254 13.8 Paginatitels aanpassen...254 Index...257 Inhoud - 7