|
Auf einen Blick |
4 |
|
|
Inhalt |
6 |
|
|
Workshops |
16 |
|
|
Vorwort |
20 |
|
|
Teil I Einführung |
22 |
|
|
1 Ein Platz im Internet |
25 |
|
|
1.1 Wie kommt meine Site ins Internet? |
25 |
|
|
1.1.1 Was ist eine Website? |
25 |
|
|
1.1.2 Ein Platz im WWW |
26 |
|
|
1.2 Die eigene Domain |
26 |
|
|
1.2.1 Was ist eine Domain? |
27 |
|
|
1.2.2 Subdomains |
27 |
|
|
1.2.3 Top-Level-Domains |
28 |
|
|
1.2.4 Ist meine Domain noch frei? |
28 |
|
|
1.2.5 Domains registrieren |
31 |
|
|
1.3 Einen Provider finden |
31 |
|
|
1.3.1 Auswahl eines Webhosters |
32 |
|
|
1.3.2 Das passende Angebot finden |
33 |
|
|
1.3.3 Braucht man einen eigenen Webserver? |
34 |
|
|
1.3.4 Wie konfigurieren Sie Ihren Webspace? |
34 |
|
|
2 Die Sprachen des Web |
37 |
|
|
2.1 Welche Sprachen gibt es? |
37 |
|
|
2.2 Hypertext Markup Language |
38 |
|
|
2.2.1 Strukturieren von Inhalten |
39 |
|
|
2.2.2 Tag-Attribute |
39 |
|
|
2.2.3 HTML-Entities |
40 |
|
|
2.2.4 Header und Body |
40 |
|
|
2.2.5 Darstellung im Browser |
41 |
|
|
2.2.6 Extensible Hypertext Markup Language |
41 |
|
|
2.2.7 HTML5 |
42 |
|
|
2.3 Cascading Stylesheets |
42 |
|
|
2.3.1 Externe CSS-Datei |
43 |
|
|
2.4 JavaScript |
44 |
|
|
2.5 Ajax |
45 |
|
|
2.6 PHP und MySQL |
46 |
|
|
2.7 Webbrowser und Rendering Engines |
48 |
|
|
3 Dreamweaver im Vergleich |
51 |
|
|
3.1 Die Geschichte von Dreamweaver |
51 |
|
|
3.1.1 Dreamweaver Ultradev |
52 |
|
|
3.1.2 Dreamweaver MX und MX 2004 |
52 |
|
|
3.1.3 Dreamweaver 8 und die Übernahme von |
53 |
|
|
3.2 Neues in Dreamweaver CS5 |
53 |
|
|
3.2.1 CS-Live-Services und BrowserLab |
54 |
|
|
3.2.2 Widgets |
54 |
|
|
3.2.3 Neue Site |
55 |
|
|
3.2.4 Verbesserte Live- und LiveCode-Ansicht |
55 |
|
|
3.2.5 CSS-Eigenschaften deaktivieren |
56 |
|
|
3.2.6 CSS-Prüfmodus |
57 |
|
|
3.2.7 Verbesserungen für PHP-Programmierer |
57 |
|
|
3.2.8 Detailverbesserungen |
58 |
|
|
3.3 Die Konkurrenz im Vergleich |
59 |
|
|
3.3.1 RapidWeaver |
59 |
|
|
3.3.2 Coda |
60 |
|
|
3.3.3 Microsoft Expression Web |
61 |
|
|
3.3.4 Reine Texteditoren |
61 |
|
|
4 Dreamweaver CS5 – |
65 |
|
|
4.1 Dreamweaver installieren und aktualisieren |
65 |
|
|
4.1.1 Updates |
65 |
|
|
4.2 Der Programmstart |
66 |
|
|
4.3 Die erste HTML-Seite |
67 |
|
|
4.4 Eine Website mit Hyperlinks und Bildern |
72 |
|
|
5 Die Arbeitsumgebung |
81 |
|
|
5.1 Dokumentenfenster |
81 |
|
|
5.1.1 Entwurfs-Ansicht |
81 |
|
|
5.1.2 Live-Ansicht |
82 |
|
|
5.1.3 Code-Ansicht |
83 |
|
|
5.1.4 Teilen-Ansicht |
83 |
|
|
5.1.5 Statuszeile |
84 |
|
|
5.1.6 Der Code-Navigator |
85 |
|
|
5.2 Der Eigenschaftsinspektor |
86 |
|
|
5.2.1 Texteigenschaften |
86 |
|
|
5.2.2 CSS-Eigenschaften |
86 |
|
|
5.2.3 Bildeigenschaften |
86 |
|
|
5.2.4 Weitere Eigenschaften |
87 |
|
|
5.2.5 Eigenschaftsfenster in zwei Darstellungen |
87 |
|
|
5.3 Paletten |
88 |
|
|
5.4 Die »Einfügen«-Palette |
89 |
|
|
5.4.1 Rubriken |
90 |
|
|
5.5 Anpassen der Arbeitsumgebung |
91 |
|
|
5.5.1 Arbeitsbereiche |
91 |
|
|
5.5.2 Voreinstellungen |
91 |
|
|
5.5.3 HTML5 voreinstellen |
92 |
|
|
Teil II Ein Websiteprojekt |
94 |
|
|
6 Eine neue Website |
97 |
|
|
6.1 Unser Beispielprojekt |
97 |
|
|
6.1.1 Beispielwebsite herunterladen |
98 |
|
|
6.1.2 Lokaler Site-Ordner |
98 |
|
|
6.2 Neue Site anlegen und konfigurieren |
98 |
|
|
6.3 Site für fertige Website erstellen |
101 |
|
|
6.4 Wechseln zwischen Sites |
102 |
|
|
7 Eine Vorlage anlegen |
105 |
|
|
7.1 Vorlage entwerfen |
105 |
|
|
7.1.1 Was ist eine Vorlage? |
105 |
|
|
7.1.2 Beispiele im Web |
106 |
|
|
7.1.3 Vorlage planen |
107 |
|
|
7.2 Ein Layout erstellen |
108 |
|
|
7.3 Beispielinhalte erstellen |
111 |
|
|
7.4 Eine Vorlage mit bearbeitbaren Bereichen |
114 |
|
|
8 Seiten mit Inhalten füllen |
119 |
|
|
8.1 Neue Webseite erstellen |
119 |
|
|
8.1.1 Neue Dateien aus Vorlage erzeugen |
120 |
|
|
8.1.2 Seitentitel vergeben |
122 |
|
|
8.2 Seiteninhalte einfügen |
123 |
|
|
8.2.1 Texte erstellen |
125 |
|
|
8.2.2 Überschriften |
126 |
|
|
8.2.3 Listen erstellen |
127 |
|
|
8.2.4 Bilder einfügen |
127 |
|
|
8.2.5 Tabellen erstellen |
131 |
|
|
9 Erstellen einer Navigation |
135 |
|
|
9.1 Hauptnavigation |
136 |
|
|
9.1.1 Menüeinträge bearbeiten |
138 |
|
|
9.2 Fußzeilennavigation |
140 |
|
|
9.3 Vorlage speichern und auf Seiten anwenden |
142 |
|
|
10 Das Design festlegen |
147 |
|
|
10.1 Erstellen von Grafik-Segmenten |
147 |
|
|
10.1.1 Das Kopf-Segment |
148 |
|
|
10.1.2 Das Inhalts-Segment |
148 |
|
|
10.1.3 Das Fuß-Segment |
149 |
|
|
10.2 Aufbau von CSS-Dateien |
149 |
|
|
10.2.1 CSS-Datei bearbeiten |
151 |
|
|
10.3 CSS-Regeln für das Layout der |
153 |
|
|
10.3.1 Die CSS-Regel "body" |
154 |
|
|
10.3.2 Die CSS-Regel ".container" |
156 |
|
|
10.3.3 Die CSS-Regel ".header" |
158 |
|
|
10.3.4 Die CSS-Regel "h1" |
160 |
|
|
10.3.5 Die CSS-Regel ".content" |
162 |
|
|
10.3.6 Die CSS-Regel ".sidebar1" |
163 |
|
|
10.3.7 Die CSS-Regel ".footer" |
164 |
|
|
10.3.8 CSS-Regel für die Links in der Fußzeile erstellen |
167 |
|
|
10.4 CSS-Regeln für die Navigation |
169 |
|
|
11 Websites testen, veröffent-lichen |
173 |
|
|
11.1 Website im Browser testen |
173 |
|
|
11.1.1 Browservielfalt |
173 |
|
|
11.1.2 Browsershots |
174 |
|
|
11.1.3 Browservorschau einstellen |
175 |
|
|
11.1.4 Website im Browser testen |
177 |
|
|
11.1.5 Webseite im Adobe BrowserLab testen |
177 |
|
|
11.1.6 Alle Hyperlinks testen |
178 |
|
|
11.1.7 Browserkompatibilität und Zugänglichkeit |
180 |
|
|
11.2 FTP-Übertragung konfigurieren |
180 |
|
|
11.3 Übertragen der Site auf den Server |
183 |
|
|
11.3.1 Übertragen über das Fenster »Dateien« |
183 |
|
|
11.3.2 Übertragung im Dokumentenfenster |
186 |
|
|
11.3.3 Website synchronisieren |
187 |
|
|
11.4 Website verwalten |
189 |
|
|
11.5 CMS mit Adobe InContext Editing |
191 |
|
|
Teil III Dreamweaver im Detail |
196 |
|
|
12 Texte eingeben und strukturieren |
199 |
|
|
12.1 Textinhalte erstellen |
199 |
|
|
12.1.1 Text eingeben |
199 |
|
|
12.1.2 Sonderzeichen eingeben |
200 |
|
|
12.1.3 Leerzeichen eingeben |
201 |
|
|
12.2 Inhalte strukturieren |
202 |
|
|
12.2.1 Überschriften |
202 |
|
|
12.2.2 Absätze |
203 |
|
|
12.2.3 Einrückungen |
204 |
|
|
12.2.4 Vorformatierte Absätze |
204 |
|
|
12.2.5 Listen |
205 |
|
|
12.2.6 Hervorhebungen |
207 |
|
|
12.3 Importieren aus Word |
208 |
|
|
12.3.1 Word-HTML optimieren |
208 |
|
|
12.3.2 Texte aus der Zwischenablage einfügen |
209 |
|
|
12.3.3 Stylesheets und Word |
211 |
|
|
13 Arbeiten mit CSS |
213 |
|
|
13.1 Was sind Cascading Stylesheets? |
213 |
|
|
13.1.1 Externe und interne CSS |
214 |
|
|
13.1.2 CSS in Vorlagen einsetzen |
215 |
|
|
13.1.3 Methoden zur CSS-Erstellung |
216 |
|
|
13.2 CSS für Einsteiger |
216 |
|
|
13.2.1 CSS über Seiteneigenschaften |
217 |
|
|
13.2.2 CSS über Eigenschaftsinspektor |
220 |
|
|
13.3 Fortgeschrittene Techniken |
224 |
|
|
13.3.1 Das Fenster »CSS-Stile« |
225 |
|
|
13.3.2 Neuen CSS-Stil erstellen |
225 |
|
|
13.3.3 CSS-Stile bearbeiten |
233 |
|
|
13.3.4 CSS-Stile-Eigenschaften |
233 |
|
|
13.3.5 Überprüfen-Modus |
234 |
|
|
13.3.6 CSS-Regeln löschen |
235 |
|
|
13.3.7 CSS-Regeln deaktivieren |
235 |
|
|
13.3.8 Klassen-Selektoren umbenennen |
236 |
|
|
13.3.9 CSS-Stile Texten zuweisen |
236 |
|
|
13.3.10 Externe Stylesheets verknüpfen |
237 |
|
|
13.3.11 Stylesheets verschieben |
239 |
|
|
14 Bilder einfügen |
241 |
|
|
14.1 Bilder bearbeiten |
241 |
|
|
14.2 Bildformate für das Web |
241 |
|
|
14.2.1 GIF |
242 |
|
|
14.2.2 JPEG |
243 |
|
|
14.2.3 PNG |
244 |
|
|
14.3 Bilder, Platzhalter und Hintergründe |
245 |
|
|
14.3.1 Bilder einfügen |
245 |
|
|
14.3.2 Bild-Platzhalter einsetzen |
246 |
|
|
14.3.3 Bilder oder Platzhalter austauschen |
248 |
|
|
14.3.4 Rollover-Bilder einsetzen |
248 |
|
|
14.4 Bildeinstellungen |
249 |
|
|
14.4.1 Bild ausrichten |
249 |
|
|
14.4.2 Alternativtext eingeben |
250 |
|
|
14.4.3 Bildgröße einstellen |
250 |
|
|
14.4.4 Bilder zuschneiden |
252 |
|
|
14.4.5 Helligkeit, Kontrast und Schärfe |
253 |
|
|
15 Tabellen erstellen |
257 |
|
|
15.1 Sonderfall Webtabellen |
257 |
|
|
15.2 Verschiedene Tabellenansichten |
258 |
|
|
15.2.1 Standard-Ansicht |
259 |
|
|
15.2.2 Erweiterte Ansicht |
260 |
|
|
15.3 Erstellen einer Tabelle |
260 |
|
|
15.4 Eigenschaften von Gesamttabellen |
263 |
|
|
15.4.1 Tabellen markieren |
264 |
|
|
15.4.2 Einstellungen für ganze Tabellen |
265 |
|
|
15.4.3 Höhe und Breite anpassen |
266 |
|
|
15.5 Eigenschaften von Tabellenbereichen |
267 |
|
|
15.5.1 Spalten, Zeilen und Zellen auswählen |
267 |
|
|
15.5.2 Einstellungen für Tabellenbereiche |
268 |
|
|
15.5.3 Tabellenzellen gruppieren |
270 |
|
|
15.5.4 Spalten und Zeilen hinzufügen |
271 |
|
|
15.6 Tabellen sortieren |
272 |
|
|
16 Hyperlinks einsetzen |
275 |
|
|
16.1 Navigieren mit Hyperlinks |
275 |
|
|
16.1.1 Funktionsweise von Hyperlinks |
275 |
|
|
16.1.2 Das Wichtigste: die URL |
276 |
|
|
16.2 Hyperlinks anlegen in Dreamweaver |
277 |
|
|
16.2.1 Externe und interne Hyperlinks |
278 |
|
|
16.2.2 Links innerhalb einer Webseite |
279 |
|
|
16.2.3 Löschen von Hyperlinks |
282 |
|
|
16.3 Spezielle Hyperlinks anlegen |
283 |
|
|
16.3.1 Leere Links |
283 |
|
|
16.3.2 E-Mail-Links |
283 |
|
|
16.3.3 Imagemaps |
285 |
|
|
16.3.4 Download-Links |
286 |
|
|
16.3.5 Automatische Weiterleitung |
287 |
|
|
17 Interaktivität mit JavaScript |
291 |
|
|
17.1 Wie funktioniert JavaScript? |
291 |
|
|
17.2 JavaScript im Eigenschaftsinspektor |
292 |
|
|
17.3 JavaScript über Menüs einfügen |
294 |
|
|
17.3.1 Rollover-Bilder |
294 |
|
|
17.4 Funktionsweise eines Verhaltens |
295 |
|
|
17.5 Ein Verhalten einfügen |
297 |
|
|
17.6 Wichtige Verhalten im Überblick |
299 |
|
|
17.6.1 Aktionen hinzufügen |
300 |
|
|
17.6.2 Aktionen bearbeiten |
301 |
|
|
17.6.3 Aktionen entfernen |
301 |
|
|
17.6.4 Ereignis festlegen |
302 |
|
|
17.7 Das JavaScript-Framework Spry |
302 |
|
|
17.8 Widgets |
305 |
|
|
18 Formulare erstellen |
307 |
|
|
18.1 Eigenschaften von Formularen |
307 |
|
|
18.2 Formulare mit Dreamweaver |
308 |
|
|
18.3 Funktionsweise einrichten |
309 |
|
|
18.4 Formulare layouten |
310 |
|
|
18.5 Formularelemente einfügen |
311 |
|
|
18.5.1 Einfache Textfelder |
311 |
|
|
18.5.2 Mehrzeilige Textfelder |
312 |
|
|
18.5.3 Kontrollkästchen |
313 |
|
|
18.5.4 Optionsschalter |
314 |
|
|
18.5.5 Auswahllisten |
315 |
|
|
18.5.6 Schaltflächen |
317 |
|
|
18.5.7 Versteckte Felder |
317 |
|
|
18.5.8 Weitere Elemente |
318 |
|
|
18.6 Formularüberprüfung einbauen mit Spry |
319 |
|
|
18.6.1 Felder überprüfen |
320 |
|
|
18.6.2 Eigene Fehlermeldungen festlegen |
321 |
|
|
18.6.3 Spry-Überprüfungen bearbeiten |
323 |
|
|
18.7 Ein Kontaktformular anlegen |
323 |
|
|
Teil IV Über Dreamweaver hinaus … |
326 |
|
|
19 Dreamweaver und |
329 |
|
|
19.1 Die Creative Suite 5 |
329 |
|
|
19.2 Adobe Photoshop CS5 |
330 |
|
|
19.2.1 Photoshop-Dateien in Dreamweaver importieren |
330 |
|
|
19.2.2 Bilder aus der Zwischenablage einfügen |
333 |
|
|
19.2.3 Bilder in Photoshop bearbeiten |
334 |
|
|
19.2.4 Einstellungen |
335 |
|
|
19.3 Adobe Fireworks CS5 |
336 |
|
|
19.3.1 Fireworks-Dateien in Dreamweaver importieren |
337 |
|
|
19.3.2 Bilder in Fireworks bearbeiten |
338 |
|
|
19.4 Adobe Flash CS5 und Flash Catalyst CS5 |
338 |
|
|
19.4.1 So funktioniert Flash |
338 |
|
|
19.4.2 Plugin erforderlich |
339 |
|
|
19.5 Flash-Filme integrieren |
340 |
|
|
19.5.1 Eigenschaften von Flash |
341 |
|
|
19.5.2 Contribute CS5 |
342 |
|
|
19.5.3 Adobe Bridge |
343 |
|
|
20 Bloggen mit WordPress |
345 |
|
|
20.1 Was sind Weblogs? |
345 |
|
|
20.2 Leistungsmerkmale von WordPress |
346 |
|
|
20.3 WordPress installieren |
347 |
|
|
20.4 WordPress administrieren |
353 |
|
|
20.4.1 Einloggen im Administrationsbereich |
353 |
|
|
20.4.2 Schreiben von Beiträgen |
354 |
|
|
20.4.3 Verwalten von Beiträgen |
354 |
|
|
20.5 WordPress-Templates |
355 |
|
|
20.5.1 Themes anpassen |
357 |
|
|
21 Gesucht und gefunden |
361 |
|
|
21.1 Ihre Website mit Google bekannt machen |
361 |
|
|
21.2 Tipps zur Suchmaschinen-Optimierung |
364 |
|
|
21.2.1 Verwenden Sie Titel und alt-Attribute |
365 |
|
|
21.2.2 Meta-Tags |
366 |
|
|
21.2.3 Meta-Tags bearbeiten |
367 |
|
|
21.2.4 Website von anderen Websites verlinken |
368 |
|
|
21.2.5 Was Sie unbedingt vermeiden sollten |
369 |
|
|
21.3 Besucher-Statistiken mit Google Analytics |
369 |
|
|
21.3.1 Google Analytics einrichten |
371 |
|
|
21.4 Anzeigen mit Google AdWords |
373 |
|
|
21.5 Geld verdienen mit Google AdSense |
373 |
|
|
22 Mashups – die Welt in Ihre Website einbinden |
379 |
|
|
22.1 YouTube-Videos integrieren |
379 |
|
|
22.2 Google Maps integrieren |
382 |
|
|
22.3 Twitter integrieren |
384 |
|
|
Index |
386 |
|