Tien fantastische websites ontworpen in Dreamweaver

Hoofdstuk 18

Tien fantastische websites ontworpen in Dreamweaver In 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

D

reamweaver 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 Dreamweaver 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 ondergaan.

DreamweaverCS3vD-boek.indb 413

25-09-2007 10:41:05

414

DEEL V: Het deel van de tientallen ________________________________

De etalage van een kunstenares RobinEschner.com

Robin Eschner wendde zich eerst tot Digital Cottage om een website te maken waarop ze haar prachtige schilderijen en kaarten kon tentoonstellen 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 figuur 18.1 ziet.

Figuur 18.1: Een rollovereffect geactiveerd door de muisaanwijzer vestigt de aandacht op de koppelingen op de voorpagina van de website 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. (Afbeeldingrollovers en andere gedragingen worden in hoofdstuk 10 behandeld.)

Een krachtige yogasite Poweryoga.com

Het rustgevende yogasitedesign in figuur 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


25-09-2007 10:41:05

__ Hoofdstuk 18: Tien fantastische websites ontworpen in Dreamweaver

415

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 formuliervelden in te vullen en op de knop Verzenden te klikken. Het resultaat is een prachtige, in hoge mate interactieve site die eenvoudig bij te werken is. In de hoofdstukken 13, 14 en 15 vind je een inleiding tot de geavanceerdste functies van Dreamweaver.

Figuur 18.2: Deze dynamische site is gemaakt met geavanceerdste functies van Dreamweaver

Wijze woorden op het web sparselysageandtimely.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 journalistieke 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 figuur 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 Dreamweaver 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.


25-09-2007 10:41:06

416


Figuur 18.3: Uitgever David Mitchell werkt zijn blog elke woensdagavond bij

The Memory Keeper’s Daughter memorykeepersdaughter.com

Figuur 18.4: De meeste schrijvers hebben nu een website ter aanvulling 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 pasgeboren 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-


25-09-2007 10:41:06


417

designers van Hop Studios een goed uitgangspunt toen ze de bijbehorende website gingen maken. Ze hebben de site gebouwd in Dreamweaver (zie figuur 18.4). Ze hebben 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 bibliotheekfuncties van Dreamweaver worden in hoofdstuk 9 behandeld.

Licht, camera, multimedia Studioweasel.com

Regisseur David LaFontaine heeft Flash-video gebruikt om clips van zijn nieuwste filmproject te tonen en de multimediafuncties van Dreamweaver om de videobestanden te integreren in de pagina’s van de site (zie figuur 18.5). Flash-video wordt steeds populairder. Omdat Flash en Dreamweaver nu allebei van Adobe zijn, kun je eenvoudig 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 Dreamweaver kun je eenvoudig video toevoegen aan een website


25-09-2007 10:41:07

418


Het wilde webwesten sureshotentertainment.com

Rodeo- en wildwestperformer Sally Bishop gebruikt haar website als een visitekaartje wanneer ze auditie doet voor film en televisie. Ze gebruikt de site ook om met haar vaardigheden als paardrijdster te pronken (zie figuur 18.6). Deze website met wildwestthema is volledig in Dreamweaver gebouwd en maakt gebruik van een van de beste ingebouwde hulpmiddelen 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 ingebouwde 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 houten rand creëert. De CSS-functies van Dreamweaver worden besproken in de hoofdstukken 5 en 6.

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


25-09-2007 10:41:07


419

Een heerlijke blog bewerkt in Dreamweaver candyblog.net

Cybele May’s Candy Blog (zie figuur 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-upfotografie. 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 blogsoftware. Creative director Susannah Gardner stond voor een specifieke 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 bijvoorbeeld 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 Dreamweaver gemaakt

De CSS-menu’s van Dreamweaver waren essentieel voor de werkzaamheden op het codeniveau. Hop Studios stelde één sjabloon in voor de blog en maakte toen in feite drie smaken stijlbladstijlen. Deze stijlbladstijlen 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!


25-09-2007 10:41:08

420


Een portfoliosite christophernoxon.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 figuur 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: Dreamweaver is een ideaal hulpmiddel voor het maken van online portfolio’s

Voor Christopher was het belangrijk dat de nieuwe site ook een afspiegeling 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 Dreamweaver, die Christopher heeft aangepast voordat de code werd gemigreerd naar een contentmanagementsysteem.


25-09-2007 10:41:08


421

Mijn groeiende digitale familie DigitalFamily.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 figuur 18.9) vind je gratis handleidingen en lessen. Je vindt er ook meer handleidingen over Dreamweaver en andere professionele hulpmiddelen 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 website Digital Family is ontworpen met Dreamweaver-sjablonen

DigitalFamily.com is een voorbeeld van hoe auteurs, ikzelf inclusief, websites 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 flink gebruikgemaakt van tabellen en sjablonen om de pagina’s snel en eenvoudig toe te voegen en tegelijk een consistente vormgeving te behouden. In hoofdstuk 9 leer je hoe je sjablonen ontwerpt en in hoofdstuk 4 lees je hoe je andere sitebeheerfuncties gebruikt.


25-09-2007 10:41:09

422


Ondergetekende JCWarner.com

Ik gebruik mijn eigen website op JCWarner.com als een persoonlijk portfolio en online profiel (zie figuur 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 Dreamweaver gebouwd

Mijn site was eerst gebouwd met behulp van HTML-tabellen, een layoutoptie 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.


25-09-2007 10:41:09

Tien fantastische websites ontworpen in Dreamweaver

Recommend Documents