Typo3 - HTML-Templates: Unterschied zwischen den Versionen
Aus Wikizone
(Templates mit HTML - Vorlagen erstellen) |
|||
| Zeile 56: | Zeile 56: | ||
* Im Backend bei Templates ein neues Template erstellen: | * Im Backend bei Templates ein neues Template erstellen: | ||
** Am besten erst mal ein paar Seiten anlegen z.B. so: | ** Am besten erst mal ein paar Seiten anlegen z.B. so: | ||
| + | |||
| + | <pre> | ||
-root (weiterleitung auf Home | -root (weiterleitung auf Home | ||
| − | |||
-HOME | -HOME | ||
| − | |||
-Seite2 | -Seite2 | ||
| + | -... | ||
| + | </pre> | ||
| − | |||
** Im Templates Modul ein neues Template auf root anlegen (root klicken New>Template) | ** Im Templates Modul ein neues Template auf root anlegen (root klicken New>Template) | ||
** Das neu erstellte (NEW_SITE) im Modus Info/Modify bearbeiten | ** Das neu erstellte (NEW_SITE) im Modus Info/Modify bearbeiten | ||
| Zeile 71: | Zeile 72: | ||
* Setup im Haupttemplate am Beispiel CSS-Layout | * 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> | ||
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
}
