Interactieve kaart met Tooltip-widget (Tooltip)

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.

Activeer het venster Widgets Library.

We zijn nog steeds bezig met de Composition Widgets.

Het zou veel te veel tijd in beslag nemen om alle mogelijkheden met de Composition Widgets uit te leggen.

Je hebt nu in grote lijnen door hoe de widgets werken.

Op deze pagina heb ik een kaart geplaatst van de omgeving.

Dit kaartje gaan we nu voorzien van interactieve informatie.

Hiervoor gebruiken we de widget ‘Tooltip’. Sleep deze naar de pagina.

De widget Tooltip biedt triggers in de vorm van deze rondjes.

Klik op een rondje en het bijbehorende doelgebied verschijnt.

Verplaats de trigger naar een positie op de kaart.

Positioneer dan het bijbehorende doelgebied erbij.

Plaats zo alle triggers op bepaalde plekken in de kaart.

Deze zet ik hier en het doelgebied hier in de buurt.

Wijzig de inhoud van de doelgebieden.

Je bent geheel vrij om deze anders vorm te geven.

Ik wijzig slechts de tekst en de afbeelding.

Ik gebruik de sneltoets Commando D. Kies vervolgens een afbeelding. ga naar Open. En wijzig de bestaande afbeelding.

Zo kun je dus alle doelgebieden op de kaart voorzien van een andere inhoud.

De grijze rondjes vallen nu niet echt op op deze kaart.

Open het venster States onder Window.

Of gebruik de Indicator in het Conrol-venster.

Loop dan de verschillende staten af.

Normal geef ik een oranje vulkleur. De Rollover..,

geef ik een iets lichter oranje vulkleur mee.

Dan de Mouse Down. Deze mag donker oranje worden.

En de Active. Die geef ik onze donkere kleurvariant mee.

Herhaal dit dan ook voor de overige rondjes op de kaart.

Bekijk het eindresultaat in een preview.

Zorg dat je de kaart goed in beeld hebt.

De oranje rondjes vallen duidelijk op.

Zodra ik erheen loop wordt het bijbehorende doelgebied getoond.

En dit geldt dan voor elk rondje.

Zoals je ziet zijn de staten Mouse Over en Mouse Down niet beschikbaar.

Dus deze werken gewoon niet met de huidige optie-instellingen van deze widget.

Belangrijk is dat je die opties goed leert kennen.

Dus bekijk altijd alle standaard ingestelde opties.

Deze vind je terug via het optiepijltje.

De Position staat op Scattered. En dat klopt! Want alle doelgebieden kunnen verspreid voorkomen.

Zodra je met de muis over de trigger beweegt.

Wordt direct het doelgebied getoond. Vandaar dat alleen de optie Active functioneert.

En als je met de muis de trigger verlaat dan wordt ook het doelgebied direct verborgen.

Widgets bieden dankzij deze opties juist gevarieerde mogelijkheden en toepassingen.

Er valt wat dat betreft nog heel wat te ontdekken voor je.