So erstellen Sie Hyperlinks für Adobe Muse-Websites

In diesem Artikel erfahren Sie, wie Sie mit Hyperlinks in Adobe Muse arbeiten. Mithilfe von Hyperlinks können Sie Verknüpfungen zu externen Websites, herunterladbaren Dateien, E-Mail-Adressen und mehr erstellen. Bei den herunterladbaren Dateien kann es sich um PDF-, DOC-, PPT-, TXT-, Rich-Media-Dateien oder andere Dateien handeln, die Sie für Ihre Besucher freigeben möchten, die aber derzeit nicht in die Schnittstelle von Adobe Muse eingefügt werden können. Sie können Verknüpfungen zu Dateien herstellen, die Sie auf Ihr Adobe Muse-Host-Konto hochgeladen haben, sowie zu Dateien, die auf Websites von Drittanbietern gehostet werden.

Video | So erstellen Sie einen Hyperlink

Hinzufügen von Ankerlinks auf einer Seite

In diesem Abschnitt erfahren Sie, wie Sie Menüelemente mit Ankerbereichen verbinden, um die Ankerlinks zum manuellen Menü hinzuzufügen. Führen Sie folgende Schritte aus:

1. Klicken Sie auf eine beliebige Stelle auf der Seite, um die Seite auszuwählen (sodass der Auswahlindikator das Wort „Seite“ anzeigt). Klicken Sie zweimal auf den Widget-Menübefehl (Widget-Container). Mit dem ersten Klick wird das gesamte Widget für das manuelle Menü ausgewählt und mit dem zweiten Klick das Menüelement. Der Auswahlindikator zeigt das Wort „Menüelement“ an.
2. Klicken Sie auf das Links-Menü, um die vollständige Liste der Seiten und Anker-Tags für die Site zu sehen. Suchen Sie im Abschnitt „Desktop“ die richtige Seite. Sie werden jetzt sehen, dass die Anker-Tags, die Sie erstellt haben, direkt darunter aufgelistet sind. Wählen Sie das entsprechende Anker-Tag aus, um es mit dem Menüelement zu verlinken.

3. Wiederholen Sie Schritt 2, um weitere Ankerlinks hinzuzufügen.
4. Wählen Sie Datei > Site-Eigenschaften aus. Stellen Sie auf der Registerkarte „Layout“ sicher, dass das Kontrollkästchen „Aktiven Status für Ankerlinks aktivieren“ aktiviert ist. Diese Option ist standardmäßig für alle neuen Sites aktiviert, aber wenn Sie eine ältere Site bearbeiten, sollten Sie den Status des Kontrollkästchens überprüfen.
5. Wählen Sie Datei > Seitenvorschau in Browser.

Wenn Sie auf die Links klicken, um die verschiedenen Seitenabschnitte anzuzeigen, beachten Sie, dass der entsprechende aktive Status im Navigationsmenü angezeigt wird. Diese Funktion hilft Besuchern bei der Orientierung, da sie immer wissen, welchen Abschnitt sie gerade sehen. Schließen Sie den Browser und kehren Sie zu Adobe Muse zurück.

Scrollen Sie auf der Seite nach oben und nach unten und beobachten Sie, wie der Code in der Seite die Position der Anker-Tags erkennt und den aktiven Status des manuellen Menüs aktualisiert, während sich die Seite durch die einzelnen Seitenabschnitte bewegt. Diese Methode funktioniert für Seiten, die vertikal und horizontal gescrollt werden.

Hinweis: Eine Seite muss so hoch oder breit sein, dass ausreichend Raum bleibt, damit die Anker-Tags zu den einzelnen Abschnitten springen können. Wenn die Seitenabschnitte zu nahe beieinander liegen, sodass der Inhalt in ein Browserfenster ohne Bildlauf passt, verlieren die Anker-Tags ihre Funktion und ein Springen zum nächsten Bereich ist nicht zu erkennen.

6. Schließen Sie den Browser und kehren Sie zu Adobe Muse zurück.

Im nächsten Abschnitt lernen Sie, wie Download-Links hinzugefügt werden, damit Ihre Besucher Dateiformate wie z. B. PDF, DOC, MP3, MOV, PSD und hochaufgelöste JPEG-Dateien herunterladen können.

Tipp: Wenn Sie mit anderen Designern an einem Site-Projekt arbeiten, können Sie sogar zu .Muse-Quelldateien verlinken, sodass Teammitglieder sie direkt von Ihrer Website herunterladen können.

Arbeiten mit Anker-Tag-Bereichen und aktiven Status

Ankerbereiche auf einer Webseite zu erstellen ist eine einfache Möglichkeit, verschiedene Bereiche einer Seite visuell zu trennen. Auf jeden dieser Abschnitte kann über Ankerlinks, die für eine einfache Navigation auf einer Seite entwickelt wurden, einfach zugegriffen werden.

Im Idealfall hat eine Seite im fertigen Design Ankerlinks, durch die die Besucher nach unten zu dem Abschnitt springen können, der die entsprechende Speisekarte anzeigt. Wenn Sie Anker-Tags hinzufügen, ist das so, als ob Sie an einer Stelle auf einer Seite eine Marke anbringen. Wenn Besucher auf einen Link zu diesem Anker klicken, scrollt der Link längere Seiten, um zum jeweiligen Abschnitt zu springen, in dem sich die Marke befindet.

1. Klicken Sie auf die Ankerschaltfläche oben im Navigationsbereich, um das Ankerwerkzeug zu laden.

2. Klicken Sie ein Mal ganz oben auf der Seite, über der obersten Site-Navigation im Kopfzeilenbereich. Sie können das Kopfzeilenrechteck vorübergehend wegschieben, wenn Sie möchten. Wenn Sie den Kopfzeileninhalt verschieben, denken Sie daran, ihn anschließend wieder zurück zu verschieben.
3. Geben Sie im Dialogfeld „Anker umbenennen“, das jetzt angezeigt wird, den Namen für den Anker ein.

4. Wiederholen Sie die Schritte 1 bis 3, um Ankerbereiche festzulegen und weitere Ankerlinks hinzuzufügen.

Nachdem Sie ein Widget für ein manuelles Menü im nächsten Schritt hinzugefügt haben, verknüpfen Sie die Schaltflächen mit den Anker-Tags, um die Navigation zu erstellen, über die die Besucher auf der Seite nach unten springen können, um jede Speisekarte zu lesen.

Hinzufügen von Links zu herunterladbaren Dateien

1. Verwenden Sie beim Bearbeiten einer Seite in der Entwurfsansicht das Textwerkzeug, um einen neuen Textrahmen nahe an der oberen rechten Ecke des Textrahmens für die Frühstücks-Speisekarte zu erstellen. Geben Sie die Wörter „Download Menu“ ein.
2. Verwenden Sie das Textbedienfeld, während der Textrahmen noch ausgewählt ist, um die folgenden Einstellungen anzuwenden:
   • Webschrift: Kaushan Script (oder eine beliebige andere Script-Schrift, die Sie bevorzugen)
   • Schriftgrad: 14
   • Farbe: #EEE5C4 (in Teil 3 haben Sie diese Farbe in „color cream-menu“ umbenannt)
   • Zeilenabstand: 57 %
   • Ausrichtung: Zentriert
3. Verwenden Sie das Menü „Fläche“, um die Flächenfarbe auf „Ohne“ zu setzen. Klicken Sie auf den Ordner neben dem Bildbereich und wählen Sie im Beispieldateiordner die Datei mit dem Namen „download-bg.png“ aus, um das Hintergrundbild festzulegen. Stellen Sie sicher, dass das Menü „Anpassen“ auf „Originalgröße“ gesetzt ist und dass die Position zentriert ist.

4. Klicken Sie auf eine andere Stelle als das Menü „Fläche“, um es zu schließen. Falls erforderlich, können Sie mit dem Auswahlwerkzeug den Textrahmen skalieren und so neu positionieren, dass er in der oberen rechten Ecke des Textrahmens für die Frühstücks-Speisekarte zentriert ist.

5. Während der Textrahmen noch ausgewählt ist, wählen Sie über das Links-Menü im Steuerungsbedienfeld die Option „Mit Datei verknüpfen“ aus. Navigieren Sie im daraufhin angezeigten Dialogfeld „Importieren“ zu der Datei, wählen Sie sie aus und klicken Sie auf „Öffnen“

Hinweis: Wenn Sie eine Datei über die Funktion „Mit Datei verknüpfen“ auswählen, wird die Datei zu einem der Site-Elemente, die hochgeladen werden, wenn die Site veröffentlicht wird, oder in den Site-Dateien aufgenommen, wenn die Site exportiert wird. Es ist eine gute Praxis, alle Dateien, die Sie von der Site aus verlinken möchten, zusammen mit allen anderen Bilddateien, die in Ihrer Site verwendet werden, in den lokalen Ordner der Site zu kopieren.

Der Link zur PDF-Datei ist jetzt hinzugefügt. Wenn Sie im Elementebedienfeld nachschauen, werden Sie sehen, dass die Datei jetzt als eines der Elemente der Site aufgelistet ist.

6. Wählen Sie den Textrahmen mit dem Auswahlwerkzeug aus. Kopieren Sie den Textrahmen „Download Menu“ und fügen Sie ihn über der oberen rechten Ecke der Mittags-Speisekarte ein. Wiederholen Sie diesen Schritt zwei weitere Male, um Kopien zu erstellen, die über den oberen rechten Ecken der Abend- und des Dessert-Speisekarte positioniert werden.

In einem echten Projekt könnten Sie zu vier getrennten Speisekartendateien verlinken, um Besuchern vier verschiedene herunterladbare PDF-Dateien mit Speisekarten bereitzustellen, die sie aufrufen und ausdrucken können. Aber in diesem Tutorial verweisen die Links der Download-Schaltfläche in allen Seitenabschnitten auf dieselbe PDF-Datei.

7. Wählen Sie „Datei“ > „Seitenvorschau in Browser“. Klicken Sie auf eines der Menüelemente im horizontalen Menü, um zu diesem Menü auf der Seite zu springen. Wenn Sie nach unten scrollen, um die Abend- und die Dessert-Speisekarte zu sehen, wird die Kopfzeile über dem anderen Seiteninhalt angezeigt. Der Grund hierfür ist, dass die Seite „food“ die Musterseite „Foreground“ verwendet und der Kopfzeileninhalt dieser Seite so definiert ist, dass er im Vordergrund angezeigt wird.
8. Klicken Sie auf den Link „Download Menu“ und beobachten Sie, wie die PDF-Datei auf Ihren Computer heruntergeladen wird.

Je nach dem Browser, den Sie verwenden, sowie den Voreinstellungen des Browsers werden Sie ein unterschiedliches Verhalten sehen. Einige Browser zeigen die PDF-Datei im Browserfenster an, während andere die PDF-Datei einfach auf Ihren Desktop herunterladen, wo Sie sie dann mit Acrobat Pro oder Acrobat Reader öffnen können.

Erstellen von Links zu E-Mail-Adressen

Wenn Sie Adobe Muse bereits eine Zeitlang verwendet haben, werden Sie bemerken, dass das Links-Menü mittlerweile in mehrere Bereiche unterteilt wurde, damit die verlinkbaren Seitennamen und Elemente leichter zu finden sind. In diesem Abschnitt werden Sie einen näheren Blick darauf werfen, wie das Links-Menü strukturiert ist und wie die Elemente in der Menüliste gefiltert werden. Außerdem lernen Sie, wie E-Mail-Adressen hinzugefügt werden.

1. Klicken Sie auf den Pfeil nach unten im Links-Menü, um die vollständige Liste anzuzeigen.

2. Das Links-Menü ist in Abschnitte unterteilt. In den zuletzt verwendeten Links werden alle Links zu externen Websites angezeigt, die der Site hinzugefügt wurden. Sie können jede URL direkt in das Links-Feld eingeben, um eine Seite mit externen Webseiten zu verlinken.
3. Der Abschnitt „Desktop“ enthält die Seiten in der aktuellen Site. Die Anker-Tags, die Sie zur Seite „food“ hinzugefügt haben, sind alphabetisch im unter der Seite „food“ aufgelistet. Sie könnten also Anker mit demselben Namen auf mehreren Seiten einer Site erstellen und sie trotzdem leicht identifizieren, wenn Sie Links einrichten. In dieser Beispiel-Site gibt es nur ein Desktop-Layout, aber wenn die Site alternative Layouts für Telefone oder Tablets enthält, werden diese Abschnitte mit dem entsprechenden Satz von Seiten angezeigt.
4. Der Abschnitt „Dateien“ am Ende enthält die Funktion „Mit Datei verknüpfen“ sowie alle herunterladbaren Dateien, die der aktuellen Site hinzugefügt wurden. Da Sie gerade einen Link zur Datei „KatiesCafeMenu.pdf“ hinzugefügt haben, ist der Name der Datei in diesem Abschnitt aufgelistet. Hierdurch ist es ganz einfach, zu einem gemeinsamen Element von mehreren Seiten in der Site zu verlinken.
5. Wenn Sie einen E-Mail-Link hinzufügen möchten (wenn der Link angeklickt wird, wird der E-Mail-Client des Besuchers geöffnet und eine neue Nachricht mit der E-Mail-Adresse im Feld „Von“ gestartet), geben Sie die E-Mail-Adresse mit dem Präfix „mailto:“ im Link-Menüfeld wie folgt ein:
   
   mailto:email@adresse.com
   
   
6. Manchmal kann die Liste der Elemente im Links-Menü bei größeren Websites recht lang und schwierig zu navigieren sein. Wenn Sie nach einer bestimmten Seite, einem bestimmten Ankerpunkt, einer Datei oder einer externen URL suchen, zu der/dem sie einen Link erstellen möchten, geben Sie die ersten paar Buchstaben des Links im Links-Menüfeld ein. Die übereinstimmenden Elemente werden jetzt angezeigt. Auf diese Weise können Sie schnell durch die Liste filtern und die Elemente finden, die Sie verlinken möchten.

Hinzufügen von Links zu externen Websites

Die Social Media-Buttons sind jetzt positioniert. Als Nächstes werden Sie die externen Links zu jeder der Social Network-Sites hinzufügen.

1. Wählen Sie das Facebook-Symbol aus und geben Sie dann den folgenden Link zur Facebook-Seite von Katie's Cafe im Link-Menüfeld ein: http://www.facebook.com/KatiesCafeSF (oder kopieren Sie diesen Link und fügen Sie ihn dann ein).
2. Wählen Sie das Google+-Symbol aus und geben Sie dann den folgenden Link zur Seite von Katie's Cafe auf Google+ ein: https://plus.google.com/u/1/117800212967830061444/posts (oder kopieren Sie diesen Link und fügen Sie ihn dann ein).
3. Wählen Sie das Twitter-Symbol aus und geben Sie dann den folgenden Link zur Seite von Katie's Cafe auf Twitter ein: http://twitter.com/katiescafesf (oder kopieren Sie diesen Link und fügen Sie ihn dann ein).
4. Klicken Sie erneut auf das Facebook-Symbol, um es auszuwählen. Klicken Sie auf das blau unterstrichene Wort „Links“, das sich links neben dem Links-Menü befindet. Aktivieren Sie im Dialogfeld, das jetzt angezeigt wird, das Kontrollkästchen „Link in einem neuen Fenster bzw. einer neuen Registerkarte laden“.
5. Wiederholen Sie Schritt 4 für den Google+- und den Twitter-Link, damit auch diese in einem neuen Browserfenster geöffnet werden.

Dies ist eine übliche Konvention beim Webdesign: Links, die zu anderen Seiten derselben Site führen, werden im selben Browserfenster geöffnet (Standardeinstellung in Adobe Muse), und Links zu Seiten anderer, externer Websites werden in einem neuen Fenster bzw. auf einer neuen Registerkarte geöffnet.

Identifizieren der Datei-URL für die Vorbereitung auf das Hinzufügen des Links

Um den Link vorzubereiten, bevor Sie ihn einer Seite in Ihrer Adobe Muse-Site hinzufügen, öffnen Sie die hochgeladene Online-Datei in einem Browser. Führen Sie die folgenden Schritte aus.

1. Starten Sie einen Browser Ihrer Wahl.
2. Navigieren Sie zu Ihrer Site oder zu der Site eines Drittanbieters, die die hochgeladene abhängige Datei enthält. Sie können eine Suchmaschine wie Google verwenden oder Sie können den Domänennamen der Site direkt in die Adresszeile des Browsers eingeben.

3. Nachdem Sie auf die Homepage der gewünschten Site zugegriffen haben, navigieren Sie durch die Site oder geben Sie die vollständige URL in die Adresszeile des Browsers ein, um auf die gewünschte abhängige Datei zuzugreifen. Sobald Sie diesen Schritt abgeschlossen haben, wird die Datei, auf die Sie zugreifen möchten, im Browser angezeigt, abgespielt oder heruntergeladen.
4. Wenn Sie sicher sind, dass Sie die richtige URL eingegeben haben, um auf die hochgeladene Datei zuzugreifen, wählen Sie den gesamten Inhalt der Adresszeile des Browsers aus und wählen Sie „Bearbeiten“ > „Kopieren“. Sie können auch die Tastaturbefehle Befehl+C (Mac) oder Strg+C (Windows) verwenden.

An diesem Punkt wird die URL der abhängigen Datei in die Zwischenablage kopiert. Achten Sie darauf, dass Sie keine anderen Elemente kopieren, bis Sie die URL der abhängigen Datei in das Feld „Hyperlink“ eingefügt haben, wie im nächsten Abschnitt beschrieben.

Erstellen von Links zu einer externen Datei

Nachdem Sie erfolgreich eine abhängige Datei hochgeladen, über einen Browser aufgerufen und die URL der Datei kopiert haben, müssen Sie nur noch den Link in einer Seite Ihrer Adobe Muse-Site erstellen. Führen Sie folgende Schritte aus:

1. Starten Sie Adobe Muse. Doppelklicken Sie auf die Seitenminiatur, um die Seite in der Entwurfsansicht zu öffnen.
2. Wählen Sie Text, ein platziertes Bild oder eine Rechteckform aus, die Sie als Schaltfläche verwenden möchten, auf die Besucher klicken, um die abhängige Datei herunterzuladen oder um darauf zuzugreifen.
3. Klicken Sie bei ausgewähltem Text- oder Seitenelement in das Dropdown-Feld „Hyperlink“ im Steuerungsbedienfeld und fügen Sie die URL (den absoluten Pfad) der abhängigen Datei ein, die Sie zuvor kopiert haben.

Wenn Sie den Link so festlegen möchten, dass er in einem neuen Browserfenster geöffnet wird, klicken Sie auf die Beschriftung „Hyperlink“ direkt links vom Fenster „Hyperlink“. Aktivieren Sie im daraufhin angezeigten Dialogfeld das Kontrollkästchen neben der Option „Link in einem neuen Fenster bzw. einer neuen Registerkarte laden“, wie unten gezeigt.

Speichern Sie die Seite und veröffentlichen Sie die Änderungen an der Site.

Besuchen Sie die Seite in einem Browser. Klicken Sie auf den verknüpften Text oder auf die Schaltfläche, um zu prüfen, dass der Link wie erwartet funktioniert.

Weitere Tipps für das Arbeiten mit Adobe Muse finden Sie auf der Adobe Muse Hilfe und Tutorials-Seite bzw. auf der Adobe Muse Events-Seite (Live- und aufgezeichnete Webinare).