Download pdf - Joomla!-Templates: Design und Implementierung

Ü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


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


Alexander Schmidt

FRANZIS

Mit 325 Abbildungen


Implementierung


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


http://dnb.ddb.de

http://www.ideehoch2.de

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


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.


http://wellpanda.bloggerschmidt.de

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


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


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


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


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


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.


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.


151.1 Was ist ein Joomla-Template?

Bild 1.1: Website ohne Inhalt.

Bild 1.2: Website mit Inhalt.


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.


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.


18 Kapitel 2: Die Joomla-Testumgebung

Bild 1.4: Standard-Template Beez.

Bild 1.5: Standard-Template JA Purity.


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.



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«.


http://www.apachefriends.org/de/xampp.html

http://www


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.



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.



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.



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.



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.



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.


http://localhost


2.1.2 XAMPP für Mac (OS X)


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.


Ö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.


http://www


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.



Nach Beendigung können Sie das Fenster schließen.

Bild 2.16: Die Installation wurde erfolgreich abgeschlossen.


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.



Klicken Sie bei Apache und MySQL jeweils auf »Start«.



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.


http://localhost


2.1.3 XAMPP für Linux (Ubuntu)


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.


Ö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.


http://www.apachefriends


Bild 2.20: Das Terminal zeigt den Fortschritt der Installation.

XAMPP wird entpackt und somit installiert.


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.



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.



XAMPP wurde erfolgreich gestartet.



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«.


http://localhost

http://localhost

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.



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«.


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.


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«.


http://www.joomla.org

http://www.joomla.de


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«.




Bild 2.27: Über den Browser wird die Installation von Joomla gestartet.

Bild 2.28: Der Installationsassistent überprüft die Voraussetzungen für Joomla.



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.



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.



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.



Bild 2.32: Die Hauptkonfi guration von Joomla.



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



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:


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.





Bild 2.36: Das Backend von Joomla.


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.


http://www.buch.cd

http://www.bloggerschmidt.de/blankotemplate

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.


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.



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.



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



• 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



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.



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.


http://www.panic.com/coda


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.



Bild 3.11: Drei-Spalten-Layout mit guter Namenskonvention.

Bild 3.12: Drei-Spalten-Layout mit schlechter Namenskonvention.



Bild 3.13: Umpositioniertes Drei-Spalten-Layout mit schlechter Namenskonvention.

Bild 3.14: Umpositioniertes Drei-Spalten-Layout mit guter Namenskonvention.



• 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.



• 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


http://jigsaw.w3.org/css-validator


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:



Der Inhalt dieser Browserweiche wird von allen IEs ab Version 5.0 gelesen.



Hinweis: Dieser Fix funktioniert bei allen PNG-Bildern, die mit einem img-Tag (<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.


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' ); ?>



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">


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/html4/loose.dtd

http://www.w3.org/TR/html4/frameset.dtd

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" />


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

http://www.w3.org/1999/xhtml


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.



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.



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


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>



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".


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></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" />



Quelltext:

<table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Main Menu</th> </tr> <tr> <td> <ul class="menu"> <li></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>


793.8 Index

<th valign="top">Main Menu</th> </tr> <tr> <td> <ul class="menu"> <li></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.



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" />


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.



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.


833.10 Offl ine

Bild 3.46: Der Aufbau der Datei offline.php ist überschaubar.



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; ?>



http://www.w3.org/1999/xhtml

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.



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«.


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:



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.


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

ä ä ä

Ä Ä Ä

ö ö ö

Ö Ö Ö

ü ü ü

Ü Ü Ü

ß ß ß

& & &

» „ &bdquo;

« “ “

< < <

> > >

Bild 3.53: Im Backend lassen sich die Parameter komfortabel einstellen.



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.


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



• size (optional): Anzahl der Zeichen, die gespeichert werden

• default (optional, übersetzbar): der Standardtext


• 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.



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



• directory (zwingend): der Pfad zum Verzeichnis, das aufgelistet werden soll

• default (optional): der Standardordner


• 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


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



• directory (zwingend): der Pfad zum Verzeichnis, das aufgelistet werden soll

• default (optional): der Standardordner


• 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



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.


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; ?>




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.


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 .


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.


http://getfirebug.com


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.



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.



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.



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



Zwei zusätzliche Werte ändern sich in der Datei position.css:


#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.


#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.


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)



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.


1074.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.



<?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>



<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.



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.


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.



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.


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.


http://www.logoinstant.com

http://www.logoinstant.com/2009/01/wellpanda

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.


http://www.dafont.com

http://www.dafont.com/perspective-sans.font

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


http://www.backgroundlabs.com

http://www.backgroundlabs.com/detail/link-97.html


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.


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.


http://www.istockphoto.com

http://www.fotolia.com


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


http://wellpanda.bloggerschmidt.de/res/icons.jpg

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.



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 .


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.



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.


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.



Ü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.


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«.



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« .


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 ...« .



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.


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.



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.


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 .



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.


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.



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.


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:



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 .


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.



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 .


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).



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.


http://lipsum.com


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.



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 .


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.



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 .


1455.3 Anleitung

Bild 5.71: Verzerren Sie es nach rechts und links außen.

Bild 5.72: Verwenden Sie den Gaußschen Weichzeichner .



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.


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.



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.


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.


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.



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.



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



• 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



»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


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



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.



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.



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.



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.



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« .



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« .



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:



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.



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).



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.



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]).



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.



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.



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.



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.



Ü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.



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.



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.



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.



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.



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 .



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.



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).



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.



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.



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.



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.



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.


http://www.yootheme.com

http://www.yootheme.com/member-area/downloads/item/templates-15


Bild 6.59: Für die lange Liste von Dateien sind die Overrides verantwortlich.



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.


http://wellpanda.bloggerschmidt.de/res/noob


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.


1876.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.



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.



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


oder


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«.





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).


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


Erstellen Sie nun sechs neue Beiträge mit Blindtexten für

• Solarium

• Massage

• Wir über uns

• Kontakt

• Wellness-Angebote

• Impressum


http://lipsum.com



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



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.



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.



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">


http://www.franzis.de


<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.




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.



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.



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.






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.



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">



<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«.



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.



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.


mailto:[email protected]

2056.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>.



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'),



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.



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.



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.



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.



<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 .



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



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.



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 .



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.



<?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.


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:



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)


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.


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.



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.



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.



Bild 6.97: Der Reset : Die einzelnen Elemente werden zurückgesetzt.



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


http://pxtoem.com


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.



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.



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



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 {



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.



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.



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.



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



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



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 {



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.



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;



}.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.



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.



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.



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.



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;}



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.



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.



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.



Bild 6.112: Die pixelgenaue Umsetzung des Layouts in ein Joomla-Template.


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.


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.


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.


http://setmy.browsersize.com

https://addons.mozilla.org/de/firefox/addon/5792


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.


http://validator.w3.org

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.



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




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.



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.


http://www.google.de/chrome

http://michelf.com/projects/multi-safari

http://de.opera.com/download

http://www.virtualbox.org


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.


http://www.parallels.com/de/products/desktop



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.


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.


http://analyze.websiteoptimization.com


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.


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.



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.


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" />


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'); ?>


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); ?>


262


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


http://notepad-plus

http://microsoft.com

http://barebones.com

http://apple.com

http://panic.com

http://gnome.org

http://kate-editor.org

264 Anhang C: Programme und Websites



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.



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.


http://nvu.com

http://adobe.com


http://nvu.com

http://adobe.com

http://nvu.com

http://quanta.kdewebdev.org

http://bluefish.openoffice

http://winscp.net/de

http://filezilla-project.org

http://cyberduck.ch


http://panic.com




265C.4 Firefox-Erweiterungen



Browser Windows Internet Explorer http://microsoft.com

Firefox (!) http://mozilla-europe.org/de

Internet Explorer Coll-ection (!)


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


Camino http://caminobrowser.org

SeaMonkey http://seamonkey-project.org

Ubuntu Firefox (!) http://mozilla-europe.org/de

Konqueror http://konqueror.org


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.



http://mozilla-europe.org

http://finalbuilds.edskes

http://tredosoft.com

http://de.opera.com

http://google.com/chrome

http://apple.com

http://apple.com


http://michelf.com/projects

http://de.opera.com

http://caminobrowser.org

http://seamonkey-project


http://konqueror.org

http://de.opera.com

http://seamonkey-project

http://sourceforge.net

https://addons.mozilla.org/de/firefox

https://addons.mozilla.org/de/firefox


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.



Bildbearbeitung Windows Photoshop (€) (!) http://adobe.com

Fireworks (€) http://adobe.com

GIMP http://gimp.org

ImageMagick http://www.imagemagick.org


http://adobe.com

http://adobe.com

http://gimp.org

http://www.imagemagick.org

267C.7 Werkzeuge



Mac OS Photoshop (€) (!) http://adobe.com

Fireworks (€) http://adobe.com

GIMP http://gimp.org


Ubuntu GIMP http://gimp.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.



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.


http://adobe.com

http://adobe.com

http://gimp.org


http://gimp.org


http://vmware.com/de


http://virtualbox.org

http://parallels.com




http://vmware.com/de


Werkzeug Betriebs-system


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.


HTML-Ipsum Vorformatierte Blindtexte für Websites.

http://html-ipsum.com



http://apple.com

http://ubuntu.com

http://adobe.com

http://www.pascal.com

http://adobe.com

http://adobe.com

http://www.iconico.com

http://apple.com

http://ubuntu.com

http://ubuntu.com

http://cropper.codeplex

http://apple.com

http://ubuntu.com


http://html-ipsum.com

269C.9 Nachschlagewerke

Name Funktion URL

Lorem Ipsum Blindtextgenerator. http://lipsum.com

Favicon-Gene-rator

Erstellt aus hochge-lade-nen Bilder Favicons.


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


http://lipsum.com


http://translate.google.de

http://www.speedshare.org

http://tr.im

http://compressor.ebiene.de

http://freepasswordgenerator.com

http://pxtoem.com

http://de.selfhtml.org

http://www.php.net/manual/de

http://www.css4you.de

http://dev.mysql.com/doc/ref-man/5.1/de



http://www.alvit.de/handbook

http://www.html.su/entities.html


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





http://standards.webmasterpro

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.


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.


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.


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.


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.


276


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


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


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


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


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


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


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


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


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


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


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


Ü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.


Implementierung


Implementierung

7356-5 U1+U4 07.10.2009 15:49 Uhr Seite 1


http://www.buch.cd