Lijsten toepassen en vormgeven (Lists, Bullets & Bullet Styles)

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.

Voor dit onderwerp heb ik alvast een deel van de pagina verder opgemaakt.

We gaan ons nu bezighouden met het vormgeven van lijsten.

Voor opsommingen in de tekst maak je gebruik van lijsten.

Je kunt dan kiezen uit twee smaken.

Selecteer deze regels in Blok .

Allereerst de opsommingslijst.

Activeer in het Control-venster de optie 'Bullets'.

Dan kun je een karakter als opsommingsteken gebruiken.

De standaard opties die mij nu worden gegeven zijn de bullet, een cirkel en een streepje.

Maar je kunt ook zelf een karakter uitkiezen.

Klik dan op 'New Character'. Een venster verschijnt.

Kies eerst het lettertype dat je voor het teken wilt gebruiken.

Dat is grappig he, je kunt voor het opsommingsteken dus een heel ander font gebruiken.

Dan het font waarin de lijst staat vormgegeven.

De Arial bijvoorbeeld biedt een hoop ontworpen opsommingstekens aan die je kunt gebruiken.

Als ik bijvoorbeeld kies voor ons Web Font, de ‘Enriqueta’ dan zijn dit er ineens een stuk minder.

Elk font beschikt dus over een aantal ontworpen karakters en dat varieert dus.

Het is dus maar net wat de ontwerper van deze letter heeft ontworpen.

Maar je bent niet verplicht om alleen maar te kiezen uit de ontworpen opsommingstekens.

Via dit menu kan ik kiezen voor 'Entire Font'.

En uit ongeacht welk leesteken dan ook een keuze maken.

Kies een letter uit de set en klik dan op 'Add' om dit teken toe te voegen aan de lijst.

Je kunt meerdere tekens toevoegen als je dat wilt.

Je ziet dat ze worden toegevoegd aan de lijst in het Control-venster.

Zodra je klaar bent klik je op OK.

En kun je kijken welk teken jou het meeste bevalt.

Je kunt ook kiezen voor genummerde lijsten. Ik deactiveer de opsommingslijst en activeer de nummeringslijst.

Ditmaal heb je geen keuze om voor de tekens een ander font te kiezen.

Je zult moeten kiezen uit één van deze opties.

En je maakt gewoon gebruik van de karakters van het font waar de tekst op dit moment mee vormgegeven is.

Zodra je meer dan één keer gebruik maakt van een opsommingslijst in de website.

Is het al aan te raden om van deze vormgeving een stijl te maken.

Hiervoor ga je naar Window > Bullet Styles.

Ik sleep het venster even los in beeld.

Op dit moment heb ik de lijst al geselecteerd staan.

ik kies voor het aanmaken van een nieuwe stijl.

Dubbelklik op deze stijl en geef deze een herkenbare naam. Klik op OK.

Ook in Blok staat een opsommingslijst.

En die wil op dezelfde wijze vormgeven.

Allereerst zal ik er een opsommingslijst van moeten maken. Dat zijn de Bullets.

De stijl die hieraan verbonden is is [None].

Maar ik wil dat deze de vormgeving krijgt van de opsommingslijst.

Als ik nu de vormgeving wijzig.

Dus ik kies een ander opsommingsteken uit.

En ik werk de stijl bij met 'Redefine selected style'.

Dan worden alle opsommingslijsten, die gekoppeld zijn met deze stijl, aangepast in de vormgeving.

Bedenk dat je weer net zoveel stijlen kunt aanmaken voor opsommingslijsten als dat je zelf wilt.

Voor de vormgeving van opsommingstekens biedt Muse nog een specifiek venster.

Die meer mogelijkheden biedt dan we zojuist hebben gezien in het Control-venster.

Ga naar Window > Bullets.

Ook dit venster sleep ik los in beeld.

Ik zoom goed in op de lijst met Commando +.

Als je nu je tekst-gereedschap actief hebt.

Kun je niet de spatiebalk indrukken om tijdelijk het hand-gereedschap te activeren.

Maar moet je de Alt-toets indrukken.

Schuif de pagina dusdanig dat je goed kunt kijken naar de lijst.

In het venster Bullets staat de optie Bullets actief.

En dat is bepalend voor de inhoud van dit venster.

Activeer je de ‘Numbers’ dan krijg je deze opties in beeld.

Het eerste wat mij opvalt is dat ik hier in dit venster wel degelijk kan kiezen voor een ander lettertype.

Laat ik eens de Enriqueta proberen.

En jawel hoor, via dit venster kan ik dus wel een ander font kiezen voor de nummering.

De huidige corpsgrootte staat op 'Auto'.

Dat betekent dat de tekst van de lijst de corpsgrootte bepaalt.

Je kunt ervoor kiezen om de nummering een andere corpsgrootte te geven.

Ik zet deze bijvoorbeeld op . Je kunt ook met de pijltjes de tekst kleiner en groter maken.

Besef dan wel dat als je de tekst van de lijst groter of kleiner maakt.

Deze nummering niet mee wordt vergroot of verkleind.

Je kunt de nummering een aparte kleur geven ten opzichte van de tekst.

Bepaal de afstand die de tekst moet aanhouden ten opzichte van de nummers.

En je kunt de afstand bepalen waarop genummerde lijsten moeten inspringen.

Zet je deze op . Dan vallen de nummers zelfs buiten het kader.

Je kunt zelfs de positie van de nummers ten opzichte van de regel verplaatsen.

Met behulp van de 'Vertical Shift for Bullets'. Zowel boven de basislijn als naar beneden op de basislijn.

Ik wijzig de Numbers weer in Bullets.

En ik zet de corpsgrootte weer op 'Auto'.

In dit geval zou ik de tekens iets lager willen verplaatsen. Zo ongeveer.

En ook als je het teken zou willen veranderen dan kun je dat hier alsnog doen.

We hebben de opsommingsstijl nu gewijzigd. Ik maak mijn pagina weer wat kleiner.

Zodat ik beide opsommingslijsten in beeld heb.

Om de wijziging voor alle lijsten door te voeren. Klik ik wederom op de optie ‘Redefine selected style’.

Nu krijgen alle lijsten die verbonden zijn met deze stijl dezelfde vormgeving.

Belangrijk is dat je beseft wat je nu precies bepaalt met een Bullet Style.

Dubbelklik op de stijl en bekijk de 'Style Settings'.

Het enige wat je bepaalt is de vormgeving van het opsommingsteken of de nummering.

De teksten maak je op met een alineastijl.

De werkwijze is dan meestal dat je eerst de tekst verbindt aan een Paragraph Style

En daarna pas een Bullet Style toepast.