Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Für wen ist dieses Buch?
13
1 Ein eigener Webauftritt in fünf Minuten
17
1.1 Die Visitenkarte des Zauberers
18
1.1.1 Editor oder Baukasten?
18
1.1.2 Einen Website-Baukasten auswählen
19
1.1.3 Die Site im Website-Baukasten anlegen
19
1.1.4 Einen Webseiten-Editor auswählen
23
1.1.5 Mit dem visuellen Webseiten-Editor arbeiten
23
1.2 Welche Technik lässt das Web ticken?
26
1.2.1 Seite oder Site?
29
1.2.2 Domain
29
1.3 Fazit
30
2 Wer braucht was - die eigene Website planen
31
2.1 Wie sieht eine gute Website aus?
31
2.2 Warum wollen Sie eine Website?
33
2.3 Was? Wen? Wie? Womit?
34
2.3.1 Was wollen Sie erreichen?
34
2.3.2 Wen wollen Sie ansprechen?
35
2.3.3 Wie wollen Sie Ihr Ziel erreichen?
35
2.3.4 Womit wollen Sie arbeiten?
35
2.3.5 Beispiel: Tangoschule »Aro Argentino«
36
2.4 Umsetzung planen
38
2.4.1 Sitemap - Seitenübersicht
38
2.4.2 Zeitplan
40
2.5 Fazit
41
3 Ein besserer Webauftritt in drei Stunden
43
3.1 Für den Dienst anmelden und die Site einrichten
44
3.2 Den Seitenaufbau festlegen
45
3.3 Die Bilder festlegen
47
3.4 Das Layout umsetzen
47
3.5 Fazit
51
4 Die ersten Schritte mit HTML und CSS
53
4.1 Die Vorteile einer eigenen Website
53
4.2 Alle Webseiten bestehen aus HTML
54
4.3 Sie schreiben selbst HTML
57
4.4 Woher kommt die Gestaltung?
66
4.4.1 Das style-Attribut
66
4.4.2 Das style-Element
68
4.4.3 Die externe CSS-Datei
71
4.5 Das richtige Werkzeug - der HTML-Editor
76
4.5.1 Was sollte ein HTML-Editor für Einsteiger können?
76
4.5.2 Empfehlenswerte HTML-Editoren
78
4.6 Besser lesbares HTML für Browser und Mensch
81
4.6.1 Woher kommen HTML und CSS?
81
4.6.2 HTML5 - was bedeutet das?
82
4.6.3 Der doctype
83
4.6.4 Das charset
84
4.6.5 Schaffen Sie Platz für mehr Übersicht
85
4.6.6 Notizen für Sie selbst: Kommentare
86
4.6.7 Validieren Sie Ihre Seiten
88
4.7 Fazit
89
5 Die eigene Website erstellen
91
5.1 Das Konzept
92
5.1.1 Die Ziele formulieren
92
5.1.2 Den Inhalt konzipieren
93
5.1.3 Die Gestaltung konzipieren
93
5.2 Den Inhalt mit HTML anlegen
95
5.2.1 Die Startseite
98
5.2.2 Die Praxisseite
104
5.2.3 Die Teamseite
108
5.2.4 Die Kontaktseite
110
5.3 Die Gestaltung mit CSS
112
5.3.1 Die Layoutelemente und ihre Darstellung im Browser
113
5.3.2 Feste oder flexible Abmessungen?
120
5.3.3 Die Abmessungen der Layoutelemente
121
5.3.4 Die Position der Layoutelemente
124
5.3.5 Die Gestaltung verfeinern
142
5.4 Fazit
165
6 Die eigene Website im Internet
167
6.1 Die Website ins Internet bringen
167
6.1.1 Speicherplatz auf einem Webserver
167
6.1.2 Das SSL-Zertifikat für sichere Verbindungen
170
6.1.3 FTP - Dateien auf den Webserver kopieren
171
6.1.4 Berechtigungen und die .htaccess-Datei - so konfigurieren Sie, was Besucher sehen können
173
6.1.5 Eine eigene Domain - Ihre Adresse im Web
176
6.1.6 Das Favicon
177
6.2 Browser ist nicht gleich Browser
179
6.2.1 Die Unterschiede in der Darstellung herausfinden
179
6.2.2 Die Unterschiede in der Darstellung ausgleichen
183
6.3 Bildschirm ist nicht gleich Bildschirm
191
6.3.1 Was passiert bei veränderter Fenstergröße?
192
6.3.2 Relative Angaben statt pixelgenauer Werte
194
6.3.3 Mehrere Layouts mit festen Werten oder ein Layout mit flexiblen Werten?
198
6.3.4 Ein separates Stylesheet für schmale Bildschirme
202
6.4 Gerät ist nicht gleich Gerät
215
6.4.1 Die Seiten an Touchbedienung anpassen
216
6.4.2 Ein separates Stylesheet für Drucker
218
6.5 Mit Neugier zu immer besseren Websites
223
6.6 Fazit
225
7 Ein Kontaktformular anlegen
227
7.1 Kontaktformular oder E-Mail-Adresse?
227
7.2 Pflichtangaben zum Kontakt
228
7.3 Die Standardlösung
229
7.4 Ein einfaches Kontaktformular
229
7.5 Planung und Gestaltung
233
7.5.1 Planung
233
7.5.2 Gestaltung
234
7.6 Der HTML-Code für unsere Arzt-Beispielsite
234
7.7 Das Skript auf dem Server
237
7.8 Fazit
241
8 Mehr Interaktivität mit JavaScript
243
8.1 Das erste JavaScript
244
8.2 Ein schnelles Skript für die Beispiel-Website
246
8.3 JavaScript und HTML trennen
250
8.4 Funktionen
252
8.5 Variablen
255
8.6 Arrays
258
8.7 Ereignisse
260
8.8 Beispiel: Ein schlaues Formular
260
8.8.1 Den Cursor versetzen
261
8.8.2 Kommentarfeld prüfen
262
8.8.3 Alternative zum Prüfen des Kommentarfelds
265
8.8.4 E-Mail-Adresse prüfen
266
8.9 Text auf der Seite einfügen
269
8.10 Text auf der Seite elegant ändern
271
8.11 Auf Fehlersuche - Debugging
274
8.11.1 Debuggen mit Firefox
275
8.11.2 Debuggen mit Safari
279
8.12 Fazit
280
9 Die Site spielend finden und benutzen - Suchmaschinenoptimierung, Usability, Accessibility
281
9.1 Suchmaschinenoptimierung
282
9.1.1 Wie sucht eine Suchmaschine?
283
9.1.2 PageRank und Page Authority
284
9.1.3 Suchmaschinen wollen auch nur Menschen sein
287
9.1.4 Schwarze Magie hilft nicht
288
9.1.5 Bezahlte Suchergebnisse?
289
9.1.6 SEO für die eigene Website
290
9.2 User Experience & Usability /Benutzerfreundlichkeit
306
9.2.1 Der wichtigste Grundsatz: Nachdenken
307
9.2.2 Usability von Anfang an
307
9.2.3 Die häufigsten Fehler vermeiden
308
9.3 Accessibility - Barrierefreiheit
309
9.4 Fazit
310
10 Noch mehr Inhalt - Videos, Fotos, Karten und soziale Netze einbinden
311
10.1 Google Maps & Bing Maps
311
10.2 YouTube & Vimeo
314
10.2.1 Ein Video einbinden
314
10.2.2 Ein Video hochladen
316
10.3 Fotodienste - Flickr und Google Photos
316
10.4 Slideshare
319
10.5 Soziale Netzwerke - Facebook und Twitter
320
10.5.1 Facebook-Buttons
320
10.5.2 Datenschutz bei Facebook
322
10.5.3 Twitter
324
10.6 Fazit
326
11 Marketing und Werbung - Gutes tun und darüber reden
327
11.1 Klassische Werbung
328
11.2 Werbung im Internet
329
11.2.1 Google AdWords
330
11.2.2 Facebook-Anzeigen
337
11.3 Marketing im Internet
338
11.3.1 Organische Links
339
11.3.2 Linktausch
339
11.3.3 Verzeichnisse
340
11.3.4 Facebook
341
11.3.5 Instagram
343
11.3.6 Twitter
343
11.3.7 Zeitungen, Zeitschriften, Blogs
345
11.3.8 Kommentare in Blogs und Foren
345
11.3.9 XING und LinkedIn
346
11.3.10 Podcasts
347
11.3.11 Google My Business
349
11.3.12 Wikipedia
350
11.3.13 PR-Portale
350
11.4 Fazit
351
12 Mit der eigenen Website Geld verdienen
353
12.1 Welche Möglichkeiten gibt es?
353
12.1.1 Verkaufen über einen externen Webshop
354
12.1.2 Verkaufen auf der eigenen Website
355
12.1.3 Spenden ohne direkte Gegenleistung
356
12.2 Ein Beispielwebshop - Aro Argentinos Fanshop
358
12.2.1 Die Situation
358
12.2.2 Die Lösung
359
12.2.3 Die Umsetzung
359
12.3 Fazit
363
13 Starke Werkzeuge - so nutzen Sie Ihr neues Wissen für noch bessere Websites
365
13.1 Was Ihnen Ihr neues Wissen ermöglicht
365
13.2 Werkzeuge für Einsteiger
367
13.2.1 HTML Color Codes
367
13.2.2 ColorZilla-Farbpipette
368
13.2.3 Adobe Color
368
13.2.4 Ultimate CSS Gradient Generator
370
13.2.5 CSSmatic
371
13.2.6 Can I use…
372
13.2.7 HTML5 Please
373
13.3 Werkzeuge für Fortgeschrittene
374
13.3.1 Simple Grid
375
13.3.2 Flexbox Grid
376
13.3.3 Individuelle Schriftarten mit @font-face
377
13.3.4 Font Awesome
379
13.3.5 Adobe Topcoat
380
13.3.6 JSLint
381
13.3.7 normalize.css
382
13.3.8 HTML5 Shiv
383
13.4 Werkzeuge für Profis
383
13.4.1 HTML5 Boilerplate
384
13.4.2 Emmet
385
13.4.3 jQuery
386
13.4.4 FitText
388
13.4.5 Nivo Slider
389
13.4.6 jQuery UI
390
13.4.7 jQuery Mobile
392
13.4.8 Bootstrap
395
13.4.9 Modernizr
397
13.4.10 CSS3 PIE
398
13.5 Fazit
399
Anhang A Übersicht der wichtigsten HTML5-Elemente, CSS3-Eigenschaften und -Selektoren
401
A.1 HTML5-Elemente
401
A.1.1 Hauptelement und Metadaten
401
A.1.2 JavaScript
401
A.1.3 Seitenabschnitte und Layoutstrukturierung
402
A.1.4 Textelemente
402
A.1.5 Listen
403
A.1.6 Tabellen
404
A.1.7 Eingebettete Medien
404
A.1.8 Formulare
405
A.2 CSS3-Eigenschaften
405
A.2.1 Position und Sichtbarkeit
406
A.2.2 Abmessungen und Rand
406
A.2.3 Flexbox
407
A.2.4 Hintergrund
408
A.2.5 Animation und Veränderung
409
A.2.6 Text
409
A.2.7 Listen
410
A.2.8 Tabellen
410
A.3 CSS3-Selektoren
411
Anhang B Glossar
413
Index
419