Muse buttons en rollovers maken (State buttons)

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 reactie

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.

De makkelijkste manier om een interactieve button te maken is met gebruik van ‘Buttons’ uit de Widgets Library.

Open de startpagina van de oefensite en scroll naar beneden.

Helemaal onderaan staat een button.

Kenmerk van een button is dat het uiterlijk ervan reageert op de actie van de bezoeker.

Ik heb hier een voorbeeld al voorbereid.

Bekijk eerst het eindresultaat in de browser. Ga naar File > Preview Page in Browser. Scroll naar beneden.

Zodra ik met de muis naar de button loop verandert het uiterlijk van de illustratie en van de tekst.

Ook als ik inklik verandert het uiterlijk.

Keer terug naar Adobe Muse.

We gaan nu een soortgelijke button maken voor de knop ‘Direct Registreren’.

Deze knop is gemaakt met een kleurvlak en tekst.

Maar we gaan een echte button maken.

Daarvoor open je via Window de Widgets Library.

Open hierin de map ‘Buttons’. Selecteer de ‘State Button’ en sleep deze naar de pagina.

Deze button bestaat uit een aantal kaders. Samen vormen ze de button.

Zie je links boven in het Control-venster de indicator ‘State Button’ staan?

De huidige staat is de Normal

Activeer ook het venster ‘States’ onder Window.

Zorg dat je deze apart in beeld zet.

Loop de verschillende staten af.

Doe dit zowel in het venster States als bovenin het Control-venster.

Waar je dezelfde staten ook kunt benaderen.

Elke staat kun je voorzien van een ander uiterlijk.

De button bestaat uit verschillende onderdelen.

Ik deselecteer de button door ergens in het niets te klikken.

Klik op de button.

Nu selecteer je de button als geheel.

Je kunt deze oppakken en verplaatsen.

Klik nogmaals op een element binnen de button.

Nu heb je enkel dat element geselecteerd.

Wijzig het uiterlijk.

En je ziet dat de wijziging in alle staten wordt doorgevoerd.

Het uiterlijk van het element kun je per staat wijzigen.

Nu is de staat Normal actief. Wijzig de vulkleur.

Activeer dan de staat Rollover en wijzig opnieuw de vulkleur.

Herhaal dit voor de staten Mouse Down en Active.

Bekijk het resultaat in de Preview-Mode.

De button reageert, als het goed is, precies zoals je zelf hebt vormgegeven.

Keer terug naar de Design-Mode.

Meestal wil je zelf het uiterlijk van de button bepalen.

Deze button is eigenlijk niets meer dan een gebied waarbinnen je de button opmaakt.

Klik met de rechtermuisknop ingedrukt op de button.

En kies uit het contextuele menu voor ‘Clear Widgets Contents’

En voila alle inhoud is weg.

Ik zie nog wel een grijze vulkleur.

Klik opnieuw met de rechtermuisknop ingedrukt op de button.

En kies ook nog voor de optie ‘Clear All Styling. Nu hou je enkel een lege button over.

Maar aan deze button zitten wel de staten verbonden.

Nu gaan we zelf de button bouwen en vormgeven.

Activeer allereerst de staat Normal

Klik in het Control-venster op het woord ‘Fill’.

En kies voor een achtergrondafbeelding.

Navigeer in de oefenmap naar de map Assets.

En selecteer de afbeelding banner.png. Klik op Open.

Zet de ‘Fitting’ op ‘Original Size’.

Sleep aan de selectiepunten om het buttongebied net zo groot te maken als dit nodig is.

En ik positioneer deze naar de juiste positie.

Ik wil in de button tekst plaatsen. Zorg dan dat de button actief is.

Activeer het tekst-gereedschap en sleep binnen het buttongebied een tekstkader.

Plaats hierin tekst.

Ik selecteer alle tekst. Open het venster Paragraph Styles.

En ik kies voor de stijl 'subkop'.

Dan hoef ik enkel nog maar handmatig de tekenkleur te wijzigen in wit.

Activeer het selectie-gereedschap

En positioneer het tekstkader op de juiste positie.

Je kunt hiervoor ook de pijltjestoetsen op het toetsenbord gebruiken.

Deselecteer de button.

En selecteer deze opnieuw. .

Als het goed is zie je dat de button bestaat uit het buttongebied met de achtergrondafbeelding

En de tekstkader. We gaan nu de verschillende staten vormgeven.

Zorg dat je als vulkleur de achtergrondafbeelding ziet.

Activeer de staat Rollover. Kies bij Fill > Image voor banner-over.png

Activeer dan de staat Mouse-Down.

koppel hieraan de afbeelding 'banner.jpg'. Open.

En voor de staat Active kies ik als achtergrondafbeelding weer de banner-over.jpg.

Dan hoeven we nu enkel nog maar te kijken of je de tekst wilt aanpassen.

Zorg dan dat je het tekstkader selecteert.

Klik nogmaals op het tekstgebied. En nu heb je het tekstkader geselecteerd.

Soms kan het handig zijn om eerst weer even schoon te klikken.

Dan één keer klikken op het tekstkader.

Nu heb je het buttongebied geslecteerd. nogmaals klikken op het tekstkader.

Nu heb je daadwerkelijk het tekstkader geselecteerd.

Gebruik opnieuw het States-venster om per staat bijvoorbeeld de tekstkleur te bepalen.

Normal moet donkergroen worden.

En dit is even erg belangrijk.

Als ik de tekst anders wil kleuren moet ik dit doen met behulp van het tekst-venster.

Deze klap ik alvast uit.

Niet via de vul-opdracht in het Controls-venster.

Daar staat de vulling van het huidig geselecteerde op ‘geen’.

Hiermee zou ik dan dus het tekstkader een andere kleur geven en dat is niet de bedoeling.

in het tekstvenster daarentegen zie je als vulkleur staan wit.

En dat klopt met de actieve tekenkleur.

Deze zet ik op donkergroen.

Activeer dan de Rollover-staat en maak deze wit.

Dan voor de Mouse Down kies ik weer de donkergroene kleur.

En voor de Active weer wit.

Nu heb je de button vormgegeven en kun je het eindresultaat gaan bekijken in de browser.

Ga naar File > Preview Page in Browser.

Scroll naar beneden.

En inderdaad. De button werkt precies zoals ik heb bedacht.

Aan jou nu de taak om deze buttons naar de juiste pagina's te laten linken.

Aan jou nu de taak om deze buttons naar de juiste pagina's te laten linken.