Hussein

Morsy

Adobe Dreamweaver CS6 Der

praktische Einstieg

Inhalt 26

Vorwort

Teil I

Einführung

1

Ein Platz im Internet

1.1

Wie kommt meine Site ins Internet?

26

Was ist eine Website?

26

Ein Platz im WWW

27

Die

27

1.2

1.3

Domain

eigene

Was ist eine Domain?

28

Subdomains

28

Top-Level-Domains

29

Ist meine Domain noch frei?

29

Domains

31

registrieren

Einen Provider finden

32

Auswahl eines Webhosters

32

Das

passende Angebot finden

Brauche ich einen

konfigurieren

Wie

eigenen

Webserver?

Sie Ihren

Webspace?

33 34 34

des Web

2

Die

2.1

Welche

2.2

Hypertext Markup Language

39

Strukturieren

40

Sprachen

Sprachen gibt von

es?

Inhalten

38

Tag-Attribute

41

HTML-Entities

41

Header und

Body

41

Darstellung

im Browser

42

Extensible HTML5

Hypertext Markup Language (XHTML)

42 43

Inhalt

Cascading Stylesheets

44

Externe CSS-Datei

44

CSS3

45

2.4

JavaScript

46

2.5

Ajax

47

2.6

PHP und

2.7

Webbrowser und

3

Dreamweaver CS6

3.1

Neues in Dreamweaver CS6

54

Fließendes

55

2.3

47

MySQL Rendering-Engines

-

los

geht's

Rasterlayout

Multiscreen-Vorschau

Erstellung von

mobilen

55

Applikationen

56

CSS-Übergänge

56

Detailverbesserungen

57

Dreamweaver installieren und aktualisieren

58

Updates

58

3.3

Der

59

3.4

Schnellstart: Probieren

3.2

Programmstart Sie Dreamweaver aus

60

Ihre erste HTML-Seite erstellen

60

Eine Website mit

65

Hyperlinks

und Bildern erstellen

4

Die

4.1

Dokumentenfenster

74

Entwurfsansicht

74

Live-Ansicht

75

Code-Ansicht

76

Teilen-Ansicht

76

Statuszeile

77

Der

78

4.2

Das

Arbeitsumgebung

Code-Navigator

Eigenschaften-Bedienfeld

Texteigenschaften

6

49

79 79

CSS-Eigenschaften Bildeigenschaften Weitere

80 80

Eigenschaften

Eigenschaftsfenster 4.3

81

Darstellungen

Bedienfelder

81

Bedienfelder

organisieren

81

Bedienfelder

gruppieren

82

Das 4.4

81

in zwei

»Einfügen«-Bedienfeld

83

Anpassen der Arbeitsumgebung

84

Arbeitsbereiche

84

Voreinstellungen

84

HTAAL5 voreinsteüen

85

Teil II Ein

Websiteprojekt

5

Eine neue Website

5.1

Unser

Beispielprojekt

Beispielwebsite

90

herunterladen

91

Lokaler Site-Ordner 5.2

Neue Site

5.3

Site bearbeiten oder

anlegen

91

und

konfigurieren

92

importieren

94

Wechseln zwischen Sites

6

Eine

6.1

Vorlage

95

Vorlage anlegen entwerfen

Was ist eine

Beispiele

98

Vorlage?

98

im Web

99

Vorlage planen

100

6.2

Ein

101

6.3

Beispielinhalte erstellen

6.4

Eine

Layout

erstellen

Vorlage

mit bearbeitbaren Bereichen erstellen

Speicherort für Vorlagen

104

...

107 109

flpB

'"halt

7

Seiten mit Inhalten füllen

7.1

Neue Webseite erstellen

112

Neue Dateien

113

Vorlage erzeugen Seitentitel vergeben 7.2

Seiteninhalte

aus

einfügen

116

Texte erstellen

117

Überschriften

119

Listen erstellen

119

Bilder

120

einfügen

Tabellen erstellen

123

8

Erstellen einer

8.1

Hauptnavigation

Navigation 128

bearbeiten

AAenüeinträge 8.2

Fußzeilennavigation

8.3

Vorlage speichern

9

Das

9.1

Erstellen

9.2

131 134

und auf Seiten anwenden

von

140

Grafik-Segmenten

Das

Kopf-Segment

141

Das

Inhalts-Segment

141

Das

Fuß-Segment

142

Aufbau

von

CSS-Regeln Die

8

137

Design festlegen

CSS-Dateien

142

CSS-Datei bearbeiten 9.3

115

Die Die

für das

Layout

CSS-Regel »body«

144 der

Beispielwebsite

146 148

CSS-Regel

».Container«

149

CSS-Regel

».header«

151

Die

CSS-Regel

»h1«

153

Die

CSS-Regel

».content«

155

Die

CSS-Regel

».sidebart«

155

Die

CSS-Regel

».footer«

156

CSS-Regel für die Links

CSS-Regeln

10

in der Fußzeile erstellen

für die Navigation

159 161

Websites testen, veröffentlichen und verwalten

10.1

Website im Browser testen

166

Browservielfalt

166

Browsershots

167

Browservorschau einstellen

168

Website im Browser testen

170

Webseite im Adobe BrowserLab testen

170

Alle

171

Hyperlinks

testen

Browserkompatibilität und Zugänglichkeit prüfen

173

10.2

FTP-Übertragung konfigurieren

173

10.3

Übertragen der

Site auf den Server

Übertragen über das Übertragung Website 10.4

Fenster »Dateien«

im Dokumentenfenster

synchronisieren

176 176 179 181 182

Website verwalten

Teil III Dreamweaver im Detail

eingeben

11

Texte

11.1

Textinhalte erstellen Text

188 188

eingeben

Sonderzeichen

eingeben

189

eingeben

190

Inhalte strukturieren

191

Überschriften

191

Absätze

192

Leerzeichen 11.2

und strukturieren

Einrückungen

193

Vorformatierte Absätze

194

Listen

195

Hervorhebungen

196

9

Inhalt

11.3

aus Word

Importieren Word-HTML Texte

aus

der

optimieren

Zwischenablage einfügen

und Word

Stylesheets

12

Arbeiten mit CSS

12.1

Was sind Vorteile

Cascading Stylesheets? CSS

von

198 201

204 205 205

CSS in

206

Vorlagen

Methoden

12.3

CSS für

zur

einsetzen

CSS-Erstellung

Einsteiger

CSS über

Seiteneigenschaften

CSS über das

Eigenschaften-Bedienfeld

207 207 208 211

Fortgeschrittene CSS-Techniken

215

Das Fenster »CSS-Stile«

216

Neuen CSS-Stil erstellen

217

CSS-Stile bearbeiten

224

CSS-Stile-Eigenschaften

224

Überprüfen-Modus CSS-Regeln

löschen oder deaktivieren

226 226

Klassen-Selektoren umbenennen

227

CSS-Stile Texten zuweisen

227

Externe

Stylesheets verknüpfen

Stylesheets

verschieben

CSS-Übergänge

10

197

Externe und interne CSS

12.2

12.4

197

229 230 231

einfügen

13

Bilder

13.1

Bilder bearbeiten

238

13.2

Bildformate für das Web

238

GIF

239

JPEG

240

PNG

241

Inhalt

13.3

Bilder, Platzhalter Bilder

13.4

und

Hintergründe

einfügen

242 242

Bild-Platzhalter einsetzen

244

Bilder oder Platzhalter austauschen

245

Rollover-Bilder einsetzen

246

Bildeinstellungen

246

Alternativtext

247

Bildgröße

eingeben

einstellen

247

Bilderzuschneiden

Helligkeit

249

und Kontrast anpassen

Bild scharf stellen

250 251

14

Tabellen erstellen

14.1

Tabellen für Daten und Layout

254

14.2

Verschiedene Tabellenansichten

256

Standard-Ansicht

256

Erweiterte Ansicht

256

Erstellen einer Tabelle

257

14.3

14.4

Eigenschaften

von

Tabellen

260

Tabellen markieren

Einstellungen

für

260

komplette

Tabellen vornehmen

Höhe und Breite anpassen und zurücksetzen 14.5

Eigenschaften Spalten,

von

Tabellenbereichen

Zeilen und Zellen auswählen

Einstellungen

für Tabellenbereiche

Tabellenzellen gruppieren

Spalten

und Zeilen

14.6

Tabellen sortieren

15

Hyperlinks

15.1

Navigieren

mit

Funktionsweise Das

Wichtigste:

hinzufügen

262 263 263 264 265 266

und löschen

268 269

einsetzen Hyperlinks von

Hyperlinks

die URL

272 272 273

1

15.2

15.3

Hyperlinks anlegen

in Dreamweaver

274

Externe und interne

Hyperlinks

275

Links innerhalb einer Webseite

276

Löschen

279

Hyperlinks

von

Spezielle Hyperlinks anlegen

279

Leere Links

279

E-Mail-Links

279

Imagemaps

281

Download-Links

283

Automatische

283

Weiterleitung

16

Interaktivität mit

16.1

Wie

16.2

JavaScript im Eigenschaften-Bedienfeld

JavaScript

funktioniert JavaScript?

287

16.3

JavaScript

16.4

JavaScript über Verhalten integrieren

290

Funktionsweise

291

über Menüs

Ein Verhalten

Aktionen

eines

einfügen

Verhaltens

einfügen

hinzufügen

Aktionen bearbeiten und löschen

Ereignis 16.5

Das

festlegen

289

292 295 296

297

JavaScript-Framework Spry

298

Sryp-Funktionen einfügen

299

16.6

Widgets: Skripte übernehmen

300

17

Formulare erstellen

17.1

Eigenschaften

17.2

Erstellen

17.3

12

286

von

Formularen

von Formularen

304 305

Formularbereich einrichten

305

Formularelemente

306

Aufbau eines Formularelements

306

Formularelemente

307

einfügen

17.4

Einfache Textfelder

308

Kennwortfelder

309

Mehrzellige Textfelder/Textbereich

309

Auswahllisten

310

Kontrollkästchen

311

Optionsschalter

312

Schaltflächen

313

Versteckte Felder

314

Dateifeld

314

Feldgruppe

315

Formulare gestalten

315

Formulare mit Tabellen

gestalten

Formulare mit CSS 17.5

316

Formularüberprüfung einbauen Felder

315

gestalten mit

Spry

322 323

überprüfen

324

Eigene Fehlermeldungen festlegen

325

bearbeiten

Spry-Überprüfungen

auslesen

325

17.6

Benutzereingaben per Skript

18

Mobiles Web

18.1

Websites für mobile

18.2

Responsive Webdesign

331

Wie funktioniert

332

Responsive Webdesign?

Seite mit flexiblem

Layout für mobile Layout

Geräte entwickeln

332

Layout anlegen

335

Geräte

für Tablet-Geräte

338 340

Layout für Desktopgeräte 18.3

Mobile

Web-Apps von

Was ist

Mobile?

jQuery

Web-App

Neue Seite

Apps

341 342 343

mit Dreamweaver CS6

hinzufügen

Native mobile

j'Query Mobile

mobilen Websites

Charakteristika

Eine

18.4

mit

330

erstellen

und verlinken

mit

PhoneGap-ein Ausblick

343 347 351

Teil IV Über Dreamweaver hinaus 19

Dreamweaver und die Creative Suite

19.1

Die Creative Suite 6

356

19.2

Adobe

357

Photoshop

CS6

Photoshop-Dateien Bilder

importieren

der

Zwischenablage einfügen Photoshop bearbeiten

aus

Bilder in

19.3

in Dreamweaver

Adobe Fireworks CS6

362 363 364

Adobe Flash CS6

364

So funktioniert Flash

364

Plugin erforderlich

365

Eigenschaften 19.5

Adobe

20

Bloggen

von

365

Flash

366

Bridge

367

mit Word Press

20.1

Was sind

20.2

Leistungsmerkmale

20.3

Weblog

20.5

360 361

Flash-Filme integrieren

20.4

359

Voreinstellungen Fireworks-Dateien in Dreamweaver importieren Bilder in Fireworks bearbeiten 19.4

357

Weblogs?

370 von

WordPress

mit WordPress erstellen

371 371

WordPress installieren

372

WordPress administrieren

377

Einloggen

im

377

Schreiben

von

Beiträgen

378

Verwalten

von

Beiträgen

379

Word

Administrationsbereich

Press-Templates

Themes anpassen

379 382

21

Gesucht und

21.1

Ihre Website mit

21.2

Tipps

21.3

zur

gefunden

Google

bei

Google

bekannt machen

Suchmaschinenoptimierung

385 387

Verwenden Sie Titel und »alt«-Attribute

388

AAeta-Tags

389

Website

von

Was Sie

unbedingt

anderen Websites verlinken vermeiden sollten

Besucherstatistiken mit

Google Analytics

392

Google AdWords

Anzeigen

21.5

Geld verdienen mit

22

Mashups Twitter

Google Analytics

391

einrichten

21.4

mit

391

-

Google AdSense

393 396

396

YouTube, GoogleMaps und

integrieren

22.1

YouTube-Videos einbinden

402

22.2

Google AAaps integrieren

405

22.3

Twitter

408

Index

integrieren

408