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.