Typo3 - HTML-Templates: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Typo3 - Templates mit HTML-Vorlage erstellen)
 
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 15: Zeile 15:
 
       -bildchen.jpg
 
       -bildchen.jpg
  
−
HTML-Datei:
+
HTML-Datei (nur mit submarkern):
 
<pre>
 
<pre>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Zeile 50: Zeile 50:
 
</body>
 
</body>
 
</html>
 
</html>
 +
</pre>
 +
 +
== TypoScript Haupttemplate erstellen ==
 +
 +
* Im Backend bei Templates ein neues Template erstellen:
 +
** Am besten erst mal ein paar Seiten anlegen z.B. so:
 +
 +
<pre>
 +
-root (weiterleitung auf Home
 +
  -HOME
 +
  -Seite2
 +
  -...
 +
</pre>
 +
 +
** Im Templates Modul ein neues Template auf root anlegen (root klicken New>Template)
 +
** Das neu erstellte (NEW_SITE) im Modus Info/Modify bearbeiten
 +
** besseren Namen vergeben (z.B. main.tmpl)
 +
* Wichtige Standard Templates einbinden. Welche hängt von der Art des Layouts ab nähere Infos gibts unter: [[Typo3 - Static Templates]]
 +
** Früher (Tabellenlayout) Content(Default) und cSet(default) bzw. cSetStylesheets aus der Tabelle  Include static
 +
** Heute (CSS-Layout) css_styled_content (den zuerst installieren, liegt in Available Extensions to install) und css_styled_IMGTEXT (wird in Typo3 V4 integriert sein.)
 +
 +
* Setup im Haupttemplate am Beispiel CSS-Layout
 +
<pre>
 +
# Default PAGE object:
 +
page = PAGE
 +
page.typeNum = 0
 +
page.stylesheet = fileadmin/template/css/main.css
 +
page.10 = TEMPLATE
 +
page.10{
 +
  template = FILE
 +
  template.file = fileadmin/template/main.html
 +
 +
  ### Subparts ansprechen ###
 +
  workOnSubpart = DOCUMENT_BODY
 +
     
 +
# Hauptinhalt
 +
  subparts.CONTENT < styles.content.get
 +
  subparts.CONTENT.wrap = <div class="content"> | </div> 
 +
 +
  #Inhalt rechts
 +
  subparts.CONTENT_RIGHT < styles.content.getRight
 +
  subparts.CONTENT_RIGHT.wrap = <div class="content_right"> | </div>
 +
 +
  ### Hauptnavigation ###
 +
  subparts.NAVI < temp.navi_vGmenu
 +
}
 
</pre>
 
</pre>

Aktuelle Version vom 8. Februar 2006, 15:13 Uhr

Vorgehen:

  • Eine HTML Datei als Vorlage erstellen und dann mit Markern bzw. Subbereichen versehen, die nachher mit Inhalten aus der Datenbank gefüllt werden können. Man kann auch alles im TS erstellen. In der Zusammenarbeit mit einem Grafiker ist aber die HTML-Vorlage sehr praktisch.
  • Zugehörige CSS-Datei erstellen wenn gewünscht. Es ist auch möglich aus dem TypoScript heraus automatisch eine CSS - Datei erstellen zu lassen.

Das ganze kommt dann am besten in den fileadmin Ordner.

Beispiel Ordnerstruktur: 

fileadmin
 -template
   -main.html (die HTML Vorlage)
   -css
     -main.css
   -images
     -bildchen.jpg

HTML-Datei (nur mit submarkern): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>altes rathaus bretten | cafe | restaurant | bar | live music</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--###DOCUMENT_BODY### start -->
<div align="center">
   <div id="container">
      <div id="logo">
         <div id="header_bild"></div>
      </div>
      <div id="navi">
         <!--###NAVI### start-->
            navi
         <!--###NAVI### stop-->
      </div>
      <div id="content_inhalt">
         <!--###CONTENT### start-->
         content
         <!--###CONTENT### stop-->
         <!--###CONTENT_RIGHT### start-->
         content right
         <!--###CONTENT_RIGHT### stop-->
      </div>
      <div id="impressum"></div>
   </div>
</div>
<!--###DOCUMENT_BODY### stop -->
</body>
</html>

TypoScript Haupttemplate erstellen[Bearbeiten]

  • Im Backend bei Templates ein neues Template erstellen:
    • Am besten erst mal ein paar Seiten anlegen z.B. so:
-root (weiterleitung auf Home
  -HOME
  -Seite2
  -...
    • Im Templates Modul ein neues Template auf root anlegen (root klicken New>Template)
    • Das neu erstellte (NEW_SITE) im Modus Info/Modify bearbeiten
    • besseren Namen vergeben (z.B. main.tmpl)
  • Wichtige Standard Templates einbinden. Welche hängt von der Art des Layouts ab nähere Infos gibts unter: Typo3 - Static Templates
    • Früher (Tabellenlayout) Content(Default) und cSet(default) bzw. cSetStylesheets aus der Tabelle Include static
    • Heute (CSS-Layout) css_styled_content (den zuerst installieren, liegt in Available Extensions to install) und css_styled_IMGTEXT (wird in Typo3 V4 integriert sein.)
  • Setup im Haupttemplate am Beispiel CSS-Layout
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template/css/main.css
page.10 = TEMPLATE
page.10{
   template = FILE
   template.file = fileadmin/template/main.html
 
   ### Subparts ansprechen ###
   workOnSubpart = DOCUMENT_BODY
      
# Hauptinhalt
   subparts.CONTENT < styles.content.get
   subparts.CONTENT.wrap = <div class="content"> | </div>   

   #Inhalt rechts
   subparts.CONTENT_RIGHT < styles.content.getRight
   subparts.CONTENT_RIGHT.wrap = <div class="content_right"> | </div>

   ### Hauptnavigation ###
   subparts.NAVI < temp.navi_vGmenu
 }
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Typo3_-_HTML-Templates&oldid=18439“