Joomla!-Templates: Design und Implementierung

07.10.2009

15:49 Uhr

Seite 1

Alexander Schmidt

Joomla!Templates

Aus dem Inhalt: • Der Grundriss eines Joomla!-Templates

FRANZIS

7356-5 U1+U4

Know-how ist blau.

Alexander Schmidt

• Cascading Style Sheets

Design und Implementierung

• Bilder und Grafikformate • Favicons • Hacks für den Internet Explorer • Parametertypen

씰

Joomla!-Templates verstehen und anpassen Joomla!-Templates sind einfach aufgebaut. Schon nach kurzer Zeit bekommen Sie einen Überblick, welche Datei welche Aufgabe hat, und verstehen, wie die einzelnen Dateien zusammenhängen. Darüber hinaus erfahren Sie, wie Sie vorhandene Templates mit einfachsten Mitteln an Ihre Wünsche anpassen, indem Sie zum Beispiel Farben oder Schriftarten verändern oder Module umstellen. Von der Idee zum Screendesign Für ein komplett selbst gestaltetes Template benötigen Sie ein stimmiges Screendesign. Der Autor zeigt Schritt für Schritt, wie sich eine solche Vorlage mit Adobe Photoshop erstellen lässt. Er gibt Tipps für die Gestaltung von Menüs, Hintergründen und Gliederungselementen sowie zum Einbinden von Fotos und Logos.

씰

Umsetzung des Screendesigns Um das Screendesign in Joomla! umzusetzen, muss es in handliche Einzelteile zerlegt werden. Das Buch zeigt Ihnen, wie Sie die einzelnen Bestandteile aus dem Gesamtdesign herauslösen und den Layout-Zonen im Joomla!-Template zuordnen. Sie erfahren, wie Sie mit den CSS-Dateien umgehen müssen und wo Sie welche Daten ablegen. Darüber hinaus verrät Alexander Schmidt, wie Sie die Module des Templates aktivieren.

씰

Optimierung für alle Browsertypen Ältere Versionen des Internet Explorers sind dafür berüchtigt, Webseiten nicht standardkonform darzustellen. Dieses Buch zeigt, wie Sie den Eigenheiten des Microsoft-Browsers ein Schnippchen schlagen. Der Autor wartet mit Hacks und Tipps auf, die auch auf dem Internet Explorer eine tadellose Darstellung Ihrer Webseite garantieren.

• Ein Screendesign erstellen • Inhaltselemente festlegen • Menüs und Module anlegen • Den Index programmieren • Eine Slideshow einbauen • Das Template installieren • Fehlerbeseitigung • Validierung • Anpassung an verschiedene Browser • Optimierung der Ladezeit

Über den Autor: Alexander Schmidt ist Web-Entwickler und Joomla!-Coach. Er leitet und organisiert Seminare für die Nutzung des populären Content-ManagementSystems. Schon seit mehreren Jahren realisiert Schmidt Internetauftritte, die auf Joomla! basieren. Darüber hinaus hat er sich darauf spezialisiert, Designvorlagen in hochwertige Joomla!-Templates umzusetzen, die den modernen Webstandards genügen. Schmidt lebt in Bad Nauheim.

Auf www.buch.cd Das komplette Beispiel-Template.

30,– EUR [D] ISBN 978-3-7723-7356-5

Besuchen Sie unsere Website www.franzis.de

Joomla!-Templates

씰

• Bestehende Templates anpassen

t

et Kompl

e in Farb

Joomla!Templates

Design und Implementierung

> Joomla!-Screendesigns mit Photoshop entwerfen > Photoshop-Grafiken in ein Joomla!-Template verwandeln > Joomla!-Templates verstehen und anpassen > Inklusive Beispiel-Template

Schmidt

Eine Joomla!-Standardwebseite ist schnell erstellt. Aber wenn es an die optische Gestaltung mittels Templates geht, ist Know-how gefragt. Der erfahrene Webdesigner Alexander Schmidt erklärt, wie ein Joomla!Template aufgebaut ist, und zeigt, wie Sie mit Photoshop ein eigenes Screendesign entwickeln und in Joomla! umsetzen – passend für alle gängigen Browsertypen.

Überzeugende Vorlagen für das Open-Source-CMS Das Praxisbuch für Webdesigner

FRANZIS

7356-5 Titelei:6282-8 Titelei

07.10.2009

15:50 Uhr

Seite 1

Alexander Schmidt

Joomla!-Templates Design und Implementierung

7356-5 Titelei:6282-8 Titelei

07.10.2009

15:50 Uhr

Seite 2

7356-5 Titelei:6282-8 Titelei

07.10.2009

15:50 Uhr

Seite 3

Alexander Schmidt

Joomla!Templates

Design und Implementierung

Mit 325 Abbildungen

FRANZIS

7356-5 Titelei:6282-8 Titelei

07.10.2009

15:50 Uhr

Seite 4

Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2009 Franzis Verlag GmbH, 85586 Poing Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten 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 Produktbezeichnungen 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

5

Einleitung Dieses Buch richtet sich an alle, die ihre eigenen, individuellen Templates für Joomla gestalten wollen. Anfänger finden hier einen umfangreichen Einstieg in die Template-Entwicklung, und professionelle Webdesigner werden ihre Kenntnisse um eine ausgeklügelte Template-Engine erweitern können. Mithilfe dieses Buchs werden Sie ein selbst gestaltetes Screendesign in ein Joomla-Template umsetzen. Dabei lernen Sie neue Techniken kennen und werden erfahren, auf was es bei der Umsetzung ankommt. Die Fähigkeiten, die Sie beim Durcharbeiten des Buchs erwerben, werden Ihnen später nicht nur unter Joomla von Nutzen sein, sondern allgemein im Webdesign. In den einzelnen Kapiteln werden Ihnen die Abläufe exakt aufeinanderfolgend erklärt. In der Praxis zeigt sich jedoch, dass man Programme zum Arbeiten und Dateien zum Bearbeiten parallel geöffnet hat und zwischen ihnen hin und her switcht. So beschreibt dieses Buch – das durchaus als Super-Tutorial gesehen werden kann – nur eine mögliche Vorgehensweise. Wenn Sie dieses Werk einmal durchgearbeitet haben, werden Sie Ihre eigenen Abläufe finden und das Webdesign als Handwerk effizienter nutzen können. Der sichere Umgang mit Joomla und Photoshop wird vorausgesetzt. CSS und HTML sollten Ihnen vertraut sein; Basiswissen reicht aber vollkommen aus. Der Wille, Neues zu erlernen und ein Template mit PHP und Joomla-eigenen Anweisungen zu programmieren, wird dazu beitragen, dieses Buch erfolgreich einzusetzen. Steht Ihnen Photoshop nicht zur Verfügung, können Sie auch ein anderes Bildbearbeitungsprogramm wie zum Beispiel GIMP verwenden. Die Screendesign-Anleitung können Sie dann allerdings nicht eins zu eins verwenden. Um dieses Buch effektiv zu nutzen, brauchen Sie einen Zugang zu einem Joomla-System. Sie werden die Voraussetzungen für Joomla selbst schaffen, indem Sie eine Testumgebung installieren. Sie setzen dabei den Webserver Apache auf, der die Programmiersprache PHP unterstützt, und erstellen eine Datenbank mit MySQL.

7356 Joomla Templates_NEU.indd 5

05.10.2009 10:34:20

6

Einleitung

Haben Sie bis jetzt WYSIWYG-Editoren wie Dreamweaver oder Expression Web genutzt, werden Sie nun lernen, direkt im Quelltext zu arbeiten. Einfache Editoren wie Notepad oder TextEdit reichen dazu vollkommen aus. WYSIWYG-Editoren werden nicht ausdrücklich benötigt, können aber im Quelltextmodus eingesetzt werden.

Template-Entwicklung Wenn Sie zum ersten Mal ein Template entwickeln, ist es wichtig zu verstehen, dass es sich hierbei nicht »nur« um Webdesign handelt. Ein Template unter Joomla bestimmt das Aussehen einer Website. Vor der Template-Entwicklung kommt daher immer das Gestalten eines Screendesigns. In diesem Design zeichnet sich die spätere Funktionalität der Website ab. Erst wenn das Screendesign steht, kommt es zum Webdesign. Das Screendesign wird mit HTML, CSS und Bildern umgesetzt. Das Webdesign ist ein Bestandteil der TemplateEntwicklung, die mit PHP, JavaScript und Template-Befehlen weitergeführt wird. Ein weiterer Bestandteil der Template-Entwicklung ist die Parametrisierung. Mithilfe von Parametern können Sie über das Backend Einfluss auf das Template nehmen und es beispielsweise in ganz anderen Farben erstrahlen lassen. Durch eine einfache Auswahl können Sie ein anderes Cascading Style Sheet aussuchen, um die Website in einem neuen Licht zu präsentieren. Durch Overrides können Sie die Gestaltung von Joomla-Komponenten beeinflussen, indem Sie Dateien einfach »überschreiben«. Den Umgang mit Overrides zu erlernen, ist ebenfalls Bestandteil dieses Buchs. Wenn Sie Texte im Template verwenden wollen, können Sie sie mit Sprachdateien für die ganze Welt zur Verfügung stellen. Mit dem JavaScript-Framework Mootools, das Joomla von Haus aus mitbringt, müssen Sie weniger codieren und können schnell und effektiv das Fundament für animierte Effekte und Elemente legen. Schließlich werden Sie die Template-Engine von Joomla besser kennenlernen, die kaum Wünsche offen lässt. Schon bald werden Sie merken, dass die Entwicklung richtig Spaß machen kann.

Anmerkungen Der Referenzteil stellt Ihnen eine Auswahl nützlicher Programme und Webseiten vor, die Sie für die Template-Entwicklung gut gebrauchen können. Die gebräuchlichsten Template-Befehle finden Sie zum schnellen Nachschlagen ebenfalls dort. Ist Ihnen eine

7356 Joomla Templates_NEU.indd 6

05.10.2009 10:34:26

Einleitung

7

Abkürzung oder ein Begriff aus der Joomla-Welt unklar, schlagen Sie am Ende des Buchs einfach nach.

Dateien zum Buch Alle nötigen Dateien zum Buch gibt es unter http://wellpanda.bloggerschmidt.de

Dort finden Sie unter anderem das Blanko-Template, das Screendesign zum Buch als Photoshop-Datei, das hier im Buch erstellte Template in der fertigen Version sowie Bilder und Quelltexte. Eine Demoversion des Templates können Sie dort ebenfalls begutachten.

7356 Joomla Templates_NEU.indd 7

05.10.2009 10:34:26

8

Widmung Dieses Buch ist allen Webdesignern gewidmet, die auf der Suche nach einer guten Template-Engine sind. Meine Liebe und Dankbarkeit gilt meiner Verlobten Nina und meinem Sohn Justus, die mich uneingeschränkt unterstützten und einige Entbehrungen auf sich genommen haben. Alexander Konrad Johannes Schmidt Bad Nauheim, im September 2009

7356 Joomla Templates_NEU.indd 8

05.10.2009 10:34:26

9

Inhalt 1

Das Joomla-Template ................................................................................... 13 1.1 Was ist ein Joomla-Template? .......................................................... 13 1.2 Wieso werden Templates eingesetzt? ............................................... 16 1.3 Die Standard-Templates von Joomla ................................................. 17

2

Die Joomla-Testumgebung ........................................................................... 19 2.1 Lokaler Webserver mit XAMPP ......................................................... 19 2.1.1 XAMPP für Windows (XP, Vista Windows 7) ........................................20 2.1.2 XAMPP für Mac (OS X) .......................................................................27 2.1.3 XAMPP für Linux (Ubuntu) .................................................................31 2.2 Die Testumgebung einrichten .......................................................... 34 2.3 Die Installation von Joomla .............................................................. 37

3

Der Aufbau eines Templates ......................................................................... 47 3.1 Das Blanko-Template ....................................................................... 47 3.2 Sprachdateien ................................................................................. 49 3.3 Cascading Style Sheets ................................................................... 50 3.3.1 template.css .....................................................................................50 3.3.2 ieonly.css ..........................................................................................52 3.3.3 editor.css ..........................................................................................52 3.3.4 Zehn Praxistipps zum besseren Codieren mit CSS ..............................53 3.3.5 Hacks für den Internet Explorer..........................................................60 3.4 Fehlseite ......................................................................................... 62 3.5 Favicon ........................................................................................... 62 3.6 Overrides ........................................................................................ 63 3.7 Bilder .............................................................................................. 65 3.7.1 Grafikformate ....................................................................................65 3.7.2 Bildgröße ..........................................................................................66 3.7.3 Transparenz ......................................................................................66 3.7.4 Der PNG-Fix .......................................................................................67 3.7.5 Einsatzgebiete ..................................................................................68

7356 Joomla Templates_NEU.indd 9

05.10.2009 10:34:26

10

Inhalt

3.8 3.8.1 3.8.2 3.8.3 3.8.4 3.8.5 3.8.6 3.8.7 3.9 3.10 3.11 3.11.1 3.11.2 3.11.3 3.11.4

Index ............................................................................................... 68 Zugriffsschutz ...................................................................................69 Dokumenttyp (Doctype) ....................................................................70 Sprache ............................................................................................71 Header-Informationen .......................................................................71 Cascading Style Sheets .....................................................................72 Browserweiche..................................................................................72 Inhalt und Struktur ............................................................................73 JavaScript ........................................................................................ 81 Offline ............................................................................................. 81 Parameter ....................................................................................... 86 Definition eines Parameters ..............................................................87 Standardparametertypen ..................................................................90 Einstellungen speichern ....................................................................94 Einstellungen verwenden ..................................................................95

4

Templates anpassen .................................................................................... 97 4.1 Farben ändern ................................................................................. 97 4.2 Bilder austauschen ....................................................................... 105 4.3 Neue Modulposition ...................................................................... 107 4.4 Neue Typografie ............................................................................ 111

5

Erstellung eines Screendesigns ................................................................. 113 5.1 Vorüberlegung ............................................................................... 113 5.2 Vorbereitung ................................................................................ 113 5.2.1 Logo als Ausgangspunkt .................................................................113 5.2.2 Schrifttyp für das Logo ....................................................................114 5.2.3 Textur für den Hintergrund ...............................................................115 5.2.4 Bilder für den Inhalt ........................................................................116 5.3 Anleitung ...................................................................................... 118

6

Vom Layout zum Template.......................................................................... 149 6.1 Ein Blick auf das Screendesign ...................................................... 149 6.1.1 Der Header ......................................................................................152 6.1.2 Content ...........................................................................................153 6.1.3 Der Footer .......................................................................................154 6.2 Die Modulpositionen festlegen ...................................................... 154 6.3 Die Parameter bestimmen ............................................................. 155 6.4 Die Bilder erstellen ........................................................................ 156 6.4.1 Der Hintergrund ..............................................................................157

7356 Joomla Templates_NEU.indd 10

05.10.2009 10:34:26

Inhalt

6.4.2 6.4.3 6.4.4 6.5 6.6 6.6.1 6.6.2 6.6.3 6.6.4 6.7 6.7.1 6.7.2 6.7.3 6.8 6.9 6.10 6.10.1 6.10.2 6.10.3 6.10.4 6.10.5 6.10.6

11

Das Menü .......................................................................................159 Elemente des Inhalts.......................................................................167 Der Footer .......................................................................................181 Die Installationsroutine festlegen .................................................. 182 Das Template weiter vorbereiten .................................................... 187 Namen ändern ................................................................................187 Sprachdateien verfassen .................................................................188 Vorschaubild und Favicon erstellen .................................................188 Das Template als Standard auswählen ............................................189 Blindtexte, Menüs und Module anlegen ......................................... 190 Blindtexte schreiben .......................................................................191 Menüs anlegen ...............................................................................193 Module verwalten ...........................................................................195 Den Index programmieren ............................................................. 205 Das Modul-Chrome codieren ......................................................... 217 Die Cascading Style Sheets definieren ........................................... 219 Reset & Start ...................................................................................221 Layout .............................................................................................224 Menüs ............................................................................................230 Sofortkontakt ..................................................................................237 Slideshow .......................................................................................239 Weitere Angebote ............................................................................242

7

Prüfen und validieren ................................................................................ 245 7.1 Auflösung der Browser .................................................................. 245 7.2 W3C-Validator ............................................................................... 248 7.3 Darstellung in Browsern ................................................................ 250 7.3.1 Browser Collection ..........................................................................250 7.3.2 Unterschiedliche Betriebssysteme...................................................252 7.3.3 Screenshots ....................................................................................253 7.4 Ladezeit der Website ..................................................................... 255

A

Verzeichnisstruktur von Joomla .................................................................. 257

B

Template-Befehle ...................................................................................... 259

C

Programme und Websites .......................................................................... 263 C.1 Editor ............................................................................................ 263 C.2 FTP-Client ...................................................................................... 264 C.3 Browser ......................................................................................... 264

7356 Joomla Templates_NEU.indd 11

05.10.2009 10:34:26

12

Inhalt

C.4 C.5 C.6 C.7 C.8 C.9 D

Firefox-Erweiterungen .................................................................... Bildbearbeitung ............................................................................ Emulatoren ................................................................................... Werkzeuge .................................................................................... Onlinetools ................................................................................... Nachschlagewerke ........................................................................

265 266 267 267 268 269

Abkürzungen und Begriffe ......................................................................... 271 Index ......................................................................................................... 277

7356 Joomla Templates_NEU.indd 12

05.10.2009 10:34:26

13

1 1.1

Das Joomla-Template Was ist ein Joomla-Template?

Ein Joomla-Template ist – grob gesagt – das Webdesign für Joomla und noch ein bisschen mehr. Um abgrenzen zu können, um was genau es sich handelt, bedarf es zunächst der Erklärung einiger Begriffe: Screendesign Unter dem Screendesign wird das statische Layout verstanden, das mit einem Bildbearbeitungsprogramm erstellt wird. Es ist in aller Regel eine Photoshop-, Fireworks- oder Freehand-Datei mit dem Entwurf eines Webdesigns. In diesem Entwurf zeichnet sich die spätere Funktionalität einer Website bereits ab. Webdesign Webdesign ist die Umsetzung des Screendesigns in HTML, CSS, JavaScript und Grafiken. Es kann mit einem WYSIWYG-Editor wie Dreamweaver oder Expression Web oder mit ganz einfachen Editoren erstellt werden. Es umfasst den Aufbau, die Gestaltung und die Nutzerführung einer Website. Der Webdesigner hat die Aufgabe, die Anforderungen des Auftraggebers mit den Wünschen des Nutzers, also dem Besucher der Seite, in Einklang zu bringen und dabei den elegantesten technischen Weg zu wählen. Template Ein Template ist das Webdesign für ein Content Management System (CMS) und ebenfalls noch ein bisschen mehr. Es umfasst einerseits das klassische Webdesign und andererseits den CMS-eigenen Programmcode. Der Programmcode wird dazu eingesetzt, die Funktionalität des Webdesigns zu erweitern, beispielsweise Platzhalter für spätere Inhalte zu schaffen. Ein Template-Designer ist somit Webdesigner und Programmierer zugleich.

7356 Joomla Templates_NEU.indd 13

05.10.2009 10:34:26

14

Kapitel 1: Das Joomla-Template

Ein Joomla-Template ist also das Webdesign in PHP, HTML, CSS und JavaScript, angereichert durch Bilder und Grafiken. Sie benötigen einige Fähigkeiten, um ein Joomla-Template zu entwickeln. Vielleicht meinen Sie an dieser Stelle: »Okay. Ich kann gar nichts von all dem. Das lasse ich lieber.« Dann sei Ihnen gesagt: Nur Mut! Sie werden es lernen, wenn Sie weiterlesen. Zugegeben, es wird manchmal ein bisschen knifflig. Doch mit etwas Motivation, Ausdauer und einer gut funktionierenden Kaffeemaschine werden Sie es schaffen. Sinn und Zweck eines Templates Ein Joomla-Template ist verantwortlich für das Aussehen und die Struktur einer Website. Es besteht aus einem Bündel von Dateien, die zusammen den Rahmen der Seite bilden. Im Frontend sowie im Backend von Joomla dienen Templates als Vorlage. Bei jeder Installation von Joomla werden Standard-Templates installiert, die als Ausgangspunkt dienen. Auf vielen Seiten im Internet finden Sie eine Reihe zusätzlicher Templates, die zum Teil von Webdesignprofis programmiert wurden, zum Teil aber auch von absoluten Anfängern. Wenn Sie dieses Buch durchgearbeitet haben, werden Sie die guten Templates von den schlechten zu unterscheiden wissen. Viele Templates im Netz sind frei erhältlich; andere hingegen werden mit Nutzerlizenzen verkauft. Um den eigenen individuellen Ansprüchen gerecht zu werden, kann man entweder ein vorhandenes Template an seine Bedürfnisse anpassen oder ein eigenes von Grund auf programmieren. Beide Wege werden in diesem Buch beschrieben. Auf einer Website, die unter unserem bevorzugten Content-Management-System Joomla läuft, dient ein Template also als gestalterische Vorlage. Es ist keine eigenständige Website und bestimmt auch nicht allein das Aussehen einer Website. Es ist vielmehr die Grunddefinition der Website, und erst durch Hinzufügen des Inhalts entsteht die letztendliche Darstellung der Site.

7356 Joomla Templates_NEU.indd 14

05.10.2009 10:34:26

1.1 Was ist ein Joomla-Template?

15

Bild 1.1: Website ohne Inhalt.

Bild 1.2: Website mit Inhalt.

7356 Joomla Templates_NEU.indd 15

05.10.2009 10:34:26

16

1.2

Kapitel 1: Das Joomla-Template

Wieso werden Templates eingesetzt?

Die Grundaufgabe eines Content Management-Systems, also auch von Joomla, ist die Trennung des Inhalts (Content) von der Gestaltung (Layout). Auf jeder Website, die mit Joomla realisiert wird, kommen verschiedene Elemente zum Einsatz, die bestimmte Aufgaben erfüllen sollen. Sie entscheiden im Vorfeld, welche Erweiterungen (Komponenten, Module und Plug-ins) für diese Aufgaben infrage kommen. So werden vielleicht ein Firmenlogo, die Navigation, die Pfadangabe, der Inhalt und die Anmeldung ihren Platz auf Ihrer Website finden, der in den meisten Fällen auch auf den Unterseiten der gleiche bleibt. Dazu sollen auf allen Seiten Ihres Webauftritts einige Schriften, Hintergründe, Abstände und Farben ebenfalls wiederverwendet werden. Genau hier kommt die Stärke eines Templates zum Tragen. Im besten Fall brauchen Sie nämlich nur einmal zu definieren, wie eine Überschrift auszusehen hat, und Joomla wird diese auf allen Seiten genau so anzeigen lassen. Wenn Sie dann nachträglich die Farbe der Überschrift ändern, wird das für alle nachgeordneten Seiten übernommen. Wir wollen uns nicht vorstellen, welchen Krampf im Zeigefinger eine statische HTML-Seite hervorrufen würde, wenn wir auf jeder einzelnen von vielleicht 50 Seiten die Überschrift ändern wollten. Und noch ein Vorteil: Stellen Sie sich vor, Sie setzen eine Website online mit Joomla auf, und Ihre Kollegen bestücken sie fleißig mit Inhalten. Jetzt wäre es denkbar ungünstig, am selben System die Gestaltung umzusetzen. Sie können deshalb ohne Weiteres, etwa auf einer lokalen Joomla-Testumgebung, ein Template entwickeln, das sich später ganz einfach als Erweiterung im Backend online installieren lässt. So kommen Sie sich in keiner Weise in die Quere, und es herrscht perfekte Arbeitsteilung. Gestalterische Änderungen an der Website werden ausschließlich im Template vorgenommen und sind so sehr leicht zu realisieren. Sie können sogar der ganzen Website mit einem neuen Template ein komplett anderes Aussehen verschaffen. Zusammengefasst: Die Darstellung der Inhalte wird vom Template übernommen. Im Joomla-Template werden sämtliche Definitionen der Gestaltung hinterlegt, die den äußeren Eindruck einer Website maßgeblich bestimmen. Wenn ein Template erst einmal steht, kann man dennoch durch Einfügen von Inhalten wie zum Beispiel Bildern und Tabellen die Gestaltung und Wirkung der kompletten Seite ändern.

7356 Joomla Templates_NEU.indd 16

05.10.2009 10:34:27

1.3 Die Standard-Templates von Joomla

1.3

17

Die Standard-Templates von Joomla

Bei jeder Installation von Joomla werden drei Templates gleich mit installiert: •

Milkyway Milkyway ist ein frisches Template für Joomla. Das saubere Design dieses Templates ist sehr kompakt und wirkt leicht.

•

Beez Ein barrierefreies Template für Joomla. Dieses Template werden wir später nach unseren Wünschen ändern.

•

JA Purity Ein elegantes und einfach anpassbares Template.

Bild 1.3: Standard-Template Milkyway.

Anhand dieser drei Templates kann man sehr schön sehen, wie der gleiche Inhalt durch unterschiedliche Templates wirkt. Um zu erfahren, wie man Templates installiert und auswählt, benötigen wir allerdings erst einmal Joomla. Im nächsten Kapitel werden wir uns damit beschäftigen, wie wir Joomla auf dem eigenen Rechner installieren. Ziel ist es, eine lokale Testumgebung aufzubauen, in der wir schalten und walten können, wie es uns beliebt.

7356 Joomla Templates_NEU.indd 17

05.10.2009 10:34:27

18

Kapitel 2: Die Joomla-Testumgebung

Bild 1.4: Standard-Template Beez.

Bild 1.5: Standard-Template JA Purity.

7356 Joomla Templates_NEU.indd 18

05.10.2009 10:34:27

19

2

Die Joomla-Testumgebung

In diesem Kapitel beschäftigen wir uns mit der Einrichtung einer Testumgebung, damit wir unabhängig von einem anderen System unsere Arbeit verrichten können. Zunächst lernen Sie das Softwarebündel XAMPP kennen. Mithilfe von XAMPP setzen Sie einen lokalen Webserver mitsamt Datenbank auf und schaffen damit die Grundvoraussetzung für Joomla. Danach werden Sie Joomla installieren. Eine Joomla-Testumgebung ist notwendig, um Arbeiten an Joomla lokal verrichten zu können. Ergebnisse sowie spätere Änderungen werden sofort sichtbar und müssen nicht umständlich auf einen Server im Internet hochgeladen werden. Im Folgenden erklären wir die Installation von XAMPP für die Betriebssysteme Windows, Mac und Linux.

2.1

Lokaler Webserver mit XAMPP

Um unsere lokale Testumgebung einzurichten, greifen wir auf XAMPP zurück. XAMPP besteht aus einem Webserver namens Apache, der Datenbank MySQL und den Skriptsprachen PHP und Perl. Der Buchstabe X steht hier für die jeweilige Rechnerplattform: •

X für Linux, Windows, Mac OS oder Solaris (Plattform)

•

A für Apache (Webserver)

•

M für MySQL (Datenbank)

•

P für PHP (Skriptsprache)

•

P für Perl (Skriptsprache)

XAMPP ist also eine Distribution von Apache, MySQL, PHP und Perl, die es ermöglicht, diese Programme auf sehr einfache Weise zu installieren. Sie ist Open Source (freie Software, deren Quelltext jedermann zugänglich ist) und wird unter der GNU General Public License kostenlos zur Verfügung gestellt. Die Entwickler der XAMPP-Plattform sind uneigennützig tätig, über eine Spende würden sie sich dennoch sehr freuen.

7356 Joomla Templates_NEU.indd 19

05.10.2009 10:34:28

20

Kapitel 2: Die Joomla-Testumgebung

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

laden Sie XAMPP für Ihr Betriebssystem herunter und brauchen das Paket dann nur noch zu entpacken und zu installieren. Danach können Sie sofort starten. Es ist nicht notwendig, Konfigurationsdateien zu ändern, um die Plattform zum Laufen zu bringen. Einfacher lässt sich eine Testumgebung nicht installieren. Aufgrund der Vielzahl an Software und Modulen, die das Paket enthält, kann XAMPP nicht als sicher eingestuft werden. Das heißt, dass Sie XAMPP nicht als Server für den professionellen Einsatz nutzen sollten. Mit ein paar Handgriffen können Sie XAMPP aber nachträglich internettauglich machen. Wie, das erfahren Sie unter oben angegebener Internetadresse. Für unsere Zwecke reicht die Grundinstallation aber völlig aus, und am Beispiel aller gängigen PC-Betriebssysteme werden wir jetzt die Installation durchführen.

2.1.1

XAMPP für Windows (XP, Vista, Windows 7)

Erster Schritt: Herunterladen Wählen Sie »XAMPP für Windows« unter der Internetadresse http://www. apachefriends.org/de/xampp.html aus und laden Sie die Installer-Version herunter. Zweiter Schritt: Installieren Starten Sie den Installer, indem Sie auf die EXE-Datei doppelklicken. Sie bekommen einen Sicherheitshinweis, in dem Sie gefragt werden, ob Sie die Software ausführen wollen. Klicken Sie auf den Button »Ausführen«.

7356 Joomla Templates_NEU.indd 20

05.10.2009 10:34:28

2.1 Lokaler Webserver mit XAMPP

21

Bild 2.1: Die Sicherheitswarnung vor der Installation.

Wählen Sie bei der Sprachauswahl die Option »Deutsch« und bestätigen Sie die Auswahl mit »OK«.

Bild 2.2: Hier legen Sie die Sprache fest, unter der XAMPP installiert wird.

7356 Joomla Templates_NEU.indd 21

05.10.2009 10:34:28

22

Kapitel 2: Die Joomla-Testumgebung

Der Installationsassistent wird nun gestartet. Klicken Sie auf »Weiter«.

Bild 2.3: Dieser Assistent wird Sie durch die Installation von XAMPP begleiten.

Hier können Sie nun das Zielverzeichnis auswählen. Standardmäßig wird XAMPP in dem Ordner c:\xampp installiert. Klicken Sie auf »Weiter«.

Bild 2.4: XAMPP wird in das Zielverzeichnis installiert.

7356 Joomla Templates_NEU.indd 22

05.10.2009 10:34:28

2.1 Lokaler Webserver mit XAMPP

23

Sie können auswählen, ob ein Desktop-Icon erstellt und ein Eintrag im Menü »Start > Programme« angelegt werden soll. Klicken Sie danach auf »Installieren«.

Bild 2.5: Konfiguration von XAMPP für Windows.

7356 Joomla Templates_NEU.indd 23

05.10.2009 10:34:28

24

Kapitel 2: Die Joomla-Testumgebung

XAMPP wird installiert. Der grüne Fortschrittsbalken hält Sie über den Fortgang der Installation auf dem Laufenden.

Bild 2.6: Bitte warten Sie, während XAMPP installiert wird.

Kurzzeitig öffnet sich das Fenster mit der Eingabeaufforderung, das sich bald darauf aber von allein wieder schließt.

Bild 2.7: Das XAMPP-Setup von Apachefriends in der Eingabeaufforderung.

7356 Joomla Templates_NEU.indd 24

05.10.2009 10:34:28

2.1 Lokaler Webserver mit XAMPP

25

XAMPP wurde erfolgreich installiert. Sie können nun auf »Fertig stellen« klicken.

Bild 2.8: Die Installation von XAMPP wird abgeschlossen.

Nach der Installation werden Sie gefragt, ob Sie das Control Panel (zu Deutsch: Steuerkonsole) von XAMPP starten möchten. Klicken Sie dafür auf »Ja«.

Bild 2.9: Herzlichen Glückwunsch! Die Installation war erfolgreich!

Dritter Schritt: Starten Wenn Sie im letzten Fenster auf »Ja« geklickt haben, öffnet sich das Control Panel von XAMPP. Alternativ können Sie unter C://xampp einfach auf die Datei »xampp-control. exe« klicken. Es öffnet sich das Kontrollzentrum von XAMPP. Hier können Sie die einzelnen Komponenten starten und stoppen. Starten Sie Apache und MySQL. Wenn beide laufen, wird im Kontrollzentrum die Meldung »Running« angezeigt.

7356 Joomla Templates_NEU.indd 25

05.10.2009 10:34:29

26

Kapitel 2: Die Joomla-Testumgebung

Starten Sie Apache und MySQL, indem Sie jeweils auf »Start« klicken.

Bild 2.10: Das XAMPP Control Panel.

Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost

Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme, die Sie ausführen können. Für uns zählt jetzt lediglich: Unser Testsystem ist eingerichtet.

Bild 2.11: Die Startseite von XAMPP unter Windows.

7356 Joomla Templates_NEU.indd 26

05.10.2009 10:34:29

2.1 Lokaler Webserver mit XAMPP

2.1.2

27

XAMPP für Mac (OS X)

Erster Schritt: Herunterladen Wählen Sie »XAMPP für Mac OS X« unter der Internetadresse http://www. apachefriends.org/de/xampp.html aus und laden Sie das DMG-Paket herunter.

Zweiter Schritt: Installieren Öffnen Sie das DMG-Paket und klicken Sie auf die PKG-Datei, um die Installation zu starten. Klicken Sie auf »Fortfahren«.

Bild 2.12: Sie werden durch alle Schritte geführt.

Wählen Sie die Macintosh HD aus und klicken Sie auf »Fortfahren«.

Bild 2.13: Wählen Sie das Laufwerk, auf dem XAMPP installiert werden soll.

7356 Joomla Templates_NEU.indd 27

05.10.2009 10:34:29

28

Kapitel 2: Die Joomla-Testumgebung

XAMPP wird im Ordner Programme installiert. Sie haben aber die Möglichkeit, den Installationsordner zu ändern. Klicken Sie auf den Button »Installieren«, nachdem Sie Ihre Wahl getroffen haben.

Bild 2.14: Klicken Sie auf »Installieren«, um die Installation vorzunehmen.

Die Installation wird gestartet.

Bild 2.15: Anhand des Balkens sehen Sie den Fortschritt der Installation.

7356 Joomla Templates_NEU.indd 28

05.10.2009 10:34:30

2.1 Lokaler Webserver mit XAMPP

29

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

Bild 2.16: Die Installation wurde erfolgreich abgeschlossen.

Dritter Schritt: Starten Unter Programme existiert nun ein Ordner xampp. Öffnen Sie den Ordner und klicken Sie auf »XAMPP Control Panel.app«. Nun öffnet sich das Kontrollzentrum von XAMPP. Hier können Sie die einzelnen XAMPP-Komponenten starten und stoppen. Starten Sie Apache und MySQL.

Bild 2.17: Start und Stopp der XAMPP-Komponenten.

7356 Joomla Templates_NEU.indd 29

05.10.2009 10:34:30

30

Kapitel 2: Die Joomla-Testumgebung

Klicken Sie bei Apache und MySQL jeweils auf »Start«. Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost

Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme, die Sie nach Wahl ausführen können. Unser Testsystem ist nun eingerichtet.

Bild 2.18: Die Startseite von XAMPP unter Mac.

7356 Joomla Templates_NEU.indd 30

05.10.2009 10:34:30

2.1 Lokaler Webserver mit XAMPP

2.1.3

31

XAMPP für Linux (Ubuntu)

Erster Schritt: Herunterladen Wählen Sie »XAMPP für Linux« unter der Internetadresse http://www.apachefriends. org/de/xampp.html aus und laden Sie das xampp-linux-tar.gz-Paket herunter.

Zweiter Schritt: Installieren Öffnen Sie ein Terminal (»Anwendungen > Zubehör > Terminal«) und entpacken Sie das soeben heruntergeladene Paket mit folgender Befehlszeile: sudo tar xvfz xampp-linux-1.7.tar.gz -C /opt

Geben Sie das Passwort ein, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden.

Bild 2.19: Über ein Terminal wird XAMPP entpackt.

Entpacken Sie XAMPP in das Verzeichnis /opt.

7356 Joomla Templates_NEU.indd 31

05.10.2009 10:34:30

32

Kapitel 2: Die Joomla-Testumgebung

Bild 2.20: Das Terminal zeigt den Fortschritt der Installation.

XAMPP wird entpackt und somit installiert. Dritter Schritt: Starten Bleiben Sie im Terminal und starten Sie das System mit folgender Befehlszeile: sudo /opt/lampp/lampp start

Geben Sie erneut das Passwort ein, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden.

7356 Joomla Templates_NEU.indd 32

05.10.2009 10:34:30

2.1 Lokaler Webserver mit XAMPP

33

Bild 2.21: Über das Terminal können Sie XAMPP starten.

Starten Sie XAMPP mit Apache und MySQL.

Bild 2.22: Die Komponenten von XAMPP starten Sie über das Terminal.

7356 Joomla Templates_NEU.indd 33

05.10.2009 10:34:30

34

Kapitel 2: Die Joomla-Testumgebung

XAMPP wurde erfolgreich gestartet. Vierter Schritt: Testen Öffnen Sie einen Browser und geben Sie folgende Adresse ein: http://localhost

Es öffnet sich die Startseite von XAMPP. In der Übersicht sehen Sie ein paar Links zum Testen des Systems sowie einige Beispielprogramme zum Ausführen. Unser Testsystem steht.

Bild 2.23: Die Startseite von XAMPP unter Linux (Ubuntu).

2.2

Die Testumgebung einrichten

Eine Voraussetzung für die Installation von Joomla ist eine Datenbank. Diese Datenbank erstellen wir bequem über den Browser, indem wir http://localhost

aufrufen und in der linken Spalte auf die Option »phpMyAdmin« klicken. Dadurch öffnet sich das Browser-Interface für die MySQL-Datenbank. Hier können Sie nun eine »Neue Datenbank anlegen«.

7356 Joomla Templates_NEU.indd 34

05.10.2009 10:34:30

2.2 Die Testumgebung einrichten

35

Bild 2.24: Das Browser-Interface phpMyAdmin.

Geben Sie zum Beispiel joomla_lokal ein und klicken Sie auf die Option »Anlegen«. Als Datenbanktyp sollten Sie »Kollation« wählen.

Bild 2.25: Über phpMyAdmin können Sie die Datenbank anlegen.

7356 Joomla Templates_NEU.indd 35

05.10.2009 10:34:31

36

Kapitel 2: Die Joomla-Testumgebung

Bild 2.26: phpMyAdmin meldet die erfolgreiche Erzeugung der Datenbank.

Die Datenbank joomla_lokal steht uns nun für die Installation von Joomla zur Verfügung. Beim nächsten Schritt ist etwas Handarbeit gefragt, denn es geht ans Eingemachte der Konfiguration. Öffnen Sie mit einem beliebigen Editor (TextEdit, Notepad, gedit) in dem Ordner •

unter Windows:

C:\xampp\etc

•

unter Mac:

Programme > xampp > etc

•

unter Linux:

/opt/lampp/etc

die Datei php.ini. Bei dem Verzeichnis etc handelt es sich um einen Unterordner von xampp beziehungsweise lampp. In der php.ini gilt es, zwei Einstellungen auszuschalten, nämlich »Display Errors« und »Register Globals«.

7356 Joomla Templates_NEU.indd 36

05.10.2009 10:34:31

2.3 Die Installation von Joomla

37

Suchen und finden Sie in der Datei php.ini die Zeile display_errors = On

und ersetzen Sie sie durch display_errors = Off

Ebenso ersetzten Sie die Zeile register_globals = On

durch register_globals = Off

Speichern Sie nun die Datei ab. Damit die Änderungen wirksam werden, sollte der Webserver Apache neu gestartet werden. Öffnen Sie dazu unter Mac oder Windows das XAMPP Control Panel und starten Sie den Apache-Server erneut. Unter Linux (Ubuntu) können Sie das im Terminal mit sudo /opt/lampp/lampp restart

erreichen. Hier wird wieder nach dem Passwort gefragt, mit dem Sie sich am Linux-System unter Ihrem normalen Benutzernamen anmelden. Die Voraussetzung für die Installation von Joomla ist nun erfüllt. Zünden wir also die zweite Stufe.

2.3

Die Installation von Joomla

Nachdem wir uns eine Testumgebung geschaffen haben, können wir Joomla jetzt installieren. Laden Sie sich die aktuelle Version kostenfrei unter einer der folgenden Adressen herunter: •

http://www.joomla.org

•

http://www.joomla.de

Unter der erstgenannten Adresse, der Mutterseite von Joomla, finden Sie das CMS in englischer Sprache. Auf der deutschen Seite unter der zweiten Adresse können Sie auch die übersetzte deutschsprachige Version herunterladen. Auf beiden Seiten finden Sie stets die aktuelle Version unter dem Stichwort »Download«.

7356 Joomla Templates_NEU.indd 37

05.10.2009 10:34:31

38

Kapitel 2: Die Joomla-Testumgebung

Laden Sie sich Joomla herunter und entpacken Sie das Paket. Beim Entpacken entsteht ein Ordner, den Sie in joomla umbenennen sollten – das vereinfacht den Aufruf über einen Browser. Kopieren Sie ihn in den dafür vorgesehenen Ordner unserer Testumgebung. •

unter Windows:

C:\xampp\htdocs

•

unter Mac:

Programme > xampp > htdocs

•

unter Linux:

/opt/lampp/htdocs

Unter Linux (Ubuntu) erreichen Sie das mit folgender Eingabe im Terminal: sudo cp joomla /opt/lampp/htdocs

Auch hier müssen Sie wieder das Passwort angeben, unter dem Sie sich am Linux-System anmelden. Im Ordner htdocs sollte nun ein Unterordner namens joomla liegen, der eine Vielzahl von Dateien enthält. Kommen wir nun zur eigentlichen Installation. Öffnen Sie einen Browser und geben Sie folgende Adresse ein, um die Installationsroutine zu starten: http://localhost/joomla joomla ist hierbei der vorher umbenannte Ordner. Sollte die Verbindung fehlschlagen und Sie keine Seite sehen, stellen Sie bitte sicher, dass Apache und MySQL in der XAMPPUmgebung gestartet sind und laufen.

Wählen Sie die Option »Deutsch« aus und klicken Sie auf »Weiter«.

7356 Joomla Templates_NEU.indd 38

05.10.2009 10:34:31

2.3 Die Installation von Joomla

39

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

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

7356 Joomla Templates_NEU.indd 39

05.10.2009 10:34:31

40

Kapitel 2: Die Joomla-Testumgebung

Bei der Installationsprüfung sollten alle Funktionen grün markiert sein. In unserem Fall ist der Hinweis »configuration.php beschreibbar« allerdings in roter Farbe und mit »Nein« gekennzeichnet. Lesen wir, was da steht: »Sie können dennoch mit der Installation fortfahren, da Ihnen die Konfiguration am Ende angezeigt wird. Sie müssen einen zusätzlichen Schritt ausführen, um den Quelltext manuell hochzuladen. Kopieren Sie den angezeigten Quelltext aus dem Eingabefeld in eine neue Datei mit Namen configuration.php und laden Sie diese in das Hauptverzeichnis Ihrer Joomla!-Website.« Um die Datei configuration.php werden wir uns also am Ende der Installation kümmern. Klicken Sie nun auf »Weiter«.

Bild 2.29: Joomla steht unter der GNU General Public License.

Hier sehen Sie die GNU General Public License, unter der Joomla veröffentlicht ist. Sie können wiederum auf »Weiter« klicken.

7356 Joomla Templates_NEU.indd 40

05.10.2009 10:34:32

2.3 Die Installation von Joomla

41

Bild 2.30: Geben Sie die Zugangsdaten für die Datenbank ein.

Im nächsten Schritt geht es um die Datenbankkonfiguration. Hier werden Sie nach einigen Einstellungen gefragt, die folgendermaßen lauten (sofern Sie eine XAMPP-Testumgebung wie zuvor beschrieben eingerichtet haben): •

Datenbanktyp:

mysql

•

Servername:

localhost

•

Benutzername:

root

•

Passwort:

•

Datenbankname:

joomla_lokal

Ein Passwort für MySQL haben wir nicht vergeben, somit bleibt dieses Feld leer. Wir betreiben lokal einen Webserver und können dieses Sicherheitsrisiko durchaus eingehen.

7356 Joomla Templates_NEU.indd 41

05.10.2009 10:34:32

42

Kapitel 2: Die Joomla-Testumgebung

Wenn Sie Joomla online auf einem Webserver installieren, benötigen Sie hierfür die Daten der Datenbank Ihres Providers. Die erweiterten Einstellungen können so bleiben, wie sie sind. Klicken Sie auf »Weiter«.

Bild 2.31: Die optionale FTP-Konfiguration von Joomla.

Eine FTP-Konfiguration ist für uns nicht nötig. Das Kürzel FTP steht für File Transfer Protocol. Dieses Protokoll ist für die Datenübertragung im Netz vorgesehen. Sie können diesen Schritt durch einen Klick auf »Weiter« überspringen.

7356 Joomla Templates_NEU.indd 42

05.10.2009 10:34:32

2.3 Die Installation von Joomla

43

Bild 2.32: Die Hauptkonfiguration von Joomla.

7356 Joomla Templates_NEU.indd 43

05.10.2009 10:34:32

44

Kapitel 2: Die Joomla-Testumgebung

In der Hauptkonfiguration können Sie den Namen der Website angeben. Hinterlassen Sie auch eine E-Mail-Adresse und ein Passwort für die Administration. Mit diesem Passwort werden Sie sich dann in das CMS einloggen können. Die Beispieldateien brauchen wir nicht und können somit diesen Schritt überspringen. Joomla stellt für Umzüge von alten Versionen ein Migrationsverfahren zur Verfügung. Die dafür notwendige Skriptdatei können Sie bei Bedarf hier angeben. Auch diesen Schritt brauchen wir jetzt nicht und können mit einem Klick auf »Weiter« fortfahren.

Bild 2.33: Ein kurzer Sicherheitshinweis.

Zur Sicherheit bestätigen Sie noch einmal mit »OK«.

Bild 2.34: Die Installation von Joomla kommt zum Abschluss.

Die Installation wird abgeschlossen, indem Sie den Ordner installation im Verzeichnis joomla löschen. Im Normalfall wird die Konfigurationsdatei jetzt automatisch erstellt. Ist die Konfigurationsdatei aber nicht beschreibbar oder gab es ein anderes Problem beim Speichern der Konfiguration, müssen Sie den PHP-Code, der Ihnen im Browserfenster

7356 Joomla Templates_NEU.indd 44

05.10.2009 10:34:33

2.3 Die Installation von Joomla

45

bereitgestellt wird, manuell hochladen. Markieren Sie dann den gesamten Text im Textfeld, kopieren Sie ihn in eine neue Datei, die Sie configuration.php nennen, und laden Sie diese in das Hauptverzeichnis Ihrer Joomla-Website. Benutzen Sie dazu einen einfachen Editor wie TextEdit, Notepad oder gedit. Die Installation ist nun abgeschlossen. Mit einem Klick auf »Website« gelangen Sie zum Frontend. Sie sehen nun im Browser die Website, die von Joomla angelegt wurde. Mit einem Klick auf »Admin« gelangen Sie zum Backend. Hier finden Sie alle Bedienelemente und Einstellungsoptionen, die Sie für den Umgang mit Joomla benötigen.

Bild 2.35: Das Frontend von Joomla.

In unserer Testumgebung öffnen Sie die Website mit dieser URL: http://localhost/joomla

Im Backend können Sie sich als Administrator mit dem Passwort, das Sie während der Installation vergeben haben, einloggen. Der Benutzername des ersten Administrators lautet admin. Sie erreichen das Backend, wenn Sie im Browser die Adresse http://localhost/joomla/administrator

eingeben.

7356 Joomla Templates_NEU.indd 45

05.10.2009 10:34:33

46

Kapitel 2: Die Joomla-Testumgebung

Bild 2.36: Das Backend von Joomla.

7356 Joomla Templates_NEU.indd 46

05.10.2009 10:34:33

47

3 Der Aufbau eines Templates 3.1

Das Blanko-Template

Der Aufbau eines Templates lässt sich am besten an einem Beispiel erklären. Für die Template-Entwicklung ist es sinnvoll, ein Blanko-Template einzusetzen. Ein Blanko-Template ist ein Template, das weder Layout-Elemente noch eine Seitenstruktur aufweist, aber voll funktionstüchtig ist und sich fehlerfrei installieren lässt. Ein solches Template finden Sie auf www.buch.cd. Es kann zudem unter http://www.bloggerschmidt.de/blankotemplate

heruntergeladen werden. Wenn Sie das ZIP-Paket geladen haben, dann entpacken Sie das Template, das aus zahlreichen Verzeichnissen und Dateien besteht, die im Anschluss erläutert werden.

Bild 3.1: Die Struktur des Blanko-Templates.

7356 Joomla Templates_NEU.indd 47

05.10.2009 10:34:33

48 •

Kapitel 3: Der Aufbau eines Templates

admin

Der Ordner beinhaltet nur eine Datei; die Sprachdatei zum Template für das Backend. •

css

In diesem Ordner liegen alle Cascading Style Sheets. •

de-DE.tpl_TEMPLATENAME.ini

Die Sprachdatei zum Template für das Frontend. •

error.php

Kann eine Seite nicht gefunden werden, wird diese Seite mit einer Fehlermeldung angezeigt. •

favicon.ico

Das Icon (kleines Bild) wird im Browser links neben der URL angezeigt und dient der Wiedererkennung des Lesezeichens. •

html

Alle Dateien der Overrides müssen in diesem Ordner liegen. Overrides überschreiben die HTML-Kerndateien und werden in Abschnitt 3.5 im Detail erläutert. •

images

Alle Bilder werden zur besseren Übersicht in diesen Ordner gelegt. Der Ordnername ist frei wählbar, dennoch empfiehlt es sich, den selbsterklärenden Namen images zu verwenden. •

index.html

Die Datei verhindert die Auflistung der Inhalte eines Ordners. Läge kein Index vor, wären die Inhalte eines Verzeichnisses für jedermann einsehbar. Die Datei gibt nur eine leere, weiße Seite aus und gehört in jeden Ordner unter Joomla. •

index.php

Die wichtigste Datei des Templates wird aufgebaut aus PHP, HTML, JavaScript, Joomla-Anweisungen und Parameterabfragen. Die CSS- und JavaScript-Dateien werden hier verlinkt. •

js

Der Name des Ordners ist frei gewählt. Hier werden die JavaScript-Dateien abgelegt. •

offline.php

Wird die Website unter Joomla offline geschaltet, bekommt der Besucher diese Datei zu Gesicht. •

params.ini

Einstellungen der Parameter werden in dieser Datei abgespeichert, um später darauf zugreifen zu können.

7356 Joomla Templates_NEU.indd 48

05.10.2009 10:34:34

3.2 Sprachdateien

•

49

psd

Dieser Ordner ist für das Template nicht zwingend notwendig. Er beinhaltet die Photoshop-Dateien zu einigen Bildern. •

template_thumbnail.png

Das Vorschaubild des Templates wird unter Joomla im Template-Manager angezeigt und dient der Wiedererkennung. •

templateDetails.xml

Diese Datei ist verantwortlich für die Installationsroutine. Zudem werden alle Parameter des Templates hier definiert. In diesem Ordner befinden sich alle Template-Dateien, die wir brauchen. In einem späteren Kapitel werden wir ihn mit ein paar Grafikdateien anreichern. Doch der Reihe nach: Um das Template zu verstehen, nehmen wir uns – von oben angefangen – alle Ordner und Dateien vor. Eine Besonderheit möchten wir an dieser Stelle vorwegnehmen: In jedem Ordner von Joomla liegt eine Datei namens index.html. Diese Datei ist ein Sicherheitsmerkmal von Joomla, die verhindert, dass der Besucher einer Seite ein Inhaltsverzeichnis des jeweiligen Ordners zu sehen bekommt. Sollten in dem Verzeichnis wertvolle Daten liegen, befänden sich die Dateien dann auf dem Präsentierteller. Stattdessen bekommt der Besucher nur eine weiße Seite zu Gesicht, wenn die Datei index.html vorhanden ist.

3.2

Sprachdateien

Der Ordner admin beinhaltet die Sprachdatei für das Backend. Das Pendant für das Frontend liegt im Root-Verzeichnis des Templates und trägt den gleichen Namen: de-DE. tpl_TEMPLATENAME.ini. Der Name setzt sich aus dem Länderkürzel, der Erweiterungsart, dem Template-Namen und der Dateiendung zusammen. Das Länderkürzel de-DE steht für die Sprache (de) und das Land (DE). Für die Schweiz wäre es z. B. de-CH. Die Erweiterungsart ist »Template«, abgekürzt tpl. Sprachdateien für Komponenten tragen das Kürzel com, Module mod und Plug-ins plg. Nun folgt ein Unterstrich (_) und der Template-Name mit der Dateiendung .ini, die für eine Initialisierungsdatei steht, sprich: eine Setup-Datei.

Bild 3.2: Die Sprachdatei für den Administrationsbereich von Joomla.

Bild 3.3: Die gleichnamige Datei für das Frontend.

7356 Joomla Templates_NEU.indd 49

05.10.2009 10:34:34

50

Kapitel 3: Der Aufbau eines Templates

Die Sprachdateien sind wichtig für Übersetzungsarbeiten. Stattet man ein Template mit Parametern aus, bekommen diese z. B. eine Beschreibung. Damit die Beschreibung auch in andere Sprachen übersetzt werden kann, finden Sprachvariablen Verwendung. Diese Variablen mit den dazugehörigen Texten, die für sie eingesetzt werden sollen, findet man in den Sprachdateien. Ein Beispiel ist die Beschreibung des Templates selbst, die unter der Variablen TEMPLATENAME DESCRIPTION abgelegt wird. Öffnet man die Datei de-DE.tpl_TEMPLATENAME.ini, findet man in der ersten Zeile folgenden Eintrag: TEMPLATENAME DESCRIPTION=Das ist das Blanko-Template.

Das heißt also: Immer wenn die Variable TEMPLATENAME DESCRIPTION irgendwo im Template auftaucht, wird in der Ausgabe der Text »Das ist das Blanko-Template. « angezeigt.

3.3

Cascading Style Sheets

Im Ordner css befinden sich alle Cascading Style Sheets des Templates. Die Datei index. html lässt auch hier nur eine weiße Seite erscheinen und verhindert so das Auflisten dieses Ordners.

Bild 3.4: Alle Cascading Style Sheets finden Platz im Ordner css.

Cascading Style Sheets (kurz: CSS) werden dazu verwendet, Definitionen des Layouts, der Inhalte, der Menüs und der Module zu hinterlegen. Farben, Abstände, Hintergründe, Positionen und Schriften werden hier bestimmt. CSS ist wie HTML (Hypertext Markup Language) eine Formatierungssprache – allerdings mit dem Unterschied, dass HTML für die Struktur einer Website genutzt wird, während CSS für die äußere Erscheinung zuständig ist. Kurz gesagt: Mit CSS bestimmen Sie das Aussehen Ihrer Website.

3.3.1

template.css

Das wichtigste Cascading Style Sheet heißt template.css. In dieser Datei wird Ihr Design definiert. Sie ist somit maßgeblich für die Gestaltung verantwortlich. Die template.css muss nicht zwingend template.css heißen, doch empfiehlt sich der Name zur besseren Einsortierung.

7356 Joomla Templates_NEU.indd 50

05.10.2009 10:34:34

3.3 Cascading Style Sheets

51

Schauen wir uns mal einen Auszug aus der template.css an:

Bild 3.5: Die Formatierung von template. css dient der Übersicht.

Durch die farbige Hinterlegung, auch Syntax-Highlight genannt, die einige Editoren bieten, wird eine bessere Übersicht erreicht. Tipp: Wenn Sie CSS-Dateien mit einem Editor bearbeiten wollen, achten Sie darauf, dass dieser die Syntax einfärben kann. Das dient nicht nur der Übersichtlichkeit, sondern hilft Ihnen auch bei der Fehlersuche. Die Datei template.css des Blanko-Templates ist in folgende Bereiche unterteilt: •

CSS

•

Layout

•

Menus

•

Links

7356 Joomla Templates_NEU.indd 51

05.10.2009 10:34:34

52

Kapitel 3: Der Aufbau eines Templates

•

Standard

•

Module

•

Content

•

Joomla

Diese Unterteilung hilft Ihnen, sich in dem Dokument zurechtzufinden. Unter der Abteilung CSS finden Sie das Reset des Sheets, um vorhandene Definitionen zurückzusetzen. Im Bereich Layout sind die Designdefinitionen hinterlegt. Menus beinhaltet die Gestaltung aller Menüs und Links die der Links. Unter Standard haben Standardelemente, wie beispielsweise eine horizontale Linie (hr), Platz. Module ist für alle eingesetzten Module gedacht und Content für den Inhalt. Zu guter Letzt stehen unter Joomla die Definitionen des CMS. Hier werden auch Teile des Inhalts definiert.

3.3.2

ieonly.css

Dieses Cascading Style Sheet ist nur für den Internet Explorer gedacht: ieonly.css. Weil Microsoft in der Vergangenheit die Webstandards nicht einhielt, dürfen Webdesigner dies mit sogenannten Hacks ausbaden und die Darstellung korrigieren. Hacks sind Anweisungen, die nötig sind, weil entweder die Webstandards nicht eingehalten werden oder weil man Bugs (Programmfehler) eines Browsers kompensieren muss. Mithilfe solcher Anweisungen können Sie eine nicht korrekte Darstellung wieder richtigstellen.

Bild 3.6: Hack zur Darstellung von korrekten Überschriften im Internet Explorer 6.

Im Laufe einer Template-Entwicklung kann dieses Sheet weiter bestückt werden. Doch soweit es geht, werden wir versuchen, Hacks durch gute Programmierung zu vermeiden. Hacks lassen ein gut gegliedertes Sheet unschön aussehen und haben etwas von einem Flickenteppich. Erst wenn uns keine Alternative bleibt, setzen wir Hacks ein. Das Sheet ieonly.css wird später nur vom Internet Explorer geladen. Das ist auch der Grund dafür, dass alle Hacks in diese Datei ausgelagert werden.

3.3.3

editor.css

Das dritte Cascading Style Sheet nennt sich editor.css und ist für den WYSIWYG-Editor unter Joomla gedacht. In den meisten Editoren können Sie den Pfad zu diesem CSS in der Konfiguration angeben. Im Editor wird der Inhalt eines Beitrags anders angezeigt als

7356 Joomla Templates_NEU.indd 52

05.10.2009 10:34:34

3.3 Cascading Style Sheets

53

später im Frontend der Website. Um die Darstellung im Editor zu bestimmen, kann auf dieses CSS zurückgegriffen werden. Bild 3.7: Schwarzer Text auf weißem Hintergrund für den Editor unter Joomla.

3.3.4 •

Zehn Praxistipps zum besseren Codieren mit CSS

Strukturieren Sie Ihr Sheet. In der Form, in der das template.css bereits vorliegt, ist es sinnvoll, jedes Cascading Style Sheet zu strukturieren. Ordnung ist nötig, damit Sie und andere sich schnell zurechtfinden, und erspart Ihnen jede Menge Zeit, wenn Sie das CSS später umschreiben oder erweitern. Die Struktur sollte dabei vom Allgemeinen ins Spezielle gehen.

Bild 3.8: Eine gute Struktur für ein Cascading Style Sheet.

•

Setzen Sie Definitionen zurück. Am Anfang eines CSS sollte ein Reset aller Definitionen erfolgen. Ziel dieser Zurücksetzung ist die Aufhebung der Browser-Inkonsistenzen, etwa bei der Zeilenhöhe oder den Schriftgrößen. Das Reset wird allgemein gehalten und schafft den bestmöglichen Ausgangspunkt für saubere Definitionen, die von den Browsern korrekt interpretiert werden. Individuelle Definitionen finden später ihren Platz.

7356 Joomla Templates_NEU.indd 53

05.10.2009 10:34:34

54

Kapitel 3: Der Aufbau eines Templates

Bild 3.9: Ein Reset am Anfang des CSS setzt alle Definitionen zurück.

•

Erstellen Sie eine Template-Bibliothek. Für erfahrene Webdesigner und Entwickler hat es sich als sehr nützlich erwiesen, eine Template-Bibliothek aufzubauen. Teile des Codes wiederholen sich nämlich. Viele immer wiederkehrende Probleme können mit sogenannten Schnipseln (engl. Snippets) gut gelöst werden. Das spart Ihnen Zeit, und die Fehleranfälligkeit des Codes wird geringer. Eine gut sortierte Bibliothek hat mehr Wert, als Sie vielleicht ahnen. Mit dem Programm Coda zum Beispiel können Sie mit Clips Ihre Schnipsel sehr gut verwalten. Coda ist kostenpflichtig und kann unter http://www.panic.com/coda

für etwa 68 Euro (99 Dollar) erworben werden.

7356 Joomla Templates_NEU.indd 54

05.10.2009 10:34:34

3.3 Cascading Style Sheets

55

Bild 3.10: Unter Coda lässt sich mit Clips eine Template-Bibliothek aufbauen.

•

Verwenden Sie nachvollziehbare Namen. Wenn Sie ein Drei-Spalten-Layout erstellen, benennen Sie die Spalten sinnvoll. Geben Sie ihnen beispielsweise die IDs #menu, #main und #sidebar. Eine schlechte Namenskonvention wäre #left, #middle und #right. Wieso? Die aktuelle Struktur betreffend, mögen die Namen einleuchtend sein, doch angenommen, nach zwei Jahren möchten Sie Ihre Website umgestalten und das linke Menü auf der rechten Seite platzieren: Wie verwirrend wäre es da, wenn die Spalte #left auf einmal rechts auftaucht. Eine große Stärke von CSS ist es ja, dass man das Layout komplett umpositionieren kann, ohne die HTML-Datei anzurühren.

7356 Joomla Templates_NEU.indd 55

05.10.2009 10:34:34

56

Kapitel 3: Der Aufbau eines Templates

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

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

7356 Joomla Templates_NEU.indd 56

05.10.2009 10:34:34

3.3 Cascading Style Sheets

57

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

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

7356 Joomla Templates_NEU.indd 57

05.10.2009 10:34:34

58 •

Kapitel 3: Der Aufbau eines Templates

Schreiben Sie Attribute in Kurzform in eine Zeile. Auch im Zeitalter der Breitbandleitungen gibt es noch genügend Nutzer, die mit einem analogen 56k-Highspeed-Modem ins Internet gehen. Die Ladezeit spielt dabei eine wesentliche Rolle. Es gilt: Wenn eine Seite nicht innerhalb von vier Sekunden aufgebaut ist, klickt der Besucher weg. Ein Weg, die Ladezeit zu verringern, ist, das CSS so schmal wie möglich zu halten. Versuchen Sie, die Attribute einer ID oder einer Klasse in Kurzform in eine Zeile zu schreiben. Um eine bessere Übersicht zu gewährleisten, sortieren Sie dabei die Attribute alphabetisch.

Bild 3.15: Attribute nehmen viel Platz ein, wenn sie untereinanderstehen.

Bild 3.16: Die Attribute in Kurzform in einer Zeile sparen Platz.

•

Vermeiden Sie Wiederholungen. Versuchen Sie, sooft es geht, IDs und Klassen zusammenzufassen, bevor Sie Stile wieder und wieder gleich deklarieren. Durch Kommata getrennt, brauchen Sie IDs oder Klassen nur einmal zu definieren.

Bild 3.17: Eine Zusammenfassung von Elementen ist sehr effizient.

Diese Schreibweise ist wesentlich besser und eleganter als diese hier:

Bild 3.18: Diese Schreibweise bläht das CSS unnötig auf.

7356 Joomla Templates_NEU.indd 58

05.10.2009 10:34:34

3.3 Cascading Style Sheets

59

•

Optimieren Sie die Größe des Sheets. Wenn Sie die vorherigen Tipps beherzigen, wird Ihr Cascading Style Sheet schmal und leicht. Kleine Dateien laden schneller und lassen sich besser aktualisieren. Löschen Sie alles, was Sie nicht brauchen, und fassen Sie Attribute zusammen, wo immer es geht. Kleiner Tipp am Rande: Eine Null (0) braucht keine Maßeinheiten. Wenn Sie etwa einen Außenabstand margin gleich 0 setzen, ist es egal, ob Sie 0px oder 0em meinen. Lassen Sie die Einheit einfach weg.

•

Codieren Sie erst für Gecko, dann für Webkit und den Internet Explorer. Sie tun sich selbst einen Gefallen und ersparen sich jede Menge Kopfschmerzen und zudem eine umfangreiche Fehlersuche, wenn Sie die Gestaltung erst für einen GeckoBrowser (Firefox, Mozilla, Netscape, Flock, Camino) codieren und danach für Webkit (Safari, Chrome) und den Internet Explorer.

•

Vermeiden Sie Hacks. Wo immer es geht, sollten Hacks vermieden werden. Erstens sind Hacks unschön und haben was von einem Flickenteppich. Zweitens sind einige Hacks nicht valide, und dann fällt Ihr CSS durch die W3C-Prüfung. Einige Hacks werden umgangen, wenn man Innen- und Außenabstände auslagert. Diese Abstände werden von den Browsern unterschiedlich interpretiert: Teilweise werden sie von der Seitenbreite und -höhe abgezogen, teilweise aber auch hinzuaddiert.

Bild 3.19: Eine div-Box, um Hacks zu vermeiden.

Eine div-Box mit zwei ineinander verschachtelten div-Containern schafft hier Abhilfe, wobei der erste Container alle Attribute bekommt, die nötig sind, und der zweite nur die Abstände margin und padding enthält.

Bild 3.20: Hacks werden vermieden, wenn Abstände ausgelagert werden.

•

Validieren Sie das CSS. Es gibt keine bessere Prüfung als die des W3C (World Wide Web Consortium). Wenn Sie mal einen Fehler nicht finden und Ihr CSS nicht das tut, was es soll, prüfen Sie es mit diesem freien Validator: http://jigsaw.w3.org/css-validator

7356 Joomla Templates_NEU.indd 59

05.10.2009 10:34:35

60

Kapitel 3: Der Aufbau eines Templates

Er hilft Ihnen, potenzielle Fehler aufzuspüren, und gibt Ihnen wertvolle Tipps zu deren Behebung.

3.3.5

Hacks für den Internet Explorer

Manchmal kommt man nicht drum herum: Man codiert nach bestem Wissen und Gewissen und nutzt div-Boxen, sooft es geht, doch die Internet Explorer 6 und 7 zeigen das Layout ganz anders an als die übrigen Browser. Hacks sind dann die Lösung. Sie sind dazu da, fehlende oder falsche Interpretationen wieder geradezubiegen. Damit aber nicht alle Browser darunter leiden, werden die Hacks für den Internet Explorer in ein separates CSS gepackt und nur dann geladen, wenn die Seite mit dem IE geöffnet wird. Die Indexdatei bekommt dazu im head-Bereich folgende Anweisung:

Hinweis: Dieser Fix funktioniert bei allen PNG-Bildern, die mit einem img-Tag () in Ihrer Website eingebunden sind. Auf PNG-Bilder im Cascading Style Sheet hat dieser Fix dagegen keinen Einfluss.

3.7.5

Einsatzgebiete

Jedes Format hat seine Stärken und wird auf unterschiedlichen Gebieten eingesetzt. •

Bei Webdesigns mit wenigen Farben nutzen Sie GIF.

•

Bei Webdesigns mit vielen Farben nutzen Sie PNG.

•

Bei Webdesigns, bei denen Sie Transparenz einsetzen wollen, nutzen Sie PNG.

•

Bei Fotos oder Landschaften nutzen Sie JPG.

3.8

Index Bild 3.32: Die wichtigste Datei des Templates: index.php.

Zwei Indexdateien liegen im Template-Ordner. Die eine hat die Endung .html, die andere .php. Die Datei index.html soll verhindern, dass Besucher Ihrer Website den Template-Ordner auflisten können. Oftmals ist der Webserver so eingestellt, dass, wenn keine Indexdatei vorhanden ist, das Verzeichnis aufgelistet wird. Der Besucher bekommt dann sämtliche Ordner und Dateien zu Gesicht. Mit einer index.html und folgendem Inhalt können Sie dies unterbinden.

Das ist ein Sicherheitsmerkmal Ihrer Website.

7356 Joomla Templates_NEU.indd 68

05.10.2009 10:34:35

3.8 Index

69

Die wichtigste Datei Ihres Templates jedoch ist die index.php. Sie ist das Herz Ihrer Website und wird bei jedem Besuch der Website aufgerufen. Sie ist eine Kombination aus HTML und PHP und verantwortlich für den Quelltext.

Bild 3.33: Die Datei index.php im Detail.

3.8.1

Zugriffsschutz

Fangen wir ganz oben an.

7356 Joomla Templates_NEU.indd 69

05.10.2009 10:34:35

70

Kapitel 3: Der Aufbau eines Templates

In der ersten Zeile steht eine PHP-Anweisung, die veranlasst, dass Besucher Ihrer Website die Datei nicht direkt aufrufen können. _JEXEC ist eine Boole'sche Konstante, die entweder wahr oder falsch (1 oder 0) ist. Sie stellt sicher, dass Joomla und nicht eine Person direkt die Datei aufruft. Joomla setzt den Wert von _JEXEC auf 1. Nicht nur in Templates greift dieses Sicherheitsmerkmal, sondern auch in allen anderen Erweiterungen wie Komponenten, Modulen und Plug-ins. Ohne diese Konstante wäre es für Hacker ziemlich leicht, Ihre Website zu knacken und für eigene Zwecke zu verwenden.

3.8.2

Dokumenttyp (Doctype)

In der zweiten Zeile steht:

Diese Zeile teilt den Browsern mit, welcher Seitentyp vorliegt. Sie verrät, welche HTMLVersion oder -Syntax Sie im Quelltext nutzen. Diese Information hilft dem Browser, die Seite richtig darzustellen. Fehlt diese Information, versucht der Browser, die Seite bestmöglich anzuzeigen, kann sie aber unter Umständen falsch interpretieren. Der Internet Explorer 6 etwa macht das sehr gern: Wenn diesem kein Doctype vorliegt, stellt er sich in den »quirks«-Mode und kennt den Wert auto des CSS-Attributs margin plötzlich nicht mehr. Hinter jeder Dokumenttyp-Deklaration stehen Dokumenttyp-Definitionen (DTD). Diese regeln, welche Elemente ein Dokument enthalten darf, welche Elemente in anderen Elementen vorkommen dürfen, welche Attribute zu einem Element gehören und ob diese Pflicht sind. Sie können sich das als eine Art Norm für die Rechtschreibung vorstellen. Ohne die Deklaration würde die Auszeichnungssprache HTML schnell in Dialekte ausarten, und man wüsste dann nicht mehr, was jemand mit seinem Quelltext eigentlich beschreibt. Mit der Angabe des Dokumenttyps ist die Datei eine gültige und valide HTML-Datei. Hier eine Liste von Dokumenttypen: HTML 4.01:

7356 Joomla Templates_NEU.indd 70

05.10.2009 10:34:36

3.8 Index

71

XHTML 1.0:

XHTML 1.1:

Für HTML 4.01 und XHTML 1.0 gibt es drei Sprachvarianten: strict, transitional und frameset. Die Regeln bei strict zur Verschachtelung von HTML-Elementen sind streng definiert. So darf beispielsweise reiner Text nicht einfach zwischen und stehen, sondern sollte in einem Paragraph-Element (

) notiert sein. Diese Regeln sind bei transitional milder. Bei dieser Sprachvariante dürfen Sie zum Beispiel reinen Text in den body-Bereich schreiben. Die Variante frameset ist dafür gedacht, Framesets zu definieren. Frames gelten aber als veraltet und werden ab HTML 5 nicht mehr unterstützt. In XHTML 1.1 gibt es keine Sprachvarianten mehr. Es existiert lediglich strict von XHTML 1.0.

3.8.3

Sprache

Die dritte Zeile der index.php lautet: