RSS | Impressum | Sitemap |
Profi-Ranking Suchmaschinenoptimierung

SEO Marketing Blog

.... googeln bis der Arzt kommt

Templates sind die Grundlage des Erscheinungsbildes einer dynamischen Webseite. Template Erstellung ist manchmal einfach als man denkt – TemplaVoila! macht das Erstellen eines Templates aus einer HTML-Seite zum Kinderspiel.

Templating mit TYPO3 und TemplaVoila!

Nachdem ich das letzte Mal über Quellcodeoptimierung mit TYPO3 geschrieben habe, ist es eigentlich notwendig ein wenig darauf einzugehen, woher der Layout-Quellcode, den TYPO3 ausgibt überhaupt kommt.

Es geht heute also um Templating. Das ist die erste Hürde nach der Installation, die die meisten Einsteiger nehmen müssen – denn was nutzen tolle Inhalte, wenn sie nicht angezeigt werden. Hier möchte ich zeigen, dass es eigentlich garnicht schwer ist, ein TYPO3 Template zu erstellen – verwenden werde ich die Extension »TemplaVoila!« in der aktuellen Version 1.3.3 da sie das Erstellen zu einem intuitiven Prozess werden lässt.

Die Dateien, die ich hier verwende, habe ich an den Post als zip angehängt – somit kann jeder, der eine TYPO3 Installation hinbekommt, die Schritte gerne nachvollziehen. Es bietet sich natürlich auch an, mit den eigenen Dateien zu arbeiten.

Ich beginne mit einer völlig frischen TYPO3 Installation – es sind also (noch) keinerlei Plugins installiert, außer TemplaVoila! und die deutschen Sprachdateien, da ich mich in diesem Artikel nicht mit der Installation einer Extension auseinandersetzen möchte. Vermutlich werde ich diese Installation mit diesem Template jedoch in späteren Artikeln aufgreifen und darauf aufbauend weiter Plugins installieren.

Template Dateien hochladen
Wir beginnen damit im Hauptordner einen Ordner »templates« mit dem Fileadmin (Dateiliste) anzulegen, in dem unsere Template-Dateien gespeichert werden. Man kann diesen Ordner natürlich auch per FTP im Verzeichnis fileadmin erzeugen. Dort hinein laden wir jetzt unsere Templatedateien, entweder über den Dateimanager oder über FTP.

TemplaVoila! Wizzard starten
Wir wechseln in der Hauptnavigation des Admin-Frames auf TemplaVoila! und wählen rechts »Start Wizard now!«

TemplaVoila! zeigt nun die HTML-Dateien an, die wir im fileadmin liegen haben, wer mit meinem Package arbeitet hat nur eines: main.html

Dieses kann man sich jetzt in einer Vorschau anzeigen lassen oder direkt auf »Choose as Template« klicken.

Einstellungen
Screenshot
TemplaVoila! zeigt uns nun (bei Choose as Template), wie die HTML-Datei ausschaut und fragt noch Site-Name, URL und User. Die URL angabe ist freiwillig, einen Sitename und User muss man wählen. Achtung: Der User wird mit dem Passwort password angelegt.

Bestätigt man das, gelangt man auf eine Seite, auf der nur ein animiertes Gif zu sehen ist, das schon mal einen Ausschnitt des Mappingprozesses zeigt. Hier kann man nur auf Start the mapping prozess klicken.

Mapping der Header-Teile:
Screenshot 1
Screenshot 2
Nun wählen wir aus den Tabs, die auf der darauf folgenden Seite zu sehen sind “Header Teile” aus. Das sind die Teile, die im head-Bereich eingebunden werden sollen. Nicht alles sollte ausgewählt werden. Interessant sind hier vor allem Stylesheets und favicons, sofern vorhanden. Da ich keines erstellt habe (es aber in der html-Vorlage vorgesehen habe) mache ich den Hacken in dieser Box weg – wer ein favicon in den Ordner legt, kann das natürlich so lassen. Wie der Warnhinweis schon sagt muss man danach auf “set” drücken.

Mapping des Bodys
Screenshot
Nun gehen wir auf das Tab “Mapping” und stellen fest, dass auch hier schon einiges eingetragen ist.
Standardmäßig wurde das body-tag bereits als root ausgewählt, denn der Bereich darin stellt ja den Hauptteil unserer Webseite dar.

Wir mappen jetzt ersteinmal die “Main Content Area” indem wir daneben auf “Map” klicken:
Zum Mappen gibt es 2 Modi, den Source-Mode und den Visual-Mode, je nach Vorlage ist der eine oder andere sinnvoller. Schaut euch auf jeden Fall mal beide an. Nun wählen wir das Element aus, in dem unsere Texte erscheinen sollen. Das ist bei mir das div mit der ID content. Dafür einfach auf die Markierung “DIV” klicken. Screenshot

Jetzt möchte TemplaVoila!, dass man auswählt, wie es mappen soll (Inner, Outer, Attribut – davon ist aber aktuell nur Inner verfügbar) – hier klicken wir auf set – wir wollen das div sowieso nicht ändern. Screenshot

Ähnlich verfahren wir beim Mappen des Menüs:
Wir klicken neben dem MainMenu auf Map, wählen die unorderd list mit der klasse menu aus – allerdings wählen wir dann nicht inner sondern, wie bereits vorgeschlagen outer als mapping typ und sagen “set”.

Da ich kein Submenü vorgesehen habe, brauchen wir es auch nicht zu mappen. Das würde ansonsten genauso funktionieren.

Jetzt klicken wir auf “Save and Return”. Wir gelangen auf eine Seite, auf der uns der Wizzard erklärt, wie man die Header Teile Mappen kann/soll/muss – aber das haben wir schon gemacht. Trotzdem auf “Select Header Parts” klicken, selbige nochmal prüfen und dann auf “Safe and Return” klicken.

TypoScript zur Erzeugung des Menüs:
Nun ist TemplaVoila sogar so nett und will uns die Arbeit abnehmen, das Menü selbst in TYPOScript schreiben zu müssen. Es erkennt bei dem von mir erstellen Menü den Aufbau und erstellt das passende TYPOScript:

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul>|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
  allWrap = <li>|</li>
}

wer noch ein Untermenü hat kann z.B. noch folgendes machen:

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul>|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
  allWrap = <li>|</li>
}
lib.mainMenu.2 = TMENU
lib.mainMenu.2.wrap = <ul>|</ul>
lib.mainMenu.2.NO {
  allWrap = <li>|</li>
}

man sollte es sich aber auf keinen Fall nehmen lassen das Title-Attribut noch zu füllen:

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul>|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
  allWrap = <li>|</li>
}
lib.mainMenu.1.NO.ATagTitle.field = title

Wer mehr zum TypoScript für Menüs wissen möchte sollte sich den Artikel TypoScript: Eine Einführung – Teil 3 von Thomas anschauen, dort wird das sehr gut beschrieben.

Hat man das angepasst, klickt man auf “Menu TypoScript Code”.
Das selbe würde auch mit dem Submenü passieren, hätten wir denn eins angelegt – so erhallten wir nur die Information, dass wir keines angelegt haben und der Prozess deshalb übersprungen wird. Zwei Klicks noch: auf Next und Weiter – dann können wir uns die Seite anschauen, die der Zauberer für uns erstellt hat.

Was ist passiert?
Erstellt wurde zusätzlich zum Template eine Seitenstruktur mit Unterseiten, sodass wir schonmal Beispiel-Inhalte haben und unser Template testen können.

Die Dateien zum mitmachen
Die Dateien, die ich verwendet habe gibt es hier. Es handelt sich um ein Zoom-Layout, es passt sich also der Schriftgröße an – wenn man hineinzoomt gibt es nicht so schnell hässliche Umbrüche. Der Content ist oben und wir haben ein Accessibility Menü. Somit sind grundlegende Elemente sowohl für SEO als auch für eine behindertengerechte Seite vorhanden – ich habe das Template aber nur im IE und dem Firefox getestet und die Grafiken habe ich in ~1/4 Stunde erstellt. Die CSS-Datei deckt momentan nur die für das Layout wichtigen Elemente ab, eine ordentliche Seite im Echtbetrieb würde ich so nicht betreiben wollen, doch darum geht es hierbei ja auch nicht.

Na denne…
Damit sind wir auch schon am Ende dieses Artikels angelangt – wir haben das zuvor erstellte HTML-Dokument in ein Template für TYPO3 verwandelt, der “Zauberer” hat uns eine Seitenstrucktur angelegt, mit der wir unser Template schonmal in Aktion betrachten können.

Einige für SEO Zwecke notwendige Veränderungen habe ich hier nicht berücksichtigt – insbesondere was die header-Daten angeht lohnt es sich noch einen Blick in Thomas Artikel »Die wichtigsten TYPO3 SEO Einstellungen« zu werfen.

Das TypoScript kann man übrigens auch ohne Probleme so verändern, wie man das von TYPO3 ohne TemplaVoila! gewöhnt ist.

Nachtrag:
Weitergehend beschäftigt sich Thomas in seinen Artikeln unter anderem auch mit Flexible Contents, einem weiteren wichtigen Vorteil von TemplaVoila! außerdem bietet er zum Mapping Wink-Video-Tutorials.


Andere Beiträge mit ähnlichen Inhalten, die Dich evtl. auch interessieren könnten:


Der Artikel " Templating mit TYPO3 und TemplaVoila! " enthält 1135 Wörter.

Artikel mit verwandten Tags (Keywords, Suchbegriffe)
Tags: , ,


Am 09.07.07, 09:03 in Typo3
von Xel veröffentlicht. RSS Feed für Kommentare.
Du kannst hier kommentieren oder hier per Trackback
von Deinem Blog aus "verewigen".
· Gelesen: 33560 · heute: 4


13 Kommentare zu "Templating mit TYPO3 und TemplaVoila!"

  • 1. Xel

    So – jetzt hab ich den Artikel rausgehauen.

    Nachdem ich ihn eigentlich letzte Nacht fertig bekommen wollte, bin ich erst um 4:45 heute früh vom Computer aufgestanden, um mir noch 2 Stunden Schlaf zu gönnen und habe den Artikel vorsichtshaber erst jetzt, nachdem ich ihn nochmal grob Korrektur gelesen habe online gestellt.

    Ich hoffe ihn trotzdem einigermaßen ordentlich und verständlich hinbekommen zu haben – ansonsten: Einfach nachfragen ;-)

    Der Artikel ” Templating mit TYPO3 und TemplaVoila! ” enthält 1111 Wörter.

    Auch nicht schlecht, war keine Absicht – Lokalrunde!

  • Schön gemacht. Und ich werde das Thema auch nochmal aufgreifen, wenn ich mit meiner TypoScript-Serie durch bin.

    Videos sind schon in Vorbereitung :-)

  • @ Xel

    cool, ich bin begeistert, wie Du loslegst (nicht nur mengenmässig, sondern auch qualitativ & thematisch) – 1111 Wörter & dann noch am 09-ten Juli um 09:09 dazu kommentieren ist schon ein Spitzen-Timing …

    Hoffe die Nachteinlage verhagelt Dir nicht den Montag ;-)

  • 4. Xel

    Hab auch drüber nachgedacht mit Wink ein kleines Tutorial Video zu machen, das war heut nacht aber nicht mehr drin ;-)

  • 5. Xel

    Hoffe die Nachteinlage verhagelt Dir nicht den Montag ;-)

    ach was – ich hab nur Probleme den Spamschutz richtig auszufüllen, 3+6 ähm…36? (muss man das eigentlich, wenn man eingeloggt ist? noch garnicht ausprobiert obs auch ohne geht…) und bei Statistik nicht einzuschlafen…

    Das mit 09:09 am 9. ist klasse ;-) ist mir nicht aufgefallen… lauter schnapszahlen und dabei trink ich doch garnix…

    ich bin begeistert, wie Du loslegst (nicht nur mengenmässig, sondern auch qualitativ & thematisch)

    Das muss ich nur noch so durchhalten, dann bin ich auch zufrieden ;-)

  • […] Wenn Ihr Fragen oder Anmerkungen habt, könnt Ihr die in der Kommentarfunktion loswerden. Dauf das Thema “TemplaVoila” geht auch Xel im SEO Marketing Blog ein. Tags: TYPO3, anleitung, templavoila –> […]

  • 7. Jonas

    Hallo Leute

    Ich habe ein kleines Problem ich habe alles gemappt und bin mit meiner seite fertig das 1. Problem ist jetzt aber wenn ich im html File etwas ändere muss ich das mapping ja updaten und ich voll fergessen wie das geht…:))))
    2.Problem was muss ich im Typoscript angeben wenn der Internet Explorer die seite Linksbündig anzeigt und der Firefox schön wie gewollt in der Mitte….??

    vielen Dank

    Grüsse Jonas

  • 8. alex

    wirklich tolles tutorial ! genau danach hab ich gesucht … einfach erklärt ! klasse !

  • […] Version heruntergeladen, in mein Typo3 eingebunden und nach folgender Anleitung installiert. Templating mit TYPO3 und TemplaVoila! SEO Marketing Blog Mein erstes Problem, es wird folgende Fehlermeldung angezeigt: TemplaVoila ERROR: Couldn't find a […]

  • danke, da sucht man Stunden im Inet und hier steht die Lösung – danke

  • 11. Furiousdragon

    Guter verständlicher Beitrag, leider sind die Screenshot Links nicht mehr erreichbar…

  • 12. Frank

    @ Furiousdragon

    stimmt, Danke für den Hinweis – leider hat der Autor des Artikels seine als Bildquelle verlinkte Domain anscheinend nicht mehr weiter geführt & ich hab nun fast 4 Jahre später auch keinen Kontakt mehr :-(

  • 13. Felix

    Hallo

    vielen Dank für die Anleitung. Nur – ohne die Bilder ist die Seite nur wenig verständlich :(


Deine Ideen zum Artikel: Templating mit TYPO3 und TemplaVoila!

Kommerzielle Werbung in Kommentaren ist diesem SEO Blog nicht erwünscht!


Entspannen Sie ... wir kümmern uns darum!
Profitieren auch Sie von unserem Google Ranking Know-How!
» Profi Ranking - Suchmaschinenoptimierung «