Navigatiebalk creëren (Widget Horizontal Menu)

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

Volgende video: Navigatie controleren

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.

Wat ook identiek op elke pagina terugkomt is de navigatiebalk.

Die gaan we nu creëren op een supersnelle manier met een Widget.

Open het oefenbestand.

Dubbelklik op de A-Master page om deze te openen.

Controleer eerst in het lagen-venster dat de juiste laag geactiveerd is.

De laag ‘header’ dus.

Ik klap deze ook alvast open zodat we kunnen zien wat erin zit.

We maken, zoals gezegd, gebruik van een ‘Widget’ om de menubalk te creëren.

Activeer het Widgets-venster in het venstergebied.

Als deze hier niet staat haal je hem tevoorschijn onder Window > Widgets Library.

In de lijst staat een map die ‘Menus’ heet. Klap deze open.

Er zijn twee soorten navigatie menu's, Horizontal en Vertical.

Klik op ‘Horizontal’ houd ingeklikt en sleep de widget ergens in de header.

Laat de muis los en een horizontale menubalk wordt geplaatst.

Je kunt de opties in eerste instantie even sluiten.

En kijk eens wat prachtig.

Automatisch is er een navigatiebalk gecreëerd...

...op basis van de pagina’s die we aangemaakt hebben in de Plan-Mode.

Superhandig en snel dus.

Je kunt de balk met het selectie-gereedschap oppakken en verplaatsen.

Rechts van de balk bij de blauwe cirkel en het witte pijltje.

Kun je de opties tevoorschijn halen.

In dit venster staan diverse opties en instellingen...

...waarmee je het gedrag en de inhoud van de navigatiebalk kunt bepalen.

In een later hoofdstuk ga ik hier alles over vertellen.

Op dit moment vind ik alleen de optie ‘Edit Together’ belangrijk.

Standaard staat deze optie actief.

En dat betekent dat zodra je één menu-item wijzigt.

De wijziging voor alle overige menu-items, van soortgelijke aard, wordt doorgevoerd.

Deze widget is opgebouwd uit verschillende elementen.

Samen vormen ze de widget.

Deselecteer door in de pagina op het niets te klikken.

De eerste keer dat je erop klikt selecteer je de widget.

Bovenin het Control-venster wordt dit bij de Indicator aangegeven als 'Menu'.

Om bijvoorbeeld het eerste menu-item te selecteren, dat is deze tekst, dubbelklik ik op dit tekstvlak.

In het Control-venster wordt dit tekstvlak aangegeven als een 'Label'.

Om de tekst te selecteren moet je nogmaals dubbelklikken op de tekst.

Nu heb ik daadwerkelijk de tekst geselecteerd.

Controleer dat ook bij de Indicator in het Control-panel. Hier staat nu 'text'.

En je bent van gereedschap gewisseld.

Als het goed is zie je nu dat het tekstgereedschap actief is.

Dit doet Muse automatisch voor je.

Als je tekst wilt gaan selecteren hoef je slechts te dubbelklikken op een stuk tekst.

En het selectie-gereedschap wisselt direct naar het tekst-gereedschap.

Ik kies in het Control-panel een ander lettertype, de Trebuchet.

Ik maak het corps groter. Corps .

En voeg witruimte toe tussen de letters toe.

De tekst past nu niet meer binnen de vlakjes.

Dat komt omdat de vlakken weer los staan van de teksten.

Activeer het selectiegereedschap in de gereedschappenbalk of gebruik de sneltoets ‘V’.

Deselecteer de huidige tekst-selectie door ergens in het document te klikken waar niets staat.

Klik opnieuw in op de widget.

En probeer dan op het grijze vlak te klikken naast het tekstkader.

De eerste keer selecteer je de widget.

De tweede keer heb je als het goed is het grijze kleurvlak geselecteerd.

Controleer dat je in het Controls-venster bij de Indicator 'Menu Item' ziet staan.

Als Fill ook een lichtgrijze kleur als vulling aangeeft.

Dan weet je dat het juiste vlak geselecteerd is.

Maak dit vlak breder. Alle overige vlakken worden ook breder.

Dit is zo prettig aan de optie ‘Edit Together’.

Wijzig één willekeurig element in de navigatiebalk.

En alle gelijkwaardige elementen wijzigen automatisch mee.

Fantastisch deze optie in Muse.

En wat ik ook zo gaaf vind.

Is dat vanaf nu elke wijziging in mijn Plan-Mode van de site ook direct wordt doorgevoerd in deze navigatiebalk.

Kijk maar. Ik ga naar Plan-Mode en ik wissel de pagina Sessie met Sprekers.

Daarna bekijk ik opnieuw een Preview.

De volgorde in de navigatiebalk is direct al doorgevoerd.

Dus vanaf nu kan ik eenvoudig pagina’s toevoegen, verplaatsen en verwijderen.

De navigatiebalk wordt continu ‘Live’ bijgewerkt.