Afbeeldingen als achtergrondafbeelding (Background-image)

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.

Je kunt afbeeldingen ook als een achtergrondafbeelding plaatsen in een kader.

Open de startpagina van de oefensite uit de oefenmap.

Activeer het lagen-venster en maak de laag ‘content’ actief. Hierin gaan we werken.

Als je een afbeelding wilt plaatsen in een bestaand kader via File > Place

Moet het kader een illustratiekader zijn.

Dat zijn de gereedschappen 'Rectangle Frame- en ellipse Frame Tool'.

Wil je een afbeelding plaatsen als een achtergrondafbeelding?

Dan raad ik je aan om het vormkader te gebruiken.

Deze biedt namelijk de meeste opties en instellingen.

Ik teken dus een vormkader met het gereedschap 'Rectangle Tool'.

Direct onder de header en dan paginabreed.

Controleer de positie en het formaat via het control-venster.

De x moet op staan, de y op pixels.

En met de tab-toets ga ik nu naar het volgende invoerveld.

De breedte is pixels en de hoogte moet pixels worden.

Ga dan, in het Controls-panel, naar ‘Fill’. Klik op het woord ‘Fill’ en een uitklapvenster verschijnt.

Klik dan op de optie ‘Image:Add image’ en navigeer naar de oefenmap.

In de mag ‘img’ staat het bestand ‘paterplaza.jpg’. Deze kiezen we.

In het info-gedeelte zie je dat de afbeelding pixels breed is.

Dat past dus precies met ons ontwerp.

Klik op Open. De afbeelding wordt geplaatst, maar ik zou de uitsnede anders willen bepalen.

Ik selecteer in mijn gereedschappenbalk het selectie-gereedschap.

Hiermee dubbelklik ik op de afbeelding.

Maar de afbeelding wordt niet bereikbaar.

Ook dit is anders als je een afbeelding plaatst via File > Place.

Dat is een eigenschap van een achtergrondafbeelding die je toepast middels een vulopdracht.

Deze kun je niet met de hand positioneren.

Maar er zijn nog wel mogelijkheden waarop je de positionering enigszins kunt bepalen.

Keer terug naar Fill’, klik op het woord 'Fill'.

Dan lopen we de opties voor achtergrondafbeeldingen even af.

Allereerst de Fitting-opties.

Met ‘Scale to Fill’ wordt de afbeelding altijd vullend binnen het kader geschaald.

Wacht, ik kies een andere afbeelding om dit duidelijker te maken.

Deze afbeelding is slechts pixels breed.

Niet breed genoeg voor ons ontwerp van pixels.

Maar zie, hij wordt gewoon opgeblazen.

Op zich moet je dat nooit doen want nu zie je duidelijk de pixels.

Maar het is een goed voorbeeld.

Ik kan de afbeelding nog anders positioneren met de Position.

Dus wil ik lijnen aan de bovenkant zoals nu, of het midden of de onderkant van de foto. Dat bepaal je hiermee.

Loop ik de volgende Fitting-opties nog af. Je hebt ook ‘Scale to Fit’.

Dan wordt de afbeelding proportioneel geheel binnen het kader geplaatst.

Met Position kan ik nu ook de andere oriëntatiepunten demonstreren.

Als rechtsboven, midden of links onderin het kader.

Kies ik bij Fitting voor 'original Size', dan is dit het originele formaat van de afbeelding.

Kies ik voor patroon, 'Tile', dan wordt de afbeelding herhalend toegepast.

Wacht ook hiervoor gebruik ik even weer een andere afbeelding.

Ik keer terug naar img en kies voor 'webaward.png'.

Dan maak ik het kader ook nog even wat langer, zodat je het duidelijker kunt zien.

Terug naar 'Fill'.

Je ziet dat de afbeelding als een patroon wordt toegepast.

Je kunt nu bij Fitting ook kiezen voor enkel een horizontaal patroon.

Of een verticaal patroon.

En dit dan ook weer in samenwerking met de Position.

Dit zijn de opties waarmee je dus een achtergrondafbeelding kunt instellen.

Ik kies nu de afbeelding die ik daadwerkelijk wil gaan gebruiken, namelijk de ‘paterplaza.jpg’.

Ik zet de hoogte van het kader weer terug op pixels.

In dit geval zou ik bij Fill > Fitting kiezen voor ‘Scale to Fill’.

Of ‘Original Size’. In beide gevallen wordt de afbeelding pixels breed getoond.

Mijn oriëntatiepunt bij ‘position’ zet ik op gecentreerd.

Dan gaan we nu een voorvertoning bekijken bij Preview.

KIJK, de afbeelding loopt over de gehele breedte van mijn browser-venster.

Dit hebben we eerder bij de hand gehad.

Zodra je een kader over de volledige breedte van een pagina trekt.

Dan moet je instellen bij 'Resize' hoe je wilt dat het kader zich gedraagt.

Keer terug naar de Design Mode.

Zorg dat het kader geselecteerd is en kijk naar de Resize options.

Deze staat op ‘Stretch to Browser Width’ en dat wil ik niet

Zet ik deze op ‘Responsive Width en Height’.

Dan schaalt het kader zowel in de hoogte als in de breedte als het venster smaller wordt.

Ik keer weer terug naar Design.

Kies ik bij Resize voor ‘Responsive Width’.

Dan schaalt het kader enkel in de breedte.

De afbeelding wordt live gecentreerd en kadervullend gemaakt.

Hierdoor verandert dus continu de uitsnede van de afbeelding.

De optie ‘None’ bij 'Resize', die schaalt helemaal niet.

Je ziet nu gewoon minder van de afbeelding. Kies voor de optie die jou het meest bevalt.

Ik ga voor de optie ‘None’. Deze vind ik het rustigst in het gedrag als het venster smaller wordt.

Het enige is dat de afbeelding links lijnend blijft staan.

Op zich wel jammer dat de Resize-option 'None', het gecentreerd houden van de afbeelding dan weer niet ondersteunt.

We hadden immers bij ‘Fill’ en 'Position' de achtergrondafbeelding op gecentreerd gezet.

Maar misschien komt dat nog in de toekomst.

Bewaar dit document, want deze aanpassing willen we behouden.