Adobe Dreamweaver CS6 - ReadingSample - Beck-Shop

Galileo Design
Adobe Dreamweaver CS6
Mit Beispielwebsite zum Nachbauen
Bearbeitet von
Hussein Morsy
1. Auflage 2012. Taschenbuch. 415 S. Paperback
ISBN 978 3 8362 1890 0
Format (B x L): 17 x 23 cm
Weitere Fachgebiete > EDV, Informatik > Professionelle Anwendung > Web Graphik &
Design, Web-Publishing
schnell und portofrei erhältlich bei
Die Online-Fachbuchhandlung beck-shop.de ist spezialisiert auf Fachbücher, insbesondere Recht, Steuern und Wirtschaft.
Im Sortiment finden Sie alle Medien (Bücher, Zeitschriften, CDs, eBooks, etc.) aller Verlage. Ergänzt wird das Programm
durch Services wie Neuerscheinungsdienst oder Zusammenstellungen von Büchern zu Sonderpreisen. Der Shop führt mehr
als 8 Millionen Produkte.
Hussein Morsy
Adobe Dreamweaver CS6
Der praktische Einstieg
Auf einen Blick
Teil I Einführung
1
Ein Platz im Internet . ......................................................................
25
2
Die Sprachen des Web ....................................................................
37
3
Dreamweaver CS6 – los geht’s . .......................................................
53
4
Die Arbeitsumgebung .....................................................................
73
Teil II Ein Websiteprojekt
5
Eine neue Website ..........................................................................
89
6
Eine Vorlage anlegen .......................................................................
97
7
Seiten mit Inhalten füllen ................................................................ 111
8
Erstellen einer Navigation . .............................................................. 127
9
Das Design festlegen ....................................................................... 139
10 Websites testen, ­veröffentlichen und ­verwalten ............................... 165
Teil III Dreamweaver im Detail
11 Texte eingeben und ­strukturieren .................................................... 187
12 Arbeiten mit CSS ............................................................................ 203
13 Bilder einfügen . .............................................................................. 237
14 Tabellen erstellen ............................................................................ 253
15 Hyperlinks einsetzen ....................................................................... 271
16 Interaktivität mit JavaScript ............................................................. 285
17 Formulare erstellen ......................................................................... 303
18 Mobiles Web .................................................................................. 329
Teil IV Über Dreamweaver hinaus …
19 Dreamweaver und die ­Creative Suite ............................................... 355
20 Bloggen mit WordPress ................................................................... 369
21 Gesucht und gefunden bei Google .................................................. 383
22 Mashups – YouTube, ­GoogleMaps und Twitter integrieren ............... 401
Inhalt
Inhalt
Vorwort .................................................................................. 26
Teil I Einführung
1
1.1
Ein Platz im Internet
Wie kommt meine Site ins Internet? ........................... 26
Was ist eine Website? .................................................. 26
Ein Platz im WWW ...................................................... 27
1.2
Die eigene Domain ...................................................... 27
Was ist eine Domain? ................................................... 28
Subdomains ................................................................. 28
Top-Level-Domains ...................................................... 29
Ist meine Domain noch frei? ......................................... 29
Domains registrieren .................................................... 31
1.3
Einen Provider finden .................................................. 32
Auswahl eines Webhosters ........................................... 32
Das passende Angebot finden ...................................... 33
Brauche ich einen eigenen Webserver? ......................... 34
Wie konfigurieren Sie Ihren Webspace? ........................ 34
2
Die Sprachen des Web
2.1
Welche Sprachen gibt es? ........................................... 38
2.2
Hypertext Markup Language ....................................... 39
Strukturieren von Inhalten ............................................ 40
Tag-Attribute ................................................................ 41
HTML-Entities .............................................................. 41
Header und Body ......................................................... 41
Darstellung im Browser ................................................ 42
Extensible Hypertext Markup Language (XHTML) ......... 42
HTML5 ......................................................................... 43
5
Inhalt
2.3
Cascading Stylesheets ................................................. 44
Externe CSS-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ßendes Rasterlayout ................................................ 55
Multiscreen-Vorschau ................................................... 55
Erstellung von mobilen Applikationen .......................... 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
Ihre erste HTML-Seite erstellen ..................................... 60
Eine Website mit Hyperlinks und Bildern erstellen ........ 65
4
Die Arbeitsumgebung
4.1
Dokumentenfenster .................................................... 74
Entwurfsansicht ............................................................ 74
Live-Ansicht ................................................................. 75
Code-Ansicht ............................................................... 76
Teilen-Ansicht .............................................................. 76
Statuszeile .................................................................... 77
Der Code-Navigator ..................................................... 78
4.2
Das Eigenschaften-Bedienfeld ..................................... 79
Texteigenschaften ......................................................... 79
6
Inhalt
CSS-Eigenschaften ........................................................ 80
Bildeigenschaften ......................................................... 80
Weitere Eigenschaften .................................................. 81
Eigenschaftsfenster in zwei Darstellungen ..................... 81
4.3
Bedienfelder ................................................................ 81
Bedienfelder organisieren ............................................. 81
Bedienfelder gruppieren ............................................... 82
Das »Einfügen«-Bedienfeld ........................................... 83
4.4
Anpassen der Arbeitsumgebung ................................. 84
Arbeitsbereiche ............................................................ 84
Voreinstellungen .......................................................... 84
HTML5 voreinstellen .................................................... 85
Teil II Ein Websiteprojekt
5
Eine neue Website
5.1
Unser Beispielprojekt .................................................. 90
Beispielwebsite herunterladen ...................................... 91
Lokaler Site-Ordner ...................................................... 91
5.2
Neue Site anlegen und konfigurieren .......................... 92
5.3
Site bearbeiten oder importieren ................................ 94
Wechseln zwischen Sites .............................................. 95
6
Eine Vorlage anlegen
6.1
Vorlage entwerfen ....................................................... 98
Was ist eine Vorlage? .................................................... 98
Beispiele im Web ......................................................... 99
Vorlage planen ............................................................. 100
6.2
Ein Layout erstellen ..................................................... 101
6.3
Beispielinhalte erstellen .............................................. 104
6.4Eine Vorlage mit bearbeitbaren Bereichen e
­ rstellen .... 107
Speicherort für Vorlagen ............................................... 109
7
Inhalt
7
7.1
Seiten mit Inhalten füllen
Neue Webseite erstellen ............................................. 112
Neue Dateien aus Vorlage erzeugen ............................. 113
Seitentitel vergeben ..................................................... 115
7.2
Seiteninhalte einfügen ................................................ 116
Texte erstellen .............................................................. 117
Überschriften ............................................................... 119
Listen erstellen ............................................................. 119
Bilder einfügen ............................................................. 120
Tabellen erstellen ......................................................... 123
8
Erstellen einer Navigation
8.1
Hauptnavigation .......................................................... 128
Menüeinträge bearbeiten ............................................. 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
Das Kopf-Segment ....................................................... 141
Das Inhalts-Segment .................................................... 141
Das Fuß-Segment ......................................................... 142
9.2
Aufbau von CSS-Dateien ............................................. 142
CSS-Datei bearbeiten ................................................... 144
9.3CSS-Regeln für das Layout der ­Beispielwebsite .......... 146
Die CSS-Regel »body« .................................................. 148
Die CSS-Regel ».container« .......................................... 149
Die CSS-Regel ».header« .............................................. 151
Die CSS-Regel »h1« ...................................................... 153
Die CSS-Regel ».content« ............................................. 155
Die CSS-Regel ».sidebar1« ............................................ 155
Die CSS-Regel ».footer« ............................................... 156
8
Inhalt
CSS-Regel für die Links in der Fußzeile erstellen ........... 159
CSS-Regeln für die Navigation ...................................... 161
10 Websites testen, ­veröffentlichen und
­verwalten
10.1 Website im Browser testen ......................................... 166
Browservielfalt ............................................................. 166
Browsershots ................................................................ 167
Browservorschau einstellen .......................................... 168
Website im Browser testen ........................................... 170
Webseite im Adobe BrowserLab testen ........................ 170
Alle Hyperlinks testen ................................................... 171
Browserkompatibilität und Zugänglichkeit prüfen ......... 173
10.2 FTP-Übertragung konfigurieren ................................... 173
10.3 Übertragen der Site auf den Server ............................. 176
Übertragen über das Fenster »Dateien« ........................ 176
Übertragung im Dokumentenfenster ............................ 179
Website synchronisieren ............................................... 181
10.4 Website verwalten ...................................................... 182
Teil III Dreamweaver im Detail
11 Texte eingeben und ­strukturieren
11.1 Textinhalte erstellen .................................................... 188
Text eingeben ............................................................... 188
Sonderzeichen eingeben .............................................. 189
Leerzeichen eingeben ................................................... 190
11.2 Inhalte strukturieren ................................................... 191
Überschriften ............................................................... 191
Absätze ........................................................................ 192
Einrückungen ............................................................... 193
Vorformatierte Absätze ................................................. 194
Listen ........................................................................... 195
Hervorhebungen .......................................................... 196
9
Inhalt
11.3 Importieren aus Word ................................................. 197
Word-HTML optimieren ............................................... 197
Texte aus der Zwischenablage einfügen ........................ 198
Stylesheets und Word .................................................. 201
12 Arbeiten mit CSS
12.1 Was sind Cascading Stylesheets? ................................ 204
Vorteile von CSS ........................................................... 205
Externe und interne CSS ............................................... 205
CSS in Vorlagen einsetzen ............................................ 206
12.2 Methoden zur CSS-Erstellung ..................................... 207
12.3 CSS für Einsteiger ........................................................ 207
CSS über Seiteneigenschaften ....................................... 208
CSS über das Eigenschaften-Bedienfeld  ....................... 211
12.4 Fortgeschrittene CSS-Techniken .................................. 215
Das Fenster »CSS-Stile« ................................................ 216
Neuen CSS-Stil erstellen ............................................... 217
CSS-Stile bearbeiten ..................................................... 224
CSS-Stile-Eigenschaften ................................................ 224
Überprüfen-Modus ...................................................... 226
CSS-Regeln löschen oder deaktivieren .......................... 226
Klassen-Selektoren umbenennen .................................. 227
CSS-Stile Texten zuweisen ............................................ 227
Externe Stylesheets verknüpfen .................................... 229
Stylesheets verschieben ................................................ 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
10
Inhalt
13.3 Bilder, Platzhalter und Hintergründe ........................... 242
Bilder einfügen ............................................................. 242
Bild-Platzhalter einsetzen ............................................. 244
Bilder oder Platzhalter austauschen .............................. 245
Rollover-Bilder einsetzen .............................................. 246
13.4 Bildeinstellungen ........................................................ 246
Alternativtext eingeben ................................................ 247
Bildgröße einstellen ...................................................... 247
Bilder zuschneiden ....................................................... 249
Helligkeit und Kontrast anpassen .................................. 250
Bild scharf stellen ......................................................... 251
14 Tabellen erstellen
14.1 Tabellen für Daten und Layout .................................... 254
14.2 Verschiedene Tabellenansichten .................................. 256
Standard-Ansicht .......................................................... 256
Erweiterte Ansicht ........................................................ 256
14.3 Erstellen einer Tabelle ................................................. 257
14.4 Eigenschaften von Tabellen ......................................... 260
Tabellen markieren ....................................................... 260
Einstellungen für komplette Tabellen vornehmen ......... 262
Höhe und Breite anpassen und zurücksetzen ................ 263
14.5 Eigenschaften von Tabellenbereichen .......................... 263
Spalten, Zeilen und Zellen auswählen ........................... 264
Einstellungen für Tabellenbereiche ............................... 265
Tabellenzellen gruppieren ............................................. 266
Spalten und Zeilen hinzufügen und löschen .................. 268
14.6 Tabellen sortieren ........................................................ 269
15 Hyperlinks einsetzen
15.1 Navigieren mit Hyperlinks ........................................... 272
Funktionsweise von Hyperlinks .................................... 272
Das Wichtigste: die URL ............................................... 273
11
Inhalt
15.2 Hyperlinks anlegen in Dreamweaver ........................... 274
Externe und interne Hyperlinks .................................... 275
Links innerhalb einer Webseite ..................................... 276
Löschen von Hyperlinks ................................................ 279
15.3 Spezielle Hyperlinks anlegen ....................................... 279
Leere Links ................................................................... 279
E-Mail-Links ................................................................. 279
Imagemaps ................................................................... 281
Download-Links ........................................................... 283
Automatische Weiterleitung ......................................... 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
Funktionsweise eines Verhaltens .................................. 291
Ein Verhalten einfügen ................................................. 292
Aktionen hinzufügen .................................................... 295
Aktionen bearbeiten und löschen ................................. 296
Ereignis festlegen ......................................................... 297
16.5 Das JavaScript-Framework Spry .................................. 298
Sryp-Funktionen einfügen ............................................ 299
16.6 Widgets: Skripte übernehmen ..................................... 300
17 Formulare erstellen
17.1 Eigenschaften von Formularen .................................... 304
17.2 Erstellen von Formularen ............................................ 305
Formularbereich einrichten .......................................... 305
17.3 Formularelemente ....................................................... 306
Aufbau eines Formularelements ................................... 306
Formularelemente einfügen .......................................... 307
12
Inhalt
Einfache Textfelder ....................................................... 308
Kennwortfelder ............................................................ 309
Mehrzeilige Textfelder/Textbereich ............................... 309
Auswahllisten ............................................................... 310
Kontrollkästchen .......................................................... 311
Optionsschalter ............................................................ 312
Schaltflächen ................................................................ 313
Versteckte Felder .......................................................... 314
Dateifeld ...................................................................... 314
Feldgruppe ................................................................... 315
17.4 Formulare gestalten .................................................... 315
Formulare mit Tabellen gestalten .................................. 315
Formulare mit CSS gestalten ......................................... 316
17.5 Formularüberprüfung einbauen mit Spry .................... 322
Felder überprüfen ........................................................ 323
Eigene Fehlermeldungen festlegen ............................... 324
Spry-Überprüfungen bearbeiten ................................... 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
Wie funktioniert Responsive Webdesign? ..................... 332
Seite mit flexiblem Layout anlegen ............................... 332
Layout für mobile Geräte ............................................. 335
Layout für Tablet-Geräte ............................................... 338
Layout für Desktopgeräte ............................................. 340
18.3 Mobile Web-Apps mit jQuery Mobile ......................... 341
Charakteristika von mobilen Websites .......................... 342
Was ist jQuery Mobile? ................................................ 343
Eine Web-App mit Dreamweaver CS6 erstellen ............ 343
Neue Seite hinzufügen und verlinken ........................... 347
18.4Native mobile Apps mit PhoneGap – ein Ausblick ...... 351
13
Inhalt
Teil IV Über Dreamweaver hinaus
19 Dreamweaver und die ­Creative Suite
19.1 Die Creative Suite 6 .................................................... 356
19.2 Adobe Photoshop CS6 ................................................ 357
Photoshop-Dateien in Dreamweaver importieren ......... 357
Bilder aus der Zwischenablage einfügen ........................ 359
Bilder in Photoshop bearbeiten .................................... 360
Voreinstellungen .......................................................... 361
19.3 Adobe Fireworks CS6 .................................................. 362
Fireworks-Dateien in Dreamweaver importieren ........... 363
Bilder in Fireworks bearbeiten ...................................... 364
19.4 Adobe Flash CS6 ......................................................... 364
So funktioniert Flash .................................................... 364
Plugin erforderlich ........................................................ 365
Flash-Filme integrieren ................................................. 365
Eigenschaften von Flash ............................................... 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
WordPress installieren .................................................. 372
20.4 WordPress administrieren ........................................... 377
Einloggen im Administrationsbereich ............................ 377
Schreiben von Beiträgen ............................................... 378
Verwalten von Beiträgen .............................................. 379
20.5 WordPress-Templates .................................................. 379
Themes anpassen ......................................................... 382
14
Inhalt
21 Gesucht und gefunden bei Google
21.1 Ihre Website mit Google bekannt machen .................. 385
21.2 Tipps zur Suchmaschinenoptimierung ......................... 387
Verwenden Sie Titel und »alt«-Attribute ....................... 388
Meta-Tags ..................................................................... 389
Website von anderen Websites verlinken ..................... 391
Was Sie unbedingt vermeiden sollten ........................... 391
21.3 Besucherstatistiken mit Google Analytics ................... 392
Google Analytics einrichten .......................................... 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
15
Workshops
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
17
Workshops
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
18
Workshops
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
19
Workshops
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
20
Kapitel 5
Eine neue Website
So erstellen und konfigurieren Sie
eine neue Website
EE
Welches Beispielprojekt wird im Buch erstellt?
EE
Was ist der Unterschied zwischen einer Website und einer
Webseite?
EE
Wie lege ich eine neue Site an?
EE
Wie importiere ich bestehende Websites?
5
Eine neue Website
5 Eine neue Website
BevorSieendlichmitderErstellungderWebseitenloslegenkönnen, müssen Sie eine neue Site anlegen. Dieses Kapitel zeigt
Ihnen,wiedasgeht.
5.1 Unser Beispielprojekt
In diesem Buch entwickeln wir von der Erstellung der Site bis
zurRealisierungderInhaltedurchgängigeinBeispielprojekt.Das
BesondereandiesemBeispielprojektist,dassessichumeinereale
Website handelt, die sogar tatsächlich online ist. Sie erreichen
sie unter http://www.djay-software.com. Da die Website ständig
aktualisiert wird, weicht das Übungsprojekt des Buchs von der
aktuellenWebsiteab.EshandeltsichumeineSiteübereineDJSoftwarezumvirtuellenAuflegenvonMusik.
Abbildung 6.1 E
HomepageunsererBeispielsitehttp://www.djay-software.com
90
Unser Beispielprojekt 5.1 Das Beispielprojekt ist für diejenigen unter Ihnen gedacht, die
noch keine eigenen Grafiken und Inhalte haben, dennoch aber
eine vollständige Website erstellen möchten. Sie müssen aber die
Website nicht einfach stur kopieren – lassen Sie sich auch von
Ihren eigenen Ideen inspirieren.
Beispielwebsite herunterladen
Damit Sie das Beispielprojekt auch selbst auf Ihrem Rechner nachvollziehen können, können Sie sich sämtliche Dateien der Beispielsite von http://www.dreamweaver-buch.de/uebungen herunterladen.
Dort werden Ihnen unter anderem zwei Download-Dateien
angeboten:
EE »djay_bilder.zip«: enthält nur Bilder, um die Website als Übung
zu erstellen
EE »djay_fertig.zip«: enthält die fertige Website mit allen Dateien
(HTML, Bilder usw.)
Zuerst werden wir eine neue Website erstellen (genannt djay
Übungen), die zunächst noch keine Dateien enthält. Die heruntergeladenen Dateien sollten separat und zunächst nicht im Ordner
der Website abgelegt werden, da Bilder beim Einfügen in Dreamweaver automatisch in den Ordner der Website kopiert werden.
Des Weiteren werden wir eine neue Website anlegen (genannt
djay Fertig), die bereits die fertige Website enthält. Damit können
Sie leichter nachvollziehen, wie das Beispielprojekt erstellt wurde,
und die Site mit Ihren eigenen Übungen vergleichen.
Lokaler Site-Ordner
In Dreamweaver wird der Ordner, in dem die Site gespeichert
wird, als lokaler Site-Ordner bezeichnet. Dabei wird zwischen
einem lokalen und einem entfernten Site-Ordner unterschieden. Der lokale Site-Ordner ist der Ordner, der auf Ihrer Festplatte
gespeichert ist, wohingegen der entfernte Site-Ordner auf Ihrem
Webserver liegt.
Site oder Seite?
Eine Seite bzw. Webseite
bezeichnet immer eine
einzelne (HTML-)Seite.
Für alle Seiten gemeinsam gibt es genau eine
Startseite, die Homepage
genannt wird.
Eine Site bzw. Website
bezeichnet den gesamten
Internetauftritt mit allen
Webseiten und sonstigen
Elementen, wie zum Beispiel Grafiken und FlashFilmen.
91
5
Eine neue Website
5.2 Neue Site anlegen und konfigurieren
Zur Vorbereitung sollten Sie einen Ordner anlegen, der alle
(zukünftigen)Websites,dieSieerzeugenwerden,enthält.ErstellenSiedazueinenOrdnerWebsitesimOrdnerEigeneDateien.
UnterMacOSXliegtdafürbereitseinOrdnernamensWeb-Sites
oderSitesinIhremHome-Verzeichnis.Nunkannesendlichmit
derErstellungderSitelosgehen.
Schritt für Schritt
Leere Site erstellen
1
Abbildung 6.2 H
DieGrundeinstellungen
Neue Site
Wählen Sie zuerst den Menüpunkt Site N Neue Site. Alternativ
könnenSieauchdenMenüpunktSiteNSitesverwaltenaufrufen
undanschließendaufNeueSiteklicken.
a
b
c
2
Site-Definition
AufgrunddervielfältigenEinstellmöglichkeitenfüreineSitesind
dieMenüsinverschiedeneKategorienunterteilt.Siefindendiese
aufderlinkenSeite.DieKategorieSite1istanfangsausgewählt.
GebenSieimFeldSite-Name 2einenpassendenNamenfür
IhreWebsitean(z.B.»djayÜbungen«fürunserBeispielprojekt).
SiedürfenLeerzeichenundUmlauteverwenden.DerNameder
SiteistfürdenBetrachterderWebsitenichtsichtbar.
UnterLokalerSite-OrdnerlegenSiedenOrdnerfest,indem
IhreSitegespeichertwird.KlickenSiedazuaufdasOrdnersymbol
3rechtsnebendemTextfeld.EserscheinteinDialogfenster,in
demSiedenOrdnerfestlegenkönnen.WählenSieunterWindows
92
Neue Site anlegen und konfigurieren
5.2
denOrdnerEigeneDateien/Websitesbzw.unterMacOSXden
OrdnerSitesaus,understellenSiedaruntereinenneuenOrdner,
derähnlichbenanntistwieIhrSite-Name.HiersolltenSiekeine
Leerzeichen und Umlaute verwenden, sondern nur Buchstaben,
Zahlen,UnterstricheundBindestriche.FürunserBeispielprojekt
wählenwirbeispielsweise»djay_uebungen«.GewöhnenSiesich
auchan,ausschließlichKleinbuchstabenzuverwenden.
3
Bilderordner festlegen
AlsNächsteslegenwirdenStandard-Bilderordnerfest.Dasist
derOrdner,indemimportierteBilderautomatischabgespeichert
werden.UmdenOrdneranzulegen,wählenSieaufderlinkenSeite
unterErweiterteEinstellungendieKategorieLokaleInfoaus
undklickenaufdasOrdnersymbol4rechtsnebendemTextfeld.
Abbildung 6.3
DieerweitertenEinstellungen
H
d
e
f
g
EserscheinteinDialogfenster,indemSiedenBilderordnerfestlegenkönnen.WählenSiedazudenebenerstelltenSite-Ordner
aus,undlegenSieeinenneuenOrdnermitdemNamenimages
an.SiekönnenaucheinenanderenNamenwiezumBeispielbilder
wählen. Für die Schreibweise des Bilderordners gelten die gleichenRegelnwiefürdenlokalenSite-Ordner.
4
Weitere Einstellungen unter Lokale Info
FallsSiebereitseineWebadresse(URL)fürIhreSitebesitzen,könnenSiesieunterWeb-URL5eintragen.Diesistabernichtzwin93
5 Eine neue Website
gend erforderlich. Eine mögliche Eingabe ist zum Beispiel »http://
www.djay-software.com«.
Die Option Gross-/Kleinschreibung bei Hyperlinks überprüfen 6 sollten Sie aktivieren werden, damit bei der Überprüfung
der Hyperlinks die Groß-/Kleinschreibung beachtet wird. Dies
gewährleistet, dass die Hyperlinks auf den Webservern (meist
UNIX/Linux-Serversysteme) korrekt funktionieren.
Außerdem sollte die Option Cache aktivieren 7 auf jeden Fall
aktiv sein, damit die Dateien der Website, an der Sie arbeiten,
immer schnell aus dem Zwischenspeicher dargestellt werden.
5.3 Site bearbeiten oder importieren
Möchten Sie eine fertige Website, z. B. unsere Beispielwebsite, in
Dreamweaver bearbeiten, müssen Sie eine neue Site erstellen.
Es klingt merkwürdig, dass man in Dreamweaver eine neue Site
auch dann erstellen muss, wenn man eine bereits vorhandene
Website bearbeiten will. Das Erstellen einer neuen Site bedeutet
in Dreamweaver lediglich, dass ein neues Projekt angelegt wird,
in dem unter anderem der Ordner gespeichert wird, in dem sich
die Dateien befinden. Dieses Verzeichnis muss nicht leer sein und
kann auch bereits eine komplette Website enthalten.
Dieser Schritt ist auch dann sinnvoll, wenn Sie eine bestehende
Website als Musterlösung benutzen möchten bzw. wenn Sie eine
in einem anderen Programm erstellte Website in Dreamweaver
importieren möchten. Denn bevor Sie eine noch nicht in Dreamweaver angelegte Website bearbeiten, müssen Sie auch eine neue
Site erstellen.
Schritt für Schritt
Eine neue Site aus einer fertigen Website erstellen
1 Fertige Website laden
Laden Sie zuerst von der Webseite http://www.dreamweaver-buch.
de/uebungen/ die Datei »djay_fertig.zip« herunter. Entpacken Sie
diese mit WinZip oder einem anderen ZIP-Tool, und kopieren Sie
94
Site bearbeiten oder importieren 5.3 den Ordner djay _ fertig in einen neuen Ordner unterhalb von
Eigene Dateien/Websites (Windows) bzw. unter Mac OS X in den
Ordner Web-Sites (oder Sites).
2 Eine neue Site anlegen
Legen Sie jetzt, wie bereits beschrieben, unter Site N Neue eine
neue Site an. Geben Sie im Feld Site-Name einen passenden
Namen für Ihre Website an (z. B. »djay Fertig« für unser bereits
fertiges Beispielprojekt).
Klicken Sie auf das Ordnersymbol in der Zeile Lokaler SiteOrdner, und wählen Sie den Ordner aus, in den Sie die fertige
Website verschoben haben. Weitere Einstellungen sind zunächst
nicht notwendig. Klicken Sie auf OK, um die Site anzulegen.
Wechseln zwischen Sites
Sie haben jetzt zwei Sites erstellt: eine leere Site, in der Sie Ihre
Übungen durchführen können, und eine weitere Site, in der sich
das bereits fertige Projekt befindet. In Dreamweaver ist jedoch
immer nur eine Site aktiv. Beim Erstellen neuer Webseiten wird
automatisch der lokale Site-Ordner der aktiven Site zum Speichern gewählt. Beim Einfügen von Bildern werden auch die Bilddateien (ohne Abfrage) automatisch in den Ordner images des
lokalen Site-Ordners der aktiven Site kopiert, falls Sie diesen beim
Erstellen der Site dafür angegeben haben.
Wenn Sie später neue Vorlagen und Webseiten erstellen, ist es
sehr wichtig zu wissen, welche Website jeweils aktiv ist, da sonst
die Dateien unbeabsichtigt in der falschen Site landen können.
Überprüfen Sie daher immer, in welcher Site Sie momentan arbeiten.
Im Bedienfeld Dateien (Menü Fenster N Dateien) werden alle
Dateien der aktiven Website angezeigt. Klicken Sie auf das Dreieck 2 (Abbildung 6.4) neben dem Ordnersymbol, um den Inhalt
des Ordners anzeigen zu lassen. In der Liste 1 erkennen Sie, welche Site momentan aktiv ist.
95
5
Eine neue Website
a
b
Abbildung 6.4 E
DateienderSitedjayFertig
UmeineandereSite(z.B.djayÜbungen)zubearbeiten,wählenSie
inderListe3dieentsprechendeSiteaus.
c
Abbildung 6.5 E
DasWechselnzueineranderenSiteerfolgtüberdasListenfeld.
DadieSitedjayÜbungennochnichtüberfertigerstellteWebseitenverfügt,wirddarinnurderOrdnerimagesangezeigt.
Abbildung 6.6 E
AnsichtdernochleerenSite
djayÜbungen
Details dazu, wie Sie Dateien umbenennen, löschen, kopieren
und verschieben, erfahren Sie in Kapitel 10, »Websites testen,
veröffentlichenundverwalten«.
96
Kapitel 16
Interaktivität mit JavaScript
So bringen Sie mit JavaScript
Bewegung in Ihre Website
EE
Wie programmiert man JavaScript?
EE
Wie erstelle ich eigene Skripte in Dreamweaver?
EE
Wie verwalte ich JavaScript in Dreamweaver?
EE
Was ist eigentlich dieses Spry?
16 Interaktivität mit JavaScript
16 Interaktivität mit JavaScript
JavaScript ist die Programmiersprache Nummer eins, wenn es
darum geht, Webseiten interaktiv zu machen. Mit ihr können Sie
Rollover-Bilder einfügen, neue Browserfenster in festen Größen
öffnen und komplette Pulldown-Menüs anlegen. Adobe stellt
Ihnen dafür verschiedene Möglichkeiten zur Verfügung, die Sie in
diesem Kapitel kennenlernen werden.
16.1 Wie funktioniert JavaScript?
Ereignisse in JavaScript
JavaScript-Code kann
nicht nur durch einen
Klick (onClick) auf einen
Hyperlink ausgelöst werden, sondern auch, wenn
eine Webseite geladen
(onLoad) oder geschlossen (onUnload) wird. Es
ist sogar einstellbar, dass
JavaScript allein durch
eine Mausberührung aktiviert wird (onRollover).
286
JavaScript ist eine Programmiersprache, die einfach in den HTMLCode eingefügt wird. Stellen Sie sich ein solches Skript als eine
Ansammlung von verschiedenen Befehlen vor, die durch einen
Klick auf einen Hyperlink oder ein anderes Ereignis ausgelöst und
abgearbeitet werden.
JavaScript kann zwar auch mit anderen Ereignissen zusammenarbeiten, wir beschränken uns in diesem Kapitel jedoch ausschließlich auf Aktionen, die durch Hyperlinks ausgelöst werden.
JavaScript in Verbindung mit Formularen behandeln wir in Kapitel
17, »Formulare erstellen«.
Seit der Integration des JavaScript-Frameworks Spry ist es in
Dreamweaver möglich, sehr ansprechende Benutzeroberflächen, wie zum Beispiel ausklappbare Menüs, zu erstellen (siehe
Abschnitt 16.5, »Das JavaScript-Framework Spry«).
Es gibt in Dreamweaver verschiedene Techniken, JavaScript in
eine Seite einzubauen:
EE Über das Feld Hyperlink können Sie im EigenschaftenBedienfeld direkt kurze JavaScript-Befehle eingeben, die ausgeführt werden, wenn der Benutzer auf den Hyperlink klickt.
Eine Aufzählung der möglichen Kommandos finden Sie im
nächsten Abschnitt.
EE Über das Menü Einfügen stehen Ihnen mehrere Menüpunkte
zur Verfügung, die automatisch Skripte in Ihre Webseite inte-
JavaScript im Eigenschaften-Bedienfeld 16.2
E
E
E
grieren.ImEinzelnensinddiesdieBefehleEinfügenNGrafikobjekteNRollover-Bild,EinfügenNGrafikobjekteNNavigationsleiste und Einfügen N Formular N Sprungmenü (siehe
Kapitel 17, »Formulare erstellen«) für auf der Seite aufklappendeNavigationsmenüs.
Über Fenster N Verhalten können Sie über 25 JavaScriptFunktionen auswählen und in Ihre Webseite integrieren.
JavaScript-Kenntnisse sind hierfür nicht erforderlich. Als Beispiel werden wir in diesem Kapitel einen Link erstellen, der
ineinemneuenFenstereineWebseitemitfestgelegterBreite
undHöheöffnet.
MitdemEinfügen-BedienfeldimReiterSprystehenIhnen13
Funktionen zur Verfügung, mit denen Sie zum Beispiel ausklappbareMenüsinIhreWebseiteeinfügenkönnen.
Im Internet finden Sie Tausende selbstgeschriebene Skripte,
sogenannte Widgets, die Sie in Ihre Webseite übernehmen
können. Bevor Sie ein solches einsetzen, prüfen Sie jedoch
immer,obDreamweavernichtschoneineneingebautenBefehl
fürdenZweckbesitzt.
Netscape Resize-Fix
ImMenüBefehlebefindetsichdasKommando
NetscapeResize-Fixhinzufügen/entfernen,das
JavaScript-Codezum
AusgleicheneinesFehlers
inNetscapeVersion4
hinzufügtbzw.wieder
entfernt.DiesenBefehl
brauchenSienormalerweisenichtaufzurufen,
daDreamweaverihn
selbständiginIhreSeite
einfügt.
16.2 JavaScript im Eigenschaften-Bedienfeld
BeidereinfachstenMethode,JavaScriptdirektinderWebseitezu
programmieren,tragenSiedenJavaScript-CodedirektimEigenschaften-Bedienfeldein.
Um zum Beispiel einen Link zu erstellen, der beim Anklicken
einneues(JavaScript-)FenstermiteinerkurzenNachrichtanzeigt,
markierenSieeinfacheinenTextodereinBildimDokumentenfensterundgebenfolgendenJavaScript-BefehlimFeldHyperlink
ein:JavaScript:alert('HalloWelt');.
Abbildung 16.1
HyperlinkmitJavaScript,
umeinkleinesFenster
miteinerNachricht
anzuzeigen
F
287
16
Interaktivität mit JavaScript
Sie können die Seite nun entweder in einem Webbrowser oder
direktinDreamweavermitderLive-Ansichttesten.
Abbildung 16.2 E
JavaScript-Beispielmitder
Live-AnsichtinDreamweaver
Syntax von JavaScript
DerTextJavaScript:ist
erforderlich,damitder
BrowserdenBefehlhistory.back()überhaupt
alsJavaScript-Funktion
erkennt.DasSemikolon
trenntmehrereBefehle
voneinander.Beinur
einemBefehlwiein
unseremBeispielistdas
Semikolondahernicht
erforderlich.
InderfolgendenTabellefindenSieweiterenützlicheJavaScriptBefehle,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);
FensterinEckeobenlinks
bewegen
JavaScript:window.moveBy(10,-5); Fensterum10Pixelnach
rechtsund5Pixelnachoben
bewegen
To(400,200);
Fenstergrößeauf400×200
Pixeleinstellen
JavaScript:window.print();
aktuellesFensterdrucken
JavaScript:window.resize-
Tabelle 16.1
JavaScript-BefehlefürdasEigenschaften-Bedienfeld
G
288
JavaScript über Menüs einfügen 16.3
16.3 JavaScript über Menüs einfügen
Im Menü Einfügen N Grafikobjekte finden Sie mit RolloverBildundNavigationsleistezweibereitsinDreamweavervorgefertigte Skripte. Sie können diese einfach per Mausklick in Ihre
Webseite einfügen. Mit dem Befehl Einfügen N Grafikobjekte N
NavigationsleistekönnenSiemehrereRollover-Bilderaufeinmal
erstellen,zumBeispiel,umeinMenüaufzubauen.EineNavigationsleisteistnurfürdenEinsatzvonFramessinnvoll.
EinRollover-Bild isteineGrafik,diebeiMausberührungdurch
einanderesBildausgetauschtwird.VerlässtderMauszeigerdas
Bild,wirdwiederdasursprünglicheBildangezeigt.DiesesVerhaltenwirdauchalsHover-Effektbezeichnet.
Für die Erstellung eines Rollover-Bildes benötigen Sie zwei
exakt gleich große Grafiken. Zudem ist ein Skript nötig, das die
Bildergegeneinanderaustauscht.DreamweavererstelltdenCode
automatisch,wennSieEinfügenNGrafikobjekteNRollover-Bild
wählen.
Schritt für Schritt
Rollover-Bild einfügen
1
Einfügemarke setzen
SetzenSie,wiebeimEinfügeneinesnormalenBildes,zunächstdie
EinfügemarkeandiePositionimEntwurfsbereich,anderdasBild
späterangezeigtwerdensoll.
2
Rollover-Bild einfügen
WählenSieEinfügenNGrafikobjekteNRollover-Bild.DasDialogfensterausAbbildung16.3öffnetsich.
a
b
c
d
e
f
Abbildung 16.3
SofügenSieeinRollover-Bild
ein.
F
289
16
Interaktivität mit JavaScript
GebenSieunterBildname 1eineneindeutigenNamenfürden
Button ein. Der Bildname ist für den Betrachter der Webseite
unsichtbar; er wird nur benötigt, damit das Rollover-Verhalten
vonDreamweaverautomatischmitJavaScriptprogrammiertwerdenkann.
Als Originalbild 2 wählen Sie jenes Bild aus, das angezeigt
werdensoll,wennsichderMauszeigernichtüberdemBildbefindet. Als Rollover-Bild 3legenSiedasBildfest,dasangezeigt
werdensoll,wennsichderMauszeigerüberdemBildbefindet.
Das Kontrollkästchen Rollover-Bild vorausladen 4 sollte
aktiviert sein, damit das Rollover-Bild bereits beim Laden der
Webseitemitgeladenwird.DadurchkommtesbeidemEffektzu
keinerVerzögerung.
GebenSiejetztnocheinenAlternativtext5fürdasBildein,
damit Nutzer, bei denen das Bild nicht angezeigt werden kann,
wissen,womitsieeszutunhaben.FüreinenHome-ButtonkönntenSiezumBeispiel»HiergehteszurHomepage«eingeben.
UmdasRollover-Bildzuverlinken,klickenSieaufdieSchaltfläche Durchsuchen in der Zeile Wenn angeklickt, gehe zu URL
6 . Wählen Sie dann im Dialogfenster die Webseite aus, zu der
verlinktwerdensoll.
3
Vorschau im Browser
ImBrowseroderinderLive-AnsichtvonDreamweaverkönnenSie
denEffektdanntesten.
Abbildung 16.4 E
DerEffektimTest
16.4 JavaScript über Verhalten integrieren
DaszentraleFensterzumVerwaltenundautomatischenErstellen
von JavaScript ist das Bedienfeld Verhalten (zu erreichen auch
überFenster NVerhalten).DarinfindensichfertigeSkripte,die
290
JavaScript über Verhalten integrieren 16.4
inDreamweaverVerhaltengenanntwerden.Dreamweaverbietet
über25Verhalten,dienochdurchsogenannteExtensionserweiterbarsind.AnhandeinesRollover-Bildeserläuternwirnun,was
Verhaltengenausindundwiesiefunktionieren.
Funktionsweise eines Verhaltens
VerhaltensindimmerObjektenzugeordnet,diedasSkriptauslösenkönnen.MöglicheObjektesindTextemitHyperlinks,Bilder
mitHyperlinksoderaucheineWebseiteselbstmitHyperlinks.
UmfürunserBeispieleinsolchesObjektzuerzeugen,erstellenSie,wieimletztenAbschnittbeschrieben,einRollover-Bild.
Um die zugeordneten Verhalten anzuzeigen, klicken Sie auf das
Rollover-Bild im Dokumentenfenster und öffnen das Bedienfeld
Verhalten.FallsdasBedienfeldnichtsichtbarist,wählenSieim
MenüFenster·Verhaltenaus.
DasBedienfeldVerhaltenbestehtauszweiSpalten.Indererstenwerdendie Ereignisseundinderzweitendiedamitverbundenen Aktionen angezeigt. Für das Rollover-Bild werden zwei
Verhaltenangeboten.DasuntereenthältdieAktionBildaustauschen.DasauslösendeEreignisfürdieseAktionist<A>onMouseOverundbedeutet,dassdieAktionBildaustauschennurausgeführt wird, wenn sich die Maus über (onMouseOver)einemLink
(<A> -Tag)befindet.
IndemzweitenVerhaltenwirddieAktionBildaustauschwiederherstellen ausgeführt, wenn das Ereignis <A> onMouseOut
zutrifft.Dasbedeutet,dassbeimHerausfahren(onMouseOut)des
MauszeigersausdemLink(<A> -Tag)wiederdasursprünglicheBild
erscheint.
WiewirimBeispielgesehenhaben,bestehteinVerhaltenaus
dreiElementen:
1. Objekt
DasObjektistzumBeispieleinHyperlink-TextodereinHyperlink-Bild. Sie müssen keine normalen Links verwenden, die
zu einer anderen Webseite verweisen, sondern können auch
leereLinkseinsetzen,indenenanderStellederURLeinRautenzeichensteht.JedemObjektkönnenSieeineodermehrere
Aktionenzuordnen.
Abbildung 16.5
ImBedienfeldVerhaltenverwaltenSieJavaScript-Funktionen.
G
291
16
Interaktivität mit JavaScript
2. Aktion
Aktionen (auch Verhalten genannt) sind vorgefertigte JavaScript-BefehleinDreamweaver.MöglicheAktionenfindenSie
imBedienfeldVerhalten,darunterzumBeispielBildaustauschen,BrowserfensteröffnenundSoundabspielen.
3. Ereignis
Ereignisse legen fest, wodurch eine Aktion ausgelöst wird.
EinEreigniskanneinKlick(onClick)aufeinObjektodereine
Mausberührungsein(onMouseOver).
Ein Verhalten einfügen
WirwerdennuninDreamweaverdasVerhaltenBrowserfenster
öffnenineineSeiteeinbauen.DamitwirdnacheinemKlickauf
einenHyperlinkeineWebseiteineinemneuenFenstergeöffnet.
Schritt für Schritt
Seite in neuem Fenster öffnen
1
Die beiden Webseiten erstellen
ErstellenSieeineHTML-Datei(»bild_klein.html«)miteinemkleinenBildundeineHTML-Datei(»bild_gross.html«)miteinemgroßenBild.
Abbildung 16.6 E
EineSeiteimneuenFenster
öffnen
292
JavaScript über Verhalten integrieren 16.4
2
Leeren Link erstellen
ÖffnenSienundieSeite»bild_klein.html«,vonderausdieWebseite»bild_gross.html«geöffnetwerdensoll.
Markieren Siedann einen Text oder ein Bild 1 ,mitdemdas
Fenstergeöffnetwerdensoll,understellenSieeinenleerenLink,
indemSieimEigenschaften-BedienfeldunterHyperlink 2nur
dasRautenzeichen#eingeben.
Abbildung 16.7
DieHTML-Dateifürdas
kleineBild
H
a
b
3
Verhalten im Bedienfeld auswählen
Klicken Sie im Bedienfeld Verhalten auf das Symbol mit dem
Pluszeichen,undwählenSieausderaufklappendenListeBrowserfensteröffnenaus.
Abbildung 16.8
HierlegenSiedasVerhalten
fest.
F
4
Einstellungen für Verhalten vornehmen
NachderAuswahldesVerhaltensöffnetsicheinFenster,indem
SiefolgendeEinstellungenvornehmenkönnen.
293
16
Interaktivität mit JavaScript
Abbildung 16.9 E
GebenSiehierdieURLder
Dateiein,dieangezeigtwerdensoll.
GebenSieunterURLanzeigenentwedereineURLein,oderklickenSieaufDurchsuchen,uminIhrerSiteeineSeiteauszuwählen,dieindemneuenFenstergeöffnetwerdensoll.Inunserem
Fallmussauf»bild_gross.html«verlinktwerden.
Tragen Sie unter Fensterbreite und Fensterhöhe die Maße
desneuenFenstersinPixelnein.WennSiekeinesderAttribute
auswählen,wirddasneueFensterohneMenüleiste,Symbolleiste
usw. angezeigt. Wenn Sie dem Benutzer ermöglichen möchten,
dieGrößedesFensterszuverändern,aktivierenSieGrössenänderungsgriffe.KlickenSieaufOK,umdasVerhaltenindieWebseitezuintegrieren.
5
Ereignis »onClick« auswählen
ImBedienfeldVerhaltenmüssenSienunnochdasEreignisfestlegen,beidemdasneueFenstergeöffnetwerdensoll.
InunseremBeispielsollsichdieWebseitebeieinemKlickauf
den Hyperlink – also auf das Bild oder den darunter stehenden
Text–öffnen.WählenSiedaherausderlinkenSpaltedasEreignis
onClickaus.
Abbildung 16.10 E
ÄnderungenkönnenSieper
Doppelklickvornehmen.
6
Verhalten testen
Das Verhalten ist nun aktiviert, und Sie können es bereits im
Dokumentenfenster oder im Webbrowser testen. Wenn Sie die
294
JavaScript über Verhalten integrieren 16.4
ÄnderungeninderLive-Vorschaudurchführen,müssenSieinder
neuen Dreamweaver-Version unter Windows die (Strg)-Taste
bzw.dieTaste (°)aufdemMacbeimKlickaufdasBildfesthalten.DiesistimmerdanninDreamweavererforderlich,wenneine
andereWebseitegeöffnetwird.
7
Änderungen vornehmen
UmÄnderungenamVerhaltendurchzuführen,markierenSieden
Link und klicken im Bedienfeld Verhalten doppelt auf das entsprechendeVerhalten.
Aktionen hinzufügen
WirwerdenunsindiesemAbschnittanschauen,welcheAktionen
SieinDreamweavereinemHyperlinkzuweisenkönnen.Wählen
Sie daher zuerst einen Hyperlink auf einer beliebigen Seite aus,
odererstellenSieeinenneuenmiteinerURLodereinemRautenzeichenalsZielangabe.
Im Bedienfeld Verhalten können Sie durch Klicken auf das
PlussymbolverschiedeneJavaScript-Aktionenzuweisen.
Abbildung 16.11
AuswahlvonAktionenüber
dasMenü
F
295
16 Interaktivität mit JavaScript
Manuell JavaScript
eingeben
In Dreamweaver CS6
können Sie JavaScriptFunktionen im Bedienfeld
Verhalten auch von
Hand eingeben. Tragen
Sie dazu an der Stelle, an
der normalerweise die
Aktion steht, einen
­eigenen JavaScript-­
Befehl ein, zum Beispiel
window.close();, um ein Fenster zu schließen.
Einige Punkte sind grau hinterlegt. Diese Menüpunkte sind dann
mit dem aktuell ausgewählten Objekt nicht verwendbar. Die
Aktion Formular überprüfen ist zum Beispiel deshalb nicht
anwählbar, weil kein Formular, sondern ein Hyperlink als Objekt
ausgewählt wurde.
In der folgenden Tabelle erläutern wir die wichtigsten Aktionen
in Dreamweaver.
Aktion
Bedeutung
Bild austauschen
Tauscht ein Bild gegen ein anderes aus.
Bildaustausch wiederherstellen
Macht den Tausch eines Bildes wieder
rückgängig.
Bilder vorausladen
Lädt eines oder mehrere Bilder, ohne sie
anzuzeigen. Wird in Verbindung mit der
Aktion Bild austauschen verwendet.
Browserfenster öffnen
Öffnet eine URL in einem neuen Browserfenster mit einstellbarer Fenstergröße.
Formular überprüfen
Prüft vor dem Versenden, ob ein Formular
korrekt ausgefüllt wurde.
Gehe zu URL
Wird in framebasierten Websites verwendet, um nach Klick auf einen Hyperlink
mehr als nur einen Frame zu aktualisieren.
Plug-In überprüfen
Hiermit können Sie zum Beispiel überprüfen, ob das Flash-Plugin im Browser des
Besuchers installiert ist.
Popup-Meldung
Öffnet ein Fenster mit einem einstellbaren
Text.
G Tabelle 16.2
Die wichtigsten Aktionen in Dreamweaver
Aktionen bearbeiten und löschen
Um eine bestehende Aktion zu bearbeiten, klicken Sie im Bedienfeld Verhalten doppelt auf deren Namen. Es öffnet sich dann ein
Fenster, in dem Sie die Einstellungen ändern können.
296
JavaScript über Verhalten integrieren 16.4
Abbildung 16.12
DialogfensterfürEinstellungenzurAktionBrowserfensteröffnen
F
berdieSchaltflächemitdemMinuszeichenimBedienfeldVerÜ
haltenlöschenSieeinVerhalten.
Ereignis festlegen
Wenn Sie auf ein vorhandenes Ereignis klicken, erscheint im
BedienfeldVerhalteneineListeallermöglichenEreignisse.Wählen Sie aus der Liste ein Ereignis aus, das das Verhalten eines
Objektsauslösensoll.
Tabelle 16.3 erläutert die wichtigsten Ereignisse. Mit ihnen
könnenSiedieobengenanntenVerhaltenauslösen.
Ereignis
Bedeutung
onClick
MausklickaufObjekt
onDblClick
DoppelklickaufObjekt
onMouseDown
MaustasteistaufdemObjektgedrückt.
onMouseOut
MauszeigerbefindetsichaußerhalbdesObjekts.
onMouseOver
MauszeigerbefindetsichaufdemObjekt.
onMouseUp
MaustastewirdüberdemObjektlosgelassen.
onAbort
WebseitewirddurchSchließendesBrowserfenstersoderKlickenaufeinObjektverlassen.
onLoad
WebseiteistvollständigimBrowsergeladen.
Abbildung 16.13
LöscheneinesVerhaltens
G
Abbildung 16.14
WählenSieausderListeein
gewünschtesEreignisaus.
G
Tabelle 16.3
DiewichtigstenEreignisse
G
297
16
Interaktivität mit JavaScript
16.5 Das JavaScript-Framework Spry
Abbildung 16.15 H
MitderInternetanwendung
GoogleText&TabellenkönnenSieExcel-Tabellenim
Browserbearbeiten.
Weiter oben haben Sie gesehen, wie Sie einfache JavaScriptBefehlezumBeispielzumÖffnenvonneuenSeitenineineWebseiteeinbauen.MitJavaScriptkönnenSieaberauchkomplexere
Aufgabenrealisieren,wieetwaPulldown-MenüsoderaufklappbareBereiche.
MithilfevonAjax(sieheAbschnitt2.5,»Ajax«)istessogarmöglich,komplexeInternetanwendungenzuprogrammieren,diesich
ähnlich wie richtige Programme bedienen lassen. Ein bekanntes
BeispielhierfüristGoogleText&Tabellen(http://docs.google.com
und http://spreadsheets.google.com). Auf diesen Webseiten könnenSiedirektinIhremWebbrowserTexteundTabellenbearbeiten,ohnedassWordoderExcelaufdemeigenenRechnerinstalliertseinmüssen.
UmsolcheAnwendungenzurealisieren,sindkomplexeJavaScriptBefehlenotwendig.AufgrunddervielenunterschiedlichenBrowser
298
Das JavaScript-Framework Spry 16.5 und Inkompatibilitäten ist es selbst für erfahrene Programmierer
schwer, in JavaScript zu programmieren. Daher gibt es sogenannte JavaScript-Bibliotheken, die die Programmierung erheblich vereinfachen, indem zum Beispiel mehrere komplexe Befehle
zu einem einfachen Kommando zusammengefasst werden. Diese
JavaScript-Bibliotheken werden auch JavaScript-Frameworks
genannt. Es existiert inzwischen eine Reihe von verschiedenen
JavaScript-Frameworks, die im Prinzip alle die Programmierung
vereinfachen, aber ganz unterschiedliche Ansätze haben.
Auch Adobe hat mit Spry ein eigenes JavaScript-Framework
entwickelt, das direkt in Dreamweaver CS6 integriert ist. Dadurch
ist es in Dreamweaver CS6 recht schnell und einfach möglich,
selbst komplexe dynamische Benutzeroberflächen visuell zu entwerfen.
Sryp-Funktionen einfügen
Mit den sogenannten Spry-Widgets können Sie die benötigten
Spry-Funktionen über das Einfügen-Bedienfeld in Ihre Webseite
einbinden. Die Widgets kann man in drei Gruppen unterteilen.
a
b
c
F Abbildung 16.16
Spry-Widgets binden Sie über
das Einfügen-Bedienfeld ein.
299
Index
Index
1&1 Internet AG ................... 33
1-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ängige Dateien übertragen ...................... 180
Absatz
HTML ............................ 192
vorformatierter in HTML . 194
Absatz (HTML-Tag) ................ 40
Absoluter Link . ................... 275
Acrobat Reader ................... 283
Adobe Fireworks CS6 . ........ 362
Adobe Flash CS6 . ............... 364
Adobe Photoshop CS6 ........ 357
Ajax .............................. 47, 298
Ajax-Framework . .................. 47
Aktion . ............................... 292
bearbeiten ...................... 296
entfernen ....................... 297
hinzufügen ..................... 295
Aktive Site ............................ 95
Aktualisieren ............... 137, 183
Aktualisierung ....................... 76
ALL-INKL.COM . ................... 33
alt-Attribut . ........................ 388
Alternativtext ........ 69, 121, 247
Ankerpunkt . ....................... 276
Ansicht, erweiterte . ............ 256
Ansichtsmodi ........................ 74
Anzeigen . ........................... 396
App für Apples AppStore bereitstellen .................... 352
Arbeitsbereiche
zusammenstellen . ............. 84
Arbeitsbereichlayout ............. 84
Arbeitsumgebung anpassen . 84
Attribut . ............................... 41
Auswahlliste . ...................... 310
Auszeichnungssprache .......... 39
B
Banner .................................. 98
Barrierefreiheit ............ 205, 260
Bearbeitbarer Bereich . ........ 115
Bedienfeld ............................ 81
Dateien ............................ 95
Eigenschaften ................... 79
gruppieren . ...................... 82
Bedienfeldgruppe . .......... 81, 82
Beispielprojekt ...................... 90
Besucherstatistik ................. 392
Bild
austauschen . ........... 245, 296
CSS ................................ 244
einfügen ..... 68, 83, 120, 121,
242
Einstellungen .................. 246
Helligkeit . ...................... 250
in Fireworks bearbeiten . 364
in Photoshop bearbeiten . 360
Kontrast ......................... 250
neu auflösen ................... 122
nicht angezeigtes ............ 166
Platzhalter einfügen ........ 244
Proportionen .................. 248
verkleinern ..................... 122
vorausladen .................... 296
zuschneiden .................... 249
Bildeigenschaft . .................... 80
Bilderordner . ........................ 93
Bildformat, Web ................. 238
Bildgröße ............................ 238
einstellen ....................... 247
Block .................................. 154
Blog .................................... 370
Blogger ............................... 370
body ............................. 41, 148
Hintergrundfarbe ............ 148
Standardschriftart ........... 148
Bookmarks, Titel ................. 116
Box ..................................... 152
Breite . ................................ 150
Browser ........................ 74, 166
Adresszeile . ...................... 26
in Vorschaufunktion
einbinden . .................. 168
Standardformatierung ....... 42
Browserfenster .................... 292
öffnen ............................ 296
Browserkompatibilität ......... 173
BrowserLab ................. 170, 171
Browserliste ........................ 168
Browservorschau . ............... 168
C
Cache ................................... 94
Cascading Stylesheets R CSS
ccTLD ................................... 29
CMS ................................... 370
Code-Ansicht ........................ 76
Content-Management-
System ............................ 370
Copyright . ................. 106 , 134
einfügen ......................... 135
Creative Suite 6 ............ 58, 356
CSS ............... 44, 203, 204, 272
Abstand ......................... 221
bearbeiten ...................... 224
Block . ............................ 221
Box ................................ 221
Eigenschaften-Bedienfeld . 207
Eigenschaften hinzufügen . 225
einbinden ......................... 44
409
Index
CSS (Forts.)
Einführung ..................... 207
Erstellung ....................... 207
Erweiterungen ................ 223
externer Stil . .................. 205
Grundlagen . ............ 203, 204
Hintergrund . .................. 220
Hintergrundfarbe ............ 208
Hintergrundgrafik ........... 244
Hyperlink-Stil ................. 208
im Quelltext ................... 207
interner Stil .................... 205
in Vorlage einsetzen ........ 206
Liste . ............................. 222
mehrfach einsetzen ......... 214
neuer Stil ....................... 217
Positionierung . ............... 223
Rahmen ......................... 222
Regel löschen . ................ 226
Rollover-Effekt . .............. 208
Schriftart . ............... 208, 220
Schriftfarbe ............. 208, 220
Schriftgröße ............. 208, 220
Seiteneigenschaften . 207, 208
Seitenrand ...................... 208
Stil . ............................... 119
Stile-Eigenschaften . ........ 224
Stil löschen ..................... 226
Stil umbenennen ............. 227
über EigenschaftenBedienfeld . ................. 211
verknüpfen ..................... 229
verschieben .................... 230
CSS3 ..................................... 45
CSS-Datei ............................. 44
Aufbau ........................... 142
bearbeiten ...................... 144
in Webseite einbinden ..... 229
speichern . ...................... 219
CSS-Eigenschaft .................. 146
CSS-Grundlagen . ................ 142
CSS-Klasse
umbenennen . ................. 227
CSS-Regel ........... 143, 204, 216
anzeigen . ......................... 78
deaktivieren . .................. 227
definieren ....................... 146
duplizieren ..................... 227
410
Eigenschaften ................. 145
erstellen .................... 62, 153
verschieben .................... 227
wiederherstellen ............. 226
CSS-Regel-Definition . 146, 220
CSS-Standards . ................... 142
CSS-Stil ............... 143, 204, 216
anwenden ...................... 214
Fenster . ......................... 144
zuweisen ........................ 227
CSS-Stile (Bedienfeld) ......... 207
CSS-Syntax . ........................ 216
CSS-Tansitions ..................... 231
CSS-Übergänge ............. 56, 231
CSS Zen Garden .................. 204
D
Datei
aus Vorlage . ................... 113
löschen . ......................... 183
neu .................................. 66
umbenennen . ................. 183
Dateifeld . ........................... 314
Dateigröße ............................ 78
Dateiverwaltung ................. 179
Datenbank ............................ 34
Denic . .................................. 29
Desktopgröße ..................... 340
Digitalkamera . ............ 238, 241
Div-Tag ............................... 335
anpassen ........................ 339
einfügen ......................... 336
verkleinern ..................... 339
Dokumentenfenster .............. 74
Domain ................................ 27
frei? ................................. 29
IDN-Domain . ................... 28
TLD . ................................ 29
Umlaute ........................... 28
Domainname ........................ 27
Download-Link ........... 272, 283
Downloadzeit ....................... 78
Dreamweaver CS6, neu . ....... 54
Dreamweaver Exchange ........ 59
Dreamweaver-Template . ..... 109
Dreamweaver-Testversion . .... 58
Druckversion ...................... 205
Dummy-Link ....................... 279
dwt (Dateieendung) ............ 109
Dynamische Webseiten . ....... 48
E
Eigenschaften-Bedienfeld ...... 79
Eigenschaftsinspektor . .... 61, 79
Einchecken ......................... 177
Einfügen
benannter Ankerpunkt . ... 277
Tabelle ........................... 258
Einfügen-Bedienfeld . ............ 83
Einrückung . ........................ 193
HTML ............................ 193
Einstellungen ........................ 84
E-Mail-Adresse . .................... 33
E-Mail-Link ................. 272, 279
Betreffzeile ..................... 281
E-Mail-Verknüpfung ............ 280
Entwurfsansicht ............ 74, 188
Ereignis ....................... 286, 292
festlegen ........................ 297
Erweiterte Ansicht .............. 256
Excel ................................... 254
Externer Stil ........................ 205
erstellen ......................... 219
F
Fadenkreuz ......................... 275
Feldgruppe ......................... 315
Fettschrift ........................... 118
Fireworks ...................... 58, 238
Datei importieren ........... 363
Flash ............................. 43, 402
ausrichten ...................... 367
Auto-Wiedergabe ............ 367
Eigenschaften ................. 366
einfügen ......................... 365
H-Abstand . .................... 367
Qualität ......................... 367
Index
Flash (Forts.)
Schleife .......................... 367
skalieren . ....................... 367
V-Abstand ...................... 367
Flash-Player ........................ 365
Flash-Plugin ........................ 365
Flexibles Layout .................. 332
Fließendes Rasterlayout . 55, 332
Fließtext . ............................ 118
Formulare ................... 303, 304
Aktion . .......................... 306
Beschriftung mit CSS ....... 317
Danke-Seite .................... 326
Eigenschaften ................. 304
Element einfügen ............ 306
erstellen ......................... 305
Fehlermeldungen ............ 324
Felder überprüfen ........... 323
gestalten ........................ 315
GET . .............................. 306
Kennwort ....................... 309
mit CSS gestalten ..... 309, 316
mit Tabellen gestalten ..... 315
Passwort ........................ 309
Pflichtfeld . ..................... 322
PHP-Skript . .................... 326
POST . ............................ 306
Skript ............................. 326
überprüfen .............. 296, 322
Upload ........................... 314
Versandmethode ............. 306
Formularbereich . ................ 304
einrichten ....................... 305
Formularelement ................ 306
Aufbau ........................... 306
Auswahlliste ................... 310
Dateifeld ........................ 314
einfügen ......................... 307
Feldgruppe ..................... 315
Kennwortfeld . ................ 309
Kontrollkästchen ............. 311
Optionsschalter . ............. 312
Schaltfläche .................... 313
Textbereich ..................... 309
Textfeld .......................... 308
versteckte Felder ............. 314
Formularüberprüfung .......... 322
Foto, Bildformat . ................ 240
FTP ..................................... 273
Einstellungen .................. 173
FTP-Benutzerdaten . ............ 175
FTP-Server einrichten .......... 174
Fußbereich . ........................ 101
Fußzeilennavigation ............ 134
G
Gameserver .......................... 34
Gehe zu URL . ..................... 296
Gesamttabelle ..................... 260
GET .................................... 306
GIF ..................................... 239
GIF-Animation .................... 240
Google . ...... 383, 384, 387, 391
Bildersuche ..................... 388
URL anmelden ................ 386
Google AdSense . ........ 384, 396
Google AdWords ........ 384, 396
Google Analytics ......... 384, 392
Google Earth . ..................... 384
Google-Index ...................... 385
Google-Konto ..................... 393
Google Mail ........................ 384
Google Maps ...................... 405
Grafikobjekte, Navigations-
leiste ............................... 289
Großschreibung .................... 94
gTLD . ................................... 29
H
h1 . ..................................... 153
Hauptbereich ...................... 101
Header . ................................ 41
Head-Tags, Beschreibung . ... 389
Helligkeit ............................ 250
Hervorhebung, HTML ......... 196
Hintergrund ........................ 152
Hintergrundbild .................. 208
festlegen ........................ 149
kacheln .......................... 142
Hintergrundfarbe ................ 208
Hintergrundgrafik . .............. 244
Homepage ............ 91, 114, 170
Host Europe GmbH .............. 33
Hotspot .............................. 281
Hover-Effekt ............... 163, 289
HTML ................................... 39
HTML5 ................................. 43
Voreinstellungen ............... 85
HTML-Attribut
align ................................ 41
HTML-Dokument . ................ 26
HTML-Entities ....................... 41
HTML-Entity ....................... 189
HTML-Seite erstellen ............. 60
HTML-Tag
<br> ................................ 40
<em> ............................... 40
<form> .......................... 304
<h1> . .............................. 40
<img> .............................. 40
in Statuszeile .................... 77
<link> .............................. 44
<ol> . ............................... 40
<p> . ................................ 40
<strong> .......................... 39
<table> ..................... 40, 261
Übersicht . ........................ 40
<ul> . ............................... 40
https ................................... 273
Hyperlink ......... 26, 41, 79, 133, 166, 272, 273
absoluter ........................ 275
anlegen .......................... 274
CSS-Regel ....................... 159
entfernen ....................... 279
externer ......................... 275
Farbe ............................. 210
innerhalb der Website ..... 276
interner . ........................ 275
JavaScript einfügen ......... 287
korrigieren . .................... 183
leerer ............................. 279
löschen . ......................... 279
Prüfung ............................ 94
relativer ......................... 275
testen ............................ 171
Zustand .......................... 210
Hyperlink-Stil ...................... 208
411
Index
Hypertext Transfer Protocol
(HTTP) . ............................. 27
Seiten hinzufügen ........... 348
jQuery-Mobile-Projekt ........ 344
I
K
ICANN . ................................ 29
ID ....................................... 307
IDN-Domain ......................... 28
Imagemap . ......................... 281
erstellen ......................... 281
img ....................................... 77
Import
Fireworks-Datei .............. 363
Flash .............................. 365
Photoshop-Datei ............. 357
PNG-Datei ..................... 363
Impressum .......................... 134
Inhalt
festlegen ........................ 104
strukturieren . ................. 191
Inhaltsbereich ....................... 98
Innenabstände .................... 152
Installation ............................ 58
Interaktives Menü ............... 127
Interner Stil . ....................... 205
Internet Explorer . ....... 167, 168
IP-Adresse . ............. 27, 28, 273
IP-Adressraum . ..................... 29
iPhone ................................ 330
Kennwortfelder . ................. 309
Klasse ................................. 214
Klassenattribute .................. 143
Klassen-Selektor . ................ 216
umbenennen . ................. 227
Klassen-Typ erstellen ........... 218
Kleinschreibung .................... 94
Kodierung ............................. 78
Kodierungstyp . ................... 306
Kontakt . ............................. 134
Kontaktformular . ................ 304
Kontrast .............................. 250
Kontrollkästchen ................. 311
Kopfzeile . ........................... 259
Kostenloser Webspace .......... 32
Kursiv ................................. 118
J
Java ...................................... 34
JavaScript . .............. 39, 46, 286
Alert-Fenster öffnen ........ 287
Ereignis .......................... 286
manuell . ........................ 296
Syntax . .......................... 288
über Menüs einfügen ...... 289
Verhalten ....................... 287
JavaScript-Befehl ................. 288
JavaScript-Framework ......... 299
JPEG ................................... 240
jQuery Mobile ............ 341, 343
412
L
Layout
erstellen ......................... 101
für Desktopgeräte ........... 340
für mobile Geräte . .......... 335
für Tablet-Geräte . ........... 338
Gesamtbreite .................. 149
Höhe . ............................ 152
mit Tabellen . ............... 44, 51
Leerer Link . ........................ 279
Leerzeichen ................ 190, 194
geschütztes . ................... 190
Leerzeile ............................. 194
Link R Hyperlink
Linkpopularität . .................. 391
Linux-Server . ........................ 34
Liste . .......................... 119, 195
geordnete ................ 120, 222
ungeordnete ............ 120, 223
verschachtelte . ............... 196
Listenformat ....................... 120
Live-Ansicht .................... 64, 75
Logo ............................. 98, 101
Logo-Platzhalter .................... 67
Lokale Navigation ............... 128
Lokaler Site-Ordner . ............. 91
M
Margin ................................ 153
Markup Language ................. 39
Media Queries .................... 332
Medienabfragen . .................. 57
Menüeintrag ändern ........... 131
Menü interaktives ............... 127
Meta-Tag . ................... 115, 389
bearbeiten ...................... 390
Description ..................... 389
für mobile Geräte . .......... 345
hinzufügen ..................... 389
Keywords ....................... 389
Mobile Applikationen ........... 56
Mobile First ........................ 335
Mobile Web-Apps . ............. 341
Mobile Website
Charakteristika . .............. 342
erstellen ......................... 330
Mobilgerätgröße ........... 77, 335
Multiscreen-Vorschau . .......... 55
MySQL ........................... 34, 47
N
Native App
Definition . ..................... 342
mit Phonegap ................. 351
Navigation ............................ 98
CSS-Regeln ..................... 161
entfernen ....................... 105
Fußbereich ..................... 135
lokale ............................. 128
Navigationsmenü ................ 101
Netscape Resize-Fix ............ 287
neue Funktionen . ................. 55
Index
Neues fliessendes Raster-
layout . ............................ 333
Neue Site . ............................ 92
Neue Webseite ................... 112
Nic ....................................... 31
Primärbrowser .................... 169
Programmstart ...................... 59
Protokoll ............................. 273
Provider .......................... 27, 32
PSD .................................... 357
O
R
Objekt ................................ 291
onAbort .............................. 297
onClick ............................... 297
onDblClick .......................... 297
onLoad ............................... 297
onMouseDown ................... 297
onMouseOut ...................... 297
onMouseOver . ................... 297
onMouseUp . ...................... 297
Opera ................................. 167
Optionsschalter . ................. 312
Ordner erstellen . ................ 183
Randstärke .................. 125, 259
Redesign ............................. 205
Relativer Link ...................... 275
Rendering-Engines ................ 49
Responsive Webdesign ....... 331
Funktionsweise ............... 332
Rollover-Bild ............... 246, 289
vorausladen .................... 290
Rollover-Effekt .................... 208
Ruby on Rails ........................ 34
S
P
Padding .............................. 153
Palette .................................. 81
Passwort-Abfragen .............. 309
Passwort-Textfeld ................ 309
PDF-Datei . ......................... 283
Pfadangabe ......................... 275
PhoneGap . ......................... 351
Photoshop-Datei . ............... 238
aus der Zwischenablage . 359
importieren .................... 357
PHP .................... 34, 39, 47, 76
Pixelgrafik ........................... 239
Platzhalter . ......................... 244
austauschen . .................. 245
Plugin überprüfen ............... 296
PNG ................................... 241
PNG-Datei importieren ....... 363
PNG-Format ....................... 362
Popup-Meldung .................. 296
Positionierung ..................... 223
POST .................................. 306
Schaltfläche ........................ 313
Schrift ......................... 118, 239
Schriftart ....... 79, 118, 208, 213
Schriftfarbe ................. 208, 213
Schriftgröße . 79, 118, 208, 213
Schriftgruppe ...................... 118
Secure FTP .......................... 174
Seiteneigenschaften ............ 208
Seiteninhalt . ............... 111, 112
einfügen ......................... 116
Seitenrand .......................... 208
Seitentitel ..................... 63, 115
Sekundärbrowser ................ 169
Selektor ...................... 143, 216
Sencha Touch . .................... 344
Seriennummer ...................... 58
Shop ................................... 364
Site
anlegen ....................... 65, 92
erstellen ........................... 92
konfigurieren .................... 92
synchronisieren ............... 181
wechseln .......................... 95
Site-Definition ...................... 92
Site-Name ............................ 92
Skripte übernehmen ........... 300
Slice . .................................. 140
Smartphone ........................ 330
Sonderzeichen .............. 41, 189
Spalte
auswählen ...................... 264
einfügen ......................... 126
hinzufügen ..................... 268
löschen . ......................... 268
Spaltenmenü . ..................... 264
Speichern unter .................... 64
Spry ............................ 286, 322
Spry-Funktionen einfügen ... 299
Spry-Menüleiste . ................ 128
anpassen ........................ 131
einfügen ......................... 129
Spry-Überprüfung ............... 323
Spry-Widget . ...................... 299
SSL ..................................... 309
Standard-Ansicht ................ 256
Startfenster ........................... 59
Startseite ............................ 114
Statuszeile . ........................... 77
Steuerradsymbol ................... 78
Stil
externer ......................... 205
interner . ........................ 205
interner oder externer ..... 219
Strato AG .............................. 33
Stylesheets R CSS
Subdomain ........................... 28
Suchmaschine ............. 116, 384
Suchmaschinenoptimierung . 387
Synchronisieren . ................. 183
T
Tabelle ................................ 254
an Browserfenster
anpassen . ................... 258
auswählen ...................... 261
Barrierefreiheit ............... 260
Breite . ........................... 263
einfügen .................... 83, 124
413
Index
Tabelle (Forts.)
erstellen .................. 123, 257
Größe . ........................... 258
Größe zurücksetzen ......... 263
Hintergrundfarbe ............ 266
Höhe . ............................ 263
in Tabelle erstellen .......... 257
Kopfzeile ................. 259, 266
Linien . ........................... 257
markieren ....................... 260
Randstärke ..................... 259
sortieren . ....................... 269
Spalte ............................ 126
Spalte auswählen ............ 264
Spaltenbreiten verändern . 125
Umbruch ........................ 266
Zeile . ...................... 126, 258
Zeile auswählen .............. 264
Zellabstände ................... 259
Zellauffüllung ................. 259
Zelle ausrichten . ............. 266
Zelle auswählen .............. 265
Zelle markieren ............... 265
Zellen gruppieren ............ 266
Tabellenansicht ................... 256
Tabellenbereich ................... 263
Eigenschaften ................. 265
Tabellenbreite ..................... 124
Tabelleneinstellungen . ........ 265
Tabellengröße fest ............... 258
Tabellen-ID ......................... 262
Tabellenlayout, Nachteile ...... 44
Tabellenlinien . .............. 74, 257
Tabellenzelle
ausrichten ...................... 266
gruppieren . .................... 266
markieren ....................... 265
Tablet-PC ............................ 330
Größe . ........................... 338
Tablets .................................. 55
Tabulator ............................ 194
Tag . ...................................... 39
per CSS formatieren ........ 219
Tag <canvas> . ....................... 43
Tag-Leiste . .......................... 264
Tag-Selektor ........................ 216
Tag-Stil erstellen .................. 219
Tag <video> .......................... 43
414
Teilen-Ansicht ....................... 76
Template . ............................. 98
Testversion ............................ 58
Text
eingeben ........................ 188
erstellen ......................... 117
Texteigenschaften ................. 79
Texteinzug . ......................... 154
Textfeld . ..................... 306, 308
Breiten mit CSS
bestimmen .................. 320
mehrzeiliges . .................. 309
Passwort-Feld ................. 309
Textinhalt ............................ 188
Titel .................................... 101
TLD ...................................... 29
Top-Level-Domain ................ 29
Tracking-Code ..................... 393
Traffic . .................................. 33
Transfervolumen ................... 33
Transparenz . ....................... 240
Twitter ................................ 408
U
Überprüfen-Modus ............. 226
Überschrift .................. 119, 210
HTML ............................ 191
Überschrift (HTML-Tag) ......... 40
Übertragungsgeschwindigkeit . 78
Umbruch
harter ............................ 193
weicher .......................... 193
Unicode-Zeichensatz ........... 189
Update ................................. 58
URL .................................... 273
Aufbau ........................... 273
bei Google anmelden ....... 386
V
Vektorgrafik ........................ 239
Verbindungsgeschwindigkeit . 78
Verhalten .................... 115, 290
Browserfenster öffnen ..... 292
einfügen ......................... 292
neues Fenster ................. 292
Verhalten (Funktion) ............. 46
Verknüpfung ....................... 210
Versandmethode . ............... 306
Verschachtelte Liste ............ 196
Verschlüsselung . ................. 309
Verstecktes Feld .................. 314
Visuelle Hilfsmittel .............. 257
Vordefinierte Betreffzeile . ... 281
Voreinstellungen ................... 84
Vorformatierter Absatz
HTML ............................ 194
Vorlage ................................. 98
anwenden ...................... 137
entwerfen ........................ 98
erstellen ......................... 107
mit bearbeitbaren
Bereichen .................... 107
öffnen ............................ 109
planen . .......................... 100
speichern . ...................... 137
Speicherort ..................... 109
Vorlagendatei . .................... 109
Vorschaufunktion ................ 168
W
Web-App
Definition . ..................... 342
mit Dreamweaver
erstellen . .................... 343
neue Seite hinzufügen ..... 347
Seite verlinken ................ 349
Webbrowser ................. 49, 166
Webhoster ...................... 27, 32
Weblog ....................... 369, 370
Webserver ...... 27, 34, 176, 177,
182, 183
Website ........ 26, 89, 90, 91, 98
ändern ........................... 179
aus Vorlage . ................... 113
auswählen ............... 172, 178
bearbeiten ................. 94, 179
dynamische ...................... 48
Index
Website (Forts.)
einzeln übertragen .......... 179
erstellen .................... 60, 113
erstellen mit Hyperlinks ..... 65
für mobile Geräte . .......... 330
Gesamtbreite .................. 149
Größe . ............................. 78
herunterladen ................. 179
im Adobe BrowserLab
testen ......................... 170
importieren ...................... 94
mit fließendem Rasterlayout
erstellen . .................... 333
neu ................................ 112
prüfen ............................ 172
speichern . ...................... 113
synchronisieren ............... 181
testen ............................ 166
testen im Browser ........... 170
übertragen .............. 176, 178
verwalten ................ 174, 182
von anderen Websites
verlinken . ................... 391
Webspace ............................. 32
kostenloser ....................... 32
Webstandards ..................... 205
Webstatistik ........................ 393
Webtabelle ......................... 254
Weiterleitung ...................... 283
ändern ........................... 284
entfernen ....................... 284
Widgets .............................. 300
Word
importieren .................... 197
Zwischenablage . ............. 198
Word-HTML optimieren . .... 197
WordPress .................. 370, 371
administrieren ................ 377
Beitrag schreiben ............ 378
installieren ..................... 372
Templates ................ 371, 379
Themes . ......................... 382
WWW .................................. 27
WYSIWYG-Darstellung . ........ 75
X
XHTML (Extensible Hypertext
Markup Language) . ........... 42
XML . .................................... 42
Y
YouTube . ............................ 402
Z
Zeile
auswählen ...................... 264
einfügen bei Tabelle . ....... 126
hinzufügen ..................... 268
löschen . ......................... 268
Zellabstand ......................... 259
Zellauffüllung ...................... 259
Zelle
auswählen ...................... 264
einfügen ......................... 126
Zellraum ............................. 262
Zielregel .............................. 214
Zitat .................................... 193
Zugänglichkeit . ................... 173
Zurücksetzen ...................... 313
Zuschneiden-Werkzeug ....... 249
Zwischenablage . ................. 198
Zwischenspeicher . ................ 94
415