cursus hyperlinks in dreamweaver

Ismail KolkiranKatholieke Hogeschool Sint LievenAcademiejaar 2007-2008

Cursus Dreamweaver: Hyperlinks

Basiscursus Dreamweaver: Hyperlinks

Inhoudsopgave

1. Wat zijn hyperlinks?...............................................................3

Relatieve link.............................................................................3

Absolute link..............................................................................3

E-mail link.................................................................................3

2. Een hyperlink plaatsen............................................................4

Hyperlink op tekst.....................................................................4

Hyperlink op figuur...................................................................5

Ankers........................................................................................6

3. Linkstijlen...............................................................................8

4. Syntheseopdracht....................................................................9

Ismail Kolkiran p2


1. Wat zijn hyperlinks?

Een hyperlink of kortweg link (in het Nederlands: verbinding of koppeling) is een verwijzing in een internetpagina naar een andere website, een andere pagina of e-mail. Meestal ligt een link op een tekst die dikwijls onderstreept is en een ander kleur heeft. Het kan ook op een knop of een afbeelding liggen. Een link is eigenlijk een adres (URL) dat aan de browser van de bezoeker duidelijk maakt naar welke pagina die moet gaan als er op geklikt wordt.

Relatieve link

Als de hyperlink een onderdeel is van dezelfde website, noemen we die relatief. Bij het aanklikken kom je op een pagina binnen dezelfde website.

Een voorbeeld van hoe de code eruit ziet van een relatieve link:<A HREF=“cursus/Dreamweaver.html”>CursusDreamweaver</A>

Absolute link

Als de hyperlink bij het aanklikken verwijst naar een ander website dan spreken we van een absolute link. Het is geen onderdeel van dezelfde website.

De code van een absolute link ziet er zo uit:<A HREF=“http://www.anderewebsite.be/cursus/Dreamweaver.html”>CursusDreamweaver</A>

E-mail link

Bij het klikken op een e-mail link wordt er een mailvenster geopend van de standaard mailprogramma van je computer. Een e-maillink is absoluut en het begint telkens met mailto: (bv mailto:[email protected]) Als je op een e-mail link klikt wordt da standaard mailprogramma van je pc geopend.

En zo ziet de code van een e-mail link eruit:<A HREF=“mailto: [email protected]”>Stuur een mail</A>(Als je van al die codes niets afweet is dat niet zo erg. In Dreamweaver kan je ook links leggen zonder dat je iets kent van codes.)

Ismail Kolkiran p3


2. Een hyperlink plaatsen

Selecteer eerst de tekst die als link moet gaan functioneren. Deze tekst gaat dus doorlinken naar de nieuwe pagina als de bezoeker erop klikt.

Hyperlink op tekst

Om een link te zetten naar een andere pagina, een externe site of een bestand selecteer je eerst de tekst waarop de link moet komen, daarna klik je op de knop hyperlink.

Naast link typ je de link in van de externe site of klik je op het mapje en blader je naar de pagina of het bestand waarnaar je wilt linken. Naast title kan je een tekst intypen die verschijnt wanneer je op de tekst staat.

Naast target (doel) bepaal je waar de site wordt geopend. Je hebt verschillende mogelijkheden: Geen waarde: De link wordt geopend in dezelfde browservenster. _blank: De link wordt geopend in een nieuw venster. _parent, _self en _top: Deze zijn van toepassing bij frames.

Je ziet nu ook in de Properties paneel dat er naast Link het gegeven adres is ingevoegd.

Ismail Kolkiran p4


Om te linken naar een e-mailadres klik je op de knop Email link in de invoerbalk.

In het venstertje die verschijnt zie je naast text: de tekst staan waarop de link ligt. Naast E-mail: plaats je het gewenste e-mailadres.

Als je nu naar de Properties paneel kijkt, zie je nu dat er naast link mailto:[email protected] staat.

Hyperlink op figuur

Behalve van een stukje tekst is het ook mogelijk om een link te maken van een afbeelding. Je kan een link van een figuur niet maken met de knoppen van de invoegbalk. Je moet eerst het figuur selecteren en dan de link (relatief, absoluut of mail) invoegen in de Properties balk. Bij mail link moet je er wel op letten dat je ‘mailto:’ niet vergeet.

Ismail Kolkiran p5


Je kan ook de schietroos gebruiken die naast het invoervakje naast Link ligt. Deze kan je dan naar de verlangde pagina in het Filespaneel slepen. Je kan natuurlijk ook hier een target ingeven.

Het kan gebeuren dat je wilt dat je slechts van één gedeelte van een afbeelding een link wilt maken. Dit kan bijvoorbeeld voorkomen wanneer je een foto hebt met verschillende personen, waarbij je wilt dat er bij iedereen een persoonlijke pagina verschijnt als je op die persoon klikt. In Dreamweaver kan dit door een deel van de foto (de persoon) te markeren en er een hotspot van te maken. Een gebied van een afbeelding waaraan een hyperlink is verbonden wordt in Dreamweaver een hotspot genoemd.

Klik op de knop Images in de invoegbalk. Met de onderste drie opties kan je een vorm op de figuur tekenen waarop je dan de link kan leggen.

Ankers

Het komt wel eens voor dat een pagina zo groot is dat het handig is om bovenaan zo'n pagina links te hebben staan die verwijzen naar een bepaalde positie op de pagina (bijvoorbeeld als je een lange tekst met meerdere hoofdstukken in één pagina zet). Om te kunnen verwijzen naar een bepaalde positie binnen een pagina moet eerst aan die positie een Anchor (anker) ingevoegd worden met een gepaste ankernaam.Om een anker toe te voegen ga je op de plaats staan waar je dat wilt en klik je op de knop Named Anchor.

Ismail Kolkiran p6


Vervolgens geef je een geschikte naam aan uw anker. Je moet er wel op letten dat op dezelfde pagina er zich geen gelijke ankernamen bevinden.

Binnen een pagina worden ankers zoals onderstaand voorbeeld weergegeven:

Om een link te leggen naar uw ankerpunt moet je weer de tekst of afbeelding selecteren. Typ dan in de Properties balk naast Link de opgegeven naam van je anker met een # ervoor. Je kan ook de schietroos slepen naar de anker op de pagina.

Ismail Kolkiran p7


3. Linkstijlen

Zoals je al eerder op het internet hebt gezien, zijn de hyperlinks meestal onderstreept en ook meestal donkerblauw. Dit kan soms niet passen op de achtergrondkleur die je hebt.

Je kan je links ook een andere kleur geven. Hiervoor moet je in de Properties balk op de knopPage Properties klikken.

Er zijn verschillende opties waarmee je bepaalt hoe je pagina er moet uitzien. Kies hier voor Links. Zoals je ziet kan je de kleur van je link (Link color), van de reeds bezochte link (Visited links), van de link als je met je muis erop staat (Rollover links) en de actieve link (Active links) wijzigen.Je kan ook bepalen wanneer de hyperlink onderlijnd moet worden (bij Underline style).

Ismail Kolkiran p8


4. Syntheseopdracht

Voeg een klasfoto van vroeger toe aan je pagina. Als je op de hoofden van de studenten klikt opent er een nieuw pagina van zijn internetadres (kan ook aslpage, facebook ed.)

Als je op de rest van de foto klikt kom je op de volgende afbeelding in je site op dezelfde pagina.

Rechts boven de foto schrijf je je naam op. Als je erop klikt kan je een mail sturen naar jezelf.

Onder je klasfoto schrijf je in welke leerjaar je toen zat en op welke school. Als je op je klas klikt kom je op een pagina met andere klasfoto’s (op dezelfde pagina). Bij het klikken op je schoolnaam kom je op de officiële site van die school op een nieuwe pagina.

Schrijf een gebeurtenis die je herinnert van die klas op. Onder de tekst schrijf je ‘terug’. Als je erop klikt kom je bovenaan de pagina terecht.

De kleur van je hyperlinken zijn Donkerblauw. Als je erop met staat met je muis dan wordt die lichtblauw en als de link wordt aangeklikt wordt die rood. Een bezochte link heeft een donkergroene kleur. De hyperlinks worden enkel onderlijnd wanneer je erop staat.

Ismail Kolkiran p9


Trefwoordenregister

AAbsolute...........................................................................2, 3absoluut...........................................................................3, 7achtergrondkleur.................................................................10adres.................................................................................3, 6anchor......................................................................Zie ankeranker.....................................................................................9ankerpunt..............................................................................9

Bblank....................................................................................6

Ccode..................................................................................3, 4Cursus..................................................................................1

DDreamweaver..........................................................1, 3, 4, 8

EE-mail...........................................................................2, 3, 7

Ffiguur............................................................................2, 7, 8Filespaneel............................................................................8

GGeen waarde.......................................................................6

Hhotspot.................................................................................8Hyperlink......................................................................2, 5, 7Hyperlinks...........................................................................1

Kkleur..........................................................................3, 10, 11knop................................................................3, 5, 7, 8, 9, 10

Llink...............................................2, 3, 4, 5, 6, 7, 8, 9, 10, 11linken................................................................................5, 7Linkstijlen...........................................................................10

Mmailto............................................................................3, 4, 7

PPage....................................................................................10pagina...........................................................3, 5, 8, 9, 10, 11parent, _self en _top...........................................................6Properties................................................................6, 7, 9, 10

Rrelatief...................................................................................3Relatieve...........................................................................2, 3

Sschietroos.........................................................................8, 9standaard...............................................................................3Syntheseopdracht...............................................................11

Ttarget.................................................................................5, 8tekst......................................................................2, 3, 5, 7, 9

Wwijzigen..............................................................................10

Ismail Kolkiran p10

cursus hyperlinks in dreamweaver

Documents