adobe golive cs2 - bücher.de · 2019-10-17 · 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20...
TRANSCRIPT
Adobe GoLive CS2Webseiten entwickeln mit HTML, CSS, JavaScript, PHP und MySQL
Christian Fleischhauer
Helmut Vonhoegen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Inhalt
Inhalt 3
Einleitung ................................................................. 17 Werkzeug für Web-Profis ........................................... 18 Neu in GoLive CS2 ..................................................... 19 Der Aufbau des Buches .............................................. 20 Dank .......................................................................... 21
Teil I: Vorgestellt: GoLive CS2 ............................................. 23
1 Tour de GoLive ......................................................... 251.1 Vorbereitung ............................................................. 26
1.1.1 Werkzeugkasten ....................................... 261.1.2 Organisationsfragen .................................. 281.1.3 Schlaue Objekte ....................................... 30
1.2 Das erste Projekt ........................................................ 311.3 Die Seite lebt! ............................................................ 52
2 Bemerkungen über Webdesign ................................ 612.1 Einschränkungen ........................................................ 632.2 Browser-Krieg ............................................................ 642.3 Teamarbeit ................................................................ 662.4 Die sieben Todsünden ................................................ 67
2.4.1 Bandbreitenverschwendung ...................... 682.4.2 »Kreative« Benutzerführung ...................... 682.4.3 Technophilia ............................................. 692.4.4 Wachstum nicht eingeplant ...................... 702.4.5 Plattformabhängigkeit ............................... 702.4.6 Einzelkämpfertum ..................................... 712.4.7 Link-Missbrauch ....................................... 72
3 Fenster, Paletten und Inspektoren .......................... 753.1 Das Konzept von GoLive ............................................ 753.2 Die wichtigsten Elemente ........................................... 763.3 Menüleiste und Kontextmenüs ................................... 783.4 Das Dokumentenfenster ............................................ 81
3.4.1 Verschiedene Ansichten ............................ 813.4.2 Die Statuszeile .......................................... 823.4.3 Die Werkzeugleisten ................................. 83
4 Inhalt
3.5 Die Skripteditoren ...................................................... 863.6 Das Site-Fenster ......................................................... 883.7 Die Palettenfenster .................................................... 923.8 Die Objektepalette ..................................................... 963.9 Inspektorpalette ......................................................... 993.10 Weitere Paletten ........................................................ 1023.11 Hilfe .......................................................................... 1063.12 Einstellungen ............................................................. 108
4 Eine erste Seite und etwas HTML ............................ 1114.1 Seiten anlegen und speichern ..................................... 111
4.1.1 HTML-Seite erstellen ................................ 1144.2 HTML-Grundlagen ..................................................... 1174.3 Kopf und Körper ........................................................ 123
4.3.1 Binäre und unäre Tags .............................. 1244.3.2 Hintergrundfarbe ...................................... 1264.3.3 Hintergrundbilder ..................................... 126
4.4 HTML-Gliederungseditor ............................................ 1294.4.1 Tags ein- und ausklappen .......................... 1294.4.2 Texte und Tags bearbeiten ........................ 1324.4.3 Tag verschieben ........................................ 1324.4.4 Attribute bearbeiten ................................. 1324.4.5 Neue Elemente einfügen .......................... 134
4.5 Syntax prüfen ............................................................. 1344.6 Weitere Seiteneinstellungen ....................................... 1374.7 Objekte für den Kopf ................................................. 139
Teil II: Webseiten gestalten ................................................ 143
5 Mit Text gestalten ................................................... 1455.1 Texteingabe ............................................................... 1465.2 Schriftarten ................................................................ 1485.3 Schriftgröße ............................................................... 1555.4 Strukturelle Tags ........................................................ 1585.5 Explizite Formatierung ............................................... 1635.6 Listen ......................................................................... 1635.7 Ausrichtung und Umbruch ......................................... 1685.8 Geschützte Leerzeichen ............................................. 1715.9 Umlaute und Entities ................................................. 173
Inhalt 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
6 Farben im Web ......................................................... 1756.1 Farben auf dem Computer ......................................... 1756.2 Websichere Farben benutzen ..................................... 177
6.2.1 Farben in Hexadezimalwerten ................... 1786.2.2 Kontrolle über die Darstellung .................. 1786.2.3 Websicher ist nicht websicher ................... 179
6.3 Die Farbpaletten ........................................................ 181
7 Bilder erstellen und einfügen ................................... 1937.1 Bilder im Web ............................................................ 193
7.1.1 GIF-Grafiken ............................................. 1937.1.2 JPEG-Grafiken .......................................... 1947.1.3 PNG-Grafiken ........................................... 1947.1.4 GoLive und die Creative Suite ................... 194
7.2 Webgrafiken erstellen ................................................ 1957.2.1 Websichere Farben ................................... 1957.2.2 Farbverfälschungen ................................... 1987.2.3 Kompressionsstufe wählen ........................ 200
7.3 Farbmanagement ....................................................... 2037.3.1 Was sind Farbprofile? ............................... 2037.3.2 Farbmanagement mit Bridge ..................... 2057.3.3 Manuelle Farbeinstellungen ...................... 207
7.4 Bilder einfügen ........................................................... 2107.5 Bilder neu verknüpfen ................................................ 2147.6 Skalierung .................................................................. 2157.7 Smarte Objekte .......................................................... 217
7.7.1 Was sind Smart Objects? .......................... 2177.7.2 Smart Object einfügen .............................. 2187.7.3 Dialog »Für Web speichern« ..................... 2217.7.4 Probleme mit Aliasing ............................... 2237.7.5 Smart Objects – wie es funktioniert ........... 229
7.8 Abstandhalter ............................................................ 2307.9 Auszüge in der Bibliothekspalette ............................... 2337.10 Generische Smart Objects .......................................... 2367.11 Parametrisierte Smart Objects .................................... 240
8 Hyperlinks und Imagemaps ..................................... 2538.1 Grundlagen ................................................................ 2538.2 Hyperlinks bearbeiten ................................................ 2648.3 Anker ......................................................................... 267
6 Inhalt
8.4 Hyperlinks im Quelltext .............................................. 2718.5 Imagemaps ................................................................ 273
8.5.1 Anlegen einer Imagemap .......................... 2748.5.2 Der Imagemap-Bereichsinspektor ............. 2768.5.3 Imagemaps in HTML ................................. 280
9 Cascading Stylesheets .............................................. 2839.1 Wozu Cascading Stylesheets? ..................................... 2839.2 Wie werden Stylesheets codiert? ................................ 2859.3 Intern oder extern ...................................................... 2869.4 Stylesheets mit GoLive gestalten ................................ 2879.5 Drei Gruppen von Selektoren ..................................... 292
9.5.1 Tag-Selektoren ......................................... 2929.5.2 Klassen-Selektoren ................................... 2939.5.3 Zuweisung von Klassenstilen ..................... 2949.5.4 ID-Selektoren ........................................... 2969.5.5 ID-Stile zuweisen ...................................... 2979.5.6 Schnelle Stil-Zuweisung ............................ 2989.5.7 Stylesheet-Kommentare ........................... 2999.5.8 Anweisungsfilter ....................................... 299
9.6 Regeln definieren ....................................................... 3009.7 Externe Stylesheets .................................................... 301
9.7.1 Externes Stylesheet anlegen ...................... 3029.7.2 Externes Stylesheet zuweisen .................... 3039.7.3 Zuweisung innerhalb der Website ............. 3049.7.4 Im- und Export von Stylesheets ................ 305
9.8 Auswahl der Formateigenschaften .............................. 3069.8.1 Absolute und relative Maßeinheiten .......... 3069.8.2 Farben auswählen ..................................... 3089.8.3 Text formatieren ....................................... 3099.8.4 Ausrichtung bestimmen ............................ 3109.8.5 Elemente positionieren ............................. 3129.8.6 Ränder und Hintergründe ......................... 3139.8.7 Formatieren von Listen ............................. 3149.8.8 Farbige Bildlaufleisten ............................... 316
9.9 Kaskadierung und Vererbung ..................................... 3179.10 Komplexe Selektoren ................................................. 3189.11 Vorschau und Test ..................................................... 320
9.11.1 Voreinstellungen zum Browser-Profil ........ 320
Inhalt 7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
10 Layouten mit Tabellen und Rastern ......................... 32310.1 Geschichte der HTML-Tabellen .................................. 32310.2 Tabellen anlegen ........................................................ 32610.3 Auswahlen in Tabellen ............................................... 328
10.3.1 Die Tabellenpalette ................................... 32910.4 Tabellen bearbeiten ................................................... 33110.5 Der Tabelleninspektor ................................................ 333
10.5.1 Tabelle bearbeiten .................................... 33510.5.2 Zeilen und Zellen bearbeiten ..................... 33710.5.3 Zellen zusammenfassen ............................ 340
10.6 Seiten-Layout mit Tabellen ......................................... 34110.7 Datentabellen formatieren ......................................... 35010.8 Layouten mit dem Raster ........................................... 355
10.8.1 Layout-Raster mit CSS .............................. 35810.8.2 Layout-Raster aus Tabellen ....................... 35810.8.3 Der Layout-Raster-Inspektor ..................... 36010.8.4 Attribute und Pseudoattribute .................. 36010.8.5 Elemente im Raster ausrichten .................. 361
10.9 Liquid Layouts einsetzen ............................................ 362
11 Webseiten mit Frames ............................................. 36911.1 Was sind Frames? ...................................................... 36911.2 Risiken und Nebenwirkungen ..................................... 37111.3 Frames anlegen .......................................................... 37411.4 Der Frame-Inspektor .................................................. 37911.5 Der Frameset-Inspektor ............................................. 38311.6 Hyperlinks ................................................................. 38511.7 Keine Frames? ............................................................ 38911.8 Suchmaschinen und Frames ....................................... 391
Teil III: Websites aufbauen ................................................. 393
12 Qualitätskriterien für Websites ............................... 39512.1 Aufmerksamkeit ......................................................... 39512.2 Die Kunst der Navigation ........................................... 397
13 Websites anlegen und aufbauen ............................. 40113.1 Lokale Website anlegen ............................................. 40313.2 Website-Ordner ......................................................... 40513.3 Voreinstellungen für Websites .................................... 407
8 Inhalt
13.4 Website-Aufbau mit Website- Mustern ....................... 40813.4.1 Fertige Vorlagen verwenden ..................... 40813.4.2 Anlegen eigener Musterseiten ................... 409
13.5 Websites importieren ................................................. 41013.5.1 Lokaler Import .......................................... 41013.5.2 Import vom Server .................................... 41113.5.3 Start mithilfe Verweisdatei ........................ 413
13.6 Die Website-Fenster .................................................. 41413.7 Erstellen eines Prototyps ............................................ 417
13.7.1 Entwurf der Struktur einer Website ........... 41713.7.2 Scribbeln in der Navigationsansicht ........... 41913.7.3 Beispiel: Bildbazar-Website ....................... 42013.7.4 Mehrere Seiten gleichzeitig einfügen ......... 42313.7.5 Seitensammlungen ................................... 425
13.8 Website-Ansichten ..................................................... 42613.8.1 Weitere Übersichten ................................. 42713.8.2 Anzeigeoptimierung ................................. 42913.8.3 Teilstrukturen ........................................... 43013.8.4 Strukturänderungen .................................. 43113.8.5 Arbeitsplanung und -kontrolle .................. 43213.8.6 Inhaltsverzeichnis ..................................... 433
13.9 Seiten verknüpfen ...................................................... 43413.9.1 Mit Point & Shoot ..................................... 43513.9.2 URLs editieren .......................................... 43613.9.3 Sicherungskopie ....................................... 438
13.10 Kontrolle der Links ..................................................... 438
14 Websites entwerfen mit Diagrammen ..................... 44114.1 Ein erstes Design ........................................................ 442
14.1.1 Verankerung ............................................. 44314.1.2 Seitengruppen und Abschnitte .................. 44514.1.3 Darstellungsvarianten ............................... 446
14.2 Einfügen von Verknüpfungen ..................................... 44814.2.1 Weitere Objekte ....................................... 45014.2.2 Feinarbeit am Diagramm ........................... 45214.2.3 Arbeitsteilung über Objektgruppen ........... 45314.2.4 Anmerkungen, Beschriftungen, Logos ....... 454
14.3 Präsentation des Designs ............................................ 45514.4 Prüfung und Übernahme des Entwurfs ....................... 45714.5 Umbau eines Strukturentwurfs ................................... 458
Inhalt 9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
15 Ordner, Dateien und Links verwalten ...................... 46115.1 Stammordner und Website-Ressourcen ...................... 461
15.1.1 Website-Datenbank .................................. 46315.1.2 Namensrestriktionen ................................ 46415.1.3 Ordner- und Dateiinspektion .................... 46515.1.4 Relative oder absolute Pfade ..................... 46615.1.5 Einfügen von Ressourcen .......................... 46715.1.6 Website-Reorganisation ............................ 468
15.2 Dateiverwaltung ........................................................ 47015.3 Links prüfen und korrigieren ...................................... 472
15.3.1 Fehlende Dateien ..................................... 47415.3.2 Verwaiste Dateien heimholen ................... 47615.3.3 Externe Links ............................................ 47615.3.4 Importieren und Anlegen von Links .......... 47715.3.5 Prüfen externer Links ................................ 478
16 Bibliothek, Komponenten und Musterseiten .......... 48116.1 Anlegen von Musterseiten und Vorlagen .................... 482
16.1.1 Speichern als Musterseite oder Vorlage ..... 48716.1.2 Musterseite oder Vorlagen verwenden ...... 48816.1.3 Musterseiten nachträglich zuweisen .......... 48916.1.4 Ändern einer Musterseite ......................... 49016.1.5 Ablösen von einer Musterseite .................. 490
16.2 Komponente für Kontaktinfos .................................... 49116.2.1 Einbau einer Komponente in eine Seite ..... 49216.2.2 Komponenten ändern ............................... 493
16.3 Wiederverwendbare Auszüge ..................................... 49516.4 Das Register CSS ........................................................ 497
17 Übergreifende Einstellungen und Änderungen ........ 49917.1 Schriftsammlungen .................................................... 49917.2 Farbtabellen ............................................................... 50217.3 Suchen und Ersetzen in der Website .......................... 50517.4 Suche und Austausch von Code-Elementen ................ 510
18 Websites prüfen und aufräumen ............................. 51318.1 Qualitätskontrolle ...................................................... 51318.2 Websites bereinigen ................................................... 517
18.2.1 Aufräumverfahren ..................................... 518
10 Inhalt
18.2.2 Fehlende Objekte hinzufügen ................... 51918.2.3 Import von Office-Dokumenten ............... 520
19 Websites veröffentlichen ......................................... 52319.1 Server-Verbindung einrichten ..................................... 524
19.1.1 Neuen Server konfigurieren ...................... 52419.1.2 Übertragungsumfang auswählen ............... 526
19.2 Datenaustausch mit dem Server ................................. 52819.2.1 Website-unabhängiger Client .................... 52819.2.2 Integrierter Client der Website .................. 52919.2.3 Dateien auf dem Server bearbeiten ........... 53119.2.4 Dateien vom Server holen ......................... 531
19.3 Webseiten exportieren ............................................... 53219.4 Teamarbeit mit WebDAV ........................................... 533
19.4.1 Systemvoraussetzungen für WebDAV ....... 53419.4.2 Datenaustausch mit WebDAV ................... 53519.4.3 Dateien für Änderungen sperren ............... 53719.4.4 Dateien und Ordner verwalten ................. 539
19.5 Co-Author-Funktion .................................................. 53919.5.1 Ein bisschen Content Management ........... 54019.5.2 Co-Author-Abschnitte einrichten .............. 54119.5.3 Musterseiten-Bereiche zuordnen .............. 54219.5.4 Editieren der Abschnitte ........................... 54419.5.5 Mitarbeiten von außen ............................. 545
Teil IV: Fortgeschrittene Funktionen .................................. 547
20 JavaScript und andere Skriptsprachen ..................... 54920.1 Skript-gesteuerte Objekte .......................................... 55020.2 Kleines Formularbeispiel ............................................ 552
20.2.1 Eingabe des Skriptbeispiels ....................... 55420.2.2 Event-Handler für Funktionsaufruf ............ 55820.2.3 Unterschiedliche Ereignismodelle .............. 55920.2.4 Zuordnen von Ereignissen zu Objekten ..... 559
20.3 <body>-Skripte .......................................................... 56220.4 Skript-Bibliotheken .................................................... 56220.5 Browser-sensible Syntaxprüfung ................................. 564
20.5.1 Prüfung der Objektunterstützung .............. 56420.5.2 Browser-Weiche einsetzen ........................ 56520.5.3 Fremdcode ............................................... 566
Inhalt 11
21 Vorgefertige Aktionen .............................................. 56721.1 Smarte Aktionen ........................................................ 56821.2 Rollover-Effekte ......................................................... 568
21.2.1 Von GoLive generierter Code .................... 57221.2.2 Remote Rollover-Effekte ........................... 57321.2.3 Automatische Bilderkennung .................... 57421.2.4 Rollover von Photoshop und ImageReady ............................................... 576
21.3 Seitenbezogene Ereignisse .......................................... 57821.4 Text- und bildbezogene Aktionen ............................... 580
21.4.1 Verfügbare Event-Handler ........................ 58021.4.2 Kombinationen von Aktionen ................... 58221.4.3 Verfügbare Aktionen ................................. 58321.4.4 Aktionsfilter für Browser ........................... 58921.4.5 Einsatz der Skript-Bibliothek ..................... 58921.4.6 GoLive-Aktionen erweitern ....................... 59121.4.7 Aktionssequenzen ..................................... 592
22 Interaktion und Animation ...................................... 59722.1 Schwebende Ebenen .................................................. 598
22.1.1 Stapel schwebender Ebenen ..................... 59922.1.2 Verzeichnis über alle Ebenen .................... 605
22.2 Animierte Ebenen ...................................................... 60622.2.1 Bewegungen aufzeichnen ......................... 60822.2.2 Abspielen einer Szene ............................... 61122.2.3 Aktionen in der Zeitleiste .......................... 61222.2.4 DHTML und die Browser .......................... 613
23 Formulare ................................................................. 61523.1 Das Common Gateway Interface ................................ 61523.2 Das Formularobjekt ................................................... 619
23.2.1 Formulare erstellen ................................... 62323.2.2 URL-Kodierung ......................................... 62523.2.3 Get oder post? .......................................... 626
23.3 Formular layouten ...................................................... 62723.4 Eingabefelder einfügen ............................................... 62923.5 Formularinhalte auswählen ........................................ 63323.6 Schaltflächen einbauen .............................................. 63623.7 Sonstige Elemente ..................................................... 63823.8 Steuerung des Eingabefokus ....................................... 640
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
12 Inhalt
23.9 Formular-Output prüfen ............................................ 64223.10 Benutzereingaben überprüfen .................................... 643
23.10.1 Aktion »Feldprüfung« ............................... 64423.10.2 Wie sieht der Code aus? ........................... 64723.10.3 JavaScript-Handler .................................... 648
24 Brücken zum Printdesign ......................................... 65324.1 PDF-Dateien bearbeiten ............................................. 65524.2 Import aus PDF-Dokumenten .................................... 66224.3 Webseiten als PDF exportieren .................................. 667
24.3.1 Einstellungen für den PDF-Export ............. 66724.3.2 PDF-Vorgaben einstellen .......................... 66824.3.3 Export einzelner HTML-Seiten .................. 67124.3.4 Export einer Website in PDF ..................... 673
25 QuickTime-Filme ...................................................... 67525.1 Filmkomposition und -schnitt .................................... 67525.2 Titel, Standbilder und Ton .......................................... 68025.3 Video-Effekte mit Filtern ............................................ 68225.4 Interaktive Filme ........................................................ 68425.5 Filme speichern .......................................................... 68625.6 Filme für Streaming Server ......................................... 68725.7 Filme einfügen und bearbeiten ................................... 688
26 GoLive und XML ....................................................... 69126.1 Frei wählbare Tags ..................................................... 692
26.1.1 Zwischensprache ...................................... 69426.1.2 Parser und Schemata ................................ 695
26.2 XML im Quellcode ..................................................... 69626.2.1 Datenvalidierung in GoLive CS2 ................ 69926.2.2 XML innerhalb von GoLive ....................... 70026.2.3 Metadaten und XMP ................................ 70126.2.4 Von HTML via XML zu XHTML .................. 70326.2.5 Umwandlung von HTML in XHTML ........... 706
26.3 Vektorgrafiken erzeugen mit SVG ............................... 70926.4 Multimedia koordinieren mit SMIL ............................. 712
26.4.1 SMIL im Web ........................................... 71826.4.2 RAM-Dokumente ..................................... 719
Inhalt 13
27 Mobil Web & MMS .................................................. 72127.1 MMS – Multimedia Messaging Service .......................... 72127.2 WAP, i-mode, XHTML Basic + MP .............................. 72527.3 Ein kleines Beispiel in WML ....................................... 727
Teil V: Dynamische Websites .............................................. 729
28 Was sind dynamische Websites? ............................ 73128.1 ASP, JSP, PHP ............................................................ 732
28.1.1 Active Server Pages ................................... 73228.1.2 Java Server Pages ...................................... 73328.1.3 PHP for everybody .................................... 733
28.2 Serverbasierte Webanwendungen .............................. 73428.2.1 Das Anfrage/Antwort-Modell .................... 73428.2.2 Verbindungslos und ohne Zustand ............ 73628.2.3 Aufbau von HTTP-Nachrichten ................. 73728.2.4 Das Format der Anfrage ............................ 73728.2.5 Header in der Anfrage ............................... 73828.2.6 Parameter bei einer Anfrage ...................... 73928.2.7 Das Format der Antwort ........................... 74028.2.8 Header in der Antwort .............................. 74228.2.9 Der Rumpf der Antwort ............................ 743
28.3 Webanwendungen mit GoLive CS2 ............................ 744
29 Apache, PHP und MySQL einrichten ....................... 74729.1 Webserver-Varianten ................................................. 74729.2 Apache-Server installieren .......................................... 749
29.2.1 Eingangskonfiguration .............................. 74929.2.2 Dienstbetrieb ........................................... 75029.2.3 Virtuelle Verzeichnisse .............................. 75129.2.4 Erster Seitenaufruf .................................... 75229.2.5 Apache unter Mac OS X ............................ 752
29.3 Installation von MySQL .............................................. 75329.3.1 MySQL unter Windows ............................ 75329.3.2 MySQL konfigurieren ................................ 75529.3.3 Mit MySQL arbeiten ................................. 75829.3.4 Verwaltungstools für MySQL .................... 75929.3.5 MySQL unter Mac OS X ............................ 762
29.4 Installation von PHP 5 ................................................ 763
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
14 Inhalt
29.4.1 Apache-Server für PHP konfigurieren ........ 76329.4.2 PHP einrichten ......................................... 76429.4.3 PHP für MySQL einstellen ......................... 76529.4.4 PHP auf dem Mac ..................................... 767
29.5 Paket-Installationen: XAMPP oder MAMP .................. 76829.5.1 XAMPP-Installation unter Windows .......... 76829.5.2 Pakete für Mac OS X ................................. 770
30 Zugriff auf Datenbanken über das Web .................. 77130.1 Überblick über SQL und PHP ..................................... 772
30.1.1 Allgemeine Merkmale von SQL ................. 77230.1.2 Die PHP-Architektur ................................. 773
30.2 Bilddatenbank mit MySQL ......................................... 77430.2.1 Datentabellen anlegen .............................. 77430.2.2 Tabellendaten eingeben ............................ 77530.2.3 Tools für MySQL ....................................... 776
30.3 PHP-Seiten für den Datenzugriff ................................. 77730.3.1 Seitenabfolge ............................................ 77730.3.2 Anzeige des Bildarchivs ............................. 77830.3.3 Verbindung zur Datenbank ....................... 77930.3.4 Fehlerbehandlung ..................................... 77930.3.5 Auswahl der Datenbank ............................ 78030.3.6 Auswahl der Kategorie .............................. 78030.3.7 Abfrage der Datenbank ............................. 78230.3.8 Anzeige der Bilddaten ............................... 78230.3.9 Anzeige der Bewertungen ......................... 78330.3.10 Anzeige der Bilder .................................... 78430.3.11 Test im Browser ........................................ 78830.3.12 Bewertung der einzelnen Bilder ................ 78830.3.13 Datenupdate ............................................ 789
30.4 Datenpflege über das Web ......................................... 79130.4.1 Startseite .................................................. 79130.4.2 Einfügen neuer Datensätze ....................... 79330.4.3 Daten bearbeiten ...................................... 79630.4.4 Daten löschen .......................................... 800
30.5 Datenaustausch zwischen Seiten ................................ 80130.5.1 Was sind Cookies? .................................... 80130.5.2 Cookies schreiben ..................................... 80230.5.3 Sitzungsverfolgung .................................... 80530.5.4 Das Session-Konzept in HTTP ................... 805
Inhalt 15
30.5.5 Session-ID ................................................ 80530.5.6 Umschreiben von URLs ............................. 80630.5.7 Handhabung einer Sitzung ........................ 80730.5.8 Zugangskontrolle ...................................... 808
Teil VI: GoLive mit der Creative Suite 2 .............................. 813
31 Dateiverwaltung mit Adobe Bridge ......................... 81531.1 Die Oberfläche .......................................................... 815
31.1.1 Arbeitsumgebung ..................................... 81631.1.2 Menüs ...................................................... 81731.1.3 Ansichtsvarianten ..................................... 81731.1.4 Vorschau, Metadaten und Stichwörter ...... 81831.1.5 Arbeitsumgebungen speichern .................. 81931.1.6 Voreinstellungen ...................................... 819
31.2 Arbeitshilfen in Adobe Bridge ..................................... 82331.2.1 Erweiterte Suchfunktionen ........................ 82331.2.2 Stapelumbenennung ................................. 82431.2.3 Favoriten, Ordner, Kollektionen ................ 82531.2.4 Bilder bewerten und markieren ................. 82731.2.5 Einheitliche Farbeinstellungen .................. 82831.2.6 Raw-Einstellungen .................................... 82931.2.7 Stock Photos ............................................ 83131.2.8 Das Adobe Bridge Center .......................... 834
32 Import aus InDesign-Paketen .................................. 83732.1 InDesign-Paket erstellen ............................................. 83832.2 Eigenständiges InDesign-Paket verwenden ................. 84132.3 InDesign-Paket importieren ....................................... 84432.4 Komponenten aus InDesign ....................................... 846
33 Arbeiten mit Version Cue ......................................... 84933.1 Der Version-Cue-Server ............................................. 850
33.1.1 Benutzerkonten einrichten ........................ 85333.1.2 Projektverwaltung .................................... 85433.1.3 Erweiterte Verwaltungsfunktionen ............ 855
33.2 Eine neue Version-Cue-Site ........................................ 85633.2.1 Site in Version Cue anlegen ...................... 85633.2.2 Version-Cue-Website laden ...................... 85833.2.3 Site in Version-Cue-Site umwandeln ......... 859
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
16 Inhalt
33.3 Teamarbeit in Version Cue ......................................... 86033.3.1 Version Cue und PDF ............................... 86033.3.2 Aufgabenverteilung im Team .................... 86333.3.3 Aus- und Einchecken ................................ 86433.3.4 Offline arbeiten ........................................ 86633.3.5 Versionsverwaltung .................................. 86733.3.6 Bearbeitung von Ressourcen ..................... 86833.3.7 Version Cue und Adobe Bridge ................. 86833.3.8 Arbeiten mit Alternativen ......................... 870
Teil VII: Anhang ................................................................... 873
A Die DVD zum Buch ................................................... 875A.1 Ordner »Beispiele« ..................................................... 875A.2 Ordner »Farbbilder« ................................................... 876A.3 Ordner »Software« ..................................................... 877A.4 Ordner »Video-Training« ............................................ 877
B Nützliche Links für Webdesigner ............................. 879
C Glossar ...................................................................... 883
D Tangram – das Spiel zum Ausschneiden .................. 891
Index ......................................................................... 893
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Einleitung 17
Einleitung
In alten Zeiten klopfte man ein Stück HTML-Code mit dem Faustkeil zurecht, bis eine Webseite dabei herauskam. Heute ist die Arbeit durch visuelle Werkzeuge wie Adobe GoLive viel einfacher und effektiver geworden, auch wenn für optimale Ergebnisse Handarbeit hier und da weiterhin möglich und sinnvoll ist. Mit GoLive CS2 steht ein Werkzeug zur Verfügung, das auf einfachste Weise Material aus anderen kreativen Anwendungen übernimmt und hilft, dieses opti-mal für das Web aufzubereiten.
Mit GoLive CS2 legt Adobe inzwischen die achte Version des Webe-ditors GoLive vor. Zunehmend konzentriert sich Adobe auf seine Stärken im Design- und Prepress-Bereich und richtet GoLive in die-sem Sinne konsequent aus. Mit der Creative Suite 2 liegt ein Paket vor, in dem GoLive den logischen Abschluss des mit Photoshop CS2 und Illustrator CS2 beginnenden Workfl ows für den Webbereich darstellt, während im Printbereich InDesign CS2 den Schlusspunkt bildet. Als Vermittler tritt dabei das neue Adobe Bridge auf. Stärker noch als bisher wird dabei das PDF-Format integriert.
GoLive CS2 ist ein ausgereiftes Werkzeug für die professionelle Entwicklung von Web-Sites und einzelnen Webseiten. Mit seinen mächtigen visuellen Tools unterstützt es einerseits den raschen und effektiven Entwurf; andererseits bieten die Quelltexteditoren alles, was sich HTML- und Skript-Profi s für die direkte Programmierung der Seiten im Quelltext wünschen. Insbesondere mit den treffend benannten Smart Objects, mit denen Assets von Photoshop, Illustra-tor und Acrobat ohne Umwege und fl exibel eingebettet werden kön-nen, unterstützt GoLive einen sehr effektiven und intuitiven Work-fl ow.
18 Einleitung
Werkzeug für Web-Profi s
GoLive ist ein Werkzeug zur visuellen Entwicklung von einzelnen Webseiten und ganzen Web-Sites. Gegenüber reinen HTML-Edi-toren hat der visuelle Ansatz von GoLive den Vorteil einer wesentlich handlicheren Arbeitsweise. Mit GoLive sind Sie aber auch dem Code-generator nicht hilfl os ausgeliefert. Wenn Ihnen der erzeugte HTML-Code nicht optimal erscheint, können Sie mit dem eingebauten Quellcode-Editor jederzeit korrigierend eingreifen. Andererseits kön-nen Sie mit GoLive aber auch sicher sein, dass das Programm Ihren liebevoll handoptimierten HTML-Code nicht heimlich, still und leise verschlimmbessert. GoLive verbindet so gewissermaßen das Beste aus beiden Welten.
Dem gleichen Ansatz folgt auch dieses Buch. Die Autoren befür-worten weder das blinde Zusammenklicken einer Webseite, ohne ein Auge auf den erzeugten Code zu haben, noch die Auffassung, dass »richtige« HTML-Programmierer ihre Seiten ausschließlich mit einem reinen HTML-Texteditor erstellen sollten. Wie so oft liegt die Wahrheit in der Mitte. Die visuellen Werkzeuge von GoLive können die Entwicklung von Webseiten enorm beschleunigen und die Ver-waltung der Dateien einer Site vereinfachen, aber der Entwickler sollte sich immer des Umstandes bewusst sein, dass unter der visu-ellen Oberfl äche trockenes HTML oder mehr oder weniger eleganter Skript-Code regieren. In diesem Sinne wird dieses Buch auch immer wieder auf den erzeugten HTML- und Skriptcode eingehen.
GoLive ist nicht ursprünglich bei Adobe entworfen worden. Das Licht der Welt erblickte das Programm als Mac-Anwendung unter dem Namen Cyberstudio, ausgetüftelt bei einer Hamburger Soft-ware-Schmiede namens GoLive. Nach der Übernahme unternahm Adobe Anstrengungen, GoLive auch in der PC-Welt zur Verfügung zu stellen. Das erste Ergebnis war GoLive 4. Inzwischen sind Bedie-nung und Aussehen der Mac- und der PC-Version, abgesehen von wenigen plattformspezifi schen Unterschieden, so gut wie identisch. Schon mit GoLive CS hat sich GoLive von den alten PC-Betriebssys-temen der Windows 9x-Schiene und von Mac OS 9 verabschiedet und setzt mindestens eines der beiden modernen Betriebssysteme Mac OS X oder Windows XP voraus.
Dieses Buch beschreibt sowohl die Windows-Version als auch die Macintosh-Version von GoLive CS2. Um die Plattformunabhän-gigkeit von GoLive zu unterstreichen, wurden die Kapitel teilweise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mit Abbildungen von OS X und teilweise von Windows XP illustriert. In den seltenen Fällen, in denen tatsächlich Unterschiede zwischen den Plattformen bestehen, wird auf diese hingewiesen.
Neu in GoLive CS2
An dieser Stelle sollen nur die wichtigsten Änderungen gegen-über der Version GoLive CS kurz angesprochen werden, zahlreiche kleinere Änderungen sind im Verlauf des Buches an der jeweiligen Stelle eingearbeitet.
Die Arbeit mit GoLive CS2 wird nun in großem Umfang durch die Funktionshierarchie geordnet, die über das umstrukturierte Dialog-feld Datei • Neu angeboten wird. Dort sind nicht nur zahlreiche Varianten von möglichen Dokumenten auswählbar, sondern auch viele brauchbare Vorlagen, Styles, Skripte und Komponenten, die für Weblösungen hilfreich sind.
Da der Einsatz von Cascading Stylesheets im aktuellen Webdesign zum Standard geworden ist und die Browser die entsprechenden Standards des W3C inzwischen ausreichend unterstützen, trägt GoLive CS2 dem in mehrfacher Form Rechnung: � Unter dem Label Liquid Layouts ist es jetzt möglich, fl exible Lay-
outs mithilfe von CSS-Layout-Objekten und CSS-Layout-Rastern zu erstellen.
� Zwischen einem Layout auf der Basis von CSS-Layout-Rastern und Layouts auf der Basis von Tabellenobjekten ist bei Bedarf eine automatische Konvertierung in beiden Richtungen möglich.
� Das Web-Site-Fenster enthält ein eigenes CSS-Register zur Ver-waltung der Styles.
� HTML-Stile können automatisch durch CSS-Stile ersetzt werden und umgekehrt.
� Die visuelle Kontrolle im CSS-Editor wurde optimiert.� Bei der Übernahme von InDesign-Paketen können die Formatie-
rungen über den CSS-Editor direkt bearbeitet werden.
Ganz neu ist das Tool Adobe Bridge, das insbesondere allen Adobe-Anwendungen eine einheitliche Verwaltung der Ressourcen zur Ver-fügung stellt, die über die systemeigenen Funktionen hinausgeht. Das gilt insbesondere für die Suchfunktionen, die umfangreiche
Neu in GoLive CS2 19
20 Einleitung
Metainformationen etwa zu Bildern oder anderen Medien nutzen können, die als Ressourcen für Web-Sites vorgesehen sind.
GoLive CS2 unterstützt jetzt mehrere Varianten von Versionskon-trollsystemen: ein einfaches Verfahren auf der Basis lokaler Ordner, die Verwendung von CVS-Servern und eine neue Version von Adobe Version Cue.
Der Aufbau des Buches
Dieses Buch richtet sich an Webprofi s, Designer und interessierte Laien, die sich mit Webdesign beschäftigen und Adobe GoLive CS2 zu ihrem Werkzeugkasten hinzufügen möchten. In erster Linie ist dies ein Buch über GoLive, und wie damit Web-Sites entworfen, realisiert und gewartet werden. Spezialisierte Nachschlagewerke oder Lehrbücher zu komplexen Themen wie HTML, JavaScript oder gutem Webdesign kann und will dieses Buch nicht ersetzen. Diese wichtigen Themen spart das Buch zwar nicht aus, doch zwingt der nur beschränkt zur Verfügung stehende Raum zur Konzentration auf das Wesentliche. Dies bietet aber auch die Chance, Wesentliches von Unwesentlichem zu trennen und Wichtiges nicht unter Unmen-gen von Details zu verschütten.
Das Buch ist in sieben Teile gegliedert. Der erste Teil beschäftigt sich mit den elementaren Grundlagen. Der zweite Teil beschreibt den Entwurf einzelner Seiten. Die Organisation einer Web-Site und der zugehörigen Dateien wird bis zum dritten Teil zurückgestellt, um die Dinge für Leser und Leserinnen überschaubar zu halten. Der vierte Teil beschäftigt sich schließlich mit fortgeschrittenen Themen, beispielsweise dynamischem HTML und Skriptsprachen, XML, PDF, Quicktime und die Unterstützung für mobile Webanwendungen. Neu hinzugekommen gegenüber dem Buch zur letzten Version ist im fünften Teil ein ausführliches Kapitel zu dynamischen Web-Sites, in dem am Beispiel von PHP und MySQL auf einem Apache-Server eine praktische Einführung in die serverseitige Skriptprogrammierung gegeben wird. Der sechste Teil stellt das neue Adobe Bridge, die Arbeit mit InDesign-Paketen für GoLive und die neue Version von Adobe Version Cue, dem Versionskontrollsystem für Webdesign-teams, vor. Teil sieben ist ein Anhang mit einem Glossar, einer Liste nützlicher Links und Hinweisen zur beiliegenden DVD.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Dank
Für die harmonische Zusammenarbeit bedanken wir uns bei unserem Lektor Thorsten Mücke. Dank auch an Helmut Kraus, ohne dessen Ermutigung und Unterstützung es dieses Buch nicht gegeben hätte.
Christian Fleischhauer, Helmut VonhoegenKöln und Düsseldorf, im September 2005
Dank 21
Teil IVorgestellt: GoLive CS2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4 Eine erste Seite und etwas HTML
Am Anfang eines jeden Seitenentwurfs steht immer eine leere Seite. Doch schon bevor Sie die erste Zeile Inhalt eingeben, gibt es eine Vielzahl von Einstellungsmöglichkeiten. So können Sie Seitenüber-schrift, Text- und Hintergrundfarben oder ein Hintergrundbild fest-legen und Hilfsinformationen für Suchmaschinen und Browser in den Seitenkopf eintragen. In diesem Kapitel erfahren Sie ferner, aus welchen HTML-Bausteinen eine Webseite aufgebaut ist und wie Sie mit den verschiedenen Layout- und Quelltexteditoren umgehen, die Ihnen GoLive CS2 zur Verfügung stellt.
4.1 Seiten anlegen und speichern
Wenn Sie GoLive CS2 starten, wird standardmäßig ein Begrüßungs-dialog angezeigt, mit dem ein neues Dokument angelegt oder ein bestehendes geöffnet werden kann.
� Abbildung 4.1Der optionale Begrüßungsdialog von GoLive unter Windows XP
� Abbildung 4.1Der optionale Begrüßungsdialog von GoLive unter Windows XP
Seiten anlegen und speichern 111
112 Eine erste Seite und etwas HTML
Klicken Sie auf die Schaltfl äche Neues Dokument, wird der Dia-log Neu angezeigt, mit dem Sie von einer einzelnen Webseite bis hin zu einer ganzen Website, vielen anderen Dateitypen oder auch ausgefeilten Beispielen alles zur Verfügung haben. In diesen Dialog gelangen Sie jederzeit auch mit dem Befehl Datei • Neu oder dem Tastenbefehl ˛ (ï)+(N) bzw. ˇ (Strg)+(N).
Startverhalten einstellen | Falls es Sie stört, dass GoLive jedes Mal einen Begrüßungsdialog anzeigt, können Sie dieses Verhalten mit dem Markierungsfeld Nicht mehr anzeigen unten links im Begrü-ßungsdialog oder mit dem Befehl Bearbeiten • Voreinstellungen
• Allgemein über das Listenfeld Beim Start ändern. Alternativ zur Anzeige des Begrüßungsbildschirms können Sie automatisch eine neue Seite erstellen lassen oder auch gar nichts unternehmen. Da Sie wahrscheinlich meist an einer der unter Datei • Benutzte Do-
kumente aufgelisteten Dateien weiterarbeiten wollen, ist die letzte Möglichkeit vermutlich die praktischste. Die Möglichkeit, automa-tisch mit den zuletzt bearbeiteten Dateien fortzufahren, fehlt leider immer noch.
Kategorie wählen | Nachdem in GoLive CS die Befehle zum Anle-gen neuer Dokumente der unterschiedlichen Arten und Dateitypen auf insgesamt drei verschiedene Menü-Befehle bzw. mehrere Un-termenüs verteilt waren, ist die Gesamtfunktionalität nun im Dialog Neu übersichtlich zusammengefasst. In der linken Spalte wählen Sie grob die Kategorie, z. B. � Web-Site zur Erstellung einer ganzen Webseite, � Web für ein einzelnes Webdokument, eine HTML-Seite oder
auch Grafi k-Dateien,� Mobil für Elemente und Vorlagen für Mobil-Telefone,� Scripting für QuickTime-, CGI-, JavaScript- und Perl-Dateien,
aber auch JSP-, PHP- und ASP-basierte dynamische HTML-Seiten und schließlich
� Favoriten für bestimmte Dateitypen, die Sie häufi ger brauchen. Diese Liste können Sie selbst nach Ihren Bedürfnissen erweitern oder bearbeiten.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Dateiart wählen | In der nächsten Spalte wählen Sie die Unterka-tegorie oder das Beispiel, in der dritten Spalte (wenn sie existiert) schließlich die Dateiart oder Vorlage. Hier können Sie mit dem Kon-textmenü bzw. einer kleinen eingeblendeten Menüschaltfl äche mit dem Befehl Zu Favoriten hinzufügen auch einzelne Dateitypen in die Favoriten übernehmen.
Tipp: Vorlagen anpassen
GoLive erstellt neue Seiten anhand von Vorlagendateien. Sie können diese Vorlagen problemlos selbst ändern und an Ihre Bedürfnisse anpassen, indem Sie im Kontextmenü oder in dem Menü der Menüschaltfl äche nicht den Befehl Dokument erstellen, sondern den Befehl Original bearbeiten aus-wählen. Beachten Sie aber, dass Sie sich auch Ihre Vorlagen »zerschießen« können, wenn Sie eine unbedachte Änderung speichern. Eine gewisse Vor-sicht ist also sicher nicht fehl am Platz.
Optionen und Vorschau | Die letzte und rechte Spalte zeigt eine Erläuterung und oft auch eine schematische Vorschau. Markieren Sie unter Windows das Kästchen Optionen anzeigen ganz oben in der Spalte bzw. klicken Sie unter Mac OS X auf die zugehörige Dreiecksschaltfl äche, so wird oben zusätzlich ein rechteckiger Be-reich eingeblendet, in dem Sie für HTML- und XHTML-Dateien die verwendete HTML- bzw. XHTML-Variante und die gewünschte Zei-chensatzkodierung festlegen können.
XHTML oder HTML? | XHTML ist eine Neuformulierung der Hy-perText Markup Language (HTML), die penibel den Regeln der Me-tasprache XML folgt. Durch die strengeren Regeln von XML erge-ben sich geringfügige Unterschiede auch zu sauber programmiertem HTML. Anders als HTML, wo manche Regeln recht lässig gehandhabt
� Abbildung 4.2Die vielfältigen Möglichkeiten des Dialogs Neu
� Abbildung 4.2Die vielfältigen Möglichkeiten des Dialogs Neu
Seiten anlegen und speichern 113
114 Eine erste Seite und etwas HTML
werden können, erzwingt XHTML aber einen saubereren Program-mierstil und je nach Version die strikte Trennung von Inhalt und Dar-stellung. Mehr dazu fi nden Sie im vierten Teil dieses Buches.
Module und Zeichensatzkodierungen
Um unterschiedliche Sprachen und Zeichensätze zu unterstützen, werden im Web verschiedene Zeichensatzkodierungen verwendet. Damit der Browser »weiß«, wie die Zeichen in einem HTML-Dokument zu interpretie-ren sind, kann (und seit HTML 4 muss) die verwendete Zeichensatzkodierung explizit in die Datei hineingeschrieben werden.
Welche Zeichenkodierung ist aktiviert?
Die Unterstützung unterschiedlicher Zeichensatzkodierungen ist in GoLive CS2 jetzt nicht mehr in einem Modul angesiedelt, sondern fest eingebaut. Welche Zeichensätze aktiviert sind, d. h., welche für die Kodierung eigener Seiten z. B. beim Anlegen einer Datei angeboten werden, legen Sie im Dialog Voreinstellungen (Menübefehl GoLive • Voreinstellungen bzw. Bear-
beiten • Voreinstellungen) unter der Rubrik Kodierungen oder mit dem Befehl Datei • Dokumentenkodierung • Bearbeiten fest. Die Kodierung im 8-Bit-Unicode utf-8 steht immer zur Verfügung und lässt sich auch nicht abwählen. Standardmäßig sind weiterhin utf-16 (16-Bit-Unicode), iso-8859-1 (latin-1) und shift_jis (Japanisch) aktiviert.
4.1.1 HTML-Seite erstellenUm eine neue HTML-Seite anzulegen, wählen Sie im Dialog Neu die Optionen Web • Seiten • HTML-Seite. Damit für die folgenden Kapitel einheitliche Voraussetzungen vorliegen, markieren bzw. akti-
Abbildung 4.3 �
Der Dialog zur Aktivierung zusätz-licher Zeichensatz-kodierungen
Abbildung 4.3 �
Der Dialog zur Aktivierung zusätz-licher Zeichensatz-kodierungen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
vieren Sie bitte Optionen anzeigen und entfernen Sie das Häkchen im Markierungsfeld XHTML verwenden. Wählen Sie die Zeichen-satzkodierung Westlich (iso-8859-1).
Seite speichern | Namen und Speicherort des Dokuments legen Sie erst mit dem ersten Speichern fest. Es ist daher fast immer zweckmä-ßig, diesen Schritt direkt nach dem Anlegen eines neuen Dokuments auszuführen. Das aktive Dokument speichern Sie mit dem Befehl Datei • Speichern unter oder der Tastenkombination ˛ (ï)+(S) bzw. ˇ (Strg)+(S).
� Abbildung 4.4Seite in neuem Ordner speichern unter Windows XP ...
� Abbildung 4.4Seite in neuem Ordner speichern unter Windows XP ...
� Abbildung 4.5... und unter Mac OS X.
� Abbildung 4.5... und unter Mac OS X.
Seiten anlegen und speichern 115
116 Eine erste Seite und etwas HTML
Groß- und Kleinschreibung beachten!
Ein weiterer wichtiger Hinweis betrifft die Groß- und Kleinschreibung. Da speziell Betriebssysteme der im Serverbereich weit verbreiteten Unix-Fami-lie teilweise zwischen Groß- und Kleinschreibung in Dateinamen unterschei-den, sollten Sie die Groß- und Kleinschreibung (speziell bei der manuellen Eingabe) in den Dateinamen einheitlich handhaben. Es kann Ihnen sonst passieren, dass eine Webseite auf dem Webserver nicht mehr richtig funkti-oniert, da Einzelteile der Seite wegen unterschiedlicher Schreibweise nicht gefunden werden. Die Site-Verwaltung von GoLive erlaubt es Ihnen, ver-wendete Dateinamen in einem Projekt automatisch auf Einhaltung von Namenskonventionen zu überprüfen.
Alles in einen Ordner | Es wurde bereits erwähnt, dass es zweck-mäßig ist, alle Dateien für eine Webseite oder Website in einem ge-meinsamen Ordner (und Unterordnern dieses Ordners) abzulegen. Wenn Sie später alle Verknüpfungen zwischen den verwendeten Da-teien als relative Verknüpfungen anlegen, bleiben diese Beziehungen auch dann erhalten, wenn Sie den Ordner verschieben oder per FTP zu einem Webserver heraufl aden. Auch wenn Sie (noch) nicht mit einer Website-Datei zur Verwaltung Ihrer Website arbeiten, ist es praktischer, alle Einzelteile einer Seite oder Website in einem Ord-ner zusammenzuhalten.
Wenn Sie noch keinen Ordner für Ihre Site oder Seite angelegt haben, können Sie das im Dialog Speichern unter gleich mit erledi-gen. Wählen Sie zunächst den Ordner aus, in dem der neue Ordner angelegt werden soll. Klicken Sie dann auf die Schaltfl äche ˛ Neuer
Ordner bzw. ˇ Neuen Ordner erstellen. Geben Sie dem neuen Ordner einen sinnvollen Namen und wechseln Sie dann in den neuen Ordner. Abschließend geben Sie im Eingabefeld ˛ Sichern unter
bzw. ̌ Dateiname den Namen an, unter dem Ihre Seite gespeichert werden soll, und klicken auf Sichern bzw. Speichern.
Seitentitel vergeben | Wie bereits im ersten Kapitel erwähnt, bittet Sie GoLive, beim Speichern eine Seitenüberschrift einzugeben, so-fern das noch nicht geschehen ist. Offensichtlich wurde das zu oft vergessen, sodass die Entwickler von GoLive auf die Idee kamen, diese freundliche Erinnerung einzubauen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Von Dateinamen, Typen und Namenserweiterungen
Besonders Mac-Anwender sind es gewohnt, dass ihr Betriebssystem die ver-schiedenen Dokumente wie z. B. Bilddateien automatisch den richtigen Anwendungen zuordnet. Dies funktioniert unabhängig davon, wie die Datei benannt ist, durch eine Kennung im Ressourcenzweig der Datei. Ausschlag-gebend ist hier die Anwendung, mit der das Dokument erstellt wurde. In den meisten anderen gängigen Betriebssystemen wie Linux oder Windows ist eine solche automatische Zuordnung nicht möglich. Daher müssen Web-browser grundsätzlich in der Lage sein, die Dateitypen an den so genannten Dateinamenserweiterungen zu erkennen. Verwenden Sie daher auch auf dem Macintosh für Dateien, die für das Web vorgesehen sind, unbedingt Namenserweiterungen wie z. B. ».jpeg«, ».gif« oder ».html«.
4.2 HTML-Grundlagen
Zwischen den Anhängern visueller Webdesign-Tools wie GoLive und den reinen HTML- (und JavaScript-) Programmierern tobt seit dem Aufkommen von WYSIWYG-Werkzeugen ein erbitterter Glaubens-krieg über die reine Lehre der Webprogrammierung. Die HTML-Hard-liner führen ins Feld, dass sie »von Hand« wesentlich effi zienteren und kleineren Code erzeugen als jedes automatische Werkzeug. An-hänger visueller Tools führen dagegen die enormen Produktivitäts-vorteile ins Feld, die ihnen ihre Werkzeuge bieten.
Codequalität | Tatsächlich ist der Code, den z. B. GoLive CS2 erzeugt, gar nicht so weit von dem entfernt, was ein routinierter HTML-Profi in seinen Texteditor schreibt. Andererseits ist der Aufwand der ma-nuellen Programmierung für viele Projekte gar nicht mehr bezahlbar. Tatsächlich erinnert dieser Streit an die ähnlich erbittert geführten Debatten beim Aufkommen der ersten Hochsprachen für Compu-ter. »Richtige« Programmierer programmierten in Maschinensprache und lehnten die Verwendung von Hochsprachen als ineffi zient ab. Inzwischen wird kaum noch ein Programm in Assembler geschrie-ben, selbst die meisten Kernelroutinen moderner Betriebssysteme sind in Hochsprachen verfasst.
Produktivität | Im Bereich des Webdesigns zeichnet sich eine ähn-liche Entwicklung ab. Der Löwenanteil der Arbeiten wird mit visu-ellen Tools erledigt, die ein wesentlich produktiveres Arbeiten er-lauben, als es bei der direkten Kodierung der Seiten der Fall ist.
HTML-Grundlagen 117
118 Eine erste Seite und etwas HTML
Nur dort, wo spezielle Optimierungen nötig sind oder Funktionen gewünscht werden, die sich mit visuellen Tools (noch) nicht imple-mentieren lassen, ist weiterhin Handarbeit erforderlich.
HTML verstehen | Ein solides Verständnis von HTML ist also wei-terhin eine sinnvolle Grundlage für die Entwicklung von Webseiten. Auch wenn visuelle Editoren wie GoLive CS2 etwas über diesen Um-stand hinwegtäuschen – die Sprache des Web ist und bleibt HTML. Viele Verhaltensweisen auch der mit GoLive erstellten Seiten lassen sich nur verstehen, wenn man den zugrunde liegenden Code bzw. bestimmte prinzipielle Verhaltensweisen von HTML kennt. Auch mit WYSIWYG-Werkzeugen werden Webseiten letztlich immer noch in HTML erstellt, GoLive erspart Ihnen lediglich die Mühsal, Ihre Seiten von Anfang bis Ende von Hand zu codieren. Um mit GoLive pro-duktiv zu arbeiten, müssen Sie also kein HTML-Experte sein. Den-noch ist es gelegentlich notwendig oder auch hilfreich, sich mit dem HTML-Code direkt zu beschäftigen. Der folgende Abschnitt wird Ihnen zeigen, wie einfach tatsächlich die Grundlagen von HTML sind.
HTML ist zukunftssicher | HTML (HyperText Markup Language) ist eine Textauszeichnungssprache. In einen normalen ASCII-Text sind Steuerbefehle eingestreut, die Aussagen über die Art des Textes bzw.über seine Formatierung enthalten. Da HTML standardisiert ist, bie-tet es das optimale Medium, formatierte Texte (und Bezüge auf ein-gebettete Grafi ken etc.) zu speichern. Anders als die proprietären binären Formate von Textverarbeitungsprogrammen ist HTML zu-kunftssicher. Da es sich lediglich um ASCII-Text handelt, können Sie sicher sein, dass Sie Ihre HTML-Dokumente auch in zehn Jahren noch öffnen können. Versuchen Sie das einmal mit den zehn Jahre alten Dokumenten Ihrer (damaligen) Textverarbeitung.
HTML ist einfach | Die leere Anfangsseite bietet eine gute Gelegen-heit, sich ein wenig mit den Grundlagen von HTML zu beschäftigen. HTML ist keine schwierige Sprache (man kann sich sogar fragen, ob die Bezeichnung »Sprache« für diese Sammlung von Formatierungs-anweisungen nicht zu hoch gegriffen ist).
Das Hauptproblem für HTML-Neulinge ist nicht die Struktur der Sprache – die lässt sich mit wenigen Sätzen beschreiben – sondern die schiere Masse von verschiedenen Formatierungsanweisungen,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
den so genannten Tags. Hinzu kommt, dass HTML im Laufe der Ent-wicklung immer wieder um neue Tags und Attribute erweitert wurde. Da diese Erweiterungen aber oft erst nach und nach (und teilweise unterschiedlich) in den Browsern implementiert wurden, besteht der größte Teil des Expertenwissens darin, zu wissen, welche Tags mit welchen Browsern nicht korrekt arbeiten und welche Ersatzkonstruk-tionen stattdessen funktionieren. Mittlerweile hat sich mit HTML 4 aber ein relativ ausgereifter Standard etabliert, der von den aktuellen Browsern auch verstanden wird. Die Kenntnis aller HTML-Eigen-heiten von einem halben Dutzend verschiedener Browser verliert damit zunehmend an Bedeutung.
Tipp: (X)HTML-Referenz im Netz
Wenn Sie sich intensiver mit HTML, XHTML, CSS, JavaScript, DHTML etc. beschäftigen wollen, kurz, mit all den Sprachen und Standards, auf denen die Webprogrammierung beruht, sei die ausgezeichnete Referenz SelfHTML 8.1 von Stefan Münz empfohlen, die Sie im Netz unter http://de.selfhtml.org/ fi nden können. Der Umfang entspricht inzwischen weit über 1600 Buch-seiten! Hier fi nden Sie auch Links, um SelfHTML komplett aus dem Internet herunterzuladen. Der Download der ca. 8,5 MB großen ZIP-Datei lohnt sich! Wenn Sie sich einen Link zur Startseite von SelfHTML auf den Desktop legen, haben Sie eine ausgezeichnete und gut strukturierte Hilfe für HTML, JavaScript, CGI-Skripts etc. immer in Reichweite.
Quellcode anzeigen | Das Dokumentenfenster von GoLive ermög-licht unterschiedliche Ansichten ein und desselben Dokuments, zwischen denen Sie mit den Registern am oberen Rand des Fens-ters wechseln können. Mit dem Register Quelle wechseln Sie in die Quellcode-Ansicht. Noch bequemer ist die Möglichkeit, den Quellcode synchron in der Quellcode-Palette (Menübefehl Fenster
• Quellcode) oder in einem geteilten Dokumentenfenster (Doppel-pfeilschaltfl äche � unten links im Dokumentenfenster, siehe nächste Seite) zu betrachten und zu bearbeiten. Alle Änderungen, die Sie direkt im Layout vornehmen, spiegeln sich sofort in der Palette wi-der. Umgekehrt wirken sich auch Änderungen im Quellcode sofort im Dokumentenfenster aus. Tippen Sie das Gropius-Zitat »Gestalten heißt: In Fesseln tanzen« im Layout-Editor ein und verfolgen Sie die Änderungen synchron in der Quellcode-Palette.
HTML-Grundlagen 119
120 Eine erste Seite und etwas HTML
�
� Abbildung 4.6Synchrone Anzeige in Layout-Editor und Quellcode-Palette
Sie sollten Quellcode-Palette und Quellcode-Ansicht bei geteiltem Layout-Editor nie gleichzeitig benutzen. Abgesehen davon, dass diese Kombination nicht sonderlich sinnvoll ist, führt sie gelegent-lich zu falscher (doppelter) Codeerzeugung!
�
Zeilenummern | Ein oft übersehenes Feature ist das kleine Einga-befeld Gehe zu Zeile � links unten am Rand des Quellcode-Editors bzw. der Quellcode-Ansicht bei geteiltem Editorfenster. Hier wird nicht nur immer die aktuelle Zeilenummer angezeigt, sondern hier können Sie auch gezielt bestimmte Zeilen des Quelltextes ansprin-gen, einfach, indem Sie die gewünschte Zeilenummer in das Feld ein-geben. Das ist besonders praktisch, wenn in längeren Webseiten der Browser wieder einmal einen JavaScript-Fehler in Zeile xyz meldet. Falls Sie die Zeilennummern dauerhaft ein- oder ausblenden wollen, geht das übrigens mit der vorletzten Schaltfl äche Zeilennummerie-
rung anzeigen am oberen Rand des Quellcode-Fensters.
Abbildung 4.7 �
Im Quelltext-Editor kann man direkt in eine bestimmte Zeile springen.
Abbildung 4.7 �
Im Quelltext-Editor kann man direkt in eine bestimmte Zeile springen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Tipp: Änderungen werden nicht sofort übernommen
Änderungen in der Quellcode-Palette oder im Quellcode-Bereich des geteil-ten Layout-Fensters werden – anders als im umgekehrten Fall – nicht sofort in die Layout-Ansicht übernommen. Erst wenn Sie anschließend in die Arbeitsfl äche des zugehörigen Dokumentenfensters klicken, erscheinen die Änderungen auch im Layout-Bereich. Leider löscht ein solcher Wechsel immer auch die Protokollpalette, sodass ein Rückgängigmachen der Ände-rungen danach nicht mehr möglich ist!
Binäre und unäre Tags | Im HTML-Code der leeren (oder fast lee-ren) Beispielsseite können Sie sowohl den grundsätzlichen Aufbau einer HTML-Seite als auch die HTML-Syntax schön erkennen. Die meisten HTML-Auszeichnungen treten paarweise auf und schließen den Teil des Dokuments, auf den sie wirken, zwischen sich ein. An-dere, meist solche, die dem Einfügen eines einzelnen Elements die-nen, kommen auch einzeln vor. HTML-Auszeichnungen werden als Tags (engl. tag = Etikett, Schild) bezeichnet, da sie der Etikettierung oder Auszeichnung des eingeschlossenen Textes dienen. Im Falle von paarweise auftretenden Auszeichnungen spricht man von binären Tags, sonst von unären Tags. Unäre Tags benötigen im Gegensatz zu binären Tags kein zweites schließendes Tag und dienen meist dazu, Informationen oder Medien (z. B. Bilder) in die Seite einzubetten.
Schreibweise der Tags | Damit der Browser Tags von sonstigem In-halt unterscheiden kann, folgen Tags einer bestimmten Schreibweise: Sie werden komplett mit allen eventuell nötigen Zusatzinformati-onen in spitzen Klammern eingeschlossen. Das schließende Tag eines Paares wird durch einen Schrägstrich vor dem Schlüsselwort gekenn-zeichnet. In XML muss immer ein schließendes Tag vorhanden sein. In XHTML werden unäre Tags daher durch einen Schrägstrich vor der schließenden spitzen Klammer gekennzeichnet. Sie sind damit öffnendes und schließendes Tag in einem!
HTML im Browser | Text und Tags eines HTML-Dokuments werden vom Browser als Zeichenstrom bearbeitet, d. h., die Anordnung des HTML-Codes spielt keine Rolle für die Funktion. Der Browser liest den Text und die Tags Zeichen für Zeichen ein, entfernt Überfl üssi-ges wie Leerzeichen, Tabulatoren oder Zeilenenden und interpretiert den so gewonnenen Zeichenstrom dann aufgrund der eingebetteten Tags. Dies erlaubt es, Leerzeichen und Einrückungen zu verwenden, um den HTML-Code und seine geschachtelte Struktur übersichtlich
HTML-Grundlagen 121
122 Eine erste Seite und etwas HTML
darzustellen. Aus dem gleichen Grund haben explizit eingefügte Zei-lenwechsel im Text keine Wirkung, sie werden vor dem Aufbau der Seite vom Browser entfernt.
Präformatierten Text einsetzen
Natürlich keine Regel ohne Ausnahme – präformatierte Texte, wie z. B. for-matierte Programmlistings, können mit dem Tag <pre> </pre> eingeklam-mert werden. Dadurch bleiben Leerzeichen, Tabulatoren und Zeilenwechsel erhalten. Damit die Ausrichtungen der Zeilen erhalten bleiben, zeigt der Browser präformatierten Text grundsätzlich mit einem nichtproportionalen Zeichensatz an. HTML ist innerhalb des <pre>-Tags aber nicht abgeschaltet – es ist kein Problem, Wörter auszuzeichnen oder eine geeignetere Schriftart auszuwählen.
Das HTML-Tag | Die Seite des Beispiels in Abbildung 4.8 zeigt den grundlegenden Aufbau jeder HTML-Seite. Zunächst ist die eigentliche Seite in HTML oder XHTML durch das Tag-Paar <html> </html> eingeschlossen. Dies signalisiert dem Browser, dass es sich bei dem eingeschlossenen Text um HTML-Code handelt. Außerhalb dieser beiden Tags sollte sich außer Angaben zum Dokumententyp kein Text befi nden (auch wenn die gängigen Browser diesen Punkt aus historischen Gründen nicht so eng sehen und auch HTML-Code von außerhalb des HTML-Tags darstellen).
Abbildung 4.8 �
Ein einfaches HTML-Dokument im Quell-text-Editor von GoLive
Abbildung 4.8 �
Ein einfaches HTML-Dokument im Quell-text-Editor von GoLive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4.3 Kopf und Körper
Eine typische HTML-Seite wie die vorliegende besteht aus zwei Tei-len: der Head-Sektion (Seitenkopf) und der Body-Sektion (Seiten-körper). In Kapitel 11 über »Frames« werden Sie außerdem noch die Sektionen Frameset und Noframes kennen lernen.
Groß- und Kleinschreibung | HTML akzeptiert sowohl groß ge-schriebene als auch klein geschriebene Tags. XHTML schreibt da-gegen Kleinschreibung vor. Mit GoLive sind Sie in dieser Hinsicht auf der sicheren Seite, da auch GoLive standardmäßig die Tags klein schreibt (obwohl Sie dieses Verhalten auch ändern können, wenn Sie HTML-Tags in Versalien vorziehen).
Der Seitenkopf | Im Seitenkopf stehen Tags, die Eigenschaften der ganzen Seite festlegen. In der Beispielseite fi nden Sie hier ein <title> -Tag und zwei Meta -Tags. Das <title>-Tag hat die üb-liche binäre Form, während es sich bei den Meta-Tags um unäre Tags handelt. Die Meta-Tags zeigen auch, wie die Funktion der meisten Tags durch zusätzliche Angaben, so genannte Attribute , näher spezi-fi ziert werden kann. Attribute haben die Form Name=Wert.
Meta-Tags | Meta-Tags dienen dazu, zusätzliche Informationen für Webserver, Browser und automatische Suchprogramme in die Seite einzubetten. Sie können beispielsweise Angaben zum Autor, zum Inhalt der Datei oder über die verwendete Zeichensatzkodierung enthalten. Das erste Meta-Tag der Beispielseite beschreibt die ge-wählte Zeichensatzkodierung und den Dokumententyp. Das kündigt das Attribut http-equiv="content-type" an. Das zweite Attribut content="text/html;charset=iso-8859-1" legt dann im De-tail den MIME-Typ und die verwendete Zeichensatzkodierung fest und bezeichnet den in der internationalen Norm ISO 8859 festge-legten Zeichensatz »Latin-1«, der für die meisten westeuropäischen Sprachen und das amerikanische Englisch geeignet ist.
Das zweite Meta-Tag <meta name="generator" content=
"Adobe GoLive"> ist typisch für visuelle Webeditoren und WYSI-WYG-Werkzeuge. Es macht ein wenig Werbung für die verwendete Entwurfssoftware und erlaubt es dem Hersteller, die Verbreitung sei-ner Werkzeuge durch einfache Suche im Internet zu ermitteln. Im-merhin kann in GoLive diese Eigenschaft im Dialog Voreinstel-
Kopf und Körper 123
124 Eine erste Seite und etwas HTML
lungen (Menübefehl Bearbeiten • Voreinstellungen) unter der Rubrik Allgemein mit dem Markierungsfeld Generator Adobe
GoLive schreiben abgeschaltet werden.
Der Seitentitel | Das dritte Tag gibt den Titel der Seite an. Dieser Ti-tel wird bei der Anzeige der Seite in der Titelleiste des Browser-Fens-ters gezeigt und auch von Suchmaschinen ausgewertet. Unabhängig davon, ob Sie die Erinnerungsfunktion für den Seitentitel ein- oder ausgeschaltet haben, sollten Sie daher unbedingt jeder Seite einen aussagekräftigen Titel geben, wie z. B. hier »In Fesseln tanzen«. Sie haben in GoLive verschiedene Möglichkeiten, den Seitentitel zu bearbeiten:� Direkt im Quellcode in der Quellcode-Palette, in der geteilten
Ansicht im Quellcode-Bereich, im HTML-Quellcode-Editor oder im HTML-Gliederungs- oder Outline-Editor.
� Direkt in der Titelzeile rechts neben der Schaltfl äche Seite durch Anklicken und Bearbeiten des angezeigten Seitentitels.
� Im Seiteninspektor, Register Seite, Eingabefeld Titel. Den Seiten-inspektor laden Sie durch Klicken auf die Schaltfl äche Seite oben links im Layout-Editor in die Inspektorpalette.
Die Body-Selektion | Der zweite Hauptteil einer HTML-Seite ist der Seitenkörper oder die Body-Sektion. Hier steht, geklammert durch das Tag <body> </body>, der eigentliche Seiteninhalt. Im Fall der Beispielseite ist dies nur das Gropius-Zitat, eingeklammert durch das Tag-Paar <p> </p>.
4.3.1 Binäre und unäre TagsEs gibt einige Tags, die in HTML (im Gegensatz zum strengeren XHTML) sowohl in binärer als auch in unärer Form geschrieben wer-den können. Hierzu zählen beispielsweise die hier besprochenen Tags <body>, <html> und <p>. Bei solchen Tags können Sie mit der Symbolschaltfl äche Zwischen binären und unären Tags wechseln der Hauptsymbolleiste des HTML-Gliederungseditors zwischen den beiden Möglichkeiten umschalten – allerdings nur wenn Sie kein XHTML-Dokument bearbeiten! Im Zweifelsfall sollten Sie jedoch oh-nehin immer die binäre Variante wählen, da diese wesentlich un-zweideutiger zu lesen ist.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Das <body>-Tag zeigt, dass auch binäre Tags oft Attribute besit-zen. Stellen Sie etwa mit dem Seiteninspektor die Hintergrundfarbe Weiss ein, wird diese Festlegung als Attribut im <body>-Tag notiert. Im Beispiel hat das Tag zunächst kein Attribut. Nachdem Sie aber die Hintergrundfarbe explizit festgelegt haben, lautet das Tag <body bgcolor="white">.
�
� Abbildung 4.9Wahl der Hintergrundfarbe mit Seiteninspektor und Farbfeld
Seiteneinstellungen | Um Seiteneinstellungen wie z. B. die Hin-tergrundfarbe oder die Seitenränder zu verstellen, verwenden Sie den Seiteninspektor . Aktivieren Sie also diesen, indem Sie auf die Schaltfl äche Seiteneigenschaften anzeigen � oben rechts im Lay-out-Editor direkt neben dem Wort Eigenschaften: klicken. Die Seiteneinstellungen fi nden Sie auf dem Register Seite des Seitenin-spektors. Wie Sie sehen, ist das Markierungsfeld Farbe im Abschnitt Hintergrund angekreuzt, d. h., die Hintergrundfarbe ist explizit auf die Farbe festgelegt, die im Farbfeld rechts daneben angezeigt wird. Klicken Sie auf weitere Markierungsfelder, z. B. für Text oder Link, erkennen Sie in der Codeansicht oder der Codepalette, dass sofort die entsprechenden Attribute im <body>-Tag eingefügt bzw. wieder entfernt werden.
Kopf und Körper 125
126 Eine erste Seite und etwas HTML
4.3.2 HintergrundfarbeUm eine Farbe auf eines der Farbfelder anzuwenden, gibt es ver-schiedene Möglichkeiten. Die eine besteht in der Verwendung ei-ner der beiden Paletten Farbe oder Farbfelder. Klicken Sie in die Mitte des Farbfeldes und öffnen Sie, falls das nicht schon automa-tisch geschehen ist, die gewünschte Palette Farbe oder Farbfelder. Wenn Sie jetzt eine Farbe in der Palette Farbe oder in der Palette Farbfelder anklicken oder ggf. einen Regler in der Palette Farbe verschieben, folgen das Farbfeld im Inspektor und der Hintergrund der Seite automatisch.
Eine weitere Möglichkeit ist die Verwendung einer der unzähligen Farbpaletten, die mit GoLive CS2 geliefert werden. Wählen Sie dazu im Palettenmenü der Palette Farbfelder den Befehl Farbfeldbibli-
othek öffnen und wählen Sie die gewünschte Farbfeldbibliothek . Alle geöffneten Farbfeldbibliotheken werden in einem gemeinsamen Palettenfenster angezeigt.
Eine dritte Möglichkeit besteht darin, die Farbe direkt über das Menü des Farbfeldes auszuwählen. Dazu klicken Sie in das kleine schwarze Dreieck an der unteren rechten Ecke des Farbfeldes für die Hintergrundfarbe. Dadurch wird ein Menü ausgeklappt, das eine An-zahl möglicher Paletten aufl istet und eine davon darstellt. Klicken Sie die gewünschte Farbe an, um sie in das Farbfeld und den Seitenhin-tergrund zu übernehmen.
Spielen Sie ruhig ein wenig mit den verschiedenen Farbeinstellun-gen und verfolgen Sie, wie sich die Attribute des <body>-Tags in der Quellcode-Palette und ggf. die Hintergrundfarbe sofort automatisch anpassen.
4.3.3 HintergrundbilderAnstelle einer Hintergrundfarbe können Sie auch ein Hintergrund-bild verwenden. Klicken Sie dazu im Seiteninspektor unter Hinter-
grund das Markierungsfeld Bild an �. Im Eingabefeld � daneben können Sie den Dateinamen direkt eingeben oder mit der kleinen Schaltfl äche mit dem Ordnersymbol � das bekannte Dialogfeld Öff-
nen aufrufen. Sobald Sie die Eingabe abschließen, erscheinen der neue Hintergrund im Layout-Fenster � und das Hintergrundbild als zusätzliches Attribut des <body>-Tags in der Quelltextpalette �.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
�
�
��
�
� Abbildung 4.10Festlegen eines gekachelten Hintergrundbildes
Tipp: Seite und Medien zusammenhalten
Auch wenn Sie mit dem Dialog Öffnen theoretisch jede Datei auf Ihrem Rechner öffnen können, sollten Sie sich darauf beschränken, Bilddateien im selben Verzeichnis wie Ihre Webseite (oder einem Unterverzeichnis davon) abzulegen, damit Sie die Seite später mit intakten Verknüpfungen an eine andere Position oder auch auf den Webserver kopieren können.
Hintergrundkacheln | Hintergrundbilder werden immer gekachelt. Sinn dieser Browser-Eigenschaft ist, die Fläche des Browser-Fens-ters immer vollständig mit dem Hintergrund zu überdecken. Zudem erlaubt es diese Eigenschaft auch, mit kleinen gekachelten Bildern ohne große Ladezeiten strukturierte Hintergründe zu gestalten. Al-lerdings genügen gekachelte Hintergründe in den seltensten Fällen professionellen Ansprüchen, sie sind eher auf Hobbyisten-Websites zu fi nden. Ein Grund mag sein, dass rechteckige Kacheln meist sehr viel optische Unruhe in eine Seite bringen. Intelligent eingesetzt las-sen sich Kacheln aber auch dazu verwenden, interessante Hinter-grundeffekte Bandbreite sparend zu erzeugen.
Intelligent kacheln | Hintergrundbilder lassen sich beispielsweise zur (rein optischen) vertikalen oder horizontalen Aufteilung einer Seite und zur Realisierung einfacher Farbverläufe von links nach rechts
Kopf und Körper 127
128 Eine erste Seite und etwas HTML
bzw. von oben nach unten einsetzen. Dazu müssen die Kacheln le-diglich so lang und schmal sein, dass sie nur in eine Richtung »geka-chelt« werden. Für Farbverläufe etwa genügt eine Bitmap, die einen Pixel breit oder hoch und hinreichend hoch oder lang ist. Für eine sich wiederholende Struktur in der Querrichtung muss die kleine Ab-messung der Kachel entsprechend größer gewählt werden.
Rechteckige Kacheln | Möchten Sie tatsächlich rechteckige Kacheln einsetzen, sollten Sie das Folgende bedenken: Je kleiner die einzelne Kachel und je prägnanter das Motiv, umso mehr drängt sich die rechteckige Anordnung der Kacheln dem Betrachter auf und lenkt vom eigentlichen Seiteninhalt ab. Wenn überhaupt, sollten Sie derart gekachelte Hintergründe daher nur sehr vorsichtig einsetzen.
Kacheln vermeiden | Wenn Sie ein einzelnes Hintergrundbild wün-schen und nicht wollen, dass Ihr Hintergrundbild gekachelt erscheint, müssen Sie es so groß wählen, dass es für jede realistische Größe des Browser-Fensters groß genug ist. Wenn Sie mehr Kontrolle über die Größe und Platzierung von Bildern als Seitenhintergrund ausüben wollen, müssen Sie statt mit Hintergrundbildern mit Ebenen oder Tabellen arbeiten.
Abbildung 4.11 �
Hintergrundeffekte durch vertikale und horizontale Kacheln
Abbildung 4.11 �
Hintergrundeffekte durch vertikale und horizontale Kacheln
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Fertige Hintergründe | Fertige Hintergrundkacheln fi nden Sie im Web übrigens im Überfl uss. Allerdings genügen solche Kacheln aus dem Netz in den seltensten Fällen professionellen Ansprüchenzu laut und zu bunt. Wenn Sie mit rechteckigen Kacheln arbeiten wollen, sollten Sie entweder solche fertigen Kacheln modifi zieren oder eigene Kacheln erstellen.
Tipp: Kachelwerkstatt
Das prinzipielle Problem beim Erstellen von Kacheln besteht darin, einen Rapport herzustellen. Viele Grafi kwerkzeuge unterstützen inzwischen die Erstellung von Kacheln für das Web – beispielsweise besitzt Adobe Image-Ready zu diesem Zweck einen Filter für die weiche Überblendung. Aber auch mit jedem beliebigen Grafi keditor lässt sich der Rapport herstellen. Dazu ordnen Sie vier Kopien der Bitmap im Rechteck an und verwenden davon nun einen Ausschnitt in der ursprünglichen Größe der Bitmap. Die Kanten, wo die ursprünglichen Bitmaps aneinander stoßen, retuschieren Sie, sodass ein fl ießender Übergang entsteht.
4.4 HTML-Gliederungseditor
Neben dem einfachen HTML-Editor, der im Wesentlichen der Quell-code-Palette entspricht, besitzt GoLive noch einen weiteren sehr interessanten Editor für HTML-Quellcode. Der so genannte HTML-Gliederungseditor oder Outline-Editor spiegelt den Umstand wi-der, dass bei HTML die Texte und die Formatierungsanweisungen in Form der Tags immer ineinander geschachtelt sind. Was liegt also näher, als diese geschachtelte Struktur zur Grundlage eines speziellen HTML-Editors zu machen?
4.4.1 Tags ein- und ausklappenIm HTML-Gliederungs- oder Outline-Editor kann ein binäres Tag im-mer in einem geschlossenen und in einem aufgeklappten Zustand dargestellt werden. Im geschlossenen Zustand ist das Tag mit seinem gesamten Inhalt auf eine Zeile zusammengefaltet. Zwischen aufge-klapptem und zugeklapptem Zustand des Tags schalten Sie um mit der kleinen Schaltfl äche � links vom Namen des Tags.
HTML-Gliederungseditor 129
130 Eine erste Seite und etwas HTML
�
�
�
� Abbildung 4.12Der HTML-Gliederungs- oder Outline-Editor unter Windows XP ...
�
�
� Abbildung 4.13... und etwas abweichend unter Mac OS X.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Das Erscheinungsbild dieser Schaltfl äche folgt in GoLive CS2 der je-weiligen Betriebssystemkonvention für den Knoten einer Bauman-sicht. In Windows XP hat sie daher die Form eines kleinen »+«-Sym-bols �, wenn ein Klick auf die Schaltfl äche ein Auffalten bewirkt, oder eines »–«-Symbols �, wenn ein Klick den Ast zusammenfaltet. Unter OS X wird die Schaltfl äche dagegen durch ein Dreieckssym-bol dargestellt, das im ersten Fall nach rechts � und im zweiten Fall nach unten � zeigt.
�
�
� Abbildung 4.14Expandieren und Kollabieren von HTML-Tags in der Gliederungsansicht.
� Abbildung 4.14Expandieren und Kollabieren von HTML-Tags in der Gliederungsansicht.
� Abbildungen 1.15Bearbeiten von Bezeichnern und Texten im Gliede-rungseditor.
� Abbildungen 1.15Bearbeiten von Bezeichnern und Texten im Gliede-rungseditor.
HTML-Gliederungseditor 131
132 Eine erste Seite und etwas HTML
4.4.2 Texte und Tags bearbeitenFast alle Texte, die im HTML-Gliederungs- oder Outline-Editor zu sehen sind, können auch bearbeitet werden. Dazu zählen nicht nur die eigentlichen Texte des Inhalts �, sondern auch die Namen der Tags und Attribute. Klicken Sie z. B. auf den Namen eines Tags, er-scheint ein Eingabefeld, mit dem dieses Tag bearbeitet werden kann . GoLive passt automatisch auch das schließende Tag an die Än-derung an.
GoLive nutzt dieses Verhalten beim Einfügen eines neuen Tags mit der Symbolschaltfl äche Neues Element hinzufügen. Das neue Tag hat die Form <element> </element> und wird nach dem Einfügen einfach direkt im Gliederungseditor umbenannt. Sie können ein neues Tag aber auch mit dem Befehl Neues Element des Kontext-menüs einfügen. Dieser Befehl hat den Vorteil, dass Sie das ge-wünschte Element direkt aus einem Menü auswählen können.
Tipp: Tags »auskommentieren«
HTML-Browser ignorieren unbekannte Tags. Das können Sie ausnutzen, um Tags (vorübergehend) wirkungslos zu machen, indem Sie ihnen einen unbe-kannten Namen geben – etwa dadurch, dass Sie dem Tag ein »x« voranstel-len.
4.4.3 Tag verschiebenLinks von der Schaltfl äche zum Ein- und Ausfalten der Teilbäume fi nden Sie einen Anfasser, mit dem Sie ein Tag komplett mit Inhalt verschieben können �. Ein Umriss und eine horizontale Linie deuten an, wohin der Code verschoben wird, wenn Sie die Maustaste los-lassen. Einer der Hauptvorteile des Gliederungseditors ist, dass Sie so immer komplette, korrekt geklammerte Tags verschieben. Damit ist sichergestellt, dass Ihnen die Klammerung der Tags nicht durch-einander geraten kann.
4.4.4 Attribute bearbeitenDie Attribute bearbeiten Sie über die Bedienungselemente rechts vom Namen des Tags. Mit der kleinen Menüschaltfl äche in Form eines Dreiecks unmittelbar rechts vom Namen des Tags klappen Sie eine Liste der verfügbaren Attribute aus . Attribute, die im Tag
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
bereits verwendet werden, sind grau dargestellt und können nicht gewählt werden.
�
Mit einer zweiten Schaltfl äche rechts neben der Menüschaltfl äche klappen Sie eine Liste der bereits vergebenen Attribute und ihrer Werte aus �. Diese Schaltfl äche ist wieder betriebssystemabhängig als Dreieck oder »+«/»–«-Symbol ausgeführt. Für jedes Attribut fi n-den Sie in der Liste von links nach rechts:� Eine kleine runde Schaltfl äche, mit der der ganze Eintrag ausge-
wählt werden kann, z. B. um ihn zu löschen.� Den Namen des Attributs.� Ggf. eine kleine Symbolschaltfl äche als Eingabehilfe für den Wert
(im Beispiel z. B. ein kleines Farbfeld zur Wahl der Hintergrund-farbe und ein Pfeilsymbol zum Aufruf des Dateidialogs für die Verknüpfung des Hintergrundbildes).
� Den Wert des Attributs, so wie er im HTML-Code erscheint.
Sowohl Wert als auch Name des Attributs können, so wie andere Textformationen auch, angeklickt und bearbeitet werden. Dies er-möglicht es Ihnen beispielsweise auch, Attribute einzufügen, die Go-Live in der Liste der möglichen Attribute nicht aufführt.
� Abbildung 4.16Attribute im HTML-Gliederungs- oder Outline-Editor bearbeiten
� Abbildung 4.16Attribute im HTML-Gliederungs- oder Outline-Editor bearbeiten
HTML-Gliederungseditor 133
134 Eine erste Seite und etwas HTML
Universal-Attribute für alle HTML-Tags
HTML kennt eine Reihe von Attributen , die in allen Tags auftreten können. Die meisten davon beziehen sich auf Formatierungen mit Cascading Style-sheets. Ein nützliches Universal-Attribut, das aber leider von Netscape 4 nicht ausgewertet wird, ist das Attribut »title«. Es legt einen Text fest, der als ToolTip oder QuickInfo erscheint, wenn sich der Mauszeiger etwas län-ger über dem Bereich der Webseite aufhält, der mit diesem Attribut ausge-zeichnet ist.
4.4.5 Neue Elemente einfügenNeue Elemente können Sie im HTML-Gliederungseditor auf verschie-dene Weise einfügen. In der Symbolleiste stehen zu diesem Zweck die Schaltfl ächen Neues Element hinzufügen, Neues Attribut hin-
zufügen, Neuen Text hinzufügen, Neuen Kommentar hinzufü-
gen und Neues allgemeines Element hinzufügen zur Verfügung. In allen Fällen werden Elemente mit Dummy-Werten eingefügt, die Sie dann im Gliederungseditor ändern können.
Über das Kontextmenü | Alle Arten von Elementen und Attributen können aber auch über das Kontextmenü hinzugefügt werden. Ist ein HTML-Tag ausgewählt, stehen die Befehle Objekt hinzufügen
nach und Attribut hinzufügen zur Verfügung. Praktisch an diesen Befehlen ist, dass nicht nur ein allgemeines Element eingefügt wird, sondern dass alle möglichen Tags oder Attribute in einer Auswahl-liste angeboten werden.
Aus der Objektepalette | Eine dritte Möglichkeit besteht darin, Ob-jekte aus der Objektepalette in den Gliederungseditor zu ziehen. Diese Möglichkeit ist allerdings mit Vorsicht zu genießen, da mache Objekte auf diese Weise nicht korrekt erzeugt werden. So erzeugt etwa ein Ebenen-Objekt zwar korrekt das <div>-Tag, nicht aber die dazugehörigen Stylesheet-Informationen.
4.5 Syntax prüfen
GoLive kann nicht nur Dokumente einer reinen Syntaxüberprüfung unterziehen, sondern auch alle verwendeten Tags und ihre kor-rekte Verwendung gegen eine Dokumententyp-Defi nition prüfen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(zu DTDs siehe auch Kapitel 26). Entsprechend gibt GoLive CS2 am Beginn eines jeden Dokuments einen Dokumententyp an. Dieser verweist auf eine Dokumententyp-Defi nition, die den verwendeten HTML- oder XML-Dialekt festlegt.
Erweiterungen ausnehmen | Die Regeln von Auszeichnungsspra-chen wie HTML oder XML-Sprachen lassen sich präzise in einer DTD festlegen, die bei HTML (optional) in der ersten Zeile angegeben werden kann. Bestimmte Erweiterungen können bei der Syntaxprü-fung von der Prüfung ausgenommen werden. GoLive verwendet ei-nige spezielle Tags, um bestimmte Stellen in HTML-Seiten für eigene Zwecke auszuzeichnen. Ließe sich für solche GoLive-spezifi schen HTML-»Erweiterungen« die Syntaxprüfung nicht abschalten, würde man bei einem typischen GoLive-Projekt wahrscheinlich in Fehler-meldungen ertrinken.
Prüfen gegen eine DTD | Die Syntaxüberprüfung wird mit der Sym-bolschaltfl äche Syntax prüfen am linken oberen Rand der Quell-code-Ansicht bzw. des Quellcode-Editors oder mit dem Befehl Bearbeiten • Syntax prüfen gestartet. Art und Umfang der Syn-taxüberprüfung wird im Dialog Syntax-Überprüfung abgefragt. Ist im Dokument in der ersten Zeile eine Dokumententyp-Defi nition vorhanden, wird standardmäßig gegen diese geprüft, ansonsten lässt sich der Code auch gegen fast beliebig andere Standards testen. In der unteren Hälfte des Dialogs lassen sich außerdem alle Elemente
� Abbildung 4.17Syntaxüberprüfung starten
� Abbildung 4.17Syntaxüberprüfung starten
Syntax prüfen 135
136 Eine erste Seite und etwas HTML
angeben, die Sie zulassen wollen, selbst wenn Sie den oben ausge-wählten Standard verletzen. Wie schon erwähnt, ist es in der Regel sinnvoll, GoLive-spezifi sche »Erweiterungen« zuzulassen.
Fehlerliste | Alle gefundenen Probleme im Code werden in einem Ergebnisfenster in Form einer Fehlerliste gezeigt. Zu jedem Fehler sind dort das fehlerhafte Tag und ggf. Attribut, ein aussagekräftiger Fehlertext, die Bezeichnung der Dokumententyp-Defi nition (DTD ) , gegen die der Fehler verstößt, und schließlich Zeile und Spalte, in der der Fehler aufgetreten ist, angegeben. Wird das Dokument gegen mehr als eine DTD getestet, kann derselbe Fehler auch mehrmals in der Fehlerliste auftreten! Im Gliederungseditor erscheinen die Feh-lerbeschreibungen zusätzlich in der Strukturansicht. Ein Doppelklick auf ein fehlerhaftes Tag in der Fehlerliste markiert den Fehler im Dokumentenfenster und im Quellcode. Auch in der Liste der ver-schachtelten HTML-Tags in der Statusleiste des Dokumentenfensters werden fehlerhafte Tags farblich hervorgehoben.
Dynamische Fehleranzeige | Die Syntaxanalyse läuft ständig weiter, solange die Fehlerliste angezeigt wird. Haben Sie ein Problem beho-ben und klicken in das Fenster mit der Fehlerliste, werden behobene Probleme sofort aus der Liste entfernt und ggf. neu aufgetretene Probleme sofort angezeigt. Sie können also schon, während Sie Ihre Seite bearbeiten, diese von GoLive ständig gegen alle denkbaren Standards testen lassen.
Abbildung 4.18 �
Fehlerhafter Code im Gliederungseditor mit geteilter Codeansicht
Abbildung 4.18 �
Fehlerhafter Code im Gliederungseditor mit geteilter Codeansicht
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4.6 Weitere Seiteneinstellungen
Sie haben bereits einige Seiteneinstellungen kennen gelernt, die Sie mit dem Seiteninspektor oder durch das Einfügen zusätzlicher Tags in den Seitenkopf vornehmen. Der Vollständigkeit halber sollen hier noch einige weitere Möglichkeiten gestreift werden.
Seitenränder einstellen | So können mithilfe des Seiteninspektors neben Farben und Hintergrund einer Seite auch die Seitenränder festgelegt werden. Hierzu dienen die Eingabefelder Randbreite und Höhe unten in der Dialogseite Seite des Seiteninspektors. Falls Sie hier eine Angabe machen, ersetzt diese die Standardeinstellungen des Browsers. Diese Eingabefelder wurden im einführenden Beispiel des ersten Kapitels bereits genutzt, um die standardmäßige Anzeige von Seitenrändern zu unterdrücken.
� Abbildung 4.19Fehlerhafter Code in Quellcode-Palette und Layout-Ansicht
� Abbildung 4.19Fehlerhafter Code in Quellcode-Palette und Layout-Ansicht
Weitere Seiteneinstellungen 137
138 Eine erste Seite und etwas HTML
Vorsicht mit Seitenrändern!
Die Angaben in den Eingabefeldern Randbreite und Höhe des Seiteninspek-tors korrespondieren mit den Attributen leftmargin, marginwidth, top-margin und marginheight. Diese Attribute sollten eigentlich nicht mehr verwendet werden, da leftmargin und topmargin nur vom Explorer erkannt werden und marginwidth bzw. marginheight nur vom Naviga-tor. Um es allen recht zu machen, behilft sich GoLive damit, dass es die Einstellungen einfach für beide Browser-Familien angibt. Wer ganz sauber arbeiten will und sicher sein kann, dass seinen Lesern Browser mit Style-sheet-Unterstützung zur Verfügung stehen, sollte die Seitenränder stattdes-sen über Stylesheets einstellen.
HTML-Einstellungen | Weitere Einstellungen zu Art und Umfang des HTML-Codes der Seite können Sie auf der Seite HTML des Sei-teninspektors festlegen. Wichtig ist, die Möglichkeit auszuwählen, ob JavaScript-Code ggf. in die Seite selbst eingebunden oder aus einer Library-Datei importiert werden soll. Letzteres ist standard-mäßig eingestellt und empfi ehlt sich vor allen Dingen bei größeren Sites, da der Browser den Code der Bibliothek dann nur einmal la-den muss. Wenig sinnvoll erscheint dagegen die Möglichkeit im In-spektor, wahlweise auf Tags wie <html>, <head>, <title> oder <body> in der Seite zu verzichten. Hier werden zukünftige HTML-Standards und damit auch die Browser sicherlich schärfere Maßstäbe anlegen. Mit der Schaltfl äche Komponente schließlich wählen Sie Einstellungen, die nötig sind, wenn Sie die Seite als Komponente verwenden wollen.
Abbildung 4.20 �
HTML-Einstellungen mit dem Seitenin-spektor
Abbildung 4.20 �
HTML-Einstellungen mit dem Seitenin-spektor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4.7 Objekte für den Kopf
Die typische Aufteilung einer HTML-Seite in Seitenkopf <head> und Seitenkörper <body> spiegelt sich auch in der Aufteilung des Lay-out-Editors wider. Am oberen Rand des Dokumentenfensters fi nden Sie in der Layout-Ansicht die Dreiecksschaltfl äche Head-Abschnitt
ein/ausblenden, mit der Sie eine symbolische Darstellung der Ele-mente im Kopfbereich der Seite anzeigen können. Dieser spezielle Kopfbereich im Layout-Editor dient der Anzeige und Bearbeitung der speziellen Tags für den Seitenkopf. Tags können per Drag & Drop eingefügt und vorhandene Tags angeschaut und bearbeitet werden. Diese Bearbeitung erfolgt natürlich in der Regel nicht im Quellcode- oder HTML-Gliederungseditor, sondern ganz bequem mithilfe des zugehörigen Inspektors.
Der Standard-Kopfbereich | Blenden Sie den Kopfbereich mit der Schaltfl äche Head-Abschnitt ein/ausblenden ein, so sehen Sie im Kopfbereich der leeren Seite eine Reihe von Kopfobjekten: Die Fahne steht für ein Objekt mit der Kodierungsinformation, ein Infosymbol für ein Objekt mit Metainformationen und ein Titelsymbol für den Seitentitel. Jedes dieser Objekte symbolisiert ein HTML-Tag. Klicken Sie auf eines dieser Objekte, so erscheint in der Inspektorpalette der zugehörige Inspektordialog. Im Falle des Titelobjekts wird der be-reits bekannte Seiteninspektor angezeigt. Im Falle des allgemeinen Metainformations-Tags zeigt der Inspektor die beiden Attribute und ihre Werte an. GoLive benutzt dieses Tag, um sich selbst als »Gene-rator« der Seite zu verewigen. Hinter dem Kodierungsobjekt verbirgt sich ein spezielles Metainformations-Tag, für das GoLive einen eige-
� Abbildung 4.21Kopfbereich des Lay-out-Editors mit dem Kodierungsinspektor
� Abbildung 4.21Kopfbereich des Lay-out-Editors mit dem Kodierungsinspektor
Objekte für den Kopf 139
140 Eine erste Seite und etwas HTML
nen Kodierungsinspektor zur Verfügung stellt. Schließlich hat nicht jeder die exakten Bezeichnungen der unterschiedlichen möglichen Zeichenkodierungsstandards im Kopf.
Head-Elemente für den Kopfbereich | Weitere Tags für den Kopf-bereich können Sie aus der Rubrik Head-Elemente der Objekteleiste oder Objektepalette in den Kopfbereich Ihrer Seite im Layout-Edi-tor ziehen. Dort können Sie das Objekt anwählen und seine Eigen-schaften (d. h. in HTML seine Attribute und Werte) mit dem zugehö-rigen Inspektor bearbeiten. Unter der Rubrik Head-Elemente stehen Ihnen von links nach rechts und von oben nach unten die folgenden Objekte zur Verfügung:� IsIndex-Tag <isindex> – Mit diesem Objekt/Tag erklären Sie eine
Webseite als durchsuchbar. Dazu muss auf dem Server eine Such-indexdatei angelegt werden. Ein Eingabefeld für Suchbegriffe stellt der Browser automatisch zur Verfügung. Praktisch spielt dieses Tag keine Rolle mehr, da alle Browser heute die direkte Volltextsuche in einer Seite zulassen. Das <isindex> -Tag gilt daher als veral-tet.
� Basis <base href="www. ..."> – Mit diesem Tag weisen Sie der Seite eine bestimmte URL zu. Der Browser wird diese Seite und ihre Elemente immer an dieser Adresse suchen. Das Tag macht den HTML-Code der Seite etwas robuster, da die Elemente immer von der richtigen Adresse auf dem Server geladen werden. Anderer-seits macht das Tag es aber unmöglich, die Seite auf einem lokalen Rechner zu testen oder in ein anderes Verzeichnis zu verschieben. Dieser Effekt kann aber auch erwünscht sein, wenn Sie wollen, dass die Seite bzw. ihre Bestandteile immer vom Server geladen werden sollen. Das Basis-URL-Tag gilt als veraltet.
� Schlüsselwörter <meta name="keywords" content=""> – Mit dieser Variante des Meta-Tags legen Sie eine Liste von Schlüsselwör-tern in der Seite an. Diese Liste erlaubt es Suchmaschinen (neben dem Seitentitel), Ihre Seite sinnvoll zu indizieren. Meiden Sie Tricks wie Mehrfachnennungen oder überlange Schlüsselwortlisten, um sich in den Trefferlisten der Suchmaschinen nach vorne zu mogeln. Die meisten Suchmaschinen besitzen inzwischen Heuristiken, um den Missbrauch der Schlüsselwortangabe zu unterbinden.
� Link <link href="..." rel="..."> – Das <link >-Tag ist dazu gedacht, die Beziehungen zwischen den Seiten einer Website auch für Browser oder Suchmaschinen zu dokumentieren. Die Art der
� Abbildung 4.22Die Objekteleiste mit den HTML-Objekten für den Seitenkopf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Beziehung wird durch das Attribut rel festgelegt. Einige Browser wie Mozilla und Opera blenden auf auf Wunsch eine zusätzliche Navigationsleiste mit den angegebenen Verknüpfungen ein. Das Favoriten-Symbol-Objekt (unten) ist eine spezielle Anwendung des <link >-Tags.
� Meta <meta name="..." content="..."> – Mit dem gene-rischen Meta-Tag-Objekt fügen Sie zusätzliche Informationen über die Seite zum Seitenkopf hinzu (z. B. für die Auswertung durch Suchmaschinen). Das Attribut name bezeichnet die Art der Information, content enthält die Information selbst. Einige spe-zielle Meta-Tags mit der Verwendung von name="generator" oder name="keywords" haben Sie schon kennen gelernt. Einige weitere mögliche Werte sind z. B. author, date, description, revisit-after, robots und scheme.
� Aktualisieren <meta http-equiv="refresh" content="n"> – Diese Variante des Meta-Tags erzwingt die Aktualisierung der Seite nach n Sekunden. Wenn Sie mithilfe des Inspektors oder im Quellcode-Editor das zusätzliche Attribut URL angeben, wird die Seite durch die dort angegebene neue Seite ausgetauscht.
Element <noedit> </noedit> – Mit diesem Objekt können Sie Tags in den Kopfbereich einfügen und bearbeiten, die GoLive unbekannt sind. Der Inspektor für dieses Objekt erlaubt es, den Dummy-Namen noedit durch jeden beliebigen anderen Namen auszutauschen und die Attributnamen und Werte tabellarisch einzugeben, ohne dass Sie dazu den HTML-Code selbst anfassen müssen.
� Kommentar <!-- Kommentar --> – Mit diesem Objekt fügen Sie einen Kommentar in den Kopfbereich ein. Der ein- oder mehrzei-lige Text zwischen <!-- und --> wird vom Browser ignoriert und kann dazu dienen, Ihre Anmerkungen zum Code aufzunehmen. In der Entwicklungsphase können Sie die Kommentarklammern auch benutzen, um experimentellen Code vorübergehend auszukom-mentieren. Denken Sie bei sensiblen Angaben aber daran, dass der Kommentar zum Anwender übermittelt wird, auch wenn er vom Browser nicht angezeigt wird.
Kodieren <meta http-equiv="content-type" content="text/html;charset=..."> – Mit diesem speziellen Meta-Tag-Objekt fügen Sie Informationen über auf der Seite verwendete Zeichen-satzkodierung ein. Der Menübefehl Datei • Dokumentenkodie-
rung fügt dieses Tag automatisch ein oder ändert es.
Objekte für den Kopf 141
142 Eine erste Seite und etwas HTML
� Favoriten-Symbol <link href="..." rel="shortcut icon"> – Eine spezielle Variante des <link >-Tags, mit der ein Verweis auf ein Icon für Favoritenliste bzw. Lesezeichenliste festgelegt werden kann.
� Skript <script language=""></script> – Dieses Tag kann dazu verwendet werden, Programmcode oder den Verweis auf eine Quelldatei in einer Skriptsprache wie z. B. JavaScript im Kopf der Seite einzubetten. Mit dem Attribut language geben Sie die Sprache an. Bequemer wählen Sie im Inspektor mit dem Auswahlfeld Sprache den Browser. GoLive setzt dann automa-tisch die passende Version von JavaScript oder JScript ein. Mit der Schaltfl äche Bearbeiten oder einem Doppelklick auf das Objekt starten Sie den Quelltexteditor für eingebetteten Code. Näheres zu JavaScript erfahren Sie im vierten Teil dieses Buches.
Teil IVFortgeschrittene Funktionen
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
21 Vorgefertige Aktionen
Mit seinen zahlreichen vorgefertigten Aktionen – meist Kombina-tionen aus JavaScripts und Stylesheets – kann GoLive Ihnen einen großen Teil der manuellen Kodierung von dynamischen und interak-tiven Elementen auf der Webseite abnehmen. Dieses Kapitel zeigt, wie es geht.
Angebot für viele Zwecke | Wenn Sie als Webdesigner keine be-sondere Neigung haben, sich in die Niederungen der manuellen Skriptprogrammierung zu begeben, werden Sie GoLives Angebote für automatisch generierte Skripts vielleicht zu schätzen wissen. Für eine große Anzahl von typischen Vorgängen, die bei einer Webseite vorkommen können, etwa Rollovers, das Schreiben eines Cookies oder das Umleiten auf andere Seiten, lassen sich fertige Skriptfunkti-onen sehr einfach abrufen. Insbesondere wenn es um Prototypen für die endgültige Website geht, können generierte Skripts Ihnen eine Menge Arbeit abnehmen.
Die GoLive-Aktionen sind auf die Browser der 4er-Generation von Netscape und Microsoft zugeschnitten. GoLive sorgt aber dafür, dass der eingefügte Code von anderen Browsern ignoriert wird. Damit die Besucher in dem Fall nicht leer ausgehen, sollte die Navigation innerhalb der Website auch unabhängig von den eingebauten Akti-onen funktionieren.
Anwendungsverfahren | Das grundlegende Verfahren bei dieser Skript generierung ist immer gleich: Sie wählen die gewünschte Ak-tion aus der Aktionspalette aus, geben die passenden Werte dazu ein, und GoLive erzeugt den dazugehörigen Code.
Vorgefertige Aktionen 567
568 Vorgefertige Aktionen
21.1 Smarte Aktionen
Ausnahme sind ein paar Elemente, die auf dem Smart-Register der Objektepalette zur Verfügung gestellt werden. Dazu gehört ein Zeit-stempel , an dem die Besucher erkennen können, wann die Seite zum letzten Mal geöffnet worden ist, und eine Auswahlliste für beliebige URLs. Für diese Objekte wird kein Skriptcode benötigt, sie werden einfach über GoLive-eigene Tags eingefügt.
Öffnen Sie dazu in der Layout-Ansicht die Palette und wählen Sie das Register Smart. Ziehen Sie etwa das Symbol Änderungsdatum in der Layout-Ansicht an die gewünschte Stelle. Im HTML-Code wird ein <csobj>-Tag eingefügt, das zunächst das aktuelle Systemdatum übernimmt. Wenn Sie den Inspektor einblenden, können Sie das Format der Anzeige ändern.
21.2 Rollover-Effekte
Insbesondere bei grafi schen Navigationselementen wird gern mit Rollover-Effekten gearbeitet. Wenn die Maus eine Schaltfl äche oder ein Bildelement überfährt, wechselt die Darstellung, etwa durch Än-derung der Farbe oder Einblenden von Rahmen oder eines ganz an-deren Bildes. Erreicht wird das schlicht durch den Austausch entspre-chender Bilder. Wenn Sie den Effekt vorbereiten, sollten Sie darauf achten, dass die vorgesehenen Abbildungen jeweils dieselben Ab-messungen haben. Normalerweise erfordert ein solcher Effekt ei-nige Zeilen Skriptcode, GoLive CS2 nimmt Ihnen diese Arbeit aber komplett ab.
Abbildung 21.1 �
Zeitstempel und Formatauswahlliste
Abbildung 21.1 �
Zeitstempel und Formatauswahlliste
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Eingebettet oder remote | Sie können dabei zwischen Verfahren wählen, die als eingebettete Rollover und als Remote-Rollover unter-schieden werden. Im ersten Fall nimmt ein bestimmtes Objekt durch die möglichen Mausaktionen daran unterschiedliche Gestalt an, im zweiten Fall kann durch Mausaktionen an einer bestimmten Stelle ein Bildwechsel an einer ganz anderen Stelle der Seite ausgelöst wer-den. Dafür lassen sich als Auslöserobjekte beliebige HTML-Elemente nutzen (Abschnitte, Tabellenzellen usw.).
Beispiel Rollover-Navigation | Wir wollen Ihnen das erste Verfah-ren am Beispiel einer Navigationsleiste für einen kleinen Medien-shop vorführen. Jede Seite soll unter dem Firmennamen eine Spalte von Schaltfl ächen enthalten, die zu den verschiedenen Angebots-gruppen führen. Die Homepage enthält dazu noch eine Grafi k und einen Text. Im Fuß der Seite werden Kontaktinformationen unterge-bracht. Um die verschiedenen Elemente zu platzieren, wird zunächst eine einspaltige Tabelle mit drei Zeilen angelegt. In die zweite Zeile fügen wir eine zweispaltige Untertabelle ein, deren erste Zelle wie-derum eine einspaltige Tabelle für die verschiedenen Schaltfl ächen und für ein Bild darunter aufnimmt. Die verschiedenen Tabellen wer-den über den Inspektor durch exakte Höhen- und Breitenangaben so eingerichtet, dass sich alle Elemente nahtlos aneinander fügen. In allen Fällen werden die Ränder auf Null gesetzt.
� Abbildung 21.2Beispiel für eine Navigationsleiste mit Rollover-Effekten. Wird die Maus über einen Eintrag in der Navigation links bewegt, färbt sich der Punkt dunkel ein.
� Abbildung 21.2Beispiel für eine Navigationsleiste mit Rollover-Effekten. Wird die Maus über einen Eintrag in der Navigation links bewegt, färbt sich der Punkt dunkel ein.
Rollover-Effekte 569
570 Vorgefertige Aktionen
Schritt für Schritt: Einfügen von eingebetteten Rollover-Effekten
1 Abbildungen vorbereitenFür die sieben Schaltfl ächen werden jeweils drei Abbildungen vorbe-reitet und im Website-Ordner abgelegt. Sie unterscheiden sich durch Schrift- und Hintergrundfarbe. Die aktuell ausgewählte Seite ist an der schwarzen Schrift zu erkennen. Diese »Schaltfl äche« wird einfach nur als Bild eingefügt, um darauf hinzuweisen, welches gerade die aktuelle Seite ist. Bei den Schaltfl ächen, die zu anderen Seiten füh-ren, sind zwei Zustände unterschieden: Der normale Zustand wird durch einen hellen Hintergrund gekennzeichnet, die Schaltfl äche, die von der Maus berührt wird, zeigt dagegen einen dunkelgrauen Hintergrund.
Die Gesamtbreite des Navigationsbalkens entspricht der Breite der Abbildungen. Sie können in diesem Fall im Zelle-Register des Tabelleninspektors unter Breite und Höhe jeweils die Option Auto-
matisch einstellen. Damit erreichen Sie, dass die Größe der Tabel-lenzellen genau der Bildgröße der eingefügten Abbildungen ent-spricht. Oder Sie geben die Werte exakt ein.
2 Bild-Objekt einfügenFügen Sie zunächst ein Bild-Objekt in das Layout der Seite ein. Wäh-len Sie das Objekt aus. Geben Sie über den Inspektor die Referenz auf die Bilddatei an, die für die normale Anzeige gelten soll.
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
3 Eingebetteten Rollover erzeugenBlenden Sie die Palette Rollover ein. Klicken Sie auf dem Register Rollover den Status Mauskontakt an und anschließend dort das Symbol Neues Rollover-Bild erstellen. Nun kann die Referenz auf jenes Bild eingegeben werden, das für den zweiten Status Mauskon-
takt benutzt werden soll. Die kleine Schaltfl äche mit dem Dreieck bietet unter Bilder jeweils die im Site-Ordner vorhandenen Bilder an, die schon einmal verwendet worden sind. Wenn das Dateiregis-ter der Site erreichbar ist, können Sie dafür auch das URL verknüp-
fen-Werkzeug einsetzen. Haken Sie noch die Option Vorab laden ab, die dafür sorgt, dass die Bilder vor der ersten Benutzung vollstän-dig geladen sind. Ein alternativer Text für Leute, die die Bildanzeige abschalten, ist wie bei allen Bildern sinnvoll.
�
4 Meldung einfügenSie können zu diesem Status noch eine Meldung einfügen, die in der Statusleiste des Browsers angezeigt wird, wenn der Mauszeiger das Objekt berührt. Klicken Sie dazu auf das Sprechblasensymbol � und geben Sie unter Meldung ein, was angezeigt werden soll.
Rollover-Effekte 571
572 Vorgefertige Aktionen
5 Hyperlinks verknüpfenUm eine Abbildung als Hyperlink zu nutzen, wählen Sie das Objekt im Layout-Modus aus und geben über den Inspektor im Register Link die Verknüpfung zu der Seite an, die aufgerufen werden soll.
6 Andere Buttons bearbeitenVerfahren Sie mit den anderen Navigationselementen entsprechend. Sie können die ganze Leiste anschließend in die anderen Seiten über-nehmen und entsprechend anpassen. Bei dem Element, das auf die aktuelle Seite verweist, wird dabei unter Normal jeweils die dritte Variante der Abbildung verwendet. �
21.2.1 Von GoLive generierter CodeSobald Sie Ihre Angaben in der Palette Rollover eintragen, erzeugt GoLive die notwendigen Skriptfunktionen im Quellcode. Wie der Quellcode dann aussieht, hängt davon ab, ob Sie unter den Vorein-stellungen für die Skript-Bibliothek , die Sie über das Menü Bearbei-
ten erreichen, eingestellt haben, dass der Code in der Seite abgelegt wird oder dass die Bibliothek importiert wird – womit gemeint ist, dass nur ein Link auf die Bibliothek in den Code der Seite eingefügt wird. Darauf wird weiter unten noch näher eingegangen.
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Neben den schon angesprochenen Funktionen fügt GoLive Event-Handler im <body>-Bereich ein, onMouseover und onMouseout und onClick, die jeweils die changesImages()-Funktion zur An-zeige der unterschiedlichen Bilder aufrufen.
Wenn Sie von GoLive generierten Code mit handgeschriebenem Code vergleichen, der denselben Rollover-Effekt bei einem Bild lie-fert, wird Ihnen der generierte Code vielleicht etwas aufgebläht vor-kommen. Aber das ist bei automatisch generiertem Code ziemlich üblich, weil dieser Code ja so gestaltet sein muss, dass er nicht nur für den konkreten Fall verwendet werden kann. Wer diesen Code per Hand nachbereiten will, muss sich natürlich erst einmal in die Logik des fremden Autors einarbeiten. Deshalb ist es in der Regel ratsam, sich vorweg zu entscheiden: GoLive generiert die Skripts so, wie es möglich ist, oder Sie wählen die Handarbeit.
21.2.2 Remote Rollover-EffekteUm Bildänderungen an einer anderen Stelle auszulösen als dort, wo-hin die Maus zeigt oder klickt, wird im Prinzip dasselbe Verfahren angewendet wie bei einem eingebetteten Rollover. Nur wird immer zunächst jenes Objekt ausgewählt, das den Bildwechsel veranlassen soll. Soll beispielsweise beim Klick auf die Kopfl eiste in dem be-schriebenen Beispiel ein Banner mit den Namen der Niederlassungs-
� Abbildung 21.3Einbinden der Biblio-thek und einer Funk-tion für das Laden der Bilder
� Abbildung 21.3Einbinden der Biblio-thek und einer Funk-tion für das Laden der Bilder
� Abbildung 21.4Aufruf der Funktion zur Anzeige eines Bildes durch die Event-Handler
� Abbildung 21.4Aufruf der Funktion zur Anzeige eines Bildes durch die Event-Handler
Rollover-Effekte 573
574 Vorgefertige Aktionen
orte erscheinen, wählen Sie erst die Kopfl eiste aus und öffnen dann die Rollover-Palette.
Wählen Sie für den Status Mauskontakt ein neues Rollover-Bild. Geben Sie unter Name/ID den Namen des entfernten Bildes an, das bei der Berührung mit der Maus ersetzt werden soll. Dieser Name sollte dem Bild vorher über den Bildinspektor auf dem Register All-
gemein zugewiesen werden. Unter URL geben Sie dann den Datei-namen des zweiten Bildes an, das das über den Namen angegebene Bild ersetzen soll. Die Abbildung zeigt, dass nun unter Art (des Rol-lovers) ein Remote Rollover-Symbol angezeigt wird. Die Abbildung zeigt den Effekt. Wenn die Kopfl eiste mit der Maus berührt wird, erscheinen links unten die Orte der Niederlassungen.
Haben Sie Bilder falsch zugewiesen, lassen sich die Rollover-Pha-sen über das Fenstermenü der Palette in einem Zug entfernen.
21.2.3 Automatische BilderkennungSie können das Anlegen von Rollovers vereinfachen, wenn Sie die auto matische Bilderkennung verwenden, die Sie über die kleine
Abbildung 21.5 �
Festlegen eines ent-fernten Rollover-Effekts
Abbildung 21.5 �
Festlegen eines ent-fernten Rollover-Effekts
Abbildung 21.6 �
Ferne Wirkung einer Mausberührung
Abbildung 21.6 �
Ferne Wirkung einer Mausberührung
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Dreiecksschaltfl äche des gerade angesprochenen Fenstermenüs der Rollover-Palette erreichen. Diese Automatik arbeitet mit bestimmten Präfi xen oder auch Suffi xen in den Dateinamen der Bilder, die einem bestimmten Status zugewiesen werden.
Über Bearbeiten • Voreinstellungen • Bilder • Rollover las-sen sich die Benennungeregeln bestimmen, die für die automatische Erkennung von Rollover-Bildern verwendet werden sollen. Sie kön-nen die Vorgaben beliebig überschreiben oder auch zusätzliche Va-rianten mithilfe der Schaltfl äche Neues Objekt erstellen anlegen.
Wenn Sie dann im Rollover-Register das erste Bild mit dem Stamm-dateinamen dem Normalstatus zuordnen, fi ndet GoLive die Dateien für die anderen Rollover-Zustände anhand der entsprechenden Prä-fi xe oder Suffi xe von selbst.
� Abbildung 21.7Benennungsregeln für die automatische Bildzuordnung
� Abbildung 21.7Benennungsregeln für die automatische Bildzuordnung
� Abbildung 21.8Automatische Bilder-kennung für einen Rollover-Effekt
� Abbildung 21.8Automatische Bilder-kennung für einen Rollover-Effekt
Rollover-Effekte 575
576 Vorgefertige Aktionen
Alternativen für Skriptscheue | Gerade sicherheitsbewusste Web-besucher schalten häufi g die Skriptfunktionalität ihres Browsers ganz ab. Die Navigationsinstrumente Ihrer Seite sollten dann trotz-dem brauchbar bleiben. Schaltfl ächen sollten also nicht erst durch eine von einem Skript erzeugte Bubble-Hilfe oder Statusmeldung verständlich sein.
21.2.4 Rollover von Photoshop und ImageReady Wer den gesamten Workfl ow über Adobe-Produkte abwickelt, kann bei der Gestaltung von Rollovers auf eine Vorgehensweise zurück-greifen, die von Photoshop über ImageReady zu GoLive führt.
Ebenen-Grafi k erstellen | Sie können beispielsweise in Photoshop eine Grafi k mit zwei oder drei Ebenen erzeugen. Um diese Ebenen für die Darstellung der verschiedenen Zustände eines Rollovers zu nutzen, verwenden Sie für die Ebene, die den Normalstatus des Rol-lovers darstellen soll, den Befehl Ebene • Neues ebenenbasiertes
Slice. Damit wird der Bereich festgelegt, in dem die Maus etwa den Over-Status auslöst.
Ebenen Zustände zuordnen | Anschließend wird die PSD-Datei ge-speichert und mit Datei • In ImageReady bearbeiten dort geöffnet. Nun sollte in ImageReady sowohl die Ebenen- als auch die Web-In-halt-Palette geöffnet werden, um die verschiedenen Ebenen den un-terschiedlichen Zuständen des Rollovers zuordnen zu können.
Normalen Status festlegen | Wählen Sie unter Web-Inhalt den normalen Status für den Rollover aus und blenden Sie, falls noch nicht geschehen, in der Ebenenpalette die Ebene ein, die diesem Status entsprechen soll.
Over-Status zuordnen | Benutzen Sie das Symbol Rollover-Status
erstellen, um den Status Over einzublenden. Ordnen Sie über die Ebenenpalette die entsprechende Ebene zu, indem Sie diese mithilfe des Augensymbols sichtbar machen.
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Vorschau im Browser | Zur Kontrolle kann die Vorschau im Browser eingeblendet werden, die auch den generierten Skript-Code anzeigt. Ist alles in Ordnung, sollte die Datei unbedingt zunächst wieder im PSD-Format gespeichert werden, damit bei Bedarf später in Photo-shop noch Änderungen möglich sind.
� Abbildung 21.10Die Ebenen in der Rollover-Palette
� Abbildung 21.9Zuordnung der Ebe-nen zu bestimmten Rollover-Zuständen in ImageReady
� Abbildung 21.9Zuordnung der Ebe-nen zu bestimmten Rollover-Zuständen in ImageReady
Rollover-Effekte 577
578 Vorgefertige Aktionen
Im Layout-Modus einfügen | Die Datei kann anschließend in Go-Live als Smart Photoshop-Objekt im Layout-Modus eingefügt werden. In der Palette Rollover erscheinen automatisch die den verschiedenen Zuständen zugewiesenen Ebenen. Dabei werden au-tomatisch entsprechende Statusbezeichnungen an die Dateinamen der aus den Ebenen erzeugten JPG-Dateien gehängt.
21.3 Seitenbezogene Ereignisse
Eine Reihe von Aktionen antwortet auf spezielle Ereignisse inner-halb des Browser-Fensters. OnLoad tritt beispielsweise ein, wenn der komplette Inhalt einer Seite geladen ist. OnUnload ist der Punkt, wo der Browser eine Seite entfernt, um mit dem Laden einer ande-ren Seite zu beginnen. OnParse ist der Moment, wo ein Skript vom Browser gelesen wird, die Seite aber noch nicht fertig geladen ist und noch keine Benutzereingriffe stattgefunden haben. OnCall meint den Fall, dass zu einem späteren Zeitpunkt eine bestimmte Aktion durch eine spezielle Aufrufaktion angestoßen wird. Um auf diese Ereignisse zu reagieren, können Sie vom Register Smart das Head-Aktion -Symbol oder das Kontextmenü innerhalb des <head>-Ab-schnitts der Layout-Ansicht benutzen.
�
�
�
Text in Statusleiste einblenden | Wenn Sie beispielsweise eine Meldung in die Statuszeile einfügen wollen, wenn die Seite fertig geladen ist, öffnen Sie im Layout-Modus den Head-Bereich per Klick auf das kleine Dreieck � und klicken im Smart-Register der Objekte-palette doppelt auf das Symbol Head-Aktion �.
Ein Doppelklick auf den neuen Platzhalter im <head> � öffnet den Aktionsinspektor . Die Schaltfl äche dort öffnet die Palette mit dem Register Aktion. Wählen Sie unter Ereignis � zunächst den Event-
Abbildung 21.11 �
Einfügen einer Head-Aktion
Abbildung 21.11 �
Einfügen einer Head-Aktion
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Handler onLoad — Beim Laden aus. (Bei onCall — Beim Auf-rufen geben Sie den Namen der Funktion im Textfeld an.)
�
Aktion auswählen | Welche Aktionen von dem Ereignis ausgelöst werden können, wird über die Schaltfl äche Aktion zur Auswahl ge-stellt. Neun nach Funktionen geordnete Untergruppen werden an-geboten. Ganz neu ist die Gruppe der RealOne-Aktionen, die die Vorführung von Medien über den RealOne Player steuern.
Für die Nachricht in der Statuszeile verwenden Sie die Kategorie Meldung und die Option Statuszeile. Die gewünschte Meldung wird dann in das angebotene Textfeld Statusmeldung eingetragen. Die Vorschau versagt hier allerdings, im Browser aber zeigt die Seite die gewünschte Meldung.
� Abbildung 21.13Auszug aus dem Quelltext und Anzeige im Internet Expöorer
� Abbildung 21.12Auswahl der Aktion� Abbildung 21.12Auswahl der Aktion
Seitenbezogene Ereignisse 579
580 Vorgefertige Aktionen
Skript wird generiert | GoLive trägt die gewählte Aktion im <head>-Bereich des Quelltextes ein, generiert die notwendigen Skriptfunktio-nen und fügt dem <body>-Tag das Attribut
onload="CSScriptInit();"
bei, also den gewählten Event-Handler mit dem Aufruf der entspre-chenden Funktion.
Body-Aktionen | Bei Inline- oder Body-Aktionen besteht nicht die Wahl zwischen verschiedenen Ereignissen, sie werden einfach an ei-ner bestimmten Stelle des Codes platziert und vom Browser ausge-führt, wenn die entsprechende Codezeile gelesen wird. Sie können ein Symbol dafür aus dem Objekte-Register Smart direkt in die Lay-out-Ansicht einfügen. Über die Aktion-Palette legen Sie anschlie-ßend die gewünschte Aktion fest.
21.4 Text- und bildbezogene Aktionen
Aktionen, die durch den Eingriff des Webbesuchers mittels Maus- oder Tastaturaktivitäten ausgelöst werden, sind mit Texten, Bildern oder Bildbereichen auf der Webseite verknüpft, vorausgesetzt, diese Objekte werden als Hyperlink benutzt. Ausnahme sind Formular- und Rollover-Objekte, bei denen kein Link erforderlich ist.
21.4.1 Verfügbare Event-HandlerDie Liste der möglichen Event-Handler wird in der Palette Aktion unter Ereignis zur Auswahl gestellt. (Einige Event-Handler, die in Skripts angesprochen werden können, wie etwa onChange oder on-Error, werden von den eingebauten Aktionen nicht verwendet.)
Ereignis Event-Handler Bedeutung
Mausklick onClick beim Anklicken eines Elements
Mauseintritt onMouseover beim Überstreichen eines Elements mit der Maus
Mausaustritt onMouseout beim Verlassen eines Elements mit der Maus
Tabelle 21.1 �
Ereignisse und Event-Handler innerhalb der Seite
Tabelle 21.1 �
Ereignisse und Event-Handler innerhalb der Seite
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Ereignis Event-Handler Bedeutung
Doppelklick onDblClick bei Doppelklick auf ein Element
Maustaste
gedrückt
onMousedown bei gedrückter Maustaste
Maustaste
loslassen
onMouseup beim Loslassen der Maustaste
Mausbewegung OnMousemove beim Bewegen der Maus
Taste drücken onKeydown bei einem Tastendruck, bevor die Taste losgelassen wird
Taste gedrückt onKeypress nach erfolgtem Tastendruck
Taste loslassen onKeyup beim Loslassen einer Taste
Fokus erhalten onFocus wenn ein Formularfeld ausgewählt wird
Textänderung onChange nach Abschluss einer Eingabe in ein Formularfeld
Fokus verloren onBlur wenn ein Formularfeld per Tab-Taste verlassen worden ist
Schritt für Schritt: Neues Fenster über Hyperlink öffnen
Als kleines Beispiel soll über einen Hyperlink in einer Textzeile ein eigenes Fenster für die Anzeige eines Bildes geöffnet werden. Dabei wird eine eigene Browser-Instanz aufgerufen. Diese Möglichkeit wird gern verwendet, um die Anzeige bestimmter Informationen mög-lichst genau zu kontrollieren, indem z. B. die Fenstergröße vorgege-ben wird, damit ein Bild oder ein Text auch komplett sichtbar ist.
1 Text-Link anlegenUm über einen Text-Link ein eigenes Fenster für die aufgerufene Seite zu öffnen, legen Sie zunächst einen Text-Link im Layout wie gewohnt an. Sie können das Feld für die URL frei lassen. GoLive fügt dann automatisch ein Doppelkreuz ein – das Zeichen für einen Selbstbezug , um Fehler wegen einer fehlenden Referenz im Browser abzufangen.
2 Ereignis auswählenLassen Sie das Textobjekt ausgewählt und öffnen Sie über das Menü Fenster die Palette Aktion. Wählen Sie unter Ereignis den Eintrag Mausklick � aus und klicken Sie auf die Schaltfl äche � Neues Ob-
jekt erstellen, um diesem Ereignis eine Aktion zuzuordnen. Solange
Text- und bildbezogene Aktionen 581
582 Vorgefertige Aktionen
die Art der Aktion noch nicht bestimmt ist, erscheinen ein Fragezei-chen und der Eintrag Ohne. Dem Ereignis selbst wird zur Kennzeich-nung ein Punkt vorangesetzt.
3 Aktion auswählenÖffnen Sie mit der Schaltfl äche Aktion � die Liste der Aktionskatego-rien , wählen Sie die Kategorie Link und die Aktion Neues Fenster.
��
�
�
4 Einstellungen für das neue FensterDer Dialog wird um Steuerelemente für die gewählte Aktion erwei-tert. Geben Sie unter Link � die Verknüpfung zu der Seite an, die in dem neuen Fenster angezeigt werden soll. Wird mit Frames gearbei-tet, kann unter Ziel noch der Ziel-Frame angegeben werden. Wählen Sie die gewünschten Einstellungen für das neue Fenster in puncto Größe, Bildlaufl eisten, Menüanzeige etc.
5 AbschlussTesten Sie die Aktion in der Vorschau oder besser noch mit einem oder mehreren Browsern. �
21.4.2 Kombinationen von AktionenSie können zu einem Link-Objekt Aktionen für unterschiedliche Er-eignisse und auch mehrere Aktionen gleichzeitig für ein einzelnes Ereignis festlegen, etwa eine Meldung in der Statuszeile und das Abspielen eines Sounds. Benutzen Sie in der Palette jedes Mal die
Abbildung 21.14 �
Aktion Neues Fenster auswählen und ein-stellen
Abbildung 21.14 �
Aktion Neues Fenster auswählen und ein-stellen
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Schaltfl äche Neues Objekt erstellen, um eine weitere Aktion hin-zuzufügen. Ist eine Aktion überfl üssig geworden, markieren Sie sie in der Liste Aktion und klicken auf den Papierkorb.
Aktionen können so kombiniert werden, dass beispielsweise der Wert, den eine Aktion A abliest, von einer anderen Aktion B geprüft wird, um dann eventuell eine dritte Aktion C anzustoßen.
Die hier angesprochenen Aktionen können auch innerhalb einer Animation eingefügt werden, wie es im nächsten Abschnitt beschrie-ben wird. In diesem Fall werden die Aktionen durch den Zeitpunkt ausgelöst, der ihnen in der Zeitleiste zugewiesen wird.
21.4.3 Verfügbare Aktionen
Kategorie Aktion Bedeutung
Abrufen Feldprüfung Wertet ein Textfeld aus.
Formularelement-
wert abrufen
Liefert den Wert eines Elements in einem Formular.
Ebenenposition
abrufen
Liefert die x/y-Koordinaten der lin-ken oberen Ecke der aktuellen Ebene.
Bild Bild vorab laden Lädt ein Bild in den Browser-Cache, sodass später schnell darauf zuge-griffen werden kann.
Bildwechsel Erlaubt den Wechsel von Bildern auf einer Seite ähnlich wie bei einem Rollover-Effekt, aber unab-hängig von der Berührung des Bildes durch den Mauszeiger.
Täglicher Bildwechsel Je nach Wochentag wird ein anderes Bild angezeigt.
Zufallsbild Zwischen drei angegebenen Bildern wird nach dem Zufallsprinzip gewechselt.
Link 2 Frames als Ziel Mit einem Link kann der Inhalt von zwei Frames geändert werden.
CSS-Umleitung Erlaubt die Zuordnnung unter-schiedliches Stylesheets in Abhän-gigkeit von dem genutzten Browser.
Fenster öffnen Fordert die Eingabe von Breite und Höhe für ein neues Fenster an, im dem dann die aktuelle Seite ange-zeigt wird.
Fenster schliessen Schließt das aktuelle Fenster.
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen
Text- und bildbezogene Aktionen 583
584 Vorgefertige Aktionen
Kategorie Aktion Bedeutung
Link Frame abstoßen Lädt die aktuelle Seite in einem Frame-losen Fenster.
Frame erzwingen Lädt das Frameset einer Seite, sodass der Besucher der Seite diese in ihrem originalen Frameset anse-hen kann.
Gehe zum Link Führt den Besucher zur angege-benen URL.
Gehe zu vorheriger
Seite
Führt zur zuletzt besuchten Seite zurück.
Link-Bestätigung Öffnet ein Fenster für eine Bestäti-gung, die dann den Zugang auf die angegebene Seite freigibt.
Neues Fenster Öffnet ein neues Fenster mit der angegebenen Seite. Die Eigen-schaften des Fensters können ange-geben werden.
Neues Fenster
einschieben
Öffnet ein neues Browser-Fenster im Zentrum des Bildschirms.
PDF-Umleitung Die Aktion prüft, ob das PDF-Plug-In installiert ist. Wenn ja, wird die angegebene PDF-Datei geöffnet.
Protokollnavigation Erlaubt Sprünge zu bestimmten Sei-ten, die zuletzt besucht worden sind.
SVG-Umleitung Die Aktion prüft, ob das SVG-Plug-In von Adobe installiert ist. Wenn ja, wird die angegebene SVG-Datei geöffnet.
SWF-Umleitung Die Aktion prüft, ob das SWF-Plug-In für Flash-Animationen installiert ist. Wenn ja, wird die angegebene Seite mit der Flash-Animation geöff-net.
Täglich umleiten Der Besucher wird je nach Wochen-tag zu unterschiedlichen Seiten geführt.
Taste gedrückt Wenn der Besucher eine der ange-gebenen Tasten drückt, wird eine vorher dem OnCall-Ereignis zuge-ordnete Aktion ausgeführt.
Textaustausch
(ID)
Ändert den Text eines über die Ele-ment-ID ausgesuchten Ebenen- oder HTML-Elements.
Umleitungsauf-
forderung
Gibt dem Besucher bis zu fünf Wahlmöglichkeiten, welche Seite angezeigt werden soll.
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Kategorie Aktion Bedeutung
Link Zeitabhängiges
Umleiten
Steuert je nach Tageszeit zwei unter-schiedliche Seiten an.
Ziel außerhalb Führt dazu, dass ein Link in einem Fenster eine Seite in einem anderen Fenster anzeigt.
Zufalls-Links Erlaubt die Angabe von sechs Links, die nach dem Zufallsprinzip genutzt werden.
Meldung Dokument schreiben Schreibt den angegebenen Text, wenn die Seite geladen wird.
Letzte Änderung
(Formular)
Zeigt das Datum an, zu dem die For-mularseite zuletzt auf den Server hochgeladen wurde.
Letzte Änderung (ID) Zeigt das Datum an, zu dem die Seite zuletzt auf den Server hochge-laden wurde, in dem angegebenen Element oder der Ebene an.
Kennwort Ermöglicht die Abfrage eines Kenn-worts für den Zugang zur Seite.
Meldung anzeigen Öffnet einen Dialog mit dem ange-gebenen Hinweis.
Statuszeile Schreibt den angegebenen Text in die Statuszeile des Browsers, z. B. wenn die Maus über eine Schaltflä-che fährt.
Multimedia Alles stoppen Stoppt alle DHTML-Animationen, die gerade ablaufen.
Autom. Diashow Erzeugt eine Diashow, die automa-tisch abgespielt wird.
Autom. Diashow
stoppen
Stoppt eine automatisch abgespielte Diashow.
Überblendung Ordnet dem angegebenen Rahmen verschiedene Auf- oder Abblend-effekte zu.
Diashow Erzeugt eine Diashow, in der der Besucher blättern kann.
Maus folgen Sorgt dafür, dass eine Ebene dem Mauszeiger folgt.
Ebene ziehen Erlaubt es, die angegebene Ebene über die Webseite zu ziehen.
Pendeln Die Ebene wird zwischen zwei ange-gebenen Punkten hin- und herbe-wegt.
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
Text- und bildbezogene Aktionen 585
586 Vorgefertige Aktionen
Kategorie Aktion Bedeutung
Multimedia Schwebeebene Fixiert die Position einer Ebene rela-tiv zur Position des Browser-Fens-ters.
Sichtbarkeit Ein- und Ausblenden von Ebenen.
Szene abspielen Spielt die angegebene Szene ab.
Szene stoppen Stoppt die angegebene Szene.
Ton abspielen Spielt den angegebenen Sound ab.
Ton stoppen Stoppt das Abspielen eines Sounds.
Verschieben nach Bewegt die Ebene an eine bestimmte Stelle im Browser-Fens-ter, unabhängig von der Ausgangs-position.
Verschieben um Bewegt die Ebene im Browser-Fens-ter über die angegebene Distanz.
RealPlayer Umgang Führt den unter Aktion ausgewähl-ten Vorgang aus.
Clip wiedergeben Spielt den angegebenen Clip ab.
Clip-Info abfragen Zeigt Informationen zu einem Clip an, soweit sie vorhanden sind.
Eingebettete Aktionen Erlaubt es, zahlreiche Aktionen fest-zulegen, die im Browser angezeigt werden. Mehr dazu über http://ser-vice.real.com/help/library/encoders.html.
Hintergrundfarbe
für Video festlegen
Erlaubt die Auswahl der Hinter-grundfarbe für ein Video aus der Farbpalette.
Installierte Kompo-
nenten abrufen
Liefert einen String mit den zum RealPlayer installierten DLLs und den Versionsnummern.
Interpret-Info anzei-
gen
Zeigt den Interpreten an, wenn die Information verfügbar ist.
Player-Eigenschaft
abfragen
Erlaubt die Auswahl von Eigen-schaften, die abgefragt werden sol-len, etwa die Bandbreite oder die Sprachkennung.
Player-Status
abfragen
Zeigt den aktuellen Status des Pla-yers: 3 = Wiedergabe, 4 = Pause, 0 = gestoppt etc.
URL vorab laden Lädt die angegebene Ressource, um sie später zu nutzen.
Versionsnummer
abfragen
Gibt die Version des Players aus.
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Kategorie Aktion Bedeutung
RealPlayer Voreinstellungen
anzeigen
Zeigt das ausgewählte Register des Dialogfeldes für die Voreinstel-lungen des Players.
Wiedergabeliste
löschen
Löscht die aktuelle Liste des Players und stoppt die Wiedergabe aller Medien.
Zu URL wechseln Wechselt nach einer angegebenen Verzögerungszeit zu der angege-benen Ressource.
Zur Wiedergabeliste
hinzufügen
Übernimmt den aktuell ausgeführten Clip in die Wiedergabeliste.
Sonstiges Bildlauf nach links Versetzt das Fenster um eine bestimmte Zahl von Pixeln mit der angegebenen Geschwindigkeit.
Bildlauf nach oben s.o.
Bildlauf nach rechts s.o.
Bildlauf nach unten s.o.
Bildlaufstatus Erlaubt eine Laufschrift in der Sta-tuszeile.
Datumseinstellung
(ID)
Zeigt die Zeit oder das Datum in der angegebenen Ebene oder dem HTML-Element an, wobei das For-mat gewählt werden kann.
Digitaluhr Erlaubt es, eine Digitaluhr zu erzeu-gen, deren Ziffern durch eigene Bil-der dargestellt werden.
Dokument drucken Öffnet den Dialog zum Drucken der aktuellen Webseite oder des Fra-mes.
IE-Fehlerbehebung
(PNG)
Sorgt dafür, dass der Internet Explo-rer den Alpha-Kanal von Bildern im PNG-Format wiedergeben kann. Im Alpha-Kanal können Informationen über die Auswahl von Bildbereichen für bestimmte Operationen gespei-chert werden.
Fenstergröße ändern Setzt die Breite und Höhe des Browser-Fensters.
Hintergrundfarbe
festlegen
Ändert die Hintergrundfarbe des aktuellen Fensters.
Netscape-Fehler-
behebung (CSS)
Korrigiert den Bug, der bei Netscape 4 im Zusammenhang mit CSS auf-tritt, wenn die Fenstergröße verän-dert wird.
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
Text- und bildbezogene Aktionen 587
588 Vorgefertige Aktionen
Kategorie Aktion Bedeutung
Sonstiges Suchmaschine Verwertet eine Benutzereingabe als Suchbegriff und öffnet ein Fenster mit den Ergebnissen, die die vorge-gebene Suchmaschine findet.
Weltzeituhr Erlaubt, eine laufende Uhr mit der Zeit für eine bestimmte Zeitzone einzufügen.
Spezial Aktion aufrufen Stößt eine in <head> definierte Aktion an.
Bedingung Prüft beispielsweise, ob eine bestimmte Taste gedrückt wurde oder ob eine bestimmte Zeit abge-laufen ist. Solange die Bedingung nicht erfüllt ist, wird entweder keine oder eine andere Aktion ausgeführt als von dem Moment an, wo die Bedingung erfüllt ist.
Funktion aufrufen Führt die gewählte benutzerdefi-nierte Skriptfunktion mit den ange-gebenen Parametern aus.
Aktion "Sequenz" Führt eine ausgewählte Liste von Aktionen nacheinander aus.
Taste Stößt eine Aktion an, wenn eine Taste mit dem angegebenen ASCII-Zeichencode gedrückt worden ist.
Überlappung Prüft, ob sich Ebenen im Browser-Fenster überlappen, und stößt unterschiedliche Aktionen an, je nachdem, was der Fall ist.
Wartezustand Legt fest, dass eine bestimmte Zeit lang gewartet wird, z. B. bis eine bestimmte benutzerdefinierte Bedingung erfüllt ist. Die Bedin-gungen können mithilfe der Akti-onen Taste, Überlappung und Zeit-
limit formuliert werden.
Zeitüberschreitung Erlaubt, den beiden Zuständen vor und nach Ablauf eines Zeitlimits unterschiedliche Aktionen zuzuord-nen.
Variablen Besuche Gibt Meldungen aus in Abhängigkeit von der Zahl der Besuche der Seite. Setzt voraus, dass der Besucher Cookies zulässt.
Besucher-Cookie Erlaubt es, zu prüfen, ob der Besu-cher die Seite zum ersten Mal besucht, um z. B. eine spezielle Begrüßungsseite anzuzeigen.
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
Tabelle 21.2 �
Tabelle der vorge-fertigten Aktionen (Forts.)
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Kategorie Aktion Bedeutung
Variablen Cookie lesen Liest ein Cookie mit dem angege-benen Namen.
Cookie löschen Löscht ein Cookie , indem das Ver-fallsdatum geändert wird.
Cookie schreiben Schreibt das angegebene Cookie auf den Computer des Webbesuchers. Die Laufzeit kann angegeben wer-den.
Variable testen Fragt die angegebene Variable ab.
Variable deklarieren Deklariert Namen und Typ einer Variablen.
Variable festlegen Gibt der angegebenen Variablen einen bestimmten Wert.
Variable initialisieren Setzt den Anfangswert einer Vari-ablen.
21.4.4 Aktionsfi lter für BrowserDa bestimmte Aktionen nur von aktuellen Browsern unterstützt wer-den, gibt Ihnen GoLive die Möglichkeit, vorweg festzulegen, ob Sie auf Aktionen verzichten wollen, die von älteren Browser-Generati-onen noch nicht unterstützt werden. Benutzen Sie das kleine Dreieck in der Palette Aktion und den Befehl Aktionsfi lter festlegen.
21.4.5 Einsatz der Skript-Bibliothek Die Skript-Funktionen, die für die eingebauten Aktionen verwendet werden, können direkt in jeder Seite, die Aktionen enthält, einge-baut werden. Die Alternative ist, GoLive zu veranlassen, eine externe Bibliothek dafür anzulegen. GoLive kann eine solche Bibliothek mit dem vorgegebenen Namen CSScriptLib.js erzeugen. Das Verhalten
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
� Tabelle 21.2Tabelle der vorge-fertigten Aktionen (Forts.)
� Abbildung 21.15Filter für Aktionen, die bestimmte Browser noch nicht unterstützen
� Abbildung 21.15Filter für Aktionen, die bestimmte Browser noch nicht unterstützen
Text- und bildbezogene Aktionen 589
590 Vorgefertige Aktionen
des Programms in dieser Hinsicht lässt sich einheitlich für die ganze Anwendung oder auch bloß für bestimmte Sites oder einzelne Sei-ten festlegen.
Generelle Vorgaben | Die Vorgabe für das Programm insgesamt kann über Bearbeiten • Voreinstellungen • Skript-Bibliothek ge-nerell festgelegt werden. Wenn Sie die Option GoLive Skript-Bibli-
othek importieren auswählen, werden ab dem nächsten Start von GoLive nicht mehr die Funktionen selbst, sondern nur noch Bezüge auf die CSScriptLib in den Quellcode eingefügt. Wenn Sie nur mit einzelnen Seiten arbeiten, wird die Datei unter Windows XP oder auf dem Mac in einem Ordner Modules/JScripts/GlobalScripts innerhalb des Programmordners angelegt.
Ist eine Website geöffnet, wird eine Kopie der Bibliothek in dem Unterordner /GeneratedItems des Site-Stammordners abgelegt, so-bald eine Seite gespeichert wird, die solche Funktionen der Biblio-thek verwendet. Auf diese Weise wird sichergestellt, dass die Funk-tionen später auf dem Webserver vorhanden sind. Der Bibliothek- und Ordnername kann über die Voreinstellungen auch geändert wer-den. Mithilfe der Schaltfl äche Bibliothek neu erzeugen kann die Bibliothek, falls sie aus irgendeinem Grund zerstört worden ist, neu generiert werden.
Separate Einstellungen pro Website | Statt einer generellen Ver-wendung der Bibliothek lässt sich auch für jede Site separat eine entsprechende Einstellung festlegen, wenn Sie Web-Site • Einstel-
lungen • Skript-Bibliothek benutzen. Festlegungen für eine ein-zelne Seite werden über das HTML-Register vorgenommen, wenn das Seitensymbol ausgewählt worden ist. Darauf ist im Abschnitt zu den Komponenten schon eingegangen worden.
Die Auslagerung des Codes in eine separate Bibliothek bringt Vor-teile, wenn zahlreiche Seiten mit Aktionen vorhanden sind. Der
� Abbildung 21.16Vorgaben für die Skript-Bibliothek
� Abbildung 21.16Vorgaben für die Skript-Bibliothek
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Browser muss nicht jedes Mal den gesamten Code neu laden. Spezi-ell bei dynamischen Komponenten, wie sie in Kapitel 16 über Mus-terseiten, Vorlagen und Komponenten beschrieben worden sind, ist es ratsam, mit der Bibliothek zu arbeiten, weil ein Browser nur den <body>-Abschnitt einer Komponente liest und Skripts, die im <head> untergebracht sind, ignorieren würde.
Damit zudem nicht immer die komplette Bibliothek geladen wer-den muss, wenn nur wenige Funktionen daraus verwendet werden, haben Sie im Dateiregister des Website-Fensters auch die Möglich-keit, den ausgelagerten Skriptcode auf jene Funktionen zu beschrän-ken, die in der Website tatsächlich verwendet werden. Benutzen Sie dazu den Befehl Skript-Bibliothek optimieren , wenn alle benötig-ten Aktionen eingefügt sind. GoLive kann auch generell oder für bestimmte Sites so eingestellt werden, dass diese Optimierung im-mer dann stattfi ndet, bevor die Site veröffentlicht oder exportiert wird. Dies geschieht über die Optionen zu Web-Site • Einstel-
lungen • Hochladen/Exportieren.
21.4.6 GoLive-Aktionen erweiternDie Einbindung von fertigen Aktionen in GoLive ist so konzipiert, dass die Liste der verfügbaren Aktionen jederzeit erweitert werden kann. Adobe bietet über http://share.studio.adobe.com Aktionen zahlreicher Entwickler an. Die Aktionen werden in GoLive ähnlich wie Plug-Ins in einem Unterordner des Programmordners, geordnet nach Kategorien, abgelegt, wie Abbildung 21.18 zeigt.
� Abbildung 21.17Voreinstellung der Skriptoptimierung beim Hochladen
� Abbildung 21.17Voreinstellung der Skriptoptimierung beim Hochladen
Text- und bildbezogene Aktionen 591
592 Vorgefertige Aktionen
Die Aktionen sind in HTML-Dateien defi niert, die die Dateiendung *.action verwenden. Wenn Sie beispielsweise die Datei für die Ak-tion Statuszeile in den GoLive-Editor laden lassen, fi nden Sie im Quellcode neben den üblichen HTML-Tags die GoLive-spezifi schen Tags <csactionclass> zur Identifi kation der Aktion und <csac-tionparam> für die Parameterübergabe an die jeweilige Aktion.
21.4.7 AktionssequenzenIn manchen Fällen ist es wünschenswert, mit einem einzigen Maus-klick gleich eine ganze Reihe von Aktionen auszulösen. Die einfache Lösung ist, einem bestimmten Ereignis mehrere Aktionen zuzuord-nen. Wenn aber eine bestimmte Aktionssequenz häufi ger benötigt wird, ist es sinnvoll, diese Sequenz nur einmal zu defi nieren und dann von verschiedenen Stellen aus als eine Einheit aufzurufen. Wie das gemacht werden kann, soll das folgende Beispiel zeigen.
Abbildung 21.18 �
Ordnerstruktur für Aktionen
Abbildung 21.18 �
Ordnerstruktur für Aktionen
Abbildung 21.19 �
Quellcode einer Aktion
Abbildung 21.19 �
Quellcode einer Aktion
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Schritt für Schritt: Einem Ereignis mehrere Aktionen zuordnen
In diesem Workshop werden wir uns anschauen, wie man durch ein Ereignis gleich mehrere Aktionen auslösen kann.
1 Einstellungen im Aktionsinspektor
�
�
�
Zunächst wird in den <head>-Bereich ein Head-Aktionen-Symbol eingefügt. Wenn dieses Symbol ausgewählt ist, kann über die Ak-tion-Palette und Aktion das Ereignis Beim Aufrufen – OnCall �
ausgewählt werden. In diesem Fall wird das Feld Name zur Eingabe einer eindeutigen Bezeichnung für die vorgesehene Aktionssequenz
� geöffnet. Anschließend wird über die Schaltfl äche Aktion � in der Kategorie Spezial die Aktion Sequenz ausgewählt.
2 Festlegen der einzelnen SchritteIm Dialogfeld erscheint ein Listenfeld mit einem Symbol Neues Ob-
jekt erstellen �, das automatisch eine zweite Schaltfl äche Aktion � einblendet. Über diese Schaltfl äche kann die erste Aktion der vor-gesehenen Sequenz bestimmt werden. Für die weiteren Aktionen verfahren Sie entsprechend. Soll die Reihenfolge innerhalb der Se-quenz noch einmal geändert werden, benutzen Sie die kleinen Pfeil-schaltfl ächen.
Text- und bildbezogene Aktionen 593
594 Vorgefertige Aktionen
�
�
3 Schaltfl äche anlegenInnerhalb der Seite selbst wird nun eine Schaltfl äche angelegt, die für den Aufruf der so defi nierten Schrittfolge sorgen soll. Wenn Sie die Schaltfl äche auswählen, benutzen Sie gleich die Palette Aktion, denn bei Elementen eines Formulars ist eine Verlinkung, wie oben schon beschrieben, nicht notwendig, um Aktionen zuzuordnen.
4 Aktionsfolge zuordnenDem Ereignis Mausklick kann nun die komplette Aktionsfolge zu-gewiesen werden. Nehmen Sie dazu die Option Spezial • Aktion
aufrufen. Über das Listenfeld hinter dem roten C wird der Name der vorher defi nierten Sequenz angeboten.
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
5 Ergebnis in der VorschauDas Ergebnis kann in diesem Fall in der Vorschau getestet werden; bei komplexen Aktionen ist es notwendig, die Prüfung über den Standard-Browser vorzunehmen. Der Screenshot zeigt, dass per Klick auf die Schaltfl äche gleich zwei Fenster geöffnet werden.
�
� Abbildung 21.20Zwei Fenster werden mit einer Schaltfl äche geöffnet.
Text- und bildbezogene Aktionen 595
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index
Index 893
.xmp-Dateien 830<area> 280<b> 163<base> 140<blockquote> 168<body> 124<button> 636, 639<cite> 159<code> 159<csactionclass>-Tag 592<csactionparam>-Tag 592<csobj>-Tag 568<dfn> 159<div>-Tag 598<dt> 165<em> 159<font> 149<form> 623<frame> 379<frameset> 379<i> 163<img> 229<input> 634<input>-Tag 558<isindex> 140<kbd> 159<label> 639<layer>-Tag 597<li> 164<link> 140, 141, 142<map> 275<meta> 123, 140, 391<nobr> 169<noedit> 141<noframes> 389<ol> 164<option> 635<p> 160, 164<par> 716<samp> 159<script> 142, 556<select> 635<smil>-Tag 715<strike> 163<strong> 159<sub> 163<sup> 163<table> 327<td> 327, 339
<textarea> 632<th> 327, 339<title> 123<tr> 327<tt> 163<u> 163<ul> 164<var> 159
AAbsatz-Tag 147Absatzformat 158Absatzmenü 160Absolut farbmetrische Farbraum-
näherung 205Accept 739Accept-Charset 739Accept-Encoding 739Accept-Language 739Accept-Ranges 742Acrobat Distiller 654Acrobat Reader 653Active Server Pages 732, 883ActiveX 883ActiveX-Steuerelemente 883ActiveX Data Objects 883Adaptiv 222Adobe Bridge 815Adobe Bridge Center 834Adobe Dialog 823Adobe Stock-Photos 831Adobe Version Cue 534AER 450Aktion 567, 580, 583
2 Frames als Ziel 583Aktion aufrufen 588Alles stoppen 585auswählen 581Autom. Diashow 585Autom. Diashow stoppen 585Bedingung 588Besuche 588Besucher-Cookie 588Bildlauf 587Bildlaufstatus 587Bild vorab laden 583Bildwechsel 583Blende 585Cookie 589
894 Index
Cookie lesen 589Cookie löschen 589Cookie schreiben 589Diashow 585Dokument schreiben 585Ebenenposition abrufen 583Ereignis auswählen 581Erweiterungen 591Feldprüfung 583, 644Fenstergröße ändern 587Fenster öffnen 583Fenster schließen 583Formularwert abrufen 583Frame abstoßen 584Frame erzwingen 584Funktion aufrufen 588Gehe zum Link 584Gehe zur vorherigen URL 584Hintergrundfarbe festlegen 587in der Zeitleiste 612Inline 580Inspektor 578Kennwort 585Link-Bestätigung 584Maus folgen 585Mehrfache Zuweisung 583Meldung anzeigen 585Netscape-Fehlerbeheb. CSS 587, 605Neues Fenster 584Palette 582PDF-Umleitung 584Pendeln 585Protokollnavigation 584RealOne 586Schwebeebene 586Sequenz 588, 593Sichtbarkeit 586Statuszeile 585Suchmaschine 588SVG-Umleitung 584SWF-Umleitung 584Szene abspielen 586Szene stoppen 586Täglicher Bildwechsel 583Täglich umleiten 584Taste 588Ton abspielen 586Ton stoppen 586Überlappung 588Umleitungsaufforderung 584Variable abfragen 589Variable deklarieren 589Variable festlegen 589Variable initialisieren 589
Verschieben nach 586Verschieben um 586Vorschau 582Warten 588Weltzeituhr 588Zeitabhängiges Umleiten 585Zeitleiste 583Zeitlimit 588Ziel außerhalb 585Zufallsbild 583
Aktionenpalette 103Aktionsfilter 589Aktionskategorien 582Aktionssequenz 592Aktionsspur 612align 169Anfrage 735
Parameter 739Animated GIF 194, 883Animation 26, 54, 606
Szenen abspielen 611Anker 462Ankersymbol 38Anschluss 750Anschlussnummern 750Ansicht, Spaltenauswahl für
Dateiregister 462Ansichtspalette 421, 429Antialiasing 41Antwort 735Antwort-Header 741Apache, Konfigurationsdatei 751Apache-Server 748
PHP 763API 883Applet 883Arbeitsbereichszugriff 851Arbeitsfarbraum 204Arbeitsfenster 26Arbeitsgruppe 857Artefakte 194ASP 732ASP-Seite 450ASP.NET 732Asset-Konvertierungseinstellungen-
Inspektor 843Assets suchen 90Attribute 123Auschecken 858, 864Auskommentieren 132Ausrichten 169Außenabstand 312Auszoomen 38, 82Auszüge 233, 481
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 895
BBackup-Datei 438Bandbreitenökonomie 68Base-Tag 387Basis-URL-Objekt 387Bearbeitungsstatus 464Benennungsregeln 465Benutzerführung 69Bestand, Formulare 642Bibliothek
Auszüge 495Komponenten 492Musterseiten 489Objekte anlegen 495
Bild aus InDesign-Paket 845Bildinspektor 217, 438Bildschirmgröße 82BPS 54Bridge
Alternativenansicht 871Ansichten 817Arbeitsbereich speichern 819Beschriftung 817, 827Dateigruppe 835Dateitypzuordnungen 821Favoriten 825Kollektion 826Komposition herunterladen 832Metadaten 819Platzieren in GoLive 828Stapel-Umbenennung 824Statusleiste 817Suchfunktionen 823Voreinstellungen 819Werkzeuge 817
Browser 64, 735, 883auswählen 108
Browser-Krieg 64Browser-Weiche 565, 625
CCamera Raw 829Cascading Stylesheets siehe CSS 283,
521, 883cellpadding 335center 169CGI siehe Common Gateway Interface
615, 884Parameterübergabe per URL 616Perl 617Steuerinformationen 632Verfahren 618
CGI-Aufruf 616CGI-Skripts 450, 616cHTML 725Client 735, 884Codeschnipsel 233Codierung 625Common Gateway Interface 615CompuServe 193Connection 738Content-Length 742Content-Type 742Cookie 801, 884Cookie-Header 802CorelDraw 217CREATE TABLE 772Creative Suite 218Creative Suite-Farbeinstellungen 828CSS 146, 283, 879
<style>-Tag 291Anweisung 285Blockelemente 310Definitionen 288Deklaration 285Editor 288Elemente positionieren 312Externe Datei generieren 521Hintergrundgestaltung 313InDesign-Import 844Kompatibilitätsliste 284Kontextuelle Selektoren 318Layout-Objekte 363Layout-Raster 355Maßeinheit em 307Objekte 362Priorität 317Profile 320Pseudo-Klassen 319Pseudo-Selektoren 318Quellcode 291Selektor 285Stamm-Vorlage 320Stil-Info 315Stilvorlagen 283Stilvorlagen aus InDesign 838Stilvorlagen in Tabelle 353Syntax 285Textumfluss 311Vererbung 317
CSS1 284, 286CSS2 284, 286CSS3 284CSScriptLib.js 589CVS-Server 857
896 Index
DDatei
entsperren 518löschen 472suchen 471
Datei-Browser 638Datei als Alternative speichern 870Dateieigenschaften 470Dateienansicht 90Dateiinspektor 421Dateinamenserweiterungen 117Dateiregister 461Datenbanken 450, 744Deckkraft 34Designentwürfe 442DHTML siehe Dynamic HTML 732,
880, 884Browser-Kompatibiliät 613Zeitachsen-Editor 607
Diagramm 402, 441abschicken 457Abschnitte 445als PDF exportieren 456als SVG exportieren 456Anmerkungen 455Ausrichtung 452Bereitstellungsregister 443, 457drucken 455Festlegen der Ankerseite 443Hierarchie lösen 424in Website übernehmen 457Konstruktionsgruppe 454Konstruktionsregister 443Master-Register 443, 455Menu 424Miniaturen aktualisieren 429neu erstellen 442Objektepalette 444Präsentation 455Raster 448Register 442Sammlung erstellen 425Seitenumbrüche 447Umbau der Struktur 458Zeichnungsebene 443zu losen Seiten verschieben 428zurückrufen 458
Diffusion 223DOCTYPE-Deklaration 700, 705Document Object Model 884Dokument-Typ-Definition 696, 884Dokument-Werkzeugleiste 84Dokumentenfenster 26, 81
Dokumentenstatistik 516Dokumententyp 123DOM siehe Document Object Model
884DOM-Level 2 559Doppelkreuzzeichen 604Downloadbare Schriftarten 155Downloadbare Zeichensätze 155Drag & Drop 75Drehung einer PDF 663Dropdown-Liste 101DTD siehe Document-Type-Definition
136, 699, 884Durchsuchen-Schaltfläche 102Dynamic HTML 884Dynamische Site anlegen 774
EEbene-Inspektor 601Ebenen 35, 284, 598, 606
Bewegung aufzeichnen 608Bild einfügen 600ID-Stil 598, 603Rastereinstellungen 606Sichtbarkeit 604stapeln 601Text einfügen 603Verzeichnis 603, 605z-Index 598, 602
Ebenenanker 38, 47Ebeneneigenschaften 36ECMA 884ECMA-262 551ECMAScript 551Einchecken 858Eingabewerte, Überprüfung 644Einzoomen 38, 82Element 884Entity 173EOT-Format 155Ereignisse 578, 580Ersatzdarstellung 173Event-Handler 558, 573, 580Explorer 90Export, PDF-Dokumente 667Extend Scripts 727eXtensible Hypertext Markup Language
885eXtensible Markup Language 885eXtensible Stylesheet Language 885Externe Links überprüfen 479Externes CSS, InDesign-Import 844Externe Stylesheets 286
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 897
FFarbattribut entfernen 190Farbeinstellungen 207Farben 175
Adaptiv 222CMYK-Farbraum 183Diffusion 223Farbreduktion 222festlegen 189Graustufen 183HighColor 176indizierte 177Muster 223Perzeptiv 222RGB-Farbraum 183Selektiv 222Störungsfilter 223websichere 177, 503zuordnen 503
Farbenpalette 103Farbenwerte 179Farbfeld 101, 126Farbfeldbibliothek 126Farbmanagem-Einstellungen 207Farbmanagement 203Farbmanagement-Richtlinien 208Farbmanagement-System 203Farbpalette »Farbe« 175Farbpalette »Farbfelder« 175Farbpaletten 175Farbprofile 194, 203Farbraum 203Farbtiefe 177Favoriten importieren 477Fehlerregister 411Feldprüfung 645Fenster wechseln 81Fenstereinstellungen 83Fenstergröße 83Fenstermenü 26Fett 161file 255File Transfer Protocol 885Film
Aktionen einfügen 684exportieren 686Exportoptionen 687Filter 682Sample-Spur 680speichern 686Titel einfügen 680
Finder 90Flash 679
Fokus erhalten 581Fokus verloren 581Formate aus InDesign 838Formatierung
Explizit 163Formatvorlagen 283formmail 632Formulare 450, 558, 619, 885
Aktionen zuordnen 624Bestand 642Eingabefokus setzen 640Entwurf 627Feldprüfung 644Kennwort 629Kennwortfeld 631Listenfelder 633Markierungsfelder 633Objektstruktur 649Optionsschaltfelder 633Plausibilitätskontrolle 643Pop-up-Menüs 633Schaltflächen 636Spaltenanordnung 629Tabulatorreihenfolge 641Textbereich 629, 632Texteingabefelder 629Textfeld 629Überprüfung 643Umbruch 633Verborgenes Feld 629
Formularinspektor 623Formularobjekt 619FPS siehe BPS 54Frames 53, 369, 885
<noframes> 373anlegen 374Bandbreitenbedarf 370Basis-URL 388Bildlauf 380Druckprobleme 373Frame-Editor 374Frameset-Inspektor 383Hyperlinks 369, 385Inspektor 379Lesezeichen 372Namen 379Navigationselemente 370Navigationsprobleme 372Objekte 374Sitenapping 371Suchmaschinen 374, 391verschachteln 378Vorschau 382
Frameset 369, 371, 378
898 Index
Freehand 217ftp 255FTP siehe File Transfer Protocol 736,
885FTP-Browser 528FTP-Protokoll 523FTP-Server 412
Dateien auf dem Server editieren 531Dateien herunterladen 531Kennwort 525Passiver Modus 524
Für GoLive verpacken 838Für Web speichern 37
GGehe zu Zeile 120Geschützte Leerzeichen 629Gestaltungsraster 343GIF siehe Graphics Interchange Format
885Transparenz 41
GIF-Animation 37GIF-Format 37, 193Gliederungseditor 129GoLive
Bedienungsphilosophie 18Globale Einstellungen 108
Grafik einfügen 210Grafik-Formate 193
GIF 193JPEG 194PNG 194
Grafik-Link anlegen 261Graphics Interchange Format 885
HHandbuch, als PDF-Datei 107Handcursor 38Hauptpalettenfenster 28, 76, 93Head-Aktion 578Hierarchie 397Hintergrundfarbe 41, 125, 197Homepage 420, 885Host 738Hotspot 277HTML 64, 692, 732, 879, 885
Tags 692Universale Attribute 134
HTML-Baumstruktur 83HTML-Baumstruktur, Palette 106HTML-Code
Kommentare 141Leerzeichen 121
HTML-Datei aus Excel 521HTML-Filter 520HTML-Gliederungseditor 129
Schaltflächen 85HTML-Seiten aus Word 520HTML-Stilvorlage 171HTML-Syntax 121HTML/XHTML-Konvertierung 706htmlspecialchars 792HTTP siehe Hypertext Transfer Protocol
886GET-Methode 738Header 737, 738request-line 737Ressourcen 738status-line 737Statuscodes 741Verbindungsloses Protokoll 736Zustandsloses Protokoll 736
HTTP-Port 735HTTP-Protokoll 805HTTP/1.0 735HTTP/1.1 533, 735httpd.conf 763, 765https 255HttpSession 807Hyperlink 72, 885
anlegen für Grafik 261anlegen für Text 256aus beliebigem Browser übernehmen
260aus Explorer übernehmen 259bearbeiten 264, 265, 266Externen Link anlegen 259Farbe 257für PDF 659löschen 267PDF zu HTML 659Point & Shoot 256zu PDF 660
Hypertext 886Hypertext Markup Language 885Hypertext Transfer Protocol 886
Ii-mode 725ICC-Profil 209iccprofile-Attribut 209idpk-Datei 841IETF siehe Internet Engineering Task
Force 735, 886Illustrator 217Imagemap 385, 886Imagemap-Bereichsinspektor 385
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 899
iMode 450InDesign
Bild übernehmen 845InDesign, CSS-Stilvorlagen 838InDesign-Dokument verpacken 838InDesign-Formate 838InDesign-Layout 841InDesign-Paket, eigenständiges 841InDesign-Paket, in Site importiertes 844InDesign-Paket, XML-Komponente 846InDesign-Paket für GoLive 838InDesign CS 837index.html 404Innenabstand 312Inspektor 28Inspektor »PDF Erstellung« 672Inspektorpalette 28, 78Intensität 395Interaktion 551Interaktivität 398Interlaced GIFs 886Internes CSS, InDesign-Import 844Interne Stylesheets 286Internet Engineering Task Force 886Internet Explorer 64Interpolation 608invalidate() 807ISO/IEC 16262 551iTV 450
JJava 886Java-Applet 450, 552, 886JavaScript 549, 886
Browser-Abfrage 564Datei eröffnen 564Formularbeispiel 552Funktionen 556speichern 564Voreinstellungen 553
JavaScript-Bibliothek 52JavaScript-Editor 552JavaScript-Einstellungen 52JavaScript-Inspektor 552Java Server Pages 733, 748JDBC 771Joker 506JPEG 887
Kompressionsfaktor 202JPEG-Format 49, 194JScript 551, 555, 887JSP 733JSP-Seite 450
KKacheln 129Kantenglättung 41Keyframe 53, 607Klasseninstanz 551Kommentarinspektor für PDF 659Kommentarwerkzeug für PDF 658Komponenten 481
ändern 493anlegen 491Platzhalter 494verwenden 492
Komponentenordner 492Kompressionsfaktor 202Kompressionsstufen 194Konfigurationsdatei für Apache 751Konsistenz 396Konstruktionsanmerkung 454Kopfbereich 82Kursiv 161
LLabelinspektor 639Ladezeiten 69Last-Modified 742Layout-Größe 83Layout-Raster 355, 360
konvertieren in 337Typ erkennen 358
Lean-Rollover 382left 169Lesezeichen importieren 477Link 434
entfernen 267erstellen 256per Drag & Drop 266
Link-Ansicht 90, 92, 438, 440, 473, 475
Link-Bereiche für PDF 659Link-Inspektor 659Link-Rahmen
ausblenden 604Link-Typ
bearbeiten 449Liquid Layouts 362Liste
nummeriert 164unnummeriert 164
Listeneintrag 163Listenfunktionen 163Listenmenü 165livesrc-Attribut 229
900 Index
MMAMP 770Markieren-Palette 485Markierungsfeld 101Metadaten 820MIME-Typ 563Miniaturen 429MMS 721Mozilla 65MPEG 677Muster 223Musterseite 481
ändern 490anlegen 482Bereiche einrichten 482Bereichstypen 483editierbare Region 485entsperren 490Inline-Auswahl 484nachträglich zuweisen 489Seite von Muster ablösen 490speichern 487sperren 486verwenden 488
Musterseiten-Info 409Mustervorlagen 70my.ini 755MySQL 849
Administrator-Konto 756als Dienst 757CREATE DATABASE 775CREATE TABLE 775Installationsprogramm 753Server-Instanz 754
mysql_connect 779mysql_fetch_array 781, 782mysql_query 781, 782mysql_select_db 780MySQL Administrator 759MySQL Query Browser 759
NNamensraum 705, 887Navigation 397
PDF-Fenster 656Navigationsansicht 90, 419, 434Navigationselemente 481Navigationsfenster
Zoomen 426Navigationsleiste 482, 569Navigationsstruktur
entwerfen 419Untergeordnete Seite einfügen 420
Netscape 65Netzwerkstatus 534news 255Nummerierte Standardliste 165
OObjekte
Eigenschaften 550einfügen per Doppelklick 99Event-Handler 551Methoden 550standardkonforme 99
Objektepalette 77, 103Objekthierarchie 560Objektklassen 551Objektmodell 550Objektstruktur, Formular 649ODBC siehe Open database connectivity
887onBlur 581OnCall 578, 593onChange 581onClick 559, 580onDblClick 581onFocus 581onKeydown 581onKeypress 581onKeyup 581OnLoad 578onMousedown 581onMouseout 580onMouseover 580onMouseup 581OnParse 578OnUnload 578Open database connectivity 887Opera 65Ordnerinspektor 469Ordnerstruktur 90OS Dialog 823Outline-Editor 85, 129
PPaketfenster 841Palette »HTML-Baumstruktur« 106Palette »Markieren« 700Palette »Tabelle und Felder« 330Paletten 93
am Rand minimieren 95ausblenden 96Zusammenstellung ändern 94
Palettenfenster 28, 76, 93minimieren 96
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 901
Palettengruppe 76Palettenmenü 26, 80Palette QuickTime Wired Action 106Parser 887Pausvorlage 33PDA 451PDF siehe Portable Document Format
451, 653, 887Acrobat Distiller 654Acrobat Reader 653als PDF-Datei speichern 656als Strukturbild 662Drehung der importierten Bitmap 663Hyperlink 659Import aus 662Kommentare bearbeiten 658Kommentarinspektor 659Kommentarwerkzeug 656, 658Link-Bereiche 659Links bearbeiten-Werkzeug 656Neuer Link-Werkzeug 656PostScript 654Smart Object 662Textanmerkungen 658
PDF-Anker 661PDF-Dateien bearbeiten 655PDF-Dateien einbinden 655PDF-Dokument 653PDF-Export 667PDF-Fenster 656
Fußzeile 656Navigation 656
PDF-Import 838PDF-Link-Inspektor 659PDF-Optionen 662PDF-Vorschau 85, 671PDF Erstellung, Inspektor 672Perl 887Perzeptiv 222Perzeptive Farbraumnäherung 204Photoshop 217
Sichtbarkeitsvariable 241Textersetzungsvariable 241
PHP 733, 763, 887Architektur 773Installation 764Mac 767
PHP-Code 778PHP-Seite 451php.ini 765, 807phpinfo() 743phpMyAdmin 776Pipettenwerkzeug 182
Plausibilitätskontrolle bei Formularen 643
Plug-In 888PNG siehe Portable Network Graphic
888PNG-Format 194Point & Shoot 256, 265, 436, 449Point & Shoot-Schaltfläche 101Port 750Portable Document Format 653, 887Portable Network Graphic 888Portnummer 888PostScript 654PRF-Format 155Primäres Site-Fenster 90Printdesign 63Proportionen beibehalten 42Protokoll 536, 866Protokoll-Funktion 432Prototyping 217, 417Prozentwerte 181Publish-Server 90
QQuellcode
Simultane Ansicht 119Quellfarbraum 204QuickTime 675
Film erstellen 676Filmspur 679Plug-in 689Sprites importieren 684Standbilder 681Streaming-Server 679, 688Streaming-Spur 680Temporärer Filmordner 678Text-Sample 681Tonspur 682Voreinstellungen 678Zeitachse 676
QuickTime-Editor 675QuickTime-Player 713
RRAM 719Rand 50Rapport 129Raster 324Rasterschrittweite 360Rechtschreibprüfung 147Referenzen ändern 469Referenzinspektor 478
902 Index
Relativ farbmetrische Farbraumnäherung 205
Request 735Response 735RFC 2109 803Rollover 382
Automatische Bilderkennung 574eingebettet 569remote 569
Rollover & Aktionen-Palette 572RSS Reader 834RTSP 688Rückgängig 39
SSafari 65Sammlung 425Sättigung, Farbraumnäherung 205Scalable Vector Graphics 888Schaltflächen 558Schriftarten
Lizenzen 155Schriftarten, downloadbar 155Schriftsammlungen
abrufen 501anlegen 500anwenden 501Link-Ansicht 502
Schriftschnitte 310Schweberahmen 35Seiten
Familien 426Kontextmenü 470
Seiteneigenschaften 82Seiteneinstellungen 125Seitenelement einfügen 34Seiteninspektor 82, 125Seitenregisterschaltflächen 100Seitentitel 124Sekundäres Site-Fenster 90Selektiv 222Server
verbinden/trennen 529Verbindungen einrichten 535
Server-Komponenten 744Server-Side Includes 618Server einrichten 747Serverseitige Skripts 744Session 805
PHPSESSID 805session getID() 807Session-ID 805session_start 811
Set-Cookie-Header 802setcookie 803SGML siehe Standard Generalized
Markup Language 692, 888Sichern von Dokumenten 86Sichtbarkeitsvariablen 41, 241Simulation langsamer Internet-
verbindungen 68Sitzungs-ID 807Skalierung eines Smart Objects 228Skalierungssymbol 216Skript-Bibliothek 491, 563, 572, 589
optimieren 527, 591Voreinstellungen 590
Skripteditor 82, 556Skriptgenerierung 567Skripts
.js-Erweiterung 563als Kommentar verbergen 556Ereignismodelle 559externe 562in <body> 562Namen 555Quellangabe 563Register »Skript« 563serverseitige 744Sprachauswahl 555Ziel-Browser 555
Slices 218Smart-PDF-Object 662Smart Object 195, 217, 218
Grafikformate 218kopieren 249nachträglich ändern 42Sichtbarkeitsvariable 241Skalierung 42, 228Textersetzungsvariable 241
Smart Objects-Register 568, 578SMIL 451, 692, 712, 888
Real Objekt 718Region 715
SMIL-Player 718Sprite 888Sprite-Spur 684Sprungziele 388SQL 772
DELETE 800INSERT 793UPDATE 789
SQL-Anweisung 772, 793sql-Skript 776SSI siehe Server-Side Includes 618, 619Staging-Server 747Stammordner 434, 461
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 903
Standardeinheit 321Standard Generalized Markup Language
888Statuskennzeichnung 407Statusleiste 83Stilvorlagen 171
CSS 283Störungsfilter 223Streams 675Strukturbild 33Strukturbildpalette 33Stylesheet
anlegen 287InDesign-Import 844
submit 797Suchen & Ersetzen 505Suchroboter 392SVG siehe Scalable Vector Graphics
451, 691, 709, 888Illustrator 709
SWF 451SWF-Spur 679Symbolleiste 26Synchronisation 536Syntax-Überprüfung 598Syntaxprüfung 564
TTabellen 323
3D-Rand 335Abstände festlegen 335als Layout-Instrument 323als Layout-Instrumente 341Ändern der Abmessungen 333anlegen 326Ausrichtung 337auswählen 326Automatische Zellenhöhe 339Breite bearbeiten 331CSS-Stilvorlagen 353Eigene Formate entwickeln 352exportieren 337Formatvorlagen 351Hintergrundfarbe 335Höhe bearbeiten 331importieren 336Inhalte formatieren 350Layout-Beispiel 343Rand ausblenden 335schachteln 327Seitenaufbau 341Spalten auswählen 329Tabellenobjekt 326Zeilen auswählen 329
Zeilen oder Spalten auswählen 328Zellen auswählen 329Zellen zusammenfassen 340
Tabelleninspektor 326, 333Tabellenorientiertes Layout-Raster 358Tabellenpalette 105, 330, 630Tag 121, 888
bearbeiten in Gliederungseditor 132binär/unär 85
Tag-Leiste 47, 106, 331Tag-Liste 83Tag-Selektor 47, 106, 331Tag auskommentieren 132TCP/IP 735TCP/IP-Socket 735Text 145
Link zuordnen 253Textanmerkungen 658Textauszeichnung 145Texteingabe 147Texteingabefeld 100Textersetzungsvariable 241Textformatierung 145
Ausrichtung 169Explizite Auszeichnung 163Listenfunktionen 163Strukturauszeichnung 158Überschriftsebenen 160
TextinspektorLink-Register 264
Textrahmen 355, 357Textspur 680Tomcat 748Transparente GIFs 629Tweening 608
UÜberprüfung, Eingabewerte 644Überschriftsebenen, Textformatierung
160Umlaute 173Undo 39Unicode 888Uniform Resource Locator 255, 888Unterbrochener Hyperlink 888Unvollständige Links 422, 434URL siehe Uniform Resource Locator
255, 737, 888bearbeiten 436, 477Escape-Codes 740Parameter bearbeiten 477Selbstbezug 581
URL-Behandlung 403URL-Eingabe 436
904 Index
URL-Kodierung 625URL-Rewriting 807URL-Syntax 740URL-Umschreibung 806usemap-Attribut 281User-Agent 739
VValidierung 888Variablen 40Variableneinstellungen 244VBScript 889Vergrößerungsfaktor 82Verkleinerungsfaktor 82Verknüpfungen ändern 474Verpacken für GoLive 838Version Cue 849
als verwendet markieren 864Alternativen 869Arbeitsbereich 850Benutzeraktivitäten 858Benutzer ändern 863Benutzerkonten anlegen 853Benutzersperren aufheben 856Login 852, 857mit Projekt verbinden 858Offline arbeiten 866PDF-Überprüfung 860Rückgriff auf ältere Versionen 868Synchronisation 865Verwendungsmarkierung aufheben
866Voreinstellungen 855
Version Cue-Administration 850Version Cue-Version speichern 851Versionskontrolle aktivieren 859Versionskontrolle verwenden 857Versionskontrollsystem 850, 857, 864Verwaiste Dateien 476Video 451Videospur 678Visibone-Schema 188Vorlagen 481
speichern 487verwenden 488
Vorlagenordner 408
WW3C siehe World Wide Web
Consortium 284, 889WAP siehe Wireless Application
Protocol 694, 725, 889WBMP 728, 889
Web-Einstellungen 320, 700Web-Site
Upload-Einstellungen 526Web-Site-Assistent 402Web-Site-Navigator 427WebDAV 533, 889
Register 536Server verbinden/trennen 536Teamunterstützung 534Virtuelles Verzeichnis anlegen 535Zugriffsberechtigungen 535
WebDAV-Server 523, 849Voreinstellungen 535
Webdesign 61Typografie 63
Webeinstellungen 559Webseite 889
publizieren 526Statuskontrolle 433
Webserver 889Websichere Farben 177, 186Website 401, 889
Ansichten 426Anzeigefilter 430Aufräumoptionen 519aus Vorlage erstellen 409bereinigen 517Berichte erstellen 513Dateien hinzufügen 467Dateityp .site 406Datenbank 463Diagrammfenster 443Einstellungen 109Entwurf 66exportieren 532Extern-Register 476Farben abrufen 504Farben zusammenstellen 502Fehlende Dateien 475Fenster für Referenzen 428Gliederungsansicht 429Grundstruktur 417hochladen 530Homepage 404importieren 410Inhaltsverzeichnis erstellen 434in Version Cue konvertieren 859komplett auf FTP hochladen 529Lose Seiten 428Musterseiten verwenden 423Navigationsansicht 415neu anlegen 403Objekte 416Ordneranzeige 462
21
22
23
24
25
26
27
28
29
30
31
32
33
A
B
C
D
Index 905
Ordnerstruktur ändern 468Panorama-Fenster 427Papierkorb 472Partiellen Baum anzeigen 430Primäres Fenster 415Qualitätskontrolle 513Seitengruppen einfügen 423Server zuordnen 536Skript-Bibliothek 590Stammordner 405Standardkonfiguration 416übernehmen 517Unbenutzte Objekte 519Upload 536Versionskonflikt 537Verwendete Referenzen abrufen 477vom Server importieren 412Voreinstellungen 407Vorlagen verwenden 423web-content 405web-data 406web-settings 405
Website-DesignErweiterbarkeit 70Plattformabhängigkeit 70
Website-Fenster 461Website-Papierkorb 406, 424Website-Projektdatei 402
Datenbank 402Webstandards 880Werkzeugleiste 26, 77Wireless Application Protocol 889WML 451, 692, 725, 727Wohlgeformtes XML 889Wohlgeformtheit 695, 700Workflow 217World Wide Web Consortium 889
XXAMPP 768XHTML siehe eXtensible Hypertext
Markup Language 692, 703, 885Syntax 706
XHTML-Basic 451XHTML 1.0 Basic 703, 705XHTML 1.0 Frameset 705
XHTML 1.0 Mobile 705XHTML 1.0 Übergang 705XHTML 1.1 705XHTML 1 Streng 705XHTML Basic 725XHTML Mobile Profile 703XLink 711XML siehe eXtensible Markup Language
146, 443, 520, 691, 880, 885DTD importieren 700Objektmodell 696Parser 695Syntax 693Tags 692Validierung 699Vokabular 694Zwischensprache 694
XML-Anwendung 889XML-Dokument 696XML-Editor 692XML-Komponente aus InDesign
Paket 846XML-Schema 696XML-Vokabular 691XSL siehe eXtensible Stylesheet
Language 885
YYMCK-Farbdarstellung 34
ZZeichensatzcodierung 123, 173Zeichensätze, downloadbar 155Zeilenumbrüche 169Zeitachse 53Zeitachseneditor 53, 82Zeitspur 53, 607Zeitstempel 568Zelle
Breite bearbeiten 331Höhe bearbeiten 331
Ziel-Frame 582Zielfarbraum 204zoom 82Zoom-Wert 38, 82