Objecten uitlijnen (Align)

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 lagen-venster en activeer de laag waarin je wilt werken.

Ik teken een kader met mijn rechthoek tekengereedschap een vlak.

En geef deze een vulkleur via het controls-panel bij Fill.

Dan activeer ik opnieuw weer mijn selectie-gereedschap.

Klik in op de rechthoek, houd de Alt-toets ingedrukt.

En sleep om de vorm te verplaatsen en ik wijzig direct de vorm.

Doe dit nogmaals een keer, wijzig opnieuw de vorm.

En met Alt-klik sleep ik nogmaals een kopie hieruit.

ik selecteer de hele rij aan kaders.

Om objecten op elkaar uit te lijnen.

Kun je de uitlijnopties, de Align-options gebruiken via het Control-venster.

Of via het specifieke hiervoor bedoelde Align-venster.

Deze staat in het venstergebied. Zo niet activeer deze dan bij Window > Align.

Ik sleep het Align-venster uit het venstergebied zodat deze in beeld blijft staan.

We beginnen met het horizontaal uitlijnen.

Want het betreft hier een selectie van vormen die horizontaal naast elkaar staan.

Dat doe je met deze opties in het uitlijn-venster bij Align Objects.

Je kunt uitlijnen aan de bovenkanten, de onderkanten en de middenpunten.

Wil je de tussenruimte gelijkelijk laten verdelen?

Gebruik dan de opties bij Distribute Spacing.

In ons geval druk ik dan eenmaal op de optie 'Horizontal Distribute Space’.

Wil je zelf een afstand voor de ruimte opgeven?

Dan moet je eerst een hoofdobject aanwijzen voordat je hier een getal in kan voeren.

Dat doe je als volgt. Kies een object uit binnen de selectie.

Klik hier nogmaals op en een dikke rand verschijnt om aan te geven dat dit nu het hoofdobject is.

het invoerveld wordt actief. ik kan hier zelf een waarde invoeren.

En klik dan weer één keer op 'Horizontal Distribute Space'.

Zie je dat het eerste object, dat als hoofdobject is aangewezen, op zijn plek blijft staan.

de overige objecten worden vergeschoven.

Ik heb deze optie nu voorgedaan met horizontale uitlijning.

Plaats nu zelf meerdere objecten onder elkaar en pas de verticale uitlijn-opties toe.

Experimenteer ook met het verticaal verdelen van tussenruimtes.

Licht ik nu de optie ‘Distribute Objects' toe.

In eerste instantie lijkt het heel vaak alsof deze opdracht helemaal niet verdeeld.

Toch is dit wel het geval.

Maak objecten van verschillende hoogte en breedte.

Ditmaal zet ik deze onder elkaar.

Selecteer de kaders.

En kies bij Distribute Objects voor uitlijnen aan de bovenkanten.

je kunt ook uitlijnen op de middelpunten of uitlijnen aan de onderkanten.

je kunt ook uitlijnen op de middelpunten of uitlijnen aan de onderkanten.

Wat wordt nu precies uitgelijnd, zou je jezelf kunnen afvragen.

De verdeling ziet er niet evenwichtig uit.

Als ik hulplijnen ga plaatsen zal dat snel genoeg duidelijk zijn.

De objecten zijn als laatste aan de onderkanten uitgelijnd.

Dus plaats ik hulplijnen aan de onderkanten van de objecten.

Bekijk goed de afstanden tussen deze hulplijnen, al deze afstanden zijn gelijk.

Het feit dat de objecten een verschillende hoogte hebben zorgt voor de verwarring. maar er wordt wel degelijk uitgelijnd.

Experimenteer nu zelf met het verdelen van objecten die horizontaal naast elkaar zijn geplaatst.

Dan de laatste optie.

Standaard worden uitlijn-opdrachten uitgevoerd ten opzichte van de huidige selectie.

Deze vind je terug bij de optie 'Align To'. Deze staat op 'Align to Selection'.

En ik lijn uit als opdracht aan 'alle bovenkanten'.

Je kut nog wel een ander hoofdobject aanwijzen binnen de selectie Je kut nog wel een ander hoofdobject aanwijzen binnen de selectie

Als ik nu uitlijn op de onderkanten, wordt de onderkant van die vorm aangehouden.

Je kunt ook kiezen bij 'Align to' voor 'Align to Content Area'.

Als ik nu de elementen horizontaal evenredig laat verdelen.

Dan wordt het meest linker object tegen de linkerrand geplaatst.

En het meest rechter object tegen de rechterkant van het document.

De overige objecten worden dan weer hiertussen uitgelijnd.

Voor verticaal geplaatste objecten geldt dan de boven- en onderkant van het document.

Welliswaar met respect voor de header en de footer.

Want de header en de footer behoren het eerste en het laatste element op de pagina te zijn.

Dus als ik deze selectie, die op het contentgebied staan, nu verticaal uitlijn.

Dan worden deze met respect van de header en de footer.

Uitgelijnd tussen de boven- en ondergrens van het tussenliggende contentgebied.