Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Für wen ist dieses Buch?
13
Wie ist das Buch aufgebaut?
14
Die Website zum Buch
15
1 Ein eigener Webauftritt in drei Minuten
17
1.1 Die Visitenkarte des Zauberers
17
1.1.1 Auswahl des Anbieters
18
1.1.2 Anmeldung
19
1.2 Welche Technik lässt das Web ticken?
24
1.2.1 Seite oder Site?
26
1.2.2 Domain
27
1.3 Fazit
27
2 Wer braucht was – die eigene Website planen
29
2.1 Wie sieht eine gute Website aus?
29
2.2 Warum wollen Sie eine Website?
31
2.3 Was? Wen? Wie? Womit?
32
2.3.1 Was wollen Sie erreichen?
32
2.3.2 Wen wollen Sie ansprechen?
33
2.3.3 Wie wollen Sie Ihr Ziel erreichen?
33
2.3.4 Womit wollen Sie arbeiten?
33
2.3.5 Beispiel: Tangoschule »Aro Argentino«
34
2.4 Umsetzung planen
36
2.4.1 Sitemap – Seitenübersicht
36
2.4.2 Zeitplan
37
2.5 Fazit
39
3 Ein besserer Webauftritt in drei Stunden
41
3.1 Für den Dienst anmelden und das Blog einrichten
42
3.1.1 Ein Google-Nutzerkonto anlegen
43
3.1.2 Ein neues Blog anlegen
49
3.2 Den Inhalt erstellen und das Layout anpassen
52
3.2.1 Der erste Blogeintrag
53
3.2.2 Das Layout ändern
57
3.2.3 Die Unterseiten erstellen
62
3.3 Die Gestaltung und wichtige Einstellungen ändern
72
3.3.1 Die Gestaltungsvorlage ändern und anpassen
73
3.3.2 Wichtige Einstellungen anpassen
81
3.4 Fazit
85
4 Die ersten Schritte mit HTML und CSS
87
4.1 Die Vorteile einer eigenen Website
87
4.2 Alle Webseiten bestehen aus HTML
88
4.3 Sie schreiben selbst HTML
92
4.4 Woher kommt die Gestaltung?
101
4.4.1 Das style-Attribut
101
4.4.2 Das style-Element
103
4.4.3 Die externe CSS-Datei
106
4.5 Das richtige Werkzeug – der HTML-Editor
110
4.5.1 Was ein HTML-Editor für Einsteiger können sollte
111
4.5.2 Empfehlenswerte HTML-Editoren
112
4.6 Besser lesbares HTML für Browser und Mensch
116
4.6.1 Woher kommen HTML und CSS?
117
4.6.2 HTML5 – was bedeutet das?
118
4.6.3 Der doctype
119
4.6.4 Das charset
119
4.6.5 Schaffen Sie Platz für mehr Übersicht
121
4.6.6 Notizen für Sie selbst: Kommentare
122
4.6.7 Validieren Sie Ihre Seiten
123
4.7 Fazit
124
5 Die eigene Website erstellen
125
5.1 Das Konzept
126
5.1.1 Die Ziele formulieren
126
5.1.2 Den Inhalt konzipieren
127
5.1.3 Die Gestaltung konzipieren
127
5.2 Den Inhalt mit HTML5 anlegen
129
5.2.1 Die Startseite
131
5.2.2 Die Praxisseite
138
5.2.3 Die Teamseite
142
5.2.4 Die Kontaktseite
143
5.3 Die Gestaltung mit CSS3
145
5.3.1 Die Layoutelemente und ihre Darstellung im Browser
146
5.3.2 Feste oder flexible Abmessungen?
153
5.3.3 Die Abmessungen der Layoutelemente
154
5.3.4 Die Position der Layoutelemente
157
5.3.5 Die Gestaltung verfeinern
173
5.4 Fazit
196
6 Die eigene Website im Internet
199
6.1 Die Website ins Internet bringen
199
6.1.1 Speicherplatz auf einem Webserver
199
6.1.2 FTP – Dateien auf den Webserver kopieren
202
6.1.3 Berechtigungen und die .htaccess-Datei – so konfigurieren Sie, was Besucher sehen können
205
6.1.4 Eine eigene Domain – Ihre Adresse im Web
207
6.1.5 Das Favicon
208
6.2 Browser ist nicht gleich Browser
210
6.2.1 Die Unterschiede in der Darstellung herausfinden
210
6.2.2 Die Unterschiede in der Darstellung ausgleichen
216
6.3 Bildschirm ist nicht gleich Bildschirm
224
6.3.1 Was passiert bei veränderter Fenstergröße?
225
6.3.2 Relative Angaben statt pixelgenauer Werte
227
6.3.3 Mehrere Layouts mit festen Werten oder ein Layout mit flexiblen Werten?
231
6.3.4 Ein separates Stylesheet für schmale Bildschirme
234
6.4 Gerät ist nicht gleich Gerät
248
6.4.1 Was muss man bei Touchbedienung beachten?
249
6.4.2 Ein separates Stylesheet für Drucker
251
6.5 Mit Neugier zu immer besseren Websites
255
6.6 Fazit
257
7 Ein Kontaktformular anlegen
259
7.1 Kontaktformular oder E-Mail-Adresse?
259
7.2 Pflichtangaben zum Kontakt
260
7.3 Die Standardlösung
260
7.4 Ein einfaches Kontaktformular
261
7.5 Planung und Gestaltung
265
7.5.1 Planung
265
7.5.2 Gestaltung
265
7.6 Der HTML-Code für unsere Arzt-Beispielsite
266
7.7 Das Script auf dem Server
269
7.8 Fazit
273
8 Mehr Interaktivität mit JavaScript
275
8.1 Das erste JavaScript
276
8.1.1 Was tun, wenn JavaScript nicht aktiv ist?
278
8.2 JavaScript und HTML trennen
278
8.3 Funktionen
280
8.4 Variablen
284
8.5 Arrays
287
8.5.1 Mehrdimensionale Arrays
288
8.6 Ereignisse
288
8.7 Beispiel: Ein schlaues Formular
289
8.7.1 Den Cursor versetzen
289
8.7.2 Kommentarfeld prüfen
291
8.7.3 Alternative zum Prüfen des Kommentarfelds
294
8.7.4 E-Mail-Adresse prüfen
295
8.8 Text auf der Seite einfügen
298
8.9 Text auf der Seite elegant ändern
300
8.10 Auf Fehlersuche – Debugging
304
8.10.1 Debuggen mit Firebug
304
8.10.2 Debuggen mit Safari
309
8.11 Fazit
309
9 Die Site spielend finden und benutzen – Suchmaschinenoptimierung, Usability, Accessibility
311
9.1 Suchmaschinenoptimierung
312
9.1.1 Wie sucht eine Suchmaschine?
313
9.1.2 PageRank
314
9.1.3 Suchmaschinen wollen auch nur Menschen sein
316
9.1.4 Schwarze Magie hilft nicht
318
9.1.5 Bezahlte Suchergebnisse?
318
9.1.6 SEO für die eigene Website
319
9.2 Usability – Benutzerfreundlichkeit
335
9.2.1 Der wichtigste Grundsatz: Nachdenken
336
9.2.2 Usability von Anfang an
336
9.2.3 Die häufigsten Fehler vermeiden
337
9.3 Accessibility – Barrierefreiheit
338
9.4 Fazit
339
10 Noch mehr Inhalt – Videos, Fotos, Karten und soziale Netze einbinden
341
10.1 Google Maps
341
10.2 YouTube
344
10.2.1 Ein Video einbinden
345
10.2.2 Ein Video hochladen
346
10.2.3 Alternativen zu YouTube
347
10.3 Fotodienste – Flickr und Picasa
347
10.4 Slideshare
350
10.5 Soziale Netzwerke – Facebook und Twitter
351
10.5.1 Facebook-Buttons
351
10.5.2 Datenschutz bei Facebook
353
10.5.3 Twitter
354
10.6 Fazit
356
11 Marketing und Werbung – Gutes tun und darüber reden
357
11.1 Klassische Werbung
358
11.2 Werbung im Internet
359
11.2.1 Google AdWords
360
11.2.2 Facebook-Anzeigen
367
11.3 Marketing im Internet
368
11.3.1 Organische Links
368
11.3.2 Linktausch
369
11.3.3 Verzeichnisse
369
11.3.4 Facebook
370
11.3.5 Twitter
372
11.3.6 Zeitungen, Zeitschriften, Blogs
373
11.3.7 Kommentare in Blogs und Foren
374
11.3.8 XING
375
11.3.9 Podcasts
375
11.3.10 Google Places, Facebook-Angebote und Foursquare
377
11.3.11 Wikipedia
378
11.3.12 PR-Portale
378
11.4 Fazit
379
12 Mit der eigenen Website Geld verdienen
381
12.1 Welche Möglichkeiten gibt es?
381
12.1.1 Der Webshop
382
12.1.2 Produktunabhängige Zahlsysteme
383
12.1.3 Direkte Spenden und Abrechnung über Flattr
384
12.2 Ein Beispielwebshop – Aro Argentinos DVD-Verkauf
386
12.2.1 Die Situation
386
12.2.2 Die Lösung
386
12.2.3 Die Umsetzung
387
12.3 Fazit
392
13 Starke Werkzeuge – so nutzen Sie Ihr neues Wissen für noch bessere Websites
393
13.1 Was Ihnen Ihr neues Wissen ermöglicht
393
13.2 Werkzeuge für Einsteiger
395
13.2.1 Can I use...
395
13.2.2 HTML5 Please
396
13.2.3 HTML Color Codes
397
13.2.4 ColorZilla Farbpipette
398
13.2.5 Adobe Kuler
399
13.2.6 ColorZilla Gradient Generator
400
13.2.7 CSSmatic
401
13.2.8 CSS3, please!
403
13.3 Werkzeuge für Fortgeschrittene
404
13.3.1 normalize.css
404
13.3.2 Individuelle Schriftarten mit @font-face
405
13.3.3 Glyphicons FREE
407
13.3.4 Font Awesome
408
13.3.5 Adobe Topcoat
409
13.3.6 JSLint
410
13.3.7 HTML5Shiv
411
13.4 Werkzeuge für Profis
412
13.4.1 HTML5 Boilerplate
412
13.4.2 CSS3 PIE
414
13.4.3 Modernizr
415
13.4.4 jQuery
417
13.4.5 FitText
418
13.4.6 Nivo Slider
419
13.4.7 jQuery UI
420
13.4.8 jQuery Mobile
422
13.4.9 Bootstrap
425
13.5 Fazit
427
A Übersicht der wichtigsten HTML5-Elemente, CSS3-Eigenschaften und -Selektoren
429
A.1 HTML5-Elemente
429
A.1.1 Hauptelement und Metadaten
429
A.1.2 JavaScript
429
A.1.3 Seitenabschnitte und Layoutstrukturierung
430
A.1.4 Textelemente
430
A.1.5 Listen
432
A.1.6 Tabellen
432
A.1.7 Eingebettete Medien
433
A.1.8 Formulare
433
A.2 CSS3-Eigenschaften
434
A.2.1 Position und Sichtbarkeit
434
A.2.2 Abmessungen und Rand
435
A.2.3 Hintergrund
436
A.2.4 Animation und Veränderung
436
A.2.5 Text
437
A.2.6 Listen
437
A.2.7 Tabellen
438
A.3 CSS3-Selektoren
438
Glossar
441
Index
447