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