Artikelformat

Website in 30 Minuten mit TYPO3 Teil 1: HTML Template, Seitenbaum, Ressourcen

In diesem kleinen Online Tutorial möchte ich Dir zeigen, wie Du in 30 Minuten eine Internetseite mit TYPO3 erstellen kannst. Ziel dieser Anleitung soll es sein, Dir näher zu bringen, wie sich der Ablauf mit TYPO3 gestaltet, und welche Schritte Du abarbeiten musst, um am Ende auch Erfolg zu haben.

Themen in diesem Kurs:

  1. Vorbereiten einer HTML Datei, setzen von Subparts
  2. Backend-Spalten anpassen
  3. Seitenbaum erstellen
  4. Dateibaum erstellen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

Als erstes benötigen wir ein fertiges HTML Dokument. Die beste Vorgehensweise ist, zuerst ein Layout zu gestalten. Bei aufwändigeren Designs wird das Layout zuerst im Grafikprogramm erstellt. Dann kommt der nächste Schritt: Nachbauen in HTML und CSS.

Für diesen Kurs habe ich ein kleines Grundlayout auf CSS Basis erstellt. Das Layout ist 3 Spaltig und hat einen Emo-Bereich. Auf der linken Seite befindet sich eine Navigation. Unter der Navigation kann zusätzlich Content gepflegt werden. In der Mitte befindet sich der Haupt-Content-Bereich und links ist erneut eine Spalte für pflegbaren Content enthalten. Im Emobereich kann das Bild getauscht werden. Hier kannst Du das HTML Layout ansehen.

Damit nun TYPO3 nachher weiß, welcher Content wohin muss, musst Du im HTML Template sogenannte „Subparts“ erstellen. Jeder Subpart hat einen Start- und Endpunkt. Alles was sich in diesem Subpart befindet, entfernt TYPO3 automatisch und füllt es mit dem eigenen Content auf. Einzige Ausnahme: Der Dokumenten Subpart (wird weiter unten beschrieben). Subparts werden wie folgt erstellt:

<div>
	<!-- Subpart ###HEADERIMAGE### begin -->
		<img src="header.jpg">
	<!-- Subpart ###HEADERIMAGE### end -->
</div>

In diesem Beispiel wird also der Subpart HEADERIMAGE definiert. Wichtig dabei sind folgende Punkte:

  • Code in html Kommentar schreiben
  • 3 x Raute am Anfang und 3 x Raute am Ende des Namens für den Subpart

Der Code, der sich zwischen den beiden HTML Kommentaren befindet, kann so verbleiben. Eben dieser Teil wird wird nachher von TYPO3 dynamisch ersetzt. Das hat den Vorteil dass Änderungen am Layout relativ einfach vorgenommen werden können, da keine Code-Teile gelöscht werden müssen. Man sieht also am HTML Template wie es nachher auch aussehen wird, wenn TYPO3 mit dem HTML Template arbeitet.

Der wichtigste Subpart ist nun der DOKUMENT Subpart. DIeser Subpart umschliesst alle anderen Subparts. HTML Code der sich außerhalb dieses Subparts befindet, ignoriert TYPO3 schlichtweg. Dieser Subpart wird deshalb auch nach dem body-Tag des HTML Dokumentes eingeleitet, und hört vor dem schließenden body Tag wieder auf:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Training Template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<!-- Subpart ###DOKUMENT### begin -->
  <div>

	some code....

  </div>
<!-- Subpart ###DOKUMENT### end -->
</body>
</html>

Der Name muss nicht zwingend DOKUMENT lauten. Dieser ist frei definierbar und in TypoScript einstellbar.

Rein theoretisch kann man in einem HTML Template auch mehrere Dokumenten-Subparts angeben. So hätte man dann für verschiedene Layouts immer nur ein HTML-File mit allen Designs. Für einen Internetauftritt mit mehreren HTML Templates empfehle ich aber auch mehrere HTML Vorlagen zu bauen. Man ist bei der Gestaltung und Programmierung der Vorlage flexibler und es ist in TYPO3 nachher auch übersichtlicher.

Noch ein Beispiel: Subpart einer Navigation

<div>
	<!-- Subpart ###NAVIGATION### begin -->
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Demos</a></li>
		<li><a href="#">Misc</a></li>
	</ul>
	<!-- Subpart ###NAVIGATION### end -->
</div>

Die Navigationsliste befindet sich in einem DIV mit der Klasse navi. Das ul Element und die Listeneinträge befinden sich innerhalb des Subparts ###NAVIGATION###. Du musst also das Menü mit TypoScript so konfigurieren, dass genau diese Struktur von TYPO3 ausgegeben wird. Um den äußeren DIV machen wir uns keine Gedanken, dieser wird von TYPO3 ja nicht gelöscht.

Und hier die HTML Datei mit allen Subparts die benötigt werden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Training Template
    </title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>
    <!-- Subpart ###DOKUMENT### begin -->
    <div>
      <div>
        <!-- Subpart ###HEADERIMAGE### begin -->
        <img src="header.jpg">
        <!-- Subpart ###HEADERIMAGE### end -->
      </div>
      <div>
        <div>
          <div>
            <!-- Subpart ###NAVIGATION### begin -->
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Demos</a></li>
              <li><a href="#">Misc</a></li>
            </ul>
            <!-- Subpart ###NAVIGATION### end -->
          </div>
          <!-- Subpart ###LEFTCONTENT### begin -->
          <h2>Some Content...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###LEFTCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###MAINCONTENT### start -->
          <h1>Text, Text und nochmal Text....</h1>
          <img src="image01.jpg" style="display:inline; float:left; padding:0 10px 10px 0;">
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###MAINCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###RIGHTCONTENT### start -->
          <h2>Some other content</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <h2>Mehr davon...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###RIGHTCONTENT### end -->
        </div>
      </div>
      <div>
      </div>
    </div>
    <!-- Subpart ###DOKUMENT### end -->
  </body>
</html>

TYPO3 bietet uns standardmäßig 4 Spalten an: Links, Mitte, Rechts und Rand. Diese Spalten werden nachher den verschiedenen Subparts im HTML Template, dass Du gerade erstellt hast, zugewiesen.

Backend Spalten nach der Installation

Die 4 spalten die TYPO3 bereits mitbringt, reichen in aller Regel auch aus. Allerdings möchte ich bei dieser Installation ein Headerbild austauschbar machen. Und genau dafür bietet sich eine solche Spalte an. Nur, was macht es für einen Sinn, ein Emobild in einer Spalte namens „Rand“ zu pflegen? Keinen 🙂 Deshalb werden wir diese 4. Spalte neu konfigurieren und mit dem Titel Headerimage belegen.

Leider bietet TYPO3 uns das nicht als Konfigurationspunkt an. Wir müssen dazu 2 Konfigurationsdateien von TYPO3 anpassen. Dazu benötigst Du ein FTP Programm mit dem Du Zugriff auf deinen Webspace hast. Ich beginne mit der Datei  /typo3conf/extTables.php:

Am Ende der Datei musst Du folgenden Code einfügen:

t3lib_extMgm::addPageTSConfig('
mod.SHARED.colPos_list = 1,0,2,3
');
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array("Links||Links||||||||","1"),
"0" => array("Mitte||Mitte||||||||","0"),
"2" => array("Rechts||Rechts||||||||","2"),
"3" => array("Headerbild||Headerbild||||||||","3"),
);

Bitte achte darauf, diesen Code vor dem ?> einzufügen. Wenn Du soweit bist, dann öffne die Datei /typo3conf/localconf.php:

Füge auch hier am Ende der Datei folgendes ein und achte darauf dass auch hier dass ?> immer als allerletzte Zeile kommen muss!

$typo_db_extTableDef_script = 'extTables.php';

Backend Spalten nach der Konfiguration

Somit hast Du nun erfolgreich die Spaltennamen im TYPO3 Backend angepasst. Solltest Du Dich diesen Schritt nicht trauen, kannst Du Ihn auch ohne Probleme übergehen. Du musst in Zukunft nur dran denken, dass die Spalte „Rand“ für den Headerbereich zuständig ist.

Dieser Eingriff in die TYPO3 Dateien sind sofort zu erkennen. Wenn Du im Backend im Seitenmodul nachher auf eine Seite klickst, siehst Du die neue konfigurierten Spalten.

Der Seitenbaum im TYPO3 Backend

Zum Seitenbaum gibt es nicht besonders viel zu schreiben. Der Seitenbaum im TYPO3 Backend stellt die Struktur der Internetseite dar. Ausserdem wird aus dem Seitenbaum die Naviagtion erzeugt. Im Seitenbaum können normale Seiten, versteckte Seiten oder auch sogenannte SysFolder, also Systemordner erstellt werden. Jede Seite hat einen Titel der sich im Seitenbaum wiederspiegelt. Zum Titel kann man das Feld alias nutzen. Das ist die Angabe wenn man „sprechende“ Urls unabhängig vom Seitentitel aufbauen möchte.

Einzelne Seiten lassen sich per Drag & Drop im Seitenbaum bewegen. Ausserdem gibt es noch den Eintrag „Funktionen“ im Linken Modulmenü. Dieser Punkt enthält verschiednene Assistenten. Einer davon nennt sich „Viele Seiten anlegen„. Das ist ein ganz nützliches Werkzeug wenn man mehr als eine Seite gleichzeitig anlegen möchte. Man hat die Möglichkeit, bis zu 10 Seiten auf einmal anzulegen. Wie man genau Seiten anlegt, erfährst Du im Video.

Die Dateistruktur im TYPO3 Backend

Der Dateibaum in TYPO3 ist der Bereich, wo man Ressourcen und Media Daten ablegen und verwalten kann. Der Dateibaum befindet sich im Ordner fileadmin/. In diesem Dateibaum erstelle ich den Ordner templates/ in den ich dann die html, css und sonstige Dateien die für den Betrieb der Seite notwendig sind, einsortiere. Über das TYPO3 Backend lassen sich Ordner anlegen, Dateien erstellen, Dateien hochladen und wenn es sein muss, auch alles wieder löschen.

Der Zugang zum Dateibaum und den Dateien kannst du mit einem Klick auf „Dateiliste“ bekommen. Für spätere Mediadaten und Downloads empfiehlt es sich, innerhalb von fileadmin/einen extra Ordner anzulegen, und den Redakteur in dieses Verzeichniss einzuschliessen, damit nicht aus versehen die benötigten Template Ressourcen verschwinden.

In den nächsten Tagen erscheint auch ein passendes Video Tutorial zum ersten Teil, sowie nächster Woche der zweite Teil der Serie.

Autor: Rene Kreupl

Bloggt über WebEntwicklung und Fotografie

14 Kommentare

  1. … das ist doch absoluter Quatsch! In 30 Minuten schaffst du es ja gerade einmal den Space zu organisieren….
    Okay, ich weiss, dass das eventuell übertrieben ist, aber als „nobody“ kann man nicht in 30 Minuten eine Website erstellen!
    Und ich finde, man sollte damit weder interessierte Newbies ködern, TYOO3-Siteentwickler entwerten, noch Blubberblasen verstreuen.

  2. Ansich ganz gut!
    Kannst du noch eine erläuterung über deine css Datei machen?

    Denn das fehlt noch um die Seite komplet zu machen, damit es wie im „HTML LAYOUT“ was angegeben ist aussieht.

    mfg watsu

  3. Hallo Rene,

    kannst du mir eventuell auch einen Tipp geben wie man ein dynamisches Layout erstellt?

    Ich würde auf einigen Seiten gerne 2 Spalten haben und auf anderen wiederum nur 1 Spalte.

    Würde mich freuen wenn du mir auf die Sprünge helfen würdest.

    Vielen Dank und beste Grüße
    Sven

  4. Hallo Sven, dazu musst du lediglich ein zweites Template anlegen und dieses dann bei der Seite selbst auswählen. Bei Fragen einfach melden.

  5. Hallo Rene, toller Artikel! Zum Glück hast Du es nicht anhand von Templa Voila erklärt, dann würde man es nicht in 30 Minuten schaffen. Ich verstehe sowieso nicht warum man diese komplizierte Erweiterung benötigt. Mit der Maskierung von Markern ist es doch viel einfacher. Danke! LG, Norman Schwaneberg

  6. PatrickKane

    24/06/2013 @ 13:09

    Servus Rene, super Artikel! Ich selber bin Webdesigner und arbeite jetzt mit Typo3, ich hab meine Probleme im TS. Um es genau zu sagen bei der Navigation, bei dem Scirpt mist, könntest du mir dort weiter helfen? Oder auch Slideshows einbinden?

    Mit bestem Gruß!

  7. Hallo Patrick,

    sorry für die späte Reaktion!

    Wie können wir dir weiterhelfen?
    Hast du mittlerweile eine Lösung gefunden?

    Falls du noch Hilfe brauchst, melde dich einfach, gerne auch per PN!

    Grüße Max

  8. Wiebke Wiegmann

    27/11/2014 @ 14:07

    Hallo Rene,

    ich bin TYPO3-Neuling und möchte das Tutorial „Website in 30 Minuten mit TYPO3 Teil 1: HTML Template, Seitenbaum, Ressourcen“ durcharbeiten und würde dazu gerne auf die von dir beschriebenen Download-Dateien zurückgreifen! Kannst du mir sagen wo ich diese finde?

    „… Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung…“

    Ich finde aber keinen Download 🙁

    Danke, Gruß Wiebke

  9. Gute Anleitung für jemand der sich schon mit Webdesign auskennt aber sich zum erstenmal mit Typo3 beschäftigt.

  10. Eine gute Anleitung für Anfänger von Typo3, allerdings wären hier noch die Beispiele der Konfiguration des Templates mit TypoScript interessant 🙂

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.