Bereich für das Menü -

Bereich für den Hauptinhalt der Seite .. _Erzeugen-von-Seiten-und-Inhalt: Erzeugen von Seiten und Inhalt ------------------------------ Jede Seite im Pagetree wird später als Menüeintrag dargestellt. Der Seiteninhalt wird für die jeweilige Seite im div-Tag mit der Klasse content angezeigt. Eine Seite wird erzeugt, indem man im Page-Modul auf ein Icon des Pagetrees klickt. Im erscheinenden Kontext-Menü wählt man den Eintrag „New“. Ein Wizard begleitet beim Erstellen der Seite. Nun kann in jeder Seite auch schon Seiteninhalt erstellt werden. .. _Erstellen-eines-TYPOSCRIPT-Templates: Erstellen eines TYPOSCRIPT-Templates ------------------------------------ Nach erfolgreiches Installation von TYPO3 meldet man sich das erste mal im Backend ein. `http://localhost/typo3demo `_ |img-3| *Abbildung 3: Login im Backend* |img-4| *Abbildung 4: Das Backend* Als erstes muss das HTML-Template in den fileadmin-Ordner von TYPO3 geladen werden, damit das TYPOSCRIPT-Template damit arbeiten kann. Darum legen wir als erstes einen Ordner unter fileadmin an und uploaden alle Dateien des HTML-Templates. |img-5| *Abbildung 5: Das HTML-Template in TYPO3* Nun muss das TYPOSCRIPT-Template erstellt und bearbeitet werden. Erstellt wird das Template im Template-Modul. Nach dem Klick auf den Button „Create template for a new site“ kann man dieses auch schon bearbeiten. Im Setup-Feld des Templates wird nun folgender TYPOSCRIPT-Code geschrieben: \# Auto-Parser-Konfiguration: plugin { tx\_automaketemplate\_pi1 { \# Auslesen des HTML-Template: content = FILE content.file = fileadmin/template/template.html \# Hier wird definiert, welche Teil des HTMLs markiert werden elements { \# um den body-Tag BODY.all = 1 BODY.all.subpartMarker = DOCUMENT\_BODY \# um den head-Tag HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT\_HEADER HEAD.rmTagSections = title \# um den ol-tag mit id=“menu“ OL.id.menu = 1 OL.id.menu.subpartMarker = NAVIGATION \# um das div mit class=“content“ DIV.class.content = 1 DIV.class.content.subpartMarker = CONTENT } \# Pfade mit richtigen Präfix einrichten, wichtig beim Einbinden von CSS oder Grafiken: relPathPrefix = fileadmin/template/ } } temp.menu\_1 = HMENU temp.menu\_1.1 = TMENU temp.menu\_1.1 { \# Standardmäßiges Menü-Listenelement NO.allWrap = NO.stdWrap.htmlSpecialChars = 1 \# Aktives Menü-Listenelement ACT = 1 ACT.allWrap = ACT.stdWrap.htmlSpecialChars = 1 } temp.mainTemplate = TEMPLATE temp.mainTemplate { template =< plugin.tx\_automaketemplate\_pi1 workOnSubpart = DOCUMENT\_BODY subparts.NAVIGATION < temp.menu\_1 subparts.CONTENT < styles.content.get } temp.headTemplate = TEMPLATE temp.headTemplate { template =< plugin.tx\_automaketemplate\_pi1 workOnSubpart = DOCUMENT\_HEADER } page = PAGE page { typeNum = 0 config.doctype = xhtml\_trans 10 < temp.mainTemplate headerData.10 < temp.headTemplate } .. _Installation-der-Extensions: Installation der Extensions --------------------------- Das obige TYPOSCRIPT-Template wird noch nicht funktionieren, da die Extension „automaketemplate“ noch nicht installiert ist, welche sich um das Parsen und Ersetzen von Textpassagen kümmert. Dazu benützt man das Ext-Manager-Modul und wählt in der DropDown-Liste „Import extensions“. Mit dem Klick auf den „Durchsuchen...“-Button wählt man das zuvor von `www.typo3.org/extensions `_ heruntergeladene t3x-File „automaketemplate“. Der Button „Upload extension file“ bringt uns zum nächsten Schritt, dem Installieren der Extension und dem darauffolgenden Updaten der Datenbank. Nun muss man nur mehr die Extensions in das TYPOSCRIPT-Template einbinden. Das wird durch folgenden Schritte bewerkstelligt: - Öffnen des TYPOSCRIPT-Templates - Unter „Include static (from extensions)“ das css\_styled\_content auswählen |img-6| Zur Sicherheit wird der Cache noch geleert und schon wird eine dynamische Homepage angezeigt. .. _img-7-Das-Konzept: |img-7| Das Konzept ------------------- Es gibt 3 Rollen: - Designer entwickelt das Design und erstellt HTML-Template mit vorgesehenen Bereichen für dynamischen Inhalt - Entwickler kümmert sich um TYPO3-Installation, TYPOSCRIPT-Template und evtl. Extensionprogrammierung - Redakteur Erfasst laufend Beiträge und betreut die Website .. _Ablauf: Ablauf ------ Auftraggeber redet mit Designer über Grafisches und Inhaltliches Designer redet mit dem Entwickler über Machbarkeit Evtl. Neuverhandlung mit Kunden über nicht machbare Features Entwickler schätzt Aufwand Providersuche und Entscheidung, All-Inklusive Provider oder normaler Provider Designer erstellt Design, markiert dynamische Inhalte mit DIVs Entwickler ersetzt mittels AutoMakeTemplate DIVs mit dynamischen Inhalt Entwickler installiert Extensions Redakteur bindet Extensions als Content ein, erfasst Datensätze, laufende Betreuung der Website .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :id: Grafik1 .. :name: Grafik1 .. :width: 100% .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :id: Grafik4 .. :name: Grafik4 .. :width: 100% .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :id: Grafik2 .. :name: Grafik2 .. :width: 100% .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :id: Grafik3 .. :name: Grafik3 .. :width: 100% .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :id: Grafik5 .. :name: Grafik5 .. :width: 100% .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 365 .. :id: Grafik6 .. :name: Grafik6 .. :width: 642 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 246 .. :id: Grafik7 .. :name: Grafik7 .. :width: 285