InterActIeve FormulIeren met gedrAgIngen en Spry

pearsoneducation.nl

InterActIeve FormulIeren met gedrAgIngen en Spry

14

Interactieve

formulieren met

gedragingen en

SPRY

De belangrijkste punten van hoofdstuk 14

Kennismaken met behaviors.

Webeffecten leren aanmaken.

De verschillende soorten behaviors gebruiken.


Wat leert u in dit hoofdstuk?

Wat een Gedraging is.

Effecten toepassen op een website.

Een uitklapmenu maken voor de navigatie.

Gedragingen aanmaken.

Gedragingen en SPRY zorgen voor speciale effecten


Dreamweaver CS3 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, 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 gecreëerd

met JavaScript. Aangezien het met de hand toevoegen van JavaScript een lastige

klus kan zijn, 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 gebruiken,

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 internettechniek

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

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 Interactieve formulieren met gedragingen en SPRY

Afbeelding 14.1

Bij Trendhopper.nl is preloading gebruikt voor het aantal afbeeldingen.

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 Gedragingen

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 muisbeweging

een afbeelding laten wisselen op het scherm;

Afbeeldingen vooraf laden is het versnellen van het

inladen van afbeeldingen van een bepaalde pagina;

Afbeelding 14.2

Het paneel Gedragingen.

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;


Dreamweaver CS3 de basis

Afbeelding 14.3

Een SPRY-effect Hooglicht bij het

aanklikken van de link.

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 gebruiker

na een bepaalde handeling naar een website worden geleid;

Insteekmodule controleren is bijvoorbeeld het bij het inladen van een pagina controleren

of Flash is geïnstalleerd bij de gebruiker;

Afbeelding 14.4

Een insteekmodule of plug-in controleren.

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;


14 Interactieve formulieren met gedragingen en SPRY

Afbeelding 14.5

Een pop-up-bericht of alert.

Pop-upbericht laten verschijnen toont een meldingsvenster met bericht;

Snelmenu is een uitklapmenu dat in Dreamweaver kan worden gemaakt en bewerkt;

Afbeelding 14.6

Tekst veranderen ergens in het scherm.

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 effectmogelijkheden

u hebt.

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.


Dreamweaver CS3 de basis

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 (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.

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. Afbeelding 14.7

Effecten timen.

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.


14 Interactieve formulieren met gedragingen en SPRY

14.4 Een SPRY toevoegen

Nieuw in versie CS3 is de toevoeging van SPRY. De code is gebaseerd op AJAX-techniek

en kan worden gebruikt om bepaalde effecten toe te voegen aan uw website. De

effecten die in Dreamweaver kunnen worden aangeroepen vallen onder het SPRYframework.

Een goed voorbeeld is www.dreamweavercs3.nl. Door middel van AJAXtechniek

kunt u de verschillende tabs aanklikken zonder dat het scherm verandert.

Deze vloeiende verandering van schermonderdelen is een eigenschap van AJAX.

SPRY is nieuw in CS3

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.

Afbeelding 14.8

SPRY is nieuw in CS3.

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


Dreamweaver CS3 de basis

Oefening 14.2

Een tab-menu met SPRY

1 Kies Invoegen > SPRY > SPRY Deelvenster met tabs.

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.dreamweavercs3.nl.

5 Sla deze SPRY-tabs op als sprytabs.html.

6 Bekijk het effect in de browser met functietoets F12 (Voorvertoning).

Afbeelding 14.9

SPRY-tabs.

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.

2 Klik op Invoegen > SPRY > Spry-menubalk.

3 Klik op de blauwe tab boven de menubalk.


14 Interactieve formulieren met gedragingen en SPRY

4 Pas via Eigenschappen de verschillende items en koppelingen aan.

5 Bekijk het effect in de browser met functietoets F12 (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 gebruiker

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 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 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.

Afbeelding 14.10

Tijdelijke aanduiding voor een afbeelding.

4 Koppel de bron van de tijdelijke aanduiding aan het omslag van het boek. Dit wordt dan 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.


Dreamweaver CS3 de basis

Afbeelding 14.11

De omslag is nu weer te zien.

7 Kies voor de optie Afbeeldingen verwisselen.

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.

De codeweergave in Dreamweaver CS3

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 (WYSIWYG, What

You See Is What You Get). Dreamweaver genereert onder de motorkap echter ook de vereiste

code. Deze code kan zijn:


14 Interactieve formulieren met gedragingen en SPRY

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.

U kunt de kleuren voor de code instellen met Bewerken > Voorkeuren. Kies de categorie Code

kleuren en selecteer HTML. Kies voor Kleurschema bewerken.

Kleurschema bewerken.

Het dialoogvenster Kleurschema bewerken verschijnt. Selecteer in de lijst uit de afbeelding

de optie HTML-tabeltags.

Kleur de tags voor de tabelopbouw nu rood. Selecteer nu de optie HTML Attribuut. Hiervoor

wordt standaard de kleur blauw gebruikt. Geef de HTML-attributen de kleur donkergroen. Op


Dreamweaver CS3 de basis

deze manier kunt u bijna elk onderdeel van de code een unieke kleur geven om zo snel onderscheid

te kunnen maken tussen de verschillende onderdelen van de code.

Kleurschema bewerken en aanpassen.

More magazines by this user
Similar magazines