1. Anmeldung Das Backend von Typo3 (aktuell wird die Version 4.5.37 verwendet) ist unter www.schulungen.htwt3.info/typo3 verfügbar. Da die Seite nur für interne Zwecke gedacht ist, ist der Zugriff per htaccess geschützt. Um die Schulungsumgebung öffnen zu können sind folgende Daten einzugeben: Benutzer: schulungen; Passwort: aristypo3. Auch für den Zugriff auf Typo3 selbst sind eine Benutzerkennung und ein entsprechendes Passwort erforderlich. In unserem Fall entspricht der Username ihrem Nachnamen (in Kleinbuchstaben, Umlaute ausgeschrieben z.b. ae). Das Passwort lautet aris2014 und sollte nach der erstmaligen Anmeldung im System geändert werden. Abbildung 1: Anmeldemaske von Typo3 2. Benutzungsoberfläche Wie in der nachfolgenden Abbildung dargestellt, ist der Arbeitsbereich im Backend von Typo3 in drei Bereiche untergliedert: Links: Modulleiste zur Übersicht der verfügbaren Funktionen Mitte: Navigationsansicht (wo bin ich gerade, wo mache ich etwas) Rechts: Detailansicht (z.b. Inhalte editieren, etc.) Abbildung 2: Der Arbeitsbereich von Typo3 Seite 1 von 17
3. Benutzereinstellungen ändern Über den Menüpunkt User Tools - Einstellungen (vgl. Abbildung 3) in der Modulleiste von Typo3 können Einstellungen wie das Passwort, die Sprache der Benutzeroberfläche und ähnliches geändert werden. Abbildung 3: Persönliche Einstellungen ändern 4. Seiteneigenschaften bearbeiten, neue Seiten anlegen und Seiten löschen In Typo3 gibt es in der Regel stets mehrere Möglichkeiten um bestimmte Aufgaben zu erledigen. Dies soll nachfolgend am Beispiel der Erstellung einer neuen Seite demonstriert werden. Wird in der Modulleiste der Menüpunkt Web Seite ausgewählt, so wird im mittleren Bereich der Benutzungsoberfläche (Navigationsansicht) eine Übersicht der momentan im System vorhandenen Seiten angezeigt, wobei die Struktur dieser Übersicht dem Windows-Explorer ähnelt. Um eine neue Seite zu erzeugen gibt es nun mehrere Möglichkeiten. Zum einen kann bei einer bereits vorhandenen Seite mit einem Klick der rechten Maustaste ein Kontextmenü geöffnet werden, welches verschiedene Funktionen zum Editieren, anlegen und löschen von Seiten zur Verfügung stellt. Abbildung 4: Kontextmenü zum Aufruf verschiedener Funktionen Seite 2 von 17
Die unmittelbar über das Kontextmenü aufrufbaren Funktionen bieten dabei folgende Möglichkeiten: Ansehen über diese Funktion kann eine Vorschau der gegenwärtig ausgewählten Seite im Browser aufgerufen werden (wie stellen sich die Inhalte für den Endnutzer dar) Disable bietet die Möglichkeit Seiten auszublenden bzw. zu verstecken, so dass diese für Endanwender auf dem Webauftritt nicht mehr sichtbar sind Bearbeiten über diesen Punkt können die Eigenschaften einer Seite editiert werden (z.b. Titel, etc.) Info Übersicht der wichtigsten Parameter einer Seite (z.b. Titel, Gültigkeitsdatum, Zugriff, etc.) Erstellungsverlauf/Rückgängig machen diese Funktion stellt eine Liste der zuletzt getätigten Aktionen zur Verfügung und bietet die Möglichkeit, Bearbeitungsschritte wieder rückgängig zu machen Weiterführende Funktionen zum Anlegen und löschen von Seiten können beim Kontextmenü über den Punkt Page Actions aufgerufen werden (vgl. Abbildung 4): Neu Anlegen einer neuen Seite Ausschneiden über diese Funktion können bestehende Seiten an eine andere Stelle im Seitenbaum verschoben werden Kopieren bietet die Möglichkeit eine Kopie einer bestehenden Seite zu erstellen Löschen löschen einer Seite Die Auswahl eines der beiden Menüpunkte Ausschneiden oder Kopieren bewirkt dabei, dass bei einem erneuten Aufruf des Kontextmenüs weitere Funktionen angeboten werden, über die die Position der zu kopierenden bzw. der zu verschiebenden Seite im Seitenbaum bestimmt werden kann. Abbildung 5: Kontextmenü zum Anlegen und löschen von Seiten Über den Menüpunkt Einfügen nach wird die entsprechende Seite auf derselben Ebene im Seitenbaum eingefügt, wie die Seite, über die das Kontextmenü aufgerufen wurde. Mittels dem Menüpunkt Einfügen in wird die entsprechende Seite als Seite 3 von 17
Unterseite derjenigen Seite in den Seitenbaum integriert, über die das Kontextmenü aufgerufen worden ist. Anzumerken ist in diesem Zusammenhang, dass es seit der Version 4.5 in Typo3 auch möglich ist, Seiten per Drag&Drop zu verschieben bzw. zu kopieren. Um Seiten zu verschieben genügt es, diese mit gedrückter, linker Maustaste an die neue Position im Seitenbaum zu ziehen. Für das Kopieren einer Seite muss während des Verschiebens lediglich einmal die Strg-Taste gedrückt werden. Neben den Seitenbezogenen Features stehen im Kontextmenü über den Punkt Branch Actions noch weitere Funktionen zur Verfügung. Im Rahmen unserer Übungen sind dabei jedoch allenfalls die beiden Funktionen interessant, mittels derer Äste des Seitenbaums aufgeklappt ( Expand Branch ) bzw. zugeklappt ( Collapse Branch ) werden können. Ein entsprechendes Auf- und Zuklappen der Äste des Seitenbaums ist allerdings über die dreieckigen Icons (vgl. Abbildung 6) links neben den Seitentiteln auch jederzeit ohne den Aufruf des Kontextmenüs möglich. Die beiden Funktionen Exportieren in.t3d und Importieren aus.t3d können genutzt werden, um Seitenstrukturen bzw. Inhalte in andere Projekte zu übertragen bzw. Daten aus anderen Typo3-Projekten zu übernehmen. Diese beiden Funktionen werden im Rahmen unserer Übungen allerdings ebenfalls nicht benötigt und sind primär für Administratoren gedacht. Durch die Funktion Als Startpunkt für den Seitenbaum festlegen wird eine temporäre Filterung des Seitenbaums vorgenommen. Dies bedeutet, die ausgewählte Seite wird in der Navigationsansicht als Ausgangspunkt verwendet und darüber liegende Seiten werden ausgeblendet. Eine solche Filterung kann gerade bei umfangreichen Projekten hilfreich sein, um einen besseren Überblick über die momentan zu bearbeitenden Seiten zu erhalten. Alternativ ist es auch möglich die Darstellung der Seiten in der Navigationsansicht einzuschränken, indem man auf das Trichter-Symbol oberhalb des Seitenbaums klickt (vgl. Abbildung 7, zweites Symbol von links). Dadurch wird ein Eingabefeld geöffnet, in das der gewünschte Begriff eingegeben werden kann, der für die Filterung herangezogen werden soll. Abbildung 6: Kontextmenü für das auf- und zuklappen von Ästen des Seitenbaums Eine weitere Möglichkeit um neue Seiten anzulegen stellen die beiden Icons oberhalb der Navigations- bzw. der Detailansicht dar, welche in Form einer Dokumentenseite, die zusätzlich mit einem grünen Plus-Symbol versehen sind, gestaltet sind (vgl. Abbildungen 4 und 7). Abbildung 7: Funktionsleiste oberhalb der Navigations- bzw. der Detailansicht Seite 4 von 17
Zunächst soll dabei der Funktionsaufruf über das Icon (Abbildung 7, links), welches oberhalb der Navigationsansicht positioniert ist betrachtet werden, da das Interaktionsdesign dieser Funktion mit der Einführung von Typo3 4.5 vollständig überarbeitet worden ist. In der aktuellen Version von Typo3 bewirkt ein Klick auf dieses Icon, dass unterhalb des Icons eine weitere Leiste mit Symbolen eingeblendet wird. Diese repräsentieren die verschiedenen Seitentypen, die in Typo3 zur Verfügung stehen (vgl. Abbildung 8), wobei Administratoren die Möglichkeit haben zu bestimmen, welche Seitentypen den Anwendern überhaupt zur Auswahl gestellt werden sollen. Für unsere Übungen wird ausschliesslich der Seitentyp Standard benötigt (das Icons ganz links). Abbildung 8: Seitenerstellung mittels des Icons oberhalb der Navigationsansicht Wird nun der Mauszeiger über diesem Icon positioniert, so verändert sich dieser zu einem Kreuz, um zu illustrieren, dass nun das entsprechende Icon per Drag&Drop an der gewünschte Stelle im Seitenbaum abgelegt werden kann, um somit dort eine neue Seite zu erstellen. Die Stelle an der die neue Seite angelegt wird, wird dabei über eine blaue Linie bzw. einen blauen Balken (im Falle von Unterseiten) illustriert (vgl. Abbildung 9, links). Nach dem anlegen kann ein entsprechender Seitentitel vergeben werden - standardmässig wird die Bezeichnung Default Title verwendet (vgl. Abbildung 9, rechts). Abbildung 9: Anlegen einer neuen Seite über die Navigationsansicht Verwendet man stattdessen für das Anlegen einer neuen Seite, das entsprechende Icon, welches links oberhalb der Detailansicht positioniert ist (vgl. Abbildung 7, rechts), so gestaltet sich der Prozess ein wenig anders. Durch die Auswahl dieses Menüpunktes wird in der Detailansicht (rechts) der Dialog Neuer Datensatz geöffnet, in welchem, durch einen Klick auf das entsprechende Pfeil-Symbol an der gewünschten Stelle, die neue Seite angelegt werden kann. Seite 5 von 17
Abbildung 10: Anlegen einer neuen Seite über die Detailansicht Nach der Wahl der Position öffnet sich in der Detailansicht anschliessend ein Dialog, über den der Titel, der Seitentyp und ggf. gewünschte Zugriffsbeschränkungen (Datum, Nutzer) der neuen Seite definiert werden können (Pflichtfelder sind dabei mit einem Ausrufezeichen markiert). Abbildung 11: Seiteneigenschaften definieren und Änderungen speichern Seite 6 von 17
Mit Hilfe der in der obigen Abbildung markierten Icons können diese Angaben anschliessend gespeichert werden oder ggf. kann die Aktion auch abgebrochen werden. Durch die Speicherung wird die Seite mit der entsprechenden Bezeichnung an der angegebenen Position im Seitenbaum eingefügt. Alternativ können neue Seiten auch über den Menüpunkt Web Funktionen erzeugt werden. Diese Variante hat den Vorteil, dass dabei gleich mehrere Seiten auf einmal erzeugt werden können. Standardmässig stehen bei dieser Funktion neun Felder für das Erstellen neuer Seiten zu Verfügung, wobei jedoch über den Button Add more lines bei Bedarf zusätzliche Felder eingeblendet werden können. Die Titel der einzelnen Seiten sowie deren Typ, können dabei über das entsprechende Formular definiert werden, so dass hier im Gegensatz zu den vorangehend beschriebenen Varianten kein weiterer Dialog für die Einrichtung der Seiten erforderlich ist (vgl. Abbildung 12) Abbildung 12: Verwendung des Menüpunktes "Funktionen" zum Anlegen neuer Seiten Es gibt in Typo3 also meist mehrere Wege um ans Ziel zu gelangen. So können neben dem Anlegen von neuen Seiten beispielsweise auch die Eigenschaften einer Seite (z.b. Seitentitel, Seitentyp, etc.) ebenfalls entweder über das Kontextmenü oder über einen Button in der Detailansicht bearbeitet werden. Welche Vorgehensweise dabei jeweils gewählt wird, hängt in erster Linie von den eigenen Vorlieben und dem jeweiligen Aufgabenkontext ab. 5. Seiteninhalte anlegen, bearbeiten und löschen Nachdem zuvor gezeigt wurde, wie neue Seiten angelegt bzw. deren Eigenschaften bearbeitet werden können, soll nun erläutert werden wie Seiteninhalte angelegt, editiert und gelöscht werden können. Hierzu gab es in früheren Versionen von Typo3 ebenfalls verschiedene Möglichkeiten (z.b. über das Kontextmenü). In der für unsere Schulung verwendeten Typo3 Version 4.5.23 ist das Anlegen von Seiteninhalten allerdings nur noch über die entsprechenden Icons in der Detailansicht (rechter Frame) möglich. Abbildung 13: Funktionsleiste oberhalb der Detailansicht Seite 7 von 17
Die Icons für den Aufruf des Dialogs zum Anlegen von neuen Inhaltselementen sind dabei in der Detailansicht an mehreren Stellen vorhanden. Einerseits kann die entsprechende Funktion über die Symbolleiste oberhalb der Detailansicht aufgerufen werden (vgl. Abbildung 13, zweites Symbol von links). Andererseits stehen die entsprechenden Icons auch direkt in der Detailansicht zur Verfügung, wobei bei dieser Variante durch den Aufruf des Icons auch gleich definiert wird, an welcher Stelle etwas auf einer Seite eingefügt werden soll (z.b. links, rechts oder im zentralen Inhaltsbereich). Anzumerken ist diesbezüglich, dass die die konkrete Darstellung entsprechender Inhalte bei der Verwendung der Optionen Links, Normal, Rechts und Rand davon abhängig ist, wie das Seitentemplate des Webauftritts definiert worden ist. Für unsere Übungen wird ausschliesslich die Option Normal benötigt. An anderen Stellen eingefügter Content wird im Frontend aufgrund der Template- Definition entweder gar nicht oder nicht korrekt dargestellt. Nach dem anklicken eines der entsprechenden Icons wird der Dialog Neues Inhaltselement geöffnet. Über diesen muss zunächst ausgewählt werden, welcher Typ dem neu zu erstellenden Inhaltselement zugewiesen werden soll (z.b. Normaler Text, Text mit Bild, Nur Bilder, etc). Hinweis: Der Typ eines Inhaltselements kann bei Bedarf auch später noch jederzeit verändert (vgl. Abbildung 15). Abbildung 14: Auswahl des Typs des zu erstellenden Inhaltselements Seite 8 von 17
Nach der Auswahl des gewünschten Typs wird ein Dialog geöffnet, über den die eigentliche Inhalte (z.b. der gewünschte Text, die zu verwendenden Bilder, etc.) definiert werden können. (Hinweis: Bei Verwendung des Icons oberhalb der Detailansicht muss neben dem Typ noch zusätzlich die Position des zu erstellenden Inhaltes auf der Seite definiert werden vgl. Abbildung 14, unten). Der Dialog für das Erstellen der Inhalte ist dabei grundsätzliche in mehrere Reiter untergliedert, wobei die Anzahl und die konkrete Ausgestaltung dieser Reiter vom gewählten Inhaltstyp abhängig ist. Abbildung 15: Dialog zur Definition von Seiteninhalten Der erste Reiter ( Allgemein ) dient der Definition der für das Inhaltselement zu verwendeten Überschrift ( Header ), wobei dieser Reiter bei Bedarf auch die Möglichkeit bietet, den Typ des jeweiligen Inhaltselements zu verändern. Über den Reiter Images können einem Inhaltselement Bilder hinzugefügt werden (sofern ein entsprechender Inhaltstyp gewählt worden ist). Der Reiter Appearance dient dazu, das Erscheinungsbild eines Inhaltselements festzulegen (z.b. wie werden Bilder und Text zueinander positioniert, etc.). Über den Reiter Access kann bei Bedarf definiert werden, ob ein Inhalt allen Anwendern oder nur bestimmten Nutzergruppen (über Seite 9 von 17
einen entsprechenden Login) zur Verfügung steht. Zusätzlich kann hier auch festgelegt werden, ob ein Inhalt nur in einem bestimmten Zeitraum angezeigt werden soll. Abbildung 16: Definition von Zugriffsbeschränkungen für bestimmte Seiteninhalte Neben generellen Eigenschaften wie der Überschrift eines Inhaltselements, werden über den Reiter Allgemein bei textuellen Inhaltselementen (z.b. Normaler Text oder Text mit Bild ) auch die entsprechenden Texte erfasst, wobei Typo3 grundsätzlich auf einem WYSIWYG-Editor basiert ( What you see is what you get ), so dass für das Erstellen von Inhalten in der Regel keinerlei Programmierkenntnisse erforderlich sind. Zur Formatierung der Texte stehen in Typo3 analog zu Textverarbeitungssystemen wie bspw. OpenOffice oder MS Word verschiedene Icons zur Verfügung (z.b. B für fett, I für kursiv, etc.). Die Zur Verfügung stehenden Formatierungselemente bzw. die konkrete Darstellung der formatierten Texte sind dabei abhängig vom den im System hinterlegten Templates. Dadurch soll sichergestellt werden, dass alle über das CMS erstellten Inhalte dem Corporate Design der jeweiligen Organisation oder Unternehmung entsprechen. Abbildung 17: Editor zur Erfassung von Inhalten Seite 10 von 17
Nach der Bearbeitung müssen die erstellten Inhalte natürlich noch gespeichert werden. Hierfür gibt es in Typo3 unterschiedliche Möglichkeiten. Abbildung 18: Icons zur Speicherung Mit dem X -Symbol ganz links kann der Editordialog verlassen werden, ohne die Inhalte zu speichern. Mit dem Diskettensymbol (2. von links) werden die Inhalt gespeichert und die Bildschirmmaske mit den eben eingepflegten Inhalten bleibt aktiv, um ggf. weiteren Text hinzufügen zu können Das nächste Symbol (Diskette mit Auge) hat denselben Effekt, jedoch wird zusätzlich ein Browserfenster geöffnet, mit dem die eben erstellten Inhalte im Frontend (also der zugeordneten Webseite) überprüft werden können Das vierte Symbol (Diskette mit X) sichert die erstellten Inhalte und der Editordialog wird geschlossen. Durch das nächste Symbol (mit dem + -Zeichen) wird der erstellte Inhalte gespeichert und ein neues Editorfenster geöffnet, mit dem ein weiteres Inhaltselement, nach dem eben erstellten in der Seite eingefügt werden kann. Das Papierkorbsymbol kann dazu genutzt werden, bereits gespeicherte Inhalte wieder aus der Seite zu entfernen. Über das Symbol mit der Uhr (ganz rechts) kann man sich eine Verlaufsübersicht darstellen lasse (wann wurde das Seitenelement angelegt, wann und von wem wurden Editierungen vorgenommen). Sofern auf einer Seite bereits Inhaltselemente vorhanden sind, stehen in der Detailansicht zusätzliche Funktionen zur Bearbeitung der Inhalte zur Verfügung, die eingeblendet werden, wenn man die Maus über das entsprechende Inhaltselement bewegt. Seite 11 von 17
Abbildung 19: Bearbeitung von Inhaltselementen Das + -Symbol dient dazu ein neues Inhaltselement in der Seite einzufügen. Mit Hilfe des Stift -Symbols kann der Editor geöffnet werden, um den entsprechenden Datensatz zu bearbeiten. Mit dem Glühbirnen -Symbol (drittes von links) können Datensätze ausgeblendet werden. Sie bleiben in der Datenbank erhalten, sind jedoch auf der Website nicht sichtbar. Bei Bedarf können die entsprechenden Elemente auch wieder eingeblendet werden. Das Papierkorb -Symbol dient dem Löschen von Inhaltselementen. Die beiden Pfeil -Symbole können genutzt werden, um die Reihenfolge der Datensätze auf der Seite zu ändern. 6. Dateiordner Dokumente und Bilder hochladen Das Backend von Typo3 bietet die Möglichkeit Bilder und Dokumente in einer File-Struktur abzulegen, um diese in den Webauftritt integrieren zu können. Für den Upload und die Verwaltung von Dateien kann die links in der Modulleiste verfügbare Funktion Media Datei verwendet werden. Die Auswahl dieses Menüpunktes bewirkt, dass in der Navigationssicht die im System vorhandene Filestruktur angezeigt wird (analog zum Windows Explorer). Im rechten Bereich des Backends (in der Detailansicht) stehen für weiterführende Aktionen ein Dropdown- Feld sowie drei Icons ( Liste, Hochladen, Indexieren ) zur Verfügung (vgl. Abbildung 20). Über die Icons können einerseits neue Ordner angelegt werden. Andererseits können über diese auch Dateien in den Filebereich des Webservers hochgeladen werden bzw. es können Textfiles auf dem Webserver erzeugt werden. Das Drop- Down-Menü bietet ebenfalls drei Auswahlmöglichkeiten. Der Menüpunkt Indexieren ist für uns dabei im Rahmen der Übungen uninteressant. Über List kann man sich die in einem Ordner bereits vorhandenen Dateien anzeigen lassen. Mit Hilfe von Upload können neue Dateien im System abgelegt werden. Dabei hat man die Möglichkeit bis zu 15 Dateien auf einmal in das System zu übertragen. Alle vorgängig aufgezählten Funktionen können in der Detailansicht auch mittels eines Klicks mit der rechten Maustaste auf ein Ordner- bzw. ein Dateisymbol über ein Kontextmenü aufgerufen werden. Das entsprechende Kontextmenü bietet in diesem Seite 12 von 17
Zusammenhang allerdings noch einige zusätzliche Möglichkeiten. So ist es über dieses auch möglich, Ordner oder Dateien wieder aus dem Filesystem zu entfernen, Dateien zu verschieben oder auch Dateien umzubenennen. Abbildung 20: Dateien hochladen 7. Einsatz von Hyperlinks Die hochgeladenen Dateien können anschliessend im Falle von Bildern direkt für die Inhaltserstellung herangezogen werden. Andere Dateitypen wie PDF-Dokumente, etc. können lediglich mit Hilfe von Hyperlinks in den Webauftritt eingebunden werden. Verlinkungen können dabei sowohl von Texten als auch von Bildern ausgehen. Dies soll nachfolgend anhand eines Seiteninhaltselementes ( Text mit Bild ) illustriert werden. Abbildung 21: Textlink einfügen Um in Texten einen Link einfügen zu können, muss zunächst der gewünschte Bereich markiert werden. Anschliessend kann mit Hilfe des Weltkugel -Symbols der Dialog für die Verlinkung geöffnet werden (vgl. Abbildung 21). Seite 13 von 17
Abbildung 22: Unterschiedliche Hyperlinks erstellen Wie in der obigen Abbildung zu sehen ist, stehen für die Erstellung von Hyperlinks verschiedene Auswahlmöglichkeiten zur Verfügung. Man unterscheidet in Typo3 zwischen internen und externen Links, E-Mail-Links sowie Dateiverweisen. Mit Hilfe von Page können interne Links erzeugt werden, d.h. es wird auf eine andere Seite innerhalb von Typo3 verwiesen. External URL dient dazu einen Link auf andere Webseiten zu erzeugen. Mit Hilfe von Email kann ein Verweis auf eine E-Mail-Adresse erstellt werden. Mittels Media kann auf in Typo3 hinterlegte Dokumente oder Bilder verlinkt werden. Zusätzlich steht wie in Abbildung 22 dargestellt ein Reiter Upload zur Verfügung. Über diesen können analog zur vorhin beschriebenen Funktion Media File Dateien in das Filesystem von Typo3 hochgeladen werden, ohne hierfür den Dialog für das Einfügen von Hyperlinks verlassen zu müssen. Beispielhaft soll zunächst ein E-Mail-Link eingefügt werden. Hierzu wählt man den Reiter Email, trägt die entsprechende Adresse ein und bestätigt das Ganze mit Set Link. Abbildung 23: Link auf eine E-Mail-Adresse Bei der Erstellung von internen Links, Verweisen auf externe Websites und Dateiverweisen hat man bei der Definition des Hyperlinks zusätzlich die Möglichkeit zu bestimmen, ob der Link im bestehenden oder in einem neuen Browserfenster geöffnet werden soll ( Target New Window ). Seite 14 von 17
Abbildung 24: Interne Seitenverweise definieren Sofern mittels Page ein Link auf eine Seite in Typo3 gesetzt werden soll, so wird im Dialog Insert Link die Struktur des Seitenbaums eingeblendet. Über diese kann dann die gewünschte Seite ausgewählt werden. Man hat dabei auch die Möglichkeit direkt auf ein bestimmtes Inhaltselement einer Seite zu verweisen. Die Elemente einer Seite können durch einen Klick auf das Pfeil -Symbol neben den jeweiligen Seitennamen angezeigt werden. Anschliessend kann das gewünschte Seitenelement ausgewählt werden. Abbildung 25: Direkte Verlinkung auf bestimmte Inhaltselemente Seite 15 von 17
Ein Link auf eine externe Website kann einfach direkt in das entsprechende Feld eingetragen werden (vgl. Abbildung 26). Abbildung 26: Definition eines externen Links Um Bilder in ein Seitenelement einfügen zu können, muss zuvor ein entsprechender Inhaltstyp aktiviert worden sein, ansonsten stehen die entsprechenden Dialogfelder nicht zur Verfügung. In unserem Beispiel wurde daher wie bereits erwähnt als Inhaltstyp Text mit Bild ausgewählt. Somit steht im Editordialog ein weiterer Reiter ( Images ) zur Verfügung. Dort können über ein Ordner -Symbol die Grafiken ausgewählt werden, die in das Inhaltselement integriert werden sollen (vgl. Abbildung 27). Zusätzlich können bei Bedarf über das Feld Captions Beschriftungen für die Bilder hinterlegt werden. Abbildung 27: Einfügen von Grafiken Seite 16 von 17
Scrollt man weiter nach unten, so werden dort weitere Einstellungsmöglichkeiten für Bilder angeboten. Einerseits kann dort definiert werden, ob bei einem Klick auf das Bild im Frontend, die entsprechende Abbildung in einem Pop-Up in Original-Grösse geöffnet werden soll. Diese Option ist bspw. hilfreich, um schnell und einfach mittels Thumbnails Bildergalerien zu erzeugen, wobei die Anwender dann bei Bedarf durch einen Klick auf das gewünschte Bild eine grössere Darstellung der ausgewählten Grafik angezeigt bekommen. Des Weiteren können über das Feld im Bereich Behavior Bilder mit Hyperlinks versehen werden. Zudem gibt es die Möglichkeit, falls das Bild bei Websitebesuchern nicht angezeigt werden kann (z.b. aufgrund der gewählten Browsereinstellungen), einen Alternativtext einblenden zu lassen. Diese Möglichkeit ist insbesondere mit Hinblick auf die Barrierefreiheit von Webauftritten von Bedeutung. Weiterreichende Formatierungen für Bilder, wie bspw. die Grösse, deren Ausrichtung, etc., müssen bei der Typo3 Version 4.5.8 über den Reiter Appearance vorgenommen werden. Abbildung 28: Weiterführende Formatierungen von Inhaltselementen Soweit die kurze Vorstellung der wichtigsten Funktionen von Typo3. Detaillierte Informationen finden sich im Skript Typo3 Der Einstieg von Kasper Skårhøj, das im Veranstaltungsordner in Moodle hinterlegt ist. Seite 17 von 17