27

Linie - bücher.de

  • Upload
    others

  • View
    25

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Linie - bücher.de
Page 2: Linie - bücher.de

First

Max.Linie

Max.Linie

Hier Mini IVZ eingeben!

Abstand untere Tabellenlinie zu Textanfang 1,8 cm-> also: manuell auf den Arbeitsseiten ziehen!!!

Erstellen auf denArbeitsseiten(siehe Muster)

III

Inhalt

1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Über dieses Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Aktualisierung auf TYPO3-Version 6.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Aufbau dieses Buchs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Beispielskripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Typografische Konventionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Weitere Ressourcen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Die Geschichte von TYPO3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Danksagung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2 TYPO3 installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Anforderungen an die Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Das geeignete Betriebssystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Anforderungen an die Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Den Server installieren und konfigurieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Den Quellcode unter Linux bereitstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18TYPO3 unter Windows installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Das Install-Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3 Das Backend kennenlernen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Der ideale Browser und Browsereinstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Begriffe der TYPO3-Welt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Der erste Frontend-Aufruf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Login in das Backend. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Die Backend-Module kennenlernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Die Backend-Sprache ändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Zugangsdaten ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Eine erste Seite anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Page 3: Linie - bücher.de

IV Inhalt

4 Das Praxisbeispiel vorbereiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Die Anforderungen an das Praxisbeispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Eine Designvorlage erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Aufbau der Navigationsstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66TYPO3-Fehlermeldungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

5 TypoScript in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Was genau ist TypoScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77TypoScript-Templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Objekte und Eigenschaften einer Webseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Die erstellte Designvorlage integrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105TypoScript-Funktionen nutzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113Das TYPO3-Caching-Konzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

6 Grafiken mit TypoScript erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Das vorhandene Logo einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Grafiken dynamisch erzeugen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Den grafischen Trailer erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

7 Menüs erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Einführung in die Erstellung dynamischer Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Das obere Textmenü erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Das grafische Menü erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Einen Klickpfad realisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

8 Inhalte ausgeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Neue Seiteninhalte anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Vorhandene Seiteninhalte ausgeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183Besondere Seiteninhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Inhalte in anderen Bereichen ausgeben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Inhalte am rechten Rand ausgeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214Flexiblere Gestaltung mit Backend-Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218Übersicht über Seiteninhaltstypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

9 Erweiterte Darstellung von Inhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Einen zeitabhängigen Begrüßungstext realisieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Mehrsprachige Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227Zugriffsbeschränkte Seiten und Seiteninhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Spezielle Druckansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252E-Mail-Adressen vor Spam schützen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Page 4: Linie - bücher.de

Inhalt V

10 Bestehende Erweiterungen integrieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Einführung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Der TYPO3-Extension Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263Das News-Plugin integrieren und anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Erweiterte Suche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304Probleme nach der Installation einer Erweiterung. . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

11 Eine eigene Erweiterung schreiben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315Ein eigenes Mitarbeiter-Plugin entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315Die Struktur einer TYPO3-Erweiterung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334Die Klassen im Detail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337Die Ausgabe mit Fluid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341TypoScript-Parameter übergeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345Daten aus der Datenbank laden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

12 Benutzerrechte für Redakteure anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351Überblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351Administratoren anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Redakteure anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355Das Backend noch benutzerfreundlicher gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Workspaces: Trennung von Entwurfsarbeits- und Live-Umgebung . . . . . . . . . . . . . . 376

13 Fluid Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

14 Tipps und Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399Wiederkehrende Aufgaben: Der Scheduler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399Update auf eine höhere TYPO3-Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402Ein Backup erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405Suchmaschinen und TYPO3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408Sicherheit und TYPO3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418Das Backend-Passwort vergessen? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

TypoScript-Kurzreferenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430Objektgruppen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Funktionen/stdWrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Objekt-Referenz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461OptionSplit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Page 5: Linie - bücher.de

VI Inhalt

Primäre Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468TSConfig : Benutzer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474TSConfig : Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Page 6: Linie - bücher.de

First

Max.Linie

Max.Linie

Hier Mini IVZ eingeben!

Abstand untere Tabellenlinie zu Textanfang 1,8 cm-> also: manuell auf den Arbeitsseiten ziehen!!!

Erstellen auf denArbeitsseiten(siehe Muster)

55

Kapitel 4KAPITEL 4

Das Praxisbeispiel vorbereiten

In diesem Kapitel erfahren Sie, welche Überlegungen Sie vor Beginnder Realisierung eines TYPO3-Projekts anstellen und wie Sie danndas Projekt mit TYPO3 angehen sollten. Dazu wurde ein umfassen-des Praxisbeispiel gewählt, das in den folgenden Kapiteln Schrittfür Schritt umgesetzt wird.

Damit Sie sich in den nächsten Kapiteln ausgiebig mit der eigentli-chen Herausforderung bei TYPO3-Projekten – der TYPO3-eigenenSkriptsprache TypoScript – beschäftigen können, werden in diesemKapitel die Grundlagen dazu gelegt. So werden Sie zunächst dieAnforderungen an das Praxisbeispiel kennenlernen, anschließendeine HTML-Designvorlage auf Basis von CSS erstellen und in dieserVorlage dynamische Bereiche identifizieren und durch Platzhalterersetzen. Eine geeignete Seitenstruktur erstellen Sie am Ende desKapitels.

Die Anforderungen an das PraxisbeispielAls Beispiel soll eine Internetpräsentation für die SnowboardschuleMeyer-Müller-Schmidt erstellt werden. Diese Internetpräsentationsoll folgende Features enthalten, die Sie im Laufe dieses Praxisbei-spiels umsetzen werden.

Präsentation auf Basis von HTML und CSSDie Präsentation wird auf klassischem Wege mit HTML undCSS-Formatierung erstellt. Auf den Einsatz von Frames wirdverzichtet.

In diesem Kapitel:

• Die Anforderungen an das Pra-xisbeispiel

• Eine Designvorlage erstellen• Aufbau der Navigationsstruk-

tur• TYPO3-Fehlermeldungen

Page 7: Linie - bücher.de

56 Kapitel 4: Das Praxisbeispiel vorbereiten

MenüsEs soll zwei Menüs geben, ein grafisches auf der linken Seiteund ein Textmenü im oberen Bereich. Das grafische Menü ent-hält klassische Navigationspunkte wie z.B. Aktuelles und Überuns. Ein Roll-over-Effekt soll eingebunden werden. Das Text-menü im oberen Bereich enthält hingegen eine reine Hilfsnavi-gation. Hier finden sich Menüpunkte wie Sitemap, Impressum,Kontakt usw.

Grafischer TrailerIm oberen Bereich soll ein grafischer Trailer erscheinen. In die-sen Trailer wird der Titel der aktuellen Seite ebenfalls grafischeingebunden. Außerdem soll das im Trailer verwendete Bildausgetauscht werden können, auch nur für einzelne Seitenbe-reiche. Diesen Austausch nehmen Redakteure vor, daher solltedie Pflege der Seite so unkompliziert wie möglich sein. DieseAnforderungen an den grafischen Trailer erfordern eine voll-ständig dynamische Erstellung.

InformationsbereichIn einem Bereich rechts sollen permanent Informationenbereitgestellt werden können. Diese Informationen könnensich von Seite zu Seite ändern, andererseits soll es aber auchmöglich sein, dass Inhalte im rechten Bereich während dergesamten Präsentation zu sehen sind, ohne dass sie auf jederSeite neu angelegt werden müssen. Auch sollen hier permanentdie letzten drei News-Beiträge angezeigt werden.

News-BeiträgeEs gibt, wie eben erwähnt, News-Beiträge. Diese sollen ineinem separaten Modul gekapselt werden.

SuchfunktionDem Benutzer soll eine umfangreiche Suche in den redaktio-nellen Beiträgen ermöglicht werden. Eine erweiterte Suchfunk-tion durchsucht auch PDF- und Word-Dokumente.

SitemapNeben der Suche soll als Service auch eine Sitemap angebotenwerden, die dynamisch ist und automatisch neue bzw.gelöschte oder versteckte Seiten berücksichtigt.

ZweisprachigkeitDa die Snowboardschule Kunden aus der ganzen Welt hat, solldie gesamte Präsentation zweisprachig sein. Dabei soll der

Page 8: Linie - bücher.de

Die Anforderungen an das Praxisbeispiel 57

Besucher der Website jeweils von Seite zu Seite zwischen derdeutschen und der englischen Version wechseln können; eineSprachänderung soll ihn dabei nicht automatisch zurück zurHomepage bringen, sondern lediglich auf der angezeigten Seitedie Sprache wechseln.

DruckansichtMithilfe einer speziellen Druckansicht sollen auch optischansprechende Ausdrucke möglich werden. Unnötige Elementewie die Navigation oder der grafische Trailer werden in derDruckansicht nicht benötigt, dafür aber ein Copyright-Hin-weis. Die Druckansicht soll ebenfalls mehrsprachig zur Verfü-gung stehen und dynamisch erstellt werden. MehrfachesEinpflegen von Inhalten, außer aufgrund verschiedener Spra-chen, soll dabei möglichst vermieden werden.

KlickpfadIn einem Klickpfad soll dem Besucher angezeigt werden, wo inder Internetpräsentation er sich gerade befindet.

Zeitabhängige BegrüßungAbhängig von der Tageszeit soll der Besucher mit Guten Mor-gen, Guten Tag oder Guten Abend begrüßt werden. Zusätzlichsoll das aktuelle Datum angezeigt werden.

Geschützter BereichIn einem geschützten Bereich, der nur für Kunden nach derAuthentifizierung durch Benutzername und Passwort zugäng-lich ist, sollen Benutzer zusätzliche Inhalte herunterladen kön-nen, z.B. Fotos eines bestimmten Snowboardkurses.

Bedienfreundlichkeit für RedakteureDie Inhalte sollen von Mitarbeitern der Snowboardschule(Redakteuren) ohne spezielle Internetkenntnisse so leicht wiemöglich bearbeitet und erweitert werden können. Nicht benö-tigte Funktionalitäten sollen den Mitarbeitern deshalb auchnicht zur Verfügung stehen.

Sie werden in diesem Praxisbeispiel mit einer einfachen HTML-Datei arbeiten; die Formatierungen werden mit CSS vorgenommen.Abbildung 4-1 zeigt das gewünschte Ergebnis, das Sie in den fol-genden Abschnitten und Kapiteln mithilfe von TYPO3 herstellenwerden.

Page 9: Linie - bücher.de

58 Kapitel 4: Das Praxisbeispiel vorbereiten

Eine Designvorlage erstellenAuch wenn uns TYPO3 das Erstellen von Webseiten abnimmt,wird trotzdem eine HTML-Vorlage benötigt. Es gibt zwar auch dieMöglichkeit, diese Designvorlagen zu umgehen, doch muss dannsämtlicher HTML-Code mit TypoScript beschrieben werden. Dasist nicht nur aufwendig und unübersichtlich – das später zu erstel-lende TypoScript-Template wird dadurch auch unnötig aufgebläht.Es hat sich bewährt, TYPO3-Projekte mit Designvorlagen zu erstel-len.

Für die Arbeit mit Designvorlagen wird im Folgenden die klassi-sche, bewährte Methode vorgestellt. Es existieren aber schon wei-tere Techniken für die Arbeit mit TYPO3, z.B. das Templating perFluid, das in Kapitel 13 vorgestellt wird.

Präzise HTML-AusarbeitungDie Designvorlage können Sie in Ihrem HTML-Lieblingseditor soumsetzen, wie Sie es gewohnt sind. Die präzise HTML-Ausarbei-tung der Designvorlage legt bereits den Grundstein für die spätereUmsetzung mit TYPO3. HTML-Fehler sollten Sie vermeiden, dennsie könnten später zu Verwirrung führen. Problematisch ist, dass

Abbildung 4-1Das angestrebte Aussehen

der Beispielwebseite

Page 10: Linie - bücher.de

Eine Designvorlage erstellen 59

das Design an zwei Stellen beschrieben wird: Statischer HTML-Code wird in der Designvorlage abgelegt, dynamische Elementewerden über TypoSript beschrieben. Fehler werden Sie später über-wiegend in Ihrem TypoScript-Template suchen, da die Designvor-lage bei der praktischen Arbeit in den Hintergrund rückt.

Grafiken und DesignvorlagenEine erstellte HTML-Designvorlage werden Sie in der Praxis nichtdirekt über den Browser aufrufen. Wenn Sie eine TYPO3-Präsenta-tion aufrufen, z.B. über die URL http://meinedomain.tld, wird dieDatei index.php aufgerufen, die bereits Bestandteil des TYPO3-Sys-tems ist. In dieser Datei wird ausgeführt, was Sie in den folgendenKapiteln konfigurieren und mit TypoScript beschreiben.

Wenn Sie in Ihrer Designvorlage mit statischen Grafiken arbeiten,sollten Sie schon beim Erstellen dieser Designvorlage auf die spätereDateistruktur achten. Statische Grafiken innerhalb der Designvor-lage sind im Regelfall Grafiken, die sich innerhalb der Präsentationnie ändern. Das sind z.B. grafische Elemente, die sich über diegesamte Präsentation erstrecken. Ein typisches statisches grafischesElement ist beispielsweise das Logo einer Firma. Im folgenden Pra-xisbeispiel wird das Logo allerdings dynamisch erstellt, um grafischeFunktionalitäten von TYPO3 zu demonstrieren.

In diesem Praxisbeispiel ändert sich die generelle Struktur aus div-HTML-Tags, sogenannten Containern, nicht; somit kann diegesamte Containerstruktur statisch in die Designvorlage aufgenom-men werden.

Der Aufruf einer TYPO3-Präsentation findet in der Regel über http://www.domainname.de/index.php statt. Beim Ausführen dieserindex.php wird, je nach Konfiguration mit TypoScript, die HTML-Designvorlage von einem beliebigen lokalen Speicherort eingebun-den und verarbeitet. Das zurückgelieferte HTML-Ergebnis fragtdann alle Grafiken und eingebundenen Dateien relativ zum Ver-zeichnis der Datei index.php an.

Bei TYPO3-Projekten sollten Sie eigene Dateien möglichst unterhalbdes Ordners fileadmin/ ablegen, z.B. in fileadmin/images/. Grafikenaus der Designvorlage werden also in diesem Unterverzeichnis erwar-tet. Der Ordner fileadmin/ (bzw. das im Install Tool unter $TYPO3_CONF_VARS["BE"]["fileadminDir"] angegebene Verzeichnis) wirdnativ von TYPO3 unterstützt, aus dem Backend kann z.B. über dasBackend-Modul Dateiliste darauf zugegriffen werden.

Page 11: Linie - bücher.de

60 Kapitel 4: Das Praxisbeispiel vorbereiten

Um diese Situation auf Ihrem Arbeitsplatz bei der Erstellung vonDesignvorlagen zu simulieren, empfiehlt es sich daher, die Grafikenausgehend vom Ort Ihrer Designvorlage im Unterordner fileadmin/images/ abzulegen. Ihre HTML-Designvorlage selbst legen Siedarum zum Beispiel in einem Ordner C:\Projekte\Snowboardschule\ab, wohingegen Sie die verwendeten Grafiken in C:\Projekte\Snow-boardschule\fileadmin\images\ ablegen.

Der statische HTML-Code des PraxisbeispielsWenn Sie ein TYPO3-Projekt beginnen, sollten Sie sich zunächstvorstellen, Sie erstellten die Website traditionell, also statisch undohne jegliche Form von Dynamik. Testen und optimieren Sie diesestatische Seite auf den gewünschten Webbrowsern. Die Massen-produktion von Seiten, grafischen Menüpunkten usw. ist nicht not-wendig.

Ein Beispiel für eine solche Ausarbeitung finden Sie auf unsererDownloadseite unter dem Dateinamen vorlage_statisch.html. Indem Beispiel wurde auch ein auf dem YAML-Framework (http://www.yaml.de) basierendes CSS-Stylesheet verwendet (style.css), dasSie an derselben Stelle finden.

Dynamische Bereiche durch Platzhalter ersetzenEinige Bereiche der Website bleiben statisch, andere sollen dyna-misch werden. Folgende Auflistung gibt Ihnen eine Übersicht darü-ber, welche Bereiche einer Website dynamisch und welche statischsind.

Statische Elemente

• die generelle Struktur, bestehend aus div-HTML-Elementen

• das Logo (normalerweise statisch, soll im Praxisbeispiel aberdynamisch ersetzt werden)

Dynamische Elemente

• der grafische Trailer

• das grafische Menü auf der linken Seite

• das Textmenü im oberen rechten Bereich

• der eigentliche Content-Bereich in der Mitte

• der Content-Bereich auf der rechten Seite

• der zeitabhängige Begrüßungstext mit Datum

Page 12: Linie - bücher.de

Eine Designvorlage erstellen 61

• der Sprachwechsler (Textlink)

• der Textlink zur Druckversion

• der Klickpfad, aufgrund der Mehrsprachigkeit auch inklusivedes Einleitungstexts Sie befinden sich hier

Sämtliche dynamischen Elemente werden im Folgenden aus demerstellten HTML-Dokument (vorlage_statisch.html) entfernt unddurch Platzhalter ersetzt. Sie können später über TypoScript diesePlatzhalter mit HTML-Code und seinen dynamischen Bestandtei-len wieder ersetzen. Redakteure erhalten dadurch die Möglichkeit,schnell und problemlos die Präsentation auch ohne HTML-Kennt-nisse zu bearbeiten.

Das Logo kann in vielen Fällen statisch in die Designvorlage inte-griert werden. Um Grafikfunktionalitäten zu erläutern, wird dasLogo für unser Beispiel in Kapitel 6, Grafiken mit TypoScript erstel-len, dynamisch eingelesen. Klassische Anwendungsfälle für dasdynamische Ersetzen eines Logos sind z.B. unterschiedlicheGeschäftsbereiche mit abweichenden Logos.

Platzhalter (bzw. Marker) werden in TYPO3 immer großgeschrie-ben und in jeweils drei Rautezeichen eingeschlossen und solltennicht in Kommentaren stehen. Die drei Rautezeichen sind zwin-gend notwendig, die Großschreibung ist dagegen optional undkeine zwingende TYPO3-Vorgabe, jedoch wird z.B. in Erweiterun-gen, die eine Designvorlage mitliefern, Großschreibung verwendet.Außerdem erleichtert es die Fehlersuche ungemein, wenn Sie IhrTemplate (aus welchen Gründen auch immer) anderen zur Verfü-gung stellen. Aber auch sonst macht Ihnen die einheitliche Groß-schreibung die Arbeit wesentlich leichter, denn Sie müssen sich anspäterer Stelle nicht immer fragen, wie die genaue SchreibweiseIhrer Platzhalter ist. So könnte z.B. ein Platzhalter, der den grafi-schen Trailer kennzeichnet, typischerweise ###TRAILER###heißen.

Stünden Platzhalter in Kommentaren, würden sie durch einen inTypoScript definierten HTML-Code ersetzt. Dieser HTML-Codewürde jedoch nicht angezeigt, wenn er von einem Kommentar ein-geschlossen ist. Somit kann die Verwendung von Kommentarenmit Platzhaltern zu einer langwierigen Fehlersuche führen, wobeidie Ursache des Fehlers in der Designvorlage liegt. Sie werden dannvoraussichtlich lange Zeit damit verbringen, den Fehler in Typo-Script auszumachen, und vermutlich doppelt so lange auf Typo-Script schimpfen.

Page 13: Linie - bücher.de

62 Kapitel 4: Das Praxisbeispiel vorbereiten

Teilbereiche kennzeichnenWie schon mehrfach erwähnt wurde, wird die Designvorlage anspäterer Stelle mit TypoScript eingelesen. Die Platzhalter werdendurch dynamische Werte ersetzt und danach wird das Resultatzurückgeliefert. Allerdings erzeugt TYPO3 bei jeder Ausgabe einenHeader inklusive <body>-Tag. Somit liefert TYPO3 das Ergebnisnicht eins zu eins zurück, sondern hüllt es in einen eigenen Kopfbe-reich. Das von TYPO3 eingelesene Dokument darf also diese Datennicht enthalten, da ansonsten im zurückgelieferten Ergebnis zweiHeader-Definitionen und zwei <body>-Tags angegeben wären.

Es besteht jedoch die Möglichkeit, dass Sie diese Informationen garnicht erst mit in die Designvorlage aufnehmen und Ihre Designvor-lage nur aus dem HTML-Code besteht, der im <body>-Bereich ange-geben wurde.

Alternativ können Sie sogenannte Teilbereiche (Subparts) definie-ren und mit TypoScript an späterer Stelle angeben, dass nicht diegesamte Designvorlage eingelesen werden soll, sondern nur einbestimmter Teilbereich. Teilbereiche werden in der Designvorlageebenfalls von jeweils drei Rautezeichen eingeschlossen und glei-chen optisch Platzhaltern. Dabei wird ein solcher Bezeichner zwei-mal innerhalb eines Dokuments angegeben – der eingeschlosseneBereich ist der gewünschte Teilbereich.

Um eine optische Trennung von Platzhaltern zu erreichen, ist es beiTeilbereichsbezeichnern möglich, sie in Kommentare zu schreiben.Innerhalb eines Kommentars können Sie zusätzliche Angaben wiez.B. begin oder end machen. Im folgenden HTML-Code besteht derTeilbereich TEST nur aus der Zeile <b>Dieser Text steht innerhalbdes Teilbereichs</b>.

Dieser Text steht außerhalb des Teilbereichs<!-- ###TEST### begin -->

<b>Dieser Text steht innerhalb des Teilbereichs</b><!-- ###TEST### end -->Dieser Text steht außerhalb des Teilbereichs

Definieren Sie in Ihrer Designvorlage direkt nach dem einleitendenbzw. direkt vor dem schließenden <body>-Tag einen Teilbereich miteinem frei wählbaren Bezeichner, z.B. ###DOKUMENT###.

Page 14: Linie - bücher.de

Eine Designvorlage erstellen 63

Die fertige DesignvorlageIm folgenden Codebeispiel können Sie den HTML-Quellcode derfertig ersetzten Designvorlage sehen, und Abbildung 4-2 zeigt dasResultat, also wie die Designvorlage dann im Browser aussieht.Vom anfänglich erstellten HTML-Dokument bleibt dabei nichtmehr viel übrig.

Die fertige Designvorlage finden Sie auf unserer Downloadseiteunter dem Dateinamen vorlage.html.

Beispiel 4-1: Designvorlage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>Snowboardschule Meyer-Mueller-Schmidt</title><link href="fileadmin/css/style.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]><link href="fileadmin/css/ie.css" rel="stylesheet" type="text/css" /><![endif]--></head><body>

<!-- ###DOKUMENT### begin --><div class="page_margins">

<div class="page"><div id="topnav">###MENU_OBEN###</div><div id="header">

<div id="logo">###LOGO###</div><div id="trailer">###TRAILER###</div>

</div><div id="main">

<div id="col1"><div id="col1_content" class="clearfix">###MENU_LINKS###</div>

</div><div id="col3">

<div id="col3_content" class="clearfix"><div id="infos">

<div id="meta">###DATUM### :: ###SPRACHE### ::###DRUCKVERSION###

</div><div id="klickpfad">###KLICKPFAD###</div><div id="suche">###SUCHE###</div>

</div><div class="subcolumns">

<div id="main_content" class="c75l"><div class="subcl">###INHALT###</div>

Page 15: Linie - bücher.de

64 Kapitel 4: Das Praxisbeispiel vorbereiten

Dateien mit dem Dateimanager zur Verfügung stellen Damit die soeben erstellte Designvorlage in Ihrer TYPO3-Umge-bung zur Verfügung steht, muss sie zunächst auf den Server hoch-geladen werden. Das ist prinzipiell mit FTP möglich, hier solljedoch das Hochladen mithilfe des integrierten Dateimanagersgezeigt werden. Wenn Sie die Designvorlage per FTP zur Verfügungstellen möchten, dann achten Sie darauf, dass Sie sie im Ordnerfileadmin/ oder einem Unterordner davon speichern.

Neben der Designvorlage müssen Sie außerdem noch die verwen-deten Grafiken und TTF-Schriften im System zur Verfügung stel-len. Die Grafiken sollen im Ordner fileadmin/images/ abgelegtwerden, die TTF-Schriftdateien im Ordner fileadmin/fonts/. TTF-

</div><div id="sidebar_right" class="c25r">

<div class="subcr">###RECHTS###</div></div>

</div></div><div id="ie_clearing"> &#160; </div>

</div></div><div id="footer">

Copyright by Snowboardschule Meyer-Müller-Schmidt, 2011

</div></div>

</div><div></div><!-- ###DOKUMENT### end -->

</body></html>

Beispiel 4-1: Designvorlage (Fortsetzung)

Abbildung 4-2Die substituierte Designvorlage

im Browser

Page 16: Linie - bücher.de

Eine Designvorlage erstellen 65

Dateien werden für dynamisch erzeugte Grafiken benötigt, indenen Text dargestellt werden soll. Für das Praxisbeispiel verwen-den wir die Schrift Lucida.

Legen Sie zunächst die drei Ordner fileadmin/images/, fileadmin/cssund fileadmin/fonts/ im Dateimanager an (vgl. auch Abbildung 4-3):

1. Wechseln Sie über das Menü in das Dateiliste-Modul.

2. Klicken Sie auf das Icon des fileadmin/-Ordners, um dessenKontextmenü zu öffnen.

3. Wählen Sie im Kontextmenü die Option Neu.

4. Geben Sie über das Auswahlfeld an, dass Sie drei Ordner anle-gen möchten.

5. Tragen Sie in die drei Felder die gewünschten Unterordnerimages, css und fonts ein.

6. Bestätigen Sie Ihre Angaben mit Ordner anlegen.

Die Designvorlage vorlage.html soll direkt im Verzeichnis fileadmin/zur Verfügung gestellt werden. Klicken Sie dazu erneut im Ver-zeichnisbaum auf das Icon vor dem Textlink fileadmin/ und wählenSie aus dem Pop-up-Menü den Eintrag Dateien hochladen aus.

Klicken Sie Durchsuchen an, um die Dateien von Ihrem lokalen PCzu übertragen. Wählen Sie die Datei vorlage.html aus.

Abbildung 4-3Einen neuen Ordner erstellen

Page 17: Linie - bücher.de

66 Kapitel 4: Das Praxisbeispiel vorbereiten

Damit Sie den aktuellen Inhalt des Ordners fileadmin/ angezeigtbekommen, klicken Sie im Verzeichnisbaum direkt auf den Textlinkdes Ordners fileadmin/. Um die Unterordner und somit auch diesoeben erstellten Ordner images/, css/ und fonts/ sehen zu können, müs-sen Sie den Verzeichnisbaum über das Pfeilspitzensymbol aufklappen.

Neben der Designvorlage sollen noch die verwendeten Grafiken,das Stylesheet und die TTF-Schriftart im System zur Verfügunggestellt werden. Die benötigten Grafiken legen Sie nach dem glei-chen Prinzip im Ordner fileadmin/images/ ab, die Stylesheets imOrdner fileadmin/css/.

Als Schriftart wird nur die Schrift Lucida als TTF-Datei benötigt.Laden Sie deshalb aus dem Ordner Windows\Fonts die Datei lucida.ttf in den Ordner fileadmin/fonts hoch. In der Regel können überdas Durchsuchen-Fenster keine TTF-Dateien per Doppelklick ausdem Ordner C:\Windows\Fonts\ hochgeladen werden. Unter Win-dows müssen Sie dazu den Dateinamen der TTF-Datei explizit imDurchsuchen-Fenster angeben, also z.B. C:\Windows\Fonts\lucida.ttf (achten Sie auf die Backslashes).

Tipp Falls die Schriftart Lucida auf Ihrem System nicht zur Verfügungsteht, können Sie für das Praxisbeispiel auch eine beliebigeandere TrueType-Schriftart verwenden (beispielsweise Verdana).

In Kapitel 6, Grafiken mit TypoScript erstellen, in dem Grafikendynamisch erstellt werden, greifen Sie ebenfalls auf Grafikenzurück, die Sie bereits jetzt in das System hochladen können. DieseDateien finden Sie auf der Downloadseite unter den Dateinamentrailerbild.jpg, trailer_mask.png und trailer_overlay.png. Laden Siediese Dateien ebenfalls in den Ordner fileadmin/images/ hoch.

Aufbau der NavigationsstrukturDer erste Schritt zur Umsetzung des gelieferten Designs ist dasAnlegen einer geeigneten Seitenstruktur, die in TYPO3 abgebildetwird. Dabei sind folgende Überlegungen nötig:

Welche Navigationen gibt es?Für das Praxisbeispiel Snowboardschule wird es ein linkes Menü(grafisch) und ein Menü im oberen Bereich (Text) geben. ZumAbbilden dieser Struktur werden Hilfsseiten eingeführt, die demBesucher der Website nicht zur Verfügung stehen sollen.

Wie viele Ebenen wird die Navigation enthalten?Es wurden bei den Anforderungen keine konkreten Angabendarüber gemacht, wie tief bzw. über wie viele Ebenen die Naviga-

Page 18: Linie - bücher.de

Aufbau der Navigationsstruktur 67

tion gehen wird. Das linke, grafische Menü soll daher willkürlichfür maximal zwei Ebenen beschrieben werden. Das obere Text-menü hingegen wird keine weiteren Unterseiten enthalten. DieseEbenenanzahl sehen Sie auch im Screenshot zu den Anforderun-gen an das Praxisbeispiel (siehe Abbildung 4-1).

Wo befindet sich die Homepage?Eigentlich sollte der Begriff Homepage eindeutig sein. Sie werdenspäter beim Aufbau der Struktur allerdings feststellen, dass dergenaue Ort der Homepage nicht unbedingt eindeutig festgelegt ist.

Überlegungen zur richtigen StrukturIn diesem Abschnitt werden Sie an die geeignete Seitenstrukturherangeführt und lernen so die Hintergründe und Vorteile der indiesem Beispiel verwendeten Struktur kennen.

Navigationsstruktur abbildenIm Praxisbeispiel werden zwei Navigationen eingesetzt: im oberenTeil die Hilfsnavigation, die die Menüpunkte Homepage, Sitemap,Impressum und Kontakt enthält, und auf der linken Seite die zweiteNavigation mit Menüpunkten wie Homepage, Aktuelles, Geschütz-ter Bereich usw. Wie Sie bereits erkennen können, gibt es innerhalbder Navigation gleich zweimal die Seite Homepage. Welche Seitedavon nun die tatsächliche Homepage sein soll, erfahren Sie amEnde dieses Abschnitts.

In TYPO3 wird die Seitenstruktur ähnlich wie ein Baum aufgebaut:Es gibt eine Wurzel, von der aus im Regelfall ein Stamm unddiverse Zweige abgehen. An der Wurzel kann im wahrsten Sinnedes Wortes nicht gerüttelt werden, denn sie ist tief und fest im Sys-tem verankert. In TYPO3 wird die Wurzel als rootlevel bezeichnet(zu Deutsch: Wurzelebene oder Root-Ebene).

Ausgehend von dieser Root-Ebene können Sie in TYPO3 die Navi-gationsstruktur abbilden. Das ist ähnlich wie bei Betriebssystemen,in denen Verzeichnisstrukturen erstellt werden können, die miteinem Datenträger beginnen. In TYPO3 legen Sie mit der Navigati-onsstruktur bzw. mit Seiten im Allgemeinen allerdings keine Ver-zeichnisse an, sondern eine Struktur von Seiten, die lediglich in derDatenbank abgebildet wird.

Beim Aufbau der Navigationsstruktur müssen Sie berücksichtigen,dass es Redakteuren möglich sein muss, das Menü selbstständig zuerweitern bzw. zu reduzieren. Dabei soll von TYPO3 dynamisch alldas gemacht werden, was zur Aufnahme eines weiteren Menü-

Page 19: Linie - bücher.de

68 Kapitel 4: Das Praxisbeispiel vorbereiten

punkts in die Navigation erforderlich ist, ohne dass der Redakteurbesondere TYPO3-Kenntnisse haben muss.

Zur Realisierung von Navigationen mit mehreren Bereichen gibt eszwei Möglichkeiten. Die erste besteht darin, dass Sie später mitTypoScript angeben, welche Seiten zu welcher Navigation gehören.Diese statische Verankerung in TypoScript hat den Nachteil, dassneu angelegte Seiten einer ersten Navigationsebene erst mit in dasTypoScript-Template aufgenommen werden müssen, bevor dieneue Seite im Menü angezeigt wird.

Die zweite, flexiblere Möglichkeit ist, über TypoScript mitzuteilen,dass Seiten, die sich unterhalb einer definierten Seite befinden, einganz bestimmtes Menü bilden. Wenn Redakteure nun unterhalbeiner solchen Hilfsseite weitere Seiten anlegen, werden diese auto-matisch mit in das Menü aufgenommen. Da die Vorteile der zwei-ten Möglichkeit genutzt werden sollen, müssen mindestens zweisolcher sogenannten Hilfsseiten existieren: eine für das obere Menüund eine für das linke.

Zwischengeschaltete Seite zur Template-Vererbung

Nach diesen Überlegungen gibt es zurzeit ausgehend von der Root-Ebene zwei Hilfsseiten für die beiden Menüs, die die Seiten der jewei-ligen Menüs als Unterseiten haben. Allerdings ist noch folgendesProblem zu lösen: In Kapitel 5, TypoScript in der Praxis, werden Sieerfahren, dass TypoScript-Templates auf einer Seite angelegt werdenund sich auf die Unterseiten vererben. Sie möchten in der Regel abernur ein TypoScript-Template erstellen, das für das gesamte TYPO3-Projekt gültig ist. Auf der Root-Ebene können Sie keine Templatesanlegen, da es sich dabei nicht um eine reguläre Seite handelt. Somitkönnten Sie zum jetzigen Zeitpunkt nur ein TypoScript-Templateauf den Hilfsseiten anlegen, die sich dann auf die Unterseiten auswir-ken. Ein TypoScript-Template müssten Sie auf der Seite Menü obenanlegen und das gleiche Template noch einmal auf der Seite Menülinks. Sie würden somit das gleiche Template mit identischem Typo-Script-Code zweimal vorhalten.

Abhilfe schafft hier eine weitere zwischengeschaltete Hilfsseite, diesich direkt unterhalb der Root-Ebene befindet und die beiden Hilfs-seiten für die Menüs als Unterseiten hat. Da diese Seite lediglichdem Zweck dient, das TypoScript-Template aufzunehmen, damites an nur einer Stelle gepflegt werden muss und sich auf sämtlicheUnterseiten vererbt, wird diese Seite ebenfalls als Hilfsseite bezeich-net und soll im Folgenden den Seitentitel root tragen.

Page 20: Linie - bücher.de

Aufbau der Navigationsstruktur 69

Wo befindet sich die Homepage?

Die erste Seite, die sich unterhalb der Root-Ebene befindet, wird beimAufruf der Domain http://meinedomain.tld aufgerufen – und das sollteim Regelfall auch die Homepage sein. Jedoch befindet sich zum jetzi-gen Zeitpunkt unterhalb dieser Root-Ebene die Seite root, die lediglichdem Zweck dient, das TypoScript-Template an die Unterseiten zu ver-erben. Die Homepage wurde als Seite an zwei Stellen definiert: einmalim oberen Menü und einmal in linken, grafischen Menü.

Es gibt in TYPO3 die Möglichkeit, eine Seite als Verweis zu definie-ren. Die Seite zeigt dann auf eine andere Seite, in diesem Fall auf eineder beiden Seiten Homepage. Landet ein Websitebesucher auf derSeite root, z.B. weil er die Website über die Domain http://meine-domain.tld aufgerufen hat, wird er auf die Homepage verwiesen.

Allerdings gibt es die Seite Homepage zweimal, wobei die eine die tat-sächliche Homepage sein soll und die andere wiederum nur einVerweis auf diese. Theoretisch können Sie sich aussuchen, welche derbeiden Seiten nun Ihre tatsächliche Homepage sein soll. Es sprichtallerdings einiges dafür, dass sich die Homepage in der linken Naviga-tion befindet: Einer der Vorteile davon ist z.B., dass Sie hier soge-nannte Menüzustände definieren können. Befindet sich derWebsitebesucher auf dieser Homepage, kann im grafischen Menü,also in der linken Navigation, der Menüeintrag als aktuelle Seitebesonders hervorgehoben werden.

Die fertige Seitenstruktur könnte somit wie in Abbildung 4-4 ausse-hen.

Abbildung 4-4Überlegungen zur Seitenstruktur

Page 21: Linie - bücher.de

70 Kapitel 4: Das Praxisbeispiel vorbereiten

Die gewünschte Struktur anlegenDie in Abbildung 4-4 gezeigte Navigation soll nun in der TYPO3-Umgebung abgebildet werden. Die Seite Test, die Sie schon inKapitel 3, Das Backend kennenlernen, angelegt haben, soll bestehenbleiben, aber keinen Einfluss auf das Projekt haben.

Legen Sie jetzt eine Seite unterhalb der Root-Ebene an. Gehen Siedazu wie folgt vor (vgl. auch Abbildung 4-5):

1. Wechseln Sie in das Modul Web: Seite.

2. Öffnen Sie das Kontextmenü der Root-Ebene, indem Sie daraufrechtsklicken, und wählen Sie im Kontextmenü die OptionNeu.

3. Nun müssen Sie noch angeben, an welcher Position die neueSeite eingefügt werden soll. Da der Seitenbaum derzeit noch leerist, gibt es allerdings nicht allzu viele Möglichkeiten, die Seite zuplatzieren.

Es öffnet sich die Maske zum Bearbeiten der Seiteneigenschaften, inder Sie grundlegende Eigenschaften für eine neue Seite angeben kön-nen (siehe Abbildung 4-6):

Abbildung 4-5Eine neue Seite anlegen

Page 22: Linie - bücher.de

Aufbau der Navigationsstruktur 71

1. Da die Seite sichtbar sein soll, wechseln Sie auf die Zugriff-Registerkarte ➊ und entfernen das Häkchen bei Sichtbarkeit:Seite: deaktivieren ➋.

2. Auf der Registerkarte Allgemein geben Sie als Seitentitel root an.

3. Um TYPO3 mitzuteilen, dass es sich bei dieser Seite um dieWurzel eines ganz neuen Seitenbaums handeln soll, setzen Sieweiterhin auf der Registerkarte Verhalten ein Häkchen bei AlsAnfang der Website benutzen.

4. Über das Icon Dokument speichern und schließen ➌ werden dieneue Seite gespeichert und die Maske mit den Seitentitel-Infor-mationen geschlossen.

Tipp Ab der TYPO3-Version 4.5 können Sie Seiten auch einfacher anle-gen, indem Sie links oben im Seitenbaum das Icon Neue Seitenerstellen anwählen und dann auf eines der Seitensymbole klickenund es an die gewünschte Position im Seitenbaum ziehen.

Sie können jetzt im Seitenbaum die neue Seite root direkt unterhalbdes TYPO3-Logos sehen.

Betrachten Sie nun das leere Projekt, indem Sie auf die Zeile mitdem TYPO3-Logo rechtsklicken und aus dem Pop-up-Menü denEintrag Ansehen auswählen. Sie erhalten die Fehlermeldung NoTypoScript template found! (siehe Abbildung 4-7).

Abbildung 4-6Die Maske mit den Eigenschaften für eine Seite

Page 23: Linie - bücher.de

72 Kapitel 4: Das Praxisbeispiel vorbereiten

Tipp Wird im Frontend keine explizite Seiten-ID aufgerufen, z.B. mitwww.meinedomain.tld oder www.meinedomain.tld/index.php?id=0, wird die nächstmögliche Seite unterhalb der Root-Ebene(TYPO3-Logo) ausgeführt – in unserem Fall also die Seite root.Um die in Kapitel 3, Das Backend kennenlernen, angelegte SeiteTest betrachten zu können, kann z.B. diese Seite durch expliziteAngabe einer UID (Unique ID) aufgerufen werden (www.meine-domain.tld/index.php?id=1). Aber auch auf der Seite Test wer-den Sie die Fehlermeldung No template found! erhalten.

Ausgehend von der Seite root legen Sie nun die bekannten SeitenMenü oben und Menü links sowie die jeweiligen Unterseiten an.Dazu gehen Sie so vor wie oben beschrieben, jedoch legen Sie dieseSeiten nicht unterhalb der Root-Ebene an, sondern unterhalb derHilfsseite root, bei den eigentlichen Webseiten wie Homepage,Suche usw. ausgehend von der jeweils übergeordneten Hilfsseite.

Abbildung 4-7Für die aufgerufene Seite

wurde kein TypoScript-Template gefunden.

Abbildung 4-8Die fertige Seitenstruktur

im Seitenbaum

Page 24: Linie - bücher.de

Aufbau der Navigationsstruktur 73

Die von Ihnen fertig erstellte Seitenstruktur sollte in TYPO3 so wiein Abbildung 4-8 aussehen.

Hilfsseiten nicht zugänglich machenIn der Seitenstruktur gibt es einige Seiten, die nicht zur Ablage vonInhalten bestimmt sind: die Seiten root, Menü oben und Menü links.Diese Seiten werden in diesem Projekt als Hilfsseiten bezeichnet unddienen lediglich der Strukturierung sowie der Template-Vererbung.

Die Besucher der Website sollen keine Möglichkeit bekommen,irgendwie auf diese Seiten zu gelangen. Beim Frontend-Aufruf ohneAngabe einer expliziten Seiten-ID, zum Beispiel über die Domainmeinedomain.tld, würde der Besucher auf die Seite root gelangen, dieaber nur existiert, um das Template zu vererben. Sie können dieseSeiten aber unzugänglich machen. Trifft ein Besucher auf eine dieserHilfsseiten, wird er dann z.B. auf die Seite Homepage verwiesen.

Stellen Sie diesen Verweis her, indem Sie den Seitentyp von Standardauf Verweis setzen. Klicken Sie dazu im Seitenbaum auf das Icon vorder Seite root und wählen Sie aus dem Kontextmenü den Eintrag Bear-beiten ➊ aus. Auf der rechten Seite öffnet sich nun die Seite mit den all-gemeinen Seiteneigenschaften. Wählen Sie hier auf der RegisterkarteAllgemein aus dem Drop-down-Menü Typ: den Eintrag Verweis ➋ aus(siehe Abbildung 4-9). Bestätigen Sie die folgende Meldung mit OK.

Die rechte Seite mit den Seiteneigenschaften wird neu geladen undes erscheint eine andere Maske, in der Sie auf der Registerkarte All-gemein im Feld Ausgewähltes Verweisziel auswählen können, wohin

Abbildung 4-9Den Seitentyp ändern

Page 25: Linie - bücher.de

74 Kapitel 4: Das Praxisbeispiel vorbereiten

der Verweis zeigen soll (siehe Abbildung 4-10). Klicken Sie hier aufdas in der Abbildung mit einer ➊ gekennzeichnete Icon, um einebestehende Seite auszuwählen, auf die die Seite verweisen soll.

Tipp Bei der Auswahl der Seite, auf die der Verweis zeigen soll, öffnetsich ein neues Browserfenster. Beachten Sie, dass Pop-up-Blo-cker eventuell das Öffnen eines neuen Fensters unterdrücken.Nehmen Sie entsprechende Einstellungen an Ihrem Browserbzw. der Software vor, so dass die TYPO3-Umgebung Fensteröffnen darf.

Wählen Sie aus dem sich öffnenden Datensatzbrowser die SeiteHomepage aus, die sich unterhalb der Seite Menü links befindet.Speichern Sie danach die Seite und betrachten Sie das Ergebnis imFrontend. Zum jetzigen Zeitpunkt müssten Sie die FehlermeldungNo TypoScript template found! erhalten. Sollte jedoch die Fehler-meldung No proper connection to the tree root erscheinen, dannüberprüfen Sie bitte, ob Sie den Verweis richtig gesetzt haben.Diese Fehlermeldung besagt nämlich, dass Sie einen Verweis insNirwana gesetzt haben, z.B. auf eine nicht existierende Seite. Siekönnen diesen Fehler korrigieren, indem Sie im Seitenbaum auf dasIcon vor der betroffenen Seite klicken und aus dem Pop-up-Menüden Eintrag Seiteneigenschaften bearbeiten auswählen. Setzen Siedann den Verweis auf eine reguläre Seite.

Abbildung 4-10Einen Verweis aufeine Seite setzen

Page 26: Linie - bücher.de

TYPO3-Fehlermeldungen 75

Wiederholen Sie diesen Schritt nun sowohl für die Seiten Menüoben und Menü links als auch für die Seite Homepage, die sich imoberen Menü befindet. Die offizielle Homepage soll sich im linkenMenü befinden, Sie müssen also für die Seite Homepage im oberenMenü einen Verweis auf die Seite Homepage im linken Menü set-zen.

Werden Verweise auf andere Seiten gesetzt, deren Zielseite nichtexistiert, erscheint beim Frontend-Aufruf die Meldung No properconnection to the tree root. Indem Sie in den Seiteneigenschaftenüber das Feld Verweismodus die Einstellung Erste Unterseite aus-wählen, verhindern Sie eine mögliche Anzeige der Fehlermeldungim Frontend im Live-Betrieb Ihrer Website. Eine Auflistung einigerwichtiger TYPO3-Fehlermeldungen samt ihrer Bedeutung findenSie im folgenden Abschnitt.

Tipp Für Suchmaschinen sind URLs, die aus unterschiedlichen Zei-chen bestehen, aber den gleichen Inhalt haben, ein Negativkri-terium, wenn es um die Platzierung Ihrer Seite geht. Es handeltsich dabei um Duplicate Content – doppelten Inhalt. Durch dieVerwendung von Verweisen erhält eine Seite bzw. derselbeInhalt zwei unterschiedliche URLs, über die jedoch derselbeInhalt ausgegeben wird. Gehen Sie daher mit dem Inhaltsele-ment Verweis (engl. shortcut) sparsam um.

TYPO3-FehlermeldungenWerden im Frontend TYPO3-Fehlermeldungen angezeigt, sinddiese oft schon durch kleine Änderungen zu beheben. Ich möchteIhnen an dieser Stelle einen Überblick über Fehlermeldungengeben, die bei der Frontend-Ausgabe auftreten können.

No pages are found on the rootlevelDie Meldung wird angezeigt, wenn innerhalb von TYPO3 nochkeine Seiten angelegt sind. Auf der obersten Ebene – rootlevel –wird daher auch keine Seite gefunden, was durch das Anlegeneiner Seite im Backend behoben werden kann. Die Nachrichterhalten Sie meist bei einer neuen TYPO3-Installation. Nachdem Anlegen der Seite folgt meist die nächste Meldung.

No template foundAuf der aufgerufenen Seite ist kein Datensatz vom Typ Templatevorhanden. In einem TypoScript-Template beschreiben Sie mitder TYPO3-eigenen Skriptsprache TypoScript unter anderem,wie die spätere Website aussehen soll. Wie Sie diese Meldung

Page 27: Linie - bücher.de

76 Kapitel 4: Das Praxisbeispiel vorbereiten

durch Anlegen eines TypoScript-Templates vermeiden und wasTypoScript eigentlich ist, erfahren Sie in Kapitel 5, TypoScript inder Praxis.

The requested page didn’t have a proper connection to the tree-root!Wenn die aufgerufene Seite keine Verbindung zum Seitenbaumhat, ist ein Verweis nicht richtig angelegt. Es wurde also eineSeite vom Typ Verweis angelegt, deren Zielseite nicht mehrexistiert. Zur Behebung muss der Verweis auf eine vorhandeneSeite gerichtet werden.

The requested page does not existDie aufgerufene Seite existiert nicht: Diese Meldung erscheint,wenn in der URL eine Seite abgefragt wird, die innerhalb vonTYPO3 nicht verfügbar ist. Das Verhalten von TYPO3 beimAufruf von nicht existierenden Seiten kann im Install Tool überdie Einstellung pageNotFoundHandling verändert werden (sieheKapitel 2, TYPO3 installieren).