Sprekers-pagina vormgeven en Lijnen creëren (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 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.

Activeer de pagina ‘Sprekers’. Deze gaan we opmaken.

De afbeeldingen die we gebruiken zijn al aanwezig.

Ik zet deze even aan de kant en terwijl ik dat doe duw ik de footer al naar beneden.

En dat geeft mij dan alweer wat ruimte om te gaan werken zometeen.

Controleer in het lagenvester dat de laag ‘content’ actief is.

Ik plaats een tekstbestand. Ga naar File > Place.

En kies in de oefenmap uit de map 'text' het bestand ’sprekers.txt’. Klik op Open.

Ik klik in het contentgebied, houd ingeklikt en sleep een tekstkader.

Je kunt nu op twee manieren werken.

Of je maakt eerst alle tekst op in dit kader en knipt dan de tekstblokken eruit naar een eigen tekstkader.

Of je plaatst eerst de teksten in aparte kaders en maakt dan kader voor kader de tekst op.

Als je last hebt van het grid kun je deze ook verbergen via View > Hide Grid overlay.

Ik maak eerst hier in dit ene tekstkader alle tekst op.

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

Controleer dat in het tekstkader een knipperende cursor verschijnt.

Gebruik de toetscombinatie Commando A om alle tekst te selecteren.

Open het alineastijlen-venster, de Paragraph Styles.

k zet eerst alle tekst in de stijl ‘brood’.

Dan plaats ik de cursor in de eerste alinea. Deze alinea is een kop.

De volgende alinea is de ‘intro’ .

En dit herhaal ik voor de overige koppen en introteksten in dit tekstblok.

Activeer het selectie-gereedschap in de gereedschappenbalk en verplaats het tekstkader naar de kantlijn.

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

Selecteer het eerste tekstblok en knip deze weg met Commando X.

Sleep in het contentgebied een kader over de breedte van kolommen.

Ik houd er alvast rekening mee dat ik ruimte boven het tekstblok reserveer voor de afbeeldingen.

Plak de tekst in het tekstkader met Commando V.

Je kunt nu een nieuw tekstkader tekenen of het huidige tekstkader dupliceren.

Deze heeft immers al ongeveer het juiste formaat. In ieder geval in de breedte.

Selecteer het selectie-gereedschap.

Klik in het kader, houd ingeklikt druk de alt-toets erbij in.

Om te dupliceren en de Shift-toets om perfect horizontaal te verplaatsen.

Laat eerst de muis los en dan pas de commando-toetsen.

Dubbelklik in het tekstkader in de kantlijn en selecteer het volgende tekstblok. Knip deze weg met Commando X.

Klik één keer in het tweede tekstblok, alle tekst selecteren met Commando A .

Vervangen met de zojuist geknipte tekst met Commando V.

Deze twee tekstkaders ga ik nu dupliceren.

Op dit moment is mijn tekst-gereedschap nog actief.

Als je snel het selectie-gereedschap wilt activeren kun je ook de Commando-toets indrukken.

Klik dan één keer op het tekstkader om je selectie-gereedschap te selecteren.

Dat kun je ook herkennen in de gereedschappenbalk. Want hier is het selectie-gereedschap nu weer geactiveerd.

Druk dan de Shift-toets in en klik ook één maal op het andere tekstkader.

Deze wordt nu toegevoegd aan de selectie omdat ik de Shift-toets ingedrukt had.

Laat de Shift-toets los.

Met Commando zorg ik dat ik de pagina volledig in beeld heb.

Klik in op één van de geselecteerde tekstkaders en houd ingeklikt.

Druk dan de Alt-toets en de shift-toets in. Versleep een duplicaat perfect naar beneden.

Bepaal de positie. Zorg dat er voldoende ruimte is voor de portretten erboven.

Laat eerst de muis los en dan pas de commando-toetsen.

Knip de overige tekstblokken uit het tekstkader en plak deze in de tekstkaders.

Het lege tekstkader kun je dan selecteren.

Druk de Commando-toets in om te wisselen naar het selectie-gereedschap. Eén keer inklikken.

En wis het lege kader met de backspace-toets.

Zet dan de afbeeldingen op de juiste positie.

Maak gebruik van de automatische hulplijnen om de afbeeldingen precies in het midden boven de tekstblokken te plaatsen

En zorg er ook voor dat de afbeeldingen naast elkaar ook op elkaar uitlijnen.

Ik gebruik de spatiebalk om het beeld te kunnen verschuiven.

De bovenste twee kaders met portretten mogen wel een stukje omhoog

Dus ik trek er een selectiekader omheen. Dan kan ik ze samen verplaatsen.

Ik wil de tekstkaders allemaal van gelijke hoogte hebben. Dus ik maak dit tekstkader even wat langer.

Langer dan de tekst ook in het eerste kader. Zo!

Ik maak gebruik van de hulplijnen dat ik precies zie dat ze uitlijnen.

Stel dat ik een scheidingslijn zou willen maken tussen de tekstblokken.

Adobe Muse biedt geen lijn-gereedschap

Ik zal hiervoor een kader moeten gebruiken.

Ik selecteer deze twee bovenste tekstkaders en maak deze op de juiste lengte.

Hiervoor moet je het middelste selectiepunt gebruiken van het omsluitend kader.

Als ik het middelpunt van één van deze kaders pak?

Dan pak ik toch nog de hoogte van één kader. In plaats van beide tegelijkertijd.

Klik in het Control-venster op het woord ‘Stroke’ en een optie-venster klapt uit.

Onderin het venster zie je dat je elke zijde van het kader apart kan benaderen.

Maar zolang het kettingsymbool actief is geldt de waarde die ik voor één zijde invoer§ voor alle zijden.

Maar als ik het kettingsymbool deactiveer.

Dan kan ik voor elke zijde een aparte lijndikte bepalen.

Ik wil enkel aan de onderzijde een lijn toepassen.

De lijnkleur wordt de lichtere kleurvariant en deze zet ik op pixel.

Bekijk een voorbeeld hiervan bij Preview.

Heb ik toch voor alle zijden die lijn aangezet. Dat was niet de bedoeling.

Ik keer terug naar Stroke, ja! Ik zet eerst alles weer op .

Het kettingsymbool zet ik uit. Alleen de onderzijde wil ik aan hebben staan.

Controleer bij preview dat dit nu ook daadwerkelijk gebeurd is.

En op deze manier kun je dus scheidingslijnen aanbrengen.

Door de kaders te gebruiken. Ik keer weer terug naar de Design-Modus om wijzigingen aan te brengen.

Stel dat je de afbeelding in de tekst wilt plaatsen.

En dat de tekst er dan omheen gaat lopen. Dus een tekstomloop.

Dan selecteer ik de afbeelding. Ik knip deze weg met Commando X.

Dubbelklik in het tekstkader. Zet de cursor op de positie waar je de afbeelding wilt plaatsen

En plak je deze op de tekstregel met Commando V.

Activeer het wrap-venster.

Kies langs welke zijde de tekst langs de afbeelding moet gaan lopen.

Deactiveer het kettingsymbool om per zijde de afstand van de tekst te kunnen bepalen.

Bepaal nu zelf hoe je deze pagina wilt gaan opmaken.

Afbeeldingen en tekstkaders los.

En ik maak deze weer wat langer. ik zet beide tekstkaders weer even lang.

Of met een tekstomloop.