Werken met lagen (Layers)

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.

Open het oefenbestand mus---.muse.

En open de A-Master Page door hierop te dubbelklikken.

Het is verstandig om jezelf direct vanaf het begin aan te leren om in lagen te werken.

Open het lagen-venster.

Deze vind je in het venstergebied of onder Window > Layers.

Op dit moment staan alle elementen die we getekend hebben in één laag. Namelijk Layer .

Deze gaan we hernoemen.

Dubbelklik op de naam ‘layer ’, een venster verschijnt.

Met daarin de naam alvast actief.

Dus je kunt direct gaan typen en we hernoemen deze naar 'header'.

De huidige selectiekleur is lichtblauw en dat vind ik prima. Klik op OK.

Nu staat alles in deze laag.

We maken een nieuwe laag aan.

Klik onderin het lagen-venster op het pictogram ‘New Layer’.

Een ‘Layer ’ wordt aangemaakt, dubbelklik op de naam en hernoem deze naar ’footer’.

En klik op OK.

Om een element van de ene laag te verplaatsen naar een andere laag doe je het volgende.

Selecteer een element.

Je herkent aan de selectiekleur in welke laag deze staat.

Blauw is de kleur van de ‘header-laag’.

Je ziet ook een blauw puntje in het vlakje achter de header-laag.

Dit puntje vertegenwoordigd het geselecteerde.

Dat kan één element zijn, zoals nu. Maar ook meerdere geselecteerde items.

Verplaats het puntje van de laag naar de nieuwe laag ‘footer’.

Aan de rode selectiekleur van het element in het document herken je dat deze nu in een andere laag staat.

En het vlakje achter de naam van de laag geeft aan dat het huidig geselecteerde zich in die laag bevindt.

Maak nogmaals een laag aan en noem deze ‘content’.

Enter om te bevestigen.

In deze laag maken we straks de inhoud van de pagina’s aan.

Vanaf nu moet je er wel op letten welke laag geactiveerd is als je een element plaatst.

Want nieuwe elementen worden altijd in de huidig actieve laag geplaatst.

De volgorde van lagen is bepalend voor de stapelvolgorde.

Dus de elementen in de bovenste laag liggen dan ook altijd bovenop.

Het fijne van lagen is dat je deze snel kunt verbergen, door het oog-icoon uit en aan te klikken.

je kunt ze op slot zetten door het slot-icoon te activeren. Dan kun je deze niet meer verplaatsen.

En ook bij het selecteren van elementen biedt het lagen-venster vaak uitkomst.

Klik alle lagen open en je ziet precies wat er allemaal in zit.

Klik op het vlakje achter de naam van het element en je selecteert deze.

Ik teken in de laag 'header' een nieuw vlak.

Ik geef deze een vulkleur mee die opvalt.

Selecteer het selectie-gereedschap.

En verplaats de laag in de stapelvolgorde.

Nu staat deze onderop en wordt bedekt door het bovenliggende kleurvlak.

Alleen al daarom is het handig dat je ook deze manier elementen kunt selecteren.

Via het lagen-venster kan ik hem nu makkelijk selecteren.

En in de stapelvolgorde weer verplaatsen.

Om meerdere elementen te selecteren, houd je de Shift-toets ingedrukt.

Terwijl je op meerdere selectievlakjes klikt.

En je kunt natuurlijk ook heel snel alle elementen uit een laag selecteren.

Ik deselecteer.

En klik nu een keer op het selectievlakje achter de naam van de laag.

Automatisch worden dan alle elementen binnen die laag geselecteerd.

Om een selectie ongedaan te maken.

Kun je eenmaal klikken in de pagina waar geen element aanwezig is.

Om een element te verwijderen kun je ook de laag selecteren.

En dan op de backspace-toets drukken.

Of selecteer het element op de pagina en gebruik dan de Delete-toets of backspace-toets.