Anmerkung: Dieses Layout habe ich für einer meiner Extensions verwendet und brauche es nicht mehr. Deswegen nicht über die Kopfgrafik und so wundern. Ich war zu faul das ganze jetzt „neutraler“ zu gestalten.

Entpackt alles und kopiert es einfach in euer TYPO3-Verzeichnis. Ihr solltet dann folgenden Verzeichnisbaum vorfinden:

+TYPO3
+-fileadmin
++-templates
++-css
++-grafik
++-typoscript
++ index.html

Nachdem unsere Verzeichnisse alle vorhanden sind, können wir uns jetzt im TYPO3-Backend einloggen.

TYPO3 vorkonfigurieren

Ich gehe von einer frischen TYPO3-Installation aus. Von daher haben wir noch keine Extension installiert und noch keine Seiten (etc.) angelegt.

Backend auf Deutsch stellen

Der erste Schritt führt uns direkt in den Extension Manager (Admin tools -> Ext. Manager). Dort angekommen, wählen wir im Dropdown-Menü “Translation handling” aus. Wir wählen “German” aus und klicken auf “Save selection“. Danach ein weiterer Klick auf “Update from repository” und wir haben TYPO3 erst einmal Deutsch beigebracht. Nun müssen wir TYPO3 nur noch auf Deutsch stellen, dies tun wir indem wir auf den Menüpunkt User settings (User tools -> User settings) klicken. Dort wählen wir unter “Language” nun German aus. Mit einem Klick auf “Save Configuration” sollte TYPO3 jetzt auf Deutsch gestellt sein.

Seitenstruktur anlegen

Im nächsten Schritt wollen wir unseren Seitenbaum anlegen. Der Seitenbaum spiegelt die Webseiten im Frontend wieder. Wir klicken zuerst auf Funktionen (Web -> Funktionen) im Menü und machen dann ein Rechtsklick auf den einzigen Eintrag im mittleren Frame (“New TYPO3 site“). In dem dann erscheinenden Context-Menü wählen wir “Neu” aus, klicken dann im rechten Frame unter Neuer Datensatz auf “Seite (in)” und füllen das nun folgende Formular wie folgt aus.

Tipp: Wählt man im Gegenzug den Assistent aus, kann man im nächsten Schritt die Seitenposition bestimmen. Das ist besonders hilfreich, wenn man viele Seiten bereits angelegt hat.

Als Typ wählen wir “Verweis” aus und bestätigen mit “Ok”. Das Häkchen bei “Seite verbergen” nehmen wir raus, schließlich soll unsere Webseite ja sichtbar sein. Unter Seitentitel könnt ihr euch selber etwas ausdenken, ich habe “TYPO3 Webseite” genommen. Mit einem Klick oben auf die Diskette () speichern wir die Seite ab und gehen zurück zur letzten Seite.

Da wir uns immer noch im Funktionen-Modul befinden, klicken wir jetzt auf die eben erstellte Seite im Seitenbaum. Wir sehen jetzt 9 Eingabe-Felder, die nur darauf warten, ausgefüllt zu werden. Dies tun wir jetzt auch und legen somit unseren kleinen Seitenbaum in sekundenschnelle an. Ich habe mich für folgende Struktur entschieden. Ich empfehle euch für dieses Tutorial erst einmal die gleiche zu nehmen.

Unsere vorläufige Seitenstruktur

Haben wir die Felder ausgefüllt, klicken wir nun auf “Seiten anlegen” und bestätigen wieder mit “Ok”. Im mittleren Frame klicken wir nun auf das Plus neben unserem Seitenbaum, um die so eben erstellten Unterseiten anzuzeigen.

Wir müssen jetzt noch einmal die erste Seite bearbeiten um die Struktur der Seite zu vervollständigen. Wir machen also einen Rechtsklick auf die Seite “TYPO3 Webseite” (ggf. bei euch anders) und wählen im Context-Menü “Seiteneigenschaften bearbeiten” aus. Da wir den Seitentyp als Verweis festgelegt haben, brauchen wir selbigen, sonst führt die Seite ins Nirvana. Wir gehen also oben auf den Reiter “Verweis” und klicken Rechts neben der Box auf den Ordner (). Wir sehen nun noch einmal unseren Seitenbaum und können jetzt eine Einstiegsseite festlegen. Da dies bei uns die Startseite ist, wählen wir diese mit einem Klick aus. Jeder der jetzt auf unsere Webseite geht, gelangt sofort auf den Menüpunkt “Startseite”.
Nun müssen wir noch zum Reiter “Optionen” und klicken dort unter “Allgemeine Datensatzsammlung” auf den Ordner () neben dem Eingabe-Feld. Wir wählen dann im Pop-Up die Seite “Template” aus. Dies ist nötig, damit die Seite weiß, wo sie später das Seiten-Template findet. Wir speichern jetzt wieder die Seite über die Diskette () ab und haben damit unsere Struktur festgelegt.

Wie schon angesprochen, wird die Unterseite “Template” später unsere Seiten-Vorlage beherbergen. Bevor sie das aber kann, müssen wir diese Seite noch einmal bearbeiten. Wir machen also einen Rechtsklick auf die Seite “Template” und klicken auf “Seiteneigenschaften bearbeiten“. Hier müssen wir nur den Typ der Seite auf “SysOrdner” stellen und dies mit “Ok” bestätigen.

Info: SysOrdner sind bestimmte Seitentypen in dem unterschiedliche Typen von Datensätzen abgespeichert werden können.

Kommen wir nun zum Seiten-Template!

Template mit TemplaVoilá erstellen

Ich gehe extra nicht auf die “normale” Template-Erstellung ein, sondern zeige euch direkt den Weg über TemplaVoilà (im weiteren Verlauf mit TV abgekürzt). Dies ist zwar der etwas längere (und vielleicht auch schwierigere) Weg aber auch der in meinen Augen effektivste Weg. Ihr werdet früher oder später alle bei TemplaVoilà landen, also warum nicht gleich damit anfangen und richtig lernen.

TV installieren

Zuerst müssen wir natürlich TV installieren. Dazu gehen wir auf den Erweiterungs-Manger (Admin-Werkzeuge -> Erw-Manager) und wählen oben im Dropdown-Menü “Import extension” aus. Ein Klick auf “Retrieve/Update” speichert die Extension-Liste auf den Server und ermöglicht ein schnelleres abrufen der Extensions im späteren Verlauf. Im Suchfeld tippen wir nun “TemplaVoila” ein und klicken auf “Look up“. In der Liste sollte nun die Extension (Version 1.3.7, Stand: 28.12.08) erscheinen. Mit einem Klick auf das Icon mit der weißen Seite und dem Pfeil (), installieren wir die Extension. Im nächsten Bildschirm wird uns mitgeteilt, dass die Extension erfolgreich heruntergeladen wurde und kann nun in TYPO3 aktiviert werden. Dies machen wir mit einem einfachen Klick auf “Install extension“.

Der Extension-Manager müsste uns nun darauf aufmerksam machen, dass einige Abhängigkeiten fehlen. In diesem Fall wird die Extension “static_info_tables” benötigt. Wir installieren diese also mit einem Klick auf “Import now“. Nach der Bestätigung klicken wir nun noch einmal auf “Install extension” und uns wird angezeigt, dass die Extension noch ein paar Datenbanktabellen anlegt. Wir scrollen nun ganz nach unten und segnen dies mit einem Klick auf “Make updates” ab. Dieses Fenster kann nun über “Close window and recheck dependencies” geschlossen werden.

TV will nun natürlich auch noch ein paar Tabellen anlegen und bereits vorhandene bearbeiten. Dies wird uns nun mitgeteilt und wartet darauf bestätigt zu werden. Wir scrollen wieder runter und klicken auf “Make updates” um den ganzen Prozess abzuschließen.

Der aufmerksame Beobachter wird nun mitgekriegt haben, das sich in unserer Backend-Navigation das Icons von “Seite” grafisch geändert hat und ein neues mit Namen “TemplaVoilà” hinzugekommen ist.

TV-Template erstellen

Wir gehen nun in das “Liste“-Modul (Web -> Liste) und wählen im Seitenbaum die Seite “Template” aus. Mit einem Klick auf das Icon im oberen Bereich (), erstellen wir einen neuen Datensatz. Wir wählen dann in der Liste “TemplaVoilà Datenstruktur” aus. Im nächsten Schritt füllen wir das Feld “Titel” mit “Template (Datenstruktur)“, stellen die Kategorie auf “Seiten Vorlage” und speichern dies wieder mit einem Klick auf die Diskette () ab.

Nun klicken wir erneut auf das Icon () um einen neuen Datensatz zu erstellen (das ganz obere) und wählen diesmal “TemplaVoilà Template Objekt” aus. Als Titel vergeben wir “Template” und unter Dateireferenz fügen wir “fileadmin/templates/index.html” ein. Als Datenstruktur wählen wir die eben erstellte aus. Das ganze speichern wir jetzt ab und haben schon einmal das Gerüst für unser Seiten-Template erstellt.

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf “TemplaVoilà” (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite “Template”ausgewählt haben und sollten dann folgenden Inhalt sehen:

Unser fertig angelegtes Template-Objekt

Wir klicken nun auf “Review” und danach auf “Modify DS / TO“. Mit einem Klick auf “Clear all” sollte jetzt ein neuer Eintrag mit Namen “Root” erscheinen. Wir klicken jetzt bei dem Eintrag unter Action auf “Map”, wählen danach unter “Mapping Window” HTML Source aus und klicken im HTML-Code ganz oben auf dem schwarz hinterlegten “<body>“. Mit einem Klick auf “Set” bestätigen wir die Auswahl und haben TV gesagt, dass sich die Seiten-Elemente alle innerhalb dieses Body-Tags befinden.

Wir müssen nun 4 weitere Elemente anlegen. Dies habe ich jetzt in ein Video gepackt, welches die erforderlichen Schritte kurz zeigt. Ich gehe gleich näher auf jedes Element ein.

Das Video einfach über folgenden Link über euren Browser anschauen: Video aufrufen!

Die Elemente “Inhalte” und “Rechte Spalte” sind so genannte “Content Elements”, in diesen kann man über das “Seite”-Modul dynamisch Inhalte eingefügt werden. “Hauptmenü” und “Untermenü” sind dagegen “TypoScript Object Path“. Wie man sich vielleicht schon denken kann, kann man diese über TypoScript ansteuern.

Wir müssen nun noch das Template unserer Hauptseite, “TYPO3 Webseite” zuordnen. Alle Unterseiten erben automatisch dieses Template. Wir klicken nun also mit der rechten Maustaste auf die Seite im Seitenbaum und wählen “Seiteneigenschaften bearbeiten“. Unter dem Reiter “Erweitert” wählen wir nun in den zwei Dropdown-Menüs unser angelegtes TV-Template aus. Es sollte dann in etwa so bei euch aussehen:

So sollte es bei euch jetzt ausschauen

Seiten-Template für das TypoScript anlegen

Nachdem wir alle Elemente in TV festgelegt haben, kommen wir zum TypoScript. Wir klicken im Seitenbaum auf die Seite “TYPO3 Webseite” und wählen das Modul “Template” (Web -> Template) aus. Ein weiterer Klick auf “Create template for a new site” erstellt uns nun ein Seiten-Template für diese Seite. In dem Dropdown-Menü oben wählen wir jetzt “Info/Modify” aus und klicken ganz unten auf “Click here to edit whole template record“.

Das Formular füllen wir nun wie folgt aus. “Template-Titel” kann so bleiben. In “Web-Site-Titel” können wir ein Titel für die Webseite eingeben, welcher im Browser dann immer oben angezeigt wird. Hier geben wir einfach mal “Unsere TYPO3-Seite” ein. Unter “Konfiguration” löschen wir zuerst den Inhalt und fügen dann diese Zeilen hinzu:

# CLEANING
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/cleaning.txt">
# CONFIGURATION
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/config.txt">

Dies bewirkt einfach, dass der Code aus den angegebenen Dateien ausgelesen wird.

Als nächstes widmen wir uns dem Reiter “Enthält“. Dort wählen wir unter “Statische einschließen” die Elemente “content (default)” und “cSet (default)” aus. Unter “Statische einschließen (aus Erweiterungen)” wählen wir “CSS Styled Content” aus. Wir speichern den Datensatz mit einem Klick auf die Diskette () und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben.

Cleaning.txt
Diese Datei räumt erstmal gewaltig den HTML-Code auf den TYPO3 produziert. Es sorgt dafür das überflüssige Kommentare, die sonst im HTML auftauchen, verschwinden und optimiert den HTML-Code dahingehend, dass die Seite weites gehend Barrierefrei und “valide” gestaltet werden kann.

Config.txt
Diese Datei ist das eigentliche Herz der Seite. Hier werden die in TV angelegten Platzhalter zugewiesen. Öffnet die Datei einfach mal mit einem Editor, die Zeilen sind dokumentiert. Ab hier sind dann Kenntnisse in TypoScript nötig. Es lässt sich aber alles relativ einfach nachvollziehen und mit ein bisschen ausprobieren steigt man wirklich sehr schnell dahinter. Am Ende dieses Artikels habe ich weiterführende Links eingefügt, die mehr Beispiele für TypoScript zeigen.

Jetzt wird es Zeit für die ersten Inhalte.

Inhalte einpflegen

Wir gehen jetzt im Seitenbaum auf unsere “Startseite” und wählen das Modul “Seite” aus (Web -> Seite). Ihr solltet dann in etwa folgendes sehen:

Unser erster Inhalt

Wir sehen hier eine genaue Abbildung von unserem TV-Template. Wir haben hier zwei Spalten, “Inhalte” und “Rechts“. In meiner Abbildung seht ihr bereits, dass ich in der “Inhalte”-Spalte Text mit Bild habe. Das ganze wollen wir jetzt natürlich nachholen. Ihr klickt einfach in der “Inhalte”-Spalte auf das Icon mit dem Plus () und wählt im nächsten Schritt “Text mit Bild” aus. Wenn ihr euch jetzt mal 5 Minute nehmt und das folgende Formular ein wenig studiert, könnt ihr sehen wie simpel es ist, Inhalte ein zu pflegen.

Im Reiter “Allgemein” vergeben wir zuerst eine Überschrift für unseren “Artikel”.

Info: Scrollt nach ganz unten und setzt ein Häkchen in “Zweite Optionspalette anzeigen“. Dies ermöglicht euch, individueller euren Inhalt zu gestalten. Ihr habt dann mehr Optionen. Zum Beispiel könnt ihr dann bei den Überschriften zwischen verschiedenen Layouts wählen (<h1>,<h2>,<h3> etc.).

Danach wechseln wir auf den Reiter “Text” und schreiben unsere Information in den WYSIWYG-Editor. Jetzt wechseln wir auf “Medien” und können ein Bild auswählen, welches wir in den Artikel stellen wollen. Dazu können wir entweder die Festplatte durchsuchen oder wir klicken Rechts auf den Ordner () bei dem Auswahlfeld und wählen ein bereits hoch geladenes Bild aus.

Info: Alles was ihr irgendwann mal wieder auf der Seite verwenden wollt, solltet ihr immer in den „fileadmin“-Ordner innerhalb von TYPO3 speichern. In TYPO3 kann jederzeit darauf zugegriffen werden und in eure Inhalte eingepflegt werden.

Der “Medien”-Bereich setzt sich aus mehreren “Ebenen” zusammen. Ganz oben ist die Bilder-Ebene, in der wir unser Bild ausgesucht haben. Darunter befindet sich die “Position“-Ebene, zu der wir jetzt kommen. In der “Position“-Ebene können wir die Position vom Bild wählen. Außerdem können wir einen Bilderrahmen hinzufügen oder (sofern vorhanden) mehrere Bilder Spaltenweise aufteilen. Direkt unter der “Position”-Ebene befindet sich die “Bildmaße“-Ebene. In dieser können wir die Größe des Bildes festlegen. Man kann entweder die Höhe und Breite fest angeben oder wir geben nur eine Höhe an und lassen das Bild proportional dann von der Breite anpassen, vollkommen automatisch. Das ganze geht natürlich auch anders herum. In der “Bild-Links”-Ebene können wir das Bild intern oder extern verlinken. Darüber hinaus können wir auch das Bild sich mit einem klick vergrößern lassen. Die restlichen Felder sind selbsterklärend und können ausprobiert werden!

Mit einem Klick auf die Diskette () speichern wir den Datensatz ab und haben unseren ersten Inhalt in unsere Seite eingepflegt. Herzlichen Glückwunsch!

Wenn wir uns die Seite mal im Frontend anschauen, können wir uns das Ergebnis betrachten. Es sollte in etwa wie bei mir ausschauen:

So sollte die "fertige" Webseite ausschauen

Dies war der dritte Teil meiner kleinen Serie. Ich hoffe es ist verständlich rüber gekommen und bitte um Feedback! Ihr könnt jetzt weitere Seiten-Elemente hinzufügen und so ein bisschen rumspielen, für Fragen ab in die Kommentare.

Weiterführende Links für TypoScript:

• Wie man verschiedene Menüs via TypoScript anlegt
• TypoScript-Referenz

Was ich euch noch empfehlen kann sind folgende Bücher, die ich auch gelesen habe und mir sehr geholfen haben (Amazon-Partner-Link):

Es kann mit der Zeit vorkommen, dass externe Links nicht mehr gültig werden, ich bitte euch dann mir bescheid zu geben.

Kostenlose Video-Anleitungen

Galileo Design bietet eine vielzahl an Videos an die es kostenlos zum betrachten gibt. Folgende Kategorien stehen euch dabei zur Verfügung:

• After Effects
• Bildbearbeitung
• Videos für Entwickler
• Fotografie
• InDesign
• Layout & Druck
• Mac OS X
• Photoshop
• Video & 3D

Video2Brain – Addison-Wesley

• PHP5 Tutorials

Weitere Videos

• Photozauber.de – Photoshop-Videos

Kostenlose Bücher

Galileo Design bzw. Galileocomputing bietet nicht nur eine vielzahl an Videos sondern auch Bücher kostenlos an.

• Dreamwaver 8
  Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
• Adobe Photoshop CS2 professionell
  100% Professionell
• Actionscript 1 und 2
  Objektorientierung und Codedesign mit Flash MX 2004
• Linux Openbook
  Alles rund um Linux, alternativ auch zum Download!
• IT-Handbuch für Fachinformatiker
  Das IT-Handbuch vermittelt alle Grundlagen der Informationstechnik wie sie Fachinformatiker in Ihrer Ausbildung benötigen.
• Python – Das umfassende Handbuch
  Dieses Buch bietet sowohl eine umfassende Einführung in die Sprache Python (aktuell zur Version 2.5) als auch viele weiterführende Kapitel zu fortgeschrittenen Themen wie GUI-Entwicklung, Web-Programmierung mit Django oder Netzwerkkommunikation.
• Einstieg in ActionScript ( Flash 8 )
  Dieses Buch zeigt Ihnen, wie ActionScript funktioniert und wie Sie in Flash wichtige Aufgaben per Code erledigen. Leicht verständlich vermittelt es Ihnen die grundlegenden Programmierkenntnisse anhand von spannenden Beispielen, die von einfacher Filmsteuerung und Kollisionstests über Sound und Video bis hin zu Formularen und XML reichen. Alternativ auch zum Download!
• Internetrecht (PDF)
  Kostenloses E-Book rund um das Internetrecht stellt Ihnen hier Prof. Dr. Hoeren vom Institut für Informations-, Telekommunikations- und Medienrecht der Universität Münster in der 10. Auflage zur Verfügung
• Usability versus Design – ein Wiederspruch? (PDF)
  Lesenswert für alle die sich mit dem Thema Benutzerfreundlichkeit (Usability) auseinandersetzen aber auch für Webmaster die so nichts mit dem Thema anfangen können sollten sich dieses kostenlose E-Book mal durchlesen
• Kostenfreies eBook zu Usability

weitere obenbooks bei Galileocomputing

Software

• GIMP (alternative zu Photoshop)
  Herstellerlink – WinGIMP (fertiger Installer etc.)
• Blender (alternative zu Cinema4D / 3DsMark)
• PsPad (Editor für Softwareentwickler)

Sonstiges

• Fontpaket (Selbstextrahierende .EXE – 40 MB)
  Über 550 Schriftarten – Passwort zum entpacken: www.creationx.de
• Castle Magazin Issue 11
• Castle Magazin Issue 12
• Castle Magazin Issue 13 (PDF)
  Nicht ganz ein Buch aber ein Magazin rund um Illustrationen, Grafik und Design. Reinschauen lohnt sicht!
• Opensource-DVD (420 Programme; 7,2 GB ~)