Typo3Layout
Ein Seitenaufbau besteht bei Typo3 aus drei Komponenten, die miteinander kominiert werden:
- einer HTML-Vorlage
- einem Stylesheet (CSS)
- Typoscript Code
Nicht alle Komponenten müssen immer vorhanden sein. Bei modernen Layouts kommt dem CSS eine sehr hohe Bedeutung zu, bei der herkömmlichen Gestaltung mit Tabellen kann man auf ein Stylesheet sogar verzichten.
Die grafische Vorstellung
Die Seite soll etwa folgende Gestaltung bekommen.
Die Angaben wie ###CONTENT### zielen schon auf Typoscript ab uns sind Platzhalter, die von Typo3 später gefüllt werden.
Das Layout mit Tabellen
Klassisch lässt sich ein derartiges Layout mit Tabellen realisieren. In dem Beispiellisting tauchen insgesamt drei Tabellen auf.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Projekt1</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body bgcolor="#FFFFFF"> <!-- ###DOKUMENT### begin --> <div align="center"> <table border="0" width="780" cellspacing="0" cellpadding="0"> <tr> <td colspan="3" bgcolor="#000000"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> <tr> <td bgcolor="#000000"><img src="clear.gif" width="1" height="1" alt=""/></td> <td width="778"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr bgcolor="#82BC8B"> <td width="100%" valign="top" align="left"><img src="logo.gif" width="141" height="86" alt="" />###TRAILER###</td> </tr> <tr> <td width="100%" valign="top" align="left"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> <tr bgcolor="#478951"> <td align="right" class="menu_oben"><img src="clear.gif" width="1" height="20" alt="" />###MENU_OBEN###</td> </tr> <tr bgcolor="#478951"> <td align="left" class="menu_oben"><img src="clear.gif" width="1" height="20" alt="" />###KLICKPFAD###</td> </tr> <tr> <td width="100%" valign="top" align="left"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> <tr> <td width="100%" valign="top" align="left"> <table border="0" width="778" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"> <tr> <td valign="top" align="left" width="146" bgcolor="#478951">###MENU_LINKS###<br /></td> <td valign="top" align="left" width="23"><img src="clear.gif" width="1" height="1" alt="" /></td> <td valign="top" align="left" width="600"><br />###CONTENT###</td> <td valign="top" align="left" width="8"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> </table> </td> </tr> <tr> <td bgcolor="#478951" align="center" class="menu_oben"><img src="clear.gif" width="1" height="15" alt="" />###FOOTER###</td> </tr> </table> </td> <td bgcolor="#000000"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> <tr> <td colspan="3" bgcolor="#000000"><img src="clear.gif" width="1" height="1" alt="" /></td> </tr> </table> <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="w3c_xhtml_logo.gif" border="0" alt="W3C validiert" /></a> </div> <!-- ###DOKUMENT### end --> </body> </html>
Das Layout beruht auf drei Tabellen. Die äußerste Tabelle dient nur dazu einen schwarzen Rand von 1 Pixel Dicke zu erzielen. Sie besteht dazu aus drei Zeilen mit je drei Spalten. Von den neun Zellen sind die äußeren acht jeweils mit einer Transparenten Grafik von 1 Pixel Größe gefüllt. Entscheidend ist die schwarze Hintergrundfarbe der Zellen.
In der inneren Zelle befindet sich wieder eine Zelle, die aus sieben Zeilen mit je einer Zelle besteht:
- Kopfzeile
- weiße Linie
- Menü oben
- Klickpfad
- weiße Linie
- Navigation und Inhalt
- Fußzeile
Navigation und Inhalt müssen einen inneren Zusammenhang behalten, da sie immer gleich hoch sein sollen.
Die dritte Tabelle fasst daher Navigation und Inhalt zusammen zu einer Einheit. Sie besteht aus einer Zeile mit vier Spalten:
- Menü links
- Leerraum
- Inhalt
- Leerraum
Nach diesem Prinzip lässt sich nahezu jede Gestaltung realisieren. Für die Nutzung in Typo3 ist von dem Listing nur der Bereich zwischen
<!-- ###DOKUMENT### begin --> und <!-- ###DOKUMENT### end -->
wichtig, den Rest setzt Typo3 selber. Für eine Validierung auf korrekte Syntax ist es aber sinnvoll die Seite mit einem kompletten Seitenrahmen zu versehen und dann zu testen. Typo3 benutzt dann nur den Bereich zwischen den Markern.
Das angegebene Stylesheet spielt bisher nahezu keine Rolle, da keinerlei Klassen oder ID benutzt werden. Lediglich ein paar allgemeine Einstellungen sind möglich.
.bodytext, body, html { margin: 0px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; } p, tr, td { font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; }
Der Vorteil dieses Layouts ist seine Robustheit. Es ist leicht zu verändern und sieht in allen Browsern nahezu gleich aus. Lediglich für die Barrierefreiheit ist das Tabellenlayout problematisch, da die Vorleseprogramme irritiert werden können.
Das Layout mit CSS
Das Arbeiten mit CSS ist nicht ganz unproblematisch, weil viele Browser sich nicht an die veröffentlichten Regeln des W3C halten. Von daher kann es auch bei korrektem Code passieren, dass die Seite nicht das gewünschte Aussehen bekommt.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <!-- ###DOKUMENT### begin --> <div align="center"> <div id="alles_box"> <div id="trailer"><img src="logo.gif" width="141" height="86" alt="Logo">###TRAILER###</div> <div id="menu_oben">###MENU_OBEN###</div> <div id="klickpfad">###KLICKPFAD###</div> <div id="middle"> <div id="menu_links">###MENU_LINKS###</div> <div id="content">###CONTENT###</div> </div> <div id="footer">###FOOTER###</div> </div> <div style="text-align:center;"> <a href="http://validator.w3.org/check?uri=referer" target="_blank"> <img src="w3c_xhtml_logo.gif" border="0" alt="W3C validiert" /></a> </div> </div> <!-- ###DOKUMENT### end --> </body></html>
Das was vorher in Tabellenzellen eingebunden war findet sich nun innerhalb von <div>...</div> wieder.
Auch die Zusammenfassung von linker Navigation und dem Inhalt findet sich hier.
Die eigentliche Arbeit steckt im Style-Sheet:
body,html { background-color: #dce0d3; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; color: black; margin: 0px; text-align: center; } #alles_box { width:800px; background-image:url('middle.png'); text-align: left; border:1px; border-style: solid; border-color:#000000; } #trailer { height:92px; background: #82bc8b; padding:5px 5px 0px 5px; border: none; } #menu_oben { padding:3px 20px 4px 0px; text-align:right; background:#478951; height:20px; border-top:2px; border-top-style: solid; border-top-color:#ffffff; color:#ffffff; } #klickpfad { padding:3px 0px 4px 10px; text-align:left; background:#478951; height:20px; color:#ffffff; } #middle { width:750px; padding: 0px 0px 0px 0px; border:none; border-top:2px; border-top-style: solid; border-top-color:#ffffff; } #menu_links { float:left; width:164px; background-color:#478951; padding: 0; } #content { background:#ffffff; margin:0px; margin-left: 165px; margin-bottom: 10px; padding: 5px 5px 0px 5px; } #footer { clear:left; height:40px; padding: 10px 0px 5px 0px; border: none; background-color:#478951; text-align:center; color: #FFFFFF; }
Ich habe mich bemüht die Styles so zu benennen, wie die Platzhalter für Typoscript und sie auch in der gleichen Reiehefolge hier aufzuführen. Wichtig sind hier folgende Informationen zum Verständnis.
- width
- gibt die Breite eines Elementes an, entweder als absolute Größe, oder als relative Größe.
- height
- gibt analog zur Breite die Höhe eines elementes an.
- background
- legt den Hintergrund eines Elementes fest. Entweder durch Angabe einer Farbe, oder durch Angabe einer URL für eine Grafik.
- margin
- gibt den Außen-Rand an, der eingehalten werden soll. Man kann hinter margin alle Ränder angeben, die erste Zahl steht dann für oben, die zweite für rechts, die dritte für unten und die vierte für links. Oder man kombiniert in der Art margin-left, margin-top, ...
- padding
- gibt analog zu margin den Rand nach Innen an.
- border
- beschreibt die Ränder des Bereiches. Entweder gibt man direkt mit border die Breite alle Ränder an, oder nur einzelne in der Art border-right, border-buttom, ... Zusätzlich kann man mit border-color die Farbe, border-style die Linienart.
- float
- Hiermit wird der Textumfluss um ein Element festgelegt. Der Text aus dem Content-bereich soll neben dem linken Menü fließen können. Da das Menü links stehen soll erfolgt die Angabe float:left
- clear
- Das Floaten muss wieder gestoppt werden. Der Text soll ja nicht in den Fuß weiterfließen, sondern lieber die Textbox vergrößern. Daher wird das Umfließen mittels clear:left; beendet.
Die Bereiche für das linke Menü und den Textinhalt müssen gleich groß sein, da sie gemeinsame nebeneinander liegende Kinder von middle sind. Leider wird der Hintergrund nicht richtig gesetzt, wenn der Bereich durch den Geschwisterbereich zwangsweise vergrößert wird. Um das Problem zu umgehen habe ich eine Hintergrundgrafik für middle gesetzt, die aus einem schmalen Streifen mit beiden Farben besteht (damit auch die Weiße Farbe zu erkennen ist ist das Bild hier eingerahmt).
Wenn man sich mit der Hintergrundgrafik etwas mehr Mühe gibt, dann kann man auch 3D artige Effekte erreichen und abgerundete Kanten.
Dazu braucht man aber eine etwas veränderte Hintergrundgrafik, die muss die Abrundung der Kanten andeuten.
Damit das Ganze gut aussieht braucht man dann noch entsprechende Hintergrundbilder für den Kopf- und den Fußbereich. Außerdem muss man sich deutlich mehr Mühe mit der Positionierung der Elemente machen.
Ergänzung
Es müsste bei der Hintergrundgrafik eigentlich langen nur den grünen Bereich zu definieren und das horizontale Kacheln zu unterbinden. Wenn dann zusätzlich eine weiße Hintergrundfarbe vorgegeben ist, dann müsste auch ein elastisches Layout realisierbar sein.
YAML
Eine enorme Hilfe beim Anlegen von CSS-Layouts sind die Anleitungen von Dirk Jesse unter http://www.yaml.de/ .
Er liefert auf seinen Seiten das Grundgerüst für ein Layout mit bis zu drei Spalten. Das Grundgerüst besteht aus einer HTML-Seite und mehreren CSS-Dateien. Bei seinem Ansatz wird das Cascadieren der Style-Sheets intensiv genutzt, so dass die Reihenfolge eine Rolle spielt. Ich habe seine CSS-Dateien komplett übernommen und ändere einige Eigenschaften hinterher in einer eigenen Datei. Die von ihm gelieferten Dateien bleiben so vollkommen unverändert, die Einstellungen können so trotzdem verändert werden.
Seine HTML-Vorlage habe ich folgendermaßen angepasst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Yet Another Multicolumn Layout | Vorlage</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <!-- FXgen Sie hier ihre Meta-Daten ein --> <link href="standard.css" rel="stylesheet" type="text/css"/> <!--[if lte IE 6]> <link href="css/iehacks.css" rel="stylesheet" type="text/css" /> <![endif]--> </head><body> <!-- ###DOKUMENT### begin --> <div id="page_margins"> <div id="page" class="hold_floats"> <div id="header"> <div id="topnav"> <!-- Start: Skiplink-Navigation --> <a class="skip" href="#navigation" title="Direkt zur Navigation springen">Zur Navigation springen</a> <a class="skip" href="#content" title="Direkt zum Content springen">Zum Content springen</a> <!-- Ende: Skiplink-Navigation --> </div> ###LOGO### </div> <!-- #nav: Hauptnavigation --> <div id="nav"> <a id="navigation" name="navigation"></a> <!-- Skiplink-Anker: Navigation --> <div id="nav_main"> ###MENU_OBEN### </div> </div> <!-- #nav: - Ende --> <!-- #nav: Klickpfad --> <div id="nav"> <div id="nav_main"> ###KLICKPFAD### </div> </div> <!-- #nav: - Klickpfad --> <!-- #main: Beginn Inhaltsbereich --> <div id="main"> <a id="content" name="content"></a> <!-- Skiplink-Anker: Content --> <!-- #col1: Erste Float-Spalte des Inhaltsbereiches --> <div id="col1"> <div id="col1_content" class="clearfix"> ###MENU_LINKS### </div> </div> <!-- #col1: - Ende --> <!-- #col2: zweite Flaot-Spalte des Inhaltsbereiches --> <div id="col2"> <div id="col2_content" class="clearfix"> ###SPALTE_RECHTS### </div> </div> <!-- #col2: - Ende --> <!-- #col3: Statische Spalte des Inhaltsbereiches --> <div id="col3"> <div id="col3_content" class="clearfix"> ###CONTENT### </div> <hr class="clear_columns"/> </div> <!-- #col3: - Ende --> </div> <!-- #main: - Ende --> <!-- #Footer: Beginn FuXzeile --> <div id="footer"> ###FOOTER### </div> <!-- #Footer: Ende --> </div> </div> <!-- ###DOKUMENT### end --> </body> </html>
Alle Bestandteile der Vorlage sind auf der Website ausführlich erläutert.
Weiter habe ich die notwendigen CSS-Dateien geladen und eingebunden. Ich habe die Dateien im Ordner namens css gesammelt und binde sie über die Datei yaml.css zusammen.
@import url(base.css); @import url(basemod.css); @import url(content.css); @import url(print_003.css);
Die vier Dateien sind ebenfalls sehr ausführlich beschrieben.
Nun noch ein eigenes Style-Sheet für die individuellen Anpassungen:
@media screen { /* Rechte Spalte abschalten */ #col2 { display:none; } #col2_content { display:none; } /* rechten Randabstand anpassen */ #col3 { margin-right:0; border-right:0; } /* Spaltentrenner */ #col3 {border-left: 2px #ddd dotted;} #footer {background-color:#478951; color:#ffffff; padding:0px; margin:0px; text-align: center;} #header {background-color: #82bc8b; height:92px;} #nav {background:#478951;} #col1 {background-color:#478951;} #main {background-color: #478951; padding-top: 2px;} #col3 {background-color: white;} #page {background-color: green; } #logo {float: left;} #rundgang {position: absolute; right: 0px;} #menu_oben {position: absolute; right: 0px; top: 40px;} }
Hier schalte ich die dritte Spalte aus (#col2 { display:none; }) und setze die Farben und Größen. Hinsichtlich der Schriftgestaltung werden hier sicherlich noch weitere Einstellungen notwendig sein, so funktioniert das aber erst einmal.
In die Seiten eingebunden wird das dann mit folgenden TypoScript-Zeilen:
config.doctype = xhtml_trans config.htmlTag_langKey = de config.xhtml_cleaning = all page = PAGE page { typeNum = 0 bodyTag = <body bgColor = "#DDDDDD" > includeCSS.f1 = fileadmin/uwe/css/yaml.css includeCSS.f2 = fileadmin/uwe/anpassung.css meta.AUTHOR = Uwe Debacher meta.DESCRIPTION = Eine erste Website zum Testen headerData.5 = TEXT headerData.5.value ( )
Layout-Erstellung mit YAML-Builder
Dirk Jesse, der Autor von YAML hat ein neues Supertool zur Verfügung gestellt, den YAML-Builder. Dieses Super-Tool erleichtert die Erstellung der HTML und CSS-Dateien erheblich, wenn auch die Anpassung an das Typo3 trotzdem noch per Hand erfolgen muss.
Beim Aufruf der Website http://builder.yaml.de ist im Hintergrund ein dreispaltiges Layout und davor eine schwebende Menü-Box zu sehen
Über die Box nimmt man die notwendigen Änderungen vor, hier also vor allem die Anpassung an das zweispaltige Layout.
Wenn die notwendigen Anpassungen vorgenommen sind, dann erzeugt ein Klick auf Get Code die notwendigen Dateien:
Links
Einfach für alle barrierefreies Webdesign
YAML Homepage
[1] YAML Builder
Selfthtml Weblog zu CSS
tanfa Beschreibungen für CSS-Layout
Site in an hour Anleitung für CSS Layout
Andreas Kalt CSS Web-Links
CSS Workshop
Byteshift verschiedene Anleitung zu CSS Themen
Cynthia Says™ Web Content Accessibility Report
W3C (X)HTML Validator
W3C CSS Validator