Sessie-pagina opmaken en vormgeven (page 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 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.

Open de pagina ‘Sessies’ en controleer eerst in het lagen-venster dat de laag ‘content' geactiveerd is.

Ga naar File > Place en plaats het bestand ‘sessies’ uit de map ‘text’ van de oefenmap. Klik op Open.

Klik en sleep een tekstkader in het contentgebied.

Ik verplaats het tekstkader naar de kantlijn van de pagina.

Ik maak een kleurvlak aan over drie kolommen.

Deze moet pixels hoog worden.

Dat voer ik in bij de Height, in het Control-venster.

Maar zorg er wel voor dat het kettingsymbool, die de breedte en hoogte met elkaar verbindt, verbroken is.

Anders verandert de breedte mee en die moet nou juist -koloms blijven.

Dus op deze manier wijzig ik enkel de hoogte. Gebruik de Enter-toets om de waarde te bevestigen.

Geef het vlak als vulkleur de lichte kleurvariant mee.

Selecteer het tekst-gereedschap in de gereedschappenbalk.

En selecteer de tekst ‘Blok ’. Knip de tekst met Commando X.

Trek dan een tekstkader over het kleurvlak heen en plak hierin de tekst met Commando V.

Ik selecteer alle tekst met Commando A en maak de tekst op. Ik kies als lettertype de trebuchet.

Het corps moet zijn pixels. Enter om te bevestigen.

De uitlijning zet ik op gecentreerd en de tekenkleur maak ik wit.

Zorg dat het cijfer op de volgende regel komt te staan door achter het woord ‘blok’ een harde return te geven.

Selecteer het cijfer en deze krijgt als vulkleur de donkere kleur variant.

Selecteer dan de datum. Dubbelklikken om de regel te selecteren.

Knip deze tekst met Commando X.

Sleep een kader opnieuw onder het kleurvlak en met Commando V plak ik de tekst hierin.

Selecteer de tekst met Commando A. Kies opnieuw als letterype de Trebuchet.

En geef deze corps mee. Enter om te bevestigen. De tekst moet gecentreerd komen te staan.

En zorg ervoor dat de tekst uitgezet wordt in kapitalen en de donkere kleur variant krijgt als tekenkleur.

Ik heb hier nog een lege alinea meegenomen en die kan ik in principe verwijderen door erin te gaan staan.

En de backspace-toets te gebruiken.

Ik wil de tekst ook nog vet maken en daarvoor kan ik de opdracht 'bold' gebruiken.

Onder de datum komt een illustratie te staan.

Dus ik selecteer mijn Rectangle Frame Tool.

Klik wederom over de breedte van kolommen.

Een illustratiekader en zorg ervoor dat deze - pixels komt te staan.

Het kettingsymbool is verbroken zodat ik alleen de hoogte kan wijzigen.

Plaats hierin de afbeelding via File > Place, uit de map ‘img’ , ‘glazen-pater.jpg’ . Klik op Open.

Ik klik eenmaal op het illustratiekader en deze wordt kadervullend geplaatst.

Dubbelklik in het afbeeldingskader om de afbeeldingsgrenzen in beeld te krijgen.

Klik en sleep aan een hoekpunt om de afbeelding te vergroten.

Zorg dat je nooit boven de % komt.

Verplaats de afbeelding binnen het illustratiekader om zelf de uitsnede te kunnen bepalen.

We gaan de rest van de tekst plaatsen.

Dubbelklik op het tekstkader om van gereedschap te wisselen.

Ik selecteer de tekst van het eerste programma.

Knip deze uit het kader met Commando X.

Ik klik, houd ingeklikt en sleep een tekstkader over de breedte van de resterende kolommen.

Plak de tekst met Commando V.

Ik selecteer eerst alle tekst met Commando A en open het venster Paragraph Styles.

Ik verbind de stijl 'brood' aan alle tekst. Dan gaan we nu de uitzonderingen opmaken.

De eerste alinea komt in de ‘subkop’ te staan.

Met uitzondering dat deze linkslijnend moet worden en als tekenkleur de lichtere kleurvariant krijgt.

Selecteer dan de titel van de workshop en geef deze een corps mee.

Bewaar deze alineastijl.

Klik onderin het Paragraph-venster op het icoon ‘Create a new Style’.

Dubbelklik op deze stijl en geef hem een naam mee, bijvoorbeeld ‘titel’. Druk op OK om te bevestigen.

Ook het programma krijgt de stijl 'subkop' maar moet wel linkslijnend komen te staan.

Voor de tijden en programmaonderdelen maken we een tekenstijl aan.

Selecteer één van deze tijden.

Zet de corpsgrootte op pixels.

Kies de lichte kleurvariant uit als tekenkleur.

En maak ook hiervoor een tekenstijl aan.

Activeer het venster ‘Character Styles’. Klik onderin het venster op Create new style’.

Ik noem deze stijl ‘tijd’. Enter om te bevestigen.

Nu kun je de overige tijden ook aan deze stijl verbinden.

Zie je dat de interlinies groter worden tussen de regels?

Dat komt omdat de interlinie van de stijl ‘brood’ op % staat.

En deze % wordt altijd berekend op de grootste corpsgrootte die aanwezig is in de alinea.

En dat zijn nu dus de tijden met corps .

De broodtekst staat namelijk op pixels.

Je kunt eventueel ook de namen van de workshops verbinden aan deze stijl, als je dat leuk vindt.

Ik selecteer het selectie-gereedschap in de gereedschappenbalk.

Met Commando plaats ik mijn volledige pagina passend in venster.

Je kunt nu deze huidige opmaak selecteren.

Door een selectiekader om alle kaders heen te trekken.

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

Met de spatiebalk kan ik mijn pagina verschuiven.

Je kunt nu teksten gaan vervangen. Ik selecteer het getal en vervang deze voor de .

februari wordt februari.

De titel ga ik vervangen.

Deze selecteer ik, knip ik weg uit mijn originele tekstkader.

Daarna selecteer ik mijn gedupliceerde titel. Maar ik laat één letter staan.

Ik kies voor Commando V om de tekst te plakken.

Omdat je de eerste letter liet staan wordt de nieuwe titel die je op deze regel erbij plakt in dezelfde opmaak geplaatst.

Namelijk in de alineastijl 'titel'.

Dan hoef ik enkel nog maar het eerste lettertje te verwijderen.

Deze truc gaat niet op voor het programma.

Omdat we hierin ook gebruik maken van tekenstijlen.

Dus vervang het hele programma voor de nieuwe tekst.

Controleer dat alle tekst in de stijl ‘brood’ staat.

En zet daarna de enkele woorden in de tekenstijl ‘tijd’ die we hiervoor hebben aangemaakt.

Ik activeer opnieuw mijn selectie-gereedschap. We hoeven nu enkel de afbeelding nog maar te vervangen.

Ik selecteer het illustratiekader en ik ga naar File > Place.

Selecteer een afbeelding. Klik op open en klik hiermee op het illustratiekader.

De bestaande afbeelding in dit kader kun je op deze manier vervangen.

Ook nu kun je de afbeelding weer groter maken en zelf de uitsnede bepalen.

Om afstand te creëren ten opzichte van de footer maak ik dit tekstkader even iets groter.

Het originele tekstkader kun je selecteren en verwijderen met de backspace-toets.

bekijk daarna een voorvertoning in de Preview.

Dan is dit de opgemaakte pagina van de sessies.