Ist dies Ihr erster Besuch auf auctores.de? Dann empfehlen wir Ihnen unsere Website-Tour. Ja, Tour beginnen.  |  Nein, ich navigiere allein.

Was hat sich geändert?

Der neue Editor bringt neben einer optischen Anpassung einige zusätzliche Funktionen mit. Diese Anleitung ergänzt die bisherige CMS-Kurzanleitung und konzentriert sich auf die veränderten und neu hinzugekommenen Bearbeitungsmöglichkeiten.

Andere und neue Bedienelemente
  • Die Optik des Editors hat sich geändert Die Bedienelemente in den Menüleisten sind z. T. anders angeordnet.
  • Im Textfeld des Editors markieren nun gestrichelte Linien semantische bzw. strukturelle Elemente. Ein Marker in der linken oberen Ecke des Elements zeigt dabei an, um welches Element es sich handelt. Sollte diese Anzeige fehlen, drücken Sie die Taste „¶“ in der Menüleiste des Editors.
  • Wie gehabt zeigt die Fußleiste des Editors die Formatierung des Elements, in dem sich der Cursor gerade befindet. Dies hilft auch, Fehlformatierungen aufzuspüren, die etwa durch direktes Kopieren aus Word-Dokumenten o. ä. in das bearbeitete Element geraten sind.

Tipp: Wenn in dieser Fußleiste z. B. „font“ oder „MSO.normal“ steht, ist dies ein Zeichen für fehlerhafte Formatierungen.

Abbrechen

Neu: Der Button „Abbrechen“ Neu hinzugekommen ist der Button „Abbrechen“. Er schließt den Editor, ohne seit dem letzten Speichern vorgenommene Änderungen auf die Website zu übernehmen.

Dieser Button ist zum einen die „Notbremse“, um die Übernahme fehlerhafter Formatierungen zu vermeiden. Zum anderen erlaubt er eine Kontrolle der Inhalte, ohne Zeitstempel und letzten Bearbeiter des Elements zu verändern.

Zum Überblick ⇑

Text einfügen

Neuer Button: „Als Text einfügen“ Der Button „Als Text einfügen“ ersetzt die bisherigen Funktionen „Als unformatierten Text einfügen“ und „Microsoft-Word-Text einfügen“.

Mehr zum Einfügen von Texten »

Zum Überblick ⇑

Textfarbe

Neuer Button: „Textfarbe“ Der Button „Textfarbe“ ermöglicht analog zum Palettensymbol des alten Editors die Vergabe von Textfarben.

Achtung: Die Farbformatierungen der Website werden zentral über Style Sheets geregelt – bitte nicht von Hand vergeben!

Überschriften, Links o. ä. erhalten bei korrekter Formatierung (Überschrift als Überschrift ausgezeichnet, Linktext verlinkt etc.) automatisch die jeweiligen Farben, Sie müssen hier nicht selbst Farben wählen.

Wie beim alten Editor lautet hier deshalb die Empfehlung: Verzichten Sie auf den Einsatz dieses Werkzeugs.

Farbwähler Beim Klick auf den Button „Textfarbe“ klappt ein Farbwähler aus, Klick auf die jeweilige Farbe färbt einen vorher markierten Text in dieser Farbe ein.

Achtung: Eine hier gewählte Farbe wird im Quelltext der Seite gespeichert und überfährt die zentral für die Website vorgegebenen Farben. Die Folgen:

  • Werden das Design der Website geändert und die Farben zentral neu gesetzt, bleiben diese von Hand gesetzten Formatierungen erhalten. Dies kann dazu führen, dass so eingefärbte Textpassagen nicht mehr oder nur noch schlecht lesbar sind. Alle von Hand eingefügten Farbformatierungen müssen in so einem Fall auch von Hand wieder entfernt werden.
  • Die unkontrollierte Vergabe von Farben widerspricht i. d. R. den Vorgaben von Corporate Design und Corporate Identity. Diese werden verwässert oder zerstört. Im ungünstigsten Fall werden so Firmenfarben eines Mitbewerbers auf der Website eingeführt, was zu Verwechslungen und sogar Abmahnungen führen kann.
  • Je nach gewählter Farbe verringert sich die Lesbarkeit der umgefärbten Textpassage, weil z. B. der Kontrast zum Hintergrund nicht ausreicht. Dies führt dazu, dass Nutzer die Seite verlassen.
  • Je nach gewählter Farbe kann sich auch die Verständlichkeit verringern, etwa wenn Textpassagen in einer für Überschriften oder Links vorgesehenen Farbe erscheinen. Dies führt dazu, dass Nutzer die Seite verlassen. Farbe ist ein Informationsträger, der gezielt einzusetzen ist.
  • Werden zu viele Farben benutzt, erscheint eine Website schnell als unseriös (Gestaltungsregel: Bunt ist nicht farbig.) Zudem gehen wichtige Inhalte im Signalchaos unter. Selbst die Website eines Kindergartens oder einer Grundschule muss nicht aussehen, als wäre sie von Fünfjährigen mit einem großen Malkasten gestaltet worden – außer vielleicht, sie richtet sich ausschließlich an Fünfjährige.

Wenn ein Besucher länger als 10 Sekunden benötigt, sich auf einer Seite zurechtzufinden, haben Sie ein Problem.

Deshalb noch einmal: Verzichten Sie lieber auf den Einsatz dieses Werkzeugs.

Hinweis: Auf keinen Fall sollten Sie diese Funktionen nutzen, um z. B. weißen oder fast weißen Text auf weißem Hintergrund zu erzeugen und so Keywords für Suchmaschinen auf der Seite „versteckt“ unterzubringen. Dies erkennen inzwischen alle Suchmaschinen als Spamversuch. Es führt etwa bei Google zum schnellen und langdauernden, u. U. auch permanentem Ausschluss aus dem Suchindex.

Zum Überblick ⇑

Suchen und Ersetzen

Funktion: „Suchen und Ersetzen“ Die Funktion „Suchen und Ersetzen“ befindet sich an einer neuen Stelle, funktioniert aber wie bisher.

Zum Überblick ⇑

Link einfügen/bearbeiten

Geänderte Funktion: „Link einfügen/bearbeiten“ Die Funktion „Link einfügen/bearbeiten“ fasst die bisherigen Funktionen „Download-Link einfügen/bearbeiten“, „Internen Link einfügen/bearbeiten“ und „Externen Link einfügen/bearbeiten“ zusammen.

Die grundlegenden Funktionen sind erhalten geblieben. Die grundlegenden Funktionen sind dabei im Vergleich zum alten Editor gleich geblieben. Nach wie vor lassen sich:

  • externe Websites und Dateien verlinken, geben Sie dazu den Hyperlink im Feld „URL“ ein
  • andere Seiten des eigenen Auftritts verlinken, nutzen Sie dazu die Funktion „Internen Link auswählen“
  • beliebige Dateien (Bilder, PDF-Dokumente etc.) als Download verlinken, nutzen Sie dazu die Funktion „Datei hochladen“

Mehr zur Verlinkung von Inhalten zur Anzeige in der Lightbox »

Zum Überblick ⇑

Umfluss beenden

Neue Funktion: „Umfluss beenden“ Die Funktion „Umfluss beenden“ erlaubt es, den Textumfluss um ein Bild zu steuern. Er sorgt dafür, dass ein nachfolgender Text oder ein nachfolgendes Bild immer erst unterhalb des umflossenen Elements dargestellt wird.

Mehr zur Funktion „Umfluss beenden“ »

Zum Überblick ⇑

Textmarken

Neue Funktion: Anlegen von Sprungmarken Die Funktion „Textmarke“ erlaubt die Anlage von Sprungmarken innerhalb einer Seite, die innerhalb der Seite selbst oder von anderen Seiten aus angesprungen werden können.

Mehr zur Funktion „Textmarke“ »

Zum Überblick ⇑

Formatierung entfernen

Funktion „Formatierung entfernen“ Die Funktion „Formatierung entfernen“ lässt sich nutzen, um versehentlich aus anderen Programmen übernommene Formatierungen oder diesbezügliche Pflegefehler zu beseitigen.

Achtung: Diese Funktion reicht nicht immer aus, fehlerhafte Formatierungen komplett zu entfernen. In Einzelfällen ist dann ein direkter Eingriff in den Quelltext nötig.

Zum Überblick ⇑

Aufzählung

Erweiterte Funktion „Aufzählung“ Die Funktion „Aufzählung“ erlaubt nun, Aufzählungspunkte mit unterschiedlichen Bulletsymbolen zu versehen.

Achtung: Im Normalfall sollten Sie bei der Auswahl „Standard“ bleiben. Diese Auswahl ist in Normalfall spezifisch für den Online-Auftritt gestaltet (z. B. farbige Symbole). Auch bei geschachtelten Listen sollte „Standard“ ausgewählt werden.

Zum Überblick ⇑

Nummerierte Aufzählung

Erweiterte Funktion „Nummerierte Aufzählung“ Die Funktion „Nummerierte Aufzählung“ erlaubt nun, über die herkömmliche Nummerierung auch andere Gliederungsmöglichkeiten auszuwählen. Die Auswahl „Standard“ setzt dabei arabische Ziffern.

Zum Überblick ⇑

Tabellen

Geänderte Funktion „Tabellen einfügen“ Die Tabellenfunktion ermöglicht das schnelle Einfügen von Tabellen, wobei sich die Zahl der Zeilen und Spalten mit der Maus auswählen lässt.

Die Zahl der Zeilen und Spalten wird dabei unterhalb des Tabellenrasters angezeigt.

Hinweis: Diese Werte lassen sich auch nachträglich durch die Tabellenbearbeitungswerkzeuge ändern (Zeile/Spalte hinzufügen oder entfernen).

Achtung: Tabellen sind kein Werkzeug für Textlayout!

Benutzen Sie bitte keine Tabellen, um nicht-tabellarische Inhalte auf einer Seite anzuordnen.

Bilder und Texte lassen sich z. B. mit der Funktion „Umfluss beenden“ korrespondierend anordnen. Mehrspaltige Texte werden, soweit möglich, durch die zentralen Style-Angaben des Auftritts formatiert.

Für Layoutzwecke missbrauchte Tabellen stellen für Suchmaschinen ebenso wie für Nutzer von Screenreadern oder anderen assisstiven Technologien semantische Zusammenhänge her, wo keine sind, und verschlechtern damit ggf. Ranking und Usability einer Seite.

Schlimmstenfalls stören derart eingesetzte Tabellen auch die Darstellung der Seite auf Smartphones und Tablets, weil die Seite nicht schmal genug dargestellt werden kann.

Da sich Tabellen durch den dafür nötigen HTML-Code außerdem auf die Ladezeit einer Seite auswirken sowie das für Google & Co. relevante Content-Code-Verhältnis verschlechtern, sind unnötige Tabellen auch unter SEO-Aspekten schädlich.

Mehr zum Bearbeiten von Tabellen »

Zum Überblick ⇑

Quelltext bearbeiten

Neue Funktion „Quelltext bearbeiten“ Die Funktion „Quelltext“ ermöglicht die direkte Bearbeitung des HTML-Codes für das Inhaltselements. So lassen sich ggf. Formatierungsprobleme erkennen und beheben.

Nur für erfahrene Nutzer: „Quelltext bearbeiten“ Achtung: Nutzen Sie diese Funktion nur, wenn Sie HTML wirklich beherrschen!

Zum Überblick ⇑

Einfügen von Texten

Wichtig: Inhalte nur im einfachen Textmodus einfügen. Für das Einfügen von Texten aus anderen Programmen oder Quellen nutzen Sie bitte ausschließlich das Einfügen über den einfachen Textmodus. Dieser entfernt alle unnötigen und potenziell schädlichen Formatierungen.

Beim ersten Einsatz dieser Funktion weist Sie ein Dialogfenster darauf hin, dass Texte ohne Formatierung eingefügt werden.

Hinweis: Dies gilt jeweils für eine aktive Pflegesitzung.

Die Formatierung des Textes wird nun an mehreren Stellen angezeigt. Der unformatierte Text ist standardmäßig als Absatz (HTML-Code

von engl. „paragraph“) formatiert.

Sie erkennen die Formatierung durch die Anzeige in der Fußzeile des Editors sowie ggf. am Marker im linken oberen Eck des Elements.

Hinweis: I. d. R. sind Layoutvorgaben wie Textfarben, Abstände o. ä. an bestimmte Formatierungen gebunden, außerdem sind diese Formatierungen auch semantische, bedeutungstragende und damit SEO-relevante Elemente. Ein Text sollte deshalb nie keine Formatierung enthalten. Hat ein eingefügter Text einmal keine Formatierung, bewegen Sie den Cursor an eine beliebige Stelle des Textes und wählen Sie die Formatierung „Absatz“ aus.

Tipp zur Textausrichtung: Standardeinstellung ist linksbündiger Satz – diesen sollten Sie am besten beibehalten. Verzichten Sie auf Blocksatz – er sieht nur scheinbar ordentlicher aus: Er führt zu einem sehr löcherigem Schriftbild, da in HTML kein Ausgleich der Wortzwischenräume möglich ist. Dies erschwert die Lesbarkeit. Noch schlechter lesbar ist Mittenachsensatz/Zentrierung. Mittenachsensatz ist für größere Textpassagen völlig ungeeignet. Rechtsbündiger Satz eignet sich für kleine Textmengen (z. B. ein Motto) als optische Würze; nur sehr sparsam einsetzen.

Texte einfach und sinnvoll strukturieren. Sollte der eingefügte Text nicht schon aus mehreren Absätzen bestehen, können Sie ihn einfach mit der Return-Taste in Absätze unterteilen.

Hinweis: Lesen am Bildschirm ist anders als auf Papier. Zu lange, ununterbrochene Textpassagen sind nicht nur anstrengender zu lesen, sondern schrecken Nutzer auch ab. Machen Sie deshalb kürzere Absätze als bei einem auf Papier gedruckten Text.

Achtung: Die Kombination Shift+Return (Umschalttaste+Return) erzeugt keinen neuen Absatz, sondern einen weichen Zeilenumbruch. Text nach einem solchen Zeilenumbruch bildet semantisch (und damit auch für Google) keine neue Sinneinheit. Auch spezifische optische Formatierungen des Absatzes (z. B. größerer Abstand nach unten) greifen bei einem weichen Zeilenumbruch nicht. Selbst wenn zwei aufeinanderfolgende weiche Zeilenumbrüche optisch wie ein regulärer Absatz aussehen, sind sie semantisch nicht gleichwertig.

Hinweis: Absätze und weiche Zeilenumbrüche sind nicht geeignet, um spezifische Zeilenlängen zu erzeugen. Die Darstellung von Texten im Web hängt von so vielen Faktoren – z. B. Anzeigegerät, Bildschirmgröße, vom Nutzer eingestellte Schriftgröße – ab, dass von Hand umbrochene oder durchgetrennte Texte auf fremden Bildschirmen völlig unkontrollierbar dargestellt werden können.

Zum Überblick ⇑

Überschriften formatieren

Überschriften gliedern Inhalte nicht nur optisch, sondern auch strukturell. Um einen Text mit einer Überschrift zu versehen, schreiben Sie die Überschrift, positionieren Sie den Cursor in dieser Zeile und wählen Sie aus den zur Verfügung stehenden Überschiften die passende Überschrift aus.

Hinweis: Die Überschrift 1 ist die Hauptüberschrift der Seite und sollte daher – anders als die anderen Überschriftenformatierungen – auch nur einmal auf der Seite vorkommen. Sie legt das Thema der Seite fest und ist sehr suchmaschinenrelevant.

Die Überschriften 2 und 3 sind hierarchisch und semantisch der Überschrift 1 untergeordnet, die Überschrift 3 ist eine „Unterüberschrift“ der Überschrift 2. Sie können beliebig oft auf der Seite vorkommen und gliedern den Text strukturell und optisch.

Hinweis: Formatieren Sie keine längeren Textpassagen als Überschriften, Suchmaschinen werten dies als „spammy“, und auch Nutzern von Screenreadern, die sich anhand der Überschriften in einem Text orientieren, tun Sie damit keinen Gefallen. Eine Seite sollte nicht nur aus Überschriften bestehen.

Zum Überblick ⇑

Einfügen von Bildern

„Bild einfügen/bearbeiten“ mit neuen Funktionen Der Dialog „Bild einfügen/bearbeiten“ hat einige zusätzliche Funktionen erhalten.

Mit „Bild hochladen“ wählen Sie das Bild aus, dass Sie auf der Seite einpflegen wollen.

Hinweis: Sie sollten ein Bild immer am Anfang eines Absatzes oder einer Liste einfügen. Die Position des Bildes wird in einem zweiten Schritt bestimmt. Das Einfügen am Anfang eines Absatzes stellt sicher, dass Sie das Bild nicht versehentlich löschen, wenn Sie den Text ändern. Ein Bild sollte nicht in einer Überschrift positioniert werden, da sonst das Bild und sein Beschreibungs- und Titeltext der Überschrift zugeschlagen werden. Dies führt Nutzer von Screenreadern ebenso in die Irre wie Suchmaschinen.

Wichtige Details beim Einfügen von Bildern Ist das Bild hochgeladen, zeigt der Dialog unter „Quelle“ den Dateipfad des Bildes an und unter „Abmessungen“ die Höhe und Breite des hochgeladenen Bildes in Pixeln.

Achtung: Ändern Sie die dort eingestellten Pixelwerte nicht von Hand und lassen Sie den Haken bei „Seitenverhältnis beibehalten“ immer gesetzt. Wird ein Bild größer oder kleiner angezeigt, als es tatsächlich ist, verschlechtert sich die Abbildungsqualität. Ein zu großes Bild lässt sich außerdem zwar kleiner darstellen, das ändert jedoch nichts an seiner Dateigröße: Zu große Bilder verlängern die Ladezeit, erhöhen unnötig den Traffic auf dem Webserver und sind SEO-schädlich. Ist der Haken bei „Seitenverhältnis beibehalten“ nicht gesetzt, kann das Bild außerdem gestaucht oder gezerrt dargestellt werden, was besonders bei Personenfotos sehr unvorteilhaft ist.

Vergessen Sie nicht, die Bildbeschreibung auszufüllen: Sie wird sowohl von Suchmaschinen wie von Screenreadern gelesen und ist deshalb gleichermaßen SEO-relevant als auch im Hinblick auf Zugänglichkeit (Accessibility/Usability) wichtig.

Der Bildtitel ist optional, sollte aber ausgefüllt werden: Er erscheint beim Überfahren des Bildes mit der Maus und fungiert quasi als Bildtext.

Geänderte Bildpositionierung Unter dem Reiter „Erweitert“ können Sie jetzt die Abstände des Bildes zum umgebenden Text für jede Bildseite separat setzen.

Im Beispiel hier soll das Bild rechts stehen, während links davon Text läuft. Damit der Text nicht bis direkt an das Bild läuft, ist der Abstand links auf 10 Pixel gesetzt.

Empfehlung: Bei von Text umflossenen Bildern muss i. d. R. immer nur der Abstand auf der Seite gesetzt werden, an der der Text vorbeifließt. „Abstand oben“ und „Abstand unten“ sollten leer bleiben, da gerade bei der Darstellung auf unterschiedlichen Endgeräten unerwünschte Effekte auftreten können.

Hinweis: Auf Seiten, die noch mit dem alten Editor gepflegt worden sind, sind die Bildabstände noch symmetrisch vergeben worden, „HSpace 10“ bedeutet etwa, dass ein Bild links und rechts gleichzeitig einen Abstand von 10 Pixeln zum Text hat. Diese veraltete Formatierung lässt sich ersetzen, indem Sie im oberen Bereich einen neuen Wert vergeben und in den beiden Feldern „HSpace“ und „VSpace“ stehende Werte löschen.

Das Positionieren eines umflossenen Bildes funktioniert jetzt anders. Das eingefügte Bild sitzt zunächst noch an der Einfügeposition. Um es an die gewünschte Position zu bringen, klicken Sie auf das Bild, sodass der Bearbeitungsrahmen sichtbar wird.

Klicken Sie auf den Button für die Textformatierung „rechtsbündig“, um das Bild an die rechte Seite zu bringen, sodass es vom Text umflossen wird. Bei aktivem Bearbeitungsrahmen wird nur das Bild nach rechts gesetzt, der Text bleibt unberührt.

Gleichermaßen wird ein links stehendes, von Text umflossenes Bild durch einen Klick auf die Textformatierung „linksbündig“ erzeugt.

Mit dem Button „Formatierung entfernen“ können Sie den Umfluss rückgängig machen.

Zum Überblick ⇑

Umfluss beenden

Manchmal ist es gewünscht, dass ein Umfluss sich nur auf eine spezifische Textpassage erstreckt und die nächste erst unterhalb des umflossenen Bildes startet, auch wenn daneben noch Platz wäre. Ein Beispiel sind etwa Kontaktdaten neben einem Mitarbeiterfoto.

Die neue Funktion „Umfluss beenden“ erleichtert das Anpassen des Textlaufs um Bilder. Hier kommt die Funktion „Umfluss beenden“ ins Spiel.

Positionieren Sie den Cursor an den Anfang der Passage, in der der Umfluss nicht mehr aktiv ist.

Wichtig: Diese Funktion hängt an dem Element, in dem sie aufgerufen wird und wirkt nach oben. Sie muss also nicht am Ende einer Passage, sondern an den Anfang der folgenden Passage positioniert werden.

Achtung: Die Funktion „Umfluss beenden“ wirkt nach oben gegenüber dem vorhergehendem Element. Ist die Funktion „Umfluss beenden“ eingesetzt, wird Sie im Editor durch eine gestrichelte rote Linie am oberen Rand des damit formatierten Elements markiert.

Um einen solchen Umfluss aufzuheben, bewegen Sie den Cursor in das Element und betätigen erneut die „Umfluss beenden“-Taste.

Zum Überblick ⇑

Einfügen von Textmarken

Die Funktion „Textmarke“ ermöglicht das gezielte Anspringen von Seitenbereichen. Die Funktion „Textmarke“ erlaubt die Anlage von Sprungmarken innerhalb einer Seite, die innerhalb der Seite selbst oder von anderen Seiten aus angesprungen werden können.

Dies ist sinnvoll, wenn eine Seite sehr lang ist und Nutzer spezifische Stellen schnell erreichen wollen. In diesem Fall lässt sich am Anfang der Seite ein kurzes Inhaltsverzeichnis erstellen, das die einzelnen Unterpunkte komfortabel erreichbar ist.

Ebenso erleichtert diese Funktion den Umgang mit Fußnoten o. ä.

Außerdem lassen sich über diese Funktion auch bestimmte Bereiche einer Einzelseite von außen gezielt erreichen, z. B. ein Download-Hinweis oder ein Anfrageformular am Ende einer längeren Seite.

Wählen Sie sinnvolle Bezeichnungen für Textmarken. Zum Einfügen einer Textmarke positionieren Sie den Cursor an die Stelle, die das Ziel des Sprunglinks sein soll.

Hinweis: Es empfiehlt sich, den Sprunganker an den Anfang einer Zwischenüberschrift zu setzen.

Ein Klick auf den Button „Textmarke“ öffnet ein Popup-Fenster. Hier können Sie einen Namen für die Sprungmarke vergeben.

Tipp: Der Name sollte logisch sein, nicht zu lang, und keine Leerzeichen, Umlaute oder Sonderzeichen enthalten.

Das Ankersymbol steht für eine Textmarke. Eine eingefügte Textmarke erkennen Sie im Editor an dem kleinen Anker-Symbol.

Ein Link auf eine Textmarke wird wie ein herkömmlicher Link gesetzt. Um einen Link auf diese Textmarke zu setzen, gehen Sie grundsätzlich vor wie beim Setzen eines herkömmlichen Links.

Markieren Sie den Text oder das Bild, das zum Link werden soll, und drücken Sie den Button „Link einfügen“.

Auswahl des Sprungziels Nun öffnet sich das Dialogfenster „Link einfügen“.

Hier können Sie unter „Textmarken“ das gewünschte Linkziel auswählen.

Anzeige des Sprungziels im Link-Editor Die gewählte Sprungmarke erscheint im Feld „URL“.

Die Sprungmarke lässt sich auch von außerhalb der Website direkt anspringen. Dafür müssen Sie nur den Namen der Sprungmarke mit dem vorangestellten „#“ an die URL der Seite anhängen, z. B.

www.example.com/hp4711/beispielseite.htm#name-beliebig

Der Sprunglink sieht aus wie ein herkömmlicher Link. Der so erzeugte Sprunglink gleicht optisch einem herkömmlichen Weblink.

Die Textmarke lässt sich auch von anderen Seiten aus anspringen. Auch beim Erstellen eines internen Links von einer Seite eines Auftritts auf eine andere lässt sich die Sprungmarke auf die Zielseite gezielt anspringen.

Zum Überblick ⇑

Einfügen und Bearbeiten von Tabellen

Bequemes Einfügen von Tabellen Die Tabellenfunktion ermöglicht das schnelle Einfügen von Tabellen.

Zum Einfügen einer Tabelle erzeugen Sie zunächst einen leeren Absatz, positionieren Sie den Cursor dort und klicken Sie dann auf „Tabelle einfügen“.

Die Zahl der Zeilen und Spalten lässt sich mit der Maus durch Überfahren des Tabellenrasters auswählen und wird dabei unterhalb des Tabellenrasters angezeigt.

Rahmenlinien zeigen die Tabelle an. Die eingefügte, zunächst noch nicht formatierte Tabelle wird durch gestrichelte Rahmenlinien markiert.

Sie können die Tabellenzellen durch direktes Hineinschreiben bzw. Hineinladen von Bildern oder durch Hineinkopieren befüllen.

Die Formatierung der Tabelle erfolgt nun durch die Untermenüs der Funktion „Tabelle einfügen/bearbeiten“.

Hinweis: Tabellen sollten keine überzähligen, leeren Zeilen bzw. Spalten enthalten, dies bläht den Code unnötig auf und stört die Darstellung.

Tabellenzellen bearbeiten

Bearbeiten von Tabellenzellen Im Untermenüpunkt „Zelle“ können Sie dabei die Eigenschaften einer, mehrerer oder aller Tabellenzellen anpassen, Tabellenzellen spalten- und/oder zeilenübergreifend verbinden sowie diese Verbindung wieder aufheben.

Tabellenzellen lassen sich einzeln oder in Gruppen formatieren. Unter „Zelleneigenschaften“ können Sie festlegen:

  • Zellentyp: Normale Tabellenzelle oder Zelle im Tabellenkopf
  • Gültigkeitsbereich: Hier legen Sie fest, ob die in diesem Dialog vergebenen Formatvorgaben nur für die einzelne Zelle gelten sollen, für die Zeile oder Spalte, in der sich die ausgewählte Zelle befindet, oder für Zellen in mehreren Zeilen bzw. Spalten.
  • Ausrichtung: Keine (entspricht dem Standardwert, i. d. R. linksbündig), linksbündig (sollte nur verwendet werden, wenn Linksbündigkeit nicht mit „Keine“ erreicht wird), Zentriert (hier gelten die gleichen Empfehlungen wie bei der allgemeinen Textausrichtung) sowie Rechtsbündig (z. B. bei Zahlen mit Nachkommastellen, Preisen etc.)
  • Vertikale Ausrichtung: Keine, Oben, Zentriert, Unten – im Normalfall sollten Sie hier „Oben“ wählen, wenn nicht „Keine“ bereits die Inhalte am oberen Rand der Tabellenzelle ausrichtet.
Tabellenzeilen bearbeiten

Bearbeiten von Tabellenzeilen Im Untermenüpunkt „Zeile“ können Sie die Eigenschaften einer, mehrerer oder aller Tabellenzeilen anpassen.

Außerdem können Sie innerhalb der Tabelle Zeilen hinzufügen oder entfernen sowie Zeilen einschließlich dort vergebener Formatierungen kopieren, ausschneiden und einfügen.

Tabellenzeilen lassen sich einzeln oder in Gruppen bearbeiten. Unter „Zeileneigenschaften“ können Sie festlegen:

  • Ausrichtung: Keine (entspricht dem Standardwert, i. d. R. linksbündig), linksbündig (sollte nur verwendet werden, wenn Linksbündigkeit nicht mit „Keine“ erreicht wird), Zentriert (hier gelten die gleichen Empfehlungen wie bei der allgemeinen Textausrichtung) sowie Rechtsbündig (z. B. bei Zahlen mit Nachkommastellen, Preisen etc.). Diese Funktion ähnelt der gleichnamigen Funktion unter „Zelleneigenschaften“, wendet die vergebenen Formatierungen jedoch blockweise auf ganze Zeilen an.
  • Vertikale Ausrichtung: Keine, Oben, Zentriert, Unten – im Normalfall sollten Sie hier „Oben“ wählen, wenn nicht „Keine“ bereits die Inhalte am oberen Rand der Tabellenzeile ausrichtet. Diese Funktion ähnelt der gleichnamigen Funktion unter „Zelleneigenschaften“, wendet die vergebenen Formatierungen jedoch blockweise auf ganze Zeilen an.
  • Anwenden auf: Vergleichbar mit der Funktion „Gültigkeitsbereich“ unter „Zelleneigenschaften“. Hier können Sie wählen, ob die vergebenen Formatierungen auf die gesamte Tabelle, nur die Kopfzeile, alle geraden oder alle ungeraden Zeilen angewendet werden. Diese Auswahlmöglichkeit hängt mit der folgenden Funktion „Stil“ zusammen.

Mit der Funktion „Stil“ lassen sich spezifische Tabellenformatierungen vergeben. Die Funktion „Stil“ unter „Zeileneigenschaften“ ermöglicht es, in den zentralen Styles der Website allgemein für Tabellen definierte Angaben z. B. zu Schriftfarbe und Hintergrundfarbe zuzuweisen. Diese entsprechen der CI des Auftritts und lassen sich bei Bedarf auch zentral anpassen.

Standardmäßig sind eine Formatierung für die Kopfzeile der Tabelle sowie zwei unterschiedliche Formatierungen für Tabellenzeilen vergeben. Dies erlaubt die farblich aufeinander abgestimmte Gestaltung von leichter lesbaren „Zebratabellen“ mit abwechselnd gefärbten Zeilen, aber auch die Hervorhebung einzelner Tabellenbereiche.

Bereits vergebende Stil-Formatierungen lassen sich mit der Auswahl von „Löschen“ wieder aufheben.

Tabellenspalten bearbeiten

Die Funktion „Spalte“ erlaubt das Einfügen und Entfernen von Tabellenspalten. Mit der Funktion „Spalte“ können Sie zusätzliche Spalten an beliebigen Stellen der Tabelle einfügen oder vorhandene Spalten entfernen.

Tabelleneigenschaften

Mit „Tabelleneigenschaften“ lassen sich zusätzliche Eigenschaften für die Tabelle vergeben. Unter „Tabelleneigenschaften“ können Sie eine Reihe von Eigenschaften für die gesamte Tabelle festlegen.

Eine HTML-Tabelle dehnt sich passend zu ihrem Inhalt aus, bis die auf der Seite maximal mögliche Breite erreicht ist. Eine nur spärlich befüllte Tabelle benötigt u. U. deshalb nicht die volle Seitenbreite. Wenn Sie erzwingen wollen, dass die Tabelle trotzdem die gesamte Seitenbreite nutzt, setzen Sie einen Haken bei „volle Breite“. Entfernen des Hakens und erneuter Klick auf „Ok“ hebt dies wieder auf.

Wenn Sie einen Haken bei „Beschriftung“ setzen, können Sie eine erläuternde Legende oberhalb der Tabelle einfügen, die semantisch mit der folgenden Tabelle verknüpft ist.

Mit „Ausrichtung“ lässt sich die Position der Tabelle beeinflussen. Mit der Funktion „Ausrichtung“ unter „Tabelleneigenschaften“ können Sie die gesamte Tabelle in Relation zu umgebenden Elementen positionieren.

Achtung: Dies betrifft die Position der Tabelle. Diese Funktion beeinflusst nicht die Textausrichtung der Tabelleninhalte.

  • Bei „Keine“ läuft die Tabelle im normalen Textfluss, sie steht unterhalb des vorhergehenden Elements, das nachfolgende Element steht unterhalb der Tabelle. Dies ist i. d. R. die einfachste und beste Möglichkeit.
  • Mit „Linksbündig“ und „Rechtsbündig“ können Sie eine Tabelle so im Inhalt positionieren, dass sie von anderen Inhalten umflossen wird. Wichtig: Dies funktioniert natürlich nur mit Tabellen, die nicht die volle Seitenbreite haben! Berücksichtigen Sie außerdem, dass Tabellen je nach Inhalt und auf Nutzerseite eingestellter Schriftgröße (bzw. eingestelltem Zoomfaktor) in Breite und Höhe variabel sind und in responsiven Layouts auch je nach Endgerät unterschiedlich dargestellt werden können.
  • „Zentriert“ positioniert eine Tabelle horizontal mittig auf der Seite dargestellt. Dies ist ähnlich wie auf Mittenachse gesetzter Text hinsichtlich Usability der Seite problematisch und stört meist auch den optischen Gesamteindruck. Wichtig: Dies funktioniert natürlich nur mit Tabellen, die nicht die volle Seitenbreite haben! Berücksichtigen Sie außerdem, dass Tabellen je nach Inhalt und auf Nutzerseite eingestellter Schriftgröße (bzw. eingestelltem Zoomfaktor) in Breite und Höhe variabel sind und in responsiven Layouts auch je nach Endgerät unterschiedlich dargestellt werden können.
Fehlformatierungen in Tabellen beheben

Bitte keine festen Höhen und Breiten vergeben und die Tabelle nicht mit der Maus größer ziehen! Achtung: Sie können im Editor eine Tabelle mit dem Mauszeiger auf beliebige Höhen und Breiten ziehen – tun Sie das bitte nicht!

Bei einer auf diese Weise verformten Tabelle speichert der Editor die dadurch erzeugte Höhe und Breite in Form fester Pixelwerte.

Dies zerstört das Layout, besonders bei responsiven Websites, macht die Seite ggf. auf kleinen Bildschirmen bzw. Smartphones schlecht bzw. nicht mehr benutzbar und erschwert selbst im günstigsten Fall das Erfassen der Inhalte.

Ist die Tabelle auf diese Weise breiter geworden als die für den Inhalt zur Verfügung stehende Breite, verdeckt sie entweder andere Bereiche der Seite oder läuft über den Bildschirmrand hinaus.

Eine festgelegte Höhe wirkt sich noch dramatischer aus: Sie wird vom Browser unbedingt eingehalten, auch wenn für die Darstellung der Inhalte eigentlich mehr Platz benötigt würde. Damit sind u. U. Inhalte für den Nutzer nicht lesbar oder erreichbar.

Formatierungsfehler im Quelltext beheben Die einzige Möglichkeit, eine solche fehlerhafte Formatierung zu entfernen, ist die Funktion „Quelltext“: Sind für eine Tabelle eine feste Höhe (height) und Breite (width) vergeben, können Sie sie hier von Hand löschen.

Achtung: Passen Sie auf, dass sie nicht zu viel löschen!

Der bereinigte Quelltext So sieht der bereinigte Quelltext aus: In diesem Beispiel ist aus

table style="height: 324px;" width="647"

wieder nur

table

geworden.

Die bereinigte Tabelle nimmt nur den tastächlich benötigten Platz ein. Und das Ergebnis im Editor: Die Tabelle passt sich in Höhe und Breite an den Inhalt an und nimmt sich weder zu viel noch zu wenig Raum.

Zum Überblick ⇑

Inhalte in der Lightbox anzeigen

Bildanzeige in der Lightbox: Download-Link einfügen Ein Bild lässt sich mit Hilfe der Lightbox auch großformatig anzeigen. Dabei öffnet sich beim Anklicken des entsprechenden Links das Bild in einer Ebene oberhalb der Webseite, während die darunterliegende Webseite etwas abgedunkelt wird. Beim Schließen des Bildes wird die Website wieder voll sichtbar.

Sind mehrere Bilder auf diese Weise in einem Mox-Element eingebunden, können Sie wie in einer Galerie durchgeblättert werden.

Zum Einbinden eines Bildes mit der Lightbox nutzen Sie die Funktion „Link einfügen“. Wählen Sie hier die Funktion „Datei hochladen“

Der Upload-Dialog Nun öffnet sich der Upload-Dialog. Suchen Sie sich dann gewünschte Bild von Ihrer Festplatte und klicken Sie auf „Datei hochladen“.

Einstellungen für die Lightbox-Darstellung Nun können Sie unter „Titel“ einen Text zum Bild verfassen. Dieser wird als Bildunterschrift angezeigt.

Wählen Sie anschließend beim Pull-down-Menü „Lightbox“ die Angabe „Bild“ aus.

So präsentiert sich ein Bild in der Lightbox. So erscheint das Bild in der Lightbox, wenn der entsprechende Link angeklickt wird.

Hinweis: Die Lightbox-Funktion lässt sich auch zur Anzeige von Videos und Websites nutzen. Hier wählen Sie für die Verlinkung entsprechend nicht „Datei hochladen“, sondern geben den entsprechenden externen oder internen Link an.

Zum Überblick ⇑