Inhaltsverzeichnis

  1. Was ist das? Was nützt mir das?
  2. Grundlagen
    1. Einloggen
    2. Die Administration
    3. Ausloggen
  3. Wie kann ich ... ?
    1. Eine Seite bearbeiten
    2. Eine Seite hinzufügen
    3. Eine Seite deaktivieren/entfernen
    4. Änderungen erstmal ausprobieren
    5. Dateien (z.B. PDF-Dokumente) zum Download anbieten
  4. Inhalte bearbeiten: Der WYSIWYG-Editor
    1. Der WYSIWYG-Editor im Überblick
    2. Grundlegendes zum WYSIWYG-Editor
    3. Text formatieren
    4. Text (z.B. aus Word) einfügen
    5. Links setzen
    6. E-Mail-Adressen verlinken
    7. Bilder hochladen und zuschneiden
    8. Bilder einfügen, positionieren und entfernen
    9. Videos einfügen
    10. Tabellen
  5. Sonstiges
    1. Wie bearbeite ich den HTML-Code?
    2. Was tun, wenns brennt?

1 Was ist das? Was nützt mir das?

Mithilfe eines Redaktionssystems lassen sich die Inhalte (Text, Bilder, ...) einer Webseite verwalten. Mit CMS Made Simple (kurz: CMSms) haben wir für Sie ein Redaktionssystem ausgewählt, das ziemlich einfach und intuitiv zu bedienen ist. Doch wir wissen auch, dass viele Menschen sich selbst mit “einfachen” Dingen in der Computerwelt schwer tun. Deshalb wollen wir Ihnen mit diesem Dokument eine kleine Hilfestellung zur Einarbeitung in CMSms geben.

Für Schnell-Leser

Sobald Sie sich eingeloggt haben, können Sie die Funktionen, die CMSms bietet, gern auch selbst erkunden. Antworten auf häufige Fragen erhalten sie im Abschnitt Wie kann ich ... ?. Ebenfalls ratsam ist es, sich mit dem WYSIWYG-Editor vertraut zu machen.

Lesen Sie aber unbedingt den Abschnitt: Grundlegendes zum WYSIWYG-Editor.

Der WYSIWYG-Editor

Ein zentraler Bestandteil des Redaktionssystem ist der WYSIWYG-Editor, was ausgeschrieben "What You See Is What You Get" (Engl.: "Was du siehst ist was du bekommst") bedeutet.

In diesem Editor werden die Seiten (nahezu) so dargestellt, wie Sie einem Besucher der Webseite dann erscheinen, während Sie allerdings zugleich bearbeitet werden können. Die Bedienung ist ähnlich wie die von Microsoft® Word, sodass die meisten Benutzer intuitiv damit umgehen können.


2 Grundlagen

2.1 Einloggen

Nach Abschluss des Auftrags haben Sie von uns einen Link erhalten, über den Sie sich einloggen können. (z.B.: http://demo.kwk-webdesign.de/admin/login.php)

Es erscheint folgendes Anmeldeformular:

CMS Made Simple Administration - Anmeldung

Geben Sie hier den Benutzernamen und das Passwort ein, die Sie von uns erhalten haben.

2.2 Die Administration

Der Bereich, in den Sie nach dem Einloggen gelangen, nennt sich Administration. Von hier aus können Sie Ihre gesamte Webseite verwalten. Die Startseite der Administration sieht etwa so aus:

CMS Made Simple - Administration

Auf der Startseite sind alle Bereiche aufgeführt, die Sie verwalten können. Wie auf dem Bild auch zu erkennen ist, können alle diese Bereiche zusätzlich auch über ein sich am oberen Rand der Administration befindliches Menü aufgerufen werden.

2.3 Ausloggen

Aus Sicherheitsgründen sollten Sie sich nach jeder Benutzung des Redaktionssystems wieder ausloggen (= abmelden). Dazu rufen Sie im Menü den Bereich CMS » Abmelden auf, oder klicken den Abmelden-Button, den Sie oben rechts in der Administration finden:

Die Buttons 'Ansehen' und 'Abmelden' - Ansehen, Abmelden

Nach dem Abmelden erscheint wieder das Anmeldeformular. Sollten Sie einmal vergessen sich auszuloggen, werden Sie nach einer gewissen Zeit automatisch vom System abgemeldet.

3 Wie kann ich ... ?

3.1 Eine Seite bearbeiten

Achtung: Lesen Sie bitte zunächst den Abschnitt Änderungen erstmal ausprobieren, falls Sie vorhaben, Änderungen die über einfache Textersetzungen oder den Austausch von Bildern hinausgehen, vorzunehmen.

Seitenhierarchie

Rufen Sie den Bereich Inhalte » Seiten auf. Hier finden Sie alle Seiten und Unterseiten Ihrer Internetpräsenz in einer hierarchischen Liste aufgeführt. Suchen Sie in dieser Liste jetzt die Seite, die Sie bearbeiten möchten.

Ist die gesuchte Seite A einer anderen Seite B untergeordnet, müssen Sie die Unterseiten von B eventuell erst sichtbar machen, um A zu finden. Klicken sie dazu auf den Pfeil |> links neben B. Alternativ können Sie auch auf den Button Alle Sektionen auseinander falten, der unterhalb der Liste zu finden ist, klicken. Hierbei werden alle Unterseiten sichtbar gemacht.

Sie haben die gewünschte Seite gefunden? Gut. Gehen Sie in der Zeile ganz nach rechts. Dort finden Sie folgende Buttons (für jede Seite):

4 Buttons - Ansehen, Kopieren, Bearbeiten, Löschen

Um die Seite zu bearbeiten, klicken Sie auf den Bearbeiten-Button in der entsprechenden Zeile. Es öffnet sich eine neue Seite. Hier können Sie folgende Eingaben machen:

Inhaltstyp

Wählen Sie "Inhalt". Die anderen Optionen sind:

Inhalt
Eine normale Seite
Abschnittsüberschrift
Ein Menüpunkt ohne Inhalt, der direkt auf den ersten Unterpunkt weiterleitet
Externer Link
Ein Menüpunkt der direkt auf eine URL (z.B. http://www.beispiel.de/) weiterleitet
Interner Seitenlink
Ein Menüpunkt der direkt auf eine andere (wählbare) Seite Ihrer Internetpräsenz weiterleitet
Trenner
Ein Menüpunkt, der lediglich als Trenner für andere Menüpunkte fungiert.
Titel
Der Seitentitel (erscheint im Browser ganz oben im Fenstertitel).
Menütext
Der Text, unter dem diese Seite im öffentlichen Navigations-Menü erscheint
Übergeordnete Seite
Welcher Seite diese Unterseite in der Seitenhierarchie untergeordnet wird. Wählen Sie "keine" für eine Seite der ersten Ebene.
Im Menü anzeigen
Falls Sie dieses Häkchen deaktivieren, erscheint diese Seite nicht im öffentlichen Navigations-Menü. Sie bleibt aber dennoch aufrufbar, und kann verlinkt werden
Aktiv
Falls Sie dieses Häkchen deaktivieren, wird diese Seite nach außen hin nicht mehr aufrufbar. Damit können Sie Inhalte vorübergehend aus Ihrer Internetpräsenz entfernen, und zu einem späteren Zeitpunkt ganz einfach wieder sichtbar machen.
Der WYSIWYG-Editor

Im WYSIWIG-Feld darunter können Sie die Seite gestalten. Lesen Sie dazu den Abschnitt über den WYSIWYG-Editor

Wenn Sie fertig sind, klicken Sie ganz unten den Button Absenden (womit Änderungen gespeichert werden und Sie wieder auf die Seite-Übersicht gelangen) oder Übernehmen (womit Änderungen gespeichert werden, Sie aber auf der Bearbeitungs-Seite bleiben).


3.2 Eine Seite hinzufügen

Rufen Sie den Bereich Inhalte » Seiten auf. Klicken Sie hier auf den Button Neue Seite hinzufügen: (Bild des Buttons)

Es öffnet sich eine neue Seite. Machen Sie Ihre Eingaben wie in Eine Seite bearbeiten.

3.3 Eine Seite deaktivieren / entfernen

Eine Seite deaktivieren

Lesen Sie in Eine Seite bearbeiten, Wie Sie die Seite die Sie deaktivieren wollen finden und bearbeiten. Im Bearbeitungs-Modus deaktivieren Sie dann die Option Aktiv. Klicken Sie auf Absenden, um die Änderung zu übernehmen.

Eine Seite entfernen

Achtung: Falls Sie eine Seite entfernen, werden eventuell vorhandene Unterseiten auch gelöscht. Das Löschen einer Seite kann nicht rückgängig gemacht werden! Überlegen Sie sich deshalb gut, ob Sie eine Seite auch wirklich löschen wollen. Wir empfehlen, Seiten lediglich zu deaktivieren, anstatt Sie endgültig zu löschen!

Sie finden in der Seitenübersicht (Inhalte » Seiten) ganz rechts folgende Buttons für jede Seite:

4 Buttons - Ansehen, Kopieren, Bearbeiten, Löschen

Klicken Sie auf den Button "Löschen" (Symbol: Mülltonne), um die entsprechende Seite endgültig zu löschen. Einige Seiten (z.B. die Startseite ihrer Internetpräsenz) können nicht gelöscht werden.

3.4 Änderungen erstmal ausprobieren

Alle Änderungen, die Sie an Ihrer Webseite vornehmen, werden sofort übernommen; vorherige Versionen können nicht einfach wiederhergestellt werden. Daher gleicht das Bearbeiten von Seiten einer Operation am offenen Herzen.

Falls Sie Änderungen an Ihrer Seite vornehmen wollen, die über einfache Textersetzungen oder den Austausch von Bildern hinausgehen, sind Sie daher gut beraten, wenn Sie zunächst eine Sicherungskopie der entsprechenden Seite anlegen!

Sicherungskopie einer Seite anlegen

Sie finden in der Seitenübersicht (Inhalte » Seiten) ganz rechts folgende Buttons für jede Seite:

4 Buttons - Ansehen, Kopieren, Bearbeiten, Löschen

Klicken Sie auf den Button "Kopieren" (Symbol: Zwei Blätter) in der Zeile der entsprechenden Seite.

Es erscheint ein Formular, in dem Sie Titel und Menütext der Kopie anpassen können. Machen Sie die Sicherungskopie kenntlich, indem Sie z.B. die Zeichenkette " (Sicherung)" an sowohl Titel als auch Menütext anhängen! Klicken Sie dann auf Absenden.

Seite-Kopieren-Formular

In der Seitenübersicht erscheint jetzt auch die Kopie:

Seitenübersicht mit Sicherungskopie

Jetzt können Sie das Original nach Lust und Laune bearbeiten. Deaktivieren Sie die Sicherungskopie, damit Sie den Besuchern Ihrer Webseite verborgen bleibt!

Eine Seite aus einer Sicherungskopie wiederherstellen

  1. Bearbeiten Sie die Sicherungskopie
  2. Klicken Sie mit der Maus einmal irgendwo ins WYSIWYG-Feld
  3. Drücken Sie Strg + A. Jetzt ist der gesamte Inhalt des Feldes ausgewählt
  4. Drücken Sie Strg + C, um den ausgewählten Inhalt in die Zwischenablage zu kopieren
  5. Klicken Sie auf Abbrechen, um zurück zur Seitenübersicht zu gelangen. Bearbeiten Sie jetzt die Original-Seite
  6. Klicken Sie mit der Maus ins WYSIWYG-Feld, drücken Sie Strg + A und danach Strg + V, um den gesamten Inhalt der Original-Seite mit dem Inhalt der Zwischenablage zu ersetzen.
  7. Klicken Sie auf Absenden, um die Änderungen an der Original-Seite zu übernehmen.

3.5 Dateien (z.B. PDF-Dokumente) zum Download anbieten

Der Bereich Inhalte > Dateiverwaltung

Für das Hochladen, umbenennen, verschieben und Löschen von Dateien rufen Sie bitte den Bereich Inhalte » Dateiverwaltung auf.

Die Dateiverwaltung

Sehen Sie die bereits hochgeladenen Dateien. Diese Befinden sich allesamt im Stammverzeichnis (i.Allg. /uploads). Der Ordner /uploads/images enthält die Dateien der Bildverwaltung.

Dateien hochladen

  1. Stellen Sie sicher, dass Sie sich im gewünschten Verzeichnis befinden. Dann wählen Sie den Kartei-Reiter Hochzuladende Dateien.
  2. Wählen Sie bis zu 5 Dateien von Ihrer Festplatte, die Sie gleichzeitig hochladen wollen. Diese Dateien dürfen nicht größer als XXX MB sein. Wenn Sie größere Dateien zum Download anbieten wollen, kontaktieren Sie uns bitte.
  3. Klicken Sie auf Ok. Je nach Größe der Datei(en) dauert der Upload eine Weile.

Wenn der Upload abgeschlossen ist, wird wieder der Kartei-Reiter Dateiansicht augewählt, und Sie sehen die hochgeladenen Dateien in der Übersicht.

Hochgeladene Dateien zum Download anbieten

Lesen Sie bitte den Abschnitt Links setzen, um zu erfahren, wie sie einen externen Link auf eine hochgeladene Datei setzen können!

4 Inhalte bearbeiten: Der WYSIWYG-Editor

4.1 Der WYSIWYG-Editor im Überblick

Mithilfe des WYSIWYG-Editors können Sie die Seiten ähnlich wie in einer Textverarbeitung gestalten. Dieser Abschnitt erklärt Ihnen, welche Möglichkeiten der WYSIWYG-Editor Ihnen bietet.

Hier die Erklärungen zu den Buttons der Werkzeugleiste:

Die Toolbar von tinyMCE in der Detailansicht
  1. Standard-Hervorhebungen: Fett, Kursiv, Unterstrichen. Ausrichtung: Links, Mittig, Rechts, Blocksatz
  2. Text-Klassen: Diese Formatierungen gelten jeweils für einen ganzen Absatz. Mindestens sind hier "Überschrift 2" und "Überschrift 3" (Überschrift 1 ist meist für den Seitentitel reserviert) sowie "Absatz" verfügbar. Bei individueller Einrichtung des Redaktionssystems finden Sie hier zusätzliche Textklassen.

    Bitte berücksichtigen Sie, dass Textklassen der richtige Weg sind, um Text farblich zu gestalten, seine Größe oder Schriftart zu ändern. Somit fügt sich geschriebener Text leichter in das Plandesign der Webseite ein, und auch die Suchmaschine wird richtig bedient.

  3. Ausschneiden, Kopieren, Einfügen. Zum Einfügen lesen Sie bitte auch den Abschnitt Text (z.B. aus Word) einfügen. Falls Sie im Mozilla Firefox Probleme mit dem Ausschneiden und Kopieren haben, benutzen Sie bitte die Tastenkürzel Strg + X bzw. Strg + C.
  4. Ungeordnete Liste, Sortierte Liste. Bitte benutzen Sie diese Formatierungen anstatt manuell "1.", "2.", "3." zu schreiben, oder Listenpunkte mit Bindestrichen zu markieren. Eine Liste können Sie durch 2-faches drücken von Enter abschließen.
  5. Rückgängig, Wiederherstellen. Benutzen Sie gerne auch Strg + Z bzw. Strg + Y
  6. Text verlinken. Lesen Sie hierzu auch den Abschnitt Links setzen
  7. Bild, Sonderzeichen, Horizontale Linie einfügen. Für die Handhabung von Bilder im Text lesen Sie bitte auch die Abschnitte Bilder hochladen und zuschneiden sowie Bilder einfuegen
  8. HTML direkt bearbeiten. Nur für HTML-Erfahrene Benutzer!! Bitte lesen Sie auch den Abschnitt Wie kann ich den HTML-Code bearbeiten?
  9. Tabellen-Operationen. Bitte verweilen Sie mit dem Mauszeiger über einem Button, um dessen Funktion zu erfahren (Tooltip).

Wenn Sie mit dem Mauszeiger über einem Button verweilen, erscheint eine kurze Erklärung zu dessen Funktion (Tooltip).

4.2 Grundlegendes zum WYSIWYG-Editor

Benutzen sie zum Rückgängigmachen nicht den Browser-Back-Button, sondern die entsprechenden Schaltflächen in der WYSIWYG-Toolbar. Das Rückgängigmachen ist nur möglich, solange der WYSIWYG-Editor offen ist. Sobald Sie "Absenden" drücken, werden die Änderungen ohne die Möglichkeit des Rückgängigmachens übernommen.

Änderungen werden übernommen, sobald Sie "Absenden" oder "Übernehmen" geklickt haben und sind erst dann für die Besucher sichtbar.

Folgende Tastenkombinationen sollten Sie immer im Hinterkopf behalten:

Shift+Enter
Damit geben Sie einen einfachen Zeilenumbruch ein. (Ein normales "Enter" beginnt einen neuen Absatz)
Strg+Z
Macht Änderungen im WYSIWYG-Editor rückgängig. Funktioniert über mehrere Schritte hinweg, indem Sie mehrmals Strg+Z drücken
Strg+Y
Damit Wiederholen Sie Rückgängig gemachte Änderungen

4.3 Text formatieren

Die Toolbar von tinyMCE

Um einen Text interessanter und lesbarer zu gestalten, benutzt man verschiedenste Formatierungen, z.B. Fettdruck, Blocksatz, verschiedene Schriftgrößen und -arten, Listen, etc.

Um eine Formatierung zu aktivieren, klicken Sie auf den entsprechenden Button und geben Ihren Text ein. Um eine Formatierung für bestehenden Text zu übernehmen, wählen Sie die betreffende Passage aus und klicken Sie den gewünschten Button. Eine aktive Formatierung ist durch eine gelbe Hervorhebung des entsprechenden Buttons gekennzeichnet.

Die verfügbaren Formatierungen sind:

4.4 Text (z.B. aus Word) einfügen

Formatierungen können aus Word und anderen Programmen übernommen werden.

Word Paste Text

Um die Möglichkeiten der Suchmaschinenoptimierung voll auszuschöpfen, sollte der Text mittels zur Verfügung stehender Textklassen formatiert werden. Unformatierter Text ist für diese Vorgehensweise der bessere Starting point:

Benutzen Sie bitte den Button Text einfügen Paste Text Button

  1. Kopieren Sie den Text, den Sie einfügen wollen in die Zwischenablage
  2. Im WYSIWYG-Editor, Klicken Sie den Button Text einfügen:
  3. Es öffnet sich ein Dialogfeld "Als normalen Text einfügen". Drücken Sie Strg + V, um den kopierten Text ohne Formatierung im Dialogfeld zu sehen
  4. Klicken Sie im Dialogfeld unten links auf Einfügen, um den Text in den WYSIWYG-Editor einzufügen.
  5. Benutzen Sie den WYSIWYG-Editor, um den eingefügten Text nachträglich zu formatieren.

4.5 Links setzen

Grundsätzlich wird zwischen drei verschiedenen Arten von Links unterschieden:

  1. Links innerhalb der eigenen Homepage (also Links auf eine andere Unterseite Ihrer Internetpräsenz)
  2. Externe Links auf andere Seiten im Internet, oder auf Dateien die Besucher herunterladen können (Lesen Sie hierzu auch: Dateien Hochladen)

Interne Links setzen

  1. Markieren Sie den Text den Sie verlinken wollen
  2. Wählen Sie in der Werkzeugleiste den Button: "einen Link auf eine CMSms-Seite einfügen"
  3. Wählen Sie im Menü, das erscheint, die Seite auf welche Sie den Link setzen wollen.

Externe Links setzen

  1. Markieren Sie den Text den Sie verlinken wollen. Wählen Sie in der Werkzeugleiste den Button: "Link einfügen/verändern"
  2. Es öffnet sich das Dialogfeld "Link einfügen/bearbeiten". Geben Sie im Feld "Adresse" die Ziel-Adresse ein, auf die Sie verlinken wollen.
    • Wollen Sie auf eine von Ihnen hochgeladene Datei verlinken, klicken Sie den kleinen Button rechts neben dem Feld "Adresse" und wählen Sie im Dialogfeld die gewünschte Datei aus.
    • Wenn Sie wollen, dass sich der Link in einem neuen Fenster öffnet, wählen Sie bei "Fenster": "In neuem Fenster öffnen".
  3. Klicken Sie im Dialogfeld unten links auf "einfügen"

Einen Link bearbeiten/entfernen

4.6 E-Mail-Adressen verlinken

Um eine E-Mail-Adresse zu verlinken, geben Sie bitte folgenden Text im WYSIWYG-Editor ein (E-Mail-Adresse natürlich verändern)

{email src='info@beispiel.de'}

Mit diesem Verfahren wird die E-Mail-Adresse dem Browser verschlüsselt übermittelt. Programme, die das Internet nach E-Mail-Adressen abscannen, um Spam zu versenden, können die E-Mail-Adresse so nicht lesen. Dem Besucher Ihrer Webseite bleibt dieses Verfahren verborgen, er muss lediglich JavaScript in seinem Browser aktiviert haben.

4.7 Bilder hochladen und zuschneiden

Grundlegendes zu Bildern

Die Bildverwaltung

Die Bildverwaltung

Rufen Sie den Bereich Inhalte » Bildverwaltung auf. Es erscheinen alle Bilder, die Sie auf die Seite hochgeladen haben und im WYSIWYG-Editor einfügen können.

  1. Klicken Sie rechts neben "Datei hochladen" auf "Durchsuchen", um ein Bild von Ihrer Festplatte auszuwählen. Klicken Sie dann auf "Absenden", um das ausgewählte Bild hochzuladen. Das Hochladen kann je nach Bildgröße eine Weile dauern. Danach erscheint das Bild in der Bildverwaltung im derzeit ausgewählten Verzeichnis!
  2. Legen Sie, wenn benötigt, Verzeichnisse an, indem Sie den Namen des Verzeichnisses neben "Neuen Ordner anlegen" eingeben und auf "Anlegen" klicken. Sie können in Verzeichnisse wechseln, indem Sie darauf klicken. Ein Klick auf das Verzeichnis ".." lässt Sie wieder zurück ins übergeordnete Verzeichnis wechseln.
  3. Klicken Sie auf die Mülltonne unter einem Ordner oder Bild, um diesen/dieses zu löschen. Hinweis: Beim Löschen eines Ordners werden alle darin enthaltenen Bilder ebenfalls gelöscht!
  4. Klicken Sie auf den Stift unter einem Bild, um dieses Bild zuzuschneiden / zu bearbeiten.

Bilder bearbeiten

Die Bildverwaltung: Ein Bild bearbeiten

Nach einem Klick auf den Stift unter einem Bild öffnet sich das Dialogfeld "Bild bearbeiten". Hier können Sie Bilder zuschneiden ("Crop"), skalieren ("Resize") und drehen ("Rotate").

Die wohl häufigst benötigte Aufgabe ist das Skalieren, d.h. verkleinern oder vergrößern des Bildes:

  1. Wählen Sie in der Werkzeugleiste links "Resize"
  2. Geben Sie oben die gewünschte Größe des Bildes in Pixeln ein. Voreingestellt ist die aktuelle Größe. Ist das Kästchen "Constrain Proportions" aktiv, wird das Seitenverhältnis beibehalten.

    Alternativ können Sie die Anfasspunkte an den Bildrändern bei gedrückter Maustaste verschieben, um die Größe zu verändern

  3. Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie oben Links auf den grünen Haken, um die Änderungen zu übernehmen. Um die Änderungen zu verwerfen, Klicken Sie auf das rote Abbrechen-Zeichen.
  4. Um das Bild endgültig zu speichern, und zur Bildverwaltung zurückzukehren, Klicken Sie in der Werkzeugleiste auf "Save" (Speichern)

4.8 Bilder einfügen, positionieren und entfernen

Bilder einfügen

Wenn Sie ein Bild hochgeladen (und evtl. zugeschnitten) haben, können Sie es im WYSIWYG-Editor auf den Seiten Ihrer Homepage einfügen.

Positionieren Sie den Cursor zunächst im Text an der Stelle, wo das Bild erscheinen soll. Klicken Sie dann in der Werkzeugleiste den Button "Bild einfügen/verändern"
Es erscheint folgendes Dialogfeld:

Der Dialog 'Bild einfügen/verändern'
Adresse
Wählen Sie eine hochgeladene Bilddatei aus, indem Sie auf den Button rechts neben dem Adressfeld klicken. Alternativ können sie auch die URL einer im Internet existierenden Bilddatei eingeben (z.B. http://www.google.de/intl/de_de/images/logo.gif). Wichtig: Stellen Sie in jedem Fall sicher, dass Sie die Rechte am Bild für die Nutzung auf Ihrer Homepage besitzen!
Alternativtext
Geben Sie hier einen kurzen, das Bild beschreibenden Text ein, für den Fall dass das Bild nicht korrekt geladen werden kann, oder z.B. ein Blinder Ihre Webseite mithilfe eines Screenreaders betrachtet.
Ausrichtung
Wählen Sie hier links oder rechts, um das Bild rechts bzw. links vom nachfolgenden Text umfließen zu lassen.
Ausmaße
Diese Felder werden bei der Auswahl einer Bilddatei automatisch bestimmt. Wichtig: Um die Abmessungen eines Bildes anzupassen, benutzen Sie unbedingt die Funktionen zuschneiden und skalieren in der Bildverwaltung. Wenn Sie die Ausmaße im WYSIWYG-Editor anpassen, bleibt die Bilddatei unverändert, und die Qualität der Darstellung im Browser wird z.T. extrem vermindert!
Rahmen
Hier können Sie eine Rahmenstärke (in Pixeln) für das Bild eingeben. Wenn Sie nichts oder 0 eingeben, erscheint kein Rahmen.
Abstände
Hier können Sie festlegen, wieviel Platz um das Bild herum freigehalten werden soll. Das ist z.B. nützlich wenn Sie das Bild von Text umfließen lassen. Werte in Pixeln.

Ein eingefügtes Bild können Sie im WYSIWYG-Editor auswählen, indem Sie es anklicken. Sie können den Dialog "Bild einfügen/verändern" für ein bereits eingefügtes Bild aufrufen, indem Sie es auswählen und dann den Button "Bild einfügen/verändern" klicken.

Bilder positionieren

Wählen Sie das Bild aus indem Sie es anklicken. Es erscheint ein Auswahlrahmen um das Bild:

Sie können das Bild im Text positionieren, indem Sie es mit gedrückter Maustaste verschieben. Der Text-Cursor zeigt Ihnen, an welche Stelle Sie das Bild gerade ziehen.

Um einen Absatz um ein Bild herumfließen zu lassen, müssen Sie das Bild direkt vor dem Absatz einfügen (siehe Grafik) und bei der Bild-Eigenschaft "Ausrichtung" links oder rechts gewählt haben.

Wichtig: Sie können das Bild zwar mithilfe der Anfasspunkte (oder auch durch verändern der Abmessungen in den Bild-Eigenschaften) vergrößern und verkleinern. Allerdings ist für die Darstellungsqualität auf der Webseite empfehlenswert, Bildgrößen in der Bildverwaltung, oder noch besser, bereits vor dem Upload, zu ändern.

Bilder entfernen

Wählen Sie das Bild aus indem Sie es anklicken. Es erscheint ein Auswahlrahmen um das Bild. Drücken Sie jetzt auf der Tastatur die Taste "entfernen" (Entf), um das Bild zu löschen.

4.9 Videos einfügen

Sie können ein auf Youtube hochgeladenes Video ganz einfach einbinden, indem Sie folgende Zeile im WYSIWYG-Editor einfügen:

{youtube id='eFQxRd0isAQ'}

Statt eFQxRd0isAQ geben Sie bitte die Video-ID des gewünschten Videos an. Die Video-ID finden Sie in der Internet-Adresse des Videos (zwischen "v=" und "&")

http://www.youtube.com/watch?v=eFQxRd0isAQ&feature=related

4.10 Tabellen

Die dritte Zeile der Werkzeugleiste enthält Werkzeuge zur Erstellung und Bearbeitung von Tabellen. Bei den meisten Werkzeugen müssen Sie eine Tabelle/Zeile/Spalte/Zelle ausgewählt haben (indem sie den Text-Cursor darin platzieren), damit der Button verfügbar ist.

Von Links nach Rechts:

Tabelle erstellen/bearbeiten
Hiermit fügen Sie eine Tabelle an der aktuellen Cursor-Position ein.
Wenn Sie eine bestehende Tabelle durch Mausklick ausgewählt haben, ruft dieser Button den Dialog "Tabelle einfügen/bearbeiten" auf. Der Dialog wird weiter unten erklärt.
Eigenschaften der Zeile
Es öffnet sich ein Dialogfeld. Relevante Einstellungen sind: Höhe, sowie in der Registerkarte "Erweitert": Hintergrundbild, Hintergrundfarbe
Eigenschaften der Zelle
Es öffnet sich ein Dialogfeld. Relevante Einstellungen sind: Breite (wirkt sich auf die gesamte Spalte aus), sowie in der Registerkarte "Erweitert": Hintergrundbild, Hintergrundfarbe, Rahmenfarbe
Zeile oberhalb/unterhalb einfügen; entfernen
Fügt eine neue Zeile oberhalb bzw. unterhalb der aktuell ausgewählten Zeile ein; entfernt die aktuelle Zeile mit allen Spalten
Spalte links/rechts einfügen; entfernen
Fügt eine neue Spalte links bzw. rechts der aktuelle Spalte ein; entfernt die akutelle Spalte mit allen Zellen
Vereinte Zellen Trennen
Wenn Sie zwei oder mehr Zellen mit dem "Zellen vereinen"-Werkzeug verbunden haben; können Sie das hiermit Rückgängig machen
Zellen vereinen
Wählen Sie zwei oder mehr Zellen in einer Zeile oder Spalte aus, indem sie in eine Zelle klicken und die Maustaste erst über der letzen gewünschten Zelle wieder loslassen. Klicken Sie jetzt diesen Button, um diese Zellen samt Inhalten zu einer einzigen zusammenzufassen

Der Dialog "Tabelle einfügen/verändern"

Registerkarte Allgemein:

Spalten, Zeilen
Kann nur beim Erstellen der Tabelle festgelegt werden. Benutzen Sie die Werkzeuge Zeile/Spalte einfügen/entfernen der Werkzeugleiste, um nachträglich Änderungen vorzunehmen.
Abstand innerhalb der Zellen
Legt den freien Platz zwischen Zellenwand und Inhalt einer Zelle fest
Zellenabstand
Abstand zwischen den Zellenwänden jeder Zelle.
Ausrichtung
Ob die Tabelle auf der Seite links, rechts oder mittig erscheinen soll.
Rahmen
Die Rahmenstärke in Pixeln. Die Rahmenfarbe kann auf der Registerkarte "erweitert" gewählt werden.
Breite, Höhe
Falls hier nichts angegebn wird, wird die Tabellengröße automatisch errechnet. Es ist sinnvoll, keine größere Breite als die der gesamten Seite natürlich abzüglich der Innenabstände zu wählen.
CSS-Klasse
Wählen Sie unbestimmt, falls wir für Ihre individuelle, von KWK webdesign angefertigte Designvorlage nichts anderes empfohlen haben.
Beschriftung
Fügt der Tabelle eine erste Zeile hinzu, die als Tabellen-Überschrift fungiert.

Registerkarte Erweitert:

ID
Nicht relevant
Zusammenfassung
Beschreiben Sie hier den Inhalt der Tabelle in wenigen Worten
Format
Wird automatisch gesetzt
Sprachcode
Nicht relevant
Hintergrundbild
Wählen Sie ein Hintergrundbild aus den hochgeladenen Bildern der Bildverwaltung
Rahmen
Betrifft die 4 Außenseiten der Tabelle
Gitter
Betrifft die Wände zwischen den Zellen
Schriftrichtung
Nicht relevant
Rahmenfarbe
Wählen Sie eine Farbe für Rahmen und Gitter der Tabelle
Hintergrundfarbe
Wählen Sie alternativ zu einem Hintergrundbild eine Hintergrundfarbe

Achtung: Es kann sein, dass bestimmte Formatierungen nicht übernommen werden, wenn im globalen Website-Design z.B. andere Farben festgelegt sind!

5 Sonstiges

5.1 Wie kann ich den HTML-Code bearbeiten?

Wenn Sie Erfahrungen mit HTML haben, können Sie den HTML-Code der Seite direkt bearbeiten.

Klicken Sie auf den Button "HTML bearbeiten" , um den HTML-Code anzuzeigen und zu bearbeiten.

5.2 Was tun, wenns brennt?

Damit es erst gar nicht zu Problemen kommt, nutzen Sie bitte die Möglichkeit, Sicherungskopien Ihrer Seiten azulegen, bevor Sie Sie bearbeiten.

Wenn es dennoch ein Problem gibt, haben Sie als unser Webhosting-Kunde anspruch auf gewisse Supportleistungen. Auch bei kleinen Änderungen, die Sie sich selbst nicht zutrauen, helfen wir gerne weiter.

Kontaktieren Sie uns einfach unter: info@kwk-webdesign.de