Inhalt dieser Seite: externe Links | interne Links | Anker | Grafiken | Email | weiter mit

Dem Hypertext-Prinzip zufolge (siehe auch in der Einleitung) sind Links zu anderen Websites ein wesentlicher Bestandteil von Web-Dokumenten, einzelnen Webseiten oder auch Stellen im gleichen Dokument.

Für die Navigation zwischen zwei oder mehreren verschiedenen Web-Dokumenten sind Links notwendig.

Externe Links

Markieren Sie in Ihrem Dokument im Programm Dreamweaver ein Wort durch einen Doppelklick mit der Maus, z.B. das Wort "Wetterbericht". Das Wort kann sich an jeder beliebigen Stelle in Ihrem HTML-Dokument befinden.

Dann geben Sie Fenster Eigenschaften im Feld "Hyperlink" eine URL (Homepage-Adresse) ein, z.B. http://www.wetter.de.

Wenn Sie nun mit der Eingabetaste (Return) bestätigen, fügt das Programm automatisch einen Hyperlink zum Wort Wetterbericht ein.

Wenn Sie sich diese Seite im Browser in der Vorschau (Taste F12) ansehen, können Sie bereits Ihren ersten Link ausprobieren, der nun normalerweise blau und unterstrichen dargestellt wird.

Probieren Sie ein paar Websites, die Ihnen bekannt sind, als Hyperlinks aus. Verknüpfen Sie z.B. eine Suchmaschine - http://www.google.de.

Links zu anderen Dokumenten

Markieren Sie in Ihrem Dokument im Programm Dreamweaver ein Wort durch einen Doppelklick mit der Maus, z.B. das Wort "Startseite". Das Wort kann sich an jeder beliebigen Stelle in Ihrem HTML-Dokument befinden.

Dann geben Sie Fenster Eigenschaften im Feld "Hyperlink" den Dateinamen einer Datei auf Ihrer Website ein, z.B. start.htm oder Sie können auch den gelben Ordner-Button neben dem Feld Hyperlink benützen und eine Datei auf Ihrer Website auswählen.

Wenn Sie nun mit der Eingabetaste (Return) bestätigen, fügt das Programm automatisch einen Hyperlink zum Wort "Startseite" ein.

Wenn Sie diesen Link nun in einem Browser benützen, öffnet sich im Browserfenster die Datei start.htm.

Anker und Verweise im Dokumente

Wenn Sie auf der gleichen Webseite an eine andere Stelle verweisen wollen, müssen Sie zuerst ein Ziel - einen sogenannten Anker - einfügen.

Sehen Sie sich dazu ein Beispiel an.

Um einen Anker einzufügen, gehen Sie an die entsprechende Stelle und wählen Sie oben im Menü "Einfügen" "Unsichtbare Tags -> Benannter Ankerpunkt".

	Oder Sie können auch im Fenster "Objekte" (links oben) zuerst das Menü "Unsichtbare Elemente" auswählen.
	Dann klicken Sie auf den Anker und Sie werden nach einem Namen gefragt.

Geben Sie dann einen Namen ein, der diesen Anker eindeutig beschreibt, z.B. inhalt oder ueberschrift1. Am besten verwenden Sie dabei nur Kleinbuchstaben und keine Leer- oder Sonderzeichen. Wenn Sie mit OK bestätigen, erscheint folgendes Symbol:

Nachdem Sie soeben einen Anker für Ihren Link im Web-Dokument erstellt haben, können Sie nun auf diesen Anker verweisen. Dies erfolgt ähnlich wie das Einfügen von externen Links und es gibt mehrere Möglichkeiten.

Anker im gleichen Dokument

1. Geben Sie im Fenster "Eigenschaften" im Feld "Hyperlink" das Symbol # und den Namen des Ankers ohne Leerschritt ein und bestätigen Sie mit der Eingabetaste, z.B.:

2. Klicken Sie auf das Symbol neben dem Feld Hyperlink und halten Sie die linke Maustaste gedrückt. Ziehen Sie dann den Mauszeiger auf das gewünschte Ankersymbol in der HTML-Datei. Sobald Sie die Maustaste loslassen, wird die Verknüpfung erstellt.

Anker in einem anderen Dokument

1. Geben Sie im Fenster "Eigenschaften" im Feld "Hyperlink" zuerst den Namen der Dateian, dann das Symbol # und den Namen des Ankers ohne Leerschritt ein und bestätigen Sie mit der Eingabetaste, z.B.:

Hier liegt der Anker auf der Seite "fotoseite.htm", die im gleichen Ordner liegt, als die Datei, mit der Sie gerade arbeiten, und heißt "ueberschrift1".

Befindet sich die andere HTML-Datei auf einer höheren Ebene, ist es am besten, wenn Sie zuerst nur auf die Datei mit Hilfe des gelben Ordnersymbols verlinken. Dann können Sie selbst hinten den Namen des Ankers mit dem vorgestellten #-Symbol einfügen, z.B.:

Hier liegt der Anker auf der Seite "urlaub.htm", die in einem übergeordneten Ordner (eine Ebene höher) liegt, als die Datei mit der Sie gerade arbeiten, und heißt "juli".

2. Öffnen Sie die HTML-Datei in Dreamweaver in der sich der zu verlinkende Anker befindet. Wechseln Sie wieder in die HTML-Datei, in der Sie den Link einfügen möchten. In dieser Datei klicken Sie nun auf das Symbol neben dem Feld Hyperlink und halten Sie die linke Maustaste gedrückt. Ziehen Sie dann den Mauszeiger auf das gewünschte Ankersymbol in der im Hintergrund liegenden HTML-Datei. Führen Sie den Mauszeiger an den oberen bzw. unteren Rand, wenn Sie sich in dem HTML-Dokukent nach oben bzw. unten zum Anker bewegen wollen. Sobald Sie die Maustaste über dem Ankersymbol loslassen, wird die Verknüpfung erstellt.

Wenn Sie nun eine Seite im Browser ansehen - Taste F12 -, können Sie den Verweis gleich ausprobieren, der sich in der Darstellung von einem Link zu externen Quellen (z.B. http://www.wetter.de) nicht unterscheidet.

Grafiken

Die beiden beschriebenen Arten, Links einzufügen, können Sie nicht nur für Text, sondern auch für Grafiken verwenden.

Dazu müssen Sie nur zuerst eine Grafik einfügen. Klicken Sie einmal mit der linken Maustaste auf die Grafik, das Fenster Eigenschaften wechselt nun automatisch in den Grafikmodus. Geben Sie nun im Feld Hyperlink einen Hyperlink zu externen Dateien (z.B. http://www.wetterfrosch.de), anderen Dokumenten oder auch zu einem Anker (z.B. #ueberschrift1) ein.

Nun verfahren Sie ebenso wie unter den Punkten externe Links, Links zu anderen Dokumenten und Anker und Verweise beschrieben.

Email

Sie können auch eine Email-Verknüpfung erstellen. Wenn Sie auf einen solchen Link in einem Browser klicken, wird das Standard-Email-Programm geöffnet und die Email-Adresse automatisch als Empfänger-Adresse verwendet.

Markieren Sie den Text oder die Grafik, den oder die Sie als Email-Link verwenden wollen, z.B. Ihren Namen. Geben Sie nun im Fenster Eigenschaften im Feld Hyperlink "mailto:" und ihre Email-Adresse ohne Leerschritt dazwischen ein.

z.B. mailto:sigrid.moser at gmx punkt net

Bestätigen Sie mit OK und schon haben Sie eine Email-Verknüpfung erstellt.

Noch nicht genug gelernt? - Dann geht es weiter...

• mit dem Einfügen von Linien,
• in der Navigationsleiste auf der linken Seite,
• zum Thema Planung von Webpages,
• zum Thema Webdesign oder
• mit einem anderen HTML-Editor.