Homepagina opmaken en vormgeven (Homepage 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.

In dit hoofdstuk pas ik voornamelijk toe wat ik in de voorgaande hoofdstukken heb behandeld.

Ik laat zien hoe ik de pagina’s opmaak en vormgeef.

Zie het als een werkwijze die ik prettig vind.

Het staat iedereen vrij om haar/zijn eigen werkwijze erop na te gaan houden.

Deze video’s zijn dus geen absolute noodzaak om de rest van de cursus te volgen.

Als je zelf de opmaak en vormgeving van de pagina’s wilt maken is dat ook goed

En sla je dit hoofdstuk gewoon over.

Voor iedereen die wel nieuwsgierig is. Follow Me!

Ik open de homepagina van de website.

Zorg er eerst voor dat je de juiste laag hebt geactiveerd.

We gaan de inhoud verder opmaken, dus activeer de laag ‘content’.

Om op het grid te kunnen vormgeven activeer je het kolomstramien via View > Show Guides.

Maar je kunt het kolomstramien ook in beeld brengen met de optie View > Show Grid Overlay.

Ik heb een tekstbestand waarin de tekst staat voor op deze pagina. Ga naar File > Place.

Selecteer in de oefenmap in de map 'text'.

Het tekstbestand 'Homepage.txt' en klik op Open.

Klik en sleep een tekstkader buiten de pagina. En ik maak een langwerpig tekstkader.

Doordat ik nu een langwerpig tekstkader heb getekend, wordt de footer automatisch naar beneden geduwd.

Dit komt ook omdat alle objecten die in de footer staan opdracht hebben gekregen in het Control-venster...

... om zich te gedragen als ‘Footer’.

Daardoor moeten deze objecten altijd onderaan de pagina staan.

Alle tekst staat in dit tekstkader en deze ga ik knippen en plakken naar aparte kaders.

Allereerst wil ik voor de nieuwe sectie een kop maken.

Hiervoor kan ik ook een bestaande kop dupliceren.

Zorg dat je het selectie-gereedschap actief hebt.

Klik in het kader, houd ingeklikt en druk de Alt-toets in.

Sleep dan een kopie naar de juiste positie.

Houd eventueel ook de Shift-toets erbij ingedrukt zodat je perfect verticaal naar beneden verplaatst.

Laat de muis los.

Dubbelklik in het tekstkader om te wisselen naar het tekst-gereedschap.

Met Commando A selecteer ik alle tekst in het kader en ik vervang deze voor ‘Sprekers’.

De vormgeving is direct correct.

Nu selecteer ik het eerste tekstblok uit het tekstkader.

Knip de tekst hier weg met Commando X.

In totaal maak ik kolommen.

Klik en sleep over de breedte van kolommen een tekstkader.

Plak de geknipte tekst hierin met commando V. Dupliceer dit tekstkader.

Activeer dan het selectie-gereedschap in de gereedschappenbalk.

Klik in op het tekstkader, houd ingeklikt en druk ook de Shift- en de Alt-toets erbij in..

En herhaal dit om het derde tekstkader direct ook te plaatsen.

ik selecteer alle tekst van het tweede blok.

Met Commando X knip ik deze hier uit weg.

Klik in op het tweede tekstkader. Commando A om alle tekst te selecteren.

Commando V om deze te vervangen met de weggeknipte tekst.

Dit herhaal ik dan dus ook voor de derde kolom.

Voor het opmaken van de tekst gebruiken we natuurlijk de alineastijlen.

Ik haal de alineastijlen in beeld en zet hem ook even apart in beeld.

Zoom even in op een tekstkader met Commando +.

Nu ik met de cursor in een tekstkader sta en ik wil tijdelijk wisselen naar mijn hand-gereedschap. Moet ik de Alt-toets indrukken.

Want met de spatiebalk, waarmee ik normaliter mijn hand-gereedschap mee activeer.

Zou ik nu spaties gaan typen.

Dan kan ik mijn beeld verschuiven.

Ik selecteer alle tekst met Commando A.

Want ik verbind altijd eerst alle tekst aan de meest voorkomende stijl.

En dat is in dit geval de leestekst. En de stijl die daarbij hoort heet 'brood'.

Selecteer alleen de eerste alinea en het volstaat om er alleen met de cursor in te gaan staan.

En deze ga ik verbinden aan de stijl ‘Kop’.

Dit zelfde doe ik dan ook voor de overige tekstkaders.

Alle teksten in 'brood', alleen de eerste alinea in 'kop'.

Ik activeer mijn selectie-gereedschap.

Ik kan alle tekstkaders selecteren.

De kaders minder hoog maken.

Nu er weer ruimte beschikbaar komt voor mijn footer gaat deze dus ook weer mee omhoog.

Met Commando kies ik ervoor om de hele pagina goed in beeld te krijgen.

Deze kaders zet ik een stukje dichter bij de koppen. Zo!

Dan moet er nog een kop komen voor ‘Registreren’.

De koppen zijn om en om positief en negatief. Dus ditmaal selecteer ik de kop van de ‘Sessies’.

Ik trek een selectiekader die in ieder geval beide objecten raakt. Dat is voldoende.

Klik in, houd ingeklikt. Druk de Alt- en de Shift-toets in en sleep een duplicaat naar beneden.

Dubbelklik op het tekstkader om de tekst te kunnen selecteren.

Wijzig de tekst in 'registreren'.

En ik keer weer terug naar mijn selectie-gereedschap. Ik duw de footer naar beneden.

Met het tekstkader wat ik hier nog aan de zijkant heb staan.

Ik zoom in op de pagina met Commando +. En met de spatiebalk kan ik mijn hand-gereedschap activeren.

Dan knip ik de tekstregel 'Meld je nu aan...' hier uit weg.

Ik sleep een tekstkader over de breedte van twaalf kolommen.

Moet ik even deze vensters hier sluiten. En ik stop mijn Paragraph-Styles weer terug in het venstergebied.

Ik selecteer het selectie-gereedschap in de gereedschappenbalk.

En controleer dat het tekstkader volledig over breedte van twaalf kolommen loopt.

In dit tekstkader plak ik met Commando V, de tekst die ik zojuist had weggeknipt.

De tekst 'Direct registreren' komt zometeen boven een button te staan.

Dus deze knip ik hieruit weg met Commando X.

We gaan deze tekst nu eerst met de hand opmaken.

Ik selecteer de volledige tekst.

En bepaal de opmaak in mijn Control-venster.

Dit wordt de Trebuchet, corps .

De uitlijning wordt gecentreerd en de Tracking zet ik op . Enter om te bevestigen.

We maken hier een alineastijl voor.

Dus je gaat naar venster Paragraph-Styles en ik klik onderin op het icoon 'Create a new style'.

Dubbelklik op de naam Paragraph Style en ik noem deze 'subkop'. Enter om te bevestigen.

Controleer dat deze tekst ook daadwerkelijk gekoppeld is aan deze stijl.

Nu moet er een button komen waar mensen op kunnen klikken als ze zich direct willen registreren.

In mijn gereedschappenbalk kies voor de Rectangle Tool. En over de breedte van vier kolommen trek ik een kader.

Dit kader moet pixels hoog worden en dat bepaal ik bij de height in het control-venster.

De vulkleur is een effen vulkleur en daarvoro kies ik de donkere kleurvariant.

En in plaats van rechte hoeken wil ik de hoeken afgerond hebben met pixels.

Ook hier maken we een stijl voor aan. Ditmaal een Grahic Style.

Ik klik onderin op het icoon 'Create new style'. Dubbelklik en noem deze 'button'.

Enter of op OK drukken om te bevestigen.

Ik selecteer mijn tekstgereedschap. Ik klik en sleep over de breedte van vier kolommen een tekstkader.

En met Commando V plak ik de tekst die ik daarstraks had weggeknipt.

Die blijft namelijk net zolang op het klembord staan zolang ik maar niks anders kopieer of knip.

Deze tekst wordt opgemaakt met de Paragraph Style 'subkop'.

En dan zie ik dat deze button nog niet over de volledige breedte van vier kolommen loopt.

Daar bovenop plaats ik het tekstkader.

En de handmatige aanpassing die ik nu maak is dat deze geen zwarte tekstkleur krijgt maar een witte tekenkleur.

De button met de tekst selecteer ik.

En met Shift ingedrukt verplaats ik die onder de tekst.

Nu kan ik deze tekstregel en de button samen selecteren.

Met de Alt- en Shift-toets ingedrukt dupliceren en nogmaals herhalen.

Ik vervang de tekstregel 'Lees meer over het event'. Knip deze weg.

Plak deze in het tekstkader. Hetzelfde doe ik dan voor de button-tekst 'Download de brochure'.

Deze knip ik weg met Commando X. Selecteer de tekst en met Commando V vervang ik deze.

Deze button krijgt nog een handmatige aanpassing, namelijk niet de donkere kleur, maar de lichtere kleurvariant.

Ik kan dit tekstkader verwijderen met de backspace-toets.

Om afstand te creëren na de laatste button, zou je een gewoon kader kunnen trekken.

En deze geef je geen vormgeving mee.

Gebruik je gewoon puur om afstand te creëeren tussen de button en de footer.

Met Commando zet ik de hele pagina in venster.

En om een voorvertoning van de pagina te bekijken kun je gaan naar Preview.

Controleer dat alle elementen op de juiste manier in de pagina staan en getoond worden.

Ik zie dat ik hier boven deze kopjes nog afbeeldingen moet plaatsen. Dus ik keer terug anar mijn Design-Mode.

Ik zoom in op het gedeelte van de sprekers.

Ik moet ruimte creëren boven deze tekstkaders.

Ik selecteer één van deze tekstkaders en kijk dat hier een icoon verschijnt, waarmee ik de huidige sectie...

Naar beneden kan verplaatsen en het mooie is dat ik dus alles wat hier onder zit.

Ik zet mijn pagina even terug op 'passend in venster' met Commando .

Alles wat zich onder deze streep bevindt wordt nu automatisch naar beneden geplaatst.

Dus ik zorg voor voldoende ruimte.

Creëer een illustratievlak waar ik afbeeldingen in kan plaatsen.

Zorg ervoor, ik ga met Commando + inzoomen, dat deze precies over vier kolommen loopt.

Alt en Shift om het kader te dupliceren en dat doe ik nogmaals voor hiernaast.

Ik heb nu drie illustratiekaders getekend en deze ga ik vullen met afbeeldingen.

Ga naar File > Place, in de map 'img' staan voldoende plaatjes. Dit is de eerste.

Ik druk de Commando-toets in want dan kan ik ook afbeeldingen selecteren die niet aansluitend zijn.

Dan klik ik op Open.

Ik heb drie afbeeldingen onder de knop.

Loop naar het juiste kader. Klik één keer om de afbeelding te plaatsen.

Deze komt in het laatste kader en deze staat in het middelste kader.

Met Commando zet ik de pagina weer passend in venster.

En ik kan de sectie nog precies op zijn plek gaan zetten. Zo, dit is mooi.

Bekijk eventueel opnieuw een voorvertoning bij Preview.

De afbeeldingen staan nu ook keurig netjes toegevoegd boven de teksten.

Ik zie nu dat dit kopje verkeerd is. Dit moet Locatie zijn en niet Sprekers.

Dus dat wijzig ik nog even in de Design-Mode.

Dubbelklik op Sprekers en ik typ hier Locatie.

Kan ik weer terugkeren naar mijn preview.

Dit is beter.