Layout van een widget wijzigen

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.

Elementen binnen de widget kun je oppakken en positioneren waar je wilt.

Stel dat ik de afstand tussen de menu-items groter wil maken.

Dan kan ik bijvoorbeeld de onderste trigger verplaatsen.

Daarna met de Shift-toets ingedrukt alle overige triggers erbij selecteren..

En ga dan naar de opties voor het uitlijnen bij ‘Align’.

Zorg dat de uitlijning ‘Align to' staat op 'Align to Selection’.

En klik eenmaal op de opdracht om verticaal de tussenruimtes eerlijk te laten verdelen.

De opties van een widget spelen nog wel een rol bij de mogelijkheden voor het layouten.

Kijk naar de options voor deze compositie.

De Position staat op ‘Stacked’.

Dat houdt in dat alle target gebieden op dezelfde positie zullen staan.

Verplaats een van de target gebieden.

Klik dan op een andere trigger.

Je ziet dat het target gebied bij alle andere triggers nu allemaal op dezelfde positie staan.

Dat komt door de optie ‘Stacked’ wat gestapeld betekent.

Dan zet ik nu de ‘Position’ nu op ‘Scattered’.

Ik selecteer opnieuw een trigger.

En verplaats het target gebied.

Voor de volgende trigger plaats ik het target gebied weer naar een andere positie.

En ook bij de laatste trigger. Die plaats ik gewoon hier aan de zijkant.

Klik nu op alle triggers.

Elk target gebied heeft een andere positie gekregen.

Wanneer je deze optie benut hangt van jouw creativiteit af.

Het is in ieder geval een mogelijkheid.

Ik zet de optie weer terug op Stacked. Dan hoef ik namelijk maar een doelgebied weer op te pakken.

En alle overige doelgebieden bevinden zich weer gestapeld daaonder

Je kunt ook kiezen als Position voor Lightbox.

Maar voordat ik dat doe wil ik dat je het volgende ziet.

Op dit moment staat bij ‘Show Target’ de optie ‘On Rollover’ actief.

Let op wat er gebeurt als ik kies bij Position voor LightBox.

Show target staat nu ineens op ‘On Click’.

Je kunt zelfs niet eens kiezen voor iets anders.

Dit kan gevolgen hebben voor de staten die we aan de triggers hebben verbonden in de vorige video.

Maar daar kom ik later op terug.

Om het target gebied heen is een dikke grijze rand verschenen.

Om te zien wat Lightbox doet ga ik meteen een Preview bekijken.

Het eerste wat opvalt is dat er helemaal geen target gebied meer te zien is.

Loop naar een trigger en klik hierop.

Het volledige beeld wordt bedekt door een licht transparante grijze kleur.

En in het midden wordt het doelgebied getoond.

Klik naast het doelgebied om weer naar de hoofdpagina terug te keren.

Activeer weer de pagina en selecteer het grijze kleurvlak.

Wijzig deze kleur in een andere kleur.

Klik dan eenmaal op het woord Fill.

Hier zie je dat Opacity op % staat.

Dus daardoor is de vulkleur niet geheel dekkend.

Bekijk opnieuw het resultaat in de Preview. Klik op een trigger.

En je hebt zelf nu de afdekkleur aangepast.

Klik naast het doelgebied om weer terug te keren naar de pagin.

Wat sommigen misschien nu opvalt is dat de staat ‘Rollover’ actief is geworden.

Zodra ik met de muis over een knop beweeg wordt de tekst grijs.

In de vorige video heb ik uitgelegd dat afhankelijk van de instellingen bij de opties..

...bepaalde staten wel of niet werken.

Ik keer terug naar de pagina 'Locatie'.

Omdat toen de staat RollOver juist niet beschikbaar was.

Heb ik die staten ook niet vormgegeven.

Dat zou je in dit geval voor de Lightbox dus juist wel willen doen.

Als ik de grijze teksten bij de Rollovers wil aanpassen.

Moet je de tekstkaders in de triggers selecteren.

Activeer de staat Rollover. Ga dan naar het Text venster en selecteer bij Colour een witte tekenkleur.

Ik geef op deze manier alle teksten binnen de triggers dezelfde witte tekenkleur.

Controleer dan als laatste het resultaat in een browser.

Ga naar File > Preview Page in Browser.§

Controleer alle triggers, de staten van de triggers en de inhoud van die de target gebieden dan tonen.