Hyperlinks maken voor Adobe Muse-websites

In dit artikel leest u hoe u kunt werken met hyperlinks in Adobe Muse. Met hyperlinks kunt u koppelingen maken naar externe websites, downloadbare bestanden, e-mailadressen en meer. De downloadbare bestanden kunnen PDF-, DOC-, PPT-, TXT-, rich-mediabestanden of andere typen bestanden zijn die u wilt delen met uw bezoekers, maar die momenteel niet worden ondersteund voor invoeging in de Adobe Muse-interface. U kunt koppelingen maken naar bestanden die momenteel naar uw Adobe Muse-hostaccount zijn geüpload en naar bestanden die worden gehost op websites van derden.

Video | Een hyperlink maken

Ankerkoppelingen toevoegen in een pagina

In deze sectie wordt uitgelegd hoe u menu-elementen met ankergebieden kunt verbinden aan twee elementen, zodat u de ankerkoppelingen aan het menu Handmatig kunt toevoegen. Voer de volgende stappen uit:

1. Klik ergens op de pagina om de pagina te selecteren (zodat in de selectie-indicator het woord Pagina wordt weergegeven). Klik vervolgens twee keer op de widgetmenu-opdracht (widgetcontainer). De eerste keer wordt de volledige widget Handmatig menu geselecteerd en de tweede keer de menuoptie. In de selectie-indicator wordt het woord Menuoptie weergegeven.
2. Klik op het menu Hyperlinks om de volledige lijst met pagina's en ankerlabels voor de site weer te geven. Zoek in de sectie Computer de rechterpagina; u ziet dat de vier ankerlabels die u hebt gemaakt direct onder de pagina worden weergegeven. Selecteer het desbetreffende ankerlabel om dit aan de menuoptie te koppelen.

3. Herhaal stap 2 om meer ankerkoppelingen toe te voegen.
4. Kies Bestand > Site-eigenschappen. Controleer of het selectievakje Actieve staat voor ankerkoppelingen inschakelen op het tabblad Lay-out is ingeschakeld. Deze optie is standaard ingeschakeld voor alle nieuwe websites, maar als u een oudere site bewerkt, moet u het vakje mogelijk selecteren.
5. Kies Bestand > Voorvertoning van pagina weergeven in browser.

Als u op de koppelingen klikt om de verschillende paginagebieden weer te geven, ziet u dat de bijbehorende actieve staat wordt weergegeven in het navigatiemenu. Met deze sitefuncties weten bezoekers beter welke sectie ze bekijken. Sluit de browser ga terug naar Adobe Muse.

Probeer ook de pagina omhoog en omlaag te schuiven. U ziet hoe de code in de pagina de locatie van elk ankerlabel vaststelt en de actieve staat van het handmatige menu bijwerkt terwijl de pagina door elk paginagebied wordt geschoven. Deze methode werkt voor pagina's die zowel verticaal als horizontaal worden geschoven.

Opmerking: De lengte of breedte van een pagina moet voldoende ruimte bieden om de ankerlabels in staat te stellen naar elk gebied te springen. Als de paginagebieden te dicht bij elkaar staan en alle inhoud in een browservenster past en zonder schuiven zichtbaar is, lijkt het alsof de ankerlabels niet naar het volgende gebied gaan.

6. Sluit de browser ga terug naar Adobe Muse.

In de volgende sectie leert u hoe u downloadkoppelingen kunt toevoegen, zodat u bezoekers in staat kunt stellen bestanden in indelingen als PDF, DOC, MP3, MOV en PSD, alsmede JPEG-bestanden met hoge resolutie te downloaden.

Tip: Als u met andere ontwerpers aan een siteproject werkt, kunt u een koppeling met .Muse-bronbestanden maken, zodat teamleden deze rechtstreeks van uw website kunnen downloaden.

Werken met ankerlabelgebieden en actieve staten

Het maken van ankergebieden op een webpagina is een eenvoudige manier om verschillende delen van een pagina visueel van elkaar te scheiden. Elk van deze secties kan gemakkelijk worden geopend via Ankerkoppelingen, die zijn ontworpen om eenvoudige navigatie op een pagina mogelijk te maken.

In het definitieve ontwerp dient een webpagina ankerkoppelingen te bevatten waarmee bezoekers verticaal naar het gebied kunnen gaan waarin het desbetreffende menu wordt weergegeven. U kunt het toevoegen van ankerlabels vergelijken met het aanbrengen van een markering ergens op een pagina. Wanneer bezoekers op een koppeling naar dat anker klikken, wordt door langere pagina's heen geschoven om naar de specifieke sectie te springen waar de markering zich bevindt.

1. Klik op de ankerknop in het bovenste navigatiegebied om het gereedschap Anker te laden.

2. Klik eenmaal helemaal boven aan de pagina, boven de sitenavigatie op het hoogste niveau in het koptekstgebied. Desgewenst kunt u de rechthoek voor de koptekst tijdelijk uit de weg schuiven. Als u de koptekstinhoud verplaatst, moet u deze later weer terugzetten.
3. Voer in het dialoogvenster Een ankernaam wijzigen dat wordt weergegeven de naam van het anker in.

4. Herhaal stap 1 tot en met 3 om ankergebieden te definiëren en meer ankerkoppelingen toe te voegen.

Nadat u in de volgende stap een widget Handmatig menu hebt toegevoegd, gaat u de knoppen aan de ankerlabels koppelen om navigatie mogelijk te maken waarmee bezoekers langs de pagina omlaag kunnen gaan om elk menu te lezen.

Koppelingen naar downloadbare bestanden toevoegen

1. Gebruik tijdens het bewerken van een pagina in de ontwerpweergave het gereedschap Tekst om een nieuw tekstkader te maken in de rechterbovenhoek van het tekstkader van het menu Ontbijt. Typ de woorden: Download menu.
2. Gebruik, terwijl het tekstkader nog steeds is geselecteerd, het deelvenster Tekst om de volgende instellingen toe te passen:
   • Weblettertype: Kaushan Script (of elk willekeurig ander scriptlettertype waaraan u de voorkeur geeft)
   • Tekengrootte: 14
   • Kleur: #EEE5C4 (In deel 3 hebt u deze staalkleur gewijzigd in crème-menu)
   • Regelafstand: 57%
   • Uitlijning: Gecentreerd
3. Stel in het menu Vulling de vulkleur in op Geen. Klik op de map naast de sectie Afbeelding om het bestand download-bg.png te selecteren in de map met voorbeeldbestanden om de achtergrondafbeelding in te stellen. Zorg ervoor dat het menu Aanpassen is ingesteld op Oorspronkelijke grootte en dat Positie de waarde Gecentreerd bevat.

4. Klik buiten het menu Vulling om het te sluiten. Gebruik indien nodig het gereedschap Selecteren om de grootte van het tekstkader aan te passen en dit te verplaatsen zodat het is gecentreerd in de rechterbovenhoek van het tekstkader van het menu Ontbijt.

5. Zorg ervoor dat het tekstkader nog steeds is geselecteerd en gebruik het menu Koppelingen in het regelpaneel om de optie Koppeling naar bestand maken te selecteren. Blader in het dialoogvenster Importeren dat wordt weergegeven, naar het bestand om het te selecteren en klik vervolgens op Openen

Opmerking: Wanneer u bladert om een bestand te selecteren met de functie Koppeling naar bestand maken, wordt het bestand één van de middelen van de site die worden geüpload als de site wordt gepubliceerd of wordt het opgenomen in de sitebestanden wanneer de site wordt geëxporteerd. Het wordt aanbevolen om alle bestanden waarnaar u wilt koppelen vanaf de site te kopiëren naar de lokale map van de site, samen met eventuele andere afbeeldingsbestanden die worden gebruikt op uw site.

De koppeling naar het PDF-bestand is nu toegevoegd. Als u in het deelvenster Middelen kijkt, ziet u dat het bestand nu wordt weergegeven als een van de middelen van de website.

6. Gebruik het gereedschap Selecteren om het tekstkader te selecteren. Kopieer het tekstkader van Download menu en plak het over de rechterbovenhoek van het menu Lunch heen. Herhaal deze stap nog tweemaal om kopieën te maken die over de rechterbovenhoek van de menu's Diner en Dessert heen worden geplaatst.

In een werkelijk project kunt u koppelingen met vier aparte menubestanden maken om bezoekers vier verschillende downloadbare PDF-bestanden te bieden die zij kunnen gebruiken om de menu's te bekijken en af te drukken. In het kader van deze zelfstudie heeft de knop Download echter een koppeling naar hetzelfde PDF-bestand in elk paginagebied.

7. Kies Bestand > Voorvertoning van pagina weergeven in browser. Klik op een van de menuoptie in het menu Horizontaal om naar dat menu op de pagina te gaan. Als u naar beneden schuift om de menu's Diner en Dessert te bekijken, wordt de koptekst boven op de inhoud van de andere pagina weergegeven. Dit gedrag doet zich voor omdat op de pagina "food" gebruik wordt gemaakt van de stramienpagina Voorgrond en de koptekstinhoud van die pagina naar de voorgrond is verplaatst.
8. Klik op de koppeling Download menu en bekijk hoe het PDF-bestand wordt gedownload naar uw computer.

Afhankelijk van de browser die u gebruikt en uw browservoorkeuren, ziet u verschillende gedragingen. Sommige browsers zullen het PDF-bestand weergeven in het browservenster terwijl andere het PDF-bestand naar uw bureaublad downloaden, waar u het kunt openen met Acrobat Pro of Acrobat Reader.

Koppelingen naar e-mailadressen maken

Als u Adobe Muse al een tijdje hebt gebruikt, is u misschien opgevallen dat het menu Koppelingen onlangs opnieuw in secties is onderverdeeld om het gemakkelijker te maken om de paginanamen en items te vinden waarmee u kunt koppelen. In deze sectie gaat u nader onderzoeken hoe het menu Koppelingen is gestructureerd en hoe u de items in de menulijst kunt filteren. U leert tevens hoe u koppelingen naar e-mailadressen kunt toevoegen.

1. Klik op de pijl-omlaag in het menu Koppelingen om de volledige lijst weer te geven.

2. Het menu Koppelingen is onderverdeeld in secties. In Onlangs gebruikte koppelingen worden koppelingen naar externe websites weergegeven die aan de site zijn toegevoegd. U kunt elke URL rechtstreeks invoeren in het veld Koppelingen om een koppeling met externe webpagina's tot stand te brengen.
3. De sectie Computer bevat de pagina's op de huidige site. De ankerlabels die u hebt toegevoegd aan de pagina "food" worden in alfabetische volgorde weergegeven onder de pagina "food". Dit betekent dat u ankers met dezelfde naam op meerdere pagina's van een site kunt maken en deze toch gemakkelijk kunt identificeren bij het instellen van koppelingen. Op deze voorbeeldsite is er slechts één lay-out Computer, maar als de site alternatieve lay-outs bevat voor Telefoon of Tablet, worden deze secties weergegeven met de bijbehorende reeks van pagina's.
4. De sectie Bestanden aan het einde bevat de functie Koppeling naar bestand maken en eventuele downloadbare bestanden die aan de huidige site zijn toegevoegd. Aangezien u onlangs een koppeling naar het bestand KatiesCafeMenu.pdf hebt toegevoegd, wordt de naam van dit bestand weergegeven in deze sectie. Hierdoor is het gemakkelijk om een nieuwe koppeling naar een gemeenschappelijk middel te maken vanaf meerdere pagina's op de site.
5. Als u een e-mailkoppeling wilt toevoegen (waarmee, wanneer erop wordt geklikt, de e-mailclient van de bezoeker wordt geopend en een nieuw bericht wordt gestart met het e-mailadres in het veld Aan), voert u als volgt het e-mailadres met het voorvoegsel mailto: in het menuveld Koppelingen in:
   
   mailto:e-mail@adres.com
   
   
6. Soms kan de lijst met items in het menu Koppelingen behoorlijk lang en moeilijk door te nemen zijn op grotere websites. Als u een specifiek item (pagina, anker, bestand of externe URL) zoekt waarmee u een koppeling wilt maken, typt u de eerste letters van de koppeling in het menuveld Koppelingen, waarna de bijbehorende items worden weergegeven. Hierdoor kunt u snel door de lijst bladeren en de items vinden waarmee u een koppeling tot stand wilt brengen.

Koppelingen naar externe websites toevoegen

Nu de pictogramknoppen voor de sociale media op de juiste plek staan, gaat u de externe koppelingen naar elk van de sociale netwerksites toevoegen.

1. Selecteer het Facebook-pictogram en typ (of kopieer/plak) als volgt de koppeling naar de Facebook-pagina van Katie's Cafe in het menuveld Koppeling: http://www.facebook.com/KatiesCafeSF
2. Selecteer het Google+-pictogram en typ (of kopieer/plak) de volgende koppeling naar de pagina van Katie's Cafe op Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Selecteer het Twitter-pictogram en typ (of kopieer/plak) de volgende koppeling naar de pagina van Katie's Cafe op Twitter: http://twitter.com/katiescafesf
4. Klik nogmaals op het Facebook-pictogram om dit te selecteren. Klik op het blauw onderstreepte woord Koppelingen links van het menu Koppelingen. Schakel in het dialoogvenster dat wordt weergegeven het selectievakje De koppeling openen in een nieuw venster of op een nieuw tabblad in.
5. Herhaal stap 4 om de koppelingen met Google+ en Twitter zodanig in te stellen dat deze tevens in een nieuw browservenster worden geopend.

Dit is een veelgebruikte conventie bij webontwerp: koppelingen die naar andere pagina's van dezelfde site gaan, worden geopend in hetzelfde browservenster (dit gebeurt standaard in Adobe Muse) en koppelingen naar pagina's op andere, externe websites worden geopend in een nieuw venster of op een nieuw tabblad.

De URL van een bestand vaststellen om de koppeling te kunnen toevoegen

Als u de koppeling wilt voorbereiden voordat u deze aan een pagina toevoegt in uw Adobe Muse-site, gebruikt u een browser om het live-bestand te bezoeken dat is geüpload. Voer de volgende stappen uit.

1. Start de browser van uw keuze.
2. Blader naar uw site of naar een externe site die het geüploade afhankelijke bestand bevat. U kunt een zoekmachine zoals Google gebruiken, of u kunt de domeinnaam van de site rechtstreeks in de adresbalk van de browser typen.

3. Nadat u de startpagina van de gewenste site hebt geopend, klikt u door de sitenavigatie of typt u de volledige URL in de adresbalk van de browser om het specifieke afhankelijke bestand te openen. Na deze stap wordt het geopende bestand weergegeven, afgespeeld of gedownload.
4. Als u zeker weet dat u de juiste URL hebt ingevoerd om het geüploade bestand te openen, selecteert u de hele inhoud van de adresbalk van de browser en kiest u Bewerken > Kopiëren. U kunt ook de sneltoetsen Command+C (MAC) of Control+C (Windows) gebruiken.

Nu hebt u de URL naar het afhankelijke bestand naar het klembord gekopieerd. Kopieer geen andere items tot u de URL van het afhankelijke bestand in het veld Hyperlink hebt geplakt, zoals beschreven in de volgende sectie.

Koppelingen naar een extern bestand maken

Nadat u een afhankelijk bestand hebt geüpload, het via de browser hebt geopend en de URL van het bestand hebt gekopieerd, rest u nog één laatste stap: de koppeling maken op een pagina van uw Adobe Muse-site. Voer de volgende stappen uit:

1. Start Adobe Muse. Dubbelklik op de paginaminiatuur om de pagina in de ontwerpweergave te openen.
2. Selecteer een stuk tekst, een geplaatste afbeelding of een rechthoekige vorm als de ''knop'' waarop bezoekers moeten klikken om het afhankelijke bestand te downloaden of te openen.
3. Terwijl de tekst of het pagina-element is geselecteerd, klikt u op het vervolgkeuzemenu van het veld Hyperlink en plakt u de URL (absoluut pad) in het afhankelijke bestand dat u eerder hebt gekopieerd.

Als u de koppeling wilt laten openen in een nieuw browservenster, klikt u op het label Hyperlink direct links van het Hyperlink-venster. In het dialoogvenster dat wordt weergegeven, schakelt u het selectievakje naast de optie De koppeling openen in een nieuw venster of op een nieuw tabblad in, zoals hieronder wordt weergegeven.

Sla de pagina op en publiceer de wijzigingen in de site.

Bekijk de pagina in een browser. Klik op de gekoppelde tekst of op de knop om te controleren of de koppeling goed werkt.

Raadpleeg de pagina Adobe Muse Help en zelfstudies voor meer tips voor het werken met Adobe Muse of de pagina Adobe Muse Events voor live en opgenomen webinars.