Kennismaken met Responsive design

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.

Een later hoofdstuk wordt volledig gewijd aan het responsive maken van de website.

Maar in deze video laat ik je alvast kennismaken met dit fenomeen.

Alle kaders op een webpagina moeten namelijk sturing krijgen als je responsive wilt gaan ontwerpen.

De gebruiker bepaalt zelf op welk apparaat hij of zij een website bezoekt.

Daar heb jij geen invloed op.

Er zijn zo verschrikkelijk veel verschillende schermformaten.

Het zou ondoenlijk zijn om voor elk schermformaat een aparte website te ontwerpen.

Daarom zorg je ervoor dat de elementen op een webpagina zich aanpassen aan het schermformaat.

Muse biedt een aantal opties en instellingen waarmee jij kunt bepalen...

...hoe de kaders moeten reageren als het venster smaller is dan het ontwerp.

Open de B-Master page.

Hierop gaan we een aantal kleurvlakken en afbeeldingen plaatsen.

En daarna gaan we het gedrag van deze kaders bepalen.

Open het lagen-venster en activeer de laag ‘content’. Hierin gaan we werken.

Ik plaats een illustratiekader onder de header.

Hierin komt zometeen een afbeelding dus ik gebruik het gereedschap ‘Rectangle Frame Tool’.

Klik en sleep een kader.

En gebruik het Controls-panel om het formaat en de positie in te voeren.

Ik zet de x-positie op en de y-positie op pixels. Aansluitend onder de header.

De breedte is pixels. Dat is de breedte van onze webpagina. En de hoogte wordt pixels.

Selecteer het selectie-gereedschap in de gereedschappenbalk.

Ga naar File > Place. Selecteer ‘paterplaza.jpg’ en klik op Open.

Eén keer klikken op het illustratiekader om de afbeelding te plaatsen in dat kader.

Dubbelklik, met het selectie-gereedschap actief, in de afbeelding

En bepaal dan handmatig de uitsnede voor deze afbeelding.

Bekijk een voorvertoning bij Preview.

De afbeelding wordt proportioneel verkleind als ik het venster smaller maak. Dat wil ik niet.

Keer dan terug naar de Design-Mode.

Selecteer de afbeelding. En bekijk de opties bij ‘Resize’.

Omdat het hier een illustratiekader betreft kan ik enkel kiezen uit ‘None' of 'Responsive Width & Height’.

Dan kies ik voor ‘None’. Want... en ik kijk opnieuw bij Preview.

Ik wil niet dat de afbeelding verkleind wordt als de gebruiker het venster smaller maakt.

Direct onder de afbeelding plaats ik een kleurvlak.

ik selecteer mijn Rectangle Tool'.

Ik klik en ik sleep een kleurvlak.

ik bepaal een vulkleur en dat is de lichte kleurvariant.

Dit kader wordt smaller dan de breedte van mijn website.

Ik houd links en rechts pixels afstand.

De x-positie wordt dan dus pixels. De y staat op pixels.

De breedte is min de afstand van pixels links en rechts dan pixels.

En de hoogte maak ik op pixels.

Ook nu kijk ik bij ‘Resize’ welke instelmogelijkheden ik heb.

Hij staat op dit moment op ’Responsive Width’.

Het kader mag dan wel smaller worden als het venster smaller wordt. Maar de hoogte moet behouden blijven.

Bekijk een voorvertoning bij Preview.

Het kleurvlak behoudt links en rechts wel afstand

Dat zie je aan de witruimte.

Maar de witruimte wordt verhoudingsgewijs wel steeds smaller.

Experimenteer nu ook zelf met de overige waarden en bekijk de verschillen in een Preview.

Leer het verschil in gedrag kennen die bij deze instellingen hoort.

Ik plaats nogmaals een afbeelding. Ik selecteer mijn selectie-gereedschap in de gereedschappenbalk.

Deselecteer het huidige kleurvlak en ga naar File > Place.

ik kies voor 'webaward.png' en Open deze.

Ik klik in de pagina, houd ingeklikt en sleep een kader naar de gewenste grootte.

Laat de muis los en de afbeelding wordt geplaatst.

Ik wil de afbeelding wat roteren, dus ga vlak naast een hoekpunt staan. En kies een rotatie.

Daarna kan ik deze nog precies op de juiste positie zetten.

Ga opnieuw naar 'Resize' en bekijk de opties.

Ik kan kiezen voor 'None' of 'Responsive Width and height'. Ik kies voor 'None'.

De afbeelding moet dus te allen tijde hetzelfde formaat behouden en op dezelfde positie blijven staan.

Ik bekijk opnieuw een voorvertoning bij Preview.

De webaward-illustratie blijft constant op ware grootte in beeld.

Dat is precies wat ik verwachtte.

Keer terug naar de Design-Mode.

Dan maken ik nog een kleurvlak aan.

Ik ga opnieuw naar mijn 'Rectangle Tool'. Klik in, sleep en laat deze lijnen aan de rechterkant van het document.

Selecteer mijn selectie-gereedschap en maak het kader net zo groot als de afbeelding.

En geef deze dan vervolgens een witte vulkleur.

En die vulkleur maak ik dan ook nog % transparant.

De optie 'Resize' zet ik op 'None'. Het vlak mag niet aangepast worden.

En ik bekijk een voorvertoning bij Preview.

Maak het venster smaller en je ziet dat het kader wel kleiner wordt.

Nou in het echt wordt het kader niet smaller.

maar verdwijnt een deel van het kader rechts uit beeld.

Dus dat deel is niet meer zichtbaar. Ik keer weer terug naar mijn Design-Mode.

Er bestaat namelijk ook nog zoiets als ‘Pinning’.

Standaard staan objecten vastgepind aan hun linkerkant.

In dit geval moet dit vlak juist vastgepind worden aan de rechterkant.

Ik zet bij 'Pin' het middenpunt van de rechterkant vast.

Kijk dan opnieuw naar een voorvertoning, maak het scherm smaller.

Nu lijnt het kader vast aan de rechterkant en schuift deze mee naar binnen als het venster smaller wordt.

De optie ‘None’ van ‘Resize’ zorgt ervoor dat het kader niet van formaat verandert.

Nou, dit is dan onze eerste kennismaking met de werkzaamheden die horen bij het responsive webdesignen.

Zoals ik al eerder zei. Later in de cursus besteden we een heel hoofdstuk aan dit fenomeen.