Staten vormgeven van een widget (State options)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Elk kader in de Widget kun je voorzien van je eigen vormgeving.

En zo’n beetje elk object in Muse kun je voorzien van staten.

Selecteer de composition en daarna een trigger in de composition.

Open het States-venster onder Window > States. Ik zorg dat deze apart in beeld is.

Kijk naar de indicator in het control-venster.

De indictor geeft aan wat voor soort object op dit moment geselecteerd is.

Hier staat Trigger met daarachter ‘Active’. En als je daarop klikt zie je de hele lijst met mogelijke staten.

Dit is nogal een lastig onderdeel.

Want ondanks dat je hier vier staten ziet.

Is het niet altijd zo dat ze ook alle vier effect opleveren in de uiteindelijke voorvertoning.

Dat kan bijvoorbeeld te maken hebben met de instellingen voor deze Composition.

Kijk in het optie-menu van de composition.

Zorg dat je de composition selecteert en klik op het opte-menu.

Hier staat bij ‘Show Target’, de optie ‘On Rollover’ geactiveerd.

Je kunt hier ook kiezen voor ‘On Click’, maar je moet kiezen.

Omdat ik kies voor ‘On Rollover’ is ook alleen die staat functioneel en zal deze werken.

Hierdoor houden we voor het vormgeven van de staten enkel de optie Active en Normal over.

Niet de staat Roll Over. En dat klikt een beetje tegenstrijdig.

Maar zo hebben we het ingesteld bij de opties.

Zodra je met de muis over het object heen beweegt wordt deze direct actief en dat is de staat Active.

Zorg dat je een trigger hebt geselecteerd.

En zet de staat op Normal. Standaard wil ik dat deze knop een lichte kleur krijgt als achtergrond.

Zodra men met de muis er overheen beweegt en dus de staat Active wordt geactiveerd.

Wil ik dat deze de donkere kleurvariant krijgt.

Dit herhaal ik dan vervolgens voor alle triggers die ik hier in mijn composition heb staan.

De teksten zijn bijna niet meer leesbaar dus ook die wil ik nog gaan aanpassen.

Selecteer in de trigger een tekstkader.

Kijk opnieuw naar de indicator in het control-venster.

Achter Text Frame staat Normal. En dat is de huidige staat.

Voor deze staat wil ik de donkergroene kleurvariant voor de tekst.

Activeer dan het venster Tekst.

Via dit venster kun je namelijk alle tekst in een kader voorzien van een kleur.

Deze staat nu op grijs en ik kies voor de donkere kleurvariant.

Bij de staat Active wil ik dat deze bijvoorbeeld wit is.

Ook dit herhaal ik nu voor alle tekstkaders binnen de triggers.

Deze wordt wit en de staat Normal wordt donkergroen. herhaal dit voor overige tekstkaders.

En bekijk dan een voorvertoning in de browser. Je kunt gaan naar File > Preview Page in Browser.

Parkeren is op dit moment actief. Zodra ik met de muis naar een andere knop loop wordt deze direct actief.

Ik zie wel dat deze tekst hier op de eerste knop nog niet goedgekomen is.

Dus die zal ik nog moeten aanpassen. Kwestie van terugkeren.

Zorgen dat je je tekstkader geselecteerd hebt.

De Normal state staat nog op grijs en deze had moeten zijn donkergroen.

Terug naar preview en opnieuw het eindresultaat controleren.

Eindconclusie is dus dat je de knoppen in een widget prima kunt vormgeven met de vier verschillende buttonstaten.

Maar afhankelijk welke functionaliteit je wel en niet geactiveerd hebt bij de options.

Zullen sommige staten niet werken.

In ons geval heb ik geen Clickbare opties geactiveerd.

Dus ook al zou ik een On Click staat vormgeven en opmaken.

En in deze voorvertoning daadwerkelijk klikken op een button.

De vormgeving wordt niet getoond.

Dit kan best verwarrend zijn in het begin

Als je nog niet helemaal bekend bent met alle opties en mogelijkheden van een widget.