Schulung Open CMS Editor

Transkript

1 Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie Ihre Institut/Einrichtungsseiten in OpenCMS pflegen möchten, wird für Sie ein Projekt (Verzeichnis) angelegt und für Sie ein Account eingerichtet. Dieses Verzeichnis enthält bereits einige Verzeichnisse. Anpassen Portalname, Globale Navigation und Keywords (Deutsch u. Englisch) Im Verzeichnis /elements/_config.html Folgende Verzeichnisse AUF KEINEN FALL löschen: artikel, css, elements, img, kontakt, links, sitemap Allgemeine Vorgaben zur Datei- und Verzeichnisbenennung o Jedes Verzeichnis sollte eine index.html Datei enthalten. o Alle Datei- und Verzeichnisnamen sollten komplett kleingeschrieben werden. Die Verwendung von Leerzeichen und Sonderzeichen in Dateinamen sollte soweit wie möglich vermieden werden. Längere Namen können mittels '_' strukturiert werden. Verzeichnisstruktur Die Verzeichnisstruktur soll die hierarchische Struktur der Homepage wiederspiegeln. Unterpunkte jeweils in ein extra Verzeichnis. Navigation Die Verzeichnisse, die hierarchisch angelegt werden, können über das Setzen des Häckchens automatisch in die Navigation aufgenommen werden. (linksklick auf das Verzeichnissymbol - Eigenschaft - In Navigation mit aufnehmen ) Navigationstext (kurz und knapp) eingeben nicht vergessen. Seitenüberschrift Linksklick auf Dateiicon/Verzeichnisicon Eigenschaften Titel Anpassen der Navigationspunkte in der linken Spalte Im Verzeichnis elements Datei columnleft.html

2 Möglichkeiten in OpenCMS Seiten zu erstellen: Seite mit Freitext Strukturierter Inhalt wie z.b. o FAQ o Stellenausschreibung o Linklisteneintrag 1. Seite mit Freitext (Neu Seite mit Freitext) Eine Funktion von zentraler Bedeutung für jedes Web-CMS ist die Pflege von Text. Hier setzt OpenCMS auf das OpenSource Projekt " FCKEditor". Die Bearbeitung der Seiteninhalte ist mit OpenCms einfach: Durch Verwendung des integrierten WYSIWYG-Editors ähnelt die Bearbeitung von Inhalten populären Office-Anwendungen. Dieser WYSIWYG-Editor funktioniert auf den aktuellen Browsern zuverlässig und unterstützt alle üblichen Funktionen wie Textformatierung, Tabellen, Aufzählungen, Bilder, etc.. Mit Hilfe des WYSIWYG-Editors (WYSIWYG ist ein Akronym für "What You See Is What You Get", d.h. wenn Sie Ihre Texte und Bilder etc. einfügen, sehen Sie diese schon im Editor ungefähr in der Formatierung, wie sie später auch im Browser erscheinen) können Seiten mit "unstrukturiertem Inhalt" und komplexem Layout erzeugt werden. Text einfügen aus Textdatei Öffnen Sie Ihre eigene index.html Datei klick auf den Icon ganz links Seite bearbeiten (oder Sie klicken auf index.html und danach auf die Zielscheibe im Inhaltsbereich) dann Button aus Textdatei einfügen anklicken und Text einfügen (Strg+V) diese Methode ist zu bevorzugen

3 Text einfügen aus Word Öffnen Sie Ihre eigene index.html Datei klick auf den Icon ganz links Seite bearbeiten dann Button aus MS-Word einfügen anklicken und Text einfügen (Strg+V) Button Code bereinigen anklicken (entfernt Word spezifische Formatierungen, hält den Code sauber) Text formatieren Überschriften Text markieren Format auswählen

4 Hyperlinks Link setzen Wort markieren und auf Link Button klicken Für Seiten, die in Ihrem Projekt liegen, den Button Server durchsuchen verwenden Bei Zielseite nichts auswählen (andere Auswahl produziert unvaliden Code) Link als externer Link kennzeichnen Link markieren und im Stil Menü Externer Link auswählen Die Kennzeichnung für externe Links erscheint dann automatisch. (Zum entfernen der Kennzeichnung nochmal Externer Link auswählen) Link als interner Link kennzeichnen Link markieren und im Stil Menü Interner Link auswählen Link als pdf Link kennzeichnen

5 Bilder Für die Verwaltung von Bildern oder Download-Dateien stehen Galerien bereit. Die Bilder-Galerie bietet z.b. eine automatisches Thumbnail-Ansicht Bitte legen Sie für jedes Projekt eine eigene Bildergalerie an und verwenden Sie nicht die Galerie aus anderen Projekten auch wenn Sie diese in der Auswahl sehen. Ordner als Bildergalerie anlegen NEU Erweiterter Ordner Bildergalerie Name z.b. img angeben Bilder aus Galerie einfügen Bild einfügen anklicken Zeige Galerien und z.b. Editorschulung Bildergalerie auswählen das gewünschte Bild durch doppelklick auswählen Alternativ Text (Barrierefreiheit), bei Abstandsränder erzeugen Häkchen entfernen, Ausrichtung leer lassen dann auf OK klicken Im Editor Bild markieren und im Stil Menü Bild links oder Bild rechts auswählen

6 So sieht das Ergebnis aus:

7 Tabellen Tabelle im Editor erstellen Tabelle einfügen/editieren anklicken Tabellen Eigenschaften definieren, Breite relativ in %! angeben, Tabellen Überschrift (Headers), Inhaltsübersicht (wichtig wegen Barrierefreiheit), dann OK Tabelle markieren: linker mausklick auf den Rahmen oben + STRG (bis alle Ränder und Inhalt blau), im Stile menü Stile zuweisen Fertige Tabellen aus Excel einfügen, formatieren Tabelle im Excel markieren, Kopieren und im Editor einfügen und evtl. Stil zuweisen Tabelle aus Galerie einfügen Tabelle einfügen anklicken - Zeige Galerien Tabellen auswählen Doppelklick dann OK, bei Bedarf anderen Stil zuweisen

8 Tabelleneigenschaften, Zelleigenschaften, Zellen verbinden - rechte Maustaste Zwei oder Dreispaltiges Layout HTML Galerien - Zeige Galerien Layouts z.b. Zweispaltiges Layout Doppelklick OK

9 Listen Absatz markieren - Liste einfügen anklicken - Liste markieren (Linke Maustaste doppelklick vor der Liste im Stil Menü bei Bedarf einen anderen Stil für die Liste auswählen (z.b. externe Links) Listen Über HTML-Galerie einfügen Zeige Galerien Listen Auswählen durch Doppelklick OK Vorschau (Preview) Modifizierte strukturierte Inhalte oder Seiten können oben rechts durch Klicken auf die Schaltfläche "Preview" direkt als Vorschau aufgerufen werden. Die vollständige Seite wird unter Verwendung des ausgewählten Templates dargestellt. Quellcode Für die Bearbeitung sind keine HTML-Kenntnisse erforderlich. Dennoch ermöglicht ein integrierter Quellcode-Editor Experten, den HTML-Code uneingeschränkt zu bearbeiten und zu kontrollieren Speichern, Veröffentlichen Auch wenn Sie Ihre Seite speichern und den Editor verlassen, sind die Änderungen "live" für die Öffentlichkeit nicht sichtbar, bis sie von Ihnen veröffentlicht werden. Auf diese Weise ist es möglich, eine Reihe von Seiten oder auch die komplette Website "offline" zu bearbeiten und alle geänderten Seiten zu einem späteren Zeitpunkt zu veröffentlichen, beispielsweise nachdem sie von einer zuständigen Person genehmigt wurden.

10 Linke Maustaste klick auf das Icon Direkt veröffentlichen Englische Seiten erstellen Index.html öffnen Element English auswählen dann den Text auf englisch eingeben und speichern und schließen. NEU Verknüpfung Suchen (index.html Datei auswählen) ERST DANACH ganz oben bei Name index.en.html eingeben - Weiter Englischen Titel und Navigationstext - dann Erweiterte Eigenschaften bei locale en eingeben.

11 2. Seite nach Vorlage Neu - Seite nach Vorlage Titel eingeben (erscheint auch als als Seitenüberschrift) Ein oder zweispaltiges Layout Zielscheiben, Elemente hinzufügen, Elemente löschen Seite ohne rechte Spalte (breiterer Inhaltsbereich) Eigenschaften der Datei Erweitert beim Attribut columnright = off ins Feld Eintragen Abmelden aus OpenCMS Nicht vergessen sich immer abzumelden HTML Es schadet trotzdem nicht ein bisschen HTML und CSS zu lernen, so dass man bei Bedarf im Code eingreifen kann. Infos zu HTML und CSS auf Weitere Informationen zu Barrierefreiheit der Internetauftritte: Layoutbeschreibung Verzeichnisstrukturen, Dateinamen Rechtsfragen Antispam Panorama Die Institute können fertige Bilder aussuchen oder eigene Bilder erstellen und uns für die Einbindung zur Verfügung stellen. Sie können uns Ihre gewünschte Grafik (1000x140 Pixel) (wenn gewünscht auch Institutslogo) zuschicken, wir bauen für Sie die Grafik zusammen.