Typo3Layout

Aus Debacher-Wiki
Zur Navigation springenZur Suche springen

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.

Typo3-layout1.png

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.

Typo3-layout3.png

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).

Middle.png


Wenn man sich mit der Hintergrundgrafik etwas mehr Mühe gibt, dann kann man auch 3D artige Effekte erreichen und abgerundete Kanten.

Typo3-layout2.png

Dazu braucht man aber eine etwas veränderte Hintergrundgrafik, die muss die Abrundung der Kanten andeuten.

Middle3d.png


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

Yamlbuilder.jpg


Über die Box nimmt man die notwendigen Änderungen vor, hier also vor allem die Anpassung an das zweispaltige Layout.

Yamlbuilder1.jpg


Wenn die notwendigen Anpassungen vorgenommen sind, dann erzeugt ein Klick auf Get Code die notwendigen Dateien:

Yamlbuilder2.jpg

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