Inhaltsverzeichnis. Teil I Grundlagen und Theorie Danke schön!... 17

Transkript

1

2 Danke schön! Einleitung Erforderliche Kenntnisse Aufbau des Buches Website und Demoserver zum Buch Der Downloadbereich Der Demoserver Wie Sie mit dem Buch am besten arbeiten Wissenswertes: Eigene Templates entwickeln Ein paar Worte über uns Ein paar Referenzprojekte Teil I Grundlagen und Theorie Web-Grundlagen und -Begriffe In diesem Kapitel lernen Sie Eine Website entwickeln Konzeption Technik und Provider Weblayout Grobstruktur des Weblayouts Farben und Farbauswahl Schriften im Web Grafische Entwicklung des Weblayouts Was ist ein CMS? Merkmale eines CMS Vorteile von Joomla! Was sind Templates? Frontend-Templates Backend-Templates Technik und Software des Titels»Joomla! 2.5 Templates«(ISBN ) 2012 by Verlagsgruppe Hüthig Jehle Rehm GmbH, Heidelberg. Nähere Informationen unter: 5

3 2.6.1 Grafikprogramm UTF8-fähiger Editor FTP-Programm Lokale Serverumgebung Lokales Joomla!-System Die Template-Verwaltung In diesem Kapitel lernen Sie Template-Verwaltung Frontend-Template ändern Verschiedene Frontend-Templates Template-Verwaltung > Stile Template-Verwaltung > Templates Template löschen Template per FTP löschen Neues Template installieren Template-Installation im Backend Mögliche Fehlerquellen Template per FTP hochladen Backend-Installation oder FTP-Upload? Templates aus dem Netz Joomla!-Template-Portale Fertige Templates Templates: Look & Feel für die Website In diesem Kapitel lernen Sie Verzeichnisse und Dateien Die Beispiel-Templates Template-Pfad Verzeichnisse eines Templates Template-Dateien Template-Verzeichnisse Template-Dateien programmieren Die templatedetails.xml Zeichensatz und DocType XML-Wurzelelement Name des Templates Meta-Angaben Verzeichnisse, Dateien und Bilder

4 4.3.6 Modulpositionen definieren Sprachdateien Die index.php Zeichensatz einbinden Dokumententyp festlegen Sprache festlegen Meta-Daten einbauen CSS-Datei(en) einbauen Module einbauen Inhalte einbauen Systemmeldungen einbauen Grundgerüst der index.php Die template.css Weitere CSS-Dateien Praxistipps: CSS-Entwicklung Vorschaubilder eines Templates Weitere Template-Dateien Die index.html Die component.php Joomla! und CSS In diesem Kapitel lernen Sie Erforderliche Kenntnisse Vorteile: CSS-basierte Layouts CSS-Grundbegriffe Was sind Cascading Style Sheets? Vererbung: Eltern-Kind-Elemente Aufbau von Stylesheets Universal-Selektoren Element-Selektoren Gruppen-Selektoren Kontextsensitive Selektoren Klassen-Selektoren ID-Selektoren Attribut-Selektoren Pseudoelement-Selektoren CSS-Hacks: Sinn und Zweck Das Box-Modell Der Star-HTML-Hack Der Star-Plus-HTML-Hack

5 5.5 Conditional Comments Aufbau CSS-basiertes Layout Beispiel Beispiel Die float-angabe Das CSS-Konzept von Joomla! Template-spezifische CSS-Angaben Joomla!-spezifische CSS-Angaben Zusammenfassung: Joomla!-spezifische CSS-Angaben Was sind Suffixe? Beispiel 1: Suffixe Suffix: Menü»Über Joomla!« Suffix: Menü»Diese Site« Suffixe im Seitenquelltext Quellcode der beiden Menüs Zusammengesetzte CSS-Klasse Aktuelle CSS-Angaben der Menü-Überschriften Ziel: Unterschiedliche Menü-Überschriften Neue Suffixe hinterlegen Suffixe im Seitenquelltext CSS-Angaben hinzufügen Frontend: Unterschiedliche Menü-Überschriften checken Beispiel 2: Suffixe Beispielsite im Frontend Menü-Überschriften mit unterschiedlichen Hintergrundfarben Suffixe für die Menüs eintragen Suffixe im Seitenquelltext CSS-Angaben hinzufügen Frontend: Menü-Überschriften und Hintergrundfarben checken Hilfreiche Tools Firebug Web-Developer-Leiste IE-Toolbar IE-Tester Hilfreiche Links

6 6 Module: Bausteine für die Website In diesem Kapitel lernen Sie Allgemeines zu Modulen Das Baukastenprinzip Ein paar Joomla!-Standardmodule Ein paar Joomla!-Zusatzmodule jdoc-befehl: Module einbauen Module verwalten Modul-Verwaltung Modul bearbeiten Parameter: Modulklassensuffix Das Menümodul Neues Menümodul anlegen Module im Template einbauen jdoc-befehl Modulpositionen definieren Modulpositionen zuweisen Gültige Attribute im jdoc-befehl Das type-attribut Das name-attribut Das style-attribut Chrome Style: style="none" Chrome Style: style="xhtml" Chrome Style: style="table" Eigene Chrome Styles definieren Module layouten Überblick: Die Suffixe Modulklassensuffix Modulklassensuffix: Wichtige Infos! Menüklassensuffix Beispiel: Menüklassensuffix Menüklassensuffix: Wichtige Infos! Seitenklasse-Suffix Menüs: Die Navigation der Website In diesem Kapitel lernen Sie Allgemeines zu Menüs Benutzerfreundliche Navigation Menüs verwalten Aufbau der Menü-Verwaltung

7 7.4 Neue Menüs Beispiel: Neues Menü erstellen Vorschau: Neues Menü Menü anlegen Exemplarische Menüeinträge Im Backend alles komplett! Menü veröffentlichen Menümodul anlegen Kontrolle im Frontend Zusammenfassung Darstellungen der Menüs Standard-Darstellungen Menü-Darstellungen: Beispiele Vertikale Menüs Beispiel: Vertikales Menü Das Menümodul Parameter im Menümodul Quellcode und CSS-Angaben CSS-Styling Horizontale Menüs Beispiel: Horizontales Menü Parameter im Menümodul CSS-Styling Splitmenüs Beispiel: Splitmenü Splitmenü in der Menü-Verwaltung Menümodule und Parameter Grafische Menüs Zusatzmodule Extended Menu Inhalte: Die Website mit Leben füllen In diesem Kapitel lernen Sie Inhalte verwalten Aufbau der Inhaltsverwaltung Wer hat Zugriff auf die Inhaltsverwaltung? Inhalte im Template einbauen Inhalte an Modulposition anzeigen Inhalte und Darstellungsformen

8 8.6 Darstellung: Hauptbeiträge Vorschau im Frontend Die Parameter Quellcode untersuchen CSS-Styling Zusammenfassung Darstellung: Kategorieblog Vorschau im Frontend Die Parameter Quellcode untersuchen CSS-Styling Darstellung: Alle Kategorien auflisten Vorschau im Frontend Quellcode untersuchen Darstellung: Kategorieliste Vorschau im Frontend Quellcode untersuchen Darstellung: Einzelner Beitrag Vorschau im Frontend Quellcode untersuchen Weitere Darstellungen und Komponenten Seitenklasse-Suffix Beispiel: Seitenklasse-Suffix Vorschau im Frontend Quellcode untersuchen Seitenklasse-Suffix eintragen CSS-Angaben hinzufügen Kontrolle im Frontend Nützliches für den Joomla!-Alltag In diesem Kapitel finden Sie weiterführende Infos Lokale Serverumgebung einrichten Lokale Serverumgebung unter Windows Lokale Serverumgebung am Mac Joomla! lokal installieren Wissenswertes zu Favicons Favicon in Photoshop erstellen Online-Favicon-Generator

9 9.5 Schriften mit Google Web Fonts HTML-Angaben einbetten Beispiel: Beitragstitel mit Google Fonts Druckversion erstellen Die component.php Beispiel: Druckversion im Sportsfreunde-Template Eigene Fehlerseite erstellen Aufbau und Quellcode Module einbauen Beispiel: 404-Fehlerseite Eigene Chrome Styles definieren Beispiel: Eigene Chrome Styles Notwendige Schritte modules.php: modchrome-funktion Ausgabe im Quellcode Model-View-Controller und Template-Overrides com_content: Ordnerstruktur Einzelner Beitrag: Ordner der Standardausgabe Einzelner Beitrag: Ordner der Overrides Einzelner Beitrag: Overrides anlegen Schaubilder: Standardausgabe Overrides Template-Parameter Beschreibung und Syntax Parameter im Atomic-Template einbauen Überblick: Template-Befehle Allgemeine Template-Befehle jdoc-befehle Nützliche Code-Schnipsel IF-Abfrage eine Modulposition IF-Abfrage zwei Modulpositionen Modulpositionen zählen Datum und Uhrzeit Keywords anzeigen Username auslesen Login/Logout-Link Layoutwechsel komponentengesteuert Layoutwechsel modulgesteuert Tooltipps

10 Teil II Praxis Praxis: Das Grundlayout entwickeln Aufbau der Praxiskapitel Demoserver und Download-Dateien Zip-Paket zum Praxiskapitel Template-Entwicklung: Der Arbeitsprozess Vorbereitungen Programmierung der Template-Dateien Module und Menüs einbauen Befüllung: Inhalte einbauen Vorstellung: Praxisbeispiel Sportsfreunde Entwicklungsphasen im Überblick Strukturbaum Das Grundlayout Kopfteil Der Hauptteil Liste der Template-Dateien Das Sportsfreunde-Template entwickeln Phase 1: Vorbereitung Verzeichnisse anlegen Dateien anlegen Grafiken und Bilder Layoutvorlage: Schneiden Einteilung der <div>-elemente Die index.php Der Quellcode Die ersten Zeilen (1 8) Definition des Doctype Der Header <head> Meta-Angaben Einbinden der CSS-Dateien Container öffnen Der Kopfteil Die Bildleiste Der Hauptteil Spalte Links Spalte Rechts Gesamter Quellcode der index.php

11 10.7 Die template.css Scrollbalken immer anzeigen Der CSS-Universalselektor: * body: Grundformatierungen Ein paar globale Formate Der Container (#container) Der Kopfteil Die Bildleiste Die templatedetails.xml Quellcode der XML-Datei Vorschaubilder template_preview.png template_thumbnail.png Vorschaubilder checken Favicon Favicon in Photoshop erstellen Favicon online erstellen Wichtig für ein Favicon Die index.html Sportsfreunde-Template installieren Template per FTP hochladen Template im Backend installieren Sportsfreunde-Template als Standard Kontrolle im Frontend Test: Modul und Inhalte einbauen Kontrolle im Frontend Praxis: Menüs und Module einbauen Demoserver und Download-Dateien Die einzelnen Aufgaben Modulpositionen festlegen Vorgesehene Modulpositionen Modulpositionen hinzufügen Module im Template einbauen Sportmenü (1. Ebene) Meist gelesen Bildleiste und Fotos Suche Sportmenü (2. Ebene)

12 Wunschmodule Breadcrumbs Modulverwaltung: Ordnung schaffen! Standard-Module konfigurieren und layouten Modul: Meist gelesen Modul: Suche Modul: Anmelden Modul: Breadcrumbs Das Sportmenü Hintergrundinfos und Vorbereitung Kategorien und Beiträge anlegen Sportmenü anlegen und Menüeinträge einbauen Menü-Verwaltung: Ordnung schaffen! Das Sportmenü anlegen Menüeinträge anlegen Menümodule anlegen Layoutanpassungen Erste Menüebene Zweite Menüebene Praxis: Inhalte und Feintuning Demoserver und Download-Dateien Themenblöcke und Aufgaben Die einzelnen Aufgaben Benötigte Zusatzmodule Global-News-Modul Flexheader Zusatzmodule installieren Global-News-Modul konfigurieren Einbau im Template Parameter im Überblick Parameter einstellen Zwischencheck im Frontend CSS-Styling Layoutcheck im Frontend Flexheader-Modul konfigurieren Einbau im Template Parameter im Überblick Parameter einstellen

13 Bilderverzeichnis anlegen Bilder bereitstellen Bilder der zwei anderen Sportkategorien Zweite CSS-Datei für die Inhalte Die editor.css anlegen editor.css im Sportsfreunde-Template integrieren Einzelnen Beitrag layouten Beispielformate im Tennisbeitrag CSS-Angaben für den Beitrag Die Startseite layouten Beispielformate für die Startseite CSS-Angaben für Spaltenlayout Parameter Startseiten-Menüeintrag Letzter Layoutcheck ein paar Worte zum Schluss A Quellenverzeichnis A.1 Bilder und Grafiken A.2 Wikipedia-Texte Stichwortverzeichnis