WEB DEVELOPER GRADE 1 TYPO3. Grundlagen und Template-Entwicklung mit TemplaVoilà ... Offizielles Curriculum des Europäischen Webmasterverbandes

Transkript

1 WEB DEVELOPER GRADE 1 TYPO3 Grundlagen und Template-Entwicklung mit TemplaVoilà Offizielles Curriculum des Europäischen Webmasterverbandes

2

3 WEB DEVELOPER GRADE 1 TYPO3 Grundlagen und Template-Entwicklung mit TemplaVoilà Art.-Nr Version vom Autoren: Marco Emrich, Jan Teriete webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 Inhaltsverzeichnis 1 Allgemeine Einführung Voraussetzungen für dieses Lernheft Einrichten der TYPO3-Umgebung Was ist TYPO3? Content Management Systeme Arten von Content Management Systemen Community/Social CMS Enterprise CMS CMS als Plugin/Komponente Warum TYPO3? Versionen und Pakete TYPO3-Versionen TYPO3-Pakete TemplaVoilà Manuelle Installation über das TYPO3 Extension Repository Installationsvorbereitungen Installation von TemplaVoilà Beispielprojekt Weingut Traubner Der Zauberer von Templatanien TemplaVoilà-Wizard ausführen TemplaVoilà-Wizard erneut ausführen Page Tree Löschen des bestehenden Page Trees Umsetzen der Informationsarchitektur als Page Tree Konfigurieren der Startseite Inhalte einpflegen Arbeiten mit Content Elements Erstellen von Content Elements Kopieren von Content Elements Einführung in TypoScript TypoScript-Grundlagen TypoScript editieren Kommentare in TypoScript Das Hauptmenü in TypoScript Menüelemente im Zustand: normal Menüelemente im Zustand: aktiv Besonderheiten im Umgang mit HTML5 und UTF Die Zeichenkodierung festlegen Den DOCTYPE auf HTML5 umstellen Refactoring: Confinement Das Metamenü Der Seitentyp Folder Ein eigenes Data Element Das Metamenü in TypoScript

6 9.4 TypoScript Extension-Template Anhang 1: Lokale TYPO3-Installation Passwörter für die TYPO3-Installation Das Datenbank-Passwort Das Installations-Passwort Das TYPO3 Admin-Passwort Installation unter Microsoft Windows Installation unter Apple Mac OS X Installation unter Ubuntu-Linux Upgrade unter Ubuntu-Linux Quellen und Literaturhinweise APA-Style Referenzen Empfehlungen Lösungen

7 16 4 TEMPLAVOILÀ 4 TemplaVoilà In dieser Lektion lernen Sie: was eine Template-Engine ist. wie Sie die Erweiterung TemplaVoilà installieren. TemplaVoilà will let any moron design fairly complex web pages with some dynamic bindings. It s one of the most advanced internet applications I ve seen so far [ ]. But as with all things TYPO3 it will take some time to learn. (Henrik Sarvel) 17 Ihr Ziel besteht darin, eine schicke und funktionstüchtige Website in TYPO3 zu erstellen. Dabei haben Sie in TYPO3 aber die Qual der Wahl. Die erste und vielleicht wichtigste Entscheidung ist die Wahl einer so genannten Template-Engine. Diese ermöglicht Ihnen, Inhalte und Layout einer Website zusammenzubringen. Gleichzeitig bewahren Sie dabei stets eine saubere Trennung. Klingt das paradox? Keine Sorge, das ist es nicht. Der Besucher Ihrer Website möchte jede Seite natürlich im Ganzen betrachten. Sie aber möchten die Möglichkeit haben, das Layout vom Inhalt zu trennen. Damit kann z.b. ein Designer jederzeit Änderungen am Layout vornehmen, ohne dass Sie nachher jede einzelne Seite nachbearbeiten müssen. Außerdem können z.b. Designer und Texter völlig isoliert an einer Seite arbeiten, ohne sich ständig gegenseitig Änderungen zu überschreiben. Bei der Wahl der Template-Engine kann ich helfen. Nehmen Sie einfach die, die als die modernste, fortschrittlichste und bequemste unter den TYPO3-Template-Engines gilt: TemplaVoilà. [ ] TemplaVoilà is highly recommended for its flexibility and more advanced templating techniques [ ] 4.1 Manuelle Installation über das TYPO3 Extension Repository Bisher ist TemplaVoilà aber noch kein fester Bestandteil von TYPO3 selbst. Deswegen müssen Sie es erst als Erweiterung installieren. Zum Glück bietet TYPO3 hier einen relativ einfachen Mechanismus. TYPO3 verwaltet seine Erweiterungen zentral im so genannten TYPO3 Extension Repository (TER). Sie können theoretisch aus dem TYPO3-Backend heraus darauf zugreifen. Doch dies ist bei wenigen zu installierenden Erweiterungen meist zeitintensiver als eine manuelle Installation. Deswegen werden Sie im Folgenden den manuellen Weg über die Repository-Website kennenlernen. 17. siehe Sarvell (2008),

8 4.1 MANUELLE INSTALLATION ÜBER DAS TYPO3 EXTENSION REPOSITORY Installationsvorbereitungen 1.Rufen Sie zunächst die Website in einem Browser Ihrer Wahl auf. Abb. 4-1: TemplaVoilà Installation: Erweiterung suchen Geben Sie im Suchfeld den Erweiterungsschlüssel templavoila (1) ein. Starten Sie danach die Suche mit dem Button Search (2) und klicken Sie auf der Ergebnisseite den Link TemplaVoila! (3) an. 2.Sie landen nun auf der Detailseite der Erweiterung. Abb. 4-2: TemplaVoilà Installation: Detailseite Prüfen Sie zunächst, welche Version aktuell ist (1). Die Version ist mit TYPO3 Version 4.5 kompatibel. Sollten Sie eine neuere Version angezeigt bekommen, so ist es sinnvoll, in der Versionsgeschichte unter dem Reiter Download zu prüfen, ob diese Version für TYPO3 4.5 geeignet ist. Woran Sie dies erkennen, erfahren Sie gleich. Leider können Sie nicht direkt mit der Installation von TemplaVoilà beginnen, da diese Erweiterung eine Abhängigkeit (2) zu einer anderen, noch nicht installierten Erweiterung mit dem Erweiterungsschlüssel static_info_tables hat. Die Erweiterung mit dem Schlüssel lang hingegen ist bereits standardmäßig installiert. Sie müssen also zunächst die noch benötigte Abhängigkeit installieren. Doch zuvor laden Sie die Erweiterung als t3x-datei auf Ihren Rechner herunter (3).

9 18 4 TEMPLAVOILÀ 3.Schauen Sie sich nun unter der URL im Reiter Download die Versionsgeschichte der Abhängigkeit an. Abb. 4-3: TemplaVoilà Installation: Versionsgeschichte der Erweiterung static_info_tables Seit der Version wird TYPO3 Version für die Installation der Erweiterung benötigt. Für TYPO3 in der Version 4.5 benötigen Sie also die vorherige Version der Erweiterung. Laden Sie auch diese Erweiterung als t3x-datei herunter. 4.Nun müssen Sie die Abhängigkeit über den so genannten Extension Manager auf den Webserver Ihrer TYPO3-Installation laden. Rufen Sie hierzu das TYPO3-Backend in Ihrem Webbrowser auf. Abb. 4-4: TemplaVoilà Installation: Admin Tools Den Extension Manager erreichen Sie über Admin Tools Extension Manager im TYPO3-Menü (links). 5.Sie befinden sich nun im TYPO3 Extension Manager, mit dem Sie Erweiterungen installieren, entfernen und aktualisieren können. Abb. 4-5: TemplaVoilà Installation: Erweiterung importieren Wählen Sie im oberen Dropdownmenü Import extensions und klicken Sie dann auf den Button Durchsuchen.

10 4.1 MANUELLE INSTALLATION ÜBER DAS TYPO3 EXTENSION REPOSITORY 19 6.Wählen Sie nun die Datei static_info_tables_2.3.2.t3x aus Ihrem Download-Ordner aus. Das eigentliche Hochladen beginnen Sie durch einen Klick auf den Button Upload extension file. Abb. 4-6: TemplaVoilà Installation: Erweiterung hochladen 7.Sobald die Erweiterung hochgeladen wurde, erscheint eine Meldung, dass diese erfolgreich importiert wurde. Abb. 4-7: TemplaVoilà Installation: Abhängigkeit erfolgreich importiert Die Erweiterung befindet sich nun zwar auf dem Webserver, muss aber noch installiert werden. Beginnen Sie die eigentliche Installation mit dem Button Install extension. 8.Im Verlauf der Installation müssen auch Daten in die Datenbank von TYPO3 importiert werden. Abb. 4-8: TemplaVoilà Installation: Datenbank-Import Es erscheint eine sehr sehr lange Informationsseite. Scrollen Sie ganz nach unten und klicken Sie auf den Button Make updates, um den Import zu starten.

11 20 4 TEMPLAVOILÀ 9.Sobald die Erweiterung erfolgreich installiert ist, was eine ganze Weile dauern kann, sollten Sie nachfolgende Seite sehen. Abb. 4-9: TemplaVoilà Installation: Abhängigkeit installiert Damit ist die Abhängigkeit installiert, und Sie können zur eigentlichen Installation von TemplaVoilà übergehen. Auch hier müssen Sie die Erweiterung TemplaVoilà erst importieren (bzw. hochladen) und dann installieren Installation von TemplaVoilà 1. Klicken Sie erneut auf Admin Tools Extension Manager links im Menü. Import extensions sollte automatisch ausgewählt sein, da immer die letzte Auswahl angezeigt wird. 2. Laden Sie nun die Datei templavoila_1.8.0.t3x (oder neuer) auf den Webserver Ihrer TYPO3-Installation hoch. 3. Im nächsten Schritt können dann Sie wieder die eigentliche Installation mit einem Klick auf Install extension starten. Abb. 4-10: TemplaVoilà Installation: Installation TemplaVoilà beginnen 4. Auch bei dieser Erweiterung müssen Daten in die Datenbank importiert werden. Abb. 4-11: TemplaVoilà Installation: Datenbank-Import

12 4.1 MANUELLE INSTALLATION ÜBER DAS TYPO3 EXTENSION REPOSITORY Nach dem Aktualisieren der Datenbank bekommen Sie die Meldung, dass TemplaVoilà installiert ist. Jetzt müssen Sie die Grundeinstellungen von TemplaVoilà durch einen Klick auf den Button Update speichern. Ohne das Speichern der Grundeinstellungen funktionert TemplaVoilà nicht! 6. Abschließend müssen Sie den Zwischenspeicher 18 von TYPO3 leeren. Klicken Sie oben rechts in der Symbolleiste auf den gelben Blitz und dann auf Clear all caches. Sie bekommen keine Bestätigung nach dem Leeren des Zwischenspeichers.. Abb. 4-12: TemplaVoilà Installation: Leeren des Zwischenspeichers 1. Erweiterungen für TYPO3 können Abhängigkeiten zu anderen Erweiterungen haben, welche selbst wieder Abhängigkeiten haben können. Erst wenn alle abhängigen Erweiterungen installiert sind, kann die eigentliche Erweiterung (z.b. TemplaVoilà) installiert und genutzt werden. 2. Erweiterungen müssen erst importiert werden, bevor sie installiert werden können. 18. Auch Cache genannt.

13 BEISPIELPROJEKT WEINGUT TRAUBNER Beispielprojekt Weingut Traubner In dieser Lektion lernen Sie: h wie Sie mit dem TemplaVoilà-Wizard eine Website erstellen. Na wunderbar nachdem Sie nun mit TemplaVoilà eine hervorragende Template-Engine installiert haben, kann es losgehen. Stellen Sie sich den fiktiven Kunden Herrn Traubner vor. Herr Traubner hat das Weingut seines Vaters übernommen und möchte nun eine Website, mit der er für seine Weine werben kann. Aber reden Sie doch selbst mit ihm: Herr Traubnera: Die Website soll im Wesentlichen aus statischen Texten bestehen. Mir ist aber vor allem wichtig, dass ich die Texte der Site später selbst pflegen kann. Leider hab' ich keine Zeit, mich in komplexe Internettechnologien wie HTML und wie hieß das doch gleich? ach ja, CSS einzuarbeiten. a. Bildquelle: Seine Anforderungen sind optimale Bedingungen für den Einsatz von TYPO3! Nachdem Sie ihn kurz über TYPO3 und CMS-Systeme im Allgemeinen aufgeklärt haben, ist er begeistert von Ihrer Idee. Sofort beginnen Sie mit der Umsetzung. Abb. 5-1: HTML-Template für die Website Weingut Traubner

14 5.1 DER ZAUBERER VON TEMPLATANIEN 23 Nachdem Sie die üblichen konzeptionellen und designerischen Tätigkeiten für eine erste Version der Website durchgeführt haben, liegen Ihnen nun folgende Dinge vor: 19 Ein Layout, bestehend aus HTML und CSS für die Startseite und alle Unterseiten Die vorläufige Informationsarchitektur in Form einer Sitemap Texte im odt-format Der Zauberer von Templatanien Wenn Sie beginnen, eine neue Website mit TYPO3 zu erstellen, so sind anfangs eine Reihe von Routinetätigkeiten durchzuführen. Dazu gehören z.b.: Das Anlegen einer Benutzergruppe mit Editier-Rechten Das Anlegen eines Benutzers mit Editier-Rechten Das Erzeugen einer Page-Struktur Das Zuweisen der Haupttemplates Das Schreiben von TypoScript zum Einbinden von Menüs. Das meiste davon ist leider nicht gerade sonderlich spannend. Deswegen hat TemplaVoilà einen so genannten Wizard 21 integriert, der Ihnen einen Großteil der Routinetätigkeiten abnehmen kann. Ein Wizard oder Assistent ist dabei eine Oberfläche, die Sie durch eine Reihe von Dialogen führt und somit die Durchführung eines komplexen Prozesses deutlich vereinfacht. 22 Der TemplaVoilà-Zauberer kann sogar noch mehr. Er übernimmt die langweiligen Teile, wie das Anlegen von Benutzern und Gruppen und die aufwändigen wie das Schreiben von TypoScript für Menüs. Probieren Sie diese Magie doch mal aus! Als erstes müssen Sie das Layout in TYPO3 hinterlegen. Kopieren Sie dazu Ihr komplettes Layout, inklusive HTML, CSS und Bildern (d.h. den kompletten Ordner weingut_traubner_vorlage) nach fileadmin/templates in Ihrem TYPO3-Ordner. Sollte der templates-ordner nicht existieren, so erstellen Sie ihn bitte vorher. Nutzen Sie zum Anlegen des Ordners und zum Transferieren der Daten einen FTP-Client (z.b. FileZilla), sofern sich nicht mit einer lokalen TYPO3-Installation arbeiten. Damit Sie keine Probleme mit Sonderzeichen bekommen, sollten die Dateien (z.b. HTML, CSS und JavaScript) im Charset UTF-8 vorliegen. a Abb. 5-2: Darstellungsfehler von Sonderzeichen a. UTF-8 ist bei den meisten modernen Editoren Standard. 19. Sie finden diese Dateien im Begleitmaterial dieses Lernhefts 20. odt: das OpenOffice/LibreOffice-Dateiformat 21. engl. Zauberer 22. siehe

15 24 5 BEISPIELPROJEKT WEINGUT TRAUBNER TemplaVoilà-Wizard ausführen Klicken Sie nun auf Web TemplaVoilà und starten Sie den Wizard mit dem Button Start wizard now! Abb. 5-3: TemplaVoilà-Wizard: Starten des Wizards Achtung! Sie werden in den nächsten Schritten immer wieder Buttons zum Starten oder Bestätigen von Aktionen benutzen. Der TemplaVoilà-Wizard gibt Ihnen während der Ausführung dieser Aktionen keine Statusrückmeldung! Manche dieser Aktionen können mehrere Minuten dauern. Wundern Sie sich also nicht, wenn Sie einen Button klicken und im ersten Moment nichts weiter passiert. Klicken Sie auf keinen Fall die Buttons mehrmals, dadurch würde der TemplaVoilà-Wizard die Schritte doppelt ausführen! Der Wizard unterteilt den Prozess in mehrere Schritte: Schritt 1: Wählen Sie die HTML-Datei Hier präsentiert Ihnen der Wizard alle HTML-Dateien im template-verzeichnis. In Ihrem Fall ist das die index.html. Da alle Seiten unserer Website das Design der index.html haben sollen, wählen wir genau diese als Designvorlage aus.

16 5.1 DER ZAUBERER VON TEMPLATANIEN Wählen Sie fileadmin/templates/weingut_traubner_vorlage/index.html, indem Sie den Link [Choose as Template] dahinter anklicken. Abb. 5-4: TemplaVoilà-Wizard: Template auswählen Schritt 2: Geben Sie die Vorgabewerte für die neue Website ein Sie sehen eine Voransicht des Templates. Darunter befinden sich eine Reihe von Formularfeldern. Hier sehen Sie die Vorgabewerte: Name Inhalt Bedeutung Name of the site (1) Weingut Traubner Das ist der Name der Website. Er wird an verschiedenen Stellen verwendet, z.b. als Titel (<title>-tag) für die Startseite. URL of the website vorerst leer lassen Wenn Sie schon wissen, unter welcher URL die Website später online gehen soll, können Sie sie hier schon eintragen. Für dieses Beispielprojekt macht es aber mehr Sinn, das Feld leer zu lassen. Editor username (2) traubner Der Benutzername des Redakteurs der Website. Dieser hat die Berechtigung, neue Seiten anzulegen und zu verwalten. Er ist für die Inhalte zuständig, benötigt aber keine technischen Fähigkeiten. Er hat das Passwort: password. Erinnern Sie sich: TYPO3 trennt die Seitenstruktur und die Inhalte. Tabelle 5-1: Vorgabewerte

17 26 5 BEISPIELPROJEKT WEINGUT TRAUBNER 1. Scrollen Sie ganz nach unten, füllen Sie die Formularfelder wie angegeben aus und klicken Sie den Button Create new site (3). Das Erstellen kann einige Sekunden dauern. Abb. 5-5: TemplaVoilà-Wizard: Vorgabewerte für Website Schritt 3: Mapping beginnen Mappen bedeutet zuordnen. Beim Template Mapping ordnen Sie bestimmten Bereichen aus Ihrem HTML-Template Inhalte der Website zu. 1. Der Wizard erklärt das Mapping in einem kleinen Video. Klicken Sie, unter dem Video, auf den Button Start the mapping process. Abb. 5-6: TemplaVoilà-Wizard: Mapping beginnen Bevor Sie mit dem Mapping weiter machen, sollten Sie prüfen, ob Ihr HTML valide 23 ist. Sie können das direkt in TYPO3 prüfen. 23. syntaktisch Richtig.

18 5.1 DER ZAUBERER VON TEMPLATANIEN Klicken Sie im Reiter Information auf den Link validate template file. Abb. 5-7: TemplaVoilà- Wizard: Mapping-Übersicht 3. Es öffnet sich ein neues Fenster, in dem das Layout auf der W3C Webseite validiert wird. Abb. 5-8: TemplaVoilà-Wizard: W3C-Validierung des Layouts Sollte sich bei Ihnen kein neues Fenster öffnen, schalten Sie bitte den PopUp-Blocker Ihres Browsers aus.

19 28 5 BEISPIELPROJEKT WEINGUT TRAUBNER 4. Kehren Sie zu TYPO3 zurück und wählen Sie den letzten Reiter Mapping aus. Nun sehen Sie folgende Tabelle: Abb. 5-9: TemplaVoilà-Wizard: Mapping-Tabelle Das Data Element ist ein logischer Bereich aus TYPO3, den Sie zuordnen möchten. Der Wizard bietet hier folgende vier Bereiche an: ROOT Main Content Area Main menu Sub menu Abb. 5-10: TemplaVoilà-Wizard: Data Element Das ROOT-Element ist bereits dem <body>-tag Ihres Templates zugeordnet. Abb. 5-11: TemplaVoilà-Wizard: ROOT-Element auf body-tag gemappt Das ist eine sinnvolle Vorgabe es besteht keine Notwendigkeit, sie zu ändern. Als nächstes gilt es, den Hauptinhaltsbereich (Main Content Area) zuzuordnen.

20 5.1 DER ZAUBERER VON TEMPLATANIEN Klicken Sie dazu den Button Map in der Action-Spalte an. Abb. 5-12: TemplaVoilà-Wizard: Main Content Area-Element mappen Hier zeigt sich die Stärke der Template-Engine. TemplaVoilà blendet eine Grafische-Ansicht Ihres Templates ein und überlagert sie mit den Tags aus dem HTML-Code. Abb. 5-13: TemplaVoilà-Wizard: Mapping in der Grafischen-Ansicht Noch übersichtlicher wird das Ganze, wenn Sie zur Quellcode-Ansicht wechseln.

21 30 5 BEISPIELPROJEKT WEINGUT TRAUBNER 6. Wählen Sie dazu aus dem Dropdownmenü unterhalb der Überschrift Mapping Window den Mode: HTML Source aus. Abb. 5-14: TemplaVoilà-Wizard: Mapping in der Quellcode-Ansicht Hier können Sie die Tags direkt aus dem Quellcode bestimmen. 7. Klicken Sie das <div> mit der id content an. Dessen Inhalt, bestehend aus Beispielüberschriften und Lorem Ipsum-Texten, soll später von TYPO3 ausgetauscht werden. 8. Wählen Sie auf der folgenden Seite INNER (Exclude tag) (1) aus der Dropdown-Liste und klicken Sie auf Button Set (2). Abb. 5-15: TemplaVoilà-Wizard: Main Content Area auf <div> mappen

22 5.1 DER ZAUBERER VON TEMPLATANIEN 31 Jetzt sehen Sie wieder die Mapping-Tabelle mit der neu gemappten Main Content Area. Abb. 5-16: TemplaVoilà-Wizard: Mapping-Tabelle mit Main Content Area-Mapping 9. Mappen Sie nun das Main menu. Dazu können Sie die <ul>-liste mit der id navi verwenden und auch hier wählen Sie wieder INNER (exclude tag). Das Submenü müssen Sie vorerst nicht mappen. 10. Sobald Sie mit dem Mapping fertig sind, klicken Sie auf den Button Save and Return unten links, um zum nächsten Schritt zu gelangen. Abb. 5-17: TemplaVoilà-Wizard: Mapping speichern

23 32 5 BEISPIELPROJEKT WEINGUT TRAUBNER Schritt 4: Mapping der Header-Elemente 1. Nach Betrachtung des kurzen Erklärungsvideos starten Sie das Header-Mapping mit dem Button Select HTML header parts. Abb. 5-18: TemplaVoilà-Wizard: Mapping der Header-Elemente beginnen 2. Wählen Sie den Reiter Header Parts(1) an. Auch hier geht es um Mapping. Sie haben die Möglichkeit auszuwählen, welche Elemente TYPO3 aus dem <head> des Templates übernimmt. Seien Sie nicht wählerisch. Aktivieren Sie einfach alle Häkchen(2) in der Spalte Include. Hier sind alle vorgeschlagenen Elemente sinnvoll, da Sie das CSS benötigen. Bei anderen Layouts müssen Sie evtl. abwägen, was Sie benötigen. Ein weitere Klick auf den Button Save and Return(3) bringt Sie zum letzten Schritt des Wizards. Abb. 5-19: TemplaVoilà-Wizard: Mapping der Header-Elemente Schritt 5: Dynamisches Menü Um ein dynamisches Menü zu erzeugen, das automatisch Ihre Sitemap verwendet, ist normalerweise etwas TypoScript-Code erforderlich. Der Wizard hilft Ihnen aber auch hier, indem er den nötigen Code bereits vorgeneriert. Dieser generierte Code ist meistens nicht perfekt, er ist aber eine gute Ausgangs-

24 5.1 DER ZAUBERER VON TEMPLATANIEN 33 basis für gezielte Anpassungen. Dadurch, dass Sie den initialen Code nicht schreiben müssen, verringert sich der Aufwand schon erheblich. Abb. 5-20: TemplaVoilà-Wizard: Vorgenerierter Code für das dynamische Menü Um die Anpassungen am TypoScript können Sie sich später noch kümmern. 3. Schließen Sie den Vorgang zunächst einmal ab, indem Sie den generierten Code mit einem Klick auf den Button Write main menu TypoScript code (ganz unten) akzeptieren. Abb. 5-21: TemplaVoilà-Wizard: Vorgenerierten Code für das dynamische Hauptmenü bestätigen 4. Klicken Sie auf der Folgeseite noch auf den Button Write sub menu Typoscript code, um die Generierung des Submenüs zu bestätigen. Abb. 5-22: TemplaVoilà-Wizard: Vorgenerierten Code für das dynamische Submenü bestätigen

25 34 5 BEISPIELPROJEKT WEINGUT TRAUBNER 5. Jetzt sehen Sie die Abschlussmeldung. Klicken Sie auf den Button Finish Wizard!, um den Vorgang abzuschließen. Abb. 5-23: TemplaVoilà-Wizard: Wizard beenden TYPO3 öffnet die fertige Website in einem neuen Fenster bzw. Browsertab. Abb. 5-24: TemplaVoilà-Wizard: Eingebundene Seite mit Beispiel-Sitemap Wie Sie sehen, hat der Wizard die Menüeinträge zum Leben erweckt. Allerdings stammen die Inhalte der Seiten Products, Content Elements, Visions, About Us und Contact noch aus einer Beispiel-Sitemap, die der Wizard angelegt hat. Sie erhalten bald die Gelegenheit, das zu ändern TemplaVoilà-Wizard erneut ausführen Wenn man den Wizard mehrfach ausführt, um beispielsweise zwei verschiedene Websites mit TYPO3 zu pflegen, so gibt es einen kleinen Bug bei der Zuweisung des Templates zu den Websites. Abb. 5-25: TemplaVoilà-Bug in Version Sehen Sie statt Ihrer Website diese oder eine ähnliche Fehlermeldung, so tritt der Bug bei Ihnen definitiv auf. Es kann jedoch auch sein, dass der Bug auftritt, ohne sofort sichtbar zu sein. Führen Sie die nächsten beiden Schritte also immer aus, wenn Sie mehr als eine Website mit dem Wizard angelegt haben.

26 5.1 DER ZAUBERER VON TEMPLATANIEN Editieren Sie die root Page Weingut Traubner, indem Sie Edit aus dem Kontextmenü der Seite aufrufen. Abb. 5-26: Kontextmenü: Editieren einer Seite 2. Gehen Sie in den Reiter Appearance und prüfen Sie, ob der Bug bei Ihnen vorliegt. Abb. 5-27: Bug vorhanden 3. Im Reiter Appearance(1) wählen Sie dann aus den beiden Dropdownmenüs Main Template [Template] (2+3) aus. Abb. 5-28: Auswählen des Main Template 4. Schließen Sie den Vorgang ab, in dem Sie die Änderungen durch einen Klick auf das Disketten- Icon speichern.

27 36 5 BEISPIELPROJEKT WEINGUT TRAUBNER 5. Überprüfen Sie nun ob Ihre Website funktioniert. Verwenden Sie dazu die Funktion Show aus dem Kontextmenü. Abb. 5-29: Anzeigen der 6. Es öffnet sich ein neues Browserfenster oder ein neuer Browsertab. Die Fehlermeldung sollte verschwunden sein. Übung 1: Open Source Layouts im Wizard Ein effizienter erster Schritt zur neuen Website ist der Wizard. In dieser Übung können Sie das nun selbst ausprobieren. Laden Sie sich dazu ein einspaltiges Layout von einer der folgenden Seiten herunter: Diese Seiten bieten lizenzfreie bzw. Open Source-Designs an, die Sie verwenden dürfen. Achten Sie darauf, dass das Layout mindestes valides XHTML 1.0 oder HTML5 aufweist und über eine Navigation verfügt. Binden Sie das Layout dann mit dem Wizard ein und mappen Sie Main Content Area und Main Menu.

28 6.1 LÖSCHEN DES BESTEHENDEN PAGE TREES 37 6 Page Tree In dieser Lektion lernen Sie: wie Sie eine Informationsarchitektur als TYPO3 Page Tree umsetzen. Im Moment besteht Ihre Weingut-Website aus mehreren verlinkten Seiten mit Layout. Das Layout ist korrekt und die Verlinkung funktionstüchtig. So weit, so gut. Die einzelnen Seiten stammen allerdings nicht aus der Informationsarchitektur, die Sie mit Herrn Traubner zusammen entwickelt haben, sondern sind Vorgaben des TemplaVoilà-Wizards. Das sollten Sie schleunigst ändern, bevor Sie Herrn Traubner den aktuellen Projektstand vorführen! 6.1 Löschen des bestehenden Page Trees Entfernen Sie zunächst die Vorgaben, die Ihnen der TemplaVoilà-Wizard angelegt hat. Damit Sie nicht jede Seite und Unterseite einzeln löschen müssen, sollten Sie das rekursive Löschen aktivieren. Aktivierung des rekursiven Löschens: 1. Wechseln Sie zu User Tools User settings links im Menü. Abb. 6-1: User Tools: User settings 2. Wählen Sie den Reiter Edit & Advanced functions(1) und aktivieren Sie die Checkbox Recursive Delete(2), klicken Sie zum Bestätigen auf den Button Save Configuration(3) ganz unten. Abb. 6-2: User settings: Edit & Advanced functions Rekursives Löschen gibt Ihnen die Möglichkeit, einen kompletten Ast Ihres Page Trees auf einmal zu löschen. Löschen Sie z.b. Content Elements, entfernt TYPO3 automatisch alle Unterseiten und auch die Unterseiten der Unterseiten.

29 38 6 PAGE TREE Wie funktioniert nun das Löschen? Am einfachsten ist es per Drag & Drop. 3. Wählen Sie Web Page links im Menü. Sobald Sie anfangen, eine Seite mit der Maus zu ziehen (Drag), erscheint unten ein Mülleimer-Icon. Legen Sie die Seite auf dem Mülleimer ab (Drop). Bei rekursivem Löschen müssen Sie die Nachfrage aus Sicherheitsgründen noch mit YES bestätigen. Abb. 6-3: Seiten löschen im Page Tree Sollte Sollten der Page-Tree bei Ihnen nicht komplett sichtbar sein, so müssen Sie ihn über das kleine Dreieck ausklappen. Sie einmal versehentlich eine Seite löschen, bietet Ihnen TYPO3 die Möglichkeit, die Aktion sofort wieder rückgängig zu machen. Das gilt aber nicht für rekursives Löschen deswegen die Sicherheitabfrage! 4. Löschen Sie nun alle Unterseiten, aber behalten Sie den Storage Folder! Abb. 6-4: Page Tree nach dem Löschen 6.2 Umsetzen der Informationsarchitektur als Page Tree Jetzt können Sie die Informationssarchitektur des Weinguts verwirklichen. Die Startseite soll in der Menü-Navigation auftauchen. Darum muss die Einstiegs-URL z.b. auf die Startseite umleiten. Die Seite soll also folgende Struktur besitzen: Start Weinberge Familie/Geschichte Impressionen