Webseitenerstellung mit einem „Content-Management-System“ Bielefeld, 18. September 2007 Uli Ebenfeld: Kompetenzteam Bielefeld Mark Meyer-Eppler: MME-Internettechnik Vorbereitung: Blöcke und Stifte verteilen Dateien auf Desktop platzieren

Inhaltsverzeichnis Teil 1 Herkömmliche Internetseiten Ein Grundprinzip für erfolgreiche Internetseiten Anmelden am WebPresenter Seite bearbeiten Seite Speichern und Veröffentlichen Text formatieren Tabelle einfügen Bilder und Dateien einfügen Link einfügen Neue Seite anlegen Rechtevergabe Benutzerverwaltung Versionsverwaltung Kalender, Forum, Kontaktformular und Gästebuch einfügen Menü bearbeiten Weitere Module: Katalog, Chat, Marktplatz, Linkplatz

Herkömmliche Internetseiten Viele HTML-Dateien… Erstellung durch eine Person an einem bestimmten Rechner mit einem bestimmten Programm (Dreamweaver, Frontpage etc.) Hochladen der Seiten z. B. per FTP oder WebDav Änderungen z. B. an Klassenseiten müssen in der Regel durch den Ersteller der Präsenz vorgenommen werden => Flaschenhals Technische und personelle Ressourcen (Software, Kompetenzen und Zeit)

Ein Grundprinzip erfolgreicher Internetpräsenzen? (1/2) „Halten Sie Ihre Internetpräsenz stets aktuell!“ aus: Homepage Usability: 50 Websites Deconstructed, Jakob Nielsen and Marie Tahir, New Riders Publishing, Indianapolis ISBN 0-73571-102-X Dies ist eine der meist missachteten Richtlinien und Ursache für „tote“ Internetpräsenzen.

Ein Grundprinzip erfolgreicher Internetpräsenzen? (2/2) Bereits zu Beginn der Planung die Grundlagen für die Pflege sicherstellen. Voraussetzungen hierfür sind: Keine one-(wo)man-show Viele Redakteure = Viele Schultern Einfache Handhabung Integrierte Benutzerverwaltung => Content Management System (CMS)

Anmelden am WebPresenter Öffnen der Seite http://demo.webpresenter.de Klick auf „Log In“ Benutzernamen und Kennwort eingeben und auf „Anmelden“ klicken

Seite Bearbeiten (1 / 2) Öffnen der Seite „Schulung“, dann Klick auf Ihre Gruppennummer Klick auf „Bearbeiten“ Hinweis: Der Link „Bearbeiten“ erscheint nur, wenn Sie auch angemeldet sind und die Berechtigung haben, die Seite zu bearbeiten.

Seite Bearbeiten (2 / 2) Die Seite öffnet sich im Bearbeitungsmodus Ergänzen Sie den Text im Editor um einen Satz Ihrer Wahl

Seite Speichern und Veröffentlichen Die Möglichkeiten: Veröffentlichen: Alle Besucher sehen Ihre Änderungen Entwurf speichern & Vorschau: Ihre Arbeit wird gespeichert und Sie sehen Ihre Änderung. Die Besucher der Webseite sehen weiterhin die „alte“ Version Entwurf speichern: Ihre Arbeit wird gespeichert. Sie können sofort weiterarbeiten (Seite wird nicht neu geladen) Bearbeiten abbrechen: Verlassen des Editors. Ihre Änderungen werden nicht übernommen.

Text formatieren Um den Text zu formatieren, stehen Ihnen die z. B. aus Word bekannten Symbole zur Verfügung: Die Anwendung ist auch weitgehend identisch: Text markieren und dann die Formatierung wählen.

Tabellen einfügen (1 / 2) Klicken Sie auf das Tabellen-Symbol: Das Tabellenfenster öffnet sich. Tragen Sie dort die Größe und Eigenschaft Ihrer Wunsch-Tabelle ein: Klicken Sie auf „OK“

Tabellen einfügen (2 / 2) Ihre Tabelle ist nun eingefügt. Sie können die Tabelle mit Bildern und Texten füllen. Klicken Sie dazu einfach in die gewünschte Zelle.

Neue Bilder & Dateien einfügen (1 / 7) Gehen Sie wieder in den Bearbeitungsmodus Ihrer Seite Klicken Sie auf das Dateisymbol (Büroklammer) Das Dateifenster öffnet sich und Sie können Bilder und Dateien von Ihrem Rechner hochladen. Klicken Sie nun auf „Neue Datei hochladen“

Neue Bilder & Dateien einfügen (2 / 7) Klicken Sie auf „Durchsuchen“ wählen Sie eine vorhandene Datei (Bild) zum Hochladen aus. Klicken Sie nun auf „Datei hochladen“. Die Datei wird auf Ihre Internetseite hochgeladen.

Neue Bilder & Dateien einfügen (3 / 7) Gehen Sie nun auf den Reiter „Bilder“ und wählen Sie das gerade hochgeladene Bild aus.

Neue Bilder & Dateien einfügen (4 / 7) Nun können Sie die Größe des Bildes bearbeiten. Der Alternativtext wird beim Überfahren des Bildes mit der Maus angezeigt. Für die Barrierefreiheit ist es wichtig, dass dieser Text das Bild gut beschreibt. Anschließend auf „OK“ klicken, um das Bild auf Ihrer Seite einzufügen

Neue Bilder & Dateien einfügen (5 / 7) Ihr Bild ist nun eingefügt:

Neue Bilder & Dateien einfügen (6 / 7) Analog zu dem Vorgehen bei Bildern können Sie auch folgende Dateien hochladen: PDF, Word, Excel, Powerpoint, Musik, Videos, ZIP etc. Erlaubte Dateitypen im Detail: Bilder: .jpg, .jpeg, .gif, .png, .tif, .tiff, .bmp PDF (Acrobat): .pdf Office-Datei: .doc, .xls, .ppt, .docx, .xlsx, .pptx, .pps, .txt ZIP: .zip, .rar Musik: .mp3, .wav, .mid Programm: .exe Flash: .swf Video: -mpg, .mpeg, .mpeg4, .avi Boardmarker: .bm2, .idx, .bm_sdp, .pc2 weitere auf Anfrage

Neue Bilder & Dateien einfügen (7 / 7) Tipp: Natürlich müssen Sie jede Datei nur einmal hochladen, auch wenn Sie sie mehrfach verwenden wollen. Überspringen Sie dazu einfach den Schritt „Neue Datei hochladen“ und übernehmen Sie direkt das Bild oder die gewünschte Datei aus den Reitern „Bilder“ bzw. Dateien.

Link einfügen (1 / 3) Klicken Sie auf das Linkeinfüge-Symbol Fügen Sie einen Link zur Seite www.google.de ein. Klick auf „Link auf externe Seite…“

Link einfügen (2 / 3) Geben Sie die Adresse „www.google.de“ ein. Der Benutzer soll später auf „zu google“ klicken können. Bestätigen Sie Ihre Auswahl mit „OK“

Link einfügen (3 / 3) Ihr Link ist nun eingefügt: Veröffentlicht sieht der Link dann „normal“ aus:

Neue Seite anlegen Eine neue Seite wird einfach durch einen Link auf die Seite angelegt. Klicken Sie auf das Linkeinfüge-Symbol ( ) und wählen Sie „Link auf interne neue Seite“ Geben Sie nun den Seitennamen und den Linktext ein und bestätigen Sie mit „OK“ Der Link wird so eingefügt:

Rechtevergabe (1 / 2) Benutzergruppen: Admin: Darf alles Sehen & Bearbeiten User: Darf nur Seiten bearbeiten und sehen, auf denen er berechtigt ist (und Seiten ohne Leseschutz => Standard) Member: Darf nur Seiten sehen, auf denen er berechtigt ist (und Seiten ohne Leseschutz => Standard)

Rechtevergabe (2 / 2) Klicken Sie auf „Optionen“ (im Bearbeitungsmodus) Unter Bearbeitungsrechte bzw. Leserechten können Sie die Rechte für die gerade bearbeitete Seite eingeben. Mit einem Klick auf „Veröffentlichen“ wird die Änderung wirksam.

Benutzerverwaltung – Neuer Benutzer (1/3) Klicken Sie auf WebPresenter-Verwaltung im Fußbereich der Seite Nun auf Benutzerverwaltung

Benutzerverwaltung – Neuer Benutzer (2/3) Klicken Sie auf „Neuen Benutzer anlegen“: Geben Sie dann neue Benutzerdaten ein und drücken auf „Registrieren“:

Benutzerverwaltung – Neuer Benutzer (3/3) Der neue Benutzer wurde erstellt: Hinweis: Damit der der Benutzer sich anmelden kann, muss das Feld in der Spalte „Freigabe“ angewählt sein

Alte Version einer Seite zurückholen Die jeweils letzten 30 Versionen einer Seite können angesehen bzw. bearbeitet werden. Dazu auf „Ältere Versionen dieser Seite zeigen“ klicken: Möglichkeiten: : Die Version bearbeiten und ggf. veröffentlichen : Version nur ansehen

Kalender – Einfügen Klicken Sie im Bearbeitungmodus Ihrer Seite auf das Linkeinfügesymbol und wählen dann den „Kalender“ aus: „Veröffentlichen“ klicken Hinweis: Das Formular zum Eintragen neuer Termine erscheint nur, wenn Sie auch angemeldet sind und die Berechtigung haben, die Seite zu bearbeiten.

Kalender – Neuer Eintrag Geben Sie einen Termin in der Maske ein und klicken anschließend auf „Ändern bzw. Eintragen“: Ihr Termin erscheint nun in der Übersicht

Forum Setzen Sie einen Link zum Forum:

Kontaktformular Setzen Sie einen Link zum Kontaktformular:

Gästebuch Setzen Sie einen Link zum Kontaktformular:

Menü Klicken Sie auf WebPresenter-Verwaltung im Fußbereich der Seite Nun auf „Menü konfigurieren“

Menü – Neuer Menüpunkt Einen neuen Menüpunkt können Sie mit „Neuen Menüpunkt anlegen“ hinzufügen „Titel“ ist der Text, der links im Menü angezeigt wird. Geben Sie dann ein Ziel ein. Die weiteren Punkte sind optional. Klicken Sie dann auf „weiter“. Der Menüpunkt ist nun eingetragen.

Menü – Eintrag bearbeiten : Menüpunkt bearbeiten : Menüpunkt löschen (Seite bleibt bestehen) : Menüpunkt nach oben bzw. unten verschieben : Menüpunkt als Untermenüpunkt (2. Ebene) : Menüpunkt als Hauptmenüpunkt (1. Ebene)

Katalog, Chat, Marktplatz & Linkplatz Katalog: Verwalten von Büchern, Geräten etc. Beispiel: http://geba-online.de/Katalog2.php4 Chat: Einfacher Chat-Raum Beispiel: Siehe Menüpunkt „Chat“ Marktplatz: Anzeigen können aufgegeben werden Beispiel: http://geba-online.de/site.php4?site_id=400 Linkplatz: Sammelstelle für eine Linksammlung Beispiel: http://mebie.de/Linkplatz.php4?site_id=56

T e i l 2

Grundeinstellungen Ihrer Präsenz Hier können Sie z. B. den Namen Ihrer Präsenz und das Logo anpassen. Außerdem die E-Mailadresse für das Kontaktformular festlegen. Klicken Sie in der WebPresenter-Verwaltung auf „WebPresenter an Ihre Präsenz anpassen“

Sicherheitseinstellungen Ihrer Präsenz Hier können Sie festlegen, ob neue Benutzer sich selber anlegen dürfen, oder ob dies den Administratoren vorenthalten ist. Um Missbrauch zu Vermeiden, ist es möglich, dass neue Benutzer erst von einem Administrator freigeschaltet werden müssen. Klicken Sie in der WebPresenter-Verwaltung auf „Sicherheitseinstellungen Ihrer Präsenz konfigurieren“

Rahmenlayout bearbeiten (1 / 3) Bearbeiten Sie das Rahmenlayout (Bereich um den Inhaltsbereich, den Sie mit dem „normalen“ Editor bearbeiten). Klicken Sie in der WebPresenter-Verwaltung auf „Rahmen-Layout bearbeiten“

Rahmenlayout bearbeiten (2 / 3) Sie können hier die Namen der Layouts, die Layouts selber inkl. der Stylesheets (CSS) bearbeiten Das Layout muss hier in HTML eingegeben werden

Rahmenlayout bearbeiten (3 / 3) Um z. B. den eigentlichen Inhalt der Seite einzufügen, können bzw. müssen Sie Platzhalter (tags) einfügen. Für den Inhalt ist dies „{content}“. Weitere wichtige Platzhalter: {menu_v2}: Setzt das Menü ein {fussbereich}: Gibt den Fußbereich der Seite aus (Link zum Login, WebPresenter-Verwaltung etc.) {kopfbereich}: Gibt z. B. Link zum Bearbeiten einer Seite aus. Wenn dieser Link im Rahmenlayout nicht gesetzt ist, wird der Kopfbereich zusammen mit {content} ausgegeben. {logo}, {.logo2}: Gibt die Logos der Präsenz aus {metatags}: Gibt die Metatags der Präsenz im head-Bereich aus (Wichtig für Suchmaschinen) {meldungen}: Zeigt die blau bzw. rot hinterlegten Meldungen an {praesenzname}, {praesenz_url}: Gibt den Präsenznamen und die Adresse aus {seitenname}: Gibt den Namen der Seite aus {stylesheet}: Bindet im head-Bereich der Seite die Stylesheets ein {suchfeld}: Gibt ein Suchfeld aus {content_side}: Ausgabe des Textes für die schmale, optionale Spalte {nickname}, {realname}, {begruessung}: Ausgabe von Anmeldename, echter Name und Begrüßung {leseschutz typ=“member“}xxx{/leseschutz}: Nur Angemeldete sehen den Text {leseschutz typ=“gast“}xxx{/leseschutz}: Nur nicht-Angemeldete sehen den Text

Individuelle Layoutelemente (1 / 3) Im Bearbeitungsmodus können Sie auf vorgefertigte Layoutelmente (z. B. Rahmen) zurückgreifen.

Individuelle Layoutelemente (2 / 3) So fügen Sie z. B. eine Textbox mit Überschrift ein:

Individuelle Layoutelemente (3 / 3) Um ein eigenes Layoutelement zu erstellen, gehen Sie wie folgt vor: Je nach Komplexität Ihres Layoutelements sind mehr oder weniger HTML-Kenntnisse notwendig. Klicken Sie auf „Abbrechen“

Änderungen an der Präsenz verfolgen Über das Logfile können Sie die letzten 150 Änderungen an der Präsenz zurückverfolgen. Z. B. wer hat sich angemeldet, welche Seiten wurden bearbeitet, welche Dateien wurden hochgeladen. Klicken Sie in der WebPresenter-Verwaltung auf „Logfile anzeigen“.

Einrichten Kalender (1 / 2) Weitere Textfelder eingeben bzw. umbenennen. Gehen Sie über die WebPresenter-Verwaltung auf „Systemparameter und -texte bearbeiten“ und klicken dann auf „kalender_steuerung“.

Einrichten Kalender (2 / 2) Im Kalender können die Einträge in 10 Feldern organisiert werden (T0 – T9). Der Name der Felder wird bei „feld_Tx_name“ eingetragen. Das „x“ ist die jeweilige Feld-Nummer. feld_Tx_standard: Vorbelegung bei neuen Kalendereinträgen feld_Tx_textarea: Einzeilige Einträge, mehrzeilige Einträge ohne Formatierung oder mehrzeilige Einträge mit Formatierung feld_Tx_vorauswahl: Es können nur hier vordefinierte Werte in ein Feld eingetragen werden feld_Tx_vorauswahl_typ: Kann nur jeweils eine Vorauswahl gewählt werden (Select-Box), oder sind mehrere Angaben möglich (Checkboxen)

Gästebuch, Forum, Katalog Nach Bedarf und Fragen

Tipps & Tricks Vergrößern des Bearbeitungsfensters auf Bildschirmgröße