Afmetingen wijzigen van elementen (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

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.

Zodra je een ‘Fluid’ website gaat bouwen.

Dan worden alle elementen al automatisch responsive voor je gemaakt.

Bovenin het document bevindt zich de ‘Breakpoint-bar’.

Hierin maak je de queries, oftewel breekpunten voor verschillende schermformaten.

Met de ‘Breakpoint-schuif’ kun je simuleren wat er op de gebeurt als het beeldscherm smaller wordt.

Klik in het querie-gebied om de schuif weer terug te plaatsen.

De Queries komen pas later aan bod.

Muse biedt gereedschappen waarmee je de elementen op een pagina responsive kunt maken.

Daar hebben we tot nu toe nog niet echt iets mee gedaan.

Straks is dit iets waar je juist vanaf het begin bij oplet.

Zorg dat je alle kaderranden in beeld hebt.

Ga naar View en activeer de optie Frame Edges.

Dat helpt om te herkennen hoe elementen zich aanpassen.

Elk element dat je plaatst op een responsive webpagina moet je namelijk wel sturing geven.

Hoe wil je dat het element zich schikt binnen het schermformaat van de gebruiker.

Activeer het selectie-gereedschap. Scroll naar boven in de pagina.

Selecteer de bovenste afbeelding in het content-gebied.

Bij Resize bepaal je of en op welke manier het element moet gaan schalen als het venster smaller wordt.

Deze afbeelding staat bij Resize op ‘None’.

Dus zal hij nooit kleiner of groter worden.

Het logo staat bij Resize op ‘Responsive Width and Height’.

Wat betekent dat deze proportioneel kleiner en groter wordt.

Met het percentage dat de webpagina geschaald wordt.

De teksten die staan bij Resize op ‘Responsive Width’.

De breedte mag gaan schalen, maar de hoogte niet.

Hetzelfde geldt voor het kleurvlak onder de tekst.

Zodra je de pagina nu smaller maakt.

Zie je dat de grote afbeelding gewoon uit beeld loopt omdat deze op ‘None’ staat.

Het logo schaalt proportioneel.

De tekstblokken schalen alleen in de breedte.

Tekst dat niet meer op de regel past loopt automatisch door naar de volgende regel.

Alles luistert naar de opdracht die hij bij Resize heeft gekregen.

Maar tot nu toe heeft Muse altijd bepaald welke Resize-opdracht aan een element werd meegegeven.

Standaard worden afbeeldingen die je plaatst op een pagina op proportioneel schalen geplaatst.

Tekstkaders staan standaard op ‘Responsive Width’.

Kijk ook dit kleurvlak staat op Responsive Width.

Maar kijk eens wat Muse doet als ik dit kleurvlak paginabreed maak.

Automatisch schiet deze nu bij Resize op ‘Stretch to Browser Width’.

Die automatische Resize-instellingen die Muse aan elk element verbindt zijn op zich zo slecht nog niet.

Maar uiteindelijk ben jij natuurlijk wel de baas.

Dus controleer altijd de instellingen van de elementen.

En bepaal zelf hoe je wilt dat deze zich gaan gedragen.

Ik wil bijvoorbeeld dat dit logo niet gaat schalen.

Dan zal ik de Resize op 'None' moeten zetten.

En de grote afbeelding hier.

Moet zich juist aanpassen aan het formaat van de pagina.

Die zet ik op ‘Stretch to Browser Width’.

De afbeelding in dit kader is via een vulling toegepast.

En dat is voor responsive afbeeldingen ideaal.

Omdat de ‘Fitting’ op ‘Scale to Fill’ staat.

Zal de afbeelding zich altijd zo goed mogelijk aanpassen om proportioneel het hele kader te vullen.

Nu je de Resize opties verandert hebt.

Bekijk je opnieuw het gedrag van de elementen als je met de breakpoint-schuif het beeld smaller maakt.

Zie je hoe de hoofdafbeelding zich binnen het kader aanpast?

Het logo schaalt helemaal niet meer.

Hierdoor raakt deze op een gegeven moment wel de tekst.

En schuiven elementen over elkaar heen.

Ook de positie van de elementen kun je nog sturen.

Maar daar gaat de volgende video over.

We bekijken het eindresultaat nu eerst nog in de browser.

Ga naar File > Preview Page in Browser.

De afbeelding bovenaan de pagina loopt inderdaad helemaal tot aan de browserrand.

Maak het beeld smaller, je ziet dat het logo niet schaalt.

En op een gegeven ogenblik ook in de problemen komt bij de teksten.

Stel dat je de afbeelding niet over de volledige breedte van de browser, maar op het originele paginaformaat wilt hebben.

Dan kun je kiezen voor deze afbeelding voor 'Responsive Width'.

Kijken we opnieuw in de browser.

Dan behoudt deze het formaat van de ontworpen pagina.

En past deze zich nog steeds aan op het moment dat ik het venster smaller maak.

En past deze zich nog steeds aan. Op het moment dat ik het venster