Links setzen

Durch das Einfügen von Links verknüpfen Sie die Seiten Ihrer Website untereinander oder mit anderen Websites. Links zeigen den Besucher an, dass zu einem Thema oder Stichwort weitere Informationen an anderer Stelle zu finden sind. Sie können mit TYPO3 an verschiedenen Stellen Links auf Seiten oder Dateien Ihrer oder externer Websites sowie klickbare E-Mail-Adressen anlegen.

Automatische Verlinkung im RTE

Der Rich-Text Editor ist so konfiguriert, dass bei Eingabe eines Textes, der grob einer Internet- oder Email-Adresse ähnelt, automatisch ein entsprechender Link erzeugt wird. Falls das im Einzelfall nicht sinnvoll ist, können Sie den Link mit Remove link entfernen.

Den „Insert Link“-Dialog aufrufen

Dieser Dialog erscheint in einem Pop-up-Fenster. Je nach Kontext kann er etwas andern aussehen. Die Felder für zusätzliche Link-Parameter sind mal oben und mal unten, und nicht immer sind alle der im Folgenden beschrieben Reiter vorhanden.

… im Rich-Text Editor (RTE)

Bild 1: Der „Insert link“-Knopf
Bild 2: „Insert link“ im Kontext-Menü

Um einen Textabschnitt im RTE zu verlinken, gehen Sie wie folgt vor:

  • Markieren Sie den Text, der anklickbar werden soll
  • Klicken Sie auf das Symbol Insert link (Bild 1)
    oder
    Klicken Sie mit der linken Maustaste auf den Text und wählen den Menüpunkt Insert link  im Kontextmenü (Bild 2)

Um einen vorhandenen Link zu bearbeiten oder zu entfernen, platzieren Sie den Cursor in den Link und klicken das selbe Icon (es heisst nun Modify link).

… bei Überschriften und Bildern

Bild 3: Link-Feld bei Überschriften (Header)
Bild 4: Link-Feld bei Bildern (Image Metadata)

Sie können Überschriften und Bilder mit einem Link versehen. Den Link-Dialog rufen Sie mit dem Symbol rechts neben dem jeweiligen Link-Feld auf (Bild 3 und 4). Der Dialog sieht etwas anders aus: Die Felder für die zusätzlichen Parameter sind unter dem Seitenbaum.

 

 

 

Info:
Pfeile bei verlinkten Bildern
W3C
Mit Pfeil
W3C
Ohne Pfeil

Damit die Seitenbesucher ohne Ausprobieren oder Umherfahren mit der Maus (Smartphone?) erkennen, dass ein Bild verlinkt ist, wird es mit einem kleinen Pfeil überlagert. In Fällen, wo eine Verlinkung impliziert ist, z. B. bei Logos oder Icons, sind diese Pfeile überflüssig oder gar störend. Sie können die Überlagerung ausschalten, wenn Sie im Link-Dialog im Feld CSS-Class den Wert „no-hint“ (ohne die Anführungszeichen) eintragen.

Reiter „Remove Link“: Links löschen

Bild 5: Remove Link

Dieser Reiter (Bild 5) erscheint nur, wenn Sie im RTE den Cursor in einen vorhandenen Link setzen und das Link-Icon klicken. Die Auswahl des Reiters entfernt den Link.

Der Rich-Text Editor ist so konfiguriert, dass bei Eingabe eines Textes, der grob einer Internet- oder Email-Adresse ähnelt, automatisch ein entsprechender Link erzeugt wird. Falls das im Einzelfall nicht sinnvoll ist, können Sie den Link mit Remove link entfernen.

Reiter „Page“: Link auf interne Seite

Bild 6: Link auf interne Seite

Hier sehen Sie die Seiten Ihrer TYPO3-Site in einer Baumstruktur. Die schwarzen Dreiecke blenden Unterseiten ein oder aus. Sie können die Zielseite durch Mausklick auswählen.

Oben gibt es Felder für zusätzliche Link-Parameter:

  • Style:
    Hier kann man beeinflussen, wie der Link dargestellt wird. Bei internen Links hat die Einstellung jedoch keine Auswirkungen.
  • Title:
    Hier können Sie zusätzliche (!) Informationen zu dem Link angeben. Der Text wird zum Beispiel beim Überfahren des Links mit der Maus in einem Tooltip eingeblendet. Vermeiden Sie es, den verlinkten Text zu wiederholen.
  • Target:
    Das Dropdown-Menü rechts fügt lediglich die den Einträgen entsprechenden Codes ein („Top“ = _top, „New window“ = _blank). Hier hat nur der Eintrag „_blank“ einen Effekt. Dadurch öffnet sich die Seite in einem neuen Fenster bzw. Tab. Für Links auf interne Seiten ist so etwas unsinnig.
  • Open in window:
    Wenn Sie hier Einträge machen, wird der Link in einem Popup-Fenster geöffnet. Die Dimensionen des Fensters geben Sie in den beiden an. Bei Links auf interne Seiten ebenfalls unsinnig…
Link direkt zu einem Inhaltselement einer internen Seite
Bild 7: Inhaltselemente einer Seite anzeigen und verlinken

Sie können einen internen Link zu setzen, bei dem man direkt zu einem bestimmten Inhaltselement springt; der Browser scrollt zu dem Zielelement. Dazu müssen Sie zunächst die Inhaltselemente der Zielseite einblenden, indem Sie auf den kleinen roten Pfeil neben dem Titel klicken (Bild 7). Anschliessend klicken Sie auf das Ziel-Element. (Es kann sein, dass Sie das Dialog-Fenster vergrößern oder scrollen müssen, um die Inhaltselemente zu sehen.)

Obacht! Bei mehrsprachigen Seiten werden Original-Elemente (default, deutsch) und Übersetzungen (englisch) aufgelistet, wobei die Reihenfolge nicht festgelegt ist. Sie müssen hier immer das passende Element auswählen, also das in der gleichen Sprache wie die des aktuellen Elements, sonst funktioniert der Link nicht.

Reiter „File“: Link auf interne Datei

Bild 8: Link auf interne Datei

Unter dem Reiter File können Sie eine Datei (Bild oder Download-Datei) auswählen, die sich in der Filelist Ihrer Website befindet. Klicken Sie auf den entsprechenden Ordner und dann auf die gewünschte Datei.

Oben gibt es Felder für zusätzliche Link-Parameter:

  • Style:
    Hier kann man beeinflussen, wie der Link dargestellt wird. Für Dateien, die vermutlich nicht im Browser angezeigt, sondern herutergeladen werden, wählen Sie „download“ für ein Download-Icon neben den Link. Für Dateien in zugangsgeschützen Bereichen wählen Sie “locked-file“ für ein Schloss-Icon.
  • Title:
    Hier können Sie zusätzliche (!) Informationen zu dem Link angeben. Der Text wird zum Beispiel beim Überfahren des Links mit der Maus in einem Tooltip eingeblendet. Sinwoll ist hier Angabe zu Dateityp und -größe oder ob der Link ein neues Fenster öffnet.
  • Target:
    Hier hat nur der Eintrag „_blank“ einen Effekt. Dadurch öffnet sich die Seite in einem neuen Fenster bzw. Tab.
  • Open in window:
    Wenn Sie hier Einträge machen, wird der Link in einem Popup-Fenster geöffnet. Die Dimensionen des Fensters geben Sie in den beiden Feldern an.

Reiter „External URL“: Link auf andere Websites

Im Reiter External URL legen Sie Links auf externe Webseiten an. Die Adresse fügen Sie in das Feld URL ein. Die weiteren Parameter:

  • Style:
    Hier kann man beeinflussen, wie der Link dargestellt wird. Wenn Sie bei Target „_blank“ verwenden, wählen Sie „external-link-new-window“ für das entsprechende Icon. Wenn die Zielseite eine Authentifizierung erfordert, wählen Sie „locked-url“ für ein Schloss-Icon.
  • Title:
    Hier können Sie zusätzliche (!) Informationen zu dem Link angeben. Der Text wird zum Beispiel beim Überfahren des Links mit der Maus in einem Tooltip eingeblendet. Vermeiden Sie es, den verlinkten Text zu wiederholen.
  • Target:
    Hier hat nur der Eintrag „_blank“ einen Effekt. Dadurch öffnet sich die Seite in einem neuen Fenster bzw. Tab. Da per Design nicht gekennzeichnet werden kann, ob ein Link ein neues Fenster öffnet, müssen Sie einen entsprechenden Hinweis in das Feld Title schreiben. Beachten Sie auch den Hinweis unten!
  • Open in window:
    Wenn Sie hier Einträge machen, wird der Link in einem Popup-Fenster geöffnet. Die Dimensionen des Fensters geben Sie in den beiden Feldern an.
Info:

Vermeiden Sie es, neue Fenster zu öffnen!

Ein neues Fenster oder einen neuen Tab zu öffnen, nur weil der Link zu einer anderen Website führt, ist aus verschiedenen Gründen nicht zu empfehlen:

  • Zugänglichkeit: solche Links sind nicht barrierefrei
  • Usability: Verwirrt unerfahrene Benutzer, erst recht wenn die Ziel-Seite ein ähnliches Layout wie Ihre hat (was bei TUM-Sites häufig ist)
  • Höflichkeit: Es nervt erfahrene Benutzer

Reiter „Email“: E-Mail-Link einfügen

Mit diesem Reiter fügen Sie einen Link auf eine E-Mail-Adresse ein. Die Adresse geben Sie in das Feld Email address ein. Es gibt zwei zusätzliche Parameter:

  • Style:
    Hier brauchen Sie nichts einzutragen. (Ein Icon gibt es im neuen Layout nicht mehr.)
  • Title:
    Hier können Sie zusätzliche (!) Informationen zu dem Link angeben. Der Text wird zum Beispiel beim Überfahren des Links mit der Maus in einem Tooltip eingeblendet. Vermeiden Sie es, den verlinkten Text zu wiederholen. Löschen Sie ggf. den Vorgabetext.

Weitere Möglichkeiten

Inhaltselemente, die automatische Verlinkungen erzeugen

Viele Inhaltselemente von TYPO3 erzeugen automatische Verlinkungen und können Ihnen so viel Arbeit abnehmen. Die wichtigsten sind:

„To top“-Link

Bild 9: „To Top“-Link einfügen

„To top“-Links sind Links, die zum Anfang der Seite führen. Das erspart das Zurückscrollen und ist vor allem bei längeren Seiten nützlich. Ein Beispiel finden Sie unten auf dieser Seite.

Sie können einen solchen Link unter jedes beliebige Inhaltselement setzen, indem Sie im Reiter Access den Haken bei Append with Link to Top of Page setzen (Bild 9).

Wartungsfreundlich (bei Änderung der Seiteninhalte) ist es, ein eigenes Inhaltselement für den „to top“-Link anzulegen, das ganz unten auf der Seite bleibt:

  • Wählen Sie den Inhaltstyp Header
  • Geben Sie „(to top)“ als Header ein
  • Setzen Sie den Header Type auf „Hidden“
  • Machen Sie im Reiter Access den Haken bei Append with Link to Top of Page, und entfernen den bei Show in section menus.

hoch