Date post: | 18-Dec-2016 |
Category: |
Documents |
Upload: | alexander-schmidt |
View: | 224 times |
Download: | 3 times |
Überzeugende Vorlagen für das Open-Source-CMS
Komplett
in Farbe
> Joomla!-Screendesigns mit Photoshop entwerfen> Photoshop-Grafiken in ein Joomla!-Template verwandeln> Joomla!-Templates verstehen und anpassen> Inklusive Beispiel-Template
Alexander Schmidt
FRANZIS
Alexander Schmidt
Besuchen Sie unsere Website www.franzis.de
30,– EUR [D]
ISBN 978-3-7723-7356-5
Know-howist blau.
Joom
la!-T
empl
ates
Schm
idt
Das Praxisbuch für Webdesigner
FRA
NZI
S
Aus dem Inhalt:• Der Grundriss eines
Joomla!-Templates
• Cascading Style Sheets
• Bilder und Grafikformate
• Favicons
• Hacks für den Internet Explorer
• Parametertypen
• Bestehende Templates anpassen
• Ein Screendesign erstellen
• Inhaltselemente festlegen
• Menüs und Module anlegen
• Den Index programmieren
• Eine Slideshow einbauen
• Das Template installieren
• Fehlerbeseitigung
• Validierung
• Anpassung an verschiedeneBrowser
• Optimierung der Ladezeit
Eine Joomla!-Standardwebseite ist schnell erstellt. Aber wenn es an dieoptische 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 eigenesScreendesign entwickeln und in Joomla! umsetzen – passend für allegängigen Browsertypen.
� Joomla!-Templates verstehen und anpassenJoomla!-Templates sind einfach aufgebaut. Schon nach kurzer Zeit bekommen Sie einen Überblick, welche Datei welche Aufgabehat, 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 ScreendesignFü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 ScreendesignsUm 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-Zonenim Joomla!-Template zuordnen. Sie erfahren, wie Sie mit den CSS-Dateienumgehen 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 Schnippchenschlagen. Der Autor wartet mit Hacks und Tipps auf, die auch aufdem Internet Explorer eine tadellose Darstellung Ihrer Webseite garantieren.
Über den Autor:Alexander Schmidt istWeb-Entwickler undJoomla!-Coach. Er leitet und organisiertSeminare für die Nut-zung des populärenContent-Management-Systems. Schon seitmehreren Jahren realisiert SchmidtInternetauftritte, die auf Joomla! basieren. Darüber hinaus hat er sichdarauf spezialisiert, Designvorlagenin hochwertige Joomla!-Templatesumzusetzen, die den modernenWebstandards genügen. Schmidtlebt in Bad Nauheim.
Auf www.buch.cdDas komplette Beispiel-Template.
Joomla!-Templates Design und
Implementierung
Joomla!-Templates Design und
Implementierung
7356-5 U1+U4 07.10.2009 15:49 Uhr Seite 1
Alexander Schmidt
Joomla!-TemplatesDesign und Implementierung
7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 1
7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 2
Alexander Schmidt
FRANZIS
Mit 325 Abbildungen
Joomla!-Templates Design und
Implementierung
7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 3
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 Ver-
antwortung 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.
© 2009 Franzis Verlag GmbH, 85586 Poing
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Ver-
breiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags
gestattet und wird widrigenfalls strafrechtlich verfolgt.
Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind
in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeich-
nungen im Wesentlichen den Schreibweisen der Hersteller.
Lektorat: Franz Graser
Satz: DTP-Satz A. Kugge, München
art & design: www.ideehoch2.de
Druck: Neografia, a.s.
Printed in Slovakia
ISBN 978-3-7723-7356-5
7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 4
5
Einleitung
Dieses Buch richtet sich an alle, die ihre eigenen, individuellen Templates für Joomla gestalten wollen. Anfänger fi nden hier einen umfangreichen Einstieg in die Template-Ent-wicklung, 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-Tem-plate 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 allge-mein 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 fi nden und das Webdesign als Handwerk effi zienter 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 programmie-ren, wird dazu beitragen, dieses Buch erfolgreich einzusetzen.
Steht Ihnen Photoshop nicht zur Verfügung, können Sie auch ein anderes Bildbearbei-tungsprogramm 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 57356 Joomla Templates_NEU.indd 5 05.10.2009 10:34:2005.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 aus-drü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 Aus-sehen 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 Template-Entwicklung, 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 Einfl uss 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 beeinfl ussen, 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 Effek-te 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 fi nden Sie zum schnellen Nachschlagen ebenfalls dort. Ist Ihnen eine
7356 Joomla Templates_NEU.indd 67356 Joomla Templates_NEU.indd 6 05.10.2009 10:34:2605.10.2009 10:34:26
7Einleitung
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 fi nden 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 77356 Joomla Templates_NEU.indd 7 05.10.2009 10:34:2605.10.2009 10:34:26
8
Widmung
Dieses Buch ist allen Webdesignern gewidmet, die auf der Suche nach einer guten Temp-late-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 87356 Joomla Templates_NEU.indd 8 05.10.2009 10:34:2605.10.2009 10:34:26
9
Inhalt
1 Das Joomla-Template ................................................................................... 13
1.1 Was ist ein Joomla-Template? .......................................................... 131.2 Wieso werden Templates eingesetzt? ............................................... 161.3 Die Standard-Templates von Joomla ................................................. 17
2 Die Joomla-Testumgebung ........................................................................... 19
2.1 Lokaler Webserver mit XAMPP ......................................................... 192.1.1 XAMPP für Windows (XP, Vista Windows 7) ........................................202.1.2 XAMPP für Mac (OS X) .......................................................................272.1.3 XAMPP für Linux (Ubuntu) .................................................................312.2 Die Testumgebung einrichten .......................................................... 342.3 Die Installation von Joomla .............................................................. 37
3 Der Aufbau eines Templates ......................................................................... 47
3.1 Das Blanko-Template ....................................................................... 473.2 Sprachdateien ................................................................................. 493.3 Cascading Style Sheets ................................................................... 503.3.1 template.css .....................................................................................503.3.2 ieonly.css ..........................................................................................523.3.3 editor.css ..........................................................................................523.3.4 Zehn Praxistipps zum besseren Codieren mit CSS ..............................533.3.5 Hacks für den Internet Explorer..........................................................603.4 Fehlseite ......................................................................................... 623.5 Favicon ........................................................................................... 623.6 Overrides ........................................................................................ 633.7 Bilder .............................................................................................. 653.7.1 Grafi kformate ....................................................................................653.7.2 Bildgröße ..........................................................................................663.7.3 Transparenz ......................................................................................663.7.4 Der PNG-Fix .......................................................................................673.7.5 Einsatzgebiete ..................................................................................68
7356 Joomla Templates_NEU.indd 97356 Joomla Templates_NEU.indd 9 05.10.2009 10:34:2605.10.2009 10:34:26
10 Inhalt
3.8 Index ............................................................................................... 683.8.1 Zugriffsschutz ...................................................................................693.8.2 Dokumenttyp (Doctype) ....................................................................703.8.3 Sprache ............................................................................................713.8.4 Header-Informationen .......................................................................713.8.5 Cascading Style Sheets .....................................................................723.8.6 Browserweiche ..................................................................................723.8.7 Inhalt und Struktur ............................................................................733.9 JavaScript ........................................................................................ 813.10 Offl ine ............................................................................................. 813.11 Parameter ....................................................................................... 863.11.1 Defi nition eines Parameters ..............................................................873.11.2 Standardparametertypen ..................................................................903.11.3 Einstellungen speichern ....................................................................943.11.4 Einstellungen verwenden ..................................................................95
4 Templates anpassen .................................................................................... 97
4.1 Farben ändern ................................................................................. 974.2 Bilder austauschen ....................................................................... 1054.3 Neue Modulposition ...................................................................... 1074.4 Neue Typografi e ............................................................................ 111
5 Erstellung eines Screendesigns ................................................................. 113
5.1 Vorüberlegung ............................................................................... 1135.2 Vorbereitung ................................................................................ 1135.2.1 Logo als Ausgangspunkt .................................................................1135.2.2 Schrifttyp für das Logo ....................................................................1145.2.3 Textur für den Hintergrund ...............................................................1155.2.4 Bilder für den Inhalt ........................................................................1165.3 Anleitung ...................................................................................... 118
6 Vom Layout zum Template .......................................................................... 149
6.1 Ein Blick auf das Screendesign ...................................................... 1496.1.1 Der Header ......................................................................................1526.1.2 Content ...........................................................................................1536.1.3 Der Footer .......................................................................................1546.2 Die Modulpositionen festlegen ...................................................... 1546.3 Die Parameter bestimmen ............................................................. 1556.4 Die Bilder erstellen ........................................................................ 1566.4.1 Der Hintergrund ..............................................................................157
7356 Joomla Templates_NEU.indd 107356 Joomla Templates_NEU.indd 10 05.10.2009 10:34:2605.10.2009 10:34:26
11Inhalt
6.4.2 Das Menü .......................................................................................1596.4.3 Elemente des Inhalts .......................................................................1676.4.4 Der Footer .......................................................................................1816.5 Die Installationsroutine festlegen .................................................. 1826.6 Das Template weiter vorbereiten .................................................... 1876.6.1 Namen ändern ................................................................................1876.6.2 Sprachdateien verfassen .................................................................1886.6.3 Vorschaubild und Favicon erstellen .................................................1886.6.4 Das Template als Standard auswählen ............................................1896.7 Blindtexte, Menüs und Module anlegen ......................................... 1906.7.1 Blindtexte schreiben .......................................................................1916.7.2 Menüs anlegen ...............................................................................1936.7.3 Module verwalten ...........................................................................1956.8 Den Index programmieren ............................................................. 2056.9 Das Modul-Chrome codieren ......................................................... 2176.10 Die Cascading Style Sheets defi nieren ........................................... 2196.10.1 Reset & Start ...................................................................................2216.10.2 Layout .............................................................................................2246.10.3 Menüs ............................................................................................2306.10.4 Sofortkontakt ..................................................................................2376.10.5 Slideshow .......................................................................................2396.10.6 Weitere Angebote ............................................................................242
7 Prüfen und validieren ................................................................................ 245
7.1 Aufl ösung der Browser .................................................................. 2457.2 W3C-Validator ............................................................................... 2487.3 Darstellung in Browsern ................................................................ 2507.3.1 Browser Collection ..........................................................................2507.3.2 Unterschiedliche Betriebssysteme...................................................2527.3.3 Screenshots ....................................................................................2537.4 Ladezeit der Website ..................................................................... 255
A Verzeichnisstruktur von Joomla .................................................................. 257
B Template-Befehle ...................................................................................... 259
C Programme und Websites .......................................................................... 263
C.1 Editor ............................................................................................ 263C.2 FTP-Client ...................................................................................... 264C.3 Browser ......................................................................................... 264
7356 Joomla Templates_NEU.indd 117356 Joomla Templates_NEU.indd 11 05.10.2009 10:34:2605.10.2009 10:34:26
12 Inhalt
C.4 Firefox-Erweiterungen .................................................................... 265C.5 Bildbearbeitung ............................................................................ 266C.6 Emulatoren ................................................................................... 267C.7 Werkzeuge .................................................................................... 267C.8 Onlinetools ................................................................................... 268C.9 Nachschlagewerke ........................................................................ 269
D Abkürzungen und Begriffe ......................................................................... 271
Index ......................................................................................................... 277
7356 Joomla Templates_NEU.indd 127356 Joomla Templates_NEU.indd 12 05.10.2009 10:34:2605.10.2009 10:34:26
13
1 Das Joomla-Template
1.1 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 Bildbear-beitungsprogramm 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 Grafi ken. 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 eben-falls noch ein bisschen mehr. Es umfasst einerseits das klassische Webdesign und ande-rerseits 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 137356 Joomla Templates_NEU.indd 13 05.10.2009 10:34:2605.10.2009 10:34:26
14 Kapitel 1: Das Joomla-Template
Ein Joomla-Template ist also das Webdesign in PHP, HTML, CSS und JavaScript, angerei-chert durch Bilder und Grafi ken. Sie benötigen einige Fähigkeiten, um ein Joomla-Tem-plate 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 kniffl ig. Doch mit etwas Moti-vation, 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 Ausgangs-punkt dienen. Auf vielen Seiten im Internet fi nden Sie eine Reihe zusätzlicher Templa-tes, die zum Teil von Webdesignprofi s 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 indivi-duellen 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 Grund-defi nition der Website, und erst durch Hinzufügen des Inhalts entsteht die letztendliche Darstellung der Site.
7356 Joomla Templates_NEU.indd 147356 Joomla Templates_NEU.indd 14 05.10.2009 10:34:2605.10.2009 10:34:26
151.1 Was ist ein Joomla-Template?
Bild 1.1: Website ohne Inhalt.
Bild 1.2: Website mit Inhalt.
7356 Joomla Templates_NEU.indd 157356 Joomla Templates_NEU.indd 15 05.10.2009 10:34:2605.10.2009 10:34:26
16 Kapitel 1: Das Joomla-Template
1.2 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 (Komponen-ten, 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 fi nden, 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 defi nie-ren, 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 Zeigefi nger 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 fl eiß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 vorgenom-men 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 Defi nitionen der Gestaltung hinterlegt, die den äuße-ren 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 167356 Joomla Templates_NEU.indd 16 05.10.2009 10:34:2705.10.2009 10:34:27
171.3 Die Standard-Templates von Joomla
1.3 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 177356 Joomla Templates_NEU.indd 17 05.10.2009 10:34:2705.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 187356 Joomla Templates_NEU.indd 18 05.10.2009 10:34:2705.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 Skript-sprachen 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 Soft-ware, deren Quelltext jedermann zugänglich ist) und wird unter der GNU General Pub-lic License kostenlos zur Verfügung gestellt. Die Entwickler der XAMPP-Plattform sind uneigen nützig tätig, über eine Spende würden sie sich dennoch sehr freuen.
7356 Joomla Templates_NEU.indd 197356 Joomla Templates_NEU.indd 19 05.10.2009 10:34:2805.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, Konfi gurationsdateien 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 207356 Joomla Templates_NEU.indd 20 05.10.2009 10:34:2805.10.2009 10:34:28
212.1 Lokaler Webserver mit XAMPP
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 217356 Joomla Templates_NEU.indd 21 05.10.2009 10:34:2805.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 227356 Joomla Templates_NEU.indd 22 05.10.2009 10:34:2805.10.2009 10:34:28
232.1 Lokaler Webserver mit XAMPP
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: Konfi guration von XAMPP für Windows.
7356 Joomla Templates_NEU.indd 237356 Joomla Templates_NEU.indd 23 05.10.2009 10:34:2805.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 Installa tion 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 247356 Joomla Templates_NEU.indd 24 05.10.2009 10:34:2805.10.2009 10:34:28
252.1 Lokaler Webserver mit XAMPP
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: Steuer-konsole) 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 ein-zelnen Komponenten starten und stoppen. Starten Sie Apache und MySQL. Wenn beide laufen, wird im Kontrollzentrum die Meldung »Running« angezeigt.
7356 Joomla Templates_NEU.indd 257356 Joomla Templates_NEU.indd 25 05.10.2009 10:34:2905.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 267356 Joomla Templates_NEU.indd 26 05.10.2009 10:34:2905.10.2009 10:34:29
272.1 Lokaler Webserver mit XAMPP
2.1.2 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 277356 Joomla Templates_NEU.indd 27 05.10.2009 10:34:2905.10.2009 10:34:29
28 Kapitel 2: Die Joomla-Testumgebung
XAMPP wird im Ordner Programme installiert. Sie haben aber die Möglichkeit, den Ins-tallationsordner 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 287356 Joomla Templates_NEU.indd 28 05.10.2009 10:34:3005.10.2009 10:34:30
292.1 Lokaler Webserver mit XAMPP
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 297356 Joomla Templates_NEU.indd 29 05.10.2009 10:34:3005.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 307356 Joomla Templates_NEU.indd 30 05.10.2009 10:34:3005.10.2009 10:34:30
312.1 Lokaler Webserver mit XAMPP
2.1.3 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 317356 Joomla Templates_NEU.indd 31 05.10.2009 10:34:3005.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 nor-malen Benutzernamen anmelden.
7356 Joomla Templates_NEU.indd 327356 Joomla Templates_NEU.indd 32 05.10.2009 10:34:3005.10.2009 10:34:30
332.1 Lokaler Webserver mit XAMPP
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 337356 Joomla Templates_NEU.indd 33 05.10.2009 10:34:3005.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 347356 Joomla Templates_NEU.indd 34 05.10.2009 10:34:3005.10.2009 10:34:30
352.2 Die Testumgebung einrichten
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 357356 Joomla Templates_NEU.indd 35 05.10.2009 10:34:3105.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 Konfi guration . Ö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 367356 Joomla Templates_NEU.indd 36 05.10.2009 10:34:3105.10.2009 10:34:31
372.3 Die Installation von Joomla
Suchen und fi nden 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 Adres-sen herunter:
• http://www.joomla.org
• http://www.joomla.de
Unter der erstgenannten Adresse, der Mutterseite von Joomla, fi nden Sie das CMS in eng-lischer Sprache. Auf der deutschen Seite unter der zweiten Adresse können Sie auch die übersetzte deutschsprachige Version herunterladen. Auf beiden Seiten fi nden Sie stets die aktuelle Version unter dem Stichwort »Download«.
7356 Joomla Templates_NEU.indd 377356 Joomla Templates_NEU.indd 37 05.10.2009 10:34:3105.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 XAMPP-Umgebung gestartet sind und laufen.
Wählen Sie die Option »Deutsch« aus und klicken Sie auf »Weiter«.
7356 Joomla Templates_NEU.indd 387356 Joomla Templates_NEU.indd 38 05.10.2009 10:34:3105.10.2009 10:34:31
392.3 Die Installation von Joomla
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 397356 Joomla Templates_NEU.indd 39 05.10.2009 10:34:3105.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 »confi guration.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 Konfi guration 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 Ein-gabefeld in eine neue Datei mit Namen confi guration.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üm-mern. 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 407356 Joomla Templates_NEU.indd 40 05.10.2009 10:34:3205.10.2009 10:34:32
412.3 Die Installation von Joomla
Bild 2.30: Geben Sie die Zugangsdaten für die Datenbank ein.
Im nächsten Schritt geht es um die Datenbankkonfi guration . 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 417356 Joomla Templates_NEU.indd 41 05.10.2009 10:34:3205.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-Konfi guration von Joomla.
Eine FTP-Konfi guration 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 427356 Joomla Templates_NEU.indd 42 05.10.2009 10:34:3205.10.2009 10:34:32
432.3 Die Installation von Joomla
Bild 2.32: Die Hauptkonfi guration von Joomla.
7356 Joomla Templates_NEU.indd 437356 Joomla Templates_NEU.indd 43 05.10.2009 10:34:3205.10.2009 10:34:32
44 Kapitel 2: Die Joomla-Testumgebung
In der Hauptkonfi guration 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ön-nen 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 Konfi gurationsdatei jetzt automatisch erstellt. Ist die Konfi gurationsdatei aber nicht beschreibbar oder gab es ein anderes Problem beim Speichern der Konfi guration, müssen Sie den PHP-Code, der Ihnen im Browserfenster
7356 Joomla Templates_NEU.indd 447356 Joomla Templates_NEU.indd 44 05.10.2009 10:34:3305.10.2009 10:34:33
452.3 Die Installation von Joomla
bereitgestellt wird, manuell hochladen. Markieren Sie dann den gesamten Text im Text-feld, 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 einfa-chen 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 fi nden Sie alle Bedienele-mente 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 lau-tet admin. Sie erreichen das Backend, wenn Sie im Browser die Adresse
http://localhost/joomla/administrator
eingeben.
7356 Joomla Templates_NEU.indd 457356 Joomla Templates_NEU.indd 45 05.10.2009 10:34:3305.10.2009 10:34:33
46 Kapitel 2: Die Joomla-Testumgebung
Bild 2.36: Das Backend von Joomla.
7356 Joomla Templates_NEU.indd 467356 Joomla Templates_NEU.indd 46 05.10.2009 10:34:3305.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 Tem-plate-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 fi nden 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äu-tert werden.
Bild 3.1: Die Struktur des Blanko-Templates.
7356 Joomla Templates_NEU.indd 477356 Joomla Templates_NEU.indd 47 05.10.2009 10:34:3305.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 empfi ehlt es sich, den selbsterklärenden Namen images zu verwenden.
• index.html
Die Datei verhindert die Aufl istung 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, Joom-la-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 offl ine 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 487356 Joomla Templates_NEU.indd 48 05.10.2009 10:34:3405.10.2009 10:34:34
493.2 Sprachdateien
• psd
Dieser Ordner ist für das Template nicht zwingend notwendig. Er beinhaltet die Photo shop-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 Para-meter des Templates hier defi niert.
In diesem Ordner befi nden sich alle Template-Dateien, die wir brauchen. In einem späte-ren Kapitel werden wir ihn mit ein paar Grafi kdateien 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 Sicherheits-merkmal 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 Front end 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 Erweiterungs-art, 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 497356 Joomla Templates_NEU.indd 49 05.10.2009 10:34:3405.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, fi nden Sprachvariablen Verwendung. Diese Variablen mit den dazugehörigen Texten, die für sie eingesetzt werden sollen, fi ndet 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, fi n-det 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 Tem-plate auftaucht, wird in der Ausgabe der Text »Das ist das Blanko-Template. « angezeigt.
3.3 Cascading Style Sheets
Im Ordner css befi nden 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 Aufl isten dieses Ordners.
Bild 3.4: Alle Cascading Style Sheets fi nden Platz im Ordner css.
Cascading Style Sheets (kurz: CSS) werden dazu verwendet, Defi nitionen 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än-dig 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 defi niert. Sie ist somit maßgeblich für die Gestaltung verantwortlich. Die template.css muss nicht zwingend template.css heißen, doch empfi ehlt sich der Name zur besseren Einsortierung.
7356 Joomla Templates_NEU.indd 507356 Joomla Templates_NEU.indd 50 05.10.2009 10:34:3405.10.2009 10:34:34
513.3 Cascading Style Sheets
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 bie-ten, 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, son-dern 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 517356 Joomla Templates_NEU.indd 51 05.10.2009 10:34:3405.10.2009 10:34:34
52 Kapitel 3: Der Aufbau eines Templates
• Standard
• Module
• Content
• Joomla
Diese Unterteilung hilft Ihnen, sich in dem Dokument zurechtzufi nden. Unter der Abtei-lung CSS fi nden Sie das Reset des Sheets, um vorhandene Defi nitionen zurückzusetzen. Im Bereich Layout sind die Designdefi nitionen hinterlegt. Menus beinhaltet die Gestal-tung 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 Defi nitionen des CMS. Hier werden auch Teile des Inhalts defi niert.
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 Anwei-sungen, 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-Edi-tor unter Joomla gedacht. In den meisten Editoren können Sie den Pfad zu diesem CSS in der Konfi guration angeben. Im Editor wird der Inhalt eines Beitrags anders angezeigt als
7356 Joomla Templates_NEU.indd 527356 Joomla Templates_NEU.indd 52 05.10.2009 10:34:3405.10.2009 10:34:34
533.3 Cascading Style Sheets
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 zurechtfi nden, und erspart Ihnen jede Menge Zeit, wenn Sie das CSS später umschrei-ben 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 Defi nitionen zurück. Am Anfang eines CSS sollte ein Reset aller Defi nitionen erfolgen. Ziel dieser Zurück-setzung 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 Defi nitionen, die von den Browsern korrekt interpretiert werden. Individuelle Defi nitionen fi nden später ihren Platz.
7356 Joomla Templates_NEU.indd 537356 Joomla Templates_NEU.indd 53 05.10.2009 10:34:3405.10.2009 10:34:34
54 Kapitel 3: Der Aufbau eines Templates
Bild 3.9: Ein Reset am Anfang des CSS setzt alle Defi nitionen 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. Snip-pets ) 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 kostenpfl ichtig und kann unter
http://www.panic.com/coda
für etwa 68 Euro (99 Dollar) erworben werden.
7356 Joomla Templates_NEU.indd 547356 Joomla Templates_NEU.indd 54 05.10.2009 10:34:3405.10.2009 10:34:34
553.3 Cascading Style Sheets
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 Namens-konvention 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 557356 Joomla Templates_NEU.indd 55 05.10.2009 10:34:3405.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 567356 Joomla Templates_NEU.indd 56 05.10.2009 10:34:3405.10.2009 10:34:34
573.3 Cascading Style Sheets
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 577356 Joomla Templates_NEU.indd 57 05.10.2009 10:34:3405.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 aufge-baut 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 untereinander-stehen.
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 wie-der und wieder gleich deklarieren. Durch Kommata getrennt, brauchen Sie IDs oder Klassen nur einmal zu defi nieren.
Bild 3.17: Eine Zusammenfassung von Elementen ist sehr effi zient.
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 587356 Joomla Templates_NEU.indd 58 05.10.2009 10:34:3405.10.2009 10:34:34
593.3 Cascading Style Sheets
• 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 Gecko-Browser (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 Abhil-fe, 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 fi nden 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 597356 Joomla Templates_NEU.indd 59 05.10.2009 10:34:3505.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 Gewis-sen 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:
<!--[if IE]><link rel="stylesheet" href="ieonly.css" type="text/css" /><![endif]-->
Der Inhalt dieser Browserweiche wird von allen IEs ab Version 5.0 gelesen.
<!--[if IE 6]>
Dieser gilt für alle 6er-Versionen ...
<!--[if lt IE 7]>
... dieser für alle Versionen vor 7 (lt steht für less-than = kleiner als) ...
<!--[if lte IE 5.5999]>
... dieser für alle Versionen bis 5.5 (less-than or equal = kleiner oder gleich) ...
<!--[if gte IE 5.5]>
... und dieser gilt für alle Versionen ab 5.5 (greater-than or equal = größer oder gleich).
Innerhalb des CSS sprechen wir zum Beispiel mit dem Stern-HTML-Hack den IE 6 an und mit dem SternPlus-HTML-Hack den IE 7. Das CSS könnte etwa so aussehen:
Bild 3.21: Hacks für die Internet Explorer 6 und 7.
7356 Joomla Templates_NEU.indd 607356 Joomla Templates_NEU.indd 60 05.10.2009 10:34:3505.10.2009 10:34:35
613.3 Cascading Style Sheets
Der Stern-HTML-Hack
*html element {eigenschaft:wert;}
Dieser Hack wird von IE 6 und 5 gelesen und besteht aus einem Universal-Selektor (*) und einem HTML-Selektor. Wichtig ist der Zwischenraum zwischen beiden Selektoren. Die Kombination beider Selektoren ist zwar unsinnig, weil das HTML-Element kein Mutter element besitzen kann, aber gültig.
Der Stern-Plus-HTML-Hack
*+html element {eigenschaft:wert;}
Der Hack verhält sich wie der Stern-HTML-Hack und kann nur vom IE 7 gelesen werden. Auch dieser Hack ist an sich unsinnig, aber valide.
Der Kind-Selektor
html>body element {eigenschaft:wert;}
Der Kind-Selektor kann von keinem Internet Explorer gelesen werden. Er besteht aus dem html-Selektor und dem body-Selektor, verbunden ohne Freiraum mit einem Größer-als-Selektor. Er eignet sich sehr gut, um Formatierungen vor dem Internet Explorer zu verstecken.
!important
element {eigenschaft:wert !important; eigenschaft:wert;}
Eigentlich ist die Anweisung !important dafür gedacht, den Wert einer Eigenschaft vorzuziehen, sofern das Element ein zweites Mal mit der gleichen Eigenschaft auftaucht. Der Internet Explorer ignoriert aber diese Anweisung und liest nur den Wert, der ohne !important ausgewiesen ist.
Der Attribut-Selektor
element[attributname] {eigenschaft:wert;}
Wie !important wird auch der Attribut-Selektor nicht vom IE interpretiert und eignet sich dafür, Anweisungen vom Internet Explorer fernzuhalten.
7356 Joomla Templates_NEU.indd 617356 Joomla Templates_NEU.indd 61 05.10.2009 10:34:3505.10.2009 10:34:35
62 Kapitel 3: Der Aufbau eines Templates
Der Tan-Hack
* html {eigenschaft:wert; e\igenschaft:wert;}
Dieser Hack ist eine Erweiterung zum Stern-HTML-Hack und wird dafür gebraucht, den Internet Explorer in der Version 5 anzusprechen. Da diese Version kaum noch genutzt wird, fi ndet der Hack mittlerweile kaum noch Verwendung. So funktioniert er: Der erste Wert wird von IE 5 und 6 interpretiert, der zweite dann nur noch vom IE 6.
3.4 Fehlerseite
Will der Besucher eine Seite der Website aufrufen, die nicht existiert, bekommt er eine Fehlermeldung angezeigt. Für diese Anzeige ist die Datei error.php zuständig.
Der Webserver, auf dem die Website mit Joomla läuft, unterscheidet zwischen den einzel-nen Fehlertypen und ordnet jedem einen eigenen Fehlercode zu. Diesen Fehlercode mit der Fehlernachricht spuckt die Datei aus, wenn sie aufgerufen wird.
3.5 Favicon
Der Begriff Favicon setzt sich aus den englischen Wörtern Favorite und Icon zusammen und ist das Bild, das in der Adresszeile eines jeden Browsers vor der URL steht. Bei neueren Browsern, die mehrere HTML-Seiten gleichzeitig offen halten können, befi ndet sich das Favicon auch in dem Karteikartenreiter, der der jeweiligen HTML-Seite zugeordnet ist. Legt man eine Website als Lesezeichen oder Favorit ab, wird in den meisten Fällen das Favicon mit abgelegt, was den Wiedererkennungswert steigert. Ein kleines Detail für das Template, doch – wie hat man es neulich bei einem Sherlock-Holmes-Hörspiel gehört? »Einem großen Geist ist nichts zu klein.«
Bild 3.22: Liegt das favicon.ico im Template-Ordner, wird es im Browser angezeigt.
Das Favicon soll quadratisch und 16 x 16 oder 32 x 32 Pixel groß sein, und Sie erstellen es in einem Bild bearbeitungsprogramm. Speichern Sie das Bild als Grafi k (jpg, png oder gif) ab und nutzen Sie einen der zahlreichen Favicon-Generatoren im Internet, zum Beispiel unter
http://favicon-generator.org
7356 Joomla Templates_NEU.indd 627356 Joomla Templates_NEU.indd 62 05.10.2009 10:34:3505.10.2009 10:34:35
633.6 Overrides
oder
http://www.degraeve.com/favicon
um aus der Grafi kdatei ein Icon zu machen. Wenn Sie es dann in den Template-Ordner legen, wird es, wenn Ihre Website aufgerufen wird, in der Adressleiste des Browsers ange-zeigt.
3.6 Overrides
Ein Meilenstein unter Joomla 1.5 sind sogenannte Overrides . Mit Overrides bekommen Sie die Möglichkeit, die Ansicht einer Erweiterung an Ihre Bedürfnisse anzupassen. Viele haben sich schon darüber beschwert, dass die Erweiterung com_content , die für den Inhalt verantwortlich ist, die Beiträge als HTML-Tabellen ausgibt. Das können Sie ändern, ohne die Core-Dateien anzurühren. Sicher, Sie könnten auch die Core-Datei, also das Ori-ginal, ändern, doch dann laufen Sie Gefahr, dass beim nächsten Update von Joomla genau diese Datei aktualisiert und überschrieben wird. In dem Fall wären Ihre Änderungen null und nichtig, und Sie müssten von vorn damit beginnen, die Core-Dateien umzuschreiben.
Ein Override hingegen funktioniert so: Sie legen ein exaktes Pendant dieser Datei an, legen es in Ihren Template-Ordner, schreiben es um, und wenn unter Joomla die Erweiterung aufgerufen wird, wird Ihre Datei der Originaldatei vorgezogen. Ihre Datei ist also die Überschreibung – der Override – der eigentlichen Datei.
Overrides sind dank der Programmierarchitektur Model-View-Controller (kurz: MVC ) möglich, die Joomla zugrunde liegt. Unter dieser Architektur wird die Ausgabe einer Erweiterung – also das, was der Besucher der Seite letztendlich sieht – durch sogenannte Views gesteuert. Eben diese Views sind es, die Sie überschreiben können. Dabei nehmen die Views keinerlei Einfl uss auf die Programmlogik der Erweiterung.
Nehmen wir an, Sie möchten die Standardausgabe eines Artikels ändern. Verantwortlich für diese Ausgabe ist die Komponente com_content. In dem Verzeichnis dieser Kompo-nente existiert der Ordner article mit dem Unterordner tmpl. Hier fi nden Sie die Datei default.php, die die Ausgabe steuert. Der vollständige Pfad unter Joomla lautet:
components/com_content/article/tmpl/default.php
Diese Datei können Sie überschreiben, indem Sie in Ihrem Template die Datei default.php im Unterordner article des Ordners com_content im Verzeichnis html anlegen. Das ist schwierig zu lesen, doch einfach zu sehen. Der vollständige Pfad unter Joomla sähe so aus :
templates/ihrtemplate/html/com_content/article/default.php
7356 Joomla Templates_NEU.indd 637356 Joomla Templates_NEU.indd 63 05.10.2009 10:34:3505.10.2009 10:34:35
64 Kapitel 3: Der Aufbau eines Templates
Bild 3.23: Verantwortlich für die Artikelausgabe: default.php.
Der Override dazu liegt in Ihrem Template-Ordner.
Bild 3.24: Der Override der Artikelausgabe trägt den gleichen Namen: default.php.
7356 Joomla Templates_NEU.indd 647356 Joomla Templates_NEU.indd 64 05.10.2009 10:34:3505.10.2009 10:34:35
653.7 Bilder
3.7 Bilder
Grafi ken gehören zu jedem Template. Damit sie schnell wieder aufzufi nden sind, erstellen wir einen Ordner namens images und legen dort alle Bilder ab. Der Ordner muss nicht zwingend so heißen, doch der englische Name für Bilder bietet sich zur leichteren Einsor-tierung an.
Bild 3.25: Die Template-Bilder werden im Ordner images gesammelt.
3.7.1 Grafi kformate
Drei Formate für Ihre Bilder kommen infrage:
• GIF – Graphics Interchange Format
• PNG – Portable Network Graphics
• JPEG – Joint Photographic Experts Group
Andere Formate wie zum Beispiel TIFF sind für das Internet ungeeignet. Unter ihnen wer-den zu viele Informationen abgespeichert, die die Größe des Bilds und somit die Ladezeit unnötig erhöhen. Es ist eine Kunst, als Webdesigner mit Bildern umzugehen, denn nicht in jeder Situation ist ein bestimmtes Format das beste.
GIF PNG JPEG
Vorteil Geringe Größe
Transparenz
Geringe Größe
Verlustfreie Kompres-sion
16,7 Mio. Farben
Transparenz
Alphaeffekt
Geringe Größe
Stufenlose Kompres-sion
16,7 Mio. Farben
Nachteil Nur 256 Farben
Kein Alphaeffekt
Ältere Browser inter-pretieren Transparenz falsch (Abhilfe schafft der PNG-Fix)
Keine Transparenz
Kein Alphaeffekt
7356 Joomla Templates_NEU.indd 657356 Joomla Templates_NEU.indd 65 05.10.2009 10:34:3505.10.2009 10:34:35
66 Kapitel 3: Der Aufbau eines Templates
3.7.2 Bildgröße
Eine der Hauptanforderungen an ein Bild ist dessen Größe. Je kleiner es ist, desto schneller ist es geladen. Sparen Sie so viel an einem Bild, wie es nur geht. Wenn Sie beispielsweise einen Artikel mit mehr als 100 Bildern schreiben ist jedes Kilobyte, das Sie reduzieren können, pure Ladezeit . Ein kleiner Überblick soll Aufschluss geben.
Bild 3.26: GIF Bild 3.27: PNG Bild 3.28: JPG
Format Bildgröße mit unterschiedlicher Qualität
GIF (links) 20,7 KB
PNG (Mitte) 44,4 KB
JPG (rechts) 25,9 KB
Diese Werte dienen nur als Richtwerte und können natürlich von Bild zu Bild unter-schiedlich sein.
Tipp: Exportieren Sie ein Bild in alle drei Formate GIF, PNG und JPG und schauen Sie sich das Ergebnis an. Setzen Sie Ihr Augenmerk dabei auf das Verhältnis von Qualität zu Dateigröße, um eine bestmögliche Ladezeit zu erzielen.
3.7.3 Transparenz
Neben Qualität, Dateigröße und Ladezeit kann eine weitere Anforderung an ein Bild die Transparenz sein. In dem Fall kommen nur noch GIF und PNG infrage; JPG kennt keine
7356 Joomla Templates_NEU.indd 667356 Joomla Templates_NEU.indd 66 05.10.2009 10:34:3505.10.2009 10:34:35
673.7 Bilder
Transparenz. Das Format PNG bringt zudem einen weiteren Vorteil mit: Deckkraft. Wenn Sie ein Bild mit einem Alphaeffekt einsetzen wollen, beispielsweise der Hintergrund zu 50 Prozent transparent sein soll, kann PNG mit der Deckkraft der Transparenz umgehen. Diese Eigenschaft stellt PNG ganz klar über GIF. Mit diesem Format können Sie eine Gestaltung Ihrer Website erreichen, die Sie mit den anderen nicht schaffen.
Bild 3.29: GIF Bild 3.30: PNG Bild 3.31: JPG
3.7.4 Der PNG-Fix
PNG hat einen Nachteil: Die Transparenz von PNG wird von älteren Browsern, vor allen vom Internet Explorer 6, nicht richtig interpretiert. Der PNG-Fix hilft jedoch, dass auch PNG-Bilder richtig angezeigt werden. Diesen Fix fi nden Sie im Blanko-Template schon als Standard vor. Es ist ein Zusammenschluss einer JavaScript-Datei, einem transparen-ten GIF und einem Eintrag in der index.php. Das JavaScript fi nden Sie in der Datei iepngfix.htc im Ordner js, und das Bild transparent.gif liegt im Ordner images.
Bevor Sie den Fix aktivieren, sollte der Pfad zum transparenten GIF in der Datei iepngfix.htc geändert werden. Korrigieren Sie die Zeile folgendermaßen:
IEPNGFix.blankImg = 'http://www.ihredomain.de/templates/ihrtemplate/images/transparent.gif';
7356 Joomla Templates_NEU.indd 677356 Joomla Templates_NEU.indd 67 05.10.2009 10:34:3505.10.2009 10:34:35
68 Kapitel 3: Der Aufbau eines Templates
Jetzt können Sie in der index.php den Fix aktivieren. Schreiben Sie die folgenden Zeilen in den Head-Bereich, also zwischen <head> und </head>:
<!--[if IE 6]><style type="text/css"> img {behavior:url(<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/iepngfix.htc);} </style><![endif]-->
Hinweis: Dieser Fix funktioniert bei allen PNG-Bildern, die mit einem img-Tag (<img ... />) in Ihrer Website eingebunden sind. Auf PNG-Bilder im Cascading Style Sheet hat dieser Fix dagegen keinen Einfl uss.
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 Templa-te-Ordner aufl isten 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.
<html><body bgcolor="#FFFFFF"></body></html>
Das ist ein Sicherheitsmerkmal Ihrer Website.
7356 Joomla Templates_NEU.indd 687356 Joomla Templates_NEU.indd 68 05.10.2009 10:34:3505.10.2009 10:34:35
693.8 Index
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.
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
7356 Joomla Templates_NEU.indd 697356 Joomla Templates_NEU.indd 69 05.10.2009 10:34:3505.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 ent-weder 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 Tem plates greift dieses Sicherheitsmerkmal, sondern auch in allen anderen Erweiterungen wie Kom-ponenten, 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Diese Zeile teilt den Browsern mit, welcher Seitentyp vorliegt. Sie verrät, welche HTML-Version oder -Syntax Sie im Quelltext nutzen. Diese Information hilft dem Browser , die Seite richtig darzustellen. Fehlt diese Information, versucht der Browser, die Seite best-mö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-Defi nitionen (DTD). Diese regeln, welche Elemente ein Dokument enthalten darf, welche Elemente in ande-ren Elementen vorkommen dürfen, welche Attribute zu einem Element gehören und ob diese Pfl icht sind. Sie können sich das als eine Art Norm für die Rechtschreibung vorstel-len. Ohne die Deklaration würde die Auszeichnungssprache HTML schnell in Dialekte ausarten, und man wüsste dann nicht mehr, was jemand mit seinem Quelltext eigent-lich beschreibt. Mit der Angabe des Dokumenttyps ist die Datei eine gültige und valide HTML-Datei. Hier eine Liste von Dokumenttypen:
HTML 4.01 :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
7356 Joomla Templates_NEU.indd 707356 Joomla Templates_NEU.indd 70 05.10.2009 10:34:3605.10.2009 10:34:36
713.8 Index
XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
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 defi niert. So darf beispielsweise reiner Text nicht einfach zwischen <body> und </body> stehen, sondern sollte in einem Paragraph-Element (<p></p>) 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 defi -nieren. 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 :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Diese Zeile öffnet den HTML-Bereich und verrät, welche Sprache hier Verwendung fi ndet. 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
<head><jdoc:include type="head" />
7356 Joomla Templates_NEU.indd 717356 Joomla Templates_NEU.indd 71 05.10.2009 10:34:3605.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 Anwei-sung ist in jedem Template zu fi nden 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 Favicon-Datei 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.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Es werden zwei System-Sheets und Ihr eigenes Template-Sheet verlinkt. Die System-Sheets 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.
<!--[if IE]><link rel="stylesheet" href="<?php echo $this->baseurl ?>/
7356 Joomla Templates_NEU.indd 727356 Joomla Templates_NEU.indd 72 05.10.2009 10:34:3605.10.2009 10:34:36
733.8 Index
templates/<?php echo $this->template ?>/css/ieonly.css" type="text/css" /><style type="text/css"> img {behavior:url(<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/iepngfix.htc);} </style><![endif]-->
Die Weiche gilt für alle Versionen des Internet Explorer. Nach der Verlinkung zum Hack-Sheet 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äufi gsten 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.
</head><body></body></html>
Zwischen den body-Tags wird die Struktur der Seite hinterlegt. Die Layoutelemente werden hier defi niert und Komponenten und Module eingebunden. Um die Erweiterun-gen einzubinden, greifen wir auf die Joomla-eigene Anweisung jdoc zurück. Diese Anwei-sung 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 737356 Joomla Templates_NEU.indd 73 05.10.2009 10:34:3605.10.2009 10:34:36
74 Kapitel 3: Der Aufbau eines Templates
Eine einfache Ausgabe wäre zum Beispiel:
<body><jdoc:include type="module" name="breaddcrumbs" /><jdoc:include type="component" /><jdoc:include type="module" name="footer" /></body>
Zugegeben: Diese Ausgabe ist etwas spartanisch. Doch sie funktioniert und ist zudem gül-tig. Was jetzt folgt, ist eine Auswahl von Elementen, die zur Verfügung stehen.
componen t
<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öffent-licht 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 747356 Joomla Templates_NEU.indd 74 05.10.2009 10:34:3605.10.2009 10:34:36
753.8 Index
gerendert wird. Bekannte Variablen für chrome sind none, xhtml, outline, rounded, table und horz.
• none
Anweisung:
<jdoc:include type="module" name="menu" style="none" />
Quelltext:
<ul class="menu"> <li><!—- menu items --></li></ul>
Ausgabe:
Bild 3.35: Das Hauptmenü als Modul mit style="none".
• xhtml
Anweisung:
<jdoc:include type="module" name="menu" style="xhtml" />
Quelltext:
<div class="moduletable_menu"> <h3>Main Menu</h3> <ul class="menu"> <li><!—- menu items --></li> </ul></div>
7356 Joomla Templates_NEU.indd 757356 Joomla Templates_NEU.indd 75 05.10.2009 10:34:3605.10.2009 10:34:36
76 Kapitel 3: Der Aufbau eines Templates
Ausgabe:
Bild 3.36: style="xhtml" lässt das Hauptmenü mit einer Überschrift erscheinen.
• outline
Anweisung:
<jdoc:include type="module" name="menu" style="outline" />
Quelltext:
<div class="mod-preview"> <div class="mod-preview-info">left[outline]</div> <div class="mod-preview-wrapper"> <ul class="menu"> <li><!—- menu items --></li> </ul> </div></div>
Ausgabe:
Bild 3.37: Das Hauptmenü als Modul mit style="outline".
7356 Joomla Templates_NEU.indd 767356 Joomla Templates_NEU.indd 76 05.10.2009 10:34:3605.10.2009 10:34:36
773.8 Index
• rounded
Anweisung:
<jdoc:include type="module" name="menu" style="rounded" />
Quelltext:
<div class="module_menu"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li><!-- menu items --></li> </ul> </div> </div> </div></div>
Ausgabe:
Bild 3.38: Mit style="rounded" werden die Ecken abgerundet dargestellt.
• table
Anweisung:
<jdoc:include type="module" name="menu" style="table" />
7356 Joomla Templates_NEU.indd 777356 Joomla Templates_NEU.indd 77 05.10.2009 10:34:3605.10.2009 10:34:36
78 Kapitel 3: Der Aufbau eines Templates
Quelltext:
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Main Menu</th> </tr> <tr> <td> <ul class="menu"> <li><!-- menu items --></li> </ul> </td> </tr></table>
Ausgabe:
Bild 3.39: Das Hauptmenü in einer Tabelle mit style="table".
• horz
Anweisung:
<jdoc:include type="module" name="menu" style="horz" />
Quelltext:
<table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr>
7356 Joomla Templates_NEU.indd 787356 Joomla Templates_NEU.indd 78 05.10.2009 10:34:3605.10.2009 10:34:36
793.8 Index
<th valign="top">Main Menu</th> </tr> <tr> <td> <ul class="menu"> <li><!-- menu items --></li> </ul> </td> </tr> </table> </td> </tr></table>
Ausgabe:
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 defi nieren, sprich: eigene chrome-Variablen für das Attribut style. Somit bekommt der Designer die kom-plette Kontrolle über das Aussehen der Module.
Wenn wir in den Ordner html des Blanko-Templates schauen, fi nden wir dort eine Datei namens modules.php . In dieser Datei befi ndet sich die Defi nition für die Variable slider.
7356 Joomla Templates_NEU.indd 797356 Joomla Templates_NEU.indd 79 05.10.2009 10:34:3605.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 defi nieren, 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 defi nieren.
modules
<jdoc:include type="modules" name="header" /><jdoc:include type="modules" name="top" style="xhtml" /><jdoc:include type="modules" name="menubar" style="none" /><jdoc:include type="modules" name="sidebar" style="xhtml" /><jdoc:include type="modules" name="footer" /><jdoc:include type="modules" name="debug" /><jdoc:include type="modules" name="user1" style="rounded" /><jdoc:include type="modules" name="user2" style="xhtml" />
7356 Joomla Templates_NEU.indd 807356 Joomla Templates_NEU.indd 80 05.10.2009 10:34:3605.10.2009 10:34:36
813.9 JavaScript
<jdoc:include type="modules" name="user3" /><jdoc:include type="modules" name="user4" />
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 defi niert 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 befi ndet sich zum Beispiel der PNG-Fix, damit PNG-Bilder auch im IE 6 korrekt dargestellt werden. Wenn Sie zusätz-liche JavaScript-Dateien verwenden möchten, beispielsweise das JavaScript-Framework jQuery , können Sie es in diesem Ordner ablegen und mit dem folgenden Code im head-Bereich der index.php einbinden:
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/jquery.js"></script>
Hinweis: Mit der Einbindung zusätzlicher JavaScript-Frameworks oder -Skripten kön-nen Komplikationen auftauchen, da Joomla von Haus aus das Framework Mootools verwendet. Einige Frameworks bieten hier eine No-Confl ict-Methode an. Man sollte vorher abschätzen, ob der Mehrgewinn durch das JavaScript die Mühe rechtfertigt.
3.10 Offl ine
Die Datei offline.php kommt immer dann zum Einsatz, wenn Sie in der Konfi guration von Joomla die Website offl ine setzen.
Bild 3.44: Die Datei offline.php wird angezeigt, wenn die Seite offl ine ist.
7356 Joomla Templates_NEU.indd 817356 Joomla Templates_NEU.indd 81 05.10.2009 10:34:3605.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 offl ine ist.
Wenn Sie einen Administratorzugang haben, können Sie sich hier einloggen und bekom-men das Frontend dennoch zu Gesicht. So können Sie Änderungen am Layout vorneh-men und begutachten, ohne dass es ein Besucher mitverfolgen kann.
7356 Joomla Templates_NEU.indd 827356 Joomla Templates_NEU.indd 82 05.10.2009 10:34:3605.10.2009 10:34:36
833.10 Offl ine
Bild 3.46: Der Aufbau der Datei offline.php ist überschaubar.
7356 Joomla Templates_NEU.indd 837356 Joomla Templates_NEU.indd 83 05.10.2009 10:34:3605.10.2009 10:34:36
84 Kapitel 3: Der Aufbau eines Templates
Die ersten Zeilen ähneln denjenigen der index.php.
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
In der ersten Zeile befi ndet sich die PHP-Anweisung, die dem Besucher den direkten Auf-ruf der Seite verbietet. In der zweiten Zeile steht der Dokumenttyp der Seite – wichtig für die Browser und Webbots. Der HTML-Bereich mit der Sprachdefi nition ist in der dritten Zeile.
<head><jdoc:include type="head" /><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/offline.css" type="text/css" /><?php if($this->direction == 'rtl') : ?><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/offline_rtl.css" type="text/css" /><?php endif; ?><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /></head>
Im Head-Bereich werden wie in der index.php die Header-Informationen von Joom-la 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).
<body><jdoc:include type="message" /><div id="frame" class="outline"><img src="templates/<?php echo $this->template ?>/images/logo.jpg" alt="Logo" align="middle" /><h1><?php echo $mainframe->getCfg('sitename'); ?></h1><p><?php echo $mainframe->getCfg('offline_message'); ?></p><?php if(JPluginHelper::isEnabled('authentication', 'openid')) : ?><?php JHTML::_('script', 'openid.js'); ?><?php endif; ?>
7356 Joomla Templates_NEU.indd 847356 Joomla Templates_NEU.indd 84 05.10.2009 10:34:3705.10.2009 10:34:37
853.10 Offl ine
<form action="index.php" method="post" name="login" id="form-login"><fieldset class="input"><p id="form-login-username"><label for="username"><?php echo JText::_('Username') ?></label><br /><input name="username" id="username" type="text" class="inputbox" alt="<?php echo JText::_('Username') ?>" size="18" /></p><p id="form-login-password"><label for="passwd"><?php echo JText::_('Password') ?></label><br /><input type="password" name="passwd" class="inputbox" size="18" alt="<?php echo JText::_('Password') ?>" id="passwd" /></p><p id="form-login-remember"><label for="remember"><?php echo JText::_('Remember me') ?></label><input type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('Remember me') ?>" id="remember" /></p><input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" /></fieldset><input type="hidden" name="option" value="com_user" /><input type="hidden" name="task" value="login" /><input type="hidden" name="return" value="<?php echo base64_encode(JURI::base()) ?>" /><?php echo JHTML::_( 'form.token' ); ?></form></div></body>
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 Offl ine-nachricht anzeigt. Hinter diesen Angaben steht eine Abfrage zur Steuerung der Benut-zerauthentifi zierung 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 857356 Joomla Templates_NEU.indd 85 05.10.2009 10:34:3705.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 defi niert und legt den Parameter dafür fest, kann der Anwen-der 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 defi niert.
Bild 3.47: In der params.ini werden die Einstellungen der Parameter gespeichert.
Bild 3.48: Die Parameterdefi nitionen sind in der Datei templateDetails.xml hinterlegt.
Eine Auswahl an Farbvarianten fi nden 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 867356 Joomla Templates_NEU.indd 86 05.10.2009 10:34:3705.10.2009 10:34:37
873.11 Parameter
Bild 3.50: So sehen die Farbvariationen im Frontend aus.
3.11.1 Defi nition eines Parameters
Die Datei templateDetails.xml fi nden 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 877356 Joomla Templates_NEU.indd 87 05.10.2009 10:34:3705.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 fi nden. Mit dem params-Tag eröffnen Sie den Bereich zum festlegen der Parameter. Jeder Parameter wird mit einem param-Tag (notabene: ohne s) defi niert. Zu diesem Tag gehören die obli-gatorischen 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 Parame-ter 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 887356 Joomla Templates_NEU.indd 88 05.10.2009 10:34:3705.10.2009 10:34:37
893.11 Parameter
Bild 3.52: Zwei Parameter defi nitionen: eine Auswahl liste 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 897356 Joomla Templates_NEU.indd 89 05.10.2009 10:34:3705.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 .
<?php echo $this->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 standard-mäßig der Eintrag inputbox
Die Liste muss mindestens einen Eintrag haben, also ein option-Element vorweisen. Der Text zwischen <option></option> 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 907356 Joomla Templates_NEU.indd 90 05.10.2009 10:34:3705.10.2009 10:34:37
913.11 Parameter
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 stan-dardmäß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 defi nierte Eintrag.
7356 Joomla Templates_NEU.indd 917356 Joomla Templates_NEU.indd 91 05.10.2009 10:34:3705.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.
fi lelist
Der Parameter des Typs filelist dient zur Aufl istung 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 angegebe-nen 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 927356 Joomla Templates_NEU.indd 92 05.10.2009 10:34:3705.10.2009 10:34:37
933.11 Parameter
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 ausge-wä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 937356 Joomla Templates_NEU.indd 93 05.10.2009 10:34:3705.10.2009 10:34:37
94 Kapitel 3: Der Aufbau eines Templates
Beispiel:
Bild 3.62: Eine Aufl istung 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 Para-meter voneinander zu trennen oder eine Überschrift für eine Gruppe von Parametern zu defi nieren.
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 Instal-lationsroutine aufgenommen werden. Fügen Sie dazu in der Datei template-Details.xml folgenden Eintrag in den file-Bereich ein:
<filename>params.ini</filename>
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 947356 Joomla Templates_NEU.indd 94 05.10.2009 10:34:3705.10.2009 10:34:37
953.11 Parameter
Der Inhalt einer params.ini könnte so aussehen:
eineListe=0einText=Hier der TexteineAuswahl=0eineDatei=indexeinOrdner=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 defi niert und ist dessen Wert in der Datei params.ini abgespeichert, können Sie sich diesen Wert zunutze machen. Eine PHP -Anweisung genügt.
<?php $variable = $this->params->get( 'parameterName' ); ?>
Haben wir beispielsweise eine Farbvariation parametrisiert, können wir den Wert abgrei-fen, um damit das jeweilige Cascading Style Sheet einzubinden.
<?php$farbe = $this->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 defi niert haben.
<?php if ($this->params->get( 'authorCopyright' )) : ?> <div class="copyright"> Copyright © <?php echo date('Y'); ?> Franzis </div><?php endif; ?>
7356 Joomla Templates_NEU.indd 957356 Joomla Templates_NEU.indd 95 05.10.2009 10:34:3805.10.2009 10:34:38
96 Kapitel 3: Der Aufbau eines Templates
7356 Joomla Templates_NEU.indd 967356 Joomla Templates_NEU.indd 96 05.10.2009 10:34:3805.10.2009 10:34:38
97
4 Templates anpassen
Sie können die mit Joomla mitgelieferten Standard-Templates »BEEZ« , »JA Purity« und »RHUK Milkyway« an Ihre eigenen Zwecke anpassen. Es empfi ehlt 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 Templa-tes umgeschrieben haben und dann Ihr Joomla-System aktualisieren wollen, sollten Sie unbedingt einen Blick in das Update-Paket werfen, um zu schauen, ob die umgeschrie-benen 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 ver-wenden wir ein frisch installiertes Joomla mit Beispielinhalten . Wenn Ihnen keine Inhalte vorliegen, können Sie Joomla ganz einfach noch einmal aufsetzen und dabei die Beispie-linhalte mit installieren. Verwenden Sie dazu die Anleitung in Kapitel 2, »Die Joomla-Testumgebung «, achten Sie aber darauf, dass die Beispieldateien mit installiert werden. Anhand der nachfolgenden Änderungen von BEEZ soll Ihnen die Vorgehensweise nahe-gebracht 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 977356 Joomla Templates_NEU.indd 97 05.10.2009 10:34:3805.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 eige-nen 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 987356 Joomla Templates_NEU.indd 98 05.10.2009 10:34:3805.10.2009 10:34:38
994.1 Farben ändern
Unter
http://getfirebug.com
können Sie das Add-on bekommen. Wenn Firebug installiert ist, kann es über das Käfer-symbol 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 997356 Joomla Templates_NEU.indd 99 05.10.2009 10:34:3805.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 1007356 Joomla Templates_NEU.indd 100 05.10.2009 10:34:3805.10.2009 10:34:38
1014.1 Farben ändern
Bild 4.6: Firebug spuckt die CSS-Eigenschaften des breadcrumb-Elements 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 fi nden 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 1017356 Joomla Templates_NEU.indd 101 05.10.2009 10:34:3905.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-&-Ersetzen -Funktion Ihres Editors zu verwenden. Da wir schon einen Wert kennen (#93246F), erset-zen wir ihn komplett durch den neuen Wert (#243693) und speichern die Datei layout.css danach ab.
7356 Joomla Templates_NEU.indd 1027356 Joomla Templates_NEU.indd 102 05.10.2009 10:34:3905.10.2009 10:34:39
1034.1 Farben ändern
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 1037356 Joomla Templates_NEU.indd 103 05.10.2009 10:34:3905.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 1047356 Joomla Templates_NEU.indd 104 05.10.2009 10:34:3905.10.2009 10:34:39
1054.2 Bilder austauschen
4.2 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 ausfi ndig machen:
• logo.gif
• biene.gif
• arrow.png
• lupe_larger.gif
• lupe_larger_black.gif
• lupe_smaller.gif
• lupe_smaller_black.gif
Die Bilder fi nden 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) Neue Bilder (Blau)
7356 Joomla Templates_NEU.indd 1057356 Joomla Templates_NEU.indd 105 05.10.2009 10:34:3905.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 1067356 Joomla Templates_NEU.indd 106 05.10.2009 10:34:3905.10.2009 10:34:39
1074.3 Neue Modulposition
4.3 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« befi nden 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.
<div id="contenttop"> <div class="incontenttop"> </div></div>
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.
<?php if ($this->countModules( 'contenttop' )) : ?> ...<?php endif; ?>
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.
7356 Joomla Templates_NEU.indd 1077356 Joomla Templates_NEU.indd 107 05.10.2009 10:34:4005.10.2009 10:34:40
108 Kapitel 4: Templates anpassen
<?php if ($this->countModules( 'contenttop' )) : ?><div id="contenttop"> <div class="incontenttop"> <jdoc :include type="modules" name="contenttop" ... /> </div></div><?php endif; ?>
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 fi nden 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> <position>right</position> <position>top</position>
7356 Joomla Templates_NEU.indd 1087356 Joomla Templates_NEU.indd 108 05.10.2009 10:34:4005.10.2009 10:34:40
1094.3 Neue Modulposition
<position>breadcrumb</position> <position>contenttop</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>debug</position> <position>syndicate</position></positions>
Wenn Sie die XML-Datei abgespeichert haben, können Sie die CSS-Datei von BEEZ öff-nen, um das Layout für das Modul zu bestimmen. In dem Ordner css des Template-Verzeichnisses liegt die Datei layout.css. Im Abschnitt main (ab Zeile 491) können Sie die Defi nitionen 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 Defi nitionen 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 defi nieren 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 Schlag-zeilen auf der neuen Position contenttop anzeigen lassen.
7356 Joomla Templates_NEU.indd 1097356 Joomla Templates_NEU.indd 109 05.10.2009 10:34:4005.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 1107356 Joomla Templates_NEU.indd 110 05.10.2009 10:34:4005.10.2009 10:34:40
1114.4 Neue Typografi e
4.4 Neue Typografi e
Als Nächstes wollen wir den Schriftsatz von BEEZ ändern. Als Standard im Template wer-den 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 bei-spielsweise 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 Typografi e angezeigt.
Bild 4.15: Die Website mit den neuen Schriften.
7356 Joomla Templates_NEU.indd 1117356 Joomla Templates_NEU.indd 111 05.10.2009 10:34:4005.10.2009 10:34:40
112 Kapitel 4: Templates anpassen
Generell empfi ehlt 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 1127356 Joomla Templates_NEU.indd 112 05.10.2009 10:34:4005.10.2009 10:34:40
113
5 Erstellung eines Screendesigns
5.1 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 ver-wenden 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 modifi zieren werden. Sie fi nden 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 fi nden wir die PSD-Datei (Photoshop-Datei) zum Logo.
7356 Joomla Templates_NEU.indd 1137356 Joomla Templates_NEU.indd 113 05.10.2009 10:34:4105.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, instal-lieren 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 1147356 Joomla Templates_NEU.indd 114 05.10.2009 10:34:4105.10.2009 10:34:41
1155.2 Vorbereitung
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 fi nden unter
http://www.backgroundlabs.com/detail/link-97.html
7356 Joomla Templates_NEU.indd 1157356 Joomla Templates_NEU.indd 115 05.10.2009 10:34:4105.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 fi nden, 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 1167356 Joomla Templates_NEU.indd 116 05.10.2009 10:34:4105.10.2009 10:34:41
1175.2 Vorbereitung
Solche Fotos fi ndet 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 1177356 Joomla Templates_NEU.indd 117 05.10.2009 10:34:4105.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 fi nden:
http://wellpanda.bloggerschmidt.de/res/icons.jpg
Bild 5.8: Dieses Icon-Set fi ndet 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 1187356 Joomla Templates_NEU.indd 118 05.10.2009 10:34:4105.10.2009 10:34:41
1195.3 Anleitung
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 1197356 Joomla Templates_NEU.indd 119 05.10.2009 10:34:4105.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 Rechteck-Werkzeug gezeichnet.
Für das obere Rechteck (weiß) defi nieren Sie folgende Ebenenstile :
Bild 5.12: Das erste Rechteck bekommt einen Schein nach innen .
7356 Joomla Templates_NEU.indd 1207356 Joomla Templates_NEU.indd 120 05.10.2009 10:34:4205.10.2009 10:34:42
1215.3 Anleitung
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 1217356 Joomla Templates_NEU.indd 121 05.10.2009 10:34:4205.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 1227356 Joomla Templates_NEU.indd 122 05.10.2009 10:34:4205.10.2009 10:34:42
1235.3 Anleitung
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 1237356 Joomla Templates_NEU.indd 123 05.10.2009 10:34:4205.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 1247356 Joomla Templates_NEU.indd 124 05.10.2009 10:34:4205.10.2009 10:34:42
1255.3 Anleitung
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 > Renderfi l-ter > Beleuchtungseffekte«.
7356 Joomla Templates_NEU.indd 1257356 Joomla Templates_NEU.indd 125 05.10.2009 10:34:4205.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 1267356 Joomla Templates_NEU.indd 126 05.10.2009 10:34:4305.10.2009 10:34:43
1275.3 Anleitung
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 1277356 Joomla Templates_NEU.indd 127 05.10.2009 10:34:4305.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 1287356 Joomla Templates_NEU.indd 128 05.10.2009 10:34:4305.10.2009 10:34:43
1295.3 Anleitung
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 1297356 Joomla Templates_NEU.indd 129 05.10.2009 10:34:4305.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 1307356 Joomla Templates_NEU.indd 130 05.10.2009 10:34:4305.10.2009 10:34:43
1315.3 Anleitung
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 1317356 Joomla Templates_NEU.indd 131 05.10.2009 10:34:4405.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 1327356 Joomla Templates_NEU.indd 132 05.10.2009 10:34:4405.10.2009 10:34:44
1335.3 Anleitung
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 1337356 Joomla Templates_NEU.indd 133 05.10.2009 10:34:4405.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 1347356 Joomla Templates_NEU.indd 134 05.10.2009 10:34:4405.10.2009 10:34:44
1355.3 Anleitung
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 1357356 Joomla Templates_NEU.indd 135 05.10.2009 10:34:4405.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 1367356 Joomla Templates_NEU.indd 136 05.10.2009 10:34:4505.10.2009 10:34:45
1375.3 Anleitung
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 1377356 Joomla Templates_NEU.indd 137 05.10.2009 10:34:4505.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ähr-rend 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 1387356 Joomla Templates_NEU.indd 138 05.10.2009 10:34:4505.10.2009 10:34:45
1395.3 Anleitung
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 1397356 Joomla Templates_NEU.indd 139 05.10.2009 10:34:4505.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 Web-sites zum Generieren solcher Texte fi nden 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 1407356 Joomla Templates_NEU.indd 140 05.10.2009 10:34:4505.10.2009 10:34:45
1415.3 Anleitung
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 1417356 Joomla Templates_NEU.indd 141 05.10.2009 10:34:4605.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 1427356 Joomla Templates_NEU.indd 142 05.10.2009 10:34:4605.10.2009 10:34:46
1435.3 Anleitung
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 1437356 Joomla Templates_NEU.indd 143 05.10.2009 10:34:4605.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 1447356 Joomla Templates_NEU.indd 144 05.10.2009 10:34:4605.10.2009 10:34:46
1455.3 Anleitung
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 1457356 Joomla Templates_NEU.indd 145 05.10.2009 10:34:4705.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 1467356 Joomla Templates_NEU.indd 146 05.10.2009 10:34:4705.10.2009 10:34:47
1475.3 Anleitung
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 1477356 Joomla Templates_NEU.indd 147 05.10.2009 10:34:4705.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 fi ndet. 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 1487356 Joomla Templates_NEU.indd 148 05.10.2009 10:34:4705.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ück-zulehnen, 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 nachzu-denken, 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 fi nden.
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 1497356 Joomla Templates_NEU.indd 149 05.10.2009 10:34:4805.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-Erstel-lung reicht es, wenn wir uns auf diese Seite konzentrieren.
Bei der Begutachtung des Designs erkennen wir, aus welchen Elementen es zusammen-gesetzt ist: Oben in der Mitte sehen wir das Logo , links und rechts davon befi ndet 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 1507356 Joomla Templates_NEU.indd 150 05.10.2009 10:34:4805.10.2009 10:34:48
1516.1 Ein Blick auf das Screendesign
In Photoshop liegen alle Elemente auf verschiedenen Ebenen , die übereinander angeord-net 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 1517356 Joomla Templates_NEU.indd 151 05.10.2009 10:34:4805.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, befi ndet 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 vorfi nden: das Menü – allerdings in unterschiedlichen Zuständen. Das Menü in unserem Beispiel wird die Ein-teilung haben:
• Solarium
• Massage
7356 Joomla Templates_NEU.indd 1527356 Joomla Templates_NEU.indd 152 05.10.2009 10:34:4805.10.2009 10:34:48
1536.1 Ein Blick auf das Screendesign
• Startseite (Logo)
• Über uns
• Kontakt
So wird das Menü unter Joomla angelegt, und im Cascading Style Sheet wird es mit Bil-dern, die wir aus dem Layout gewinnen, gestaltet. Das Blanko-Template dient, wie ein-gangs 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 kur-zer Zeit wechselt. In der Box darunter werden wir die zwei Artikel »Wir über uns« und
7356 Joomla Templates_NEU.indd 1537356 Joomla Templates_NEU.indd 153 05.10.2009 10:34:4805.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 – Pfl icht 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 1547356 Joomla Templates_NEU.indd 154 05.10.2009 10:34:4805.10.2009 10:34:48
1556.3 Die Parameter bestimmen
• footright
• debug
Die Modulposition debug setzen wir ganz ans Ende des Quelltexts. Sie ist für die Ausga-be 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 fi nden 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 XML-Datei.
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 Para-meter eines Templates können hier festgelegt werden. Im Blanko-Template ist das params -Tag schon dafür vorgesehen. Sie fi nden 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 1557356 Joomla Templates_NEU.indd 155 05.10.2009 10:34:4805.10.2009 10:34:48
156 Kapitel 6: Vom Layout zum Template
Das lässt sich am besten mit dem Parameter typ 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 fi nden 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 Sprach-dateien, 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 defi niert.
7356 Joomla Templates_NEU.indd 1567356 Joomla Templates_NEU.indd 156 05.10.2009 10:34:4805.10.2009 10:34:48
1576.4 Die Bilder erstellen
6.4.1 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 1577356 Joomla Templates_NEU.indd 157 05.10.2009 10:34:4805.10.2009 10:34:48
158 Kapitel 6: Vom Layout zum Template
Tipp: Merken Sie sich die Tastenkombination [ALT] + [SHIFT] + [STRG] + [S] für Win-dows oder [ALT] + [CMD] + [SHIFT] + [S] für Mac. Sie werden sie häufi ger 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 1587356 Joomla Templates_NEU.indd 158 05.10.2009 10:34:4905.10.2009 10:34:49
1596.4 Die Bilder erstellen
6.4.2 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 (exis-tiert 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 wer-den wir alle Zustände erstellen und als ein einziges Bild abspeichern. Mittels CSS werden wir die Buttons dann so defi nieren, 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) befi ndet, 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 unter-einander an. Das Logo braucht nur im normal- und im hover-Zustand eingeblendet zu sein.
7356 Joomla Templates_NEU.indd 1597356 Joomla Templates_NEU.indd 159 05.10.2009 10:34:4905.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 1607356 Joomla Templates_NEU.indd 160 05.10.2009 10:34:4905.10.2009 10:34:49
1616.4 Die Bilder erstellen
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 1617356 Joomla Templates_NEU.indd 161 05.10.2009 10:34:4905.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 1627356 Joomla Templates_NEU.indd 162 05.10.2009 10:34:4905.10.2009 10:34:49
1636.4 Die Bilder erstellen
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 Slice-Werkzeugs teilen wir das Layout ein.
7356 Joomla Templates_NEU.indd 1637356 Joomla Templates_NEU.indd 163 05.10.2009 10:34:4905.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 Maus-taste 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 Tasten-kombination gemerkt? [ALT] + [SHIFT] + [STRG] + [S] für Windows und [ALT] + [CMD] + [SHIFT] + [S] für Mac).
7356 Joomla Templates_NEU.indd 1647356 Joomla Templates_NEU.indd 164 05.10.2009 10:34:4905.10.2009 10:34:49
1656.4 Die Bilder erstellen
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 1657356 Joomla Templates_NEU.indd 165 05.10.2009 10:34:5005.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 1667356 Joomla Templates_NEU.indd 166 05.10.2009 10:34:5005.10.2009 10:34:50
1676.4 Die Bilder erstellen
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 1677356 Joomla Templates_NEU.indd 167 05.10.2009 10:34:5005.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 Tem-plates«) 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 fl ach. 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 1687356 Joomla Templates_NEU.indd 168 05.10.2009 10:34:5005.10.2009 10:34:50
1696.4 Die Bilder erstellen
Blenden Sie die Elemente der Slideshow wieder aus und ziehen Sie mit dem Slice-Werk-zeug [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 Slideshow -Hintergrund.
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 Über-gang gewährleistet.
7356 Joomla Templates_NEU.indd 1697356 Joomla Templates_NEU.indd 169 05.10.2009 10:34:5005.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 1707356 Joomla Templates_NEU.indd 170 05.10.2009 10:34:5105.10.2009 10:34:51
1716.4 Die Bilder erstellen
Über die »Slice-Optionen« (rechte Maustaste) können Sie den Slices Namen geben, beispielsweise slide_massage und slide_massage_tn. Das Suffi x _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 1717356 Joomla Templates_NEU.indd 171 05.10.2009 10:34:5105.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 1727356 Joomla Templates_NEU.indd 172 05.10.2009 10:34:5105.10.2009 10:34:51
1736.4 Die Bilder erstellen
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 1737356 Joomla Templates_NEU.indd 173 05.10.2009 10:34:5105.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 Layout-hintergrund.
7356 Joomla Templates_NEU.indd 1747356 Joomla Templates_NEU.indd 174 05.10.2009 10:34:5105.10.2009 10:34:51
1756.4 Die Bilder erstellen
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 Recht-eck 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 ent-fernt und mit einem Innenrand ausgestattet.
7356 Joomla Templates_NEU.indd 1757356 Joomla Templates_NEU.indd 175 05.10.2009 10:34:5205.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 webge-recht exportiert werden. Ziehen Sie dazu mit dem Slice-Werkzeug [K] einen Slice über die Maske .
7356 Joomla Templates_NEU.indd 1767356 Joomla Templates_NEU.indd 176 05.10.2009 10:34:5205.10.2009 10:34:52
1776.4 Die Bilder erstellen
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 rech-ten 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-24-Format. 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 1777356 Joomla Templates_NEU.indd 177 05.10.2009 10:34:5205.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 trans-parentes 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 1787356 Joomla Templates_NEU.indd 178 05.10.2009 10:34:5205.10.2009 10:34:52
1796.4 Die Bilder erstellen
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 1797356 Joomla Templates_NEU.indd 179 05.10.2009 10:34:5205.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 1807356 Joomla Templates_NEU.indd 180 05.10.2009 10:34:5305.10.2009 10:34:53
1816.4 Die Bilder erstellen
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 1817356 Joomla Templates_NEU.indd 181 05.10.2009 10:34:5305.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 Installa-tionsroutine auf. Das geschieht in der Datei templateDetails.xml . Mit der Aufl istung 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 1827356 Joomla Templates_NEU.indd 182 05.10.2009 10:34:5305.10.2009 10:34:53
1836.5 Die Installationsroutine festlegen
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ön-nen 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 1837356 Joomla Templates_NEU.indd 183 05.10.2009 10:34:5305.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 1847356 Joomla Templates_NEU.indd 184 05.10.2009 10:34:5305.10.2009 10:34:53
1856.5 Die Installationsroutine festlegen
Wenn Sie das Blanko-Template kürzlich heruntergeladen haben, stehen Ihnen die Over-rides 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 Moo-tools 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, fi nden 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 <install> und </install>.
Bild 6.61: Die Sprachdateien des Blanko-Templates.
7356 Joomla Templates_NEU.indd 1857356 Joomla Templates_NEU.indd 185 05.10.2009 10:34:5305.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 umschrei-ben .
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 1867356 Joomla Templates_NEU.indd 186 05.10.2009 10:34:5405.10.2009 10:34:54
1876.6 Das Template weiter vorbereiten
6.6 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 öff-nen, nehmen wir uns als Erstes die zwei Sprachdateien vor. Sie fi nden diese im Template-Ordner 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 Installa tion in der Testumgebung komplett.
7356 Joomla Templates_NEU.indd 1877356 Joomla Templates_NEU.indd 187 05.10.2009 10:34:5405.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 Ord-ner 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 fi nden 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 expor-tieren 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 1887356 Joomla Templates_NEU.indd 188 05.10.2009 10:34:5405.10.2009 10:34:54
1896.6 Das Template weiter vorbereiten
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 ent-sprechend.
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 defi nieren. 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 1897356 Joomla Templates_NEU.indd 189 05.10.2009 10:34:5405.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 Program-mierung 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 Konfi guration. Gehen Sie über »Site > Kon-fi guration« zu den »Site-Einstellungen« und wählen Sie hier »Kein Editor« aus (als Stan-dard ist der TinyMCE-Editor eingetragen).
7356 Joomla Templates_NEU.indd 1907356 Joomla Templates_NEU.indd 190 05.10.2009 10:34:5405.10.2009 10:34:54
1916.7 Blindtexte, Menüs und Module anlegen
Bild 6.71: Stellen Sie »Kein Editor« ein.
Speichern Sie die Konfi guration ab und wechseln Sie zu »Inhalt > Beiträge« .
6.7.1 Blindtexte schreiben
Blindtexte sind bestens dazu geeignet, dem Template in der Entwicklungsphase Leben ein-zuhauchen. Wenn noch kein Inhalt vorliegt, kann man auf sie zurückgreifen. Blindtexte fangen meist mit »Lorem Ipsum « an. Zwei Websites zum Generieren solcher Texte fi nden 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 1917356 Joomla Templates_NEU.indd 191 05.10.2009 10:34:5405.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«
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <u>commodo consequat</u>. 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</p>
»Weitere Angebote «
<p><a href="#">Ut wisi enim ad minim<br /> Veniam, quis nostrud exerci <br />Tation ullamcorper suscipit lobortis <br />Nisl ut aliquip ex ea <br />Commodo
7356 Joomla Templates_NEU.indd 1927356 Joomla Templates_NEU.indd 192 05.10.2009 10:34:5505.10.2009 10:34:55
1936.7 Blindtexte, Menüs und Module anlegen
consequat duis autem <br />Vel eum iriure dolor in <br />Hendrerit in vulputate <br />Velit esse molestie consequat<br />Vel illum dolore eu feugiat</a></p>
Nun stehen die Beiträge für die Menüs bereit.
6.7.2 Menüs anlegen
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, fi nden Sie den Eintrag »Startseite« schon vor. Erstel-len 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 1937356 Joomla Templates_NEU.indd 193 05.10.2009 10:34:5505.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 defi nieren. 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 »Seiten titel anzeigen« auf »Nein«. Danach können Sie den Eintrag speichern und verlas-sen.
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 > Lay-out: Beitrag (Joomla!-Standard)« können Sie den Beitrag »Impressum« auswählen.
7356 Joomla Templates_NEU.indd 1947356 Joomla Templates_NEU.indd 194 05.10.2009 10:34:5505.10.2009 10:34:55
1956.7 Blindtexte, Menüs und Module anlegen
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, fi nden 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 anzei-gen lassen können, bekommen wir im Header die Ausgabe zum Hauptmenü zu sehen.
<ul class="menu"> <li class="item2"> <a href="/joomla/index.php? ... id=1&Itemid=2"> <span>Solarium</span> </a> </li> <li class="item3"> <a href="/joomla/index.php? ... id=2&Itemid=3">
7356 Joomla Templates_NEU.indd 1957356 Joomla Templates_NEU.indd 195 05.10.2009 10:34:5505.10.2009 10:34:55
196 Kapitel 6: Vom Layout zum Template
<span>Massage</span> </a> </li> <li id="current" class="active item1"> <a href="http://localhost/joomla/"> <span>Startseite</span> </a> </li> <li class="item4"> <a href="/joomla/index.php? ... id=3&Itemid=4"> <span>Über uns</span> </a> </li> <li class="item5"> <a href="/joomla/index.php? ... id=4&Itemid=5"> <span>Kontakt</span> </a> </li></ul>
Das Hauptmenü wird über eine unsortierte Liste (engl. unsorted list = ul) mit fünf ein-zelnen 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 Posi tion 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 1967356 Joomla Templates_NEU.indd 196 05.10.2009 10:34:5505.10.2009 10:34:55
1976.7 Blindtexte, Menüs und Module anlegen
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.
<ul class="menu"> <li class="item7"> <a href="/joomla/index.php? ... id=1&Itemid=2"> <span>Solarium</span> </a> </li> <li class="item8"> <a href="/joomla/index.php? ... id=2&Itemid=3"> <span>Massage</span> </a> </li> <li class="item9"> <a href="/joomla/index.php? ... id=3&Itemid=4"> <span>Über uns</span> </a> </li> <li class="item10"> <a href="/joomla/index.php? ... id=4&Itemid=5"> <span>Kontakt</span> </a> </li></ul>
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 1977356 Joomla Templates_NEU.indd 197 05.10.2009 10:34:5505.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 Template-Engine folgenden Quelltext für das Menü Impressum aus.
<ul class="menu"> <li class="item11"> <a href="/joomla/index.php? ... id=6&Itemid=11"> <span>Impressum</span> </a> </li></ul>
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 1987356 Joomla Templates_NEU.indd 198 05.10.2009 10:34:5505.10.2009 10:34:55
1996.7 Blindtexte, Menüs und Module anlegen
Bild 6.77: Spendieren Sie dem Titel noch einen Doppelpunkt.
Haben Sie es abgespeichert, erstellt die Template-Engine im Frontend den Quelltext dafür.
<h3>Partner:</h3><ul class="menu"> <li class="item12"> <a href="http://www.franzis.de"> <span>Wellness Drinks & Friends</span> </a> </li> <li class="item13"> <a href="http://www.franzis.de"> <span>Handtuch GmbH</span> </a> </li> <li class="item14"> <a href="http://www.franzis.de"> <span>Sonnenbank AG</span> </a> </li></ul>
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 Modul-Chrome xhtml (style="xhtml") in der jdoc -Anweisung. Ansonsten bleibt der Aufbau des Menüs wie gehabt.
7356 Joomla Templates_NEU.indd 1997356 Joomla Templates_NEU.indd 199 05.10.2009 10:34:5505.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äh-len 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 2007356 Joomla Templates_NEU.indd 200 05.10.2009 10:34:5605.10.2009 10:34:56
2016.7 Blindtexte, Menüs und Module anlegen
Als »angepasste Ausgabe «, sprich: Quelltext , schreiben wir:
<div id="pandashow" class="floatLeft"> <img src="templates/wellpanda/images/slidemask.png" alt="" border="0" id="pmask" height="310" width="590" /> <div id="pandamask"> <div id="pandaslides"> <div class="floatLeft"> <img src="templates/wellpanda/images/ slide_massage.jpg" alt="" border="0" class="pandaimg" height="310" width="590" /> </div> <div class="floatLeft"> <img src="templates/wellpanda/images/ slide_solarium.jpg" alt="" border="0" class="pandaimg" height="310" width="590" /> </div> <div class="floatLeft"> <img src="templates/wellpanda/images/ slide_team.jpg" alt="" border="0" class="pandaimg" height="310" width="590" /> </div> </div> </div></div><div id="handles" class="floatLeft"> <div id="mass" class="panda_tn"> <div class="in_tn"> <h3>Massage</h3> <span>sit amet, consectetuer dis adipiscing elit, sed diam nonummy nibh euismod.</span> <a href="index.php?option=com_content&view= article&id=2&Itemid=3">mehr...</a> </div> </div> <div id="sola" class="panda_tn">
7356 Joomla Templates_NEU.indd 2017356 Joomla Templates_NEU.indd 201 05.10.2009 10:34:5605.10.2009 10:34:56
202 Kapitel 6: Vom Layout zum Template
<div class="in_tn"> <h3>Solarium</h3> <span>sit amet, consectetuer dis adipiscing elit, sed diam nonummy nibh euismod.</span> <a href="index.php?option=com_content&view= article&id=1&Itemid=2">mehr...</a> </div> </div> <div id="team" class="panda_tn"> <div class="in_tn"> <h3>Über uns</h3> <span>sit amet, consectetuer dis adipiscing elit, sed diam nonummy nibh euismod.</span> <a href="index.php?option=com_content&view= article&id=3&Itemid=4">mehr...</a> </div> </div></div>
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 Konfi guration von Joom-la 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 unse-re 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, beste-hend 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 2027356 Joomla Templates_NEU.indd 202 05.10.2009 10:34:5605.10.2009 10:34:56
2036.7 Blindtexte, Menüs und Module anlegen
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:
<img src="templates/wellpanda/images/icons.gif" alt="" border="0" id="wp_icons" height="220" width="270" />
Sofortkontakt erstellen
Das letzte Modul, das wir mit »Neu > Eigenes HTML« erstellen, nennen wir »Sofortkon-takt«. Es soll auf footright angezeigt werden.
7356 Joomla Templates_NEU.indd 2037356 Joomla Templates_NEU.indd 203 05.10.2009 10:34:5605.10.2009 10:34:56
204 Kapitel 6: Vom Layout zum Template
Bild 6.80: Unter footright wird der »Sofortkontakt« auf allen Seiten angezeigt.
Angepasste Ausgabe (Quelltext ):
<p><span>Tel +49 – 01234 – 56789</span><br /><a href="mailto:[email protected]">[email protected]</a></p>
Die Vorbereitungen sind getroffen. Nun können wir endlich mit der Programmierung beginnen.
7356 Joomla Templates_NEU.indd 2047356 Joomla Templates_NEU.indd 204 05.10.2009 10:34:5605.10.2009 10:34:56
2056.8 Den Index programmieren
6.8 Den Index programmieren
Öffnen Sie die Datei index.php des Blanko-Templates .
Bild 6.81: Die Struktur des Layouts kommt zwischen <body> und </body>.
7356 Joomla Templates_NEU.indd 2057356 Joomla Templates_NEU.indd 205 05.10.2009 10:34:5605.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 imple-mentieren 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 Funk-tion.
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 2067356 Joomla Templates_NEU.indd 206 05.10.2009 10:34:5605.10.2009 10:34:56
2076.8 Den Index programmieren
Hier wird angegeben, dass sich die Slides (also quasi die Dias) in einem Element mit der id pandaslides befi nden. Diesen div-Container haben wir vorher im Modul Slideshow erstellt.
items: $ES('div','pandaslides'),
Die einzelnen Elemente befi nden 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 2077356 Joomla Templates_NEU.indd 207 05.10.2009 10:34:5605.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 gro-ben Einteilung an.
7356 Joomla Templates_NEU.indd 2087356 Joomla Templates_NEU.indd 208 05.10.2009 10:34:5605.10.2009 10:34:56
2096.8 Den Index programmieren
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.
<a name="up" id="up"></a>
Der Anker wird mit einem a-Tag defi niert, 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:
<a href="#up">Nach oben</top>
Das Layout selbst stecken wir in eine div-Box , bestehend aus zwei div-Containern.
<div id="overall"> <div id="container"> ... </div></div>
Diese Box wird uns helfen, die Seite per CSS zu zentrieren, also mittig anzeigen zu lassen. Das Hintergrundbild des Layouts werden wir dieser Box später zuweisen.
7356 Joomla Templates_NEU.indd 2097356 Joomla Templates_NEU.indd 209 05.10.2009 10:34:5605.10.2009 10:34:56
210 Kapitel 6: Vom Layout zum Template
Bild 6.85: Die div-Boxen für den Header , den Content und den Footer.
Wir erstellen drei weitere div-Boxen für den Header , den Content und den Footer und versehen alle mit Kommentaren. Die Kommentare dienen später beim Durchforsten des Quelltexts im Browser als Orientierung. Außerdem verbessert es die Übersichtlichkeit, wenn wir die Tags einrücken. Verwenden Sie dazu einfach die [TAB]-Taste Ihrer Tastatur.
7356 Joomla Templates_NEU.indd 2107356 Joomla Templates_NEU.indd 210 05.10.2009 10:34:5705.10.2009 10:34:57
2116.8 Den Index programmieren
<!-- ************************ ** Kommentar ** ************************* --><div id="ID"> <div class="KLASSE"> </div></div>
Die einzelnen div-Boxen helfen uns, Darstellungsfehler im Internet Explorer zu vermei-den. Die Boxen mit der id header, content oder footer können wir mit dem CSS belie-big gestalten und ansprechen, mit Ausnahme der Abstände. Die Abstände lagern wir aus in die Boxen mit den Klassen inheader, incontent und infooter. So umgehen wir, dass ein Browser versehentlich einen Außen- oder Innenabstand (margin oder padding) von einer Breite oder Höhe abzieht beziehungsweise hinzuaddiert.
Nehmen wir uns den Header vor.
Bild 6.86: Der Header bekommt die Modulposition menu zugewiesen.
Mit der Joomla-eigenen Anweisung jdoc weisen wir den Header an, alle Module , die auf der Position menu veröffentlicht werden, hier anzeigen zu lassen.
<jdoc :include type="modules" name="menu" />
Damit ist der Header von der Struktur her fertig. Als Nächstes kommt der Content .
7356 Joomla Templates_NEU.indd 2117356 Joomla Templates_NEU.indd 211 05.10.2009 10:34:5705.10.2009 10:34:57
212 Kapitel 6: Vom Layout zum Template
Bild 6.87: Der Content mit seinen div-Boxen und jdoc -Anweisungen.
Zuerst erstellen wir zwei weitere div-Boxen mit der id show beziehungsweise main. In show veranlassen wir, dass die Module , die unter show veröffentlicht werden, auch angezeigt werden. Zwischen show und main platzieren wir die Systemnachrichten, damit Joomla auch mit den Besuchern kommunizieren kann. In die Box main stecken wir zwei weitere div-Boxen : articles und cmodul. In articles binden wir alle Komponenten von Joomla ein, also auch die Komponente für die Artikel, und in cmodul alle Module, die unter »cmodul« zu veröffentlichen sind. Zudem geben wir der jdoc -Anweisung einen
7356 Joomla Templates_NEU.indd 2127356 Joomla Templates_NEU.indd 212 05.10.2009 10:34:5705.10.2009 10:34:57
2136.8 Den Index programmieren
eigenen Stil: wpstyle. Dieses Chrome (siehe Kapitel 3, »Der Aufbau eines Templates«) werden wir später noch defi nieren. Die verwendeten Joomla-Anweisungen lauten:
<jdoc :include type="modules" name="show" /><jdoc :include type="message" /><jdoc :include type="component" /><jdoc :include type="modules" name="cmodul" style="wpstyle" />
Die beiden Boxen articles und cmodul sind mit der Klasse floatLeft ausgestattet. Über die gleichnamige CSS -Klasse werden wir beide Boxen so ausrichten, dass sie links-bündig nebeneinander platziert werden. Damit der Float, in unserem Fall die Linksbün-digkeit, von unserem Lieblingsbrowser, dem Internet Explorer, richtig interpretiert wird, müssen wir ihn noch richtig »clearen«, das heißt, der Float muss wieder herausgenommen werden. Das geschieht mit den div-Boxen der Klasse floatClear und sieht im Quelltext leider etwas unsauber aus.
Die Slideshow soll nur angezeigt werden, wenn sie unter Joomla auch veröffentlicht ist. Um das zu erreichen, fragen wir per PHP einfach nach, ob ein Modul unter der Position show veröffentlicht ist, und lassen – gesetzt den Fall, es ist so – die Slideshow dann anzei-gen.
Bild 6.88: Zählt man ein Modul unter show, dann wird es auch angezeigt.
<?php if ($this->countModules( 'show' )) : ?> ...<?php endif; ?>
Diese Kontrollstruktur ist eine PHP-Anweisung und muss zwischen <?php und ?> stehen. Sie lässt sich wunderbar auch auf den nachfolgenden Content anwenden. Wenn auf der rechten Seite neben den Artikeln kein Modul veröffentlicht ist, soll den Artikeln die kom-plette Breite zugewiesen werden. Das erreichen wir durch zwei Kontrollstrukturen.
7356 Joomla Templates_NEU.indd 2137356 Joomla Templates_NEU.indd 213 05.10.2009 10:34:5705.10.2009 10:34:57
214 Kapitel 6: Vom Layout zum Template
Bild 6.89: Die beiden Kontrollstrukturen zählen jeweils die veröffentlichten Module .
<?php if ($this->countModules( 'cmodul' )) : ?> ...<?php else : ?> ...<?php endif; ?>
Die erste Kontrollstruktur ist eine if-else -Anweisung und die zweite eine einfache if- Anweisung. Mit der ersten Anweisung wollen wir erreichen, dass, wenn unter der Position cmodul kein Modul veröffentlicht ist, ein breiterer div-Container für die Artikel gewählt wird. Den Container mit der id articlesbig werden wir per CSS breiter machen, damit sich die Artikel noch mehr Platz teilen können. Die zweite Anweisung ist dafür da, den Platz auch dann freizugeben, wenn kein Modul veröffentlicht ist.
So weit zum Content , kommen wir zum Footer .
7356 Joomla Templates_NEU.indd 2147356 Joomla Templates_NEU.indd 214 05.10.2009 10:34:5705.10.2009 10:34:57
2156.8 Den Index programmieren
Bild 6.90: Der Footer ist dreigeteilt: footleft, copyright und footright.
Der Footer ist in drei Bereiche eingeteilt. In der linken Box soll später noch mal das Hauptmenü erscheinen, denn eine zusätzliche Navigation im Footer ist benutzerfreund-lich. Daneben soll das Copyright-Element mit dem Impressum platziert werden, rechts davon dann ein weiteres Menü mit Partnerlinks und die Kontaktdaten .
Für den Copyright-Teil haben wir Parameter festgelegt (siehe Datei templateDetails.xml ), mit denen wir auswählen können, ob ein vordefi niertes Copyright angezeigt wird oder ein eigener Copyright-Hinweis. Für diese Parameter verwenden wir die switch -Anweisung.
7356 Joomla Templates_NEU.indd 2157356 Joomla Templates_NEU.indd 215 05.10.2009 10:34:5705.10.2009 10:34:57
216 Kapitel 6: Vom Layout zum Template
<?php switch ($this->params->get('copyright_status')) {case 0: break;case 1: echo JText::_('Copyright © '.date('Y '). ' WellPanda.<br />Alle Rechte vorbehalten.'); break;case 2: echo $this->params->get('copyright_text'); break;}?>
Hierbei handelt es sich um eine PHP-Anweisung, die wieder zwischen die spitzen Klam-mern <?php und ?> gehört. Mit
$this->params->get('copyright_status')
fragen wir den Parameter copyright_status ab. Danach folgen die Fälle (0, 1, 2):
• 0 bedeutet: keine Anzeige des Copyrights
• 1 bedeutet: vordefi nierte Anzeige mit Datum
• 2 bedeutet: eigener Copyright -Text
Für den Fall 0 (keine Anzeige des Copyrights) brechen wir die Anweisung ab.
case 0: break;
Für den Fall 1 (vordefi nierte Anzeige mit Datum) defi nieren wir einen Copyright -Hin-weis. Mit der PHP-Funktion date geben wir das aktuelle Jahr aus.
case 1: echo JText::_('Copyright © '.date('Y '). ' WellPanda.<br />Alle Rechte vorbehalten.'); break;
Für den Fall 2 (eigener Copyright -Text) werden wir einen weiteren Parameter abfragen , den wir noch anlegen müssen. Der Parameter enthält dann den eigenen Text.
7356 Joomla Templates_NEU.indd 2167356 Joomla Templates_NEU.indd 216 05.10.2009 10:34:5705.10.2009 10:34:57
2176.9 Das Modul-Chrome codieren
case 2: echo $this->params->get('copyright_text'); break;
Verlassen wir die Anweisung.
Die drei div-Container der Klasse floatClear sollen die vorherige Linksbündigkeit für alle Browser wieder aufheben. Die verwendeten jdoc -Anweisungen im Footer lauten:
<jdoc :include type="modules" name="footleft" /><jdoc :include type="modules" name="impress" /><jdoc :include type="modules" name="footright" />
Damit ist der Footer fertig. Jetzt setzen wir noch vor dem body-Schluss-Tag das Debug-Modul , damit wir eine Ausgabe sehen, wenn wir den Debug-Modus unter Joomla akti-vieren.
Bild 6.91: Das Debug-Modul kommt ans Ende vor das body-Tag.
<jdoc :include type="modules" name="debug" />
Somit hätten wir den Index (index.php) fertig programmiert. Was uns noch fehlt, bevor wir an die Cascading Style Sheets gehen, ist der eigene Modulstil wpstyle. Den codieren wir als Nächstes.
6.9 Das Modul-Chrome codieren
Im html-Ordner unseres Templates WellPanda befi ndet sich die Datei modules.php. Mithilfe dieses Overrides, dem Modul-Chrome , können wir unsere eigene Modulausgabe bestimmen. Im Index gaben wir der Modulposition cmodul den Stil wpstyle. Diesen Stil gilt es jetzt zu programmieren. Wenn Sie die Datei modules.php öffnen, fi nden Sie folgenden Inhalt vor:
7356 Joomla Templates_NEU.indd 2177356 Joomla Templates_NEU.indd 217 05.10.2009 10:34:5705.10.2009 10:34:57
218 Kapitel 6: Vom Layout zum Template
Bild 6.92: Mit der ersten Zeile verbieten wir den direkten Aufruf.
Unter die Funktion modChrome_slider setzen wir unsere Funktion modChrome_wpstyle.
Bild 6.93: Die Funktion des Modul-Chromes wpstyle.
Schauen wir uns den Code mal näher an.
function modChrome_wpstyle($module, &$params, &$attribs) { ?> <div class="wp_top"></div> <div class="wp_module"> <h3><?php echo JText::_( $module->title ); ?></h3> <?php echo $module->content; ?> </div> <div class="wp_bottom"></div> <?php}
Der Name der Funktion setzt sich zusammen aus modChrome_ und dem Namen unseres Chromes wpstyle (siehe Kapitel 3, »Der Aufbau eine Templates«, Abschnitt »custom chro-me«). Dieser Funktion übergeben wir die Parameter $module, &$params und &$attribs. Die Funktion selbst besteht aus einer HTML-Ausgabe mit den drei div-Containern wp_top, wp_module und wp_bottom. In wp_module stecken wir den Titel ($module->title)
7356 Joomla Templates_NEU.indd 2187356 Joomla Templates_NEU.indd 218 05.10.2009 10:34:5705.10.2009 10:34:57
2196.10 Die Cascading Style Sheets defi nieren
und den Inhalt ($module->content) des Moduls. Unser Modul-Chrome ist damit fertig, und wir können uns jetzt mit den Defi nitionen der Cascading Style Sheets beschäftigen.
6.10 Die Cascading Style Sheets defi nieren
Mithilfe des Browsers Firefox und des Add-ons Firebug werden wir die Gestaltung rea-lisieren. Sie sollten die Seite aufrufen, unter der Sie Joomla installiert haben. Wenn das Template WellPanda als Standard eingerichtet ist, sollte die Ausgabe ungefähr so aussehen:
Bild 6.94: Eine chaotische Anzeige der Menüs, Module und Beiträge.
Gruselig. Um eine günstigere Ausgangsposition zu schaffen, loggen wir uns im Backend ein und deaktivieren unter »Erweiterungen > Module« alle Module, die wir haben. Bei Bedarf werden wir die Module nach und nach wieder aktivieren.
7356 Joomla Templates_NEU.indd 2197356 Joomla Templates_NEU.indd 219 05.10.2009 10:34:5705.10.2009 10:34:57
220 Kapitel 6: Vom Layout zum Template
Bild 6.95: Deaktivieren Sie im Backend alle Module, um im Frontend eine bessere Übersicht zu erhalten.
Bild 6.96: Lediglich die Beiträge und das Copyright werden im Frontend angezeigt.
Das sieht schon besser und übersichtlicher aus. Was wir sehen, sind die beiden Artikel »Wir über uns« und »Wellness-Angebote«, die wir unter Joomla auf der Startseite veröf-fentlicht haben. Das Copyright wird ebenfalls angezeigt.
7356 Joomla Templates_NEU.indd 2207356 Joomla Templates_NEU.indd 220 05.10.2009 10:34:5805.10.2009 10:34:58
2216.10 Die Cascading Style Sheets defi nieren
Kommen wir zum Cascading Style Sheet. Das Template-eigene Style Sheet nennt sich templates.css, und wir fi nden es im css-Order unseres Templates. Das Sheet hat den folgenden Aufbau:
• Reset & Start
• Layout
• Menus
• Links
• Module
• Joomla
• Error
6.10.1 Reset & Start
Als Erstes setzen wir alle Defi nitionen per Reset zurück. Sie kennen es vielleicht: Sie schreiben einen Text direkt in den body-Bereich, und dieser wird mit einem Abstand zu den Rändern angezeigt. Oder Sie wollen eine Tabelle ausgeben und fragen sich, warum der Platz zwischen den Zellen existiert. Verantwortlich dafür sind die vordefi nierten Stan-dardabstände. Die fi nden Verwendung, wenn keine anderen Defi nitionen angegeben sind. Wir wollen aber bei null anfangen und setzen deshalb durch einen Reset alle HTML-Elemente zurück.
Es folgen die Defi nitionen von html und body. Beide Tags bekommen eine hundertpro-zentige Höhe, die sie an die div-Container weitervererben können. Der untere Außen-abstand (margin-bottom) von html sorgt dafür, dass der Scrollbalken immer angezeigt wird. Somit verhindern wir ein Springen der Seite bei Inhalt, der komplett ins Browser-fenster passt.
7356 Joomla Templates_NEU.indd 2217356 Joomla Templates_NEU.indd 221 05.10.2009 10:34:5805.10.2009 10:34:58
222 Kapitel 6: Vom Layout zum Template
Bild 6.97: Der Reset : Die einzelnen Elemente werden zurückgesetzt.
7356 Joomla Templates_NEU.indd 2227356 Joomla Templates_NEU.indd 222 05.10.2009 10:34:5805.10.2009 10:34:58
2236.10 Die Cascading Style Sheets defi nieren
Bild 6.98: Start der Defi nitionen mit html und body.
Die Werte von body schreiben wir neu.
body { background-color:#181109; color:#000; font:normal normal normal 87.5%/2.143em trebuchet ms,sans-serif; height:100%; text-align:center;}
Die Hintergrundfarbe wird an das Layout angelehnt (#181109). Die Schriftfarbe bleibt Schwarz (#000). Das Layout der Seite werden wir mittig zentrieren, wobei uns das Attribut text-align helfen wird. Die mittige Ausrichtung bezieht sich nämlich nicht nur auf die Schrift, sondern auf alle Elemente im body-Bereich.
Das font-Element im body verdient besondere Aufmerksamkeit. Es ist die Kurzform der Eigenschaften font-style, font-variant, font-weight, font-size/line-height, font-family; genau in dieser Reihenfolge. Das ist der Grund dafür, dass dreimal hinterei-nander der Wert normal zu lesen ist. Die Schriftgröße (font-size) geben wir in Prozent an. Wenn 16 Pixel 100 Prozent sind, sind 14 Pixel 87,5 Prozent. Von diesem Wert leiten wir alle anderen Größen ab. Wir legen also mit dem Wert 87,5 Prozent die Standardgröße der Website fest. 87,5 Prozent entsprechen somit 1 em. Im Screendesign haben wir die Linienhöhe auf 30 Pixel festgelegt. Das entspricht 2,143 em, gemessen an der Schriftgröße. Die Schriftgröße im body festzulegen und alle anderen Größen davon abzuleiten, hat den Vorteil, dass auch Besucher mit dem Internet Explorer 6 ihre Schriftgröße mit dem Brow-ser einstellen können. Der Zugang zu Ihrer Seite wird damit erleichtert. Eine gute Seite, die Ihnen dabei hilft, Schriftgrößen zwischen Pixel und em zu konvertieren, ist
http://pxtoem.com
7356 Joomla Templates_NEU.indd 2237356 Joomla Templates_NEU.indd 223 05.10.2009 10:34:5805.10.2009 10:34:58
224 Kapitel 6: Vom Layout zum Template
Für eine Schriftgröße von 14 Pixeln, sprich: 87,5 Prozent, verwenden wir folgende Tabelle:
Pixel EM
09 px 0,643 em
10 px 0,714 em
11 px 0,786 em
12 px 0,857 em
13 px 0,929 em
14 px 1,000 em
15 px 1,071 em
16 px 1,143 em
17 px 1,214 em
18 px 1,286 em
19 px 1,357 em
20 px 1,429 em
22 px 1,571 em
24 px 1,714 em
26 px 1,857 em
28 px 2,000 em
30 px 2,143 em
6.10.2 Layout
Defi nieren wir das Layout. Dieser Bereich ist in template.css schon vorgesehen.
7356 Joomla Templates_NEU.indd 2247356 Joomla Templates_NEU.indd 224 05.10.2009 10:34:5805.10.2009 10:34:58
2256.10 Die Cascading Style Sheets defi nieren
Bild 6.99: Das Layout wird hier defi niert.
Die Floats helfen bei der Positionierung der div-Container. Nehmen wir uns zunächst die ids vor, die wir den div-Containern in der index.php gegeben haben.
div#overall { background:url(../images/bg.jpg) no-repeat center top; height:100%; margin:0 auto; text-align:left; width:940px;}div#container { text-align:left;}
Die div-Container #overall und #container sind mit body für den Hintergrund und die Ausrichtung der Seite verantwortlich. Wenn im body das Attribut text-align bei der Ausrichtung für ältere Browser hilft, so hilft der Außenabstand margin des Elements #overall bei den neuen Browsern. Der erste Wert von margin ist für oben und unten, während der zweite für links und rechts steht. Mit den Werten 0 und auto zentrieren wir also die Seite. Weiterhin geben wir #overall eine 100-prozentige Höhe, damit sie weitervererbt werden kann. Als Hintergrund kommt unser Bild bg.jpg zum Einsatz, das wir nicht wiederholen lassen und oben zentriert ausrichten. Die linke Ausrichtung mit text-align (#overall und #container) setzt die Schrift wieder linksbündig.
7356 Joomla Templates_NEU.indd 2257356 Joomla Templates_NEU.indd 225 05.10.2009 10:34:5805.10.2009 10:34:58
226 Kapitel 6: Vom Layout zum Template
Bild 6.100: Der Hintergrund ist defi niert und die Seite mittig ausgerichtet.
Defi nieren wir den Header , den Content und den Footer .
div#header { height:100px; margin-bottom:20px; overflow:hidden;}div#content { width:940px;}div#show { background:url(../images/bg_slideshow.jpg) no-repeat left top; height:350px; margin-bottom:20px; overflow:hidden; width:940px;}
Der Header soll 100 Pixel hoch sein, damit wir genügend Platz für das Menü haben. Ein Außenabstand von 20 Pixeln lässt ihn nicht am Content »kleben«. Der Content soll
7356 Joomla Templates_NEU.indd 2267356 Joomla Templates_NEU.indd 226 05.10.2009 10:34:5805.10.2009 10:34:58
2276.10 Die Cascading Style Sheets defi nieren
sich über die gesamte Breite von 940 Pixeln erstrecken. Die Slideshow machen wir auch 940 Pixel breit und 350 Pixel hoch. Unser Hintergrundbild dafür richten wir oben links aus. Gesetzt den Fall, dass der Inhalt der Slideshow größer ausfällt als der Container, sorgt ein overflow:hidden dafür, dass dieser nicht angezeigt wird. Somit bleibt das Layout gewahrt und wird bei größerem Inhalt nicht zerschossen. Wiederum soll ein Außen-abstand von 20 Pixeln für genügend Raum zum weiteren Content sorgen.
div#main { background:url(../images/bg_box.gif) no-repeat left top; height:350px; margin-bottom:20px; overflow:hidden; width:940px;}
Der main-Container ist für den weiteren Inhalt vorgesehen. Er hat die gleichen Abmes-sungen wie die Slideshow und bekommt das für ihn vorgesehene Hintergrundbild.
div#articles { width:610px;}div#articlesbig { width:940px;}div#cmodul { overflow:hidden; width:330px;}
Die Artikel von Joomla können in zwei verschiedenen Breiten angezeigt werden, einmal in einer Breite von 610 Pixeln, wenn rechts davon ein Modul veröffentlicht ist, und einmal über die komplette Breite von 940 Pixeln, falls kein Modul veröffentlicht ist. Das Modul selbst hat einen 330 Pixel breiten Platz. Der Befehl overflow:hidden lässt es im Internet Explorer 6 korrekt anzeigen.
div#footer { background:url(../images/bg_footer.gif) no-repeat left top; height:140px; margin-bottom:20px; overflow:hidden; width:940px;}div#footleft {
7356 Joomla Templates_NEU.indd 2277356 Joomla Templates_NEU.indd 227 05.10.2009 10:34:5905.10.2009 10:34:59
228 Kapitel 6: Vom Layout zum Template
height:100px; width:140px;}div#copyright { height:100px; width:260px;}div#footright { height:100px;}
Der Footer hat die komplette Breite der Seite bei einer Höhe von 140 Pixeln und bekommt das Hintergrundbild bg_footer.gif. #footleft, #copyright und #footright teilen sich den Platz.
Bild 6.101: Langsam zeichnet sich das Layout ab.
7356 Joomla Templates_NEU.indd 2287356 Joomla Templates_NEU.indd 228 05.10.2009 10:34:5905.10.2009 10:34:59
2296.10 Die Cascading Style Sheets defi nieren
Durch die Verwendung von div-Boxen haben wir die Möglichkeit, die Innenabstände auszulagern. Dafür sind die »Layout Classes« vorgesehen.
div.inheader { padding:0;}div.incontent { padding:0;}div.inshow { padding:20px;}div.inmain { padding:0;}div.inarticles { padding:20px;}div.incmodul { padding:5px;}div.infooter { padding:10px 20px;}div.infootleft { padding:0;}div.incopyright { padding:0;}div.footright { padding:0;}
Streng genommen könnte man alle Elemente mit padding:0 zusammenfassen.
7356 Joomla Templates_NEU.indd 2297356 Joomla Templates_NEU.indd 229 05.10.2009 10:34:5905.10.2009 10:34:59
230 Kapitel 6: Vom Layout zum Template
Bild 6.102: Das Layout mit den Innenabständen.
6.10.3 Menüs
Aktivieren wir nun im Backend das Modul des Hauptmenüs, damit wir den Quelltext des Menüs bekommen.
Bild 6.103: Nur das Modul »Hauptmenü« ist aktiviert.
7356 Joomla Templates_NEU.indd 2307356 Joomla Templates_NEU.indd 230 05.10.2009 10:34:5905.10.2009 10:34:59
2316.10 Die Cascading Style Sheets defi nieren
Im Cascading Style Sheet defi nieren wir einen Bereich für die Menüs und fügen den fol-genden Code ein:
/* Menus*********************************************/
/*** Hauptmenu header ***/.inheader ul.menu { background:url(../images/bg_menu.png) repeat-x left top; height:100px; list-style:none; width:940px;}.inheader ul.menu li { float:left;}.inheader ul.menu li a { background:url(../images/menu.png) no-repeat left top; display:block; font-size:0; height:0; line-height:0; overflow:hidden; padding-top:120px;}
Mit einem Kommentar läuten wir die Defi nitionen des Hauptmenüs ein. Die Menüs wer-den von der Template-Engine standardmäßig als unsortierte Liste (engl. unordered list = ul) der Klasse menu ausgegeben. Wenn wir die Klasse inheader davorsetzen, gehen wir sicher, dass das Menü nur im Header angesprochen wird. Die Liste soll – gleich dem Header – 100 Pixel hoch und 940 Pixel breit sein, und wir geben ihr das Hintergrundbild bg_menu.png, das wir in x-Richtung wiederholen lassen. Ein list-style:none verhin-dert, dass Aufzählungszeichen für die Elemente angezeigt werden.
Jedes einzelne Element (engl. list item = li) wird mit einem float linksbündig ausgerich-tet. So schaffen wir ein horizontales, also waagerechtes Menü.
Die Zustände aller Buttons haben wir im Bild menu.png festgehalten. Wir können also jedem Button (a-Element) dieses Bild zuweisen und es später für jeden Zustand so aus-richten, dass der entsprechende Bereich angezeigt wird. Das Bild braucht nicht wiederholt zu werden, und links oben können wir es ausrichten. Mit display erzwingen wir, dass ein Button als Block angezeigt wird. Damit die Beschriftung ausgeblendet wird, setzen wir die
7356 Joomla Templates_NEU.indd 2317356 Joomla Templates_NEU.indd 231 05.10.2009 10:34:5905.10.2009 10:34:59
232 Kapitel 6: Vom Layout zum Template
Schriftgröße, die Höhe und die Linienhöhe auf null. Der obere Innenabstand (padding-top) drückt die Schrift mithilfe von overflow aus dem Rahmen.
/* normal */.inheader li.item2 a:link, .inheader li.item2 a:visited { background-position: 0px 0; width:150px;}.inheader li.item3 a:link, .inheader li.item3 a:visited { background-position:-150px 0; width:180px;}.inheader li.item1 a:link, .inheader li.item1 a:visited { background-position:-330px 0; width:280px;}.inheader li.item4 a:link, .inheader li.item4 a:visited { background-position:-610px 0; width:190px;}.inheader li.item5 a:link, .inheader li.item5 a:visited { background-position:-800px 0; width:140px;}
Das sind die Defi nitionen der Buttons im normalen Zustand. Mit der Klasse inheader stellen wir sicher, dass nur die Elemente im Header angesprochen werden. Beim Anle-gen des Menüs bekommt jeder Eintrag eine itemid, mit deren Hilfe wir nun die Buttons ansprechen können.
• li.item2 = Solarium
• li.item3 = Massage
• li.item1 = Startseite
• li.item4 = Über uns
• li.item5 = Kontakt
7356 Joomla Templates_NEU.indd 2327356 Joomla Templates_NEU.indd 232 05.10.2009 10:34:5905.10.2009 10:34:59
2336.10 Die Cascading Style Sheets defi nieren
Für den Internet Explorer sprechen wir nicht nur die normalen Buttons (a:link) an, sondern auch die besuchten (a:visited). Das schafft ein einheitliches Aussehen in allen Browsern. Wir positionieren das Hintergrundbild für einen Button an seiner ent-sprechenden Stelle. Die Werte beziehen sich auf die linke obere Ecke. Zusätzlich zu der Hintergrundposition defi nieren wir mit width die Breite der Buttons. Um die Werte her-auszubekommen, ist es hilfreich, das Hintergrundbild in Photoshop zu öffnen und auf 500 Prozent zu vergrößern.
/* hover */.inheader li.item2 a:hover { background-position: 0px -100px;}.inheader li.item3 a:hover { background-position:-150px -100px;}.inheader li.item1 a:hover { background-position:-330px -100px;}.inheader li.item4 a:hover { background-position:-610px -100px;}.inheader li.item5 a:hover { background-position:-800px -100px;}
/* pressed */.inheader li.item2 a:active { background-position: 0px -200px;}.inheader li.item3 a:active { background-position:-150px -200px;}.inheader li.item4 a:active { background-position:-610px -200px;}.inheader li.item5 a:active { background-position:-800px -200px;}
/* active */.inheader li#current.item2 a { background-position: 0px -300px;}.inheader li#current.item3 a {
7356 Joomla Templates_NEU.indd 2337356 Joomla Templates_NEU.indd 233 05.10.2009 10:34:5905.10.2009 10:34:59
234 Kapitel 6: Vom Layout zum Template
background-position:-150px -300px;}.inheader li#current.item4 a { background-position:-610px -300px;}.inheader li#current.item5 a { background-position:-800px -300px;}
Die Buttons im hover-Zustand haben von links gesehen die gleichen Werte wie im normal-Zustand. Mit dem zweiten Wert lassen wir das Bild in y-Richtung »verrutschen«. Das Gleiche gilt für die Zustände pressed und active. Beim active-Zustand ist es zudem wichtig, dass jedes Element (li) mit der id #current ausgezeichnet wird. Das gibt uns die Template-Engine vor, und so können wir den aktiven Zustand korrekt anspre-chen.
Bild 6.104: Das Hauptmenü in seinen Zuständen ist benutzerfreundlich und ansprechend.
7356 Joomla Templates_NEU.indd 2347356 Joomla Templates_NEU.indd 234 05.10.2009 10:34:5905.10.2009 10:34:59
2356.10 Die Cascading Style Sheets defi nieren
Bleiben wir bei den Menüs und aktivieren wir im Backend die Module »Hauptmenü (footer)«, »Partner« und »Impressum«.
Bild 6.105: Alle Menüs sind nun aktiv.
In der geöffneten Datei templates.css defi nieren wir die Elemente für die weiteren Menüs direkt unter den Defi nitionen des Hauptmenüs. Kommentare helfen uns dabei, den Überblick zu behalten.
/*** Hauptmenu footer ***/.infootleft ul.menu { list-style:none;}.infootleft ul.menu li a { color:#000; text-decoration:none;}.infootleft ul.menu li a:hover { color:#666;}
Mit der Klasse infootleft stellen wir sicher, dass wir nur das linke Menü im Footer ansprechen. Der unsortierten Liste (ul) weisen wir explizit keinen Stil zu. Somit wer-den die Aufzählungszeichen in keinem Fall dargestellt. Danach geben wir den Links eine schwarze Schrift ohne Dekoration, sprich: ohne Unterstrich. Geht der Besucher über den Link, wird als optischer Effekt die Schrift grau dargestellt.
/*** Impressum ***/.incopyright ul.menu { list-style:none;
7356 Joomla Templates_NEU.indd 2357356 Joomla Templates_NEU.indd 235 05.10.2009 10:35:0005.10.2009 10:35:00
236 Kapitel 6: Vom Layout zum Template
}.incopyright ul.menu li a { color:#000; text-decoration:none;}.incopyright ul.menu li a:hover { color:#666;}
Um nur das Menü des Impressums anzusprechen, benutzen wir die Klasse incopyright. Für eine einheitliche Anzeige verwenden wir die gleichen Eigenschaften mit den gleichen Werten wie im Menü zuvor.
/*** Partner ***/.infootright div { float:left;}.moduletablepartner { width:240px;}.infootright ul.menu { list-style:none;}.infootright ul.menu li a { color:#000; text-decoration:none;}.infootright ul.menu li a:hover { color:#666;}
Auf der rechten Seite des Footers veröffentlichen wir insgesamt zwei Module . Um diese nebeneinander anzuzeigen, werden beide div-Container mit einem float:left ausge-stattet. Das Modul für die Partnerinks bekommt eine feste Breite von 240 Pixeln. Wir stel-len mit der Klasse footright sicher, nur das Menü auf der rechten Seite anzusprechen. Die Eigenschaften sind einschließlich der Werte die gleichen wie bei den beiden Menüs zuvor. Damit sind die Menüs komplett.
7356 Joomla Templates_NEU.indd 2367356 Joomla Templates_NEU.indd 236 05.10.2009 10:35:0005.10.2009 10:35:00
2376.10 Die Cascading Style Sheets defi nieren
Bild 6.106: Im Footer befi nden sich insgesamt drei Menüs.
6.10.4 Sofortkontakt
Bleiben wir zunächst beim Footer und defi nieren wir den Sofortkontakt per CSS . Wir kehren also zurück zu Joomla und aktivieren das gleichnamige Modul im Backend .
Bild 6.107: Das Modul »Sofortkontakt« ist nun aktiviert.
7356 Joomla Templates_NEU.indd 2377356 Joomla Templates_NEU.indd 237 05.10.2009 10:35:0005.10.2009 10:35:00
238 Kapitel 6: Vom Layout zum Template
Das Modul wird durch die Klasse infootright und moduletable angesprochen. Im Bereich Module des CSS defi nieren wir das Modul.
/* Sofortkontakt */.infootright .moduletable p span { font-size:1.714em; line-height:2.571em;}
Dem span-Tag mit der Telefonnummer geben wir eine große Schrift und eine entspre-chende Linienhöhe.
.infooter a:link,
.infooter a:visited { color:#000; text-decoration:none;}.infooter a:hover { color:#666;}
Im CSS -Bereich Links hinterlassen wir noch eine schwarze Schriftfarbe und deaktivieren die Textdekoration. Eine graue Schriftfarbe sorgt für den Hover-Effekt.
7356 Joomla Templates_NEU.indd 2387356 Joomla Templates_NEU.indd 238 05.10.2009 10:35:0005.10.2009 10:35:00
2396.10 Die Cascading Style Sheets defi nieren
Bild 6.108: Der Footer ist nun mit Menüs, Copyright und Sofortkontakt komplett.
6.10.5 Slideshow
Im Backend von Joomla können wir jetzt unter »Erweiterungen > Module« die Slideshow reaktivieren.
Bild 6.109: Das Modul »Slideshow « ist nun auch aktiv.
7356 Joomla Templates_NEU.indd 2397356 Joomla Templates_NEU.indd 239 05.10.2009 10:35:0005.10.2009 10:35:00
240 Kapitel 6: Vom Layout zum Template
Im Bereich »Module« des CSS codieren wir die WellPanda-Slideshow .
/* WellPanda Slideshow */#pandashow margin-right:20px;}#pmask { position:absolute; z-index:2;}#pandamask { height:310px; overflow:hidden; position:relative; width:590px; z-index:1;}#pandaslides { position:absolute}#pandaslides div { background:#eee; height:310px; width:590px;}
Die Bilder der Slideshow stecken alle im div-Container mit der id pandashow. Damit dieser nicht an den Handles klebt, geben wir ihm einen Außenabstand von 20 Pixeln. Das aufwendig erstellte transparente Bild slidemask.png mit der id pmask sowie den div-Container mit der id pandaslides positionieren wir absolut. Die Eigenschaft z-index hilft uns dabei, das Bild über dem div anzeigen zu lassen. Der div der id pandamask und die divs in pandaslides bekommen die gleiche Größe. Ein overflow:hidden verhin-dert, dass sich die Größe ändert.
div#mass { background:url(../images/slide_massage_tn.jpg) no-repeat left top;}div#sola { background:url(../images/slide_solarium_tn.jpg) no-repeat left top;}div#team { background:url(../images/slide_team_tn.jpg) no-repeat left top;}
7356 Joomla Templates_NEU.indd 2407356 Joomla Templates_NEU.indd 240 05.10.2009 10:35:0105.10.2009 10:35:01
2416.10 Die Cascading Style Sheets defi nieren
div.panda_tn { height:90px; margin-bottom:20px; overflow:hidden; width:290px;}
Die drei Handles (mass, sola, team) bekommen jeweils ihr eigenes Hintergrundbild zugewiesen. Die Klasse panda_tn defi niert bei allen die Größe des div-Containers mit einem Außenabstand von 20 Pixeln. Ein overflow:hidden erzwingt eine gleichbleibende Größe bei größerem Inhalt.
div.in_tn { font-size:0.857em; line-height:1.143em; padding:10px 10px 10px 120px;}div.in_tn h3 { font-weight:bold;}div.in_tn a { display:block; text-align:right; width:100%;}
Schriftgröße und Linienhöhe defi nieren wir mit der Klasse in_tn. Der Innenabstand verhindert, dass die Schrift über dem kleinen Vorschaubild steht. Die Überschrift (h3) setzen wir fett. Den Link (»mehr...«) lassen wir als Block mit einer Breite von 100 Prozent anzeigen und richten den Text rechts aus.
.inshow a:link,
.inshow a:visited { color:#000;}.inshow a:hover { color:#666;}
Im Bereich Links des CSS hinterlegen wir noch, dass die Textlinks der Slideshow schwarz mit einem grauen Hover-Effekt angezeigt werden. Das Ergebnis kann sich sehen lassen.
7356 Joomla Templates_NEU.indd 2417356 Joomla Templates_NEU.indd 241 05.10.2009 10:35:0105.10.2009 10:35:01
242 Kapitel 6: Vom Layout zum Template
Bild 6.110: Die Slideshow ist nun in vollem Gange.
Die Slideshow ist fertiggestellt und kann mit den Handles gesteuert werden.
6.10.6 Weitere Angebote
Das letzte Modul, das wir noch im Cascading Style Sheet defi nieren wollen, ist das Modul »Weitere Angebote«. Aktivieren Sie es im Joomla-Backend .
Bild 6.111: Last, but not least: Das Modul »Weitere Angebote« ist nun aktiv.
7356 Joomla Templates_NEU.indd 2427356 Joomla Templates_NEU.indd 242 05.10.2009 10:35:0105.10.2009 10:35:01
2436.10 Die Cascading Style Sheets defi nieren
In der Datei templates.css bekommt der Bereich Module folgende Defi nitionen:
/* WellPanda-Angebote */div.wp_module { background:url(../images/bg_modulbox.gif) no-repeat left top; height:340px; padding:35px; width:320px;}div.wp_module h3 { font-family:Georgia,serif; font-size:1.714em; line-height:1em; margin-bottom:7px;}img#wp_icons { margin-left:-10px;}
Durch die Programmierung unseres eigenen Modul-Chrome s (wpstyle) können wir mit der Klasse wp_module das Modul ansprechen. Wir codieren eine feste Größe mit einem Innenabstand von 35 Pixeln zu allen Seiten. Die Überschrift soll den gleichen Schrifttyp mit der gleichen Größe und Linienhöhe bekommen wie die der Artikel. Ein Außenab-stand der Überschrift lässt den Inhalt (die Icons) korrekt anzeigen. Das Bild der Icons können wir mit einem negativen Abstand gut positionieren.
Das Layout ist nun komplett als Template umgesetzt und wird, dank vorausschauender Codierung, in den Browsern korrekt angezeigt.
7356 Joomla Templates_NEU.indd 2437356 Joomla Templates_NEU.indd 243 05.10.2009 10:35:0105.10.2009 10:35:01
244 Kapitel 6: Vom Layout zum Template
Bild 6.112: Die pixelgenaue Umsetzung des Layouts in ein Joomla-Template.
7356 Joomla Templates_NEU.indd 2447356 Joomla Templates_NEU.indd 244 05.10.2009 10:35:0105.10.2009 10:35:01
245
7 Prüfen und validieren
Ist das Layout als Template umgesetzt, heißt es: testen, testen, testen. Das Template sollte verschiedene Tests durchlaufen:
• Aufl ösung der Browser
• W3C -Validator
• Darstellung im Browser
• Ladezeit der Website
Der Test hinsichtlich der Aufl ösung der Browser soll zeigen, wie das Template in verschie-denen Browsergrößen dargestellt wird. Mithilfe des W3C-Validators testen wir das Tem-plate auf Fehler im Quelltext. Der Test bezüglich der Darstellung im Browser soll zeigen, ob das Template insgesamt korrekt dargestellt wird. Last, but not least ist die Ladezeit der Website selbst in Zeiten des Breitbandinternets von Bedeutung.
7.1 Aufl ösung der Browser
Wird ein Screendesign erstellt, wird das für eine bestimmte Browseraufl ösung geschehen. Die Aufl ösung des Browsers entspricht allerdings nicht eins zu eins der Aufl ösung des Bildschirms, den der Benutzer verwendet. Wenn die Aufl ösung eines Bildschirms etwa 1.024 x 786 Pixel misst, ist der Bereich des Browsers, in dem die Website angezeigt wird, kleiner. Doch welcher Platz steht tatsächlich zur Verfügung? Will man den Verkaufszahlen von Bildschirmen und einigen Statistiken glauben und zieht man die Menüleisten, den Scrollbalken und den Browserrahmen ab, kann man mit einer Breite von 960 Pixeln die meisten Besucher erreichen. In der Höhe ist man fl exibel, da die Besucher es gewohnt sind zu scrollen. Aber allzu lang sollte eine Webseite, besonders die Startseite, nicht sein, denn niemand scrollt gern durch endlos lange Seiten.
7356 Joomla Templates_NEU.indd 2457356 Joomla Templates_NEU.indd 245 05.10.2009 10:35:0205.10.2009 10:35:02
246 Kapitel 7: Prüfen und validieren
Bild 7.1: Das Browserfenster hat eine Aufl ösung von 1.024 x 714 Pixeln.
Bild 7.2: Der Inhalt des Fensters hat eine Aufl ösung von 1.009 x 619 Pixeln.
7356 Joomla Templates_NEU.indd 2467356 Joomla Templates_NEU.indd 246 05.10.2009 10:35:0205.10.2009 10:35:02
2477.1 Aufl ösung der Browser
Eines ist so gut wie sicher: Das Browserfenster ist bei einer Bildschirmaufl ösung von 1.024 x 786 Pixeln bei den meisten Besucher maximiert. User mit größeren Bildschirmen surfen hingegen kaum mit einem maximierten Browserfenster.
Will man eine Website in verschiedenen Browseraufl ösungen anzeigen lassen, geht das über die Seite
http://setmy.browsersize.com
ober verwenden Sie das Add-on »Firesizer « für den Firefox . Firesizer kann unter der Adresse
https://addons.mozilla.org/de/firefox/addon/5792
bezogen werden.
Bild 7.3: Über setmy.browsersize.com kann die Browsergröße verändert werden.
Bild 7.4: Mit Firesizer können aktuellen Aufl ösungen gespeichert werden.
7356 Joomla Templates_NEU.indd 2477356 Joomla Templates_NEU.indd 247 05.10.2009 10:35:0205.10.2009 10:35:02
248 Kapitel 7: Prüfen und validieren
7.2 W3C-Validator
Bevor es an die korrekte Darstellung des Templates geht, ist es wichtig, dass der Quelltext fehlerfrei ist. Nur so können wir eine Fehldarstellung des Templates durch falschen Code ausschließen. Ein Test mit dem Validator des World Wide Web Consortium schafft die gewünschte Abhilfe. Unter
http://validator.w3.org
kann man die URL hinterlegen, unter der der Quelltext geprüft werden soll.
Bild 7.5: Ist der Quelltext fehlerfrei, war der Test erfolgreich.
7356 Joomla Templates_NEU.indd 2487356 Joomla Templates_NEU.indd 248 05.10.2009 10:35:0305.10.2009 10:35:03
2497.2 W3C-Validator
Wichtig bei diesem Test ist es, dass die Indexdatei dem richtigen Dokumenttyp (Doctype ) zugeordnet ist. Findet der Validator Fehler, fällt der Test negativ aus, und das W3C gibt mit Angabe der Zeile, in der der Fehler auftrat, wertvolle Tipps zur Behebung.
Bild 7.6: Der Fehler in Zeile 50 wird genau beschrieben.
7356 Joomla Templates_NEU.indd 2497356 Joomla Templates_NEU.indd 249 05.10.2009 10:35:0305.10.2009 10:35:03
250 Kapitel 7: Prüfen und validieren
Die Fehlerbeschreibung liefert immer die dazugehörige Zeile, in der der Fehler auftrat. Als Beispielfehler haben wir dem div-Container header einen Rahmen verpasst. Der Vali-dator verrät, in welcher Zeile der Fehler auftrat und warum. Wenn Sie den Quelltext der Website öffnen, können Sie den Fehler aufspüren und nachschauen, welcher Teil des Index dafür verantwortlich ist. Der Fehler könnte in der Datei index.php direkt stehen, aber auch Module und Artikel können Fehler hervorrufen – letztendlich alles, was Quelltext erzeugt.
7.3 Darstellung in Browsern
Der wohl wichtigste Test eines Templates ist die Darstellung in allen gängigen Browsern. Eine Website, die für die meisten Browser optimiert ist, erreicht die meisten Besucher. Die wichtigsten Browser , in denen die Website korrekt ausschauen soll, sind:
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 2
Firefox 3
Chrome Safari 2
Safari 4
Opera
Wird das Template in diesen Browsern richtig dargestellt, wird es nahezu in allen Browsern korrekt angezeigt, denn viele Browserderivate setzen auf das Rendering der großen Brow-ser auf und nutzen die gleiche Engine, das heißt den gleichen Darstellungsmechanismus.
7.3.1 Browser Collection
Will man mehrere Internet Explorer nebeneinander laufen lassen, hilft einem die »Internet Explorer Collection « für Windows weiter. Die Software beinhaltet alle IEs bis zur letzten Version und kann unter folgender Adresse heruntergeladen werden:
http://finalbuilds.edskes.net/iecollection.htm
7356 Joomla Templates_NEU.indd 2507356 Joomla Templates_NEU.indd 250 05.10.2009 10:35:0305.10.2009 10:35:03
2517.3 Darstellung in Browsern
Bild 7.7: Die Internet Explorer Collection beinhaltet sämtliche Versionen.
Mehrere Firefox-Versionen lassen sich unter Windows installieren, wenn unterschiedliche Ordner bei der Installation ausgewählt werden. Unter Mac OS braucht man dafür nur den Namen der Applikation (i. d. R. Firefox.app) zu ändern, zum Beispiel in Firefox2.app.
Bild 7.8: Unter Windows kann man mehrere Firefox-Varianten installieren, wenn dazu unterschiedliche Verzeichnisse verwendet werden.
7356 Joomla Templates_NEU.indd 2517356 Joomla Templates_NEU.indd 251 05.10.2009 10:35:0405.10.2009 10:35:04
252 Kapitel 7: Prüfen und validieren
Chrome ist der neueste Browser und daher noch nicht weit verbreitet. Die Darstellung braucht daher nur in der aktuellen Version getestet zu werden.
http://www.google.de/chrome
Multi-Safari, also verschiedene Safari-Versionen für Mac OS, fi ndet man hier:
http://michelf.com/projects/multi-safari
Verschiedene Versionen von Opera nebeneinander zu installieren, ist von Haus aus kein Problem.
http://de.opera.com/download
7.3.2 Unterschiedliche Betriebssysteme
Idealerweise testet man auch unter den verschiedenen Betriebssystemen Windows , Mac OS und Linux . Hat man keine drei Rechner zur Hand, kann man auf Virtualisierungs-software zurückgreifen. Sun Microsystems stellt dafür kostenlos die Lösung VirtualBox zur Verfügung. Mithilfe dieser Software werden andere Betriebssysteme als Gastsysteme emuliert.
VirtualBox steht unter
http://www.virtualbox.org
für Windows, Mac OS und Linux als Download bereit.
7356 Joomla Templates_NEU.indd 2527356 Joomla Templates_NEU.indd 252 05.10.2009 10:35:0405.10.2009 10:35:04
2537.3 Darstellung in Browsern
Bild 7.9: Windows und Ubuntu als virtuelle Maschinen unter Mac OS.
Eine Alternative für Mac-User ist das kostenpfl ichtige Parallels Desktop , zu beziehen unter
http://www.parallels.com/de/products/desktop
7.3.3 Screenshots
Eine weitere Möglichkeit, das Template auf Darstellungsfehler zu prüfen, sind Screen-shots. Auf der Website
http://browsershots.org
kann man die URL, unter der das Template zu fi nden ist, angeben und unterschiedliche Browser von unterschiedlichen Betriebssystemen auswählen.
7356 Joomla Templates_NEU.indd 2537356 Joomla Templates_NEU.indd 253 05.10.2009 10:35:0405.10.2009 10:35:04
254 Kapitel 7: Prüfen und validieren
Bild 7.10: Übersichtlich stellt browsershots.org die Screenshots bereit.
Von der Website werden innerhalb von 30 Minuten Screenshots angefertigt, die sich online betrachten lassen. Ein guter zusätzlicher Test, wenn nicht alle Browsertypen für Tests zur Verfügung stehen.
7356 Joomla Templates_NEU.indd 2547356 Joomla Templates_NEU.indd 254 05.10.2009 10:35:0405.10.2009 10:35:04
2557.4 Ladezeit der Website
7.4 Ladezeit der Website
Um die Ladezeit einer Website zu testen, empfi ehlt sich der Dienst unter
http://analyze.websiteoptimization.com
Über diese Seite können Sie URLs, Quelltexte oder Dateien auf ihre Ladegeschwindigkeit hin untersuchen.
Bild 7.11: WebSiteOptimization.com hilft Ihnen bei der Prüfung der Ladezeit.
Neben einer allgemeinen Statistik der Website bekommen Sie auch die Dateien angezeigt, die am größten sind und die längste Ladezeit beanspruchen. Auf dieser Grundlage können Sie noch Optimierungen vornehmen.
7356 Joomla Templates_NEU.indd 2557356 Joomla Templates_NEU.indd 255 05.10.2009 10:35:0405.10.2009 10:35:04
256 Kapitel 7: Prüfen und validieren
Bild 7.12: Der Test auf die Ladezeit gibt Rückschlüsse auf die Dateigrößen.
Tipps: Versuchen Sie, Bilder im bestmöglichen Format mit geringer Größe abzu-speichern. Die Anzahl der Cascading Style Sheets sollte so gering wie möglich sein. Vielleicht kön-nen Sie welche zusammenfassen. Komprimieren Sie die Cascading Style Sheets und schreiben Sie die Attribute zu einem Element in eine Zeile, alphabetisch sortiert. Wenn das JavaScript-Framework Mootools nicht gebraucht wird, deaktivieren Sie es (siehe Referenzteil: »Template-Befehle«). Kommen aufgrund unterschiedlicher Erweiterungen mehrere JavaScript-Frameworks zum Einsatz, sollten Sie versuchen, alternative Extensions zu fi nden, die den gleichen Zweck erfüllen, aber dasselbe JavaScript-Framework verwenden. Vermeiden Sie den Einsatz umfangreicher Erweiterungen unter Joomla. Verwenden Sie stattdessen kleine Plug-ins, die den gleichen Zweck erfüllen.
Bleibt zum Schluss nur noch zu sagen, dass Sie für die Optimierung anfangs viel Zeit einplanen sollten. Doch je mehr Übung Sie bekommen, desto mehr Fehler vermeiden Sie von vornherein. Sie werden sehen, dass der Aufwand für die Optimierung immer geringer wird. Übung macht auch hier den Meister.
7356 Joomla Templates_NEU.indd 2567356 Joomla Templates_NEU.indd 256 05.10.2009 10:35:0505.10.2009 10:35:05
257
A Verzeichnisstruktur von Joomla
Wenn man Joomla installiert hat, fi ndet man eine Vielzahl von Ordnern und Dateien vor. Nachfolgend erhalten Sie eine kurze Erklärung der Ordner und Dateien des Joomla-Stammverzeichnisses.
Ordner-/Dateiname Bedeutungadministrator Der Ordner für die Administration. Er ist zu erreichen, indem Sie
der URL in der Browseradresszeile den Ausdruck /administrator anhängen, etwahttp://localhost/joomla/administrator.
cache Hier werden alle dynamisch generierten Seiten statisch abge-legt, sofern der Cache eingeschaltet ist.
CHANGELOG.php Eine Logdatei, in der die Änderungen an Joomla gegenüber den vorherigen Versionen festgehalten werden.
components Alle Komponenten, die für das Frontend gedacht sind, werden hier abgelegt. Sie fangen stets mit dem Präfi x com_ an.
configuration.php-dist
Die Blanko-Konfi gurationsdatei, die während der Installa-tionsroutine mit Ihren Angaben gefüllt und unter dem Namen configuration.php abgespeichert wird.
COPYRIGHT.php Ein Hinweis darauf, das Joomla unter der GNU General Public License veröffentlicht ist.
CREDITS.php Hier fi nden Sie eine Aufl istung aller beteiligten Personen, die an Joomla mitgeholfen haben.
htaccess.txt Eine Blanko-Datei für den Apache-Webserver. Wenn sie ein-gesetzt wird, wird sie in .htaccess umbenannt. Angaben in dieser Datei steuern u. a. den Zugriff auf die Domain.
images Der Ordner für die Bilder mit dem Unterordner stories, der als Standardverzeichnis für die Bilder der Beiträge reserviert ist.
includes In diesem Ordner fi nden Dateien ihren Platz, die für sämt liche Aufgaben unter Joomla eingebunden werden.
index.php Die Indexdatei von Joomla. Sie wird als Erstes aufgerufen, wenn ein Besucher Ihre Seite betritt.
7356 Joomla Templates_NEU.indd 2577356 Joomla Templates_NEU.indd 257 05.10.2009 10:35:0505.10.2009 10:35:05
258 Anhang A: Verzeichnisstruktur von Joomla
Ordner-/Dateiname Bedeutungindex2.php Die zweite Indexdatei ist für die Druckdarstellung der Seite
gedacht. Es werden nur Komponenten ohne Module und Style Sheets dargestellt.
INSTALL.php Hier fi nden Sie die Voraussetzungen für Joomla und die Installa-tionshinweise.
installation Für die Installation benötigte Dateien fi nden Sie in diesem Ordner. Am Ende der Installation werden Sie aufgefordert, ihn zu löschen. Das gehört zu den Sicherheitsmechanismen unter Joomla.
language Sprachdateien sämtlicher Sprachen fi nden hier ihren Platz.
libraries Joomla greift auf eine Vielzahl von Bibliotheken zurück, die in diesem Ordner zu fi nden sind.
LICENSE.php Die GNU General Public License, die während der Installa tion angezeigt wird.
LICENSES.php Weitere Lizenzen: BSD License, GNU Lesser General Public Licen-se, MIT License, PHP License.
logs Logdateien, die von Joomla generiert werden, sind hier abgelegt.
media In diesen Ordner können Sie Medien ablegen.
modules Der Ordner mit sämtlichen Modulen für das Frontend. Die Unter-ordner fangen alle mit dem Präfi x mod_ an.
plugins Plug-ins von Joomla werden hier abgelegt, das Präfi x lautet plg_.
robots.txt Diese Datei ist für die Suchmaschinen wichtig und beinhaltet alle Ordner, die diesen verwehrt bleiben sollen.
templates Für uns der wichtigste Ordner! Hier werden die vorinstallierten Standard-Templates abgelegt, und auch unser Template wird einen eigenen Ordner darin bekommen.
tmp Temporäre Dateien, also Dateien, die nur vorübergehend gebraucht werden, sind hier erhalten.
xmlrpc Joomla wird sehr gern als Blog-Plattform genutzt und hält dafür eine Schnittstelle bereit: das XML-RPC-Plug-in. XML-RPC steht für Extended Markup Language Remote Procedure Control. Darüber ist es möglich, Joomla extern mit Daten zu füttern.
Eine Besonderheit ist Ihnen vielleicht schon aufgefallen: In jedem Ordner und Unterord-ner existiert eine Datei namens index.html (außer im Stammverzeichnis und im Tem-plate-Ordner). Diese Datei ist notwendig, um Besuchern die Aufl istung eines Ordners zu verwehren, falls keine Indexdatei vorhanden ist. Die Aufl istung würde verraten, was sich alles in dem Ordner befi ndet. Diese Vorkehrung ist ein Sicherheitsmerkmal von Joomla.
7356 Joomla Templates_NEU.indd 2587356 Joomla Templates_NEU.indd 258 05.10.2009 10:35:0505.10.2009 10:35:05
259
B Template-Befehle
Kein direkter Zugriff auf eine Datei
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
JavaScript-Framework Mootools entfernen
<?php // Remove mootool sripts $user =& JFactory::getUser(); if ($user->get('guest') == 1 or $user->usertype == 'Registered') { $headerstuff = $this->getHeadData(); $headerstuff['scripts'] = array(); $this->setHeadData($headerstuff); }?>
Joomla-Header-Informationen laden
<jdoc:include type="head" />
Mit Cascading Style Sheet verlinken
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Einen übersetzbaren Text einfügen
<?php echo JText::_('Beispieltext'); ?>
Systemnachrichten anzeigen lassen
<jdoc:include type="message" />
7356 Joomla Templates_NEU.indd 2597356 Joomla Templates_NEU.indd 259 05.10.2009 10:35:0505.10.2009 10:35:05
260 Anhang B: Template-Befehle
Artikel und Komponenten anzeigen lassen
<jdoc:include type="component" />
Modulposition einbinden
<jdoc:include type="modules" name="menu" style="xhtml" />
Debug-Modus-Ausgabe
<jdoc:include type="modules" name="debug" />
Wenn ein Modul existiert, dann ...
<?php if ($this->countModules( 'right' )) : ?> ...<?php endif; ?>
Wenn ein Modul oder ein anderes existiert, dann ... ansonsten ...
<?php if ($this->countModules('user1') or $this->countModules('user2')) : ?> ...<?php else : ?> ...<?php endif; ?>
Wenn es sich um die Startseite handelt, dann ...
<?php if (JRequest::getVar('view') == 'frontpage') : ?> ...<?php endif; ?>
Stammverzeichnis
<?php $this->baseurl ?>
Ordnername des aktiven Templates
<?php echo $this->template ?>
Template-Parameter
<?php $this->params->get('ParameterName'); ?>
7356 Joomla Templates_NEU.indd 2607356 Joomla Templates_NEU.indd 260 05.10.2009 10:35:0505.10.2009 10:35:05
261Anhang B: Template-Befehle
Seitennamen
<?php $mainframe->getCfg('sitename'); ?>
Seitentitel
<?php $mainframe->getPageTitle(); ?>
Beschreibung
<?php echo $this->description ?>
Aktuelle Sprache
<?php echo $this->language ?>
Datum/Zeit
<?php $date = new JDate(time()); echo $date->toFormat(); ?>
Artikel-Parameter
<?php print_r ($this->params); ?>
Artikel-Eigenschaften
<?php print_r ($this->article); ?>
7356 Joomla Templates_NEU.indd 2617356 Joomla Templates_NEU.indd 261 05.10.2009 10:35:0505.10.2009 10:35:05
262
7356 Joomla Templates_NEU.indd 2627356 Joomla Templates_NEU.indd 262 05.10.2009 10:35:0505.10.2009 10:35:05
263
C Programme und WebsitesUm ein Joomla-Template zu entwickeln, brauchen Sie Programme, die Ihnen helfen, die unterschiedlichen Aufgaben zu bewältigen. Welche Software Sie dafür wählen, hängt dabei zum Teil vom Betriebssystem Ihres Rechners ab. Um Ihnen einen Überblick darüber zu geben, welche Programme für welches Betriebssystem geeignet sind, beschränken wir uns auf Windows, Mac OS und Ubuntu (Linux).
Hinweis: Die mit einem Eurozeichen (€) gekennzeichneten Programme sind kosten-pfl ichtig, und die mit einem Ausrufezeichen (!) sind Empfehlungen des Autors.
C.1 Editor
Für jedes Betriebssystem existiert eine Vielzahl von Editoren, deren Funktionalität von sehr einfach bis sehr komplex reicht. Wenn Sie schon länger als Webdesigner arbeiten, reicht ein einfacher Editor mit Syntaxhervorhebung (engl. Syntax Highlighting) aus, um einen Quelltext zu erstellen oder zu bearbeiten. Ein WYSIWYG-Editor (What You See Is What You Get) ist dagegen gerade für Anfänger sehr empfehlenswert. Änderungen, die Sie am Quelltext vornehmen, sehen in diesen Programmen sofort so aus, wie sie später im Web angezeigt werden.
Rubrik Betriebs-system
Name Hersteller-Website
Texteditor Windows Notepad++ http://notepad-plus.sourceforge.net
Notepad http://microsoft.com
Mac OS TextWrangler http://barebones.com
TextEdit http://apple.com
Coda (€) (!) http://panic.com
Ubuntu gedit http://gnome.org
KWrite http://kate-editor.org
7356 Joomla Templates_NEU.indd 2637356 Joomla Templates_NEU.indd 263 05.10.2009 10:35:0505.10.2009 10:35:05
264 Anhang C: Programme und Websites
Rubrik Betriebs-system
Name Hersteller-Website
WYSIWYG-Editor Windows Nvu http://nvu.com
Dreamweaver (€) http://adobe.com
Expression Web (€) http://microsoft.com
Mac OS Nvu http://nvu.com
Dreamweaver (€) http://adobe.com
Ubuntu Nvu http://nvu.com
Quanta http://quanta.kdewebdev.org
Bluefi sh http://bluefish.openoffice.nl
C.2 FTP-Client
Um Joomla zu installieren oder Dateien auf Ihren Webspace einzuspielen, brauchen Sie einen FTP-Client, sprich: ein Programm, mit dem Sie über das File Transfer Protocol Dateien auf einen Server hoch- und herunterladen können.
Rubrik Betriebs-system
Name Hersteller-Website
FTP-Client Windows WinSCP (!) http://winscp.net/de
FileZilla http://filezilla-project.org
Mac OS Cyperduck http://cyberduck.ch
FileZilla http://filezilla-project.org
Coda (€) (!) http://panic.com
Ubuntu FileZilla http://filezilla-project.org
C.3 Browser
Ein Browser ist ein Programm, das Websites anzeigen kann. Für Sie als Webdesigner ist es zurzeit Pfl icht, ein Joomla-Template für die am weitesten verbreiteten Browser zu opti-mieren. Idealerweise stehen Ihnen dazu eine Mac-, eine Windows- und eine Linux-Umge-bung zur Verfügung, doch auch mit dem Dienst BrowserShots (http://browsershots.org) können Sie die Darstellung der Seite für alle wesentlichen Plattformen prüfen.
7356 Joomla Templates_NEU.indd 2647356 Joomla Templates_NEU.indd 264 05.10.2009 10:35:0505.10.2009 10:35:05
265C.4 Firefox-Erweiterungen
Rubrik Betriebs-system
Name Hersteller-Website
Browser Windows Internet Explorer http://microsoft.com
Firefox (!) http://mozilla-europe.org/de
Internet Explorer Coll-ection (!)
http://finalbuilds.edskes.net/iecollection.htm
MultipleIE http://tredosoft.com
Opera http://de.opera.com
Chrome http://google.com/chrome
Safari http://apple.com
Mac OS Safari http://apple.com
Firefox (!) http://mozilla-europe.org/de
Mutiple Safari (!) http://michelf.com/projects/multi-safari
Opera http://de.opera.com
Camino http://caminobrowser.org
SeaMonkey http://seamonkey-project.org
Ubuntu Firefox (!) http://mozilla-europe.org/de
Konqueror http://konqueror.org
Opera http://de.opera.com
SeaMonkey http://seamonkey-project.org
Galeon http://sourceforge.net/projects/galeon
C.4 Firefox-Erweiterungen
Gerade aufgrund seiner zahlreichen mächtigen Erweiterungen und Add-ons ist der Firefox-Browser besonders gut für die Webentwicklung geeignet. Firefox ist für Mac OS, Windows und Ubuntu erhältlich. Die wichtigsten Add-ons können unter https://addons.mozilla.org/de/firefox bezogen werden und seien hier kurz aufgelistet.
7356 Joomla Templates_NEU.indd 2657356 Joomla Templates_NEU.indd 265 05.10.2009 10:35:0605.10.2009 10:35:06
266 Anhang C: Programme und Websites
Name Funktion
FireBug Hilft bei der Fehlersuche im HTML-Quelltext. Der Quellcode kann direkt editiert werden. Die Änderungen werden in einem eigenen Fenster kenntlich gemacht. Eine große Stärke ist zudem die Visu-alisierung von DIV-Containern.
Web Developer Bringt sehr viele Funktionen für die Webentwicklung mit. Man kann einzelne Elemente markieren, CSS-Eigenschaften auslesen, Validatoren starten, CSS, Grafi ken, JavaScript und Cookies abschalten und noch einiges mehr.
Firesizer Erlaubt es, das Browserfenster in vorgegebenen und einstellba-ren Ausmaßen (Breite x Höhe) zu vergrößern oder zu verkleinern.
Font Finder Wählt man einen bestimmten Text einer Website aus, so zeigt der Font Finder mit der rechten Maustaste den dazugehörigen CSS-Code.
ColorZilla Liest von jeder Stelle des Browsers die Farbwerte aus und zeigt sie hexadezimal oder in RGB-Form an.
iMacros Befreit den Benutzer davon, immer wieder die gleichen Web-seiten zu besuchen, Passwörter einzugeben und Formulare auszufüllen zu müssen. Mit iMacros kann eine Aufgabe einmal aufgezeichnet werden und wird per Knopfdruck automatisch ausgeführt.
FireFTP Ein FTP-Client als Erweiterung für Firefox.
C.5 Bildbearbeitung
Um ein Screendesign zu erstellen oder zu bearbeiten, brauchen Sie ein Bildbearbeitungs-programm. Der Patzhirsch ist hier ganz klar Photoshop, doch auch kostenlose Alternati-ven stehen zur Verfügung.
Rubrik Betriebs-system
Name Hersteller-Website
Bildbearbeitung Windows Photoshop (€) (!) http://adobe.com
Fireworks (€) http://adobe.com
GIMP http://gimp.org
ImageMagick http://www.imagemagick.org
7356 Joomla Templates_NEU.indd 2667356 Joomla Templates_NEU.indd 266 05.10.2009 10:35:0605.10.2009 10:35:06
267C.7 Werkzeuge
Rubrik Betriebs-system
Name Hersteller-Website
Mac OS Photoshop (€) (!) http://adobe.com
Fireworks (€) http://adobe.com
GIMP http://gimp.org
ImageMagick http://www.imagemagick.org
Ubuntu GIMP http://gimp.org
ImageMagick http://www.imagemagick.org
C.6 Emulatoren
Emulatoren ermöglichen den Betrieb unterschiedlicher Betriebssysteme auf einem Rech-ner. Wenn Ihnen kein Rechnerzoo mit unterschiedlichen Betriebssystemen zur Verfügung steht, ist der Griff zu einem Emulator eine empfehlenswerte Alternative.
Rubrik Betriebs-system
Name Hersteller-Website
Emulator Windows VMware Server http://vmware.com/de
Virtual PC http://microsoft.com
VirtualBox (!) http://virtualbox.org
Mac OS Parallels Desktop (€) (!)
http://parallels.com
VirtualBox http://virtualbox.org
Virtual PC http://microsoft.com
Ubuntu VirtualBox (!) http://virtualbox.org
VMware Server http://vmware.com/de
C.7 Werkzeuge
Die hier erwähnten Werkzeuge sind kleine Helfer bei der alltäglichen Arbeit des Web-designers. Oftmals sind sie schon in der Standardinstallation des Betriebssystems enthal-ten oder kostenlos im Netz zu fi nden.
7356 Joomla Templates_NEU.indd 2677356 Joomla Templates_NEU.indd 267 05.10.2009 10:35:0605.10.2009 10:35:06
268 Anhang C: Programme und Websites
Werkzeug Betriebs-system
Name Hersteller-Website
Rechner Windows Rechner http://microsoft.com
Mac OS Rechner http://apple.com
Ubuntu Taschenrechner http://ubuntu.com
Lineal Windows Caliper (benötigt Adobe AIR)
http://adobe.com
Mac OS Free Ruler http://www.pascal.com/software/freeruler
Caliper (benötigt Adobe AIR)
http://adobe.com
Ubuntu Caliper (benötigt Adobe AIR)
http://adobe.com
Farbmesser Windows ColorPic http://www.iconico.com/colorpic
Mac OS DigitalColor http://apple.com
Ubuntu KColorChooser http://ubuntu.com
KColorEdit http://ubuntu.com
Bildschirmfoto Windows Cropper http://cropper.codeplex.com
Mac OS Bildschirmfoto http://apple.com
Ubuntu Bildschirmfoto auf-nehmen
http://ubuntu.com
C.8 Onlinetools
Nützliche Werkzeuge lassen sich auch im Internet fi nden. Einige gute Websites helfen dem Webentwickler bei seiner täglichen Arbeit.
Name Funktion URL
Browsershots Erstellt Bildschirmaufnah-men von Websites von unterschiedlichen Brow-sern auf unterschiedlichen Betriebssystemen.
http://browsershots.org
HTML-Ipsum Vorformatierte Blindtexte für Websites.
http://html-ipsum.com
7356 Joomla Templates_NEU.indd 2687356 Joomla Templates_NEU.indd 268 05.10.2009 10:35:0605.10.2009 10:35:06
269C.9 Nachschlagewerke
Name Funktion URL
Lorem Ipsum Blindtextgenerator. http://lipsum.com
Favicon-Gene-rator
Erstellt aus hochge-lade-nen Bilder Favicons.
http://www.degraeve.com/favicon
Google-Überset-zer
Übersetzt Texte oder Inter-netseiten.
http://translate.google.de
SpeedShare Stellt Dateien kostenlos ohne Größenlimit online zur Verfügung.
http://www.speedshare.org
tr.im Trimmt lange URLs. http://tr.im
compressor Komprimiert JavaScript und CSS.
http://compressor.ebiene.de
Free Passwort Generator
Erstellt sichere Passwörter. http://freepasswordgenerator.com
PXtoEM Konvertiert Größenan-gaben von Pixel zu EM (Prozente).
http://pxtoem.com
C.9 Nachschlagewerke
Ein unbedingtes Muss sind Nachschlagewerke. Wer hat schon alles im Kopf? Auf den fol-genden Seiten können Sie online nachschauen.
Name Funktion URL
SELFHTML Referenz, um HTML-Dateien selbst zu erstellen.
http://de.selfhtml.org
PHP Handbuch Handbuch zum Nachschla-gen der PHP-Syntax.
http://www.php.net/manual/de
CSS 4 you Eine deutsche Seite zur Syntax von Cascading Style Sheets.
http://www.css4you.de
MySQL-Referenz-handbuch
Das Referenzhandbuch für die Datenbank MySQL.
http://dev.mysql.com/doc/ref-man/5.1/de/
Webdeveloper's Handbook
Eine Liste zahlreicher Nachschlagewerke für Webentwickler.
http://www.alvit.de/handbook
HTML Entities Aufl istung einiger Sonder-zeichen in HTML.
http://www.html.su/entities.html
7356 Joomla Templates_NEU.indd 2697356 Joomla Templates_NEU.indd 269 05.10.2009 10:35:0605.10.2009 10:35:06
270 Anhang C: Programme und Websites
Name Funktion URL
Internet Explorer Hacks
Hacks für den Internet Explorer.
http://www.thestyleworks.de/tut-art/ie7.shtml
Webstandard Projekt
Eine Auswahl von CSS-Hacks.
http://standards.webmasterpro.de/index-article-CSS+Hacks.html
7356 Joomla Templates_NEU.indd 2707356 Joomla Templates_NEU.indd 270 05.10.2009 10:35:0605.10.2009 10:35:06
271
D Abkürzungen und Begriffe
Apache
Apache ist ein Webserver, der unter verschiedenen Betriebssystemen laufen kann. Er ermöglicht es, Joomla mittels der Programmiersprache PHP dynamisch zu betreiben.
Backend
Das Backend ist der Administrationsbereich von Joomla. Als Administrator haben Sie Joomla hier unter Kontrolle und können sämtliche Konfi gurationen vornehmen.
Browser
Der Browser ist die Software auf einem Rechner, um Webseiten im Internet zu betrachten.
Cache
Der Cache ist ein Zwischenspeicher, in dem Joomla einmal generierte Webseiten ablegt, die sich damit schneller anzeigen lassen, wenn sie ein zweites Mal oder öfter aufgerufen werden.
Changelog
In der Datei CHANGELOG.php werden die Veränderungen von Joomla festgehalten. Zu jedem Update fi ndet man hier den Text der Änderungen.
Client
Der Client (engl. Kunde) nimmt Verbindung zum Server auf, um die Dienste, die der Server zur Verfügung stellt, in Anspruch zu nehmen. Ein möglicher Client ist zum Beispiel der Browser.
CMS
Die Kurzschreibweise von Content Management System lautet CMS. Der Begriff kommt aus dem Englischen und heißt grob übersetzt Inhaltsverwaltungssystem. Mit einem CMS, in unserem Fall Joomla, bereitet man Inhalte zu einem bestimmten Zweck auf.
7356 Joomla Templates_NEU.indd 2717356 Joomla Templates_NEU.indd 271 05.10.2009 10:35:0605.10.2009 10:35:06
272 Anhang D: Abkürzungen und Begriffe
Content
Inhalt heißt auf Englisch Content. Joomla ist ein CMS, das den Inhalt vom Layout trennt. Artikel, Erweiterungen und Module bilden den Hauptteil des Contents.
Core
Der Kern (engl. core) von Joomla sind neben der Datenbank die systemeigenen Dateien. Verändert man diese Dateien, spricht man von einem Core-Hack. Unter Umständen geht infolge eines solchen Hacks die Update-Fähigkeit von Joomla verloren.
CSS
Die Abkürzung für Cascading Style Sheet lautet CSS. Im CSS wird festgelegt, wie ein bestimmtes HTML-Element dargestellt wird. Ganz grob könnte man sagen: Mit HTML wird festgelegt, dass ein Element vorkommt, mit CSS, wie und wo es vorkommt.
Framework
Ein Framework stellt den Rahmen zur Programmierung bereit. Es ist selbst noch kein Programm, doch können damit sehr schnell und einfach Programme geschrieben werden. Der Programmierer kann dabei auf die im Framework hinterlegten Funktionen zurück-greifen. Ein gutes Beispiel ist das JavaScript-Framework jQuery.
Frontend
Das Frontend ist der Bereich einer Website, der öffentlich zugänglich ist. Hier hat der Nutzer die Möglichkeit, Informationen zu fi nden und mit der Website zu interagieren (etwa indem er ein Buch oder eine CD bestellt, eine Reise bucht oder Ähnliches).
FTP
Das FTP, ausgeschrieben File Transfer Protocol, dient der Datenübertragung zwischen einem Server und einem Client. Per FTP ist es auch möglich, Dateien zu löschen, zu erstel-len, zu kopieren oder umzubenennen.
GNU/GPL
Die General Public License ist die Lizenz, unter der Joomla veröffentlicht ist. Vereinfacht ausgedrückt, besagt sie, dass jede Änderung am Quellcode veröffentlicht werden muss.
HTML
Die Hypertext Markup Language, abgekürzt HTML, ist eine Auszeichnungssprache, mit deren Hilfe man Dokumente strukturell für das Internet aufbereitet. Inhalte der Doku-mente können unter anderem Texte, Links, Bilder, Tabellen und Listen sein. Daneben fi nden auch Metatags ihren Platz.
7356 Joomla Templates_NEU.indd 2727356 Joomla Templates_NEU.indd 272 05.10.2009 10:35:0605.10.2009 10:35:06
273Anhang D: Abkürzungen und Begriffe
HTTP
Das Hypertext Transfer Protocol – kurz: HTTP – dient wie FTP der Datenübertragung zwischen Server und Client, speziell aber um Webseiten per Browser darzustellen.
JavaScript
Die funktionale Skriptsprache JavaScript wird eingesetzt, um auf HTML- und XML-Syntax zuzugreifen. Sie wird in den meisten Browsern angewendet.
Joomla
Joomla ist ein CMS, um Internetauftritte zu realisieren. Es ist in der Programmierspra-che PHP geschrieben und läuft unter einer MySQL-Datenbank. Joomla funktioniert als redaktionelles Onlinesystem ausschließlich auf einem Webserver und ist unterteilt in ein Frontend und ein Backend.
Localhost
Der lokale Host des Webservers (siehe Apache) heißt localhost und ist unter der IP-Adresse 127.0.0.1 erreichbar.
Metatag
Ein Metatag ist ein HTML-Element mit Metadaten für die Suchmaschine. Metatags ste-hen im Kopfbereich des Dokuments und sind für den Besucher der Seite nicht sichtbar.
MVC
Model View Controller, abgekürzt MVC, bezeichnet ein Gestaltungsmodell für die Architek tur einer Software. Nach dem Prinzip der Trennung von Datenmodell (Model), Präsentation (View) und Steuerung (Controller) ist Joomla aufgebaut.
MySQL
Die Datenbank für die Datenverwaltung unter Joomla heißt MySQL. Das Kürzel SQL steht für die Datenbankabfragesprache Structured Query Language. Diese dient der dyna-mischen Abfrage der Datenbank unter Joomla.
PHP
Die Abkürzung PHP steht für Hypertext Preprocessor (ursprünglich Personal Homepage Tools) und ist die Programmiersprache, in der Joomla geschrieben ist.
phpMyAdmin
Die Software phpMyAdmin ist geschrieben in PHP und dient dazu, MySQL-Datenbanken zu verwalten. Per Browser kann so die Joomla-Datenbank mittels WYSIWYG adminis-triert werden. Es sind keine SQL-Kenntnisse dafür nötig.
7356 Joomla Templates_NEU.indd 2737356 Joomla Templates_NEU.indd 273 05.10.2009 10:35:0605.10.2009 10:35:06
274 Anhang D: Abkürzungen und Begriffe
Screendesign
Ein Screendesign ist das statische Layout. Es ist in aller Regel der Entwurf eines Web-designs, in dem sich die spätere Funktionalität einer Website abzeichnet.
SEO
Der englische Begriff für Suchmaschinenoptimierung lautet Search Engine Optimization, kurz SEO. Zum Beispiel sind Quelltext, Seitenstrukturen und Metatags wichtige Bestand-teile der Optimierung einer Website für Suchmaschinen.
Server
Der Server (engl. Diener) ist ein Rechner (Hardware), auf dem bestimmte Programme (Soft-ware) laufen. Diese Programme werden im Netzwerk dem Client zur Verfügung gestellt.
Template
Ein Template ist das Webdesign eines CMS. Unter Joomla wird es mit XML, Parametern und Modulpositionen um zusätzliche Funktionalitäten erweitert.
Webdesign
Die Umsetzung des Screendesigns in HTML, CSS, JavaScript und Grafi ken ist das Web-design. Es umfasst den Aufbau, die Gestaltung und die Benutzerführung einer Website.
Webseite
Die Webseite ist eine einzelne Seite einer Website. In Joomla wird sie dynamisch mit jedem Aufruf erzeugt und kann im Cache abgelegt werden.
Website
Die Website ist das Projekt im Internet als Ganzes. Ein kompletter Internetauftritt wird als Website betrachete.
W3C
Das World Wide Web Consortium – kurz W3C – ist das Gremium, das den Standard für die Techniken im Internet festlegt, wie etwa HTML, XML und CSS.
WYSIWYG
Die Abkürzung WYSIWYG heißt ausgeschrieben »What You See Is What You Get«. Aus dem Englischen übersetzt heißt es: »Das, was Sie sehen, ist das, was Sie bekommen.« So, wie Sie es bearbeiten, wird es hinterher auch angezeigt.
XML
Die Extensible Markup Language, abgekürzt XML, ist eine erweiterbare Auszeichnungs-sprache und wird speziell als Schnittstelle verwendet, um Daten auszutauschen.
7356 Joomla Templates_NEU.indd 2747356 Joomla Templates_NEU.indd 274 05.10.2009 10:35:0605.10.2009 10:35:06
275Anhang D: Abkürzungen und Begriffe
XML-RPC
Die Abkürzung für Extended Markup Language Remote Procedure Call. XML-RPC ist eine Defi nition zum Methodenaufruf unterschiedlicher Systeme. Damit wird es möglich, Artikel auf einem lokalen Rechner mit einem Programm zu verfassen und über diese Schnittstelle in Joomla online zu veröffentlichen.
7356 Joomla Templates_NEU.indd 2757356 Joomla Templates_NEU.indd 275 05.10.2009 10:35:0605.10.2009 10:35:06
276
7356 Joomla Templates_NEU.indd 2767356 Joomla Templates_NEU.indd 276 05.10.2009 10:35:0605.10.2009 10:35:06
277
Symbole
!important .................................................. 61_JEXEC ....................................................... 70
A
Abgerundetes-Rechteck-Werkzeug 172, 175Alphaeffekt ............................................... 168Apache ........................................................ 19Attribut-Selektor ....................................... 61Aufl ösung, Screendesign ....................... 245Auswahl erstellen ..................................... 173Auswahl umkehren .................................. 174
B
Backend ................45, 97, 108, 109, 110, 155, .......................189, 190, 193, 196, 219, 220, ............................... 230, 235, 237, 239, 242
Bandbreite .................................................. 58BEEZ .......................97, 98, 99, 100, 103, 104,
........................105, 106, 107, 108, 109, 111Betriebssysteme ....................................... 252Bildbearbeitungsprogramm ................... 114Bilder .................................................. 65, 156
Content .......................................167, 178Content-Hintergrund........................ 178Einsatzgebiete ...................................... 68exportieren ......................................... 158Favicon ............................................... 188Footer ................................................. 181Footer-Hintergrund .......................... 181Grafi kformate ...................................... 65Größe ................................................... 66Hintergrund ....................................... 157
Layoutbilder ....................................... 182Menü ...........................................159, 164Menühintergrund .............................. 165Slices ................................................... 156Slideshow-Bilder ................................ 171Slideshow-Hintergrund .................... 169Slideshow Maske .........................171, 177Slideshow Rahmen ............................ 171Slideshow Thumbnails ...................... 171speichern ............................................ 157Teilbereiche ........................................ 156Template-Vorschau ............................ 188Transparenz .......................................... 66vorladen ............................................. 159
Bilderbearbeitung .................................... 266Bildschirmaufl ösung ............................... 245Blanko-Template ........47, 155, 182, 187, 205
css ......................................................... 50Download ............................................ 47editor.css ............................................... 52favicon.ico ............................................ 62ieonly.css .............................................. 52iepngfi x.htc .......................................... 67images................................................... 65index.html ............................................ 68index.php ............................................. 68offl ine.php ............................................ 81Overrides .............................................. 63Parameter ............................................. 86params.ini ............................................ 86template.css .......................................... 50templateDetails.xml............................. 86
Blindtexte ................................. 142, 190, 192
Index
7356 Joomla Templates_NEU.indd 2777356 Joomla Templates_NEU.indd 277 05.10.2009 10:35:0605.10.2009 10:35:06
278 Index
designertoolbox.com ..................140, 191Impressum ......................................... 192Kontakt ............................................... 192lipsum.com .................................140, 191Massage .............................................. 192schreiben ............................................ 191Solarium ............................................. 192Weitere Angebote ............................... 192Wir über uns ...................................... 192
breadcrumbs .............................. 74, 100, 101Breitbandinternet .................................... 245Browser ..................................................... 264
Aufl ösung ........................................... 245Darstellung ..................................245, 250die wichtigsten ................................... 250Internet Explorer ................................. 52Rendering ........................................... 250Statistik ............................................... 245
Browseraufl ösungensetmy.browsersize.com ...................... 247
Browser Collection .................................. 250browsershots.org ...................................... 253Browserweiche ..................................... 60, 72Buttons
active ...........................................159, 161hover ............................................159, 160normal ................................................ 159pressed .........................................159, 160
C
Camino ....................................................... 59Cascading Style Sheets .... 111, 217, 219, 256
templates.css .......................221, 235, 243chrome........................................................ 74
Eigene Ausgaben .................................. 79exhtml .................................................. 75franzis ................................................... 80horz ...................................................... 78modules.php ........................................ 79
none ...................................................... 75outline .................................................. 76rounded ................................................ 77slider ..................................................... 80table ...................................................... 77
Chrome .......59, 199, 213, 217, 218, 219, 243Browser .............................................. 250function .............................................. 218programmieren .................................. 217
Coda ........................................................... 54com_content ............................................ 154Content .....150, 152, 153, 167, 202, 210, 211,
....................................... 212, 213, 214, 226Artikel ................................................. 153Modul ................................................. 154Slideshow ........................................... 153Unterbereiche .................................... 153
Copyright .........................154, 155, 156, 215, ............................................... 216, 220, 239Parameter ........................................... 155
CSS ........................50, 72, 159, 168, 196, 209, ................211, 213, 214, 237, 238, 240, 241codieren .............................................. 219Dateigröße ........................................... 59editor.css ............................................... 52Floats .................................................. 225Gecko ................................................... 59Hacks .................................................... 60ieonly.css .............................................. 52Internet Explorer ................................. 59Kurzformen .......................................... 58Layout ................................................. 224link........................................................ 72Menüs ................................................. 230Namenskonvention ............................. 55Ordner .................................................. 48Reset ......................................53, 221, 222Schnipsel .............................................. 54Slideshow ........................................... 239
7356 Joomla Templates_NEU.indd 2787356 Joomla Templates_NEU.indd 278 05.10.2009 10:35:0605.10.2009 10:35:06
279Index
Snippets ................................................ 54Sofortkontakt ..................................... 237Struktur ................................................ 53Template-Bibliothek ............................ 54template.css .......................................... 50validieren .............................................. 59Webkit .................................................. 59Weitere Angebote ............................... 242Wiederholungen .................................. 58Zehn Praxistipps .................................. 53
custom chrome .......................................... 79
D
DatenbankErstellung ............................................. 34
Debug-Modus .......................................... 155Designvorlage, Begutachtung ................ 149Diplay Errors .............................................. 36div-Box ......202, 209, 210, 211, 212, 213, 229Doctype .............................................. 70, 249
frameset ................................................ 71HTML 4.01 .......................................... 70strict ..................................................... 71transitional ........................................... 71XHTML 1.0 .......................................... 71XHTML 1.1 .......................................... 71
Dokumenttyp ............................................ 70HTML 4.01 .......................................... 70XHTML 1.0 .......................................... 71XHTML 1.1 .......................................... 71
Drei-Spalten-Layout .................................. 55
E
Ebenenmaske hinzufügen ............... 174, 175Editor, editor.css ...................................... 52editor.css ..................................................... 52Editoren .................................................... 263Emulatoren .............................................. 267erweiterte Füllmethode, Deckkraft ....... 175
F
Farbüberlagerung ............................ 160, 161Favicon ......................................... 48, 62, 188
Generatoren ......................................... 62Maße..................................................... 62
favicon.ico .................................................. 72Fehlersuche ........................................ 59, 155Firebug...........................98, 99, 100, 101, 105
Website untersuchen ........................... 99Firefox ....................................59, 98, 219, 247
Firebug ............................................... 219Firefox 2 .................................................... 250Firefox 3 .................................................... 250Firefoxerweiterungen .............................. 265Firesizer .................................................... 247Flock ........................................................... 59Font ........................................................... 114Footer ...............152, 154, 181, 182, 197, 210,
........214, 215, 217, 226, 228, 235, 237, 239Copyright ....................................154, 215Hintergrundbild ................................ 181Impressum ..................................154, 215Menü .................................................. 154Navigation .......................................... 215Partner .........................................154, 215Quelltext ............................................. 214Sofortkontakt ..............................154, 215
Frontend .......................45, 98, 110, 155, 190, ....................................... 195, 197, 199, 220
FTP-Clients .............................................. 264Für Web und Geräte speichern ... ... 157, 164
G
Gecko .......................................................... 59Camino ................................................ 59Firefox .................................................. 59Flock ..................................................... 59Mozilla ................................................. 59Netscape ............................................... 59
7356 Joomla Templates_NEU.indd 2797356 Joomla Templates_NEU.indd 279 05.10.2009 10:35:0605.10.2009 10:35:06
280 Index
Gestaltung .................................................. 13gif .......................................................... 65, 66GNU General Public License .................... 19GNU Public License .................................. 40Grafi ken ...................................................... 65
Einsatzgebiete ...................................... 68Formate ................................................ 65Größe ................................................... 66Transparenz .......................................... 66
Grafi kformategif .......................................................... 65jpg ......................................................... 65png ........................................................ 65
H
Hacks .........................................52, 59, 60, 72Attribut-Selektor ................................. 61Beispiel ................................................. 52div-Box ................................................. 59ieonly.css .............................................. 52!important ............................................ 61Internet Explorer ................................. 60Kind-Selektor ....................................... 61Stern-HTML-Hack .........................60, 61SternPlus-HTML-Hack ..................60, 61Tan-Hack .............................................. 62vermeiden ............................................ 59
HauptmenüAlias .................................................... 154Einträge sortieren .............................. 194itemid ..........................................194, 196Quelltext ............................................. 195
Hauptmenü (footer)Quelltext ............................................. 197
Header .......152, 195, 210, 211, 226, 231, 232Menü .................................................. 152
Header-Informationen .............................. 71HTML ................................................... 50, 69
body ...................................................... 71
head ...................................................... 71Ordner .................................................. 48
HTML 4.01 ................................................ 70
I
ieonly.css ..................................................... 52iepngfi x.htc................................................. 67images ......................................................... 65
Ordner .................................................. 48Impressum, Quelltext ............................ 198Index ................................... 68, 205, 206, 217
Anker .................................................. 209component ........................................... 74debug .................................................. 217div-Box ............................................... 209Footer ................................................. 214head .................................................... 208Header-Informationen ........................ 71if...................................................213, 214if else................................................... 214index.html ............................................ 68index.php ............................................. 69Inhalt und Struktur ............................. 73JavaScript ......................................81, 206jdoc ....................................................... 73jQuery .................................................. 81Kontrollstruktur .................213, 214, 215message ................................................ 74module ................................................. 74modules ................................................ 80Mootools .............................................. 81Quelltext ............................................. 205Sprache ................................................. 71switch ................................................. 215Zugriffsschutz ...................................... 69
index.html ...............................48, 49, 68, 258index.php ..........................48, 68, 71, 90, 155Installationsroutine ................................. 182
templateDetails.xml............................. 49
7356 Joomla Templates_NEU.indd 2807356 Joomla Templates_NEU.indd 280 05.10.2009 10:35:0605.10.2009 10:35:06
281Index
Internet Explorer .................59, 60, 168, 177, ............................... 211, 213, 223, 227, 233ieonly.css .............................................. 52PNG-Fix ............................................... 67
Internet Explorer 6 .....52, 104, 168, 177, 250quirks-Mode ........................................ 70
Internet Explorer 7 .................................. 250Internet Explorer 8 .................................. 250Internet Explorer Collection ................... 250
J
JavaScript .............................................. 72, 81jQuery .................................................. 81Mootools .............................................. 81Ordner .................................................. 48
jdoc .......................72, 73, 107, 108, 199, 206, ....................................... 211, 212, 213, 217component ........................................... 74message ................................................ 74module ................................................. 74modules ................................................ 80
JoomlaBackend ...........................................14, 45Beispielinhalte ...................................... 97Beiträge .............................................. 191confi guration.php ................................ 40Frontend ..........................................14, 45FTP-Konfi guration .............................. 42Hauptkonfi guration ............................ 44Installation ........................................... 37kein Editor ......................................... 190Konfi guration .................................... 190Konfi guration der Datenbank ............. 41Site-Einstellungen .............................. 190
Joomla-Framework ................................... 90jpg ......................................................... 65, 66jQuery ......................................................... 81
K
Kind-Selektor ............................................. 61Komponente, Artikel ............................. 154Kontur ...................................................... 175
L
Ladezeit ............................................ 245, 255Layout ......................................................... 13Linux ......................................................... 252Logo
Claim .................................................. 136logoinstant.com ................................. 113WellPanda .......................................... 113
Logo Instant ............................................. 113Lorem Ipsum ................................... 140, 191
designertoolbox.com ..................140, 191lipsum.com .................................140, 191
M
Mac, Schriftensammlung ...................... 114Mac OS ..................................................... 252Mac (OS X)
lokaler Webserver mit XAMPP ........... 27Menüs ............................................... 190, 193
anlegen ............................................... 193Hauptmenü ........................................ 193Hauptmenü (footer) ......................... 193Impressum ......................................... 193Partner ................................................ 193
Menütyp, Layout-Beitrag (Joomla!-Standard) ...........................193
Metainformationen ................................... 72Model-View-Controller ............................ 63
View ...................................................... 63Module .....190, 200, 211, 212, 214, 219, 220,
................221, 235, 236, 238, 239, 240, 243chrome ................................................. 74
7356 Joomla Templates_NEU.indd 2817356 Joomla Templates_NEU.indd 281 05.10.2009 10:35:0605.10.2009 10:35:06
282 Index
deaktivieren........................................ 219modules.php .............................................. 79Module verwalten
Einstellungen ..................................... 195Hauptmenü ........................................ 195Hauptmenü (footer) ......................... 196Partner ................................................ 198Slideshow ........................................... 200Sofortkontakt ..................................... 203Weitere Angebote ............................... 202
Modulpositionen ..... 107, 108, 110, 154, 190cmodul ............................................... 154debug .................................................. 155footleft ................................................ 154footright ............................................. 155impress ............................................... 154menu .................................................. 154show ................................................... 154
Mootools .................................... 81, 185, 256noobslide ............................................ 185
Mozilla ........................................................ 59MVC ........................................................... 63
Views .................................................... 63MySQL ....................................................... 19
Datenbank erstellen ............................. 34
N
Nachschlagewerke ................................... 269Namensänderung ............................ 186, 187Navigationspfad ............................... 100, 102negativer Außenabstand .......................... 109Netscape ..................................................... 59
O
Offl ine ......................................................... 81Login .................................................... 85
offl ine.php .......................................48, 81, 83Offl ineseite, offl ine.php ........................... 48Onlinetools .............................................. 268
Open SourceXAMPP ................................................ 19
Opera ........................................................ 250Optimierung ............................................ 256
Dateigröße ........................................... 59Fehlersuche .......................................... 59Ladezeit ...................................65, 66, 245Quelltext ............................................. 248Screenshots ........................................ 253
Overrides ...................................... 63, 97, 183com_content ........................................ 63Download .......................................... 183Matching .............................................. 63MVC ..................................................... 63Views .................................................... 63
P
Parallels Desktop ..................................... 253Parameter ...................86, 154, 155, 156, 206,
....................................... 208, 215, 216, 218Abfrage ............................................... 216abfragen.............................................. 216Copyright ........................................... 155default .................................................. 88Defi nition ............................................. 87description ........................................... 88Einstellungen ....................................... 90Einstellungen speichern ...................... 94Einstellungen verwenden .................... 95fi lelist .................................................... 92folderlist ............................................... 93label ...................................................... 88list ..................................................90, 156name ..................................................... 88params .................................................. 88params.ini ............................................ 48radio ..................................................... 91spacer.............................................94, 156Standardtypen ..................................... 90
7356 Joomla Templates_NEU.indd 2827356 Joomla Templates_NEU.indd 282 05.10.2009 10:35:0605.10.2009 10:35:06
283Index
templateDetails.xml........................49, 86text .................................................91, 156type ....................................................... 88
paramsname ..................................................... 88type ....................................................... 88
params.ini .................................48, 86, 90, 94Inhalt .................................................... 95
Partner, Quelltext .................................. 199Perl .............................................................. 19Perspective Sans ....................................... 114Photoshop ........................................ 113, 151
Abgerundetes Rechteck-Werkzeug ..... 129, 132, 138, 144, 172, 175aktueller Pfad ..................................... 139Auswahl erneut auswählen ................ 174Auswahl erstellen ............................... 173Auswahl umkehren ............................ 174Beleuchtungseffekte ........................... 125Deckkraft.....................................130, 146Ebenenmaske hinzufügen ..........174, 175Ebenenstil ....................120, 122, 130, 133Farbton/Sättigung.............................. 127Farbüberlagerung .......................160, 161Füllwerkzeug ...................................... 119Für Web und Geräte speichern ... ..............................157, 164Gaußscher Weichzeichner ................. 145Kontur .........................................131, 139Muster festlegen ................................. 116Neue Füll- oder Einstellungsebene erstellen ............ 127Ordner .................................................. 49Perspektivisch verzerren .................... 144Pfade ................................................... 139Rechteck-Werkzeug ........................... 120Schein nach außen ............................. 161Schein nach innen ..............120, 122, 130
Schlagschatten.................................... 160Schrift ..........................................135, 137Skalieren ............................................. 135Slice-Optionen .... 166, 169, 171, 177, 179Slice-Optionen bearbeiten ... ............ 164Slices ....................................156, 170, 171Slice-Werkzeug ... 163, 169, 176, 178, 181Spot .................................................... 126Text-Werkzeug ....................140, 142, 147Vektormaske ...................................... 139Verlaufsüberlagerung ........121, 122, 124, .............................................131, 133, 160Zeichen ........ 136, 137, 141, 142, 143, 147
PHP............................................19, 69, 90, 95date ..................................................... 216Display Errors ...................................... 36function .............................................. 218if...................................................107, 213if else................................................... 214php.ini .................................................. 36switch ................................................. 215
phpMyAdmin ............................................ 34Datenbank erstellen ............................. 34
png ........................................................ 65, 66PNG-Fix ............................................. 67, 168
iepngfi x.htc .......................................... 67transparent.gif ................................... 182
ProgrammeBildbearbeitung ................................. 266Browser .............................................. 264Editoren.............................................. 263Emulatoren ........................................ 267Firefox-Add-ons ................................ 265FTP-Clients ........................................ 264Nachschlagewerke .............................. 269Onlinetools ........................................ 268Werkzeuge .......................................... 267
7356 Joomla Templates_NEU.indd 2837356 Joomla Templates_NEU.indd 283 05.10.2009 10:35:0605.10.2009 10:35:06
284 Index
Q
Quelltext .................. 72, 154, 190, 201, 213, .............................................230, 248, 250prüfen ................................................. 248
R
Retro Pattern 02 ....................................... 115Rhuk Milkyway
Farbvariationen ................................... 86Parameter ............................................. 86
S
Safari ........................................................... 59Safari 2 ...................................................... 250Safari 4 ...................................................... 250Safari-Versionen ...................................... 252sans-serif .................................................. 112Schein nach außen ................................... 161Schrift
dafont.com ......................................... 114Perspective Sans ................................. 114
SchriftgrößePixel-EM-Tabelle ............................... 224
Schriftsatz ................................................. 111Screendesign .............................................. 13
3-D-Ansicht ....................................... 151Anleitung ........................................... 118Artikel ................................................. 153Aufl ösung ........................................... 245Begutachtung ..................................... 149Bildbearbeitungsprogramm ................ 13Bilder .................................................. 116Blindtexte ....................................140, 142Buttons ................ 136, 137, 138, 147, 159Content .......................150, 152, 153, 167Content-Modul.................................. 154Copyright ............................147, 150, 154Ebenen................................................ 151Einteilung ........................................... 152
Endergebnis ....................................... 148Footer .................. 147, 150, 152, 154, 181Header ................................................ 152Hintergrund ........................115, 151, 157Icons ................................................... 147Icon-Set .............................................. 118Impressum ..................................150, 154Inhalt ...........................................138, 142Kontakt ............................................... 147Layout ................................................... 13Logo ..................... 113, 134, 136, 150, 159Menü ...................................150, 151, 159Menü (footer) .................................... 154Menühintergrund .............................. 165Neues Dokument ............................... 118Schrift ................................................. 114Slideshow ....................................153, 168Sofortkontakt ..................................... 154Textur ..........................................115, 119Vorbereitungen .................................. 113x-Achse ............................................... 151y-Achse ............................................... 151z-Achse ............................................... 151
Screenshots ............................................... 253serif ........................................................... 112Sicherheit
index.html ............................................ 49Zugriffsschutz ...................................... 69
Slice-Optionen ......... 166, 169, 171, 177, 179Slice-Optionen bearbeiten ... .................. 164Slices ................................. 156, 167, 170, 171Slice-Werkzeug......... 163, 169, 176, 178, 181Slideshow..................154, 168, 169, 170, 171,
...............172, 174, 176, 185, 200, 202, 206, ........207, 208, 213, 227, 239, 240, 241, 242Bilder ...........................................168, 171Hintergrund ....................................... 169Javascript ............................................ 206Maske ..........................................171, 177
7356 Joomla Templates_NEU.indd 2847356 Joomla Templates_NEU.indd 284 05.10.2009 10:35:0605.10.2009 10:35:06
285Index
Mootools events ................................. 206noobslide ............................................ 185Quelltext ............................................. 201Rahmen .............................................. 171Thumbnails ........................................ 171
Snippets ...................................................... 54Sofortkontakt, Quelltext ........................ 204Sprachdateien .......................... 182, 185, 187
kopieren ............................................. 187verfassen ............................................. 188
Sprache ....................................................... 49Backend ................................................ 49Frontend ............................................... 49
Sprachvariablen ....................... 156, 186, 188Standardparametertypen
fi lelist .................................................... 92folderlist ............................................... 93list ......................................................... 90radio ..................................................... 91spacer.................................................... 94text ........................................................ 91
Standard-Templates ..................... 14, 17, 189Beez .................................................17, 18JA Purity ............................................... 17MilkyWay ............................................. 17
Stern-HTML-Hack .............................. 60, 61SternPlus-HTML-Hack ...................... 60, 61Stock-Fotos .............................................. 116
fotolia.com ......................................... 117istockphoto.com ................................ 117
Suchen & Ersetzen ................................... 102Syntax-Highlight ....................................... 51
T
Tan-Hack .................................................... 62Template
Begriffserklärung ................................. 13Defi nition ............................................. 14
Favicon ................................................. 48Grundaufgabe ...................................... 16
Template-AnpassungBilder austauschen ............................. 105Farben ändern...................................... 97neue Modulposition .......................... 107neue Typografi e ................................. 111
template.css ................................................ 50Aufteilung ............................................ 51Praxistipps ............................................ 53Quellcodeauszug .................................. 51
templateDetails.xml ................49, 81, 86, 94, ..........95, 154, 155, 182, 183, 186, 188, 215fi les ..................................................... 182install .................................................. 155language ............................................. 185params ...........................................88, 155positions ............................................. 155
Template-Entwicklung ............................ 149Bilder .................................................. 156Favicon ............................................... 188Installationsroutine ........................... 182manuelle Installation ......................... 187Modulpositionen ............................... 154Namensänderung .............................. 186Overrides ............................................ 183Parameter ........................................... 155Slideshow ........................................... 185Sprachdateien .............................182, 185Sprachvariablen ................................. 186Startseite ............................................. 150Vorschaubild ...................................... 188Vorüberlegung ................................... 149ZIP-Paket erstellen ............................. 187
Template-InformationentemplateDetails.xml............................. 49
TEMPLATENAME .......................... 186, 187template_thumbnail.png .......................... 49
7356 Joomla Templates_NEU.indd 2857356 Joomla Templates_NEU.indd 285 05.10.2009 10:35:0605.10.2009 10:35:06
286 Index
Testumgebung ...................................... 19, 97Einrichtung .......................................... 34Installation ........................................... 19Joomla-Installation .............................. 37Konfi guration ...................................... 36php.ini .................................................. 36
Textur ........................................................ 119BackgroundLabs.com ........................ 115
TransparenzAlphaeffekt ........................................... 67Deckkraft.............................................. 67
Typografi e ................................................ 111
U
Ubuntu (Linux)lokaler Webserver mit XAMPP ........... 31
UmlauteHTML-Entities .................................... 89Unicode ................................................ 89
Unicode ...................................................... 89Updates ....................................................... 97
V
Verlaufsüberlagerung .............................. 160Views........................................................... 63VirtualBox ................................................ 252Vorschaubild ...................................... 49, 188
W
W3C ............................................ 59, 245, 249W3C-Validator................................. 245, 248
validator.w3.org ................................. 248Webdesign .................................................. 13
WYSIWYG-Editoren ........................... 13Webkit ........................................................ 59
Chrome ................................................ 59
Safari .................................................... 59Webserver
lokal ...................................................... 19Website
Ladezeit .............................................. 245mit Inhalt ............................................. 15ohne Inhalt ........................................... 15Statistik ............................................... 255
Webstandard .............................................. 52Weitere Angebote
Quelltext ............................................. 203WellPanda ................................................ 136Werkzeuge ................................................ 267Windows .................................................. 252
lokaler Webserver mit XAMPP ........... 20World Wide Web Consortium ................ 245WYSIWYG-Editor
editor.css ............................................... 52
X
XAMPP ...................................................... 19Apache. Siehe ApacheBezugsquelle ........................................ 20für Mac (OS X) .................................... 27für Ubuntu (Linux) ............................. 31für Windows ........................................ 20Konfi guration ...................................... 36MySQL ................................................. 19Neustart ................................................ 37Perl........................................................ 19PHP ...................................................... 19php.ini .................................................. 36phpMyAdmin ...................................... 34Startseite ............................................... 34
XHTML 1.0 ................................................ 71XHTML 1.1 ................................................ 71
7356 Joomla Templates_NEU.indd 2867356 Joomla Templates_NEU.indd 286 05.10.2009 10:35:0705.10.2009 10:35:07
287Index
Z
Zehn CSS-Praxistipps ............................... 53CSS validieren ...................................... 59Dateigröße ........................................... 59Gecko, Webkit, Internet Explorer ....... 59Hacks vermeiden ................................. 59Keine Wiederholungen ........................ 58
Kurzformen .......................................... 58Namenskonvention ............................. 55Reset ..................................................... 53Struktur ................................................ 53Template-Bibliothek ............................ 54
Zugriffsschutz ............................................ 69JEXEC ................................................... 70
7356 Joomla Templates_NEU.indd 2877356 Joomla Templates_NEU.indd 287 05.10.2009 10:35:0705.10.2009 10:35:07
Überzeugende Vorlagen für das Open-Source-CMS
Komplett
in Farbe
> Joomla!-Screendesigns mit Photoshop entwerfen> Photoshop-Grafiken in ein Joomla!-Template verwandeln> Joomla!-Templates verstehen und anpassen> Inklusive Beispiel-Template
Alexander Schmidt
FRANZIS
Alexander Schmidt
Besuchen Sie unsere Website www.franzis.de
30,– EUR [D]
ISBN 978-3-7723-7356-5
Know-howist blau.
Joom
la!-T
empl
ates
Schm
idt
Das Praxisbuch für Webdesigner
FRA
NZI
S
Aus dem Inhalt:• Der Grundriss eines
Joomla!-Templates
• Cascading Style Sheets
• Bilder und Grafikformate
• Favicons
• Hacks für den Internet Explorer
• Parametertypen
• Bestehende Templates anpassen
• Ein Screendesign erstellen
• Inhaltselemente festlegen
• Menüs und Module anlegen
• Den Index programmieren
• Eine Slideshow einbauen
• Das Template installieren
• Fehlerbeseitigung
• Validierung
• Anpassung an verschiedeneBrowser
• Optimierung der Ladezeit
Eine Joomla!-Standardwebseite ist schnell erstellt. Aber wenn es an dieoptische 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 eigenesScreendesign entwickeln und in Joomla! umsetzen – passend für allegängigen Browsertypen.
� Joomla!-Templates verstehen und anpassenJoomla!-Templates sind einfach aufgebaut. Schon nach kurzer Zeit bekommen Sie einen Überblick, welche Datei welche Aufgabehat, 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 ScreendesignFü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 ScreendesignsUm 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-Zonenim Joomla!-Template zuordnen. Sie erfahren, wie Sie mit den CSS-Dateienumgehen 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 Schnippchenschlagen. Der Autor wartet mit Hacks und Tipps auf, die auch aufdem Internet Explorer eine tadellose Darstellung Ihrer Webseite garantieren.
Über den Autor:Alexander Schmidt istWeb-Entwickler undJoomla!-Coach. Er leitet und organisiertSeminare für die Nut-zung des populärenContent-Management-Systems. Schon seitmehreren Jahren realisiert SchmidtInternetauftritte, die auf Joomla! basieren. Darüber hinaus hat er sichdarauf spezialisiert, Designvorlagenin hochwertige Joomla!-Templatesumzusetzen, die den modernenWebstandards genügen. Schmidtlebt in Bad Nauheim.
Auf www.buch.cdDas komplette Beispiel-Template.
Joomla!-Templates Design und
Implementierung
Joomla!-Templates Design und
Implementierung
7356-5 U1+U4 07.10.2009 15:49 Uhr Seite 1