Auf Basis meiner Vorgaben habe ich dann einen HTML-Prototypen erzeugt. Dieser Prototyp soll später als Basis für die Typo3-Templates verwendet werden.
Ich entwickele in der Regel in einer Virtuellen Maschine mit einem Linux Betriebssystem, so dass ich die jeweilige Server-Umgebung nachbilden kann. Die Entwicklung der Templates sowie die ersten Versuche mit Typo3 sollten in einer VM stattfinden. Als Editor für HTML/CSS verwendete ich gern Nebelns 8.1. Diese Entwicklungsumgebung kann ich auch für PHP Programmierung nutzen. Das CSS meiner Templates definierte ich in SASS, einer Stylesheet Sprache, die als Präprozessor für das eigentliche CSS verwendet wird. SASS erlaubt eine syntaktische klarere Definition der CSS.
Die Styles für das recht einfache Layout waren in wenigen Minuten geschrieben, die responsive Funktionalität war auch kein Problem. In den Google Chrome Entwicklertools habe ich die Funktionalität einfach testen können und das Layout feinjustieren. Die Tools können im Chrome über die Taste F12 oder das Menü unter Weitere Tools > Entwicklertools abgerufen werden. Über die Schaltfläche Toggle Device Mode kann die Ansicht so angepasst werden, dass man unterschiedliche mobile Geräte simulieren kann.
Das Ergebnis meiner Arbeit für die einspaltige Vorlage (onecol.html) sehen Sie nachfolgend.
<body>
<div class="outerFrame">
<div class="topArea">Hauptmenü</div>
<div class="themeArea"><h1>Thementitel</h1></div>
<div class="contentArea">Inhalt</div>
<div class="footerArea"><sub>Copyright</sub>
Statisches Menü</div>
</div>
</body>
Einfach, oder? Die kursiv hervorgehobenen Texte sind nur Platzhalter und sollten später durch Typo3 gefüllt werden.
Der Vollständigkeit halber folgt noch das zweispaltige Template (twocol.html), welches zusätzlich noch eine Sub-Navigation enthalten soll.
<body>
<div class="outerFrame">
<div class="topArea">Hauptmenü</div>
<div class="themeArea"><h1>Thementitel</h1></div>
<div class="contentArea">
<div class="leftArea">Sub-Navigation</div>
<div class="rightArea">Inhalt</div>
</div>
<div class="footerArea"><sub>Copyright</sub>
Statisches Menü</div>
</div>
</body>
Im Grunde unterscheiden Sich das einspaltige und zweispaltige Template nur darin, das beim zweispaltigen Layout der Content-Bereich in einen linken und rechten Teil aufgeteilt ist. Der linke Teil soll die Sub-Navigation und der rechte den Inhalt enthalten.
Die Themenbilder werden durch CSS gesteuert. Für nützliche Vorlagen meiner Themenbilder habe ich mal das digitale Fotoarchiv unser Familie durchstöbert. Aus den Vorlagen habe ich einen Teilbereich der Fotos ausgeschnitten, so dass sie von den Abmessungen in den Bereich passen.
Damit genug der Vorbereitung. Legen wir los mit Typo3!