Elementen vastzetten (Pinning)

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.

Met Pinning kun je de positie van elementen vastzetten.

Standaard worden de huidige afstanden die de elementen hebben op een pagina...

... proportioneel geschaald als het scherm breder of smaller wordt.

Daarom zie je dat elementen als het ware gaan ‘lopen’.

Dit noemen webdesigners de natuurlijke flow.

Voor veel elementen op de pagina is dit vaak een prima oplossing. Maar niet altijd.

Open vanuit de Plan Mode De A-Master Page.

Ik wil even heel goed kijken hoe de header en de footer zich aanpassen bij een smaller scherm.

Het logo wordt proportioneel verkleind en lijnt aan de bovenkant uit.

De menu-items gaan elkaar op een gegeven moment overlappen.

Want de gehele menubalk schaalt proportioneel met de smaller wordende pagina.

Ik zet de pagina weer terug op het normale formaat.

Selecteer het logo. Ik wil niet dat het logo kan schalen, dus zet ik Resize op ‘None’.

De hoofdnavigatie verplaats ik naar rechts. En lijn deze rechts uit met de laatste kolomlijn.

Ik wil ook niet dat deze gaat schalen dus zet ik ook hiervoor de Resize op ‘None’.

Maak het scherm opnieuw smaller.

Zowel het logo als de hoofdnavigatie schalen niet meer.

Maar al vrij snel verdwijnt daardoor een deel van de navigatie uit beeld. Dat kan natuurlijk niet.

Hiervoor moet ik sturing gaan geven aan de positie.

Selecteer de navigatiebalk en bepaal bij Pin welk punt je wilt gaan vastzetten op een vaste positie.

Ik wil dat de rechterkant vast wordt gezet aan de rechterkant van mijn webpagina.

De Pin-opties tonen drie oriëntatiepunten voor de rechterkant.

Het verschil tussen deze drie opties zal ik proberen uit te leggen.

Deze oriëntatiepunten zetten de rechterkant van het element vast op het browservenster.

En deze ernaast zet ook de positie vast maar dan binnen de pagina of het omsluitende kader.

Ik begin met het vastzetten op browservenster.

Ik activeer het rechter oriëntatiepunt.

Hiermee zet ik de menubalk vast aan de rechterkant van het browservenster.

Zowel de verticale afstand van de bovenkant van de pagina naar het element.

Als de horizontale afstand van de rechterkant van de pagina naar de rechterkant van het element.

Dit wordt visueel aangegeven door stippellijntjes.

Ga naar File > Preview Site in Browser.

Het eerste wat opvalt is dat de menubalk buiten het paginaformaat loopt.

Maak het scherm smaller. Het navigatiemenu behoudt dezelfde afstand ten opzichte van het browser-venster.

Keer terug naar de A-Master Page. Selecteer het menu en wijzig nu het oriëntatiepunt naar de onderste zijde.

Deze doet hetzelfde maar dan met de verticale afstand van de onderkant van de pagina naar het element.

Deze optie is voornamelijk bedoeld voor elementen die dichtbij de onderkant staan.

En op die afstand ook moeten worden vastgezet.

Dus feitelijk is deze niet geschikt voor de menubalk. Maar ik wil je toch even laten zien wat er dan gebeurt.

Om dat snel duidelijk te maken geef ik de menubalk even een vulkleur mee.

Zodat direct opvalt wat er gebeurt op de pagina.

Open de pagina weer in browser.

Ik zie nu al direct dat mijn menubalk niet meer op zijn plek staat. Scroll naar beneden.

Kijk daar komt mijn menubalk tevoorschijn. Hij was verborgen achter de afbeelding.

Zie je dat de volledige positie is vastgezet?

Want de menubalk scrollt niet meer mee op de pagina. Maar blijft op één positie staan.

Overige pagina-elementen lopen er tijdens het scrollen voor of achterlangs.

Dat hangt af van de laagvolgorde waarin deze staan.

Met Pin zet je dus elementen vast op een absolute positie.

Het vastzetten op browservenster is dus slechts voor enkele elementen geschikt.

Je ziet tegenwoordig weleens popups of chatboxen die aan de rand van het venster tevoorschijn komen.

En ook in beeld blijven zodra je gaat scrollen.

Daar zou je deze opties voor kunnen gebruiken.

Met de volgend opties kun je elementen vastzetten binnen pagina of container.

Zorg dat het menu geselecteerd is.

En ik activeer in eerste instantie de rechter oriëntatiepunt.

Selecteer het logo en zet deze vast aan de linkerkant van de pagina.

Bekijk het resultaat in de browser.

Het menu staat op de juiste startpositie.

Als ik ga scrollen dan verdwijnt de navigatiebalk uit beeld.

Dus hij heeft geen vaste positie ten opzichte van de boven- of onderkant.

Maak het scherm daarna smaller.

De menubalk blijft op vaste afstand staan ten opzichte van de rechterkant van de webpagina.

En het logo op vaste afstand van de linkerkant van de pagina.

Dan komt er ook weer een moment dat het menu en het logo elkaar gaan overlappen.

Dit lossen we weer op een andere manier op.

Per element kun je dus besluiten om deze een vaste positie op de pagina te geven.