Navigatiemenu vormgeven (Navigation 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.

De hoofdnavigatie van een website maak je altijd op op de Master Page.

Alle pagina’s die gebaseerd zijn op deze Master Page tonen automatisch het menu.

Ook als je wijzigingen wilt aanbrengen in de vormgeving.

Hoef je dit slecht alleen op de Master Page te doen.

De wijzigingen worden automatisch doorgevoerd op alle pagina’s.

Onze hoofdnavigatie bevindt zich op de A Master page.

Open deze pagina.

We hebben dit hoofdmenu al heel in het begin gemaakt.

Maar nog niet echt de mogelijkheden ervan behandeld.

Dat doen we nu. Allereerst.

Het menu wordt automatisch gegenereerd op basis van de aanwezige pagina’s in de Plan Mode.

Ik zie hier menu’s.

Kijk ik naar de Plan Mode, dan zie ik pagina’s.

De pagina VIP is niet opgenomen in het navigatiemenu.

Je kunt namelijk zelf beslissen welke pagina’s je wel of niet wilt laten opnemen in het navigatiemenu.

Klik met de rechtermuisknop op een pagina.

En kijk in het contextuele menu onder ‘Menu Options’.

Met de optie ‘Include Page with Hyperlink’ wordt de pagina opgenomen in het navigatiemenu.

En direct voorzien van de juiste link naar deze pagina.

Kijk je op de VIP pagina naar de Menu Options.

Dan is deze op ‘Exclude Page forom Menus gezet.

Daarom is deze pagina niet opgenomen in de hoofdnavigatie.

Op deze manier kun je landingspagina’s maken die je bijvoorbeeld alleen voor een select publiek bekend maakt.

Bijvoorbeeld door de url naar deze pagina in een nieuwsbericht of mailingactie te plaatsen.

Om een en ander te kunnen laten zien breid ik de website uit met een paar subpagina’s.

Klik onder een huidige webpagina op het +-icoon om een subpagina aan te maken.

Geef de pagina een naam.

Klik dan links of rechts van deze pagina op het +icoon.

Om nog meer subpagina’s aan te maken.

Zorg dat elke pagina een aparte naam krijgt.

Ook de ‘Sessie-pagina’ geef ik een submenu met extra pagina’s.

Ga dan weer naar de A-Master page.

De snelste manier om een navigatie menu te maken is met behulp van een widget.

Open het venster Widgets Library, kijk bij de Menus.

Je kunt kiezen uit een horizontaal en verticaal menu.

Ditmaal kies ik om een verticaal menu te maken en demonstreer hierin de mogelijkheden.

Sleep de Widget Vertical naar de pagina.

Het Options menu wordt direct weergegeven.

Standaard staat Menu Type op ‘Top-Level Pages’

Dat houdt in dat enkel de hoofdpagina’s in de navigatiebalk worden opgenomen.

Kies hier voor ‘All Pages’ om ook de subpagina’s in het menu te laten opnemen.

Ik klik de opties weg. Het ziet er in eerste instantie een beetje vreemd uit.

Omdat de menu’s elkaar bedekken.

Voor een goede voorvertoning moet je eerst even door de menu's heen klikken.

Kijk! Nu worden de juiste submenu pagina's op de juiste momenten weergegeven.

Keren we weer terug naar de Options.

Bij de Direction kun je alsnog wisselen naar Horizontal.

Is dus best handig. Dat je dat later ook nog kunt doen.

Dan de optie ‘Edit Together’, die is erg belangrijk. Zorg dat deze aangevinkt staat.

Deze optie zorgt er namelijk voor dat als ik een item wijzig.

Alle soortgelijke items mee wijzigen.

Ik deselecteer het menu. Zodra je met de muis boven het menu gaat staan.

Geeft een tooltip dit ook weer. Selecteer het menu door een keer te klikken.

Ga boven een menu-item staan. een keer klikken om deze te selecteren

Sleep aan een selectiepunt van dit ene menu-item. Alle andere menu-items wijzigen mee.

Activeer in het Control-venster naast de Indicator de staat ‘Normal’ en kies een vulkleur uit.

Activeer dan de overige staten.

En kies voor elke staat een andere vulkleur.

Klik op het menu-item ‘Sprekers’ of ‘Sessie’.

Zie je dat deze menu-items niet gewijzigd zijn?

In de hiërarchie zijn deze namelijk niet gelijk aan de hoofdpagina’s.

Wat op zich weer heel fijn is.

Want meestal wil je juist ook de submenu’s voorzien van een andere vormgeving.

Selecteer één submenu-item.

Kies voor de verschillende staten weer aparte vulkleuren.

Stel dat je afstand tussen de submenu’s wilt.

Zodra je een submenu oppakt en verplaatst.

Dan verplaats je de volgorde van de pagina’s.

Op zich ook erg handig. Want zo kun je dus zelf de volgorde van de submenu-items bepalen.

Maar voor het toevoegen van extra witruimte tussen de menu-items!

Moet je niet een menu-item selecteren maar het hele menu. Zo dus!

Activeer onder Window het venster Spacing.

En bij de Vertical Gutter kun je nu de afstand tussen de menu-items groter en of kleiner maken.

We bekijken nu eerst even een voorvertoning in de browser.

Ga naar File > Preview Page in Browser.

Dit hoofdmenu reageert op mijn Mouse Overs en mijn submenu's idem dito.

We keren weer terug naar onze A-Master Page.

De rest leg ik uit met de hoofdnavigatie van onze website.

Ik verwijder dit nieuwe menu.

En ik verwijder ook direct alle pagina's die ik extra heb aangemaakt. Zo!

En dan activeer ik weer de A-Master page.

En we selecteren het hoofdmenu.

Controleer bij de options dat de optie ‘Edit together’ aangevinkt staat.

ik wil dat alle knoppen eenzelfde breedte hebben.

Maar bij Item-Size kun je ook kiezen voor een gelijke afstand.

Dus dan bepaalt de lengte van het woord het formaat van de button.

Ik zet deze terug op Uniform Size. Dan kan ik een button uitrekken.

En vanwege de optie 'Edit Together' wordt de vormgeving van alle menu-items aangepast.

Ik ga eerst de staten vormgeven.

Selecteer een menu-item. Activeer de staat Normal. Deze krijgt geen vulkleur.

Dan de staat Rollover. Deze krijgt de lichte kleurvariant.

Net zoals de staten Mouse Down en de staat Active.

Dan de tekst. Selecteer de tekst. Muse noemt de menuteksten ‘Labels’. Dubbelklik op een label.

De tekst zelf kun je niet selecteren.

Tenminste niet zoals je normaliter gewend bent. Dat je met de cursor tekens kunt selecteren.

Je moet net zolang dubbelklikken op de labels.

Totdat je in het Control-venster ziet dat je de teksteigenschappen kunt instellen.

Het lettertype en de font-size zijn al goed.

Ik wil alleen nog alle tekst in kapitalen plaatsen. Dus dat doe ik hier bij Text > Uppercase.

En bij de Indicator...

...zie je bij alle staten dat de tekst wit is. en dat vind ik voor nu prima.

Mocht jij kleurwisselingen willen hebben voor de andere staten, dan kun je dat nu hier regelen.

Tekstkleuren wijzigen doe je trouwens wel via het Text-venster.

Met Colour kun je de tekst in het tekstkader van kleur veranderen.

Controleer als laatste de website in een browser.

Ga naar File > Preview Site in Browser.

Of gebruik de toetscombinatie Commando Alt E.

Controleer de werking van de hoofdnavigatie.

Stel dat eigenlijk vind dat de afstand tussen de knoppen hier nog iets te krap is?

Dan kan ik dat zometeen nog aanpassen bij de Spacing.

Verder vind ik het er prima uitzien. Dus ik zou alleen die witafstand nog aanpassen.

Hiervoor selecteer je het selectie-gereedschap. Zorg dat je het hele menu selecteert.

Activeer dan Spacing en ditmaal krijg je de Horizontal Gutter.

En kan ik de afstand tussen de buttons iets gaan vergroten.

Kun je alsnog weer terugkijken bij preview Site in Browser.

En kijken dat je de afstand tussen de knoppen nu wel groot genoeg vindt. En ik vind dit prima!