Kapitel 3 CSS und HTML Das Grundgerüst in Form bringen 59

Transkript

1 4 I n h a l t s v e r z e i c h n i s 2.5 Lernbehinderungen Ausgangslage und Befund Was können wir tun? Gruppe Ausgangslage und Befund Was können wir tun? Kapitel 3 CSS und HTML Das Grundgerüst in Form bringen Ein wenig zur Geschichte Welche Version von HTML sollte ich verwenden? Das HTML-Grundgerüst Eine kurze Einführung in CSS Einleitung Einbinden der CSS-Anweisungen Externe Einbindung als Datei oder direkt im Dokumentenkopf Inline-Styles Selektoren CSS Elementselektoren Mehrmals verwendbar: CSS Klassen ID-Selektoren Kontextselektoren Kindselektoren Universalselektoren Pseudoklassen-Selektoren Attribut-Selektoren Vererbung Positionierung und Boxmodell CSS-Hacks und Browserprobleme Conditional Comments Der *-Hack Schon wieder der Internet Explorer has layout CSS-Tuning... 80

2 I n h a l t s v e r z e i c h n i s 5 Kapitel 4 PHP und Joomla! PHP einbinden Kommentare echo Variablenwerte ausgeben Bedingungen: if-anweisungen else-anweisung Für Profis: Auf Objekte und ihre Werte zugreifen Die Funktion get Kapitel 5 MooTools Warum MooTools? MooTools-Schnellstart Dollar-Funktionen und Events Der MooTools-Core in Aktion Das Klassensystem Das MooTools-Prinzip Weiterführende Links Kapitel 6 Tools HTML-Validator und CSS-Validator Web-Developer-Toolbar Weitere Features der Web-Developer-Toolbar Firebug Die wichtigsten Funktionalitäten im Überblick Hilfetools für die Barrierefreiheit Color-Contrast-Analyzer Accessibility-Extensions für Internet Explorer und Mozilla/Firefox Wave WCAG 2-Checker der Universität Toronto

3 6 I n h a l t s v e r z e i c h n i s TEIL Kapitel 7 Jetzt wird es konkret: Der erste Blick auf die Templates Atomic beez_20/beez Templates im Backend verwalten Der Template-Manager: Styles Der Template-Manager: Templates Die Template-Vorschau Templatedetails Templates installieren Kapitel 8 Die Struktur macht es möglich Das Herzstück, die index.php CSS templatedetails.php Der Images-Ordner Der HTML-Ordner JavaScript-Ordner Language component.php error.php template_thumbnail.png / template_preview.png Favicon.ico Fonts Die index.html Kapitel 9 Die index.php: Das Herzstück Der Dokumentenkopf Safety first: die Sicherheit Welcher Dokumententyp? HTML-Sprachangabe jdoc: include type:head CSS und JavaScript einbinden MooTools einbinden Leserichtung von rechts nach links Jetzt geht es los: der Body Fehlermeldungen und Meldungen

4 I n h a l t s v e r z e i c h n i s 7 Kapitel 10 Die XML-Datei und die Template-Parameter templatedetails.xml: Allgemeines Template-Namen anpassen Dateien und Ordner einbinden Modulpositionen festlegen Die Sprachdateien Template-Parameter: config Eigene Formularfelder hinzufügen und darauf zugreifen Formelemente hinzufügen Kapitel 11 Die Sprachdateien Eigene Sprache hinzufügen Joomla!-Konventionen für die Verwendung von Language-Strings Language-Files in der index.php am Beispiel von Sprungmarken Kapitel 12 Module Dynamik innerhalb der Präsentation jdoc:include Das name-attribut Das Style-Attribut und die Standardstyles Beez-Styles Module flexibel ins Layout integrieren ID und CSS anpassen Das Module Class Suffix Das Menü-Modul Horizontale Navigation mit Subnavigation Ausgeklapptes Menü Einzelne Menüpunkte mit Hilfe von eigenen Klassen stylen Linkimage Individuelle Linktitel vergeben Fazit

5 8 I n h a l t s v e r z e i c h n i s Kapitel 13 Die Standardausgabe individuell gestalten Standardausgabe inspizieren Das Page Class-Suffix Template-Overrides Model-View-Controller Ausgabe ins Template verlagern Ausgabe anpassen Neu eine Ansicht mit unterschiedlicher Ausgabe Kapitel 14 Das Systemtemplate: Ausgabe anpassen und modifizieren Systemmeldungen Einbindung der Nachrichten in die index.php Sprachliche Anpassungen Fehlermeldungen Systemgrafiken austauschen component.php und wie man damit zaubern kann Component-Ansicht mit suchmaschinenfreundlichen URLs Die component.php als Basis für eigene Ansichten offline.php Kapitel 15 Was sonst noch wichtig ist Wenn die Leserichtung sich ändert: RTL RTL-CSS einbinden RTL testen PHP-Browserweiche PHP-Tricks Die Startseite anders aufbauen der Zugriff auf die Views Mit PHP das aktuelle Datum ausgeben Kapitel 16 Die Standardtemplates und ihre Features beez_20 und beez Barrierefreiheit allgemein beez_20: Gestaltung wählbar Position der Navigationsspalte JavaScript und WAI ARIA beez5: HTML5 nutzen Atomic

6 I n h a l t s v e r z e i c h n i s 9 TEIL Kapitel 17 Die praktische Umsetzung Konzept der Beez-Templates Kapitel 18 Schritt für Schritt zum neuen Layout Schritt 1: Navigation positionieren Problem Maßnahme Schritt 2: Mittlere Spalte mit Inhalt füllen Problem Maßnahme Schritt 2 optimieren: Modulpositionen sinnvoll umbenennen Schritt 3: Artikelanzahl anpassen Problem Maßnahme Schritt 4: Header visuell gestalten Problem Maßnahmen Ergebnis Schritt 5: Modulposition für Kopfbild einbinden Problem Maßnahme Schritt 6: Footer anpassen Problem Maßnahme Schritt 7: Mindesthöhe des Inhalts anpassen Problem Schritt 8: Die ersten Tests Schriftvergrößerung Tastaturbedienbarkeit Browsercheck Schritt 9: Typografie anpassen Problem Maßnahme Problem Maßnahme

7 10 I n h a l t s v e r z e i c h n i s Schritt 10: Modulüberschriften formatieren Problem Maßnahme Schritt 11: Startseitenartikel mit Hintergrundbild versehen Abschließende Tests CSS validieren HTML validieren Browsercheck Accessibility-Checks Kapitel 19 Eigene Features integrieren Das Kopfbild ein Hintergrundbild? Modulinhalt bearbeiten CSS anpassen Hintergrundbilder in Modul eigenes HTML Browsercheck HTML5 sinnvoll nutzen HTML5 Overrides einbinden index.php anpassen CSS anpassen Kapitel 20 Abschließende Arbeiten: Der Feinschliff und Erzeugung eines installierbaren Zip-Archivs Feinschliff Stylesheet für den Ausdruck erstellen error.php und offline.php anpassen RTL-Ansicht Unnötige Dateien entfernen Vorschaubilder erstellen Favicon ändern index.php optimieren XML-Datei anpassen Zip-Archiv erzeugen

8 I n h a l t s v e r z e i c h n i s 11 Anhang 301 Nützliche Links Joomla! Assistive Technologien CSS HTML Design Typografie Farben Icons JavaScript WAI ARIA Checkertools Hilfreiche Funktionen Verwendete CSS-Klassen und ihre Elemente Templates Komponenten Module Index 333