Der Editor Abbildung 1 Der Editor

Transkript

1 Der Editor Der Editor ist das wichtigste Werkzeug für den Administrator. Er dient zur Gestaltung sämtlicher Inhalte, gleich ob Inhalte der Website, Termine, Einladungen.. Wer sich hier ein wenig einarbeitet wird nachher wenige Probleme haben, die Seite ganz nach seinen Vorstellungen zu gestalten. Abbildung 1 zeigt den Editor, wie Sie ihn auch auf der Seite zu Gesicht bekommen. Auf Abbildung 2 habe ich die einzelnen Gruppen der Bedienelemente zum besseren Verständnis markiert. Viele der Schaltflächen werden in der Regel so gut wie nie benötigt, andere dagegen häufig. Die Gestaltung des Editors orientiert sich an MS Word, so dass Ihnen viele Befehle oder Symbole vielleicht schon bekannt sind. Als Grundlegende Information ist noch anzumerken, dass man bereits eingefügte Bilder, Tabellen und Links jederzeit durch Rechtsklick auf das entsprechende Element direkt im Dokument bearbeiten kann, man muss es also für Änderungen nicht jedesmal neu einfügen. Im Folgenden wird auf die einzelnen Schaltflächen und ihre Funktion eingegangen. Abbildung 1 Der Editor Achtung: Je nach gewählter Bildschirmauflösung und je nachdem ob Sie den Editor über das Frontoder das Backend aufrufen kann die Anordnung der Symbole von der obigen Abbildung abweichen. Die Gruppierung der Schaltflächen (siehe untere Abbildung) und die Reihenfolge der Gruppen bleibt aber immer gleich.

2 Abbildung 2 Der Editor und die Gruppen der Schaltflächen Die Beschreibung der Schaltflächen pro Gruppe erfolgt jeweils von links nach rechts. Bleibt man im Editor mit dem Mauszeiger auf einer Schaltfläche stehen ohne zu klicken, wird der Name der Schaltfläche angezeigt. Gruppe 1 1. Schaltet in die Quellcode-Ansicht, nur für HTML-kundige Benutzer zu empfehlen 2. Auto-Format Source OFF: ebenfalls nur für HTML-kundige Benutzer, aktiviert bzw. deaktiviert die Formatierung des Quellcodes 3. Blöcke anzeigen: zeigt die Struktur der Block-Elemente, in der Regel nicht benötigt 4. Vorschau: Öffnet ein Vorschau-Fenster des aktuellen Inhalts

3 Gruppe 2 1. Markierten Text ausschneiden 2. Markierten Text kopieren 3. Text aus der Zwischenablage einfügen 4. Text aus Text-Datei einfügen: öffnet ein Fenster, in das man Inhalte aus.txt-dateien einfügen kann 5. Text aus MS-Word einfügen: öffnet ein Fenster, in das man Inhalte aus Word-Dokumenten einfügen kann. Hier kann gewählt werden ob die Formatierungen beibehalten werden sollen. 6. Drucken 7. Rechtschreibprüfung: Funktioniert leider nur in der englischen Version, ist daher ohne Funktion Gruppe 3 1. Rückgängig 2. Wiederherstellen 3. Text suchen 4. Text ersetzen 5. Gesamten Text (mit Bildern) markieren Gruppe 4 1. Fettschrift 2. Kursivschrift 3. Unterstreichung 4. Text durchstreichen 5. Text tiefstellen 6. Text hochstellen

4 Gruppe 5 1. Auflistung mit vorangestellten Zahlen 2. Auflistung mit vorangestellten Aufzählungszeichen 3. Texteinzug nach links verschieben 4. Texteinzug nach rechts verschieben Gruppe 6 1. Text linksbündig 2. Text zentrieren 3. Text rechtsbündig 4. Text im Blocksatz Bitte beachten: Die Elemente 1 3 der Gruppe 6 lassen sich nicht nur auf Text, sondern auch auf Bilder anwenden. Gruppe 7 1. IStyles-Editor: Öffnet ein sehr umfangreiches Tool zur Textformatierung und gestaltung. 2. Textfarbe: Öffnet eine Farbpalette zur Auswahl der Textfarbe 3. Hintergrundfarbe: Öffnet eine Farbpalette zur Auswahl der Farbe, mit der der Text hinterlegt werden soll 4. Formatierungen entfernen wichtige Schaltfläche: Standardmäßig werden beim Einfügen von Texten über die Zwischenablage (z. B. aus Wordoder PDF-Dateien) die Formatierungen (Schriftart, -größe, Fettschrift ) übernommen. Um ein einheitliches Erscheinungsbild aller Artikel auf der Seite zu gewährleisten sollte der eingefügte Text nach dem Einfügen markiert werden und anschließend diese Schaltfläche betätigt werden. Dadurch werden alle Textformatierungen entfernt und der Text wird an das Standard-Erscheinungsbild der Seite angeglichen.

5 Gruppe 8 1. Link einfügen / editieren wichtige Schaltfläche: Diese Schaltfläche wird vermutlich sehr häufig gebraucht werden, daher wird an dieser Stelle detailliert darauf eingegangen. Sie wird nicht nur zum Einfügen normaler Links verwendet, sondern auch um Dokumente (z. B. PDF-Dateien) an den Artikel anzuhängen. Unabhängig davon, wie der Link anschließend verwendet werden soll, führen Sie zuerst die folgenden Schritte aus: Geben Sie zuerst den Text ein, der verlinkt werden soll. Markieren Sie den Text anschließend und klicken Sie auf die Schaltfläche Link einfügen / editieren Diese Schritte sind für alle Links notwendig. Ab hier kommt es nun darauf an, ob der Link ein normaler Verweis auf eine andere Seite werden soll, oder ein Dateianhang.

6 a. Link auf eine andere Seite Geben Sie in dem Fenster, das sich nun öffnet, die Adresse der Zielseite ein. Wenn sich die Seite in einem neuen Fenster öffnen soll (empfehlenswert bei Links zu anderen Webseiten), klicken Sie anschließend auf den Reiter Zielseite und wählen Sie dort aus dem Menü den Punkt Neues Fenster (_blank) aus. Klicken Sie anschliessend auf OK, dann ist der Link gesetzt.

7 b. Link auf eine Datei (z. B. eine Einladung im PDF-Format als Anhang) Führen Sie die Schritte genauso wie oben aus, bis sich das Link-Tool nach Klicken auf die entsprechende Schaltfläche öffnet. Wählen Sie nun den Reiter Upload. Durch Klick auf die Schaltfläche Durchsuchen öffnet sich ein Fenster, in dem Sie die Datei auswählen können. Wählen Sie die Datei und bestätigen Sie anschliessend mit Öffnen. Sie können hier prinzipiell jede Art von Datei hochladen, egal ob PDF- Dateien, Word-Dokumente, Excel-Tabellen, etc.

8 Klicken Sie anschliessend auf die Schaltfläche Zum Server senden. Die Datei wird nun zum Server übertragen. Nach erfolgreicher Übertragung bekommen Sie eine Bestätigung angezeigt. Sollte bereits eine Datei mit gleichem Namen auf dem Server vorhanden sein bekommen Sie eine entsprechende Meldung, dass die Datei umbenannt wurde. Der Server kümmert sich automatisch darum. Wenn Sie möchten können Sie nun noch wie oben in Schritt a) beschrieben festlegen, dass die Datei in einem neuen Fenster geöffnet wird. Bestätigen Sie anschließend mit OK. Nun zurück zu den übrigen Schaltflächen der Gruppe 8: 2. Insert JLink: fügt einen Javascript-Link ein, wird in der Regel nicht benötigt 3. Link entfernen 4. Anker einfügen / editieren: Ein Anker ist ein Link innerhalb des selben Dokuments, dies wird z. B. für Inhaltsverzeichnisse verwendet, die direkt über dem Text stehen. Der Benutzer kann durch anklicken eines entsprechenden Links dann direkt zum gewünschten Textabschnitt springen. Über diese Schaltfläche setzen Sie einen Ankerpunkt und geben ihm einen entsprechenden Namen. Wenn Sie dann einen Link zu diesem Anker setzen wollen gehen Sie

9 vor wie bei einem normalen Link (vgl. oben), nur dass Sie dann im Link-Tool-Fenster direkt unter dem ersten Reiter bei Link-Typ die Option Anker auf dieser Seite wählen. Das Link- Tool listet dann alle bereits gesetzten Ankerpunkte auf. Hinweis: Wenn Sie die Links nicht wie oben beschrieben über einen bestimmten Text legen wollen sondern sie in Reinform (z.b. oder auch eingeben, wandelt der Editor sie beim speichern des Dokuments direkt in Links um, Sie müssen dann also nichts weiter tun. Gruppe 9 1. Bild einfügen / editieren wichtige Schaltfläche Durch Klick auf diese Schaltfläche öffnet sich das Bild-Tool. Es verhält sich analog zum oben bereits ausführlicher beschriebenen Link-Tool. Um ein Bild hochzuladen wählen Sie also wieder zuerst den Reiter Upload, klicken dann auf Durchsuchen, wählen das Bild aus, bestätigen mit Öffnen und klicken anschließend auf Zum Server senden. Nachdem Ihnen die erfolgreiche Übertragung des Bildes zum Server bestätigt wurde befinden Sie sich automatisch im Reiter Bild-Info. Hier haben Sie mehrere Einstellmöglichkeiten und sehen eine Vorschau des Bildes. Optional können Sie einen Alternativen Text mit einer Bildbeschreibung eingeben, dies wird insbesondere von Suchmaschinen gerne gesehen, da diese natürlich keine Bilder an sich aufnehmen können. Zudem trägt ein Alternativer Text zur barrierefreiheit der Seite bei.

10 Ein wichtiger Punkt in dieser Maske sind die Angaben für Breite und Höhe des Bildes. Die Angabe dieser Werte erfolgt in Pixeln. Wichtig: Um das Layout der Seite nicht zu verschieben sollte bei der Breite auf keinen Fall ein Wert über 700 Pixeln gewählt werden. Wenn das hochgeladene Bild über diesem Wert liegt, können Sie es durch manuelle Eingabe der Breite ganz einfach verkleinern. Der Wert für die Höhe wird automatisch korrekt angepasst. Bilder, die mit dieser Methode verkleinert werden, werden vom Editor übrigens automatisch so verlinkt, dass sich nach dem Speichern des Artikels bei Klick auf das (dann ja verkleinert dargestellte) Bild das eigentliche Bild in Originalgröße öffnet. Ein weiterer wichtiger Punkt in dieser Maske ist die Auswahlliste Ausrichtung, hier können Sie den Textumbruch festlegen. Dies ist wichtig, um Bilder im Textfluss mit unterzubringen, ohne dass diese jedes Mal in einem eigenen Absatz linksbündig auftauchen.

11 In den Feldern H- bzw. V-Abstand lässt sich der horizontale bzw. vertikale Abstand zum Text festlegen. Sie sehen alle Einstellungen, die Sie machen, direkt im Vorschaufenster. Über den Reiter Link können Sie das Bild noch mit einem zusätzlichen Link versehen, über den z. B. eine Website aufgerufen werden kann. Dies funktioniert allerdings nur bei Bildern, die in Originalgröße in den Text übernommen werden, bei verkleinerten Bildern wird der Link zur Darstellung des Bildes in Originalgröße vom Server bevorzugt behandelt. Wenn Sie alle Einstellungen wie gewünscht vorgenommen haben können Sie das Bild-Tool mit Klick auf OK schliessen. Nun wieder zurück zu den weiteren Symbolen der Gruppe 9: 2. Flash einfügen / editieren: Funktioniert wie Bild einfügen, nur für Flash-Objekte 3. Tabelle einfügen: durch Klick auf diese Schaltfläche öffnet sich das Tabellen-Tool

12 Hiermit können Sie ein leeres Tabellengerüst anlegen. Dies ist zum einen zur tabellarischen Gliederung sinnvoll, zum anderen können Sie Text und Bilder so auch mehrspaltig anlegen. Im Wesentlichen sollte sich diese Maske von selbst erklären. Sie können die Anzahl der Zeilen und der Spalten angeben. Wenn sie keinen Rahmen um Ihre Tabelle wünschen, können Sie im entsprechenden Feld eine Null eintragen. Bei der Breite der Tabelle sollten Sie eine 100 eintragen und die Maßeinheit daneben auf % setzen. Voreinstellung sind hier 200 Pixel, was in der Regel aber nicht sehr praktikabel ist. Durch Klick auf OK wird die Tabelle in Ihr Dokument eingefügt. Sie können nun neue Inhalte in den jeweiligen Tabellenfeldern erstellen oder bereits erstellte Inhalte mit der Maus in das gewünschte Tabellenfeld ziehen. 4. Vorlagen: Über diesen Button können Sie ein paar Layout-Vorlagen abrufen. Vorsicht: Der bereits erstellte Inhalt des Dokuments wird dabei gelöscht, Sie sollten diesen Schritt also wenn gewünscht als erstes ausführen. 5. Fügt eine horizontale Linie ein Gruppe Festlegung eines externen Styhlesheets, nur für fortgeschrittene Benutzer mit Erfahrungen in CSS und HTML 2. Stil: Voreinstellungen zur Formatierung des Texts 3. Format: weitere Voreinstellungen, z. B. zur Formatierung als Überschrift

13 Gruppe Schriftart 2. Schriftgröße Gruppe 12 In dieser Gruppe sind verschiedene Schaltflächen zum Erstellen von Formularen. Diese sind nur für erfahrene Benutzer notwendig, denen sich die Bedeutung der einzelnen Schaltflächen von selbst erschließen sollte. Gruppe Smiley einfügen: es öffnet sich ein Fenster mit verschiedenen Smileys 2. Sonderzeichen einfügen: es öffnet sich ein Fenster mit verschiedenen Sonderzeichen, z. B. Währungssymbole, Copyright-Zeichen, etc. 3. Editor maximieren: schaltet in den Vollbildmodus 4. Über FCKEditor: liefert Informationen zur Version des Editors 2010 MK Medienwerkstatt