Hoofdstuk 18 Tien fantastische websites ontworpen in ... · Poweryoga.com Het rustgevende...

Hoofdstuk 18

Tien fantastische websites ontworpen in

DreamweaverIn dit hoofdstuk:

Een kunstenares stelt haar schilderijen tentoon

Een krachtige yogasite die gebruikmaakt van PHP

Een uitgever zet zijn column online

De website van een auteur vertelt haar verhaal

Deze regisseur gebruikt multimedia

Het wilde webwesten

Een smaakvolle blog ontworpen in Dreamweaver

Je diensten verkopen

Een digitale familie

Ik ontwerp natuurlijk mijn eigen sites in Dreamweaver

Dreamweaver is duidelijk dé keuze van professionele webdesigners. Het is ook het programma achter veel van de betere sites op het

web. De sites in dit hoofdstuk geven een overzicht van wat je met Dream-weaver kunt doen; en alle sites zijn fantastische voorbeelden van wat er vandaag de dag mogelijk is op het web. Veel sites maken gebruik van de nieuwste webtechnologieën en integreren Flash om levendige animaties te maken. Ze gebruiken ook dynamische technologieën, zoals PHP, om krachtige interactiviteit toe te voegen.

Lees de beschrijvingen en ontdek welke hulpmiddelen de designers hebben gebruikt en hoe ze deze websites met Dreamweaver hebben gemaakt. Ga dan online en surf naar de genoemde sites, zodat je het volledige effect van hun design, navigatie en andere functies kunt onder-gaan.

�

�

�

�

�

�

�

�

�

�

DreamweaverCS3vD-boek.indb 413DreamweaverCS3vD-boek.indb 413 25-09-2007 10:41:0525-09-2007 10:41:05

414 DEEL V: Het deel van de tientallen ________________________________

De etalage van een kunstenaresRobinEschner.com

Robin Eschner wendde zich eerst tot Digital Cottage om een website te maken waarop ze haar prachtige schilderijen en kaarten kon tentoonstel-len en verkopen. De site is later opnieuw ontworpen door Mariana Davi Cheng, die het overall sitedesign heeft gemaakt en het rollovereffect heeft toegevoegd dat je in fi guur 18.1 ziet.

Figuur 18.1: Een roll-over effect geactiveerd door de muisaanwij-zer vestigt de aandacht op de koppe-lingen op de voorpagina van de web-site van deze kunstenaar

Een eenvoudige afbeeldingsverwisseling creëert de rolloverfunctie, vestigt de aandacht op koppelingen en voegt een kleurrijk, interactief element toe aan de pagina. Voor de andere pagina’s heeft Davi een design gemaakt dat verschillende afbeeldingen tegelijk weergeeft, waarbij gebruik wordt gemaakt van een complexere afbeeldingsverwisseling die een grotere afbeelding van elk schilderij weergeeft wanneer een bezoeker met de muisaanwijzer over een miniatuurafbeelding rolt. (Afbeeldingroll-overs en andere gedragingen worden in hoofdstuk 10 behandeld.)

Een krachtige yogasitePoweryoga.com

Het rustgevende yogasitedesign in fi guur 18.2 is gemaakt door Kathy McCarthy en het programmeerwerk dat deze site zo krachtig maakt, is gedaan door Anissa Thompson, die Dreamweaver heeft gebruikt om een dynamische site te bouwen die PHP en MySQL gebruikt. Dankzij deze geavanceerde webtechnologieën is het mogelijk om websites te koppelen aan databases en om administratieve hulpmiddelen te maken waardoor


415__ Hoofdstuk 18: Tien fantastische websites ontworpen in Dreamweaver

cliënten eenvoudig hun eigen websites kunnen updaten. Anissa heeft bijvoorbeeld een administratief systeem ontwikkeld dat cliënt Chris Fang kan gebruiken om beschrijvingen en data van workshops toe te voegen aan de site zonder eerst Dreamweaver of HTML te leren. Chris gebruikt gewoon een webbrowser, meldt zich aan bij een speciale pagina op de site (die niet openbaar is) en voert updates door door een paar formu-liervelden in te vullen en op de knop Verzenden te klikken. Het resultaat is een prachtige, in hoge mate interactieve site die eenvoudig bij te wer-ken is. In de hoofdstukken 13, 14 en 15 vind je een inleiding tot de geavan-ceerdste functies van Dreamweaver.

Figuur 18.2: Deze dyna-mische site is gemaakt met geavan-ceerdste functies van Dreamwea-ver

Wijze woorden op het websparselysageandtimely.com/blog

Toen David Mitchell, winnaar van de Pulitzer, zijn lokale krant The Point Reyes Light verkocht, bracht hij zijn column en zijn jaren aan journalis-tieke ervaring naar het web en begon een blog die dezelfde naam heeft als de naam die hij gebruikt voor zijn krantencolumn, namelijk Sparsely Sage and Timely (zie fi guur 18.3).

Mijn eerste baan als journalist was bij The Point Reyes Light. David en ik zijn nog steeds vrienden. Ik vond het dus een eer om hem te helpen bij het maken van zijn blog toen hij eindelijk met pensioen ging. Toen David berichten wilde maken die verder gaan dan de ingebouwde functies van WordPress, het programma dat hij voor de blog gebruikt, heb ik Dream-weaver gebruikt voor de opmaak. Voor mensen als David, die een site regelmatig willen updaten maar niet willen leren hoe een programma als Dreamweaver werkt, zijn blogs een uitkomst. Dat betekent nog niet dat je Dreamweaver niet kunt gebruiken om af en toe het design wat meer op te maken.



Figuur 18.3: Uitgever David Mit-chell werkt zijn blog elke woensdag-avond bij

The Memory Keeper’s Daughtermemorykeepersdaughter.com

Figuur 18.4: De meeste schrijvers hebben nu een website ter aanvul-ling op hun boeken

De debuutroman van Kim Edwards, The Memory Keeper’s Daughter, was zo’n succes dat zij en haar uitgever besloten om een website te bouwen voor het boek. Het verhaal gaat over een arts die besluit zijn pasgebo-ren baby met het syndroom van Down in een tehuis onder te brengen en haar bestaan te verzwijgen voor zijn vrouw en het tweelingbroertje van de baby. De spookachtige cover van het boek vormde voor de web-



designers van Hop Studios een goed uitgangspunt toen ze de bijbeho-rende website gingen maken.

Ze hebben de site gebouwd in Dreamweaver (zie fi guur 18.4). Ze heb-ben veelvuldig gebruikgemaakt van de uitstekende CSS-hulpmiddelen van Dreamweaver en gebruikten een bibliotheekitem om de code op te nemen voor een hulpprogrammaatje dat op elke pagina het aantal bezoekers bijhoudt. De site wordt afgerond door een met Dreamweaver gemaakt contactformulier dat sitebezoekers kunnen gebruiken om e-mail te sturen naar de publiciteitsagent van Kim. De sjabloon- en biblio-theekfuncties van Dreamweaver worden in hoofdstuk 9 behandeld.

Licht, camera, multimediaStudioweasel.com

Regisseur David LaFontaine heeft Flash-video gebruikt om clips van zijn nieuwste fi lmproject te tonen en de multimediafuncties van Dreamwea-ver om de videobestanden te integreren in de pagina’s van de site (zie fi guur 18.5). Flash-video wordt steeds populairder.

Omdat Flash en Dreamweaver nu allebei van Adobe zijn, kun je eenvou-dig Flash-bestanden in je webpagina’s invoegen en de resultaten testen in het ontwerpvenster. In hoofdstuk 11 lees je meer over het werken met multimedia en het invoegen van Flash-bestanden.

Figuur 18.5: Met Dream-weaver kun je eenvoudig video toe-voegen aan een website



Het wilde webwestensureshotentertainment.com

Rodeo- en wildwestperformer Sally Bishop gebruikt haar website als een visitekaartje wanneer ze auditie doet voor fi lm en televisie. Ze gebruikt de site ook om met haar vaardigheden als paardrijdster te pronken (zie fi guur 18.6). Deze website met wildwestthema is volledig in Dreamwea-ver gebouwd en maakt gebruik van een van de beste ingebouwde hulp-middelen van Dreamweaver, namelijk bibliotheekitems. De navigatie en de paginavoetteksten zijn als bibliotheekitems gebouwd, zodat Sally de site snel kan bijwerken wanneer ze iets nieuws wil toevoegen.

Het meest bijzondere op de site is de rand om de foto’s. Met de inge-bouwde CSS-hulpmiddelen van Dreamweaver hebben de webdesigners van Hop Studios een achtergrondafbeelding en een marge voor elke foto ingesteld. Omdat de achtergrondafbeelding groter is dan de foto, is de achtergrondafbeelding zichtbaar om de foto, wat het effect van de hou-ten rand creëert. De CSS-functies van Dreamweaver worden besproken in de hoofdstukken 5 en 6.

Figuur 18.6: Een achter-grondafbeel-ding achter elke foto’s op deze site geeft het gevoel van ouderwets fotoframe



Een heerlijke blog bewerkt in Dreamweaver

candyblog.net

Cybele May’s Candy Blog (zie fi guur 18.7) is elke dag van de week een smakelijke verrassing. Haar beschrijvingen van snoepjes en zuurtjes zijn met humor geschreven, maar niet zodanig dat ze niet serieus worden genomen. Cybele vertelt ook de harde waarheid over kosten, grootte en calorieën. En dat alles in combinatie met haar fantastische close-upfoto-grafi e.

De site is ontworpen en geproduceerd door Hop Studios uit Vancouver. De designers hebben het project gebruikt als een excuus om heel veel snoep te eten. Uiteindelijk wordt de site gedraaid met behulp van blog-software. Creative director Susannah Gardner stond voor een specifi eke uitdaging toen Hop Studios Candy Blog maakte: op hetzelfde moment waren ze ook bezig met het opnieuw ontwerpen van twee andere blogs van Cybele (Fast Fiction en Playwright) en ze moesten de kosten drukken. Al vroeg werd de beslissing genomen om dezelfde lay-out en hetzelfde design te gebruiken voor alle drie de blogs. Dit betekende bij-voorbeeld dat het logo voor elke blog wel anders zou zijn, maar dat het dezelfde hoeveelheid ruimte in beslag zou nemen en op dezelfde locatie.

Figuur 18.7: Het design voor deze snoepblog is in Dream-weaver gemaakt

De CSS-menu’s van Dreamweaver waren essentieel voor de werkzaam-heden op het codeniveau. Hop Studios stelde één sjabloon in voor de blog en maakte toen in feite drie smaken stijlbladstijlen. Deze stijlblad-stijlen transformeren dezelfde pagina in drie verschillende blogs. De HTML-sjablonen en CSS werden vanuit Dreamweaver overgebracht naar de blogsoftware en het resultaat is de zoete sensatie Candy Blog!



Een portfoliositechristophernoxon.com

Auteur en freelancejournalist Christopher Noxon had al een tijd een portfoliowebsite voor zijn werk, maar in 2006 besloot hij er serieus mee aan de slag te gaan. Wat hij echt wilde, besloot hij, was een website met een design en organisatie die paste bij de kwaliteit van zijn schrijfsels. En waarom zou hij de site ook niet gebruiken als een plaats om zijn kunst, van foto’s tot schetsen, tentoon te stellen? Het re-design van de website (zie fi guur 18.8) werd uitgevoerd door Hop Studios, die ook de website voor Christophers boek Rejuvenile: Kickball, Cartoons, Cupcakes and the Reinvention of the American Grown Up heeft gemaakt (www.rejuvenile.com).

Figuur 18.8: Dreamwea-ver is een ideaal hulp-middel voor het maken van online portfolio’s

Voor Christopher was het belangrijk dat de nieuwe site ook een afspie-geling was van de verscheidenheid en het gevoel voor humor dat zijn schrijfstijl kenmerkt. Hop Studios werkte nauw samen met Christopher om een andere behandeling te creëren voor elk onderdeel van de site.

Dreamweaver speelde een grote rol in dit designproces. Hop Studios heeft de sjablonen ontworpen en gebouwd voor elk onderdeel in Dream-weaver, die Christopher heeft aangepast voordat de code werd gemi-greerd naar een contentmanagementsysteem.



Mijn groeiende digitale familieDigitalFamily.com

Ken je iemand die op zoek is naar een eenvoudige oplossing voor het maken van een familiewebsite, fotoalbum of blog? Op DigitalFamily.com (zie fi guur 18.9) vind je gratis handleidingen en lessen. Je vindt er ook meer handleidingen over Dreamweaver en andere professionele hulp-middelen voor webdesign. Ik heb deze site ontworpen om mijn vrienden en familie te helpen bij het maken van websites voor bruiloften, nieuwe baby’s, reünies enzovoort. In de loop van de jaren is de site gegroeid en bevat nu ook tips en handleidingen voor professionelere designers die programma’s als Dreamweaver gebruiken.

Figuur 18.9: De web-site Digital Family is ontworpen met Dream-weaver-sja-blonen

DigitalFamily.com is een voorbeeld van hoe auteurs, ikzelf inclusief, web-sites maken ter aanvulling van hun boek en voor de actuele informatie die tussen twee uitgaven in valt. Het zal geen verrassing zijn dat ik deze nieuwe site met Dreamweaver heb gebouwd. Ik heb daarbij fl ink gebruik-gemaakt van tabellen en sjablonen om de pagina’s snel en eenvoudig toe te voegen en tegelijk een consistente vormgeving te behouden. In hoofd-stuk 9 leer je hoe je sjablonen ontwerpt en in hoofdstuk 4 lees je hoe je andere sitebeheerfuncties gebruikt.



OndergetekendeJCWarner.com

Ik gebruik mijn eigen website op JCWarner.com als een persoonlijk port-folio en online profi el (zie fi guur 18.10). Ik raad je aan om een dergelijke site te maken, ook al staat je bio al ergens op een andere website.

Figuur 18.10: Mijn eigen website is, natuurlijk, met Dream-weaver gebouwd

Mijn site was eerst gebouwd met behulp van HTML-tabellen, een lay-outoptie die heel lang populair is geweest op het web, maar als je nu de code achter mijn pagina’s bestudeert, zie je dat de site volledig met CSS is gemaakt, met behulp van div-tags, niet-geordende lijsten en andere HTML om de content te organiseren. Het resultaat is een site die goed toegankelijk is en eenvoudig te beheren en bij te werken. (CSS wordt besproken in de hoofdstukken 5 en 6.) En ik gebruik Dreamweaver om alle toevoegingen, updates en wijzigingen in mijn site door te voeren.


Hoofdstuk 18 Tien fantastische websites ontworpen in ... · Poweryoga.com Het rustgevende...

Documents

Transcript of Hoofdstuk 18 Tien fantastische websites ontworpen in ... · Poweryoga.com Het rustgevende...