Learnit

7. Hyperlinks

7.1 Wat is een hyperlink?

Al zo lang als HTML bestaat biedt het de mogelijkheid om aan internetpagina's hyperlinks toe te voegen en nog steeds is dit misschien wel de meest gebruikte functie van HTML. Een hyperlink is een gebied op de internetpagina waarmee je door er op te klikken naar een bepaald gedeelte van de pagina of naar een andere pagina gaat.

7.1.1 Wat kun je ermee?

Vroeger kon een hyperlink alleen een hele afbeelding of een (blauw en onderstreept) stukje tekst zijn. Tegenwoordig zijn er veel meer mogelijkheden. Zowel de mogelijkheden met de verschijning van de link als de mogelijke acties die gebeuren zodra de link is aangeklikt zijn uitgebreid. Zo is het in Dreamweaver mogelijk om een mooie Flashtekst in te voegen, zijn er veel mogelijkheden om hyperlinks (ook afbeeldingen) te laten veranderen als de muis er overheen beweegt of als er op geklikt is en is het zelfs mogelijk complete (pop-up) menu's op de site te laten verschijnen. Verder is een link tegenwoordig niet alleen meer te gebruiken om naar een andere site te springen, je kunt met behulp van de ‘programmeertaal' JavaScript ook andere acties aan het klikken op de link verbinden. Het meest zul je hyperlinks echter gebruiken om de bezoeker van de site de mogelijkheid te geven om van de ene naar de andere pagina binnen je site te gaan.

7.2 Navigatie binnen de site en Sitemap

Structuur van de site
Het is belangrijk dat je van te voren goed nadenkt hoe de pagina's van je site onderling verbonden worden, dus van welke pagina naar welke pagina een hyperlink gaat. Als je hier niet goed over nadenkt kan het gebeuren dat bezoekers lang moeten zoeken voordat ze een pagina gevonden hebben of dat een pagina zelfs totaal onbereikbaar is. Om overzicht te houden in hoe de structuur van je site in elkaar zit en hoe de verschillende pagina's met behulp van hyperlinks met elkaar verbonden zijn, heeft Dreamweaver een buitengewoon handig ingebouwd hulpmiddel: de sitemap.

Procedure Sitemap openen

1. Druk op de knop Expand/Collapse, aan de rechterkant van het document window.
   

   Figuur 7.1: Files Panel
   

2. Het onderstaande venster wordt geopend.
   

   Figuur 7.2: Site window
   

7.2.1 De Sitemap

In het Sitemap venster staat helemaal bovenaan de zogenaamde Homepage, de eerste pagina die een bezoeker van je site te zien krijgt. Normaal gesproken is het mogelijk om vanuit deze Homepage (eventueel via één of meerdere tussenliggende pagina's) via hyperlinks alle pagina's van de site te bereiken. Als dit niet zo is zijn sommige pagina's van de site dus onbereikbaar voor bezoekers. Direct onder de Homepage staan, via een pijltje verbonden aan de Homepage, in de sitemap alle pagina's die met een hyperlink vanaf de Homepage bereikbaar zijn. In de meeste gevallen zullen dit pagina's binnen de site zijn. In zo'n geval kun je door te klikken op het plusje naast het icoontje van deze pagina ook de pagina's zien waaraan hij gelinkt is. Op deze manier krijg je een heel mooi overzicht van welke ‘route' een bezoeker moet gebruiken (dus langs welke pagina's hij moet komen) om bij een bepaalde pagina binnen de site uit te komen.

Dreamweaver houdt het in de gaten
Eén van de grote voordelen van het werken met een programma als Dreamweaver is dat, als je (vanuit het site-files venster) de naam of locatie van een bepaalde pagina binnen je site wijzigt, Dreamweaver alle hyperlinks binnen je site aanpast zodat ze correct blijven werken.

7.3 Soorten Hyperlinks

7.3.1. Link naar een pagina binnen je site

De meeste (hyper-)links die je maakt zullen verwijzen naar andere pagina's binnen je site. Je kunt zo'n hyperlink op verschillende manieren ‘aanleggen'. De gemakkelijkste manier is via het menu Modify.

Oefening 7.1 Gegevens uit Word kopiëren en toevoegen aan Dreamweaver.

1. We gaan onderstaande webpagina namaken door de tekst van het worddocumenten te kopiëren en in Dreamweaver te plakken.
2. Open het bestand klassieke muziek, je kunt deze vinden in de map cursus Dreamweaver, webteksten.
3. Kopieer de inhoud van het document, kies in de menubalk de menuoptie Bewerken. Selecteer de optie Kopiëren.
4. Ga naar Dreamweaver, open daar het bestand klassieke_muziek.htm.
5. Kies in de menubalk de menuoptie Edit, selecteer de optie Paste, de inhoud van het document klassieke muziek wordt nu aan de house pagina toegevoegd.
6. Voeg de volgende waarden in bij het venster Page Properties, deze kun je vinden onder de menuoptie Modify. Lettertype: Century Gothic
   Size lettertype: 15
   Tekstkleur: #000000
   Achtergrondkleur: #CC9966
   Link color: #330000
   Rollover links: #663300
   Visited links: #663333
   Active Links: #330000
7. De titel Klassieke Muziek en de subkoppen worden vetgedrukt weergegeven.
8. Geef de subkoppen de grootte 16 pixels.
9. Centreer de Titel Klassieke Muziek en geef deze de grootte 36 pixels.

Figuur 7.3: Voorbeeld klassieke_muziek.htm pagina.

Oefening 7.2 Een Link aanmaken

1. Type linksboven in het document klassieke muziek de tekst HOME.
2. Selecteer de tekst HOME.
3. Klik in de menubalk op de menuoptie Modify.
4. Kies de optie Make Link (Ctrl+L).
5. Kies het html bestand index.htm.
6. Dit bestand komt achter File Name te staan.
7. Klik op OK.

Figuur 7.4: Selecteren van een file voor aanmaken van een link.

In de onderste helft van dit scherm kun je nog twee dingen opgeven:

• URL: In het vak URL verander je niets als je een link maakt naar een andere pagina binnen je site.
• Relative to: deze optie zal normaal gesproken op document blijven staan. Dit betekent dat de locatie van de pagina waarnaar verwezen wordt, opgeslagen wordt omschreven vanuit de locatie waar de pagina staat die de hyperlink bevat. De andere mogelijkheid (relative to site root) wordt gebruikt als de locatie van de pagina die de link bevat (regelmatig) verandert. Als je deze optie kiest slaat Dreamweaver de route naar de pagina op omschreven vanuit de hoofdmap van de pagina. Het voordeel is dat het doel van de link nu altijd teruggevonden kan worden, zelfs als de locatie van het bestand dat de link bevat verandert. Het nadeel is echter dat als de pagina die de link bevat en de pagina waarnaar de link verwijst samen worden verplaatst naar een nieuwe locatie, de link niet meer werkt.

Oefening 7.3 Meerdere links maken.

1. Type linksboven in het document klassieke muziek de tekst KLASSIEKE MUZIEK.
2. Selecteer deze tekst.
3. Klik in de menubalk op de menuoptie Modify.
4. Kies de optie Make Link (Ctrl+L).
5. Kies het html bestand klassieke_muziek.htm.
6. Dit bestand komt achter File Name te staan.
7. Druk op OK.
8. Doe dit op dezelfde manier voor de teksten: JAZZ, HOUSE en WERELDMUZIEK.
9. De HTML-bestanden zijn jazz.htm, index.htm en wereldmuziek.htm.

Oefening 7.4 Wijzigen van een link.

Bij een van de links die in oefenopdracht 7.3 is aangemaakt, is de verkeerde link opgegeven.

1. Selecteer de tekst HOUSE.
2. Druk in de menubalk op de menuoptie Modify.
3. Kies de optie Change Link.
4. Plaats achter File Name: de goede link house.htm.
5. Druk op OK.

Als je een link wilt verwijderen kan dat op de volgende manier:

1. Selecteer de link die je wilt verwijderen.
2. Druk in de menubalk op de menuoptie Modify.
3. Kies de optie Remove Link.
4. De link wordt verwijderd.

Figuur 7.5: Voorbeeld klassieke_muziek.htm pagina na uitvoeren van de oefeningen 7.3 en 7.4.

Overigens zijn links ook direct vanuit de Property Inspector (window>properties) te maken en te bewerken. Het vak link van de Property Inspector bevat, net als het vak URL in het Make Link venster, de locatie van de pagina waarnaar gelinkt wordt door de geselecteerde tekst. Direct achter dit tekstvak staat een soort viziertje. Dit viziertje kun je (bijvoorbeeld in de sitemap) naar een bestand toeslepen, Dreamweaver vult dan automatisch in het vak Link de locatie van dit bestand in. Door te klikken op het mapicoontje dat rechts van het viziertje staat, kom je in het bekende Change Link of Make link venster.

Figuur 7.6: Via de Property Inspector een link aanmaken.

7.3.2. Link naar pagina op het web

Natuurlijk verwijzen niet alle links op je pagina naar andere pagina's van je site. Het is mogelijk een link te maken naar ieder willekeurig ander internetadres. Als je een link naar een andere site wilt maken, moet je het volledige internetadres (URL) invoeren. De procedure om de link in te voegen verloopt precies hetzelfde als het invoegen van een link binnen je site, met dat verschil dat je in het vak URL: het internetadres vooraf laat gaan door http://, bijvoorbeeld http://www.learnit.nl. Zou je http:// vergeten, dan zou worden gezocht naar het bestand www.learnit.nl in de map waar de pagina met de link staat. Let op: soms is het adres hoofdlettergevoelig.

7.3.3 Email link

Soms kan het handig zijn een link in te voegen die, als er op wordt geklikt, een nieuwe e-mail maakt, met het emailadres alvast ingevuld. Er zijn twee manieren om een dergelijke link in te voegen. Ten eerste kun je de functie insert Email link gebruiken.

Oefening 7.5 Email Link invoegen

1. Kies in de menubalk de menuoptie Insert.
2. Kies de optie Email link.
3. Typ achter Text: Mail me.
4. Typ achter E-mail: klassieke_muziek@muziek.nl.
5. Druk op OK.

Daarnaast kun je ook op de gebruikelijke manier een hyperlink maken en vervolgens in het vak URL mailto: typen, gevolgd door het emailadres waarnaar verzonden kan worden.

Figuur 7.7: Invoegen van een Email link in de Property Inspector

7.3.4. Named Anchor

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 met een naam worden gegeven. Dit doe je door in de designview de cursor te zetten op de plek die je een naam wilt geven en vervolgens de functie Insert Named Anchor te gebruiken.

Figuur 7.8: Venster voor invoegen van een Named Anchor

Oefening 7.6 Named Anchor invoegen

1. Zet de Cursor voor de subkop Barok.
2. Kies in de menubalk de menuoptie Insert.
3. Kies de optie Named Anchor (Ctrl+Alt+A).
4. Typ achter Anchor Name: Barok.
5. Druk op OK.
6. Ga naar het begin van het document, plaats de cursor net boven de subkop barok. Typ de tekst Barok in en druk op Enter.
7. Typ in het vak Link in de Property Inspector de tekst: #Barok en druk op Enter
8. Controleer of de Named Anchor werkt, druk op de functie toets F12 om de browser te openen. In de tekst verschijnt nu een icoontje van een anker op de plaats waar het Anchor is ingevoegd.
9. De link wordt vastgelegd en onderstreept weergegeven.
10. Herhaal de stappen 1 tot en met 9 voor de subkoppen, Classicisme, Romantiek, 20e eeuw en Moderne Muziek. Hou bij de 20e eeuw en Moderne Muziek rekening met de spatie en gebruik hiervoor een liggende streepje _.

De pagina zo er dan uit moeten zien zoals hieronder.

Figuur 7.9:Voorbeeld klassieke_muziek.htm pagina.

Dus als je naar een Anchor wilt verwijzen, maak je op de gebruikelijke manier een hyperlink aan, waarbij je in het vak URL een hekje (#) zet, gevolgd door de naam van het Anchor waarnaar je verwijst. Het is ook mogelijk om naar een Anchor op een andere pagina te verwijzen. In dat geval zet je achter de locatie van de pagina die in het vak URL staat een hekje (#) en daarachter weer de naam van het Anchor in die site.

Figuur 7.10: Named Anchor invoeren in het link vak in de Property Inspector.

7.3.5 Link naar FTP/zip (download-link)

Als je gebruikers de mogelijkheid wilt geven een bestand te downloaden, zul je een link naar dat bestand moeten plaatsen. In principe gaat dat op precies dezelfde manier als een link plaatsen naar een pagina. Je kunt een bestand (bijvoorbeeld een programma) dat gebruikers kunnen downloaden gewoon bij de bestanden van je site zetten en er op de gebruikelijke manier een link naar maken. De browser zal automatisch herkennen dat het niet om een internetpagina gaat en zal, als de gebruiker op de link drukt, de gebruiker vragen of het bestand gedownload moet worden. Soms staat een bestand dat je gebruikers wilt laten downloaden op een zogenaamde FTP-server. Als dat het geval is, zul je in het vak URL het volledige adres van het bestand moeten zetten, voorafgegaan door ftp://. Een voorbeeld van een geldig ftp-adres zou zijn: ftp://ftp.mijnbedrijf.nl/map/submap/bestand.zip.

Figuur 7.11: Een FTP-bestand link invoeren in de Property Inspector.

Oefening 7.7 FTP-bestand download-link maken.

1. Zet de Cursor aan het einde van het document onder Moderne Muziek en geef een Enter.
2. Typ de tekst: Download hier bovenstaande tekst.
3. Selecteer deze tekst.
4. Klik in de Property Inspector op het mapje achter link.
5. De tekst Klassieke Muziek moet gekoppeld worden aan deze link, deze is te vinden in de map Cursus Dreamweaver en dan de submap Webteksten te kiezen.
6. Selecteer het document Klassieke Muziek door er op te klikken.
7. Druk op OK.
8. De koppeling is nu gemaakt.
9. Controleer de download-link, als het goed is wordt er een venster geopend waarin gevraagd wordt of je het bestand wilt downloaden.

7.3.6. Link naar javascript en null-links

HTML biedt ook de mogelijkheid om aan een hyperlink een stukje javascript te verbinden. Als er op zo'n link wordt geklikt, wordt een bepaald stukje javascript-code of een javascript-functie uitgevoerd.

Oefening 7.8 Scriptlink toevoegen.

1. Zet de Cursor onder de titel Klassieke Muziek maar boven de subkop Barok.
2. Open de Property Inspector (Window>Properties of Ctrl+F3).
3. Typ in het vak Link javascript:
4. Typ achter de dubbelepunt het javacsript-commando of de procedure die je wilt aanroepen.
5. Druk op OK.

Een nul-link is een link die niet naar een bepaald internetadres verwijst en die ook niet verwijst naar een javascript-code. Een dergelijke link wordt gebruikt om aan een stukje tekst een behavior toe te voegen. Als je een null-link hebt gemaakt, kun je vervolgens met behulp van behaviors bijvoorbeeld een image laten verschijnen of veranderen als de gebruiker met de muis over de tekst heen beweegt.

7.4 Andere dan tekst-hyperlinks

7.4.1. Een link toevoegen aan een Image

Behalve van een stukje tekst is het ook mogelijk van een afbeelding een link te maken. Op deze manier kun je bijvoorbeeld tekstlinks vervangen door mooie knoppen. Een link maken van een afbeelding gaat eigenlijk op dezelfde manier als het maken van een tekstlink, met het verschil dat je nu geen tekst maar een afbeelding selecteert voordat je de Make Link opdracht geeft of naar de Property Inspector gaat om de link te maken.

Oefening 6.9 Een link maken van een afbeelding.

1. Voeg de afbeelding klassieke_muziek_achtergrondorkest toe.
2. Deze is te vinden in de map Cursus Dreamweaver, submap Images.
3. Plaats de afbeelding onder de titel Klassieke Muziek, centreer de afbeelding.
4. Selecteer de afbeelding.
5. Klik op Modify.
6. Klik op Make Link (Ctrl+L).
7. Selecteer het bestand index.htm, hier wordt de afbeelding naar toe gelinkt.
8. Druk op OK.

7.4.2 Een link toevoegen aan een bepaald gebied op een image

Het kan gebeuren dat je wilt dat je slechts van een gedeelte van een afbeelding een link wilt maken. Dit komt bijvoorbeeld voor wanneer je een foto hebt met verschillende personen, waarbij je wilt dat er bij iedereen een persoonlijke pagina verschijnt als je op de desbetreffende persoon klikt. In Dreamweaver kan dit door een deel van de foto (de persoon) te markeren en er een hotspot van te maken. Je gebruikt ook hotspots als je een menu maakt met verschillende opties en je dit gehele menu hebt opgeslagen als één afbeelding.

Een gebied van een afbeelding waaraan een hyperlink is verbonden wordt in Dreamweaver een hotspot genoemd. Een hotspot maak je vanuit de Property Inspector. Als je een hotspot aan een afbeelding hebt toegevoegd kun je deze hotspot een hyperlink meegeven. Daarvoor selecteer je de hotspot en geef je de link op vanuit de Property Inspector.

Figuur 7.12: Linksonder in het vierkant staan drie knoppen voor het maken van een hotspot.

Oefening 6.10 Een Hotspot maken

1. Plaats de cursor achter de link rechtsboven aan de pagina met de tekst Barok, geef een enter.
2. Kies in de menubalk de menuoptie Insert image.
3. Selecteer de afbeelding Barok.gif uit de submap Images en druk op Ok.
4. Open de Property Inspector (Window>Properties of Ctrl+F3).
5. Maak de afbeelding iets kleiner, W: 90 en H: 115.
6. Druk in de Property Inspector op één van de drie hotspots-knoppen (rechthoek, cirkel of vrij figuur). In de afbeelding van de Property Inspector zijn de hotspots knoppen te herkennen aan het vierkant dat er om heen staat.
7. Klik op de hotspot-knop vierkant en selecteer de gehele afbeelding.
8. Als de afbeelding door gebruik van de hotspot-knop geselecteerd is, wordt in de Property Inspector de bijbehorende eigenschappen getoond.
   

   Figuur 7.13: Eigenschappen van de Hotspot Property Inspector.
   

9. Geef nu in de Property Inspector van de zojuist gemaakte Hotspot in het vak Link de locatie van de pagina waar de link naar verwijst, in dit geval #Barok.
10. Geef het vak Map de naam op van de image-map: Hotspots, die Dreamweaver automatisch in de HTML-code aanmaakt.
11. Herhaal de stappen 1 tot 7 voor de afbeeldingen; Classicisme, Romantiek, 20e eeuw en Moderne Muziek.
12. De bijbehorende links zijn; #Classicisme, #Romantiek, #20e_eeuw en Moderne_Muziek.

7.4.3 Flash Buttons, Flash tekst, navigation Bar en Jump menu

Er is, behalve met behulp van een tekst- of imagelink nog een aantal mogelijkheden om een hyperlink in een site te verwerken.

Ten eerst kan een link gemaakt worden door een Flash button in te voegen. Op het moment dat de gebruiker op de button druktwordt hij naar een andere pagina gebracht. Het adres van de hyperlink kun je opgeven in het venster Insert Flash Button in het vak Link. Als je op browse klikt krijg je het bekende bestandsvenster te zien dat we ook al kennen van de functie Make Link. Behalve aan Flash Buttons kan ook aan een Flash tekst een hyperlink worden verbonden. In het venster Insert Flash Tekst is weer een vak met daarachter een browse knop.

Een andere manier om gebruikers de mogelijkheid te geven om van de ene naar de andere pagina binnen je site te gaan is met behulp van een Navigation Bar. Over de Navigation bar is meer informatie te vinden in les 5 Tekst.

Een vierde manier is door een zogenaamd Jump menu. Dit is een (dropdown) menu, dat de gebruiker naar een bepaalde pagina laat gaan als hij de bijbehorende optie kiest. Zo kun je een dropdown menu maken met alle belangrijke pagina's van je site, zodat de gebruikers gemakkelijk van de één naar de andere pagina binnen je site kunnen springen.

7.5 Nieuw venster; Target

Als de gebruiker op een link klikt verschijnt de pagina waarnaar de link verwijst normaal gesproken in hetzelfde venster als waar de pagina met de link stond. De nieuwe pagina vervangt dus de oude. Soms wil je echter dat een link het venster met de oude pagina geopend laat en de nieuwe pagina in een nieuw venster laat verschijnen. Dit is heel gemakkelijk te doen door de optie Target te gebruiken. Als je in de design-view een hyperlink selecteert, verschijnt er in de property inspector het Dropdown- menu Target. Dit menu kent 4 opties, namelijk _top, _blank, _self, en _parent. De laatste twee zijn alleen van belang als je gebruik maakt van frames en worden dan pas ook in Les 12 besproken. De optie _top is de gebruikelijke instelling: de nieuwe pagina ‘vervangt' de oude pagina en verschijnt dus in hetzelfde venster. Als je _blank als target kiest zal de pagina in een nieuw venster verschijnen en blijft de pagina die de link bevat dus aanwezig.

7.6 Eindopdracht

Open het bestand jazz.htm, maak het onderstaande voorbeeld na.

Figuur 7.14: voorbeeld van de jazz.htm pagina.

De volgende gegevens kun je gebruiken bij het maken van de Jazz pagina over wereldmuziek:

• De tekst voor deze pagina kun je vinden in de map Cursus Dreamweaver, webteksten, jazz.doc.
• Lettertype: Geneva
• Size: 12
• De standaard tekstkleur is geel (#FFFFCC)
• Laat de koptekst (Jazz) centreren en vetgedrukt weergeven
• Size koptekst: 36 pixels
• Achtergrondkleur: #663333
• Kleur Koptekst: #FFFFCC
• Kleur active link: #FFCC00
• Kleur visited link: #FFCC66
• Underline style: Never underline (Page Properties, Categorie Links)
• Size subkoppen: 18 pixels

Opdrachten:

1. Plaats bovenaan de pagina de volgende hyperlink, Home met als link pagina index.htm. Geef een spatie en voeg de link Klassieke Muziek (klassieke_muziek.htm) toe. Doe dit ook voor Jazz, House en Wereldmuziek. De pagina's waarnaar toe gelinkt moet worden zijn te vinden in de map Cursus Dreamweaver.
2. Centreer de hyperlinks.
3. Voeg een email link toe, plaats deze aan het einde van de pagina. De tekst voor de email link is: Mail mij voor meer informatie
4. Maak de volgende Named Anchors: inleiding, Klassieke Jazz, Swing, Mainstream, Bossa Nova, Afro-Cuban Jazz en Europese.
5. Ga achter de email link staan en geef een enter, Typ de tekst “Download hier de geschiedenis van de Jazz ”, koppel het bestand jazz.doc aan deze tekst. Deze tekst is te vinden in de map Cursus Dreamweaver, webteksten.
6. Na de inleiding moet de afbeelding jazz.jpg ingevoegd worden.
7. Voeg onder de hyperlinks de volgende drie afbeeldingen in: john_coltrane.jpg, josephine_baker.jpg en miles.davis.jpg en centreer de afbeeldingen.
8. Maak een link van de afbeelding john_coltrane.jpg, met als link wereldmuziek.htm.
9. Maak een link van de afbeelding josephine_baker.jpg, met als link klassieke_muziek.htm.
10. Maak van de afbeelding miles.davis.jpg een hotspot maar alleen van de afbeelding niet van de tekst die er onder staat en voeg de link index.htm toe.
11. Voeg een Flash Button in, deze moet aan het einde van de pagina komen aan de rechterkant, met de tekst Terug en link deze button naar index.htm. Geef de flashbutton de stijl blip arrow.
12. Zorg er voor dat de hyperlink Home geopend wordt in een nieuw venster.

Disclaimer: The free online courses have been put to your disposal and have been developed by the Learnit company. This course is free but should not be used for any commercial purposes. This work is copyright protected; copyright is in the keeping of Learnit.