TYPO3 (Teil 6): So arbeitet TYPO3

Natürlich ist TYPO3 ein komplexes System, keine Frage. Dennoch kann man sehr schnell erste Ergebnisse erzielen. Genau an diesem Punkt setzt dieses Kapitel an. Schritt für Schritt wird hier eine erste Inhaltsseite in TYPO3 erstellt. So legt ihr dann übrigens nicht nur die erste eigene Seite an, sondern lernt dabei auch gleich noch die allgemeine Funktionsweise von TYPO3 kennen. Die Seite, die hier exemplarisch angelegt wird, enthält eine Grafik. So erfahrt ihr auch noch, wie einfach sich mittels TYPO3 Bilder auf den Server laden und dann in die Seite einfügen lassen.

Wir empfehlen:
TYPO3 CMS-Training

Am Anfang dieses Tutorials steht ein Element im Fokus, mit dem man es immer wieder zu tun bekommt, wenn man sich mit TYPO3 befasst: der Seitenbaum. Über diesen Seitenbaum legt man zunächst einmal neue Seiten an.

 

Außerdem lassen sich darüber Seiten konfigurieren. Jede TYPO3-Webseite besteht immer mindestens aus einer Seite und exakt einem Inhalt. Der Seitenbaum liefert eine Übersicht aller angelegten Seiten. Zum Bearbeiten einer Seite klickt man deren Namen im Seitenbaum an. Um sich die Seite anzeigen zu lassen, ruft man sie über Web>Seite bzw. Web>View auf.

 

Anhand des Seitenbaums kann man zumeist sehr gut die Navigationsstruktur im Frontend nachvollziehen, da diese häufig deckungsgleich sind.

Wenn man sich den Seitenbaum einmal genauer ansieht, werden dort möglicherweise Dreiecke zu erkennen sein.

Diese Dreiecke signalisieren, dass die Seite Unterseiten besitzt. Durch Anklicken der Dreiecke kann man sich die Unterseiten anzeigen lassen.

 

So arbeitet TYPO3

Wie eingangs erwähnt, soll die Funktionsweise von TYPO3 anhand eines konkreten Beispiels gezeigt werden. Durch die folgenden Schritte wird Schritt für Schritt eine Seite in TYPO3 angelegt.

Klickt dazu in der Modulleiste auf das Weltkugelsymbol und wählt aus dem Kontextmenü Seitenaktionen>Neu.

 

In der Detailansicht ermöglicht TYPO3 das Anlegen eines neuen Datensatzes. Hier könnt ihr zunächst einmal bestimmen, an welcher Stelle die Seite eingefügt werden soll. TYPO3 visualisiert das sehr anschaulich über Pfeile.

Klickt einfach auf den Pfeil, der an der Stelle zu sehen ist, an der ihr die Seite platzieren wollt. Daraufhin wird eine vergleichsweise umfangreiche Eingabemaske angezeigt, die in einem späteren Tutorial natürlich noch vorgestellt wird. Momentan genügt es, wenn ihr einfach einen Seitennamen eintragt. Das könnte Tutorials sein.

 

Tatsächlich ist der Seitenname eine Pflichtangabe, was an dem Ausrufezeichen zu erkennen ist, welches in dem Feld angezeigt wird. Fehlt der Name, lässt sich die Seite nicht abspeichern. Die vorgenommenen Einstellungen können über eines der im oberen Fensterbereich angebotenen Symbole gespeichert werden.

Hier die Bedeutung der Felder von links nach rechts:

• Die geöffnete Eingabemaske wird ohne Speichern geschlossen. Alle Änderungen gehen verloren. (Das dann übrigens ohne Warnhinweis).
• Die Inhalte der Eingabemaske werden gespeichert. Die Eingabemaske bleibt dabei geöffnet. Interessant ist das vor allem, um Änderungen auch zwischendurch zu sichern.
• Die vorgenommenen Einstellungen werden gespeichert. Gleichzeitig wird die Eingabemaske geschlossen.
An anderer Stelle werdet ihr dort übrigens noch zwei zusätzliche Icons finden.
• Auch hier werden die Einstellungen übernommen. Allerdings ist das Ergebnis dann auch gleich in einem neuen Browserfenster zu sehen.
• Und zu guter Letzt kann man die Seite über das Papierkorbsymbol direkt löschen.

 

Die Seite wurde nun also durch das Speichern angelegt. Was allerdings noch fehlt, sind deren Inhalte. Um diese hinzuzufügen, klickt man den Titel der Seite im Seitenbaum an. Sobald man mit dem Mauszeiger in den Bereich Normal zeigt, wird das Symbol Einen neuen Datensatz an diesem Ort hinzufügen angezeigt.

 

Klickt man dieses Symbol an, wird eine Auswahl der verfügbaren Inhaltselemente angezeigt. Die Auswahl reicht hier von einfachem Text über Text und Bilder bis hin zu Tabellen und Listen. Im aktuellen Beispiel wählt ihr Text und Bilder.

Daraufhin öffnet sich ein weiteres Dialogfenster. Das ist dann sicherlich auch das Fenster, mit dem man es am häufigsten zu tun hat. Sollte man sich auf der vorherigen Seite bei der Wahl des Inhaltstyps geirrt haben, kann man diesen jetzt problemlos ändern.

 

Das Dialogfenster selbst ist wiederum in mehrere Register unterteilt. Welche das sind, hängt vom gewählten Inhaltstyp an. Wurde Text und Bilder eingestellt, werden die folgenden Register angeboten:

Allgemein
Bilder
Erscheinungsbild
Zugriff

Im Register Allgemein wird die Überschrift der Seite angegeben. Das könnte im aktuellen Beispiel Tutorials sein.

Im unteren Fensterbereich gibt es ein großes Textfeld.

Das ist der sogenannte Rich-Text-Editor. Über diesen Editor gibt man seine Texte ein und gestaltet sie. Auch dazu wird es noch ausführliche Informationen geben. Die Funktionsweise des Editors ist aber sicherlich selbsterklärend. Man tippt den Text ein, markiert die gewünschte Passage und klickt dann auf das entsprechende Formatierungssymbol.

Nachdem der Text eingetragen ist, soll nun ein Bild eingefügt werden. Die entsprechenden Einstellungen nimmt man im Register Bilder vor. Klickt hier auf Bild hinzufügen, wodurch ein weiteres Fenster geöffnet wird.

Über dieses Fenster können Bilder ausgewählt werden. Um es vorwegzunehmen: Die Bilderfunktionalität von TYPO3 ist sehr mächtig. Grund genug jedenfalls, in einem späteren Tutorial noch einmal einen ausführlichen Blick auf diese zu werfen.

Im aktuellen Fall wird davon ausgegangen, dass das Bild zunächst noch auf den Server geladen werden muss. Klickt dazu im Verzeichnisbaum unter user_upload auf images.

Dieses images dient als Zielverzeichnis für den Upload. Über die Schaltfläche Dateien auswählen wird ein Dateiauswahl-Dialog geöffnet. Wählt darüber das gewünschte Bild von eurer lokalen Festplatte aus. Mit Hochladen kopiert man das Bild auf den Server. TYPO3 aktualisiert daraufhin das Dialogfenster und zeigt den vollständigen Inhalt des Verzeichnisses an. Liegen viele Bilder im gewählten Verzeichnis, kann man die Funktion Vorschaubilder anzeigen aktivieren. So sieht man gleich, was für Bilder sich eigentlich hinter den Dateinamen verbergen.

Um das Bild einzufügen, braucht man jetzt nur noch dessen Titel anzuklicken.

Im Register Erscheinungsbild sind zusätzliche Angaben zum Bild möglich. Definieren lassen sich hier beispielsweise die Bildausrichtung und die Randabstände. Sind die Angaben gemacht, kann man sie beispielsweise mit Dokument speichern und Web-Seite anzeigen übernehmen.

Die Seite wird daraufhin im Frontend angezeigt.

Fazit

Dieses Tutorial hat bewiesen, dass man in TYPO3 – trotz dessen Komplexität – in wenigen Schritten Seiten anlegen und gestalten kann. Selbstverständlich kann TYPO3 aber noch viel mehr. Grund genug, in den nächsten Tutorials ausführlich auf die wichtigsten Funktionen dieses Systems einzugehen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training