10 Hyperlinks

© Z-point - 20???

Hyperlinks

SCHAKELBARE INDEX

===============

Hyperink naar een sitepagina maken

Hyperlink aan een plaatje koppelen

Anker plaatsen

<TOP>link maken

Anker op een willekeurige plaats in de pagina plaatsen

Externe link naar Twitter maken

--------------------------

WebPlus beschikt over een groot aantal hyperlink-opties. We bespreken ze hieronder en zullen tevens proberen een aantal interne hyperlinks op deze pagina aan te brengen.

Standaard veranderen de aangebrachte tekst-hyperlinks gewoon in zwart.

Dat maakt ze niet echt zichtbaar en vind ik niet erg gebruiksvriendelijk.

Voor nu zal ik de aangebrachte tekstlinks vet/cursief plaatsen tbv. links op deze pagina en vet/cursief/onderstreept voor links naar andere pagina's op deze site. Dit ivm. de zichtbaarbaarheid. Daar gaan we in een later stadium zeker nog wel wat aan doen!

Een tekstlink naar een willekeurige sitepagina op deze site, maar kan ook een andere site zijn.

Een Anker aanbrengen (deze is verder in de pagina niet zichtbaar)

Een tekstlink naar een anker maken (bevindt zich op deze pagina)

Een tekstlink naar de bovenkant (top) van een pagina maken

Een tekstlink maken naar een 'social media account' maken

Een link naar een sitepagina maken met tekst <TOP>

Een navigatiebalk klikt doorgaans naar een andere pagina op de site.

Het komt echter ook vaak voor dat er vanuit een stuk tekst direct een link naar een bepaalde pagina gewenst is. Als voorbeeld maken we vanuit deze pagina een link naar de Google-Pagina.  (om te testen kun je met de '<Backspace'-knop op je toetsenbord weer makkelijk terugkeren!)

Het werkt als volgt:

Activeer de tekst door over de tekst te slepen zodat deze gemarkeerd wordt.

Open vervolgens met behulp van de Hyperlink'-knop het onderliggende

het 'Edit Hyperlink'-scherm. Kies de rubriek Site Page en kies in het naastliggende veld de pagina waar naar toe geschakeld moet worden.

Als je op je werkblad op de link klikt verschijnen er twee knopjes boven tbv. aanpassen of verwijderen van de hyperlink.

Wanneer met je muis je

over het linkerknopje (=aanpassen) gaat, krijg je in een pop-upje te zien met de link waar naar toe geschakeld wordt. Hyperlinken kunnen vanzelfsprekend ook in de 'Masterpages geplaatst worden.

Een hyperlink aan een plaatje koppelen. <TOP>

Traditioneel zal een logo in de Masterpage gelinkt worden naar de 'Home'pagina. Bedenk dat aan ieder plaatje op je site een hyperlink gekoppeld kan worden.

We koppelen een hyperlink aan het logo op de 'Master A'-pagina:

Open de masterpagina met Pages>>Master Pages en dubbelklik op

Master A.

Activeer het logo en volg de stappen onder ' Een link naar een sitepagina maken'

Een anker plaatsen <TOP>

Een anker is een markering op de pagina waar via een hyperlink naar toe geschakeld kan worden. Ankers moeten eerst geplaatst worden voordat er naar toe kan worden verwezen. Logisch eigenlijk. Ik heb onder aan de pagina direct onder kolomwitmarge een tekstframe geplaatst met de tekst <ONDER> via Arange-menu >> Attach to bottom op page heb ik dit tekstframe aan de Footer van deze pagina gekoppeld.

Selecteer deze tekst in dit frame.

Klik op

en open het Anchor scherm.

Voor Phone_number staat nu wat anders en dat veranderen we in onder-kant en activeer het anker door op 'OK' te klikken. Wanneer de de tekst in het tekstvlak activeren zien we dat dit tekstje een anker bevat…

Ankers kunnen aan elk object/frame op de site gekoppeld worden…!!!

Maar niet aan een stukje individuele tekst binnen een tekstframe.

Om vanaf dit punt naar <onder> te schakelen hoeven niets meer te doen dan een hyperlink naar het anker 'onder-kant' te maken:

en van hieruit de volgende instellingen maken:

Een <TOP> link maken <TOP>

Dit kan aan een icoontje worden gekoppeld od aan tekst. Het TOP-anket is standaard in iedere pagina aanwezig. We hoeven alleen maar een hyperlink naar dit TOP-anker te maken.

Willen we een knop (uit het Assets-Archief) selecteren op een masterpagina ( Master A) plaatsen, dan handelen we als volgt:

Ga naar de Assets-tab en open het archief via 'Browse' naar de rubriek 'Page Content'(derde van boven) type in het zoekscherm rechtboven 'back yo top'.

en selecteer uit de rubriek  'page content' het 'blanco' schermpje (= witte pijl op transparante achtergrond) deze wordt in de Assets rubriek 'Page Content' geplaatst.

We openen nu de gewenste masterpage en slepen het pijlicoon uit Assets>>Page Content in de 'Footer'van de pagina master pagina

en plaatsen het logo eventueel via de 'Transform'-tab

heel precies in de footer

Let er op dat het blauwe 'Anchor' links staat op 'Anchor Top Left' of sleep het frame naar de gewenste plaats.

Het logo met een hyperlink aan TOP koppelen:

Activeer het logoframepje. en klik

Kies de ru briek 'Internet Pages' en type achter URL:  #TOP

Vanuit de 'Target Window'-tab Kies 'Same Window' en klik 'OK',

Dankzij het plaatsen in de masterpage werkt deze knop op alle pagina's met deze naam.

Een klein <TOP> linkje achter elke kopregel bevorderd het snelzoeken op die pagina.

zeker als er bovenin de pagina een index van alle kopjes is geplaatst.'

Anker op een willekeurige plaats   <TOP>

in de pagina plaatsen

Ik besteed hier uitgebreid aandacht aan omdat in mijn presentaties dit veelvuldig zal voorkomen….

Ankers kunnen alleen aan objecten gekoppeld worden. Wanneer we dus een lange tekstkolom hebben die in een frame staat, kunnen we het frame van een 'anker' voorzien.

Willen we op meerdere plaatsen in een tekstframe ankers plaatsen dat moeten we iets anders bedenken.

We beginnen met een rechthoek (Quick Rectangel) uit de 'Drawing'-toolbar in de buurt te plaatsen

waar een anker moet worden geplaatst. Geef de rechthoek even een willekeurige kleur (ik heb rood gebruikt) om goed te zien wat er gaat gebeuren.

In de Transform'-tab stellen we de maten van de rechthoek hierna in op ca. 10 pixels hoog en 200 pixels breed.

Een hyperlink naar een 'Anker' plaatst deze altijd strak bovenaan de pagina. Een beetje wit boven de tekst maakt alles wel wat leesbaarder. Met die wetenschap plaatsen we het rode frame strak onder het einde van de bovenstaande alinea.

Met het kleurframe geactiveerd klikken we in de menubalk op 'Arrange'

en kiezen voor 'Attach to text' en in het schermpje 'Embedded Object Properties' activeer je 'Position Inline as Character' Wil je de waarden in dit scherm altijd op 0 houden vink dan ook 'Use these settings when pasting' even aan. Stel verder in:

Align with text: TOP  en stel alle waarden onder 'Distance for text' op 0.

onder het balkje is nu een ankertje zichtbaar.

We kunnen nu aan dit balkje een 'Anker ID' t.b.v. de hyperlink maken door op het 'Anchor'-icoontje te klikken in de :

en in het 'Edit Quick Rectangle'-scherm een naam onder 'Set the HTML ID of the object' in de voeren (zonder spaties te gebruiken!!! of vervang spaties voor een streepje) en vervolgens 'Treat this object as an anchor' aan te vinken.

We zien nu ook het icoontje van het 'Anchor ID' onder het kleurvlakje verschijnen.

We moeten nu nog de hyperlink aan de verwijstekst koppelen. Boven in de pagina heb ik een tekstregel gemaakt: 'Naar Anker12345'. Die tekst activeren wij door met de linker muisknop ingedrukt te houden, over de te markeren tekst slepen.

En vervolgens in de 'Properties'-toolbar

Het 'Hyperlink'-knopje aan te klikken om vervolgens in het 'Edit Hyperlink'-schermpje

de categorie 'Internet Pages' te kiezen en achter 'URL address:', vooraf gegaan door een # (hekje), de naam van het anker in te voeren.

LET OP!: Zonder dat hekje zal de hyperlink niet werken….

Als alles goed gaat is zien we als we de tekst aanklikken boven de tekst een tweetal icoontjes ter bevestiging dat de link is aangebracht.

We kunnen nu de werking controleren via de preview mogelijkheid van het programma.

Als alles goed werkt kunnen we het rode balkje onzichtbaar maken door in de 'Swatches'-tab de kleur op transparant in te stellen. Het eerste vakje links bovenin met de twee witte- en twee grijze vierkantjes.

Het kleurvlakje wordt nu onzichtbaar. Gelukkig kunnen we het vlakje simpel terugvinden want als we met de muis boven het vlakje gaan staan krijgt dit een blauw kader…

Een externe teksthyperlink

naar Twitter maken <TOP>

We gebruiken daarvoor een willekeurig twitteraccount:

@millionbudget

Ergens in een tekst wordt het twitteraccount @millionbudget genoemd om dan gewoon met de tekst verder te gaan. Bovenstaande link bestaat weliswaar niet, maar je krijgt toch een gebruiksvriendelijke pagina met een aantal zoek opties.

In de 'Poperties'-toolbar  'Hyperlink' selecteren.

en in de 'Hyperlink Type'-tab selecteren we de categorie 'Internet Page'.

In inputbox 'URL address' voer in: https://twitter.com/millionbudget

Op de 'Target Window'-tab uit de 'Type'-dropdown-menu selecteren we 'New Window'en klik 'OK'.

Door in de 'Target Window'-tab het 'Type'-dropdown-menu te selecteren wen vervolgens 'New Window' te kiezen heeft tot gevolg dat wanneer de link wordt aangeklikt de pagina zal worden geopend in een nieuwe tab op je brouwser. Daarmee verlaat je dus je eigen site niet. Afhankelijk van de gebruikte browser kan het ook zijn dat er een tweede browser wordt geopend met de betreffende pagina.

Sla alles even op met CTRL-S.

<TOP>

<ONDER>