• Dokumentation
• FAQ
• Kurse und Schulungen
• Nützliche Programme
• Alltägliche Aufgaben
• Dokumente erstellen
• Dokumente bearbeiten
• Flexmodule
• Umgang mit der MAM
• Rechte Spalte
• Seiten organisieren
• Anleitungen für Admins
• Imperia Extras
• Betrieb und Nutzung

A – Z | Suche | Kontakt

Um eine Seite zu bearbeiten, rufen Sie diese einfach in Ihrem Browser auf und klicken per TCE-Leiste auf Edit "<Dokumentnamen>":

Diese Vorgehensweise werden Sie in meisten Fällen wählen, wenn Sie die Webseite vor sich sehen. Sie können das Dokument auch über den Dokumentenmanager (im Imperia-Menü unter Dokumente) suchen und reimportieren. Das ist notwendig, wenn es sich beispielweise um keine HTML-Seite handelt. Gelöschte Dokumente lassen sich auch über das Archiv importieren. 

Sie gelangen dann meistens in den Dokumenten-Workflow. Im Gegensatz zu einem Neuen Dokument sind hier fast alle Optionen 'eingeklappt'. Wir wollen damit die Übersicht verbessern und Ihnen unnötiges Scrollen ersparen. Natürlich lassen sich alle Optionen wie z. B. die Kopfangaben wieder ausklappen. Entweder indem Sie die roten Links ganz oben/unten benutzen, oder indem Sie jeweils auf das Käschen hinter "<Beschreibende Worte> bearbeiten" klicken. Was dort eingetragen werden soll, erfahren Sie auf dieser Seite. Hier widmen wir uns allein der Texteingabe.

Diese Seite ist gegliedert in die Teilbereiche:

• Überschrift
• Seiteninterne Navi
• Texteditoren
  • CK-Editor, IWE2, Wordmodul
    • (Neben anderen Unterpunkten) Links und Tabellen
  • Textarea mit reinem HTML
  • Textarea nicht änderbar
  • Kein fester Editor

Dieser Text soll auch Einsteigern das Arbeiten mit Imperia ermöglichen. Sollten Sie ein konkretes Problem haben, wird dieses evtl bereits in der FAQ geklärt.

Überschrift

Die Überschrift wird separat in ein Textfeld eingetragen. Sie wird später durch eine gestrichelte Linie vom restlichen Text getrennt (wie hier auf dieser Seite "Dokumente bearbeiten")
Ihr Erscheinungsbild muss (und soll) nicht extra formatiert werden.
Extrem lange Überschriften führen zu einem hässlichen Gesamtbild und sollten vermieden werden. Außerdem ist es ratsam, die Überschrift in logischen Zusammenhang mit dem Navigationspunkt zu bringen, der die Seite aufruft.

Seiteninterne Navi

Mit der seiteninternen Navi ermöglichen Sie ein schnelles Navigieren innerhalb größerer Seiten. Wählen Sie einfach bei Anzahl seiteninterner Navi-Elemente (Anker): Die Anzahl der gewünschten Unterpunkte. Nach einem Template-Reload stehen Ihnen dann entsprechend viele Felder zur Verfügung, um die seiteninterne Navi zu erzeugen.

AnkerText sollte eine kurze Beschreibung des Ankers enthalten.

Ankername # den Namen des Ankers.

Anker können Sie einfach mit dem Editor einfügen. Den Namen des Ankers erfahren Sie im nachhinein, indem Sie rechts auf den verankerten Text klicken und "Anker-Eigenschaften" wählen.

Der HTML-Code für einen Anker lautet <a name="Ankername">Ankertext</a>

Wenn Sie die interne Navi so angelegt haben, erscheint diese zwischen Überschrift und Seiteninhalt rechtsbündig.

Die Texteditoren

Zum Bearbeiten des Seiteninhalts bieten wir mehrere Möglichkeiten an. Welche man wählt, ist dabei meistens abhängig von Ihren HTML-Kenntnissen und gewünschten Resultaten. Während sich zum schnellen Arbeiten der grafische Editor (CK, iWE2, Wordmoul) eignet, ist eine übersichtliche Bearbeitung des Quelltextes mit der HTML-Textarea möglich.

Zwischen den Modulen kann ganz oben im Template unterhalb des Schreibtischtitels anhand eines Drop-Down-Menüs der Editor gewählt werden. Welchen Editor Sie wählen, wird im Dokument gespeichert und beim nächsten Bearbeiten der Seite wieder abgerufen.

Bitte achten Sie immer darauf, gültiges HTML zu benutzen. Dies bezieht sich nicht nur auf die HTML-Textarea! In den Wordmodulen bedeutet das z. B., dass Sie Listen nicht durch Zeilenumbrüche und Einrücken per Leerzeichen erstellen sollten. Nutzen Sie stattdessen die bereitgestellten Funktionen der Formatierungsleiste.

Gültiges HTML hat mehrere Vorteile

• Die Barrierefreiheit ist gewährleistet. ( → Mehr zur Barrierefreiheit lesen →)
• Die Darstellung ist bei anderen Einstellungen (Bildschirmeinstellungen, Betriebssystem, Browser) konsistenter
• Ihr Google-Ranking ist höher

CK, iWE2, Wordmodul

Als Standardtexteditor bieten wir eine modifizierte Form des CK-Editors an. Dieser ermöglicht es Ihnen (ähnlich wie z. B. in Word) den Text fast so zu formatieren, wie er später auch auf der Seite ausgegeben wird.
Die Darstellung im Editor entspricht aus verschiedenen Gründen nicht exakt der der späteren Seite. Es lohnt sich also in jedem Fall, vor dem Speichern des Dokumentes die Vorschau zu betrachten.

Wie bereits erwähnt, sollten Sie zum Formatieren des Textes die Formatierungsleiste nutzen. Diese finden Sie immer direkt oberhalb des Textfeldes.

Um Ihnen die Übersicht im Quellcode zu erleichtern, werden auch die entsprechenden HTML-Codes gelistet.
Hinweis: Die Symbole können sich mit neueren Versionen des Editors leicht verändern. Sofern technisch möglich und sinnvoll werden wir aber die Funktionalitäten erhalten.

Symbol	Bewirkt auf der Seite	Bewirkt im Quellcode
	fett schreiben: Beispiel am Text	fett schreiben: <strong>Beispiel am Text</strong>
	kursiv schreiben: Beispiel am Text	kursiv schreiben: <em>Beispiel am Text</em>
	unterstreichen: Beispiel am Text	unterstreichen: <u>Beispiel am Text</u>
	linksbündig schreiben	Linksbündig ist die automatische Einstellung
	zentriert schreiben	<p style="text-align: center;">zentriert schreiben</p>
	rechtsbündig schreiben	<p style="text-align: right;">rechtsbündig schreiben</p>
	Blocksatz verwenden	<p style="text-align: center;">Blocksatz verwenden</p>
	Tiefgestellt: Beispiel am Text	Tiefgestellt: <sub>Beispiel am Text</sub>
	Hochgestellt: Beispiel am Text	Hochgestellt: <sup>Beispiel am Text</sup>
	Nummerierte Liste erzeugen: Beispiel am Text	<ol> <li>Beispiel</li> <li>am</li> <li>Text</li> </ol>
	Unnummerierte Liste erzeugen: Beispiel am Text	<ul> <li>Beispiel</li> <li>am</li> <li>Text</li> </ul>
	Text zurückrücken (falls vorher eingerückt)	Tags entfernen
	Text einrücken Beispiel am Text	<p style="margin-left: 40px;">Beispiel am Text</p>
Stil	ermöglicht es, einen grauen Kasten einzubinden, schreibmaschienen Text (<tt>) und den Text für Sprachprogramme aufzuarbeiten. Näheres dazu weiter unten.	<div style="background-color: rgb(239, 239, 239);">Grauer Kasten</div> Sprachwechsel auf <span lang="en">English</span>
Format	Format des Textes. Hier können verschiedene Überschriften gewählt werden. Außerdem vorformatierter (<pre>) und normaler Text.	Überschriften werden mit <h#> eingeleitet, wobei # für eine Zahl zwischen 2 und 5 steht. (Also Überschrift 2 ⇔ <h2>Überschrift</h2>
	Div-Container erzeugen für Javascript oder CSS	<div class="" id=""></div>
	Zitatblock erzeugen	<blockquote></blockquote>
	Alles markieren	entspricht Strg+a
	Text aus Word einfügen (mehr dazu unten)	-
	Letzten Schritt rückgängig machen	entspricht Strg+z
	Schritt wiederholen, (falls rückgängig gemacht)	entspricht Strg+y
	Im Text suchen	entspricht Strg+f
	Text suchen und ersetzen	-
	alle Formatierungen entfernen	entfernen aller Formatierungstags
	Link einfügen (mehr dazu unten)	<a href="http://...">Linktext</a> bzw <a href="#Ankername">Linktext</a>
	Link entfernen	entfernen der <a>-Tags
	Anker setzen (wird im Editor mit einem Anker-Symbol markiert:)	<a name="Ankername">Ankertext</a>
	Bild aus der MAM einfügen (näheres hier)	Bilder werden mit <img src="quelle"> eingebunden
	Tabelle anlegen. (mehr dazu unten)	Mehr zu Tabellen erfahren Sie bei SelfHTML
	Trennstrich einfügen	Ein Trennstrich wird mit einem <hr> eingefügt
	Icon einfügen	Icons sind Bilder, die schnell eingebunden werden können (also mit <img src="...">)
	Sonderzeichen einfügen	alle angebotenen Sonderzeichen und mehr finden Sie hier
	ganze Breite als Textfeld nutzen	-
	html-Blöcke anzeigen	-
	Quellcode bearbeiten.	-

 

Die 3. Zeile ermöglicht es Ihnen, Formularelemente einzubinden. 

Zu einigen Einträgen der Formatierungsleiste ist noch etwas mehr zu sagen:

Stil (Drop-Down-Menu)

Durch den Gebrauch der Sprachwechsel ermöglichen Sie es sehbehinderten Menschen, die Seite von einem Programm sinnvoll vorgelesen zu lassen. (s. Vorteile)

aus MS-Word einfügen

Diese Anwendung ist dafür gedacht, Inhalte einzubinden, die eine externe Quelle bereitstellt. Aber selbst, wenn Sie aus der Webseite Text einfügen, dann versucht der Editor den Text so einzubinden, dass er genauso aussieht wie auf der Textseite. Hört sich erst einmal gut an, bedeutet aber, dass Sie in Ihrem fertigen Dokument plötzlich andere Schriftarten und Schriftgrößen haben, die Sie nicht so ohne weiteres ändern können. Der Weg über den Quelltext ist sehr mühsam und der Weg über das Symbol T_x ist zwar einfach, aber er beseitigt im markierten Bereich alle Formatierungen, somit auch die von Ihnen gewünschten. Generell sollten Sie die Formatierung Ihrer Seite immer direkt in Imperia vornehmen. Das erspart Ihnen doppelte Arbeit.

Link einfügen

Hier stehen Ihnen eine Vielzahl von Möglichkeiten offen, den Link mit Zusatzinformationen oder Einstellungen zu versehen. Auch hier gelten die gleichen Vorteile wie oben.

Ein Link wird im Editor immer rot dargestellt. Man kann ihn mit einem Rechtsklick leicht bearbeiten.
Im ersten Reiter des Link-Fensters gibt es das zentrale Drop-Down-Menu "Link-Typ". Hier entscheidet sich, welche Art von Verlinkung stattfinden soll. Entsprechend der Wahl sind dann verschiedene Einstellungen möglich.

Der Reiter "Erweitert" bietet Ihnen Möglichkeiten, den Link näher zu formatieren. In der Regel werden Sie diese nicht brauchen. 

Link-Typ: URL

Dieser Linktyp realisiert einen normalen Link auf eine andere (externe) Seite. (Für Hintergrundwissen und mehr Informationen empfiehlt sich SelfHTML).

In der Regel werden Sie einfach in das Textfeld URL die gewünschte Zielseite relativ oder absolut eintragen und mit OK bestätigen. Es stehen Ihnen aber noch einige andere Einstellungen zur Verfügung.
Im nebenstehenden Drop-Down-Menu können Sie das Protokoll der Seite ändern. Das Protokoll wird immer vor die URL gestellt. Ein Script entfernt doppelte Protokolleinträge und sorgt so für die Grundlage eines validen Links.

• http:// steht für Hypertext Transfer Protocol und ist das Standardprotokoll zum Übermitteln von Webseiten.
• https:// steht für Hypertext Transfer Protocol Secure und ermöglicht ein verschlüsseltes Senden von Daten.
• ftp:// steht für File Transfer Protocol. Hiermit lassen sich (z. B. auf einen eigenen Server) Daten übertragen.
• <anderes> lässt Sie ein beliebiges Protokoll frei von Hand eingeben oder kein Protokoll, dann wird das der umgebenden Seite genommen. Das sollte bei relativen Links dort stehen. Imperia versteht auch die HTML5-Schreibweise von Links, die mit // beginnen.

Haben Sie keinen Text markiert, so erscheint das Eingabefeld "Link Text". Hier können Sie den zu verlinkenden Text eingeben.

Unterhalb der Eingabefelder befindet sich der Knopf "MAM durchsuchen". Wenn Sie Inhalte der MAM, wie z. B. Bilder oder PDFs verlinken möchten, ist dies der richtige Knopf für Sie.

Im Reiter "Zielseite" können Sie außerdem das Fenster bestimmen, in welchem der Link geöffnet werden soll. Standardmäßig ist dies das gleiche Fenster.
Um den Link in einem neuen Fenster öffnen zu lassen, wählen Sie im Drop-Down-Menu einfach "Neues Fenster (_blank)" aus
Eine ausführliche Beschreibung der anderen Optionen erhalten Sie hier.

Link-Typ: Anker

Dieser Linktyp erlaubt es dem Benutzer, innerhalb der Seite zu einem sogenannten "Anker" zu springen.

Hier müssen Sie einfach aus den angebotenen Ankern den entsprechenden auswählen. Für jeden Anker, den Sie in der Seite gesetzt haben, wird automatisch eine Auswahloption erstellt.

Sonderfall: nach oben Springen
Jede Seite besitzt automatisch einen Anker am Seitenanfang. Ein "nach oben"-Link am Ende der Seite erhalten Sie, wenn Sie bei den Fußangaben (ganz unten) an entsprechender Stelle ein Häkchen setzen. Dieser ist aber nicht in der Liste der Anker geführt. Einen zusätzlichen "nach oben"-Link können Sie einfügen, indem Sie einen normalen Link erstellen, beim Protokolltyp <anderes> auswählen und in der URL #up eingeben.

Link-Typ: E-Mail

Dieser Linktyp realisiert einen "mail to"-Link. Beim Klicken auf diesen wird der Standard-E-Mail-Client des Besuchers geöffnet und er kann eine E-Mail verschicken.

Reiter: Link-Info

E-Mail Adresse	ist ein Pflichtfeld. Hier sollten Sie eine E-Mail-Adresse eingeben
Betreffzeile	Hier können Sie eine Betreffzeile festlegen, die der Besucher dann als Textvorschlag in seine Mail eingesetzt bekommt
Nachrichtentext	Hier können Sie ein Text festlegen, welchen der Besucher dann als Textvorschlag in seine Mail eingesetzt bekommt

Tabellen erstellen und bearbeiten

Die Einstellungen der Tabelle sind größtenteils selbsterklärend. Anschaulich hier eine Tabelle mit folgenden Eigenschaften:

Header: "Both" - Rahmen: 1 - Überschrift: "Überschrift"

Überschrift

Feld 1/1	Feld 1/2
Feld 2/1	Feld 2/2
Feld 3/1	Feld 3/2

 Header sind also automatisch fett geschreiben. Mit "Ausrichtung" wird die Tabelle vom Text  umflossen (oder eben nicht).
 Breiten- und Höheneinstellungen können im nachhinein noch einfach durch Ziehen der Tabelle angepasst werden. Falls Sie ein flexibles Layout haben, sollten Sie die Breite der Tabelle mit Prozentwerten angeben.
 Eine Inhaltsübersicht der Tabelle sollten Sie für Screen-Reader einfügen (s. Vorteile)

Hinweis: Die Tabelle sieht hier  etwas anders aus, als bei Ihnen, da das URZ das Flex-CSS benutzt.
Hier gibt es die Wahl zwischen Daten-Tabellen und "sauberen" Tabellen. 
Sollten Sie auch bereits das Flex-CSS verwenden, können Sie das hier angezeigte Daten-Layout aktivieren, indem Sie bei den Einstellungen der Tabelle im Reiter "Erweitert" beim Wert Stylesheet Klasse table_data eintragen.

Textarea mit reinem HTML

Dieser Editor ermöglicht Ihnen, ohne Umschweife den HTML-Code der Seite zu bearbeiten. Hier können Sie (nötiges Wissen vorausgesetzt) die Seite beliebig gestalten. Vor allem wenn spezielle Sonderzeichen oder eine komplexe Formatierung gewünscht sind, kann man hier direkt 'am Herzen der Seite' herumbasteln.

Welche HTML-Tags automatisch vom CK-Editor gesetzt werden, steht oben. Diese erfüllen auch die oben erwähnten Vorteile.

Textarea nicht änderbar

Ruft man einen selbst geschrieben HTML-Code mit einem Wordmodul auf, so wird er von diesem umformatiert und "aufgeräumt". In der Regel hat das durchaus Vorteile, was die Übersicht und die HTML-Validität betrifft. Manchmal führt das aber auch dazu, dass der HTML-Code danach nicht mehr das macht, was man von ihm fordert.
Manchmal möchte man auch nur Leuten, die HTML verstehen (und damit auch verstehen, was tatsächlich auf dieser Seite passiert) ermöglichen, die Seite zu bearbeiten.
Für diese Fälle gibt es die Option "Textarea nicht änderbar".

Achtung: "nicht änderbar" heißt tatsächlich "nicht änderbar". Ist dieser Modus einmal gesetzt, so kann er nur von uns wieder deaktiviert werden. Bitte haben Sie Verständnis dafür, dass wir keines haben, wenn Sie uns mehrmals um das Zurücksetzen dieser Einstellung bitten.

Kein fester Editor

Falls man nur mit flexiblen Flexmodulen arbeiten will, dann kann man den starren Editor ganz ausblenden. Bitte beachten Sie, dass Text, der sich in diesem Feld befindet, weiterhin auf der Webseite angezeigt wird. Da dies zu Irritationen führen kann, sollte der Editor vor dem Ausblenden, geleert sein. Mit Hilfe der Flexmodule kann man bei Bedarf einen flexiblen (verschiebbaren) Word-Editor auswählen.