Master Page responsive vormgeven (Master Page)

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.

We hebben de A-Master Page nu voorzien van meerdere queries.

Want zo noemen webdesigners de verschillende breekpunt gebieden.

De A-Master Page wordt ook toegepast op de B-Master Page.

Activeer de B-Master.

De queries worden aangegeven met kleine witte driehoeken in de breakpoint bar.

Op de A-Master Page kun je de verschillende breekpunt gebieden activeren door in het gebied te klikken.

Op de B-Master Page zijn deze breakpoints wel doorgegeven.

Maar je moet op de witte driehoeken klikken om naar het betreffende gebied te gaan.

Voordat je deze pagina eventueel gaat voorzien van breakpoints.

Controleer je eerst of en hoe alle elementen op deze pagina ingesteld zijn op responsiveness.

Sleep met de schuif en kijk wat er gebeurt met de vormgeving.

Als je de verschillende breekpunt gebieden afloopt.

Dit verloop zeker niet naar geheel naar wens.

Activeer eerst het gebied.

En start hier met het maken van verbeteringen.

Het tekstkader lijn ik beter uit.

Ik zorg dat het kader voldoende ruimte kan bieden aan de tekst.

Zowel het tekstkader als het semi-transparante kleurvlak eronder mogen niet schalen.

Dus ik zet Resize op 'None'.

En ik wil dat ze vast staan aan de rechterzijde van de pagina.

En daarvoor gebruik ik de Pin.

De afbeelding mag niet worden geschaald. En staat dus bij resize op 'None'.

Zo kan er wel een deel buiten beeld vallen maar ik behoud wel mijn eigen uitsnede.

Het logo mag ook niet geschaald worden. Deze moet dus ook op ’None’ staan.

Hij moet wel op vaste afstand links van de paginarand blijven dus zet ik de Pin op links vast.

Het kleurvlak mag juist wel meeschalen met de pagina en moet bij Resize op Responsive Width staan.

Bekijk dan opnieuw hoe de elementen zich nu aanpassen voor de breekpunten.

En dit ziet er voor het merendeel al heel goed uit.

Op zie ik geen probleem.

Ook op blijft de vormgeving netjes overeind.

Alleen op de mobiele versie van gaan elementen elkaar overlappen.

Ik maak een aparte instructievideo voor het aanpassen en vormgeven van de mobiele versie.

Dus we laten dit breekpunt nu gewoon voor wat het is.

In dit geval zouden we alleen het breekpunt gebied hier, bij , moeten aanpassen.

Klik in de breakpoint bar op het + icoon onder het breakpunt.

Nu heb ik je ook op de B-Master dit breekpunt gebied geactiveerd.

Het tekstkader in dit gebied mag wel gaan meeschalen, dus zet ik de optie bij Resize op Responsive Width aan.

Hetzelfde geldt voor het semi-transparante kleurvlak eronder.

Het logo verplaats ik veel meer naar links.

Het kleurvlak plaats ik weer wat beter op de margelijnen.

De Resize staat op Responsive Width, dus deze mag zometeen weer meeschalen met de pagina.

Versleep dan de schuif.

Het gaat bijna helemaal goed. Behalve aan het eind.

Dan gaat de tekst uitlopen op volgende regels.

Dan kan ik ervoor kiezen om enkel voor dit breekpunt gebied de tekst kleiner te maken.

Activeer in de gereedschappenbalk het tekstgereedschap.

En de tekstoptie ‘Format Text on Current Breakpoint’.

Selecteer dan de tekst en maak de corpsgrootte kleiner.

Verklein de corpsgrootte dusdanig dat deze wel gaat passen binnen hetzelfde kader. En dat nu het geval.

Ook de B-Master Page toont zich nu goed op de verschillende schermformaten.