Widgets toevoegen en vormgeven in Adobe Muse

Zorg dat uw stramienpagina is geopend voor bewerking in de ontwerpweergave en open de Widget-bibliotheek. Als deze nog niet is geopend, kiest u Venster > Widget-bibliotheek.

In het deelvenster Widget-bibliotheek klikt u op Menu's om de lijst met menuwidgets uit te vouwen. Afhankelijk van het ontwerp van uw site en waar u het menu wilt plaatsen, selecteert u een van de volgende opties:

• Horizontaal om een horizontaal menu toe te voegen.
• Verticaal om een verticaal menu toe te voegen.

Met de tool Selecteren sleept en plaatst u de widget op de gewenste plek in uw lay-out. U kunt bijvoorbeeld een horizontale menuwidget in de kop plaatsen.

Het menu toont automatisch de namen van de pagina's die u hebt gemaakt, in dezelfde volgorde waarin deze in het siteoverzicht worden weergegeven. De menulabels worden automatisch aan de pagina's gekoppeld en zijn dynamisch. En als u later besluit de pagina’s te wijzigen of te verplaatsen, dan wordt het menu automatisch bijgewerkt. De koppelingen blijven gewoon werken.

Klik op de kleurkiezer in het deelvenster Beheer en stel de kleur voor het menu in. Vervolgens gebruikt u het veld Tekengrootte om de tekstgrootte voor de tekst in het menu in te stellen.

Selecteer de menuwidget en klik op de blauwe pijl in de rechterbovenhoek van de widget. Het systeem geeft het deelvenster Opties weer.

De compositiewidget configureren via het deelvenster Opties U kunt de volgende opties configureren:

• Type menu: hiermee specificeert u welke pagina's moeten worden opgenomen in de sitenavigatie. Kies Toppagina's om uitsluitend pagina’s van het eerste niveau of bovenliggende pagina's op te nemen. Selecteer Alle pagina's om ook de subpagina's in de navigatie op te nemen. De onderliggende pagina's verschijnen als submenu's. Selecteer Handmatig om handmatig de gewenste pagina's weer te geven in de menuwidget.
• Richting: hiermee geeft u aan of u het menu horizontaal of verticaal wilt toevoegen. 
• Samen bewerken: schakel dit selectievakje in als u alle menu-items bij elkaar wilt bijwerken. Dit selectievakje is standaard geselecteerd. Als u dit selectievakje niet inschakelt, worden de configuraties die u kiest alleen toegepast op het geselecteerde menu-item.
• Itemgrootte: hiermee geeft u aan of de menu-items gelijkmatig moeten worden verdeeld op breedte of op grootte.
• Pictogram links tonen: dit selectievakje is standaard uitgeschakeld. Selecteer deze optie als u een pictogram in de linkerbovenhoek van elk menu-item wilt toevoegen.
• Label tonen: dit selectievakje is standaard geselecteerd. Wanneer u dit vakje uitschakelt, worden de menulabels niet langer weergegeven.
• Pictogram rechts tonen: selecteer Uit als u pictogrammen rechts wilt uitschakelen. Selecteer Aan als u pictogrammen in de rechterhoek van de menu-items wilt configureren. Pictogram rechts is een handige optie wanneer u pijlen wilt toevoegen om aan te geven dat er submenu's voor een menu-item zijn. U kunt ook kiezen voor de optie Alleen submenu's om alleen voor de menu-items die submenu's hebben een pictogram rechts te configureren.
• Plaatsing onderdelen: hiermee specificeert u het startpunt voor de interne onderdelen van ieder tabblad.

Dubbelklik en selecteer het menulabel dat u wilt bewerken.

Om de tekst in het menu-item te bewerken, opent u het deelvenster Tekst (Venster > Tekst). Selecteer het label en gebruik het deelvenster Tekst om de tekst op te maken door de benodigde opties te selecteren:

• Lettertype: selecteer het gewenste lettertype dat u op het menulabel wilt toepassen.
• Lettertypestijl: selecteer, indien nodig, Cursief of Vet voor het menulabel.
• Tekengrootte: selecteer de lettergrootte voor het menulabel.
• Kleur: voer in het vervolgkeuzeveld de hexcode in van de kleur die u wilt toepassen of selecteer de kleur van uw keuze via het pipet.
  

Gebruik het deelvenster Tekst om de margewaarden voor uw menulabel te configureren. Als u al een hyperlinkstijl hebt die u wilt toepassen op het menulabel, dan selecteert u de stijl in het vervolgkeuzeveld naast abc.

Om een alineastijl toe te passen, selecteert u de stijl in het vervolgkeuzeveld Alineastijl in het deelvenster Tekst.

Om Vulling en lijn op de menulabels toe te passen, dubbelklikt u op het menulabel om het te selecteren. Vanuit de werkbalk boven aan de pagina selecteert u de vulkleur en de lijnkleur. 

U kunt vanuit de werkbalk ook de Lijndikte bewerken en de straal van de hoekafronding voor de menulabels inschakelen.

Met behulp van de tool Selectie selecteert u het menulabel waarvoor u de rolloverstaat wilt maken. Open het deelvenster Staten. De standaardstaten van de knop zijn al gedefinieerd. Klik op de miniatuur Rollover in het deelvenster Staten om die staat te bewerken.

Terwijl het menulabel nog is geselecteerd, gebruikt u de vulkleurkiezer en kiest u geen vulkleur (transparant) door op het witte kleurstaal met de rode diagonale lijn te klikken.

Klik op het gereedschap Tekst en gebruik de kleurkiezer in het regelpaneel om een gebroken witte kleur voor de rolloverstaat te kiezen.

In het deelvenster Staten selecteert u de staat Muisknop ingedrukt. Terwijl de tool Tekst nog steeds is geselecteerd, stelt u de tekst van Muisknop ingedrukt in op een donkerdere kleur door de kleurstalen te selecteren in de kleurkiezer van het deelvenster Beheer.

In het deelvenster Staten selecteert u de staat Actief. Klik op de koppeling Vulling in het regelpaneel om het menu Vulling te openen.

Klik in het menu Vulling op de kleurkiezer en stel de vulkleur in op Geen. Klik op het mappictogram naast de sectie Afbeelding. Blader in het dialoogvenster Importeren dat verschijnt naar het bestand top-nav-over.png voor de achtergrondafbeelding. Klik op Selecteren om het te selecteren. Het dialoogvenster Importeren wordt automatisch gesloten.

Controleer in het menu Vulling of de optie Aanpassen is ingesteld op Oorspronkelijke grootte. Klik in het gedeelte Positie op de middelste van de negen punten. Hierdoor wordt de vulling van de achtergrondafbeelding weergegeven op een gecentraliseerde positie, zonder vulkleur en behoudt deze het oorspronkelijke formaat. Klik ergens anders om het menu Vulling te sluiten.

Aangezien de standaardoptie Samen bewerken in de menuwidget Horizontaal is ingeschakeld, worden alle wijzigingen aan het menulabel automatisch toegepast op alle knoppen op de navigatiebalk.

Kies Bestand > Opslaan om uw werk op te slaan. Klik op de X in het tabblad A-Master om de pagina in de ontwerpweergave te sluiten en terug te gaan naar de overzichtsweergave. U ziet dat alle miniaturen zijn bijgewerkt en de inhoud bevatten die aan de stramienpagina is toegevoegd.

Nadat u een sitemap voor uw site hebt gemaakt, gaat u naar de overzichtsweergave in Adobe Muse. We gaan er bij deze procedure vanuit dat u een sitemap hebt met pagina's bestaande uit Startpagina, Portfolio, Mijn verhaal, Contact en Producten.

Als u naar de stramienpagina gaat en een menuwidget sleept, dan ziet u dat alle pagina's worden opgenomen als onderdeel van het menu.

Om een specifieke pagina uit te sluiten klikt u in de overzichtsweergave met de rechtermuisknop op de pagina die u wilt uitsluiten. Klik op Menuopties > Pagina's niet in menu's weergeven.

Als u bijvoorbeeld de pagina Producten wilt uitsluiten, dan klikt u met de rechtermuisknop op Producten. Selecteer vervolgens Menuopties > Pagina's niet in menu's weergeven.

Als u nu terugkeert naar de stramienpagina om uw menu te bekijken, dan zult u zien dat Producten is verwijderd uit de menuwidget.

In gevallen waarin u een menuoptie zonder een koppeling wilt weergeven, klikt u met de rechtermuisknop op de desbetreffende pagina in de overzichtsweergave. Selecteer Menuopties > Pagina opnemen zonder hyperlink.

Deze optie is geschikt in verschillende gebruiksscenario's tijdens het maken van een website. Gebruik deze optie als u bijvoorbeeld een rolloverpagina Producten hebt waarop u wilt dat bezoekers alleen op productcategorieën, en niet het hoofdlabel Producten, klikken.