Adobe Dreamweaver CS4 startersgids

Transcriptie

1 Adobe Dreamweaver CS4 startersgids Ontwerp van statische websites met XHTML en CSS 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 CS4 startersgids / Patrick Verhaert; Geel: Campinia Media vzw, 2009; 260p; index; 25 cm; gelijmd. ISBN: ; NUGI 854; UDC ; Wettelijk depot België: D/2009/3941/4 Campinia Media vzw Kleinhoefstraat 4 B 2440 GEEL (Belgium) Tel.: (+32) 014/ Fax: (+32) 014/ <info@campiniamedia.be> URL: < 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.

3 Inhoud 1 Inleiding Historiek 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 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 Het Reference palet Coding Toolbar De geschiednis van HTML HTML HTML HTML XHTML vs. HTML Maak een nieuw XHTML-document Bestaande webpagina's converteren naar XHTML XHTML 1.0 Transitional of Strict De toekomst van HTML Browserafhankelijke tags en attributen Roundtrip HTML 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 Dreamweaver CS4 - startersgids

5 8.3.1 Absolute links Document vs. siterelatieve links Documentrelatieve 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 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 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 Inhoud - 5

6 9.15 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 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 Dreamweaver CS4 - startersgids

7 12 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 Index Inhoud - 7