DR. WACHTER MALL KOLB & PARTNER SCHULUNGSUNTERLAGEN

DR. WACHTER MALL KOLB & PARTNER SCHULUNGSUNTERLAGEN 7. Dezember 2009

2. Inhalt 1. Inhalt 2 2. Grundlagen zu TYPO3 3 3. An- und Abmelden am System 3 3.1 Übersicht Backend 4 3.2 Funktion Hauptmenü 4 4. Grundlegende Bedienung 5 4.1 Symbolerklärungen 5 4.2 Menüstruktur 6 4.3.1 Neue Seiten erstellen 7 4.3.2 Seiteninhalt erstellen 8 4.3.3 Der Editor 10 4.3.4 Tabellen 12 4.3.5 Inhaltsübernahme aus anderen Quellen 14 4.4 Dateiupload 15 4.4.1 Ordner und Dateien anlegen 15 4.4.2 Ordner und Dateien löschen 17 4.5 Einbinden von Dateien 17 und Setzen von Links 4.5.1 Einbinden von Dateien 17 durch Links in einem Text 4.5.2 Links auf Seiten innerhalb von TYPO3 19 4.5.3 Links auf Seiten außerhalb von TYPO3 20 4.5.4 Shortcut 20 4.5.5 Links auf externe Seiten im Menü 22 4.6 Bilder einfügen 22 [ 2 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

2. Grundlagen zu TYPO3 TYPO3 dient als so genanntes Content-Management-System (CMS) der konsistenten Verwaltung von WWW-Inhalten, wobei die Inhalte der WWW-Seiten von ihrer Darstellung entkoppelt sind. In TYPO3 wird zwischen dem Frontend (FE), über das auf die WWW-Seiten zugegriffen wird, und dem Backend (BE), über das die Seiten gepflegt werden, unterschieden. Auch die BE-Schnittstelle kann plattformunabhängig mit WWW-Browsern wie Firefox oder Internet Explorer bedient werden. Die Integration eines einfachen HTML-Editors (Rich-Text-Editor RTE) erlaubt die Bearbeitung der Seiteninhalte ohne tiefgehende HTML-Kenntnisse. Abb: Schematischer Aufbau» 3. An- und Abmelden am System Der Zugang zum TYPO3-System erfolgt über den Link: http://www.drwachter.de/typo3. Als Zugangsdaten verwenden Sie bitte Ihre persöhnlichen Zugansdaten. Abb: Login Bildschirm im Browser [ 3 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Übersicht Backend Hauptmenü Seitenbaum Inhaltsbereich Funktionen Hauptmenü [1] [2] [3] [4] 1. Standardinhalte erstellen / bearbeiten / löschen von (z.b. Texte, Bilder) 2. Fertige Webseite anzeigen im Browser 3. Spezielle Inhalte erstellen / bearbeiten / löschen (z.b. News) 4. Dateien hochladen, um diese in Inhalten zu verlinken [5] 5. Persönliche Einstellungen bearbeiten, z.b. das Passwort [ 4 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4. Grundlegende Bedienung Hier werden die einzelnen Menüpunkte kurz erklärt. Menüpunkte, die Sie zur Erstellung und Bearbeitung von Seiten nicht benötigen, wurden ausgeblendet. 4.1 Symbolerklärungen Grundsätzlich erhalten Sie die Beschreibung eines Symbols bzw. Buttons, wenn Sie die Maus darüber bewegen und kurz warten. Für die Seitentypen ist dies nicht der Fall, deswegen sollen sie hier kurz erklärt werden. Nomale Seite Seite ist nicht im Menü Shortcut versteckte Seite Systemordner Neue Seite anlegen Neuer Datensatz anlegen Seite bzw. Seitenbaum neu laden Seite im Frontend aufrufen (Achtung PopUp-Blocker) Seiteneigenschaften bzw. Inhaltselement bearbeiten Seite bzw. Inhaltselement verstecken Seite bzw. Inhaltselement sichtbar machen Seite bzw. Inhaltselement verschieben Seitencache löschen Änderungen speichern Änderungen speichern und im Frontend anzeigen lassen Änderungen speichern und Ansicht schließen [ 5 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.2 Menüstruktur TYPO3 verwaltet Seiten in einer Baumstruktur, aus der sich direkt die Menüstruktur ergibt. Deswegen sollten Sie sich vor Beginn der Erstellung der Seiten die gewünschte Menüstruktur überlegen. Sie können die Reihenfolge der einzelnen Punkte nachträglich durch Kopieren und Verschieben noch ändern, sollten aber unbedingt das Löschen und anschließend neu Erstellen von Seiten mit dem gleichen Namen vermeiden. Dateien gleichen Namens in verschiedenen Ebenen sind jedoch zulässig Folgende Menüstruktur ist im Moment vorgegeben: Abb. 4.2.1 Menüleiste 1: Ansicht in TYPO3 [ 6 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.3.1 Neue Seiten erstellen Wählen Sie dazu im linken Menü von TYPO3 Seite aus (1), klicken Sie auf eine Seite in den Seitenbaum (2) und oberhalb des Seitenbaums im grauen Kasten rechts auf das Symbol (3). Legen Sie die Position der neuen Seite mit Klick auf einen der Pfeile fest. [1] [3] [2] Neue Seiten können immer nur eine Ebene unterhalb des Ausgangspunktes im Baum angelegt werden. Diese wird Ihnen unterhalb von Neuer Datensatz angezeigt. Wenn Sie eine Seite unterhalb von Systemhaus erstellen wollen, müssen Sie vor dem Aufruf des Assistenten die Seite zuerst einmal anklicken - So können Sie dann Neue Seiten innerhalb dieser Seite erstellen. Abb. 4.3.1.2 Position der Seite bestimmen [ 7 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Abb. 4.3.1.4 Standard-Vorlage Danach kommen Sie zum Vorlagen-Auswahlbildschirm. In der Regel sollten Sie die Main-Template verwenden. (Hier können noch weitere Templates verfügbar sein!) Abb. 4.3.1.5 Seitentitel festlegen Geben Sie nun den Seitentitel ein, speichern und schließen (Symbol mit Diskette und X) Sie die neu angelegte Seite. 4.3.2 Seiteninhalt erstellen Klicken Sie im linken Menü Seite an und wählen danach die entsprechende Seite, die bearbeitet werden soll, aus (bitte wie bereits erwähnt nicht das Symbol sondern den Seitennamen anklicken). Abb. 4.3.2.1 Seiteninhalt erstellen Wählen Sie nun Neuen Datensatz erstellen (kleines Seitensymbol unterhalb von Inhalt, Abb. 4.3.2.1, je nachdem wo Sie den Inhalt innerhalb der Vorlage einfügen wollen. Bitte beachten Sie, dass die Auswahlmöglichkeiten je nach benutzter Vorlage variieren können) und danach z.b. normalen Text aus. [ 8 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Abb. 4.3.2.2 Inhaltstyp auswählen In der darauf folgenden Ansicht wechseln Sie bitte in das Tab Allgemein. Der Text, der in das Feld Überschrift eingetragen wird, erscheint auf der Seite linksbündig, fett und in großer Schrift, der Inhalt des Textfeldes als Text. Abb. 4.3.2.3 Die Überschrift Haben Sie keinen Haken im Punkt Zweite Optionspalette anzeigen, so sehen Sie nur eine reduzierte Ansicht. Es empfiehlt sich, aus Gründen des besseren Überblicks, diese Funktion einzuschalten. Der Haken muss nur einmal gesetzt werden, das System speichert die Einstellung. [ 9 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.3.3 Der Editor Im Tab Text kann im Editor Text geschrieben oder aus bestehenden Seiten eingefügt werden. Für weitere Informationen zur Übernahme von Inhalten lesen Sie bitte die nächsten Abschnitte Abb. 4.3.3.1 Der Texteditor [ 1 0 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Der Texteditor bietet im Wesentlichen alle wichtigen Formatierungsoptionen, die auch aus Word bekannt sind, die Symbole sind dieselben. Symbolerklärung: Bitte beachten Sie: Mit dem Drücken der Enter-Taste im Text erstellen sie einen neuen Absatz! Um einen Zeilenumbruch zu erzwingen muss die Shift-Taste und Enter gedrückt werden! Zum Abschluss speichern und schließen Sie die Seite (Diskettensymbol mit kleinem x). Im Menüpunkt links Anzeigen kann die Seite so eingesehen werden, wie sie später online erscheinen wird. [ 1 1 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.3.4 Tabellen Um eine Tabelle auf einer Seite zu erstellen klicken Sie auf das Tabellensymbol im Editor. Abb. 4.3.4.1 Neue Tabelle einfügen Es erscheint ein neues Fenster mit Einstellungsmöglichkeiten für Titel und Zusammenfassung, sowie Anzahl der Zeilen und Spalten der Tabelle. Abb. 4.3.4.2 Fenster: Tabelle Die eingefügte Tabelle ist nun blau gestrichelt umrandet. So sind die einzelnen Zellen (ähnlich wie in Excel) der Tabelle visuell voneinander abgegrenzt. Die leeren Zellen können nun mit Text aufgefüllt werden. [ 1 2 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.3.5 Inhaltsübernahme aus anderen Quellen Inhalte können aus verschiedenen Quellen nach TYPO3 übernommen werden. Aus Word z.b. kann per Copy&Paste in den Editor eingefügt werden. Die in Word angelegten Formatierungen übernimmt der Editor, soweit dies mit html umsetzbar ist, dadurch ist das System limitiert. Ein generelles Problem ist, dass im Moment Firefox das Einfügen per Editor nicht zulässt. Sie können diese Schutzfunktion durch drücken des Tastaturbefehls für Einfügen, Strg+V, umgehen. Probleme bereiten z.b. Aufzählungszeichen. Diese formatieren Sie besser im Editor selbst. Wenn Ihnen die Formatierung nicht zusagt nachdem Sie die Inhalte in den Editor eingefügt haben, kann die Formatierung entfernt werden. Klicken Sie dazu auf den Button mit dem A, in Abbildung 4.3.3.3 direkt unterhalb des Pulldown-Menüs ( Normal ). Abb. 4.3.5.1.Editor in den html-modus umschalten Sie können auch eine bestehende Seite im Internet Explorer markieren und kopieren. Zum Teil bleibt so auch die Formatierung der Seite erhalten. Sie sollten aber das Ergebnis auf alle Fälle überprüfen. Weiterhin kann bereits bestehender html-code direkt eingefügt werden. Dazu schalten Sie den Editor in den html- Modus um. Danach können Sie in das Feld Text direkt den Code für Ihre Seite einfügen. Bitte beachten Sie, dass verwendete StyleSheets und Scripten nicht übernommen werden können. Achten Sie also darauf, dass Ihr Code bereinigt ist. [ 1 3 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Speziell beim Einfügen eines Textes aus dem Programm Microsoft Word sollte unbedingt nach dem Einfügen und vor dem ersten Abspeichern des Dokuments darauf geachtet werden, dass alle Formatierungen entfernt werden. Dazu klicken Sie auf das Besen-Symbol im linken Bild und setzen den Haken bei MS Word-Formatierung. Bestätigen Sie den Vorgang mit OK. Abb. 4.3.5.2 / 4.3.5.3 Formatierung entfernen [ 1 4 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.4 Dateiupload 4.4.1 Ordner und Dateien anlegen Um einen neuen Ordner zu erstellen, klicken Sie im linken Menü Dateiliste (1) an. Im mittleren Menü erscheint ähnlich dem Seitenbaum eine Ordnerstruktur. Auf die Bezeichnung des Ordners (2) klicken, rechts erscheint die zugehörige Struktur, falls vorhanden. Oberhalb der Struktur auf das Icon Neu (3) klicken. Danach erscheint rechts Neuer Ordner. Es ist möglich, mehrere Ordner auf einmal zu erstellen. Abb. 4.4.1 Neue Ordner erstellen Abb. 4.4.2 Mehrere Ordner anlegen [ 1 5 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Zum Hochladen von Dateien im linken Menü Dateiliste (1) auswählen, auf die Bezeichnung des Ordners (2) klicken und dann Datei-Upload (3) im Menü oben rechts klicken. Abb. 4.4.3 Das Upload-Menü Abb. 4.4.4 Dateiupload Es können hier ebenfalls mehrere Dateien gleichzeitig hochgeladen werden. Die Datei wird in den Ordner geladen, der unterhalb der Kopfzeile Datei Upload angegeben ist. (vgl. Punkt 3 in Abb. 4.4.3) Dateinamen, die Leer- oder Sonderzeichen bzw. Umlaute enthalten, werden vom Programm geändert: Leer- und Sonderzeichen werden in Unterstriche umgewandelt, die Umlaute in den Vokal und ein E. Entfernen Sie trotzdem möglichst alle Sonderzeichen vor dem Hochladen. [ 1 6 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.4.2 Ordner und Dateien löschen Um Dateien oder Ordner zu löschen klicken Sie im Modul Dateiliste mit der rechten Maustaste auf das Symbol der Datei bzw. des Ordners. Es öffnet sich ein Kontextmenü. Hier kann die Datei gelöscht werden. Abb.4.4.2.1 Löschen von Dateien und Ordnern 4.5 Einbinden von Dateien und Setzen von Links 4.5.1 Einbinden von Dateien durch Links in einem Text Klicken Sie bitte im linken Menü auf Seite und wählen danach die zu ändernde Seite aus. Klicken Sie dann auf den Text, in den der Link eingefügt werden soll. Abb. 4.5.1.1 bisheriger Inhalt der Seite Markieren Sie im Editor den Text, der in einen Link umgewandelt werden soll und klicken das Icon Link erstellen an. Abb. 4.5.1.2 Einfügen des Links Danach klicken Sie in dem neuen Popup-Fenster den Reiter Datei an und wählen den entsprechenden Ordner und die vorher hochgeladene Datei durch einen Klick auf Ihren Namen aus. [ 1 7 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Abb. 4.5.1.3 Die entsprechende Datei auswählen Das Fenster schließt sich nach dem Anklicken der Datei sofort. Der neue Dateilink ist wie üblich an der blauen Schrift im Texteditor erkennbar. [ 1 8 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.5.2 Links auf Seiten innerhalb von Typo3 Wenn Sie innerhalb Ihrer neuen Seite Links setzen wollen, markieren Sie wieder den Text, der für den Link vorgesehen ist und klicken auf das Hyperlink -Symbol. Suchen Sie die Seite, auf die Sie verlinken wollen und wählen Sie die durch einen Klick aus. Abb. 4.5.2.1 Die Zielseite auswählen Eine Verlinkung innerhalb von Typo3 ist einer Verlinkung durch externe URL wenn möglich immer vorzuziehen, da erstere auch dann funktional bleibt, wenn die verlinkte Seite verschoben wird, während letztere aktualisiert werden muss. [ 1 9 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.5.3 Links auf Seiten außerhalb von Typo3 Um Links auf Seiten, die sich außerhalb von Typo3 befinden, zu erstellen, wiederholen Sie bitte den oberen Schritt und wählen statt Datei Externe URL. Tragen Sie hier die URL der Seite, auf die verlinkt werden soll, ein und klicken Link setzen. Abb.4.5.3.1 Eintragen der URL 4.5.4 Shortcut Um einen Link in einem der Menüs zu erstellen, benutzen Sie bitte einen Shortcut. Dies ist eine eigene Seite, deren einzige Funktion die Weiterleitung zu einer anderen Seite innerhalb von Typo3 ist. Erstellen Sie eine neue Seite, klicken Sie im linken Menü auf Liste (1), wählen Sie die neu angelegte Seite aus (2) und klicken auf das Bearbeiten -Symbol (der kleine gelbe Bleistift) (3) oben links. Abb. 4.5.4.1 Das Bearbeiten -Symbol Wechseln Sie auf das Tab Allgemein und wählen Sie anschließend unter Typ den Eintrag Shortcut (2) aus. Die Nachfrage zur Veränderung der Eingabefelder bestätigen Sie mit Ja Abb. 4.5.4.2 Das Seitentyp-Menü [ 2 0 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Mit dieser Methode kann der Typ einer Seite immer verändert werden. Alternativ kann bereits beim Erstellen der Seite Shortcut als Typ ausgewählt werden. Wechseln Sie auf das Tab Shortcut (1). Klicken Sie bitte auf das Öffnen -Symbol neben dem Feld Shortcut zur Seite (2) und wählen Sie im Popup-Fenster die Seite aus, zu der verlinkt werden soll (3). Abb. 4.5.4.3 Die Zielseite auswählen Die Zielseite wird anschließend im Bereich Shortcut zur Seite: aufgelistet. Um den Verweis zu löschen, klicken Sie bitte einmal auf den Eintrag um ihn zu markieren und klicken Sie anschließend auf das X rechts neben dem Anzeigefeld. Abb. 4.5.4.4 Anzeige nach der Prozedur und Lösch-Icon Vergessen Sie bitte nicht, die Seite zu speichern, sonst werden Änderungen im Feld Shortcut zur Seite nicht wirksam. [ 2 1 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

4.5.5 Links auf externe Seiten im Menü Wenn Sie wie unter 4.5.4 beschrieben anstatt Shortcut Externe URL wählen, erscheint das Tab URL. Dort können Sie einen Link auf eine externe Seite anlegen, der im Menü erscheint. Abb. 4.5.5.1 Seitentyp externer Link auswählen Abb. 4.5.5.2 Externer Link im Menü anlegen Tragen Sie dazu im Feld URL die Seite ein, auf die Sie verlinken wollen. Bitte beachten Sie, dass der Typ http schon vorgeben ist. Tragen Sie also im Feld URL das http:// nicht mehr mit ein. 4.6 Bilder einfügen Um ihre Seiten mit Bildern zu versehen gehen Sie wie folgt vor: Zuerst wählen Sie die Seite aus (1) und legen ein neues Inhaltselement an (2). Abb. 4.6.1 Neues Inhaltselement anlegen [ 2 2 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Als nächstes wählen Sie für den Seiteninhalt Text mit darunter liegendem Bild Abb. 4.6.2 Seiteninhalt wählen Nun können Sie dem Inhaltselement eine Überschrift geben Abb. 4.6.3 Überschrift einfügen Dort kann auch ein Text eingegeben werden. Unter dem Reiter Text gelangen Sie zum Eingabefeld. Abb. 4.6.4 Text einfügen [ 2 3 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Mit einem Klick auf Media (1) gelangen Sie auf diese Seite. Abb. 4.6.5 Tab Media Um nun Bilder online zu stellen haben Sie zwei Möglichkeiten. Die eine besteht darin ein bereits hochgeladenes Bild (siehe Abschnitt 4.4 Dateiupload) zu verwenden (2), die andere eine Datei lokal von ihrem eigenen PC auszuwählen (3). [ 2 4 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

Weiterhin muss die Position des Bildes im Text bestimmt werden (4): Zur Auswahl stehen: oben mittig / rechts / links unten mittig / rechts / links im Text rechts / links Abb. 4.6.6 Position des Bildes Unter Image Dimension kann die Bildgröße gegebenenfalls in Pixeln anpasst werden (5). Wird hier nichts eingestellt, so passt Typo3 das Bild automatisch der Seitegröße an. Mit Klick-Vergrößerung wird das (kleine) Vorschaubild auf der Seite in einem neuen Fenster vergrößert angezeigt (6). Außerdem besteht die Möglichkeit einen Bildtext (erscheint unter dem Bild), einen Alternativtext (wird angezeigt falls das Bild nicht dargestellt werden kann) und einen Titel (Mauszeiger ruht über dem Bild) zu vergeben (7). Abb. 4.6.6 Inhaltselement mit Bild. Möchten Sie mehrere Bilder auf der Seite? Wiederholen Sie den Punkt Datei auswählen. [ 2 5 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9

[ 2 6 ] S c h u l u n g s u n t e r l a g e n _ d r w a c h t e r - 0 7. D e z e m b e r 2 0 0 9