Eigenschappen voor website instellen (Site Properties)

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.

We hebben bij het aanmaken van een nieuwe site allerlei zaken bepaald als de breedte...

...minimale hoogte, een kolomstramien etcetera.

Wat als je tijdens het ontwerpen bepaalde site-eigenschappen zou willen veranderen.

Dan hoef je niet overnieuw te beginnen maar pas je dit aan bij de Site Properties.

bepaal eerst welke pagina je wilt activeren.

Als ik de wijziging wil doorvoeren voor alle pagina’s.

Dan moet ik de Site Properties aanpassen van de A-Master page.

Dus dubbelklik op de A-Master-Page.

Deze wordt geopend in een apart tabblad.

Dit herken je ook aan de naam in het tabblad.

Je ziet dat het kolomstramien strak aan de linkerkant start en rechts eindigt.

Hier wordt geen afstand aangehouden.

Maar ik wil niet dat de tekst strak tegen en vanaf het browservenster komt te staan.

Dus pas ik dit aan bij File > Site Poperties.

Het kolomstramien moet dus een afstand meekrijgen naar links en rechts.

Hiervoor wijzig ik de ‘Margins’ voor ‘Left’ en ‘Right.

Deactiveer eerst het kettingsymbool om enkel links en rechts te kunnen wijzigen.

En een afstand van pixels mee te geven.

Want boven en onder aan de pagina hoef ik geen afstand.

Het kolomstramien houdt nu pixels afstand aan naar links en rechts.

Waar de padding voor dient is nu wat moeilijker uit te leggen. Maar ik probeer het.

Allereerst voer ik deze wijziging door en klik op OK.

Het vlak waarin je de webpagina ontwerpt kun je een vulkleur geven bij 'Fill'.

Ik maak deze geel.

Het browservenster waarin de pagina getoond wordt kun je ook een vulkleur geven.

Dit doe je bij Browser Fill. En die maak ik groen.

ik bekijk een voorvertoning van de pagina via 'Preview'.

Het browservenster is breder dan de pixels breedte die ik voor de pagina heb ingesteld.

Je ziet de groene achtergrondkleur van de Browser Fill links en rechts naast het paginaformaat.

De website staat gecentreerd in het browservenster.

Ik keer terug naar de ‘Design Mode’ en dan weer naar de ‘Site Properties’ bij 'File'.

Ditmaal zet ik de Padding-Top ook op pixels. Klik op OK.

Je ziet direct al een verandering.

De eerste pixels zijn transparant.

En daardoor zie je de groene vulkleur van het browservenster verschijnen.

De hele webpagina wordt pixels naar beneden verschoven.

Het -punt van mijn pagina begint nu ook pixels lager.

Dus met de Padding verplaats je een webpagina ten opzichte van de browserranden.

Bekijk dit ook nog even in de 'Preview'.

Het is dus wel belangrijk dat je het verschil begrijpt tussen het instellen van de ‘Margins’ of de ‘Padding’.

Met de 'Margin' voer je afstand in vanaf de paginarand.

En met de 'Padding' bepaal je de afstand van de webpagina vanaf de browserrand.