Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > Die erste TYPO3 Seite

TYPO3



TYPO3 ist keine Hexerei

Das Problem der meisten TYPO3 Einführungen

Um TYPO3 sinnvoll einzusetzen braucht man selbst als Anfänger kein Buch, keine PDF Dokumentation die mehrere 100 Seiten umfasst und muss sich auch nicht eingehend mit Typoscript befasst haben. Die meisten Einführungen kranken daran, dass sie viel zu tief in Typoscript einsteigen und mit der schrittweisen Umsetzung von Beispiel Webseiten beginnen und erst ziemlich zum Schluss ergibt sich dann eine funktionale Webseite (etwa 2 Wochen später). Dieser Overhead ist aber gar nicht nötig und läßt eben auch echte Erfolgserlebnisse missen, nämlich der tatsächlichen Anzeige der Inhalte und nicht einen schnöden Seitentitel oder Bodytext.

Was nützt die Darstellung eines Bodytextes wenn eine Seite in der Regel aus diversen Texten mit samt Überschriften, Bildern, Tabellen, Medien oder Formularen besteht ? Da wird künstlich auf Know How aufgebaut, das an dieser Stelle einem Einsteiger weder nützlich ist noch auch nur ansatzweise benötigt wird. Ich werde hier zeigen, wie man in einer guten Stunde eine Webseite unter TYPO3 erstellt, die auch sofort funktioniert. Dazu bedarf es erst mal wenige Zeilen Typoscript und man hat verstanden wie TYPO3 aufgebaut ist und funktioniert und wo man ansetzen muss, wenn man etwas optisch oder inhaltlich verändern möchte. Mehr braucht man am Anfang nicht und in diesem Sinne ist TYPO3 eben keine Hexerei sondern einfach nur gewußt wie.

Welche Voraussetzungen braucht ein Webmaster für TYPO3 ?

Welche Voraussetzungen braucht man nun für den erfolgreichen Einsatz von TYPO3 als Webmaster ? Einfache Programmierkenntnisse in irgendeiner Sprache reichen vollkommen aus, Basic, Visual Basic, Javascript oder ähnlich. Man muss weder objektorientiert programmieren können und schon gar nicht PHP beherrschen, obwohl TYPO3 auf PHP aufsetzt und objektorientiert arbeitet. Auch muss man kein SQL Profi sein, noch nicht mal SQL Abfragen beherrschen oder verstehen.

Man sollte sich gut mit CSS und HTML auskennen, um die Webseite optisch so umzusetzen wie man sie gerne hätte. Diese Kenntnisse sind m.E. vorrangig zu bewerten, weil TYPO3 sämtliche Objekte mit recht gut strukturierten CSS Klassen umhüllt. Und über CSS Eigenschaften kann man Abstände, Farben, Schriftarten und -größen verändern und sogar Objekte relativ oder absolut positionieren. Wenn man das 3. Bild in einem Beitrag mit einem anderen Rahmen versehen will als die vorherigen beiden, gut dann mag man über tt_content Details vielleicht nicht hinwegkommen, aber wer braucht sowas schon ? Nicht gewünschte Elemente lassen sich über den display: Style sogar ausblenden.

Wer braucht also wirklich mehr als das, was man über CSS nicht auch machen könnte ?
Und vor allem, wer braucht sowas als Einsteiger ?

Noch ein Wort zu Templates. Templates werden häufig als Allheilmittel genommen. Wenn gar nichts mehr geht, dann kann man immer noch ein Template nehmen. Die Wahrheit ist, dass man Templates gar nicht braucht, zumindest ein Webmaster nicht. Vom Grafiker bekommt der sowieso meist im Idealfall ein paar Screenshots aus Photoshop oder ähnlichen Programmen mit dem Hinweis: So solls aussehen. Bevor man sich die Mühe macht und ein Template daraus strickt, kann man die wenigen erforderlichen Anweisungen direkt in Typoscript und einer CSS Datei verarbeiten.

Warnen kann ich insbesondere vor den TYPO3 Extensions "TemplaVoila" und "AutomakeTemplate". Die Namen versprechen Erlebnisse wie aus 1001 Nacht, die tatsächlichen Erfahrungen sind eher ernüchternd. Hinzu kommt, dass TYPO3 sich bei manchen Extensions "anders" verhält. Sich damit ausgiebig zu befassen ist meiner Meinung nach Zeitverschwendung. Es gibt auch noch eine integrierte Template Funktion, die ohne Extension arbeitet und die man benutzen "kann". Die Betonung liegt auf kann, ich konnte keinen Vorteil dadurch entdecken. Bis auf dass das Template in einem Browser angezeigt werden kann.

Dem Ganzen wird noch die Krone aufgesetzt, indem die Bezeichnung "Template" für den TypoScript Code zur Anzeige einer Webseite durch TYPO3 benutzt wird. Da ist Verwirrung für Einsteiger vorprogrammiert. Also Finger weg von den (zusätzlichen) Templates. Mit dem "TypoScript Template" ist man voll und ganz bedient. :-)

Neue Webseite anlegen

(Neue Webseite anlegen)

Jetzt gehts los. :-) Als Erstes muss eine Webseite angelegt werden. Dazu geht man im Backend in das Menü Seite (linke Navigation) geht auf den ersten Eintrag bzw. das grau dargestellte TYPO3 Logo und klickt dann auf die rechte Maustaste und wählt in dem geöffneten Kontext Menü "Neu".

Die Leser mögen mir an der Stelle verzeihen, dass ich die Screenshots gemacht habe mit Anlegen einer weiteren Website anstelle der ersten. Ich wollte es mir ersparen meine bestehende Webseite rauszulöschen und anschließend wiederherzustellen. Normalerweise ist nach einer Neuinstallation von TYPO3 die Webseite "Home" nicht vorhanden. Das ist nämlich die Homeseite von CodelevelX. ;-)

Übrigens macht es meistens einen Unterschied ob man eine Stelle im Seitenbaum anklickt (mit der linken Maustaste) oder ob man ein Kontextmenü (mit der rechten Maustaste) öffnet. Daran sollte man sich gewöhnen. Bei Klick mit linker Maustaste kann ich eine Seite inhaltlich bearbeiten (Content anlegen), bei rechter Maustaste bekomme ich zusätzliche Optionen wie "neue Seite", "Aktivieren", "Kopieren" und je nach Objekt einige Optionen mehr.

(Position wählen)

In den Screenshots sind der Übersichtlichkeit halber die anzuklickenden Bereiche hellrot eingefärbt. Es sind am Anfang ein paar mehr Screenshots eingearbeitet, aber keine Angst das werden in den folgenden Lektionen deutlich weniger. Wenn ich eine neue Seite erstelle, dann muss ich eine "Position" festlegen. In einer Position kann ich einen Level festlegen, also ob eine Seite untergeordnet ist oder auf dem gleichen Level und ob sie vor oder nach der gewählten Seite angelegt werden soll, also die Reihenfolge von Seiten.

Hier wählen wir also mal nach Webseite "Home" (CodelevelX) und auf der gleichen Ebene. Bei der ersten Webseite wird man weniger Auswahlmöglichkeiten haben. Prinzipiell kann man mit einer TYPO3 Installation verschiedene Webseiten gleichzeitig verwalten. Man muss dann ggf. den Startpunkt (die ID der Seite) entsprechend pflegen. Das gilt in dem Sinne z.B. für Subdomains die auf verschiedene inhaltliche Angebote verweisen sollen oder unterschiedlich dargestellt werden sollen.

(Webseite als Verweis anlegen)

Eine Seite kann prinzipiell eine "echte" Seite sein, ein Verzeichnis, ein Trennzeichen oder ein Verweis. In diesem Fall legen wir als Seitentyp einen Verweis auf (noch anzulegende) Unterseiten an, das macht die Verwaltung von Webseiten und auch später die Verwaltung von Rechten übersichtlicher. Rechts daneben befindet sich das Verweisziel, sinnvoll ist meist der Verweis auf die erste Unterseite der aktuellen Seite. Dieses Prinzip taucht auch später noch bei Verwendung von Unterseiten innerhalb einer Navigation auf.

Jede Seite braucht einen Seitentitel, der nicht eindeutig sein muss. Der gleiche Seitentitel kann durchaus mehrmals im Projekt auftauchen. Ein Beispiel wäre die Seite Einführung, die es sowohl unter Projekt X als auch Projekt Y geben könnte. Die Seite taucht mit diesem Namen im Seitenbaum auf und wird auch bei der automatisch erstellten Navigation benutzt. Hier sollte man sich von vornherein ein Namenskonzept überlegen, falls das noch nicht existiert. Seitentitel sollten auch nicht zu lang sein, wenn man daraus ein Navigationsmenü generieren will. Das wird sonst schnell zu breit und unübersichtlich.

(Anfang der Webseite festlegen)

Unter dem Reiter Verhalten muss noch der "Anfang der Webseite" festgelegt werden. Hier erkennt TYPO3 dann automatisch den Anfang der Webseite ohne Angabe einer SeitenID als Parameter bei normalem Aufruf der index.php. Sollten später mal mehrere Webseiten existieren, muss man TYPO3 mit Angabe der gewünschten SeitenID aber trotzdem auf die Sprünge helfen. Auch sollte man am Ende das Speichern nicht vergessen, durch das Diskettensymbol oben in der Navigation.

(Neue Seite anlegen)
(Position festlegen)
(Seite aktivieren)

Nachdem die Webseite angelegt wurde, hier mit dem Namen "Neues Projekt", muss man noch eine "echte" Seite anlegen. Die Webseite wurde ja nur als Verweis auf die erste Unterseite erstellt. Dazu klickt man mit der rechten Maustaste auf die Webseite, wählt in dem eingeblendeten Kontextmenü "Seitenaktionen" und "Neu" um eine weitere Seite anzulegen.

In diesem Fall wird man wieder aufgefordert, die Position der Seite festzulegen und wird natürlich als Unterseite der Webseite definiert, also auf Level 1. Level 0 ist übrigens immer die gesamte Webseite. Diesmal wählt man als Seitentyp "Standard", gibt wieder einen griffigen Namen für die erste Seite an und geht auf Speichern. Hier wurde   "Start" anstelle von dem üblichen "Home" gewählt, um keine Verwirrung mit der bereits existierenden Webseite zu schaffen.

Nun soll noch ein Inhalt angelegt werden, damit die Seite im Browser auch was darstellen kann. Dazu wählt man die angelegte Seite im Seitenbaum aus. Falls die Seite nicht angezeigt wird, muss man ggf. die "Webseite" durch Klick auf den kleinen Pfeil vor der Webseite ausklappen. Diesmal klicken wir direkt mit der linken Maustaste auf den Seitentitel und in der ganz rechten Spalte wählen wir oben Schnelleingabe aus. Normalerweise startet die Ansicht mit Seiteninformation.

In der Schnelleingabe Maske erfassen die Redakteure ihren Content. Das geht mit Front End Editing (dazu später mehr) natürlich viel einfacher und attraktiver als im Backend.

(Content für die Seite erfassen)

Wir wählen also ein Inhaltselement aus, hier im Beispiel ein (formatierter) Text. Als Objekte stehen noch zur Verfügung Bild, Text mit Bild, Liste, Tabelle, Formular, Plugin und einige Typen mehr.

Unter Spalte kann man die gewünschte Spalte wählen, Normal ist die sog. Contentspalte. Standardmäßig gibt es noch "links" und "rechts" und Rand, die werden bei einer Content Spalte aber nicht benötigt. Zum Spalten Konzept später mehr. Diese Webseite ist z.B. 2-spaltig mit einer Navigation links. Da die Navigation aber automatisch erstellt und nicht durch einen Redakteur erfasst wird, wird sämtlicher Content hier in der Normal Spalte abgebildet. 

Sofern mehrere Sprachen eingerichtet sind und die Webseite mehrsprachig Content liefern soll, kann man das hier auch auswählen, ansonsten bleibt die Einstellung Standard.

Überschrift kann man auch wählen, generell gilt bei TYPO3 die Devise, alles kann - nichts muss. Das gilt auch für eine Überschrift. Die Formatierung kann man auf Wunsch später mit CSS ändern.

Das eigentlich Content Fenster. Hier kann man munter drauflos tippen. Der Editor und auch die Darstellung später macht automatisch Zeilenumbrüche, manuelle Zeilenumbrüche kann man wie bei WORD mit SHIFT-ENTER erzeugen, neue Absätze mit ENTER. Außerdem lassen sich Textstellen wunschgemäß formatieren, stehen vordefinierte Textstile zur Auswahl und auch Blockstile. Man kann diese Stile verwenden und ggf. auch umformatieren mit CSS und den Redakteuren die Konventionen mitteilen, also wie welcher Stil dargestellt wird und wofür er zu verwenden ist. Man kann aber auch komplett eigene Stile definieren, Beispiel ist unter Tutorials zu finden.

Nicht vergessen zu speichern und die erste Webseite ist fertig. Zumindest fast.


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...