Vormgeving van tekstlinks bepalen (Text Link Style)

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.

Tekstlinken worden automatisch door Muse voorzien van een standaard vormgeving voor links.

Ik selecteer op deze pagina een tekst.

En link de tekst via het uitklapvenster van Hyperlinks naar het adres van house-of-Training. Enter om te bevestigen.

Ik zorg ervoor dat de nieuwe webpagina ook in een apart tabblad wordt geopend.

En ik voer tekst in voor de tooltip.

Aan een tekstlink wordt altijd een stijl toegepast. En dat zie je onderin dit venster.

De huidige Tekst Link Stijl is de 'Default Link Style'.

Standaard herken je dus een link aan de blauwe kleur en de onderstreping.

Bekijk de site in een browser via File > Preview Site in Browser.

Of gebruik de toetscombinatie Commando Alt E.

Scroll naar de link in de pagina.

Standaard herken je een link aan de blauwe kleur en de onderstreping.

Zodra ik met de muis boven de link ga staan verandert er niets.

Als ik erop in klik wordt deze rood. Zodra ik loslaat wordt de link geopend.

Keer ik terug naar mijn webpagina. Ik heb de link bezocht.

Dan herken ik dat aan de paarse kleur.

De link-stijl kun je zelf bepalen op de volgende manier.

Keer terug naar Adobe Muse.

Zorg dat je de tekstlink geselecteerd hebt.

Klik op het woord Hyperlinks in het Control-venster.

En activeer onderin het venster de optie ‘Edit Link Styles’.

Het venster ‘Site Properties verschijnt en hiervan wordt het onderdeel ‘Content’ direct getoond.

Hierin staan de huidige link-stijlen beschreven.

Op dit moment is alleen de link-stijl 'Default Link Style' aanwezig.

Als je zelf een nieuwe link style wil maken, dan klik je één keer op het icoon 'New Link Style'.

Je kunt deze een herkenbare naam geven zoals bijvoorbeeld 'witte links'.

Want je kunt je al voorstellen dat je in een website vaak gebruik maakt van verschillende link-stijlen.

Bijvoorbeeld voor in de footer. Want zoals in ons geval heb ik hier links staan in witte tekst.

En dan is het ook prettig om de vormgeving hierop af te stemmen.

Om een bestaande link-stijl te verwijderen. Zorg je dat deze geselecteerd is en klik je op het prullenbak-icoon.

In plaats van een nieuwe stijl toe te voegen wil ik de huidige stijl aan gaan passen.

Standaard wil ik dat gelinkte tekst de donkere tekstkleur krijgt.

Zodra de bezoeker met de muis over de link heen beweegt wil ik dat deze de lichte variant krijgt.

Zodra de link al een keer bezocht is door de bezoeker. Dan mag deze oranje kleuren.

En als de bezoeker inklikt op de link wil ik ook de lichte kleurvariant zien.

Per gebeurtenis kun je dan ook nog bepalen of de tekst vet...

...schuin geschreven en wel of niet onderlijnd moet worden.

Ik deselecteer alle aanpassingen voor vet. ik wil ze ook niet schuin geschreven hebben.

Maar de onderstreping mag blijven. Klik op OK.

en bekijk het resultaat in de browser. ik gebruik hiervoor de toetscombinatie Commando Alt E.

De standaard linkkleur klopt niet maar dat komt omdat ik deze pagina al eerder heb bekeken in de browser.

En dat is opgeslagen in de cache, de geschiedenis van de browser.

Als je dit wilt verwijderen dan kun je het beste de huidige voorvertoning van de website eerst sluiten.

Vervolgens ga je naar het optiemenu Geschiedenis en wis je de huidige geschiedenis.

Keer ik terug naar Adobe Muse. Activeer ik de pagina opnieuw.

En als ik nu ga kijken zie ik weer de standaard kleur van een link. En deze is inderdaad de donkere kleur.

Loop ik met de muis boven de link moet deze licht kleuren. En dat klopt.

Ook als ik in klik moet deze licht blijven en dat gebeurt ook. Eenmaal de link bezocht.

En je klikt weer terug op de pagina waar je vandaan kwam.

Dan moet deze link oranje zijn, inderdaad.

Ik sluit mijn browservenster en keer terug naar Adobe Muse.

Het venster met de linkstijlen hebben we daarstraks geopend via het Control-venster > Hyperlinks.

Maar dit venster kun je ook activeren via File > Site Properties. Exact hetzelfde venster.