This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Aus dem Inhalt: • Der Grundriss eines Joomla!-Templates
FRANZIS
7356-5 U1+U4
Know-how ist blau.
Alexander Schmidt
• Cascading Style Sheets
Design und Implementierung
• Bilder und Grafikformate • Favicons • Hacks für den Internet Explorer • Parametertypen
씰
Joomla!-Templates verstehen und anpassen Joomla!-Templates sind einfach aufgebaut. Schon nach kurzer Zeit bekommen Sie einen Überblick, welche Datei welche Aufgabe hat, und verstehen, wie die einzelnen Dateien zusammenhängen. Darüber hinaus erfahren Sie, wie Sie vorhandene Templates mit einfachsten Mitteln an Ihre Wünsche anpassen, indem Sie zum Beispiel Farben oder Schriftarten verändern oder Module umstellen. Von der Idee zum Screendesign Für ein komplett selbst gestaltetes Template benötigen Sie ein stimmiges Screendesign. Der Autor zeigt Schritt für Schritt, wie sich eine solche Vorlage mit Adobe Photoshop erstellen lässt. Er gibt Tipps für die Gestaltung von Menüs, Hintergründen und Gliederungselementen sowie zum Einbinden von Fotos und Logos.
씰
Umsetzung des Screendesigns Um das Screendesign in Joomla! umzusetzen, muss es in handliche Einzelteile zerlegt werden. Das Buch zeigt Ihnen, wie Sie die einzelnen Bestandteile aus dem Gesamtdesign herauslösen und den Layout-Zonen im Joomla!-Template zuordnen. Sie erfahren, wie Sie mit den CSS-Dateien umgehen müssen und wo Sie welche Daten ablegen. Darüber hinaus verrät Alexander Schmidt, wie Sie die Module des Templates aktivieren.
씰
Optimierung für alle Browsertypen Ältere Versionen des Internet Explorers sind dafür berüchtigt, Webseiten nicht standardkonform darzustellen. Dieses Buch zeigt, wie Sie den Eigenheiten des Microsoft-Browsers ein Schnippchen schlagen. Der Autor wartet mit Hacks und Tipps auf, die auch auf dem Internet Explorer eine tadellose Darstellung Ihrer Webseite garantieren.
• Ein Screendesign erstellen • Inhaltselemente festlegen • Menüs und Module anlegen • Den Index programmieren • Eine Slideshow einbauen • Das Template installieren • Fehlerbeseitigung • Validierung • Anpassung an verschiedene Browser • Optimierung der Ladezeit
Über den Autor: Alexander Schmidt ist Web-Entwickler und Joomla!-Coach. Er leitet und organisiert Seminare für die Nutzung des populären Content-ManagementSystems. Schon seit mehreren Jahren realisiert Schmidt Internetauftritte, die auf Joomla! basieren. Darüber hinaus hat er sich darauf spezialisiert, Designvorlagen in hochwertige Joomla!-Templates umzusetzen, die den modernen Webstandards genügen. Schmidt lebt in Bad Nauheim.
Auf www.buch.cd Das komplette Beispiel-Template.
30,– EUR [D] ISBN 978-3-7723-7356-5
Besuchen Sie unsere Website www.franzis.de
Joomla!-Templates
씰
• Bestehende Templates anpassen
t
et Kompl
e in Farb
Joomla!Templates
Design und Implementierung
> Joomla!-Screendesigns mit Photoshop entwerfen > Photoshop-Grafiken in ein Joomla!-Template verwandeln > Joomla!-Templates verstehen und anpassen > Inklusive Beispiel-Template
Schmidt
Eine Joomla!-Standardwebseite ist schnell erstellt. Aber wenn es an die optische Gestaltung mittels Templates geht, ist Know-how gefragt. Der erfahrene Webdesigner Alexander Schmidt erklärt, wie ein Joomla!Template aufgebaut ist, und zeigt, wie Sie mit Photoshop ein eigenes Screendesign entwickeln und in Joomla! umsetzen – passend für alle gängigen Browsertypen.
Überzeugende Vorlagen für das Open-Source-CMS Das Praxisbuch für Webdesigner
FRANZIS
7356-5 Titelei:6282-8 Titelei
07.10.2009
15:50 Uhr
Seite 1
Alexander Schmidt
Joomla!-Templates Design und Implementierung
7356-5 Titelei:6282-8 Titelei
07.10.2009
15:50 Uhr
Seite 2
7356-5 Titelei:6282-8 Titelei
07.10.2009
15:50 Uhr
Seite 3
Alexander Schmidt
Joomla!Templates
Design und Implementierung
Mit 325 Abbildungen
FRANZIS
7356-5 Titelei:6282-8 Titelei
07.10.2009
15:50 Uhr
Seite 4
Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.
Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich.
Einleitung Dieses Buch richtet sich an alle, die ihre eigenen, individuellen Templates für Joomla gestalten wollen. Anfänger finden hier einen umfangreichen Einstieg in die Template-Entwicklung, und professionelle Webdesigner werden ihre Kenntnisse um eine ausgeklügelte Template-Engine erweitern können. Mithilfe dieses Buchs werden Sie ein selbst gestaltetes Screendesign in ein Joomla-Template umsetzen. Dabei lernen Sie neue Techniken kennen und werden erfahren, auf was es bei der Umsetzung ankommt. Die Fähigkeiten, die Sie beim Durcharbeiten des Buchs erwerben, werden Ihnen später nicht nur unter Joomla von Nutzen sein, sondern allgemein im Webdesign. In den einzelnen Kapiteln werden Ihnen die Abläufe exakt aufeinanderfolgend erklärt. In der Praxis zeigt sich jedoch, dass man Programme zum Arbeiten und Dateien zum Bearbeiten parallel geöffnet hat und zwischen ihnen hin und her switcht. So beschreibt dieses Buch – das durchaus als Super-Tutorial gesehen werden kann – nur eine mögliche Vorgehensweise. Wenn Sie dieses Werk einmal durchgearbeitet haben, werden Sie Ihre eigenen Abläufe finden und das Webdesign als Handwerk effizienter nutzen können. Der sichere Umgang mit Joomla und Photoshop wird vorausgesetzt. CSS und HTML sollten Ihnen vertraut sein; Basiswissen reicht aber vollkommen aus. Der Wille, Neues zu erlernen und ein Template mit PHP und Joomla-eigenen Anweisungen zu programmieren, wird dazu beitragen, dieses Buch erfolgreich einzusetzen. Steht Ihnen Photoshop nicht zur Verfügung, können Sie auch ein anderes Bildbearbeitungsprogramm wie zum Beispiel GIMP verwenden. Die Screendesign-Anleitung können Sie dann allerdings nicht eins zu eins verwenden. Um dieses Buch effektiv zu nutzen, brauchen Sie einen Zugang zu einem Joomla-System. Sie werden die Voraussetzungen für Joomla selbst schaffen, indem Sie eine Testumgebung installieren. Sie setzen dabei den Webserver Apache auf, der die Programmiersprache PHP unterstützt, und erstellen eine Datenbank mit MySQL.
7356 Joomla Templates_NEU.indd 5
05.10.2009 10:34:20
6
Einleitung
Haben Sie bis jetzt WYSIWYG-Editoren wie Dreamweaver oder Expression Web genutzt, werden Sie nun lernen, direkt im Quelltext zu arbeiten. Einfache Editoren wie Notepad oder TextEdit reichen dazu vollkommen aus. WYSIWYG-Editoren werden nicht ausdrücklich benötigt, können aber im Quelltextmodus eingesetzt werden.
Template-Entwicklung Wenn Sie zum ersten Mal ein Template entwickeln, ist es wichtig zu verstehen, dass es sich hierbei nicht »nur« um Webdesign handelt. Ein Template unter Joomla bestimmt das Aussehen einer Website. Vor der Template-Entwicklung kommt daher immer das Gestalten eines Screendesigns. In diesem Design zeichnet sich die spätere Funktionalität der Website ab. Erst wenn das Screendesign steht, kommt es zum Webdesign. Das Screendesign wird mit HTML, CSS und Bildern umgesetzt. Das Webdesign ist ein Bestandteil der TemplateEntwicklung, die mit PHP, JavaScript und Template-Befehlen weitergeführt wird. Ein weiterer Bestandteil der Template-Entwicklung ist die Parametrisierung. Mithilfe von Parametern können Sie über das Backend Einfluss auf das Template nehmen und es beispielsweise in ganz anderen Farben erstrahlen lassen. Durch eine einfache Auswahl können Sie ein anderes Cascading Style Sheet aussuchen, um die Website in einem neuen Licht zu präsentieren. Durch Overrides können Sie die Gestaltung von Joomla-Komponenten beeinflussen, indem Sie Dateien einfach »überschreiben«. Den Umgang mit Overrides zu erlernen, ist ebenfalls Bestandteil dieses Buchs. Wenn Sie Texte im Template verwenden wollen, können Sie sie mit Sprachdateien für die ganze Welt zur Verfügung stellen. Mit dem JavaScript-Framework Mootools, das Joomla von Haus aus mitbringt, müssen Sie weniger codieren und können schnell und effektiv das Fundament für animierte Effekte und Elemente legen. Schließlich werden Sie die Template-Engine von Joomla besser kennenlernen, die kaum Wünsche offen lässt. Schon bald werden Sie merken, dass die Entwicklung richtig Spaß machen kann.
Anmerkungen Der Referenzteil stellt Ihnen eine Auswahl nützlicher Programme und Webseiten vor, die Sie für die Template-Entwicklung gut gebrauchen können. Die gebräuchlichsten Template-Befehle finden Sie zum schnellen Nachschlagen ebenfalls dort. Ist Ihnen eine
7356 Joomla Templates_NEU.indd 6
05.10.2009 10:34:26
Einleitung
7
Abkürzung oder ein Begriff aus der Joomla-Welt unklar, schlagen Sie am Ende des Buchs einfach nach.
Dateien zum Buch Alle nötigen Dateien zum Buch gibt es unter http://wellpanda.bloggerschmidt.de
Dort finden Sie unter anderem das Blanko-Template, das Screendesign zum Buch als Photoshop-Datei, das hier im Buch erstellte Template in der fertigen Version sowie Bilder und Quelltexte. Eine Demoversion des Templates können Sie dort ebenfalls begutachten.
7356 Joomla Templates_NEU.indd 7
05.10.2009 10:34:26
8
Widmung Dieses Buch ist allen Webdesignern gewidmet, die auf der Suche nach einer guten Template-Engine sind. Meine Liebe und Dankbarkeit gilt meiner Verlobten Nina und meinem Sohn Justus, die mich uneingeschränkt unterstützten und einige Entbehrungen auf sich genommen haben. Alexander Konrad Johannes Schmidt Bad Nauheim, im September 2009
7356 Joomla Templates_NEU.indd 8
05.10.2009 10:34:26
9
Inhalt 1
Das Joomla-Template ................................................................................... 13 1.1 Was ist ein Joomla-Template? .......................................................... 13 1.2 Wieso werden Templates eingesetzt? ............................................... 16 1.3 Die Standard-Templates von Joomla ................................................. 17
2
Die Joomla-Testumgebung ........................................................................... 19 2.1 Lokaler Webserver mit XAMPP ......................................................... 19 2.1.1 XAMPP für Windows (XP, Vista Windows 7) ........................................20 2.1.2 XAMPP für Mac (OS X) .......................................................................27 2.1.3 XAMPP für Linux (Ubuntu) .................................................................31 2.2 Die Testumgebung einrichten .......................................................... 34 2.3 Die Installation von Joomla .............................................................. 37
3
Der Aufbau eines Templates ......................................................................... 47 3.1 Das Blanko-Template ....................................................................... 47 3.2 Sprachdateien ................................................................................. 49 3.3 Cascading Style Sheets ................................................................... 50 3.3.1 template.css .....................................................................................50 3.3.2 ieonly.css ..........................................................................................52 3.3.3 editor.css ..........................................................................................52 3.3.4 Zehn Praxistipps zum besseren Codieren mit CSS ..............................53 3.3.5 Hacks für den Internet Explorer..........................................................60 3.4 Fehlseite ......................................................................................... 62 3.5 Favicon ........................................................................................... 62 3.6 Overrides ........................................................................................ 63 3.7 Bilder .............................................................................................. 65 3.7.1 Grafikformate ....................................................................................65 3.7.2 Bildgröße ..........................................................................................66 3.7.3 Transparenz ......................................................................................66 3.7.4 Der PNG-Fix .......................................................................................67 3.7.5 Einsatzgebiete ..................................................................................68
Erstellung eines Screendesigns ................................................................. 113 5.1 Vorüberlegung ............................................................................... 113 5.2 Vorbereitung ................................................................................ 113 5.2.1 Logo als Ausgangspunkt .................................................................113 5.2.2 Schrifttyp für das Logo ....................................................................114 5.2.3 Textur für den Hintergrund ...............................................................115 5.2.4 Bilder für den Inhalt ........................................................................116 5.3 Anleitung ...................................................................................... 118
6
Vom Layout zum Template.......................................................................... 149 6.1 Ein Blick auf das Screendesign ...................................................... 149 6.1.1 Der Header ......................................................................................152 6.1.2 Content ...........................................................................................153 6.1.3 Der Footer .......................................................................................154 6.2 Die Modulpositionen festlegen ...................................................... 154 6.3 Die Parameter bestimmen ............................................................. 155 6.4 Die Bilder erstellen ........................................................................ 156 6.4.1 Der Hintergrund ..............................................................................157
Das Menü .......................................................................................159 Elemente des Inhalts.......................................................................167 Der Footer .......................................................................................181 Die Installationsroutine festlegen .................................................. 182 Das Template weiter vorbereiten .................................................... 187 Namen ändern ................................................................................187 Sprachdateien verfassen .................................................................188 Vorschaubild und Favicon erstellen .................................................188 Das Template als Standard auswählen ............................................189 Blindtexte, Menüs und Module anlegen ......................................... 190 Blindtexte schreiben .......................................................................191 Menüs anlegen ...............................................................................193 Module verwalten ...........................................................................195 Den Index programmieren ............................................................. 205 Das Modul-Chrome codieren ......................................................... 217 Die Cascading Style Sheets definieren ........................................... 219 Reset & Start ...................................................................................221 Layout .............................................................................................224 Menüs ............................................................................................230 Sofortkontakt ..................................................................................237 Slideshow .......................................................................................239 Weitere Angebote ............................................................................242
7
Prüfen und validieren ................................................................................ 245 7.1 Auflösung der Browser .................................................................. 245 7.2 W3C-Validator ............................................................................... 248 7.3 Darstellung in Browsern ................................................................ 250 7.3.1 Browser Collection ..........................................................................250 7.3.2 Unterschiedliche Betriebssysteme...................................................252 7.3.3 Screenshots ....................................................................................253 7.4 Ladezeit der Website ..................................................................... 255
A
Verzeichnisstruktur von Joomla .................................................................. 257
Abkürzungen und Begriffe ......................................................................... 271 Index ......................................................................................................... 277
7356 Joomla Templates_NEU.indd 12
05.10.2009 10:34:26
13
1 1.1
Das Joomla-Template Was ist ein Joomla-Template?
Ein Joomla-Template ist – grob gesagt – das Webdesign für Joomla und noch ein bisschen mehr. Um abgrenzen zu können, um was genau es sich handelt, bedarf es zunächst der Erklärung einiger Begriffe: Screendesign Unter dem Screendesign wird das statische Layout verstanden, das mit einem Bildbearbeitungsprogramm erstellt wird. Es ist in aller Regel eine Photoshop-, Fireworks- oder Freehand-Datei mit dem Entwurf eines Webdesigns. In diesem Entwurf zeichnet sich die spätere Funktionalität einer Website bereits ab. Webdesign Webdesign ist die Umsetzung des Screendesigns in HTML, CSS, JavaScript und Grafiken. Es kann mit einem WYSIWYG-Editor wie Dreamweaver oder Expression Web oder mit ganz einfachen Editoren erstellt werden. Es umfasst den Aufbau, die Gestaltung und die Nutzerführung einer Website. Der Webdesigner hat die Aufgabe, die Anforderungen des Auftraggebers mit den Wünschen des Nutzers, also dem Besucher der Seite, in Einklang zu bringen und dabei den elegantesten technischen Weg zu wählen. Template Ein Template ist das Webdesign für ein Content Management System (CMS) und ebenfalls noch ein bisschen mehr. Es umfasst einerseits das klassische Webdesign und andererseits den CMS-eigenen Programmcode. Der Programmcode wird dazu eingesetzt, die Funktionalität des Webdesigns zu erweitern, beispielsweise Platzhalter für spätere Inhalte zu schaffen. Ein Template-Designer ist somit Webdesigner und Programmierer zugleich.
7356 Joomla Templates_NEU.indd 13
05.10.2009 10:34:26
14
Kapitel 1: Das Joomla-Template
Ein Joomla-Template ist also das Webdesign in PHP, HTML, CSS und JavaScript, angereichert durch Bilder und Grafiken. Sie benötigen einige Fähigkeiten, um ein Joomla-Template zu entwickeln. Vielleicht meinen Sie an dieser Stelle: »Okay. Ich kann gar nichts von all dem. Das lasse ich lieber.« Dann sei Ihnen gesagt: Nur Mut! Sie werden es lernen, wenn Sie weiterlesen. Zugegeben, es wird manchmal ein bisschen knifflig. Doch mit etwas Motivation, Ausdauer und einer gut funktionierenden Kaffeemaschine werden Sie es schaffen. Sinn und Zweck eines Templates Ein Joomla-Template ist verantwortlich für das Aussehen und die Struktur einer Website. Es besteht aus einem Bündel von Dateien, die zusammen den Rahmen der Seite bilden. Im Frontend sowie im Backend von Joomla dienen Templates als Vorlage. Bei jeder Installation von Joomla werden Standard-Templates installiert, die als Ausgangspunkt dienen. Auf vielen Seiten im Internet finden Sie eine Reihe zusätzlicher Templates, die zum Teil von Webdesignprofis programmiert wurden, zum Teil aber auch von absoluten Anfängern. Wenn Sie dieses Buch durchgearbeitet haben, werden Sie die guten Templates von den schlechten zu unterscheiden wissen. Viele Templates im Netz sind frei erhältlich; andere hingegen werden mit Nutzerlizenzen verkauft. Um den eigenen individuellen Ansprüchen gerecht zu werden, kann man entweder ein vorhandenes Template an seine Bedürfnisse anpassen oder ein eigenes von Grund auf programmieren. Beide Wege werden in diesem Buch beschrieben. Auf einer Website, die unter unserem bevorzugten Content-Management-System Joomla läuft, dient ein Template also als gestalterische Vorlage. Es ist keine eigenständige Website und bestimmt auch nicht allein das Aussehen einer Website. Es ist vielmehr die Grunddefinition der Website, und erst durch Hinzufügen des Inhalts entsteht die letztendliche Darstellung der Site.
7356 Joomla Templates_NEU.indd 14
05.10.2009 10:34:26
1.1 Was ist ein Joomla-Template?
15
Bild 1.1: Website ohne Inhalt.
Bild 1.2: Website mit Inhalt.
7356 Joomla Templates_NEU.indd 15
05.10.2009 10:34:26
16
1.2
Kapitel 1: Das Joomla-Template
Wieso werden Templates eingesetzt?
Die Grundaufgabe eines Content Management-Systems, also auch von Joomla, ist die Trennung des Inhalts (Content) von der Gestaltung (Layout). Auf jeder Website, die mit Joomla realisiert wird, kommen verschiedene Elemente zum Einsatz, die bestimmte Aufgaben erfüllen sollen. Sie entscheiden im Vorfeld, welche Erweiterungen (Komponenten, Module und Plug-ins) für diese Aufgaben infrage kommen. So werden vielleicht ein Firmenlogo, die Navigation, die Pfadangabe, der Inhalt und die Anmeldung ihren Platz auf Ihrer Website finden, der in den meisten Fällen auch auf den Unterseiten der gleiche bleibt. Dazu sollen auf allen Seiten Ihres Webauftritts einige Schriften, Hintergründe, Abstände und Farben ebenfalls wiederverwendet werden. Genau hier kommt die Stärke eines Templates zum Tragen. Im besten Fall brauchen Sie nämlich nur einmal zu definieren, wie eine Überschrift auszusehen hat, und Joomla wird diese auf allen Seiten genau so anzeigen lassen. Wenn Sie dann nachträglich die Farbe der Überschrift ändern, wird das für alle nachgeordneten Seiten übernommen. Wir wollen uns nicht vorstellen, welchen Krampf im Zeigefinger eine statische HTML-Seite hervorrufen würde, wenn wir auf jeder einzelnen von vielleicht 50 Seiten die Überschrift ändern wollten. Und noch ein Vorteil: Stellen Sie sich vor, Sie setzen eine Website online mit Joomla auf, und Ihre Kollegen bestücken sie fleißig mit Inhalten. Jetzt wäre es denkbar ungünstig, am selben System die Gestaltung umzusetzen. Sie können deshalb ohne Weiteres, etwa auf einer lokalen Joomla-Testumgebung, ein Template entwickeln, das sich später ganz einfach als Erweiterung im Backend online installieren lässt. So kommen Sie sich in keiner Weise in die Quere, und es herrscht perfekte Arbeitsteilung. Gestalterische Änderungen an der Website werden ausschließlich im Template vorgenommen und sind so sehr leicht zu realisieren. Sie können sogar der ganzen Website mit einem neuen Template ein komplett anderes Aussehen verschaffen. Zusammengefasst: Die Darstellung der Inhalte wird vom Template übernommen. Im Joomla-Template werden sämtliche Definitionen der Gestaltung hinterlegt, die den äußeren Eindruck einer Website maßgeblich bestimmen. Wenn ein Template erst einmal steht, kann man dennoch durch Einfügen von Inhalten wie zum Beispiel Bildern und Tabellen die Gestaltung und Wirkung der kompletten Seite ändern.
7356 Joomla Templates_NEU.indd 16
05.10.2009 10:34:27
1.3 Die Standard-Templates von Joomla
1.3
17
Die Standard-Templates von Joomla
Bei jeder Installation von Joomla werden drei Templates gleich mit installiert: •
Milkyway Milkyway ist ein frisches Template für Joomla. Das saubere Design dieses Templates ist sehr kompakt und wirkt leicht.
•
Beez Ein barrierefreies Template für Joomla. Dieses Template werden wir später nach unseren Wünschen ändern.
•
JA Purity Ein elegantes und einfach anpassbares Template.
Bild 1.3: Standard-Template Milkyway.
Anhand dieser drei Templates kann man sehr schön sehen, wie der gleiche Inhalt durch unterschiedliche Templates wirkt. Um zu erfahren, wie man Templates installiert und auswählt, benötigen wir allerdings erst einmal Joomla. Im nächsten Kapitel werden wir uns damit beschäftigen, wie wir Joomla auf dem eigenen Rechner installieren. Ziel ist es, eine lokale Testumgebung aufzubauen, in der wir schalten und walten können, wie es uns beliebt.
7356 Joomla Templates_NEU.indd 17
05.10.2009 10:34:27
18
Kapitel 2: Die Joomla-Testumgebung
Bild 1.4: Standard-Template Beez.
Bild 1.5: Standard-Template JA Purity.
7356 Joomla Templates_NEU.indd 18
05.10.2009 10:34:27
19
2
Die Joomla-Testumgebung
In diesem Kapitel beschäftigen wir uns mit der Einrichtung einer Testumgebung, damit wir unabhängig von einem anderen System unsere Arbeit verrichten können. Zunächst lernen Sie das Softwarebündel XAMPP kennen. Mithilfe von XAMPP setzen Sie einen lokalen Webserver mitsamt Datenbank auf und schaffen damit die Grundvoraussetzung für Joomla. Danach werden Sie Joomla installieren. Eine Joomla-Testumgebung ist notwendig, um Arbeiten an Joomla lokal verrichten zu können. Ergebnisse sowie spätere Änderungen werden sofort sichtbar und müssen nicht umständlich auf einen Server im Internet hochgeladen werden. Im Folgenden erklären wir die Installation von XAMPP für die Betriebssysteme Windows, Mac und Linux.
2.1
Lokaler Webserver mit XAMPP
Um unsere lokale Testumgebung einzurichten, greifen wir auf XAMPP zurück. XAMPP besteht aus einem Webserver namens Apache, der Datenbank MySQL und den Skriptsprachen PHP und Perl. Der Buchstabe X steht hier für die jeweilige Rechnerplattform: •
X für Linux, Windows, Mac OS oder Solaris (Plattform)
•
A für Apache (Webserver)
•
M für MySQL (Datenbank)
•
P für PHP (Skriptsprache)
•
P für Perl (Skriptsprache)
XAMPP ist also eine Distribution von Apache, MySQL, PHP und Perl, die es ermöglicht, diese Programme auf sehr einfache Weise zu installieren. Sie ist Open Source (freie Software, deren Quelltext jedermann zugänglich ist) und wird unter der GNU General Public License kostenlos zur Verfügung gestellt. Die Entwickler der XAMPP-Plattform sind uneigennützig tätig, über eine Spende würden sie sich dennoch sehr freuen.
7356 Joomla Templates_NEU.indd 19
05.10.2009 10:34:28
20
Kapitel 2: Die Joomla-Testumgebung
Unter http://www.apachefriends.org/de/xampp.html
laden Sie XAMPP für Ihr Betriebssystem herunter und brauchen das Paket dann nur noch zu entpacken und zu installieren. Danach können Sie sofort starten. Es ist nicht notwendig, Konfigurationsdateien zu ändern, um die Plattform zum Laufen zu bringen. Einfacher lässt sich eine Testumgebung nicht installieren. Aufgrund der Vielzahl an Software und Modulen, die das Paket enthält, kann XAMPP nicht als sicher eingestuft werden. Das heißt, dass Sie XAMPP nicht als Server für den professionellen Einsatz nutzen sollten. Mit ein paar Handgriffen können Sie XAMPP aber nachträglich internettauglich machen. Wie, das erfahren Sie unter oben angegebener Internetadresse. Für unsere Zwecke reicht die Grundinstallation aber völlig aus, und am Beispiel aller gängigen PC-Betriebssysteme werden wir jetzt die Installation durchführen.
2.1.1
XAMPP für Windows (XP, Vista, Windows 7)
Erster Schritt: Herunterladen Wählen Sie »XAMPP für Windows« unter der Internetadresse http://www. apachefriends.org/de/xampp.html aus und laden Sie die Installer-Version herunter. Zweiter Schritt: Installieren Starten Sie den Installer, indem Sie auf die EXE-Datei doppelklicken. Sie bekommen einen Sicherheitshinweis, in dem Sie gefragt werden, ob Sie die Software ausführen wollen. Klicken Sie auf den Button »Ausführen«.
7356 Joomla Templates_NEU.indd 20
05.10.2009 10:34:28
2.1 Lokaler Webserver mit XAMPP
21
Bild 2.1: Die Sicherheitswarnung vor der Installation.
Wählen Sie bei der Sprachauswahl die Option »Deutsch« und bestätigen Sie die Auswahl mit »OK«.
Bild 2.2: Hier legen Sie die Sprache fest, unter der XAMPP installiert wird.
7356 Joomla Templates_NEU.indd 21
05.10.2009 10:34:28
22
Kapitel 2: Die Joomla-Testumgebung
Der Installationsassistent wird nun gestartet. Klicken Sie auf »Weiter«.
Bild 2.3: Dieser Assistent wird Sie durch die Installation von XAMPP begleiten.
Hier können Sie nun das Zielverzeichnis auswählen. Standardmäßig wird XAMPP in dem Ordner c:\xampp installiert. Klicken Sie auf »Weiter«.
Bild 2.4: XAMPP wird in das Zielverzeichnis installiert.
7356 Joomla Templates_NEU.indd 22
05.10.2009 10:34:28
2.1 Lokaler Webserver mit XAMPP
23
Sie können auswählen, ob ein Desktop-Icon erstellt und ein Eintrag im Menü »Start > Programme« angelegt werden soll. Klicken Sie danach auf »Installieren«.
Bild 2.5: Konfiguration von XAMPP für Windows.
7356 Joomla Templates_NEU.indd 23
05.10.2009 10:34:28
24
Kapitel 2: Die Joomla-Testumgebung
XAMPP wird installiert. Der grüne Fortschrittsbalken hält Sie über den Fortgang der Installation auf dem Laufenden.
Bild 2.6: Bitte warten Sie, während XAMPP installiert wird.
Kurzzeitig öffnet sich das Fenster mit der Eingabeaufforderung, das sich bald darauf aber von allein wieder schließt.
Bild 2.7: Das XAMPP-Setup von Apachefriends in der Eingabeaufforderung.
7356 Joomla Templates_NEU.indd 24
05.10.2009 10:34:28
2.1 Lokaler Webserver mit XAMPP
25
XAMPP wurde erfolgreich installiert. Sie können nun auf »Fertig stellen« klicken.
Bild 2.8: Die Installation von XAMPP wird abgeschlossen.
Nach der Installation werden Sie gefragt, ob Sie das Control Panel (zu Deutsch: Steuerkonsole) von XAMPP starten möchten. Klicken Sie dafür auf »Ja«.
Bild 2.9: Herzlichen Glückwunsch! Die Installation war erfolgreich!
Dritter Schritt: Starten Wenn Sie im letzten Fenster auf »Ja« geklickt haben, öffnet sich das Control Panel von XAMPP. Alternativ können Sie unter C://xampp einfach auf die Datei »xampp-control. exe« klicken. Es öffnet sich das Kontrollzentrum von XAMPP. Hier können Sie die einzelnen Komponenten starten und stoppen. Starten Sie Apache und MySQL. Wenn beide laufen, wird im Kontrollzentrum die Meldung »Running« angezeigt.
7356 Joomla Templates_NEU.indd 25
05.10.2009 10:34:29
26
Kapitel 2: Die Joomla-Testumgebung
Starten Sie Apache und MySQL, indem Sie jeweils auf »Start« klicken.
Bild 2.10: Das XAMPP Control Panel.
Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost
Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme, die Sie ausführen können. Für uns zählt jetzt lediglich: Unser Testsystem ist eingerichtet.
Bild 2.11: Die Startseite von XAMPP unter Windows.
7356 Joomla Templates_NEU.indd 26
05.10.2009 10:34:29
2.1 Lokaler Webserver mit XAMPP
2.1.2
27
XAMPP für Mac (OS X)
Erster Schritt: Herunterladen Wählen Sie »XAMPP für Mac OS X« unter der Internetadresse http://www. apachefriends.org/de/xampp.html aus und laden Sie das DMG-Paket herunter.
Zweiter Schritt: Installieren Öffnen Sie das DMG-Paket und klicken Sie auf die PKG-Datei, um die Installation zu starten. Klicken Sie auf »Fortfahren«.
Bild 2.12: Sie werden durch alle Schritte geführt.
Wählen Sie die Macintosh HD aus und klicken Sie auf »Fortfahren«.
Bild 2.13: Wählen Sie das Laufwerk, auf dem XAMPP installiert werden soll.
7356 Joomla Templates_NEU.indd 27
05.10.2009 10:34:29
28
Kapitel 2: Die Joomla-Testumgebung
XAMPP wird im Ordner Programme installiert. Sie haben aber die Möglichkeit, den Installationsordner zu ändern. Klicken Sie auf den Button »Installieren«, nachdem Sie Ihre Wahl getroffen haben.
Bild 2.14: Klicken Sie auf »Installieren«, um die Installation vorzunehmen.
Die Installation wird gestartet.
Bild 2.15: Anhand des Balkens sehen Sie den Fortschritt der Installation.
7356 Joomla Templates_NEU.indd 28
05.10.2009 10:34:30
2.1 Lokaler Webserver mit XAMPP
29
Nach Beendigung können Sie das Fenster schließen.
Bild 2.16: Die Installation wurde erfolgreich abgeschlossen.
Dritter Schritt: Starten Unter Programme existiert nun ein Ordner xampp. Öffnen Sie den Ordner und klicken Sie auf »XAMPP Control Panel.app«. Nun öffnet sich das Kontrollzentrum von XAMPP. Hier können Sie die einzelnen XAMPP-Komponenten starten und stoppen. Starten Sie Apache und MySQL.
Bild 2.17: Start und Stopp der XAMPP-Komponenten.
7356 Joomla Templates_NEU.indd 29
05.10.2009 10:34:30
30
Kapitel 2: Die Joomla-Testumgebung
Klicken Sie bei Apache und MySQL jeweils auf »Start«. Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost
Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme, die Sie nach Wahl ausführen können. Unser Testsystem ist nun eingerichtet.
Bild 2.18: Die Startseite von XAMPP unter Mac.
7356 Joomla Templates_NEU.indd 30
05.10.2009 10:34:30
2.1 Lokaler Webserver mit XAMPP
2.1.3
31
XAMPP für Linux (Ubuntu)
Erster Schritt: Herunterladen Wählen Sie »XAMPP für Linux« unter der Internetadresse http://www.apachefriends. org/de/xampp.html aus und laden Sie das xampp-linux-tar.gz-Paket herunter.
Zweiter Schritt: Installieren Öffnen Sie ein Terminal (»Anwendungen > Zubehör > Terminal«) und entpacken Sie das soeben heruntergeladene Paket mit folgender Befehlszeile: sudo tar xvfz xampp-linux-1.7.tar.gz -C /opt
Geben Sie das Passwort ein, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden.
Bild 2.19: Über ein Terminal wird XAMPP entpackt.
Entpacken Sie XAMPP in das Verzeichnis /opt.
7356 Joomla Templates_NEU.indd 31
05.10.2009 10:34:30
32
Kapitel 2: Die Joomla-Testumgebung
Bild 2.20: Das Terminal zeigt den Fortschritt der Installation.
XAMPP wird entpackt und somit installiert. Dritter Schritt: Starten Bleiben Sie im Terminal und starten Sie das System mit folgender Befehlszeile: sudo /opt/lampp/lampp start
Geben Sie erneut das Passwort ein, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden.
7356 Joomla Templates_NEU.indd 32
05.10.2009 10:34:30
2.1 Lokaler Webserver mit XAMPP
33
Bild 2.21: Über das Terminal können Sie XAMPP starten.
Starten Sie XAMPP mit Apache und MySQL.
Bild 2.22: Die Komponenten von XAMPP starten Sie über das Terminal.
7356 Joomla Templates_NEU.indd 33
05.10.2009 10:34:30
34
Kapitel 2: Die Joomla-Testumgebung
XAMPP wurde erfolgreich gestartet. Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost
Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme zum Ausführen. Unser Testsystem steht.
Bild 2.23: Die Startseite von XAMPP unter Linux (Ubuntu).
2.2
Die Testumgebung einrichten
Eine Voraussetzung für die Installation von Joomla ist eine Datenbank. Diese Datenbank erstellen wir bequem über den Browser, indem wir http://localhost
aufrufen und in der linken Spalte auf die Option »phpMyAdmin« klicken. Dadurch öffnet sich das Browser-Interface für die MySQL-Datenbank. Hier können Sie nun eine »Neue Datenbank anlegen«.
7356 Joomla Templates_NEU.indd 34
05.10.2009 10:34:30
2.2 Die Testumgebung einrichten
35
Bild 2.24: Das Browser-Interface phpMyAdmin.
Geben Sie zum Beispiel joomla_lokal ein und klicken Sie auf die Option »Anlegen«. Als Datenbanktyp sollten Sie »Kollation« wählen.
Bild 2.25: Über phpMyAdmin können Sie die Datenbank anlegen.
7356 Joomla Templates_NEU.indd 35
05.10.2009 10:34:31
36
Kapitel 2: Die Joomla-Testumgebung
Bild 2.26: phpMyAdmin meldet die erfolgreiche Erzeugung der Datenbank.
Die Datenbank joomla_lokal steht uns nun für die Installation von Joomla zur Verfügung. Beim nächsten Schritt ist etwas Handarbeit gefragt, denn es geht ans Eingemachte der Konfiguration. Öffnen Sie mit einem beliebigen Editor (TextEdit, Notepad, gedit) in dem Ordner •
unter Windows:
C:\xampp\etc
•
unter Mac:
Programme > xampp > etc
•
unter Linux:
/opt/lampp/etc
die Datei php.ini. Bei dem Verzeichnis etc handelt es sich um einen Unterordner von xampp beziehungsweise lampp. In der php.ini gilt es, zwei Einstellungen auszuschalten, nämlich »Display Errors« und »Register Globals«.
7356 Joomla Templates_NEU.indd 36
05.10.2009 10:34:31
2.3 Die Installation von Joomla
37
Suchen und finden Sie in der Datei php.ini die Zeile display_errors = On
und ersetzen Sie sie durch display_errors = Off
Ebenso ersetzten Sie die Zeile register_globals = On
durch register_globals = Off
Speichern Sie nun die Datei ab. Damit die Änderungen wirksam werden, sollte der Webserver Apache neu gestartet werden. Öffnen Sie dazu unter Mac oder Windows das XAMPP Control Panel und starten Sie den Apache-Server erneut. Unter Linux (Ubuntu) können Sie das im Terminal mit sudo /opt/lampp/lampp restart
erreichen. Hier wird wieder nach dem Passwort gefragt, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden. Die Voraussetzung für die Installation von Joomla ist nun erfüllt. Zünden wir also die zweite Stufe.
2.3
Die Installation von Joomla
Nachdem wir uns eine Testumgebung geschaffen haben, können wir Joomla jetzt installieren. Laden Sie sich die aktuelle Version kostenfrei unter einer der folgenden Adressen herunter: •
http://www.joomla.org
•
http://www.joomla.de
Unter der erstgenannten Adresse, der Mutterseite von Joomla, finden Sie das CMS in englischer Sprache. Auf der deutschen Seite unter der zweiten Adresse können Sie auch die übersetzte deutschsprachige Version herunterladen. Auf beiden Seiten finden Sie stets die aktuelle Version unter dem Stichwort »Download«.
7356 Joomla Templates_NEU.indd 37
05.10.2009 10:34:31
38
Kapitel 2: Die Joomla-Testumgebung
Laden Sie sich Joomla herunter und entpacken Sie das Paket. Beim Entpacken entsteht ein Ordner, den Sie in joomla umbenennen sollten – das vereinfacht den Aufruf über einen Browser. Kopieren Sie ihn in den dafür vorgesehenen Ordner unserer Testumgebung. •
unter Windows:
C:\xampp\htdocs
•
unter Mac:
Programme > xampp > htdocs
•
unter Linux:
/opt/lampp/htdocs
Unter Linux (Ubuntu) erreichen Sie das mit folgender Eingabe im Terminal: sudo cp joomla /opt/lampp/htdocs
Auch hier müssen Sie wieder das Passwort angeben, unter dem Sie sich am Linux-System anmelden. Im Ordner htdocs sollte nun ein Unterordner namens joomla liegen, der eine Vielzahl von Dateien enthält. Kommen wir nun zur eigentlichen Installation. Öffnen Sie einen Browser und geben Sie folgende Adresse ein, um die Installationsroutine zu starten: http://localhost/joomla joomla ist hierbei der vorher umbenannte Ordner. Sollte die Verbindung fehlschlagen und Sie keine Seite sehen, stellen Sie bitte sicher, dass Apache und MySQL in der XAMPPUmgebung gestartet sind und laufen.
Wählen Sie die Option »Deutsch« aus und klicken Sie auf »Weiter«.
7356 Joomla Templates_NEU.indd 38
05.10.2009 10:34:31
2.3 Die Installation von Joomla
39
Bild 2.27: Über den Browser wird die Installation von Joomla gestartet.
Bild 2.28: Der Installationsassistent überprüft die Voraussetzungen für Joomla.
7356 Joomla Templates_NEU.indd 39
05.10.2009 10:34:31
40
Kapitel 2: Die Joomla-Testumgebung
Bei der Installationsprüfung sollten alle Funktionen grün markiert sein. In unserem Fall ist der Hinweis »configuration.php beschreibbar« allerdings in roter Farbe und mit »Nein« gekennzeichnet. Lesen wir, was da steht: »Sie können dennoch mit der Installation fortfahren, da Ihnen die Konfiguration am Ende angezeigt wird. Sie müssen einen zusätzlichen Schritt ausführen, um den Quelltext manuell hochzuladen. Kopieren Sie den angezeigten Quelltext aus dem Eingabefeld in eine neue Datei mit Namen configuration.php und laden Sie diese in das Hauptverzeichnis Ihrer Joomla!-Website.« Um die Datei configuration.php werden wir uns also am Ende der Installation kümmern. Klicken Sie nun auf »Weiter«.
Bild 2.29: Joomla steht unter der GNU General Public License.
Hier sehen Sie die GNU General Public License, unter der Joomla veröffentlicht ist. Sie können wiederum auf »Weiter« klicken.
7356 Joomla Templates_NEU.indd 40
05.10.2009 10:34:32
2.3 Die Installation von Joomla
41
Bild 2.30: Geben Sie die Zugangsdaten für die Datenbank ein.
Im nächsten Schritt geht es um die Datenbankkonfiguration. Hier werden Sie nach einigen Einstellungen gefragt, die folgendermaßen lauten (sofern Sie eine XAMPP-Testumgebung wie zuvor beschrieben eingerichtet haben): •
Datenbanktyp:
mysql
•
Servername:
localhost
•
Benutzername:
root
•
Passwort:
•
Datenbankname:
joomla_lokal
Ein Passwort für MySQL haben wir nicht vergeben, somit bleibt dieses Feld leer. Wir betreiben lokal einen Webserver und können dieses Sicherheitsrisiko durchaus eingehen.
7356 Joomla Templates_NEU.indd 41
05.10.2009 10:34:32
42
Kapitel 2: Die Joomla-Testumgebung
Wenn Sie Joomla online auf einem Webserver installieren, benötigen Sie hierfür die Daten der Datenbank Ihres Providers. Die erweiterten Einstellungen können so bleiben, wie sie sind. Klicken Sie auf »Weiter«.
Bild 2.31: Die optionale FTP-Konfiguration von Joomla.
Eine FTP-Konfiguration ist für uns nicht nötig. Das Kürzel FTP steht für File Transfer Protocol. Dieses Protokoll ist für die Datenübertragung im Netz vorgesehen. Sie können diesen Schritt durch einen Klick auf »Weiter« überspringen.
7356 Joomla Templates_NEU.indd 42
05.10.2009 10:34:32
2.3 Die Installation von Joomla
43
Bild 2.32: Die Hauptkonfiguration von Joomla.
7356 Joomla Templates_NEU.indd 43
05.10.2009 10:34:32
44
Kapitel 2: Die Joomla-Testumgebung
In der Hauptkonfiguration können Sie den Namen der Website angeben. Hinterlassen Sie auch eine E-Mail-Adresse und ein Passwort für die Administration. Mit diesem Passwort werden Sie sich dann in das CMS einloggen können. Die Beispieldateien brauchen wir nicht und können somit diesen Schritt überspringen. Joomla stellt für Umzüge von alten Versionen ein Migrationsverfahren zur Verfügung. Die dafür notwendige Skriptdatei können Sie bei Bedarf hier angeben. Auch diesen Schritt brauchen wir jetzt nicht und können mit einem Klick auf »Weiter« fortfahren.
Bild 2.33: Ein kurzer Sicherheitshinweis.
Zur Sicherheit bestätigen Sie noch einmal mit »OK«.
Bild 2.34: Die Installation von Joomla kommt zum Abschluss.
Die Installation wird abgeschlossen, indem Sie den Ordner installation im Verzeichnis joomla löschen. Im Normalfall wird die Konfigurationsdatei jetzt automatisch erstellt. Ist die Konfigurationsdatei aber nicht beschreibbar oder gab es ein anderes Problem beim Speichern der Konfiguration, müssen Sie den PHP-Code, der Ihnen im Browserfenster
7356 Joomla Templates_NEU.indd 44
05.10.2009 10:34:33
2.3 Die Installation von Joomla
45
bereitgestellt wird, manuell hochladen. Markieren Sie dann den gesamten Text im Textfeld, kopieren Sie ihn in eine neue Datei, die Sie configuration.php nennen, und laden Sie diese in das Hauptverzeichnis Ihrer Joomla-Website. Benutzen Sie dazu einen einfachen Editor wie TextEdit, Notepad oder gedit. Die Installation ist nun abgeschlossen. Mit einem Klick auf »Website« gelangen Sie zum Frontend. Sie sehen nun im Browser die Website, die von Joomla angelegt wurde. Mit einem Klick auf »Admin« gelangen Sie zum Backend. Hier finden Sie alle Bedienelemente und Einstellungsoptionen, die Sie für den Umgang mit Joomla benötigen.
Bild 2.35: Das Frontend von Joomla.
In unserer Testumgebung öffnen Sie die Website mit dieser URL: http://localhost/joomla
Im Backend können Sie sich als Administrator mit dem Passwort, das Sie während der Installation vergeben haben, einloggen. Der Benutzername des ersten Administrators lautet admin. Sie erreichen das Backend, wenn Sie im Browser die Adresse http://localhost/joomla/administrator
eingeben.
7356 Joomla Templates_NEU.indd 45
05.10.2009 10:34:33
46
Kapitel 2: Die Joomla-Testumgebung
Bild 2.36: Das Backend von Joomla.
7356 Joomla Templates_NEU.indd 46
05.10.2009 10:34:33
47
3 Der Aufbau eines Templates 3.1
Das Blanko-Template
Der Aufbau eines Templates lässt sich am besten an einem Beispiel erklären. Für die Template-Entwicklung ist es sinnvoll, ein Blanko-Template einzusetzen. Ein Blanko-Template ist ein Template, das weder Layout-Elemente noch eine Seitenstruktur aufweist, aber voll funktionstüchtig ist und sich fehlerfrei installieren lässt. Ein solches Template finden Sie auf www.buch.cd. Es kann zudem unter http://www.bloggerschmidt.de/blankotemplate
heruntergeladen werden. Wenn Sie das ZIP-Paket geladen haben, dann entpacken Sie das Template, das aus zahlreichen Verzeichnissen und Dateien besteht, die im Anschluss erläutert werden.
Bild 3.1: Die Struktur des Blanko-Templates.
7356 Joomla Templates_NEU.indd 47
05.10.2009 10:34:33
48 •
Kapitel 3: Der Aufbau eines Templates
admin
Der Ordner beinhaltet nur eine Datei; die Sprachdatei zum Template für das Backend. •
css
In diesem Ordner liegen alle Cascading Style Sheets. •
de-DE.tpl_TEMPLATENAME.ini
Die Sprachdatei zum Template für das Frontend. •
error.php
Kann eine Seite nicht gefunden werden, wird diese Seite mit einer Fehlermeldung angezeigt. •
favicon.ico
Das Icon (kleines Bild) wird im Browser links neben der URL angezeigt und dient der Wiedererkennung des Lesezeichens. •
html
Alle Dateien der Overrides müssen in diesem Ordner liegen. Overrides überschreiben die HTML-Kerndateien und werden in Abschnitt 3.5 im Detail erläutert. •
images
Alle Bilder werden zur besseren Übersicht in diesen Ordner gelegt. Der Ordnername ist frei wählbar, dennoch empfiehlt es sich, den selbsterklärenden Namen images zu verwenden. •
index.html
Die Datei verhindert die Auflistung der Inhalte eines Ordners. Läge kein Index vor, wären die Inhalte eines Verzeichnisses für jedermann einsehbar. Die Datei gibt nur eine leere, weiße Seite aus und gehört in jeden Ordner unter Joomla. •
index.php
Die wichtigste Datei des Templates wird aufgebaut aus PHP, HTML, JavaScript, Joomla-Anweisungen und Parameterabfragen. Die CSS- und JavaScript-Dateien werden hier verlinkt. •
js
Der Name des Ordners ist frei gewählt. Hier werden die JavaScript-Dateien abgelegt. •
offline.php
Wird die Website unter Joomla offline geschaltet, bekommt der Besucher diese Datei zu Gesicht. •
params.ini
Einstellungen der Parameter werden in dieser Datei abgespeichert, um später darauf zugreifen zu können.
7356 Joomla Templates_NEU.indd 48
05.10.2009 10:34:34
3.2 Sprachdateien
•
49
psd
Dieser Ordner ist für das Template nicht zwingend notwendig. Er beinhaltet die Photoshop-Dateien zu einigen Bildern. •
template_thumbnail.png
Das Vorschaubild des Templates wird unter Joomla im Template-Manager angezeigt und dient der Wiedererkennung. •
templateDetails.xml
Diese Datei ist verantwortlich für die Installationsroutine. Zudem werden alle Parameter des Templates hier definiert. In diesem Ordner befinden sich alle Template-Dateien, die wir brauchen. In einem späteren Kapitel werden wir ihn mit ein paar Grafikdateien anreichern. Doch der Reihe nach: Um das Template zu verstehen, nehmen wir uns – von oben angefangen – alle Ordner und Dateien vor. Eine Besonderheit möchten wir an dieser Stelle vorwegnehmen: In jedem Ordner von Joomla liegt eine Datei namens index.html. Diese Datei ist ein Sicherheitsmerkmal von Joomla, die verhindert, dass der Besucher einer Seite ein Inhaltsverzeichnis des jeweiligen Ordners zu sehen bekommt. Sollten in dem Verzeichnis wertvolle Daten liegen, befänden sich die Dateien dann auf dem Präsentierteller. Stattdessen bekommt der Besucher nur eine weiße Seite zu Gesicht, wenn die Datei index.html vorhanden ist.
3.2
Sprachdateien
Der Ordner admin beinhaltet die Sprachdatei für das Backend. Das Pendant für das Frontend liegt im Root-Verzeichnis des Templates und trägt den gleichen Namen: de-DE. tpl_TEMPLATENAME.ini. Der Name setzt sich aus dem Länderkürzel, der Erweiterungsart, dem Template-Namen und der Dateiendung zusammen. Das Länderkürzel de-DE steht für die Sprache (de) und das Land (DE). Für die Schweiz wäre es z. B. de-CH. Die Erweiterungsart ist »Template«, abgekürzt tpl. Sprachdateien für Komponenten tragen das Kürzel com, Module mod und Plug-ins plg. Nun folgt ein Unterstrich (_) und der Template-Name mit der Dateiendung .ini, die für eine Initialisierungsdatei steht, sprich: eine Setup-Datei.
Bild 3.2: Die Sprachdatei für den Administrationsbereich von Joomla.
Bild 3.3: Die gleichnamige Datei für das Frontend.
7356 Joomla Templates_NEU.indd 49
05.10.2009 10:34:34
50
Kapitel 3: Der Aufbau eines Templates
Die Sprachdateien sind wichtig für Übersetzungsarbeiten. Stattet man ein Template mit Parametern aus, bekommen diese z. B. eine Beschreibung. Damit die Beschreibung auch in andere Sprachen übersetzt werden kann, finden Sprachvariablen Verwendung. Diese Variablen mit den dazugehörigen Texten, die für sie eingesetzt werden sollen, findet man in den Sprachdateien. Ein Beispiel ist die Beschreibung des Templates selbst, die unter der Variablen TEMPLATENAME DESCRIPTION abgelegt wird. Öffnet man die Datei de-DE.tpl_TEMPLATENAME.ini, findet man in der ersten Zeile folgenden Eintrag: TEMPLATENAME DESCRIPTION=Das ist das Blanko-Template.
Das heißt also: Immer wenn die Variable TEMPLATENAME DESCRIPTION irgendwo im Template auftaucht, wird in der Ausgabe der Text »Das ist das Blanko-Template. « angezeigt.
3.3
Cascading Style Sheets
Im Ordner css befinden sich alle Cascading Style Sheets des Templates. Die Datei index. html lässt auch hier nur eine weiße Seite erscheinen und verhindert so das Auflisten dieses Ordners.
Bild 3.4: Alle Cascading Style Sheets finden Platz im Ordner css.
Cascading Style Sheets (kurz: CSS) werden dazu verwendet, Definitionen des Layouts, der Inhalte, der Menüs und der Module zu hinterlegen. Farben, Abstände, Hintergründe, Positionen und Schriften werden hier bestimmt. CSS ist wie HTML (Hypertext Markup Language) eine Formatierungssprache – allerdings mit dem Unterschied, dass HTML für die Struktur einer Website genutzt wird, während CSS für die äußere Erscheinung zuständig ist. Kurz gesagt: Mit CSS bestimmen Sie das Aussehen Ihrer Website.
3.3.1
template.css
Das wichtigste Cascading Style Sheet heißt template.css. In dieser Datei wird Ihr Design definiert. Sie ist somit maßgeblich für die Gestaltung verantwortlich. Die template.css muss nicht zwingend template.css heißen, doch empfiehlt sich der Name zur besseren Einsortierung.
7356 Joomla Templates_NEU.indd 50
05.10.2009 10:34:34
3.3 Cascading Style Sheets
51
Schauen wir uns mal einen Auszug aus der template.css an:
Bild 3.5: Die Formatierung von template. css dient der Übersicht.
Durch die farbige Hinterlegung, auch Syntax-Highlight genannt, die einige Editoren bieten, wird eine bessere Übersicht erreicht. Tipp: Wenn Sie CSS-Dateien mit einem Editor bearbeiten wollen, achten Sie darauf, dass dieser die Syntax einfärben kann. Das dient nicht nur der Übersichtlichkeit, sondern hilft Ihnen auch bei der Fehlersuche. Die Datei template.css des Blanko-Templates ist in folgende Bereiche unterteilt: •
CSS
•
Layout
•
Menus
•
Links
7356 Joomla Templates_NEU.indd 51
05.10.2009 10:34:34
52
Kapitel 3: Der Aufbau eines Templates
•
Standard
•
Module
•
Content
•
Joomla
Diese Unterteilung hilft Ihnen, sich in dem Dokument zurechtzufinden. Unter der Abteilung CSS finden Sie das Reset des Sheets, um vorhandene Definitionen zurückzusetzen. Im Bereich Layout sind die Designdefinitionen hinterlegt. Menus beinhaltet die Gestaltung aller Menüs und Links die der Links. Unter Standard haben Standardelemente, wie beispielsweise eine horizontale Linie (hr), Platz. Module ist für alle eingesetzten Module gedacht und Content für den Inhalt. Zu guter Letzt stehen unter Joomla die Definitionen des CMS. Hier werden auch Teile des Inhalts definiert.
3.3.2
ieonly.css
Dieses Cascading Style Sheet ist nur für den Internet Explorer gedacht: ieonly.css. Weil Microsoft in der Vergangenheit die Webstandards nicht einhielt, dürfen Webdesigner dies mit sogenannten Hacks ausbaden und die Darstellung korrigieren. Hacks sind Anweisungen, die nötig sind, weil entweder die Webstandards nicht eingehalten werden oder weil man Bugs (Programmfehler) eines Browsers kompensieren muss. Mithilfe solcher Anweisungen können Sie eine nicht korrekte Darstellung wieder richtigstellen.
Bild 3.6: Hack zur Darstellung von korrekten Überschriften im Internet Explorer 6.
Im Laufe einer Template-Entwicklung kann dieses Sheet weiter bestückt werden. Doch soweit es geht, werden wir versuchen, Hacks durch gute Programmierung zu vermeiden. Hacks lassen ein gut gegliedertes Sheet unschön aussehen und haben etwas von einem Flickenteppich. Erst wenn uns keine Alternative bleibt, setzen wir Hacks ein. Das Sheet ieonly.css wird später nur vom Internet Explorer geladen. Das ist auch der Grund dafür, dass alle Hacks in diese Datei ausgelagert werden.
3.3.3
editor.css
Das dritte Cascading Style Sheet nennt sich editor.css und ist für den WYSIWYG-Editor unter Joomla gedacht. In den meisten Editoren können Sie den Pfad zu diesem CSS in der Konfiguration angeben. Im Editor wird der Inhalt eines Beitrags anders angezeigt als
7356 Joomla Templates_NEU.indd 52
05.10.2009 10:34:34
3.3 Cascading Style Sheets
53
später im Frontend der Website. Um die Darstellung im Editor zu bestimmen, kann auf dieses CSS zurückgegriffen werden. Bild 3.7: Schwarzer Text auf weißem Hintergrund für den Editor unter Joomla.
3.3.4 •
Zehn Praxistipps zum besseren Codieren mit CSS
Strukturieren Sie Ihr Sheet. In der Form, in der das template.css bereits vorliegt, ist es sinnvoll, jedes Cascading Style Sheet zu strukturieren. Ordnung ist nötig, damit Sie und andere sich schnell zurechtfinden, und erspart Ihnen jede Menge Zeit, wenn Sie das CSS später umschreiben oder erweitern. Die Struktur sollte dabei vom Allgemeinen ins Spezielle gehen.
Bild 3.8: Eine gute Struktur für ein Cascading Style Sheet.
•
Setzen Sie Definitionen zurück. Am Anfang eines CSS sollte ein Reset aller Definitionen erfolgen. Ziel dieser Zurücksetzung ist die Aufhebung der Browser-Inkonsistenzen, etwa bei der Zeilenhöhe oder den Schriftgrößen. Das Reset wird allgemein gehalten und schafft den bestmöglichen Ausgangspunkt für saubere Definitionen, die von den Browsern korrekt interpretiert werden. Individuelle Definitionen finden später ihren Platz.
7356 Joomla Templates_NEU.indd 53
05.10.2009 10:34:34
54
Kapitel 3: Der Aufbau eines Templates
Bild 3.9: Ein Reset am Anfang des CSS setzt alle Definitionen zurück.
•
Erstellen Sie eine Template-Bibliothek. Für erfahrene Webdesigner und Entwickler hat es sich als sehr nützlich erwiesen, eine Template-Bibliothek aufzubauen. Teile des Codes wiederholen sich nämlich. Viele immer wiederkehrende Probleme können mit sogenannten Schnipseln (engl. Snippets) gut gelöst werden. Das spart Ihnen Zeit, und die Fehleranfälligkeit des Codes wird geringer. Eine gut sortierte Bibliothek hat mehr Wert, als Sie vielleicht ahnen. Mit dem Programm Coda zum Beispiel können Sie mit Clips Ihre Schnipsel sehr gut verwalten. Coda ist kostenpflichtig und kann unter http://www.panic.com/coda
für etwa 68 Euro (99 Dollar) erworben werden.
7356 Joomla Templates_NEU.indd 54
05.10.2009 10:34:34
3.3 Cascading Style Sheets
55
Bild 3.10: Unter Coda lässt sich mit Clips eine Template-Bibliothek aufbauen.
•
Verwenden Sie nachvollziehbare Namen. Wenn Sie ein Drei-Spalten-Layout erstellen, benennen Sie die Spalten sinnvoll. Geben Sie ihnen beispielsweise die IDs #menu, #main und #sidebar. Eine schlechte Namenskonvention wäre #left, #middle und #right. Wieso? Die aktuelle Struktur betreffend, mögen die Namen einleuchtend sein, doch angenommen, nach zwei Jahren möchten Sie Ihre Website umgestalten und das linke Menü auf der rechten Seite platzieren: Wie verwirrend wäre es da, wenn die Spalte #left auf einmal rechts auftaucht. Eine große Stärke von CSS ist es ja, dass man das Layout komplett umpositionieren kann, ohne die HTML-Datei anzurühren.
7356 Joomla Templates_NEU.indd 55
05.10.2009 10:34:34
56
Kapitel 3: Der Aufbau eines Templates
Bild 3.11: Drei-Spalten-Layout mit guter Namenskonvention.
Bild 3.12: Drei-Spalten-Layout mit schlechter Namenskonvention.
7356 Joomla Templates_NEU.indd 56
05.10.2009 10:34:34
3.3 Cascading Style Sheets
57
Bild 3.13: Umpositioniertes Drei-Spalten-Layout mit schlechter Namenskonvention.
Bild 3.14: Umpositioniertes Drei-Spalten-Layout mit guter Namenskonvention.
7356 Joomla Templates_NEU.indd 57
05.10.2009 10:34:34
58 •
Kapitel 3: Der Aufbau eines Templates
Schreiben Sie Attribute in Kurzform in eine Zeile. Auch im Zeitalter der Breitbandleitungen gibt es noch genügend Nutzer, die mit einem analogen 56k-Highspeed-Modem ins Internet gehen. Die Ladezeit spielt dabei eine wesentliche Rolle. Es gilt: Wenn eine Seite nicht innerhalb von vier Sekunden aufgebaut ist, klickt der Besucher weg. Ein Weg, die Ladezeit zu verringern, ist, das CSS so schmal wie möglich zu halten. Versuchen Sie, die Attribute einer ID oder einer Klasse in Kurzform in eine Zeile zu schreiben. Um eine bessere Übersicht zu gewährleisten, sortieren Sie dabei die Attribute alphabetisch.
Bild 3.15: Attribute nehmen viel Platz ein, wenn sie untereinanderstehen.
Bild 3.16: Die Attribute in Kurzform in einer Zeile sparen Platz.
•
Vermeiden Sie Wiederholungen. Versuchen Sie, sooft es geht, IDs und Klassen zusammenzufassen, bevor Sie Stile wieder und wieder gleich deklarieren. Durch Kommata getrennt, brauchen Sie IDs oder Klassen nur einmal zu definieren.
Bild 3.17: Eine Zusammenfassung von Elementen ist sehr effizient.
Diese Schreibweise ist wesentlich besser und eleganter als diese hier:
Bild 3.18: Diese Schreibweise bläht das CSS unnötig auf.
7356 Joomla Templates_NEU.indd 58
05.10.2009 10:34:34
3.3 Cascading Style Sheets
59
•
Optimieren Sie die Größe des Sheets. Wenn Sie die vorherigen Tipps beherzigen, wird Ihr Cascading Style Sheet schmal und leicht. Kleine Dateien laden schneller und lassen sich besser aktualisieren. Löschen Sie alles, was Sie nicht brauchen, und fassen Sie Attribute zusammen, wo immer es geht. Kleiner Tipp am Rande: Eine Null (0) braucht keine Maßeinheiten. Wenn Sie etwa einen Außenabstand margin gleich 0 setzen, ist es egal, ob Sie 0px oder 0em meinen. Lassen Sie die Einheit einfach weg.
•
Codieren Sie erst für Gecko, dann für Webkit und den Internet Explorer. Sie tun sich selbst einen Gefallen und ersparen sich jede Menge Kopfschmerzen und zudem eine umfangreiche Fehlersuche, wenn Sie die Gestaltung erst für einen GeckoBrowser (Firefox, Mozilla, Netscape, Flock, Camino) codieren und danach für Webkit (Safari, Chrome) und den Internet Explorer.
•
Vermeiden Sie Hacks. Wo immer es geht, sollten Hacks vermieden werden. Erstens sind Hacks unschön und haben was von einem Flickenteppich. Zweitens sind einige Hacks nicht valide, und dann fällt Ihr CSS durch die W3C-Prüfung. Einige Hacks werden umgangen, wenn man Innen- und Außenabstände auslagert. Diese Abstände werden von den Browsern unterschiedlich interpretiert: Teilweise werden sie von der Seitenbreite und -höhe abgezogen, teilweise aber auch hinzuaddiert.
Bild 3.19: Eine div-Box, um Hacks zu vermeiden.
Eine div-Box mit zwei ineinander verschachtelten div-Containern schafft hier Abhilfe, wobei der erste Container alle Attribute bekommt, die nötig sind, und der zweite nur die Abstände margin und padding enthält.
Bild 3.20: Hacks werden vermieden, wenn Abstände ausgelagert werden.
•
Validieren Sie das CSS. Es gibt keine bessere Prüfung als die des W3C (World Wide Web Consortium). Wenn Sie mal einen Fehler nicht finden und Ihr CSS nicht das tut, was es soll, prüfen Sie es mit diesem freien Validator: http://jigsaw.w3.org/css-validator
7356 Joomla Templates_NEU.indd 59
05.10.2009 10:34:35
60
Kapitel 3: Der Aufbau eines Templates
Er hilft Ihnen, potenzielle Fehler aufzuspüren, und gibt Ihnen wertvolle Tipps zu deren Behebung.
3.3.5
Hacks für den Internet Explorer
Manchmal kommt man nicht drum herum: Man codiert nach bestem Wissen und Gewissen und nutzt div-Boxen, sooft es geht, doch die Internet Explorer 6 und 7 zeigen das Layout ganz anders an als die übrigen Browser. Hacks sind dann die Lösung. Sie sind dazu da, fehlende oder falsche Interpretationen wieder geradezubiegen. Damit aber nicht alle Browser darunter leiden, werden die Hacks für den Internet Explorer in ein separates CSS gepackt und nur dann geladen, wenn die Seite mit dem IE geöffnet wird. Die Indexdatei bekommt dazu im head-Bereich folgende Anweisung:
Der Inhalt dieser Browserweiche wird von allen IEs ab Version 5.0 gelesen.
Hinweis: Dieser Fix funktioniert bei allen PNG-Bildern, die mit einem img-Tag () in Ihrer Website eingebunden sind. Auf PNG-Bilder im Cascading Style Sheet hat dieser Fix dagegen keinen Einfluss.
3.7.5
Einsatzgebiete
Jedes Format hat seine Stärken und wird auf unterschiedlichen Gebieten eingesetzt. •
Bei Webdesigns mit wenigen Farben nutzen Sie GIF.
•
Bei Webdesigns mit vielen Farben nutzen Sie PNG.
•
Bei Webdesigns, bei denen Sie Transparenz einsetzen wollen, nutzen Sie PNG.
•
Bei Fotos oder Landschaften nutzen Sie JPG.
3.8
Index Bild 3.32: Die wichtigste Datei des Templates: index.php.
Zwei Indexdateien liegen im Template-Ordner. Die eine hat die Endung .html, die andere .php. Die Datei index.html soll verhindern, dass Besucher Ihrer Website den Template-Ordner auflisten können. Oftmals ist der Webserver so eingestellt, dass, wenn keine Indexdatei vorhanden ist, das Verzeichnis aufgelistet wird. Der Besucher bekommt dann sämtliche Ordner und Dateien zu Gesicht. Mit einer index.html und folgendem Inhalt können Sie dies unterbinden.
Das ist ein Sicherheitsmerkmal Ihrer Website.
7356 Joomla Templates_NEU.indd 68
05.10.2009 10:34:35
3.8 Index
69
Die wichtigste Datei Ihres Templates jedoch ist die index.php. Sie ist das Herz Ihrer Website und wird bei jedem Besuch der Website aufgerufen. Sie ist eine Kombination aus HTML und PHP und verantwortlich für den Quelltext.
Bild 3.33: Die Datei index.php im Detail.
3.8.1
Zugriffsschutz
Fangen wir ganz oben an.
7356 Joomla Templates_NEU.indd 69
05.10.2009 10:34:35
70
Kapitel 3: Der Aufbau eines Templates
In der ersten Zeile steht eine PHP-Anweisung, die veranlasst, dass Besucher Ihrer Website die Datei nicht direkt aufrufen können. _JEXEC ist eine Boole'sche Konstante, die entweder wahr oder falsch (1 oder 0) ist. Sie stellt sicher, dass Joomla und nicht eine Person direkt die Datei aufruft. Joomla setzt den Wert von _JEXEC auf 1. Nicht nur in Templates greift dieses Sicherheitsmerkmal, sondern auch in allen anderen Erweiterungen wie Komponenten, Modulen und Plug-ins. Ohne diese Konstante wäre es für Hacker ziemlich leicht, Ihre Website zu knacken und für eigene Zwecke zu verwenden.
3.8.2
Dokumenttyp (Doctype)
In der zweiten Zeile steht:
Diese Zeile teilt den Browsern mit, welcher Seitentyp vorliegt. Sie verrät, welche HTMLVersion oder -Syntax Sie im Quelltext nutzen. Diese Information hilft dem Browser, die Seite richtig darzustellen. Fehlt diese Information, versucht der Browser, die Seite bestmöglich anzuzeigen, kann sie aber unter Umständen falsch interpretieren. Der Internet Explorer 6 etwa macht das sehr gern: Wenn diesem kein Doctype vorliegt, stellt er sich in den »quirks«-Mode und kennt den Wert auto des CSS-Attributs margin plötzlich nicht mehr. Hinter jeder Dokumenttyp-Deklaration stehen Dokumenttyp-Definitionen (DTD). Diese regeln, welche Elemente ein Dokument enthalten darf, welche Elemente in anderen Elementen vorkommen dürfen, welche Attribute zu einem Element gehören und ob diese Pflicht sind. Sie können sich das als eine Art Norm für die Rechtschreibung vorstellen. Ohne die Deklaration würde die Auszeichnungssprache HTML schnell in Dialekte ausarten, und man wüsste dann nicht mehr, was jemand mit seinem Quelltext eigentlich beschreibt. Mit der Angabe des Dokumenttyps ist die Datei eine gültige und valide HTML-Datei. Hier eine Liste von Dokumenttypen: HTML 4.01:
7356 Joomla Templates_NEU.indd 70
05.10.2009 10:34:36
3.8 Index
71
XHTML 1.0:
XHTML 1.1:
Für HTML 4.01 und XHTML 1.0 gibt es drei Sprachvarianten: strict, transitional und frameset. Die Regeln bei strict zur Verschachtelung von HTML-Elementen sind streng definiert. So darf beispielsweise reiner Text nicht einfach zwischen und stehen, sondern sollte in einem Paragraph-Element () notiert sein. Diese Regeln sind bei transitional milder. Bei dieser Sprachvariante dürfen Sie zum Beispiel reinen Text in den body-Bereich schreiben. Die Variante frameset ist dafür gedacht, Framesets zu definieren. Frames gelten aber als veraltet und werden ab HTML 5 nicht mehr unterstützt. In XHTML 1.1 gibt es keine Sprachvarianten mehr. Es existiert lediglich strict von XHTML 1.0.
3.8.3
Sprache
Die dritte Zeile der index.php lautet:
Diese Zeile öffnet den HTML-Bereich und verrät, welche Sprache hier Verwendung findet. Die Einstellung wird von Joomla übernommen. Die Sprache des Systems ist die Sprache des HTML-Dokuments. Die Kopfdaten (head) und die sichtbaren Inhalte (body) werden jetzt abgelegt, bevor das html-Tag wieder geschlossen wird.
3.8.4
Header-Informationen
<jdoc:include type="head" />
7356 Joomla Templates_NEU.indd 71
05.10.2009 10:34:36
72
Kapitel 3: Der Aufbau eines Templates
Wir eröffnen den Kopfbereich mit dem head-Tag. Es folgt eine Joomla-eigene Anweisung, die veranlasst, die Header-Informationen zu laden: die jdoc-Anweisung. Diese Anweisung ist in jedem Template zu finden und bewirkt, dass Bestandteile von Joomla geladen und positioniert werden können. Die Header-Informationen bestehen aus den Metainformationen (u. a. Seitentitel; title ist ein Metatag), den Links zu den Newsfeeds (sofern sie eingestellt sind) und zur FaviconDatei favicon.ico, gefolgt von den Pfaden zu den JavaScript-Dateien des Systems. Eine Ausgabe könnte so aussehen:
Bild 3.34: Die Header-Informationen von Joomla im Quelltext.
3.8.5
Cascading Style Sheets
Nach den Header-Informationen werden die Cascading Style Sheets verlinkt.
Es werden zwei System-Sheets und Ihr eigenes Template-Sheet verlinkt. Die SystemSheets sind zuständig für die Ansicht der Nachrichtenausgabe des Systems. Wenn Sie im Frontend einen Artikel ändern und speichern, bekommen Sie eine Meldung über das erfolgreiche oder nicht erfolgreiche Vorgehen.
3.8.6
Browserweiche
Damit das Cascading Style Sheet mit den Hacks für den Internet Explorer auch nur von diesem geladen wird, wird es in einer Browserweiche verlinkt.
Die Weiche gilt für alle Versionen des Internet Explorer. Nach der Verlinkung zum HackSheet folgt die Aktivierung des PNG-Fix, damit die Transparenz von PNG-Bildern mit Alphaeffekt auch im Internet Explorer 6 richtig dargestellt wird. Eine Auswahl von Browserweichen: Syntax
Erklärung
[if IE]
alle Internet Explorer
[if IE 6]
Internet Explorer 6
[if lt IE 7]
alle IEs vor 7 (less-than = kleiner als)
[if lte IE 5.5999]
alle IEs bis 5.5 (less-than or equal = kleiner oder gleich)
[if gte IE 5.5]
alle IEs ab 5.5 (greater-than or equal = größer oder gleich)
Die ersten zwei Weichen werden in der Praxis am häufigsten verwendet. Die Varianten Internet Explorer 7 und 8 zeigen in den meisten Fällen das Layout korrekt an, sodass die meisten Hacks – wenn überhaupt – für den IE 6 geschrieben werden.
3.8.7
Inhalt und Struktur
Wir schließen den Kopfbereich und eröffnen den sichtbaren Inhalt.
Zwischen den body-Tags wird die Struktur der Seite hinterlegt. Die Layoutelemente werden hier definiert und Komponenten und Module eingebunden. Um die Erweiterungen einzubinden, greifen wir auf die Joomla-eigene Anweisung jdoc zurück. Diese Anweisung verwendeten wir schon im Kopfbereich, um die Header-Informationen zu laden. Das Attribut type gibt uns die Möglichkeit, eine Auswahl von Elementen, die geladen werden sollen, zu treffen.
7356 Joomla Templates_NEU.indd 73
05.10.2009 10:34:36
74
Kapitel 3: Der Aufbau eines Templates
Eine einfache Ausgabe wäre zum Beispiel: <jdoc:include type="module" name="breaddcrumbs" /> <jdoc:include type="component" /> <jdoc:include type="module" name="footer" />
Zugegeben: Diese Ausgabe ist etwas spartanisch. Doch sie funktioniert und ist zudem gültig. Was jetzt folgt, ist eine Auswahl von Elementen, die zur Verfügung stehen. component <jdoc:include type="component" />
Der Typ component veranlasst Joomla, die Komponenten an dieser Position zu laden, etwa com_content, die Komponente der Beiträge, oder com_contact, die der Kontakte. Diese Anweisung darf nur einmal im body-Bereich auftauchen. message <jdoc:include type="message" />
Dieses Element ist für die Systemnachrichten zuständig. Unter Joomla ist es möglich, Beiträge im Frontend zu bearbeiten. Wenn Sie einen Beitrag ändern und abspeichern, bekommen Sie vom System eine Nachricht darüber, ob der Vorgang erfolgreich war oder nicht. Derartige Nachrichten lassen sich mit dieser Anweisung einblenden. module <jdoc:include type="module" name="breadcrumbs" /> <jdoc:include type="module" name="menu" /> <jdoc:include type="module" name="sidebar" style="xthml" />
Mit dem Typ module binden Sie ein einzelnes Modul ein, das auf der Position veröffentlicht ist, die unter name angegeben wird. Beispielsweise kann man mit der ersten Zeile den Navigationspfad auf der Position breadcrumbs (engl. für Brotkrumen) anzeigen lassen. Der Besucher der Seite muss aber berechtigt sein, das Modul sehen zu dürfen. Ein weiteres optionales Attribut ist style. chrome Wählen Sie einen anderen style, wird das Modul in einem anderen Quelltext angezeigt. Verantwortlich dafür ist chrome. Es steuert, wie der HTML-Quelltext um das Modul
7356 Joomla Templates_NEU.indd 74
05.10.2009 10:34:36
3.8 Index
75
gerendert wird. Bekannte Variablen für chrome sind none, xhtml, outline, rounded, table und horz. •
Bild 3.40: Durch style="horz" erscheint das Hauptmenü so.
custom chrome – eigene Ausgaben Die Template-Engine von Joomla lässt es zu, auch eigene Ausgaben zu definieren, sprich: eigene chrome-Variablen für das Attribut style. Somit bekommt der Designer die komplette Kontrolle über das Aussehen der Module. Wenn wir in den Ordner html des Blanko-Templates schauen, finden wir dort eine Datei namens modules.php. In dieser Datei befindet sich die Definition für die Variable slider.
7356 Joomla Templates_NEU.indd 79
05.10.2009 10:34:36
80
Kapitel 3: Der Aufbau eines Templates
Bild 3.41: Dieses Chrome kann mit der Variablen slider angesprochen werden.
Ein eigenes chrome können Sie definieren, wenn Sie eine neue Funktion mit dem Aufbau modChrome_{STYLE} hinzufügen. Wichtig ist, dass Sie die zwei Parameter &$params und &$attribs mit übergeben.
Bild 3.42: Das chrome für franzis als eigene Ausgabe.
Angesprochen wird dieses chrome in der index.php mit der Variablen franzis:
Bild 3.43: In der Indexdatei können Sie das neue chrome verwenden.
Auf diese Art und Weise können Sie das Erscheinungsbild der Module selbst definieren. modules <jdoc:include <jdoc:include <jdoc:include <jdoc:include <jdoc:include <jdoc:include <jdoc:include <jdoc:include
Während Sie mit module ein einziges Modul ansprechen, können Sie mit modules gleich mehrere anzeigen lassen. Die Module müssen zuvor in der Datei template-Details.xml definiert werden, damit sie sich einbinden lassen und Joomla sie ansprechen kann. Mit dieser einfachen Anweisung lassen sich Inhalte mithilfe Ihres Templates anzeigen. Zugegeben, es sieht äußerst spartanisch aus, aber es funktioniert, und Ihr Template ist dazu fehlerfrei und valide.
3.9
JavaScript
Alle JavaScript-Dateien werden im Ordner js abgelegt. Hier befindet sich zum Beispiel der PNG-Fix, damit PNG-Bilder auch im IE 6 korrekt dargestellt werden. Wenn Sie zusätzliche JavaScript-Dateien verwenden möchten, beispielsweise das JavaScript-Framework jQuery, können Sie es in diesem Ordner ablegen und mit dem folgenden Code im headBereich der index.php einbinden: <script type="text/javascript" src="baseurl; ?>/ templates/template ?>/js/jquery.js">
Hinweis: Mit der Einbindung zusätzlicher JavaScript-Frameworks oder -Skripten können Komplikationen auftauchen, da Joomla von Haus aus das Framework Mootools verwendet. Einige Frameworks bieten hier eine No-Conflict-Methode an. Man sollte vorher abschätzen, ob der Mehrgewinn durch das JavaScript die Mühe rechtfertigt.
3.10 Offline Die Datei offline.php kommt immer dann zum Einsatz, wenn Sie in der Konfiguration von Joomla die Website offline setzen.
Bild 3.44: Die Datei offline.php wird angezeigt, wenn die Seite offline ist.
7356 Joomla Templates_NEU.indd 81
05.10.2009 10:34:36
82
Kapitel 3: Der Aufbau eines Templates
Die Seite, die Ihre Besucher aufrufen, wenn sie Ihre Website besuchen, könnte nun so aussehen:
Bild 3.45: Eine Nachricht für den Besucher, die ihm mitteilt, dass die Seite zurzeit offline ist.
Wenn Sie einen Administratorzugang haben, können Sie sich hier einloggen und bekommen das Frontend dennoch zu Gesicht. So können Sie Änderungen am Layout vornehmen und begutachten, ohne dass es ein Besucher mitverfolgen kann.
7356 Joomla Templates_NEU.indd 82
05.10.2009 10:34:36
3.10 Offline
83
Bild 3.46: Der Aufbau der Datei offline.php ist überschaubar.
7356 Joomla Templates_NEU.indd 83
05.10.2009 10:34:36
84
Kapitel 3: Der Aufbau eines Templates
Die ersten Zeilen ähneln denjenigen der index.php.
In der ersten Zeile befindet sich die PHP-Anweisung, die dem Besucher den direkten Aufruf der Seite verbietet. In der zweiten Zeile steht der Dokumenttyp der Seite – wichtig für die Browser und Webbots. Der HTML-Bereich mit der Sprachdefinition ist in der dritten Zeile. <jdoc:include type="head" /> direction == 'rtl') : ?>
Im Head-Bereich werden wie in der index.php die Header-Informationen von Joomla geladen, also die Metadaten, der Seitentitel und die JavaScript-Skripten des Systems. Danach folgt das Einbinden der Joomla-eigenen Cascading Style Sheets. Ein Extras-Sheet wird dann geladen, wenn die Schriftrichtung von rechts nach links eingestellt ist (right to left, kurz: rtl, z. B. für Arabisch oder Hebräisch). <jdoc:include type="message" />
getCfg('sitename'); ?>
getCfg('offline_message'); ?>
7356 Joomla Templates_NEU.indd 84
05.10.2009 10:34:37
3.10 Offline
85
Im body-Bereich wird zuerst die Systemnachricht geladen, sofern eine solche Nachricht vorliegt, beispielsweise eine Fehlerausgabe, wenn der Login nicht erfolgreich war. Danach folgt ein div-Container, der zuerst das Seitenlogo, den Seitentitel und dann die Offlinenachricht anzeigt. Hinter diesen Angaben steht eine Abfrage zur Steuerung der Benutzerauthentifizierung mit OpenID. OpenID ermöglicht es, sich ohne Benutzername und Passwort, nur mithilfe einer URL, am System anzumelden. Ist diese Abfrage erledigt, folgt das Formular zur gewöhnlichen Eingabe von Benutzername und Passwort, die der Nutzer mit einem Senden-Button bestätigen kann.
7356 Joomla Templates_NEU.indd 85
05.10.2009 10:34:37
86
Kapitel 3: Der Aufbau eines Templates
3.11 Parameter Die Template-Engine ist eine große Stärke von Joomla. Ab Version 1.5 ist es möglich, dem Template mit Parametern eine Extra-Flexibilität zu verschaffen. Hat man verschiedene Farbvarianten des Templates definiert und legt den Parameter dafür fest, kann der Anwender mit nur einer Einstellung die komplette Farbgebung ändern. Diese Einstellung wird in der Datei params.ini gespeichert. Hier stehen auch die Angaben, die als Standard für das Template eingestellt sind. Die Parameter selbst werden in der Datei templateDetails. xml definiert.
Bild 3.47: In der params.ini werden die Einstellungen der Parameter gespeichert.
Bild 3.48: Die Parameterdefinitionen sind in der Datei templateDetails.xml hinterlegt.
Eine Auswahl an Farbvarianten finden Sie beim Standard-Template RHUK Milkyway. Öffnen Sie im Backend den Template-Manager und wählen Sie das Template aus. Unter der Option »Parameter« können Sie dann die verschiedenen Variationen auswählen.
Bild 3.49: Farbvariationen als Parameter des Templates »RHUK Milkyway«.
7356 Joomla Templates_NEU.indd 86
05.10.2009 10:34:37
3.11 Parameter
87
Bild 3.50: So sehen die Farbvariationen im Frontend aus.
3.11.1 Definition eines Parameters Die Datei templateDetails.xml finden Sie im Template-Ordner. Achten Sie darauf, dass bei dem Dateinamen das D des Wortbestandteils »Details« großgeschrieben ist. Wenn Sie diese XML-Datei des Blanko-Templates öffnen, sieht sie so aus:
7356 Joomla Templates_NEU.indd 87
05.10.2009 10:34:37
88
Kapitel 3: Der Aufbau eines Templates
Bild 3.51: Per XML teilen Sie Joomla die Template-Informationen mit.
In dieser XML-Datei hinterlegen Sie einige Informationen über das Template. Für die Parameter wichtig ist das Element <params>, das Sie im unteren Teil der Datei finden. Mit dem params-Tag eröffnen Sie den Bereich zum festlegen der Parameter. Jeder Parameter wird mit einem param-Tag (notabene: ohne s) definiert. Zu diesem Tag gehören die obligatorischen Attribute type und name. Alle weiteren Attribute sind optional. type
legt das HTML-Element fest, mit dem sich der Parameter einstellen lässt.
name
ist für jeden Parameter einzigartig und wird dazu gebraucht, den Parameter im Template anzusprechen.
default
gibt den Standardwert des Parameters an.
description ist die Beschreibung des Parameters, die als Tooltipp im Backend erscheint. label
erscheint als Bezeichnung im Backend.
Hier ein Beispiel für zwei Parameter: Der erste lässt eine Liste mit Optionen erscheinen und der zweite eine Auswahl durch Radiobuttons.
7356 Joomla Templates_NEU.indd 88
05.10.2009 10:34:37
3.11 Parameter
89
Bild 3.52: Zwei Parameterdefinitionen: eine Auswahlliste und ein Radiobutton.
Tipp: Verwenden Sie diesen Unicode für eine korrekte HTML-Ausgabe: Zeichen
Unicode
Name in HTML
ä
ä
ä
Ä
Ä
Ä
ö
ö
ö
Ö
Ö
Ö
ü
ü
ü
Ü
Ü
Ü
ß
ß
ß
&
&
&
»
„
„
«
“
“
<
<
<
>
>
>
Bild 3.53: Im Backend lassen sich die Parameter komfortabel einstellen.
7356 Joomla Templates_NEU.indd 89
05.10.2009 10:34:37
90
Kapitel 3: Der Aufbau eines Templates
Damit wir uns die Einstellungen der Parameter zunutze machen können, greifen wir diese aus der params.ini ab. In der index.php bewerkstelligen wir das per PHP. params->get('colorvariation'); echo $this->params->get('copyright'); ?>
3.11.2 Standardparametertypen Das Joomla-Framework hält einige Standardparametertypen für Erweiterungen bereit. Die für die Template-Entwicklung relevanten Typen sind list, text, radio, filelist, folderlist und spacer. list Der Parametertyp list stellt eine Liste als Pull-down-Menü mit eigenen Einträgen zur Verfügung. Existiert ein Eintrag für diesen Parameter in der params.ini, wird dieser als Standard ausgewählt. •
type (zwingend): list
•
name (zwingend): einzigartiger Name des Parameters
•
label (zwingend, übersetzbar): ein beschreibender Titel des Feldes
•
default (optional): der Standardwert der Liste
•
description (optional, übersetzbar): die Beschreibung wird als Tooltipp angezeigt
•
class (optional): die CSS-Klasse des Feldes; wenn es weggelassen wird, gilt standardmäßig der Eintrag inputbox
Die Liste muss mindestens einen Eintrag haben, also ein option-Element vorweisen. Der Text zwischen wird in der Liste angezeigt. Zwingend für den Eintrag ist der Wert, das Attribut value. •
value (zwingend): der Wert, der als Parameter abgespeichert wird
Beispiel:
Bild 3.54: Die Liste weist zwei Einträge aus.
7356 Joomla Templates_NEU.indd 90
05.10.2009 10:34:37
3.11 Parameter
91
Bild 3.55: Wird ein Eintrag ausgewählt, wird dessen Wert (value) abgespeichert.
text Mit diesem Parametertyp können Sie eine Eingabezeile anzeigen lassen. Der eingegebene Wert wird in der Datei params.ini abgespeichert und als Standard angezeigt. •
type (zwingend): text
•
name (zwingend): einzigartiger Name des Parameters
•
label (zwingend, übersetzbar): ein beschreibender Titel des Feldes
•
size (optional): Anzahl der Zeichen, die gespeichert werden
•
default (optional, übersetzbar): der Standardtext
•
description (optional, übersetzbar): die Beschreibung wird als Tooltipp angezeigt
•
class (optional): die CSS-Klasse des Feldes; wenn es weggelassen wird, ist es standardmäßig text_area
Beispiel:
Bild 3.56: Eine einzeilige Texteingabe mit dem Standardwert 'Hier der Text’.
Bild 3.57: Die Eingabe wird als Wert in der params.ini abgespeichert.
radio Mithilfe des radio-Parameters können Sie eine Auswahl erzeugen. Der Standardwert ist dabei der abgespeicherte Wert oder, sofern kein gespeicherter Wert vorliegt, der als standard definierte Eintrag.
7356 Joomla Templates_NEU.indd 91
05.10.2009 10:34:37
92
Kapitel 3: Der Aufbau eines Templates
Beispiel:
Bild 3.58: Eine Auswahl mit zwei zusammengehörigen Einträgen.
Bild 3.59: Nur ein Radiobutton kann ausgewählt sein.
filelist Der Parameter des Typs filelist dient zur Auflistung der Dateien aus einem Ordner. Er nimmt den als Standard deklarierten Wert zur Anzeige des Eintrags, wenn in der params. ini kein Wert vorliegt. Die Einträge '– Standard benutzen –' und '– Nicht verwenden –' haben die Werte –1 und 0 und kommen in der Liste als Erstes vor. •
type (zwingend): folderlist
•
name (zwingend): einzigartiger Name des Parameters
•
label (zwingend, übersetzbar): ein beschreibender Titel des Feldes
•
directory (zwingend): der Pfad zum Verzeichnis, das aufgelistet werden soll
•
default (optional): der Standardordner
•
description (optional, übersetzbar): die Beschreibung wird als Tooltipp angezeigt
•
filter (optional): regulärer Ausdruck zum Filtern der Ordner; die hier angegebenen
Ordner werden inkludiert • •
exclude (optional): regulärer Ausdruck zum Filtern der Ordner; die hier angegebenen Ordner werden exkludiert stripext (optional): Boole'sches Argument; wenn wahr, wird die Dateiendung aus-
geblendet •
hide_none (optional): Boole'sches Argument; wenn wahr, wird der '– Standard
benutzen –'-Eintrag nicht angezeigt •
hide_default (optional): Boole'sches Argument; wenn wahr, wird '– Nicht verwen-
den –' nicht angezeigt
7356 Joomla Templates_NEU.indd 92
05.10.2009 10:34:37
3.11 Parameter
93
Beispiel:
Bild 3.60: Mit filelist werden hier die Dateien des Ordners administrator aufgelistet.
Bild 3.61: Die Dateien werden dank der Einstellung stripext ohne Dateiendung angezeigt.
folderlist Mit dem Parametertyp folderlist erstellen Sie eine Liste von Ordnern aus einem ausgewählten Verzeichnis. Der dabei abgespeicherte Wert dient als Standardwert. Zwei Einträge existieren in jeder folderlist. Der erste heißt '– Standard benutzen –' und hat den Wert –1. Der zweite heißt '– Nicht verwenden –' und besitzt den Wert 0. •
type (zwingend): folderlist
•
name (zwingend): einzigartiger Name des Parameters
•
label (zwingend, übersetzbar): ein beschreibender Titel des Feldes
•
directory (zwingend): der Pfad zum Verzeichnis, das aufgelistet werden soll
•
default (optional): der Standardordner
•
description (optional, übersetzbar): die Beschreibung wird als Tooltipp angezeigt
•
filter (optional): regulärer Ausdruck zum Filtern der Ordner; die hier angegebenen
Ordner werden inkludiert •
exclude (optional): regulärer Ausdruck zum Filtern der Ordner; die hier angegebe-
nen Ordner werden exkludiert •
hide_none (optional): Boole'sches Argument; wenn wahr, wird der '– Standard
benutzen –'-Eintrag nicht angezeigt •
hide_default (optional): Boole'sches Argument; wenn wahr, wird '– Nicht verwen-
den –' nicht angezeigt
7356 Joomla Templates_NEU.indd 93
05.10.2009 10:34:37
94
Kapitel 3: Der Aufbau eines Templates
Beispiel:
Bild 3.62: Eine Auflistung des Ordners templates ohne die ersten zwei Standardwerte.
Bild 3.63: Die Standard-Templates als Liste zum Auswählen.
spacer Der Parameter spacer lässt eine horizontale Linie erscheinen, um die einzelnen Parameter voneinander zu trennen oder eine Überschrift für eine Gruppe von Parametern zu definieren. Beispiel:
Bild 3.64: Der Parameter des Typs spacer kann als Trennzeichen genutzt werden ...
Bild 3.65: ... oder als Überschrift.
3.11.3 Einstellungen speichern Die Einstellungen der Parameter werden in der Datei params.ini gespeichert. Diese Datei liegt im Template-Ordner. Auf die gespeicherten Werte kann innerhalb der Indexdatei zugegriffen werden. Wenn Ihr Template Parameter besitzt, muss diese Datei in die Installationsroutine aufgenommen werden. Fügen Sie dazu in der Datei template-Details. xml folgenden Eintrag in den file-Bereich ein: params.ini
Mit der Installation bekommt die Datei params.ini dann alle nötigen Rechte und wird beschreibbar, damit die Werte auch abgespeichert werden können.
7356 Joomla Templates_NEU.indd 94
05.10.2009 10:34:37
3.11 Parameter
95
Der Inhalt einer params.ini könnte so aussehen: eineListe=0 einText=Hier der Text eineAuswahl=0 eineDatei=index einOrdner=beez
3.11.4 Einstellungen verwenden Ein Parameter ergibt erst dann Sinn, wenn man ihn im Template nutzen kann. Haben Sie einen Parameter in der Datei templateDetails.xml definiert und ist dessen Wert in der Datei params.ini abgespeichert, können Sie sich diesen Wert zunutze machen. Eine PHP-Anweisung genügt. params->get( 'parameterName' ); ?>
Haben wir beispielsweise eine Farbvariation parametrisiert, können wir den Wert abgreifen, um damit das jeweilige Cascading Style Sheet einzubinden. params->get( 'farbVariante' ); $this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $farbe . '.css' ); ?>
Ein weiteres Beispiel wäre, das Copyright nach dem abgespeicherten Wert anzeigen zu lassen, wenn Sie einen Parameter namens Copyright definiert haben. params->get( 'authorCopyright' )) : ?>
Sie können die mit Joomla mitgelieferten Standard-Templates »BEEZ«, »JA Purity« und »RHUK Milkyway« an Ihre eigenen Zwecke anpassen. Es empfiehlt sich, eines der drei Templates zu wählen, weil diese durch reguläre Updates stets aktualisiert werden. Das betrifft insbesondere die Overrides der Templates. Aber auch die Dateien index.php und template.css können unter Umständen aktualisiert werden. Wenn Sie also die Templates umgeschrieben haben und dann Ihr Joomla-System aktualisieren wollen, sollten Sie unbedingt einen Blick in das Update-Paket werfen, um zu schauen, ob die umgeschriebenen Dateien betroffen sind. Sollte das der Fall sein, hilft ein manueller Abgleich der Dateien. In unserem Beispiel wollen wir das Template BEEZ ein wenig umgestalten. Dafür verwenden wir ein frisch installiertes Joomla mit Beispielinhalten. Wenn Ihnen keine Inhalte vorliegen, können Sie Joomla ganz einfach noch einmal aufsetzen und dabei die Beispielinhalte mit installieren. Verwenden Sie dazu die Anleitung in Kapitel 2, »Die JoomlaTestumgebung«, achten Sie aber darauf, dass die Beispieldateien mit installiert werden. Anhand der nachfolgenden Änderungen von BEEZ soll Ihnen die Vorgehensweise nahegebracht werden, die Sie auch bei anderen Templates einsetzen können. Zudem werden Sie lernen, sich sicherer in den Template-Dateien zu bewegen.
4.1
Farben ändern
Wir wollen BEEZ in neuen Farben erstrahlen lassen. Wenn wir unsere Testumgebung gestartet haben, können wir das Template BEEZ im Backend von Joomla als Standard auswählen.
7356 Joomla Templates_NEU.indd 97
05.10.2009 10:34:38
98
Kapitel 4: Templates anpassen
Bild 4.1: Das Template BEEZ wird als Standard-Template ausgewählt.
Im Frontend sieht BEEZ mit den installierten Beispielinhalten so aus:
Bild 4.2: Das Template BEEZ im Original mit den Beispielinhalten.
Angenommen, uns gefallen die Farben von BEEZ nicht, wir wollen viel lieber unsere eigenen Lieblingsfarben darin sehen. Wie bekommen wir nun heraus, wo wir welche Werte ändern müssen? Als hervorragendes Werkzeug eignet sich das Add-on Firebug für den Browser Firefox.
7356 Joomla Templates_NEU.indd 98
05.10.2009 10:34:38
4.1 Farben ändern
99
Unter http://getfirebug.com
können Sie das Add-on bekommen. Wenn Firebug installiert ist, kann es über das Käfersymbol in der Statusleiste eingeschaltet werden.
Bild 4.3: Durch Klicken auf den Käfer wird Firebug eingeschaltet.
Mit der Untersuchen-Funktion von Firebug ist es leicht, die CSS-Werte eines Elements zu ermitteln.
Bild 4.4: Untersuchen Sie mit Firebug die Website mit dem BEEZ-Template.
7356 Joomla Templates_NEU.indd 99
05.10.2009 10:34:38
100
Kapitel 4: Templates anpassen
Bild 4.5: Firebug liefert nützliche Werte bei der Untersuchung.
Wenn wir nun die Violetttöne von BEEZ durch Blau ersetzen möchten, können wir mit Firebug die farbigen Elemente suchen und untersuchen. Fahren wir mit der Maus über den Balken, in dem der Navigationspfad (breadcrumbs) angezeigt wird, bekommen wir die Informationen, die wir brauchen, um das Aussehen des Balkens zu verändern.
7356 Joomla Templates_NEU.indd 100
05.10.2009 10:34:38
4.1 Farben ändern
101
Bild 4.6: Firebug spuckt die CSSEigenschaften des breadcrumbElements aus.
Der Clou ist nun, dass Sie mit Firebug live testen können, ob es auch der richtige Wert ist. Ersetzen Sie einfach mal den hexadezimalen Wert für Violett, #93246F, durch Blau, also #243693. Der Wert wird live im Browser ersetzt, aber nicht in der CSS-Datei. Um den Wert endgültig zu ändern, öffnen Sie die CSS-Datei, die Ihnen Firebug angibt. In unserem Fall ist es die Datei layout.css. In Zeile 324 finden wir das Element #breadcrumbs und können den Wert der Eigenschaft background ändern. #breadcrumbs { background:#243693; /* Original #93246F */ min-height:5em; padding-top:0; text-align:left; color:#fff; }
Sobald die Datei abgespeichert ist, wird der Wert übernommen.
7356 Joomla Templates_NEU.indd 101
05.10.2009 10:34:39
102
Kapitel 4: Templates anpassen
Bild 4.7: Ein neuer Wert für background, und der Navigationspfad erscheint in Blau.
So können Sie im Prinzip jedes Element suchen und ändern, das Ihnen nicht gefällt. Doch mit der Zeit kann das ziemlich aufwendig werden. Besser ist es, die Suchen-&-ErsetzenFunktion Ihres Editors zu verwenden. Da wir schon einen Wert kennen (#93246F), ersetzen wir ihn komplett durch den neuen Wert (#243693) und speichern die Datei layout. css danach ab.
7356 Joomla Templates_NEU.indd 102
05.10.2009 10:34:39
4.1 Farben ändern
103
Bild 4.8: Das BEEZ-Template mit nur einem geänderten Wert.
Nach und nach erscheint die Website in Blau. Suchen und ersetzen wir auch die folgenden Werte (layout.css): Originalwert (Violett)
Neuer Wert (Blau)
#93246F
#243683
#CC3399
#334DCC
#C39
#334DCC
#932467
#243694
#EFDEEA
#DFE2F0
#993399
#324499
#F2E3ED
#E4E6F2
#E0C1E0
#C1C6E0
#BE7CA9
#7C87BF
#D4A7C5
#A7AFD4
7356 Joomla Templates_NEU.indd 103
05.10.2009 10:34:39
104
Kapitel 4: Templates anpassen
Zwei zusätzliche Werte ändern sich in der Datei position.css: Originalwert (Violett)
Neuer Wert (Blau)
#CC3399
#DFE2F0
#D4A7C5
#A7AFD4
Die dritte Datei im Bunde ist ieonly.css. Damit die Farben auch im Internet Explorer 6 richtig angezeigt werden, ersetzen wir hier noch mal zwei Werte. Originalwert (Violett)
Neuer Wert (Blau)
#EFDEEA
#334DCC
#93246F
#243683
Das Ergebnis mit den neuen Farbwerten sieht man im folgenden Bild.
Bild 4.9: Mit Ausnahme der Bilder wird BEEZ jetzt in Blau angezeigt.
7356 Joomla Templates_NEU.indd 104
05.10.2009 10:34:39
4.2 Bilder austauschen
4.2
105
Bilder austauschen
Was jetzt noch geändert werden muss, sind die Bilder. Auch hier gibt uns Firebug die nötigen Informationen, und wir können die folgenden Bilder ausfindig machen: •
logo.gif
•
biene.gif
•
arrow.png
•
lupe_larger.gif
•
lupe_larger_black.gif
•
lupe_smaller.gif
•
lupe_smaller_black.gif
Die Bilder finden wir im Ordner images des BEEZ-Verzeichnisses. Der vollständige Pfad im Joomla-System lautet: /templates/beez/images
Öffnen wir die Bilder mit einem Bildbearbeitungsprogramm und kolorieren wir die Bilder neu. Originalbilder (Violett)
7356 Joomla Templates_NEU.indd 105
Neue Bilder (Blau)
05.10.2009 10:34:39
106
Kapitel 4: Templates anpassen
Originalbilder (Violett)
Neue Bilder (Blau)
Jetzt noch die Bilder mit den Originalbildern im Ordner images überschreiben, und schon erstrahlt im Template BEEZ all das in Blau, was zuvor in Violett angezeigt wurde.
Bild 4.10: BEEZ in Blau.
7356 Joomla Templates_NEU.indd 106
05.10.2009 10:34:39
4.3 Neue Modulposition
4.3
107
Neue Modulposition
In der rechten Spalte sehen wir das Modul »Schlagzeilen«, das wir gern über den Artikeln sehen wollen. Dafür legen wir die Modulposition contenttop neu an. Die Position soll sich direkt über »Willkommen auf der Startseite« befinden und zwischen die linke und rechte Spalte passen. Für die neuen Modulpositionen brauchen wir die Dateien •
index.php
•
layout.css
•
templateDetails.xml
Öffnen Sie die Datei index.php im Template-Verzeichnis von BEEZ. Suchen Sie die Zeile <jdoc:include type="component" />
und platzieren Sie eine div-Box darüber.
Mithilfe der jdoc-Anweisung setzen wir in die Box unsere neue Modulposition. <jdoc:include type="modules" name="contenttop" style="xhtml" />
Mit type geben wir an, dass es sich um ein Modul handelt. Der Name soll contenttop lauten, und mit dem Stil xhtml veranlassen wir, dass auch der Titel des Moduls gezeigt werden kann. Die Box soll nur angezeigt werden, wenn auch ein Modul darin veröffentlicht ist. Das realisieren wir mit einer kleinen PHP-Anweisung. countModules( 'contenttop' )) : ?> ...
Wir zählen einfach, ob ein Modul auf der Position contenttop veröffentlicht ist. Wenn ja, wird der nachfolgende Inhalt angezeigt. Zwischen if und endif setzen wir unsere Box mit der Modulposition contenttop.
Insgesamt entspricht unser Eingriff in die index.php dem folgenden Bild.
Bild 4.11: Die neue Modulposition contenttop in der index.php.
Verlassen wir die Datei index.php und widmen wir uns der XML-Datei templateDetails. xml. Die Datei liegt im gleichen Ordner wie index.php; in ihr werden die Modul-
positionen aufgelistet. Damit stehen sie in Joomla im Backend zur Auswahl. Die templateDetails.xml besteht aus zahlreichen Gruppen von Auszeichnungen. Die für uns relevante Gruppe heißt positions – wir finden sie ziemlich weit unten in der Datei.
Bild 4.12: Die Modulpositionen von BEEZ, aufgelistet in templateDetails.xml.
Fügen Sie nun die neue Modulposition contenttop mit einem position-Tag ein. <positions> <position>left <position>right <position>top
Wenn Sie die XML-Datei abgespeichert haben, können Sie die CSS-Datei von BEEZ öffnen, um das Layout für das Modul zu bestimmen. In dem Ordner css des TemplateVerzeichnisses liegt die Datei layout.css. Im Abschnitt main (ab Zeile 491) können Sie die Definitionen für das Modul hinterlegen. /* contenttop */ #contenttop { margin-top:-20px; width:100%; } .incontenttop { padding-bottom:25px; } #contenttop h3 { color:#000; font-family:trebuchet MS, sans-serif; font-size:1.6em; font-weight:normal; margin:0; padding:0 0 10px 0; }
Mit einem Kommentar leiten wir die Definitionen ein. Die Box verschieben wir mit einem negativen Außenabstand (margin-top) nach oben und geben ihr eine Breite von 100%. Den Innenabstand zu den Artikeln definieren wir für den div-Container der Klasse incontenttop. Der Überschrift (h3) geben wir die gleichen Eigenschaften wie der Artikelüberschrift (h1). Ein Innenabstand nach unten sorgt bei ihr für ein korrektes Aussehen. Im Backend von Joomla können wir nun unter »Erweiterungen > Module« die Schlagzeilen auf der neuen Position contenttop anzeigen lassen.
7356 Joomla Templates_NEU.indd 109
05.10.2009 10:34:40
110
Kapitel 4: Templates anpassen
Bild 4.13: Im Backend wird das Modul der Schlagzeilen neu positioniert.
Im Frontend werden die Schlagzeilen nun über den Artikeln angezeigt.
Bild 4.14: Die Schlagzeilen auf der neuen Modulposition contenttop.
7356 Joomla Templates_NEU.indd 110
05.10.2009 10:34:40
4.4 Neue Typografie
4.4
111
Neue Typografie
Als Nächstes wollen wir den Schriftsatz von BEEZ ändern. Als Standard im Template werden die Schrift Arial für die Texte verwendet und Trebuchet MS für die Überschriften. Die Schriften lassen sich im Cascading Style Sheet der folgenden Dateien ändern: •
layout.css
•
position.css
Suchen Sie in der Datei layout.css die Schrift Trebuchet MS und ersetzen Sie sie beispielsweise durch die Times. In der Datei position.css suchen Sie die Schrift Arial und ersetzen sie durch Verdana. Das Template BEEZ wird nun in neuer Typografie angezeigt.
Bild 4.15: Die Website mit den neuen Schriften.
7356 Joomla Templates_NEU.indd 111
05.10.2009 10:34:40
112
Kapitel 4: Templates anpassen
Generell empfiehlt es sich, für Headlines Serifenschriften wie etwa Times New Roman zu nutzen, für den Fließtext hingegen serifenlose Schriften, zum Beispiel Arial oder Verdana. Serifenschriften unterscheiden sich von den serifenlosen dahingehend, dass sie einen Akzent – also einen kleinen Abstrich – an den einzelnen Lettern (Buchstaben) haben. Sie wirken elegant und stilvoll. Serifenlose Schriften hingegen sind schnörkellos, aber bestens für Monitore geeignet. Die Kombination beider Schriften erzielt auf einer Website einen guten Kontrast.
7356 Joomla Templates_NEU.indd 112
05.10.2009 10:34:40
113
5 5.1
Erstellung eines Screendesigns Vorüberlegung
Mit dieser Anleitung werden wir zusammen ein Layout mit Photoshop erstellen. Daraus entwickeln wir im darauffolgenden Kapitel ein Joomla-Template. Für die Gestaltung verwenden wir ein fertiges Logo und eine Textur für den Hintergrund. Beides werden wir aus dem Internet beziehen. Zudem wird es notwendig sein, einen neuen Schrifttyp zu installieren. Als Thema verwenden wir ein Sonnenstudio, das neben Sonnenbanken auch Massagen anbietet. Dieses Studio will sich und seine Angebote im Netz präsentieren. Dafür gestalten wir ein richtig schönes Layout.
5.2
Vorbereitung
Bevor wir starten, treffen wir noch einige Vorbereitungen.
5.2.1
Logo als Ausgangspunkt
Für das Logo greifen wir auf ein fertiges zurück, das wir noch ein wenig modifizieren werden. Sie finden es zu freien Verwendung bei »Logo Instant« unter http://www.logoinstant.com
genauer unter http://www.logoinstant.com/2009/01/wellpanda
Dort laden wir »WellPanda« herunter und entpacken es. Im ZIP-Paket finden wir die PSD-Datei (Photoshop-Datei) zum Logo.
7356 Joomla Templates_NEU.indd 113
05.10.2009 10:34:41
114
Kapitel 5: Erstellung eines Screendesigns
Bild 5.1: Als Logo verwenden wir »WellPanda« von logoinstant.com.
Wir öffnen das Logo mit dem Bildbearbeitungsprogramm Photoshop und nehmen zwei kleine Änderungen vor: Das W und das P von wellpanda schreiben wir groß, und die Hintergrundfarbe des Pandas ändern wir von Rot in Orange (#FF7700; der Farbwert ist hexadezimal).
5.2.2
Schrifttyp für das Logo
Der zum Logo passende Schrifttyp nennt sich Perspective Sans, und den gibt es bei »dafont.com«. http://www.dafont.com
Die genaue Adresse lautet: http://www.dafont.com/perspective-sans.font
Wenn wir den freien Font Perspective Sans heruntergeladen und entpackt haben, installieren wir ihn, indem wir einfach alle Dateien in das Font-Verzeichnis unter Windows kopieren oder ein Font-Verwaltungsprogramm dafür verwenden. Mac-User können das Programm »Schriftensammlung« dafür nutzen. Erst wenn der Font installiert ist, können wir mit Photoshop darauf zugreifen.
7356 Joomla Templates_NEU.indd 114
05.10.2009 10:34:41
5.2 Vorbereitung
115
Bild 5.2: Der zum Logo gehörende Schrifttyp Perspective Sans.
5.2.3
Textur für den Hintergrund
Es fehlt noch die Textur, die wir als Hintergrund verwenden möchten. Diese beziehen wir von »BackgroundLabs.com« unter http://www.backgroundlabs.com
Die Textur, die wir als Muster nutzen wollen, nennt sich »Retro Pattern 02« und ist zu finden unter http://www.backgroundlabs.com/detail/link-97.html
7356 Joomla Templates_NEU.indd 115
05.10.2009 10:34:41
116
Kapitel 5: Erstellung eines Screendesigns
Bild 5.3: Als Hintergrund dient das Muster »Retro Pattern 02«.
Damit wir die Textur als Muster verwenden können, öffnen wir sie mit Photoshop und gehen auf »Bearbeiten > Muster festlegen«, um sie – Sie haben es schon erraten – als Muster festzulegen.
Bild 5.4: Legen Sie die Textur als Muster für Photoshop fest.
5.2.4
Bilder für den Inhalt
Um Bilder für Inhalte zu finden, gibt es viele Portale im Netz. Eine Art von Bildern sind die sogenannten Stock-Fotos. Das sind Fotos oder Bilder, meist auf weißem Hintergrund, die für sich genommen neutral erscheinen.
7356 Joomla Templates_NEU.indd 116
05.10.2009 10:34:41
5.2 Vorbereitung
117
Solche Fotos findet man unter anderem auf http://www.istockphoto.com
oder auf http://www.fotolia.com
Beide Portale sind international und können in deutscher Sprache angezeigt werden. Die Fotos, die im Design verwendet werden, stammen von »istockphoto.com«.
Bild 5.5: Das Bild zeigt ein Solarium und wird später für den Inhalt verwendet.
Bild 5.6: Dieses Bild wird später dem Thema Massage zugeordnet.
7356 Joomla Templates_NEU.indd 117
05.10.2009 10:34:41
118
Kapitel 5: Erstellung eines Screendesigns
Bild 5.7: Das dritte Bild verwenden wir für »Über uns«.
Ein Icon-Set für eine spätere Verwendung können Sie unter dieser Adresse finden: http://wellpanda.bloggerschmidt.de/res/icons.jpg
Bild 5.8: Dieses Icon-Set findet später im Content (Inhalt) seinen Platz.
Somit hätten wir alle Vorbereitungen getroffen.
5.3
Anleitung
Fangen wir an! Öffnen Sie ein neues Dokument mit 1.020 x 1.020 Pixeln, einer Auflösung von 72 dpi (engl. Abk.: dots per inch) und einem weißen Hintergrund. Erstellen Sie eine
7356 Joomla Templates_NEU.indd 118
05.10.2009 10:34:41
5.3 Anleitung
119
neue Ebene (»Ebene > Neu > Ebene«) und wählen Sie das Füllwerkzeug mit der Taste [G]. Am oberen Bildschirmrand wählen Sie dann das zuvor festgelegte Muster.
Bild 5.9: Mit dem Füllwerkzeug und der Textur legen wir den Hintergrund fest.
Nachdem Sie einmal auf die Ebene geklickt haben, sieht das Design so aus:
Bild 5.10: Die Textur als sich wiederholendes Muster für den Hintergrund.
7356 Joomla Templates_NEU.indd 119
05.10.2009 10:34:41
120
Kapitel 5: Erstellung eines Screendesigns
Benutzen Sie jetzt das Rechteck-Werkzeug [U], und zeichnen Sie am oberen Rand zwei Rechtecke in der Form, wie das folgende Bild sie zeigt. Die Farben der Rechtecke spielen zunächst keine Rolle.
Bild 5.11: Die Rechtecke (weiß und schwarz) werden mit dem RechteckWerkzeug gezeichnet.
Für das obere Rechteck (weiß) definieren Sie folgende Ebenenstile:
Bild 5.12: Das erste Rechteck bekommt einen Schein nach innen.
7356 Joomla Templates_NEU.indd 120
05.10.2009 10:34:42
5.3 Anleitung
121
Bild 5.13: Zudem erhält es eine Verlaufsüberlagerung.
Bild 5.14: Die Einstellung der Verlaufsüberlagerung mit den Farbwerten.
Das Ergebnis sieht dann so aus:
Bild 5.15: Das erste Rechteck mit den Ebenenstilen.
7356 Joomla Templates_NEU.indd 121
05.10.2009 10:34:42
122
Kapitel 5: Erstellung eines Screendesigns
Verwenden Sie für das zweite Rechteck (schwarz) folgende Ebenenstile:
Bild 5.16: Der Schein nach innen hat die gleichen Werte wie der des ersten Rechtecks.
Bild 5.17: Der Verlauf ist umgekehrt im Vergleich zum ersten Rechteck.
7356 Joomla Templates_NEU.indd 122
05.10.2009 10:34:42
5.3 Anleitung
123
Bild 5.18: Die grauen Farbwerte der Verlaufsüberlagerung.
Das Ergebnis sieht dann so aus:
Bild 5.19: Beide Rechtecke mit Ebenenstilen.
7356 Joomla Templates_NEU.indd 123
05.10.2009 10:34:42
124
Kapitel 5: Erstellung eines Screendesigns
Über den Rechtecken zeichnen Sie ein weiteres Rechteck in der Farbe Orange.
Bild 5.20: Das orangefarbene Rechteck geht bis zum oberen Rand.
Diesem Rechteck geben Sie folgende Verlaufsüberlagerung als Ebenenstil:
Bild 5.21: Die Verlaufsüberlagerung des Rechtecks.
7356 Joomla Templates_NEU.indd 124
05.10.2009 10:34:42
5.3 Anleitung
125
Bild 5.22: Die Farbwerte der Verlaufsüberlagerung.
Bild 5.23: Das oberste Rechteck mit einem orangefarbenen Verlauf.
Wählen Sie die Hintergrundebene (mit der Textur) und gehen Sie auf »Filter > Renderfilter > Beleuchtungseffekte«.
7356 Joomla Templates_NEU.indd 125
05.10.2009 10:34:42
126
Kapitel 5: Erstellung eines Screendesigns
Bild 5.24: Als Filter für den Hintergrund wird ein Beleuchtungseffekt gewählt.
Verwenden Sie folgende Einstellungen:
Bild 5.25: Als Beleuchtungseffekt wählen Sie die Lichtart »Spot«.
7356 Joomla Templates_NEU.indd 126
05.10.2009 10:34:43
5.3 Anleitung
127
Das Ergebnis lässt sich sehen.
Bild 5.26: Der Effekt verläuft ins Schwarze und kann so nahtlos enden.
Legen Sie noch einen Farbton über den Hintergrund, indem Sie eine »Neue Füll- oder Einstellungsebene erstellen«.
Bild 5.27: Wählen Sie »Farbton/Sättigung ...«.
7356 Joomla Templates_NEU.indd 127
05.10.2009 10:34:43
128
Kapitel 5: Erstellung eines Screendesigns
Bild 5.28: Mit diesen Einstellungen färben Sie den Hintergrund ein.
Das Ganze sieht dann so aus:
Bild 5.29: Der Hintergrund ist nun eingefärbt.
7356 Joomla Templates_NEU.indd 128
05.10.2009 10:34:43
5.3 Anleitung
129
Jetzt wählen Sie das Werkzeug für abgerundete Rechtecke [U]. Zeichnen Sie drei Rechtecke mit dem Radius 10 Pixel in der Farbe ffdba8.
Bild 5.30: Die Einstellungen der abgerundeten Rechtecke.
Das Ergebnis sollte ungefähr so aussehen:
Bild 5.31: Drei abgerundete Rechtecke für die Inhaltsdarstellung.
7356 Joomla Templates_NEU.indd 129
05.10.2009 10:34:43
130
Kapitel 5: Erstellung eines Screendesigns
Das an oberster Stelle stehende abgerundete Rechteck bekommt folgende Ebenenstile zugeordnet:
Bild 5.32: Geben Sie dem Rechteck eine Deckkraft von 30 Prozent.
Bild 5.33: Der weiße Schein nach innen bekommt eine 40-prozentige Deckkraft.
7356 Joomla Templates_NEU.indd 130
05.10.2009 10:34:43
5.3 Anleitung
131
Bild 5.34: Der lineare Farbverlauf erhält die volle Deckkraft.
Bild 5.35: Von Weiß bis Grau reicht der Farbverlauf.
Bild 5.36: Zum Schluss bekommt das Rechteck innen noch eine weiße Kontur.
7356 Joomla Templates_NEU.indd 131
05.10.2009 10:34:44
132
Kapitel 5: Erstellung eines Screendesigns
Das abgerundete Rechteck mit seinem Ebenenstil sieht nun wie folgt aus:
Bild 5.37: Das obere Rechteck schimmert jetzt durchsichtig.
Wählen Sie nochmals das Werkzeug für abgerundete Rechtecke, und zeichnen Sie weitere Rechtecke – ungefähr so wie auf dem folgenden Bild gezeigt.
7356 Joomla Templates_NEU.indd 132
05.10.2009 10:34:44
5.3 Anleitung
133
Bild 5.38: Das schwarze Rechteck ist der Platz für das Logo.
Dem schwarzen Rechteck geben Sie einen Farbverlauf, sprich: eine Verlaufsüberlagerung als Ebenenstil.
Bild 5.39: Der Farbverlauf als Hintergrund für das Logo.
7356 Joomla Templates_NEU.indd 133
05.10.2009 10:34:44
134
Kapitel 5: Erstellung eines Screendesigns
Bild 5.40: Die Position des rechten Farbwerts liegt bei 87 Prozent.
Und so sieht es aus:
Bild 5.41: Das Logo wird zentral positioniert.
7356 Joomla Templates_NEU.indd 134
05.10.2009 10:34:44
5.3 Anleitung
135
Bleiben wir beim Logo. Öffnen Sie die entsprechende Photoshop-Datei. Markieren Sie alle nötigen Ebenen und ziehen Sie sie auf die Leinwand des Screendesigns. Das Logo ist groß und muss entsprechend verkleinert werden. Sofern noch alle Ebenen des Logos ausgewählt sind, gehen Sie auf »Bearbeiten > Transformieren > Skalieren«, oder benutzen Sie die Tastenkombination [STRG] + [T].
Bild 5.42: Zum Skalieren können Sie auch die Tastenkombination [STRG]+[T] drücken.
Bild 5.43: Skalieren Sie die Ebenen auf circa 6 Prozent.
Danach platzieren Sie den Schriftzug rechts neben dem Pandakopf und geben der Schrift die folgende Einstellung:
7356 Joomla Templates_NEU.indd 135
05.10.2009 10:34:44
136
Kapitel 5: Erstellung eines Screendesigns
Bild 5.44: Für die Logo-Schrift: Perspective Sans Black, Regular, 30 Px, Farbe Weiß.
Unter dem Text »WellPanda« erstellen Sie den Claim »PremiumWellness« mit folgender Schrift:
Bild 5.45: Der Claim: Perspective Sans Black, Italic, 10 Px, Farbe Schwarz.
Das Ganze sollte dann ungefähr so aussehen:
Bild 5.46: Das fertige Logo.
Im Beispiel ist der Hintergrund des Pandas weiß mit einer 52-prozentigen Deckkraft und einer 1 Pixel starken Kontur, ebenfalls in Weiß. Links und rechts neben dem Logo platzieren Sie die Buttons.
7356 Joomla Templates_NEU.indd 136
05.10.2009 10:34:45
5.3 Anleitung
137
Bild 5.47: Verwenden Sie die Schrift Perspective Sans für die Buttons.
Bild 5.48: Für die Buttons: Perspective Sans, Italic, 18 Px, Farbe #1f1a17.
Für den Trenner zwischen den Buttons benutzen Sie das Linienzeichner-Werkzeug [U].
Bild 5.49: Das Linienzeichner-Werkzeug mit den Einstellungen für den Trenner.
Zeichnen Sie zwei 20 Px hohe Linien.
Bild 5.50: Der Trenner: links eine graue Linie, rechts eine weiße.
7356 Joomla Templates_NEU.indd 137
05.10.2009 10:34:45
138
Kapitel 5: Erstellung eines Screendesigns
Die Buttons sollten dann so aussehen:
Bild 5.51: Die fertigen Buttons links und rechts vom Logo.
Als Nächstes nehmen Sie sich die erste Box des Inhalts vor.
Bild 5.52: Diese Box wird nun mit Inhalt gefüllt.
Nehmen Sie das Bild von der liegenden Frau, die gerade massiert wird, das wir uns währrend der Vorbereitung herunter geladen haben, und ziehen Sie es auf die Leinwand des Screendesigns. Vergrößern Sie es gegebenenfalls.
Bild 5.53: Das Massagebild sollte das linke Rechteck überragen.
Wählen Sie nun das Werkzeug für die abgerundeten Rechtecke.
7356 Joomla Templates_NEU.indd 138
05.10.2009 10:34:45
5.3 Anleitung
139
Bild 5.54: Stellen Sie das Werkzeug auf »Pfade«.
Ziehen Sie einen Pfad mit der identischen Größe des Rechtecks unter das Bild.
Bild 5.55: Der Pfad liegt jetzt über dem Bild der liegenden Frau.
Wenden Sie nun eine Vektormaske an, indem Sie auf »Ebene > Vektormaske > Aktueller Pfad« gehen.
Bild 5.56: So wenden Sie den gezeichneten Pfad an.
Geben Sie dem Bild eine Kontur (Ebenenstil).
7356 Joomla Templates_NEU.indd 139
05.10.2009 10:34:45
140
Kapitel 5: Erstellung eines Screendesigns
Bild 5.57: Eine 2 Px starke Kontur soll das Bild zieren.
Wiederholen Sie den Vorgang für die drei Platzhalter rechts daneben, bis Ihr Ergebnis wie folgt aussieht:
Bild 5.58: Die abgerundeten Bilder haben innen alle eine Kontur.
Damit Sie sich den Inhalt noch besser vorstellen können, fügen Sie einige Blindtexte ein. Das sind Texte ohne Sinn und Inhalt und fangen meist mit »Lorem Ipsum« an. Zwei Websites zum Generieren solcher Texte finden Sie unter http://lipsum.com
und unter http://www.designerstoolbox.com/designresources/greek
Benutzen Sie für die Blindtexte das Text-Werkzeug [T] mit folgenden Einstellungen:
Bild 5.59: Die Text-Werkzeug-Einstellungen für die Blindtexte.
7356 Joomla Templates_NEU.indd 140
05.10.2009 10:34:45
5.3 Anleitung
141
Bild 5.60: Blindtext: Trebuchet MS, 12 Px, schwarz, mal fett, mal unterstrichen.
Bild 5.61: Der »mehr...«-Button symbolisiert einen Link auf den eigentlichen Artikel.
Bild 5.62: Die erste Box ist bestückt mit Bildern und Blindtexten.
7356 Joomla Templates_NEU.indd 141
05.10.2009 10:34:46
142
Kapitel 5: Erstellung eines Screendesigns
Wenden Sie sich nun der zweiten Box zu und bestücken Sie sie mit Inhalten.
Bild 5.63: Die leere Box als Ausgangspunkt.
Verwenden Sie das Text-Werkzeug, um auch diese Box mit Blindtext zu füllen.
Bild 5.64: Verwenden Sie für die Überschriften die Schriftart Georgia, 24 Px stark in Schwarz.
Bild 5.65: Achten Sie auf den 30 Px hohen Zeilenabstand.
7356 Joomla Templates_NEU.indd 142
05.10.2009 10:34:46
5.3 Anleitung
143
Bild 5.66: So ungefähr sollte die erste Spalte aussehen.
Bild 5.67: Die Texte der zweiten Spalte schreiben Sie in Orange (#ce7000).
Bild 5.68: Die zweite Spalte mit Blindtext soll später eine Linksammlung ergeben.
7356 Joomla Templates_NEU.indd 143
05.10.2009 10:34:46
144
Kapitel 5: Erstellung eines Screendesigns
Bild 5.69: Verwenden Sie das Werkzeug für abgerundete Rechtecke.
Zeichnen Sie ein abgerundetes Rechteck in Grau (#f2f2f2) und ein weiteres darunter in Schwarz (#000000) mit den gleichen Abmessungen.
Bild 5.70: Klicken Sie mit rechts in das schwarze Rechteck, um es zu verzerren.
7356 Joomla Templates_NEU.indd 144
05.10.2009 10:34:46
5.3 Anleitung
145
Bild 5.71: Verzerren Sie es nach rechts und links außen.
Bild 5.72: Verwenden Sie den Gaußschen Weichzeichner.
7356 Joomla Templates_NEU.indd 145
05.10.2009 10:34:47
146
Kapitel 5: Erstellung eines Screendesigns
Bild 5.73: Bestätigen Sie gegebenenfalls mit OK, dass die Ebene gerastert wird.
Bild 5.74: Stellen Sie den Radius auf 5 Pixel ein.
Bild 5.75: Geben Sie zum Schluss der Ebene eine Deckkraft von 24 Prozent.
7356 Joomla Templates_NEU.indd 146
05.10.2009 10:34:47
5.3 Anleitung
147
Fügen Sie jetzt die Icons ein, die wir in der Vorbereitung bereitgelegt haben, und platzieren und skalieren Sie sie so, wie auf dem folgenden Bild gezeigt.
Bild 5.76: Die zweite Box mit Blindtexten und Bildern.
Die letzte Box dient als Footer. Hier tauchen noch mal die Buttons zur Navigation auf sowie der Copyright-Hinweis und Kontaktdaten.
Bild 5.77: Die unterste Box soll als Footer dienen.
Verwenden Sie wieder das Text-Werkzeug [T] mit der Schrift Trebuchet MS, 14 Pixel, stark.
Bild 5.78: Die Schrifteinstellungen für den Footer.
7356 Joomla Templates_NEU.indd 147
05.10.2009 10:34:47
148
Kapitel 5: Erstellung eines Screendesigns
Bild 5.79: Die Telefonnummer soll sofort ins Auge springen.
Zu jeder Website gehört ein Impressum, dessen Link im Footer seinen Platz findet. Die Telefonnummer wird gut sichtbar in der Schriftgröße 24 Pixel angezeigt. Das war’s! Fertig ist das Screendesign.
Bild 5.80: Das Screendesign in der Endfassung.
7356 Joomla Templates_NEU.indd 148
05.10.2009 10:34:47
149
6
Vom Layout zum Template
Im vorherigen Kapitel haben Sie gelernt, wie man ein Screendesign für eine Website erstellt. In diesem Kapitel geht es darum, aus diesem Screendesign ein Joomla-Template zu entwickeln. Bevor wir uns an die pixelgenaue Umsetzung machen, ist es ratsam, sich einmal zurückzulehnen, um sich das Layout genau zu betrachten. Der Blick auf das Screendesign ist sehr wichtig, denn mit der Vorüberlegung entscheiden wir, wie die Umsetzung später erfolgen soll. Jedes Element wird dabei genau unter die Lupe genommen, um darüber nachzudenken, welche Techniken sich zur Realisierung einsetzen lassen. Viele Wege führen nach Rom. Bei der Template-Entwicklung werden wir versuchen, den jeweils einfachsten und elegantesten Weg zu finden.
6.1
Ein Blick auf das Screendesign
Das Layout aus dem vorherigen Kapitel dient uns als Designvorlage, die wir nun umsetzen wollen. Schauen wir sie uns einmal an.
7356 Joomla Templates_NEU.indd 149
05.10.2009 10:34:48
150
Kapitel 6: Vom Layout zum Template
Bild 6.1: Aus diesem Layout wird ein Joomla-Template entwickelt.
Hierbei handelt es sich um die Startseite einer Website. Oftmals unterscheidet sich das Layout der Startseite von dem der Folgeseiten, doch für das Prinzip einer Template-Erstellung reicht es, wenn wir uns auf diese Seite konzentrieren. Bei der Begutachtung des Designs erkennen wir, aus welchen Elementen es zusammengesetzt ist: Oben in der Mitte sehen wir das Logo, links und rechts davon befindet sich das Menü. Es folgt der Inhaltsbereich (engl. Inhalt = Content). Der Content besteht aus zwei Boxen. Die obere Box zeigt links ein großes Bild mit drei Buttons rechts. Die Box darunter besteht aus einem Text, einer Linkliste und weiteren Bildern. Danach folgt der Footer – eine weitere Box mit Links, Copyright, Impressum und Kontaktdaten.
7356 Joomla Templates_NEU.indd 150
05.10.2009 10:34:48
6.1 Ein Blick auf das Screendesign
151
In Photoshop liegen alle Elemente auf verschiedenen Ebenen, die übereinander angeordnet sind. Das symbolisiert die z-Achse des Designs. Liegt eine Ebene über einer anderen, liegt sie auf der z-Achse davor und verdeckt die dahinterliegende Ebene. Um das Layout richtig einzuteilen – also zu slicen –, müssen wir es uns in 3-D vorstellen. Wenn die x-Achse die Breite des Designs ist und die y-Achse die Höhe, ist die z-Achse die Tiefe des Designs.
Bild 6.2: Die z-Achse bildet die Achse der Ebenen.
Diese Ansicht gibt uns eine Vorstellung davon, wie wir das Layout am besten umsetzen können. Angefangen mit der ersten Ebene, dem Hintergrund, werden wir uns immer weiter nach oben arbeiten über das Menü, das Logo und die Boxen, bis wir schließlich bei den Texten angelangt sind.
7356 Joomla Templates_NEU.indd 151
05.10.2009 10:34:48
152
Kapitel 6: Vom Layout zum Template
Schauen wir uns das Layout noch mal in 2-D an, können wir es grob in drei Teile einteilen: Header, Content und Footer.
Bild 6.3: Die Einteilung des Layouts in drei Bereiche: Header, Content, Footer.
Wenn wir diese drei Bereiche verwenden, befindet sich im Header das Menü, im Content der Inhalt und im Footer der Seitenabschluss.
6.1.1
Der Header
Zusammen mit dem Footer ist das der Bereich, der sich auf den Seiten nicht ändern wird. Das heißt, der Besucher der Seite wird im Header stets das Gleiche vorfinden: das Menü – allerdings in unterschiedlichen Zuständen. Das Menü in unserem Beispiel wird die Einteilung haben: •
Solarium
•
Massage
7356 Joomla Templates_NEU.indd 152
05.10.2009 10:34:48
6.1 Ein Blick auf das Screendesign
•
Startseite (Logo)
•
Über uns
•
Kontakt
153
So wird das Menü unter Joomla angelegt, und im Cascading Style Sheet wird es mit Bildern, die wir aus dem Layout gewinnen, gestaltet. Das Blanko-Template dient, wie eingangs erwähnt, als Grundlage. Für die Menügestaltung verwenden wir dann die Datei template.css.
6.1.2
Content
Der Content kann noch mal in Unterbereiche eingeteilt werden.
Bild 6.4: Der Content mit unterschiedlichen Elementen.
In die erste, etwas transparente Box stecken wir eine Slideshow, die ihre Bilder nach kurzer Zeit wechselt. In der Box darunter werden wir die zwei Artikel »Wir über uns« und
7356 Joomla Templates_NEU.indd 153
05.10.2009 10:34:48
154
Kapitel 6: Vom Layout zum Template
»Wellness-Angebote« anzeigen lassen. Rechts daneben erstellen wir ein Modul, das mit den Icons auf »Weitere Angebote« verweist.
6.1.3
Der Footer
Den Schluss der Website bildet der Footer, der nochmals das Menü aufzeigt sowie den Copyright-Hinweis, das Impressum und die Kontaktdaten.
Bild 6.5: Der Footer ist unterteilt in die drei Bereiche Links, Impressum und Rechts.
Das Menü (links) wird in Joomla als Alias des Hauptmenüs angelegt und als Modul im Footer angezeigt werden. Das Copyright mit dem aktuellen Jahr werden wir als Parameter anlegen. Wenn das geschehen ist, können wir über den Template-Manager entscheiden, ob und wie das Copyright angezeigt wird. Das Impressum – Pflicht für jede deutsche Website – ist ein Menü mit nur einem Eintrag. Das dritte Menü im Footer werden die Partnerlinks. Zusammen mit den Kontaktdaten, die wir in ein eigenes Modul stecken, bilden sie die rechte Seite des Footers.
6.2
Die Modulpositionen festlegen
Anhand des Screendesigns legen wir die Modulpositionen fest und hinterlegen sie in der Datei templateDetails.xml. Die Artikel werden nicht von Modulen angezeigt, sondern von der Komponente com_content, also der Komponente für die Artikel. Es bleiben also Menü, Slideshow, Modul, Links, Impressum und Rechts. Umlaute im Quelltext können Fehler verursachen, und so nehmen wir für die Bezeichnungen die englischen Pendants: •
menu
•
show
•
cmodul
•
footleft
•
impress
7356 Joomla Templates_NEU.indd 154
05.10.2009 10:34:48
6.3 Die Parameter bestimmen
•
footright
•
debug
155
Die Modulposition debug setzen wir ganz ans Ende des Quelltexts. Sie ist für die Ausgabe im Frontend zuständig, wenn der Debug-Modus im Backend eingeschaltet wird, und dient der Fehlersuche. Die Position tragen wir jetzt in die Datei templateDetails.xml ein. Öffnen Sie diese Datei des Blanko-Templates. Am Ende finden Sie schon die Position debug vor. Ergänzen Sie die weiteren. Die Positionen werden mit dem Tag positions ausgezeichnet. Da die XML-Datei für die Installation des Templates zuständig ist, gehört das positions-Tag zwischen die install-Tags.
Bild 6.6: Die Modulpositionen sind ausgezeichnet in der XMLDatei.
Jetzt, da sie in der templateDetails.xml eingetragen sind, stehen sie für die Codierung der index.php bereit. Doch wenn wir schon mal diese Datei geöffnet haben, bleiben wir gleich hier.
6.3
Die Parameter bestimmen
Die XML-Datei templateDetails.xml dient nicht nur zur Installation. Auch die Parameter eines Templates können hier festgelegt werden. Im Blanko-Template ist das paramsTag schon dafür vorgesehen. Sie finden es ganz unten in der Datei. Wie die Positionen gehören auch die Parameter zwischen das install-Tag. Das Copyright wollen wir parametrisieren. Es sollen drei Zustände zur Wahl stehen: •
Keine Anzeige des Copyrights
•
Vordefinierte Anzeige mit Datum
•
Eigener Copyright-Text
7356 Joomla Templates_NEU.indd 155
05.10.2009 10:34:48
156
Kapitel 6: Vom Layout zum Template
Das lässt sich am besten mit dem Parametertyp list umsetzen. Für die letzte Option »Eigener Copyright-Text« stellen wir noch den Typ text bereit, damit man auch einen eigenen Text eingeben kann. Für die Überschrift nehmen wir den Typ spacer zu Hilfe.
Bild 6.7: Als Parameter kommen die Typen spacer, list und text zum Einsatz.
Drei Variablen für die Sprachdatei finden wir hier als Standard des Blanko-Templates vor: COPYRIGHT PARAMS, PARAM COPYRIGHT STATUS DESC und PARAM COPYRIGHT TEXT DESC. Diese Variablen mit ihren dazugehörigen Texten schreiben wir später in die Sprachdateien, dazu Näheres im Unterkapitel »Das Template weiter vorbereiten«. Das war es vorerst in der XML-Datei. Später müssen wir diese Datei noch einmal öffnen und editieren. Dann heißt es: Alle Dateien zum Template müssen aufgelistet werden. Doch bevor das geschehen kann, sollten alle Dateien inklusive der Bilder vorliegen. Und die Bilder erstellen wir als Nächstes.
6.4
Die Bilder erstellen
Das Layout werden wir Teil für Teil mithilfe von Bildern realisieren. Für den Hintergrund etwa werden wir nur ein einziges Bild brauchen. Auch für den Hintergrund des Menüs verwenden wir lediglich ein Bild, das sich dann in vertikaler Richtung wiederholen wird. Damit uns diese Bilder in gewünschter Form zur Verfügung stehen, wird das Layout in sogenannte Slices, sprich: Teilbereiche, eingeteilt. Ein Slice ist ein Rechteck, das einen Bereich des Layouts definiert.
7356 Joomla Templates_NEU.indd 156
05.10.2009 10:34:48
6.4 Die Bilder erstellen
6.4.1
157
Der Hintergrund
Bevor wir anfangen, das Layout in Photoshop in Slices aufzuteilen, blenden wir alle Ebenen bis auf die Hintergrundebene aus, um eben diesen Hintergrund als Bild zu exportieren.
Bild 6.8: Alle Ebenen bis auf den Hintergrund werden ausgeblendet.
Jetzt können wir den Hintergrund fürs Web speichern. Gehen Sie dazu auf »Datei > Für Web und Geräte speichern ...« oder drücken Sie die Tastenkombination [ALT] + [SHIFT] + [STRG] + [S] für Windows oder [ALT] + [CMD] + [SHIFT] + [S] für Mac.
7356 Joomla Templates_NEU.indd 157
05.10.2009 10:34:48
158
Kapitel 6: Vom Layout zum Template
Tipp: Merken Sie sich die Tastenkombination [ALT] + [SHIFT] + [STRG] + [S] für Windows oder [ALT] + [CMD] + [SHIFT] + [S] für Mac. Sie werden sie häufiger benutzen können und sparen damit Arbeit und Zeit. Wir können nun die Einstellungen für den Export festlegen.
Bild 6.9: Den Hintergrund exportieren wir im JPG-Format.
Als Bildformat wählen wir JPG wegen der besten Kompression. Mit den Formaten GIF und PNG kämen wir weit über 100 Kilobyte (KB) hinaus, was einfach zu groß wäre. Das Hintergrundbild wird mit das größte des Templates sein und darf somit zwischen 50 und 100 KB groß sein. In unserem Fall wählen wir eine 72-prozentige Qualität und kommen damit auf 65,34 KB. Klicken Sie auf »Speichern« und geben Sie dem Bild den Namen bg.jpg.
7356 Joomla Templates_NEU.indd 158
05.10.2009 10:34:49
6.4 Die Bilder erstellen
6.4.2
159
Das Menü
Das Menü sehen wir im Screendesign im normalen Zustand. Doch was geschieht, wenn der Besucher über einen Button geht und klickt? Da wäre es angebracht, diese Aktion optisch anzuzeigen. Was wir dafür brauchen, sind Bilder für die Zustände normal (existiert bereits), hover (wenn man mit der Maus über den Button fährt), pressed (wenn der Button gedrückt wird) und active (wenn der Button ausgewählt ist). Nachfolgend werden wir alle Zustände erstellen und als ein einziges Bild abspeichern. Mittels CSS werden wir die Buttons dann so definieren, dass die entsprechenden Bereiche des Bilds angezeigt werden. Der Vorteil dieser Methode liegt auf der Hand: Es wird für das Menü nur ein einziges Bild benötigt. Somit erspart man dem Besucher das lästige Nachladen der Bilder. Das Nachladen verursacht zudem einen unschönen Blitzeffekt: Der Button blinkt kurz auf, aber nur beim ersten Mal, wenn man darüberfährt. Das Screendesign liegt uns mit eingeblendetem Hintergrund vor. Blenden Sie die Ebenen für das Logo und das Menü ein und gruppieren Sie sie ([STRG]+[G] für Windows oder [CMD]+[G] für Mac). Geben Sie der Gruppe den Namen normal und duplizieren Sie die Gruppe dreimal. Den Duplikaten geben Sie dann die Namen hover, pressed und active. Mithilfe dieser Gruppen werden wir die einzelnen Zustände realisieren, die dem Besucher anzeigen, dass er sich gerade über einem Button (hover) befindet, dass er einen Button gerade gedrückt hat (pressed) oder ob der Button – und somit die Seite – gerade aktiv ist (active).
Bild 6.10: Mithilfe der Duplikate erzeugen wir die einzelnen Zustände.
Ordnen Sie die Gruppen auf der Bühne mit einem Abstand von jeweils 100 Pixeln untereinander an. Das Logo braucht nur im normal- und im hover-Zustand eingeblendet zu sein.
7356 Joomla Templates_NEU.indd 159
05.10.2009 10:34:49
160
Kapitel 6: Vom Layout zum Template
Bild 6.11: Die Gruppen werden mit einem Abstand von 100 Pixeln untereinander angeordnet.
Wechseln Sie in die Gruppe hover und geben Sie jeder Schrift eine »Farbüberlagerung«.
Bild 6.12: Die Farbüberlagerung im hover-Zustand mit dem Farbwert #ff9500.
Beim Hintergrund des Logos schalten Sie den Ebenenstil »Verlaufsüberlagerung« aus und geben ihm stattdessen eine »Farbüberlagerung«.
Bild 6.13: Der Hintergrund des Logos bekommt den Farbwert #f2991b.
Nehmen Sie sich jetzt die Zustände vor, die entstehen, wenn der Besucher einen Button anklickt. Dazu wechseln Sie in die Gruppe pressed. Der Schrift der Buttons geben wir einerseits einen »Schlagschatten« und andererseits eine »Farbüberlagerung«.
7356 Joomla Templates_NEU.indd 160
05.10.2009 10:34:49
6.4 Die Bilder erstellen
161
Bild 6.14: Der Schlagschatten des gedrückten Buttons ist schwarz (#000000) ohne Abstand.
Bild 6.15: Die Schrift füllen wir mit Weiß (#ffffff).
Bleibt noch der active-Zustand. Gehen Sie in diese Gruppe und geben Sie der jeweiligen Schrift einen »Schein nach außen« sowie eine »Farbüberlagerung«.
7356 Joomla Templates_NEU.indd 161
05.10.2009 10:34:49
162
Kapitel 6: Vom Layout zum Template
Bild 6.16: Der weiße (#ffffff) Schein nach außen für den aktiven Zustand.
Bild 6.17: Eine schwarze (#000000) Farbüberlagerung für einen höheren Kontrast.
Das Menü in allen Zuständen sieht dann so aus:
7356 Joomla Templates_NEU.indd 162
05.10.2009 10:34:49
6.4 Die Bilder erstellen
163
Bild 6.18: Die vier Zustände des Menüs von oben: normal, hover, pressed und active.
Das Menü ist fertiggestellt und kann exportiert werden. Dazu verwenden wir jetzt das Slice-Werkzeug [K].
Bild 6.19: Mithilfe des SliceWerkzeugs teilen wir das Layout ein.
7356 Joomla Templates_NEU.indd 163
05.10.2009 10:34:49
164
Kapitel 6: Vom Layout zum Template
Bild 6.20: Ziehen Sie ein Rechteck (Slice) über alle Ebenen des Menüs.
Der Slice sollte 940 Pixel breit und 360 Pixel hoch sein. Gehen Sie mit der rechten Maustaste auf »Slice-Optionen bearbeiten ...« .
Bild 6.21: Der Name wird beim Export für den Dateinamen verwendet.
Geben Sie dem Slice den Namen menu und klicken Sie auf OK. Jetzt können Sie, wie beim Hintergrund, das Bild »Für Web und Geräte speichern ...« (haben Sie sich die Tastenkombination gemerkt? [ALT] + [SHIFT] + [STRG] + [S] für Windows und [ALT] + [CMD] + [SHIFT] + [S] für Mac).
7356 Joomla Templates_NEU.indd 164
05.10.2009 10:34:49
6.4 Die Bilder erstellen
165
Bild 6.22: Das Menü exportieren wir im PNG-Format (png-8).
Bei den Exporteinstellungen wählen wir das PNG-Format aus. Es bietet eine Transparenz mit bestmöglichem Verhältnis von Qualität zu Größe. Damit die runden Ecken des Logos sauber aussehen, ist es wichtig, den Hintergrund mit der Farbe #b17e3d zu versehen. Wenn Sie auf »Speichern« klicken, wird eine Datei namens menu.png mit einer Größe von 22,2 KB erstellt. Der Hintergrund des Menüs soll sich in x-Richtung (also horizontal) wiederholen. Wir erstellen ein weiteres Slice (bg_menu) und exportieren es als PNG-Datei.
7356 Joomla Templates_NEU.indd 165
05.10.2009 10:34:50
166
Kapitel 6: Vom Layout zum Template
Bild 6.23: 1 Pixel breit soll der Hintergrund des Menüs exportiert werden.
Mit der rechten Maustaste kommen Sie zu den »Slice-Optionen«.
Bild 6.24: Die Datei bg_menu.png
soll hinterher 60 Pixel hoch sein.
Exportieren Sie das Bild mit der Tastenkombination [ALT] + [SHIFT] + [STRG] + [S] (Mac [ALT] + [CMD] + [SHIFT] + [S]).
7356 Joomla Templates_NEU.indd 166
05.10.2009 10:34:50
6.4 Die Bilder erstellen
167
Bild 6.25: Es können die gleichen Einstellungen wie vorher verwendet werden.
Blenden Sie zum Schluss das Menü komplett aus und entfernen Sie die Slices. Somit wird der Platz wieder für die anderen Ebenen freigegeben.
6.4.3
Elemente des Inhalts
Für die Elemente des Inhalts blenden Sie alle nötigen Ebenen ein.
7356 Joomla Templates_NEU.indd 167
05.10.2009 10:34:50
168
Kapitel 6: Vom Layout zum Template
Bild 6.26: Die Ebenen des Inhalts: oben die Slideshow, unten die Beiträge.
Beginnen wir mit der Slideshow (obere Box). Die Box wird etwas transparent angezeigt. Diesen Alphaeffekt beherrscht nur das PNG-Format. Der Internet Explorer 6 hat damit seine Schwierigkeiten, doch mit dem PNG-Fix (siehe Kapitel 3, »Der Aufbau eines Templates«) können wir auch transparente Bilder mit Alphaeffekt anzeigen lassen. Dieser Fix greift jedoch leider nicht im Cascading Style Sheet. Das heißt, transparente PNG-Bilder mit Alphaeffekt, die per CSS verwendet werden, kann der Internet Explorer 6 nicht richtig interpretieren. Der Clou mit dem Fix fällt hier also flach. Wir benutzen stattdessen einen Pseudoeffekt, indem wir die Box samt durchschimmerndem Hintergrund als ein Bild exportieren. Die richtige Positionierung des Bilds per CSS lässt den Effekt dann perfekt aussehen.
7356 Joomla Templates_NEU.indd 168
05.10.2009 10:34:50
6.4 Die Bilder erstellen
169
Blenden Sie die Elemente der Slideshow wieder aus und ziehen Sie mit dem Slice-Werkzeug [K] einen Slice um die Box. Der Slice bekommt über die »Slice-Optionen« (rechte Maustaste) den Namen bg_slideshow. Danach können Sie ihn als Bild exportieren.
Bild 6.27: Der Hintergrund der Slideshow (940 x 350 Px) mit Alphaeffekt.
Bild 6.28: Die Slice-Optionen für den SlideshowHintergrund.
Die Einstellungen des Exports sollten identisch sein mit denen des Hintergrunds (siehe Kapitel 6.4.1 »Der Hintergrund«). Nur so wird später ein nahtloser, nicht sichtbarer Übergang gewährleistet.
7356 Joomla Templates_NEU.indd 169
05.10.2009 10:34:50
170
Kapitel 6: Vom Layout zum Template
Bild 6.29: Wählen Sie die gleichen Exporteinstellungen wie beim Hintergrund davor.
Wenn Sie das Bild abgespeichert haben, entfernen Sie den Slice wieder, damit wir an die anderen Elemente der Slideshow herankommen. Diese blenden wir ein und ziehen vier neue Slices.
Bild 6.30: Ziehen Sie jeweils einen Slice über jedes Element.
7356 Joomla Templates_NEU.indd 170
05.10.2009 10:34:51
6.4 Die Bilder erstellen
171
Über die »Slice-Optionen« (rechte Maustaste) können Sie den Slices Namen geben, beispielsweise slide_massage und slide_massage_tn. Das Suffix _tn steht dabei für das entsprechende Thumbnail (wörtlich: Daumennagel, der englische Ausdruck für ein Miniaturbild) auf der rechten Seite. Exportieren Sie die drei Slideshow-Bilder samt ihrer Thumbnails.
Bild 6.31: Wählen Sie die gleichen Einstellungen wie beim Export des Hintergrunds.
Für die Bilder der Slideshow brauchen wir später noch eine Maske – ein Bild, das wir über die wechselnden Bilder legen und das den Rahmen bildet. Löschen Sie zunächst die gezogenen Slices der Slideshow und blenden Sie nur den transparenten Hintergrund ein.
7356 Joomla Templates_NEU.indd 171
05.10.2009 10:34:51
172
Kapitel 6: Vom Layout zum Template
Bild 6.32: Der Hintergrund der Slideshow.
Wählen Sie nun das Werkzeug für abgerundete Rechtecke [U] mit einem Radius von 10 Px.
Bild 6.33: Das abgerundete Rechteck-Werkzeug im Modus »Pfade«.
Zeichnen Sie ein Rechteck mit der gleichen Größe der Slideshow-Bilder. Kleiner Tipp: Blenden Sie ein Slideshow-Bild und das Raster ein, um sich das Zeichnen zu vereinfachen.
Bild 6.34: Der abgerundete Pfad mit den gleichen Abmessungen wie die Slideshow-Bilder.
Aus dem Pfad erstellen Sie als Nächstes eine Auswahl.
7356 Joomla Templates_NEU.indd 172
05.10.2009 10:34:51
6.4 Die Bilder erstellen
173
Bild 6.35: Erstellen Sie aus dem Pfad eine Auswahl.
Bild 6.36: Mit OK bestätigen Sie den Vorgang.
Bild 6.37: Aus dem Pfad ist nun eine Auswahl entstanden.
Kehren Sie jetzt die Auswahl um.
7356 Joomla Templates_NEU.indd 173
05.10.2009 10:34:51
174
Kapitel 6: Vom Layout zum Template
Bild 6.38: Über das Photoshop-Menü können Sie die Auswahl umkehren.
Der Hintergrund der Slideshow soll nun genau in dieser Auswahl angezeigt werden. Fügen Sie hierfür eine zusätzliche Ebenenmaske hinzu.
Bild 6.39: Erstellen Sie eine zusätzliche Maske für den Slideshow-Hintergrund.
Bild 6.40: Der Hintergrund der Slideshow als ausgeschnittene Schablone.
Den gleichen Vorgang wenden wir auf den Layouthintergrund an. Wir machen es uns aber einfach und wählen die Auswahl erneut aus.
Bild 6.41: Über das Photoshop-Menü können Sie die Auswahl erneut auswählen.
Aus der Auswahl erstellen wir wiederum eine Ebenenmaske, diesmal für den Layouthintergrund.
7356 Joomla Templates_NEU.indd 174
05.10.2009 10:34:51
6.4 Die Bilder erstellen
175
Bild 6.42: Eine Maske für die Hintergrundebene wird hinzugefügt.
Bild 6.43: Der Hintergrund erscheint nun auch ausgeschnitten.
Wählen Sie erneut das Werkzeug für abgerundete Rechtecke, und zeichnen Sie ein Rechteck mit einem Radius von 10 Pixeln genau über diesen Ausschnitt.
Bild 6.44: Das abgerundete Rechteck bedeckt genau den Ausschnitt.
Dem Rechteck weisen wir jetzt einen Ebenenstil zu. Die Deckkraft der Fläche wird entfernt und mit einem Innenrand ausgestattet.
7356 Joomla Templates_NEU.indd 175
05.10.2009 10:34:52
176
Kapitel 6: Vom Layout zum Template
Bild 6.45: Entfernen Sie die Deckkraft der Fläche.
Bild 6.46: Eine 2 Px starke, graue (#d8d9dc) Innenkontur dient als Rahmen.
Unsere Maske für die Slideshow ist nun fertig. Jetzt muss sie nur noch als Bild webgerecht exportiert werden. Ziehen Sie dazu mit dem Slice-Werkzeug [K] einen Slice über die Maske.
7356 Joomla Templates_NEU.indd 176
05.10.2009 10:34:52
6.4 Die Bilder erstellen
177
Bild 6.47: Der Slice wird über dem Ausschnitt mit dem Innenrand gezogen.
Die Maske soll lediglich aus einem abgerundeten Rand bestehen. Gehen Sie mit der rechten Maustaste zu den »Slice-Optionen«.
Bild 6.48: Geben Sie dem Slice den Namen »slidemask« (590 x 310 Px).
Die Maske wird später per HTML als Bild eingefügt. Exportiert wird sie im PNG-24Format. Mit dem PNG-Fix des Templates stellen wir sicher, dass die Maske später auch im Internet Explorer 6 korrekt angezeigt wird. Der PNG-Fix wirkt sich zwar nicht auf das CSS aus, aber auf das HTML.
7356 Joomla Templates_NEU.indd 177
05.10.2009 10:34:52
178
Kapitel 6: Vom Layout zum Template
Bild 6.49: Exportiert wird die Maske als transparentes PNG (PNG-24).
Es geht weiter mit dem Inhalt. Den Hintergrund der zweiten Box exportieren wir als transparentes GIF-Bild mit dem Namen bg_box. Blenden Sie alles bis auf den Hintergrund der Box aus und ziehen Sie darüber mit dem Slice-Werkzeug [K] einen Slice.
Bild 6.50: Der Hintergrund der zweiten Box (ohne Layouthintergrund).
7356 Joomla Templates_NEU.indd 178
05.10.2009 10:34:52
6.4 Die Bilder erstellen
179
Geben Sie dem Slice über die »Slice-Optionen« einen Namen. Exportieren Sie das Bild nun als GIF. Wichtig: Stellen Sie den »Hintergrund« auf die Hintergrundfarbe #181109.
Bild 6.51: Der Hintergrund als transparentes GIF mit der Farbe #181109.
Den Slice können Sie wieder löschen. Blenden wir nun den Hintergrund der Modulbox ein und ziehen wir einen Slice darüber mit dem Namen bg_modulbox.
7356 Joomla Templates_NEU.indd 179
05.10.2009 10:34:52
180
Kapitel 6: Vom Layout zum Template
Bild 6.52: Der Slice ist 10 Pixel kleiner in der Höhe des Hintergrunds.
Bild 6.53: Mit X und Y können Sie den Slice gut positionieren.
7356 Joomla Templates_NEU.indd 180
05.10.2009 10:34:53
6.4 Die Bilder erstellen
181
Exportieren wir das Bild als GIF mit den gleichen Einstellungen wie zuvor. Den Vorgang wiederholen wir für die Icons: Slice löschen, Icons einblenden, Slice darüberziehen, Name Icons vergeben und als GIF-Bild exportieren.
Bild 6.54: Die Icons werden separat exportiert.
Bild 6.55: Das Bild der Icons ist 270 Pixel breit und 220 Pixel hoch.
6.4.4
Der Footer
Für den Footer benötigen wir nur ein Bild: den Hintergrund. Blenden Sie alle anderen Ebenen aus und ziehen Sie darüber mit dem Slice-Werkzeug [K] einen Slice.
7356 Joomla Templates_NEU.indd 181
05.10.2009 10:34:53
182
Kapitel 6: Vom Layout zum Template
Bild 6.56: Der Hintergrund des Footers wird transparent exportiert.
Exportieren Sie es als transparentes Bild mit dem Namen bg_footer. Jetzt haben wir alle Bilder des Layouts beisammen. Das Bild transparent.gif existiert schon. Es ist ein 1 x 1 Pixel großes transparentes GIF-Bild, das im Blanko-Template im Ordner images bereitliegt. Es wird für den PNG-Fix gebraucht.
Bild 6.57: Die Bilder des Layouts sind für das Template erstellt.
6.5
Die Installationsroutine festlegen
Jetzt, da wir alle Bilder haben, listen wir sie mit den anderen Dateien für die Installationsroutine auf. Das geschieht in der Datei templateDetails.xml. Mit der Auflistung verraten wir Joomla bei der Installation des Templates, welche Dateien dazugehören und an welchem Ort sie platziert werden sollen. Außer den Sprachdateien (diese werden gesondert gehandhabt) werden die Dateien zwischen den files-Tags aufgelistet. Genau genommen handelt es sich um die Pfade der Dateien.
7356 Joomla Templates_NEU.indd 182
05.10.2009 10:34:53
6.5 Die Installationsroutine festlegen
183
Für die Bilder geben wir die folgenden Dateien an:
Bild 6.58: Für die Installationsroutine wichtig: die Angabe der Dateien.
Die Vielzahl der anderen Dateien in der XML-Datei gehört zu den Overrides. Diese können Sie mit freundlicher Genehmigung der YOOtheme GmbH unter folgender Adresse herunterladen: http://www.yootheme.com
speziell unter http://www.yootheme.com/member-area/downloads/item/templates-15/ template-overrides-15
Kopieren Sie einfach den html-Ordner in das Template-Verzeichnis. Die übrigen Dateien können Sie vernachlässigen. Haben Sie den Ordner kopiert, tragen Sie alle Dateien in die Liste der Datei templateDetails.xml nach.
7356 Joomla Templates_NEU.indd 183
05.10.2009 10:34:53
184
Kapitel 6: Vom Layout zum Template
Bild 6.59: Für die lange Liste von Dateien sind die Overrides verantwortlich.
7356 Joomla Templates_NEU.indd 184
05.10.2009 10:34:53
6.5 Die Installationsroutine festlegen
185
Wenn Sie das Blanko-Template kürzlich heruntergeladen haben, stehen Ihnen die Overrides aktualisiert zur Verfügung, und Sie brauchen sie in der Liste nicht nachzutragen. Es fehlen noch die übrigen Template-Dateien in der Liste. Diese sind schnell nachgetragen.
Bild 6.60: Alle Dateien des Templates werden aufgelistet.
Die Datei slideshow.js existiert schon im js-Ordner des Template-Verzeichnisses. Sie wird später für die Slideshow verwendet und setzt auf dem JavaScript-Framework Mootools auf. Es handelt sich hierbei um die JavaScript-Datei von der Slideshow »noobslide«, deren Beispiele und Downloads Sie unter http://wellpanda.bloggerschmidt.de/res/noob
erreichen. Wenn Sie die Slideshow dort herunterladen und entpacken, finden Sie eine Datei namens _class.noobSlide.js vor. Diese wurde umbenannt in slideshow.js und in den Ordner js kopiert. Zwei weitere besondere Dateien bilden die Sprachdateien. Sprachdateien werden unter Joomla als Erweiterung gehandhabt und gehören in die Ordner languages und administrator/languages. Damit die Dateien während der Installation dorthin geschoben werden, werden sie mit dem language-Tag ausgezeichnet. Auch dieses Tag gehört zwischen und .
Bild 6.61: Die Sprachdateien des Blanko-Templates.
7356 Joomla Templates_NEU.indd 185
05.10.2009 10:34:53
186
Kapitel 6: Vom Layout zum Template
Ersetzen Sie TEMPLATENAME durch den Namen des Templates, in unserem Fall wellpanda. Wenn Sie die Namen hier umschreiben, müssen Sie die Dateinamen ebenfalls umschreiben.
Bild 6.62: Die Sprachdateien müssen nachher mit diesen Namen vorliegen.
Im nächsten Unterkapitel 6.6 »Das Template weiter vorbereiten« werden wir sicherstellen, dass die Dateien, die hier genannt werden, auch namentlich vorgefunden werden können. Dazu werden die vorhandenen Dateien des Blanko-Templates umbenannt. Am Anfang der Datei templateDetails.xml hinterlassen wir die Kopfdaten des Templates. Hier können Sie die Daten mit Ihren Daten abgleichen.
Bild 6.63: Die Kopfdaten des Blanko-Templates ...
Bild 6.64: ... können Sie mit Ihren Daten füllen.
Wichtig: Der Name, hier WellPanda, ist der Namensgeber des Template-Ordners. Den Text der Sprachvariablen WELLPANDA DESCRIPTION verfassen wir im nachfolgenden Unterabschnitt.
7356 Joomla Templates_NEU.indd 186
05.10.2009 10:34:54
6.6 Das Template weiter vorbereiten
6.6
187
Das Template weiter vorbereiten
Starten Sie Ihre Testumgebung (siehe Kapitel 2, »Die Joomla-Testumgebung«). Nehmen Sie das Blanko-Template (Ordner) und kopieren Sie es in das Verzeichnis templates von Joomla. Das kommt einer manuellen Installation des Templates gleich.
6.6.1
Namen ändern
Benennen Sie den Ordner mit dem Namen des Templates um. Wichtig: Der Name darf keine Leerzeichen enthalten.
Bild 6.65: Der Name des Templates ist der Namensgeber des Ordners.
In unserem Fall nennen wir den Ordner in wellpanda um. Wenn wir den Ordner öffnen, nehmen wir uns als Erstes die zwei Sprachdateien vor. Sie finden diese im TemplateOrdner und dort im Unterordner admin. Beide heißen de-DE.tpl_TEMPLATENAME.ini. Ersetzen Sie die Bezeichnung TEMPLATENAME im Dateinamen durch wellpanda, den Namen unseres Templates.
Bild 6.66: Beide Sprachdateien tragen die gleichen Namen.
Die Sprachdateien liegen aufgrund der manuellen Installation im falschen Ordner. Wir lassen sie aber vorerst in unserem Verzeichnis liegen, denn später werden wir aus diesem Verzeichnis ein ZIP-Paket schnüren, das sich dann einfach unter jedem Joomla-System installieren lässt. Doch für die Entwicklung ist das manuelle Eingreifen unerlässlich. Kopieren Sie eine Sprachdatei in den Ordner languages im Joomla-Root-Verzeichnis und eine in den Ordner administrator/languages. Damit wäre unsere manuelle Installation in der Testumgebung komplett.
7356 Joomla Templates_NEU.indd 187
05.10.2009 10:34:54
188
Kapitel 6: Vom Layout zum Template
6.6.2
Sprachdateien verfassen
Der Inhalt der Sprachdateien wird der gleiche sein. Öffnen Sie eine der nunmehr vier Dateien (zwei im Template-Ordner, eine im Ordner languages und eine im Ordner administrator/languages) und tragen Sie die Variablen ein, die wir in der templateDetails.xml vergeben haben. •
WELLPANDA DESCRIPTION
•
COPYRIGHT PARAMS
•
PARAM COPYRIGHT STATUS DESC
•
PARAM COPYRIGHT TEXT DESC
Hinter den Variablen schreiben Sie den jeweiligen Text. HTML-Tags sind erlaubt, aber keine Zeilenumbrüche. Hier ein Beispiel:
Bild 6.67: Unsere Sprachdatei mit den Variablen und den dazugehörigen Texten.
Wenn Sie die Texte verfasst haben, können Sie den kompletten Inhalt kopieren und in die anderen Sprachdateien einfügen.
6.6.3
Vorschaubild und Favicon erstellen
Zwei weitere Bilder finden wir im Template-Ordner: das Favicon favicon.ico, streng genommen ein Icon und kein Bild, und die Template-Vorschau template_thumbnail. png. Für beide Bilder liegen im Unterordner psd schon Photoshop-Dateien bereit: favicon.psd und template-thumbnail.psd. Öffnen Sie beide Dateien. Öffnen Sie auch die Screendesign-Datei wellpanda.screendesign.psd. Für die Vorschau exportieren Sie das Screendesign als PNG-Datei und öffnen diese. Dann kopieren Sie das Bild in die Datei template_thumbnail.psd und skalieren es auf eine Breite von 206 Pixeln bei gleichbleibendem Seitenverhältnis.
7356 Joomla Templates_NEU.indd 188
05.10.2009 10:34:54
6.6 Das Template weiter vorbereiten
189
Bild 6.68: Das Vorschaubild des Templates.
Exportieren Sie es im PNG-Format und speichern Sie es im Template-Ordner als template-thumbnail.png ab. Ähnlich verfahren Sie mit dem Favicon. Ziehen Sie das Logo des Screendesigns (Pandakopf) in die Datei favicon.psd und skalieren Sie es entsprechend.
Bild 6.69: Als Favicon wählen wir den Pandakopf.
Exportieren Sie es als JPG, GIF oder PNG. Um ein korrektes Icon zu erstellen, verwenden wir einen der zahlreichen Dienste im Internet, beispielsweise http://favicon-generator.org
oder http://www.degraeve.com/favicon
Auf diesen Seiten können Sie das exportierte Bild des Favicons verwenden und ein Icon daraus erstellen lassen. Dieses Icon speichern Sie im Template-Ordner unter dem Namen favicon.ico ab.
6.6.4
Das Template als Standard auswählen
Nun fehlt nur noch, dass wir das Template als Standard-Template unter Joomla definieren. Dazu starten Sie Ihre Testumgebung und loggen sich im Backend als Administrator ein. Gehen Sie zu »Erweiterungen > Templates«, wählen Sie WellPanda aus und klicken Sie auf »Standard«.
7356 Joomla Templates_NEU.indd 189
05.10.2009 10:34:54
190
Kapitel 6: Vom Layout zum Template
Bild 6.70: Das Template, das als Standard gewählt ist, wird im Frontend angezeigt.
Bevor wir mit der Programmierung beginnen, ist es sinnvoll, die Website mit Blindtexten zu bestücken, die Menüs anzulegen und die Module zu erstellen.
6.7
Blindtexte, Menüs und Module anlegen
Vor das Codieren haben die Götter den Quelltext gesetzt. Damit er uns bei der Programmierung auch zur Verfügung steht, ist es ratsam, Blindtexte, Menüs und Module vorher anzulegen. Die Modulpositionen sind schon festgelegt, und so können die Module bereits eingerichtet werden, bevor man überhaupt etwas sieht. Loggen Sie sich ins Backend von Joomla ein, wenn Sie nicht schon angemeldet sind, und deaktivieren Sie als Erstes den Editor in der Konfiguration. Gehen Sie über »Site > Konfiguration« zu den »Site-Einstellungen« und wählen Sie hier »Kein Editor« aus (als Standard ist der TinyMCE-Editor eingetragen).
7356 Joomla Templates_NEU.indd 190
05.10.2009 10:34:54
6.7 Blindtexte, Menüs und Module anlegen
191
Bild 6.71: Stellen Sie »Kein Editor« ein.
Speichern Sie die Konfiguration ab und wechseln Sie zu »Inhalt > Beiträge«.
6.7.1
Blindtexte schreiben
Blindtexte sind bestens dazu geeignet, dem Template in der Entwicklungsphase Leben einzuhauchen. Wenn noch kein Inhalt vorliegt, kann man auf sie zurückgreifen. Blindtexte fangen meist mit »Lorem Ipsum« an. Zwei Websites zum Generieren solcher Texte finden Sie unter http://lipsum.com
und unter http://www.designerstoolbox.com/designresources/greek
Erstellen Sie nun sechs neue Beiträge mit Blindtexten für •
Solarium
•
Massage
•
Wir über uns
•
Kontakt
•
Wellness-Angebote
•
Impressum
7356 Joomla Templates_NEU.indd 191
05.10.2009 10:34:54
192
Kapitel 6: Vom Layout zum Template
Bild 6.72: Die Beiträge sind alle unkategorisiert abgelegt.
Für die Blindtextbeiträge brauchen Sie keine Bereiche und Kategorien anzulegen. Es reicht, wenn sie unkategorisiert erstellt werden. Die Artikel »Wir über uns« und »Weitere Angebote« veröffentlichen wir auf der Startseite. Hier die Blindtexte der einzelnen Beiträge: »Solarium«, »Massage«, »Wir über uns«, »Kontakt«, »Impressum«
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
Die Beiträge sind vorhanden und können den Menüs zugewiesen werden. Gehen Sie im Backend auf »Menüs > Menüs« und erstellen Sie die vier folgenden Menüs: •
Hauptmenü
•
Hauptmenü (footer)
•
Impressum
•
Partner
Das Hauptmenü wird mit jeder Joomla-Installation bereits angelegt. Hauptmenü Wenn Sie ins Hauptmenü wechseln, finden Sie den Eintrag »Startseite« schon vor. Erstellen Sie vier weitere Einträge mit »Neu > Beiträge > Layout: Beitrag (Joomla!-Standard)« und wählen Sie den dazugehörigen Beitrag aus. •
Startseite (bereits angelegt)
•
Solarium
•
Massage
•
Über uns
•
Kontakt
Erstellen Sie die Einträge in dieser Reihenfolge.
7356 Joomla Templates_NEU.indd 193
05.10.2009 10:34:55
194
Kapitel 6: Vom Layout zum Template
Bild 6.73: Wichtig: die Reihenfolge und die Itemid.
Sortieren Sie die Menüeinträge neu nach der Reihenfolge, die im Bild vorgegeben ist. Wenn Sie Joomla frisch installiert und bisher keine Einträge gemacht haben, sollten sie die im Bild dargestellten Itemids zugewiesen bekommen. Mithilfe der Itemids können wir im Cascading Style Sheet das Menü exakt definieren. Sollten bei Ihnen andere Itemids vergeben worden sein, können Sie das Cascading Style Sheet später abgleichen. Der Seitentitel, standardmäßig aktiviert, soll nicht angezeigt werden. Öffnen Sie den Menüeintrag »Startseite«. Unter »Systemparameter« (rechte Spalte) klicken Sie bei »Seitentitel anzeigen« auf »Nein«. Danach können Sie den Eintrag speichern und verlassen. Hauptmenü (footer) Wechseln Sie ins Menü »Hauptmenü (footer)« und legen Sie vier neue Einträge mit »Neu > Alias« an. Wählen Sie den jeweils entsprechenden Menüeintrag des Hauptmenüs. •
Solarium
•
Massage
•
Über uns
•
Kontakt
Impressum Das Menü »Impressum« bekommt lediglich einen Eintrag. Über »Neu > Beiträge > Layout: Beitrag (Joomla!-Standard)« können Sie den Beitrag »Impressum« auswählen.
7356 Joomla Templates_NEU.indd 194
05.10.2009 10:34:55
6.7 Blindtexte, Menüs und Module anlegen
195
Partner Das Menü »Partner« besteht aus drei externen Links, die alle beispielhaft auf die Adresse http://www.franzis.de zielen. Mit »Neu > Externer Link« können Sie den Link auf die externe Seite setzen.
6.7.3
Module verwalten
Wenn Sie zu »Erweiterungen > Module« wechseln, finden Sie schon vier Module vor. Das sind die Module, die zu den Menüs gehören und die noch korrekt zugewiesen werden müssen. Einstellungen der Menümodule ändern Öffnen Sie das Modul »Hauptmenü«. Bei dem Modul können alle Einstellungen bis auf die Position so bleiben, wie sie sind. Ändern Sie die Position auf menu.
Bild 6.74: Stellen Sie die Position des Hauptmenüs auf menu.
Speichern Sie das Modul ab. Als Quelltext im Frontend, den wir über den Browser anzeigen lassen können, bekommen wir im Header die Ausgabe zum Hauptmenü zu sehen.
Das Hauptmenü wird über eine unsortierte Liste (engl. unsorted list = ul) mit fünf einzelnen Elementen (engl. list item = li) ausgegeben. Die itemid des Menüeintrags im Backend bestimmt den Namen der Klasse für das Element. Innerhalb eines Elements wird ein Link mit einem span-Tag geschrieben. Somit haben wir eine gute Ausgangsposition, um das Menü dann per CSS anzusprechen. Wiederholen Sie den Vorgang – Modul öffnen, an die Position setzen und abspeichern – für das Hauptmenü (footer) und setzen Sie als Position footleft fest.
Bild 6.75: Das Hauptmenü (footer) wird
auf Position footleft
veröffentlicht.
7356 Joomla Templates_NEU.indd 196
05.10.2009 10:34:55
6.7 Blindtexte, Menüs und Module anlegen
197
Nachdem wir die Position geändert haben, speichern wir das Modul ab. Der Quelltext des Menüs, der im Frontend im Footer angezeigt wird, hat den gleichen Aufbau wie im Menü zuvor.
Auch hier bestimmen die itemids der Menüeinträge die Namen der Klassen. Durch das Anlegen als Alias ist das Ziel eines Links identisch mit dem aus dem Hauptmenü. Das Menü »Impressum« gehört auch in den Footer. Öffnen wir das Modul und ändern wir seine Position auf impress.
7356 Joomla Templates_NEU.indd 197
05.10.2009 10:34:55
198
Kapitel 6: Vom Layout zum Template
Bild 6.76: Das Impressum wird unter der Position impress veröffentlicht.
Danach speichern wir das Modul ab. Auf der Position impress gibt uns die TemplateEngine folgenden Quelltext für das Menü Impressum aus.
Der einfachste anzunehmende Fall: das Menü für Impressum mit nur einem Eintrag. Und nun das Ganze noch einmal für »Partner«: Ändern Sie die Position des geöffneten Moduls.
7356 Joomla Templates_NEU.indd 198
05.10.2009 10:34:55
6.7 Blindtexte, Menüs und Module anlegen
199
Bild 6.77: Spendieren Sie dem Titel noch einen Doppelpunkt.
Haben Sie es abgespeichert, erstellt die Template-Engine im Frontend den Quelltext dafür.
Der Unterschied zu den Menüs zuvor liegt darin, dass bei diesem Menü der Titel des Moduls als Überschrift (h3) angezeigt wird. Das wird gewährleistet durch das ModulChrome xhtml (style="xhtml") in der jdoc-Anweisung. Ansonsten bleibt der Aufbau des Menüs wie gehabt.
7356 Joomla Templates_NEU.indd 199
05.10.2009 10:34:55
200
Kapitel 6: Vom Layout zum Template
Die Slideshow erstellen Für die Slideshow erstellen wir ein eigenes Modul unter »Erweiterungen > Module« mit »Neu > Eigenes HTML«. Geben Sie dem neuen Modul den Titel »Slideshow« und ändern Sie die Position auf show. Die Slideshow soll nur auf der Startseite angezeigt werden. Wählen Sie deshalb »Menüzuweisung > Aus Liste auswählen > mainmenu > Startseite«.
Bild 6.78: Die Slideshow wird nur der Startseite zugewiesen.
7356 Joomla Templates_NEU.indd 200
05.10.2009 10:34:56
6.7 Blindtexte, Menüs und Module anlegen
201
Als »angepasste Ausgabe«, sprich: Quelltext, schreiben wir:
Es ist wichtig, dass dieser Code genau so bleibt, wie er ist, und nicht von einem Editor »gesäubert« wird. Das ist der Grund dafür, dass wir zuvor in der Konfiguration von Joomla den Editor ausgeschaltet hatten: Bei gesäubertem Quellcode kann es zur Fehldarstellung der Slideshow kommen. Zur Erklärung: In den div-Container mit der id pandashow stecken wir zuerst unsere aufwendig erstellte Maske. Die Maske mit der id pmask werden wir nachher im Cascading Style Sheet so positionieren, dass sie über den Slideshow-Bildern liegt. Nach der Maske folgt eine div-Box (pandamask, pandaslides) mit drei div-Containern und den eigentlichen Bildern. Die div-Container mit den Bildern legen wir alle mit der Klasse floatLeft linksbündig an. Wenn die div-Container wieder geschlossen sind, folgen die handles, mit denen wir die Slideshow steuern wollen. In den div-Container handles stecken wir drei div-Boxen der Klasse panda_tn. In eine Box kommt dann der Text, bestehend aus den HTML-Elementen h3, span und a. Weitere Angebote erstellen Für das Modul im Content (rechts neben den Artikeln) erstellen wir ein weiteres Modul mit »Neu > Eigenes HTML«.
7356 Joomla Templates_NEU.indd 202
05.10.2009 10:34:56
6.7 Blindtexte, Menüs und Module anlegen
203
Bild 6.79: »Weitere Angebote« werden unter cmodul veröffentlicht.
Ändern Sie die Menüzuweisung so, dass das Modul nur auf der Startseite angezeigt wird. Die angepasste Ausgabe (Quelltext) lautet:
Sofortkontakt erstellen Das letzte Modul, das wir mit »Neu > Eigenes HTML« erstellen, nennen wir »Sofortkontakt«. Es soll auf footright angezeigt werden.
7356 Joomla Templates_NEU.indd 203
05.10.2009 10:34:56
204
Kapitel 6: Vom Layout zum Template
Bild 6.80: Unter footright wird der »Sofortkontakt« auf allen Seiten angezeigt.
Die Vorbereitungen sind getroffen. Nun können wir endlich mit der Programmierung beginnen.
7356 Joomla Templates_NEU.indd 204
05.10.2009 10:34:56
6.8 Den Index programmieren
6.8
205
Den Index programmieren
Öffnen Sie die Datei index.php des Blanko-Templates.
Bild 6.81: Die Struktur des Layouts kommt zwischen und .
7356 Joomla Templates_NEU.indd 205
05.10.2009 10:34:56
206
Kapitel 6: Vom Layout zum Template
In Kapitel 3 (»Der Aufbau eines Templates«) haben wir den Index mit dem head-Bereich genau erklärt. Für die Slideshow ist es jetzt notwendig, das JavaScript-Programm zu implementieren und die Parameter festzulegen. Das geschieht direkt hinter <jdoc:include type="head" /> mit folgendem Quelltext:
Bild 6.82: Für die Slideshow werden die js-Datei eingebunden und die Parameter festgelegt.
Mit den Zeilen 12 und 13 binden wir die JavaScript-Datei slideshow.js aus unserem Template-Verzeichnis ein. In den Zeilen 16 bis 26 legen wir per JavaScript die Parameter der Slideshow fest. window.addEvent('domready',function(){
Mit dieser Zeile fügen Sie ein neues Mootools-Event hinzu und eröffnen eine neue Funktion. var wp = new noobSlide({
Die Variable wp ist willkürlich gewählt und steht hier abgekürzt für WellPanda. Sie dient dazu, einen neuen noobSlide zu erzeugen; also eine neue Slideshow. box: $('pandaslides'),
7356 Joomla Templates_NEU.indd 206
05.10.2009 10:34:56
6.8 Den Index programmieren
207
Hier wird angegeben, dass sich die Slides (also quasi die Dias) in einem Element mit der id pandaslides befinden. Diesen div-Container haben wir vorher im Modul Slideshow erstellt. items: $ES('div','pandaslides'),
Die einzelnen Elemente befinden sich im pandaslides div-Container. size: 590,
Die Größe eines Slides soll 590 Pixel betragen. handles: $$('#handles div.panda_tn'),
Mit den handles können die Slides gesteuert werden. Die div-Container mit der Klasse panda_tn sollen als handles herhalten. handle_event: 'mouseenter',
Bewegt der Besucher die Maus über ein handle (sprich: div-Container der Klasse panda_tn), wird der Event ausgelöst. Die Slides werden dann wechseln. autoPlay: true,
Damit die Slideshow sich auch von allein bewegt, legen wir fest, dass sie sich automatisch abspielt. interval: 12000,
Nach jeweils zwölf Sekunden sollen die Bilder wechseln. Insgesamt sieht der head-Bereich nun so aus.
7356 Joomla Templates_NEU.indd 207
05.10.2009 10:34:56
208
Kapitel 6: Vom Layout zum Template
Bild 6.83: Der head-Bereich mit den Slideshow-Parametern.
So viel zur Slideshow. Konzentrieren wir uns nun auf den body-Bereich. Dort codieren wir das Grundgerüst des Layouts mit sogenannten div-Containern. Man könnte auch eine Tabelle für die Struktur verwenden, doch der Quellcode dafür wird schnell recht unübersichtlich und gilt in Webdesigner-Kreisen als nicht mehr zeitgemäß. Tabellen sollte man für tabellarischen Inhalt verwenden und nicht fürs Layout. Fangen wir mit der groben Einteilung an.
7356 Joomla Templates_NEU.indd 208
05.10.2009 10:34:56
6.8 Den Index programmieren
209
Bild 6.84: Das komplette Layout stecken wir in eine div-Box.
Direkt hinter dem body-Eröffnungs-Tag setzen wir einen Anker, auf den man sich berufen kann, wenn die Seite sehr lang wird.
Der Anker wird mit einem a-Tag definiert, der kein Ziel (href) hat, dafür aber einen Namen. Zusätzlich geben wir ihm noch eine id, damit wir ihn gegebenenfalls per CSS ansprechen können. Setzt man einen weiteren Link, beispielsweise ganz unten auf der Website, mit dem Ziel #up, springt die Seite direkt an die Stelle des Ankers. Der Link dahin lautet: Nach oben
