9.2 Das eigene Template 

Nun müssen wir uns überlegen, wie dieses Layout am besten umgesetzt werden kann. Der nächste Schritt ist also die Bearbeitung des Joomla!-Templates. Über das Template können wir die einzelnen Grafiken wieder zusammensetzen und die restlichen Layout-Bereiche bestimmen. Doch zunächst müssen wir klären, wie wir unser eigenes Template erstellen möchten.

9.2.1 Bestehendes überarbeiten oder neu erstellen? 

Es stehen zwei unterschiedliche Ansätze zur Auswahl. Entweder überarbeiten wir ein bestehendes Template und passen es unseren Vorstellungen an. Oder wir können ein komplett eigenes Template neu aufsetzen. Das Überarbeiten eines bestehenden Templates würde uns zwar etwas Arbeit ersparen, verlangt aber die gleichen HTML-Kenntnisse, die wir benötigen, um ein neues Template zu erstellen. Falls Sie also tatsächlich nur Kleinigkeiten, wie Schriftarten, Farben oder sonstige Formatierungen ändern möchten, wird es ausreichen, das bestehende Template anzupassen. Sobald Sie aber auch noch Änderungen am Layout vornehmen möchten, um es Ihrem Design anzupassen, wird die Sache etwas unübersichtlich. Selbst in einem WYSIWYG-Editor können Sie sich das Layout der index.php-Datei nicht mehr im ursprünglichen Zustand anzeigen lassen und müssen Änderungen über den Code vornehmen.

An dieser Stelle möchten wir kurz beschreiben, wie Sie z.  B. aus dem Standard-Template Rhuk_Solarflare_ii zwei Bereiche entfernen, die sich nicht im Backend abstellen lassen. Zum einen ist das die große Joomla!-Grafik im Header und zum anderen die »powered by«-Grafik in der rechten Spalte (Abbildung 9.4). Öffnen Sie dazu mit einem beliebigen Editor die Datei index.php aus dem Verzeichnis joomla/templates/rhuk_solarflare_ii. Sie können auch über das Joomla!-Backend direkt auf die PHP-Datei des Templates zugreifen. Rufen Sie dazu aus dem Hauptmenü den Punkt Site · Template Manager · Site Templates auf. Es werden Ihnen nun die vorhandenen Templates aufgelistet. Wählen Sie Rhuk_Solarflare_ii aus, und klicken Sie auf den Button Edit HMTL in der Werkzeugleiste rechts oben. Nun befinden Sie sich im Template HTML Editor und können hier die erforderlichen Änderungen vornehmen.

Der Bereich, der den gewünschten Header beschreibt, fängt in der Zeile 64 an und endet in Zeile 81. Diesen Teil können Sie einfach herauslöschen.

<div id="header_outer">
   <div id="header">&nbsp;</div>
   <div id="top_outer">
   <div id="top_inner">
      <?php
      if ( mosCountModules( 'top' ) ) {
         mosLoadModules ( 'top', –2 );
      } else {
         ?>
         <span class="error">Top Module Empty</span>
         <?php
      }
      ?>
   </div>
   </div>
</div>

Den zweiten Bereich, den wir entfernen wollen, finden Sie zwischen Zeile 99 und 101 (Zeilennummern der ursprünglichen PHP-Datei).

<div id="poweredby_inner">
   <img src="<?php echo $mosConfig_live_site;?>
        /templates/rhuk_solarflare_ii/images/powered_by.png"
        alt="powered_by.png, 1 kB" title="powered_by"
        border="0" height="68" width="165"/>
   <br/>
</div>

Das Template sollte im Frontend nun etwa so aussehen wie in Abbildung 9.5.

9.2.2 Benötigte Dateien 

Um Ihnen einen besseren Einblick hinter die Kulissen eines Templates zu geben, werden wir nun Schritt für Schritt eine eigene Vorlage erstellen. Das Beispiel soll Ihnen nur einige Möglichkeiten näher bringen, und es wird nicht den ganzen Umfang eines vollständig ausgeklügelten Templates erreichen. Dies ist auch kaum sinnvoll, da es bei der Umsetzung keinen vorgeschriebenen Weg gibt. Es gibt jedoch einige Regeln, die Sie beachten müssen.

Die wichtigsten Bestandteile eines Templates sind fünf Komponenten, und diese dürfen nicht fehlen:

Das /images-Verzeichnis wird die Slices, also Grafiken unseres Layouts, enthalten. Im Verzeichnis /css bringen wir die Datei template_css.css unter. Sie enthält die Formatierungen für das Template. Die Datei index.php enthält die Codierung des Layouts. Die XML-Datei dient als Zusammenfassung relevanter Elemente für das Template. Ihre Benennung muss genau templateDetails.xml lauten. Neben einer kurzen Beschreibung sollten hier auch die einzelnen Dateien in den jeweiligen Verzeichnissen aufgeführt sein. Das betrachten wir aber im weiteren Verlauf noch genauer. Zu guter Letzt gibt es für das Template noch eine kleine Voransicht, die Sie in der Datei template_thumbnail.png speichern. Diese Datei muss sich im auf derselben Ebene mit der PHP- und der XML-Datei befinden.

Diese Dateien sollten sich später im Templates-Verzeichnis Ihrer Website befinden. In unserem Beispiel wäre das also joomla/templates. Hier erstellen Sie am besten noch ein eigenes Unterverzeichnis für das neue Template, in dem sich später die fünf Bestandteile befinden müssen.

Bevor wir gleich genauer auf das Template eingehen, sollten Sie Ihre Verzeichnisstruktur erzeugen. Erstellen Sie, wie oben beschrieben, ein Unterverzeichnis für das neue Template. Darin brauchen Sie dann noch zwei weitere Verzeichnisse, nämlich /css und /images.

Das Erstellen des Templates lässt sich in zwei Schritte aufteilen. Wir müssen die PHP-Datei erzeugen, die unser Layout im Browser darstellen wird, und wir brauchen die CSS-Datei, die die Formatierung der einzelnen Elemente enthalten soll.

9.2.3 HTML-Bereich 

Das Template, also die index.php-Datei sollte im Anfangszustand etwa folgendermaßen aussehen:

01  <?php echo "<?xml version=\"1.0\"?>"; ?>
02  <?php
03  defined( '_VALID_MOS' ) or die( 'Direct Access to this
04     location is not allowed.' );
05  ?>
06  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0ð
07            Transitional//EN"ð
08            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-ð
09            transitional.dtd">
10  <html xmlns="http://www.w3.org/1999/xhtml">
11  <head>
12     <?php mosShowHead(); ?>
13     <?php if ( $my->id ) initEditor(); ?>
14     <meta http-equiv="Content-Type" content="text/html;ð
15                  <?php echo _ISO; ?>" />
16     <?php echo "<link rel=\"stylesheet\" ð
17           href=\"$GLOBALS[mosConfig_live_site]/ð
18           templates/$GLOBALS[cur_template]/css/ð
19           template_css.css\"type=\"text/css\"/>" ; ?>
20  </head>
21  <body>
22  </body>
23  </html>

Ein leeres Template beinhaltet einige Dinge, die speziell für Joomla! eine wichtige Rolle spielen. Diese Informationen müssen auf jeden Fall vorhanden sein.

Der erste wichtige Punkt betrifft die Sicherheit Ihres Templates. Die Zeilen 2–5 schützen Ihre Template-Dateien vor fremden Zugriffen und Änderungen.

In Zeile 12 werden die Meta-Daten vom Joomla!-Backend abgerufen und automatisch die Seitentitel der jeweiligen Seiten ausgegeben.

Über den Code in Zeile 13 wird für eingeloggte User im Frontend ein WYSIWYG-Editor aufgerufen.

Zeile 16–19 definiert die Verbindung zu unserer CSS-Datei, die wir später noch erstellen werden. Die Konfigurationsvariable $mosConfig_live_site enthält die absolute URL Ihrer Website. Ohne diesen Link würde Ihre Seite unformatiert im Webbrowser dargestellt werden.

Damit wäre das Grundgerüst für unser HTML-Template geschaffen. Sie können diese Datei mit einem einfachen Texteditor oder einem HTML-Editor erstellen. Der Großteil dieser Template-Datei besteht aus HTML. Die wenigen PHP-Variablen werden Sie auch ohne große PHP-Kenntnisse schnell anwenden können.

Die nächsten Einträge werden wir im <body>-Bereich vornehmen. Es müssen nun unterschiedliche Bereiche erstellt werden, in denen sich später z.  B. das Menü, der Header, der Content oder die rechte Spalte befinden sollen. Diese Bereiche erzeugen Sie, indem Sie entweder eine Tabelle mit der entsprechenden Anzahl Zellen aufziehen oder Div-Layer verwenden.

Tabellen bzw. Layouttabellen wurden lange Zeit zur Gestaltung des Layouts verwendet. Auch jetzt bieten sie noch den Vorteil, dass sie bei älteren Browsern das Layout in der gewünschten Form umsetzen. Ihre Verschachtelung und die absoluten Größenangaben widersprechen jedoch dem Prinzip der Barrierefreiheit¹  . Daher sollten Tabellen möglichst nur noch verwendet werden, um tabellarische Daten darzustellen. Dagegen lassen sich Ebenen frei positionieren und sind im Vergleich zu Tabellen barrierefrei. In unserem Beispiel werden wir daher das Layout überwiegend mit Hilfe von Div-Layern erstellen. Die fertigen Template-Dateien finden Sie auch auf der CD im Verzeichnis template/la-joomla.

Kommen wir nun zum eigentlichen Hauptteil. In unserer index.php-Datei werden wir nun die Zeilen 21 und 22 um einige Codesegmente erweitern. Es fehlen uns noch die Joomla!-Variablen und die Layer, mit denen wir unser Layout umsetzen möchten.

<body>
<div id="container">
  <div id="tanzheader">
    <h1 id="tanz_header_logo">
    <?php echo $mosConfig_sitename; ?></h1>
    <h1 id="tanz_header2"><?php echo $mosConfig_sitename;?>
    </h1>
  </div>

Wir beginnen mit einem Layer, der als Container für die weiteren Layer dienen wird. Details zu den einzelnen Ebenen legen wir später in der entsprechenden CSS-Datei fest. Anschließend folgt der Layer für unsere Kopfzeile. Die Anweisung <?php echo $mosConfig_sitename;?> gibt den Namen der Site wieder.

In der Ebene contentarea werden die weiteren Bereiche der Website definiert:

  <div id="contentarea">
    <div id="tanz_menu"><?php mosLoadModules ( 'left' ); ?>
    </div>
    <div id="ornament">Ornament</div>
    <div id="content">:: <?php mosPathWay(); ?><br/><br/>
      unser inhalt :: <?php mosMainBody(); ?>
      <br/><br/>
    </div>
    <div id="foto">foto</div>
    <div id="extra"><?php mosLoadModules ( "right" ); ?>
    </div>
  </div>

Zunächst kommt im Layer tanz_menu das Menü der Website. Dazu wird das Joomla!-Modul »left« aufgerufen. Dieses Modul besteht aus Hauptmenü, Login und Syndicate. Wird einer dieser Bereiche nicht benötigt, muss er über das Joomla!-Backend abgeschaltet werden (siehe Abschnitt 7.1, Module). Direkt an den Layer tanz_menu schließt sich der kleine Layer ornament an. Hier wird sich später eine Grafik befinden. Den nächsten großen Bereich stellt der eigentliche Inhalt dar. Als Erstes wird der Klickpfad über die Anweisung <?php mosPathWay(); ?> ausgegeben. Danach wird mit <?php mosMainBody(); ?> der Inhalt ausgegeben.

Außerdem werden noch die zwei Layer der rechten Spalte definiert. Der zweite Layer enthält die Anweisung zum Aufruf der Module »Polls« und »Who’s Online«. Auch hier können Sie über das Backend entscheiden, welches der Module tatsächlich im Frontend sichtbar sein soll.

Jetzt bleiben uns nur noch die Fußzeile und der Abschluss des HTML-Dokuments:

  <div id="footer">
    <div align="center">info und impressum
      <a href="<?php echo $mosConfig_live_site;?>"
         accesskey="1">
         <?php echo $mosConfig_sitename; ?>
      </a><br/>
    </div>
  </div>
</div>
</body>
</html>

Der Footer gibt über <?php echo $mosConfig_sitename; ?> den Seitennamen als Link aus. Dieser ist auch über einen Accesskey erreichbar.

In unserem Beispiel haben wir fünf Module (»Main Menu«, »Login Form«, »Syndicate«, »Polls« und »Who’s Online«) auf zwei Modul-Positionen (»left« und »right«) verwendet. Joomla! hat 27 definierte Modul-Positionen, auf die wir zurückgreifen können. Eine Übersicht bekommen Sie über das Menü Site · Template Manager · Module Positions (Abbildung 9.6).

9.2.4 CSS-Bereich 

Unsere CSS-Datei können wir entweder mit einem Editor bearbeiten oder ebenfalls wie die HTML-Datei direkt über den Template Manager öffnen. Der Inhalt lässt sich grob in zwei Bereiche trennen. Zuerst werden wir das Layout unserer Ebenen festlegen. Danach bearbeiten wir die Formatierungen der Joomla!-Module.

Wir stellen alle Ränder auf »0« (für alle Browser) und legen die Hintergrundfarbe für den Body fest:

* {
  padding: 0;
  margin: 0;
}
body {
  font-family: tahoma, verdana, arial;
  font-size: 0.9em;
  background-color: #FEF2DC;
}

Wir positionieren die benötigten Layer. Dies geschieht über die Konfiguration ihrer Ränder und über Breiten- bzw. Höhenangaben:

#container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#tanzheader {
  width: 800px;
  padding: 0em;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

Das Logo stellen wir in der Kopfzeile als Hintergrund ein. Dabei soll keine Wiederholung der Grafik stattfinden.

#tanz_header_logo {
  background: url(../images/header.jpg) top left no-repeat;
  width: 426px;
  height: 116px;
  text-indent: –5000px;
}

Wir füllen den Bereich rechts neben dem Logo. Da die Grafik nur etwa 20 Pixel breit ist, soll sie in der Horizontalen wiederholt werden, bis der rechte Rand erreicht ist.

#tanz_header2 {
  background: url(../images/header_bg.jpg) repeat-x;
  margin-left: 426px;
  margin-top: –116px;
  width: 374px;
  height: 116px;
  text-indent: –5000px;
}

Nun definieren wir den Layer für das Menü und das darunter liegende Ornament:

#tanz_menu {
  padding-left: 5px;
  padding-right: 5px;
  width: 106px;
  height: 390px;
  background-color: #E4CCB2;
  font-family: tahoma, verdana, arial;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  color: #722A2B;
}
#ornament {
  width: 116px;
  height: 115px;
  background-image: url(../images/ornament.jpg) no-repeat;
  background-position: bottom;
  text-indent: –5000px;
}

Der Content-Bereich wird festgelegt. Der Textumfluss float: left; bewirkt, dass das Element links steht und vom nachfolgenden Element (#foto) rechts umflossen wird. Damit erreichen wir automatisch die richtige Ausgangslage für die Positionierung des Layers foto.

#content {
  width: 478px;
  margin-top: –506px;
  margin-left: 116px;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
  min-height: 500px;
  float: left;
}
#foto {
  width: 186px;
  height: 308px;
  background-image: url(../images/paar.jpg);
  margin-top: –505px;
  margin-left: 614px;
  text-indent: –5000px;
}

Im Layer extra befindet sich das Modul »Who’s Online«. Für dieses Modul können wir jetzt detaillierte Einstellungen vornehmen:

#extra {
  width: 176px;
  height: 198px;
  background-color: #C76100;
  margin-left: 614px;
  text-indent: –5000px;
  padding-left: 10px;
  padding-top: 10px;
  font-family: tahoma, verdana, arial;
  font-size: 0.9em;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
}

Für die Fußzeile wird wieder eine schmale Grafik in den Hintergrund geladen, die horizontal wiederholt wird. Mit padding-top gewinnt man den nötigen Abstand zwischen der Linie und dem Fußzeilen-Text.

#footer {
  width: 800px;
  height: 44px;
  background-image: url(../images/footer.jpg) repeat-x;
  padding-top: 16px; /* Abstand zur Hintergrundlinie */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #C76100;
}

Jetzt beginnt der Bereich, in dem die Joomla!-Module formatiert werden können. In unserem Beispiel gehen wir nur auf einige wenige Formatierungen ein. Sie finden jedoch im Anschluss eine Übersicht der verschiedenen CSS-Zuweisungen.

table.moduletable {
  width: 95  %;
  padding-left: 2px;
  text-align: left;
  font-size: 0.8em;
}

Formatierung der Modul-Überschriften:

table.moduletable.th {
  text-align: left;
  font-weight: bold;
  font-size: 0.8em;
}

Formatierung der Modul-Inhalte:

table.moduletable.td {
  font-size: 0.6em;
  font-weight: lighter;
}

Hier formatieren Sie die Content-Überschriften:

.contentheading, .componentheading {
  font-weight: bold;
  font-size: 1em;
}

Die nächste Zuweisung bezieht sich auf den Klickpfad:

.pathway {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #552021;
}

Hier bestimmen Sie das Erscheinungsbild des Anmelde-Buttons:

.button {
  font-size: 0.8em;
  background-color: #D3A485;
  color: #ffffff;
  border: 1px solid;
  width: 100px;
}

Jetzt können wir noch die Eingabefelder anpassen:

.inputbox {
  color: #282E73;
  background: #FEEAC5;
  border: 1px solid;
}

Die folgenden Formatierungen bestimmen das Aussehen der Links. Zuerst werden die Links der obersten Ebene des Hauptmenüs konfiguriert, danach im gleichen Stil die allgemeinen Links:

a.mainlevel:link, a.mainlevel:visited {
  font-family: tahoma, verdana, arial;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  color: #995F37;
}

a.mainlevel:hover {
 color: #FFFFFF;
}
a:link, a:active, a:visited {
 text-decoration: none;
 color: #995F37;
}
a:hover {
 color: #FFFFFF;
}

Diese CSS-Datei enthält natürlich nicht alle möglichen Formatierungen für Joomla!-Module und Componenten. Es wurden zunächst die wichtigsten Dinge abgedeckt, die nachträglich je nach Bedarf ergänzt werden können.

Um die Formatierungen besser zuordnen zu können, haben wir eine Übersicht zusammengestellt. Falls Sie in unserer Liste Formatierungen vermissen, können Sie sich über die hilfreiche Erweiterung »Web Developer« im Firefox alle interessanten CSS-Zuweisungen einer Joomla!-Seite anzeigen lassen. Aktivieren Sie einfach im Menü Outline des Web Developers die Option Outline Current Element, und bewegen Sie den Mauszeiger über eine Joomla!-Seite. Das Tool hebt die aktiven Bereiche hervor und zeigt Ihnen in der Statuszeile den entsprechenden HTML-Code an.

Im ersten Screenshot sehen Sie die horziontale Navigation zu den wichtigsten Bereichen der Site und das Suchfeld (Abbildung 9.7).

Die Modul-Position »left« stellt die Module »Main Menu«, »Login« und »Syndicate« dar. In Abbildung 9.8 sehen Sie die möglichen CSS-Zuweisungen.

Der Content-Bereich einer Seite kann viele unterschiedliche Elemente beinhalten. Einige wichtige Format-Zuweisungen haben wir in Abbildung 9.9 zusammengestellt.

Eine Zusammenfassung für das Modul »Contact« und weitere Navigations-Elemente finden Sie in Abbildung 9.10.

Im Zusammenhang mit CSS sollte auch noch das Page Class Suffix besprochen werden. Diese Zuweisung kennen wir z.  B. aus den Menu Items in Abschnitt 5.3, Das Menü aufbauen, oder aus den Modulen in Abschnitt 7.1, Module. Sie haben die Möglichkeit, in Ihrem Template Klassen zu definieren, die Sie über Page Class Suffix den Inhalten verschiedener Menüeinträge oder Modulen zuordnen können. Dies kann nützlich sein, wenn Sie das bestehende Layout an einer Stelle z.  B. um eine Spalte erweitern möchten oder ähnliche Module über eine gemeinsame Klasse formatieren wollen.

9.2.5 Das Drumherum 

Im nächsten Schritt werden wir sämtliche Informationen, die unser Template betreffen, für Joomla! zusammenfassen. Diese Angaben müssen sich in der Datei templateDetails.xml befinden.

Die Datei beginnt mit einem allgemeinen Teil, der Details zum Autor und dem Template enthält. Diese Daten erscheinen teilweise auch im Backend im Template Manager:

<?xml version="1.0" encoding="iso-8859–1"?>
<mosinstall type="template" version="1.0.0">
  <name>la_joomla</name>
  <creationDate>20/02/06</creationDate>
  <author>Radovan Kubani</author>
  <copyright>GNU/GPL</copyright>
  <authorEmail>info@email.de</authorEmail>
  <authorUrl>http://www.yourwebsite.de</authorUrl>
  <version>2.2</version>
  <description>Hier erscheint die Beschreibung des
  Templates</description>

Es folgt eine Liste aller Dateien, die mit dem Template zusammenhängen. Dabei findet eine Unterteilung in Dateien, Bilder und CSS statt:

  <files>
    <filename>index.php</filename>
    <filename>template_thumbnail.png</filename>
  </files>
  <images>
    <filename>images/footer.jpg</filename>
    <filename>images/header.jpg</filename>
    <filename>images/header_bg.jpg</filename>
    <filename>images/ornament.jpg</filename>
    <filename>images/paar.jpg</filename>
  </images>
  <css>
    <filename>css/template_css.css</filename>
  </css>
</mosinstall>

Unser Template ist jetzt fast vollständig. Was noch fehlt, ist ein Thumbnail mit einem Screenshot unseres Entwurfs. Erstellen Sie diesen in einem Bildbearbeitungsprogramm in der Größe von ca. 250 × 140 Pixel. Nennen Sie die Datei template_thumbnail.png, und speichern Sie diese im Hauptverzeichnis Ihres Templates (also in dem Ordner, in dem sich auch die Datei index.php befindet).

Nun können Sie die fertige Template-Struktur auf Ihren Server in das Verzeichnis joomla/templates kopieren und über den Template Manager zum neuen »Default« erklären. Sie taucht automatisch als verfügbare Vorlage im Template Manager auf.

9.2.6 Webeditor-Erweiterung für Templates 

Wer es gewohnt ist, mit einem HTML-Editor zu arbeiten, und die PHP-Variablen nicht direkt in die index.php-Datei eingeben möchte, wird erleichtert sein, dass es z.  B. für Macromedia Dreamweaver eine geeignete Erweiterung gibt. Es handelt sich dabei nur um eine kleine Eingabehilfe. Die eigentliche Arbeit kann Ihnen damit nicht abgenommen werden. Voraussetzung für die Erweiterung ist mindestens Dreamweaver MX und die Version 1.6 (oder höher) des Extension-Managers.

Sie finden die Erweiterung auf der CD im Verzeichnis tools/dw_extension. Entpacken Sie die Datei mambosolutionsDW_107.zip in ein temporäres Verzeichnis, und starten Sie den Macromedia Extension Manager.

Suchen und installieren Sie die entpackte Datei mambosolutionsDW_107.mxp über den Menüpunkt Datei · Erweiterung installieren… (Abbildung 9.11).

Nach der erfolgreichen Installation können Sie Dreamweaver öffnen und sofort auf die neuen Funktionen zugreifen. Dabei spielt es keine Rolle, ob Sie sich im Code oder im Entwurfsmodus befinden. Fügen Sie die PHP-Variablen einfach an der Stelle Ihres Cursors ein, indem Sie auf das gewünschte Icon in der Werkzeugleiste klicken (Abbildung 9.12). Alternativ erreichen Sie alle Befehle auch über das Menü Einfügen · Mambo OS.

Eine interessante Option für alle Entwickler, die Dreamweaver nicht verwenden können, bietet der Open Source-Editor Nvu. Der Editor befindet sich zwar noch in der Entwicklungsphase, basiert aber auf dem Mozilla Composer und ist daher schon jetzt ein vielseitiges Werkzeug. Der Vorteil neben der kostenlosen Nutzung ist die Kompatibilität sowohl mit Linux- als auch mit Windows-Systemen. Eine weitere nützliche Funktion ist der Profil Manager, über den Sie verschiedene Konfigurationen des Editors aufrufen können. Sie finden die Installationsdatei open4gtplbuilder.xpi auf der CD im Verzeichnis tools/nvu.

Wichtig ist für uns jedoch, dass es auch für Nvu eine Template-Erweiterung gibt. Ähnlich wie bei Dreamweaver wird hier dem Editor eine neue Werkzeugleiste hinzugefügt, über die der Entwickler per Mausklick die gewünschten PHP-Variablen an der gewünschten Position einfügen kann. Sie finden die Extension ebenfalls auf der CD im Verzeichnis tools/nvu_extension. Die Installation verläuft wie die Installation von Erweiterungen bei dem Webbrowser Firefox. Voraussetzung ist die Version Nvu 1.0PR oder höher. Starten Sie Nvu, und öffnen Sie das Menü Tools · Extensions (Abbildung 9.13).

Über den Button Install können Sie den Ort der Erweiterung angeben und die Installation starten. Nach der Installation muss Nvu neu gestartet werden. Erst dann erscheinen die neuen Werkzeugleisten (Abbildung 9.14).

Die Extension bietet neben den PHP-Variablen eine weitere Funktion. Sie können die komplette Datei- und Ordnerstruktur über den Template Builder erstellen lassen. In vier Schritten führt der Assistent Sie bis zum Packen Ihrer Template-Dateien (Abbildung 9.15).

Es werden die benötigten Ordner erstellt, Sie können direkt über den Assistenten Ihre Angaben für die XML-Datei machen (die verwendeten Dokumente werden automatisch aufgelistet), und es wird eine Standard-CSS-Datei aufgebaut, die Sie nach Belieben anpassen können.

Damit hätten wir die wichtigsten Punkte zur Template-Erstellung besprochen. Ihrer Fantasie sind jetzt keine Grenzen mehr gesetzt. Einen letzten Schritt gibt es jetzt noch, der für eine komplette Website notwendig ist. Das Template muss noch mit unseren Inhalten gefüllt werden.

9.2.7 Die Seite aufbauen 

Der Vollständigkeit halber erwähnen wir hier noch mal kurz, wie Joomla! die Inhalte einer Website strukturiert. In der momentanen Joomla!-Version stellen Sektionen die oberste Ebene dar. Ihnen können Sie Kategorien unterordnen, und die Kategorien wiederum enthalten die eigentlichen Inhaltsseiten. Diese Strukturierung sollte so eingehalten werden. Zusätzlich haben Sie die Möglichkeit, statische Inhaltsseiten zu erstellen, die keiner Sektion oder Kategorie untergeordnet werden. Das Vorgehen zum Erstellen dieser Bereiche haben wir in Kapitel 5, Eine erste Webseite, ausführlich beschrieben.

Sie können nun einer bestehenden Website das neue Layout zuweisen oder Ihre Inhalte komplett neu eingeben. Der Vorteil des Templates ist natürlich, dass es unabhängig von den Inhalten der Website erstellt und bearbeitet wurde. Die Integration der Vorlage verläuft daher ohne weiteren Aufwand und kann über den Template Manager sofort aktiviert werden.

¹  Dabei handelt es sich um ein Designprinzip, bei dem versucht wird, die Nutzung einer Webseite unabhängig von körperlichen und technischen Hürden zu ermöglichen.