Logo plaatsen in de header (Add Image)

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.

Een goed voorbeeld van een vast element op een master page is bijvoorbeeld het logo in de header.

Die moet het liefst altijd exact op dezelfde plaats staan.

Open het oefenbestand mus---.muse.

Activeer de A-Master page door hier op te dubbelklikken..

Open het lagen-venster. Zorg dat de laag ‘header’ geactiveerd is.

Want we willen de illustratie van het logo wel in de juiste laag plaatsen.

Ik klap hem alvast even open.

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

Navigeer naar de oefenmap.

Hierin staat een map ‘img’ en daarin bevindt zich het logo.

Selecteer het bestand en klik op Open.

Een voorvertoning van het logo verschijnt onder de cursor.

Klik eenmaal met de muis in het document en deze wordt geplaatst op het originele formaat.

Dit is een svg-bestand, een scalable vector graphic.

Het mooie van dit bestandsformaat is dat de vectorinformatie van de illustratie behouden blijft.

Dus vectoren blijven vectoren.

En vector-illustraties kun je oneindig vergroten en verkleinen.

Ze blijven altijd haarscherp want ze zijn resolutieloos.

Selecteer met het selectiegereedschap een hoekpunt en verklein de illustratie naar de gewenste grootte

Tijdens het slepen voel je al dat het logo proportioneel geschaald wordt.

laat de muis los. En daarna kun je deze nog positioneren.

Bekijk het resultaat in de Plan-mode. Alle pagina’s zijn nu voorzien van het logo.

Ik keer terug naar mijn A-Master Page.

We gaan het logo nogmaals plaatsen, maar dan in de footer.

Hiervoor zal ik eerst weer de juiste laag moeten activeren.

ik selecteer de laaf 'footer'. Klap deze ook alvast even open.

Ga opnieuw naar File > place. Kies het logo, klik op Open.

Ditmaal klik ik in en houd ik ingeklikt.

Sleep dan om zelf het formaat van het logo te bepalen waarop je deze wilt plaatsen.

positioneer dan ook dit logo naar de gewenste positie.

En bekijk opnieuw het resultaat in de Plan-Mode.

Alle pagina’s zijn nu ook voorzien van het logo in de footer.

Voor een voorvertoning van een pagina bekijk je deze in Preview.