Nieuw webdocument aanmaken

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.

We starten met het aanmaken van een webdocument. Ga naar File > New Site.

Zorg dat de ‘Advanced Settings’ zichtbaar zijn.

Allereerst moet je besluiten of je een 'Fluid Width', een vloeiende website...

Of een 'Fixed Width' een website met vaste breedtes wilt gaan ontwerpen.

Later in de cursus als we bezig gaan met het responsive maken van de website.

Worden deze begrippen pas echt duidelijk.

Ik wil nu dat als de bezoeker zijn scherm smaller maakt.

Mijn ontwerp ook smaller wordt. Dus houd ik de optie ‘Fluid With’ aan.

Bij 'Max. Page Width' geef je de maximale breedte van de website op.

Hier bestaan geen harde regels voor. Alleen maar aanbevelingen van anderen.

Ga naar de website van Wschools.com.

Klik op het menu ’Tutorials’ en dan bij ‘Web Building’ op ‘Web Statistics’.

Klik in het linkermenu op ‘Browser Display’.

Hier vind je een actueel overzicht van de meest gebruikte monitorresoluties door gebruikers.

Bovenin staat dat de resolutie x het meest gebruikt wordt.

Maar moderne monitoren bieden een resolutie van x aan.

Ik wil nu ook alvast rekening houden met gebruikers met een hogere beeldschermresolutie

Heeft de gebruiker zo’n hoge beeldschermresolutie dan is het, in de praktijk, niet prettig...

...dat de website helemaal van rand tot rand loopt. Dat leest en kijkt helemaal niet fijn.

Een breedte van pixels is voor onze website meer dan prima.

Dus dat vul ik in bij de maximale breedte.

Leer jezelf aan om te gaan werken met een kolomstramien van kolommen.

Kolommen is niet voor niets gangbaar in webdesign. Deze biedt namelijk de meeste combinaties.

Je kunt afwisselend gebruik maken van alle kolombreedtes die je dan met elkaar combineert.

Maak je gebruik van kolommen dan ontwerp je ook automatisch evenwichtiger.

Het kolomwit, de ‘Gutter’ zet ik op pixels.

De minimale breedte van een website hou ik op pixels.

Dat is de standaard voor een staand mobieltje.

En bij de Minimale hoogte voer ik pixels in.

Dit biedt mij direct voldoende ontwerpruimte.

De echte lengte van een pagina bepaal je later, per pagina, als je gaat vullen met inhoud.

Dan de Margins en de Padding.

Met 'Margin' voeg je transparante witruimte toevoegen naar de buitenkant en met 'Padding' afstand naar binnen.

Ik houd beiden nu eerst op .

Zometeen als we de ‘Site Properties’ behandelen laat ik je zien wat het verschil tussen deze twee zijn.

We houden de resolutie nu eerst op Standaard.

Kies de taal van de inhoud van de website.

In mijn geval Nederlands, dus kies ik voor 'Dutch'.

Mocht je de spellingscontrole willen gaan gebruiken dan staat deze nu op de juiste taal.

En dan als laatste de optie ‘Sticky Footer’.

Activeer deze als je wilt dat de footer-elementen hoe dan ook altijd helemaal onderaan de pagina komen te staan.

En dat lijkt me een goed plan, dus zorg ervoor dat deze aangevinkt is.

Later in de cursus wordt vanzelf duidelijk waarom deze belangrijk is.

Klik op OK en je hebt het begin gemaakt voor de website.