Einführung in CMS Templates

Home

CMS Templates

Schauen wir uns doch mal CMS Templates an und wie wir damit arbeiten. In dieser einführenden Übersicht behandeln wir Fragen, die die Auswahl eines solchen Templates betreffen.

Wir verwenden hier als CMS "Joomla", da es die in der Welt des CMS das beste System für graphische Oberflächen (Templates, Themes) bereitstellt, es sei denn, Sie wollen großflächige Kunstwerke abbilden. Da wäre dann CMS-Made Simple die bessere Wahl für die Anfangsarbeiten. Allerdings ist Joomla das mächtigere CMS, d.h. Sie werden einen weiteren Anwendungsraum dafür finden. Es gibt tausende von Joomla Templates, vielleicht an die 5000. Um das Arbeiten mit Templates zu lernen ist Joomla erste Sahne, und wenn Sie mal mit einem anderen CMS arbeiten, werden Sie sich fragen, warum diese so spärlich ausgestattet sind.

CMS Design mit Templates

Denken Sie daran: ein Template macht Ihnen einfach Ihr Leben leichter. Sie müssen ihm nicht sklavisch folgen, wenn Sie das nicht wollen. Das Template gibt Ihnen lediglich ein Gerüst, das Sie belassen können, wie es ist, alsdann pflegen Sie Ihren Inhalt ein und ganz schnell steht Ihre Webseite fertig im Netz. Oder aber Sie ändern so ungefähr alles nach Ihrem eigenen Geschmack.

Farben, Positionen, Layout, Menüs, Modules - Sie können alles ändern. Suchen Sie das Template zunächst danach aus, was Ihnen besonders daran gefällt: vielleicht das grobe Layout oder die Menüpositionen. Anschließend können Sie alles ändern, besonders das ‚Aussehen'. Sie können alles entfernen und haben dann eine leere Seite für ein künstlerisches Layout (wenn Sie das wollen) oder Sie verändern lediglich ein paar Farben und Graphiken. Das nützlichste in jedem Template ist vermutlich die Menüwahl, denn sie bestimmt häufig, wie es weitergeht.

Bei einigen CMS ist es möglich, für jede einzelne Seite ein eigenes Template zu benutzen. Normalerweise machen wir das aber nicht, sondern benutzen lediglich eine leicht verändert Version des Templates für verschiedene Bereiche der Webseite. Die gebräuchlichsten Anwendungen hierfür sind:

Sie behalten das Template bei, führen aber kleinere Veränderungen für verschiedene Kategorien ein.

Bei einer Gruppenseite wollen die einzelnen Abteilungen womöglich einen deutlich erkennbaren Stil ihres Bereiches.

Manche Anbieter von Templates unterstützen dies, indem sie verschiedene Farbvarianten anbieten. Um diese Möglichkeit zu nutzen, müssen Sie Ihren Templates verschiedene Namen geben, obwohl sie mit Ausnahme der Farbeinstellung identisch sind. Sie könnten sie einfach durchnummerieren: z.B. ColorMatic1, ColorMatic2 etc.

Menühauptklassen

Die Wahl des Menütyps sowie seine Position sind wesentliche Entscheidungen und mögen sehr wohl der Grund für die Wahl eines bestimmten Templates sein. Es beeinflusst alles: die Architektur, die ‚Usability' (Benutzbarkeit), die Erscheinung und die Struktur der Seite und ist so ein grundlegender Teil des Entwurfsprozesses. Menüs fallen im Allgemeinen in folgende Gruppen:

Eine obere horizontale Navigationsleiste
Sieht immer gut aus. Und ist auch gut, wenn Sie nur einige Hauptpunkte haben, denn viel mehr geht da nicht; wenn sie ‚Usability' nicht so groß schreiben, kann es aber ein ‚Drop-down'-Menü haben.
Vertikales Menü in der linken Seitenleiste
Aus Gründen der ‚Usability' das Beste; kann eine beliebige Menge an Menüeinträgen beinhalten, da es normalerweise keine Rolle spielt, wie weit nach unten eine solche Seite geht. Falls Sie's kurz halten wollen, machen Sie das mit Flyout-Menüs.
Menüs in der rechten Seitenleiste
Diese sind etwas schwieriger, wenn Sie's richtig machen wollen, funktionieren aber besser, wenn Ihr Template eher visuelle Elemente benutzt. Dieses Layout betont eher den Hauptinhaltsbereich und ist u.U. besser für SEO.
Alles andere
Sie können überall Menüs haben. Allerdings vom Gesichtspunkt der Benutzerfreundlichkeit werden sie nicht ganz so gut sein, aber womöglich dem Fluss Ihres Designs besser folgen.

Sie können Templates ändern

Schauen Sie sich das Rockettheme Template "Versatility" an (

...und dann schauen Sie sich die Rugby Club Seite an, die ich gemacht habe:

...und dann schauen Sie sich ein Anwendungsbeispiel an:

Template Anleitungen (Tutorials)

Für einige gute Tutorials sehen Sie mal hier:

Template-Typen

Nach der Installation haben die meisten CMS so eine Art ‚Schachtel'-Look als Layout, weil nämlich das Standardtemplate so arbeitet. Es ist am einfachsten zu benutzen und der Look passt für die meisten Seiten eher als andere. Besonders geeignet ist es natürlich für Geschäftsseiten im Finanzsektor. Zu diesem Zweck werden Sie höchstwahrscheinlich helle und dunkle Grautöne, subtile Blautöne etc benutzen, vielleicht mit einer starken Kontrastfarbe, sparsam eingesetzt. Z.B.:

Erste Schritte in der Benutzung von Templates

Fangen Sie mit etwas Einfachem an. Finden Sie ein simples Template und basteln Sie damit Ihre Hauptseite plus etwas Inhalt für die Suchmaschinen. Natürlich müssen Sie SEO für CMS berücksichtigen, denn darauf gründen sich der Erfolg Ihrer Seite.

Ich mag es, auf Live-Seiten zu arbeiten, falls es nicht starke Gegengründe gibt. Bei einer neuen Seite macht das nämlich gar nichts. Wenn Sie ein so großartiges CMS wie Joomla oder Drupal nehmen, kann eigentlich nichts schief gehen. Selbst wenn Sie es schaffen, die gesamte Seite wegzufegen, können Sie doch innerhalb von zehn Minuten zu dem Zustand zurückkehren, bei dem Sie am morgen angefangen haben. Mit einem Wiedereinspielen Ihres Datenbankbackups.

Habe ich schon erwähnt, dass Sie regelmäßig Ihre Datenbank sichern sollten? Und zwar auf drei Arten:

Mit phpMyAdmin von Ihrem Provider aus
Mit einem Plugin für Ihr CMS, das die erforderlichen Aufgaben vom Backend Ihres CMS erledigt
Indem Sie einfach die Webseiten als normale Dateien speichern. Mit Ihrem Webbrowser!

Denken Sie daran: mit einem CMS gibt es keine Seiten auf Ihrer Webpräsenz - nur Textfelder in einer Datenbank plus den Ordner für Graphiken.

Sie müssen lediglich sicherstellen, dass die Hauptseite über einiges an gutem Inhalt verfügt und die Metadaten in Ordnung sind. Das ist alles. Dann können Sie nach Lust und Laune damit herumspielen. Suchmaschinen werden Sie dafür nicht ‚bestrafen', für das ständige Hinzufügen von Inhalt und neuen Seiten - die mögen das! Veränderungen spielen auch keine Rolle, Nachrichtenseiten sind jeden Tag anders und das schadet Ihnen auch nicht. Falls Sie noch keine Site Map angemeldet haben - und das würde ich in diesem Stadium noch nicht machen - dann werden die Suchmaschinen auch nicht meckern, wenn Sie was verändern oder wegschnippeln. Es ist natürlich immer eine gute Idee, Ihre Arbeit auf guter SEO aufzubauen, selbstverständlich, denn das ist die Grundlage für kommerziellen Erfolg. Lesen Sie mehr über SEO für CMS.

Das Ändern von Templates

Holen Sie sich eine Mitgliedschaft in einem Template Club. Laden Sie einige Templates runter (Sie kaufen diese nicht einzeln, die meisten Anbieter erheben eine vierteljährliche oder jährliche Gebühr und Sie kriegen so viele, wie Sie wollen.

Kopieren Sie das gesamte Paket und speichern Sie die Originale an sicherer Stelle. Arbeiten Sie niemals mit den Originalen!

Richten Sie Ihr FTP-Programm für die Seite ein, an der Sie arbeiten werden. Alternativ können Sie natürlich auch in Ihrem lokalen Netz (LAN) eine Entwicklerseite aufbauen. Sie können den XAMPP-Server auf einem anderen Rechner in Ihrem lokalen Netzwerk installieren, ebenso ein CMS und das Ganze als lokale ‚Internet'-Seite benutzen. Ein gut Teil der Entwicklungsarbeit wird so erledigt.

Wenn Sie auf einer Webseite mittels FTP arbeiten, dann richten Sie entsprechend die lokalen und die Netzordner in Ihrem FTP-Programm wie z.B. FilleZilla (empfohlen!) ein. Ändern Sie zuerst mal eine Farbe. Greifen Sie sich eine Hintergrundgraphik aus dem Menü und bearbeiten Sie es mit Ihrem Graphikprogramm. Kopieren Sie es via FTP auf Ihre Seite im Netz in das korrekte Verzeichnis und schauen Sie sich das Ergebnis an. Dieses Verfahren gibt Ihnen eine gute Vorstellung von dem, was da auf Sie wartet.

Achten Sie auf Datensicherung! Wenn das, was Sie da angestellt haben, Ihnen später nicht gefällt, können Sie so leicht zu einer früheren, passenden Version zurückkehren.

Joomla Templates verändern

Joomla Templates kommen als ZIP-Paket. Zunächst entpacken Sie das Ganze, um zu sehen, was da drin ist. Mit einem ‚großen' Template kommen Tutorials als PDF-Datei, Quellbilder und Zusatzmodule. Nichts davon muss auf die Internetseite.

Installieren Sie nur das ‚reine' Template. Natürlich könnten Sie das mit FTP hochladen, allerdings ist der einfachste Weg, es mit dem Joomla Backend zu tun. Das dauert ungefähr 2 Minuten und dann sehen Sie im Templatemanager Ihr neues Template. Nun wollen wir tapfer sein und machen das zum Standardtemplate. Wenn Sie sich jetzt Ihre Hauptseite ansehen, dann sollte sich hier das neue Layout zeigen.

Es gibt drei grundlegende Dinge, die wir ändern können, um dem Template ein neues Aussehen zu geben:

Bilder und Graphiken
CSS-Dateien
PHP-Master File

Bilder und Graphiken

Das sind alle visuellen, bildlichen Elemente ohne den Text. Einschließlich dem Logo im Kopfbereich, dem sog. Header, den Hintergrundbildern für die Menüs (im Format .png, .gif oder .jpg)

Die ersten Änderungen sollten Sie am Logo bzw. dem sonstigen Material im Header durchführen. Finden Sie das Logo (logo.png oder header.png ?) und überprüfen Sie seine genaue Größe und das Dateiformat. Es ist vielleicht 800x150px und im PNG-Format. Sie müssen nun also nur eine Graphik mit der selben Größe, dem selben Dateiformat und dem selben Namen erstellen und per FTP in das Bilderverzeichnis Ihrer Internetseite hochladen. Die Datei können Sie einfach überschreiben, solange Sie eine Sicherung zur Hand haben! Der Pfad dorthin sieht etwa wie folgt aus:

/public_html/templates/template-name/images/

Nun laden Sie Ihr Browserfenster neu (STRG+F5); manchmal müssen Sie auch noch zusätzlich den Cache leeren.

CSS-Dateien

Davon kann es mehr als eine geben. Einfache Templates haben vielleicht nur eine, die Schwergewichte nutzen möglicherweise zehn.

Wir wollen ein, zwei Farben ändern. Suchen Sie eine Zeile, die einen Hex-Code enthält wie #FF8000 und ändern Sie das. Notieren Sie sich die Originalfarbe! Ich verwende ein Tool dafür und könnte ohne dieses gar nicht arbeiten: ColSel 1.05 (

PHP-Datei

Die Masterfile für das Template, die das gesamte Layout kontrolliert, ist die index.php.

Womöglich müssen wir hier die Position eines Moduls verändern, aber abgesehen davon lassen wir hier alles, wie es ist - es sei denn, Sie sind ein guter PHP-Programmierer und eifrig bemüht, sich Ihre Hände schmutzig zu machen.

Modul-Positionen

Eines der Kernelemente in CMS Design ist das Positionieren der Module. Es ist manchmal schwierig herauszufinden, wo alle diese Module sind oder wo Sie sie hintun können. Hier ist ein Tipp. Geben Sie dieses Kommando in Ihren Browser ein:

Templates und Browserfragen

Die größten Probleme, die Sie bei der Arbeit mit Browsern haben werden, sind die mit verschiedenen Browsern, d.h. dass Ihre Seite korrekt mit beispielsweise Firefox und dem Internetexplorer zusammenarbeitet. Eigentlich sollten Browser sich an Standards halten, also auf dieselbe Art und Weise arbeiten. Theoretisch sollte jede Seite vernünftigerweise auf jedem Computer gleich aussehen. In der Praxis ist das allerdings nicht der Fall. Viele Browser haben kleinere Probleme hier und da. So hatten frühe Versionen von Firefox Probleme mit Ebenen, Opera kam mit der Zeilenhöhe nicht klar, Safari... usw.

Die Großteil dieser Fragen sind mehr oder weniger behoben, mit einer denkwürdigen Ausnahme: dem Internetexplorer. Ein schrecklicher Browser, der ganz richtig als ‚Schurken'-Browser bezeichnet wird. Er beachtet viele Standards nicht und macht das Leben von Webdesignern zum Albtraum. Die Anzahl der Fehler ist riesig, und man muss sich mit allen herumschlagen. Designer müssen eigentlich zwei Versionen ihrer Seite erstellen: eine für die normalen Browser und einen für den IE. Glücklicherweise sind viele dieser Fehler nun mit der Version 7 des IE behoben worden; allerdings nutzen immer noch 50% der Internetbenutzer den IE6, ein wirklich jämmerlicher Browser. Bedauerlicherweise müssen wir auch für diese Leute vorsorgen. Das sind wahrscheinlich ganz normale Leute, die keine Ahnung von technischen Angelegenheiten haben.

Die alternative Internetexplorerversion der Webseite ist normalerweise in einer speziellen ‚ie6_css'-Datei enthalten. Womöglich müssen Sie hier ein paar Änderungen vornehmen, je nach dem, wie weit Sie Ihr Template ‚hacken' wollen. Einige Template haben mehr Probleme als andere mit dem IE6. Z.B. RT Replicant und IE6 gehen nicht gut zusammen, da der Browser PNG-Graphiken und transparente Ebenen einfach schlecht darstellt, und das Template darauf aufgebaut ist. Wenn Sie ein gemütliches Leben vorziehen, dann bleiben Sie bei leichten Templates ohne Schnickschnack und Funktionen, die den IE6 überlaufen lassen. Es gibt eine lange Liste von Dingen, die er nicht verdauen kann, auch einfache Sache wie Menüleisten, und Sie werden schon recht bald die Leute verfluchen, die uns den IE6 aufgedrängt haben.

SEO für CMS - Templatefragen

Darüber müssen Sie gründlich nachdenken, denn hieraus entsteht Ihr Einkommen. Schlechte SEO = schlechtes Einkommen.

In diesem Stadium müssen Sie nur darauf achten, dass der Templatecode validiert werden kann. Sobald Sie eine Seite live ins Netz gestellt haben, gehen Sie zu W3C

Joomla 1.0 - Joomla 1.5

Wir benutzen Joomla 1.5 noch nicht, denn es gibt für unsere Zwecke noch nicht genügend Plugins. Was wir brauchen, sind ‚native' Versionen der Plugins, die noch nicht vollständig zur Verfügung stehen.

Was Joomla momentan am nötigsten braucht, ist eine Aktualisierung der Codebasis. Zellen, Tabellen usw. sind seit 2002 veraltet. Ich bin kein Programmierer, aber auch ich benutze seit 2001 CSS und Ebenen für Webseiten. Tabellen und Zellen hatte ich da schon aufgeben, wenn es auch noch immer Dinosaurier wie FrontPage gibt, die immer noch weiterwurschteln, auch wenn die Zukunft schon lange klar ist.

Joomla bleibt da so etwa auf halbem Wege stecken, DIV-Container plus Tabellen, was bedeutet, dass die Codebasis um Jahre veraltet ist, und da muss man vor allem anderen ran. Was noch bleibt, das sind Kinkerlitzchen. Glücklicherweise liegt Joomla Lichtjahre vor den meisten anderen CMS; es ist im Moment also nicht zu wichtig. Viele von Ihnen erzeugen ein ordentliches Seitenlayout, was zu einem massiven Vorteil in der kommerziellen Welt bringt: Benutzerfreundlichkeit und gute SEO erfahren hier einen großen Schwung. Bedenken Sie, dass Fragen der Benutzerfreundlichkeit in manchen Ländern von gesetzlichem Belang sind.

Wenn Joomla 2.0 allein mit DIV-Containern und CSS sich für ein Jahr oder zwei bewährt hat, dann werden wir wechseln. Im Moment gibt es dafür aber noch nicht genügend Gründe.

Hier sind einige gute Joomla Template Quellen:

1. Gehen Sie zu

Weitere CMS Fragen

Bisher haben wir nur über Joomla-Templates gesprochen, einfach weil Sie es nicht einfacher und besser haben können. Natürlich werden Sie auch mit anderen CMS arbeiten müssen: versuchen Sie Drupal und CMS-MadeSimple zuerst.

Drupal-Templates funktionieren ein bisschen anders, da manche Farbaspekte vom Kern der Anwendung kontrolliert werden, obwohl man das umgehen kann. CMS-MS verwendet einen komplett anderen Ansatz. Wie mit Radiant-CMS erstellen Sie hier zunächst eine eigene HTML-Seite und benutzen die dann. Das wird Ihnen eine klare Vorstellung davon geben, was im CMS-Design möglich ist und was nicht.