Inhaltsverzeichnis

Einleitung 1

Ziele dieses Buches 2Was können Sie von diesem Buch erwarten? 3Und nach dem Buch? 5

Übermich 7

Kapitel1 KonzeptionundPlanungderWebsite 11

1.1 Grundüberlegungen 121.1.1 Anforderungen an eine Website 121.1.2 Umfang einer Website 131.1.3 Zielgruppen 131.1.4 Prozess 131.1.5 Prozessablauf – Entscheidungskompetenzen 141.2 Methoden der Konzeption und Planung 141.2.1 Skizzen 141.2.2 Moodboards 161.3 Wireframes 201.3.1 Was sind Wireframes? 201.3.2 Welche Ziele haben Wireframes? 201.3.3 Skizzen 211.3.4 Karten/Haftetiketten 211.3.5 Digitale Vorlagen 221.3.6 Programme & Websites für die Erstellung von Wireframes 231.3.7 Mockingbird 241.3.8 Balsamiq 241.3.9 Pencil 251.3.10 Schlussfolgerungen 25

Kapitel2 HilfstoolsbeiderWebentwicklung 27

2.1 Web Developers Toolbar 282.2 Firebug für Firefox-Browser 322.2.1 Seitenelemente untersuchen 332.2.2 CSS-Definitionen in Echtzeit bearbeiten 332.2.3 Ladezeiten ermitteln und optimieren 34

I n h a l t s v e r z e i c h n i sIV

2.3 Weitere nützliche Helfer 342.3.1 CacheStatus 352.3.2 Quick Locale Switcher 352.3.3 Palette Grabber 362.3.4 MeasureIt 362.3.5 HTML Validator 362.3.6 GridFox 372.3.7 960 Gridder 382.3.8 Fireshot 382.3.9 Copy Plain Text 382.3.10 ColorZilla 392.3.11 HTML Help 39

Kapitel3 Themes–OrganisationinContao 41

3.1 Theme-Manager 423.1.1 Theme-Einstellungen 433.2 Exportieren und Importieren eines Theme 453.2.1 Export eines Theme 463.2.2 Import eines Theme 463.2.3 Stylesheet für WYSIWYG-Editor TinyMCE 473.2.4 Social Networks – Twitter und Facebook 483.2.5 Bedienung durch Rechtsklick (Parent View) 49

Kapitel4 DasCSS-FrameworkvonContao 51

4.1 CSS-Dokumente bearbeiten 534.1.1 Über den integrierten CSS-Editor im Contao-Backend 534.1.2 Externe CSS-Dokumente in Contao integrieren 554.1.3 Externe CSS-Dateien in die Seitenvorlage einbinden 564.1.4 Kombination der Erweiterung CssEditor und Firebug 57

Kapitel5 NavigationeninContaoerstellen 61

5.1 Das Modul Navigationsmenü 635.2 Anwendungsbeispiele für Navigationen 645.2.1 Beispiel für eine horizontale Navigation (eine Ebene) 645.2.2 Beispiel für eine vertikale Navigation (eine Ebene) 705.2.3 Beispiel für eine Kombination von horizontaler und vertikaler Navigation 74

I n h a l t s v e r z e i c h n i s V

Kapitel6 MenüsmitSpritegrafikenerstellen 81

6.1 Vorarbeiten – Erstellen der Menügrafiken 826.2 Ein Bild pro Menüpunkt 836.2.1 Übersicht der Seitenstruktur 836.2.2 CSS-Definitionen 846.3 Ein Bild für alle Menüpunkte 866.3.1 CSS-Definitionen 87

Kapitel7 UnterschiedlicheHeaderbilderproSeiteanzeigen 91

7.1 Mit CSS-Definitionen 927.2 Mit Insert-Tags 94

Kapitel8 AufbaueinerWebsitemitContao 97

8.1 Schritt-für-Schritt-Umsetzung der Website 1028.2 Aufbau der Seitenstruktur 1048.3 Seitenlayout anlegen 1128.4 Seitenlayouts der Seitenstruktur zuweisen 1148.5 Erstellen der CSS-Dateien 1168.6 CSS-Dateien ins Seitenlayout einbinden 1178.7 Module erstellen 1188.7.1 Modul für die Hauptnavigation anlegen 1198.7.2 Modul für die Unternavigation anlegen 1208.7.3 Modul für Zufallsbilder erstellen 1218.8 Module in das Seitenlayout einbinden 1228.9 Ein Modul für die Fußzeile erstellen 1238.10 Artikel anlegen 1268.11 Inhaltselemente in die Artikel einfügen 1298.11.1 Seite Portfolio mit Inhalten füllen 1338.11.2 Inhaltselemente werden nebeneinander positioniert 1378.11.3 Bildgalerie für einzelne Portfolioseiten einrichten 1408.11.4 Verzeichnisse/Verzeichnisstruktur vorbereiten 1408.11.5 Bilder vorbereiten 1418.11.6 Grafiken und Texte des MooTools-Skriptes Mediabox anpassen 1468.11.7 Visuelles Feintuning der Bildergalerie 1488.11.8 Schlagschatten den Vorschaubildern hinzufügen 1498.11.9 Meta-Datei für Bildergalerie verwenden 1508.12 Ein Kontaktformular erstellen 1528.12.1 Formularfunktionen erweitern 1628.13 Reflexionen 1638.14 Besonderheiten der Fotografen-Website 1648.14.1 Transparente PNG-Grafiken auch im Internet Explorer 6 164

I n h a l t s v e r z e i c h n i sVI

8.14.2 Dynamische Schriftersetzung durch Image Replacement-Technik erstellen 1668.14.3 Image Replacement-Technik Cufón in Contao einbinden 1688.14.4 Stapellauf oder: Das wäre auch noch schön … 1708.14.5 Die Erweiterung Slideshow2 in Contao verwenden 1708.15 Ein Blick auf die CSS-Definitionen 176

Kapitel9 ArbeitenmitRastern(Grids) 187

9.1 Aufbau und Konzept des Rastersystems 1889.2 Seitenstruktur anlegen 1909.3 Module für die Website erstellen 1919.3.1 Das Modul Zufallsbild einrichten 1929.3.2 Modul für die Kopfzeile erstellen 1929.3.3 Modul für die Fußzeile erstellen 1939.4 Anlegen eines Nachrichtenarchivs 1949.4.1 Das Modul Nachrichtenliste anlegen 1959.4.2 Das Modul Nachrichtenleser anlegen 1969.4.3 Nachrichtentemplates anpassen 1979.5 Aufbau des Seitenlayouts 2009.6 Grid-Stylesheets importieren 2019.7 CSS-Grid anwenden 2039.7.1 Mehrere Inhaltselemente in einer Spalte anordnen 209

Kapitel10 Suchmaschinenoptimierung 213

10.1 Suchmaschinenrelevante Einstellungen 21410.1.1 Seitentitel und Beschreibung der Seite 21410.1.2 Schlüsselworte vergeben 21510.2 Auszeichnungen überprüfen 21610.3 URLs umschreiben 21610.4 Eine Sitemap in Contao erzeugen 21710.5 Die Sitemap bei Google anmelden 21810.6 Empfohlene Erweiterungen 22110.6.1 Die Erweiterung Keywords 22110.6.2 Die Erweiterung Google Sitemap 22210.7 Webstatistiken 22210.7.1 Google Analytics in Contao verwenden 22210.7.2 Piwik in Contao verwenden 223

I n h a l t s v e r z e i c h n i s VII

Kapitel11 VeröffentlichungeinerWebsite–Checkliste 225

11.1 Contao in einem Unterverzeichnis 22611.2 Anpassung in den Einstellungen und der .htaccess-Datei 22611.3 Suchmaschinenrelevante Einträge vorgenommen? 22811.3.1 Seitentitel und Beschreibung der Seite 22811.4 Sprachen-Fallback eingerichtet? 22911.5 Validieren des Quellcodes und der CSS-Dateien 22911.6 Interne und externe Links überprüfen 23011.7 E-Mail-Adressen im Backend kontrollieren 23011.8 Testen der Webseiten mit den gängigsten Browsern 23111.9 Workflow zum Abschluss eines Projektes 23211.10 Code-Snippets Sammlung 233

Kapitel12 Tipps&TrickszuContao 235

12.1 Einzelne Sprachlabels anpassen 23612.1.1 Weiterlesen-Link verändern 23612.1.2 Sprachabhängige Bezeichnungen definieren 23612.2 Einzelne DCA-Werte anpassen 23712.2.1 HTML-Tags im Seitentitel erlauben 23712.2.2 HTML-Tags in Überschriften erlauben 23712.2.3 Felder der Mitgliederregistrierung anpassen 23812.3 WYSIWYG-Editor auch für Teasertexte 23812.4 Individuelle WYSIWYG-Editoreinstellungen 23912.5 Fußzeile über die gesamte Browserbreite verwenden 24112.6 Medien in Contao verwenden 24412.6.1 Bildgalerien 24612.6.2 Audio, Video und Links in der Mediabox 247

Stichwortverzeichnis 252