Template: Beispiel1

Template : Beispiel1 Funktionsumfang

vorbereitete HTML-Vorlage notwendige CSS-Dateien notwendige Grafiken und Schriften horizontale Linkliste vertikale Linkliste horizontales Textmen vertikales Textmen horizontales grafisches Men vertikales grafisches Men Infobox Infobox ausblenden Fuzeile

Backend-User Login Backend fr Redakteure vorbereitet RTE-Editor konfiguriert Logo Mehrfache Templateauswahl Broadcrumb Sitemap Mail-/Kontaktformular Suchformular Loginformular (Frontend) ImageLightBoxV2

Voraussetzungen:
Eine installierte Typo3 Instanz und ein fertig konfiguriertes Backend. Dateien unter: http://typo3-fortbildung.1start.at

Weitere Schritte:
1. Eine fertige statische HTML-Seite erstellen (HTML-Datei, CSS-Datei/en und Grafiken) 2. Die HTML-Datei mit Subparts und Marker versehen (fr Typo3 vorbereiten) 3. Die Seitenstruktur im Backend erstellen und mit Inhalten fllen 4. Verweis festlegen 5. Im Backend eine Ordnerstruktur erstellen 6. Die notwendigen Dateien hochladen 7. Ein Template (mit css_styled_content) im Backend festlegen 8. Webseite mit TypoScript konfigurieren 9. Webseite berprfen

Seite 2 von 8

1. Statische HTML-Seite:

Die CSS-Datei und die Grafiken sind hier nicht beschrieben.

2. Angepasste HTML-Seite fr Typo3:

Die statische HTML-Seite wurde mit Subparts und Markern versehen.

CMS Typo3

Beispiel1 Version 8.3

typo3-fortbildung.1start.at Herbert Muigg

Seite 3 von 8

Der Quellcode der angepassten HTML-Seite:

3. Die Seitenstruktur (und die Inhalte) im Backend erstellen:

4. Verweis festlegen
Den Dateityp der Seite www.mydomain.at auf Verweis ndern. Im gleichen Fenster jene Seite whlen, die als Startseite festgelegt werden soll (z.B. News).

CMS Typo3

Beispiel1 Version 8.3

typo3-fortbildung.1start.at Herbert Muigg

Seite 4 von 8

5. Die Ordnerstruktur im Backend erstellen: 6. Die Dateien hochladen:

fileadmin templates www.mydomain.at template1.html css content.css template1.css fonts ass95-0.ttf img logo1.jpg logo2.jpg menue.jpg uploads

7. Template mit css_styled_content in der Seite www.mydomain erstellen. 8. Webseite mit TypoScript konfigurieren:
Hinweis: Rot geschriebener Code muss evtl. individuell angepasst werden, damit das Frontend korrekt dargestellt wird!
# --- ALLGEMEINE Konfigurationen --- # config { # --- AdminPanel einschalten: admPanel = 1 # --- eMail-Adressen vor Spam schtzen: spamProtectEmailAddresses = 1 spamProtectEmailAddresses_atSubst = (at) # --- Deklaration der HTML Dokumenttypdefinition (DTD) # als XHTML transistional: # Doctype auf XHTML 1.0 Transitional einstellen doctype = xhtml_trans # Ausgabe von XHTML aktivieren xhtml_cleaning = all # XML Prolog unterdrcken, weil der Internet-Explorer ansonsten # in den nicht standardkonformen Quirks-Modus wechselt # xmlprologue = none # --- Cache Periode setzen (7 Tage: 604800): cache_period = 604800 # --- Spracheinstellungen konfigurieren: htmlTag_langKey = de #metaCharset = iso-8859-1 language = de locale_all = de_DE }
CMS Typo3 Beispiel1 Version 8.3 typo3-fortbildung.1start.at Herbert Muigg

Seite 5 von 8

# --- MARKER & SUBPART Konfiguration --- # # --- Das Logo konfigurieren: // Variable fr das Logo vom Typ Bild festlegen temp.logo = IMAGE temp.logo { // Logo als Datei festlegen und Pfad der Datei angeben file = fileadmin/templates/www.mydomain.at/img/logo1.jpg // Das Logo verlinken uf die Seite mit der PID = 1 stdWrap.typolink.parameter = 1 // Den Alternativtext festlegen alttext = www.mydomain.at #Zurck zur Startseite... } # --- Die oberern TopLinks konfigurieren: // Variable fr die oberen Links vom Typ hierarchisches Men festlegen temp.oberenLinks = HMENU temp.oberenLinks { // Festlegen, dass die Links aus der Seitenstruktur geholt werden sollen special = directory // Alle Unterseiten der Seite mit der PID = 4 werden dargestellt special.value = 4 // Variable Logo als Bild festlegen #stdWrap.wrap = <ul>|</ul> // Die erste Menebene als Textmen definieren 1 = TMENU 1 { // Ziel des Links ist eine neue Seite target = _blank // Bei Mausklick keine Umrandung anzeigen noBlur = 1 // Das gesamte horizontale Men mit <ul> umschlieen wrap = <ul>|</ul> // Den Normalzustand der Mens aktivieren NO = 1 // Umschliet den Menpunkt im Normalzustand und deren Unterelemente mit <li> NO.wrapItemAndSub = <li>|</li> // Setzt die Beschreibung / den Seitentitel fr den Menpunkt im Normalzustand NO.ATagTitle.field = description // title // Den aktivierten Zustand der Mens aktivieren ACT = 1 // Verhindert das Anzeigen eines Rahmens bei Mausklick ACT.doNotLinkIt = 1 // Umschliet den aktiven Menpunkt und deren Unterelemente mit <li> und einer Klasse ACT.wrapItemAndSub = <li class="akt">|</li> // Setzt die Beschreibung / den Seitentitel fr den aktiven Menpunkt ACT.ATagTitle.field = description // title } } # --- Den Pfad konfigurieren: // Variable fr den Pfad vom Typ hierarchisches Men festlegen temp.pfad = HMENU temp.pfad { // Dem Pfad wird ein Text und Leerzeichen vorangestellt wrap = Sie befinden sich hier:&nbsp;| // Festlegen, dass der Pfad aus der Seitenstruktur geholt werden sollen
CMS Typo3 Beispiel1 Version 8.3 typo3-fortbildung.1start.at Herbert Muigg

Seite 6 von 8

special = rootline // Festlegen der Anfangs- und Endebene (Rootseite ist Ebene 0) special.range = 2|-1 // Die erste Menebene als Textmen definieren 1 = TMENU // Den Normalzustand der Mens aktivieren 1.NO = 1 // Die Menpunkte werden mit Leerzeichen umschlossen 1.NO.linkWrap = &nbsp;|&nbsp;> |*| &nbsp;|&nbsp;> |*| &nbsp;|&nbsp;&nbsp;&nbsp; } # --- Das Men konfigurieren: // Variable fr das Men vom Typ hierarchisches Men festlegen temp.menue = HMENU temp.menue { #special = directory #special.value = 3 // Alle Seiten unterhalb der Ebene 1 anzeigen entryLevel = 1 // Die erste Menebene als Textmen definieren 1 = TMENU // Alle Untermenpunkte anzeigen 1.expAll = 1 // Den Normalzustand der Mens aktivieren 1.NO = 1 1.NO { // Umschliet den Menpunkt im Normalzustand mit <br> linkWrap = <br> | <br> } // Die zweite Menebene als Textmen definieren 2 = TMENU 2.NO = 1 2.NO { // Umschliet den Menpunkt im Normalzustand mit Leerzeichen und <br> linkWrap = &nbsp;&nbsp; | <br> } // Die dritte Menebene als Textmen definieren 3 = TMENU 3.NO = 1 3.NO { linkWrap = &nbsp;&nbsp;&nbsp;&nbsp; - | <br> } } # --- Den Inhalt konfigurieren: // Variable fr den Inhalt vom Typ Inhalt festlegen temp.inhalt = CONTENT temp.inhalt { // Inhalte aus der Tabelle tt_content auslesen table = tt_content // Inhalt sortiert wie im Backend eingetragen select.orderBy = sorting // Inhalte aus der Spalte Normal auslesen select.where = colPos = 0 }

CMS Typo3

Beispiel1 Version 8.3

typo3-fortbildung.1start.at Herbert Muigg

Seite 7 von 8

# --- Die Infobox konfigurieren: // Variable fr die Infobox vom Typ Datensatz festlegen temp.infobox = RECORDS temp.infobox { // Inhalte aus der Tabelle tt_content auslesen tables = tt_content // Inhalte mit der Datensatznummer 2 auslesen source = 2 //Normalerweise kann ein Eintrag nicht ausgewhlt werden, wenn seine bergeordnete Seite (pid) fr den //Websitebesucher nicht zugnglich ist. Diese Option deaktiviert diese Kontrolle. dontCheckPid = 1 } # --- Die Fuzeile konfigurieren: // Variable fr die Fuzeile vom Typ Text festlegen temp.fusszeile = TEXT temp.fusszeile { // Wert des Textes festlegen value = Beispielseite | Herbert Muigg 2008 | www.mydomain.at } # --- SEITEN Konfiguration --- # // Variable fr das Seiten-Objekt festlegen seite = PAGE seite { // Den Seitentyp festlegen z.B. 99 fr Drucken typeNum = 0 // Den Tag <body> definieren bodyTag = // Metadaten im Headerbereich definieren meta.DESCRIPTION = Beispielseite meta.KEYWORDS = Typo3, Beispielseite, Inhaltselemente, TypoScript meta.TITLE = Beispielseite // CSS-Datei einbinden includeCSS.layout = fileadmin/templates/www.mydomain.at/css/template1.css // Ein Objekt vom Typ TEMPLATE (HTML-Vorlage) festlegen 10 = TEMPLATE 10 { // Template (HTML-Vorlage) ist vom Typ Datei template = FILE // HTML-Datei einbilden template.file = fileadmin/templates/www.mydomain.at/template1.html // Festlegen, welcher Bereich der HTML-Datei verwendet wird (ist in der HTML-Datei definiert) workOnSubpart = DOCUMENT_BODY // Dem Marker _TOPLINK eine oben definierte Variable zuweisen marks._TOPLINKS < temp.oberenLinks marks._LOGO < temp.logo marks._TOPPFAD < temp.pfad marks._MENU < temp.menue marks._CONTENT < temp.inhalt marks._INFOBOX < temp.infobox // Dem Subpart _FOOTER eine oben definierte Variable zuweisen subparts._FOOTER < temp.fusszeile } }

CMS Typo3

Beispiel1 Version 8.3

typo3-fortbildung.1start.at Herbert Muigg

Seite 8 von 8

9. Webseite berprfen:
berprfen Sie die Webseite auf ihre Funktionalitt. Senden Sie auch ein Mail mit jedem Mailformular. berprfen Sie den Quellcode der Dateien auf diverse Fehler: http://validator.w3.org (HTML, CSS, tote Links) http://www.barrierecheck.net http://imergo.de

CMS Typo3

Beispiel1 Version 8.3

typo3-fortbildung.1start.at Herbert Muigg