Joomla!-Templates: Design und Implementierung

  • Published on
    18-Dec-2016

  • View
    223

  • Download
    3

Embed Size (px)

Transcript

  • berzeugende Vorlagen fr 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 fr Webdesigner

    FRANZIS

    Aus dem Inhalt: Der Grundriss eines

    Joomla!-Templates

    Cascading Style Sheets

    Bilder und Grafikformate

    Favicons

    Hacks fr den Internet Explorer

    Parametertypen

    Bestehende Templates anpassen

    Ein Screendesign erstellen

    Inhaltselemente festlegen

    Mens 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 erklrt, wie ein Joomla!-Template aufgebaut ist, und zeigt, wie Sie mit Photoshop ein eigenesScreendesign entwickeln und in Joomla! umsetzen passend fr allegngigen 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 zusammenhngen.Darber hinaus erfahren Sie, wie Sie vorhandene Templates mit einfachsten Mitteln an Ihre Wnsche anpassen, indem Sie zum Beispiel Farben oder Schriftarten verndern oder Module umstellen.

    Von der Idee zum ScreendesignFr ein komplett selbst gestaltetes Template bentigen Sie ein stimmiges Screendesign. Der Autor zeigt Schritt fr Schritt, wie sich eine solche Vorlage mit Adobe Photoshop erstellen lsst. Er gibt Tipps fr die Gestaltung von Mens, Hintergrnden 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 herauslsen und den Layout-Zonenim Joomla!-Template zuordnen. Sie erfahren, wie Sie mit den CSS-Dateienumgehen mssen und wo Sie welche Daten ablegen. Darber hinaus verrt Alexander Schmidt, wie Sie die Module des Templates aktivieren.

    Optimierung fr alle Browsertypenltere Versionen des Internet Explorers sind dafr berchtigt, 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 fr die Nut-zung des populrenContent-Management-Systems. Schon seitmehreren Jahren realisiert SchmidtInternetauftritte, die auf Joomla! basieren. Darber hinaus hat er sichdarauf spezialisiert, Designvorlagenin hochwertige Joomla!-Templatesumzusetzen, die den modernenWebstandards gengen. Schmidtlebt in Bad Nauheim.

    Auf www.buch.cdDas komplette Beispiel-Template.

    Joomla!-Templates Design und Implementierung

    Joomla!-Templates Design und Implementierung

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

  • Alexander Schmidt

    Joomla!-TemplatesDesign und Implementierung

    7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 1

  • 7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 2

  • Alexander Schmidt

    FRANZIS

    Mit 325 Abbildungen

    Joomla!-Templates Design und Implementierung

    7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 3

  • Bibliografische Information der Deutschen Bibliothek

    Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

    detaillierte Daten sind im Internet ber http://dnb.ddb.de abrufbar.

    Alle Angaben in diesem Buch wurden vom Autor mit grter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer

    Kontrollmanahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschlieen. Der Verlag und der Autor sehen sich deshalb gezwungen,

    darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung fr Folgen, die auf fehlerhafte

    Angaben zurckgehen, bernehmen knnen. Fr die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen

    oder Versionsnummern stellen den bei Redaktionsschluss verfgbaren Informationsstand dar. Verlag und Autor bernehmen keinerlei Ver-

    antwortung oder Haftung fr Vernderungen, die sich aus nicht von ihnen zu vertretenden Umstnden ergeben. Evtl. beigefgte oder zum

    Download angebotene Dateien und Informationen dienen ausschlielich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur

    mit Zustimmung des Lizenzinhabers mglich.

    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 Datentrgern oder im Internet, insbesondere als PDF, ist nur mit ausdrcklicher 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 GraserSatz: DTP-Satz A. Kugge, Mnchenart & design: www.ideehoch2.deDruck: Neografia, a.s. Printed in Slovakia

    ISBN 978-3-7723-7356-5

    7356-5 Titelei:6282-8 Titelei 07.10.2009 15:50 Uhr Seite 4

    http://dnb.ddb.dehttp://www.ideehoch2.de

  • 5

    Einleitung

    Dieses Buch richtet sich an alle, die ihre eigenen, individuellen Templates fr Joomla gestalten wollen. Anfnger fi nden hier einen umfangreichen Einstieg in die Template-Ent-wicklung, und professionelle Webdesigner werden ihre Kenntnisse um eine ausgeklgelte Template-Engine erweitern knnen.

    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 Fhigkeiten, die Sie beim Durcharbeiten des Buchs erwerben, werden Ihnen spter nicht nur unter Joomla von Nutzen sein, sondern allge-mein im Webdesign.

    In den einzelnen Kapiteln werden Ihnen die Ablufe exakt aufeinanderfolgend erklrt. In der Praxis zeigt sich jedoch, dass man Programme zum Arbeiten und Dateien zum Bearbeiten parallel geffnet hat und zwischen ihnen hin und her switcht. So beschreibt dieses Buch das durchaus als Super-Tutorial gesehen werden kann nur eine mgliche Vorgehensweise. Wenn Sie dieses Werk einmal durchgearbeitet haben, werden Sie Ihre eigenen Ablufe fi nden und das Webdesign als Handwerk effi zienter nutzen knnen.

    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 Verfgung, knnen Sie auch ein anderes Bildbearbei-tungsprogramm wie zum Beispiel GIMP verwenden. Die Screendesign-Anleitung knnen 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 fr Joomla selbst schaffen, indem Sie eine Testumgebung installieren. Sie setzen dabei den Webserver Apache auf, der die Programmiersprache PHP untersttzt, 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-drcklich bentigt, knnen 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 sptere Funktionalitt 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 weitergefhrt wird.

    Ein weiterer Bestandteil der Template-Entwicklung ist die Parametrisierung. Mithilfe von Parametern knnen Sie ber das Backend Einfl uss auf das Template nehmen und es beispielsweise in ganz anderen Farben erstrahlen lassen. Durch eine einfache Auswahl knnen Sie ein anderes Cascading Style Sheet aussuchen, um die Website in einem neuen Licht zu prsentieren.

    Durch Overrides knnen 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, knnen Sie sie mit Sprachdateien fr die ganze Welt zur Verfgung stellen.

    Mit dem JavaScript-Framework Mootools, das Joomla von Haus aus mitbringt, mssen Sie weniger codieren und knnen schnell und effektiv das Fundament fr animierte Effek-te und Elemente legen.

    Schlielich werden Sie die Template-Engine von Joomla besser kennenlernen, die kaum Wnsche offen lsst. Schon bald werden Sie merken, dass die Entwicklung richtig Spa machen kann.

    Anmerkungen

    Der Referenzteil stellt Ihnen eine Auswahl ntzlicher Programme und Webseiten vor, die Sie fr die Template-Entwicklung gut gebrauchen knnen. Die gebruchlichsten Template-Befehle fi nden Sie zum schnellen Nachschlagen ebenfalls dort. Ist Ihnen eine

    7356 Joomla Templates_NEU.indd 67356 Joomla Templates_NEU.indd 6 05.10.2009 10:34:2605.10.2009 10:34:26

  • 7Einleitung

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

    Dateien zum Buch

    Alle ntigen 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 knnen Sie dort ebenfalls begutachten.

    7356 Joomla Templates_NEU.indd 77356 Joomla Templates_NEU.indd 7 05.10.2009 10:34:2605.10.2009 10:34:26

    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 uneingeschrnkt untersttzten und einige Entbehrungen auf sich genommen haben.

    Alexander Konrad Johannes Schmidt

    Bad Nauheim, im September 2009

    7356 Joomla Templates_NEU.indd 87356 Joomla Templates_NEU.indd 8 05.10.2009 10:34:2605.10.2009 10:34:26

  • 9

    Inhalt

    1 Das Joomla-Template ................................................................................... 131.1 Was ist ein Joomla-Template? .......................................................... 131.2 Wieso werden Templates eingesetzt? ............................................... 161.3 Die Standard-Templates von Joomla ................................................. 17

    2 Die Joomla-Testumgebung ........................................................................... 192.1 Lokaler Webserver mit XAMPP ......................................................... 192.1.1 XAMPP fr Windows (XP, Vista Windows 7) ........................................202.1.2 XAMPP fr Mac (OS X) .......................................................................272.1.3 XAMPP fr Linux (Ubuntu) .................................................................312.2 Die Testumgebung einrichten .......................................................... 342.3 Die Installation von Joomla .............................................................. 37

    3 Der Aufbau eines Templates ......................................................................... 473.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 fr den Internet Explorer..........................................................603.4 Fehlseite ......................................................................................... 623.5 Favicon ........................................................................................... 623.6 Overrides ........................................................................................ 633.7 Bilder .............................................................................................. 653.7.1 Grafi kformate ....................................................................................653.7.2 Bildgre ..........................................................................................663.7.3 Transparenz ......................................................................................663.7.4 Der PNG-Fix .......................................................................................673.7.5 Einsatzgebiete ..................................................................................68

    7356 Joomla Templates_NEU.indd 97356 Joomla Templates_NEU.indd 9 05.10.2009 10:34:2605.10.2009 10:34:26

  • 10 Inhalt

    3.8 Index ............................................................................................... 683.8.1 Zugriffsschutz ...................................................................................693.8.2 Dokumenttyp (Doctype) ....................................................................703.8.3 Sprache ............................................................................................713.8.4 Header-Informationen .......................................................................713.8.5 Cascading Style Sheets .......