Werken met Widgets

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.

Dankzij de widgets van Muse kun je snel en makkelijk interactieve content creëren.

Ik laat nu zien hoe je moet werken met widgets.

Open het venster Widgets Library.

Hier vind je in mappen onderverdeeld alle widgets.

Open de map ‘Compositions’.

Ik start met de widget ’Featured News’.

Klik en sleep deze naar het content gebied.

De widget wordt geplaatst in een bepaalde compositie en vormgeving en op een bepaald formaat.

Automatisch verschijnt altijd het Opties-venster.

Elke Widget heeft in de rechter bovenhoek een blauw cirkeltje met een pijltje erin.

Klik hierop om de opties te sluiten en weer te openen.

Per Widget verschillen natuurlijk de opties, maar sommige instellingen vind je haast overal terug.

Belangrijkste eigenschap van de Composition-widgets is dat deze bestaan uit twee soorten containers.

Een Trigger en en een Target.

Het idee is dat zodra je op een Trigger klikt het bijbehorende Target gebied getoond wordt.

Dus dit zijn de Triggers en het gebied ernaast is de Target.

Zowel de triggers als de targets kun je zelf vormgeven en van inhoud voorzien.

Hier bestaan geen regels voor. Je kunt zo creatief zijn als je maar wilt.

Laten we eerst eens even kijken hoe deze compositie eruit ziet in een Preview.

De teksten in de triggers kun je eigenlijk beschouwen als een menu.

Ga met de muis boven een kopje staan en het target gebied verandert van inhoud.

Keer weer terug naar de Design Mode.

Om elementen binnen de triggers en targets te selecteren moet je rustig meerdere keren klikken.

Ik deselecteer eerst dor in het niets te klikken in mijn tekengebied.

Klik een keer op d Composition om de composition te selecteren.

Klik nogmaals boven een trigger om de trigger te selecteren.

In dit geval bevindt zich hierin één tekstframe. Dat zie ik dan weer aan de tooltip.

Klik nogmaals op het tekstkader en nu heb je het tekstkader geselecteerd.

Wil je de tekst aanpassen moet je wisselen naar je tekst-gereedschap.

Of dubbelklikken in het tekstkader. Selecteer de tekst.

En vervang deze voor je eigen tekst.

Ik maak deze tekst op met behulp van alineastijlen en in dit geval de subkop.

Maar dan wel rechts lijnend, dus die aanpassing maak ik dan nog handmatig.

Ik kopieer deze tekst met commando C.

Dubbelklik dan in de volgende trigger.

Selecteer alle tekst met commando A en plak met Commando V de tekst van mijn klembord.

Met Commando A kan ik deze weer selecteren.

En de tekst vervangen en dit kan ik ook herhalen bij het laatste tekstkader.

Zie je naast deze trigger het +icoon?

Selecteer je selectie-gereedschap en selecteer de Composition.

Met het +icoon kun je een nieuw trigger- en target gebied creëren.

Zowel de trigger- als het target gebied zijn eerst leeg.

Je kunt hierin nu zelf illustratie- en tekstkaders in plaatsen, wat je maar wilt.

Maar je kunt ook een bestaand kader met opmaak en al kopiëren en hierin plakken.

Ik selecteer het tekstkader van deze trigger. Kopieer deze met Commando C.

Activeer mijn nieuwe lege trigger

En plak het tekstkader erin met Commando V.

Dubbelklik om in de tekst te komen en ik kan deze weer vervangen voor mijn eigen tekst.

Datzelfde kun je ook doen met het doel-gebied.

Een keer klikken in een bestaand doelgebied die al opgemaakt is.

ik kopieer dit tekstframe waarin de afbeelding verankerd staat op de tekstregel.

Want zo maak je een tekstomloop.

Ik selecteer mijn laatst toegevoegde trigger.

Daar staat naast een leeg target gebied.

Selecteer deze en plak dan het gekopieerde kader hierin.

Verplaats het kader naar de positie waar je hem wilt hebben staan.

De inhoud van de doelgebieden wil je natuurlijk ook zelf bepalen.

Ik ga de afbeelding vervangen. Via File > Place.

Navigeer in de oefenmap naar de map Assets en selecteer een afbeelding naar keuze.

Klik op Open.

En klik met de afbeelding één keer op de bestaande afbeelding om deze te vervangen.

Ook de teksten die hier nu in Lorem Ipsum staan kan ik nu zelf vervangen.

Maak de teksten altijd het liefste op met behulp van de alineastijlen.

Want deze kun je op afstand regelen.

Je ziet al wel dat het best veel werk is om de inhoud van al deze kaders te selecteren en op te maken.

Wijzig nu de content in deze Composition Widget voor elk kopje.

Eenmaal de content aangepast bekijk je deze weer in de preview.

Dit zijn de door mij gemaakte aanpassingen binnen de Composition Widget.