Adobe Dreamweaver CS6. Ontwerp van statische websites met HTML5, CSS3 en jquery. Sample

Transcriptie

1 Versie juni 2013 Adobe Dreamweaver CS6 Ontwerp van statische websites met HTML5, CSS3 en jquery 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 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 Live View Preview in een Browser Browserlijst uitbreiden Verschillende versies van Internet Explorer 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 Een website publiceren De voorbereiding Een nieuwe site definiëren Website publiceren Bronnen Inhoud - 3

3 6 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 Cloaking 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 XHTML HTML Default HTML5 pagina in Dreamweaver HTML opschonen Het Snippets palet HTML validation Firefox en Chrome add-ons 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 Dreamweaver CS6

4 8.10 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? Wat is cascading? !important Het CSS Styles palet Nieuwe stijl aanmaken Stijleigenschappen wijzigen vanuit het CSS Styles palet Stijleigenschappen tijdelijk uit- en inschakelen 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 Het box model Padding Border Margin Absolute en relatieve eenheden Breedte en hoogte van de box Inline elementen Shorthand CSS Boxeigenschappen controleren in Live View Conditional comments in Internet Explorer Enkele design eigenschappen (CSS2 en CSS3) Browserafhankelijke prexif Prefix-free JavaScript Afgeronde hoeken (border-radius) Slagschaduw op boxen (box-shadow) Slagschaduw op teksten (text-shadow) Web fonts (@font-face) Website vervolledigen Basisstijlen definiëren Lay-out verfijnen Navigatiebalk aanpassen Voetnoot aanpassen Website vervolledigen Bronnen Inhoud - 5

5 10 Afbeeldingen Beeldformaten GIF (.gif): JPEG (.jpg): PNG (.png): Een afbeelding aan de pagina toevoegen Eigenschappen van een afbeelding HTML-eigenschappen CSS-eigenschappen Fluid images Afbeelding bewerken met Dreamweaver Afbeelding bewerken met Fireworks Image Placeholders Achtergrondafbeeldingen CSS-Sprites Favicon en Apple touch icons Bronnen Semantische HTML5-tags Semantische elementen in HTML Section-tag Article-tag Section-tag vs. article-tag vs. div-tag Header-tag Footer-tag Nav-tag Aside-tag Nut van semantische elementen Semantische tags in Internet Explorer Div-tags omzetten naar semantische tags 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 Td-tag en th-tag definiëren Een class aanmaken Optionele tags Bronnen 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 Gefixeerde positionering Pagina-inhoud horizontaal centreren Pagina-inhoud horizontaal en verticaal positioneren Webpagina vormgeven De pagina printklaar maken Welke positionering gebruiken? Lay-out sjablonen Bronnen Dreamweaver CS6

6 14 Templates Een template ontwerpen Editable Regions toevoegen 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 Rollovermenu met CSS Verticaal menu met tekstlinks Verticaal menu met een opsommingslijst Enkele varianten Navigatie van links naar rechts verplaatsen Afstand tussen de knoppen vergroten Horizontaal menu met een opsommingslijst Multi-level menu's Bronnen Formulieren HTML 4 formulierobjecten Form-tag Fieldset Labels Text Field Textarea Hidden Field Checkbox Radio Group Radio Button List/Menu Button Image Field File Field Formulieren vormgeven vanuit CSS Nieuwe HTML5 input-types HTML5 tags in oudere browsers Nieuwe HTML5 input-attributen De pagina optimaliseren voor mobiele toestellen (Media Queries) Een contactformulier verzenden Het formulier vervolledigen Verzenden via PHP of ASP Bronnen Search Engine Optimalisatie (SEO) Hoe werken zoekmachines? Meta-tags toevoegen Een website aanmelden bij Google Pagina's afschermen voor zoekrobots Bepaal zelf de belangrijkheid van uw pagina s Enkele praktische richtlijnen die de ranking positief beïnvloeden Wat kan de ranking negatief beinvloeden? Uw website verder optimaliseren met Google Analytics Bronnen Inhoud - 7

7 18 Inleiding tot jquery Events en Actions JavaScript syntax regels JavaScript debugger jquery framework downloaden jquery documentatie (API) jquery framework integreren jquery introductie jquery selectors jquery events jquery basiseffecten Enkele uitgewerkte voorbeelden Besluit Opdracht Bronnen jquery plug-ins jquery linken met CDN Fancybox plug-in Cycle plug-in Lazy load plug-in jquery UI plug-in jquery UI Accordion jquery UI Tabs jquery UI Dialog Bronnen Index Dreamweaver CS6

8 10 Afbeeldingen. Naast tekst zijn afbeeldingen de meest gebruikte objecten op een webpagina. In tegenstelling tot een tekstverwerker, waar alle grafische elementen meestal binnen het document zelf bewaard worden, bevat een HTML-pagina enkel een verwijzing (het pad) naar de plaats waar het grafisch element zich bevindt. In het eerste deel van dit hoofdstuk gaat u een aantal afbeeldingen aan een webpagina toevoegen en worden de eigenschappen besproken. In het tweede deel gaat u de afbeeldingen optimaliseren zodat ze perfect integreren met de achtergrond van de pagina. Hierbij gaat u Dreamweaver gebruiken in combinatie met Fireworks. Installeer alvast Fireworks CS6. Zorg er ook voor dat Fireworks als default editor staat ingesteld voor het bewerken van alle grafische bestandsformaten (PNG, GIF en JPEG). Kijk de voorkeurinstelling na.» Open de voorkeurinstellingen, rubriek File Types / Editors.» Selecteer de extensie.png.» Voeg, indien nodig, Fireworks CS6 toe aan de Editors.» Selecteer Fireworks en klik op Make Primary.» Herhaal deze stappen voor de extensies.gif en.jpg.jpe.jpeg.» Sluit het Preferences scherm. Vanaf nu kan u elke afbeelding aanpassen en optimaliseren met Fireworks.» Definieer een nieuwe site met volgende instellingen: naam van de site = DW_hst10 en verwijs naar de map: Z...\Les DreamweaverCS6\hst10\html\ apple...:les DreamweaverCS6:hst10:html: 10: Afbeeldingen - 181

9 10.1 Beeldformaten. De vier belangrijkste beeldformaten die op het internet gebruikt worden, zijn: GIF (.gif): Een GIF-bestand bezit volgende eigenschappen: Het beeld kan maximum 256 kleuren bevatten. U kan delen (bepaalde pixels) van het beeld volledig transparant maken. Dit noemt men index transparency. Animatie binnen één bestand is mogelijk (animated GIF). Omwille van het beperkte aantal kleuren is het GIF-formaat uiterst geschikt voor afbeeldingen met weinig kleurvariaties zoals logo's, clipart en afbeeldingen waarbij transparantie belangrijk is. Het GIF-formaat is niet geschikt voor het exporteren van foto's JPEG (.jpg): Een JPEG-bestand bezit volgende eigenschappen: Het beeld kan miljoenen kleuren bevatten. Een JPEG-bestand kan u nooit transparant maken. Gebruik het JPEG-formaat voor beelden die meer dan 256 kleuren nodig hebben, zoals foto's en afbeeldingen met gradiënten. Omwille van de vervormingen die optreden bij het comprimeren is het JPEG-formaat minder geschikt voor logo's PNG (.png): PNG (uitspreken als pee-en-gee of ping) is een waardig alternatief voor zowel GIF als JPEG. PNG is ontstaan als patentvrij alternatief voor GIF en wordt veelvuldig gebruikt in opensource programma's en online dynamisch gegenereerde beelden. (Tot 2003 was GIF een gepatenteerd bestandsformaat.) U kan een PNG-bestand zowel in een 8-bit, 24-bit als in een 32-bit versie exporteren. De 8-bit versie is vergelijkbaar met een GIF-bestand (265 kleuren), de 32-bit versie met een JPEG-bestand (miljoenen kleuren). In tegenstelling tot JPEG is PNG een beeldformaat waarbij de compressie niet voor verliezen zorgt, wat maakt dat de bestandsgrootte van een 32-bit versie PNG aanzienlijk groot kan zijn. PNG heeft nog een extra troef, namelijk dat elk beeldpunt gedeeltelijk transparant (of alpha transparency) kan zijn. Zoals we weten kan in een GIF-bestand een pixel enkel volledig of helemaal niet transparant zijn. JPEG ondersteunt geen transparantie. Alpha-transparantie biedt heel wat nieuwe designmogelijkheden binnen een webpagina Dreamweaver CS6

10 ! Er is wel degelijk een verschil tussen het PNG-formaat dat u op een webpagina kan gebruiken en het native PNG-formaat waarin Fireworks zijn bestanden bewaart. Het internet PNG-formaat bestaat enkel uit pixels. Het Fireworks PNG-bestand kan naast pixels eveneens vector- en tekstobjecten bevatten. Sinds CS6 krijgt het Fireworksbestand de extensie.fw.png Een afbeelding aan de pagina toevoegen. U kan een afbeelding op verschillende manieren op een pagina plaatsen. menu:insert:image. Plaatst de afbeelding op de plaats waar de cursor zich momenteel bevindt. Klik op het Image-object (Insert palet, rubriek Common). Ook hier komt de afbeelding op de plaats te staan waar de cursor zich momenteel bevindt. Sleep het Image-object naar de pagina. Blader hierna naar de juiste afbeelding. Sleep de afbeelding vanuit het Files palet naar de pagina. Sleep de afbeelding vanuit het Assets palet naar de pagina. In het Assets palet worden de verschillende media, zoals afbeeldingen, movies, enz... gegroepeerd per categorie. Dit is eveneens de enige plaats waar u een preview van het object te zien krijgt. Klik eventueel op Refresh Site List (onderaan het palet) om de inhoud van het palet opnieuw op te bouwen. 10: Afbeeldingen - 183

11 » Open index.html.» Sleep thebirds.jpg net voor de eerste tekstparagraaf. Als tussenscherm kan u nog wat eigenschappen rond Accessibility ingeven. Laat dit scherm voorlopig leeg (klik op OK). Verder in dit hoofdstuk verneemt u hier meer over. Om het tussenscherm niet meer te tonen, kan u enkele voorkeurseigenschappen aanpassen (rubriek Accessibility).» Laat de eigenschappen ongewijzigd en sluit het venster Dreamweaver CS6

12 T Indien u een afbeelding op de pagina plaatst die zich buiten de site (de html-map) bevindt, zal Dreamweaver een kopie van de afbeelding in de site plaatsen. De default locatie waar deze afbeeldingen terechtkomen, kan u instellen in het Site Definition palet, rubriek Local Info Eigenschappen van een afbeelding HTML-eigenschappen. De afbeelding wordt via de img-tag met de pagina verbonden. Alle eigenschappen zijn attributen van de img-tag.» Selecteer titel.gif op de indexpagina. In het Properties palet vindt u volgende eigenschappen terug: ID (tekstvak onder Image, 48K): Deze naam, het id, is o.a. belangrijk zodra u JavaScripts gaat gebruiken om de eigenschappen van een afbeelding te wijzigen (zie later) of om CSS-eigenschappen aan deze afbeelding toe te kennen. De naam die u aan een afbeelding toekent, mag enkel uit letters en cijfers bestaan, zonder spaties.» Noem deze afbeelding birds. De naam die u ingeeft, wordt zowel aan het attribuut name als aan het attribuut id van de img-tag toegekend (zie broncode). Het id kan u daarna gebruiken om een stijl te definiëren die enkel op deze afbeelding van toepassing is. 10: Afbeeldingen - 185

13 W en H (Width en Height): De breedte (W) en hoogte (H) van een afbeelding zoals ze op de pagina wordt weergegeven. Zodra u de afbeelding verschaalt, worden deze getallen vet weergegeven. Naast beide getallen verschijnt het reset icoon.» Maak de afbeelding groter of kleiner door één van de hendels te verslepen.» Klik op het Reset icoon. Zet de breedte en hoogte van een afbeelding terug op ware grootte (schaal 1/1).! Indien u een afbeelding op de webpagina wil verkleinen, dan doet u dat nooit op deze manier. Stel, u hebt een foto van 640 op 480 pixels en het bestand is 200 kb groot. U wenst deze foto in miniatuur op de pagina weer te geven en gebruikt de originele foto. Daarna verschaalt u de foto tot een kleiner formaat. Door de foto te verschalen gaat u enkel de weergave aanpassen, maar aan de bestandsgrootte verandert helemaal niets. De gebruiker zal dus nog altijd 200 kb moeten downloaden om het miniatuur te bekijken. Hoe moet het wel? Maak een miniatuur van de foto in een grafisch pakket (bijvoorbeeld in Fireworks). Deze miniatuur is misschien maar 20 kb groot. Plaats deze miniatuur op de pagina en leg eventueel een link naar de originele foto op ware grootte Dreamweaver CS6

14 Src (Source File of Image): Het relatieve of absolute pad naar de afbeelding. T U mag de afbeelding, binnen Dreamweaver, hernoemen of verplaatsen. Het pad wordt automatisch aangepast. Alt (Alternate text voor Accessibility): Niet alle gebruikers zijn in staat afbeeldingen te interpreteren. Denk bijvoorbeeld aan slechtzienden. Een manier om aan een afbeelding nuttige informatie toe te voegen voor niet-visuele browsers, is het alt-attribuut. De tekst die u hier ingeeft wordt door screenreaders voorgelezen. Voorbeelden van Screen Readers zijn: JAWS ( en Window-Eyes ( Beide programma's maken gebruik van spraaktechnologie en kunnen de tekst op een pagina letterlijk "voorlezen". Ook zoekmachines zoals AltaVista en Google gebruiken de inhoud van het alt-attribuut tijdens het indexeren van een website.» Geef als alt-tekst poster The Birds in.» Open de pagina in Internet Explorer en plaats de cursor boven de afbeelding. De alt-tekst komt tevoorschijn. T Om deze tekst ook zichbaar te maken in Firefox, Google Chrome en Safari, moet u manueel het title-attribuut aan de afbeelding toevoegen.! Geef altijd een alt-tekst in. Laat het veld nooit leeg. Indien de afbeelding totaal geen betekenis heeft, geef dan een blanco alt-tekst in. Hiervoor kiest u <empty> uit het pop-upmenu dat bij het alt-attribuut hoort. Een afbeelding met een blanco alt-tekst wordt door screen readers overgeslagen. Vult u geen alt-tekst in, dan lezen de meeste screen readers het pad van deze afbeelding. Link en Target: Elke afbeelding kan een link bevatten en een bijbehorende target.» Link de afbeelding thebirds.jpg met en zet Target op _blank.» Bewaar de pagina en test de links in een browser. Original: Het pad naar het originele Fireworksbestand. Hierover dadelijk meer. Map (Image Map): Een image map bestaat uit één afbeelding met daarop meerdere hotspots. Elke hotspot kan één hyperlink bevatten. 10: Afbeeldingen - 187

15 CSS-eigenschappen. Door aan de afbeelding een naam (en dus ook een id) toe te kennen, kan u een nieuwe stijl definiëren die enkel van toepassing is op deze afbeelding. Wilt u een stijl hergebruiken, dan definieert u deze best in een class. U kan ook eigenschappen toekennen aan de img-tag. Deze eigenschappen gelden dan voor alle afbeelding. Alle selectors voor dit hoofdstuk zijn reeds in style.css opgenomen. U hoeft enkel nog de stijlregels aan te vullen. Als eerste gaan we de class imglinks aanvullen. Deze class plaatst de afbeelding links en de tekst vloeit om de afbeelding heen.» Wijzig de stijl.imglinks. Plaats de afbeelding links (Float: left) en laat rechts en onder de afbeelding 21 pixels vrij. De eigenschap Float haalt de afbeelding uit de normale documentflow en hierdoor gedraagt de afbeelding zich als een block-level element. Door de float op left te zetten, verplaatst de afbeelding zich naar de linkermarge van het parent element. In dit geval is het parent element de p- tag waarin de afbeelding staat. De tekst die normaal naast de afbeelding staat, schuift naar boven en plaatst zich rond de afbeelding. Door enkel een margin op de rechter- en ondermarge te voorzien, zal er steeds een witruimte van 21 pixels tussen de afbeelding en de omringende tekst bestaan. De linkermarge van de afbeelding staat (in de browser) op gelijke hoogte met de linkermarge van de tekst die onder de afbeelding verder loopt.» Selecteer de afbeelding thebirds.jpg en verbind deze, vanuit het Properties palet, met de class imglinks Dreamweaver CS6

16 T Ook al staat er op elke afbeelding een ID (indien u aan een afbeelding een naam toekent), dan nog bent u niet verplicht al deze ID's afzonderlijk te definiëren in de style sheet Fluid images. Omwille van de verscheidenheid aan browsers en platformen, gaan we onze website verder optimaliseren voor kleine schermen zoals bijvoorbeeld de smartphone. De lay-out van de pagina past zich al volledig aan de breedte van het scherm aan, maar de afbeeldingen nog niet. Voorlopig kunnen we het resultaat op een smartphone simuleren door het browservenster te verschalen. Op het einde van dit hoofdstuk zal u merken dat er nog wat extra code nodig is om de pagina correct op een hoogresolutiescherm van sommige smartphones te tonen. De meeste afbeeldingen op onze pagina hebben een vaste hoogte en breedte. Deze waardes vinden we terug als het width en height-attribuut op de img-tag. De schermafbeelding links toont de website zoals hij momenteel is opgebouwd. De afbeelding rechts is wat we willen bereiken. 10: Afbeeldingen - 189

17 Laat ons eerst in grote lijnen de structuur en de lay-out van de pagina bestuderen. <body> <div id="outline"> <div id="header">... </div> <div id="data">... </div> <div> </body> #outline { margin: 21px 10%; border: #333; box-shadow: px rgba(51,51,51,.8); background-color: #F2F3E9; padding-bottom: 1px; } #data { padding: 0 21px; } #header { background-color: #1A1A1A; height: 84px; color: white; margin-bottom: 21px; } De pagina bestaat uit twee grote blokken, namelijk de div-tags #header en #data. Deze div-tags zijn samen gebundeld in de div-tag #outline. De margin op #outline bepaalt in hoge mate de lay-out van de pagina. Deze div-tag heeft geen vaste breedte maar is, net zoals onze afbeeldingen straks, fluid. Met andere woorden: de breedte wijzigt in functie van de vensterbreedte. Boven en onder heeft de div-tag een vrije ruimte van 21px. Links en rechts bedraagt de vrije ruimte 10% van de breedte van het browservenster Dreamweaver CS6

18 Fluid images zijn vrij eenvoudig aan te maken en kan u vanaf nu best in elke site voorzien.» Voeg aan de img-tag volgende stijlregels toe en bekijk het resultaat in een browser. Optioneel: wis de breedte en hoogte van alle afbeeldingen. img { max-width: 100%; height: auto; border: none; } 10.5 Afbeelding bewerken met Dreamweaver. U kan een aantal eenvoudige basisbewerkingen op een afbeelding uitvoeren zonder dat u een grafisch softwarepakket, zoals Fireworks, moet installeren. Om meer geavanceerde bewerkingen uit te voeren, hebt u natuurlijk wel een grafisch pakket nodig. Installeer bij voorkeur Fireworks. Dreamweaver en Fireworks werken op een aantal vlakken perfect samen, waardoor u de ontwikkelsnelheid aanzienlijk kan verkorten. In het boek Fireworks CS6 (isbn: ) wordt de integratie tussen beide softwarepaketten verduidelijkt. Voor de volgende bewerkingen hebt u geen grafisch pakket nodig. Experimenteer met de verschillende instellingen op het bestand poster.jpg. Crop. Verwijdert onbelangrijke delen van een afbeelding.» Klik op het crop icoon en maak binnen de afbeelding een selectie waarbij de tekst in het midden van de selectie staat.» Dubbelklik op de selectie en bevestig de actie. Het overbodige deel van de selectie wordt weggeknipt. Resample. Verschaalt een afbeelding en herberekent het aantal beeldpunten. De herberekende afbeelding is nu schaal 1/1. 10: Afbeeldingen - 191

19 » Maak de afbeelding iets kleiner door één van de ankerpunten te verslepen. Neem bij voorkeur het ankerpunt onderaan rechts en houd de shift-toets ingedrukt tijdens het verkleinen. Hierdoor wordt de afbeelding proportioneel verschaald.» Klik op het Resample icoon om de actie te bevestigen.! De afbeelding nooit vergroten. Na elke vergroting worden er extra beeldpunten aan de afbeelding toegevoegd. Het totaalbeeld wordt hierdoor onscherp. Brightness and Contrast. Brengt meer helderheid en/of contrast in het beeld. Deze actie is niet echt geschikt voor deze afbeelding, maar wel voor foto's.» Selecteer de afbeelding en klik vervolgens op het Brightness and Contrast icoon.» Experimenteer met de verschillende instellingen en klik vervolgens op Cancel. Sharpen. Maakt de afbeelding scherper. Ook deze actie is niet echt geschikt op onze afbeelding, maar wordt vaak op foto's toegepast.» Selecteer de afbeelding en klik vervolgens op het Sharpen icoon.» Experimenteer met de verschillende instellingen en klik vervolgens op Cancel. Edit Image Settings. Deze actie is enkel actief indien u Fireworks als default editor hebt ingesteld. Dreamweaver opent het exportgedeelte van Fireworks. U kan vanuit het exportpalet ondermeer: een afbeelding omvormen van een GIF- naar een JPEG-bestand en omgekeerd, de afbeelding verschalen, het aantal kleuren van een GIF-bestand beperken, de compressie van een GIF- en JPEG-bestand aanpassen.» Selecteer de afbeelding en klik op het Optimize icoon.» Optimalizeer de afbeelding naar een JPEG van 80%. Edit. Bewerkt de afbeelding met uw default grafisch pakket. Deze actie gaat u dadelijk op een andere afbeelding uitvoeren Dreamweaver CS6

20 10.6 Afbeelding bewerken met Fireworks. Zodra u een afbeelding aanmaakt in Fireworks en vervolgens exporteert naar Dreamweaver, wordt de link tussen beide bestanden bewaard in een Design note. Deze link verschijnt ook in het Properties palet. In deze oefening gaat u voor de afbeelding fotoframe.jpg het originele Fireworksbestand aanpassen en opnieuw exporteren. In Dreamweaver:» Selecteer fotoframe.jpg en klik in het Properties palet achter Edit op het Fireworks icoon.» Fireworks vraagt u het originele bestand te openen. Klik op Use a PNG.» Blader naar...\hst10\fireworks\fotoframe.fw.png. 10: Afbeeldingen - 193

21 In Fireworks:» Open het Layers palet (menu: window: Layers).» Maak de achtergrond van de afbeelding onzichtbaar door op het oogicoon te klikken.» Klik bovenaan het document op Done. De wijzigingen worden bewaard en u keert automatisch terug naar Dreamweaver. In het Properties palet van Dreamweaver verschijnt onderaan het pad naar het originele Fireworksbestand Dreamweaver CS6

22 10.7 Image Placeholders. U hoeft niet op voorhand alle grafische elementen aan te maken voordat u in Dreamweaver uw site ontwerpt. U kan namelijk tijdens het ontwerp ruimte reserveren voor een afbeelding en achteraf de ruimte opvullen met een afbeelding. Dit doet u met behulp van een placeholder (Insert palet, rubriek Common). De breedte en hoogte hoeft niet exact juist te zijn. Zodra u de placeholder vanuit het Properties palet linkt met een afbeelding, worden deze waardes automatisch aangepast. In plaats van lege ruimtes te voorzien, kan u ook opteren voor dummy afbeeldingen. De afbeeldingen op de voorbeeldpagina zijn afkomstig van de website De beeldgrootte wordt bepaald door de breedte en hoogte die u achteraan de URL toevoegt. De URL geeft ons een afbeelding van 300px breed en 200px hoog. Telkens u de pagina vernieuwt, verschijnt er een nieuwe, random, afbeelding. Indien u op één pagina meerdere malen dezelfde URL gebruikt, zal deze telkens dezelfde afbeelding tonen! Om de URL uniek te maken, voegt u achteraan een willekeurige parameter toe. Bijvoorbeeld: voor de eerste afbeelding, voor de tweede afbeelding, enz... Merk op dat de afbeeldingen in onze toepassing nog vrij dicht op elkaar gepakt staan. Dit gaan we oplossen door elke afbeelding rechts en onderaan wat meer ruimte te geven. Verder gaan we ook een hover-effect toevoegen. De vier afbeeldingen staan binnen een div-tag met class galerij. 10: Afbeeldingen - 195