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

re ht a tp m :// we S w a am w ve w p .m r C le ed S6 ia ta In fe it l.c iat om ie /

Adobe Dreamweaver CS6

D

Ontwerp van statische websites met HTML5, CSS3 en jQuery

Versie 1.0 - juni 2013

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

Inhoud 1 Inleiding. ..............................................................................................................13


1.1 Historiek...................................................................................................................13 1.2 Nieuw in Dreamweaver CS6....................................................................................14 1.3 Conventies...............................................................................................................14 1.4 Systeemvereisten. ...................................................................................................15 1.4.1 Microsoft-Windows........................................................................................15 1.4.2 Mac-OS. ........................................................................................................15 1.5 Lesmateriaal bij dit handboek. .................................................................................15 1.5.1 Lesmateriaal installeren op PC. ....................................................................15 1.5.2 Lesmateriaal installeren op Macintosh..........................................................16 1.6 De helpfunctie..........................................................................................................16 1.7 Technische ondersteuning en training. ....................................................................17 1.8 Statische en dynamische websites..........................................................................17 1.8.1 Statische webpagina's. .................................................................................17 1.8.2 Statische website. .........................................................................................17 1.8.3 Dynamische webpagina's. ............................................................................18 1.8.4 Dynamische website of Web applicatie.........................................................18 1.9 Bronnen. ..................................................................................................................19

2 Lay-out van het programma...............................................................................21

2.1 Werkomgeving.........................................................................................................21 2.2 Startpagina ..............................................................................................................21 2.3 De gebruikersinterface.............................................................................................22

3 Essentiële paletten en functies. ........................................................................27

3.1 Het Insert palet. .......................................................................................................27 3.2 Het Properties palet. ................................................................................................28 3.3 Extensions. ..............................................................................................................29 3.4 Het Files palet..........................................................................................................30 3.5 Preview in Live View. ...............................................................................................32 3.6 Preview in een Browser. ..........................................................................................33 3.7 Browserlijst uitbreiden..............................................................................................34 3.8 Verschillende versies van Internet Explorer.............................................................37 3.9 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

D

5 Een website publiceren. .....................................................................................45

5.1 De voorbereiding. ....................................................................................................46 5.2 Een nieuwe site definiëren.......................................................................................46 5.3 Website publiceren. ................................................................................................49 5.4 Bronnen. ..................................................................................................................53

Inhoud - 3

6 Site management. ...............................................................................................55


6.1 Een nieuwe site definiëren en publiceren. ...............................................................55 6.2 Documenten ordenen. ............................................................................................57 6.3 Documenten herbenoemen. ...................................................................................58 6.4 Documenten verplaatsen.........................................................................................60 6.5 Foutieve links herstellen. .........................................................................................60 6.6 Overbodige documenten wissen. ............................................................................61 6.7 De website synchroniseren......................................................................................62 6.7.1 Alle bestanden wissen en volledig opnieuw publiceren. ...............................62 6.7.2 Gewijzigde bestanden dadelijk uploaden......................................................62 6.7.3 Bestanden synchroniseren............................................................................63 6.8 Cloaking...................................................................................................................64

7 HTML als basis. ...................................................................................................67

7.1 Elementen of tags....................................................................................................69 7.2 Attributen..................................................................................................................70 7.3 HTML in Dreamweaver. ...........................................................................................72 7.3.1 Code en Design View....................................................................................72 7.3.2 Code Hints in Code View. .............................................................................75 7.3.3 Het Tag Inspector palet. ................................................................................76 7.3.4 De Tag Selector.............................................................................................77 7.3.5 De Quick Tag editor (Properties palet). .........................................................78 7.3.6 De Quick Tag editor (Design View). ..............................................................78 7.3.7 Het Reference palet. .....................................................................................79 7.3.8 Coding Toolbar. .............................................................................................80 7.4 De geschiednis van HTML.......................................................................................81 7.4.1 HTML 2.0. .....................................................................................................81 7.4.2 HTML 3.2. .....................................................................................................81 7.4.3 HTML 4.01. ...................................................................................................81 7.4.4 XHTML 1.0. ...................................................................................................82 7.4.5 HTML5. .........................................................................................................84 7.5 Default HTML5 pagina in Dreamweaver..................................................................85 7.6 HTML opschonen. ...................................................................................................85 7.7 Het Snippets palet. ..................................................................................................87 7.8 HTML validation. ......................................................................................................89 7.9 Firefox en Chrome add-ons. ....................................................................................92 7.10 Bronnen. ................................................................................................................92

D

8 Tekst. ....................................................................................................................93

8.1 Eigenschappen van tekst.........................................................................................93 8.2 Het Properties palet. ................................................................................................95 8.2.1 Eigenschappen in HTML view.......................................................................96 8.2.2 Eigenschappen in CSS view. ......................................................................101 8.3 Hyperlinks. .............................................................................................................107 8.3.1 Absolute links. .............................................................................................107 8.3.2 Document vs. siterelatieve links..................................................................109 8.3.3 Documentrelatieve links. .............................................................................111 8.3.4 Siterelatieve links. .......................................................................................112 8.3.5 Het title-attribuut ..........................................................................................113 8.4 Target. ....................................................................................................................113 8.5 Ankers. ...................................................................................................................114 8.6 Achtergrond- , teksten linkeigenschappen...........................................................116 8.6.1 Rubriek Appearance (CSS). ........................................................................116 8.6.2 Rubriek Links (CSS)....................................................................................116 8.6.3 Rubriek Headings (CSS). ............................................................................117 8.6.4 Rubriek Title/Encoding. ...............................................................................117 8.6.5 Rubriek Tracing Image. ...............................................................................118 8.7 Tekst uit andere programma's importeren..............................................................118 8.8 Microsoft Word webpagina's. .................................................................................119 8.9 Opdracht. ...............................................................................................................120

4 - Dreamweaver CS6

8.10 Bronnen. ..............................................................................................................121

9 Vormgeven met Cascading Style Sheets (CSS). ............................................123

D


9.1 Historiek.................................................................................................................124 9.2 Terminologie. .........................................................................................................126 9.3 De voordelen van een style sheet. ........................................................................128 9.4 Structuur van een eenvoudige stijl.........................................................................128 9.5 Interne of externe stijlen. .......................................................................................129 9.5.1 Inline styles. ................................................................................................129 9.5.2 Embedded of internal style sheets. .............................................................129 9.5.3 Linked of external style sheets....................................................................130 9.6 Cascading?............................................................................................................131 9.6.1 Wat is cascading? .......................................................................................131 9.6.2 !important. ...................................................................................................132 9.7 Het CSS Styles palet. ............................................................................................133 9.7.1 Nieuwe stijl aanmaken. ...............................................................................133 9.7.2 Stijleigenschappen wijzigen vanuit het CSS Styles palet............................135 9.7.3 Stijleigenschappen tijdelijk uit- en inschakelen. ..........................................137 9.8 Class en ID selector...............................................................................................137 9.9 Contextual selector. ...............................................................................................141 9.10 Pseudo-class selector..........................................................................................143 9.11 Related files en Code navigator. ..........................................................................146 9.12 Live View..............................................................................................................148 9.13 Teksteigenschappen. ...........................................................................................148 9.13.1 Font-family.................................................................................................148 9.13.2 Color..........................................................................................................148 9.13.3 Font-size. ..................................................................................................149 9.13.4 Font-weight. ..............................................................................................152 9.13.5 Line-height. ...............................................................................................153 9.13.6 Overige eigenschappen. ...........................................................................154 9.14 Het box model......................................................................................................155 9.14.1 Padding. ....................................................................................................155 9.14.2 Border........................................................................................................156 9.14.3 Margin. ......................................................................................................157 9.14.4 Absolute en relatieve eenheden................................................................158 9.14.5 Breedte en hoogte van de box. .................................................................158 9.14.6 Inline elementen........................................................................................159 9.14.7 Shorthand CSS. ........................................................................................160 9.15 Boxeigenschappen controleren in Live View. ......................................................162 9.16 Conditional comments in Internet Explorer. .........................................................162 9.17 Enkele design eigenschappen (CSS2 en CSS3).................................................165 9.17.1 Browserafhankelijke prexif. .......................................................................165 9.17.2 Prefix-free JavaScript................................................................................166 9.17.3 Afgeronde hoeken (border-radius). ...........................................................166 9.17.4 Slagschaduw op boxen (box-shadow). .....................................................167 9.17.5 Slagschaduw op teksten (text-shadow). ...................................................169 9.17.6 Web fonts (@font-face). ............................................................................170 9.18 Website vervolledigen..........................................................................................173 9.18.1 Basisstijlen definiëren. ..............................................................................173 9.18.2 Lay-out verfijnen........................................................................................174 9.18.3 Navigatiebalk aanpassen. .........................................................................176 9.18.4 Voetnoot aanpassen. ................................................................................177 9.18.5 Website vervolledigen. ..............................................................................178 9.19 Bronnen. ..............................................................................................................179

Inhoud - 5

10 Afbeeldingen. ..................................................................................................181


10.1 Beeldformaten. ....................................................................................................182 10.1.1 GIF (.gif): ..................................................................................................182 10.1.2 JPEG (.jpg): ..............................................................................................182 10.1.3 PNG (.png): ..............................................................................................182 10.2 Een afbeelding aan de pagina toevoegen. ..........................................................183 10.3 Eigenschappen van een afbeelding.....................................................................185 10.3.1 HTML-eigenschappen...............................................................................185 10.3.2 CSS-eigenschappen. ................................................................................188 10.4 Fluid images. .......................................................................................................189 10.5 Afbeelding bewerken met Dreamweaver. ............................................................191 10.6 Afbeelding bewerken met Fireworks....................................................................193 10.7 Image Placeholders. ............................................................................................195 10.8 Achtergrondafbeeldingen.....................................................................................196 10.9 CSS-Sprites. ........................................................................................................199 10.10 Favicon en Apple touch icons. ...........................................................................201 10.11 Bronnen. ............................................................................................................204

11 Semantische HTML5-tags. .............................................................................205

11.1 Semantische elementen in HTML5......................................................................205 11.1.1 Section-tag. ...............................................................................................206 11.1.2 Article-tag. .................................................................................................206 11.1.3 Section-tag vs. article-tag vs. div-tag. .......................................................206 11.1.4 Header-tag. ...............................................................................................206 11.1.5 Footer-tag..................................................................................................206 11.1.6 Nav-tag......................................................................................................206 11.1.7 Aside-tag. ..................................................................................................206 11.2 Nut van semantische elementen..........................................................................207 11.3 Semantische tags in Internet Explorer. ................................................................207 11.4 Div-tags omzetten naar semantische tags...........................................................208

12 Tabellen. ...........................................................................................................211

12.1 Tabel toevoegen...................................................................................................211 12.2 Tabel- en celeigenschappen. ...............................................................................213 12.2.1 Tabeleigenschappen. ................................................................................214 12.2.2 Celeigenschappen. ...................................................................................215 12.3 Gegevens importeren. .........................................................................................216 12.4 Tabellen importeren vanuit MS Excel, Word of Access. ......................................217 12.5 Tabel vormgeven met style sheets. .....................................................................218 12.5.1 Table-tag definiëren...................................................................................218 12.5.2 Td-tag en th-tag definiëren........................................................................218 12.5.3 Een class aanmaken.................................................................................220 12.6 Optionele tags......................................................................................................222 12.7 Bronnen. ..............................................................................................................223

D

13 Elementen positioneren met CSS. ................................................................225

13.1 Tweekolommen lay-out met absolute en relatieve positionering. ........................226 13.1.1 Relatieve positionering..............................................................................227 13.1.2 Stapelvolgorde van de elementen aanpassen. .........................................228 13.1.3 Absolute positionering. ..............................................................................230 13.2 Driekolommen lay-out met absolute positionering...............................................233 13.3 Driekolommen lay-out met zwevende elementen................................................235 13.4 Gefixeerde positionering......................................................................................239 13.5 Pagina-inhoud horizontaal centreren...................................................................241 13.6 Pagina-inhoud horizontaal en verticaal positioneren. ..........................................241 13.7 Webpagina vormgeven........................................................................................242 13.8 De pagina printklaar maken.................................................................................244 13.9 Welke positionering gebruiken?...........................................................................248 13.10 Lay-out sjablonen. .............................................................................................248 13.11 Bronnen. ............................................................................................................249

6 - Dreamweaver CS6

14 Templates.........................................................................................................251


14.1 Een template ontwerpen......................................................................................252 14.2 Editable Regions toevoegen................................................................................253 14.3 Bestaande pagina's koppelen aan een template.................................................254 14.4 Een template aanpassen. ....................................................................................256 14.5 Nieuwe pagina's koppelen aan een template. .....................................................257 14.6 Editable Region wissen. ......................................................................................258 14.7 Pagina's van een template losmaken. .................................................................259 14.8 Paginatitels aanpassen........................................................................................259

15 Rollovermenu met CSS. .................................................................................261

15.1 Verticaal menu met tekstlinks. .............................................................................262 15.2 Verticaal menu met een opsommingslijst. ...........................................................265 15.3 Enkele varianten. .................................................................................................267 15.3.1 Navigatie van links naar rechts verplaatsen..............................................267 15.3.2 Afstand tussen de knoppen vergroten. .....................................................268 15.4 Horizontaal menu met een opsommingslijst. .......................................................270 15.5 Multi-level menu's. ...............................................................................................272 15.6 Bronnen. ..............................................................................................................275

16 Formulieren. ....................................................................................................277

16.1 HTML 4 formulierobjecten....................................................................................277 16.1.1 Form-tag ...................................................................................................277 16.1.2 Fieldset......................................................................................................279 16.1.3 Labels........................................................................................................279 16.1.4 Text Field ..................................................................................................280 16.1.5 Textarea . ..................................................................................................281 16.1.6 Hidden Field . ............................................................................................282 16.1.7 Checkbox . ................................................................................................282 16.1.8 Radio Group .............................................................................................282 16.1.9 Radio Button . ...........................................................................................283 16.1.10 List/Menu ................................................................................................283 16.1.11 Button. .....................................................................................................284 16.1.12 Image Field . ...........................................................................................284 16.1.13 File Field .................................................................................................285 16.2 Formulieren vormgeven vanuit CSS....................................................................285 16.3 Nieuwe HTML5 input-types. ................................................................................291 16.4 HTML5 tags in oudere browsers..........................................................................292 16.5 Nieuwe HTML5 input-attributen. ..........................................................................294 16.6 De pagina optimaliseren voor mobiele toestellen (Media Queries). ....................297 16.7 Een contactformulier verzenden. .........................................................................300 16.7.1 Het formulier vervolledigen. ......................................................................301 16.7.2 Verzenden via PHP of ASP. ......................................................................304 16.8 Bronnen. ..............................................................................................................306

D

17 Search Engine Optimalisatie (SEO). .............................................................307

17.1 Hoe werken zoekmachines?................................................................................307 17.2 Meta-tags toevoegen. ..........................................................................................309 17.3 Een website aanmelden bij Google. ....................................................................310 17.4 Pagina's afschermen voor zoekrobots. ................................................................311 17.5 Bepaal zelf de belangrijkheid van uw pagina’s. ...................................................312 17.6 Enkele praktische richtlijnen die de ranking positief beïnvloeden........................313 17.7 Wat kan de ranking negatief beinvloeden?..........................................................314 17.8 Uw website verder optimaliseren met Google Analytics. .....................................314 17.9 Bronnen. ..............................................................................................................317

Inhoud - 7

18 Inleiding tot jQuery..........................................................................................319


18.1 Events en Actions. ...............................................................................................321 18.2 JavaScript syntax regels......................................................................................321 18.3 JavaScript debugger. ...........................................................................................322 18.4 jQuery framework downloaden. ...........................................................................322 18.5 jQuery documentatie (API). .................................................................................323 18.6 jQuery framework integreren. ..............................................................................324 18.7 jQuery introductie.................................................................................................325 18.7.1 jQuery selectors. .......................................................................................325 18.7.2 jQuery events. ...........................................................................................327 18.7.3 jQuery basiseffecten. ................................................................................333 18.8 Enkele uitgewerkte voorbeelden..........................................................................335 18.9 Besluit. .................................................................................................................340 18.10 Opdracht. ...........................................................................................................340 18.11 Bronnen. ............................................................................................................341

19 jQuery plug-ins................................................................................................343

19.1 jQuery linken met CDN. .......................................................................................343 19.2 Fancybox plug-in. ................................................................................................344 19.3 Cycle plug-in. .......................................................................................................346 19.4 Lazy load plug-in..................................................................................................348 19.5 jQuery UI plug-in..................................................................................................350 19.5.1 jQuery UI Accordion. .................................................................................351 19.5.2 jQuery UI Tabs. .........................................................................................352 19.5.3 jQuery UI Dialog........................................................................................353 19.6 Bronnen. ..............................................................................................................355

D

Index......................................................................................................................357

8 - Dreamweaver CS6

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.

D

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\  ...:Les DreamweaverCS6:hst10:html:

10: Afbeeldingen - 181

10.1 Beeldformaten. De vier belangrijkste beeldformaten die op het internet gebruikt worden, zijn: 10.1.1 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. 10.1.2 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. 10.1.3 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.

D

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.

182 - Dreamweaver CS6

! 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.


10.2 Een afbeelding aan de pagina toevoegen.

U kan een afbeelding op verschillende manieren op een pagina plaatsen.

D

• 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.



» 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.

D

Om het tussenscherm niet meer te tonen, kan u enkele voorkeurseigenschappen aanpassen (rubriek Accessibility).

» Laat de eigenschappen ongewijzigd en sluit het venster.



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.

10.3 Eigenschappen van een afbeelding. 10.3.1 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.

D

» 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.


re ht a tp m :// we S w a am w ve w p .m r C le ed S6 ia ta In fe it l.c iat om ie / • 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).

D

! 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.


• 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 (http:// www.freedomscientific.com/) en Window-Eyes (http://www.gwmicro.com/). 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 http://nl.wikipedia.org/wiki/The_Birds_(film) 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.

D

• Map (Image Map): Een image map bestaat uit één afbeelding met daarop meerdere hotspots. Elke hotspot kan één hyperlink bevatten.


10.3.2 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 ptag waarin de afbeelding staat. De tekst die normaal naast de afbeelding staat, schuift naar boven en plaatst zich rond de afbeelding.

D

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.


re ht a tp m :// we S w a am w ve w p .m r C le ed S6 ia ta In fe it l.c iat om ie / 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.

10.4 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.

D

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.


re ht a tp m :// we S w a am w ve w p .m r C le ed S6 ia ta In fe it l.c iat om ie / Laat ons eerst in grote lijnen de structuur en de lay-out van de pagina bestuderen.

...

...

#outline { margin: 21px 10%; border: #333; box-shadow: 0 0 10px 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; }

D

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.


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: 97890356.1269.3) 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.

D

•

Resample . Verschaalt een afbeelding en herberekent het aantal beeldpunten. De herberekende afbeelding is nu schaal 1/1.


» 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.

D

» 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.


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.

D

» Blader naar ...\hst10\Fireworks\fotoFrame.fw.png.


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.

D

In het Properties palet van Dreamweaver verschijnt onderaan het pad naar het originele Fireworksbestand.


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 http://lorempixel.com. De beeldgrootte wordt bepaald door de breedte en hoogte die u achteraan de URL toevoegt. De URL http://lorempixel.com/300/200/ geeft ons een afbeelding van 300px breed en 200px hoog.

D

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: http://lorempixel.com/300/200/?1 voor de eerste afbeelding, http://lorempixel.com/300/200/?2 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.


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

Recommend Documents