InterActIeve FormulIeren met gedrAgIngen en Spry · 14.5.1 webeffect voor de verandering van een...

14InterActIeve�

FormulIeren�met�gedrAgIngen�en�

Spryde�belangrijkste�punten�van�hoofdstuk�14

Kennismakenmetbehaviors.

Webeffectenlerenaanmaken.

Deverschillendesoortenbehaviorsgebruiken.

DB_DRWCS3_boek.indb 298 10/22/07 16:32:31

14InterActIeve�

FormulIeren�met�gedrAgIngen�en�

Spry

wat�leert�u�in�dit�hoofdstuk?

WateenGedragingis.

Effectentoepassenopeenwebsite.

Gedragingenaanmaken.

Eenuitklapmenumakenvoordenavigatie.

GedragingenenSPRYzorgenvoorspecialeeffecten


300

dreAmweAver�cS3� de�basis

� 14.1� webeffecten�toevoegen

Zoals we in het vorige hoofdstuk al hebben gezien, heeft een website de nodige interac-tie 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 websi-te. Webeffecten kunnen het gebruik van toepassingen op een website vergemakkelijken. Dit hoofdstuk zal diverse webeffecten beschrijven, inclusief een aantal opdrachten.

� 14.1.1� diverse�webeffecten

Een van de sterke punten van Dreamweaver is dat u hiermee gemakkelijk effecten kunt toevoegen aan een site. Onder de motorkap van het ontwerp wordt de code ge-creëerd met JavaScript. Aangezien het met de hand toevoegen van JavaScript een las-tige klus kan zijn, 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-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, zie de afbeelding op de vorige pagina; Door diverse projecten navigeren; Een link apart toevoegen op 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.

Ook bij het aanmaken van een tijdlijn (timeline) wordt er Javascript-code gegenereerd. Deze code word in de header – helemaal bovenin het document – geplaatst. In de co-

nog�meer�eFFecten�toevoegen

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


301

14� Interactieve�formulieren�met�gedragingen�en�Spry

deweergave kunt u de code bekijken. De precieze code van bijvoorbeeld een tijdslijn kunt u bekijken in hoofdstuk 9.

� 14.2� de�lijst�van�effecten�bekijken

Het paneel Gedragingen kunt u activeren met Venster > Werkingen of met Shift+F4, zoals te zien is in afbeelding 14.2.

Als u op het zwarte plusteken klikt in het paneel Ge-dragingen ziet u de opties van afbeelding 14.1. Als we de effecten wat beter bekijken, dan zien we de volgende mogelijkheden: Met Afbeeldingen wisselen kunt u bij een muisbewe-

ging een afbeelding laten wisselen op het scherm;Afbeeldingen vooraf laden is het versnellen van het inladen van afbeeldingen van een bepaalde pagina;

Een 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 zogenaamd nieuw venster of pop-up;

Met Effecten kunt u –vooral bij tekstlinks- de tekst een effect meegeven. Dit legt een link naar de zogenaamde AJAX-technieken van de nieuwe SPRY, zie afbeelding 14.3 voor een voorbeeld;

Afbeelding�14.1Bij Trendhopper.nl is preloading gebruikt voor het aantal afbeeldingen.

Afbeelding�14.2Het paneel Gedragingen.


302


Eigenschap wijzigen kan gelden voor lagen 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 bijvoorbeeld het bij het inladen van een pagina con-troleren of Flash is geïnstalleerd bij de gebruiker;

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

ding te veranderen of om de weergave en acties van afbeeldingen op een navigatie-balk 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.3Een SPRY-effect Hooglicht bij het aanklikken van de link.

Afbeelding�14.4Een insteekmodule of plug-in controleren.


303


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

Tekst instellen is nieuw in CS3: u kunt zo tekst in bijvoorbeeld een AP-element/laag veranderen;

Met Tijdlijn kunt u effecten aan uw bewegende tijdlijn toevoegen; 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.

oefening�14.1�Eengeluidjetoevoegen

Hetdoelvandezeoefeningishettoevoegenvaneengeluidjeaandewebpagina.

1 OpeneennieuwelegeHTML-paginaensladezeopalsgeluidje.html.

2 Voerinhetschermdevolgendetekstin:“uhoortnueengeluidje”.

3 Zoekinuwsysteemnaareenbestandsformaatmetdeextensie.wavof.mp3;ditiseenge-luidsbestand.

Afbeelding�14.5Een pop-up-bericht of alert.

Afbeelding�14.6Tekst veranderen ergens in het scherm.


304


4 VoegdoormiddelvanhetpaneelGedragingenendeoptieAfgekeurd>geluid�toevoegenditgeluidsbestandtoeaanuwwebpagina.

5 Bekijkeenvoorbeeldvanuwwebpaginaviavoorvertoning(F12)omhetgeluidjeookdaadwer-kelijktehoren.StandaardzaldetimingonloadwordenneergezetinhetpaneelGedragingen.Dithoudtindathetgeluidjegaatspelenbijhetopenenvandepagina.Hetopenenvandeweb-paginawordtonLoadgenoemd.

� 14.3� een�effect�timen

De timing van een effect wordt in Dreamweaver 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� behaviors�of�gedragingen�timen

Als u een effect toevoegt, zult u dit moeten timen (in tijd opmeten). De meeste effecten starten namelijk niet automatisch. De timing van een effect heet in JavaScript event handlers of gebeurtenisafhandeling: u ‘handelt een gebeurtenis af’.

Er zijn standaardtimings, zoals te zien is in de onderste lijst. 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. 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.

Afbeelding�14.7Effecten timen.


305


� 14.4� een�Spry�toevoegen

Nieuw in versie CS3 is de toevoeging van SPRY. De code is gebaseerd op AJAX-tech-niek en kan worden gebruikt om bepaalde effecten toe te voegen aan uw website. De effecten die in Dreamweaver kunnen worden aangeroepen vallen onder het SPRY-framework. Een goed voorbeeld is www.dreamweavercs3.nl. Door middel van AJAX-techniek kunt u de verschillende tabs aanklikken zonder dat het scherm verandert. Deze vloeiende verandering van schermonderdelen is een eigenschap van AJAX.

We gaan in de oefening het tab-effect van DreamweaverCS3.nl namaken.

Spry�IS�nIeuw�In�cS3

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.

Afbeelding�14.8SPRY is nieuw in CS3.


306


oefening�14.2� Eentab-menumetSPRY

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

2 Selecteerdeblauwetabmetnaamtabbedpanels.

3 VoegindeEigenschappenmetdezwarte+eenextratabtoe.

4 Klikopdeafzonderlijketabsenvuldetabsmetdecontentuitwww.dreamweavercs3.nl.

5 SladezeSPRY-tabsopals�sprytabs.html.

6 BekijkheteffectindebrowsermetfunctietoetsF12(Voorvertoning).

oefening�14.3� Eeneigenmenubalkmaken

HetdoelvandezeoefeningishetzelfstandigmakenvaneenSPRY-menubalk.

1 Openeennieuwelegepaginaensladezeopalsuitklapmenu.html.

2 KlikopInvoegen�>�Spry�>�Spry-menubalk.

3 Klikopdeblauwetabbovendemenubalk.

Afbeelding�14.9SPRY-tabs.


307


4 PasviaEigenschappendeverschillendeitemsenkoppelingenaan.

5 BekijkheteffectindebrowsermetfunctietoetsF12(Voorvertoning).

� 14.5� Afbeeldingen�laten�veranderen

Zoals eerder in dit boek gezegd, is een afbeelding 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 laten zien van een product; Foto’s voor of na een proces tonen.

� 14.5.1� webeffect�voor�de�verandering�van�een�afbeelding

Opnieuw gebruiken we een behavior om de afbeeldingen te laten veranderen. In een pagina van het project Dreamweaverboek laten we de koppelingen in het menu Af-beeldingen veranderen.

oefening�14.4� Afbeeldingendynamischwijzigen

1 Opdeplekwaareersthetboekomslagstond,plaatsenwenueenzogenaamdeplaceholder(eentijdelijkeopvulling).Plaatsdecursorindezecel.

2 KiesInvoegen�>�Afbeeldingsobjecten�>�tijdelijke�aanduiding…

3 Geefdegrijzevierkantehoudervoordeafbeeldinggeenbreedteofhoogtemee,maarvulwelalsdreamweaverboekin.Opdezemanierpassenerafbeeldingenvanverschillendegroottein.Uzietnueengrootgrijsvlak,netalsinafbeelding14.10.

4 Koppeldebronvandetijdelijkeaanduidingaanhetomslagvanhetboek.Ditwordtdandebe-ginafbeelding.

5 Zorgervoordatdekoppelingenallemaaleentijdelijkelinkmethetteken#hebben.

6 Selecteerdeomslag.KlikophetzwarteplustekeninhetpaneelGedragingen.

Afbeelding�14.10Tijdelijke aanduiding voor een afbeelding.


308


7 KiesvoordeoptieAfbeeldingenverwisselen.

8 ZoekeenafbeeldingopenplaatsdezebijBroninstellenals..

9 Testnudekoppelingindebrowserdoormetdemuisoverdeafbeeldingtebewegen.

Alshetontwerpverspringt,zetdandebreedteendehoogtevandecellenentabelvast.Hetisaanteradenafbeeldingentegebruikenmeteensoortgelijkebreedteenhoogte.

oefening�14.5� Meerafbeeldingenveranderen

HetdoelvandezeoefeningishetafmakenvandewebpaginavoorhetDreamweaver-boek.Voegtevensafbeeldingentoeaandeanderelinksindewebpagina.Gebruikwillekeurigeafbeeldingenvangelijkegrootte.

Afbeelding�14.11De omslag is nu weer te zien.

de�codeweergAve�In�dreAmweAver�cS3

Indemeestehoofdstukkeninditboekwordtindeontwerpweergavegewerkt.Allesverschijntdanophetscherm,zoalshetlaterookindebrowserwordtweergegeven(WYSIWYG,WhatYouSeeIsWhatYouGet).Dreamweavergenereertonderdemotorkapechterookdevereistecode.Dezecodekanzijn:


309


HTML-codevoorbijvoorbeeldtabellen,afbeeldingenenlagen; CSS-codevoordeCSS-stijlen; JavaScriptvoordegebeurtenissen,zoalsdevalidatievaneenformulier; DOMenDHTMLvoorhetaansturenvanonderdelenophetschermzoalshetlatenveran-

derenvanafbeeldingenergensopdepagina.

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

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

Ukuntdekleurenvoordecodeinstellenmetbewerken>voorkeuren.Kiesdecategorie�code�kleurenenselecteerhtml.Kiesvoorkleurschema�bewerken.

Kleurschema bewerken.

Hetdialoogvensterkleurschema�bewerkenverschijnt.Selecteerindelijstuitdeafbeeldingdeoptiehtml-tabeltags.

Kleurdetagsvoordetabelopbouwnurood.Selecteernudeoptiehtml�Attribuut.Hiervoorwordtstandaarddekleurblauwgebruikt.GeefdeHTML-attributendekleurdonkergroen.Op


310


dezemanierkuntubijnaelkonderdeelvandecodeeenuniekekleurgevenomzosnelonder-scheidtekunnenmakentussendeverschillendeonderdelenvandecode.

Kleurschema bewerken en aanpassen.


InterActIeve FormulIeren met gedrAgIngen en Spry · 14.5.1 webeffect voor de verandering van een...

Documents

Transcript of InterActIeve FormulIeren met gedrAgIngen en Spry · 14.5.1 webeffect voor de verandering van een...