ARBEITSANLEITUNG SEITENERSTELLUNG HOMEPAGE. zum Einstellen von Seiten in das Internet SATELLITENGESTÜTZTE UMWELTBILDUNG IN DER OBERLAUSITZ.

Transkript

1 SEITENERSTELLUNG HOMEPAGE Christlich Soziales Bildungswerk Sachsen e.v. ANLEITUNG TYPO 3 REDAKTEURE ARBEITSANLEITUNG zum Einstellen von Seiten in das Internet Projekt SATELLITENGESTÜTZTE UMWELTBILDUNG IN DER OBERLAUSITZ unter Bearbeiter: Eva-Maria Keschke Miltitz, den wobłuk: Wobswět a ratarstwo Wobswětowe kubłanje projekt: Wobswětowe kubłanje z pomocu satelitow w Hornjej Łužicy Anleitung Typo3 Seite 1 von 20

2 Inhaltsverzeichnis 1. Einführung/Definitionen Zugang zur Seite und Benutzeroberflächen Seiten und Inhalte Neue Seite erstellen Seiteninhalt erstellen Besondere Seiteninhalte: Links setzen Links setzen Bilder und Dateien Bildbearbeitung Upload von Dateien und Bildern Bilder in die Webseite einbinden Zweisprachige Seiten Seiten in sorbisch Arbeiten in der Pflanzendatenbank Abbildungsverzeichnis: Abbildung 1: Backend mit Login-Formular... 4 Abbildung 2: Arbeitsoberfläche für Schulen... 4 Abbildung 3: Seitenbaum mit Kontextmenü... 5 Abbildung 4: Einstellung für neuen Datensatz... 6 Abbildung 5: Einstellung für neuen Datensatz... 6 Abbildung 6: Neue Seite (nicht im FE sichtbar) angelegt... 7 Abbildung 7: Neue Seite Seiteneigenschaften... 7 Abbildung 8: das Fenster Neues Inhaltselement... 8 Abbildung 9: das Fenster Neues Inhaltselement... 8 Abbildung 10: Formatierungen im Texteditor... 9 Abbildung 11: Seite Speichern und Seitenvorschau aufrufen Abbildung 12: Versteckte Seite sichtbar machen mit dem Menü Einblenden Abbildung 13: Eingabe eines Links Abbildung 14: Link setzen Abbildung 15: Änderung der Bildgröße Abbildung 16: Modul Dateiliste Abbildung 17: Einstellen von Bildern Abbildung 18: Bilder einfügen Abbildung 19: Bildeigenschaften bearbeiten Abbildung 20: Kontexmenü sorbisch Abbildung 21: Arbeiten in der Pflanzendatenbank Abbildung 22: Neuanlegen eines Pflanzendatensatzes Abbildung 23: Füllen eines Pflanzendatenbanksatzes Abbildung 24: Erstellen einer Tabelle für Fotos Abbildung 25: Speichern der Pflanzendatenbank Seite 2 von 20

3 1. Einführung/Definitionen Christlich-Soziales Bildungswerk Sachsen e.v. Typo3 ist ein freies open-source Content-Management-System (CMS) für Internetauftritte. Es ist nicht kostenpflichtig und wird ständig weiterentwickelt. Im Projekt wird zwischen Redakteuren (projektteilnehmende Schulen) und Administratoren (Projektkoordinator) unterschieden. Letzterer ist für die Bearbeitung aller Inhalte verantwortlich und übt eine Kontrollfunktion aus. Für die Arbeit an der Webseite sind ein Internetzugang und ein Webbrowser erforderlich. Empfohlen wird der Browser Firefox aber natürlich können auch alle anderen aktuellen Browser wie der InternetExplorer (ab Version 6) genutzt werden. Im Internet gibt es eine Reihe von Seiten, die sich mit der Erstellung und Programmierung von Typo3-Seiten befassen, und wo sich Nutzer in Foren gegenseitig bei Problemen helfen. Die wichtigsten Seiten für alle, die sich intensiver mit Typo3 beschäftigen möchten, sind: die Seite der Typo3-Entwickler auf englisch die deutschsprachigen Foren und 2. Zugang zur Seite und Benutzeroberflächen Ein CMS unterscheidet zwischen der veröffentlichten Webseite, dem Frontend (Vorderseite, abgekürzt FE) und der Webseite für die Bearbeitung der Inhalte, dem Backend (Rückseite, abgekürzt BE). Das Frontend erreicht ihr unter den Internetadressen Über das Login mit Benutzernamen und Passwort könnt ihr euch einloggen und es werden zusätzlich interne Daten angezeigt. Bei der Eingabe unbedingt auf Groß- und Kleinschreibung achten. Benutzeramen und Passwort wird vom Administrator zur Verfügung gestellt. Kontaktadresse des Administrators: Eva-Maria Keschke Christlich-Soziales Bildungswerk Sachsen e.v. Kurze Straße Nebelschütz OT Miltitz Tel.: / Fax: / eva-maria.keschke@csb-miltitz.de Seite 3 von 20

4 Das Backend erreicht ihr unter Hier können sich nur entsprechend berechtigte Nutzer mit ihrem Benutzernamen und Passwort (die gleichen wie im FE) einloggen. Abbildung 1: Backend mit Login-Formular Die Benutzeroberfläche bietet dem Bearbeiter immer nur die Möglichkeiten zur Bearbeitung an, für die der Nutzer die Berechtigungen hat. Ihr habt die rechte zum Anlegen und Bearbeiten von Seiten, Hochladen von Graphiken und Dateien. Abbildung 2: Arbeitsoberfläche für Schulen Zunächst wählt ihr in der Modulleiste (1) aus, welche Art von Arbeit ihr durchführen wollt. Seite 4 von 20

5 Dann wählt ihr im Seitenbaum (2) die Seite aus, die bearbeiten werden soll. Das ist zum einen den Beitrag zum Schulprojekt anlegen und zum anderen die Pflanzendatenbank zu vervollständigen. Der Bereich Artikel wie in Abb. 2 dargestellt ist gegenwärtig noch zur Bearbeitung gesperrt. In der Arbeitsfläche (3) wird die eigentliche Bearbeitung ausgeführt. In Abbildung 2 wurde ausgewählt das Modul Seite und im Seitenbaum die Seite Sorbisches Gymn. Bautzen. Im Auswahlfeld in der Arbeitsfläche rechts oben ist der Eintrag Sprachen ausgewählt. Der Seiteninhalt wird somit in beiden Sprachen (deutsch / sorbisch) nebeneinander angezeigt. Mit einem Klick der linken Maustaste auf den Seitentitel im Seitenbaum öffnen ihr eine Seite zur Bearbeitung. (Falls ihr auf die rechte Maustaste klickt öffnen sich ein Kontextmenü zum Bearbeiten der Seite. In diesem Fall auf Bearbeiten klicken) Abbildung 3: Seitenbaum mit Kontextmenü 3. Seiten und Inhalte 3.1 Neue Seite erstellen Zur Übung erstellen wir innerhalb der Seite Sorbisches Gymn. Bautzen (Hier steht der Name eurer Schule) eine Seite mit dem Titel Bilder. 1) Wählt in der Modulleiste das Modul Web / Seite. 2) Im Seitenbaum legt den Mauszeiger auf die Seite, unter oder neben der eine neue Seite anlegt werden soll und klickt rechts. Das Kontextmenü wird geöffnet, klickt auf Neu. Seite 5 von 20

6 Abbildung 4: Einstellung für neuen Datensatz 3) In der Arbeitsfläche erscheint das Fenster Neuer Datensatz, wählt den Punkt Seite (in) Abbildung 5: Einstellung für neuen Datensatz 4) Gebt den Seitentitel Bilder ein. Dieser Seitentitel erscheint später in der Navigationsleiste im Frontend. Das Feld Seite verstecken ist bereits aktiviert, so dass während der Bearbeitung diese Seite nicht veröffentlicht wird. 5) Klickt auf das Symbol Sichern und Schließen. Es erscheint folgendes Bild. Seite 6 von 20

7 Abbildung 6: Neue Seite (nicht im FE sichtbar) angelegt Unsere Seite Bilder ist jetzt eine Unterseite der Seite Sorbisches Gymn. Bautzen (Hier steht euer Name der Schule). Die neue Seite ist nicht öffentlich sichtbar, sie sind mit dem roten Symbol Versteckt markiert. 3.2 Seiteninhalt erstellen Die Seite Bilder ist noch leer. Im nächsten Schritt wird sie mit Inhalten gefüllt. Dazu klickt ihr auf die Seite Bilder (Abb.6) und es erscheint folgendes Bild: Abbildung 7: Neue Seite Seiteneigenschaften 1) Klickt jetzt auf Seiteninhalt anlegen. Auf der Arbeitsfläche erscheint das Fenster Neues Inhaltselement : Seite 7 von 20

8 Abbildung 8: das Fenster Neues Inhaltselement 2) Klickt jetzt auf Normaler text : Entsprechend der Vorgabe können hier auch andere Seiteninhalte ausgewählt bzw. später auch noch geändert werden. Für unser Beispiel: Abbildung 9: das Fenster Neues Inhaltselement Ihr könnt jetzt den Typ der Seite wählen den ihr erstellen wollt. Seite 8 von 20

9 3) Kopieren und Einfügen Zum Kopieren, Ausschneiden und Einfügen innerhalb des Texteditors nutzt die folgenden Tastenkombinationen (wie in MS Word): Ausschneiden: [Strg] [X] Kopieren: [Strg] [C] Einfügen: [Strg] [V] Auf diese Weise können auch Texte aus anderen Quellen (Word-Dokumente etc.) in den Editor übernommen werden. Es wird dringend empfohlen, die Formatierung aus Word mit dem Button Formatierung entfernen zu löschen. Abbildung 10: Formatierungen im Texteditor 4) Klickt jetzt auf Dokument sichern und Webseite anzeigen, um eure Einträge zu speichern und die Seitenvorschau anzuzeigen. Seite 9 von 20

10 Abbildung 11: Seite Speichern und Seitenvorschau aufrufen 5) Wenn die Bearbeitung abgeschlossen ist, könnt ihr die Seite für die Öffentlichkeit freischalten. Dafür klickt im Seitenbaum mit der rechten Maustaste auf den Seitennamen, so dass sich das Kontextmenü öffnet. Klickt im Kontextmenü auf Einblenden. Das rote Versteckt -Symbol verschwindet und die neue Seite ist jetzt im Frontend zu sehen. Abbildung 12: Versteckte Seite sichtbar machen mit dem Menü Einblenden 4. Besondere Seiteninhalte: Links setzen 4.1 Links setzen Ein Link besteht aus zwei Komponenten: einem Text (oder auch einem Bild) und der Webadresse, auf welche der Link verweisen soll. 1) Gebt den Text ein 2) Markiert den Text mit dem Cursor Seite 10 von 20

11 Abbildung 13: Eingabe eines Links 3) Klickt jetzt auf das Symbol mit der Weltkugel Link einfügen. Es öffnet sich ein neues Fenster. Abbildung 14: Link setzen 4) Wählt aus, auf was verweisen werden soll: unter dem Tabulator Seite könnt ihr auf eine interne Seite aus dem Seitenbaum verweisen, Seite 11 von 20

12 unter Datei verweist ihr auf eine Datei aus der Dateiliste (mehr zu Dateien siehe Kap. 5), unter Externe URL verweist ihr auf eine fremde Webseite (unser Beispiel URL der Schulhomepage eingeben), unter könnt ihr eine -Adresse angeben. 5) Klickt auf Link setzen. 5. Bilder und Dateien Bevor Bilder und Dateien auf der Webseite zur Verfügung gestellt werden können sind zwei Arbeitsschritte erforderlich: die Bilder im JPG-Format in der Größe abspeichern, in der sie angezeigt werden sollen, Upload der angepassten Daten in das passende Verzeichnis der Webseite. Diese Schritte sind wichtig, um die Nutzer der Webseite nicht mit langen Wartezeiten zu belasten, Ordnung in den Daten zu halten und unnötige Datenmengen auf dem Server zu vermeiden. 5.1 Bildbearbeitung Formate Webbrowser können nur wenige Bildformate richtig anzeigen. Nutzt daher folgende Formate: JPEG für Fotos und Bilder mit Farbverläufen GIF für Zeichnungen und Logos mit Farbflächen. Die Anpassung des Formats könnt ihr zusammen mit der Größenanpassung in einem Bildbearbeitungsprogramm vornehmen. Größe Die Bilder aus einer Digitalkamera haben ohne Bearbeitung ungefähr Abmessungen von 60 x 40 cm und benötigen bis zu 1,5 MB Speicherplatz. Sie müssen daher unbedingt auf eine internet-freundliche Größe angepasst werden. Zur Anpassung der Bilder könnt Ihr ein gewohntes Bildbearbeitungsprogramm nutzen. Ein kostenloses Programm zur Bildbearbeitung ist IrfanView, das unter Windows 9x/ME/NT/2000/XP/2003 oder Vista läuft. Es steht zum Download bereit unter Die Standardversion ist in englischer und deutscher Sprache. Die nächsten zwei Schritte wurden mit IrfanView vorgenommen und sind analog auch mit anderen Programmen möglich. 1) Unter dem Menüpunkt Image könnt ihr mit Resize/Resample die Bildgröße ändern. Meist reichen 30% der ursprünglichen Größe aus. Seite 12 von 20

13 Abbildung 15: Änderung der Bildgröße 2) Speichern Sie mit File / Save as... unter neuem Namen Ihr Foto im JPG bzw. JPEG- Format. Mit diesen zwei Arbeitsschritten erspart ihr euch und den Besuchern der Webseite viel Zeit. 5.2 Upload von Dateien und Bildern Dateien und Bilder könnt ihr sowohl im Backend- als auch im Frontend-Bereich der Webseite hochladen. Für den Upload von Bildern ist das Backend empfehlenswert, da hier eine Bildvorschau möglich ist. Dateiupload im Backend Für den Upload und die Dateiverwaltung nutzt im Backend die das Modul Datei/Dateiliste. 1) Klick Dateiliste Seite 13 von 20

14 Abbildung 16: Modul Dateiliste Klickt in der Dateiliste auf den Ordner, in dem Daten hochladen werden sollen.(pflanzen_bilder für Fotos in der Pflanzendatenbank) Abbildung 17: Einstellen von Bildern Seite 14 von 20

15 1) Eine Voransicht der Bilder (Thumbnails) ist zu sehen, wenn ihr im Kästchen Thumbnails anzeigen einen Haken setzt. 2)Mit einem Klick auf die grünen Symbole neben den Bildern öffnen ihr ein Kontextmenü zum Umbenennen, Kopieren und Löschen der Bilder. 3)Mit dem Button Neu können neue Verzeichnisse anlegt werden. 4)Für das Hochladen von Bildern und Dateien klickt ihr auf den Button Datei-Upload. In der angezeigten Eingabemaske können die Daten vom Rechner zum Upload ausgewählt werden. Es ist hier auch möglich, mehrere Dateien auf einmal hoch zu laden. Jetzt liegen die gewünschten Bilder im richtigen Format und der richtigen Größe bereit und können in eine Seite eingebunden werden. Bilder in die Webseite einbinden Hierfür wechseln ihr wieder in das Modul Web/Seite und wählt im Seitenbaum die zu bearbeitende Seite. 1) Legt ein Inhaltselement vom Typ Text m/bild an (siehe Kap. 0). 2) Tragt eine Überschrift und den Text ein 3) Klickt auf den Button Bild einfügen 4) In einem neuen Fenster öffnet sich die Dateiliste. Wählt den Ordner Bilder. Durch einen Klick auf den JPG Zeichen des Bildnamens wird das Bild in die Webseite eingefügt. Abbildung 18: Bilder einfügen Seite 15 von 20

16 Abbildung 19: Bildeigenschaften bearbeiten 5) Mit einem Rechtsklick auf das eingefügte Bild (1) könnt ihr ein Kontextmenü öffnen. Hier werden unter Bildeigenschaften (2) das Bild geöffnet. Dort kann eingestellt werden wie z.b. das Bild im Text liegen soll ( Umfließen ) und/oder den Abstand zum Text. Achtung: Im Texteditor ist kein proportionales Skalieren der Bildgröße möglich. Die Bilder werden verzerrt. Nutzt zum Anpassen der Größe daher ein Bildbearbeitungsprogramm. Seite 16 von 20

17 6. Zweisprachige Seiten Seiten in sorbisch Abbildung 20: Kontexmenü sorbisch Ihr öffnet wieder die Hauptseite. Web - Seite sorb. Gymn. Bautzen (in dem Fall eure Schule) Über Bearbeiten (gelber Stift) gelangst du auf die Textseite. Dort kannst du wiederum deine Texte eingeben wie unter Kap.3.2 beschrieben. 7. Arbeiten in der Pflanzendatenbank Entsprechend des Arbeitsblattes Pflanzensteckbrief könnt ihr, die durch euch kartierten Pflanzen in das Internet eingeben. Einloggen über das Backend (falls ihr nicht schon eingeloggt seid) Zuerst entsprechend Kapitel 4 die Bilder von Pflanzen über das Modul Datei/Dateiliste in die Rurik Pflanzen_Bilder hochladen und einfügen. Sind alle Bilder eingefügt Klick auf Liste (1) und Pflanzendatenbank (2) und es erscheint folgender Bildschirm. Seite 17 von 20

18 Abbildung 21: Arbeiten in der Pflanzendatenbank 1) Markiere den Button Datensatz anlegen Abbildung 22: Neuanlegen eines Pflanzendatensatzes Danach öffnet sich ein neuer Datensatz den du entsprechend vervollständigst. Als Beispiel-Datensatz: Sonnenblume Seite 18 von 20

19 Abbildung 23: Füllen eines Pflanzendatenbanksatzes Beachte dass im Feld Fundort und Flurname deutsche wie sorbische Bezeichnungen eingetragen werden müssen. Scrolle den Bildschirm nach unten und du kannst mit deinen Eintragungen fortfahren. Das Bild bzw. die Bilder können entsprechend Kapitel 4.3 eingefügt werden. Sind es mehrere Bilder einer Pflanze so können diese als Tabelle abgelegt werden. Z.B. Eiche im Frühjahr, Sommer, Herbst und Winter. 1. erzeuge eine Tabelle mit 2 Zeilen und x Spalten (x= Anzahl der Fotos) 2. füge das Bild in die einzelnen Spalten. 3. gebe jedem Bild die entsprechende Bildunterschrift Abbildung 24: Erstellen einer Tabelle für Fotos Seite 19 von 20

20 Speichern der Seite nicht vergessen Abbildung 25: Speichern der Pflanzendatenbank Anschließend kannst Du im Frontend das fertige Ergebnis betrachten. Seite 20 von 20