Flexibele afbeeldingen (Responsive Images)

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.

Hoe responsive afbeeldingen zijn hangt af van de techniek waarmee je deze plaatst.

Maar ook van de instellingen bij Resize.

Er zijn twee manieren waarop je afbeeldingen kunt plaatsen in Adobe Muse.

Je kunt een afbeelding plaatsen via File > Place.

De afbeelding wordt dan automatisch geplaatst in een kader.

Standaard worden geplaatste afbeelding bij Resize op ‘Responsive Width and Height' gezet.

Natuurlijk kun je bij Resize ook nog kiezen voor ’None’. Dan schaalt deze helemaal niet meer.

Of je kunt een illustratiekader tekenen en dan bij Fill in plaats van een vulkleur een afbeelding toewijzen als vulling.

Via Image > Add Image.

Bij Fitting bepaal je dan hoe de afbeelding zichzelf binnen het kader moet aanpassen.

En bij Position bepaal je de basispositie van de afbeelding binnen het kader.

Veel ontwerpers geven aan deze laatste techniek de voorkeur.

Zeker voor afbeeldingen die bijvoorbeeld over de volledige breedte van de pagina lopen.

Afbeeldingen die je illustrerend gebruikt bij tekst, die plaats je vaak via de opdracht ‘Place’.

Want daarvan wil je vaak dat deze meelopen in de tekstflow.

Op deze startpagina staan beide soorten afbeeldingen.

Ik verwijder de zojuist door mij toegevoegde afbeeldingen. Zo!

En ik bekijk het resultaat in de browser.

Als ik het venster smaller maak. Dan zie ik duidelijk hoe verschillend de afbeeldingen hiermee omgaan.

De paginabrede afbeelding hervuld zich continu proportioneel en beeldvullend.

Hierdoor wijzigt de afbeelding telkens van formaat en uitsnede.

De portretten boven de teksten schalen proportioneel op de pagina

En eigenlijk ziet dat er best harmonieus uit in combinatie bij de bijhorende teksten.

Als ik dan kijk naar de Sprekers-pagina.

En ik maak hier het venster smaller.

Dan zie je dat hier andere keuzes zijn gemaakt.

In dit geval schaalt de inhoud van de paginabrede afbeelding helemaal niet mee.

Maar verdwijnt er gewoon een deel van de afbeelding uit beeld.

Deze afbeelding is dus geplaatst.

Het is geen kader met een achtergrondafbeelding die je via Fill maakt.

De afbeeldingen waar de tekst omheen lopen, schalen ook helemaal niet mee.

Verankerde afbeeldingen in tekstkaders kun je namelijk niet responsive maken met de Resize-opties.

Als ik terug ga naar mijn Plan Mode en ik open mijn pagina Sprekers.

Selecteer dan een verankerd illustratiekader.

En je ziet dat de Resize geen opties geeft om deze te kunnen instellen.

Dat is dus een beperking van illustraties die voor tekstomloop worden gebruikt.

Soms zul je kiezen om afbeeldingen te plaatsen en soms wil je een afbeelding toewijzen als vulling.

Als je volledige controle wilt hebben over de uitsnede van een afbeelding.

Dan moet je de afbeelding plaatsen.

Want dan kun je door te dubbelklikken in het illustratiekader.

De afbeelding selecteren en verplaatsen binnen het kader.

Zo heb je volledige controle over de uitsnede.

Afbeeldingen geplaatst via een vulling kun je enkel positioneren met de opties Fitting en Position.

En dat is veel beperkter.

En dat is veel beperkter.