Hier erfahren Sie, wie in Dreamweaver Hyperlinks und Navigation und absolute, dokumentrelative und zum Site-Stammordner relative Pfade funktionieren.
Nachdem du eine Dreamweaver-Site eingerichtet hast, um deine Website-Dokumente zu speichern und HTML-Seiten erstellt hast, möchtest du Verbindungen von deinen Dokumenten zu anderen Dokumenten erstellen.
Dreamweaver bietet verschiedene Möglichkeiten, um Links zu Dokumenten, Bildern, Multimedia-Dateien oder herunterladbarer Software zu erstellen. Du kannst Links zu jedem Text oder Bild überall in einem Dokument erstellen, einschließlich Text oder Bildern in einer Überschrift, Liste, Tabelle, absolut positioniertem Element (AP-Element) oder Frame.
Es stehen mehrere Verfahren zur Verfügung, mit denen Hyperlinks erstellt und verwaltet werden können. Einige Webdesigner erstellen lieber Links zu nicht vorhandenen Seiten oder Dateien während der Arbeit, während andere es vorziehen, zuerst alle Dateien und Seiten zu erstellen und dann die Links hinzuzufügen. Eine andere Möglichkeit, Links zu verwalten, ist die Erstellung von Platzhalterseiten, in denen du Links hinzufügst und testest, bevor du alle Seiten deiner Site fertigstellst.
Absolute, dokument-relative und site-stamm-relative Pfade
Das Verständnis des Dateipfads zwischen dem Dokument, von dem du verlinkst, und dem Dokument oder Asset, zu dem du verlinkst, ist wesentlich für das Erstellen von Links.
Jede Web-Seite hat eine eindeutige Adresse, die Uniform Resource Locator (URL) genannt wird. Wenn du jedoch einen lokalen Link erstellst (ein Link von einem Dokument zu einem anderen auf derselben Site), gibst du im Allgemeinen nicht die gesamte URL des Dokuments an, zu dem du verlinkst; stattdessen gibst du einen relativen Pfad vom aktuellen Dokument oder vom Stammordner der Site an.
Es gibt drei Arten von Hyperlinkpfaden:
Absolute Pfade (z. B. http://www.adobe.com/support/dreamweaver/contents.html)
Dokumentrelative Pfade (z. B. dreamweaver/contents.html)
Zum Site-Stammordner relative Pfade (z. B. /support/dreamweaver/contents.html)
In Dreamweaver können Sie auf einfache Weise den Typ des Dokumentpfads auswählen, der für die Hyperlinks erstellt werden soll.
Es empfiehlt sich, den Hyperlink-Typ zu verwenden, den Sie bevorzugen und mit dem Sie am besten vertraut sind (entweder relativ zum Site-Stammordner oder dokumentrelativ). Wenn Sie die Zieldateien von Hyperlinks suchen, anstatt den Pfad direkt einzugeben, stellen Sie sicher, dass der Pfad korrekt ist.
Absolute Pfade
Absolute Pfade liefern die vollständige URL des verlinkten Dokuments, einschließlich des zu verwendenden Protokolls (normalerweise http:// für Webseiten), zum Beispiel http://www.adobe.com/support/dreamweaver/contents.html.Für ein Bildelement kann die vollständige URL z. B. wie folgt lauten: http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Du musst einen absoluten Pfad verwenden, um zu einem Dokument oder Asset auf einem anderen Server zu verlinken. Du kannst auch absolute Pfade für lokale Links (zu Dokumenten in derselben Site) verwenden, aber dieser Ansatz wird nicht empfohlen – wenn du die Site zu einer anderen Domain verschiebst, funktionieren alle deine lokalen absoluten Pfad-Links nicht mehr. Die Verwendung relativer Pfade für lokale Links bietet auch größere Flexibilität, falls du Dateien innerhalb deiner Site verschieben musst.
Beim Einfügen von Bildern (nicht Links) kannst du einen absoluten Pfad zu einem Bild auf einem entfernten Server verwenden (das heißt, ein Bild, das nicht auf der lokalen Festplatte verfügbar ist).
Dokumentrelative Pfade
Dokument-relative Pfade sind normalerweise am besten für lokale Links in den meisten Websites geeignet. Sie sind besonders nützlich, wenn sich das aktuelle Dokument und das verlinkte Dokument oder Asset im selben Ordner befinden und wahrscheinlich zusammenbleiben. Du kannst auch einen dokument-relativen Pfad verwenden, um zu einem Dokument oder Asset in einem anderen Ordern zu verlinken, indem du den Pfad durch die Ordnerhierarchie vom aktuellen Dokument zum verlinkten Dokument angibst.
Die Grundidee dokument-relativer Pfade ist es, den Teil des absoluten Pfads wegzulassen, der für das aktuelle Dokument und das verlinkte Dokument oder Asset gleich ist, und nur den Teil des Pfads anzugeben, der sich unterscheidet.
Angenommen, Sie haben eine Site mit folgender Struktur:
Um von contents.html zu hours.html zu verlinken (beide im selben Ordner), verwende den relativen Pfad hours.html.
Um von contents.html zu tips.html zu verlinken (im Unterordner resources), verwende den relativen Pfad resources/tips.html. Bei jedem Schrägstrich (/) bewegst du dich eine Ebene nach unten in der Ordnerhierarchie.
Um von contents.html zu index.html zu verlinken (im übergeordneten Ordner, eine Ebene über contents.html), verwende den relativen Pfad ../index.html. Zwei Punkte und ein Schrägstrich (../) bewegen dich eine Ebene nach oben in der Ordner- hierarchie.
Um von contents.html zu catalog.html zu verlinken (in einem anderen Unterordner des übergeordneten Ordners), verwende den relativen Pfad ../products/catalog.html. Hier bewegt ../ dich nach oben zum übergeordneten Ordner, und products/ bewegt dich nach unten zum Unterordner products.
Wenn du Dateien als Gruppe verschiebst – zum Beispiel, wenn du einen ganzen Ordner verschiebst, sodass alle Dateien in diesem Ordner die gleichen relativen Pfade zueinander beibehalten – musst du dokumentrelative Verknüpfungen zwischen diesen Dateien nicht aktualisieren. Wenn du jedoch eine einzelne Datei verschiebst, die dokumentrelative Verknüpfungen enthält, oder eine einzelne Datei, auf die eine dokumentrelative Verknüpfung verweist, musst du diese Verknüpfungen aktualisieren. (Wenn du Dateien mithilfe des Dateien-Bedienfelds verschiebst oder umbenennst, aktualisiert Dreamweaver alle relevanten Verknüpfungen automatisch.)
Zum Site-Stammordner relative Pfade
Bereichsstamm-relative Pfade beschreiben den Pfad vom Stammordner des Bereichs zu einem Dokument. Du möchtest diese Pfade möglicherweise verwenden, wenn du an einer großen Website arbeitest, die mehrere Server nutzt, oder an einem Server, der mehrere Sites hostet.Wenn du jedoch mit dieser Art von Pfad nicht vertraut bist, möchtest du vielleicht bei dokumentrelativen Pfaden bleiben.
Ein bereichsstamm-relativer Pfad beginnt mit einem führenden Schrägstrich, der für den Stammordner des Bereichs steht. Zum Beispiel ist /support/tips.html ein bereichsstamm-relativer Pfad zu einer Datei (tips.html) im support- Unterordner des Stammordners des Bereichs.
Ein bereichsstamm-relativer Pfad ist oft der beste Weg, um Verknüpfungen anzugeben, wenn du HTML-Dateien häufig von einem Ordner in einen anderen in deiner Website verschiebst. Wenn du ein Dokument verschiebst, das bereichsstamm-relative Verknüpfungen enthält, musst du die Verknüpfungen nicht ändern, da die Verknüpfungen relativ zum Bereichsstamm sind und nicht zum Dokument selbst; wenn beispielsweise deine HTML-Dateien bereichsstamm-relative Verknüpfungen für abhängige Dateien (wie Bilder) verwenden und du eine HTML-Datei verschiebst, sind ihre Verknüpfungen zu abhängigen Dateien weiterhin gültig.
Wenn du jedoch die Dokumente verschiebst oder umbenennst, auf die Site-Stamm-relative Verknüpfungen verweisen, musst du diese Verknüpfungen aktualisieren, auch wenn sich die Pfade der Dokumente relativ zueinander nicht geändert haben.Wenn du beispielsweise einen Ordner verschiebst, musst du alle Site-Stamm-relativen Links zu Dateien in diesem Ordner aktualisieren.(Wenn Sie Dateien im Bedienfeld „Dateien“ verschieben oder umbenennen, werden in Dreamweaver alle entsprechenden Hyperlinks automatisch aktualisiert.)
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
