Hyperlinks, Anker, E-Mail-Links, absolute und relative Pfade

Hyperlinks einbauen

Am einfachsten geht das über die Eigenschaftspalette in Kombination mit der Dateienpalette. Dazu klicke ich zunächst ein Wort an, welches verlinkt werden soll (das ganze Wort oder der ganze Satz muss dabei markiert werden). Danach reicht ein Klick auf das Zielfernrohrzeichen. Jedoch diesmal nicht die Maustaste loslassen, sondern mit gedrückter Taste auf die Datei zeigen, die ich verlinkt haben möchte. In meinem Beispiel wäre das die Erweiterungen.htm.

Wir empfehlen:
Dreamweaver-Video-Training

 

Hierbei wird ein relativer Pfad zur Datei erstellt. Eine kleine Info zu den Unterschieden von absoluten und relativen Pfaden:

Absolute Pfade

Die absoluten Pfade enthalten immer den ganzen Pfad/Adresse, das heißt, dass die Datei mit der ganzen Pfadangabe gespeichert wird.

Beispiel: http://www.psd-tutorials.de/forum.html oder file:///D|/Extras/AllOffice/alloffice.exe

Vorteil: Der Link ist schnell eingefügt und wird auch sofort funktionieren, ohne dass man groß nachdenken müsste.

Nachteil: Sollte sich die Domain www.psd-tutorials.de mal ändern in z. B. www.design-to-art.de, dann müssen alle Links neu gesetzt werden. Bei externen Webseiten, die auf www.psd-tutorials.de verlinken, kann man das nicht verhindern. Sollte man aber den Link intern innerhalb von PSD-Tutorials.de setzen, so ist von der Verwendung von absoluten Pfaden abzuraten! Außerdem müssen absolute Pfade immer per Hand eingefügt werden und nicht per Dreamweavers Datei-Palette.

Relative Pfade

Für die meisten Websites eignen sich in der Regel dokumentrelative Pfade am besten. Sie sind besonders dann geeignet, wenn sich das aktuelle Dokument und das zu verknüpfende Dokument im selben Ordner befinden und wahrscheinlich nicht verschoben werden. Darüber hinaus kann mit einem dokumentrelativen Pfad ein Hyperlink zu einem Dokument in einem anderen Ordner erstellt weden, indem der Pfad durch die Ordnerhierarchie vom aktuellen Dokument zum verknüpften Dokument angegeben wird.

Wenn ich einen dokumentrelativen Pfad angebe, lasse ich den Teil des absoluten Pfads weg, der für das aktuelle Dokument und das verknüpfte Dokument identisch ist. Nur der Teil, der sich unterscheidet, wird angegeben.

 

Angenommen, ich habe eine Site mit folgender Struktur:

 

Wenn ich einen Hyperlink von „Aktionen.htm“ zu „Erweiterungen.htm“ (beide im gleichen Ordner) erstellen möchte, verwende ich den relativen Pfad „Erweiterungen.htm“. Wenn ich einen Hyperlink zu „index.htm“ (im Unterordner „Menu_Video_DVD“) erstellen möchte, verwende ich den relativen Pfad „Menu_Video_DVD/index.htm“. Jeder Schrägstrich (/..) stellt den Wechsel um eine Ebene nach unten in der Ordnerhierarchie dar. Wenn ich einen Hyperlink von „index.htm“ zu Aktionen.html erstellen möchte, verwende ich den relativen Pfad „../aktionen.htm“. Jeder Schrägstrich (../) stellt den Wechsel um eine Ebene nach oben in der Ordnerhierarchie dar. Wenn ich einen Hyperlink zu „alloffice.exe“ (in einem anderen Ordner des übergeordneten Ordners) erstellen möchte, verwende ich den relativen Pfad „../Extras/AllOffice/alloffice.exe“.

 

In diesem Fall stellt „../“ den Wechsel in den übergeordneten Ordner und „Extras/“ den Wechsel um eine Ebene nach unten in den Unterordner „Extras“ dar. Wenn ich mehrere Dateien als Gruppe verschiebe (z. B. beim Verschieben eines ganzen Ordners, bei dem alle im Ordner enthaltenen Dateien denselben relativen Pfad zueinander beibehalten), muss ich dokumentrelative Hyperlinks zwischen diesen Dateien nicht aktualisieren. Wenn ich jedoch eine einzelne Datei mit dokumentrelativen Hyperlinks verschiebe oder eine Datei, die durch einen dokumentrelativen Pfad verknüpft ist, muss ich diese Hyperlinks aktualisieren. (Wenn ich Dateien im Bedienfeld Dateien verschiebe oder umbenenne, werden alle entsprechenden Hyperlinks in Dreamweaver automatisch aktualisiert.)

Vorteile: Ich kann ganze Menüs offline ohne Internetverbindung auf meiner Festplatte/DVD starten. Genau so wurde z. B. das Menü der PSD-Tutorials.de-Workshop-DVD erstellt und kann somit auf jedem DVD-Laufwerk oder, auf die Festplatte kopiert, von dort gestartet werden.

Nachteil: Habe ich Dreamweaver nicht zur Hand, muss ich selber überlegen, wie die Struktur der relativen Pfade genau sein muss.

Wer Hyperlinks nicht per Dateipalette einfügen möchte, kann dafür auch ins Menü klicken und dann auf Einfügen>Hyperlink oder aber klickt in der Eigenschaftenpalette direkt ins Hyperlinkfeld den Link rein oder klickt auf den Odner in der Eigenschaftspalette ganz rechts.

 

Es erscheint dann folgendes Dialogfeld:

 

Darin kann dann die Datei ausgewählt werden, auf die verlinkt werden soll.

Ziel angeben

Für meine Verlinkung kann ich unter Ziel im Eigenschafteninspektor angeben, wie sich das verlinkte Dokument öffnen soll. Dem HTML-Tag <a href> wird damit das Attribut target=”” hinzugefügt.

  • Target=”_blank” öffnet ein weiteres Fenster mit dem verlinkten Dokument als Inhalt.
  • Target=”_self” öffnet den Link im eigenen Fenster.
  • Target=”_parent” entfernt bei verschachtelten Framesets das aktuelle Frameset und setzt dafür das verlinkte Dokument.
  • Target=”_top” entfernt bei verschachtelten Framesets alle Framesets und setzt dafür das verlinkte Dokument.

 

Dazu wähle ich im Eigenschaftsinspektor die Option Ziel an, und darin kommen dann die jeweiligen Optionen. In den meisten Fällen brauche ich nichts anzugeben; nur, wenn ein neues Fenster aufpoppen soll, dann wähle ich die _blank – Option aus.

Eine Besonderheit gibt es noch bei der Arbeit mit Frames. Ich habe nämlich für das DVD-Menü mehrere Frames angelegt. Und wenn ich oben die Navigation anklicke, soll sich natürlich der untere Frame ändern, und nicht der Frame, in dem die Navigation enthalten ist. Somit muss bei Ziel auch der FrameName angesteuert werden:


In meinem Beispiel wäre das der Name mainFrame (der mittlere Hauptframe).

 

Hyperlinks auf Richtigkeit überprüfen

Eine sehr interessante und vor allem hilfreiche Funktion in Dreamweaver ist die Möglichkeit, Hyperlinks auf Richtigkeit zu überprüfen. Mir selber ist es schon so oft passiert, dass ich auf der DVD Dateien umbenannt oder verschoben habe, dabei aber vergaß, die Hyperlinks neu zu verlinken. Hätte ich die Dateien mit Dreamweaver verschoben oder umbenannt, hätte Dreamweaver automatisch die Links neu gesetzt, jedoch habe ich das mit einem externen Dateimanager gemacht. Darum kann man auch naträglich die Hyperlinks mit dem Hyperlink-Prüfer in der Ereignis-Palette überprüfen lassen. Entweder mit F7 aufrufen oder im Menü>Fenster>Ereignisse.

 

Möchte man eine Überprüfung starten, reicht es, auf den kleinen grünen Pfeil zu klicken, jedoch muss die Seite, wenn das noch nicht passiert ist, als Site angelegt werden:


Das geht schnell von der Hand und es kann danach mit der Überprüfung losgehen!

 

Anker einfügen Möchte ich innerhalb des Dokuments auf eine interessante Textstelle springen, geht das mit Ankern. Dazu klicke ich zunächst auf die Textstelle, wohin der Anker gesetzt werden soll bzw. wo ich später hinspringen möchte. Danach klicke ich oben innerhalb der Einfüge-Palette auf das Ankersymbol. Danach erscheint ein Dialog, wo ich meinen Anker benennen kann. Möglichst aussagekräftig sollte er sein, damit der Überblick nicht verloren geht:

 

Ein neues Ankersymbol erscheint dann (vorausgesetzt, es wurde in den Voreinstellungen definiert, dass Anker angezeigt werden):

 

Jetzt klicke ich auf das Wort ganz oben, welches auf den Anker verlinkt:

 

… und ziehe solange mit dem Zielfernrohr nach unten, bis ich den Anker sehe, und verlinke dann darauf:

 

Der Anker wurde jetzt erfolgreich verlinkt:

 

E-Mail-Hyperlinks setzen

Auch eine E-Mail-Adresse kann als Hyperlinkziel angegeben werden. Beim Klicken auf diese Verlinkungen öffnet sich das Standard-E-Mail-Programm, und die E-Mail-Adresse wird in die Adresszeile eingetragen.

Dreamweaver bietet mir dafür eine Dialogbox für E-Mail-Verlinkungen an, in der ich die E-Mail-Adresse direkt eintragen kann. Dazu klicke ich im Menü auf Einfügen>E-Mail-Verknüpfung.

 

Nach Bestätigung sieht dann der Link wie folgt aus:


mailto:stp1@gmx.de

Das Beste dabei ist, dass ich noch weitere Optionen ranhängen kann, sodass z.B. ein vorgefertigter Betreff und Text schon gleich drinsteht.

<p>Mail mit kombinierten Optionen:<br> 
<a href="mailto:fritz.eierschale@example.org?cc=heidi.bratze@example.org&amp;subject=Hallo%20Fritz,%20hallo%20Heidi">cc und Subject</a> </p>
<p>Mail mit vordefiniertem Body (Nachrichtentext):<br> 
<a href="mailto:beispiel@example.org?body=Hallo%20Fritz,%0D%0A%0D%0Aich%20wollte%20nur%20sagen,%20dass%20">Mail mit Body</a> </p>

Weitere Beispiele dazu gibt es hier: http://de.selfhtml.org/html/verweise/email.htm.

 

Platzhalter für Hyperlinks Es kommt öfter vor, dass man eine Verlinkung als Platzhalter anlegen muss, um beispielsweise die Formatierungen zu überprüfen, oder um ein JavaScript aufzurufen.Wenn ich im Eigenschafteninspektor in das Feld für Hyperlinks ein # eintrage, wird ein Hyperlink angelegt, jedoch keine Aktion ausgeführt.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training