Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische...

41
Hussein Morsy Adobe Dreamweaver CS4 Der praktische Einstieg Erhältlich bei www.cleverprinting.de/shop

Transcript of Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische...

Page 1: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

Hussein Morsy

Adobe Dreamweaver CS4Der praktische Einstieg

1261.indb 11261.indb 1 05.02.2009 17:58:2205.02.2009 17:58:22

Erhältlich bei www.cleverprinting.de/shop

Page 2: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

3

Auf einen Blick

Teil I Einführung ................................................................................ 21Wie bekomme ich eine eigene Webadresse? �

Wie fi nde ich den richtigen Provider? �

Wie ist eine Webseite aufgebaut? �

Was sind HTML und Cascading Stylesheets (CSS)? �

Was ist neu in Dreamweaver CS4? �

Wie erstelle ich eine erste HTML-Seite? �

Wie verknüpfe ich Webseiten mit Hyperlinks? �

Teil II Ein Websiteprojekt ................................................................. 93Wie lege ich eine neue Site an? �

Wie importiere ich bestehende Websites? �

Wie lege ich ein CSS-Layout an? �

Wie füge ich Texte und Listen ein und formatiere sie? �

Wie füge ich Seiten mit Bildern und Grafi ken ein? �

Wie speichere und übertrage ich eine Vorlage? �

Wie erstelle ich ein Layout für die gesamte Website? �

Wie gestalte ich eine Navigation? �

Wie erstelle ich eigene CSS-Regeln? �

Wie teste ich meine Website? �

Teil III Dreamweaver im Detail .......................................................... 199Wie importiere ich Texte aus Word? �

Wie füge ich Grafi ken und Platzhalter ein? �

Wie arbeite ich mit Hintergründen? �

Wie schneide ich Bilder zu, schärfe sie oder richte sie aus? �

Wann sollte ich Tabellen nutzen? �

Wie füge ich Tabellen ein, baue sie auf und bearbeite sie? �

Wie richte ich E-Mail-, Imagemap- und Downloadlinks ein? �

Wie programmiert man JavaScript? �

Wie baue ich Formulare ein? �

Wie integriere ich Flash-Filme? �

Teil IV Über Dreamweaver hinaus ..................................................... 343Wie richte ich einen Blog ein? �

Wie gestalte ich eigene Themes? �

Wie melde ich meine Website bei Google an? �

Wie erfahre ich mehr über meine Besucher? �

Wie kann ich mit meiner Website Geld verdienen? �

Wie binde ich YouTube-Videos ein? �

Wie baue ich eine Anfahrtsskizze mit Google-Maps? �

1261.indb 31261.indb 3 05.02.2009 17:58:2205.02.2009 17:58:22

Page 3: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

5

Inhalt

Teil I: Einführung

Ein Platz im Internet1 ......................................................... 23

1.1 Wie kommt meine Site ins Internet? .................................... 241.1.1 Was ist eine Website? ................................................. 241.1.2 Ein Platz im WWW ..................................................... 25

1.2 Die eigene Domain ................................................................. 251.2.1 Was ist eine Domain? .................................................. 251.2.2 Subdomains ................................................................ 261.2.3 Top Level Domains ...................................................... 261.2.4 Ist meine Domain noch frei? ....................................... 271.2.5 Domains registrieren ................................................... 29

1.3 Einen Provider finden ............................................................. 301.3.1 Auswahl eines Webhosters .......................................... 301.3.2 Das passende Angebot finden ..................................... 311.3.3 Braucht man einen eigenen Webserver? ...................... 321.3.4 Wie konfigurieren Sie Ihren Webspace? ...................... 33

Die Sprachen des Web2 ...................................................... 35

2.1 Welche Sprachen gibt es? ..................................................... 36

2.2 Hypertext Markup Language ................................................. 372.2.1 Strukturieren von Inhalten .......................................... 382.2.2 Tag-Attribute ............................................................... 382.2.3 HTML-Entities ............................................................. 392.2.4 Header und Body ........................................................ 392.2.5 Darstellung im Browser ............................................... 402.2.6 Extensible Hypertext Markup Language ....................... 40

2.3 Cascading Stylesheets ........................................................... 41

2.4 JavaScript ............................................................................... 43

2.5 Ajax ........................................................................................ 44

2.6 PHP und MySQL .................................................................... 44

2.7 Webbrowser und Rendering Engines .................................... 47

1261.indb 51261.indb 5 05.02.2009 17:58:2205.02.2009 17:58:22

Page 4: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

6

Inhalt

Dreamweaver im Vergleich3 .............................................. 49

3.1 Die Geschichte von Dreamweaver ......................................... 503.1.1 Dreamweaver Ultradev ............................................... 513.1.2 Dreamweaver MX und MX 2004 ................................. 513.1.3 Dreamweaver 8 und die Übernahme von

Macromedia durch Adobe ........................................... 52

3.2 Neues in Dreamweaver CS4 ................................................... 523.2.1 Neue Benutzeroberfläche ............................................ 533.2.2 Live-Ansicht ................................................................ 543.2.3 Zugehörige Dateien ..................................................... 553.2.4 InContext Editing ........................................................ 553.2.5 Photoshop-Integration in Perfektion ............................ 563.2.6 CSS-Eigenschaftsinpektor ............................................ 563.2.7 Weitere Funktionen, die nicht in diesem Buch

behandelt werden ....................................................... 573.2.8 Funktionen, die entfernt wurden ................................. 57

3.3 Die Konkurrenz im Vergleich ................................................. 583.3.1 Adobe GoLive 9 .......................................................... 583.3.2 RapidWeaver .............................................................. 583.3.3 Microsoft Expression Web ........................................... 593.3.4 Reine Texteditoren wie UltraEdit,

BBEdit und TextMate .................................................. 59

3.4 Die Creative Suite 4 ............................................................... 603.4.1 Flash CS4 .................................................................... 613.4.2 Fireworks und Photoshop CS4 .................................... 613.4.3 Contribute CS4 ........................................................... 613.4.4 Adobe Bridge .............................................................. 62

Dreamweaver CS4 – los geht’s4 ........................................ 63

4.1 Dreamweaver installieren und aktualisieren ......................... 64

4.2 Der Programmstart ................................................................ 65

4.3 Die erste HTML-Seite ............................................................ 66

4.4 Eine Website mit Hyperlinks und Bildern ............................. 71

Die Arbeitsumgebung5 ....................................................... 79

5.1 Dokumentenfenster ............................................................... 805.1.1 Entwurfsansicht .......................................................... 805.1.2 Live-Ansicht ................................................................ 81

1261.indb 61261.indb 6 05.02.2009 17:58:2305.02.2009 17:58:23

Page 5: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

7

Inhalt

5.1.3 Codeansicht ................................................................ 815.1.4 Teilen-Ansicht ............................................................. 825.1.5 Statuszeile ................................................................... 835.1.6 Der Code-Navigator .................................................... 84

5.2 Der Eigenschaftsinspektor ..................................................... 845.2.1 Texteigenschaften ....................................................... 855.2.2 CSS-Eigenschaften ...................................................... 855.2.3 Bildeigenschaften ........................................................ 855.2.4 Weitere Eigenschaften ................................................ 865.2.5 Eigenschaftsfenster in zwei Darstellungen ................... 86

5.3 Paletten .................................................................................. 87

5.4 Die Einfügen-Palette .............................................................. 89

5.5 Anpassen der Arbeitsumgebung ............................................ 90

Teil II: Ein Websiteprojekt

Eine neue Website6 ............................................................. 95

6.1 Unser Beispielprojekt ............................................................ 966.1.1 Beispielwebsite herunterladen ..................................... 976.1.2 Der Stammordner ....................................................... 97

6.2 Neue Site anlegen und konfigurieren .................................... 97

6.3 Site für fertige Website erstellen .......................................... 100

6.4 Wechseln zwischen Sites ....................................................... 101

Eine Vorlage anlegen7 ......................................................... 103

7.1 Vorlage entwerfen .................................................................. 1047.1.1 Was ist eine Vorlage? .................................................. 1047.1.2 Beispiele im Web ........................................................ 1057.1.3 Vorlagen planen .......................................................... 106

7.2 Ein Layout erstellen ............................................................... 107

7.3 Beispielinhalte erstellen ........................................................ 110

7.4 Eine Vorlage mit editierbaren Bereichen erstellen ................ 112

Seiten mit Inhalten füllen8 ................................................ 117

8.1 Neue Webseite erstellen ....................................................... 1188.1.1 Neue Dateien aus Vorlage erzeugen ............................ 1198.1.2 Seitentitel vergeben .................................................... 122

1261.indb 71261.indb 7 05.02.2009 17:58:2305.02.2009 17:58:23

Page 6: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

8

Inhalt

8.2 Seiteninhalte einfügen ........................................................... 1238.2.1 Texte erstellen ............................................................. 1238.2.2 Überschriften .............................................................. 1258.2.3 Listen erstellen ............................................................ 1268.2.4 Bilder einfügen ............................................................ 1268.2.5 Tabellen erstellen ........................................................ 130

Erstellen einer Navigation9 ................................................ 133

9.1 Hauptnavigation .................................................................... 135

9.2 Fußzeilennavigation ............................................................... 139

9.3 Vorlage speichern und auf Seiten anwenden ........................ 142

Ein Layout erstellen10 ........................................................... 145

10.1 Erstellen von Grafik-Segmenten ............................................ 14610.1.1 Das Kopf-Segment ...................................................... 14710.1.2 Das Inhalts-Segment ................................................... 14710.1.3 Das Fuß-Segment ........................................................ 148

10.2 Aufbau von CSS-Dateien ....................................................... 14810.2.1 CSS-Datei bearbeiten .................................................. 150

10.3 CSS-Regeln für das Layout der Beispielwebsite ................... 15210.3.1 Die CSS-Regel body bearbeiten ................................... 15310.3.2 Die CSS-Regel #container bearbeiten .......................... 15410.3.3 Die CSS-Regel #header bearbeiten .............................. 15710.3.4 Die CSS-Regel #header h1 bearbeiten ......................... 15910.3.5 Die CSS-Regel #mainContent ...................................... 16110.3.6 Die CSS-Regel #sidebar1 ............................................. 16110.3.7 Die CSS-Regel #footer ................................................ 16310.3.8 Die CSS-Regel #footer p ............................................. 165

10.4 CSS-Regeln für die Navigation .............................................. 167

10.5 Eigene CSS-Regeln erstellen .................................................. 17010.5.1 CSS-Regel für die Überschrift erstellen ........................ 17010.5.2 CSS-Regel für die Links in der Fußzeile erstellen .......... 172

Websites testen, veröffentlichen 11 und verwalten ........ 175

11.1 Website im Browser testen ................................................... 17611.1.1 Browservielfalt ............................................................ 17611.1.2 Browsershots .............................................................. 17711.1.3 Browservorschau einstellen ......................................... 178

1261.indb 81261.indb 8 05.02.2009 17:58:2305.02.2009 17:58:23

Page 7: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

9

Inhalt

11.1.4 Website im Browser testen ......................................... 18011.1.5 Alle Hyperlinks testen ................................................. 18011.1.6 Browserkompatibilität und Zugänglichkeit prüfen ........ 182

11.2 FTP-Übertragung konfigurieren ............................................. 182

11.3 Übertragen der Site auf den Server ....................................... 18511.3.1 Übertragen über das Fenster Dateien .......................... 18511.3.2 Übertragung im Dokumentenfenster ........................... 18811.3.3 Website synchronisieren ............................................. 189

11.4 Website verwalten ................................................................. 191

11.5 CMS mit Adobe InContext Editing ........................................ 193

Teil III: Dreamweaver im Detail

Texte eingeben und strukturieren12 .................................. 201

12.1 Textinhalte erstellen .............................................................. 20212.1.1 Text eingeben ............................................................. 20212.1.2 Sonderzeichen eingeben ............................................. 20312.1.3 Leerzeichen eingeben ................................................. 204

12.2 Inhalte strukturieren .............................................................. 20512.2.1 Überschriften .............................................................. 20512.2.2 Absätze ....................................................................... 20612.2.3 Einrückungen .............................................................. 20712.2.4 Vorformatierte Absätze ............................................... 20812.2.5 Listen .......................................................................... 20912.2.6 Hervorhebungen ......................................................... 211

12.3 Importieren aus Word ............................................................ 21112.3.1 Word-HTML optimieren .............................................. 21112.3.2 Texte aus der Zwischenablage einfügen ....................... 21212.3.3 Stylesheets und Word ................................................. 214

Arbeiten mit CSS13 ................................................................ 215

13.1 Was sind Cascading Stylesheets? ......................................... 21613.1.1 Externe und interne CSS ............................................. 21713.1.2 CSS in Vorlagen einsetzen ........................................... 21813.1.3 Methoden zur CSS-Erstellung ...................................... 219

13.2 CSS für Einsteiger .................................................................. 21913.2.1 CSS über Seiteneigenschaften ..................................... 22013.2.2 CSS über den Eigenschaftsinspektor ............................ 223

1261.indb 91261.indb 9 05.02.2009 17:58:2305.02.2009 17:58:23

Page 8: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

10

Inhalt

13.3 Fortgeschrittene Techniken ................................................... 22713.3.1 Das Fenster CSS-Stile .................................................. 22813.3.2 Neuen CSS-Stil erstellen .............................................. 22813.3.3 CSS-Stile bearbeiten .................................................... 23513.3.4 CSS-Stile-Eigenschaften ............................................... 23613.3.5 CSS-Regeln löschen .................................................... 23713.3.6 Klassen-Selektoren umbenennen ................................. 23713.3.7 CSS-Stile an Texte zuweisen ........................................ 23813.3.8 Externe Stylesheets verknüpfen ................................... 23913.3.9 Stylesheets verschieben ............................................... 241

Bilder einfügen14 ................................................................... 243

14.1 Bilder bearbeiten ................................................................... 244

14.2 Bildformate für das Web ....................................................... 24414.2.1 GIF ............................................................................. 24514.2.2 JPEG ........................................................................... 24614.2.3 PNG ........................................................................... 247

14.3 Bilder, Platzhalter und Hintergründe ..................................... 24814.3.1 Bilder einfügen ............................................................ 24814.3.2 Bild-Platzhalter einsetzen ............................................ 25014.3.3 Bilder oder Platzhalter austauschen ............................. 25114.3.4 Roll over-Bilder einsetzen ............................................. 251

14.4 Bildeinstellungen ................................................................... 25214.4.1 Bild ausrichten ............................................................ 25214.4.2 Alternativtext eingeben ............................................... 25314.4.3 Bildgröße einstellen ..................................................... 25414.4.4 Bilder zuschneiden ...................................................... 25614.4.5 Helligkeit, Kontrast und Schärfe .................................. 257

Tabellen erstellen15 ............................................................... 259

15.1 Sonderfall Webtabellen ......................................................... 260

15.2 Verschiedene Tabellenansichten ............................................ 26215.2.1 Standard-Ansicht ........................................................ 26215.2.2 Erweiterte Ansicht ...................................................... 263

15.3 Erstellung einer Tabelle .......................................................... 264

15.4 Eigenschaften von Gesamttabellen ....................................... 26615.4.1 Tabellen markieren ...................................................... 26715.4.2 Einstellungen für ganze Tabellen .................................. 26815.4.3 Höhe und Breite anpassen .......................................... 269

1261.indb 101261.indb 10 05.02.2009 17:58:2305.02.2009 17:58:23

Page 9: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

11

Inhalt

15.5 Eigenschaften von Tabellenbereichen .................................... 27015.5.1 Spalten, Zeilen und Zellen auswählen .......................... 27015.5.2 Einstellungen für Tabellenbereiche .............................. 27115.5.3 Tabellenzellen gruppieren ............................................ 27215.5.4 Spalten und Zeilen hinzufügen .................................... 274

15.6 Tabellen sortieren ................................................................... 275

Hyperlinks einsetzen16 ......................................................... 277

16.1 Navigieren mit Hyperlinks ..................................................... 27816.1.1 Funktionsweise von Hyperlinks ................................... 27816.1.2 Das Wichtigste: die URL .............................................. 279

16.2 Hyperlinks anlegen in Dreamweaver ..................................... 28016.2.1 Externe und interne Hyperlinks ................................... 28116.2.2 Links innerhalb einer Webseite ................................... 28216.2.3 Löschen von Hyperlinks .............................................. 284

16.3 Spezielle Hyperlinks anlegen ................................................. 28516.3.1 Leere Links .................................................................. 28516.3.2 E-Mail-Links ................................................................ 28516.3.3 Imagemaps ................................................................. 28716.3.4 Downloadlinks ............................................................ 28816.3.5 Automatische Weiterleitung ........................................ 289

Interaktivität mit JavaScript17 ............................................ 291

17.1 Wie funktioniert JavaScript? ................................................. 292

17.2 JavaScript im Eigenschaftsinspektor ..................................... 293

17.3 JavaScript über Menüs einfügen ........................................... 294

17.4 Funktionsweise eines Verhaltens .......................................... 296

17.5 Ein Verhalten einfügen ........................................................... 298

17.6 Wichtige Verhalten im Überblick .......................................... 30017.6.1 Aktionen hinzufügen ................................................... 30117.6.2 Aktionen bearbeiten ................................................... 30217.6.3 Aktionen entfernen ..................................................... 30217.6.4 Ereignis festlegen ........................................................ 303

17.7 Das JavaScript-Framework Spry ............................................ 303

1261.indb 111261.indb 11 05.02.2009 17:58:2305.02.2009 17:58:23

Page 10: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

12

Inhalt

Formulare erstellen18 ............................................................ 307

18.1 Formulare mit Dreamweaver ................................................. 309

18.2 Funktionsweise einrichten ..................................................... 310

18.3 Formulare layouten ................................................................ 311

18.4 Formularelemente einfügen ................................................... 31218.4.1 Einfache Textfelder ...................................................... 31218.4.2 Mehrzeilige Textfelder ................................................. 31318.4.3 Kontrollkästchen ......................................................... 31418.4.4 Optionsschalter ........................................................... 31518.4.5 Auswahllisten .............................................................. 31618.4.6 Schaltflächen .............................................................. 31818.4.7 Versteckte Felder ........................................................ 31918.4.8 Weitere Elemente ....................................................... 320

18.5 Formularüberprüfung einbauen mit Spry .............................. 32018.5.1 Felder überprüfen ....................................................... 32118.5.2 Eigene Fehlermeldungen festlegen .............................. 32318.5.3 Spry-Überprüfungen bearbeiten .................................. 324

18.6 Ein Kontaktformular anlegen ................................................ 325

Dreamweaver und die Creative Suite19 ............................ 327

19.1 Adobe Photoshop CS4 ........................................................... 32819.1.1 Photoshop-Dateien in Dreamweaver importieren ........ 32819.1.2 Bilder aus der Zwischenablage einfügen ...................... 33219.1.3 Bilder in Photoshop bearbeiten ................................... 33219.1.4 Einstellungen .............................................................. 333

19.2 Adobe Fireworks CS4 ............................................................. 33419.2.1 Fireworks-Dateien in Dreamweaver importieren ......... 33419.2.2 Bilder in Fireworks bearbeiten ..................................... 335

19.3 Eine Bildergalerie erstellen mit Dreamweaver und Fireworks ........................................................................ 335

19.4 Adobe Flash CS4 .................................................................... 33819.4.1 So funktioniert Flash ................................................... 33819.4.2 Plug-in erforderlich ..................................................... 338

19.5 Flash-Filme integrieren .......................................................... 339

1261.indb 121261.indb 12 05.02.2009 17:58:2305.02.2009 17:58:23

Page 11: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

13

Inhalt

Teil IV: Über Dreamweaver hinaus …

Bloggen mit WordPress20 .................................................... 345

20.1 Leistungsmerkmale von WordPress ...................................... 347

20.2 WordPress installieren ........................................................... 348

20.3 WordPress administrieren ..................................................... 35320.3.1 Einloggen im Administrationsbereich ........................... 35420.3.2 Schreiben von Beiträgen ............................................. 35420.3.3 Verwalten von Beiträgen ............................................. 355

20.4 WordPress-Templates ............................................................ 356

Gesucht und gefunden bei Google21 ................................. 361

21.1 Ihre Website mit Google bekannt machen ........................... 363

21.2 Tipps zur Suchmaschinenoptimierung ................................... 36421.2.1 Verwenden Sie Titel und alt-Attribute .......................... 36521.2.2 Meta-Tags ................................................................... 36621.2.3 Meta-Tags bearbeiten .................................................. 36721.2.4 Website von anderen Websites verlinken .................... 36821.2.5 Was Sie unbedingt vermeiden sollten .......................... 369

21.3 Besucher-Statistiken mit Google Analytics ........................... 370

21.4 Anzeigen mit Google AdWords ............................................. 373

21.5 Geld verdienen mit Google AdSense ..................................... 374

Mashups – die Welt in Ihre Website einbinden22 .......... 377

22.1 YouTube-Videos integrieren ................................................... 378

22.2 Google Maps integrieren ....................................................... 381

Index .............................................................................................. 385

1261.indb 131261.indb 13 05.02.2009 17:58:2305.02.2009 17:58:23

Page 12: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

15

Workshops

Dreamweaver CS4 – los geht’s»Hallo-Welt«-Seite erstellen .............................................. 66Mehrere Seiten auf Basis eines Layouts erstellen ............... 71

Eine neue WebsiteLeere Site erstellen ............................................................. 98

Eine Vorlage anlegenDas Layout für die Vorlage defi nieren ................................ 108Überschriften festlegen ...................................................... 110Vorlage erstellen ................................................................ 112

Seiten mit Inhalten füllenNeue Webseite aus der Vorlage erstellen .......................... 119Bilder einfügen ................................................................... 127Tabelle erstellen ................................................................. 130

Erstellen einer NavigationSpry-Menüleiste in Vorlage einfügen ................................. 135Ändern der Menüeinträge ................................................. 137Links im Fußbereich hinzufügen ......................................... 140Vorlage speichern ............................................................... 142

Ein Layout erstellenCSS-Datei bearbeiten ........................................................ 150CSS-Regel body bearbeiten ............................................... 153CSS-Regel #container bearbeiten ...................................... 155CSS-Regel #header bearbeiten .......................................... 158CSS-Regel #header-h1 bearbeiten ..................................... 160CSS-Regel #sidebar1 bearbeiten ....................................... 161CSS-Regel #footer bearbeiten ........................................... 163CSS-Regel #footer p bearbeiten ........................................ 165CSS-Regeln für Navigation anpassen ................................. 168Neue CSS-Regel für Überschrift erstellen .......................... 170Neue CSS-Regel für Links in der Fußzeile erstellen ............ 173

1261.indb 151261.indb 15 05.02.2009 17:58:2305.02.2009 17:58:23

Page 13: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

16

Workshops

Websites testen, veröffentlichen und verwaltenWeitere Browser in die Vorschaufunktion einbinden ......... 178Links überprüfen ................................................................ 181FTP-Server in Dreamweaver einrichten .............................. 183Gesamte Website übertragen ............................................ 187Einzelne Webseite übertragen ........................................... 188Website synchronisieren .................................................... 190InContext Editing für Ihre Website einrichten ................... 193Inhalte online bearbeiten ................................................... 196

Texte eingeben und strukturierenErstellung einer Liste .......................................................... 209

Arbeiten mit CSSSeiteneigenschaften festlegen ............................................ 220Neuen Stil im Eigenschafts inspektor erstellen ................... 224Bereits angelegten CSS-Stil anwenden .............................. 226Neuen CSS-Stil erstellen .................................................... 229Externe CSS-Datei in Seite einbinden ................................ 240

Bilder einfügenBild einfügen ...................................................................... 248Bild-Platzhalter einfügen .................................................... 250Größe eines Bildes in Dreamweaver verändern ................. 254Bild zuschneiden ................................................................ 256

Tabellen erstellenNeue Tabelle erstellen ........................................................ 264Tabellenzellen gruppieren .................................................. 273

Hyperlinks einsetzenAnkerpunkte anlegen und darauf verlinken ....................... 282Eine Imagemap erstellen .................................................... 287

Interaktivität mit JavaScriptRoll over-Bild einfügen ........................................................ 295Seite in neuem Fenster öffnen ........................................... 298

Formulare erstellenSkript für Kontaktformular einbauen ................................. 325

1261.indb 161261.indb 16 05.02.2009 17:58:2405.02.2009 17:58:24

Page 14: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

17

Workshops

Dreamweaver und die Creative SuitePhotoshop-Datei in Dreamweaver importieren ................. 329PNG-Datei importieren und umwandeln ........................... 335Eine Bildergalerie erstellen ................................................. 336Flash-Film in Webseite einfügen ........................................ 339

Bloggen mit WordPressWordPress installieren ....................................................... 349Installation eines Themes ................................................... 356

Gesucht und gefunden bei GoogleIhre Website in Google eintragen ...................................... 363Meta-Tags hinzufügen ........................................................ 366Website bei Google Analytics anmelden ........................... 371Werbeanzeigen mit Google AdSense integrieren ............... 375

Mashups – die Welt in Ihre Website einbindenYouTube-Video in die eigene Webseite einbetten ............. 379Google Maps in Ihre Webseite einbinden .......................... 381

1261.indb 171261.indb 17 05.02.2009 17:58:2505.02.2009 17:58:25

Page 15: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

Kapitel 3

Dreamweaver im VergleichWarum Sie Dreamweaver nutzen sollten

Welche Entwicklung hat Dreamweaver hinter sich? �

Was ist neu in Dreamweaver CS4? �

Welche anderen Produkte gibt es? �

Welche anderen Programme gibt es in Adobes Creative Suite 4? �

1261.indb 491261.indb 49 05.02.2009 17:58:3005.02.2009 17:58:30

Page 16: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

52

3 Dreamweaver im Vergleich

Ich fragte einen Mitarbeiter, wofür die neue Abkürzung denn stehe. Ich erhielt die kurze Antwort: »MX heißt nix!« Die Bezeich-nung ist eine reine Erfi ndung der Marketingabteilung. Im Laufe des Jahres wurde dann Dreamweaver MX vorgestellt, das endlich auch die sehr beliebte Skriptsprache PHP unterstützte, was der Software zum endgültigen Durchbruch verhalf.

Der Nachfolger MX 2004 verabschiedete sich dank CSS vom <font>-Tag, der im HTML-Code die Schriftart defi niert. Neben verbesserter Tabellenbearbeitung wurden viele Kleinigkeiten hin-zugefügt, die den Umgang mit dem Programm erleichterten.

Dreamweaver 8 und die Übernahme von 3.1.3 Macromedia durch Adobe

Im April 2005 hat Adobe überraschend die Übernahme des Hauptkonkurrenten Macromedia bekannt gegeben. Das aktuelle Softwarepaket Adobe Dreamweaver CS4 ist bereits die zweite Version, die unter der Regie von Adobe entwickelt wurde.

Neues in Dreamweaver CS43.2

Die neue Dreamweaver-Version ist Bestandteil der Adobe CS4. Die Bezeichnung CS4 orientiert sich an den anderen Adobe-Pro-dukten und steht als Abkürzung für »Creative Suite «. Zu diesem Softwarepaket zählen beispielsweise Photoshop, Illustrator, Acro-bat, Dreamweaver und Flash.

Bei Dreamweaver CS4 handelt es sich um die Version 10.0. Dies kann man auch im Dialogfenster Hilfe � Über Dreamwea-

ver sehen. Die Build-Nummer ist eine fortlaufende Nummer, die nur von den Entwicklern der Software verwendet wird. Bei jedem Update erhöht sich die Nummer, wobei die Sprünge in der Num-merierung hoch sein können.

Abbildung 3.2 �

Das Fenster Über Dream-

weaver zeigt die Version 10.0.

1261.indb 521261.indb 52 05.02.2009 17:58:3105.02.2009 17:58:31

Page 17: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

53

Neues in Dreamweaver CS4 3.2

Neue Benutzeroberfläche3.2.1

Beim ersten Öffnen von Dreamweaver CS4 fällt direkt die neue Benutzeroberfl äche auf, die jetzt bei den meisten Adobe-Produk-ten einheitlich aussieht. Die gesamte Oberfl äche ist in Grautönen gehalten, damit der Benutzer von den Oberfl ächenelementen nicht abgelenkt wird.

Mehrere Dokumente können gleichzeitig in Registerkarten (Tabs) angeordnet werden, ähnlich wie in modernen Webbrow-sern wie Firefox und Safari.

Die Einfügen-Palette befi ndet sich nicht mehr oberhalb des Do-kumentenfensters, sondern standardmäßig im rechten Bereich, wo auch die anderen Paletten positioniert sind.

Dreamweaver besitzt sehr viele Oberfl ächenelemente, wie z. B. das Eigenschaften-Fenster oder die CSS-Stile-Palette, die aus Platzgründen nicht alle gleichzeitig angezeigt werden können. Ein Programmierer wird z. B. andere Elemente verwenden als ein Designer. Mit der neuen Funktion Arbeitsbereiche können Sie die Anordnung der Elemente speichern. Es gibt bereits eine Reihe von vorgefertigten Arbeitsbereichen, z. B. für Programmierer und Designer.

OS Widget Library

Adobe verwendet für die Benutzeroberfl äche die OS Widget Library (OWL). Alle Adobe-Programme, die OWL nutzen, haben eine einheitli-che Benutzeroberfl äche.

� Abbildung 3.3 Neue Benutzeroberfläche in der Standardansicht ( Arbeits bereich Designer)

1261.indb 531261.indb 53 05.02.2009 17:58:3105.02.2009 17:58:31

Page 18: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

54

3 Dreamweaver im Vergleich

Abbildung 3.4 �

Dreamweaver mit dem Arbeitsbereich Coder

Falls Sie die Arbeitsfl äche der vorherigen Dreamweaver-Version bevorzugen, wählen Sie einfach den Arbeitsbereich Klassisch aus. In diesem Fall wird z. B. die Einfügen-Palette wieder ober-halb des Dokuments positioniert.

Live-Ansicht3.2.2

Zu den wichtigsten Neuerungen gehört die Live-Ansicht, in der die Webseiten so dargestellt werden, wie sie im Webbrowser aus-sehen, was einem echten WYSIWYG (What You See Is What You Get) entspricht. Die Darstellung entspricht dem der Webbrowser Safari von Apple und Chrome von Google. Auch komplexe CSS-Stile und JavaScript funktionieren in dieser Ansicht.

In älteren Dreamweaver-Versionen musste man bei jeder Än-derung am Code zwischen Dreamweaver und einem Webbrow-ser hin und her springen.

Webkit

Die Live-Ansicht wird mit Hilfe von Webkit dargestellt. Webkit ist eine sogenannte Rendering Engine und somit für die Darstellung der Web-seite zuständig. Webkit wird in Apples Webbrowser Safari und Googles Webbrowser Chrome eingesetzt. Im Gegensatz zur Rendering Engine des Internet Explo-rers hält sich Webkit sehr an die Standards.

1261.indb 541261.indb 54 05.02.2009 17:58:3205.02.2009 17:58:32

Page 19: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

55

Neues in Dreamweaver CS4 3.2

Zugehörige Dateien3.2.3

Eine Webseite besteht nicht nur aus HTML-Code und Bildern, sondern es werden auch andere externe Dateien, wie CSS- und JavaScript-Dateien eingebunden. In Dreamweaver CS4 werden alle Dateinamen im Dokumentfenster angezeigt, die im aktuellen Dokument verwendet werden. Durch Anklicken der Dateinamen wird der entsprechende Quelltext angezeigt. Mit dieser neuen Funktion spart man sich die Zeit, die Datei manuell öffnen zu müssen.

InContext Editing3.2.4

Mit dem neuen Onlineservice InContext Editing ist es möglich, ähnlich wie in einem Content-Management-System (CMS), be-stimmte Elemente einer Webseite ohne Dreamweaver zu bear-beiten. Sie können die jeweiligen Bereiche der Webseite, die edi-

� Abbildung 3.5 Über einen Klick auf Live-

Ansicht stellt Dreamweaver die Webseite wie im Web-browser dar.

� Abbildung 3.6 Zu jeder Webseite werden automatisch die zugehörigen externen Dateien angezeigt

1261.indb 551261.indb 55 05.02.2009 17:58:3205.02.2009 17:58:32

Page 20: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

56

3 Dreamweaver im Vergleich

tierbar sein sollen, selbst festlegen. Diese Bereiche können dann online im Webbrowser (ohne Dreamweaver) verändert werden. Somit können Sie anderen Benutzern, die sich nicht mit dem Designen von Websites auskennen, die Möglichkeit geben, In-halte der Webseite zu ändern.

In Kapitel 11, »Websites testen, veröffentlichen und verwal-ten«, werden wir Schritt für Schritt die Verwendung der InCon-text-Editing-Funktion zeigen.

Photoshop-Integration in Perfektion3.2.5

In Dreamweaver CS3 hat Adobe die Zusammenarbeit zwischen Photoshop und Dreamweaver begonnen. Erstmals war es mög-lich, Photoshop-Dateien direkt in eine Webseite einzufügen, ohne sie vorher aus Photoshop exportieren zu müssen. Wenn Sie eine Photoshop-Datei in ein Dreamweaver-Dokument ziehen, öffnet sich automatisch ein Dialogfenster, in dem Sie die Einstellungen für die Umwandlung in ein internettaugliches Format wie JPEG oder GIF vornehmen können.

In der neuen Version wurde die Zusammenarbeit zwischen Dreamweaver und Photoshop erheblich verbessert. Beim Einfü-gen merkt sich Dreamweaver, zu welcher original Photoshop-Da-tei das Bild gehört. Das hat z. B. den Vorteil, dass sich beim Klick auf die Bearbeiten-Schaltfl äche die originale Photoshop-Datei öffnet und Dreamweaver diese nach dem Speichern wieder in das Zielformat (JPEG oder GIF) exportiert. Diese Funktion wird als Adobe Photoshop Smart-Objects bezeichnet.

CSS-Eigenschaftsinpektor3.2.6

In jeder Dreamweaver-Version wird die CSS-Funktionalität ge-steigert. Dreamweaver CS4 verfügt nun über einen eigenen Ei-

Abbildung 3.7 �

Bilder können im Photoshop-Format aus Dreamweaver heraus geöffnet werden.

Updates und Bugfixes

Während Sie dieses Buch lesen, arbeitet Adobe schon an einem Update, das einige Probleme beheben soll. Überprüfen Sie am besten regelmäßig die Website http://www.adobe.de nach Aktualisierungen. Auch auf der Website zum Buch unter www.dreamweaver-buch.de fi nden Sie Hinweise auf etwaige Updates.

1261.indb 561261.indb 56 05.02.2009 17:58:3305.02.2009 17:58:33

Page 21: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

57

Neues in Dreamweaver CS4 3.2

genschaftsinpektor für CSS. Hiermit kann man noch einfacher neue Regeln erstellen und bearbeiten.

Weitere Funktionen, die nicht in diesem Buch 3.2.7 behandelt werden

Dreamweaver arbeitet jetzt mit dem Versionskontrollsystem Sub-version zusammen. Mit einem Versionskontrollsystem können mehrere Designer ohne Probleme gleichzeitig an einem Web-siteprojekt arbeiten.

Mit der Funktion Spry-HTML-Datensätze können Sie dynami-sche Tabellen erstellen, ohne dass ein Datenbanksystem wie z. B. MySQL verwendet wird.

Funktionen, die entfernt wurden3.2.8

In der neuen Dreamweaver-Version kamen nicht nur neue Funk-tionen hinzu, sondern es wurden auch veraltete Funktionen ge-löscht:

Flash-Text �

Mit der Funktion Flash-Text konnten Texte im Flash-Fomat er-stellt werden.Flash-Schaltfl ächen �

Schaltfl ächen mit Roll over-Effekt konnten mit der Funktion Flash-Schaltfl ächen erstellt werden.Layout �

Im Layoutmodus konnten Elemente wie Texte und Bilder mit HTML-Tabellen angeordnet werden. In der neuesten Version wird CSS für das Layout verwendet.Sitemap-Ansicht �

In der Sitemap-Ansicht konnten die Webseiten in einem Dia-gramm dargestellt werden, wobei Linien zwischen den verlink-ten Webseiten angezeigt wurden. Da diese Darstellung oft zu unübersichtlich war und daher kaum genutzt wurde, wurde diese Funktion aus dem Funktionsumfang entfernt.

� Abbildung 3.8 Der neue CSS-Eigenschafts-inpektor

1261.indb 571261.indb 57 05.02.2009 17:58:3305.02.2009 17:58:33

Page 22: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

58

3 Dreamweaver im Vergleich

Zeitleiste �

Mit der Funktion Zeitleiste konnten Animationen mit JavaScript erstellt werden. Die Funktion wurde zwar noch nicht entfernt, jedoch im Menüpunkt veraltet in der Verhalten-Palette ein-geordnet, weshalb sie nicht mehr verwendet werden sollte.

Die Konkurrenz im Vergleich3.3

Obwohl Dreamweaver die meistgenutzte Software für die Erstel-lung von Websites ist, lohnt sich auch ein Blick auf die Konkur-renzprogramme. Vor allem dann, wenn man verschiedene Pro-gramme kombinieren möchte oder sich noch nicht ganz sicher ist, welche Software man einsetzen möchte, kann eine Gegenüber-stellung sehr hilfreich sein.

Adobe GoLive3.3.1 9

Adobe GoLive kommt Dreamweaver vom Funktionsumfang und Komfort der Bedienung her am nächsten. GoLive war vor der Übernahme von Macromedia das Flaggschiff von Adobe. Nach der Übernahme nimmt Dreamweaver diese Rolle ein. Im April 2008 hat Adobe deshalb bekannt gegeben, dass die Entwicklung von GoLive eingestellt wird.

RapidWeaver3.3.2

RapidWeaver ist ein reines Mac-Programm. Es hat den Vorteil, dass es perfekt auf das Apple-Betriebssystem abgestimmt ist und deshalb auch eine sehr leichte Bedienung erlaubt. RapidWeaver verfolgt einen ganz anderen Ansatz als die meisten anderen Pro-gramme: Aus einer großen Fülle von Designvorlagen wählt man das gewünschte Design und kann die Inhalte der Seite erstellen. Der HTML- und CSS-Code wird automatisch von RapidWeaver erstellt.

Für Dreamweaver-Entwickler kann RapidWeaver im Hinblick auf das Rapid Prototyping sehr nützlich sein. Man kann damit sehr schnell einen funktionierenden Prototyp der Website erstel-len und diese anschließend in Dreamweaver fertigstellen.

Rapid Prototyping

RapidWeaver eignet sich hervorragend für das Rapid Prototyping, eine Technik aus der Softwareentwick-lung. Deren Ziel ist es, schnell einen Prototyp zu erstellen, damit der Auftrag-geber sich ein Urteil über die Software bilden kann. Ein Prototyp realisiert immer nur einen Teil der geforderten Funktionalitäten, ist dafür aber schon früh im Entwick-lungsprozess verfügbar.

1261.indb 581261.indb 58 05.02.2009 17:58:3305.02.2009 17:58:33

Page 23: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

Kapitel 13

Arbeiten mit CSS So meistern Sie Cascading Stylesheets

Wie erstelle ich CSS? �

Wie gehe ich mit CSS-Stilen um? �

Wie verschiebe ich CSS-Stile? �

Welche fortgeschrittenen Techniken gibt es? �

1261.indb 2151261.indb 215 05.02.2009 17:59:4105.02.2009 17:59:41

Page 24: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

216

13 Arbeiten mit CSS

Arbeiten mit CSS13

In Kapitel 10, »Ein Layout erstellen«, haben Sie bereits intensiv mit CSS gearbeitet, um das Design für die Beispielwebsite zu er-stellen. In diesem Kapitel werden wir noch weiter in die Welt von CSS eindringen.

Was sind Cascading Stylesheets?13.1

Zur Formatierung von Seitenelementen wurde früher HTML ein-gesetzt. Heute benutzt man dafür CSS (Cascading Stylesheets). Mit dieser Sprache können Sie sogenannte CSS-Stile oder CSS-Re-geln anlegen, die die Formatierung einzelner Elemente oder auch Tags übernehmen.

Man kann CSS entweder nur für die Formatierung der Schrift oder auch für das gesamte Layout einer Website einsetzen. Vie-les ist damit möglich. Die hohe Kunst des CSS-Designs kann man auf der Website http://www.csszengarden.com von Dave Shea be-wundern. Der Autor zeigt dort, wie man nur durch Austausch der Stylesheets das Design total verändern kann. Die HTML-Datei, die nur die Struktur (wie Überschriften und Absätze) und den In-halt der Seiten enthält, bleibt dabei unverändert.

Bei CSS-Websites ist die Verwendung von Tabellen zum Erstel-len des Layouts absolut tabu. Das Layout wird allein durch die CSS-Datei defi niert. Das hat folgende Vorteile:

Erfüllung der aktuellen Webstandards � (siehe http://w3c.org)Redesign � allein durch Austausch der CSS-Datei möglichHTML-Datei erheblich kleiner, dadurch schnellerer Aufbau der �

SeiteDruckversion � kann ein ganz anderes Aussehen habenSuchmaschinen können die Inhalte der Webseite besser erfas- �

sen � Site ist barrierefrei (und zum Beispiel von Screenreadern er-

fassbar)

Literaturhinweise

Da CSS so ein komplexes Thema ist, sollten Sie weite-re Bücher zu Rate ziehen. Folgende weiterführende Bücher zum Thema CSS kann ich Ihnen empfehlen:

»Der CSS-Problemlöser« �

von Rachel Andrew, dpunkt.verlag»Zen und die Kunst des �

CSS-Designs« von Dave Shea, Addison-Wesley»CSS Desgin« von �

Heiko Stiegert, Galileo Design»Fortgeschrittene CSS- �

Techniken« von Ingo Chao und Corina Rudel, Galileo Computing»CSS-Praxis« von Kai �

Laborenz, Galileo Compu-ting

1261.indb 2161261.indb 216 05.02.2009 17:59:4105.02.2009 17:59:41

Page 25: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

217

Was sind Cascading Stylesheets? 13.1

Externe und interne CSS13.1.1

Stile können sowohl innerhalb (intern) einer Webseite defi niert werden als auch außerhalb (extern) in einer extra dafür angeleg-ten Stylesheet-Datei. Interne Stile sind nur innerhalb der Web-seite gültig, in der sie angelegt wurden. Ihr Einsatz ist zum Beispiel sinnvoll, wenn eine Überschrift nur auf einer Webseite blau dar-gestellt werden soll.

Externe Stile , die für mehrere Webseiten gelten sollen, werden nicht in einer Webseite, sondern in einer separaten Stylesheet-Datei defi niert.

� Abbildung 13.1 Alle drei Webseiten verwenden die gleiche HTML-Datei (oberes Bild). Sie unterscheiden sich nur durch die Verwendung unterschiedlicher CSS-Dateien.

� Abbildung 13.2 Der interne Stil für <h1> zählt nur für Überschriften auf der Webseite, in die er eingebun-den wird.

1261.indb 2171261.indb 217 05.02.2009 17:59:4105.02.2009 17:59:41

Page 26: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

218

13 Arbeiten mit CSS

Die Erstellung von internen Stilen ist in Dreamweaver CS4 sehr einfach. Wie alle anderen Einstellungen für HTML-Elemente kön-nen auch sie über den Eigenschaftsinspektor erstellt werden.

Externe Stylesheets werden in einer separaten Datei formu-liert und auf dem Webserver abgelegt. Der Vorteil daran ist, dass sie ganz einfach in mehreren Webseiten eingesetzt werden kön-nen. Gleichzeitig wirken sich Änderungen in der CSS-Datei auto-matisch auf alle betroffenen Webseiten aus: Angenommen, Sie möchten die Farbe aller Überschriften Ihrer Website von Grün zu Grau ändern, so müssen Sie nur den CSS-Stil in der Stylesheet-Datei anpassen.

CSS in Vorlagen einsetzen13.1.2

Interne Stile beziehen sich normalerweise immer nur auf ein Dokument. Wenn Sie sie jedoch in eine Vorlage integrieren, so werden sie auf alle Webseiten übertragen, die auf der Vorlage basieren.

Interne und externe CSS kombinieren

Es ist auch möglich, interne und externe Stylesheets zusammen zu verwenden. Wenn ein Stil sowohl im internen als auch im exter-nen Stylesheet defi niert wird, hat immer der interne Stil Vorrang. Wenn zum Bei-spiel der <h1>-Tag in der externen Stylesheet-Datei als grau und intern als blau defi -niert wird, so wird die Über-schrift in blauer Schrift ange-zeigt.

Abbildung 13.3 �

Oben sehen Sie den Link zu einer separaten CSS-Datei, in der die Stile für das HTML-Dokument extern gespeichert werden.

1261.indb 2181261.indb 218 05.02.2009 17:59:4205.02.2009 17:59:42

Page 27: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

219

CSS für Einsteiger 13.2

Methoden zur CSS-Erstellung13.1.3

In Dreamweaver gibt es verschiedene Möglichkeiten zur Erstel-lung von Cascading Stylesheets:

Manuell � im Quelltext In der Quelltextansicht können Sie Stile selbst manuell einge-ben. Dafür sind sehr gute Kenntnisse in CSS erforderlich. Diese Methode wird in diesem Buch nicht behandelt, da wir uns nur über die weniger aufwändigeren Menüs bewegen wollen.Im Bedienfeld »CSS-Stile« � Im Fenster CSS-Stile können sowohl interne als auch externe Stile angezeigt und verwaltet werden. Diese Methode ist die optimale, um Stile in Dreamweaver zu erstellen und zu bear-beiten.Im � Eigenschaftsinspektor Über das Fenster Eigenschaften können neue Stile sehr ein-fach durch die Defi nition von Schriftfarben und Schriftgrößen erstellt werden. In Dreamweaver CS4 wurde der Eigenschafts-inspektor stark erweitert.In � den Seiteneigenschaften Über das Menü Modifizieren � Seiteneigenschaften können Sie komfortabel Hintergrundfarbe, Standardschriftart und Hy-perlinks-Stile einstellen. Auch bei dieser Methode werden die Stile nur intern angelegt.

Am einfachsten ist es, Stile zunächst nur über den Eigenschafts-inspektor und die Seiteneigenschaften zu erstellen. Wenn Sie mit der Zeit etwas mehr Erfahrung mit CSS gesammelt haben, können Sie die Stile über das Bedienfeld CSS-Stile verwalten.

CSS für Einsteiger13.2

Wir werden für die Erstellung von CSS-Stilen zunächst ausschließ-lich den Eigenschaftsinspektor und die Funktion Modifizieren � Seiteneigenschaften verwenden. HTML- oder CSS-Kenntnisse sind dafür nicht erforderlich.

Die Stile werden intern abgespeichert. Glücklicherweise be-steht in Dreamweaver CS4 auch die Möglichkeit, interne Stile in externe zu exportieren. Sie können die Formatierungen somit später auch für eine ganze Website gültig machen. Wir werden am Ende dieses Kapitels genauer darauf eingehen.

CSS automatisch erzeugt

Schon in der Version 1.0 gab es in Dreamweaver den Menüpunkt Modifizieren � Seiteneigenschaften. Bis einschließlich Dreamweaver MX (Version 6) wurden die Einstellungen, die der Anwender dort vornahm, im <body>-Tag als Attribute abgespeichert. Diese Metho-de hat aber mehrere Nach-teile. Zum Beispiel kann damit nicht die Textgröße oder Schriftart festgelegt werden. Seit Dreamweaver MX 2004 (Version 7) wer-den die Seiteneigenschaften automatisch als interne Stylesheets angelegt.

1261.indb 2191261.indb 219 05.02.2009 17:59:4205.02.2009 17:59:42

Page 28: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

220

13 Arbeiten mit CSS

CSS über Seiteneigenschaften13.2.1

Die wichtigsten Stile werden in Dreamweaver über die Seiten-eigenschaften (Menü Modifizieren � Seiteneigenschaften) defi -niert. Folgende Eigenschaften können dort eingestellt werden:

Schriftart � , Schriftfarbe und Schriftgröße Hintergrundfarbe und Hintergrundbild � und Einstellungen des Seitenrands Hyperlink-Stile � und Roll over-Effekte

Wenn Sie die Seiteneigenschaften in einer Vorlage (Template) konfi gurieren, so werden alle daraus erstellten Seiten automatisch damit formatiert. Wenn Sie hingegen die Seiteneigenschaften ei-ner Webseite einrichten, so gelten die Einstellungen nur für diese Seite.

Schritt für Schritt: Seiteneigenschaften festlegen

1 Neue Seite erstellenErstellen Sie für die Übungen in diesem Kapitel eine neue HTML-Datei, indem Sie Datei � Neu wählen und anschließend die Ka-tegorie Leere Seite, den Seitentyp HTML und unter Layout den Eintrag keine wählen. Speichern Sie die Datei zum Beispiel unter dem Dateinamen css_uebung.html ab.

2 Text eingebenUm die Auswirkungen der Stile zu sehen, muss Ihre Seite erst ein-mal Text enthalten. Erstellen Sie eine Überschrift mit dem Format Überschrift 1 und fügen darunter einen kurzen Absatz ein. Da wir gleich auch noch einen Stil für Datumsangaben erstellen, be-nötigen wir noch eine solche Datumsangabe. Erstellen Sie außer-dem noch einen leeren Hyperlink (siehe Kapitel 16, »Hyperlinks einsetzen«).

Abbildung 13.4 �

Erstellen Sie zunächst eine leere HTML-Seite.

1261.indb 2201261.indb 220 05.02.2009 17:59:4205.02.2009 17:59:42

Page 29: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

221

CSS für Einsteiger 13.2

3 Menü »Seiteneigenschaften« öffnenWählen Sie Menü � Modifizieren � Seiteneigenschaften, oder klicken Sie im Eigenschaftsinspektor auf die Schaltfl äche Seiten-

eigenschaften.

4 Kategorie »Erscheinungsbild (CSS)«Es öffnet sich ein Einstellungsfenster, das in mehrere Kategorien unterteilt ist. Sie können in der ersten Kategorie Erscheinungs-

bild (CSS) die Eigenschaften der Schrift festlegen. Auch der Sei-tenrand lässt sich hier einstellen.

Die Kategorie Erscheinungsbild (HTML) sollten Sie möglichst nicht verwenden, da hiermit die Formatierungseigenschaften ohne CSS defi niert werden.

� Abbildung 13.5 css_uebung.html – unsere Übungsdatei

� Abbildung 13.6 Klicken Sie auf Seiteneigen-schaften.

� Abbildung 13.7 Hier legen Sie die Schrifteigen-schaften fest.

1261.indb 2211261.indb 221 05.02.2009 17:59:4505.02.2009 17:59:45

Page 30: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

222

13 Arbeiten mit CSS

5 Kategorie »Hyperlinks (CSS)« In der Kategorie Hyperlinks (CSS) können Sie die Darstellung der Hyperlinks bestimmen.

Falls gewünscht, können Sie hier abweichend von der Stan-dardschrift auch eine andere Schriftart und Schriftgröße einstel-len.

Bei den Farbeinstellungen ist zu beachten, dass ein Hyperlink insgesamt vier Zustände aufweisen kann. Für jeden Zustand kön-nen Sie eine eigene Farbe defi nieren:

Farbe � für Hyperlink

bestimmt die Farbe für Links, die noch nicht besucht worden sind.Besuchte � Hyperlinks

legt die Farbe für Hyperlinks fest, die man vorher schon ange-klickt hat.Aktive � Hyperlinks

legt die Farbe fest, die in dem Moment angezeigt wird, wenn man mit der Maustaste auf den Hyperlink klickt.Roll over-Hyperlinks �

defi niert die Farbe, die angezeigt wird, wenn sich der Mauszei-ger über dem Link befi ndet.

In der Liste Unterstreichungsstil können Sie festlegen, ob über-haupt und, wenn ja, in welchen Fällen Unterstriche unter den Hyperlinks angezeigt werden sollen.

6 Kategorie »Überschriften (CSS)« Neben der Schriftart können Sie für jedes Überschriftenformat auch eine individuelle Größe und Farbe defi nieren.

Abbildung 13.8 �

Sollen Links unterstrichen werden?

1261.indb 2221261.indb 222 05.02.2009 17:59:4605.02.2009 17:59:46

Page 31: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

223

CSS für Einsteiger 13.2

7 Änderungen überprüfenDie weiteren Kategorien beziehen sich nicht auf die CSS-Stile. Kli-cken Sie auf OK, um die vorgenommenen Einstellungen wirksam zu machen.

CSS über den Eigenschaftsinspektor13.2.2

In Dreamweaver CS4 wurde der Eigenschaftsinspektor stark er-weitert. Er besitzt nun zwei Modi.

Im HTML-Modus werden Einstellungen vorgenommen, die den HTML-Code betreffen. Dazu gehört z. B. die Einstellung der For-mate (wie z. B. Überschrift 1 oder Absatz).

Im CSS-Modus können die wichtigsten Stileigenschaften, wie z. B. Schriftart, Schriftgröße und Schriftfarbe eingestellt werden.

� Abbildung 13.9 Eigenschaften für Überschriften

� Abbildung 13.10 Die Änderungen sind jetzt wirksam. �

� Abbildung 13.11 Der HTML-Modus des Eigen-schaftsinspektors

1261.indb 2231261.indb 223 05.02.2009 17:59:4605.02.2009 17:59:46

Page 32: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

224

13 Arbeiten mit CSS

Diese Angaben beziehen sich auf die im Feld Zielregel ange-gebenen Elemente. In unserem Beispiel beziehen Sie die Stilei-genschaften auf body, td, th. Im letzten Abschnitt wurde durch Einstellen der Seiteneigenschaften u. a. diese Regel automatisch angelegt.

Mit dem Eigenschaftsinspektor können Sie einen Textbereich markieren und ihm anschließend Schriftart, Schriftgröße, Schrift-farbe und andere Attribute zuweisen. Daraufhin erstellt Dream-weaver einen neuen CSS-Stil. Diesen können Sie auch auf an-dere Textstellen anwenden, ohne die Schrifteinstellungen erneut durchführen zu müssen.

Schritt für Schritt: Neuen Stil im Eigenschafts inspektor erstellen

1 Datei öffnenÖffnen Sie die Datei css_uebung.html aus der vorigen Schritt-für-Schritt-Anleitung oder erstellen Sie eine neue HTML-Datei, in-dem Sie Datei � Neu wählen und anschließend die Kategorie Leere Seite, den Seitentyp HTML und unter Layout den Eintrag keine wählen.

2 Textstelle markierenMarkieren Sie eine Textstelle, die Sie formatieren möchten. Im fol-genden Beispiel soll das Datum im Fließtext umgestaltet werden.

3 Schriftart, Schriftfarbe usw. einstellenIm Eigenschaftsinspektor können Sie im Modus CSS die Schrift-

art �, Grösse � und Farbe � einstellen. Da wir eine neue CSS-Regel für die Auswahl erstellen möchten, achten Sie darauf, dass unter Zielregel Neue CSS-Regel � ausgewählt ist.

Sobald Sie eine Einstellung, wie z. B. die Schriftfarbe, verän-dern, öffnet sich ein neues Dialogfenster, in dem Sie den Namen der neuen CSS-Regel festlegen können.

Abbildung 13.12 �

Der CSS-Modus des Eigenschafts inspektors

1261.indb 2241261.indb 224 05.02.2009 17:59:4705.02.2009 17:59:47

Page 33: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

225

CSS für Einsteiger 13.2

4 Neuen Namen eingebenGeben Sie im Dialogfenster einen Namen ein. Der Name sollte dabei nicht die Einstellungen des Stils beschreiben sondern seinen Anwendungszweck. Wenn Sie zum Beispiel einen Termin in Rot formatieren möchten, so sollten Sie die CSS-Regel termin oder datum nennen und nicht etwa rot. Der Vorteil liegt darin, dass Sie später leichter das Format ändern können (zum Beispiel in die Farbe Blau), ohne dass auch der Name der CSS-Regel geändert werden muss.

Unter Selektor-Typ sollte Klasse eingestellt werden, damit Sie einen Namen festlegen können.

� Abbildung 13.13Wir fügen ein Datum ein.

� Abbildung 13.14 Für das Datum legen wir eine CSS-Regel fest.

���

1261.indb 2251261.indb 225 05.02.2009 17:59:4705.02.2009 17:59:47

Page 34: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

226

13 Arbeiten mit CSS

5 FertigstellenKlicken Sie auf OK, um die CSS-Regel fertigzustellen. In der Liste Zielregel wird nun ».datum« angezeigt. Wenn Sie nun weitere Einstellungen, wie z. B. das Ändern der Größe, vornehmen, so werden diese direkt für die CSS-Regel .datum übernommen, ohne dass sich das Dialogfenster erneut öffnet.

Wenn Sie die CSS-Regel angelegt haben, ist es möglich, sie auf derselben Webseite mehrfach einzusetzen . Wenn Sie die CSS-Regel in einer Vorlage erstellt haben, so steht sie auch auf jeder anderen Seite der Site zur Verfügung.

Schritt für Schritt: Bereits angelegten CSS-Stil anwenden

1 Markieren eines BereichsMarkieren Sie eine Textstelle in unserem Übungsdokument css_ uebung.html, auf die der zuvor erstellte CSS-Stil angewendet wer-den soll.

2 Stil auswählenDa wir nun keine Änderungen am Stylesheet durchführen wollen sondern nur eine CSS-Regel anwenden möchten, wählen wir im Eigenschaftsinspektor den HTML-Modus �. Wählen Sie in der Liste Klasse den gewünschten Eintrag (wie z. B. datum in unse-rem Beispiel) aus. Wenn Sie auf den Eintrag Keine klicken, wird die CSS-Regel (Klasse) von der markierten Stelle wieder entfernt. Die CSS-Regel selbst wird damit nicht gelöscht.

Abbildung 13.15 �

Diese Darstellung können Sie nun mehrfach anwenden. �

1261.indb 2261261.indb 226 05.02.2009 17:59:4805.02.2009 17:59:48

Page 35: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

227

Fortgeschrittene Techniken 13.3

� Abbildung 13.16 Die Regel lässt sich leicht auch auf andere Texte anwenden.

Wenn Sie bereits Kapitel 10, »Ein Layout erstellen«, gelesen haben, wird Ihnen auch das Bearbeiten von CSS-Regeln nicht schwerfallen. Aber auch für alle Leser, die sich hier zunächst über die Grundlagen von CSS informieren, sei gesagt: Dreamweaver nimmt Sie auch bei dieser Aufgabe an die Hand, und Sie müssen nicht etwa im Quellcode der CSS-Dateien arbeiten. Im folgenden Abschnitt werden wir darauf näher eingehen.

Über die Seiteneigenschaften festgelegte Stile können Sie je-doch ohne Probleme genauso verändern, wie Sie sie angelegt ha-ben. Beachten Sie jedoch dabei, dass Sie bei Webseiten, die auf einer Vorlage basieren, die Seiteneigenschaften nur in der Vor-lage ändern sollten.

Fortgeschrittene Techniken13.3

In diesem Abschnitt erfahren Sie, wie Sie sowohl interne als auch externe Stile erstellen und verwalten. Im Gegensatz zum vorhe-rigen Abschnitt, in dem die Seiteneigenschaften und der Eigen-schaftsinspektor für das Erstellen von Stilen verwendet wurden, werden die Stile hier über das Bedienfeld CSS-Stile verwaltet.

Für die Erstellung von Stylesheets in diesem Kapitel sind grund-legende HTML-Kenntnisse hilfreich. Werfen Sie dazu ggf. einen Blick in Kapitel 2, »Die Sprachen des Web«, und Kapitel 10, »Ein Layout erstellen«.

1261.indb 2271261.indb 227 05.02.2009 17:59:4805.02.2009 17:59:48

Page 36: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

385

Index

1&1 Internet AG 311-Bit Transparenz 246.de 27.dwt 115.fla 338.gov 27.museum 27.org 27.swf 338.tv 27

AAbsätze 206Absatz (HTML-Tag) 38Acrobat Reader 289Adobe Fireworks CS4 334Adobe Flash CS4 338Adobe Photoshop CS4 328Ajax 44, 303Aktion 297Aktionen

bearbeiten 302entfernen 302hinzufügen 301

Aktualisieren 142, 192Aktualisierung 83ALL-INKL.COM 31alt-Attribute 365Alternativtext 127, 253Änderungsdatum 190Animation 246Ankerpunkte 282Ansichtsmodi 80Anzeigen 373Arbeitsumgebung anpassen 90Attribute 38Auschecken 186Ausrichtung 125

Überschriften 206Auswahllisten 316Auszeichnungssprache 37

BBanner 104Barrierefreiheit 216, 253, 266, 309BBEdit 59Bedienfeld

Dateien 101Bedienfelder 87, 88Bedienfeldgruppen 87Beispielprojekt 96Besucher-Statistiken 370Bildeigenschaften 85Bild(er) 85, 189

Abstand 253ausrichten 252austauschen 251, 301CSS 249einfügen 89, 126, 127, 248Einstellungen 252Größe einstellen 254Helligkeit 257in Fireworks bearbeiten 335in Photoshop bearbeiten 332Kontrast 257nicht angezeigt 176Platzhalter 250Proportionen 255Schärfe 257Text umfließen 252vorausladen 301zuschneiden 256

Bildergalerie 335Bilderordner 100Bildformate 244Bildgröße 244Bild-Platzhalter 250

austauschen 251Bildschirmauflösung 83Block 160<blockquote> 207Blog 346Blogger 347body 39, 153

Hintergrundfarbe 153Standardschriftart 153

Box 156, 158Browser 81, 176

Adresszeile 24Standardformatierung 40

Browserfenster öffnen 301Browserkompatibilität 182Browserliste 178Browservorschau 178Bugfixes 53, 56

CCache 100Cascading Stylesheets (CSS) 41,

70, 121, 215, 216, 278Cascading Stylesheets (CSS) �

auch StylesheetsccTLD 27Code-Ansicht 81Code-Editor 60Code-Vervollständigung 60#container 154Content-Management-System

346Contribute 61Copyright 140Creative Suite 52, 64Creative Suite 4 60CSS 121, 215, 216

Abstände 233bearbeiten 235Block 232Box 233Eigenschaften hinzufügen 236Eigenschaftsinspektor 219einbinden 42Einführung 219Erstellung 219Erweiterungen 235externe Stile 217Grundlagen 215, 216Hintergrund 232Hintergrundfarbe 220Hintergrundgrafik 249Hyperlink-Stile 220

1261.indb 3851261.indb 385 05.02.2009 18:01:0905.02.2009 18:01:09

Page 37: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

386

Index

CSS (Forts.)im Quelltext 219interne Stile 217in Vorlagen einsetzen 218Liste 234mehrfach einsetzen 226neuer Stil 228Positionierung 234Rahmen 233Regel löschen 237Rollover-Effekte 220Schriftart 220, 232Schriftfarbe 220, 232Schriftgröße 220, 232Seiteneigenschaften 219, 220Seitenrand 220, 233Stile-Eigenschaften 236Stile löschen 237Stile umbenennen 237über Eigenschaftsinspektor 223verknüpfen 239verschieben 241

CSS-Datei 41Aufbau 148bearbeiten 150speichern 231

CSS-Eigenschaften 152CSS-Grundlagen 148CSS-Klasse

umbenennen 238CSS-Regel 149, 216

duplizieren 238eigene erstellen 170Eigenschaften 151neue erstellen 170v erschieben 238

CSS-Regel-Definition 152CSS-Standards 148CSS-Stil 125, 149, 216, 219, 228

an Texte zuweisen 238anwenden 226Fenster 150

CSS-Syntax 228CSS Zen Garden 216

DDatei

aus Vorlage 119erstellen 66löschen 192umbenennen 192

Dateigröße 83Datenbanken 32Denic 27Digitalkamera 244, 246Dokumentenfenster 80Domain 25Domainname 25Domains

IDN-Domains 26TLD 26Umlaute 26

Downloadlinks 278, 288Dreamweaver Exchange 66Dreamweaver MX 51Dreamweaver MX 2004 51Dreamweaver-Templates 115Dreamweaver-Testversion 64Dreamweaver Ultradev 51Dreamweaver-Update 64Druckversion 216Dummy-Link 285Dynamische Webseiten 44

EEditierbare Bereiche 121Eigenschaftsinspektor 84, 124Einchecken 186Einfügen-Menüs 90Einfügen-Palette 89Eingabehilfen 309Einrückung 207Einrückungen 207Einstellungen 91E-Mail-Adressen 31E-Mail-Links 278, 285

Betreffzeile 285Entwurfs-Ansicht 80, 202Ereignis 298

festlegen 303

Ereignisse 292Erweiterte Ansicht 263Excel 260Externe Stile 217

FFadenkreuz 281Farben 245

16,7 Millionen 246256 245

Favoriten 122fett 125Firefox 176Firewall 185Fireworks 61, 64, 244, 246Fireworks-Dateien

importieren 334Flash 61, 189, 378

ausrichten 341Auto-Wdg 341Eigenschaften 340H-Abstand 341Qualität 341Schleife 341skalieren 341V-Abstand 341

Flash-Film einfügen 339Flash-Player 338Flash-Plug-in 338Fließtext 124#footer 163Footer

Absätze 165#footer p 165Formular 308

Aktion 311Auswahllisten 316Barrierefreiheit 309Danke-Seite 325Elemente einfügen 312Fehlermeldungen 323Felder überprüfen 321Funktionsweise 310GET 311Kennwort 313layouten 311mit CSS gestalten 311Optionsschalter 315

1261.indb 3861261.indb 386 05.02.2009 18:01:1005.02.2009 18:01:10

Page 38: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

387

Index

Formular (Forts.)Passwort 313Pflichtfelder 320PHP-Skript 325POST 311Schaltflächen 318Skript 325überprüfen 302Upload 320Versendemethode 311versteckte Felder 319Zeilenumbrüche 314

Formularbereich 308Formularelemente 309, 312Formularüberprüfung 320Fotos 245

Bildformat 246Freehand 60Freistellen 244Frontpage 59FTP 279

Einstellungen 182, 184passives 185

FTP-Benutzerdaten 184Fußbereich 107Fußzeilennavigation 139

GGameserver 32Gehe zu URL 302Gesamttabellen 266GET 311GIF 245GIF-Animationen 246GoLive 58Google 361, 362, 364, 368

Bildersuche 366Google AdSense 362, 374Google AdWords 362, 373Google Analytics 362, 370Google Earth 362Google-Index 363Google-Konto 371Google Mail 362Google-Maps 377Großschreibung 100Grundeinstellungen 98gTLD 27

HHauptbereich 107#header 157Header 39#header h1 159Helligkeit 257Helligkeitskorrekturen 244Hervorhebungen 211Hintergrund 158Hintergrundbild 220

festlegen 155Hintergrundfarbe 220Hintergrundgrafik 249

kacheln 148Homepage 97, 120, 180Host Europe GmbH 31Hotspots 287Hover-Effekt 295HTML 37, 66HTML-Attribute

align 38HTML-Entities 203HTML-Tag 83

<br> 38<em> 38<form> 308<h1> 38<img> 38<link> 42<ol> 38<p> 38<strong> 37<table> 38, 268Übersicht 38<ul> 38

http 279HTTP-Adresse 100https 279Hyperlink 39, 138, 279

Prüfung 100relativ zu 100

Hyperlinks 24, 85, 278absolute 281anlegen 280externe 281Farbe 222interne 281JavaScript einfügen 293

Hyperlinks (Forts.)korrigieren 192leere 285löschen 284relative 281zustände 222

Hyperlinks � auch LinksHyperlink-Stile 220Hypertext Transfer Protocol

(HTTP) 25

IICANN 27IDN-Domains 26Illustrator 245Illustrator CS4 60Imagemaps 287ImageReady 61Import

Fireworks-Dateien 334Flash 339Photoshop-Dateien 328PNG-Datei 335

Impressum 139Inhalte strukturieren 205Inhaltsbereich 104Innenabstände 158Installation 64Interaktives Menü 133Interne Stile 217Internet Explorer 176, 177, 179IP-Adresse 25, 279IP-Adressräume 27

JJava 32JavaScript 37, 43, 292

Alert-Fenster öffnen 293Ereignisse 292manuell 301Syntax 293über Menüs einfügen 294Verhalten 293

JavaScript-Befehle 294JavaScript-Frameworks 305Joomla 62JPEG 246

1261.indb 3871261.indb 387 05.02.2009 18:01:1005.02.2009 18:01:10

Page 39: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

388

Index

KKlassen-Selektoren 228Klassen-Typ erstellen 230Kleinschreibung 100Kodierungs-Typ 311Kompression 246Kontakt 139Kontaktformular 308, 325Kontrast 257Kontrollfelder 315Kontrollkästchen 314Kopfzeile 266Kostenloser Webspace 30kursiv 125

LLabel-Tag 309Layout

erstellen 107Gesamtbreite 154Höhe 158mit Tabellen 41Ränder einstellen 162schwarzer Rand 156

Leere Links 285Leerzeichen 204, 208

geschütztes 204Leerzeilen 208Lesesysteme 309Lesezeichen 122Link 176Linkpopularität 368Links 140

absolute 281testen 180

Linksbündig 206Linux-Server 32Listen 125, 209

geordnet 234geordnete 126ungeordnet 234ungeordnete 126

Listenformat 126Live-Ansicht 54Logo 104, 107Lokale Infos 99Lokale Navigationen 134

Lokaler Stammordner 99Lupe-Werkzeug 83

M#mainContent 161Markup-Language 37Menüeinträge ändern 137Metatags 121Meta-Tags 366

bearbeiten 367Description 366hinzufügen 366Keywords 366

Microsoft Expression Web 59Mozilla 176MySQL 32, 44

NNavigation 104

Fußbereich 140Navigationsleiste 296Navigationsmenü 107Neue CSS-Regel 170Neue Site 97Neue Webseite 118Nic 28

OObjekt 297onAbort 303onClick 303onDblClick 303onLoad 303onMouseDown 303onMouseOut 303onMouseOver 303onMouseUp 303Open Directory Project 368Opera 177Optionsschalter 315Ordner erstellen 192

PPaletten 87Passwort-Textfelder 313

PDF-Dateien 289Pfadangaben 281Photoshop 61, 244, 246Photoshop-Dateien

importieren 328Photoshop-Integration 56PHP 32, 37, 44, 60, 66, 82Pixelgrafiken 245Plug-in überprüfen 302PNG 247PNG-Dateien importieren 335PNG-Format 334Popup-Meldung 302Positionierung 234POST 311Primärbrowser 179Programmstart 65Protokoll 279Provider 25, 30, 184PSD 328

QQuickTime-Player 338

RRahmen 156Randstärke 265Rapid Prototyping 58RapidWeaver 58RealPlayer 338Rechtsbündig 206Redesign 216Relative Links 281Remote-Informationen 183Rollover-Bild 251, 294

vorausladen 295Rollover-Effekte 220Ruby on Rails 32

SSafari 177Schaltflächen 318Schärfe 257Schriftart 85, 124, 220, 224Schriften 124, 245Schriftfarbe 220, 224

1261.indb 3881261.indb 388 05.02.2009 18:01:1105.02.2009 18:01:11

Page 40: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

389

Index

Schriftgröße 85, 124, 220, 224in CSS einstellen 166

Schriftgruppen 124Scroll-Funktion 83Sehbeeinträchtigung 309Seiteneigenschaften 220Seiteninhalte 117, 118

einfügen 122Seitenrand 220Seitentitel 69, 121, 122Seite speichern 70Sekundärbrowser 179Selektoren 149, 228Selektor-Typ 229Selfhtml 37Seriennummer 64Shop 61Site 97

anlegen 97für fertige Website 100konfigurieren 97wechseln 101

Site-Name 99Site-Ordner 186Slices 146Sonderzeichen 39, 203Spaltenmenü 270Spiele 61Spry 292, 320Spry-Menüleiste 135

anpassen 137einfügen 135

Spry-Überprüfung 322Spry-Widgets 305SSL 313Stammordner 97Standard-Ansicht 262Startfenster 65Startseite 120Statuszeile 83Stil

intern oder extern 230STRATO AG 31Stylesheets 189, 215, 216Subdomains 26Suchmaschinen 362Suchmaschinenoptimierung 364Synchronisieren 192Syntax-Highlighting 60

TTabelle 260

auswählen 267Barrierefreiheit 266Breite 269einfügen 89, 130erstellen 130, 264Größe 265Größe zurücksetzen 269Höhe 269Kopfzeile 266markieren 267Randstärke 265sortieren 275Spalte auswählen 270Spalte löschen 274Spalten 132Spaltenbreiten verändern 132Umbruch 272Zeile auswählen 270Zeile löschen 274Zeilen 132, 265Zellabstände 265Zellauffüllung 265Zelle auswählen 271

Tabellenansichten 262Tabellenbereiche 270

Eigenschaften 271Tabellen-ID 268Tabellen-Klasse 268Tabellen-Layout

Nachteile 41Tabellenlinien 81, 262Tabellenzellen

ausrichten 272gruppieren 272

Tabellenzellen markieren 271Tabulatoren 208Tag-Leiste 270Tags 36, 37

per CSS formatieren 230Tag-Selektoren 228Tag-Stil erstellen 230Teilen-Ansicht 82, 202Templates 104Text

eingeben 202erstellen 123

Text (Forts.)markieren 67

Texteditor 59Texteigenschaften 85Texteinrückung 160Texteinzug 160Textfeld 311Textfelder 312

mehrzeilig 313Passwort-Feld 313

Textinhalte 202Textverarbeitung 80Titel 107TLD 26Top Level Domain (TLD) 26, 27Tracking-Code 371Traffic 32Transfervolumen 32Transparente Bereiche 246Transparenz 246Typo3 62

UÜberschriften 125, 205, 222Überschrift (HTML-Tag) 38Übertragungsgeschwindigkeit 83UltraEdit 59Umbruch 314

harter 207weicher 207

Unicode-Zeichensatz 203Updates 56, 64URL 279

anmelden 363

VVektorgrafiken 245Verbindungsgeschwindigkeit 83Verhalten 121, 296

Browserfenster öffnen 298einfügen 298Neues Fenster 298Überblick 300veraltete 301

Verhalten (Funktion) 43Verknüpfungen 222Verschachtelte Liste 210

1261.indb 3891261.indb 389 05.02.2009 18:01:1105.02.2009 18:01:11

Page 41: Adobe Dreamweaver CS4 - Cleverprinting · 2009-08-02 · Adobe Dreamweaver CS4 Der praktische Einstieg ... 3.4.4 Adobe Bridge ..... 62 4 Dreamweaver CS4 – los geht’s ... 11.5

390

Index

Verschlüsselung 313Versendemethode 311Versteckte Felder 319Videos 338Visuelle Hilfsmittel 262Vordefinierte Betreffzeile 285Voreinstellungen 92Vorformatierte Absätze 208Vorlage 104

anwenden 142entwerfen 104erstellen 112mit editierbaren Bereichen 112öffnen 115planen 106speichern 142

Vorlagendateien 115Vorlesesysteme 309Vorschaufunktion 178

WWebbrowser 176Webfotoalbum 335Webhoster 25, 30Webkit 54Weblog 345, 346Webseite 97

aus Vorlage 119erstellen 66, 119

Webseite (Forts.)Größe 83neu 118speichern 120übertragen 188

Webserver 25, 32, 185, 186, 190, 192

Website 95, 96, 104auswählen 181, 187Gesamtbreite 154importieren 100prüfen 181synchronisieren 189, 190testen 176übertragen 185, 187verwalten 183, 191von anderen Websites verlinken

368Webspace 30Webstandards 216Webstatistiken 370Webtabellen 260Weiterleitung 289Word

HTML optimieren 211importieren 211Zwischenablage 212

WordPress 62, 346, 347administrieren 353Beiträge schreiben 354

WordPress (Forts.)installieren 348Templates 347, 356Themes 358

WWW 25WYSIWYG 81

XXHTML (Extensible Hypertext

Markup Language) 40

YYouTube 377

ZZeilenumbrüche 314Zellabstand 265Zellauffüllung 265Zellraum 268Zentriert 206Zitate 207Zoom-Funktion 83Zugänglichkeit 182Zurücksetzen 319Zwischenablage 212Zwischenspeicher 100

1261.indb 3901261.indb 390 05.02.2009 18:01:1105.02.2009 18:01:11