Footer opmaken en vormgeven (footer design)

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 antwoord

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.

We gaan nu de footer vormgeven.

De huidige opmaak van de footer is afkomstig van de A-Master.

En omdat de B-Master weer gebaseerd is op de A-master.

Zal de footer straks ook automatisch bijgewerkt worden op de B-Master.

En alle pagina’s in de website die zijn verbonden aan de A- en de B-Master.

Activeer dus de A-Master Page.

Controleer in het lagenvenster dat de juiste laag actief staat. Dat is de laag ‘footer’.

Plaats dan het tekstbestand van de footer via File > Place.

Of gebruik de toetscombinatie Commando D.

Ga naar de oefenmap. Hierin staat een map ‘text’ en daarin het tekstbestand ‘footer.txt’.

En die gaan we plaatsen via Open.

Klik eenmaal in de pagina.

Controleer dat de tekst in de laag 'footer' staat.

Als je per ongeluk onderdelen in de verkeerde laag hebt gezet, is er nog niets aan de hand.

Het is vrij eenvoudig om selecties te verplaatsen naar andere lagen.

Selecteer het kader met het selectie-gereedschap.

In het lagenvenster verschijnt een gekleurd selectievlakje achter de naam van de laag.

Klik in op het gekleurde selectievlakje, houd ingeklikt.

En sleep het vlakje naar de juiste laag.

Het gekleurde selectievlakje wordt verplaatst naar de nieuwe laag.

Elke laag krijgt automatisch een andere selectiekleur

Dus daaraan herken je ook al in welke laag een object zich bevindt.

Ik verplaats deze terug naar de 'footer'.

En deze zal dan een rode selectiekleur krijgen.

Knip de drie tekstblokken op in aparte tekstkaders.

En positioneer deze in het footergebied.

Maak één van de tekstblokken op.

Ik zet eerst alle tekst om in het lettertype Trebuchet.

Ik zet het corps op pixels en maak de tekstkleur wit.

Zet de tracking op iets als '' om iets meer lucht tussen de letters te krijgen.

Zodra je typografie kleiner dan pixels plaatst.

is het aan te raden om witruimte tussen de letters op te nemen.

Hierdoor wordt tekst in een klein corps beter leesbaar.

Ik zet de tracking op

En ook een hogere interlinie draagt bij aan de leesbaarheid. Die zet ik op %.

De eerste alinea’s zijn koppen. Deze maak ik vet.

En ik zorg ervoor dat er iets meer afstand wordt aangehouden tussen de kopjes en de teksten eronder.

De tekstafstanden regel je in het tekst-venster.

Dit venster kun je ook benaderen door op het woord ‘Text’ te klikken in het Control-venster.

Bij de optie ‘Space after’ zet ik de witruimte erna op pixels.

Enter om te bevestigen.

Zo! Dan is het handig om van deze opmaak weer alineastijlen te maken.

Ik selecteer de kop.

Ga naar Paragraph Styles. Voeg op basis van deze opmaak een alineastijl toe.

En geef deze een herkenbare naam, bijvoorbeeld 'footer-kop'.

Selecteer de footertekst. of een deel ervan. Al voldoet het eigenlijk ook om met de muis in de alinea te gaan staan.

En herhaal hiervoor hetzelfde.

Nieuwe Paragraph Style, dit is 'footer-brood'. Enter om te bevestigen.

Nu kun je de overige teksten in dit footer-blok met behulp van deze stijlen gaan opmaken.

bewaar de A-Master Page. Je kunt gaan naar File > Save Site.

En activeer de Plan-Mode

Zoals je ziet is de B-Master page nu ook voorzien van de footeropmaak.

Net als alle ander pagina’s die gebaseerd zijn op de A- en B-master.

Activeer een pagina en bekijk eventueel nog het eindresultaat bij Preview.

De pagina’s zijn nu grotendeels vormgegeven.

In het volgende hoofdstuk gaan we onze website voorzien van interactieve elementen

Als een fotogallerij.

Het maken van interne en externe links.

En interactieve buttons etecetera.