Sitemap
Copyright © Studio Artist X 2004-2010, KvK nr. 34202110
Dreamweaver MX gratis online tutorial voor de beginners ...
Voor we hieraan beginnen, geven we eerst antwoord op de vraag: "Wat is een Flashbutton eigenlijk?" Een Flashbutton is een mediavorm, gelijk aan een animatie. Met daaraan toegevoegd dat deze animatie niet zomaar speelt, maar bestuurbaar is. Simpel gezegd is een Flashbutton: een "interactieve mini animatie" die als knop fungeert voor het activeren van links. Waarom heet het een Flashbutton? Macromedia Flash is de software waar deze buttons (knoppen) mee gegenereerd zijn. Hoe herkennen we deze bestanden? Deze bestanden hebben de bestandsextensie swf.
We gaan met de cursor op de plaats staan waar deze button moet komen. In dit geval in het linker frame. De tekst link "Home" willen we vervangen door een flash button. Vervolgens kiezen we (boven aan) "Insert ⇒ Media ⇒ Flash Button".
Vervolgens krijgen we het panel "Insert Flash Button" te zien.
Sample: geeft een voorbeeld van de gekozen button.
Style: geeft de verschillende stijlen buttons weer.
Button text: Hier voeren we de tekst in die op de button verschijnt. In ons geval: Home
Font: Hier kunnen we een passend lettertype selecteren
Size: Geeft de grootte van het lettertype weer, ook dit is aan te passen.
Link: Hier geven we aan waar de button naar toe moet linken (met "browse" kunnen we het juiste bestand binnen de site selecteren)
Target: Geeft aan waar de browser deze pagina moet weergeven (als losse pagina is bijvoorbeeld "Blank") Wij kiezen MainFrame, omdat de pagina home.htm in het MainFrame moet worden geopend.
Bg Color: Staat voor Background Color (achtergrond kleur). Het is belangrijk deze in te stellen, anders krijgen we een vervelende grijze rand om de button. Klik op het gekleurde vlakje, en er verschijnt een colorpicker tool (een pipetje). Klik nu met deze colorpicker tool op de achtergrond waar de button moet komen. Het kleurvakje wordt nu de juiste kleur, en geeft automatisch de juiste kleurcode weer.
Save as: Daar vullen we de naam van de button in, zodat we deze straks kunnen herkennen als de Flash Button "Home".
Klikken we op "Apply" dan krijgen we een voorbeeld van de button. Deze wordt dan wel al aangemaakt als bestand. Maar nog niet definitief geplaatst! Klikken daarna op "Cancel" (annuleren) dan wordt de button niet geplaatst, maar de gemaakte button wordt wel in de map van de site opgeslagen. Klikken we op "Get More Styles" (haal meer stijlen op) dan krijgen we een optie om meer soorten buttons via het internet te downloaden, zodat we de lijst kunnen uitbreiden. Wij klikken op OK!
En zie hier onze prachtige flashutton animatie! Maar deze doet nog helemaal niets! Ook niet als we er met de muis overheen bewegen! Dat komt omdat we nog steeds in het bewerkingsprogramma zitten. Willen we kunnen zien hoe deze animatie werkt, dan moeten we deze, of in een browser (Internet Explorer, FireFox, Netscape, etc.) bekijken, of in het bewerkingsprogramma afspelen. Dat kunnen we doen, door de button te selecteren, en dan in het "Properties" (eigenschappen) panel op het "Play" (afspeel) knopje te drukken.
Dan wordt de button actief, zoals deze in een browser zou zijn. We kunnen daarmee controleren of de button wel werkt zoals we verwachten. Als we klaar zijn met deze beoordeling drukken we weer op "stop", zodat verder kunnen gaan met bewerken. Tot zover het gedeelte over de Flash Button.
Er is nog een manier om mooie effecten te verkrijgen, met zogenaamde Rollover Images. Wat is een Rollover image? Dat zijn twee afbeeldingen die elkaar afwisselen bij de gebeurtenis Mouse-over (Muis over de afbeelding). Het is dus geen gewone afbeelding, maar een afbeelding object, of wel : Image Object.
Om dit te kunnen maken hebben we dus twee afbeeldingen nodig. Meestal worden afbeeldingen van de zelfde grootte gebruikt. We houden nu de grootte van de Flash Button aan, en maken twee verschillende afbeeldingen van (100 pixels breed en 22 pixels hoog). De ene is donkerder, de andere lichter aan de rechter kant, waardoor het lijkt bij mouse-over alsof de button oplicht aan de rechterkant.
Nu kunnen we de Rollover Image gaan maken.
We selecteren de tekstlink Natuurgebieden en verwijderen deze. De cursor laten we wel op die plaats staan. Met "Insert → Image Objects → Rollover Image" openen we het panel Rollover Image.
Bij Image name vullen we de naam van de afbeelding in.
Original image geeft aan welke afbeelding blijft staan.
Rollover image geeft aan welke afbeelding er bij mouse-over verschijnt.
Het vinkje bij Preload rollover image geeft aan dat de afbeelding bij het oproepen van de pagina al geladen moet worden, en niet pas op het moment dat hij gebruikt gaat worden. (Laat deze optie vooral aan staan.)
Alternate text Hier kan men een tekst invullen als omschrijving van de afbeelding.
Wanneer men dit doet, verschijnt die tekst op het moment dat iemand met zijn muis over het plaatje gaat. In dit geval zou dat betekenen dat er dubbel "natuurgebieden" komt te staan. 
Een keer op de button zélf, en één keer in een apart geel begeleidend kadertje. Dat is in dit geval een beetje dubbel op! Het is wel handig wanneer je deze Rollover images op een andere manier toepast; bijvoorbeeld, een totaal afbeelding als original, en een detail van die afbeelding als Rollover. Dit is een voorbeeld van toepassing waar de rollover heel veel voor wordt gebruikt. Alternate text wordt dan als begeleidende tekst meegegeven. Een ander voordeel van Alternate text is dat het pure tekst is, die, in tegenstelling tot tekst in een plaatje of animatie, wél door zoekmachines kan worden herkend. Deze Rollover kunnen we alleen testen in een browser.
Wanneer dit principe duidelijk is, kunnen we nog een stapje verder gaan. Met het zelfde principe wordt ook een complete Navigationbar (Navigatiebalk) gemaakt.
Met "Insert ⇒ Image Objects ⇒ Navigation Bar" kiezen we het panel Navigationbar.
Hier zien we een uitgebreidere vorm van Rollover Images.
Het principe is gelijk. Maar we kunnen nu meer buttons in een serie aanmaken.
In het vak "Nav bar elements" geven we een aantal button namen op.
Home, Natuurgebieden, Fotografie en Links bijvoorbeeld.
Met het plus teken kunnen we steeds een element toevoegen.
Elk element krijgt een element name (naam)
Up image Hier selecteren we de afbeelding die we standaard zien
Over image Wordt het plaatje dat we krijgen bij mouse-over
Down image Hier selecteren we de afbeelding die we moeten zien als er op geklikt is.
Over while down image Wordt de afbeelding die we te zien krijgen op het moment dat de muis over het plaatje gaat en er geklikt wordt.
When clicked, Go to URL welke pagina wordt er aangeroepen? In welk Frame?
Options: Preload images aan vinken!
Show "Down Image" initialy Laat de Down Image eerst zien. Nee, dat willen we niet dus die blijft uit staan.
Insert Hoe wordt de Navigatiebalk ingevoegd? Horizontaal of verticaal?
Use tabels Maak gebruik van tabellen. Ja, graag! Die houden onze navigatiebalk mooi op zijn plaats!
Nu zijn we in staat om een complete navigatie balk te maken!