14InteractIeve

formulIeren met gedragIngen en

Spryde belangrijkste punten van hoofdstuk 14

KennismakenmetGedragingen(Behaviors).

Webeffectenlerenaanmaken.

DeverschillendesoortenGedragingengebruiken.

DB_DRWCS4_H14.indd 2 27-05-2009 16:49:11

14InteractIeve

formulIeren met gedragIngen en

Spry

Wat leert u in dit hoofdstuk?

WateenGedragingis.

Effectentoepassenopeenwebsite.

Gedragingenaanmaken.

Eenuitklapmenumakenvoordenavigatie.

SpecialeeffectenvanGedragingenenSpry,zoalstabbladen,toepassen.

DB_DRWCS4_H14.indd 3 27-05-2009 16:49:12

�

dreamWeaver cS4 de basis

14.1 Webeffecten toevoegen

Zoals we in het vorige hoofdstuk al hebben gezien, heeft een website de nodige inter-actie nodig. De periode van de statische websites ligt ver achter ons. Nu het internet in een fase van volwassenheid terecht is gekomen, verwacht de gebruiker meer van een website. Webeffecten kunnen het gebruik van toepassingen op een website vergemak-kelijken. Dit hoofdstuk zal diverse webeffecten beschrijven.

14.1.1 diverse webeffecten

Een van de sterke punten van Dreamweaver is dat u er gemakkelijk effecten mee kunt toevoegen aan een site. Onder de motorkap van het ontwerp wordt de code gecreëerd met JavaScript. Het met de hand toevoegen van JavaScript kan een lastige klus zijn, gelukkig maakt Dreamweaver dit een stuk gemakkelijker voor u.

Het paneel Gedragingen is hierbij belangrijk. Een effect op een website kan in ver-schillende vormen worden toegepast. In dit boek hebt u al enkele effecten leren ge-

afbeelding 14.1Bij AtMost.nl is preloading gebruikt voor het aantal afbeeldingen.

DB_DRWCS4_H14.indd 4 27-05-2009 16:49:12

�

14 Interactieve formulieren met gedragingen en Spry

bruiken, zoals het valideren van een formulier. De validatie in het vorige hoofdstuk werd gemaakt met een Gedraging. Ook het laten verschijnen en weer verdwijnen van lagen is een Gedraging of Behavior. Praktische voorbeelden van met een Gedraging gemaakte effecten zijn: ingevoerde gegevens valideren (zie hoofdstuk 13); een uitklapmenu maken; navigatie door diverse projecten; een link toevoegen aan een banner; afbeeldingen laten veranderen als eroverheen wordt bewogen.

14.1.2 de code van een effect

De interactieve effecten die Dreamweaver toevoegt, zijn aangemaakt met de internet-techniek JavaScript. Een effect dat Dreamweaver vanzelf toevoegt aan uw pagina is het snel inladen van afbeeldingen. Dit wordt preloading (‘voorladen’) genoemd.

Bij het aanmaken van Javascript-code wordt de code in de header, helemaal bovenin het document, geplaatst. In de codeweergave kunt u de code bekijken. De precieze code van bijvoorbeeld een tijdslijn kunt u bekijken in hoofdstuk 9.

nog meer effecten toevoegen

Deeffectendieuineenwebsitekunttoepassenzijnonbeperkt.Opdewebsitewww.dyna-micdrive.comkuntudiverseeffectenbekijken,downloadenenzogebruiken.Hierbijwordenookdebrowsersvermeldwaarindeeffectengoedwerken.Opdesitekuntulezenwaarudecodepreciesmoetplakken.

14.2 de lijst van effecten bekijken

Het paneel Gedragingen kunt u activeren met Venster > Werkingen of met Shift+F4

Als u op het zwarte plusteken klikt in het paneel Gedragingen ziet u de volgende mo-gelijkheden: met Afbeeldingen wisselen kunt u bij een muisbeweging een afbeelding laten wis-

selen op het scherm; Afbeeldingen vooraf laden is het versnellen van het inladen van afbeeldingen van

een bepaalde pagina; AP-elementen slepen is het voorzien van een sleepeffect bij een laag; u kunt met

de muis de laag verslepen; Browservenster openen is het laten verschijnen van een nieuw venster of pop-up; met Effecten kunt u, vooral bij tekstlinks, de tekst een effect meegeven. Dit legt

DB_DRWCS4_H14.indd 5 27-05-2009 16:49:12

�

dreamWeaver cS4 de basis

een link naar de zogenaamde AJAX-technieken van de nieuwe Spry, zie afbeelding 14.2 voor een overzicht van de effecten van CS4;

Eigenschap wijzigen, om met bepaalde timing bijvoorbeeld de achtergrondkleur te laten wijzigen;

Elementen weergeven/verbergen is het wel of niet laten zien van lagen. Op deze manier kunnen bijvoorbeeld met de hand uitklapmenu’s worden gemaakt, zoals die van OudLagoen.com;

Formulier valideren is het valideren van een invulformulieren indien op de knop Verzend wordt geklikt;

met het effect Ga naar URL kan een pagina worden opgeroepen of kan de gebrui-ker na een bepaalde handeling naar een website worden geleid;

Insteekmodule controleren is het bij het inladen van een pagina controleren of bijvoorbeeld Flash is geïnstalleerd bij de gebruiker, indien de gebruiker geen Flash heeft kan er een andere pagina worden ingeladen;

Javascript aanroepen is het aanroepen van een eigengemaakte script; Navigatiebalkafbeeldingen instellen, om een afbeelding in een navigatiebalkaf-

beelding te veranderen of om de weergave en acties van afbeeldingen op een navi-gatiebalk te wijzigen;

Omwisselen van afbeeldingen herstellen is een omwisseleffect herstellen waarbij meestal de eerstgetoonde afbeelding weer verschijnt, bijvoorbeeld bij knoppen die veranderen bij het met de muis bewegen over de knop;

afbeelding 14.2Een Spry-effect Hooglicht bij het aanklikken van de link.

DB_DRWCS4_H14.indd 6 27-05-2009 16:49:13

�

14 Interactieve formulieren met gedragingen en Spry

Pop-upbericht laten verschijnen toont een meldingsvenster met een bericht; Snelmenu is een uitklapmenu dat in Dreamweaver kan worden gemaakt en be-

werkt; Snelmenu go is een menu om direct naar een link te springen; Tekst instellen is nieuw sinds versie CS3: u kunt zo tekst in bijvoorbeeld een AP-

element/laag veranderen; de Tijdlijn is in CS4 verdwenen; de optie Afgekeurd bevat onder andere het toevoegen van geluid.

Tot slot kunt u met de optie Meer gedrag nog meer effecten van het web downloaden. Deze worden dan vanzelf in Dreamweaver geplaatst. Tevens kunt u de effecten voor bepaalde browserversies laten weergeven. Hoe ouder de browser, hoe minder effect-mogelijkheden u hebt.

afbeelding 14.3Een insteekmodule of plug-in controleren.

afbeelding 14.4Een pop-up-bericht of alert.

DB_DRWCS4_H14.indd 7 27-05-2009 16:49:13

�

dreamWeaver cS4 de basis

oefening 14.1 Eengeluidjetoevoegen

Hetdoelvandezeoefeningishettoevoegenvaneengeluidjeaandewebpagina.

1. OpeneennieuwelegeHTML-paginaensladezeopalsgeluidje.html.

2. Voerinhetschermdevolgendetekstin:u hoort nu een geluidje.

3. Zoekinuwsysteemnaareenbestandsformaatmetdeextensie.wavof.mp3;ditiseengeluids-bestand.

�. Voegdoormiddelvanhetpaneelgedragingenendeoptieafgekeurd>geluid toevoegenditgeluidsbestandtoeaanuwwebpagina.

�. Bekijkeenvoorbeeldvanuwwebpaginaviavoorvertoning(ofmetf12)omhetgeluidjeookdaadwerkelijktehoren.StandaardzaldetimingonloadwordenneergezetinhetpaneelGedra-gingen.Dithoudtindathetgeluidjegaatspelenbijhetopenenvandepagina.HetopenenvandewebpaginawordtonLoadgenoemd.

afbeelding 14.5Meer downloaden.

DB_DRWCS4_H14.indd 8 27-05-2009 16:49:13

�

14 Interactieve formulieren met gedragingen en Spry

14.3 een effect timen

De timing van een effect wordt in Dreamweaver een event of ‘gebeurtenis’ genoemd. Zo kunt u een effect laten uitvoeren wanneer: de pagina wordt ingeladen; de pagina verdwijnt en een nieuwe pagina wordt ingeladen; de gebruiker over een afbeelding beweegt met de muisaanwijzer; de gebruiker een formulier wil verzenden; de gebruiker op een link klikt.

14.3.1 gedragingen timen

Als u een effect toevoegt, zult u dit moeten timen (in tijd aangeven wanneer het moet beginnen). De meeste effecten starten namelijk niet automatisch. De timing van een effect heet in JavaScript event handler of ‘gebeurtenisafhandeling’.

Er zijn standaardtimings, zoals te zien is in de lijst hierna. Een browser als Internet Explorer kent nog meer timingen, die helaas niet allemaal browsercompatibel zijn. We kennen de volgende opties voor Gebeurtenis timen bij Gedragingen: onClick,er wordt op het object geklikt; onDblClick, er wordt tweemaal op het object geklikt; onDrag,het object (meestal een laag) wordt versleept; onFocus, er wordt in een veld geklikt;

afbeelding 14.6Een geluidje toevoegen.

DB_DRWCS4_H14.indd 9 27-05-2009 16:49:14

10

dreamWeaver cS4 de basis

onSelect, de waarde wordt geselecteerd; onMouseOver, de gebruiker beweegt over het object; onMouseOut, de gebruiker beweegt van het object af; onLoad, de pagina wordt ingeladen; onUnLoad, de pagina verdwijnt en een nieuwe pagina wordt ingeladen.

14.4 een Spry toevoegen

Nieuw sinds CS3 is de toevoeging van Spry-effecten. In versie CS4 heeft Spry een vaste plek gekregen en zeer belangrijk geworden bij interactieve effecten. De code is geba-seerd op AJAX-techniek en kan worden gebruikt om bepaalde effecten toe te voegen

afbeelding 14.7Effecten timen.

Spry heeft een vaSte plek gekregen In cS4

AdobeoverSpryenhetframework:‘HetSpry-frameworkiseenJavaScript-bibliotheekmetbehulpwaarvanwebontwerperswebpagina’skunnenbouwendiedebezoekerseenprettigerervaringgeven.MetSprykuntuHTML,CSSeneenminimalehoeveelheidJavaScriptgebrui-kenomXML-gegevensoptenemeninuwHTML-documenten.Ukuntobjectenmaken,zoalsaccordeonsenmenubalken,endiverseeffectentoevoegenaanallerhandepagina-elementen.HetSpry-frameworkiszoontworpendatopmaakeenvoudigenmakkelijkistegebruikendoormensendieeenbasiskennishebbenvanHTML,CSSenJavaScript.HetSpry-frameworkisvoornamelijkbedoeldvoorprofessionelewebontwerpersofvoorgeavanceerdeamateurs.Hetisnietbedoeldalseenvolwaardigwebtoepassingsframeworkvoorwebontwikkelingopondernemingsniveau(hoewelhetwelsamenmetanderepagina’sopondernemingsniveaukanwordengebruikt).GavoormeerinformatieoverhetSpry-frameworknaarwww.adobe.com/go/learn_dw_spryframework_nl.’

DB_DRWCS4_H14.indd 10 27-05-2009 16:49:14

11

14 Interactieve formulieren met gedragingen en Spry

aan uw website. De effecten die in Dreamweaver kunnen worden aangeroepen vallen onder het Spry-framework. Een goed voorbeeld is www.dreamweaverboek.nl. Door middel van AJAX-techniek kunt u de verschillende tabs aanklikken zonder dat het scherm verandert. Deze vloeiende verandering van schermonderdelen is een eigen-schap van AJAX.

We gaan in de oefening het tab-effect van Dreamweavercs3.nl en Dreamweaverboek.nl namaken.

afbeelding 14.8Spry voor meer interactie en betere navigatie.

DB_DRWCS4_H14.indd 11 27-05-2009 16:49:14

12

dreamWeaver cS4 de basis

oefening 14.2 Eentab-menumetSpry

1. KiesInvoegen > Spry > Spry deelvenster met tabs.Zieafbeelding1�.�.

2. Selecteerdeblauwetabmetnaamtabbedpanels.

3. Voegindeeigenschappenmetdezwarte +eenextratabtoe.

�. Klikopdeafzonderlijketabsenvuldetabsmetdecontentuitwww.dreamweaverboek.nl.

�. SladezeSpry-tabsopalssprytabs.html.

�. Bekijkheteffectindebrowsermetfunctietoetsf12(ofviavoorvertoning).

Dreamweaver zorgt voor het generen van code die compatible is met de diverse brow-sers.

oefening 14.3 Eeneigenmenubalkmaken

HetdoelvandezeoefeningishetzelfstandigmakenvaneenSpry-menubalk.

1. Openeennieuwelegepaginaensladezeopalsuitklapmenu.html.

afbeelding 14.9Spry-tabs maken met CS4.

DB_DRWCS4_H14.indd 12 27-05-2009 16:49:15

13

14 Interactieve formulieren met gedragingen en Spry

2. KlikopInvoegen > Spry > Spry-menubalk.

3. Klikopdeblauwetabbovendemenubalk.

�. Pasviaeigenschappen deverschillendeitemsenkoppelingenaan.

�. Bekijkheteffectindebrowsermetfunctietoetsf12(ofviavoorvertoning).

14.5 afbeeldingen laten veranderen

Zoals eerder in dit boek gezegd, een afbeelding is een wezenlijk onderdeel van een website. Een populair effect is het laten veranderen van afbeeldingen wanneer de ge-bruiker over een link beweegt. Zo kunt u met dit webeffect: een portfolio presenteren door over tekstlinks heen te bewegen; details van een product laten zien; foto’s voor of na een proces tonen.

14.5.1 Webeffect voor de verandering van een afbeelding

Opnieuw gebruiken we een Gedraging om de afbeeldingen te laten veranderen. In een pagina van het project Dreamweaverboek laten we de koppelingen in het menu Afbeel-dingen veranderen.

oefening 14.4 Afbeeldingendynamischwijzigen

1. Opdeplekwaareersthetboekomslagstond,plaatsenwenueenzogenaamdeplaceholder(eentijdelijkeopvulling).Plaatsdecursorindezecel.

2. KiesInvoegen > afbeeldingsobjecten > tijdelijke aanduiding….

3. Geefdegrijzevierkantehoudervoordeafbeeldinggeenbreedteofhoogtemee,maarvulwelalsnaamdreamweaverboekin.Opdezemanierpassenerafbeeldingenvanverschillendegroottein.Uzietnueengrootgrijsvlak,netalsinafbeelding1�.10.

�. Koppeldebronvandetijdelijkeaanduidingaanhetomslagvanhetboek.Ditwordtdebeginaf-beelding.

�. Zorgervoordatdekoppelingenallemaaleentijdelijkelinkmethetteken#hebben.

�. Selecteerdeomslag.Klikophetzwarteplustekeninhetpaneelgedragingen.

�. Kiesvoordeoptieafbeeldingen verwisselen.

DB_DRWCS4_H14.indd 13 27-05-2009 16:49:15

1�

dreamWeaver cS4 de basis

�. ZoekeenafbeeldingopenplaatsdezebijBron instellen als…

�. Testnudekoppelingindebrowserdoormetdemuisoverdeafbeeldingtebewegen.

Alshetontwerpverspringt,zetdandebreedteendehoogtevandecellenentabelvast.Hetisaanteradenafbeeldingentegebruikenmeteensoortgelijkebreedteenhoogte.

oefening 14.5 Meerafbeeldingenveranderen

HetdoelvandezeoefeningishetafmakenvandewebpaginavoorhetDreamweaver-boek.Voegtevensafbeeldingentoeaandeanderelinksindewebpagina.Gebruikwillekeurigeafbeeldingenvangelijkegrootte.

afbeelding 14.10Tijdelijke aanduiding voor een afbeelding.

DB_DRWCS4_H14.indd 14 27-05-2009 16:49:15

1�

14 Interactieve formulieren met gedragingen en Spry

afbeelding 14.11Tijdelijke aanduiding voor een afbeelding wisselen met een afbeelding.

DB_DRWCS4_H14.indd 15 27-05-2009 16:49:16

1�

dreamWeaver cS4 de basis

de codeWeergave In dreamWeaver cS4

Indemeestehoofdstukkeninditboekwordtindeontwerpweergavegewerkt.Allesverschijntdanophetscherm,zoalshetlaterookindebrowserwordtweergegeven.Ditnoemenwe‘WYSIWYG’:What You See Is What You Get.Dreamweavergenereertonderdemotorkapech-terookdevereistecode.Dezecodekanzijn:

HTML-codevoorbijvoorbeeldtabellen,afbeeldingenenlagen; CSS-codevoordeCSS-stijlen; JavaScriptvoordeGebeurtenissen,zoalsdevalidatievaneenformulier; DOMenDHTMLvoorhetaansturenvanonderdelenophetscherm,zoalshetlatenveran-

derenvanafbeeldingenergensopdepagina.

Dreamweaverkanookomgaanmetserversidecode(codedieopdewebserverwordtuitge-voerd),zoalsASP,PHP,JSPenCFML.Omdeleesbaarheidvandebroncodeteverbeteren,kuntudecodeonderdelenverschillendekleurengeven.Zokuntubijvoorbeeldvoordevol-gendecodeafwijkendekleurengebruiken:

CSS-code; specifiekeCSS-code; specifiekeHTML-tags; codeopgebouwdmetJavaScript; codeopgebouwdmetPHP.

Kleurschema bewerken.

DB_DRWCS4_H14.indd 16 27-05-2009 16:49:16

1�

14 Interactieve formulieren met gedragingen en Spry

UkuntdekleurenvoordecodeinstellenmetBewerken>voorkeuren.Kiesdecategoriecodekleurenenselecteerhtml.Kiesvoorkleurschema bewerken.

Hetdialoogvensterkleurschema bewerkenverschijnt.Selecteerindelijstdeoptiehtml-tabeltags.Kleurdetagsvoordetabelopbouwrood.Selecteernudeoptiehtml attribuut.Hiervoorwordtstandaarddekleurblauwgebruikt.Geefdehtml-attributendekleurdonker-groen.Opdezemanierkuntubijnaelkonderdeelvandecodeeenuniekekleurgevenomsnelonderscheidtekunnenmakentussendeverschillendeonderdelenvandecode.

DB_DRWCS4_H14.indd 17 27-05-2009 16:49:16