Design Trainingen

Muse Website Bouwen

<<< terugHTML basicsCSS basicsdreamweaver basicsdreamweaver xhtml websiteresponsive html5 websiteinteractive code tricswordpress website hosting & webserverwebsite beheer & cms


Waarom een Muse website leren bouwen?

In dit programma maak je een eigen e-portfolio. Deze heb je nodig om jezelf en je werk online te presenteren aan bijvoorbeeld stagebureaus en mogelijke werkgevers/opdrachtgevers.

Je kunt zelf coderen en programmeren, maar ook gebruik maken van bestaande tools, zoals Wordpress en Muse. Ook heb je nog online website-tools, zoals bijvoorbeeld Froont, Wix en Tumbler.


Adobe Muse is een relatief nieuwe WySyWyG (what you see is what you get) website bouwer, waarin code nauwelijks meer zichtbaar is, enkel de vormgeving.

Bekijk een video

VOORDELEN MUSE:
Een zeer geschikt programma voor vormgevers die niet met de code achter een website bezig willen zijn. Muse maakt gebruik van een interface die lijkt op die van InDesign. In de nieuwste versie van Muse (!) kun je prima responsive websites bouwen. In oudere sites maakte Muse voor verschillende apparaten ook verschillende websites. Dat was niet zo praktisch...

Ook zijn er websites waar je Betaalde Muse Templates of  Gratis Muse Templates kunt downloaden. Zo kun je er ook voor kiezen om je enkel bestaande templates aan te passen.

Je kunt met een Adobe Cloud account direct online een test publiceren via Adobe Business Catalist. Hierdoor staat je site direct online.

NADELEN MUSE:
Het werken in code is logischerwijs flink beperkt. Uitgebreide functies zoals database-koppelingen en bouwen interactieve formulieren zijn beperkt of (nog) niet mogelijk.

VIDEO TRAININGEN MUSE:
Muse beschikt net als veel andere Adobe programma's over een prachtige video training die je de basis van het programma uitlegt. Deze video training kun je starten via het dialoogvenster dat bij opstarten van het programma wordt geopend.

Start met het leren van Muse dus met de basis-training in het programma zelf


MUSE QUICK BASICS TUTORIAL

Muse lijkt veel op InDesign en Illustrator. Je zult er dan ook snel de weg in kunnen vinden. Uiteraard is een basis instructie wel erg handig om snel op gang te komen. Via onderstaande tutorial maak je enevoudig je eerste website. Er zit oefenmateriaal bij.

download Demo Muse-bestand
bekijk Demo Muse online

NB: Deze demo bevat ook enkele problematische toepassingen, waardoor je ziet welke beperkingen er kunnen zijn. Vooral bij scrollen in combinatie met vastzetten van vormen en responsive layout, is dit goed zichtbaar.

Indelen en opzetten van de site-structuur doe je in de sitemanager.
De pagina-naam en pagina-volgorde wordt later gebruikt in het menu.

Door met de muis over een pagina-icoon te gaan, verschijnen er plus-icoontjes, waarmee je nieuwe pagina kunt aanmaken. Ook kun je pagina slepen/schuiven, waardoor de pagina-volgorde verandert.

In het onderste deel staat de Stramien-pagina. De layout van deze pagina staat ook op alle andere pagina's. Vergelijkbaar met de Basis-pagina van InDesign.

 

De layout op de Stramien-pagina
Vormgeven doe je met vector-vormen, zoals dat ook in Illutrator/InDesign werkt.

Vormen kunnen vlak- en lijn vulling, schaduw, rondhoeken en transparantie hebben.

Vormen behouden in de browser de hoogte en breedte, zoals in getekend in het ontwerp.
Uitzondering: Door een vorm over de volledige breedte van de pagina te trekken (rode rand om de vorm licht op), blijft deze altijd even breed als het browservenster (100% breedte).

Je kunt vormen VASTZETTEN aan de boven-zij of onderkant. Bijvoorbeeld voor een header- en footer balk. Vormen die vastgezet zijn, scrollen niet mee.

 

De vormgeving van de Stramien-pagina, wordt door alle pagina's overgenomen.
Door op een pagina te dubbelklikken, kunnen pagina-specifieke elementen, zoals tekst en beeld, worden toegevoegd.

 

Werken met typografie in Muse gaat grotendeels hetzelfde als in Illustrator.

Maak gebruik van alinea-tekenstijlen en kleur-stalen (swatches) om sneller overal dezelfde typografie toe te passen.

Voeg de Social Media-iconen in via de Widget-Bibliotheek: SOCIAL MEDIA en sleep een medium naar de gewenste plek op de pagina. Door een medium te selecteren, verschijnt er rechtsboven in het selectiekader een blauw pijltje. Klik hierop voor een aantal menu-opties. Experimenteer hiermee.

 

Invoegen van afbeeldingen kan met de knop: Plaatsen (zoals in veel andere Adobe-programma's)

Indien je in een vorm een achtergrond-afbeelding wilt gebruiken, klik dan op het oranje woord: VULLING, bovenin de optie-balk. Er verschijnt dan een pop-up venster met opties, o.a. voor achtergrond-afbeeldingen.

Achtergrond-afbeeldingen repeteren standaard, zodra het kader groter wordt dan de achtergrond-afbeelding. Dit kun je ook uitzetten of de afbeelding als patroon-vulling gebruiken.

 

Knoppen en hyperlinks maken
Selecteer een afbeelding, een vorm of een stukje tekst.
Kies: HYPERLINKS, bovenin de optie-balk, de gewenste pagina of voer een url in.

De vormgeving van o.a. de Rollovers (hover) kun je selecteren en bewerken via het venster: STATEN. Selecteer de staat die je wilt wijzigen en pas de vormgeving aan.

 

Een menu is gebaseerd op de pagina-namen en pagina-volgorde.

Plaats het hoofdmenu altijd op de Stramien-pagina. Dan nemen alle andere pagina's die automatisch over.

Kies in de Widget-blibliotheek voor: MENU en sleep een horizontaal of vertikaal menu naar de gewenste plek op de pagina. Door het menu te selecteren, verschijnt er rechtsboven in het selectiekader een blauw pijltje. Klik hierop voor een aantal menu-opties. Experimenteer hiermee.

Door rustig te dubbelklikken op een menu-knop kom je steeds dieper in de menustructuur en menu-elementen (knop-->tekst-->submenu-->knop-->tekst-->subsubmenu-->etc.). Je kunt dan steeds de lijn-vul-tekstkleur aanpassen. Zodra je de vormgeving van een submenu-knop aanpast, veranderen alle andere submenuknoppen mee. Dit gaat per submenu. Toch kun je gemakkelijk een paar knoppen vergeten te stijlen. Controleer dus goed of ze allemaal dezelfde vormgeving hebben.

De vormgeving van o.a. de Rollovers (hover) kun je selecteren en bewerken via het venster: STATEN. Selecteer de staat die je wilt wijzigen en pas de vormgeving aan.

 

Slideshow, uitklap-vensters, formulieren en andere Widgets...

Voor interactieve toepassingen maak je gebruik van Widgets (net als bij het menu en social media). Kies de gewenste Widget en sleep deze op een pagina. Door rustig te dubbelklikken kom je dieper in de widget, waar je per element kunt stijlen of een vorm naar de gewenste prositie kunt slepen.

Daarnaast heeft Muse een prachtige Widget voor Parallax Scrolling (meerdere scrollsnelheden). Start met een bestaande template om deze scroll-techniek beter te begrijpen.

Hieronder enkele Widgets:

Contactformulier
Google maps

Deelvenster met Tabs

Miniaturen met foto's
TIP: plaats de miniaturen mooi op de pagina en de grote vertoning (slider) naast de pagina. Dat werkt overzichtelijker. Je kunt de miniaturen ook afzonderlijk stijlen door er rustig op te dubbelklikken. Via het STATEN-venster kun je er ook nog een eigen rollover-stijl aan toekennen.

 

Voorvertonen van de website
Kies rechtsboven in Muse: VOORVERTONING. Deze laat de reeds geopende pagina zien.
Kies via BESTAND in het menu: VOORVERTONING VAN SITE WEERGEVEN



 

Publiceren als demo via Businesscatalist.com
Kies rechtsboven in Muse: PUBLICEREN en vul de gegewenste gegevens in.



Je website staat nu als demo online!

Complete website (bestanden en code) exporteren naar je computer
Klik rechtsboven in Muse op het uitklap-menu rechts naast PUBLICEREN en kies: EXPORTEREN ALS HTML

Nu je de basis functionaliteit van Muse hebt gezien, kun je de onderstaande tutorial maken.

Maak met deze Adobe tutorial je eerste Muse-website >>