TYPO3 (Teil 32): Designvorlagen (2)

Über die Designvorlage legt man das Grundlayout der Webseite fest. Üblicherweise erstellt man die Designvorlage in einem ganz normalen HTML-Editor, so wie man das für eine herkömmliche statische Seite machen würde. Achtet bei der Ausarbeitung der Designvorlage unbedingt auf möglichst fehlerfreien HTML-Code. Denn ansonsten würden sich die HTML-Fehler durch euren gesamten TYPO3-Aufritt ziehen. In diesem Tutorial kommt ihr mit der Designvorlage in Berührung, welche die Basis für die nächsten Tutorials bildet. Anschließend wird gezeigt, wie ihr die Designvorlage in TYPO3 bekannt machen könnt. Am Ende dieses Tutorials legt ihr außerdem die Grundstruktur für die TYPO3-Webseite an. Dieser Aspekt ist entscheidend für den weiteren Ausbau der Webseite. Denn nur eine wohl durchdachte Struktur ermöglicht eine unkomplizierte Weiterarbeit an der Seite.

Wir empfehlen:
TYPO3 CMS-Training

Um es vorwegzunehmen: Wie eure Designvorlage im Endeffekt aussieht, bleibt natürlich euch überlassen. Die hier vorgestellten Dinge funktionieren nämlich unabhängig vom jeweiligen Layout. Ob ihr also ein schlichtes oder aber grafisch aufwendiges Layout verwendet, spielt im Endeffekt keine Rolle. Achtet aber in jedem Fall auf fehlerfreien HTML-Code. Denn enthält die Designvorlage HTML-Fehler, werden sich diese wie ein roter Faden durch die gesamte TYPO3-Webseite ziehen.

 

Im vorliegenden Fall wird mit einem statisch eingebundenen Logo und einer festen div-Struktur gearbeitet. Daher können auch die div-Container statisch in die Designvorlage aufgenommen werden. Soll sich diese Struktur dynamisch anpassen, müsste man diese später mittels TypoScript definieren.

Kennzeichnet innerhalb der Designvorlage die gewünschten Teilbereiche und Platzhalter. Eine typische Designvorlage könnte folgendermaßen aussehen:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Elektro</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ###DOKUMENT### anfang -->
<div id="wrapper">
  <div id="top">
    <h2 class="logo"><a href="#" title="Elektro">Elektro</a></h2>
    <div id="topnvav"> ###MENU_OBEN### </div>
    <br class="clear" />
  </div>
  <div id="content">
    <div class="content_left"> ###INHALT###
      <div class="content_right"> ###MENU_LINKS###
        <div> </div>
      </div>
      <br class="clear" />
    </div>
  </div>
</div>
<div id="footer"> ###FUSSBEREICH### </div>
<!-- ###DOKUMENT### ende -->
</body>
</html>

 

Einige Worte zum technischen Hintergrund. Wenn man eine TYPO3-Webseite im Frontend aufruft, geht das üblicherweise über die index.php.

http://www.psd-tutorials.de/index.php

Wenn man diese Datei aufruft, wird üblicherweise die Designvorlage eingelesen. Die Dateien sollten üblicherweise unterhalb des Verzeichnisses fileadmin gespeichert werden.

 

Hier könnte man beispielsweise die dazugehörenden Grafiken im Verzeichnis images hinterlegen. Vorteil dieser Variante: Auf dieses Verzeichnis hat man dann auch tatsächlich über das Backend Zugriff.

 

Unterhalb von fileadmin könnte man dann auch gleich noch das Verzeichnis css anlegen, in dem die zur Designvorlage gehörenden CSS-Dateien liegen.

Die HTML-Designvorlage selbst speichert man im Verzeichnis fileadmin.

 

Um die Designvorlage in TYPO3 verfügbar zu machen, gibt es verschiedene Möglichkeiten. Zunächst einmal kann man das per FTP erledigen. Die Verzeichnisstruktur sollte folgendermaßen aussehen:

fileadmin
—css
—images
—elektro.html

Alternativ dazu könntet ihr die Dateien auch über das Dateiliste-Modul auf den Server laden. Das bietet sich natürlich immer dann an, wenn man keinen FTP-Zugang hat. Ruft dazu Datei/Dateiliste auf. Über das sich daraufhin öffnende Dialogfenster hat man Zugriff auf das Verzeichnis fileadmin.

Klickt auf die Neu-Schaltfläche, um die gewünschten zusätzlichen Verzeichnisse (z.B. images und css) anzulegen. Die Dateien selbst können dann über Dateien hochladen auf den Server geladen werden.

 

Die Seiten anlegen

Nachdem die Designvorlage auf dem Server liegt, kann mit dem Aufbau der eigentlichen Webseite begonnen werden. Zunächst muss man sich die grundlegende Navigationsstruktur überlegen. Im aktuellen Beispiel wird es zwei Menüs geben, nämlich eines oben und eines auf der rechten Seite. (Lest in diesem Zusammenhang auch unbedingt noch einmal die Tutorials, die sich mit dem Thema Seitentypen und Anlegen von Seiten beschäftigen).

Legt die entsprechende Navigationsstruktur im Backend an. Die Aufteilung könnte man anhand der Menüs machen.

Home
–Menü oben
—-Startseite
—-Wir über uns
—-Kontakt
—-Impressum
–Menü rechts
—-Standorte
—-Preise
—-Informationen

So könnte also die Struktur der Webseite aussehen. Etwas verwirrend erscheint hier möglicherweise die Unterseite Home. Bei der handelt es sich einfach um eine Rootseite, die den Zweck hat, als Hilfeseite zu fungieren. In dieser Hilfeseite wird später das TypoScript-Template definiert. Vorteil dieser Variante: Das Template kann dann an dieser einen zentralen Stelle verwendet und gepflegt werden. Die Seite Home fungiert daher im aktuellen Beispiel auch nicht als Startseite. Als Startseite wird vielmehr eine zusätzliche Seite angelegt. (Der Name Home wird vom Dummy-Paket vorgegeben. Ihr könntet diese beispielsweise auch in Root umbenennen. Ich bleibe der Einfachheit halber aber bei Home).

 

Um eine neue Seite anzulegen, ruft man Web>Seite auf und klickt beispielsweise auf das Seitensymbol von Home. Wählt hier Seitenaktionen>Neu. Anschließend kann die Position der neuen Seite angegeben werden. Im Fall von Menü oben ist das direkt unterhalb von Home.

Achtet in jedem Fall darauf, dass es unterhalb von Menü oben die Seite Startseite gibt.

 

Das Besondere an den drei Seiten Home, Menü oben und Menü links ist nun, dass diese nicht im Frontend zu sehen sein sollen. Das erfordert einige besondere Einstellungen in den Eigenschaften dieser drei Seiten. Klickt zunächst das Symbol der Seite Home an und wählt Bearbeiten. Stellt den Typ von Standard auf Verweis und bestätigt die Kontrollabfrage mit Ok. Ruft anschließend Datensätze durchblättern auf und stellt Startseite ein.

Achtet in jedem Fall darauf, bei der Seite Startseite im Register Zugriff die Option Seite deaktivieren tatsächlich zu deaktivieren. Wiederholt die genannten Schritte für die Seiten Menü oben und Menü links. Dank der vorgenommenen Einstellungen können die drei Seiten Home, Menü oben und Menü links nun tatsächlich nicht mehr direkt aufgerufen werden. Sollte ein Besucher nämlich eine dieser Seiten öffnen, wird er automatisch auf die Startseite umgeleitet.

Auf diese Weise kann jetzt die Verzeichnisstruktur aufgebaut werden. Am Ende dieses Tutorials sollte die Designvorlage eingebunden und die Navigationsstruktur aufgebaut sein. Beide Dinge bilden dann die Basis für die weiteren Arbeiten an der Webseite.

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