Erfahren Sie, wie Sie eine Navigation zwischen Ihren Web-Seiten einrichten. Sie verknüpfen Dateien und Dokumente und aktualisieren, ändern und testen diese Hyperlinks in Dreamweaver.
Machen Sie sich vor dem Erstellen von Hyperlinks mit der Funktionsweise von absoluten, dokumentrelativen und zum Site-Stammordner relativen Pfaden vertraut. Sie können in einem Dokument verschiedene Typen von Hyperlinks erstellen:
- Hyperlinks zu einem anderen Dokument oder einer anderen Datei, z. B. einer Grafik-, Film-, PDF- oder Audiodatei
- Hyperlinks mit einem benannten Anker, mit denen der Besucher zu einer bestimmten Stelle in einem Dokument springt
E-Mail-Verknüpfungen, mit denen eine leere E-Mail-Nachricht erstellt wird, wobei die Adresse des Empfängers bereits eingetragen ist
Null- und Skript-Hyperlinks, mit denen Sie einem Objekt ein Verhalten zuweisen oder einen Hyperlink erstellen können, der JavaScript-Code ausführt
Mit dem Eigenschafteninspektor und dem Dateizeigersymbol können Sie Hyperlinks von Bildern, Objekten oder Textpassagen zu einem anderen Dokument oder einer anderen Datei erstellen.
Dreamweaver erstellt die Hyperlinks zu anderen Seiten innerhalb Ihrer Web-Site unter Verwendung von dokumentrelativen Pfaden. Sie können Dreamweaver auch anweisen, unter Verwendung von zum Stamm relativen Pfaden der Web-Site neue Hyperlinks zu erstellen.
Dokumentrelative Pfade sind ohne einen festen Ausgangspunkt nicht gültig. Daher sollten Sie eine neue Datei erst speichern und dann einen dokumentrelativen Pfad erstellen. Wenn Sie einen dokumentrelativen Pfad erstellen, bevor Sie die Datei speichern, verwendet Dreamweaver vorübergehend einen absoluten Pfad, der mit file:// beginnt, bis die Datei gespeichert wurde. Wenn Sie die Datei speichern, wandelt Dreamweaver den file://-Pfad in einen relativen Pfad um.
JavaScript-Verhalten für Hyperlinks definieren
Sie können für beliebige Hyperlinks in einem Dokument ein Verhalten definieren. Wenn Sie verknüpfte Elemente in ein Dokument einfügen, können Sie folgende Verhalten verwenden:
Statusleistentext festlegen
legt den Text einer Meldung fest, die in der Statusleiste unten links im Browserfenster angezeigt wird. Sie können mit diesem Verhalten in der Statusleiste beispielsweise eine Beschreibung des Ziels eines Hyperlinks angeben, anstatt die zugehörige URL anzuzeigen.
Browserfenster öffnen
öffnet eine URL in einem neuen Fenster. Sie können die Eigenschaften des neuen Fensters festlegen, einschließlich des Namens, der Größe und der Attribute (ob die Größe des Fensters geändert werden kann, ob es eine Menüleiste hat usw.).
Sprungmenü
bearbeitet ein Sprungmenü. Sie können die Menüleiste ändern, eine andere verknüpfte Datei angeben oder den Ort im Browser wählen, an dem das verknüpfte Dokument geöffnet wird.
Hyperlinks zu Dokumenten mit dem Eigenschafteninspektor erstellen
Mit dem Ordnersymbol oder dem Feld „Hyperlink“ des Eigenschafteninspektors können Sie Hyperlinks von Bildern, Objekten oder Text zu anderen Dokumenten oder Dateien erstellen.
Klicken Sie auf das Ordnersymbol
rechts neben dem Feld „Hyperlink“, um eine Datei auszuwählen.Der Pfad zum verknüpften Dokument wird im Feld „URL“ angezeigt. Geben Sie im Popup-Menü „Relativ zu“ des Dialogfelds „Datei auswählen“ an, ob der Pfad relativ zum Dokument oder zum zum Stamm ist. Klicken Sie dann auf „OK“. Der ausgewählte Pfadtyp gilt nur für den aktuellen Hyperlink. (Sie können die Standardeinstellung des Felds „Relativ zu“ für die Site ändern.)
Geben Sie den Pfad und Dateinamen des Dokuments im Feld „Hyperlink“ ein.
Wenn Sie einen Hyperlink zu einem Dokument auf der Site erstellen möchten, geben Sie einen dokumentrelativen oder einen zum Site-Stammordner relativen Pfad ein. Wenn Sie einen Hyperlink zu einem Dokument außerhalb Ihrer Site erstellen möchten, geben Sie einen absoluten Pfad samt Protokoll ein (z. B. http://). Dieses Verfahren eignet sich für Hyperlinks zu Dateien, die noch nicht erstellt wurden.
Wählen Sie in der Dropdown-Liste „Ziel“ einen Ort aus, in dem das Dokument geöffnet werden soll:
- _blank lädt das verknüpfte Dokument in ein neues, unbenanntes Browserfenster.
- _parent lädt das verknüpfte Dokument in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird das verknüpfte Dokument in das ganze Browserfenster geladen.
- _self lädt das verknüpfte Dokument in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das Standardziel, also müssen Sie es normalerweise nicht angeben.
- _top lädt das verknüpfte Dokument in das ganze Browserfenster, wodurch alle Frames entfernt werden.
- _new lädt das verknüpfte Dokument in ein neues Fenster.
Hyperlinks zu Dokumenten mit dem Dateizeigersymbol erstellen
Ziehen Sie das Dateizeigersymbol
(Zielsymbol) rechts neben dem Feld „Hyperlink“ im Eigenschafteninspektor und zeigen Sie auf einen sichtbaren Anker im aktuellen Dokument, auf einen sichtbaren Anker in einem anderen geöffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf ein Dokument im Bedienfeld „Dateien“.Ziehen Sie den Mauszeiger bei gedrückter Umschalttaste auf einen sichtbaren Anker im aktuellen Dokument, auf einen sichtbaren Anker in einem anderen geöffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf ein Dokument im Bedienfeld „Dateien“.
Sie können nur dann einen Hyperlink zu einem anderen geöffneten Dokument erstellen, wenn im Dokumentfenster keine Dokumente maximiert sind. Um Dokumente nebeneinander anzuordnen, wählen Sie „Fenster“ > „Anordnen“ > „Überlappend“ oder „Fenster“ > „Anordnen“> „Anordnen“. Wenn Sie auf ein geöffnetes Dokument zeigen, wird es in den Vordergrund des Bildschirms verschoben, während Sie die Auswahl vornehmen.
Hyperlinks mit dem Befehl „Hyperlink“ einfügen
Mit dem Befehl „Hyperlink“ können Sie Textverknüpfungen zu Bildern, Objekten und anderen Dokumenten oder Dateien erstellen.
Führen Sie einen der folgenden Schritte aus, um das Dialogfeld „Hyperlink“ anzuzeigen:
Wählen Sie „Einfügen“ > „Hyperlink“ aus.
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Hyperlink“.
Gib im Textfeld den Text des Links ein.
Wähle im Dropdown-Menü Verknüpfen den Namen der Datei aus, die du verknüpfen möchtest.Sie können auch auf das Ordnersymbol
klicken, um die Datei zu suchen, zu der Sie einen Hyperlink erstellen möchten.
Im Listenfeld sind die Namen aller Frames aufgeführt, die Sie im aktuellen Dokument benannt haben. Wenn Sie einen Frame angeben, der nicht vorhanden ist, wird die verknüpfte Seite in einem neuen Fenster geöffnet, das den angegebenen Namen erhält. Sie können auch einen der folgenden reservierten Zielnamen auswählen:
- _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
- _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze Browserfenster geladen.
- _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen.
- _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
- _new lädt das verknüpfte Dokument in ein neues Fenster.
Hyperlinks zu Word- oder Excel-Dokumenten erstellen
Sie können einen Hyperlink zu einem Microsoft Word- oder Excel-Dokument in eine bestehende Seite einfügen.
Öffnen Sie in der Entwurfsansicht die Seite, auf der der Link erscheinen soll.
Ziehen Sie die Datei von ihrem aktuellen Speicherort auf die Dreamweaver-Seite, wo Sie den Link frei platzieren können. Das Dialogfeld „Dokument einfügen“ wird angezeigt.
Wählen Sie „Hyperlink erstellen“ aus und klicken Sie dann auf „OK“.
Wenn das Dokument, für das Sie einen Hyperlink erstellen, nicht im Stammordner der Site gespeichert ist, fordert Dreamweaver Sie auf, das Dokument in den Stammordner zu kopieren.
Durch das Kopieren des Dokuments in den Stammordner gewährleisten Sie, dass das Dokument beim Veröffentlichen der Site verfügbar ist.
Wenn Sie Ihre Seite auf Ihren Webserver hochladen, stellen Sie sicher, dass Sie auch die Word- oder Excel-Datei hochladen. Ihre Seite enthält nun einen Link zum Word- oder Excel-Dokument. Der Hyperlinktext ist der Name der verknüpften Datei. Sie können diesen Text bei Bedarf im Dokumentfenster ändern.
Relativen Pfad neuer Hyperlinks festlegen
Standardmäßig erstellt Dreamweaver die Hyperlinks zu anderen Seiten innerhalb Ihrer Web-Site unter Verwendung von dokumentrelativen Pfaden. Um stattdessen einen zum Stamm relativen Pfad für die Web-Site zu verwenden, müssen Sie zuerst in Dreamweaver einen lokalen Ordner anlegen, indem Sie einen lokalen Stammordner auswählen, der als Äquivalent des Dokumentenstamms auf einem Server dient. Dreamweaver verwendet diesen Ordner, um zum Site-Stammordner relative Pfade zu Dateien zu bestimmen.
Der Pfad vorhandener Hyperlinks wird nicht geändert, wenn Sie nach dem Ändern dieser Einstellung auf „OK“ klicken. Die Einstellung gilt nur für neue Hyperlinks, die Sie mit Dreamweaver erstellen.
Die neue Pfadeinstellung gilt nur für die aktuelle Site.
Hyperlinks zu bestimmten Stellen in einem Dokument erstellen
Mit dem Eigenschafteninspektor können Sie Hyperlinks zu einer bestimmten Stelle in einem Dokument erstellen, indem Sie zunächst benannte Anker definieren. Benannte Anker stellen Markierungen in einem Dokument dar und werden häufig an bestimmten Themen oder ganz oben in einem Dokument eingefügt. Anschließend können Sie Hyperlinks zu diesen benannten Ankern erstellen, sodass Besucher der Website direkt zur angegebenen Stelle gelangen.
Zum Erstellen eines Hyperlinks zu einem benannten Anker sind zwei Schritte erforderlich. Zunächst erstellen Sie einen benannten Anker und anschließend einen Hyperlink zu dem benannten Anker.
Anker erstellen
Markieren Sie im Dokumentfenster das Element, das Sie als Anker definieren möchten.
Öffnen Sie den Eigenschafteninspektor und überprüfen Sie, ob das ausgewählte Element über eine ID verfügt. Wenn das ID-Feld leer ist, fügen Sie eine ID hinzu. Beispiel: Anker.
Beachten Sie die Änderung im Code, nachdem Sie die ID hinzugefügt haben. id="<ID name>" wird am Auswahlpunkt in den Code eingefügt.
Links zu einem Anker erstellen
Bei Ankernamen wird die Groß- und Kleinschreibung berücksichtigt.
Hyperlinks zu benannten Ankern mit der Dateizeigermethode erstellen
Wenn der Anker nicht angezeigt wird, wählen Sie in der Entwurfsansicht „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“, um den Anker einzublenden.
Klicken Sie im Eigenschafteninspektor rechts neben dem Feld „Hyperlink“ auf das Dateizeigersymbol
(Zielsymbol) und ziehen Sie es auf den Anker, zu dem Sie den Hyperlink erstellen möchten – entweder im gleichen oder in einem anderen geöffneten Dokument.Ziehen Sie den ausgewählten Text oder das ausgewählte Bild im Dokumentfenster bei gedrückter Umschalttaste auf den Anker, zu dem der Hyperlink erstellt werden soll. Das ist entweder ein Anker im gleichen oder in einem anderen geöffneten Dokument.
E-Mail-Verknüpfungen erstellen
Wenn Sie auf eine E-Mail-Verknüpfung klicken, wird ein neues Nachrichtenfenster in dem E-Mail-Programm geöffnet, das mit dem Browser des Benutzers verknüpft ist. Im Feld „An“ im Fenster der E-Mail-Nachricht wird die im E-Mail-Hyperlink angegebene Adresse automatisch eingefügt.
E-Mail-Verknüpfungen mit dem Befehl „E-Mail-Verknüpfung einfügen“ erstellen
Wählen Sie „Einfügen“ > „E-Mail-Verknüpfung“ aus.
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „E-Mail-Verknüpfung“.
E-Mail-Verknüpfungen mit dem Eigenschafteninspektor erstellen
Geben Sie keine Leerzeichen zwischen dem Doppelpunkt und der E-Mail-Adresse ein.
Betreffzeile von E-Mails automatisch eintragen
Der vollständige Text sieht etwa folgendermaßen aus:
mailto:jemand@IhreSite.com?subject=E-Mail von unserer Site
Null- und Skript-Hyperlinks erstellen
Ein Null-Hyperlink ist ein Hyperlink ohne Ziel. Verwenden Sie Null-Hyperlinks, wenn Sie Verhalten für Objekte oder Textpassagen auf einer Seite definieren möchten. Sie können einem Null-Hyperlink beispielsweise ein Verhalten zuweisen, damit ein Bild ausgetauscht oder ein absolut positioniertes Element (AP-Element) angezeigt wird, wenn sich der Mauszeiger über dem Hyperlink befindet.
Skript-Hyperlinks führen JavaScript-Code aus oder rufen JavaScript-Funktionen auf. Mit diesen Hyperlinks erhalten Besucher der Website zusätzliche Informationen zu einem bestimmten Element, ohne die aktuelle Webseite verlassen zu müssen. Skript-Hyperlinks können darüber hinaus verwendet werden, um Berechnungen, Formularüberprüfungen und andere Verarbeitungsvorgänge durchzuführen, wenn der Besucher auf ein bestimmtes Element klickt.
Null-Hyperlinks erstellen
Skript-Hyperlinks erstellen
Hyperlinks automatisch aktualisieren
Dreamweaver kann Links zu und von einem Dokument aktualisieren, wenn Sie das Dokument innerhalb einer lokalen Site verschieben oder es umbenennen. Die Funktion kann am besten verwendet werden, wenn Sie die gesamte Site (oder einen ganzen eigenständigen Teil dieser Site) auf der lokalen Festplatte speichern. Dreamweaver ändert keine Dateien im externen Ordner, bis Sie die lokalen Dateien dort platzieren oder sie auf dem externen Server bereitstellen.
Um die Aktualisierung zu beschleunigen, kann Dreamweaver eine Cache-Datei anlegen, in der es Informationen über alle Hyperlinks in Ihrem lokalen Ordner ablegt. Die Cache-Datei wird nicht sichtbar aktualisiert, wenn Sie Hyperlinks in Dateien auf der lokalen Site einfügen, ändern oder löschen.
Automatisches Aktualisieren von Hyperlinks aktivieren
Immer
Aktualisiert automatisch alle Hyperlinks zu und von einem ausgewählten Dokument, wenn Sie dieses Dokument verschieben oder umbenennen.
Nie
Aktualisiert nicht automatisch alle Hyperlinks zu und von einem ausgewählten Dokument, wenn Sie dieses Dokument verschieben oder umbenennen.
Eingabeaufforderung
Zeigt ein Dialogfeld an, in dem alle von der Änderung betroffenen Dateien aufgeführt sind. Klicken Sie auf „Aktualisieren“, um die Hyperlinks in diesen Dateien zu aktualisieren, oder auf „Nicht aktualisieren“, wenn die Dateien nicht geändert werden sollen.
Cache-Datei für die Site erstellen
Wenn Sie nach dem Starten von Dreamweaver zum ersten Mal Hyperlinks auf Dateien in Ihrem lokalen Ordner ändern oder löschen, fordert Dreamweaver Sie auf, den Cache zu laden. Wenn Sie auf „Ja“ klicken, lädt Dreamweaver den Cache und aktualisiert alle Hyperlinks auf die Dateien, die Sie zuvor geändert haben. Wenn Sie auf „Nein“ klicken, wird die Änderung im Cache aufgezeichnet, aber Dreamweaver lädt den Cache nicht und aktualisiert keine Hyperlinks.
Bei großen Sites kann es ein paar Minuten dauern, bis der Cache geladen ist, weil Dreamweaver feststellen muss, ob der Cache aktuell ist. Dazu vergleicht es die Zeitstempel der Dateien der lokalen Site mit den im Cache aufgezeichneten Zeitstempeln. Wenn Sie außerhalb von Dreamweaver keine Dateien geändert haben, können Sie sicher auf die Schaltfläche „Anhalten“ klicken, wenn diese angezeigt wird.
Cache neu erstellen
Hyperlinks für die ganze Site ändern
Neben der Möglichkeit, Dreamweaver zu veranlassen, Hyperlinks automatisch zu aktualisieren, wenn Sie eine Datei verschieben oder umbenennen, können Sie alle Hyperlinks (einschließlich von E-Mail-, FTP-, Null- und Skript-Hyperlinks) manuell ändern, sodass sie an eine andere Stelle verweisen.
Diese Funktion empfiehlt sich, wenn Sie eine Datei löschen möchten, auf die Hyperlinks in anderen Dateien verweisen. Sie können sie jedoch auch für andere Zwecke einsetzen. Angenommen, du verknüpfst die Wörter „Filme dieses Monats" auf deinem gesamten Bereich mit /movies/july.html.Am 1. August ändern Sie diese Hyperlinks, sodass sie auf „/movies/august.html“ verweisen.
Wenn Sie einen E-Mail-, FTP-, Null- oder Skript-Hyperlink ändern, müssen Sie keine Datei auswählen.
Wählen Sie „Site“ > „Site-Optionen“ > „Hyperlink für ganze Site ändern“.
Ändern aller Hyperlinks zu
Klicken Sie auf das Ordnersymbol
, um die Zieldatei zu suchen und auszuwählen, für die Hyperlinks entfernt werden sollen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ändern, müssen Sie den vollständigen Text des zu ändernden Hyperlinks eingeben.
In Hyperlinks zu
Klicken Sie auf das Ordnersymbol
, um die neue zu verknüpfende Datei zu suchen und auszuwählen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ändern, müssen Sie den vollständigen Text des neuen Hyperlinks eingeben.
Dreamweaver aktualisiert alle Dokumente, die einen Hyperlink zu der ausgewählten Datei enthalten, sodass sie auf die neue Datei verweisen. Dazu verwendet es das bereits im Dokument verwendete Pfadformat (war beispielsweise der alte Pfad dokumentrelativ, ist auch der neue Pfad dokumentrelativ).
Nachdem ein Hyperlink auf der gesamten Site geändert wurde, ist die ausgewählte Datei verwaist (d. h., keine Dateien auf dem lokalen Datenträger verweisen auf diese Datei). Sie können sie sicher löschen, ohne Hyperlinks in Ihrer lokalen Dreamweaver-Site zu beschädigen.
Da diese Änderungen nur lokal durchgeführt werden, müssen Sie die entsprechende verwaiste Datei im Remote-Ordner manuell löschen und Dateien mit geänderten Hyperlinks hochladen oder einchecken. Andernfalls sind die Änderungen für Besucher der Website nicht sichtbar.
Hyperlinks in Dreamweaver testen
Hyperlinks sind innerhalb von Dreamweaver nicht aktiv, d. h. Sie können ein verlinktes Dokument nicht öffnen, indem Sie im Dokumentfenster auf den Hyperlink klicken.
Klicken Sie mit der rechten Maustaste auf den Hyperlink und wählen Sie „Verknüpfte Seite öffnen“.
Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf den Hyperlink.
Das verknüpfte Dokument muss sich auf dem lokalen Datenträger befinden.
Ähnliche Themen
- Videotutorial: Hyperlinks einem Bild oder einem Teil eines Bildes hinzufügen
- Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade
- Tutorial zur Erstellung von Hyperlinks
- Anwenden integrierter JavaScript-Verhalten
- Arbeiten mit Dreamweaver-Sites
- Fehler in Hyperlinks beheben
- Ein Verhalten definieren
- Fehlerhafte, externe und verwaiste Hyperlinks suchen
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.