Meerdere basispagina’s toepassen (Extra Master pages)

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 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.

Werk door aan het bestand van de vorige oefening of open het bestand uit de oefenmap.

Binnen een website maak je soms gebruik van meerdere basispagina’s.

Meestal baseer je een nieuwe Master Page op een bestaande.

En pas je hier bepaalde wijzigingen in toe.

Dan kun je gaan bepalen welke pagina’s verbonden moeten worden met de nieuwe master page.

We maken een nieuwe Master Pag aan.

Klik op het + icoon naast de A-Master.

Een nieuwe Master Page verschijnt en deze heet automatisch B-Master.

Je mag deze een andere naam geven als je dit prettig vindt.

Ik laat de naam gewoon staan.

Deze Master Page is nergens op gebaseerd, dat herken je aan de term [No Master].

Ik zou deze Masterpage een geheel andere vormgeving kunnen geven, maar dat ga ik dus niet doen.

Ik wil eigenlijk dezelfde layout als de A-Master, maar dan met een paar toevoegingen.

Het wordt vanzelf wel duidelijk waarom.

Om de A-Master toe te passen op de B-Master.

Sleep ik het pictogram van de A-Master bovenop de B-Master.

Zodra deze oranje kleurt laat ik los.

Nu is de B-Master gebaseerd op de A-Master.

Om dit ongedaan te kunnen maken doe je het volgende.

Klik met de rechtermuisknop of de Control-toets ingedrukt op het pictogram.

In het contextuele menu verschijnen een aantal opties.

Je kunt een nieuwe Master Page maken, dat wordt dan een C-Master.

Je had de huidige Master-Page ook kunnen dupliceren.

Op die manier hadden we zojuist ook de A-Master kunnen dupliceren om deze nieuwe te krijgen.

Je kunt de pagina verwijderen, hernoemen of openen.

En helemaal onderaan zie je of deze pagina gebaseerd is op een andere Master Page.

Kies je hier voor ‘No Master’ dan wordt deze weer ontkoppeld.

Ik dubbelklik op de B-Master Page om de pagina te openen.

Bovenin de header wil ik een extra afbeelding plaatsen en tekst.

Zorg dat je selectie-gereedschap actief is.

De huidige elementen zijn afkomstig van het A-Stramien.

En je zult zien dat je deze niet kunt oppakken, selecteren of verplaatsen.

Ze zijn beschermd voor aanpassingen.

Als ik hier iets wil wijzigen dan zal ik dat op de A-Master page moeten doen.

Activeer het venster > lagen.

Zorg ervoor dat de laag ‘header’ actief is. Dat is de laag waarin we gaan werken.

Ga dan naar File > Place, of gebruik de toetscombinatie Commando D.

Navigeer naar de map ‘img’, selecteer het bestand ‘webaward.png.

En klik op Open. Deze verschijnt onder de cursor.

Klik hiermee één keer in beeld en hij wordt op ware grootte geplaatst.

Ik maak hem kleiner door een hoekpunt op te pakken en te verslepen.

Standaard vergroot of verklein je afbeeldingen proportioneel.

Ik plaats deze bekroning aan de rechterkant in de header.

Je mag elementen laten uitsteken als je dat wilt.

Feit dat wij een gebied hebben bepaald voor de Header met de horizontale header-begrenzing.

Wil niet zeggen dat we alleen maar exact binnen dit gebied elementen mogen plaatsen.

Je moet alleen wel uitkijken dat dit niet straks de content van het inhoudsgebied zal gaan bedekken.

Dan plaats ik boven het navigatie-menu nog een tekst.

Tekstbestanden kun je ook plaatsen net als afbeeldingen en illustraties.

Ga naar File > Place.

Navigeer in de oefenmap naar het tekstbestand. ‘webevent.txt’ en klik op Open.

Nu hangt er een voorvertoning van een tekstbestand onder de cursor.

Klik ergens op de pagina om de tekst te plaatsen.

Als je één keer klikt maakt Muse zelf het tekstkader aan.

Dubbelklik in het tekstkader om het tekst-gereedschap te selecteren.

Selecteer alle tekst. klik achterin in, houd in geklikt en sleep over de tekens.

Maak de tekst op zoals je dit wilt.

Ik maak het font wat groter. Deze zet ik op pixels.

Ik kies de trebuchet uit en de lichte kleurvariant voor de tekstkleur.

Wissel dan weer met het selectie-gereedschap.

Zorg er altijd voor dat het tekstkader voldoende ruimte biedt voor de tekst.

In sommige browsers kan de tekst namelijk iets uitlopen.

En als ik wil dat deze tekst altijd op één regel blijft staan.

Zorg ik ervoor dat het kader breed genoeg is.

Ik wil de tekst boven het navigatiemenu plaatsen.

Dan wil ik de menubalk wat naar beneden verplaatsen.

maar op deze pagina kan ik de balk niet verplaatsen.

Alle onderdelen die afkomstig zijn van de A-Master kun je hier niet wijzigen.

Daarvoor moet ik terugkeren naar de A-Master page.

Dubbelklik op A-Master Page.

En hier verplaats ik de balk wat naar beneden

Dan keer ik weer terug naar mijn B-Master.

En zet het tekstkader op de juiste positie. keer terug naar de Plan-Mode

Ik wil deze nieuwe basispagina toepassen op alle pagina’s behalve de Homepage.

Sleep dan het pictogram van de B-Master naar de pagina’s en laat pas los als deze oranje opkleuren.

Je kunt ook op een pagina in klikken met de rechtermuisknop ingedrukt op een pagina.

En uit het contextuele menu kiezen voor Masters en wisselen naar B-Master.

Bekijk dan een Preview van de website.

Op de Homepagina bevindt zich niet de tekst en het logo.

Maar op alle overige pagina's staat deze wel.