precom BLOG

Wer die Installation aus dem Tutorial Part 1 abgeschlossen hat, kann sich der nächsten Herausforderung stellen. Nun gilt es, der fertigen TYPO3 Instanz die eigene Webseite beizubringen und lauffähig zu machen. Zugegeben anfangs eine nicht besonders leichte Aufgabe. Doch widmen wir uns gleich dem ersten Schritt (p.s.: ich gehe nicht näher auf die Funktionen von TYPO3 ein, sondern arbeite einfach die Schritte ab).

1. Schritt – notwendige Erweiterung & keiner mag Englisch

Für dieses Tutorial sind einige Erweiterungen notwendig. Nach der Anmeldung mit dem Administratorzugang im Backend von TYPO3 erscheint links im Menü die Abteilung “Admin tools”. Dort auf “Extension Manager” klicken und rechts ganz oben auswählen “Import Extensions”.

Zuerst die Liste der Erweiterungen aktualisieren. Dazu einfach dem Button in der Mitte der Seite “Retrieve/Update” klicken und etwas abwarten. Die Liste aller verfügbaren Erweiterungen wird damit automatisch aktualisiert. Ist die Liste aktuell, kann man links im Menü unter “User tools” auf “User settings” klicken und die Sprache von Englisch auf Deutsch umstellen. Danach einfach auf “Save configuration” klicken und schon haben wir unser Backend von TYPO3 in Deutsch.

Wir gehen wieder auf die Seite der Erweiterungen (“Adminwerkzeuge” -> ” Erweiterungen” -> “Erweiterungen importieren”) und geben in das Suchfeld “automaketemplate” ein und gehen auf “suchen”. Dies ist die erste wichtige Erweiterung, die wir für unsere erste TYPO3 -Seite brauchen. In den Suchergebnissen taucht “automaketemplate” auf, nun einfach links auf den Button zum Installieren der Extension gehen und den Schritten folgen.

2. Schritt – Den Seitenbaum erstellen

Im linken Menü ganz oben unter “Web” auf “Seite” klicken und wir erhalten im mittleren Bereich den aktuellen Seitenbaum. Da dieser noch leer ist, einfach mit der linken Maustaste auf den einzigen Eintrag im Seitenbaum klicken (kurze Verzögerung möglich, bis das Menü erscheint) und auf “Neu” gehen. Dort geben wir einen sprechenden Titel für die Seite (das wird unsere Startseite) und wählen ganz oben eines der drei Disketten-Symbole – und zwar das rechte (Speichern und Schließen).

Nun einfach im linken Menü auf “Funktionen” gehen, im Seitenbaum (Mitte) die gerade erstellte Seite auswählen und rechts erscheint der Assistent, um mehrere Unterseiten auf einmal zu erstellen. Einfach alle Seitentitel eingeben und auf “Seiten anlegen” klicken, schon werden alle Unterseiten im Seitenbaum von der TYPO3 -Seite angelegt.

3. Schritt – Das Template

Ein Content Management System wie TYPO3 funktioniert folgendermaßen. Eine Datei (html) wird eingelesen, verarbeitet und mit den dynamischen Inhalten befüllt und am Browser ausgegeben. Daher ist es zunächst notwendig, die Vorlagen-Datei zu erstellen. Wir arbeiten mit “automaktetemplate” und platzieren daher an den Stellen, wo dynamischer Inhalt erscheinen soll, so genannte Platzhalter. Ich würde einfach eine fertige HTML-Seite entwerfen (inkl. CSS) und einfach den Bereich für das Menü und den Content festlegen. Die Platzhalter werden mit “###” vor und nach dem Wort eingegeben. An der Stelle, wo wir das Menü haben wollen, könnten wir also einen DIV-Tag erstellen und mit dem Platzhalter füllen:

1

<div id="menu">###MENU###</div>

Das gleiche machen wir mit dem Bereich für die Texte, wir basteln wieder einen eigenen Container auf unserer Webseite dafür und benennen ihn folgendermaßen:

1

<div id="content">###CONTENT###</div>

Somit ist unsere Datei für TYPO3 vorbereitet und es geht im Backend weiter. TYPO3 wird dann einfach das ###MENU### und das ###CONTENT### durch dynamische Inhalte ersetzen, die wir ihm jedoch natürlich vorher beibringen müssen.

Grundlegend sollte hier das Tutorial von TYPO3 selber “Modern Template Building, Part1” kurz durchgearbeitet werden (besonders ab dem Punkt “The Template Auto-Parser Extension”) und zu verstehen, wie und warum TYPO3 in unserem HTML-File etwas ersetzt.

Im linken Menü im TYPO3-Backend den Punkt “Template” wählen und im Seitenbaum die zu allererst erstellte Seite wählen (einfach draufklicken). Dann erscheint rechts, dass noch kein Template für diese Seite besteht. Den oberen Button “Template für neue Webseite erstellen” auswählen und dort einen sprechenden Titel für das Template eingeben. Danach den Karteireiter “Enthält” wählen und im rechten Fenster einfach auf das “CSS styled content (css_styled_content)” auswählen, das dann sofort im linken Fenster aufscheint. Ein kurzes Zwischenspeichern oben auf dem Diskettensymbol sichert unser Template und wir können mit dem Setup des Templates weiterarbeiten.

4. Schritt – Das Setup des Templates

Falls das Template noch offen ist, einfach auf das “X” im linken oberen Ecke des rechten Fenster klicken und im folgenden Feld des Haupttemplates auf das Stiftsymbol neben “Setup” klicken. Das öffnet nur das Setup-Feld des Templates und nicht das gesamte Template wie am Ende von Schritt 3. Dort kopieren wir folgenden Text hinein (aus dem Tutorial “Modern Template Building, Part 1):

Danach die erstellte HTML-Datei (inkl. CSS) per FTP in den Unterordner “fileadmin” kopieren und den Dateinamen gut merken. In der 6. Zeile den Pfad zu unserer Template-Datei eingeben. An dieser Stelle einmal das Template speichern und unsere Webseite über den Browser aufrufen. Es sollte schon einmal ein “HELLO WORLD-MENU” und ein “HELLO WORLD-CONTENT” auf der vorentworfenen HTML-Seite zu sehen sein. Passiert das, funktioniert unser automaketemplate.

5. Schritt – Das Menü und die Inhalte

Wenn wir bis Schritt 4 erfolgreich waren, sind es nur mehr Kleinigkeiten bis zu einer funktionierenden TYPO3-Seite. Wir müssen im Template-Setup nur mehr festlegen, was TYPO3 mit unserem Marker für Content (###CONTENT###) und für das Menü (###MENU###) machen soll. Fangen wir mit dem Content an:

Wir wechseln wieder in das Setup des Templates und ersetzen die Zeilen:

mit dieser Zeile:

Somit werden alle Inhalte, die im TYPO3 bei einer Seite eingegeben werden, in diesem Bereich der Internetseite dargestellt werden. Als nächsten Schritt machen wir das Menü. Ich bilde hier nur einfaches und eindimensionales Menü ab, es wird in Kürze aber sicher ein Tutorial für ein besseres Menü geben.

Wir ersetzen diesmal die Zeilen:

mit dieser hier:

Zusätzlich bauen wir ganz oben im Menü folgendes ein:

Nun das Template speichern und schon kann die Webseite bewundert werden. Hier noch eine kurze Erklärung für das Menü:

• NO und ACT: ACT spiegelt den aktuellen Menüpunkt wider, also die Seite, auf der sich der Besucher gerade befindet. Will man nicht, dass zwischen aktuellen und anderen Menüpunkt unterschieden wird, braucht man nur das ACT=1 auf ACT=0 ändern.
• allWrap legt fest, in welchen Container jeder Menüpunkt gesetzt wird. Das ist in diesem Fall ein <div>, kann aber auch mit Listen <li> gelöst werden. TYPO3 setzt dann an die Stelle des “|” den HTML-Code für den Link des Menüs
• ATagParams: Hier kann festgelegt werden, ob der HTML-Code des Links selber auch eine CSS-Klasse bekommen soll. Wird das nicht benötigt, einfach diese Zeilen löschen

6. Schritt – Die Inhalte

Im linken Menü auf Seite wechseln. Danach einfach im Seitenbaum die Seite auswählen und danach können im rechten Bereich die Inhalte angelegt werden. Ich würde nur die Spalte “normal” verwenden und hier alle Inhalte einstellen. Um ein Inhaltselement zu erstellen, einfach das 4-eckige Symbol mit dem grün umrandeten Plus-Zeichen wählen und danach den Inhaltstyp. Vorerst wird man hier vermutlich nur “Text” und “Text/Bild” benötigen. Die Eingabe dieser Daten sollte danach selbsterklärend sein.

Ich hoffe ich konnte helfen und freue mich über Feedback! Viel Spaß mit der eigenen TYPO3-Webseite

Tags: anfänger, Anleitung, einsteiger, Tipps, Tricks, Tutorial, typo3