Elementen positioneren en gedrag bepalen (Positioning & Resize)

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

Volgende video: Werken met lagen (Layers)

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 gaan kleurvlakken maken en positioneren voor de header en de footer.

Selecteer het rechthoek tekengereedschap in de gereedschappenbalk.

Je hebt er twee.

Een om kleurvlakken mee te maken.

En één die specifiek bedoeld is om afbeeldingen en illustraties in te plaatsen.

Dat zijn de kaders met een kruis erin.

Wij selecteren het rechthoekig kleurvlak gereedschap.

Of gebruik hiervoor de sneltoets ‘M’.

Klik hiermee in ergens in de ruimte van de header, houd ingeklikt en sleep een vlak.

Activeer daarna het selectiegereedschap in de gereedschappenbalk

Of gebruik de sneltoets ‘V’.

Klik in op een hoek selectiepunt en verplaats deze.

Zorg ervoor dat het vlak precies pixels wordt

Dit kun je controleren bovenin het Control-venster maar ook in het Transform-venster.

De x- en de y-positie moeten op staan.

Met het kader actief kies je in het Control-venster bij ‘Fill’ een vulkleur.

Je kunt hier ook een nieuwe kleur toevoegen.

Als je de hexadecimale code van een kleur weet, kun je die hier invoeren.

Typ .

En klik dan op het pictogram ‘Add Swatch’.

Een kleuren-venster verschijnt waarin je de kleur nog kunt wijzigen.

Klik op OK om de kleur toe te voegen aan het stalenpalet.

We trekken ook een kleurvlak voor de footer. Dus ik ga opnieuw naar mijn Rectangle Tool.

Ik klik en sleep een vlak.

Controleer dat ook deze het hele footergebied beslaat.

De x-positie moet op staan. De y-positie op .

Het vlak moet exact pixels breed en pixels hoog worden.

Activeer opnieuw het selectie-gereedschap.

Zorg dat het kleurvlak nog geselecteerd is.

En maak opnieuw een kleur aan.

Ga naar ‘Fill’. Klik ditmaal direct op het pictogram ‘Add Swatch’.

Want ook hier kun je de hexadecimale kleurwaarde intypen.

En dat is voor onze kleur AB. Klik op OK.

Bewaar dit bestand en keer terug naar het overzicht van de website. Ik klik op plan.

Alle pagina’s gekoppeld met het A-Stramien tonen allemaal hetzelfde uiterlijk.

Dan nog één belangrijk ding.

We hebben er in het begin voor gekozen om een ‘fluid’-website te gaan bouwen.

Dat kan ik je laten zien bij de Site Properties. Ga naar File > Site Properties.

Deze staat op 'Fluid With'.

Dit houdt in dat de elementen op de pagina automatisch geschaald worden als het browservenster smaller wordt.

Ik ga naar OK. Ik bekijk een voorbeeld van de pagina in de 'Preview Mode'.

De pagina is pixels breed, maar deze elementen lopen over de volledige breedte van het browser-venster.

Ik keer terug naar mijn Plan-Mode en activeer de A-Master Page.

Je zult per element moeten bepalen hoe deze zich moet gaan gedragen binnen het browservenster.

Vooral elementen die over de gehele breedte van de webpagina lopen zijn hier gevoelig voor.

Deze kan namelijk de breedte van het browservenster aanhouden, zoals wij nu hebben.

Of de opgegeven breedte van de webpagina. Dat moet je zelf bepalen.

Anders wordt een standaard instelling aangehouden.

Ik selecteer het kleurvlak van de Header. Je bepaalt het gedrag bij 'Resize'. En deze vind je terug in het Control Panel.

Deze staat bij mij ingesteld op 'Stretch to browser Width'.

Ook het footer kleurvlak staat hierop ingesteld.

Ik zet deze op 'Responsive Width' en hetzelfde doe ik met de Header.

Deze zet ik ook op 'Responsive Width'.Ik bekijk opnieuw een Preview.

Ditmaal houden de kleurvlakken de breedte van mijn website aan. Namelijk pixels.

Onthoud dat als je een element tekent van paginarand tot paginarand.

Dat je dan niet moet vergeten om het gedrag hiervan de bepalen bij 'Resize'.

Later in de cursus leer je veel meer over het responsive maken van de website.

Maar voor nu is, in ieder geval, dit alvast heel erg belangrijk.