Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte

Mit Contao Webseiten erfolgreich gestalten - Konzeption, Umsetzung, Beispielprojekte......Page 1
2 Hilfstools bei der Webentwicklung......Page 4
5 Navigationen in Contao erstellen......Page 5
8 Aufbau einer Website mit Contao......Page 6
10 Suchmaschinenoptimierung......Page 7
Stichwortverzeichnis......Page 8
Einleitung......Page 10
Ziele dieses Buches......Page 11
Was können Sie von diesem Buch erwarten?......Page 12
Und nach dem Buch?......Page 14
Über mich......Page 16
1 Konzeption und Planung der Website......Page 20
1.1.1 Anforderungen an eine Website......Page 21
1.1.4 Prozess......Page 22
1.2.1 Skizzen......Page 23
1.2.2 Moodboards......Page 25
1.3.2 Welche Ziele haben Wireframes?......Page 29
1.3.4 Karten/Haftetiketten......Page 30
1.3.5 Digitale Vorlagen......Page 31
1.3.6 Programme & Websites für die Erstellung von Wireframes......Page 32
1.3.8 Balsamiq......Page 33
1.3.10 Schlussfolgerungen......Page 34
2 Hilfstools bei der Webentwicklung......Page 36
2.1 Web Developers Toolbar......Page 37
2.2 Firebug für Firefox-Browser......Page 41
2.2.2 CSS-Definitionen in Echtzeit bearbeiten......Page 42
2.3 Weitere nützliche Helfer......Page 43
2.3.2 Quick L ocale Switcher......Page 44
2.3.5 HTML Validator......Page 45
2.3.6 GridFox......Page 46
2.3.9 Copy Plain Text......Page 47
2.3.11 HTML Help......Page 48
3 Themes – Organisation in Contao......Page 50
3.1 Theme-Manager......Page 51
3.1.1 Theme-Einstellungen......Page 52
3.2 Exportieren und Importieren eines Theme......Page 54
3.2.2 Import eines Theme......Page 55
3.2.3 Stylesheet für WYSIWYG-Editor TinyMCE......Page 56
3.2.4 Social Networks – Twitter und Facebook......Page 57
3.2.5 Bedienung durch Rechtsklick (Parent View)......Page 58
4 Das CSS-Framework von Contao......Page 60
4.1.1 Über den integrierten CSS-Editor im Contao-Backend......Page 62
4.1.2 Externe CSS-Dokumente in Contao integrieren......Page 64
4.1.3 Externe CSS-Dateien in die Seitenvorlage einbinden......Page 65
4.1.4 Kombination der Erweiterung CssEditor und Firebug......Page 66
5 Navigationen in Contao erstellen......Page 70
5.1 Das Modul Navigationsmenü......Page 72
5.2.1 Beispiel für eine horizontale Navigation (eine Ebene)......Page 73
5.2.2 Beispiel für eine vertikale Navigation (eine Ebene)......Page 79
5.2.3 Beispiel für eine Kombination von horizontaler und vertikaler Navigation......Page 83
6 Menüs mit Spritegrafiken erstellen......Page 90
6.1 Vorarbeiten – Erstellen der Menügrafiken......Page 91
6.2.1 Übersicht der Seitenstruktur......Page 92
6.2.2 CSS-Definitionen......Page 93
6.3 Ein Bild für alle Menüpunkte......Page 95
6.3.1 CSS-Definitionen......Page 96
7 Unterschiedliche Headerbilder pro Seite anzeigen......Page 100
7.1 Mit CSS-Definitionen......Page 101
7.2 Mit Insert-Tags......Page 103
8 Aufbau einer Website mit Contao......Page 106
8.1 Schritt-für-Schritt-Umsetzung der Website......Page 111
8.2 Aufbau der Seitenstruktur......Page 113
8.3 Seitenlayout anlegen......Page 121
8.4 Seitenlayouts der Seitenstruktur zuweisen......Page 123
8.5 Erstellen der CSS-Dateien......Page 125
8.6 CSS-Dateien ins Seitenlayout einbinden......Page 126
8.7 Module erstellen......Page 127
8.7.1 Modul für die Hauptnavigation anlegen......Page 128
8.7.2 Modul für die Unternavigation anlegen......Page 129
8.7.3 Modul für Zufallsbilder erstellen......Page 130
8.8 Module in das Seitenlayout einbinden......Page 131
8.9 Ein Modul für die Fußzeile erstellen......Page 132
8.10 Artikel anlegen......Page 135
8.11 Inhaltselemente in die Artikel einfügen......Page 138
8.11.1 Seite Portfolio mit Inhalten füllen......Page 142
8.11.2 Inhaltselemente werden nebeneinander positioniert......Page 146
8.11.4 Verzeichnisse/Verzeichnisstruktur vorbereiten......Page 149
8.11.5 Bilder vorbereiten......Page 150
8.11.6 Grafiken und Texte des MooTools-Skriptes Mediabox anpassen......Page 155
8.11.7 Visuelles Feintuning der Bildergalerie......Page 157
8.11.8 Schlagschatten den Vorschaubildern hinzufügen......Page 158
8.11.9 Meta-Datei für Bildergalerie verwenden......Page 159
8.12 Ein Kontaktformular erstellen......Page 161
8.12.1 Formularfunktionen erweitern......Page 171
8.13 Reflexionen......Page 172
8.14.1 Transparente PNG-Grafiken auch im Internet Explorer 6......Page 173
8.14.2 Dynamische Schriftersetzung durch Image Replacement-Technik erstellen......Page 175
8.14.3 Image Replacement-Technik Cufón in Contao einbinden......Page 177
8.14.5 Die Erweiterung Slideshow2 in Contao verwenden......Page 179
8.15 Ein Blick auf die CSS-Definitionen......Page 185
9 Arbeiten mit Rastern (Grids)......Page 196
9.1 Aufbau und Konzept des Rastersystems......Page 197
9.2 Seitenstruktur anlegen......Page 199
9.3 Module für die Website erstellen......Page 200
9.3.2 Modul für die Kopfzeile erstellen......Page 201
9.3.3 Modul für die Fußzeile erstellen......Page 202
9.4 Anlegen eines Nachrichtenarchivs......Page 203
9.4.1 Das Modul Nachrichtenliste anlegen......Page 204
9.4.2 Das Modul Nachrichtenleser anlegen......Page 205
9.4.3 Nachrichtentemplates anpassen......Page 206
9.5 Aufbau des Seitenlayouts......Page 209
9.6 Grid-Stylesheets importieren......Page 210
9.7 CSS-Grid anwenden......Page 212
9.7.1 Mehrere Inhaltselemente in einer Spalte anordnen......Page 218
10 Suchmaschinenoptimierung......Page 222
10.1.1 Seitentitel und Beschreibung der Seite......Page 223
10.1.2 Schlüsselworte vergeben......Page 224
10.3 URLs umschreiben......Page 225
10.4 Eine Sitemap in Contao erzeugen......Page 226
10.5 Die Sitemap bei Google anmelden......Page 227
10.6.1 Die Erweiterung Keywords......Page 230
10.7.1 Google Analytics in Contao verwenden......Page 231
10.7.2 Piwik in Contao verwenden......Page 232
11 Veröffentlichung einer Website – Checkliste......Page 234
11.2 Anpassung in den Einstellungen und der .htaccess-Datei......Page 235
11.3.1 Seitentitel und Beschreibung der Seite......Page 237
11.5 Validieren des Quellcodes und der CSS-Dateien......Page 238
11.7 E-Mail-Adressen im Backend kontrollieren......Page 239
11.8 Testen der Webseiten mit den gängigsten Browsern......Page 240
11.9 Workflow zum Abschluss eines Projektes......Page 241
11.10 Code-Snippets Sammlung......Page 242
12 Tipps & Tricks zu Contao......Page 244
12.1.2 Sprachabhängige Bezeichnungen definieren......Page 245
12.2.2 HTML-Tags in Überschriften erlauben......Page 246
12.3 WYSIWYG-Editor auch für Teasertexte......Page 247
12.4 Individuelle WYSIWYG-Editoreinstellungen......Page 248
12.5 Fußzeile über die gesamte Browserbreite verwenden......Page 250
12.6 Medien in Contao verwenden......Page 253
12.6.1 Bildgalerien......Page 255
12.6.2 Audio, Video und Links in der Mediabox......Page 256
D......Page 261
H......Page 262
M......Page 263
S......Page 264
W......Page 265
Z......Page 266
Ins Internet: Weitere Infos zum Buch, Downloads, etc.......Page 0
Copyright......Page 274