Tekst importeren en alineaopmaak (Text-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.

We werken verder op de B-Master pagina van de vorige oefening.

Je kunt teksten ook importeren. Dit doe je via File > Place.

Navigeer naar de oefenmap. Hierin staat een map ‘teksten’.

En daarin bevindt zich het tekstbestand ‘trends.txt’. Selecteer deze en klik op Open.

De tekst hangt nu onder de cursor.

Klik ergens in het contentgebied, houd ingeklikt en sleep een tekstkader.

Met de muis nog steeds ingeklikt en slepend.

Toont Muse, nog voor de daadwerkelijke plaatsing al een voorvertoning.

Wijzig de breedte van het kader en de tekst wordt automatisch op nieuwe regels geplaatst.

En duwt uiteindelijk zelfs de footer naar beneden als hij deze ruimte nodig heeft.

Laat de muis los om het tekstkader te plaatsen.

Ik maak deze laatste handeling ongedaan met Commando Z.

De tekst hangt nu weer onder de cursor.

Je kunt de tekst ook automatisch laten plaatsen in een tekstkader door simpelweg één keer te klikken.

En natuurlijk kun je het kader dan gewoon nog handmatig aanpassen als je dat wilt.

Met het selectie-gereedschap actief kun je het kader verplaatsen en aanpassen.

Ik lijn de tekst uit op het kolomgrid.

Om de hulplijnen in beeld te zien moet de optie bij View > Show Guides geactiveerd zijn.

Selecteer de tekst. Dit kun je doen door te dubbelklikken in het tekstkader.

Zodat je het tekst-gereedschap activeert.

Klik dan vier keer snel achter elkaar om alle tekst in het kader te selecteren.

Of gebruik de toetscombinatie Commando A.

Ik kies als lettertype de trebuchet.

Het corps wordt .

De tekenkleur mag op zwart blijven.

En de letterspatiëring, de tracking, die zet ik op .

Enter om te bevestigen.

We keren terug naar de Plan-Mode.

De teksten die we opgemaakt hebben op de B-Master Page.

Staan ook op alle pagina’s die hieraan verbonden zijn.

We werken verder op de startpagina, dus open de pagina ‘webevent’.

Teksten kun je ook kopiëren en plakken via het klembord vanuit andere programma’s.

Ik heb hier een standaard teksteditor geopend.

En het tekstbestand 'home_sprekers.txt' geopend. ook deze staat in de oefenmap.

Ik selecteer eerst alle tekst en kopieer deze. Dat kun je doen via Wijzig > Kopieer.

Activeer dan weer Adobe Muse en ga naar Edit > Paste.

De tekst wordt in het midden van het document geplaatst in een omsluitend tekstkader.

Ik selecteer mijn selectie-gereedschap.

Dit kader kun je geheel naar eigen wens weer vormgeven.

Je kunt een tekstkader ook langer maken.

Muse houdt dan deze hoogte dan als minimale hoogte voor het kader aan.

Echter, zodra de ruimte benut moet worden door de tekst omdat je het kader smaller maakt.

Dan wordt de witruimte weer ingenomen door de tekst.

Zet ik het kader uiteindelijk weer terug op een andere breedte. Zie je wel dat hij deze hoogte aanhoudt.

Ik verplaats het tekstkader een stuk naar beneden. Zodat we hier wat beter naar kunnen gaan kijken.

Velen kiezen ervoor om eventuele kleurvlakken onder de tekst apart te plaatsen.

Zo ben je volledig vrij om het kleurvlak en de tekst los van elkaar te positioneren.

Maar je kunt het tekstkader ook vormgeven als een achtergrond en dat doe ik nu voor.

Met het selectie-gereedschap actief kun je het tekstkader selecteren en vormgeven.

ik geef het kader een vulkleur, een lijnkleur en een lijndikte.

En ik geef hem zelfs afgeronde hoeken mee.

Nadeel is dat de tekst direct aan de rand van het kader start.

En je mist dan ‘lucht’ en ‘ruimte’ langs de randen.

En met de afgeronde hoeken is zelfs een deel van de tekst niet meer goed leesbaar.

Dubbelklik dan in het tekstkader om te wisselen naar je tekstgereedschap.

En selecteer alle tekst. En ik doe dat met de toetscombinatie Commando A.

Open het tekst-venster. Dat kan ook hier boven in het Control-palet.

Met de opties Left Margin en Right Margin kun je afstand naar links en rechts opgeven.

Ik zet deze beide op pixels.

Nu komt de tekst ‘los’ te staan van de randen. En dat oogt al een stuk beter.

Maar ik zou ook graag boven en onder in het kader afstand willen houden.

De enige mogelijkheid die ik hiervoor heb zijn de opties Space Before en Space After.

Maar deze werken op Alinea-niveau. Dus als ik deze verhoog met pixels.

Dan resulteert dat in grote witruimtes tussen de alinea's.

Ik maak deze laatste handelingen ongedaan met Commando Z.

Dat kun je oplossen door met de muis in de eerste alinea te gaan staan. Dus de eerste zin.

Een knipperende cursor in een alinea, is genoeg om een alinea-opdracht toe te passen.

Alleen op deze alinea voeg ik dan pixels witruimte voor toe.

En bij de laatste alinea voeg ik dan juist pixels naar het einde toe.

Nu snap je misschien ook dat de meesten dit soort vormgeving opsplitsen in twee kaders.

Het onderliggende kader gebruik je puur als illustratie- of kleurvlak

En het bovenliggende kader bevat enkel de tekst.

Zo kun je de tekst geheel vrij en snel positioneren boven het kleurvlak zoals jij dat wilt.

We hebben zojuist kennis gemaakt met alinea opdrachten.

Hiervoor volstaat het om met een knipperende cursor ergens in de alinea te gaan staan.

Maar als je meerdere alinea’s tegelijkertijd wilt uitlijnen.

Is het natuurlijk wel weer handiger om er een selectie van te maken.

De uitlijn opdrachten zijn ook alinea opdrachten.

Standaard staan alinea’s linkslijnend, maar je kunt deze ook laten centreren of rechts laten uitlijnen.

En voor langere teksten kies je soms voor een uitgevuld zetsel.

Om dit voor te doen kopieer ik de laatste zin even een aantal keer achter elkaar.

Zodat ik ook een wat langere tekst krijg.

De tekst kan zo rustiger ogen omdat je geen last hebt van de standaard gerafelde randen.

Die je krijgt bij links- of rechtslijnende tekst.