Erstellung von Homepageinhalten Kurs im Mehrgenerationenhaus in Regenstauf

Transkript

1 Erstellung von Homepageinhalten Kurs im Mehrgenerationenhaus in Regenstauf 1 Unsere Homepage / Unsere Site Nachfolgend ist die Bezeichnung Homepage und Site gleichwertig. (Kurzbesprechung der Musterseite) 2 Typo3 ein CMS-System System Die Homepage wird mit einem CMS (Content-Management-System) erstellt. Aus wikipedia: TYPO3 wird auf einem Webserver installiert und mit einem Webbrowser benutzt. Außer einem Browser ist zur Benutzung keine Zusatzsoftware erforderlich. Die Nutzung von TYPO3 gliedert sich in drei große Bereiche: Die Erstellung des Website-Designs, die Konfiguration von TYPO3 mittels TypoScript und die Eingabe des Website-Inhalts die gegebenfalls per "Drag and Drop" erfolgen kann. TYPO3 enthält ein sog. Backend, das der Pflege der Homepage dient und ein Frontend nd, das die Homepage selbst darstellt. Im TYPO3- Backend wird die Website verwaltet. Dort werden Inhalte erstellt und bearbeitet. Ein Text-Editor, in dem Inhalte wie in einer Textverarbeitung (z. B. Word) formatiert werden können, erlaubt es gerade Anwendern ohne HTML-Kenntnisse redaktionelle Arbeit zu erledigen. Man kann also von jedem PC der Welt, der Zugang zum Internet hat,, mit den eigenen Zugangsdaten bearbeiten. Homepageerstellung mit typo 3 Seite 1 Ludwig Erl

2 3 Paralleles Arbeiten mit dem Backend und dem Frontend. Wir arbeiten mit dem Internet-Explorer Explorer. Aufruf in 2 Registerkarten. Hinweis: Wir arbeiten nicht auf der Originalseite des Mehrgenerationenhauses, auses, sondern nutzen eine Testseite. Damit können wir ohne große Scheu Einträge und Veränderungen in beliebiger Art vornehmen. Frontend Backend regenstauf.de Die Site steht zum Betrachten zur Verfügung Eingabe von Benutzername: Passwort: 4 Mögliche Anmeldungen: Benutzername Passwort Berechtigung (vorerst) tl1 Hund Admin tl2 Hase Admin tl3 Maus Admin tl4 Katze Admin Vorsicht!!!! Adminrechte können bei unvorsichtiger und fehlerhafter Arbeit im Backend zu Datenverlusten und im schlimmsten Fall zur Zerstörung der Site führen! Man kann damit zwischen dem Frontend und Backend ohne Hindernis wechseln. Homepageerstellung mit typo 3 Seite 2 Ludwig Erl

3 5 Die Benutzeroberfläche von typo Aufbau Die Arbeitsoberfläche von TYPO3 ist in drei Hauptbereiche und eine Benutzerleiste unterteilt. Links sehen Sie die Modulleiste. Hier wählen Sie aus, welche Art von Arbeiten Sie durchführen wollen. In der Mitte sehen Sie den Seiten- oder Dateienbaum. Hier wählen Sie aus, welche Web-Seite oder welchen Datei-Ordner Sie bearbeiten wollen. Rechts sehen Sie die Arbeitsfläche. Hier führen Sie Ihre Arbeiten durch. Oben sehen Sie die Benutzerleiste. Hier finden Sie benutzerspezifische Informationen / Funktionen. Die Anordnung der Bereiche entspricht auch der Reihenfolge bei der Arbeit: Zuerst in der Modulleiste das Modul auswählen (z.b. Web / Seite), dann im Seitenbaum die Web-Seite auswählen (z.b. Wegbeschreibung) und dann in der Arbeitsfläche die eigentliche Arbeit an dieser Web-Seite durchführe. Nach getaner Arbeit das TYPO3-Backend mit Logout verlassen. Homepageerstellung mit typo 3 Seite 3 Ludwig Erl

4 5.1 Modulleiste Jeder Benutzer sieht nur die Module, zu deren Verwendung er berechtigt ist. Durch Klicken auf die Gruppenbezeichnungen mit den Pfeil-Symbolen können die Modulgruppen zu- und aufgeklappt werden: 5.2 Vergleich des Seitenbaums mit der Menüstruktur im Frontend der Site Für alle die an der Site arbeiten ist es wichtig, den Gleichlauf der Menüstruktur der Site mit der Dateistruktur in typo3 zu erkennen. Homepageerstellung mit typo 3 Seite 4 Ludwig Erl

5 Vorgehen im Backend: o Ansehen im Frontend Im Werkzeugfenster Ansehen anklicken o Aussehen im Backend Auf die Pfeilsymbole gehen und Ordner öffnen Ordner schließen o Dabei Datei- und Menüstruktur vergleichen 5.3 Die Arbeitsfläche Der große rechte Bereich ist die detaillierte Arbeitsoberfläche. Hier werden die einzelnen Bestandteile des von Ihnen ausgewählten Elementes angezeigt. Die Bearbeitungsoptionen (und damit auch die Art der Darstellung in der Arbeitsfläche) sind abhängig vom jeweiligen Modul, mit dem Sie gerade arbeiten. Details dazu finden Sie in den folgenden Kapiteln. Hier zeigen wir Ihnen als ein Beispiel die Arbeitsfläche für das Editieren eines Inhaltselementes: Homepageerstellung mit typo 3 Seite 5 Ludwig Erl

6 6 Seiten und u Seiteninhalte 6.1 Eine neue Seite anlegen Die Grundstruktur Ihres Web-Bereiches ist bereits in TYPO3 angelegt. Sie fügen also an einer beliebigen Stelle Ihres Seitenbaums eine neue Seite ein. Dazu verwenden Sie das Modul Web / Seite. Schritt 1: Suchen Sie im Seitenbaum die Seite, unter der oder neben der Sie eine neue Seite anlegen wollen. Klicken Sie auf das Icon dieser Seite und wählen Sie im Kontextmenü den Punkt Seitenaktionen/Neu Neu. Schritt 2: In der Arbeitsfläche erscheint nun das Auswahlfenster Neuer Datensatz. Wählen Sie den Menüpunkt Erzeuge neue Seite. Schritt 3: Wählen Sie nun eine Position für Ihre neue Seite. Schritt 4: In manchen TYPO3-Installationen erscheint nun noch ein weiteres Auswahlfenster, in dem Sie das Seitenlayout aus mehreren verschiedenen Möglichkeiten (Vorlage, Template) auswählen. Denkbar wäre beispielsweise die Wahl zwischen zweispaltigen Seiten mit Nachrichtenbereich und einspaltigen Seiten ohne diese Funktion. In manchen TYPO3 Installationen können Sie diese Auswahl erst später treffen (in einem Auswahlmenü Vorlage auswählen, Select a template bei den Seiteneigenschaften, siehe Schritt 5 oder es gibt nur ein einheitliches Seitenlayout ohne Auswahl. Schritt 5: Nun erscheint die Arbeitsfläche für die Seiteneigenschaften (Page properties). Setzen Sie, falls es nicht schon gesetzt ist, das Häkchen Seite verstecken (Hide page). Diese Vorgehensweise ist anzuraten, da sich in der neu erstellten Seite noch kein Inhalt befindet und diese daher noch nicht öffentlich sichtbar sein sollte. Danach geben Sie im Eingabefeld Seitentitel (Pagetitle) die kurze Bezeichnung an, unter der die Seite in der Navigationsleiste aufscheinen soll. In manchen TYPO3-Installationen können Sie auch weitere Seiteneigenschaften angeben (siehe dieabschnitte und 6.3). Schritt 6: Klicken Sie auf Speichern und schließen :. Fertig! Ihre neue Seite ist angelegt und scheint im Seitenbaum auf. Allerdings ist die Seite noch leer, sie hat noch keinen Inhalt (siehe Abschnitt 2.2) und sie ist auch noch nicht öffentlich sichtbar (siehe Abschnitt 2.3). Wir wollen nun dieses Vorgehen auf unserer Testseite einüben. Die Menüstruktur besprechen wir gemeinsam. (Besprechung an der Tafel) Ein Vorschlag von mir: Wir bauen das Hauptmenü des Mehrgenerationenhauses zu Textzwecken auf. Jeder Teilnehmer übernimmt dabei ein bis zwei Hauptmenüpunkte. Anschließend bewegen wir uns zu den Untermenüpunkten. Homepageerstellung mit typo 3 Seite 6 Ludwig Erl

7 6.2 Seiteninhalte erstellen Einzelne Seiten bestehen aus den Seitenangaben (siehe oben) und einem oder mehreren Inhaltselementen. Für die Inhaltselemente stehen verschiedene Inhaltstypen zur Verfügung, wie z.b. Text, Text mit Bild, nur Bilder, etc. Zu jedem Inhaltstyp stellt Ihnen TYPO3 eine eigene Eingabemaske in der Arbeitsfläche mit Feldern für die erforderlichen Angaben zur Verfügung. Tipp: Verwenden Sie besser nicht nur einen Textblock für die ganze Seite, sondern legen Sie für jeden logisch für sich stehenden Teil der Seite ein eigenes Inhaltselement an. Dies macht es Ihnen leichter, die Seite später um weitere Informationen zu ergänzen oder die Reihenfolge der Informationen zu verändern oder einzelne Inhalte vorübergehend unsichtbar zu machen. Hier wird Ihnen gezeigt, wie Sie zunächst die Hauptüberschrift der Seite und dann einen Textblock in die Seite einfügen. Diese Trennung in zwei Inhaltselemente macht es Ihnen möglich, bei Bedarf zwischen Überschrift und normalem Text noch einen aktuellen Hinweis oder dergleichen einzufügen. Auch dafür verwenden Sie das Modul Web- Seite Seitenüberschrift einfügen Schritt 1: Klicken Sie im Seitenbaum auf die Seite, in der Sie den Inhalt einfügen wollen. Schritt 2: In der Arbeitsfläche erscheint eine Übersicht über die Seite, die noch leer ist. Klicken Sie auf das Icon mit dem grünen Pluszeichen: (Neuen Inhalt einfügen. Schritt 3: Wählen Sie den Typ des Inhaltselements aus, in unserem Fall ein Normales Textelement. Hinweise zu den anderen Inhaltstypen später. Schritt 4: Es erscheint die Arbeitsfläche für das Editieren eines Inhaltselements. Im Fall der Seitenüberschrift geben Sie nur im Reiter Allgemein die Überschrift ein und lassen alle anderen Felder leer. Schritt 5: Klicken Sie auf das Icon Speichern und anzeigen. Sie sehen nun die Seite in einem zweiten Browser-Fenster/einem zweiten Tab. Kontrollieren Sie die Überschrift auf Tippfehler und korrigieren Sie etwaige Fehler im ursprünglichen TYPO3-Fenster. Wenn alle Fehler korrigiert sind, klicken Sie auf das Icon Speichern und schließen. Fertig! Ihre Seite enthält bereits die Überschrift. Allerdings fehlt noch der restliche Inhalt Seite ist auch weiterhin noch nicht öffentlich sichtbar. Tipp: Klicken Sie niemals auf andere Seiten im Seitenbaum oder auf andere Module in der Modulleiste, solange Sie Ihre Eingabe noch nicht gespeichert haben! Ihre Eingaben würden in diesem Fall verloren gehen und Sie müssten alles, was noch nicht gespeichert wurde, nochmals eingeben. Homepageerstellung mit typo 3 Seite 7 Ludwig Erl

8 6.2.2 Text in die Seite einfügen Nun erstellen Sie ein zweites Inhaltselement, und zwar den Text, der unterhalb der Überschrift erscheinen soll. Im Schritt 1 sehen Sie jetzt schon das Inhaltselement für die Überschrift, und Sie klicken auf das Icon mit dem grünen Pluszeichen unterhalb der Überschrift, um das neue Inhaltselement dort einzufügen. Im Schritt 2 lassen Sie das Feld für die Überschrift leer und geben im Feld für den Text den gewünschten Inhalt ein. Es erscheint hier der Rich Text Editor (siehe 5.3) mit relativ vielen Icons für die Formatierung des Textes und für das Einfügen von Bildern, Links und Tabellen. Falls Sie einen älteren oder ungewöhnlichen Web-Browser verwenden, der den Rich Text Editor nicht unterstützt, erscheint hier stattdessen ein einfaches Eingabefeld, in dem Sie einen oder mehrere Absätze von Text in der normalen Schrift eingeben können. Wir geben jetzt Kurztexte in die jeweiligen Seiten ein Sichtbarkeit Wenn die Seite keine Fehler mehr enthält, dann klicken Sie ebenfalls im Modul Web / Seite oder Web / Liste ganz oben auf das Icon Seiteneigenschaften editieren, schalten das Häkchen Seite verstecken (siehe Bild Seite Anzeigen 1 ) aus und speichern diese Änderung mit dem Icon Speichern und schließen. Alternativ können Sie auch im Seitenbaum mit Rechtsklick das Kontextmenü dieser Seite öffnen und darin den Menüpunkt Sichtbar auswählen (siehe Bild Seite Anzeigen 2 ). Seite Anzeigen 1 Homepageerstellung mit typo 3 Seite 8 Ludwig Erl

9 Seite Anzeigen 2 Fertig! Nun ist die Seite öffentlich sichtbar und erscheint auch automatisch in der Navigation und in der Sitemap Ihrer Web-Site. Nachträgliche Änderungen der Seiteneigenschaften und der Seiteninhalte können Sie jederzeit im Modul Web / Seite oder Web / Liste durch Anklicken der entsprechenden Stift- Symbole durchführen. Auch dabei dürfen Sie nicht das Speichern der Änderungen vergessen Seiten und Inhalte löschen Zum Löschen von Inhaltselementen steht Ihnen das Papierkorb-Icon (Element löschen,) zur Verfügung. Analog können Sie unter Seiteneigenschaften bearbeiten auch die gesamte Seite mit dem Papierkorb-Icon löschen. Wenn Sie eine Seite mit Unterseiten löschen wollen, müssen Sie zuerst alle Unterseiten löschen oder an eine andere Stelle verschieben und können erst dann die Seite, die keine Unterseiten mehr besitzt, löschen. Tipp: Wenn Sie mehrere Seiten löschen oder verschieben wollen, können Sie das etwas übersichtlicher im Modul Web / Liste (Web/ List) tun, wobei Sie mit Erweiterte Ansicht neben jeder Seite einen Balken mit allen Icons für alle möglichen Aktionen erhalten. Tipp: Wenn Sie ein Inhaltselement oder eine Seite nicht für immer löschen, sondern nur vorübergehend unsichtbar machen wollen, verwenden Sie stattdessen die unten angeführten Möglichkeiten zur Sichtbarkeit und zum Ablaufdatum. Seiten: 6.3 Die wichtigsten Icons sichtbare Seite unsichtbare Seite (hidden) Seite mit Zugriffsbeschränkung Seite mit Zeitbeschränkung Seite nicht im Menü englische Version der Seite (bzw. Übersetzte Version der Seite) Shortcut (Weiterleitung zu einer anderen Seite) Externe URL Homepageerstellung mit typo 3 Seite 9 Ludwig Erl

10 Inhaltselemente: sichtbares Textelement unsichtbares Textelement (hidden) deutsches (deutschsprachiges) Inhaltselement großbritannisches (englischsprachiges) Inhaltselement und analog für andere Länder und andere Sprachen, je nach Umfang der Webseite Seiten und Inhalte bearbeiten: Neue Seite anlegen Neues Inhaltselement anlegen Editieren oder Eigenschaften verändern Seite verschieben Inhaltselement verschieben nach oben verschieben nach unten verschieben unsichtbar machen (hide) sichtbar machen (unhide) löschen Listenelement löschen Bild oder Datei auswählen kopieren (copy) ausschneiden (cut) einfügen innerhalb (paste into) einfügen nachher (paste after) speichern und weiter arbeiten speichern und anzeigen speichern und schließen schließen ohne speichern (Eingaben gehen verloren) Seite anzeigen (Vorschau, view, preview) Arbeitsfläche in neuem Fenster öffnen Änderungsverlauf anzeigen auf letzten gespeicherten Stand zurückgehen Hilfe 3. Der Rich Text Editor Für die Inhaltstypen Text und Text mit Bild steht Ihnen in TYPO3 der so genannte Rich Text Editor(RT RTE) zur Verfügung (siehe 5.3) Dies ist ein sehr mächtiger, Word-ähnlicher Editor, der innerhalb Ihres Web-Browsers läuft und ein einfaches und intuitives Arbeiten am Bildschirm ermöglicht. Mit Hilfe des RTE können Sie Ihre Texteformatieren und Bilder, Tabellen len oder Links einfügen. Die Icons des RTE sind mit einer sensitiven Hilfe versehen. Das heißt, wenn Sie mit dem Mauszeiger über die Icons fahren, wird Ihnen deren Funktion angezeigt. Eine kurze Beschreibung der wichtigsten Icons folgt unten. Anmerkung: Welche Formatierungs-Funktionen der Rich Text Editor Ihnen anbietet und welche Icons Ihnen deshalb angezeigt werden, hängt von der Konfiguration des TYPO3-Systems und von den darin eingerichteten Layout-Vorgaben (Templates) ab. Es kann deshalb sein, dass Sie mehr oder weniger Icons sehen als hier abgebildet sind. Homepageerstellung mit typo 3 Seite 10 Ludwig Erl

11 3.1 Links setzen Beschreibung aus wikipedia Ein Hyperlink, kurz Link (engl. Verknüpfung, Verbindung, Verweis ), oder elektronischer Verweis ist ein Querverweis in einem Hypertext, der funktional einen Sprung an eine andere Stelle innerhalb desselben oder zu einem anderen elektronischen Dokument ausführt. Wird der Hyperlink ausgeführt, wird automatisch das in dem Hyperlink angegebene Ziel aufgerufen. Durch das Hypertextsystem können aber auch andere, in demselben System oder an das System angeschlossene Dateien aufgerufen werden. So können Hyperlinks z. B. auch genutzt werden, um Filme, Bilder und Animationen zu erreichen oder Dateien auf einen Computer herunterzuladen. Im Allgemeinen wird der Begriff auf das World Wide Web bezogen. Das Konzept von Hyperlinks entspricht logisch dem Querverweis aus der konventionellen Literatur, bei der das Ziel des Verweises allerdings in der Regel manuell aufgesucht werden muss. Homepageerstellung mit typo 3 Seite 11 Ludwig Erl