Hussein Morsy

Adobe Dreamweaver CS6Der praktische Einstieg

Auf einen Blick

Teil I Einführung

1 EinPlatzimInternet ....................................................................... 25

2 DieSprachendesWeb ................................................................... 37

3 DreamweaverCS6–losgeht’s ........................................................ 53

4 DieArbeitsumgebung ..................................................................... 73

Teil II Ein Websiteprojekt

5 EineneueWebsite ......................................................................... 89

6 EineVorlageanlegen ...................................................................... 97

7 SeitenmitInhaltenfüllen ............................................................... 111

8 ErstelleneinerNavigation ............................................................... 127

9 DasDesignfestlegen ...................................................................... 139

10 Websitestesten,veröffentlichenundverwalten .............................. 165

Teil III Dreamweaver im Detail

11 Texteeingebenundstrukturieren ................................................... 187

12 ArbeitenmitCSS ........................................................................... 203

13 Bildereinfügen ............................................................................... 237

14 Tabellenerstellen ........................................................................... 253

15 Hyperlinkseinsetzen ....................................................................... 271

16 InteraktivitätmitJavaScript ............................................................. 285

17 Formulareerstellen ........................................................................ 303

18 MobilesWeb ................................................................................. 329

Teil IV Über Dreamweaver hinaus …

19 DreamweaverunddieCreativeSuite .............................................. 355

20 BloggenmitWordPress .................................................................. 369

21 GesuchtundgefundenbeiGoogle ................................................. 383

22 Mashups–YouTube,GoogleMapsundTwitterintegrieren .............. 401

Inhalt

5

Inhalt

Vorwort................................................................................. 26

TeilI Einführung

1 Ein Platz im Internet

1.1 Wie kommt meine Site ins Internet?.......................... 26

WasisteineWebsite?.................................................. 26

EinPlatzimWWW..................................................... 27

1.2 Die eigene Domain..................................................... 27

WasisteineDomain?.................................................. 28

Subdomains................................................................ 28

Top-Level-Domains..................................................... 29

IstmeineDomainnochfrei?........................................ 29

Domainsregistrieren................................................... 31

1.3 Einen Provider finden................................................. 32

AuswahleinesWebhosters.......................................... 32

DaspassendeAngebotfinden..................................... 33

BraucheicheineneigenenWebserver?........................ 34

WiekonfigurierenSieIhrenWebspace?....................... 34

2 Die Sprachen des Web

2.1 Welche Sprachen gibt es?.......................................... 38

2.2 Hypertext Markup Language...................................... 39

StrukturierenvonInhalten........................................... 40

Tag-Attribute............................................................... 41

HTML-Entities............................................................. 41

HeaderundBody........................................................ 41

DarstellungimBrowser............................................... 42

ExtensibleHypertextMarkupLanguage(XHTML)........ 42

HTML5........................................................................ 43

Inhalt

6

2.3 Cascading Stylesheets................................................ 44

ExterneCSS-Datei....................................................... 44

CSS3........................................................................... 45

2.4 JavaScript................................................................... 46

2.5 Ajax............................................................................ 47

2.6 PHP und MySQL......................................................... 47

2.7 Webbrowser und Rendering-Engines......................... 49

3 Dreamweaver CS6 – los geht’s

3.1 Neues in Dreamweaver CS6....................................... 54

FließendesRasterlayout............................................... 55

Multiscreen-Vorschau.................................................. 55

ErstellungvonmobilenApplikationen......................... 56

CSS-Übergänge........................................................... 56

Detailverbesserungen.................................................. 57

3.2 Dreamweaver installieren und aktualisieren............... 58

Updates...................................................................... 58

3.3 Der Programmstart..................................................... 59

3.4 Schnellstart: Probieren Sie Dreamweaver aus............ 60

IhreersteHTML-Seiteerstellen.................................... 60

EineWebsitemitHyperlinksundBildernerstellen....... 65

4 Die Arbeitsumgebung

4.1 Dokumentenfenster................................................... 74

Entwurfsansicht........................................................... 74

Live-Ansicht................................................................ 75

Code-Ansicht.............................................................. 76

Teilen-Ansicht............................................................. 76

Statuszeile................................................................... 77

DerCode-Navigator.................................................... 78

4.2 Das Eigenschaften-Bedienfeld.................................... 79

Texteigenschaften........................................................ 79

Inhalt

7

CSS-Eigenschaften....................................................... 80

Bildeigenschaften........................................................ 80

WeitereEigenschaften................................................. 81

EigenschaftsfensterinzweiDarstellungen.................... 81

4.3 Bedienfelder............................................................... 81

Bedienfelderorganisieren............................................ 81

Bedienfeldergruppieren.............................................. 82

Das»Einfügen«-Bedienfeld.......................................... 83

4.4 Anpassen der Arbeitsumgebung................................ 84

Arbeitsbereiche........................................................... 84

Voreinstellungen......................................................... 84

HTML5voreinstellen................................................... 85

TeilII EinWebsiteprojekt

5 Eine neue Website

5.1 Unser Beispielprojekt................................................. 90

Beispielwebsiteherunterladen..................................... 91

LokalerSite-Ordner..................................................... 91

5.2 Neue Site anlegen und konfigurieren......................... 92

5.3 Site bearbeiten oder importieren............................... 94

WechselnzwischenSites............................................. 95

6 Eine Vorlage anlegen

6.1 Vorlage entwerfen...................................................... 98

WasisteineVorlage?................................................... 98

BeispieleimWeb........................................................ 99

Vorlageplanen............................................................ 100

6.2 Ein Layout erstellen.................................................... 101

6.3 Beispielinhalte erstellen............................................. 104

6.4 Eine Vorlage mit bearbeitbaren Bereichen erstellen... 107

SpeicherortfürVorlagen.............................................. 109

Inhalt

8

7 Seiten mit Inhalten füllen

7.1 Neue Webseite erstellen............................................ 112

NeueDateienausVorlageerzeugen............................ 113

Seitentitelvergeben.................................................... 115

7.2 Seiteninhalte einfügen............................................... 116

Texteerstellen............................................................. 117

Überschriften.............................................................. 119

Listenerstellen............................................................ 119

Bildereinfügen............................................................ 120

Tabellenerstellen........................................................ 123

8 Erstellen einer Navigation

8.1 Hauptnavigation......................................................... 128

Menüeinträgebearbeiten............................................ 131

8.2 Fußzeilennavigation................................................... 134

8.3 Vorlage speichern und auf Seiten anwenden.............. 137

9 Das Design festlegen

9.1 Erstellen von Grafik-Segmenten................................. 140

DasKopf-Segment...................................................... 141

DasInhalts-Segment.................................................... 141

DasFuß-Segment........................................................ 142

9.2 Aufbau von CSS-Dateien............................................ 142

CSS-Dateibearbeiten.................................................. 144

9.3 CSS-Regeln für das Layout der Beispielwebsite......... 146

DieCSS-Regel»body«................................................. 148

DieCSS-Regel».container«......................................... 149

DieCSS-Regel».header«............................................. 151

DieCSS-Regel»h1«..................................................... 153

DieCSS-Regel».content«............................................ 155

DieCSS-Regel».sidebar1«........................................... 155

DieCSS-Regel».footer«.............................................. 156

Inhalt

9

CSS-RegelfürdieLinksinderFußzeileerstellen.......... 159

CSS-RegelnfürdieNavigation..................................... 161

10 Websites testen, veröffentlichen und verwalten

10.1 Website im Browser testen........................................ 166

Browservielfalt............................................................ 166

Browsershots............................................................... 167

Browservorschaueinstellen......................................... 168

WebsiteimBrowsertesten.......................................... 170

WebseiteimAdobeBrowserLabtesten....................... 170

AlleHyperlinkstesten.................................................. 171

BrowserkompatibilitätundZugänglichkeitprüfen........ 173

10.2 FTP-Übertragung konfigurieren.................................. 173

10.3 Übertragen der Site auf den Server............................ 176

ÜbertragenüberdasFenster»Dateien«....................... 176

ÜbertragungimDokumentenfenster........................... 179

Websitesynchronisieren.............................................. 181

10.4 Website verwalten..................................................... 182

TeilIII DreamweaverimDetail

11 Texte eingeben und strukturieren

11.1 Textinhalte erstellen................................................... 188

Texteingeben.............................................................. 188

Sonderzeicheneingeben.............................................. 189

Leerzeicheneingeben.................................................. 190

11.2 Inhalte strukturieren.................................................. 191

Überschriften.............................................................. 191

Absätze....................................................................... 192

Einrückungen.............................................................. 193

VorformatierteAbsätze................................................ 194

Listen.......................................................................... 195

Hervorhebungen......................................................... 196

Inhalt

10

11.3 Importieren aus Word................................................ 197

Word-HTMLoptimieren.............................................. 197

TexteausderZwischenablageeinfügen....................... 198

StylesheetsundWord................................................. 201

12 Arbeiten mit CSS

12.1 Was sind Cascading Stylesheets?............................... 204

VorteilevonCSS.......................................................... 205

ExterneundinterneCSS.............................................. 205

CSSinVorlageneinsetzen........................................... 206

12.2 Methoden zur CSS-Erstellung.................................... 207

12.3 CSS für Einsteiger....................................................... 207

CSSüberSeiteneigenschaften...................................... 208

CSSüberdasEigenschaften-Bedienfeld...................... 211

12.4 Fortgeschrittene CSS-Techniken................................. 215

DasFenster»CSS-Stile«............................................... 216

NeuenCSS-Stilerstellen.............................................. 217

CSS-Stilebearbeiten.................................................... 224

CSS-Stile-Eigenschaften............................................... 224

Überprüfen-Modus..................................................... 226

CSS-Regelnlöschenoderdeaktivieren......................... 226

Klassen-Selektorenumbenennen................................. 227

CSS-StileTextenzuweisen........................................... 227

ExterneStylesheetsverknüpfen................................... 229

Stylesheetsverschieben............................................... 230

CSS-Übergänge........................................................... 231

13 Bilder einfügen

13.1 Bilder bearbeiten........................................................ 238

13.2 Bildformate für das Web............................................ 238

GIF.............................................................................. 239

JPEG........................................................................... 240

PNG............................................................................ 241

Inhalt

11

13.3 Bilder, Platzhalter und Hintergründe.......................... 242

Bildereinfügen............................................................ 242

Bild-Platzhaltereinsetzen............................................ 244

BilderoderPlatzhalteraustauschen............................. 245

Rollover-Bildereinsetzen............................................. 246

13.4 Bildeinstellungen........................................................ 246

Alternativtexteingeben............................................... 247

Bildgrößeeinstellen..................................................... 247

Bilderzuschneiden...................................................... 249

HelligkeitundKontrastanpassen................................. 250

Bildscharfstellen........................................................ 251

14 Tabellen erstellen

14.1 Tabellen für Daten und Layout................................... 254

14.2 Verschiedene Tabellenansichten................................. 256

Standard-Ansicht......................................................... 256

ErweiterteAnsicht....................................................... 256

14.3 Erstellen einer Tabelle................................................ 257

14.4 Eigenschaften von Tabellen........................................ 260

Tabellenmarkieren...................................................... 260

EinstellungenfürkompletteTabellenvornehmen........ 262

HöheundBreiteanpassenundzurücksetzen............... 263

14.5 Eigenschaften von Tabellenbereichen......................... 263

Spalten,ZeilenundZellenauswählen.......................... 264

EinstellungenfürTabellenbereiche............................... 265

Tabellenzellengruppieren............................................ 266

SpaltenundZeilenhinzufügenundlöschen................. 268

14.6 Tabellen sortieren....................................................... 269

15 Hyperlinks einsetzen

15.1 Navigieren mit Hyperlinks.......................................... 272

FunktionsweisevonHyperlinks................................... 272

DasWichtigste:dieURL.............................................. 273

Inhalt

12

15.2 Hyperlinks anlegen in Dreamweaver.......................... 274

ExterneundinterneHyperlinks................................... 275

LinksinnerhalbeinerWebseite.................................... 276

LöschenvonHyperlinks............................................... 279

15.3 Spezielle Hyperlinks anlegen...................................... 279

LeereLinks.................................................................. 279

E-Mail-Links................................................................ 279

Imagemaps.................................................................. 281

Download-Links.......................................................... 283

AutomatischeWeiterleitung........................................ 283

16 Interaktivität mit JavaScript

16.1 Wie funktioniert JavaScript?...................................... 286

16.2 JavaScript im Eigenschaften-Bedienfeld..................... 287

16.3 JavaScript über Menüs einfügen................................ 289

16.4 JavaScript über Verhalten integrieren......................... 290

FunktionsweiseeinesVerhaltens................................. 291

EinVerhalteneinfügen................................................ 292

Aktionenhinzufügen................................................... 295

Aktionenbearbeitenundlöschen................................ 296

Ereignisfestlegen........................................................ 297

16.5 Das JavaScript-Framework Spry................................. 298

Sryp-Funktioneneinfügen........................................... 299

16.6 Widgets: Skripte übernehmen.................................... 300

17 Formulare erstellen

17.1 Eigenschaften von Formularen................................... 304

17.2 Erstellen von Formularen............................................ 305

Formularbereicheinrichten......................................... 305

17.3 Formularelemente...................................................... 306

AufbaueinesFormularelements.................................. 306

Formularelementeeinfügen......................................... 307

Inhalt

13

EinfacheTextfelder...................................................... 308

Kennwortfelder........................................................... 309

MehrzeiligeTextfelder/Textbereich.............................. 309

Auswahllisten.............................................................. 310

Kontrollkästchen......................................................... 311

Optionsschalter........................................................... 312

Schaltflächen............................................................... 313

VersteckteFelder......................................................... 314

Dateifeld..................................................................... 314

Feldgruppe.................................................................. 315

17.4 Formulare gestalten................................................... 315

FormularemitTabellengestalten................................. 315

FormularemitCSSgestalten........................................ 316

17.5 Formularüberprüfung einbauen mit Spry................... 322

Felderüberprüfen....................................................... 323

EigeneFehlermeldungenfestlegen.............................. 324

Spry-Überprüfungenbearbeiten.................................. 325

17.6 Benutzereingaben per Skript auslesen....................... 325

18 Mobiles Web

18.1 Websites für mobile Geräte entwickeln..................... 330

18.2 Responsive Webdesign.............................................. 331

WiefunktioniertResponsiveWebdesign?.................... 332

SeitemitflexiblemLayoutanlegen.............................. 332

LayoutfürmobileGeräte............................................ 335

LayoutfürTablet-Geräte.............................................. 338

LayoutfürDesktopgeräte............................................ 340

18.3 Mobile Web-Apps mit jQuery Mobile........................ 341

CharakteristikavonmobilenWebsites......................... 342

WasistjQueryMobile?............................................... 343

EineWeb-AppmitDreamweaverCS6erstellen........... 343

NeueSeitehinzufügenundverlinken.......................... 347

18.4 Native mobile Apps mit PhoneGap – ein Ausblick..... 351

Inhalt

14

TeilIV ÜberDreamweaverhinaus

19 Dreamweaver und die Creative Suite

19.1 Die Creative Suite 6................................................... 356

19.2 Adobe Photoshop CS6............................................... 357

Photoshop-DateieninDreamweaverimportieren........ 357

BilderausderZwischenablageeinfügen....................... 359

BilderinPhotoshopbearbeiten................................... 360

Voreinstellungen......................................................... 361

19.3 Adobe Fireworks CS6................................................. 362

Fireworks-DateieninDreamweaverimportieren.......... 363

BilderinFireworksbearbeiten..................................... 364

19.4 Adobe Flash CS6........................................................ 364

SofunktioniertFlash................................................... 364

Pluginerforderlich....................................................... 365

Flash-Filmeintegrieren................................................ 365

EigenschaftenvonFlash.............................................. 366

19.5 Adobe Bridge............................................................. 367

20 Bloggen mit WordPress

20.1 Was sind Weblogs?.................................................... 370

20.2 Leistungsmerkmale von WordPress............................ 371

20.3 Weblog mit WordPress erstellen................................ 371

WordPressinstallieren................................................. 372

20.4 WordPress administrieren.......................................... 377

EinloggenimAdministrationsbereich........................... 377

SchreibenvonBeiträgen.............................................. 378

VerwaltenvonBeiträgen............................................. 379

20.5 WordPress-Templates................................................. 379

Themesanpassen........................................................ 382

Inhalt

15

21 Gesucht und gefunden bei Google

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

21.2 Tipps zur Suchmaschinenoptimierung........................ 387

VerwendenSieTitelund»alt«-Attribute...................... 388

Meta-Tags.................................................................... 389

WebsitevonanderenWebsitesverlinken.................... 391

WasSieunbedingtvermeidensollten.......................... 391

21.3 Besucherstatistiken mit Google Analytics.................. 392

GoogleAnalyticseinrichten......................................... 393

21.4 Anzeigen mit Google AdWords.................................. 396

21.5 Geld verdienen mit Google AdSense.......................... 396

22 Mashups – YouTube, GoogleMaps und Twitter integrieren

22.1 YouTube-Videos einbinden......................................... 402

22.2 Google Maps integrieren............................................ 405

22.3 Twitter integrieren...................................................... 408

Index..................................................................................... 408

Workshops

17

Workshops

Dreamweaver CS6 – los geht’s

EineSeiteerstellen ................................................................ 60

SeiteaufBasiseinergestaltetenWebseiteerstellen ................ 65

Eine neue Website

LeereSiteerstellen ................................................................ 92

EineneueSiteauseinerfertigenWebsiteerstellen ................ 94

Eine Vorlage anlegen

DasLayoutfürdieVorlagedefinieren .................................... 102

Inhaltefestlegen .................................................................... 104

Vorlageerstellen ................................................................... 107

Seiten mit Inhalten füllen

NeueWebseiteausderVorlageerstellen ............................... 113

Bildereinfügen ...................................................................... 121

Tabelleerstellen .................................................................... 124

Erstellen einer Navigation

Spry-MenüleisteinVorlageeinfügen ..................................... 129

ÄndernderMenüeinträge ..................................................... 131

LinksimFußbereichhinzufügen ............................................ 135

Vorlagespeichern .................................................................. 137

Das Design festlegen

CSS-Dateibearbeiten ............................................................ 144

CSS-Regel»body«bearbeiten ................................................ 148

CSS-Regel».container«bearbeiten ........................................ 149

CSS-Regel».header«bearbeiten ............................................ 152

Workshops

18

CSS-Regel»h1«bearbeiten ................................................... 153

CSS-Regel».sidebar1«bearbeiten ......................................... 156

CSS-Regel».footer«bearbeiten ............................................. 157

NeueCSS-RegelfürLinksinderFußzeileerstellen ................. 159

CSS-RegelnfürNavigationanpassen ...................................... 162

Websites testen, veröffentlichen und verwalten

WeitereBrowserindieVorschaufunktioneinbinden .............. 168

WebseiteinAdobeBrowserLabanzeigenlassen .................... 171

Linksüberprüfen ................................................................... 172

FTP-ServerinDreamweavereinrichten .................................. 174

GesamteWebsiteübertragen ................................................ 178

EinzelneWebseiteübertragen ............................................... 179

Websitesynchronisieren ........................................................ 181

Texte eingeben und strukturieren

ErstellungeinerListe ............................................................. 195

Arbeiten mit CSS

Seiteneigenschaftenfestlegen ................................................ 208

NeuenStilimEigenschaften-Bedienfelderstellen .................. 212

BereitsangelegtenCSS-Stilanwenden ................................... 214

NeuenCSS-Stilerstellen ........................................................ 217

ExterneCSS-DateiinSeiteeinbinden .................................... 229

CSS-Übergangerstellen ......................................................... 232

Bilder einfügen

Bildeinfügen ......................................................................... 242

Bild-Platzhaltereinfügen ....................................................... 244

GrößeeinesBildesinDreamweaververändern ...................... 248

Bildzuschneiden ................................................................... 249

Workshops

19

Tabellen erstellen

NeueTabelleerstellen ........................................................... 257

Tabellenzellengruppieren ...................................................... 267

Hyperlinks einsetzen

Ankerpunkteanlegenunddaraufverlinken ........................... 276

EineImagemaperstellen ....................................................... 281

Interaktivität mit JavaScript

Rollover-Bildeinfügen ........................................................... 289

SeiteinneuemFensteröffnen ............................................... 292

Formulare erstellen

BeschriftungenmitCSSgestalten .......................................... 317

BreitenfürTextfeldermitCSSeinstellen ................................ 320

SkriptfürKontaktformulareinbauen ..................................... 326

Mobiles Web

WebseitemitfließendemRasterlayouterstellen ..................... 333

LayoutfürmobileGerätefestlegen ........................................ 335

LayoutfürTablet-Gerätefestlegen ......................................... 338

LayoutfürDesktop-Gerätefestlegen ..................................... 340

NeuesjQuery-Mobile-Projekterstellen .................................. 344

Seitehinzufügenundverlinken ............................................. 348

Seiteverlinken ...................................................................... 349

Dreamweaver und die Creative Suite

Photoshop-DateiinDreamweaverimportieren ...................... 357

PNG-Dateiimportierenundumwandeln ............................... 363

Flash-FilminWebseiteeinfügen ............................................ 365

Workshops

20

Bloggen mit WordPress

WordPressinstallieren ........................................................... 372

InstallationeinesThemes ...................................................... 380

Gesucht und gefunden bei Google

IhreWebsiteinGoogleeintragen .......................................... 385

Meta-Tagshinzufügen ........................................................... 389

Meta-Tagsbearbeiten ............................................................ 390

WebsitebeiGoogleAnalyticsanmelden ................................ 393

WerbeanzeigenmitGoogleAdSenseintegrieren ................... 397

Mashups – YouTube, GoogleMaps und Twitter integrieren

YouTube-VideoindieeigeneWebseiteeinbetten .................. 403

GoogleMapsinIhreWebseiteeinbinden .............................. 405

E WelchesBeispielprojektwirdimBucherstellt?

E WasistderUnterschiedzwischeneinerWebsiteundeinerWebseite?

E WielegeicheineneueSitean?

E WieimportiereichbestehendeWebsites?

Kapitel5

Eine neue WebsiteSoerstellenundkonfigurierenSieeineneueWebsite

5 Eine neue Website

90

BevorSieendlichmitderErstellungderWebseitenloslegenkön-nen, müssen Sie eine neue Site anlegen. Dieses Kapitel zeigtIhnen,wiedasgeht.

5.1 Unser Beispielprojekt

In diesem Buch entwickeln wir von der Erstellung der Site biszurRealisierungderInhaltedurchgängigeinBeispielprojekt.DasBesondereandiesemBeispielprojektist,dassessichumeinerealeWebsite handelt, die sogar tatsächlich online ist. Sie erreichensieunterhttp://www.djay-software.com.DadieWebsiteständigaktualisiert wird, weicht das Übungsprojekt des Buchs von deraktuellenWebsiteab.EshandeltsichumeineSiteübereineDJ-SoftwarezumvirtuellenAuflegenvonMusik.

Abbildung 6.1 E

HomepageunsererBeispiel-sitehttp://www.djay-soft-ware.com

5 Eine neue Website

Unser Beispielprojekt 5.1

91

Das Beispielprojekt ist für diejenigen unter Ihnen gedacht, dienoch keine eigenen Grafiken und Inhalte haben, dennoch abereinevollständigeWebsiteerstellenmöchten.SiemüssenaberdieWebsite nicht einfach stur kopieren – lassen Sie sich auch vonIhreneigenenIdeeninspirieren.

Beispielwebsite herunterladen

DamitSiedasBeispielprojektauchselbstaufIhremRechnernach-vollziehen können, können Sie sich sämtliche Dateien der Bei-spielsite von http://www.dreamweaver-buch.de/uebungen herun-terladen.

Dort werden Ihnen unter anderem zwei Download-Dateienangeboten:

E »djay_bilder.zip«:enthältnurBilder,umdieWebsitealsÜbungzuerstellen

E »djay_fertig.zip«:enthältdiefertigeWebsitemitallenDateien(HTML,Bilderusw.)

Zuerst werden wir eine neue Website erstellen (genannt djayÜbungen),diezunächstnochkeineDateienenthält.Dieherunter-geladenenDateiensolltenseparatundzunächstnichtimOrdnerderWebsiteabgelegtwerden,daBilderbeimEinfügeninDream-weaverautomatischindenOrdnerderWebsitekopiertwerden.

DesWeiterenwerdenwireineneueWebsiteanlegen(genanntdjayFertig),diebereitsdiefertigeWebsiteenthält.DamitkönnenSieleichternachvollziehen,wiedasBeispielprojekterstelltwurde,unddieSitemitIhreneigenenÜbungenvergleichen.

Lokaler Site-Ordner

In Dreamweaver wird der Ordner, in dem die Site gespeichertwird, als lokaler Site-Ordner bezeichnet. Dabei wird zwischeneinem lokalen und einem entfernten Site-Ordner unterschie-den.DerlokaleSite-OrdneristderOrdner,deraufIhrerFestplattegespeichert ist,wohingegenderentfernteSite-Ordner auf IhremWebserverliegt.

Site oder Seite?

EineSeitebzw.Webseitebezeichnetimmereineeinzelne(HTML-)Seite.FüralleSeitengemein-samgibtesgenaueineStartseite,dieHomepagegenanntwird.EineSitebzw.WebsitebezeichnetdengesamtenInternetauftrittmitallenWebseitenundsonstigenElementen,wiezumBei-spielGrafikenundFlash-Filmen.

5 Eine neue Website

92

5.2 Neue Site anlegen und konfigurieren

Zur Vorbereitung sollten Sie einen Ordner anlegen, der alle(zukünftigen)Websites,dieSieerzeugenwerden,enthält.Erstel-lenSiedazueinenOrdnerWebsites imOrdnerEigeneDateien.UnterMacOSXliegtdafürbereitseinOrdnernamensWeb-SitesoderSites inIhremHome-Verzeichnis.NunkannesendlichmitderErstellungderSitelosgehen.

Schritt für Schritt Leere Site erstellen

1 Neue SiteWählen Sie zuerst den Menüpunkt Site N Neue Site. AlternativkönnenSieauchdenMenüpunktSiteNSitesverwaltenaufrufenundanschließendaufNeueSiteklicken.

2 Site-Definition AufgrunddervielfältigenEinstellmöglichkeitenfüreineSitesinddieMenüsinverschiedeneKategorienunterteilt.SiefindendieseaufderlinkenSeite.DieKategorieSite1istanfangsausgewählt.

GebenSieimFeldSite-Name 2einenpassendenNamenfürIhreWebsitean(z.B.»djayÜbungen«fürunserBeispielprojekt).SiedürfenLeerzeichenundUmlauteverwenden.DerNamederSiteistfürdenBetrachterderWebsitenichtsichtbar.

UnterLokalerSite-OrdnerlegenSiedenOrdnerfest,indemIhreSitegespeichertwird.KlickenSiedazuaufdasOrdnersymbol3rechtsnebendemTextfeld.EserscheinteinDialogfenster, indemSiedenOrdnerfestlegenkönnen.WählenSieunterWindows

Abbildung 6.2 H

DieGrundeinstellungen

a

b

c

Neue Site anlegen und konfigurieren 5.2

93

denOrdnerEigeneDateien/Websitesbzw.unterMacOSXdenOrdnerSitesaus,understellenSiedaruntereinenneuenOrdner,derähnlichbenanntistwieIhrSite-Name.HiersolltenSiekeineLeerzeichenundUmlauteverwenden,sondernnurBuchstaben,Zahlen,UnterstricheundBindestriche.FürunserBeispielprojektwählenwirbeispielsweise»djay_uebungen«.GewöhnenSiesichauchan,ausschließlichKleinbuchstabenzuverwenden.

3 Bilderordner festlegenAlsNächsteslegenwirdenStandard-Bilderordnerfest.DasistderOrdner,indemimportierteBilderautomatischabgespeichertwerden.UmdenOrdneranzulegen,wählenSieaufderlinkenSeiteunterErweiterteEinstellungendieKategorieLokaleInfoausundklickenaufdasOrdnersymbol4rechtsnebendemTextfeld.

EserscheinteinDialogfenster,indemSiedenBilderordnerfest-legenkönnen.WählenSiedazudenebenerstelltenSite-Ordneraus,undlegenSieeinenneuenOrdnermitdemNamen imagesan.SiekönnenaucheinenanderenNamenwiezumBeispielbilderwählen. Für die Schreibweise des Bilderordners gelten die glei-chenRegelnwiefürdenlokalenSite-Ordner.

4 Weitere Einstellungen unter Lokale InfoFallsSiebereitseineWebadresse(URL)fürIhreSitebesitzen,kön-nenSiesieunterWeb-URL5eintragen.Diesistabernichtzwin-

H Abbildung 6.3DieerweitertenEinstellungen

d

e

f

g

5 Eine neue Website

94

genderforderlich.EinemöglicheEingabeistzumBeispiel»http://www.djay-software.com«.

DieOptionGross-/KleinschreibungbeiHyperlinksüberprü-fen6solltenSieaktivierenwerden,damitbeiderÜberprüfungder Hyperlinks die Groß-/Kleinschreibung beachtet wird. Diesgewährleistet, dass die Hyperlinks auf den Webservern (meistUNIX/Linux-Serversysteme)korrektfunktionieren.

AußerdemsolltedieOptionCacheaktivieren7aufjedenFallaktiv sein, damit dieDateiender Website, ander Sie arbeiten,immerschnellausdemZwischenspeicherdargestelltwerden.

5.3 Site bearbeiten oder importieren

MöchtenSieeinefertigeWebsite,z.B.unsereBeispielwebsite,inDreamweaverbearbeiten,müssenSieeineneueSiteerstellen.

Esklingtmerkwürdig,dassmaninDreamweavereineneueSiteauch dann erstellen muss, wenn man eine bereits vorhandeneWebsitebearbeitenwill.DasErstelleneinerneuenSitebedeutetinDreamweaver lediglich,dasseinneuesProjektangelegtwird,indemunteranderemderOrdnergespeichertwird,indemsichdieDateienbefinden.DiesesVerzeichnismussnichtleerseinundkannauchbereitseinekompletteWebsiteenthalten.

DieserSchrittistauchdannsinnvoll,wennSieeinebestehendeWebsitealsMusterlösungbenutzenmöchtenbzw.wennSieeinein einem anderen Programm erstellte Website in Dreamweaverimportierenmöchten.DennbevorSieeinenochnichtinDream-weaverangelegteWebsitebearbeiten,müssenSieaucheineneueSiteerstellen.

Schritt für Schritt Eine neue Site aus einer fertigen Website erstellen

1 Fertige Website ladenLadenSiezuerstvonderWebseitehttp://www.dreamweaver-buch.de/uebungen/dieDatei»djay_fertig.zip«herunter.EntpackenSiediesemitWinZipodereinemanderenZIP-Tool,undkopierenSie

Site bearbeiten oder importieren 5.3

95

denOrdnerdjay _ fertig ineinenneuenOrdnerunterhalbvonEigeneDateien/Websites(Windows)bzw.unterMacOSXindenOrdnerWeb-Sites(oderSites).

2 Eine neue Site anlegenLegenSie jetzt,wiebereitsbeschrieben,unterSite NNeueeineneue Site an. Geben Sie im Feld Site-Name einen passendenNamenfür IhreWebsitean(z.B.»djayFertig« fürunserbereitsfertigesBeispielprojekt).

Klicken Sie auf dasOrdnersymbol inder ZeileLokalerSite-Ordner,undwählenSiedenOrdneraus, indenSiedie fertigeWebsiteverschobenhaben.WeitereEinstellungensindzunächstnichtnotwendig.KlickenSieaufOK,umdieSiteanzulegen.

Wechseln zwischen Sites

SiehabenjetztzweiSiteserstellt:eineleereSite,inderSieIhreÜbungendurchführenkönnen,undeineweitereSite,indersichdasbereits fertigeProjekt befindet. InDreamweaver ist jedochimmernureineSiteaktiv.BeimErstellenneuerWebseitenwirdautomatisch der lokale Site-Ordner der aktiven Site zum Spei-cherngewählt.BeimEinfügenvonBildernwerdenauchdieBild-dateien (ohne Abfrage) automatisch in den Ordner images deslokalenSite-OrdnersderaktivenSitekopiert,fallsSiediesenbeimErstellenderSitedafürangegebenhaben.

WennSiespäterneueVorlagenundWebseitenerstellen,istessehrwichtigzuwissen,welcheWebsitejeweilsaktivist,dasonstdie Dateien unbeabsichtigt in der falschen Site landen können.ÜberprüfenSiedaherimmer,inwelcherSiteSiemomentanarbei-ten.

ImBedienfeldDateien(MenüFenster NDateien)werdenalleDateienderaktivenWebsiteangezeigt.KlickenSieaufdasDrei-eck2(Abbildung6.4)nebendemOrdnersymbol,umdenInhaltdesOrdnersanzeigenzulassen.InderListe1erkennenSie,wel-cheSitemomentanaktivist.

5 Eine neue Website

96

UmeineandereSite(z.B.djayÜbungen)zubearbeiten,wählenSieinderListe3dieentsprechendeSiteaus.

DadieSitedjayÜbungennochnichtüberfertigerstellteWebsei-tenverfügt,wirddarinnurderOrdnerimagesangezeigt.

Details dazu, wie Sie Dateien umbenennen, löschen, kopierenund verschieben, erfahren Sie in Kapitel 10, »Websites testen,veröffentlichenundverwalten«.

Abbildung 6.4 E

DateienderSitedjayFertig

Abbildung 6.5 E

DasWechselnzueinerande-renSiteerfolgtüberdasLis-tenfeld.

Abbildung 6.6 E

AnsichtdernochleerenSitedjayÜbungen

a

b

c

E WieprogrammiertmanJavaScript?

E WieerstelleicheigeneSkripteinDreamweaver?

E WieverwalteichJavaScriptinDreamweaver?

E WasisteigentlichdiesesSpry?

Kapitel16

Interaktivität mit JavaScriptSobringenSiemitJavaScriptBewegunginIhreWebsite

16 Interaktivität mit JavaScript

286

JavaScript ist die Programmiersprache Nummer eins, wenn esdarumgeht,Webseiteninteraktivzumachen.MitihrkönnenSieRollover-Bilder einfügen, neueBrowserfenster in festenGrößenöffnen und komplette Pulldown-Menüs anlegen. Adobe stelltIhnendafürverschiedeneMöglichkeitenzurVerfügung,dieSieindiesemKapitelkennenlernenwerden.

16.1 Wie funktioniert JavaScript?

JavaScriptisteineProgrammiersprache,dieeinfachindenHTML-Codeeingefügtwird. StellenSie sichein solches Skript als eineAnsammlung von verschiedenen Befehlen vor, die durch einenKlickaufeinenHyperlinkodereinanderesEreignisausgelöstundabgearbeitetwerden.

JavaScript kann zwar auch mit anderen Ereignissen zusam-menarbeiten,wirbeschränkenunsindiesemKapiteljedochaus-schließlichaufAktionen,diedurchHyperlinksausgelöstwerden.JavaScriptinVerbindungmitFormularenbehandelnwirinKapitel17,»Formulareerstellen«.

Seitder Integrationdes JavaScript-FrameworksSpry ist es inDreamweaver möglich, sehr ansprechende Benutzeroberflä-chen,wiezumBeispielausklappbareMenüs,zuerstellen (sieheAbschnitt16.5,»DasJavaScript-FrameworkSpry«).

EsgibtinDreamweaververschiedeneTechniken,JavaScriptineineSeiteeinzubauen:

E Über das Feld Hyperlink können Sie im Eigenschaften-BedienfelddirektkurzeJavaScript-Befehleeingeben,dieaus-geführtwerden,wennderBenutzeraufdenHyperlinkklickt.Eine Aufzählung der möglichen Kommandos finden Sie imnächstenAbschnitt.

E ÜberdasMenüEinfügenstehenIhnenmehrereMenüpunktezurVerfügung,dieautomatischSkripteinIhreWebseiteinte-

Ereignisse in JavaScript

JavaScript-CodekannnichtnurdurcheinenKlick(onClick)aufeinenHyperlinkausgelöstwer-den,sondernauch,wenneineWebseitegeladen(onLoad)odergeschlos-sen(onUnload)wird.Esistsogareinstellbar,dassJavaScriptalleindurcheineMausberührungakti-viertwird(onRollover).

16 Interaktivität mit JavaScript

JavaScript im Eigenschaften-Bedienfeld 16.2

287

grieren.ImEinzelnensinddiesdieBefehleEinfügenNGrafik-objekteNRollover-Bild,EinfügenNGrafikobjekteNNaviga-tionsleisteundEinfügen NFormular NSprungmenü (sieheKapitel 17, »Formulare erstellen«) für aufder Seite aufklap-pendeNavigationsmenüs.

E Über Fenster N Verhalten können Sie über 25 JavaScript-Funktionen auswählen und in Ihre Webseite integrieren.JavaScript-Kenntnissesindhierfürnichterforderlich.AlsBei-spiel werden wir in diesem Kapitel einen Link erstellen, derineinemneuenFenstereineWebseitemitfestgelegterBreiteundHöheöffnet.

E MitdemEinfügen-BedienfeldimReiterSprystehenIhnen13Funktionen zur Verfügung, mit denen Sie zum Beispiel aus-klappbareMenüsinIhreWebseiteeinfügenkönnen.

E Im Internet finden Sie Tausende selbstgeschriebene Skripte,sogenannte Widgets, die Sie in Ihre Webseite übernehmenkönnen. Bevor Sie ein solches einsetzen, prüfen Sie jedochimmer,obDreamweavernichtschoneineneingebautenBefehlfürdenZweckbesitzt.

16.2 JavaScript im Eigenschaften-Bedienfeld

BeidereinfachstenMethode,JavaScriptdirektinderWebseitezuprogrammieren,tragenSiedenJavaScript-CodedirektimEigen-schaften-Bedienfeldein.

UmzumBeispieleinenLinkzuerstellen,derbeimAnklickeneinneues(JavaScript-)FenstermiteinerkurzenNachrichtanzeigt,markierenSieeinfacheinenTextodereinBildimDokumenten-fensterundgebenfolgendenJavaScript-BefehlimFeldHyperlinkein:JavaScript:alert('HalloWelt'); .

Netscape Resize-Fix

ImMenüBefehlebefin-detsichdasKommandoNetscapeResize-Fix hin-zufügen/entfernen,dasJavaScript-CodezumAusgleicheneinesFehlersinNetscapeVersion4hinzufügtbzw.wiederentfernt.DiesenBefehlbrauchenSienormaler-weisenichtaufzurufen,daDreamweaverihnselbständiginIhreSeiteeinfügt.

F Abbildung 16.1HyperlinkmitJavaScript,umeinkleinesFenstermiteinerNachrichtanzuzeigen

16 Interaktivität mit JavaScript

288

SiekönnendieSeitenunentweder ineinemWebbrowseroderdirektinDreamweavermitderLive-Ansichttesten.

InderfolgendenTabellefindenSieweiterenützlicheJavaScript-Befehle,dieSieaufdiegleicheWeiseanwendenkönnen.

JavaScript-Befehl Funktion

JavaScript:history.back(); zurückzurvorherigenSeite

JavaScript:history.forward(); zurnächstenSeite

JavaScript:history.go(-2); zweiSeitenzurück

JavaScript:windows.close(); Fensterschließen

JavaScript:windows.moveTo(1,1); FensterinEckeobenlinksbewegen

JavaScript:window.moveBy(10,-5); Fensterum10Pixelnachrechtsund5Pixelnachobenbewegen

JavaScript:window.resize-

To(400,200);

Fenstergrößeauf400×200Pixeleinstellen

JavaScript:window.print(); aktuellesFensterdrucken

G Tabelle 16.1JavaScript-BefehlefürdasEigenschaften-Bedienfeld

Abbildung 16.2 E

JavaScript-BeispielmitderLive-AnsichtinDreamweaver

Syntax von JavaScript

DerTextJavaScript:isterforderlich,damitderBrowserdenBefehlhis-tory.back()überhauptalsJavaScript-Funktionerkennt.DasSemikolontrenntmehrereBefehlevoneinander.BeinureinemBefehlwieinunseremBeispielistdasSemikolondahernichterforderlich.

JavaScript über Menüs einfügen 16.3

289

16.3 JavaScript über Menüs einfügen

Im Menü Einfügen N Grafikobjekte finden Sie mit Rollover-BildundNavigationsleistezweibereitsinDreamweavervorge-fertigte Skripte. Sie könnendiese einfachperMausklick in IhreWebseiteeinfügen.MitdemBefehlEinfügen NGrafikobjekte NNavigationsleiste könnenSiemehrereRollover-Bilderaufeinmalerstellen,zumBeispiel,umeinMenüaufzubauen.EineNavigati-onsleisteistnurfürdenEinsatzvonFramessinnvoll.

EinRollover-BildisteineGrafik,diebeiMausberührungdurcheinanderesBildausgetauschtwird.VerlässtderMauszeigerdasBild,wirdwiederdasursprünglicheBildangezeigt.DiesesVerhal-tenwirdauchalsHover-Effekt bezeichnet.

Für die Erstellung eines Rollover-Bildes benötigen Sie zweiexaktgleichgroßeGrafiken.Zudem isteinSkriptnötig,dasdieBildergegeneinanderaustauscht.DreamweavererstelltdenCodeautomatisch,wennSieEinfügenNGrafikobjekteNRollover-Bildwählen.

Schritt für Schritt Rollover-Bild einfügen

1 Einfügemarke setzenSetzenSie,wiebeimEinfügeneinesnormalenBildes,zunächstdieEinfügemarkeandiePositionimEntwurfsbereich,anderdasBildspäterangezeigtwerdensoll.

2 Rollover-Bild einfügenWählenSieEinfügenNGrafikobjekteNRollover-Bild.DasDia-logfensterausAbbildung16.3öffnetsich.

F Abbildung 16.3SofügenSieeinRollover-Bildein.

a

b

cd

e

f

16 Interaktivität mit JavaScript

290

GebenSieunterBildname1eineneindeutigenNamenfürdenButton ein. Der Bildname ist für den Betrachter der Webseiteunsichtbar; er wird nur benötigt, damit das Rollover-VerhaltenvonDreamweaverautomatischmitJavaScriptprogrammiertwer-denkann.

AlsOriginalbild2wählenSie jenesBildaus,dasangezeigtwerdensoll,wennsichderMauszeigernichtüberdemBildbefin-det.AlsRollover-Bild3 legenSiedasBildfest,dasangezeigtwerdensoll,wennsichderMauszeigerüberdemBildbefindet.

Das Kontrollkästchen Rollover-Bild vorausladen 4 sollteaktiviert sein, damit das Rollover-Bild bereits beim Laden derWebseitemitgeladenwird.DadurchkommtesbeidemEffektzukeinerVerzögerung.

GebenSiejetztnocheinenAlternativtext5fürdasBildein,damitNutzer,beidenendasBildnichtangezeigtwerdenkann,wissen,womitsieeszutunhaben.FüreinenHome-Buttonkönn-tenSiezumBeispiel»HiergehteszurHomepage«eingeben.

UmdasRollover-Bildzuverlinken,klickenSieaufdieSchaltflä-cheDurchsuchen inderZeileWennangeklickt,gehezuURL6.WählenSiedann imDialogfensterdieWebseiteaus, zuderverlinktwerdensoll.

3 Vorschau im BrowserImBrowseroderinderLive-AnsichtvonDreamweaverkönnenSiedenEffektdanntesten.

16.4 JavaScript über Verhalten integrieren

DaszentraleFensterzumVerwaltenundautomatischenErstellenvon JavaScript istdasBedienfeldVerhalten (zuerreichenauchüberFensterNVerhalten).DarinfindensichfertigeSkripte,die

Abbildung 16.4 E

DerEffektimTest

JavaScript über Verhalten integrieren 16.4

291

inDreamweaverVerhaltengenanntwerden.Dreamweaverbietetüber25Verhalten,dienochdurchsogenannteExtensionserwei-terbarsind.AnhandeinesRollover-Bildeserläuternwirnun,wasVerhaltengenausindundwiesiefunktionieren.

Funktionsweise eines Verhaltens

VerhaltensindimmerObjektenzugeordnet,diedasSkriptauslö-senkönnen.MöglicheObjektesindTextemitHyperlinks,BildermitHyperlinksoderaucheineWebseiteselbstmitHyperlinks.

UmfürunserBeispieleinsolchesObjektzuerzeugen,erstel-lenSie,wie imletztenAbschnittbeschrieben,einRollover-Bild.Umdie zugeordnetenVerhaltenanzuzeigen,klickenSieaufdasRollover-Bild imDokumentenfensterundöffnendasBedienfeldVerhalten.FallsdasBedienfeldnichtsichtbarist,wählenSieimMenüFenster·Verhaltenaus.

DasBedienfeldVerhaltenbestehtauszweiSpalten.Inderers-tenwerdendieEreignisseundinderzweitendiedamitverbun-denen Aktionen angezeigt. Für das Rollover-Bild werden zweiVerhaltenangeboten.DasuntereenthältdieAktionBildaustau-schen.DasauslösendeEreignisfürdieseAktionist<A>onMouse-Overundbedeutet,dassdieAktionBildaustauschennurausge-führtwird,wennsichdieMausüber(onMouseOver)einemLink(<A>-Tag)befindet.

IndemzweitenVerhaltenwirddieAktionBildaustauschwie-derherstellen ausgeführt, wenn das Ereignis <A> onMouseOutzutrifft.Dasbedeutet,dassbeimHerausfahren(onMouseOut)desMauszeigersausdemLink(<A>-Tag)wiederdasursprünglicheBilderscheint.

WiewirimBeispielgesehenhaben,bestehteinVerhaltenausdreiElementen:1. Objekt

DasObjektistzumBeispieleinHyperlink-TextodereinHyper-link-Bild. Sie müssen keine normalen Links verwenden, diezueineranderenWebseiteverweisen,sondernkönnenauchleereLinkseinsetzen,indenenanderStellederURLeinRau-tenzeichensteht.JedemObjektkönnenSieeineodermehrereAktionenzuordnen.

G Abbildung 16.5ImBedienfeldVerhaltenver-waltenSieJavaScript-Funk-tionen.

16 Interaktivität mit JavaScript

292

2. Aktion Aktionen (auch Verhalten genannt) sind vorgefertigte Java-Script-BefehleinDreamweaver.MöglicheAktionenfindenSieimBedienfeldVerhalten,darunterzumBeispielBildaustau-schen,BrowserfensteröffnenundSoundabspielen.

3. Ereignis Ereignisse legen fest, wodurch eine Aktion ausgelöst wird.EinEreigniskanneinKlick(onClick)aufeinObjektodereineMausberührungsein(onMouseOver).

Ein Verhalten einfügen

WirwerdennuninDreamweaverdasVerhaltenBrowserfenster öffnen ineineSeiteeinbauen.DamitwirdnacheinemKlickaufeinenHyperlinkeineWebseiteineinemneuenFenstergeöffnet.

Schritt für Schritt Seite in neuem Fenster öffnen

1 Die beiden Webseiten erstellenErstellenSieeineHTML-Datei(»bild_klein.html«)miteinemklei-nenBildundeineHTML-Datei(»bild_gross.html«)miteinemgro-ßenBild.

Abbildung 16.6 E

EineSeiteimneuenFensteröffnen

JavaScript über Verhalten integrieren 16.4

293

2 Leeren Link erstellenÖffnenSienundieSeite»bild_klein.html«,vonderausdieWeb-seite»bild_gross.html«geöffnetwerdensoll.

MarkierenSiedanneinenTextodereinBild1,mitdemdasFenstergeöffnetwerdensoll,understellenSieeinenleerenLink,indemSieimEigenschaften-BedienfeldunterHyperlink2nurdasRautenzeichen#eingeben.

3 Verhalten im Bedienfeld auswählenKlicken Sie im Bedienfeld Verhalten auf das Symbol mit demPluszeichen,undwählenSieausderaufklappendenListeBrow-serfensteröffnenaus.

4 Einstellungen für Verhalten vornehmenNachderAuswahldesVerhaltensöffnetsicheinFenster,indemSiefolgendeEinstellungenvornehmenkönnen.

H Abbildung 16.7DieHTML-DateifürdaskleineBild

F Abbildung 16.8HierlegenSiedasVerhaltenfest.

b

a

16 Interaktivität mit JavaScript

294

GebenSieunterURLanzeigenentwedereineURLein,oderkli-ckenSieaufDurchsuchen,uminIhrerSiteeineSeiteauszuwäh-len,dieindemneuenFenstergeöffnetwerdensoll.InunseremFallmussauf»bild_gross.html«verlinktwerden.

Tragen Sie unter Fensterbreite und Fensterhöhe die MaßedesneuenFenstersinPixelnein.WennSiekeinesderAttributeauswählen,wirddasneueFensterohneMenüleiste,Symbolleisteusw.angezeigt.WennSiedemBenutzerermöglichenmöchten,dieGrößedesFensterszuverändern,aktivierenSieGrössenän-derungsgriffe.KlickenSieaufOK,umdasVerhaltenindieWeb-seitezuintegrieren.

5 Ereignis »onClick« auswählenImBedienfeldVerhaltenmüssenSienunnochdasEreignisfestle-gen,beidemdasneueFenstergeöffnetwerdensoll.

InunseremBeispielsollsichdieWebseitebeieinemKlickaufdenHyperlink–alsoaufdasBildoderdendarunter stehendenText–öffnen.WählenSiedaherausderlinkenSpaltedasEreignisonClickaus.

6 Ve rhalten testenDas Verhalten ist nun aktiviert, und Sie können es bereits imDokumentenfensteroder imWebbrowser testen.WennSiedie

Abbildung 16.9 E

GebenSiehierdieURLderDateiein,dieangezeigtwer-densoll.

Abbildung 16.10 E

ÄnderungenkönnenSieperDoppelklickvornehmen.

JavaScript über Verhalten integrieren 16.4

295

ÄnderungeninderLive-Vorschaudurchführen,müssenSieinderneuen Dreamweaver-Version unter Windows die (Strg)-Tastebzw.dieTaste(°)aufdemMacbeimKlickaufdasBildfesthal-ten.DiesistimmerdanninDreamweavererforderlich,wenneineandereWebseitegeöffnetwird.

7 Änderungen vornehmenUmÄnderungenamVerhaltendurchzuführen,markierenSiedenLinkundklicken imBedienfeldVerhaltendoppeltaufdasent-sprechendeVerhalten.

Aktionen hinzufügen

WirwerdenunsindiesemAbschnittanschauen,welcheAktionenSieinDreamweavereinemHyperlinkzuweisenkönnen.WählenSiedaher zuersteinenHyperlinkaufeinerbeliebigenSeiteaus,odererstellenSieeinenneuenmiteinerURLodereinemRauten-zeichenalsZielangabe.

Im Bedienfeld Verhalten können Sie durch Klicken auf dasPlussymbolverschiedeneJavaScript-Aktionenzuweisen.

F Abbildung 16.11AuswahlvonAktionenüberdasMenü

16 Interaktivität mit JavaScript

296

EinigePunktesindgrauhinterlegt.DieseMenüpunktesinddannmit dem aktuell ausgewählten Objekt nicht verwendbar. DieAktion Formular überprüfen ist zum Beispiel deshalb nichtanwählbar,weilkeinFormular,sonderneinHyperlinkalsObjektausgewähltwurde.

InderfolgendenTabelleerläuternwirdiewichtigstenAktioneninDreamweaver.

Aktion Bedeutung

Bildaustauschen TauschteinBildgegeneinanderesaus.

Bildaustauschwieder-herstellen

MachtdenTauscheinesBildeswiederrückgängig.

Bildervorausladen LädteinesodermehrereBilder,ohnesieanzuzeigen.WirdinVerbindungmitderAktionBildaustauschenverwendet.

Browserfensteröffnen ÖffneteineURLineinemneuenBrowser-fenstermiteinstellbarerFenstergröße.

Formularüberprüfen PrüftvordemVersenden,obeinFormularkorrektausgefülltwurde.

GehezuURL WirdinframebasiertenWebsitesverwen-det,umnachKlickaufeinenHyperlinkmehralsnureinenFramezuaktualisieren.

Plug-Inüberprüfen HiermitkönnenSiezumBeispielüberprü-fen,obdasFlash-PluginimBrowserdesBesuchersinstalliertist.

Popup-Meldung ÖffneteinFenstermiteinemeinstellbarenText.

G Tabelle 16.2DiewichtigstenAktioneninDreamweaver

Aktionen bearbeiten und löschen

UmeinebestehendeAktionzubearbeiten,klickenSieimBedien-feldVerhaltendoppeltaufderenNamen.EsöffnetsichdanneinFenster,indemSiedieEinstellungenändernkönnen.

Manuell JavaScript eingeben

InDreamweaverCS6könnenSieJavaScript-FunktionenimBedienfeldVerhaltenauchvonHandeingeben.TragenSiedazuanderStelle,andernormalerweisedieAktionsteht,eineneigenenJavaScript-Befehlein,zumBeispielwindow.close();,umeinFensterzuschlie-ßen.

JavaScript über Verhalten integrieren 16.4

297

ÜberdieSchaltflächemitdemMinuszeichenimBedienfeldVer-haltenlöschenSieeinVerhalten.

Ereignis festlegen

Wenn Sie auf ein vorhandenes Ereignis klicken, erscheint imBedienfeldVerhalteneineListeallermöglichenEreignisse.Wäh-len Sie aus der Liste ein Ereignis aus, das das Verhalten einesObjektsauslösensoll.

Tabelle 16.3 erläutert die wichtigsten Ereignisse. Mit ihnenkönnenSiedieobengenanntenVerhaltenauslösen.

Ereignis Bedeutung

onClick MausklickaufObjekt

onDblClick DoppelklickaufObjekt

onMouseDown MaustasteistaufdemObjektgedrückt.

onMouseOut MauszeigerbefindetsichaußerhalbdesObjekts.

onMouseOver MauszeigerbefindetsichaufdemObjekt.

onMouseUp MaustastewirdüberdemObjektlosgelassen.

onAbort WebseitewirddurchSchließendesBrowserfens-tersoderKlickenaufeinObjektverlassen.

onLoad WebseiteistvollständigimBrowsergeladen.

F Abbildung 16.12DialogfensterfürEinstellun-genzurAktionBrowserfens-teröffnen

G Abbildung 16.13LöscheneinesVerhaltens

G Abbildung 16.14WählenSieausderListeeingewünschtesEreignisaus.

G Tabelle 16.3DiewichtigstenEreignisse

16 Interaktivität mit JavaScript

298

16.5 Das JavaScript-Framework Spry

Weiter oben haben Sie gesehen, wie Sie einfache JavaScript-BefehlezumBeispielzumÖffnenvonneuenSeitenineineWeb-seiteeinbauen.MitJavaScriptkönnenSieaberauchkomplexereAufgabenrealisieren,wieetwaPulldown-Menüsoderaufklapp-bareBereiche.

MithilfevonAjax (sieheAbschnitt2.5,»Ajax«)istessogarmög-lich,komplexeInternetanwendungenzuprogrammieren,diesichähnlichwie richtigeProgrammebedienen lassen.EinbekanntesBeispielhierfüristGoogleText&Tabellen(http://docs.google.comundhttp://spreadsheets.google.com).Auf diesenWebseiten kön-nenSiedirektinIhremWebbrowserTexteundTabellenbearbei-ten,ohnedassWordoderExcelaufdemeigenenRechnerinstal-liertseinmüssen.

UmsolcheAnwendungenzurealisieren,sindkomplexeJavaScript-Befehlenotwendig.AufgrunddervielenunterschiedlichenBrowser

Abbildung 16.15 H

MitderInternetanwendungGoogleText&Tabellenkön-nenSieExcel-TabellenimBrowserbearbeiten.

Das JavaScript-Framework Spry 16.5

299

undInkompatibilitätenistesselbstfürerfahreneProgrammiererschwer, in JavaScript zu programmieren. Daher gibt es soge-nannte JavaScript-Bibliotheken, die die Programmierung erheb-lichvereinfachen,indemzumBeispielmehrerekomplexeBefehlezueinemeinfachenKommandozusammengefasstwerden.DieseJavaScript-Bibliotheken werden auch JavaScript-Frameworksgenannt. Es existiert inzwischen eine Reihe von verschiedenenJavaScript-Frameworks, die im Prinzip alle die Programmierungvereinfachen,aberganzunterschiedlicheAnsätzehaben.

Auch Adobe hat mit Spry ein eigenes JavaScript-Frameworkentwickelt,dasdirektinDreamweaverCS6integriertist.Dadurchist es in Dreamweaver CS6 recht schnell und einfach möglich,selbstkomplexedynamischeBenutzeroberflächenvisuellzuent-werfen.

Sryp-Funktionen einfügen

Mitden sogenanntenSpry-Widgets könnenSiediebenötigtenSpry-FunktionenüberdasEinfügen-BedienfeldinIhreWebseiteeinbinden.DieWidgetskannmanindreiGruppenunterteilen.

F Abbildung 16.16Spry-WidgetsbindenSieüberdasEinfügen-Bedienfeldein.

a

b

c

Index

409

Index

1&1InternetAG .................. 331-Bit-Transparenz ............... 240<blockquote> ..................... 193.container .......................... 149.content ............................. 155.de ....................................... 29.fla ..................................... 365.footer ............................... 156.gov ..................................... 29.header .............................. 151.museum .............................. 29.org ...................................... 29.sidebar1 ............................ 155.swf .................................... 365

A

AbhängigeDateienübertragen ...................... 180

AbsatzHTML ............................ 192vorformatierter in HTML 194

Absatz(HTML-Tag) ............... 40AbsoluterLink .................... 275AcrobatReader .................. 283AdobeFireworksCS6 ......... 362AdobeFlashCS6 ................ 364AdobePhotoshopCS6 ....... 357Ajax ............................. 47,298Ajax-Framework ................... 47Aktion ................................ 292

bearbeiten ..................... 296entfernen ...................... 297hinzufügen .................... 295

AktiveSite ............................ 95Aktualisieren .............. 137,183Aktualisierung ...................... 76ALL-INKL.COM .................... 33alt-Attribut ......................... 388Alternativtext ....... 69,121,247Ankerpunkt ........................ 276Ansicht,erweiterte ............. 256Ansichtsmodi ....................... 74

Anzeigen ............................ 396AppfürApplesAppStore

bereitstellen ................... 352Arbeitsbereiche

zusammenstellen .............. 84Arbeitsbereichlayout ............ 84Arbeitsumgebunganpassen 84Attribut ................................ 41Auswahlliste ....................... 310Auszeichnungssprache .......... 39

B

Banner ................................. 98Barrierefreiheit ........... 205,260BearbeitbarerBereich ......... 115Bedienfeld ............................ 81

Dateien ........................... 95Eigenschaften .................. 79gruppieren ....................... 82

Bedienfeldgruppe ........... 81,82Beispielprojekt ..................... 90Besucherstatistik ................ 392Bild

austauschen ............ 245, 296CSS ............................... 244einfügen .... 68, 83, 120, 121,

242Einstellungen ................. 246Helligkeit ....................... 250in Fireworks bearbeiten 364in Photoshop bearbeiten 360Kontrast ........................ 250neu auflösen .................. 122nicht angezeigtes ............ 166Platzhalter einfügen ....... 244Proportionen ................. 248verkleinern .................... 122vorausladen ................... 296zuschneiden ................... 249

Bildeigenschaft ..................... 80Bilderordner ......................... 93Bildformat,Web ................. 238

Bildgröße ........................... 238einstellen ....................... 247

Block .................................. 154Blog ................................... 370Blogger .............................. 370body ............................ 41,148

Hintergrundfarbe ........... 148Standardschriftart .......... 148

Bookmarks,Titel ................ 116Box .................................... 152Breite ................................. 150Browser ....................... 74,166

Adresszeile ....................... 26in Vorschaufunktion

einbinden ................... 168Standardformatierung ...... 42

Browserfenster ................... 292öffnen ........................... 296

Browserkompatibilität ........ 173BrowserLab ................ 170,171Browserliste ....................... 168Browservorschau ................ 168

C

Cache .................................. 94CascadingStylesheetsRCSSccTLD .................................. 29CMS .................................. 370Code-Ansicht ....................... 76Content-Management-

System ........................... 370Copyright .................. 106,134

einfügen ........................ 135CreativeSuite6 ............ 58,356CSS .............. 44,203,204,272

Abstand ......................... 221bearbeiten ..................... 224Block ............................. 221Box ............................... 221Eigenschaften-Bedienfeld 207Eigenschaften hinzufügen 225einbinden ........................ 44

Index

410

CSS(Forts.)Einführung .................... 207Erstellung ...................... 207Erweiterungen ............... 223externer Stil ................... 205Grundlagen ............. 203, 204Hintergrund ................... 220Hintergrundfarbe ........... 208Hintergrundgrafik ........... 244Hyperlink-Stil ................. 208im Quelltext .................. 207interner Stil ................... 205in Vorlage einsetzen ....... 206Liste .............................. 222mehrfach einsetzen ........ 214neuer Stil ....................... 217Positionierung ................ 223Rahmen ......................... 222Regel löschen ................. 226Rollover-Effekt ............... 208Schriftart ................ 208, 220Schriftfarbe ............ 208, 220Schriftgröße ............ 208, 220Seiteneigenschaften 207, 208Seitenrand ..................... 208Stil ................................ 119Stile-Eigenschaften ......... 224Stil löschen .................... 226Stil umbenennen ............ 227über Eigenschaften-

Bedienfeld .................. 211verknüpfen .................... 229verschieben .................... 230

CSS3 .................................... 45CSS-Datei ............................ 44

Aufbau .......................... 142bearbeiten ..................... 144in Webseite einbinden .... 229speichern ....................... 219

CSS-Eigenschaft ................. 146CSS-Grundlagen ................. 142CSS-Klasse

umbenennen .................. 227CSS-Regel .......... 143,204,216

anzeigen .......................... 78deaktivieren ................... 227definieren ...................... 146duplizieren ..................... 227

Eigenschaften ................ 145erstellen ................... 62, 153verschieben .................... 227wiederherstellen ............ 226

CSS-Regel-Definition 146,220CSS-Standards .................... 142CSS-Stil .............. 143,204,216

anwenden ..................... 214Fenster .......................... 144zuweisen ....................... 227

CSS-Stile(Bedienfeld) ......... 207CSS-Syntax ......................... 216CSS-Tansitions .................... 231CSS-Übergänge ............ 56,231CSSZenGarden ................. 204

D

Dateiaus Vorlage .................... 113löschen .......................... 183neu ................................. 66umbenennen .................. 183

Dateifeld ............................ 314Dateigröße ........................... 78Dateiverwaltung ................. 179Datenbank ........................... 34Denic ................................... 29Desktopgröße .................... 340Digitalkamera ............. 238,241Div-Tag ............................... 335

anpassen ....................... 339einfügen ........................ 336verkleinern .................... 339

Dokumentenfenster ............. 74Domain ................................ 27

frei? ................................ 29IDN-Domain .................... 28TLD ................................. 29Umlaute .......................... 28

Domainname ....................... 27Download-Link .......... 272,283Downloadzeit ...................... 78DreamweaverCS6,neu ........ 54DreamweaverExchange ....... 59Dreamweaver-Template ...... 109

Dreamweaver-Testversion ..... 58Druckversion ...................... 205Dummy-Link ...................... 279dwt(Dateieendung) ........... 109DynamischeWebseiten ........ 48

E

Eigenschaften-Bedienfeld ..... 79Eigenschaftsinspektor ..... 61,79Einchecken ........................ 177Einfügen

benannter Ankerpunkt .... 277Tabelle .......................... 258

Einfügen-Bedienfeld ............. 83Einrückung ......................... 193

HTML ............................ 193Einstellungen ....................... 84E-Mail-Adresse ..................... 33E-Mail-Link ................ 272,279

Betreffzeile .................... 281E-Mail-Verknüpfung ........... 280Entwurfsansicht ............ 74,188Ereignis ...................... 286,292

festlegen ....................... 297ErweiterteAnsicht .............. 256Excel .................................. 254ExternerStil ....................... 205

erstellen ........................ 219

F

Fadenkreuz ........................ 275Feldgruppe ........................ 315Fettschrift .......................... 118Fireworks ..................... 58,238

Datei importieren ........... 363Flash ............................ 43,402

ausrichten ..................... 367Auto-Wiedergabe ........... 367Eigenschaften ................ 366einfügen ........................ 365H-Abstand ..................... 367Qualität ........................ 367

Index

411

Flash(Forts.)Schleife ......................... 367skalieren ........................ 367V-Abstand ..................... 367

Flash-Player ....................... 365Flash-Plugin ....................... 365FlexiblesLayout ................. 332FließendesRasterlayout 55,332Fließtext ............................. 118Formulare .................. 303,304

Aktion ........................... 306Beschriftung mit CSS ...... 317Danke-Seite ................... 326Eigenschaften ................ 304Element einfügen ........... 306erstellen ........................ 305Fehlermeldungen ........... 324Felder überprüfen .......... 323gestalten ....................... 315GET ............................... 306Kennwort ...................... 309mit CSS gestalten .... 309, 316mit Tabellen gestalten .... 315Passwort ....................... 309Pflichtfeld ...................... 322PHP-Skript ..................... 326POST ............................. 306Skript ............................ 326überprüfen ............. 296, 322Upload .......................... 314Versandmethode ............ 306

Formularbereich ................. 304einrichten ...................... 305

Formularelement ................ 306Aufbau .......................... 306Auswahlliste .................. 310Dateifeld ....................... 314einfügen ........................ 307Feldgruppe .................... 315Kennwortfeld ................. 309Kontrollkästchen ............ 311Optionsschalter .............. 312Schaltfläche ................... 313Textbereich .................... 309Textfeld ......................... 308versteckte Felder ............ 314

Formularüberprüfung ......... 322Foto,Bildformat ................. 240

FTP .................................... 273Einstellungen ................. 173

FTP-Benutzerdaten ............. 175FTP-Servereinrichten ......... 174Fußbereich ......................... 101Fußzeilennavigation ........... 134

G

Gameserver .......................... 34GehezuURL ...................... 296Gesamttabelle .................... 260GET .................................... 306GIF .................................... 239GIF-Animation ................... 240Google ....... 383,384,387,391

Bildersuche .................... 388URL anmelden ............... 386

GoogleAdSense ......... 384,396GoogleAdWords ....... 384,396GoogleAnalytics ........ 384,392GoogleEarth ...................... 384Google-Index ..................... 385Google-Konto .................... 393GoogleMail ....................... 384GoogleMaps ..................... 405Grafikobjekte,Navigations-

leiste .............................. 289Großschreibung .................... 94gTLD .................................... 29

H

h1 ...................................... 153Hauptbereich ..................... 101Header ................................. 41Head-Tags,Beschreibung .... 389Helligkeit ........................... 250Hervorhebung,HTML ........ 196Hintergrund ....................... 152Hintergrundbild ................. 208

festlegen ....................... 149kacheln ......................... 142

Hintergrundfarbe ............... 208

Hintergrundgrafik ............... 244Homepage ........... 91,114,170HostEuropeGmbH .............. 33Hotspot ............................. 281Hover-Effekt .............. 163,289HTML .................................. 39HTML5 ................................ 43

Voreinstellungen .............. 85HTML-Attribut

align ............................... 41HTML-Dokument ................. 26HTML-Entities ...................... 41HTML-Entity ...................... 189HTML-Seiteerstellen ............ 60HTML-Tag

<br> ............................... 40<em> .............................. 40<form> .......................... 304<h1> ............................... 40<img> ............................. 40in Statuszeile ................... 77<link> ............................. 44<ol> ................................ 40<p> ................................. 40<strong> ......................... 39<table> .................... 40, 261Übersicht ......................... 40<ul> ................................ 40

https .................................. 273Hyperlink ........ 26,41,79,133,

166,272,273absoluter ....................... 275anlegen ......................... 274CSS-Regel ...................... 159entfernen ...................... 279externer ........................ 275Farbe ............................ 210innerhalb der Website .... 276interner ......................... 275JavaScript einfügen ........ 287korrigieren ..................... 183leerer ............................ 279löschen .......................... 279Prüfung ........................... 94relativer ........................ 275testen ........................... 171Zustand ......................... 210

Hyperlink-Stil ..................... 208

Index

412

HypertextTransferProtocol(HTTP) .............................. 27

I

ICANN ................................. 29ID ...................................... 307IDN-Domain ........................ 28Imagemap .......................... 281

erstellen ........................ 281img ...................................... 77Import

Fireworks-Datei ............. 363Flash ............................. 365Photoshop-Datei ............ 357PNG-Datei .................... 363

Impressum ......................... 134Inhalt

festlegen ....................... 104strukturieren .................. 191

Inhaltsbereich ...................... 98Innenabstände ................... 152Installation ........................... 58InteraktivesMenü .............. 127InternerStil ........................ 205InternetExplorer ........ 167,168IP-Adresse .............. 27,28,273IP-Adressraum ...................... 29iPhone ............................... 330

J

Java ...................................... 34JavaScript ............... 39,46,286

Alert-Fenster öffnen ....... 287Ereignis ......................... 286manuell ......................... 296Syntax ........................... 288über Menüs einfügen ...... 289Verhalten ...................... 287

JavaScript-Befehl ................ 288JavaScript-Framework ........ 299JPEG .................................. 240jQueryMobile ............ 341,343

Seiten hinzufügen ........... 348jQuery-Mobile-Projekt ....... 344

K

Kennwortfelder .................. 309Klasse ................................ 214Klassenattribute ................. 143Klassen-Selektor ................. 216

umbenennen .................. 227Klassen-Typerstellen .......... 218Kleinschreibung ................... 94Kodierung ............................ 78Kodierungstyp .................... 306Kontakt .............................. 134Kontaktformular ................. 304Kontrast ............................. 250Kontrollkästchen ................ 311Kopfzeile ............................ 259KostenloserWebspace ......... 32Kursiv ................................ 118

L

Layouterstellen ........................ 101für Desktopgeräte .......... 340für mobile Geräte ........... 335für Tablet-Geräte ............ 338Gesamtbreite ................. 149Höhe ............................. 152mit Tabellen ................ 44, 51

LeererLink ......................... 279Leerzeichen ................ 190,194

geschütztes .................... 190Leerzeile ............................ 194Link RHyperlinkLinkpopularität ................... 391Linux-Server ......................... 34Liste ........................... 119,195

geordnete ............... 120, 222ungeordnete ........... 120, 223verschachtelte ................ 196

Listenformat ....................... 120

Live-Ansicht ................... 64,75Logo ............................ 98,101Logo-Platzhalter ................... 67LokaleNavigation .............. 128LokalerSite-Ordner .............. 91

M

Margin ............................... 153MarkupLanguage ................ 39MediaQueries ................... 332Medienabfragen ................... 57Menüeintragändern ........... 131Menüinteraktives .............. 127Meta-Tag .................... 115,389

bearbeiten ..................... 390Description .................... 389für mobile Geräte ........... 345hinzufügen .................... 389Keywords ...................... 389

MobileApplikationen ........... 56MobileFirst ....................... 335MobileWeb-Apps .............. 341MobileWebsite

Charakteristika ............... 342erstellen ........................ 330

Mobilgerätgröße .......... 77,335Multiscreen-Vorschau ........... 55MySQL ........................... 34,47

N

NativeAppDefinition ...................... 342mit Phonegap ................ 351

Navigation ........................... 98CSS-Regeln .................... 161entfernen ...................... 105Fußbereich ..................... 135lokale ............................ 128

Navigationsmenü ............... 101NetscapeResize-Fix ........... 287neueFunktionen .................. 55

Index

413

NeuesfliessendesRaster-layout ............................. 333

NeueSite ............................. 92NeueWebseite .................. 112Nic ....................................... 31

O

Objekt ............................... 291onAbort ............................. 297onClick .............................. 297onDblClick ......................... 297onLoad .............................. 297onMouseDown .................. 297onMouseOut ..................... 297onMouseOver .................... 297onMouseUp ....................... 297Opera ................................ 167Optionsschalter .................. 312Ordnererstellen ................. 183

P

Padding .............................. 153Palette ................................. 81Passwort-Abfragen ............. 309Passwort-Textfeld ............... 309PDF-Datei .......................... 283Pfadangabe ........................ 275PhoneGap .......................... 351Photoshop-Datei ................ 238

aus der Zwischenablage 359importieren ................... 357

PHP ................... 34,39,47,76Pixelgrafik .......................... 239Platzhalter .......................... 244

austauschen ................... 245Pluginüberprüfen .............. 296PNG ................................... 241PNG-Dateiimportieren ...... 363PNG-Format ...................... 362Popup-Meldung ................. 296Positionierung .................... 223POST ................................. 306

Primärbrowser ................... 169Programmstart ..................... 59Protokoll ............................ 273Provider ......................... 27,32PSD ................................... 357

R

Randstärke ................. 125,259Redesign ............................ 205RelativerLink ..................... 275Rendering-Engines ............... 49ResponsiveWebdesign ....... 331

Funktionsweise .............. 332Rollover-Bild .............. 246,289

vorausladen ................... 290Rollover-Effekt ................... 208RubyonRails ....................... 34

S

Schaltfläche ........................ 313Schrift ........................ 118,239Schriftart ...... 79,118,208,213Schriftfarbe ................ 208,213Schriftgröße 79,118,208,213Schriftgruppe ..................... 118SecureFTP ......................... 174Seiteneigenschaften ........... 208Seiteninhalt ................ 111,112

einfügen ........................ 116Seitenrand ......................... 208Seitentitel .................... 63,115Sekundärbrowser ............... 169Selektor ..................... 143,216SenchaTouch ..................... 344Seriennummer ..................... 58Shop .................................. 364Site

anlegen ...................... 65, 92erstellen .......................... 92konfigurieren ................... 92synchronisieren .............. 181wechseln ......................... 95

Site-Definition ..................... 92Site-Name ............................ 92Skripteübernehmen ........... 300Slice ................................... 140Smartphone ....................... 330Sonderzeichen ............. 41,189Spalte

auswählen ..................... 264einfügen ........................ 126hinzufügen .................... 268löschen .......................... 268

Spaltenmenü ...................... 264Speichernunter .................... 64Spry ........................... 286,322Spry-Funktioneneinfügen ... 299Spry-Menüleiste ................. 128

anpassen ....................... 131einfügen ........................ 129

Spry-Überprüfung .............. 323Spry-Widget ....................... 299SSL ..................................... 309Standard-Ansicht ................ 256Startfenster .......................... 59Startseite ............................ 114Statuszeile ............................ 77Steuerradsymbol .................. 78Stil

externer ........................ 205interner ......................... 205interner oder externer .... 219

StratoAG ............................. 33StylesheetsRCSSSubdomain .......................... 28Suchmaschine ............ 116,384Suchmaschinenoptimierung 387Synchronisieren .................. 183

T

Tabelle ............................... 254an Browserfenster

anpassen .................... 258auswählen ..................... 261Barrierefreiheit ............... 260Breite ............................ 263einfügen ................... 83, 124

Index

414

Tabelle(Forts.)erstellen ................. 123, 257Größe ............................ 258Größe zurücksetzen ........ 263Hintergrundfarbe ........... 266Höhe ............................. 263in Tabelle erstellen ......... 257Kopfzeile ................ 259, 266Linien ............................ 257markieren ...................... 260Randstärke .................... 259sortieren ........................ 269Spalte ........................... 126Spalte auswählen ........... 264Spaltenbreiten verändern 125Umbruch ....................... 266Zeile ....................... 126,258Zeile auswählen ............. 264Zellabstände .................. 259Zellauffüllung ................ 259Zelle ausrichten .............. 266Zelle auswählen ............. 265Zelle markieren .............. 265Zellen gruppieren ........... 266

Tabellenansicht .................. 256Tabellenbereich .................. 263

Eigenschaften ................ 265Tabellenbreite .................... 124Tabelleneinstellungen ......... 265Tabellengrößefest .............. 258Tabellen-ID ........................ 262Tabellenlayout,Nachteile ..... 44Tabellenlinien ............... 74,257Tabellenzelle

ausrichten ..................... 266gruppieren ..................... 266markieren ...................... 265

Tablet-PC ........................... 330Größe ............................ 338

Tablets ................................. 55Tabulator ............................ 194Tag ....................................... 39

per CSS formatieren ....... 219Tag<canvas> ........................ 43Tag-Leiste ........................... 264Tag-Selektor ....................... 216Tag-Stilerstellen ................. 219Tag<video> ......................... 43

Teilen-Ansicht ...................... 76Template .............................. 98Testversion ........................... 58Text

eingeben ....................... 188erstellen ........................ 117

Texteigenschaften ................. 79Texteinzug .......................... 154Textfeld ...................... 306,308

Breiten mit CSS bestimmen ................. 320

mehrzeiliges ................... 309Passwort-Feld ................ 309

Textinhalt ........................... 188Titel ................................... 101TLD ...................................... 29Top-Level-Domain ............... 29Tracking-Code .................... 393Traffic ................................... 33Transfervolumen ................... 33Transparenz ........................ 240Twitter ............................... 408

U

Überprüfen-Modus ............ 226Überschrift ................. 119,210

HTML ............................ 191Überschrift(HTML-Tag) ........ 40Übertragungsgeschwindigkeit 78Umbruch

harter ............................ 193weicher ......................... 193

Unicode-Zeichensatz .......... 189Update ................................. 58URL ................................... 273

Aufbau .......................... 273bei Google anmelden ...... 386

V

Vektorgrafik ....................... 239Verbindungsgeschwindigkeit 78Verhalten ................... 115,290

Browserfenster öffnen .... 292einfügen ........................ 292neues Fenster ................. 292

Verhalten(Funktion) ............ 46Verknüpfung ...................... 210Versandmethode ................ 306VerschachtelteListe ............ 196Verschlüsselung .................. 309VerstecktesFeld ................. 314VisuelleHilfsmittel ............. 257VordefinierteBetreffzeile .... 281Voreinstellungen .................. 84VorformatierterAbsatz

HTML ............................ 194Vorlage ................................ 98

anwenden ..................... 137entwerfen ........................ 98erstellen ........................ 107mit bearbeitbaren

Bereichen ................... 107öffnen ........................... 109planen ........................... 100speichern ....................... 137Speicherort .................... 109

Vorlagendatei ..................... 109Vorschaufunktion ............... 168

W

Web-AppDefinition ...................... 342mit Dreamweaver

erstellen ..................... 343neue Seite hinzufügen .... 347Seite verlinken ............... 349

Webbrowser ................ 49,166Webhoster ..................... 27,32Weblog ...................... 369,370Webserver ..... 27,34,176,177,

182,183Website ....... 26,89,90,91,98

ändern .......................... 179aus Vorlage .................... 113auswählen .............. 172, 178bearbeiten ................ 94,179dynamische ...................... 48

Index

415

Website(Forts.)einzeln übertragen ......... 179erstellen ................... 60, 113erstellen mit Hyperlinks .... 65für mobile Geräte ........... 330Gesamtbreite ................. 149Größe .............................. 78herunterladen ................ 179im Adobe BrowserLab

testen ........................ 170importieren ..................... 94mit fließendem Rasterlayout

erstellen ..................... 333neu ............................... 112prüfen ........................... 172speichern ....................... 113synchronisieren .............. 181testen ........................... 166testen im Browser .......... 170übertragen .............. 176, 178verwalten ............... 174, 182von anderen Websites

verlinken .................... 391Webspace ............................ 32

kostenloser ...................... 32Webstandards .................... 205Webstatistik ....................... 393

Webtabelle ........................ 254Weiterleitung ..................... 283

ändern .......................... 284entfernen ...................... 284

Widgets ............................. 300Word

importieren ................... 197Zwischenablage .............. 198

Word-HTMLoptimieren ..... 197WordPress ................. 370,371

administrieren ................ 377Beitrag schreiben ............ 378installieren .................... 372Templates ............... 371, 379Themes .......................... 382

WWW ................................. 27WYSIWYG-Darstellung ......... 75

X

XHTML(ExtensibleHypertextMarkupLanguage) ............ 42

XML ..................................... 42

Y

YouTube ............................. 402

Z

Zeileauswählen ..................... 264einfügen bei Tabelle ........ 126hinzufügen .................... 268löschen .......................... 268

Zellabstand ........................ 259Zellauffüllung ..................... 259Zelle

auswählen ..................... 264einfügen ........................ 126

Zellraum ............................ 262Zielregel ............................. 214Zitat ................................... 193Zugänglichkeit .................... 173Zurücksetzen ...................... 313Zuschneiden-Werkzeug ...... 249Zwischenablage .................. 198Zwischenspeicher ................. 94