Webseiten erstellen mit OpenCMS

Transkript

1 Webseiten erstellen mit OpenCMS Malte Müller BBS I Emden admin@bbs1emden.de 16. Mai

2 Inhaltsverzeichnis 1 Motivation 3 2 OpenCMS 3 3 Aufbau der Internetpräsenz bbs1emden.eu 3 4 Anmelden am CMS 3 5 Die Arbeitsumgebung Menüzeile im Explorer Dateien erstellen 5 7 Dateien bearbeiten Der Editor Verzeichnisse erstellen Verzeichnisse ohne Navigationseintrag Verzeichnisse mit Navigationseintrag

3 4 ANMELDEN AM CMS 1 Motivation Webseiten, die nicht laufend gepflegt werden, sind uninterssant. Leider ist die Wartung einer Internetpräsenz nicht immer einfach, bisweilen muß für jede Änderung ein Agentur beauftragt werden, mit der Folge, dass jede Anpassung Geld und vor allem viel Zeit kostet. Ein Content Management System hingegen unterstützt die Benutzer dabei, Webseiten zu erstellen und zu verwalten. 2 OpenCMS Es gibt auf dem Markt viele verschiedene CMS, populär sind Joomla ( Plone ( und OpenCMS ( Alle genannten Systeme stellen folgende Funktionen zur Verfügung: Erstellen von Webseiten/ Bereitstellen eines Webeditors ( inline edit ), Rechteverwaltung; Trennung von Lese-, Schreib- und Veröffentlichungsrechten, Suchfunktionen/Suchmaschine Die BBS I verwendet als OpenCMS. In dieser Anleitung wird der Teil beschrieben, der für das Arbeiten eines Autor erforderlich ist. 3 Aufbau der Internetpräsenz bbs1emden.eu Abbildung 1: Ausschnitt von der Startseite bbs1emden.eu Der Aufbau der Webseiten spiegelt die Organisationsstruktur der BBS I Emden wieder, wie sie im Organisationsplan dargestellt ist (Stichwort für die Suche: Organisationsplan). Die Seiten der Projekte SAM, Hot Shop, Emdania, Kulturmanagement, Teachers Equipment, RING und RumReisen befinden sich in der Rubrik Klassenprojekte. Die Bereiche Schulinfo und Fachgruppen beinhalten zum überwiegenden Teil Informationen von der oder über die Schulverwaltung. 4 Anmelden am CMS Jedes Projekt erhält mindestens zwei verschiedene Kennungen (Benutzername und Passwort), eine für alle Autoren, die andere für den verantwortlichen Projektleiter. Die Anmeldung am System erfolgt am einfachsten, indem man auf der Startseite dem Link login 3

4 5 DIE ARBEITSUMGEBUNG (für Autoren) folgt. (Login-screen) Es muß hier genau auf die Schreibweise geachtet werden, rrautor ist verschieden von RRAutor! Es stellt grundßatzlich kein Problem dar, wenn sich viele Personen als rrautor Anmelden. Wenn mehrere Autoren versuchen, die gleiche Datei zu bearbeiten, werden sie zwar Schwierigkeiten bekommen, es geht aber nichts kaputt. Aus Sicht des CMS ist es übrigens völlig unerheblich, von wo aus Sie die Webseiten erstellen oder bearbeiten, ob von der Schule aus, oder aus dem Internetcafe ihrer Lieblingsstrandbar, das macht keinen Unterschied. 5 Die Arbeitsumgebung Nach erfolgreicher Anmeldung sehen Sie eine Arbeitsumgebung, die einige Ähnlichkeiten mit dem Dateimanager unter Windows hat. Auf der linken Seiten stehen alle Ordner, rechts alle Dateien und Unterordner in der gerade aktiven Rubrik. Ein wesentlicher Abbildung 2: Dateimanager-ähnliche Arbeitsumgebung Unterschied zum Dateimanager besteht darin, dass sie hier die rechte Maustaste nicht sinnvoll verwenden können. Sie benötigen also in OpenCMS nur die linke Maustaste. 5.1 Menüzeile im Explorer Die erste Zeile im Explorer bietet die Möglichkeit, Grundeinstellungen vorzunehmen. Für die Autoren ist das Projekt immer Offline, die Site immer default sowie die Ansicht immer Explorer. Kurz gesagt, Sie können es einfach bei den voreingestellten Weren belassen. Lediglich die Schalter aktualisieren ( ) und Einstellungen ( ) sind bedeutsam. Wenn ein anderer Autor in ihrem Arbeitsbereich etwas geändert hat, z.b. eine neue Datei erstellt hat, dann werden Sie das nur sehen können, wenn Sie das Fenster aktualisieren. Im Bereich Einstellungen können Sie die Sprache des CMS einstellen und dessen Darstellung geringfügig beeinflussen. In der zweiten Zeile befinden sich zwei Schaltflächen, die von Autoren laufend benötigt werden, zum einen die zweite Schaltfläche von links, Hochladen ( ), zum anderen Neu ( ). Mit Neu erstellen Sie neue Webseiten oder Verzeichnisse, mit Hilfe von Hochladen 4

5 6 DATEIEN ERSTELLEN können Sie Dateien, die sich auf Ihrem Computer befinden, zum Webserver kopieren. Das wird benötigt, sobald Sie Grafiken einbinden wollen. 6 Dateien erstellen Wenn Sie eine neue Datei erstellen wollen, wählen Sie den Menüpunkt Neu aus. Von den zehn Einträgen sind eigentlich nur zwei wichtig: Verzeichnis, um ein neues Unterverzeichnis zu erstellen, Seite mit Freitext, das sind normale HTML-Dateien, also Webseiten Wählen Sie den Punkt Seite mit Freitext und geben Sie einen Namen für die Datei an. Der Name darf keine Leerzeichen und keine Umlaute enthalten. Dieser Name dient nur der Verwaltung im CMS. Beispiel: angebote.html. Aus der Liste der Templates (Vorlagen), wählen Sie BBS I Emden Neu! Die Wahl der Vorlage bestimmt das Aussehen der Seite und sorgt dafür, dass der neue Eintrag richtig in die Navigation aufgenommen wird, Abbildung 3: Neue Datei erstellen Abbildung 4: Seite mit Freitext sofern dies von Ihnen gewünscht wird. Klicken Sie auf weiter. Im diesem Dialog geben Sie den Titel, Keywords (Schlüsselwörter) und die Description (Beschreibung) an. Außerdem können Sie hier angeben, ob die Seite in der Navigation auftauchen soll. Kopieren Sie in dem Fall einfach den Titel in den Navigationstext. Die Angabe des Titel ist verpflichtend, die übrigen Angaben sollten gemacht werden, müssen aber nicht. Alle Angaben, die hier gemacht werden, werden von der Suchfunktion verwendet und tauchen auch als sogenannte Meta- Tags in der Webseite wieder auf. Abbildung 5: Eigenschaften der Webseite Wenn es Sie interessiert, dann schauen Sie sich einfach mal den Quelltext ihrer neuen Webseite an. 5

6 7 DATEIEN BEARBEITEN Geben Sie hier beispielsweise Angebote heute (Leerzeichen sind heir gestattet), als Keywords billig, preiswert ein. Wählen Sie In die Navigation aufnehmen und tragen hier abermals Angebote heute ein. Belassen Sie das Feld Einfügen nach, wie es ist und klicken Sie auf fertig stellen. Die Datei ist erstellt, es fehlt noch die Bearbeitung. Abbildung 6: Neue Datei (Angebote heute) 7 Dateien bearbeiten Sie sehen im Explorer Ihre Datei mit einem roten Fähnchen und einem offenen Schloss. Das offene Schloss bedeutet, dass diese Datei zur Bearbeitung durch Sie gesperrt ist. Sie können diese Datei folglich bearbeiten, andere erst dann, wenn Sie die Sperrung aufheben. Sie können entweder auf das Icon ( ) klicken und im Menü den Punkt Seite bearbeiten wählen, oder Sie klicken auf den Namen der Datei. Im zweiten Fall wir die Datei in ein Browserfenster geladen. Rechts oben sehen Sie einen kleinen roten Kreis ( den Webseiten-Editor zu gelangen. ). Klicken Sie auf diesen, um in 7.1 Der Editor Abbildung 7: Kontextmenü zum Datei-Icon Der Editor ist den Marktüblichen Textverarbeitungssystem, wie zum Beispiel Word, nachgebildet. Sie haben nicht alle Formatierungsmöglichkeiten, die Word bietet, aber ausreichend um professionelle Webseiten erstellen zu können. Sie können für eine Textzeile ein Format festlegen ( ), zum Beisiel, um eine Überschrift zu kennzeichnen. Die Wahl eines bestimmten Fonts ist für Webseite unüblich und würde unter Umständen das Corporate Design der BBS I Emden verletzen - verzichten Sie darauf. Das gleiche gilt für Size (Schriftgröße). Die Formatierungen B (Fettdruck, ), I (Kursivdruck, ), U (Unterstreichen, ), linksbündige ( ), rechtsbündige ( ), zentrierte ( ) Formatierung und Blocksatz ( ) kennen Sie aus Word. Das gleich gilt sicher für Listen und Nummerierungen ( ) und Textfarben ( ). Eher unbekannt dürfte in der Menüzeile darüber die Linkbearbeitung sein ( ). Markieren Sie im Editor ein Wort im Text ihrer Webseite und wählen Sie 6

7 8 VERZEICHNISSE ERSTELLEN Link einfügen/editieren ( ), um einen Link einzufügen. Geben Sie im folgenden Dialog die Internetadresse der Zielseite ein, oder durchsuchen Sie den Server (bbs1emden.eu) nach der gewünschten Zieladresse. Der Editor schützt Sie nicht davor, ungültige Verweise anzugeben, die nicht existieren. Der Projektverantwortliche bekommt allerdings beim Veröffentlichen eine Fehlermeldung (found broken Links). Anker ( ) dienen dazu, eine Markierung in die Webseite zu setzen, zu der Sie mit einem Link verweisen können. Wählen Sie den Anker und geben Sie einen Namen für diese Sprungmarke ein. Geben Sie weiter unten auf Ihrer Seite einen Link ein und setzen hinter die Adresse eine Raute (#) gefolgt von dem Bezeichner für die Sprungmarke. Als Autor können Sie die Seite mit einem Klick auf das Diskettensymbol speichern. Bei Auswahl der Diskette mit Kreuz ( ) speichern Sie und verlassen den Editor, bei der Diskette ohne Kreuz ( ) speichern Sie, ohne den Editor zu verlassen und ein Klick ganz rechts auf das Kreus verlässt den Editor, ohne zu speichern ( ). Der Projektverantwortlich hat zudem die Möglichkeit, die Datei zu veröffentlichen ( ). Erst nach der Veröffentlichung, ist die Webseite auch für nicht angemeldete Besucher sichtbar. 8 Verzeichnisse erstellen Verzeichnisse werden auf beinahe dem gleichen Wege erstellt, wie Dateien auch, nämlich über den Menüpunkt Neu und Verzeichnis. Der Autor sollte sich vor dem erstellen eines neuen Verzeichnisses Gedanken machen, wofür er es benötigt. Soll das Verzeichnis in der Navigation auftauchen, für Besucher also sichtbar sein, oder ist es nur ein Hilfsordner? Ein Verzeichnis, dass nur zur Ablage von Dateien dient (z.b. Bilder, Ablage ), soll meist nicht in die Navigation aufgenommen werden. 8.1 Verzeichnisse ohne Navigationseintrag Abbildung 8: Verzeichnis ohne Indexseite Klicken Sie auf Neu, Verzeichnis (erster Menüpunkt) und auf Weiter. Geben Sie einen Namen für das Verzeichnis an (ohne Lehrzeichen, keine Sonderzeichen) und nehmen Sie den Haken bei Lege Indexseite in neuem Ordner an weg. Geben Sie abschließend im Dialog Eigenschaften einen Titel für diesen Ordner ein und klicken Sie auf fertig stellen. Dadurch, daß der Punkt In Navigation mit aufnehmen nicht markiert ist, taucht dieses neue Verzeichnis nicht in der Navigation auf. Sie können dort Dateien ablegen, die Sie in Ihren Dokumenten über Links verknüpfen. 7

8 8 VERZEICHNISSE ERSTELLEN 8.2 Verzeichnisse mit Navigationseintrag Abbildung 9: Verzeichnis ohne Navigation Verfahren Sie hier genau wie im vorigen Abschnitt beschrieben, nur dass Sie jetzt sowohl eine Indexseite anlegen lassen, als auch den Punk In Navigation mit aufnehmen aktivieren. Kopieren Sie den Text, den Sie als Titel vergeben haben, in den Navigationstext und klicken Sie auf fertig stellen. Sie gelangen jetzt automatisch in den Dialog zum Anlegen einer neuen HTML-Seite. Die folgenden Schritte wurden bereits in Kapitel 6 auf Seite 5 beschrieben, hier noch mal die Kurzfassung: Die neue Seite trägt den Namen index.html - ändern Sie diesen Namen nicht. Wählen Sie als Template (Vorlage) BBS I Emden Neu und klicken Sie auf weiter. Vergeben Sie einen Titel, der in den meisten Fällen gleich dem des Verzeichnisses sein wird und wählen Sie nach Möglichkeit einige Stichwörter und eine Beischreibung. Nehmen Sie diese Datei nicht mit in die Navigation auf. Klicken Sie auf fertig stellen. Sie haben jetzt ein Verzeichnis erstellt, das in der Navigationsleiste aufgeführt wird. Wenn ein Besucher diesen Ordner ansteuert, wird automatisch Ihre index.html in diesem Ordner angezeigt. Die index.html ist so etwas wie eine Startseite für Ihren Ordner. 8