Linken naar ankers (Anchor-link)

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.

Je kunt ook linken naar een specifieke plek op een pagina.

Dat kan een plek op dezelfde pagina zijn.

Maar ook een link naar een bepaalde plek op een externe pagina.

Dit gaat als volgt.

Stel dat ik deze afbeelding wil linken naar het gedeelte dat meer verteld over de locatie.

Die informatie staat onderaan de pagina.

Op de plek waar ik naar toe wil linken maak ik dan een anker aan.

Selecteer in de gereedschappenbalk de Anchor-tool. Of gebruik hiervoor de sneltoets A.

Klik ter hoogte van de sectie ‘Locatie’ eenmaal in ergens in de kantlijn.

Een venster verschijnt waarin je het anker een naam kunt geven.

Ik noem deze ‘locatie’. En klik dan op OK.

Scroll weer naar de bovenkant van de pagina.

Activeer in het gereedschappen-venster de selectie-gereedschap.

En selecteer de afbeelding.

Kies bij Hyperlinks in het Control-venster voor het anker ‘locatie’.

Test nu het resultaat in de browser.

Ga naar File > Preview Site in Browser. Of gebruik de toetscombinatie Commando Alt E.

Klik op de afbeelding.

De pagina scrollt automatisch naar beneden naar de sectie ‘Locatie’.

Dit is ideaal voor pagina’s die erg lang zijn.

Je kunt dan bovenaan de pagina een kleine inhoudsopgave opnemen.

Die linkt naar de verschillende secties op de pagina.

Met een anker kun je niet alleen op dezelfde pagina linken.

Maar ook linken naar een specifieke plek op een andere pagina.

Stel dat ik per spreker direct wil linken naar de juiste plek op de pagina van de sprekers.

Dan maak ik eerst op de pagina van de sprekers ankers aan.

Ik selecteer mijn anker-gereedschap.

Klik ter hoogte van de eerste sprekers in de kantlijn.

En ik noem deze 'sprekers'. Enter om OK te bevestigen.

De tweede serie sprekers plaats ik ook een ankertje in de kantlijn.

En deze noem ik 'sprekers'. Enter om de OK-toets te activeren.

Ik keer terug naar de homepagina.

En ik selecteer het portret van de eerste spreker.

Ik link de afbeelding naar de ankerlink ’sprekers’.

Hetzelfde doe ik voor de tweede afbeelding.

Ook die link ik met 'sprekers'.

Dan selecteer ik de laatste sprekers samen.

Houd dan nadat je de eerste afbeelding hebt geselecteerd de Shift-toets ingedrukt .

En selecteer het laatste portret erbij.

Met beide afbeeldingen geselecteerd kies ik als link de anker ‘sprekers’ op de pagina ‘Sprekers’.

Zie je hoe mooi Muse de ankerlinks toont onder de pagina’s waarop deze aanwezig zijn.

Ik bekijk het resultaat via File > Preview Site in Browser.

Ik klik op het eerste portret.

En inderdaad wordt de paginavan de sprekers geopend en zie je de sprekers staan.

Ik keer terug naar de startpagina en klik op het laatste portret.

Je ziet weliswaar de laatste sprekers maar ook nog een deel van de eerste sprekers.

Je hebt niet echt het gevoel dat hij exact naar de juiste positie springt.

Dat komt omdat de pagina niet langer is.

Dus ja, hier staat ongeveer het anker maar er is geen ruimte op de pagina om hier naartoe te springen.

Ik keer terug naar Adobe Muse.

Op de Sprekers-pagina selecteer ik het tweede anker.

En verplaats deze met de ‘Vertical Move Tool’ veel verder naar beneden.

Alle naast- en onderliggende elementen verplaatsen dan automatisch mee.

Een van de tekstkaders rek ik dusdanig uit.

Zodat de footer, en dus het einde van de pagina, verder naar beneden komt te staan.

Ik keer terug naar mijn homepage en ga de website bekijken in de browser.

Ik selecteer het laatste portret.

Zoals je ziet springt de browser nu wel naar de positie van het tweede anker.

Maar nu is de website ook lang genoeg om dit te doen.

Met ankers kun je bezoekers op een prettige manier naar delen van pagina’s laten navigeren.