Interactieve formulieren met gedragingen en Spry

14

Interactieve formulieren met gedragingen en Spry De belangrijkste punten van hoofdstuk 14 Kennismaken met Gedragingen (Behaviors). Webeffecten leren aanmaken. De verschillende soorten Gedragingen gebruiken.

DB_DRWCS4_H14.indd 2

27-05-2009 16:49:11

Wat leert u in dit hoofdstuk? Wat een Gedraging is. Effecten toepassen op een website. Een uitklapmenu maken voor de navigatie. Gedragingen aanmaken. Speciale effecten van Gedragingen en Spry, zoals tabbladen, toepassen.


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 interactie 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 vergemakkelijken. 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 verschillende vormen worden toegepast. In dit boek hebt u al enkele effecten leren ge-

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


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 internettechniek 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 De effecten die u in een website kunt toepassen zijn onbeperkt. Op de website www.dynamicdrive.com kunt u diverse effecten bekijken, downloaden en zo gebruiken. Hierbij worden ook de browsers vermeld waarin de effecten goed werken. Op de site kunt u lezen waar u de code precies moet plakken.

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 mogelijkheden: met Afbeeldingen wisselen kunt u bij een muisbeweging een afbeelding laten wisselen 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


27-05-2009 16:49:12


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

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 gebruiker 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 navigatiebalkafbeelding te veranderen of om de weergave en acties van afbeeldingen op een navigatiebalk 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;


27-05-2009 16:49:13


Afbeelding 14.3 Een insteekmodule of plug-in controleren.

Afbeelding 14.4 Een pop-up-bericht of alert.

Pop-upbericht laten verschijnen toont een meldingsvenster met een bericht; Snelmenu is een uitklapmenu dat in Dreamweaver kan worden gemaakt en bewerkt; 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 APelement/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 effectmogelijkheden u hebt.


27-05-2009 16:49:13


Afbeelding 14.5 Meer downloaden.

Oefening 14.1 Een geluidje toevoegen Het doel van deze oefening is het toevoegen van een geluidje aan de webpagina. 1. Open een nieuwe lege HTML-pagina en sla deze op als geluidje.html. 2. Voer in het scherm de volgende tekst in: u hoort nu een geluidje. 3. Zoek in uw systeem naar een bestandsformaat met de extensie .wav of .mp3; dit is een geluidsbestand. 4. Voeg door middel van het paneel Gedragingen en de optie Afgekeurd > Geluid toevoegen dit geluidsbestand toe aan uw webpagina. 5. Bekijk een voorbeeld van uw webpagina via Voorvertoning (of met F12) om het geluidje ook daadwerkelijk te horen. Standaard zal de timing onLoad worden neergezet in het paneel Gedragingen. Dit houdt in dat het geluidje gaat spelen bij het openen van de pagina. Het openen van de webpagina wordt onLoad genoemd.


27-05-2009 16:49:13


Afbeelding 14.6 Een geluidje toevoegen.

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;


27-05-2009 16:49:14


Afbeelding 14.7 Effecten timen.

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 gebaseerd op AJAX-techniek en kan worden gebruikt om bepaalde effecten toe te voegen

Spry heeft een vaste plek gekregen in CS4 Adobe over Spry en het framework: ‘Het Spry-framework is een JavaScript-bibliotheek met behulp waarvan webontwerpers webpagina’s kunnen bouwen die de bezoekers een prettiger ervaring geven. Met Spry kunt u HTML, CSS en een minimale hoeveelheid JavaScript gebruiken om XML-gegevens op te nemen in uw HTML-documenten. U kunt objecten maken, zoals accordeons en menubalken, en diverse effecten toevoegen aan allerhande pagina-elementen. Het Spry-framework is zo ontworpen dat opmaak eenvoudig en makkelijk is te gebruiken door mensen die een basiskennis hebben van HTML, CSS en JavaScript. Het Spry-framework is voornamelijk bedoeld voor professionele webontwerpers of voor geavanceerde amateurs. Het is niet bedoeld als een volwaardig webtoepassingsframework voor webontwikkeling op ondernemingsniveau (hoewel het wel samen met andere pagina’s op ondernemingsniveau kan worden gebruikt). Ga voor meer informatie over het Spry-framework naar www.adobe. com/go/learn_dw_spryframework_nl.’

10


27-05-2009 16:49:14


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 eigenschap van AJAX.

Afbeelding 14.8 Spry voor meer interactie en betere navigatie.

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

11


27-05-2009 16:49:14


Oefening 14.2

Een tab-menu met Spry

1. Kies Invoegen > Spry > Spry deelvenster met tabs. Zie afbeelding 14.8. 2. Selecteer de blauwe tab met naam Tabbedpanels. 3. Voeg in de Eigenschappen met de zwarte + een extra tab toe. 4. Klik op de afzonderlijke tabs en vul de tabs met de content uit www.dreamweaverboek.nl. 5. Sla deze Spry-tabs op als sprytabs.html. 6. Bekijk het effect in de browser met functietoets F12 (of via Voorvertoning).

Dreamweaver zorgt voor het generen van code die compatible is met de diverse browsers.

Afbeelding 14.9 Spry-tabs maken met CS4.

Oefening 14.3

Een eigen menubalk maken

Het doel van deze oefening is het zelfstandig maken van een Spry-menubalk. 1. Open een nieuwe lege pagina en sla deze op als uitklapmenu.html. 12


27-05-2009 16:49:15


2. Klik op Invoegen > Spry > Spry-menubalk. 3. Klik op de blauwe tab boven de menubalk. 4. Pas via Eigenschappen de verschillende items en koppelingen aan. 5. Bekijk het effect in de browser met functietoets F12 (of via Voorvertoning).

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 gebruiker 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 Afbeeldingen veranderen.

Oefening 14.4

Afbeeldingen dynamisch wijzigen

1. Op de plek waar eerst het boekomslag stond, plaatsen we nu een zogenaamde placeholder (een tijdelijke opvulling). Plaats de cursor in deze cel. 2. Kies Invoegen > Afbeeldingsobjecten > Tijdelijke aanduiding…. 3. Geef de grijze vierkante houder voor de afbeelding geen breedte of hoogte mee, maar vul wel als naam Dreamweaverboek in. Op deze manier passen er afbeeldingen van verschillende grootte in. U ziet nu een groot grijs vlak, net als in afbeelding 14.10. 4. Koppel de bron van de tijdelijke aanduiding aan het omslag van het boek. Dit wordt de beginafbeelding. 5. Zorg ervoor dat de koppelingen allemaal een tijdelijke link met het teken # hebben. 6. Selecteer de omslag. Klik op het zwarte plusteken in het paneel Gedragingen. 7. Kies voor de optie Afbeeldingen verwisselen.

13


27-05-2009 16:49:15


Afbeelding 14.10 Tijdelijke aanduiding voor een afbeelding.

8. Zoek een afbeelding op en plaats deze bij Bron instellen als… 9. Test nu de koppeling in de browser door met de muis over de afbeelding te bewegen. Als het ontwerp verspringt, zet dan de breedte en de hoogte van de cellen en tabel vast. Het is aan te raden afbeeldingen te gebruiken met een soortgelijke breedte en hoogte.

Oefening 14.5

Meer afbeeldingen veranderen

Het doel van deze oefening is het afmaken van de webpagina voor het Dreamweaver-boek. Voeg tevens afbeeldingen toe aan de andere links in de webpagina. Gebruik willekeurige afbeeldingen van gelijke grootte.

14


27-05-2009 16:49:15


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

15


27-05-2009 16:49:16


De codeweergave in Dreamweaver CS4 In de meeste hoofdstukken in dit boek wordt in de ontwerpweergave gewerkt. Alles verschijnt dan op het scherm, zoals het later ook in de browser wordt weergegeven. Dit noemen we ‘WYSIWYG’: What You See Is What You Get. Dreamweaver genereert onder de motorkap echter ook de vereiste code. Deze code kan zijn: HTML-code voor bijvoorbeeld tabellen, afbeeldingen en lagen; CSS-code voor de CSS-stijlen; JavaScript voor de Gebeurtenissen, zoals de validatie van een formulier; DOM en DHTML voor het aansturen van onderdelen op het scherm, zoals het laten veranderen van afbeeldingen ergens op de pagina. Dreamweaver kan ook omgaan met serverside code (code die op de webserver wordt uitgevoerd), zoals ASP, PHP, JSP en CFML. Om de leesbaarheid van de broncode te verbeteren, kunt u de codeonderdelen verschillende kleuren geven. Zo kunt u bijvoorbeeld voor de volgende code afwijkende kleuren gebruiken: CSS-code; specifieke CSS-code; specifieke HTML-tags; code opgebouwd met JavaScript; code opgebouwd met PHP.

Kleurschema bewerken.

16


27-05-2009 16:49:16


U kunt de kleuren voor de code instellen met Bewerken > Voorkeuren. Kies de categorie Code kleuren en selecteer HTML. Kies voor Kleurschema bewerken. Het dialoogvenster Kleurschema bewerken verschijnt. Selecteer in de lijst de optie HTMLtabeltags. Kleur de tags voor de tabelopbouw rood. Selecteer nu de optie HTML Attribuut. Hiervoor wordt standaard de kleur blauw gebruikt. Geef de HTML-attributen de kleur donkergroen. Op deze manier kunt u bijna elk onderdeel van de code een unieke kleur geven om snel onderscheid te kunnen maken tussen de verschillende onderdelen van de code.

17


27-05-2009 16:49:16

Interactieve formulieren met gedragingen en Spry

Recommend Documents