Kompatibilität:

WebSite X5 Evo und Pro

Sie können mit Ankern einen Link zu einem jeweiligen Inhalt auf der aktuellen oder einer anderen Seite einstellen, um ihn in Vordergrund zu bringen.


Was ist ein Anker

Ein Anker ist eine Bezugsmarkierung, die die Position eines Objekts innerhalb einer Seite definiert: Wie gesagt, Anker werden verwendet, um Direktlinks zu dem jeweiligen Objekt eines anderen Bereichs der Webseite zu erstellen.


Die Anzahl der Anker, die in eine Seite eingefügt werden können, ist in WebSite X5 unbegrenzt. Theoretisch könnte jedem enthaltenen Objekt ein Anker zugewiesen werden. Zur Vereinfachung der Arbeit empfehlen wir:

  • einem Objekt nur dann einen Anker zuzuweisen, wenn es notwendig ist
  • den Ankern aussagekräftige Namen zu geben, um sie sofort identifizieren zu können.


So erstellen Sie ein Inhaltsverzeichnis mit den Ankern

Ein Beispiel kann sicher dabei helfen, die Arbeitsweise der Anker besser zu verstehen. 


Nehmen wir an, dass wir eine FAQ-Seite mit einem kurzen Inhaltsverzeichnis mit der Liste der Fragen erstellen möchten,  in das man klicken kann, um nacheinander direkt zu den jeweiligen Inhalten zu gelangen.

Anker können Sie beide den Objekten und den Zeilen zuweisen, das Ergebnis ist ändert sich nicht. Analysieren wir jetzt beide Alternativen:


1. Alternative - Anker den Objekten zuweisen

  • Erstellen Sie auf Schritt 4 - Seiten die Seite und fügen Sie alle Objekte ein, die für die Darstellung der gewünschten Inhalte benötigt werden. Erstellen Sie ein Textobjekt für das Inhaltsverzeichnis (Zeile 1) sowie jeweils ein weiteres für jeden Abschnitt, der über das Inhaltsverzeichnis erreicht werden soll (Zeile 2, 3 und 4).
  • Wählen Sie im Layout-Raster das Objekt Text mit dem ersten FAQ-Inhalt und klicken Sie auf der Schaltfläche , um einen Anker zuzuweisen.
  • Geben Sie in dem eingeblendeten Dialogfenster einen Namen für den Anker ein, z. B. FAQ1. Sie können hier keine Leer- oder Sonderzeichen anwenden.
  • Wiederholen Sie diese Schritte, um alle Anker einzustellen.

2. Alternative - Anker den Zeilen zuweisen

  • Weisen Sie analog jedem weiteren Objekt Text für die einzelnen Inhalte Anker zu (Zeile 3 und 4) und geben Sie den Ankern eindeutige, aussagekräftige Namen.
  • Nachdem Sie die Objekte im Raster des Seitenlayouts hinzugefügt haben, klicken Sie auf   und öffnen Sie das Fenster Zeilenstil.
  • Wählen Sie die Zeile, wo Sie das Objekt für den ersten FAQ-Inhalt hinzugefügt haben (Zeile 2) und  klicken Sie auf der Schaltfläche , um einen Anker zuzuweisen.
  • Geben Sie in dem eingeblendeten Dialogfenster einen Namen für den Anker ein, z. B. FAQ1.
  • Weisen Sie analog jedem weiteren Objekt Text für die einzelnen Inhalte Anker zu (Zeile 3 und 4) und geben Sie den Ankern eindeutige, aussagekräftige Namen.


#Tipp - Auf derselben Seite können Sie Anker beiden Objekten und Zeilen zuweisen, aber die müssen unterschiedliche Namen haben.


Einen Link hinzufügen

Jetzt sollen Sie einen Link für den Anker einstellen:

  • Öffnen Sie das Objekt Text des Inhaltsverzeichnisses per Doppelklick im Editor (Zeile 1).  
  • Markieren Sie den ersten Eintrag des Inhaltsverzeichnisses und klicken Sie auf die Schaltfläche , um das Dialogfenster Link aufzurufen.
  • Wählen Sie die Aktion Seite der Website und klicken Sie auf  , um die Sitemap einzublenden und dort die Seite auszuwählen, an der Sie gerade arbeiten.
  • Klicken Sie auf das Feld Interner Seitenanker, um die verfügbaren anzuzeigen, und wählen Sie den Anker, der den entsprechenden Eintrag im Inhaltsverzeichnis identifiziert (auf Zeile 2).
  • Wiederholen Sie den Vorgang für alle Einträge des Inhaltsverzeichnisses.


Der Link „Zurück zum Seitenanfang” 

Die Navigation kann erleichtert werden, indem man am Ende eines jeden Inhaltsblocks einen Link zum Inhaltsverzeichnis am Seitenanfang einfügt.

  • Weisen Sie mit der Schaltfläche auch dem Objekt Text des Inhaltsverzeichnisses einen Anker zu (Zeile 1).
  • Öffnen Sie das Objekt Text des ersten Inhaltsblocks (Zeile 2)  im Editor und fügen Sie am Ende einen Hinweis wie „Zurück zum Seitenanfang” ein.
  • Markieren Sie den Hinweis  „Zurück zum Seitenanfang”, klicken Sie auf , um einen Link zur Seite zu erstellen und wählen Sie den Anker des Inhaltsverzeichnisses aus.
  • Wiederholen Sie den Vorgang und fügen Sie dadurch „Zurück zum Seitenanfang” bei allen Textblöcken ein.


Anstelle des Hinweises „Zurück zum Seitenanfang” kann auch eine grafische Schaltfläche erstellt, ein Bild direkt in das Objekt Text eingefügt oder ein Bildobjekt verwendet werden (in diesem Fall können auch mit Mouse-over-Effekte zu genutzt werden). Die Vorgehensweise zur Erstellung des Links ist in jedem Fall immer identisch.


Die Verwendung von Ankern auf Full Height-Seiten

In unserem Beispiel führte die Einstellung von Ankern auf Objekten und Zeilen zum selben Ergebnis, es gibt aber einen Fall, den man berücksichtigen soll, und zwar die Seiten mit der Full Height-Funktion für die Erstellung eines vertikalen Bildlaufs beim Scrollen.


Mit der Funktion Full Height werden alle Zeilen die gleiche Höhe des Viewports, d. h. das von Benutzer angewendete Browserfenster, übernehmen. So werden die Zeilen beim Scrollen wie eigenständige Slides je aufeinander folgen.

Wenn Sie diese Funktion anwenden ist die Zeilenhöhe nicht mehr fixiert, und ändert sich je nach Umbruchspukt: Wenn es weniger Raum zur Verfügung steht, hängt die Mindesthöhe von den Inhalten ab. Wenn es dagegen viel Raum gibt, werden alle Inhalte sich zentral anordnen.


Um den Scrollen-Effekt zu behalten, sollen Sie eventuelle Anker auf Full Height-Seiten den Zeilen zuweisen. Nur so wird den verlinkten Inhalt dann zentral im Viewport des Browsers angezeigt.


#Tipp - Mehr Informationen finden Sie auf: Die Funktion Full Height für die Erstellung eines vertikalen Bildlaufs anwenden


Erstellen und Verwalten der Anker durch individuellen Code  

Wenn ein Anker nicht am Anfang, sondern innerhalb eines Objekts erstellt werden soll, beispielsweise an einem bestimmten Abschnitt in einem Objekt Text, haben Sie zwei Möglichkeiten:

  1. Sie können das ursprüngliche Objekt Text in zwei Textobjekte aufteilen und dem zweiten den Anker zuweisen.
  2. Sie können im Objekt Text manuell einen Anker erstellen.


Um einen Anker mit individuellem Code zu erstellen, sollen Sie so vorgehen:

  • Öffnen Sie das Objekt Text im Editor und klicken Sie auf die Schaltfläche , um die HTML-Codeerkennung zu aktivieren.
  • Positionieren Sie den Cursor an der Stelle, an der der Anker eingefügt werden soll, und geben Sie das Folgende ein:
<A NAME="anchor_name">&nbsp; </A>

Anstelle von „anchor_name”  geben Sie den gewünschten Namen für Ihren Anker ein. Der String „&nbsp;”  in diesem Beispiel identifiziert ein geschütztes Leerzeichen für den Tag-Inhalt.


Bei der Einstellung einer Verlinkung zu einem Anker muss berücksichtigt werden, dass manuell erstellte Anker in der Liste der Option Interner Seitenanker nicht erscheinen. Gehen Sie daher folgendermaßen vor:

  • Wählen Sie im Fenster Link die Aktion Datei oder URL.
  • Geben Sie in das Feld URL oder Datei im Internet das Folgende ein: 
#anchor_name

Anstelle von „anchor_name” geben Sie den gewünschten Namen für Ihren Anker ein.