adobe golive 5.0 - classroom in a book 3-8272-5895-3 [PDF]

Zitiervorschau

ADOBE ILLUSTRATOR 8.0 1 Classroom in a Book

Classroom in a Book

Adobe GoLive 5.0

2

ADOBE ILLUSTRATOR 8.0 3 Classroom in a Book

Classroom in a Book

Adobe GoLive 5.0

Markt+Technik Verlag

Bitte beachten Sie: Der originalen Printversion liegt eine CD-ROM bei. In der vorliegenden elektronischen Version ist die Lieferung einer CD-ROM nicht enthalten. Alle Hinweise und alle Verweise auf die CD-ROM sind ungültig.

4

Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei der Deutschen Bibliothek erhältlich. ISBN 3-8272-5895-3

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Titel der amerikanischen Originalausgabe: Adobe GoLive 5.0 – Classroom in a book © 2000 by Adobe Systems Incorporated Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig.

10 9 8 7 6 5 4 3 2 1 03 02 01 00

ISBN 3-8272-5895-3 © 2000 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH Martin-Kollar-Str. 10-12, 81829 München/Germany Einbandgestaltung: Adobe Press Lektorat: Cornelia Karl, [email protected] Herstellung: Anna Plenk, [email protected] Übersetzung und Satz: Maik-Felix Gomm, Güby Druck: Kösel Druck, Kempten, KoeselBuch.de Dieses Produkt wurde mit Adobe FrameMaker, Adobe Photoshop und Adobe Illustrator auf dem Macintosh erstellt und auf chlorfrei gebleichtem Papier gedruckt. Printed in Germany

ADOBE GOLIVE 5.0 5 Classroom in a Book

Inhalt Einführung

Über dieses Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Voraussetzungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Installieren des Programms . . . . . . . . . . . . . . . . . . . . . . . . 14 Navigation Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Installieren der Schriften von der Classroom-in-a-Book-CD . 15 Kopieren der Classroom-in-a-Book-Dateien . . . . . . . . . . . . 15 Weitere Unterlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Der Arbeitsbereich

Lektion 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Verwenden der Site-Fenster . . . . . . . . . . . . . . . . . . . . . . . . 23 Verwenden des Website-Fensters . . . . . . . . . . . . . . . . . . . . 23 Verwenden eines zweiten Site-Fensters. . . . . . . . . . . . . . . . 26 Verwenden des Dokumentfensters . . . . . . . . . . . . . . . . . . . 29 Verwenden der Werkzeugleiste. . . . . . . . . . . . . . . . . . . . . . 31 Verwenden von Paletten . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Verwenden der Objekte-Palette . . . . . . . . . . . . . . . . . . . . . 34 Verwenden des Inspektors . . . . . . . . . . . . . . . . . . . . . . . . . 36 Verwenden der Farben-Palette . . . . . . . . . . . . . . . . . . . . . . 37 Schlüsselwörter hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . 38 Verwenden von Kontextmenüs . . . . . . . . . . . . . . . . . . . . . . 40 Vorschau mit Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . 40 Vorschau in einem Webbrowser . . . . . . . . . . . . . . . . . . . . . 42 Verwenden der Online-Hilfe . . . . . . . . . . . . . . . . . . . . . . . . 43

Mit Text und Tabellen arbeiten

Lektion 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Entwerfen einer Webseite. . . . . . . . . . . . . . . . . . . . . . . . . . 54 Hinzufügen von Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

6 INHALT

Formatieren von Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Erzeugen von Listen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Hinzufügen eines Zeilenumbruchs . . . . . . . . . . . . . . . . . . . 62 Ändern der Textfarbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Tabellen hinzufügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Hinzufügen einer Tabelle, um den Textfluss zu steuern. . . . . 64 Hinzufügen einer Tabelle zur Darstellung von Tabellenkalkulationsdaten . . . . . . . . . . . . . . . . . . . . . . . . . 67 Formatieren einer Tabelle mit Tabellenkalkulationsdaten . . . 69 Ändern der Farbe von Tabellenzellen. . . . . . . . . . . . . . . . . . 74 Inhalte einer Tabelle sortieren. . . . . . . . . . . . . . . . . . . . . . . 76 Hinzufügen von Schriften . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Erfassen eines Tabellenstils. . . . . . . . . . . . . . . . . . . . . . . . . 80 Bearbeiten von Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Vorschau der Webseite in Adobe GoLive . . . . . . . . . . . . . . . 83 Eigene Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Entwerfen von Webseiten

Lektion 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Erzeugen einer neuen Website . . . . . . . . . . . . . . . . . . . . . . 96 Hinzufügen von Dateien zur Website . . . . . . . . . . . . . . . . . 97 Erzeugen einer dynamischen Komponente . . . . . . . . . . . . . 99 Hinzufügen eines Layout-Rasters . . . . . . . . . . . . . . . . . . . 101 Hinzufügen eines Bildes mit Hilfe der Schaltfläche »Point & Shoot« . . . . . . . . . . . . . . . . . . . . . . 102 Hinzufügen eines Bildes unter Verwendung eines Tastaturkürzels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Hinzufügen von Bildern durch Ziehen . . . . . . . . . . . . . . . . 106 Ausrichten und Verteilen mehrerer Objekte. . . . . . . . . . . . 107 Entwerfen der Homepage. . . . . . . . . . . . . . . . . . . . . . . . . 110 Hinzufügen eines Hintergrundbildes . . . . . . . . . . . . . . . . . 110 Hinzufügen einer Komponente . . . . . . . . . . . . . . . . . . . . . 111 Hinzufügen von Text mit Hilfe von Layout-Textrahmen. . . . 112 Hinzufügen von Text mit Hilfe einer Tabelle . . . . . . . . . . . . 115

ADOBE GOLIVE 5.0 7 Classroom in a Book

Eine selbst definierte Farben-Palette erzeugen und Text färben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Entwurf der Appraisal-Seite aktualisieren . . . . . . . . . . . . . 120 Eine dynamische Komponente hinzufügen . . . . . . . . . . . . 121 Eine selbst definierte Farben-Palette aktualisieren. . . . . . . 122 Entwerfen der Seite Hottest Buy . . . . . . . . . . . . . . . . . . . . 123 Hinzufügen des ersten Rahmens. . . . . . . . . . . . . . . . . . . . 124 Hinzufügen des zweiten Rahmens . . . . . . . . . . . . . . . . . . 126 Bearbeiten einer dynamischen Komponente . . . . . . . . . . . 129 Vorschau in Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . 132 Eigene Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Verwenden von Smart Objects

Lektion 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Mehr zu Smart Objects. . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Verwenden von Smart Photoshop Objects . . . . . . . . . . . . 142 Platzieren eines Smart Photoshop Objects . . . . . . . . . . . . 143 Ändern der Größe eines Smart Photoshop Objects . . . . . . 146 Bearbeiten eines Smart Photoshop Objects. . . . . . . . . . . . 148 Verwenden von Smart Adobe Illustrator Objects . . . . . . . . 150 Platzieren eines Smart Illustrator Objects . . . . . . . . . . . . . 150 Verwenden von Smart Adobe LiveMotion Objects . . . . . . . 153 Platzieren eines Smart LiveMotion Objects . . . . . . . . . . . . 154

Verknüpfungen

Lektion 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Einführung in Verknüpfungen . . . . . . . . . . . . . . . . . . . . . . 163 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Öffnen einer Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Erzeugen einer Verknüpfung von einer Grafik . . . . . . . . . . 166 Überprüfen einer Verknüpfung . . . . . . . . . . . . . . . . . . . . . 170 Erzeugen von Ankern . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Überprüfen von Ankern . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Erzeugen von Hypertext-Verknüpfungen . . . . . . . . . . . . . . 174 Erzeugen externer Verknüpfungen . . . . . . . . . . . . . . . . . . 177

8 INHALT

Erzeugen von E-Mail-Verknüpfungen . . . . . . . . . . . . . . . . 181 Ändern der Farbe und der Hervorhebung einer Verknüpfung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Erzeugen einer Aktion . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Verwenden von Imagemaps . . . . . . . . . . . . . . . . . . . . . . . 187 Erzeugen von Hotspot-Bereichen auf einer Imagemap . . . 189 Bearbeiten von Hotspots . . . . . . . . . . . . . . . . . . . . . . . . . 191 Verknüpfen einer Imagemap mit einer Webseite . . . . . . . . 193 Voreinstellungen für Link-Warnungen. . . . . . . . . . . . . . . . 196 Finden und Reparieren von fehlerhaften Verknüpfungen . . 196 Überprüfen von Verknüpfungen . . . . . . . . . . . . . . . . . . . . 198

Arbeiten mit Frames

Lektion 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Erzeugen eines Framesets . . . . . . . . . . . . . . . . . . . . . . . . 210 Frameset ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Einrichten der Inhalt-Frames. . . . . . . . . . . . . . . . . . . . . . . 214 Hinzufügen, Verschieben und Löschen von Frames . . . . . . 217 Hinzufügen von Inhalt in Frames . . . . . . . . . . . . . . . . . . . 219 Erzeugen von Ziel-Verknüpfungen . . . . . . . . . . . . . . . . . . 223 Erzeugen einer Verknüpfung zurück auf die Homepage. . . 224 Verknüpfen des Framesets mit Ihrer Homepage . . . . . . . . 225 Hinzufügen einer Aktion, damit das Frameset immer geladen wird. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Vorschau in einem Webbrowser . . . . . . . . . . . . . . . . . . . . 227

Erzeugen von MausRollover-Effekten

Lektion 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Öffnen der Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Erzeugen einer Maus-Rollover-Schaltfläche. . . . . . . . . . . . 239 Erzeugen zusätzlicher Rollover-Schaltflächen für eine Navigationsleiste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

ADOBE GOLIVE 5.0 9 Classroom in a Book

Hinzufügen von Bildern zu schwebenden Rahmen . . . . . . 246 Eine Aktion zum Ein- und Ausblenden von Rahmen hinzufügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Maus-Rollover-Schaltflächen mit Seiten verknüpfen . . . . . 253 Hinzufügen einer Aktion, um einen Popup-Menü-Effekt zu erzielen. . . . . . . . . . . . . . . . . . . . . 253 Vorschau in einem Webbrowser . . . . . . . . . . . . . . . . . . . . 255

Erzeugen von Animationen

Lektion 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Arbeiten mit schwebenden Rahmen . . . . . . . . . . . . . . . . . 263 Schwebende Rahmen stapeln. . . . . . . . . . . . . . . . . . . . . . 267 Ändern der Stapelreihenfolge. . . . . . . . . . . . . . . . . . . . . . 270 Animieren eines schwebenden Rahmens . . . . . . . . . . . . . 271 Hinzufügen einer Head-Aktion, um Animationen korrekt darzustellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Verwenden von Keyframes . . . . . . . . . . . . . . . . . . . . . . . . 273 Bearbeiten von Keyframes . . . . . . . . . . . . . . . . . . . . . . . . 277 Animieren von mehreren schwebenden Rahmen. . . . . . . . 280 Hinzufügen von Aktionen zu Animationen . . . . . . . . . . . . 286 Erzeugen einer neuen Szene. . . . . . . . . . . . . . . . . . . . . . . 292 Hinzufügen einer Aktion, um die Szene abzuspielen . . . . . 295 Vorschau in einem Webbrowser . . . . . . . . . . . . . . . . . . . . 296

Verwenden von Aktionen und JavaScript

Lektion 9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Erzeugen von Head-Abschnittsaktionen . . . . . . . . . . . . . . 306 Erzeugen einer Aktion »Browser-Weiche«. . . . . . . . . . . . . 306 Hinzufügen einer Aktion »Netscape Fehlerbeheb CSS« . . . 308 Automatisches Anpassen eines Browser-Fensters . . . . . . . 310 Zuweisen von Aktionen zu Seitenelementen . . . . . . . . . . . 310 Verwenden von Aktionen, um Schweberahmen zu beeinflussen . . . . . . . . . . . . . . . . . . . 311

10 INHALT

Erzeugen einer Aktion »OnCall«. . . . . . . . . . . . . . . . . . . . 317 Vorbereiten von Bildern für Aktionen . . . . . . . . . . . . . . . . 317 Hinzufügen von »OnCall«-Aktionen zu Bildern . . . . . . . . . 319 Kopieren von Grafiken mit zugewiesenen Aktionen . . . . . . 322 Hinzufügen von Aktionen zu Textverknüpfungen. . . . . . . . 323 Verwenden von JavaScript-Skripts . . . . . . . . . . . . . . . . . . 325 Zuweisen von Skripts zu Seitenelementen. . . . . . . . . . . . . 326

Formulare einrichten

Lektion 10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Erzeugen eines Formularabschnitts. . . . . . . . . . . . . . . . . . 341 Hinzufügen einer Tabelle für den Formularentwurf . . . . . . 341 Hinzufügen eines Name-Felds . . . . . . . . . . . . . . . . . . . . . 343 Hinzufügen von Adressfeldern . . . . . . . . . . . . . . . . . . . . . 345 Ausrichten von Tabellenzellen. . . . . . . . . . . . . . . . . . . . . . 347 Verknüpfen von Beschriftungen mit Textfeldern. . . . . . . . . 348 Erzeugen eines Popup-Menüs . . . . . . . . . . . . . . . . . . . . . 350 Festlegen der Tabelleneigenschaften. . . . . . . . . . . . . . . . . 352 Speichern von häufig verwendeten Objekten . . . . . . . . . . 353 Hinzufügen eines Bildes über zwei Spalten . . . . . . . . . . . . 356 Hinzufügen von Optionsfeldern . . . . . . . . . . . . . . . . . . . . 358 Ändern eines Listenfelds . . . . . . . . . . . . . . . . . . . . . . . . . 361 Hinzufügen eines Hotspot-Bereichs . . . . . . . . . . . . . . . . . 364 Hinzufügen einer Zurücksetzen-Schaltfläche . . . . . . . . . . . 366 Ändern des Haupttabellenrands und des Zellabstands . . . 367 Einrichten einer Tabulatorfolge . . . . . . . . . . . . . . . . . . . . . 368

Verwenden von Cascading Style Sheets

Lektion 11. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 Erkunden von Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . 382

ADOBE GOLIVE 5.0 11 Classroom in a Book

Erkunden eines internen Style Sheets . . . . . . . . . . . . . . . . 382 Exportieren eines internen Style Sheets. . . . . . . . . . . . . . . 388 Erkunden eines externen Style Sheets. . . . . . . . . . . . . . . . 389 Arbeiten mit Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Aktualisieren eines Styles im gesamten Dokument . . . . . . 390 Bearbeiten eines Styles in einem Style Sheet. . . . . . . . . . . 392 Hinzufügen eines Styles . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Erzeugen eines Style Sheets . . . . . . . . . . . . . . . . . . . . . . . 396 Sichern und Verknüpfen eines Style Sheets . . . . . . . . . . . . 398 Anlegen und Entfernen einer Verknüpfung eines Style Sheets mit mehreren Seiten. . . . . . . . . . . . . . . 401 Erzeugen eines Klassen-Styles . . . . . . . . . . . . . . . . . . . . . 402 Importieren eines externen Style Sheets . . . . . . . . . . . . . . 404 Duplizieren eines Styles . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Ändern der Hintergrundfarbe . . . . . . . . . . . . . . . . . . . . . . 407 Vorschau der Ergebnisse in aktuellen Browsern . . . . . . . . 409 Eigene Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Lektion 12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Öffnen der Komposition . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Einrichten von Verhalten-Bezeichnungen . . . . . . . . . . . . . 423 Einrichten der Bezeichnung »Main« . . . . . . . . . . . . . . . . . 424 Einrichten der Film-Bezeichnungen. . . . . . . . . . . . . . . . . . 424 Hinzufügen von Verhaltensweisen zum Abspielen eines Films . . . . . . . . . . . . . . . . . . . . . . . . 426 Exportieren der Komposition . . . . . . . . . . . . . . . . . . . . . . 429 Integrieren der Komposition mit den QuickTime-Filmen. . . 430 Erstellen eines neuen QuickTime-Films . . . . . . . . . . . . . . . 430 Einfügen der Komposition . . . . . . . . . . . . . . . . . . . . . . . . 430 Einfügen der Videospuren für jeden Film. . . . . . . . . . . . . . 432 Hinzufügen von Ton für QuickTime-Filme . . . . . . . . . . . . . 434 Spezialeffekte zu QuickTime-Filmen hinzufügen . . . . . . . . 436 Hinzufügen einer Spur mit einfachem Quellfilter . . . . . . . . 436

12 INHALT

Hinzufügen einer Spur mit zweifachem Quellfilter . . . . . . . 439

Verwalten von Websites

Lektion 13. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Über diese Lektion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Website-Verwaltung mit Adobe GoLive. . . . . . . . . . . . . . . 451 Vorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Importieren einer vorhandenen Site in Adobe GoLive . . . . 452 Erkunden der Site im Site-Fenster . . . . . . . . . . . . . . . . . . . 454 Erkunden des erweiterten Site-Fensters . . . . . . . . . . . . . . 457 Reparatur von Fehlern . . . . . . . . . . . . . . . . . . . . . . . . . . . 460 Reparieren von verwaisten Dateien . . . . . . . . . . . . . . . . . 460 Reparatur fehlender Dateien und fehlerhafter Hypertext-Verknüpfungen . . . . . . . . . . . . . . . . . . . . . . . . 462 Verwalten von Ordnern . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Erzeugen eines Ordners und Hinzufügen von Dateien . . . . 467 Verschieben eines Ordners . . . . . . . . . . . . . . . . . . . . . . . . 469 Umbenennen eines Ordners . . . . . . . . . . . . . . . . . . . . . . . 470 Hinzufügen neuer Seiten zu Ihrer Site . . . . . . . . . . . . . . . . 471 Verwalten einer Site mit Hilfe der Navigations- und Linkansicht . . . . . . . . . . . . . . . . . . . . . . 474 Verwenden des Website-Navigators . . . . . . . . . . . . . . . . . 481 Einfügen von Seiten in Ihre Website-Hierarchie . . . . . . . . . 482 Erzeugen von Verknüpfungen zwischen Seiten mit Hilfe der Navigationsansicht. . . . . . . . . . . . . . . . . . . . 483 Erzeugen neuer Seiten in der Navigationsansicht . . . . . . . 486 Erzeugen von Verknüpfungen auf neue Seiten mit Hilfe der Navigationsansicht. . . . . . . . . . . . . . . . . . . . 488 Verschieben von neu erzeugten Dateien in das Wurzelverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . 488 Ändern aller Hyperlink-Verknüpfungen und Datei-Referenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Aufräumen einer Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Eigene Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

ADOBE GOLIVE 5.0 Classroom in a Book

Einführung Willkommen zu Adobe® GoLiveTM 5.0 – der Zukunft des Website-Managements und der schöpferischen Webseitengestaltung. GoLive ist ein äußerst flexibles Entwurfs- und Produktionswerkzeug, das unvergleichliche Präzision, Steuerung und nahtlose Smart-Object-Integration mit den übrigen professionellen Web-Anwendungen aus dem Hause Adobe bietet, einschließlich Adobe Photoshop®, Adobe Illustrator® und Adobe LiveMotion™. Erstellen Sie mühelos Maus-Rollover-Schaltflächen und Animationen und fügen Sie Ihren Webseiten Macromedia®-Flash™(SWF)-Dateien und QuickTime-Filme hinzu. Modellieren Sie schließlich Ihre Website mit den neuen Managementwerkzeugen und veröffentlichen Sie sie im Web.

Über dieses Buch Adobe GoLive 5.0 Classroom in a Book® gehört zu den offiziellen Trainingsbüchern für Adobe-Grafik- und Satzprogramme und wurde von Experten im Hause Adobe Systems entwickelt. Die Lektionen sind so angelegt, dass Sie Ihren Lernrhythmus selber bestimmen können. Wenn Sie mit Adobe GoLive noch nicht vertraut sind, werden Sie alle wichtigen Grundlagen und Möglichkeiten kennen lernen, die Sie für die Arbeit mit dem Programm benötigen. Arbeiten Sie bereits mit Adobe GoLive, finden Sie in Classroom in a Book viele weitergehende Techniken und Tipps für das Arbeiten mit der neuen Version dieses aufregenden Webdesign-Werkzeugs. Obwohl in jeder Lektion Schritt-für-Schritt-Anweisungen für das Erstellen eines bestimmten Projekts gegeben werden, gibt es viele Möglichkeiten für eigene Experimente. Sie können das Buch von Anfang bis Ende durcharbeiten oder sich nur die Lektionen vornehmen, für die Sie sich interessieren. Alle Lektionen werden mit Fragen und Antworten zum jeweiligen Lernstoff abgeschlossen.

13

14 Einführung

Voraussetzungen Bevor Sie mit Adobe GoLive 5.0 Classroom in a Book beginnen, sollten Sie mit dem Betriebssystem Ihres Computers vertraut sein. Sie sollten wissen, wie mit der Maus und den standardmäßigen Menüs und Befehlen umgegangen wird. Ihnen sollte außerdem bekannt sein, wie man Dateien öffnet, speichert und schließt. Um diese Techniken noch einmal aufzufrischen, können Sie die Dokumentation lesen, die mit Ihrem Computer ausgeliefert wurde.

Installieren des Programms Sie müssen das Adobe-GoLive-Programm gesondert erwerben. Sie finden alle erforderlichen Informationen für die Programminstallation in der Einführung im Adobe GoLive 5.0 Handbuch.

Navigation Services Navigation Services verändern das Aussehen und das Verhalten des Dialogfelds »Öffnen und Sichern«. Diese Möglichkeit steht auf der Systemebene immer zur Verfügung und lässt sich über eine eigene Applikation steuern. Da zwischen Navigation Services und Mac OS 8.6 (und niedriger) Konflikte bestehen, verwenden die Lektionen in diesem Buch die Navigation Services nicht. Adobe empfiehlt dringend, die Option »Navigation Services verwenden« auszuschalten. Diese Option gibt es nur in der Mac-Version. Adobe GoLive greift per Voreinstellung nicht auf Navigation Services zu. Falls Sie diese Option dennoch aktivieren müssen, wählen Sie Bearbeiten: Voreinstellungen: Benutzeroberfläche und schalten dort Navigation Services ein.

ADOBE GOLIVE 5.0 Classroom in a Book

Installieren der Schriften von der Classroom-in-a-Book-CD Um sicherzustellen, dass die Lektionsdateien auch auf Ihrem System mit den korrekten Schriften dargestellt werden, müssen Sie vielleicht die Schriftdateien der Classroom-in-a-Book-CD installieren. Die Schriften für die Lektionen befinden sich im Ordner Fonts auf der Adobe GoLive 5.0 Classroom in a Book-CD. Falls Sie diese bereits auf Ihrem System installiert haben, brauchen Sie sie nicht noch einmal zu installieren. Falls Sie mit ATM® (Adobe Type Manager®) arbeiten, finden Sie in seiner Dokumentation eine Anleitung zum Installieren von Schriften. Falls Sie ATM nicht besitzen, führt seine Installation von der CD-ROM automatisch dazu, dass die notwendigen Schriften auf Ihrem System mitinstalliert werden.

Kopieren der Classroom-in-a-Book-Dateien Die CD Classroom in a Book enthält Verzeichnisse mit allen elektronischen Dateien für die Lektionen dieses Buchs. Jede Lektion besitzt einen eigenen Ordner. Sie müssen diesen Ordner auf Ihrer Festplatte installieren, um Zugriff auf die Dateien zu erhalten. Um Speicherplatz zu sparen, können Sie die Ordner für jede Lektion erst bei Bedarf einrichten und wieder entfernen, bevor Sie den Ordner der nächsten Lektion einrichten. Installieren der Classroom-in-a-Book-Dateien: 1

Legen Sie die Adobe GoLive 5.0 Classroom in a Book-CD in Ihr CD-ROMLaufwerk ein.

2

Legen Sie ein Verzeichnis bzw. einen Ordner mit dem Namen GL_CIB auf Ihrer Festplatte an.

3

Kopieren Sie die gewünschten Lektionen auf Ihre Festplatte:

• Wenn Sie alle Lektionen kopieren möchten, kopieren Sie den Ordner Lessons in das Verzeichnis GL_CIB. • Um eine einzelne Lektion zu kopieren, ziehen Sie die einzelne Lektion von der CD-ROM in das Verzeichnis GL_CIB. Wenn Sie die Dateien unter Windows installieren, müssen Sie sie zunächst entsperren bzw. den Schreibschutz aufheben, bevor Sie sie verwenden können. Wenn Sie unter Mac OS arbeiten, brauchen Sie den Schreibschutz nicht aufzuheben.

15

16 Einführung

4

Entsperren Sie unter Windows die von Ihnen kopierten Dateien:

• Falls Sie alle Lektionen kopiert haben, doppelklicken Sie im Verzeichnis GL_CIB/Lessons auf die Datei Unlock.bat. • Wenn Sie nur eine einzelne Lektion kopiert haben, kopieren Sie die Datei Unlock.bat aus dem Ordner Lessons auf der CD-ROM in das Verzeichnis GL_CIB auf Ihrer Festplatte. Doppelklicken Sie nun auf die Datei Unlock.bat im Verzeichnis GL_CIB.

Weitere Unterlagen Adobe GoLive 5.0 Classroom in a Book ist nicht als Ersatz für die mit Adobe GoLive gelieferte Dokumentation gedacht, da im vorliegenden Buch nur Befehle und Optionen für die jeweiligen Optionen erläutert werden. Ausführliche Informationen über alle Programmfunktionen finden Sie in folgenden Unterlagen:

• Adobe GoLive 5.0 Handbuch. Das Handbuch gehört zum Lieferumfang von Adobe GoLive und umfasst die vollständige Beschreibung aller Programmfunktionen. • Online-Hilfe. Eine Online-Version des Handbuchs. Sie erreichen die OnlineHilfe über Hilfe: GoLive-Hilfe. (Weitere Informationen finden Sie in Lektion 1, Der Arbeitsbereich.) • Die Adobe Website, die Sie im World Wide Web mit dem Befehl Datei: Adobe Online besuchen können, wenn Sie Zugang zum World Wide Web haben.

Lektion 1

1 Der Arbeitsbereich

In dieser Lektion werden Sie die Verwendung der grundlegenden Möglichkeiten von Adobe GoLive kennen lernen, indem Sie eine vorhandene Website erkunden und verändern. Sie werden das Verwenden von Site-Fenstern, Dokumentfenstern, der Kontext-sensitiven Werkzeugleiste, der am meisten verwendeten Paletten und der Online-Hilfe üben. Nachdem Sie mit den Änderungen der Website fertig sind, werden Sie Ihre Arbeit sowohl in Adobe GoLive als auch in einem Webbrowser in der Vorschau betrachten.

20 LEKTION 1 Der Arbeitsbereich

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Öffnen einer Website und Webseiten in Adobe GoLive und das Einrichten Ihres Arbeitsbereichs • Anzeigen einer Grafikansicht einer Website in einem zweiten Site-Fenster • Verwenden der Ansicht, um zu ermitteln, welche Dateien bisher noch nicht in einer Website verwendet wurden • Verwenden der Werkzeugleiste sowohl zum Formatieren von Text als auch zum Auffinden einer Datei in der Registerkarte »Dateien« des Site-Fensters • Anzeigen, ausblenden, auf die Titelleiste reduzieren, bewegen und ändern der Größe von Paletten • Verwenden der Objekte-Palette, um einer Seite einen Bildplatzhalter hinzuzufügen • Verwenden des Inspektors, um einen Bildplatzhalter mit einer Grafikdatei zu verknüpfen • Verwenden der Farben-Palette, um Text einzufärben • Hinzufügen von Schlüsselwörtern zu einer Seite • Anzeigen von Kontextmenüs und Verwenden der Online-Hilfe • Vorschau einer Website mit Hilfe von Adobe GoLive und einem Webbrowser Für diese Lektion werden Sie etwa 30 Minuten benötigen. Kopieren Sie falls nötig den Ordner Lesson01 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen In dieser Lektion werden Sie die Website der fiktiven Firma First Strike Matches öffnen, betrachten und verändern. Dabei lernen Sie den Arbeitsbereich mit seinen Site-Fenstern, Dokumentfenstern und der Kontext-sensitiven Werkzeugleiste sowie die gebräuchlichsten Paletten, Kontextmenüs und die Online-Hilfe kennen. Zuerst werden Sie die fertige Webseite in Ihrem Webbrowser betrachten. 1

Starten Sie Ihren Webbrowser.

2

Öffnen Sie die Datei Index.html, die Homepage der Website. Sie finden Sie im Pfad Lesson01/01End/Matchbox Folder/Matchbox/Index.html.

Die Homepage heißt den Besucher von First Strike Matches willkommen und enthält Verweise auf andere Seiten der Website: eine Seite mit Produktbeschreibungen und eine weitere Seite mit Antworten auf allgemeine Fragen. 3

Erkunden Sie die Website, indem Sie auf die Verweise auf der Homepage und den anderen Seiten der Site klicken.

21

22 LEKTION 1 Der Arbeitsbereich

4

Wenn Sie mit dem Betrachten der Seite fertig sind, schließen Sie die Datei und beenden Sie Ihren Webbrowser.

Einrichten des Arbeitsbereichs Wir empfehlen Ihnen die Aufteilung Ihres Arbeitsbereiches wie in den folgenden Illustrationen gezeigt. Platzieren Sie das Dokumentfenster oben, das Website-Fenster darunter und die Paletten auf der rechten Seite des Arbeitsbereiches. (Um ein Fenster zu bewegen, ziehen Sie es an seiner Titelleiste.)

Um den erweiterten Teil des Site-Fensters ein- oder auszublenden, klicken Sie auf den Doppelpfeil unten rechts im Fenster.

ADOBE GOLIVE 5.0 Classroom in a Book

Um ein Dokumentfenster oder das Hauptfenster der Site zusammenzuklappen, klicken Sie auf die Schaltfläche »Minimieren« (Windows) bzw. klicken Sie mit gedrückter Ctrl-Taste in seine Titelleiste (Mac OS).

Um eines dieser Fenster auszuklappen, klicken Sie auf die Schaltfläche »Maximieren« (Windows) bzw. klicken auf den Reiter unten am Bildschirmrand (Mac OS).

Um eine Palettengruppe in einen Reiter am rechten Bilschirmrand zusammenzuklappen, klicken Sie mit gedrückter Strg- bzw. Ctrl-Taste in die Titelleiste des Gruppenfensters. Um das Gruppenfenster wieder auszuklappen, klicken Sie auf den Reiter am rechten Bildschirmrand.

Falls der Platz in Ihrem Arbeitsbereich knapp ist, können Sie das Website-Fenster am unteren Rand zusammengeklappt lassen und trotzdem Dateien mit Platzhaltern auf der Webseite verbinden, indem Sie das »Point & Shoot«-Symbol im Inspektor verwenden. Ziehen Sie vom »Point & Shoot«-Symbol im Inspektor auf das SiteFenster am unteren Rand der Arbeitsfläche und halten Sie die Maustaste weiter gedrückt. Das Site-Fenster vergrößert sich und Sie können auf die gewünschte Datei im Fenster ziehen.

Verwenden der Site-Fenster Sie werden diese Lektion damit beginnen, die Website First Strike Matches in Adobe GoLive zu öffnen. Zunächst sehen Sie sich die Site in Ihrem WebsiteFenster an und anschließend betrachten Sie sie in einem zweiten Site-Fenster.

Verwenden des Website-Fensters Mit Hilfe des Website-Fensters verwalten Sie den physischen Inhalt Ihrer Site, einschließlich Dateien, E-Mail-Adressen, URLs, einer selbst definierten FarbenPalette und selbst definierten Schriftarten. 1

Starten Sie Adobe GoLive. Ein neues Dokument namens Ohne Titel.html wird geöffnet und einige Paletten werden standardmäßig gruppiert aufgerufen.

23

24 LEKTION 1 Der Arbeitsbereich

Da Sie zu diesem Zeitpunkt der Lektion kein neues Dokument und keine Paletten benötigen, schließen Sie Ohne Titel.html und blenden alle vorhandenen Paletten aus. 2

Wählen Sie Datei: Schließen, um Ohne Titel.html zu schließen. (Unter Mac OS finden Sie diesen Menüpunkt unter Ablage: Schließen).

3

Um jede gruppierte Palette auszublenden, klicken Sie auf das Schließfeld in der oberen rechten Ecke (Windows) bzw. oberen linken Ecke (Mac OS) des gruppierten Fensters.

Jetzt können Sie die Website öffnen. 4

Wählen Sie Datei: Öffnen, wählen Sie die Datei Matchbox.site und klicken Sie auf »Öffnen«. Sie finden die Datei im Pfad Lesson01/01Start/Matchbox Folder/Matchbox.site.

Nach dem Öffnen der Datei Matchbox.site wird das Website-Fenster mit ausgewählter Registerkarte »Dateien« dargestellt. Mit Hilfe dieser Registerkarte betrachten, verwalten und organisieren Sie die HTML- und Mediadateien, die zum Erstellen Ihrer Website verwendet werden.

A B C

A. Index.html, Homepage der Website B. Ordner Media, in dem Grafiken und andere Mediadaten gespeichert werden C. Ordner Pages, in dem HTML-Dateien für zusätzliche Seiten gespeichert werden

Um Platz für weitere Fenster und Paletten zu machen, die Sie während dieser Lektion noch anzeigen werden, empfehlen wir Ihnen, das Website-Fenster im unteren Bereich des Arbeitsbereichs zu platzieren.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Falls nötig, richten Sie das Website-Fenster neu aus, indem Sie es mit der Maus an seiner Titelzeile greifen, und passen Sie seine Größe an, indem Sie mit der Maus an seiner unteren rechten Ecke ziehen.

Sie werden jetzt eine weitere Registerkarte im Website-Fenster auswählen. 6

Klicken Sie auf die Registerkarte »Farben«, um sie auszuwählen.

Die Registerkarte »Farben« enthält eine Liste mit den Farben, die in der Site verwendet werden. Sie können sie wie eine selbst definierte Farben-Palette benutzen, um schnell und einfach Text und andere Objekte in der gesamten Site einzufärben. Nun werden Sie den rechten Teil des Website-Fensters anzeigen lassen. 7

Um den rechten Teil des Website-Fensters anzuzeigen, klicken Sie auf den Doppelpfeil ( ) unten rechts im Fenster.

Der rechte Teil des Fensters wird dargestellt und zeigt die ausgewählte Registerkarte »Extras«. Mit dieser Registerkarte können Sie zusätzliche Dateien für Ihre Website betrachten, organisieren und verwalten, einschließlich HTML-Dateien, die als Komponenten und Vorlagen verwendet werden.

Wenn Sie den rechten Teil des Fensters nicht mehr benötigen, können Sie ihn schnell und einfach wieder ausblenden. 8

Um den rechten Teil des Website-Fensters auszublenden, klicken Sie auf den Doppelpfeil unterhalb des Rollbalkens für den linken Teil des Fensters.

25

26 LEKTION 1 Der Arbeitsbereich

Verwenden eines zweiten Site-Fensters Sie werden nun eine Grafikansicht der Website in einem zweiten Site-Fenster darstellen lassen. 1

Um eine Grafikansicht der Site anzeigen zu lassen, klicken Sie auf die Schaltfläche »Navigationsansicht« ( ) in der Werkzeugleiste oder wählen Website: Ansicht: Navigation.

Klicken auf die Schaltfläche Navigationsansicht in der Werkzeugleiste

Ein zweites Site-Fenster mit ausgewählter Registerkarte »Navigation« wird aufgerufen. Mit Hilfe dieser Registerkarte können Sie betrachten, wie Ihre Website aus der Navigationsansicht aufgebaut ist. Die Homepage wird oben in der Registerkarte mit einem Plus-Symbol angezeigt. Wenn Sie auf dieses Plus-Symbol oder ein beliebiges anderes Plus-Symbol in der Registerkarte klicken, können Sie die Ansicht erweitern, so dass die mit der Homepage verknüpften Seiten unterhalb von ihr angezeigt werden. 2

Klicken Sie in der Registerkarte »Navigation« auf das Plus-Symbol, um die Ansicht zu erweitern.

Auf Plus-Symbol klicken

Erweiterte Ansicht

Wenn Sie möchten, können Sie die Ausrichtung der Ansicht mit Hilfe der Palette »Ansicht« ändern.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie Fenster: Ansicht, um die Palette »Ansicht« aufzurufen.

Wir empfehlen, die Palette »Ansicht« und alle anderen Paletten auf der rechten Seite in Ihrem Arbeitsbereich zu platzieren. 4

Wenn nötig, richten Sie die Palette »Ansicht« neu aus, indem Sie die Titelzeile ihres Gruppenfensters greifen und in die untere rechte Ecke des Arbeitsbereichs ziehen.

5

Klicken Sie in der Palette »Ansicht« auf die Registerkarte »Navigation«. Wählen Sie im Bereich »Format« die Option »Hochformat«. Die mit der Homepage verknüpften Seiten werden jetzt rechts von ihr dargestellt.

Sie werden jetzt mit Hilfe der Ansicht ermitteln, welche Dateien in Ihrer Site bisher nicht verwendet wurden. 6

Wählen Sie in der Ansicht im Bereich »Fenster anzeigen« die Option »Lose Seiten«.

Die Datei Matchbox.gif wird in einem eigenen Fensterbereich rechts dargestellt, um anzuzeigen, dass sie bisher auf keiner der Seiten der Website benutzt wird. Sie werden diese Datei später in dieser Lektion dazu verwenden, der Homepage eine Grafik einer Streichholzschachtel (Matchbox) hinzuzufügen.

Registerkarte »Navigation« mit angezeigter loser Seite

Da Sie die Ansicht nun nicht mehr benötigen, können Sie sie wieder ausblenden. 7

Wählen Sie Fenster: Ansicht, um die Ansicht und die anderen gruppierten Paletten auszublenden.

27

28 LEKTION 1 Der Arbeitsbereich

Registerkarten können Sie ganz einfach zwischen Site-Fenstern hin- und herbewegen, um den Arbeitsbereich an Ihre Vorstellungen anzupassen. 8

Falls notwendig platzieren Sie das zweite Site-Fenster so, dass es sich nicht mit dem Website-Fenster überlappt.

9

Ziehen Sie die Registerkarte »Navigation« aus dem zweiten Site-Fenster in das Website-Fenster.

Jetzt können Sie die Registerkarte »Navigation« innerhalb des Website-Fensters auswählen und betrachten. 10

Klicken Sie auf die Registerkarte »Navigation«, um sie auszuwählen.

Sie können eine Registerkarte auch aus einem Site-Fenster herausziehen, so dass sie in einem neuen eigenen Site-Fenster angezeigt wird. 11

Ziehen Sie die Registerkarte »Navigation« aus dem Website-Fenster auf einen leeren Platz in Ihrem Arbeitsbereich.

Falls Sie zwei Registerkarten in zwei einzelne Fenster ziehen, lassen sie sich manchmal zusammen verwenden. Wenn sich beispielsweise die Registerkarten »Navigation« und »Links« in einzelnen Fenstern befinden, können Sie eine bestimmte Seite in der Registerkarte »Navigation« auswählen, damit sie in der Registerkarte »Links« ausgewählt erscheint und so schneller und einfacher zu finden ist.

ADOBE GOLIVE 5.0 Classroom in a Book

Nachdem Sie Ihren Arbeitsbereich einmal angepasst haben, indem Sie Registerkarten zwischen den Site-Fenstern hin- und hergeschoben oder außerhalb der Site-Fenster bewegt haben, können Sie die Registerkarten ganz einfach wieder in ihre Standardkonfiguration bringen. 12 Klicken Sie auf das kleine schwarze Dreieck oben rechts im Website-Fenster, um ein Popup-Menü aufzurufen, und wählen Sie dort den Eintrag »Standardkonfiguration«.

Wählen von »Standardkonfiguration« aus dem Popup-Menü

Verwenden des Dokumentfensters Sie werden nun die Homepage der Website First Strike Matches in Adobe GoLive öffnen. Sie können Sie unmittelbar in der Registerkarte »Dateien« des WebsiteFensters öffnen. 1

Klicken Sie auf die Registerkarte »Dateien« im Website-Fenster, um sie auszuwählen.

2

Doppelklicken Sie in der Registerkarte »Dateien« auf die Datei Index.html.

29

30 LEKTION 1 Der Arbeitsbereich

Die Homepage wird in einem Dokumentfenster aufgerufen, in dem die Registerkarte »Layout« bereits ausgewählt ist. Das Dokumentfenster hält eine Reihe von Registerkarten bereit, die Sie entweder zum Bearbeiten oder für die Vorschau Ihres Dokuments verwenden können. Die Registerkarte »Layout«, oder auch Layout-Ansicht, benutzen Sie, um Ihrem Dokument Text und Objekte hinzuzufügen, und um ihre Merkmale unter Zuhilfenahme von zahlreichen Paletten einzustellen. Wir empfehlen Ihnen, das Dokumentfenster im oberen Bereich des Arbeitsbereichs zu platzieren. 3

Wenn erforderlich platzieren Sie das Dokumentfenster neu, indem Sie es mit der Maus an der Titelleiste greifen, und passen Sie seine Größe an, indem Sie mit der Maus an seiner unteren rechten Ecke ziehen.

Das Dokumentfenster enthält zahlreiche Objekte, wie in der folgenden Abbildung gezeigt. Sie werden im Verlauf der Lektionen dieses Buchs lernen, wie Sie Ihren Seiten diese und andere Objekte hinzufügen können.

A

B C

A. Layout-Textrahmen B. Layout-Raster C. Grafik

ADOBE GOLIVE 5.0 Classroom in a Book

Sie können die Dokumentansicht einfach ändern, indem Sie im Dokumentfenster eine andere Registerkarte auswählen. 4

Klicken Sie auf die Registerkarte »Quellcode« ( Quellcode-Ansicht zu betrachten.

), um das Dokument in der

In der Quellcode-Ansicht können Sie Ihr Dokument mit einem HTML-Texteditor bearbeiten. 5

Klicken Sie auf die Registerkarte »Layout« ( Ansicht zurückzukehren.

), um wieder in die Layout-

Sie werden nun den Titel der Seite ändern. Der Titel der Seite wird bei der Betrachtung in einem Webbrowser in der Titelzeile des Webbrowsers angezeigt. 6

Wählen Sie den Seitentitel »Welcome to Adobe GoLive 5« aus.

7

Geben Sie First Strike Matches als neuen Titel ein und drücken Sie die Eingabetaste.

Verwenden der Werkzeugleiste Die Werkzeugleiste in Adobe GoLive ist Kontext-sensitiv, was bedeutet, dass sich ihr Inhalt abhängig von Ihrer Auswahl im Arbeitsbereich ändert. Wenn Sie beispielsweise ein Dokument in der Layout-Ansicht bearbeiten, können Sie die Werkzeugleiste verwenden, um ausgewählten Text und Objekte zu verändern. Arbeiten Sie aber gerade in der Site-Ansicht, können Sie mit Hilfe der Werkzeugleiste allgemeine Site-Verwaltungsaufgaben durchführen. Jetzt werden Sie die Werkzeugleiste benutzen, um Text auf der Homepage der Website First Strike Matches zu formatieren.

31

32 LEKTION 1 Der Arbeitsbereich

1

Lassen Sie die Werkzeugleiste einblenden, indem Sie Fenster: Werkzeugleiste wählen, wenn es nötig ist, und platzieren Sie die Werkzeugleiste in der oberen linken Ecke Ihres Arbeitsbereiches, indem Sie sie an ihrer Titelleiste (Windows) oder der unteren linken Ecke (Mac OS) ziehen.

2

Wählen Sie im Dokumentfenster die Überschrift Welcome to First Strike Matches.

3

Klicken Sie auf die Schaltfläche »Fett« ( bzw. ) in der Werkzeugleiste, um den ausgewählten Text in der Auszeichnung »Fett« darzustellen.

4

Klicken Sie auf die Schaltfläche »Zentriert« ( ) in der Werkzeugleiste, um den ausgewählten Text im Layout-Textfenster mittig auszurichten.

5

Wählen Sie im Menü »Schriftgröße« in der Werkzeugleiste die Größe 6, um eine selbst definierte Schriftgröße zuzuweisen, die die Voreinstellungen des Webbrowsers überschreibt.

Auswählen von 6 aus dem Menü »Schriftgröße«

6 Klicken Sie außerhalb des ausgewählten Textes, um seine Auswahl aufzuheben. 7 Wählen Sie Datei: Speichern (Mac OS: Ablage: Sichern), um die Datei Index.html zu speichern. Jetzt werden Sie die Werkzeugleiste benutzen, um eine Datei in der Registerkarte »Dateien« des Website-Fensters zu finden. Mit dieser Vorgehensweise können Sie beim Arbeiten mit unbekannten oder größeren Sites Zeit sparen. Sie werden die Datei Matchbox.gif suchen, die Sie später in dieser Lektion verwenden werden, um der Homepage die Grafik einer Streichholzschachtel hinzuzufügen. Zuerst werden Sie in das Website-Fenster wechseln, damit der Inhalt der Werkzeugleiste in Site-Verwaltungswerkzeuge geändert wird.

ADOBE GOLIVE 5.0 Classroom in a Book

8 Um auf das Website-Fenster zu wechseln, klicken Sie auf seine Titelleiste oder auf die Schaltfläche »Fensterauswahl« ( ) in der Werkzeugleiste. 9 Stellen Sie sicher, dass die Registerkarte »Dateien« des Website-Fensters ausgewählt ist. 10 Klicken Sie auf die Schaltfläche »Objekte in Website finden« ( Werkzeugleiste oder aktivieren Sie »Bearbeiten: Suchen«.

) in der

11 Achten Sie darauf, dass in den Popup-Menüs im Dialogfenster »Suchen« die Optionen »Name« und »beginnt mit« ausgewählt sind. Geben Sie dann in das Textfeld Matchbox ein und klicken Sie auf »Suchen«.

Festlegen von Optionen im Dialogfenster »Suchen«

In der Registerkarte »Dateien« des Website-Fensters öffnet Adobe GoLive automatisch den Ordner »Media« und wählt die Datei Matchbox.gif.

Verwenden von Paletten Adobe GoLive stellt einige Paletten bereit, mit deren Hilfe Sie zahlreiche Aufgaben ausführen können. Paletten können während der Arbeit ein- oder ausgeblendet werden. Außerdem können Sie sie neu platzieren, in der Größe verändern und auf die Titelzeile reduzieren, um Ihren Arbeitsbereich besser auszunutzen. 1 Wählen Sie Fenster: Paletten zurücksetzen, um alle Paletten einzublenden. Da Sie für den weiteren Verlauf dieser Lektion lediglich die Paletten »Objekte«, »Inspektor« und »Farbe« benötigen, werden Sie die übrigen Palettengruppen ausblenden, die diese bezeichneten Paletten nicht enthalten.

33

34 LEKTION 1 Der Arbeitsbereich

2

Um die nicht benötigten Palettengruppen auszublenden, klicken Sie auf das Schließfeld in der oberen rechten (Windows) bzw. oberen linken (Mac OS) Ecke des Gruppenfensters.

Wenn Sie eine Palettengruppe gerade nicht benötigen, können Sie sie auch am rechten Rand des Arbeitsbereichs auf die Titelleiste reduzieren, anstatt sie auszublenden. Wenn Sie sie dann später wieder benötigen, können Sie sie wieder zurück auf ihre ursprüngliche Größe bringen. 3

Klicken Sie mit gedrückter Strg-Taste (Windows) bzw. Ctrl-Taste (Mac OS) in die Titelleiste des Gruppenfensters, das die Paletten »Inspektor« und »Ansicht« enthält, um diese Gruppe auf die Titelleiste zu reduzieren.

4

Wenn erforderlich, können Sie die Position des Gruppenfensters mit den Paletten »Objekte« und »Farben« neu ausrichten, indem Sie es an der Titelleiste greifen, und seine Größe ändern, indem Sie seine untere rechte Ecke ziehen.

Verwenden der Objekte-Palette Die Objekte-Palette enthält einige Registerkarten. Jede Registerkarte enthält eine Gruppe mit verknüpften Symbolen, die HTML-Tags, strukturellen Seitenelementen oder allgemeinen Site-Objekten entsprechen. Diese Symbole verwenden Sie, um Ihren Seiten Objekte hinzuzufügen, einschließlich Layout-Raster, LayoutTextfelder, gleitende Felder, Tabellen, Grafiken und vieles mehr. Um die Objekte-Palette einzublenden, wählen Sie Fenster: Objekte. Die ObjektePalette wird standardmäßig mit ausgewählter Registerkarte »Allgemein« aufgerufen. 1

Klicken Sie wenn nötig auf »Objekte«, um die Objekte-Palette in den Vordergrund im Gruppenfenster zu holen, und klicken Sie anschließend auf die Registerkarte »Allgemein« ( ) der Objekte-Palette.

Jetzt werden Sie die Namen der Symbole in der Registerkarte »Allgemein« in der Objekte-Palette anzeigen lassen.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Um den Namen eines Symbols anzeigen zu lassen, platzieren Sie den Mauszeiger über dem Symbol: Der Name des Symbols wird in der Fußzeile der Objekte-Palette angezeigt.

Anzeigen des Symbolnamens

Sie werden jetzt die Objekte-Palette benutzen, um der Homepage einen Bildplatzhalter hinzuzufügen. Mit Hilfe dieses Platzhalters werden Sie der Seite das Bild einer Streichholzschachtel hinzufügen. 3

Ziehen Sie das Symbol »Bild« aus der Objekte-Palette auf den freien Platz rechts vom Welcome-Text auf der Homepage. (Sie können auch auf das Symbol »Bild« in der Objekte-Palette doppelklicken.)

Ziehen des Symbols »Bild« in das Dokumentfenster

Nun werden Sie die Werkzeugleiste benutzen, um die Position des Bildplatzhalters auf der Seite präzise zu bestimmen.

35

36 LEKTION 1 Der Arbeitsbereich

4

Achten Sie darauf, dass der Bildplatzhalter ausgewählt ist. Geben Sie in der Werkzeugleiste im Textfeld »Horizontale Position« 170 und in das Textfeld »Vertikale Position« 32 ein.

Verwenden des Inspektors Der Kontext-sensitive Inspektor ermöglicht Ihnen das Einstellen von Merkmalen für Ihre Auswahl im Arbeitsbereich, wie beispielsweise Text und Objekte im Dokumentfenster oder Dateien und andere Elemente im Site-Fenster. Um den Inspektor aufzurufen, können Sie Fenster: Inspektor wählen. Jetzt werden Sie den Inspektor verwenden, um den Bildplatzhalter auf der Seite mit der Datei Matchbox.gif in der Registerkarte »Dateien« des Website-Fensters zu verknüpfen. 1

Klicken Sie rechts auf dem Bildschirm auf das Gruppenfenster, das die Steuerungen »Inspektor« und »Ansicht« enthält, um es auf seine ursprüngliche Größe zu bringen.

2

Wenn nötig klicken Sie auf die Registerkarte »Inspektor«, um den Inspektor in seiner Gruppe in den Vordergrund zu holen.

Da Sie im Dokumentfenster den Bildplatzhalter ausgewählt haben, ändert sich der Inspektor in den Bild-Inspektor. Sie werden feststellen, dass das Wort »Bild« in der Fußzeile des Inspektors angezeigt wird, das den Namen des Inspektors darstellt.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Ziehen Sie mit gedrückter Maustaste von der Schaltfläche »Point & Shoot« ( ) im Inspektor auf die Datei Matchbox.gif in der Registerkarte »Dateien« des Website-Fensters.

Ziehen mit gedrückter Maustaste von der Schaltfläche »Point & Shoot« auf Bilddatei im Site-Fenster

Wenn die Verknüpfung erfolgreich erzeugt wurde, sehen Sie den Pfadnamen der Datei im Textfeld »Quelle« im Bild-Inspektor.

Verwenden der Farben-Palette Mit Hilfe der Farben-Palette können Sie Text und Objekte auf Ihrer Seite einfärben. Nachdem Sie im Dokumentfenster eine Auswahl getroffen haben, lässt sich in der Farben-Palette eine Farbe auswählen, die der Auswahl automatisch hinzugefügt wird. Wählen Sie Fenster: Farbe, um die Farben-Palette anzuzeigen. Sie werden nun die Überschrift der Homepage orange einfärben, damit sie auf der Seite noch mehr auffällt und den Betrachter anspricht. 1

Wählen Sie im Dokumentfenster die Überschrift Welcome to First Strike Matches aus.

Sie werden feststellen, dass in der Fußzeile des Inspektors nun das Wort »Text« dargestellt wird, das anzeigt, dass der Inspektor sich in den Text-Inspektor geändert hat. Mit Hilfe des Text-Inspektors können Sie Merkmale des ausgewählten Textes einstellen, wie beispielsweise das Erstellen einer HypertextVerknüpfung oder das Hinzufügen eines Stils.

37

38 LEKTION 1 Der Arbeitsbereich

2

Klicken Sie auf das Textfarbfeld in der Werkzeugleiste, um es auszuwählen und die Farben-Palette anzuzeigen.

Beachten Sie, dass die Farben-Palette einige Schaltflächen enthält. Durch Klicken auf diese Schaltflächen lassen sich einzelne vordefinierte Paletten anzeigen, aus denen Sie Farben auswählen können. In dieser Lektion werden Sie die Schaltfläche »Web-Farbenliste« verwenden, die 216 nicht gerasterte Farben enthält, die sich plattformübergreifend im Internet verwenden lassen. 3

Klicken Sie in der Farben-Palette auf die Schaltfläche Web-Farbenliste ( ). Wählen Sie anschließend aus der Liste #FF6633 aus oder geben Sie FF6633 in das Textfeld »Wert« ein und drücken Sie die Eingabetaste. A

B

C

A. Schaltflächen zur Anzeige einzelner Paletten B. Vorschaufenster C. Musterflächen

Adobe GoLive fügt die Farbe automatisch dem ausgewählten Text im Dokumentfenster hinzu. 4

Wählen Sie Datei: Speichern.

Schlüsselwörter hinzufügen Jetzt werden Sie der Seite Schlüsselwörter hinzufügen. Schlüsselwörter werden von Suchmaschinen verwendet, um die Elemente und Themen auf Ihrer Seite zu erkennen.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie auf das Dreieck ( ) neben dem Seitensymbol in der oberen linken Ecke des Dokumentfensters, um den Kopfzeilenabschnittsbereich zu öffnen.

Der Kopfzeilenabschnittsbereich lässt sich benutzen, um Informationen, einschließlich Seitentitel und Schlüsselwörter, über Ihre Seite zu speichern. 2

Klicken Sie in der Objekte-Palette auf die Registerkarte »Head« ( ). Ziehen Sie anschließend das Symbol »Schlüsselwörter« aus der Objekte-Palette in den Kopfabschnittsbereich im Dokumentfenster.

Der Inspektor ändert sich in den Schlüsselwörter-Inspektor. 3

Geben Sie im Schlüsselwörter-Inspektor ein Wort oder einen Ausdruck ein, den Sie als Schlüsselwort im Textfeld unterhalb des rollbaren Textfeldes verwenden wollen (wir haben den Ausdruck First Strike Matches verwendet). Klicken Sie anschließend auf »Hinzufügen« oder drücken Sie die Eingabetaste.

4

Klicken Sie auf das Dreieck neben dem Seitensymbol, um den Kopfabschnittsbereich wieder zu schließen.

39

40 LEKTION 1 Der Arbeitsbereich

5

Wählen Sie Datei: Speichern.

Verwenden von Kontextmenüs Kontextmenüs lassen sich verwenden, um schnell häufig gebrauchte Befehle auszuwählen. Um Kontextmenüs anzuzeigen, platzieren Sie den Mauszeiger über dem aktiven Fenster oder der aktiven Auswahl und führen danach eine der folgenden Aktionen aus:

• Unter Windows klicken Sie mit der rechten Maustaste. • Unter Mac OS klicken Sie mit gedrückter Ctrl-Taste und halten die Maustaste gedrückt.

Vorschau mit Adobe GoLive Nachdem Sie mit den Änderungen an der Homepage der Website First Strike Matches Web fertig sind, werden Sie die Seite in der Vorschau in Adobe GoLive betrachten. Dazu müssen Sie zunächst sicherstellen, dass der Vorschaumodus in den Voreinstellungen für Module eingeschaltet ist. 1

Wählen Sie Bearbeiten: Voreinstellungen, klicken Sie im linken Bereich des Dialogfensters »Voreinstellungen« auf den Eintrag »Module«, schalten Sie den »Vorschaumodus« ein und klicken Sie auf OK.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie im Dokumentfenster auf die Registerkarte »Vorschau« ( das Dokument in der Vorschau zu betrachten.

), um

In der Vorschau sehen Sie Ihre Seite ungefähr so, wie sie nach der Veröffentlichung im Internet aussehen wird. Hier können Sie bereits Verknüpfungen ausprobieren und animierte GIFs und QuickTime-Filme in der Vorschau betrachten. Wenn Sie Adobe GoLive für Mac OS verwenden, können Sie die Registerkarte »Ansicht« zusammen mit der Vorschau verwenden. In der Vorschau erhalten Sie einen guten Eindruck davon, wie Ihre Seite später im Web aussehen wird. Beachten Sie, dass die Darstellung von Browser zu Browser abweichen kann. Deshalb ersetzt die Vorschau keinesfalls die Überprüfung des Endprodukts in allen gängigen Browser-Versionen in unterschiedlichen Einstellungen auf mehreren Betriebssystemen. Berücksichtigen Sie dabei auch ältere Versionen, da Sie nicht davon ausgehen können, dass jeder Surfer die neueste Version verwendet. 3

Klicken Sie unter Mac OS auf die Registerkarte »Ansicht«, um sie in ihrem Gruppenfenster in den Vordergrund zu bringen, oder wählen Sie Fenster: Ansicht, um die Ansicht aufzurufen. Wählen Sie dort im Popup-Menü »Stamm-CSS« den Eintrag »Explorer 5 (Windows)«, um zu sehen, wie Ihre Seite im Microsoft Internet Explorer 5 unter Windows aussehen würde. Probieren Sie die unterschiedlichen Menüoptionen aus und beobachten Sie, wie sich Ihre Seite jeweils in der Vorschau verändert. Sie werden feststellen, dass der Text immer dann größer erscheint, wenn auf einen Windowsbasierten Webbrowser geschaltet wird.

Auswählen von Optionen im Menü »Stamm-CSS« (Mac OS)

41

42 LEKTION 1 Der Arbeitsbereich

4

Überprüfen Sie die Verknüpfungen auf der Homepage und den anderen Seiten der Website.

Vorschau in einem Webbrowser Zusätzlich zur Vorschau Ihrer Seite in Adobe GoLive sollten Sie sie immer in zahlreichen Webbrowsern, Browser-Versionen und auf unterschiedlichen Plattformen testen. Sie müssen Webbrowser verwenden, um mögliche Unterschiede in Webbrowsern zu ermitteln und um Elemente in der Vorschau betrachten zu können, für die Adobe GoLive keine systemeigene Unterstützung bereithält. Damit Sie Ihre Seite in einem Webbrowser betrachten können, müssen Sie zunächst einen oder mehrere Browser auf Ihrer Festplatte installieren. 1

Vergewissern Sie sich, dass jeder benötigte Browser auf Ihrer Festplatte installiert ist und dass alle notwendigen Plug-Ins für die Vorschau im Ordner »Plug-ins« des Browsers (oder einem anderen Ort, den Ihr Browser für Multimedia-Erweiterungen verwendet) platziert sind.

Als Nächstes müssen Sie die Einstellungen für Browser in Adobe GoLive vornehmen. 2

Wählen Sie Bearbeiten: Voreinstellungen und klicken Sie auf das Symbol »Browser« im linken Bereich des Dialogfensters »Voreinstellungen«.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Führen Sie einen der folgenden Schritte aus:

• Um alle Webbrowser auf Ihrer Festplatte der Browser-Liste hinzuzufügen, klicken Sie auf die Schaltfläche »Alle suchen«. • Um einen einzelnen Browser hinzuzufügen, klicken Sie auf »Hinzufügen«. Wählen Sie anschließend den Browser aus und klicken Sie auf »Öffnen« (Windows) oder klicken Sie auf »Hinzufügen« und »Fertig« (Mac OS). 4

Wählen Sie im rollbaren Fenster die Webbrowser aus, die entweder beim Klicken auf die Schaltfläche »Im Browser anzeigen« ( ) oder beim Wählen von Spezial: Im Browser anzeigen aufgerufen werden sollen.

5

Klicken Sie auf OK.

Jetzt können Sie die Seite in einem Browser betrachten. 6

Klicken Sie in der Werkzeugleiste auf das Dreieck in der unteren rechten Ecke der Schaltfläche »Im Browser anzeigen« und wählen Sie den gewünschten Browser im Popup-Menü aus.

Auswählen eines Browsers aus dem Popup-Menü

7

Wenn Sie mit dem Betrachten der Website fertig sind, schließen Sie sie und beenden Sie Ihren Browser.

Verwenden der Online-Hilfe Adobe GoLive enthält eine vollständige Dokumentation in der Online-Hilfe, einschließlich aller Informationen aus der Adobe GoLive 5.0 Handbuch, einer Liste mit Tastaturkürzeln und Informationen für fortgeschrittene Anwender über Aktionen, AppleScript, Cascading Style Sheets, HTML, QuickTime-Filme, WebDAV und Web-Einstellungen. Sie können die Online-Hilfe während der Arbeit an Ihrer Website in einem Webbrowser öffnen und gleichzeitig über das Verwenden von Adobe GoLive nachlesen. Um die Online-Hilfe zu verwenden, können Sie ein Thema aus dem Inhalt oder aus dem Index auswählen oder nach einem Thema suchen lassen.

43

44 LEKTION 1 Der Arbeitsbereich

Sie werden nun die Online-Hilfe mit dem Dokumentfenster auf drei unterschiedliche Arten verwenden, um Informationen zu erhalten. Zuerst werden Sie ein Thema aus dem Inhalt auswählen. 1

Wählen Sie in Adobe GoLive Hilfe: GoLive-Hilfe, um die Online-Hilfe in einem Browser zu öffnen. Die erste Inhaltsebene wird im linken Bereich der Online-Hilfe angezeigt.

2

Klicken Sie auf das Thema »Der Arbeitsbereich« im linken Bereich, um es auszuwählen. Im rechten Bereich des Fensters wird eine zweite Inhaltsebene für das ausgewählte Thema aufgerufen.

3

Klicken Sie auf das Thema »Verwenden des Dokumentfensters« im rechten Bereich, um es auszuwählen. Wenn Sie möchten, können Sie sich nun die Informationen zur Verwendung des Dokumentfensters im rechten Bereich durchlesen.

Sie werden nun ein Thema aus dem Index zur Verwendung des Dokumentfensters auswählen. 4

Klicken Sie in der Navigationsleiste oben links in der Online-Hilfe auf den Eintrag »Index«. Im linken Bereich der Online-Hilfe wird die Startebene des Index angezeigt.

5

Klicken Sie auf den Eintrag »D« oben rechts im linken Bereich, um ihn auszuwählen. Es werden Themen des Index aufgerufen, die mit dem ausgewählten Buchstaben beginnen.

6

Wenn erforderlich, rollen Sie im linken Bereich nach unten, bis Sie das Thema »Dokumentfenster« und die Liste der Unterthemen sehen können.

Achten Sie darauf, dass neben jedem Unterthema eine oder mehrere Zahlen angezeigt werden. Wenn Sie auf eine »1« klicken, werden Sie in der Online-Hilfe an den ersten Ort geführt, an dem das entsprechende Unterthema indexiert wurde; klicken Sie auf eine »2«, werden Sie an den zweiten indexierten Ort geführt usw. 7

Klicken Sie auf »2« rechts vom Unterthema »Größe ändern«. Wenn Sie wollen, können Sie nun die entsprechenden Informationen im rechten Bereich über das Ändern der Größe des Dokumentfensters lesen.

ADOBE GOLIVE 5.0 Classroom in a Book

Jetzt werden Sie nach einem Thema über das Verwenden des Dokumentfensters suchen. 8

Klicken Sie oben links in der Navigationsleiste in der Online-Hilfe auf »Suchen«. Im linken Bereich wird ein Textfeld aufgerufen, in das Sie den Text eingeben können, nach dem gesucht werden soll.

9

Geben Sie Dokumentfenster in das Textfeld ein und klicken Sie auf »Suchen«. Im linken Bereich wird eine Liste mit Themen angezeigt, die diesen Ausdruck enthalten.

10

Falls nötig, rollen Sie im linken Bereich nach unten, bis Sie das Thema »Wechseln zwischen Fenstern« sehen können, und klicken Sie anschließend auf dieses Thema, um es auszuwählen. Wenn Sie wollen, können Sie nun die entsprechenden Informationen im rechten Bereich über das Wechseln zwischen dem Dokumentfenster und anderen Fenstern lesen.

Auswählen aus der Themenliste

45

46 LEKTION 1 Der Arbeitsbereich

11

Wenn Sie mit dem Betrachten der Online-Hilfe fertig sind, schließen Sie sie und beenden Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Wie öffnen Sie eine vorhandene Website in Adobe GoLive?

2

Was ist die empfohlene Vorgehensweise zum Einrichten Ihres Arbeitsbereichs in Adobe GoLive?

3

Wie können Sie eine grafische Übersicht einer verknüpften bzw. verlinkten Website anzeigen lassen?

4

Beschreiben Sie zwei Möglichkeiten, wofür Sie die Werkzeugleiste nutzen können.

5

Wie können Sie eine Gruppe von Paletten sowohl aus- als auch einblenden?

6

Welche Palette verwenden Sie, um Ihrer Seite einen Bildplatzhalter hinzuzufügen? Welche Palette verwenden Sie, um einen Bildplatzhalter mit einer Grafikdatei zu verknüpfen?

7

Wie können Sie Text auf Ihrer Seite einfärben?

8

Welches ist die empfohlene Vorgehensweise, um eine von Ihnen in Adobe GoLive erstellte Website oder Webseite in der Vorschau zu betrachten?

9

Wie können Sie die Online-Hilfe für Adobe GoLive in einem Webbrowser öffnen?

Antworten 1

Um eine vorhandene Website in Adobe GoLive zu öffnen, wählen Sie Datei: Öffnen, wählen die Datei mit der Dateinamenerweiterung .site im Ordner »Site« aus, und klicken auf »Öffnen«.

2

Es wird empfohlen, das Dokumentfenster im Arbeitsbereich oben zu platzieren, das Site-Fenster unten und die Paletten an der rechten Seite des Arbeitsbereichs.

3

Um eine Grafikansicht einer Website zu erhalten, klicken Sie in der Werkzeugleiste auf die Schaltfläche »Navigationsansicht« ( ) oder wählen Sie Website: Ansicht: Navigation.

47

48 LEKTION 1 Der Arbeitsbereich

4

Neben anderen Verwendungen können Sie die Werkzeugleiste dazu benutzen, sowohl Text zu formatieren als auch Dateien in der Registerkarte »Dateien« des Site-Fensters zu finden.

5

Um eine Gruppe von Paletten auf die Titelzeile am rechten Rand des Bildschirms zu reduzieren, klicken Sie mit gedrückter Strg-Taste (Windows) bzw. gedrückter Ctrl-Taste (Mac OS) in die Titelleiste des Gruppenfensters. Um eine Palettengruppe wieder einzublenden, klicken Sie auf die entsprechende Titelleiste am rechten Bildschirmrand.

6

Sie verwenden die Objekte-Palette, um Ihrer Seite einen Bildplatzhalter hinzuzufügen, und den Inspektor, um den Platzhalter mit einer Grafikdatei zu verknüpfen.

7

Um Text einzufärben, können Sie ihn zunächst im Dokumentfenster auswählen, dann in der Werkzeugleiste auf das Textfarbfeld klicken, um es auszuwählen und die Farben-Palette aufzurufen, und anschließend in der Farben-Palette eine Farbe auswählen.

8

Zusätzlich zur Vorschau Ihrer Webseite in Adobe GoLive sollten Sie sie immer in zahlreichen anderen Webbrowsern, Browser-Versionen und auf unterschiedlichen Betriebssystemen in einer Vorschau betrachten. Sie benötigen unterschiedliche Browser, um mögliche Unterschiede in der Browserdarstellung zu ermitteln und um Elemente zu betrachten, für die Adobe GoLive keine systemeigene Unterstützung bereithält.

9

Um die Online-Hilfe für Adobe GoLive in einem Browser aufzurufen, wählen Sie Hilfe: GoLive-Hilfe.

Lektion 2

2 Mit Text und Tabellen arbeiten

Mit Adobe GoLive können Sie einer Webseite auf unterschiedliche Weise Text hinzufügen und beispielsweise direkt in das Dokumentfenster schreiben. Nachdem Sie den Text eingegeben haben, lässt er sich auf einfache Weise formatieren und einfärben. Außerdem können Sie Tabellen verwenden, um den Textumbruch auf einer Seite zu beeinflussen oder um Daten oder andere Informationen in Reihen und Spalten darzustellen. Darüber hinaus lassen sich vordefinierte Stile hinzufügen und Inhalte sortieren.

52 LEKTION 2 Mit Text und Tabellen arbeiten

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Einer Seite Text durch unmittelbares Eingeben in das Dokument-Fenster hinzufügen • Texten Absatzformate und Auszeichnungen zuweisen • Nummerierte und unnummerierte Listen erzeugen • Zeilenumbrüche erzwingen • Textfarbe ändern • Tabellen zum Festlegen des Textflusses auf der Seite und zum Darstellen von Tabellenkalkulationsdaten verwenden • Tabellen formatieren durch Festlegen von Optionen, Zuweisen von vordefinierten Tabellenstilen und Sortieren der Inhalte einer Tabelle • Daten aus einer anderen Anwendung in eine Tabelle importieren • Dem Text auf einer Seite eine neue Schriftsammlung zuweisen • Erfassen eines Tabellenstils zum späteren weiteren Gebrauch • Eine Webseite in Adobe GoLive in der Vorschau betrachten Für diese Lektion werden Sie etwa 45 Minuten benötigen. Kopieren Sie, falls nötig, den Ordner Lesson02 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen In dieser Lektion werden Sie mit dem Entwurf einer Webseite der fiktiven Firma Gage Vintage Guitars arbeiten. Die Webseite enthält Informationen darüber, wie Sie den Wert Ihrer Gitarre von dem Unternehmen schätzen lassen können. Zuerst werden Sie die fertig gestellte Webseite in Ihrem Webbrowser betrachten. 1

Starten Sie Ihren Webbrowser.

2

Öffnen Sie die Datei Appraise.html im Ordner Lesson02/02End.

3

Scrollen Sie im Browser-Fenster nach unten, um den vollständigen Inhalt der Seite sehen zu können.

4

Wenn Sie mit dem Betrachten der Seite fertig sind, schließen Sie die Datei Appraise.html und beenden Sie Ihren Webbrowser.

53

54 LEKTION 2 Mit Text und Tabellen arbeiten

Entwerfen einer Webseite Damit Sie gleich mit dem Entwerfen der Webseite beginnen können, haben wir die Seite bereits in Adobe GoLive erzeugt und auch schon Text hinzugefügt. Öffnen Sie nun die Seite. 1

Starten Sie Adobe GoLive. Es wird ein neues Dokument mit dem Namen Ohne Titel.html geöffnet und einige Paletten werden standardmäßig in Fenstern gruppiert angezeigt.

Da Sie zu diesem Zeitpunkt der Lektion kein neues Dokument und keine Paletten benötigen, werden Sie nun Ohne Titel.html und alle angezeigten Paletten schließen. 2

Wählen Sie Datei: Schließen, um Ohne Titel.html zu schließen.

3

Um alle Palettengruppen auszublenden, klicken Sie in das jeweilige Schließfeld oben rechts (Windows) oder oben links (Mac OS) im Gruppenfenster.

4

Wählen Sie Datei: Öffnen und wählen Sie die Datei Appraise.html im Verzeichnis Lesson02/02Start und klicken Sie auf »Öffnen«.

ADOBE GOLIVE 5.0 Classroom in a Book

Jetzt können Sie mit dem Entwerfen der Seite beginnen. Zunächst werden Sie den Titel der Seite ändern. Beim Betrachten einer Seite in einem Webbrowser wird der Titel der Seite in der Titelzeile des Webbrowsers angezeigt. 5

Wählen Sie den Seitentitel Welcome to Adobe GoLive 5 aus.

6

Geben Sie Appraisal Page als neuen Titel ein und drücken Sie die Eingabetaste.

Seitentitel auswählen

Neuer Seitentitel

Nun werden Sie eine voreingestellte Fenstergröße für die Seite auswählen. Diese Fenstergröße ist nur in Adobe GoLive gültig, nicht in Webbrowsern. Allerdings kann diese Fenstergröße Ihnen beim Einhalten einer bestimmten gewünschten Seitengröße helfen. Es empfiehlt sich, den Entwurf Ihrer Seite auf eine Seitenbreite von 580 Pixel zu begrenzen, damit sie auch noch auf Bildschirmen in VGAAuflösung (640 x 480 Pixel) sicher betrachtet werden kann, ohne die Seitenbreite zu scrollen. 7

Wählen Sie im Menü »Fenstergröße ändern« unten rechts im Dokumentfenster den Eintrag »580«.

Fenstergröße ändern

55

56 LEKTION 2 Mit Text und Tabellen arbeiten

Nun werden Sie die Hintergrundfarbe der Seite in »Khaki« ändern. 8

Wählen Sie Fenster: Farbe, um die Farben-Palette anzuzeigen.

9

Klicken Sie in der Farben-Palette auf die Schaltfläche »Web-Farbenliste« ( ). Oder klicken Sie auf das Dreieck in der oberen rechten Ecke der FarbenPalette, um das Farben-Palettenmenü aufzurufen, und wählen Sie dort den Eintrag »Web-Farbenliste« aus.

10 Wählen Sie aus der Liste den Eintrag »#CCCC99« aus oder geben Sie in das Feld »Wert« CCCC99 ein und drücken Sie die Eingabetaste. Die ausgewählte Farbe erscheint im Vorschau-Feld der Farben-Palette. 11 Ziehen Sie die Farbe mit gedrückter Maustaste aus dem Vorschau-Feld der Farben-Palette auf das Seite-Symbol ( ) im Dokumentfenster.

Hintergrundfarbe der Seite ändern

Die Hintergrundfarbe der Seite verändert sich in »Khaki«. 12

Wählen Sie Datei: Speichern.

Hinzufügen von Text Sie können einem Adobe-GoLive-Dokument Text hinzufügen, indem Sie ihn direkt in das Dokumentfenster eingeben. Sie werden jetzt der Seite eine Überschrift hinzufügen.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie vor das erste Wort im Dokument, um eine Einfügemarke zu setzen.

2

Geben Sie Putting a Price on Your Guitar ein und drücken Sie die Eingabetaste.

Adobe GoLive bietet Ihnen noch zahlreiche andere Möglichkeiten, um Ihren Dokumenten Text hinzuzufügen:

• Sie können Text aus anderen Anwendungen in eine Tabelle importieren (wie Sie später in dieser Lektion noch sehen werden). • Sie können einer Seite Text hinzufügen, indem Sie Layout-Textrahmen und Rahmen verwenden. Sie werden diese Vorgehensweise in Lektion 3 »Webseiten gestalten« kennen lernen. • Sie können Text in einem Dokument aus einer anderen Anwendung, wie zum Beispiel Microsoft Word, kopieren und ihn dann in ein Adobe-GoLiveDokument einfügen. • Sie können Text-Clips, die mit SimpleText oder Note Pad erzeugt wurden, vom Desktop mittels Drag & Drop in Adobe-GoLive-Dokumente ziehen. Weitere Informationen zum Hinzufügen von Text in Adobe-GoLive-Dokumente finden Sie in Kapitel 4 »Erstellen von Text« im Adobe GoLive 5.0 Handbuch.

57

58 LEKTION 2 Mit Text und Tabellen arbeiten

Formatieren von Text Mit Adobe GoLive können Sie Text auf vielfältige Weise formatieren. Verwenden Sie Absatzformate, wie zum Beispiel Überschrift 1 und Überschrift 2, um Absätze zu formatieren. Benutzen Sie Auszeichnungen, wie Fett oder Kursiv, um Text hervorzuheben. Außerdem können Sie Strukturstile verwenden, wie beispielsweise Betonung oder Starke Betonung, um Text sowohl hervorzuheben als auch zu gliedern. Nun werden Sie Absatzformate anwenden, um die Überschriften im Dokument zu formatieren. 1

Klicken Sie auf der Seite irgendwo in die Überschrift Putting a Price on Your Guitar.

2

Wählen Sie aus dem Menü »Absatzformat« in der Werkzeugleiste »Überschrift 1«.

3

Klicken Sie in den Absatz unter der Überschrift Getting Your Guitar Appraised und wählen Sie »Überschrift 2« aus dem Menü »Absatzformat«.

Jetzt werden Sie dem Text einige Auszeichnungen hinzufügen. 4

Wählen Sie das Satzglied Classic Guitar am Ende des Absatzes vor der Überschrift Getting Your Guitar Appraised.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Klicken Sie auf die Schaltfläche »Fett« ( bzw. ) in der Werkzeugleiste, um den ausgewählten Text fett auszuzeichnen. (Anmerkung: Unter Windows ist die Schaltfläche nicht korrekt übersetzt worden, daher wird dort ein »B« für »Bold« dargestellt.)

Hinzufügen einer Auszeichnung zu Text

Sie können eine Auszeichnung ganz einfach wieder entfernen und eine andere hinzufügen. 6

Klicken Sie erneut auf die Schaltfläche »Fett«, um diese Auszeichnung vom ausgewählten Text zu entfernen.

7

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Kursiv« ( bzw. ), um den ausgewählten Text kursiv anzeigen zu lassen, und klicken Sie danach außerhalb des Textes, um die Auswahl aufzuheben. (Anmerkung: Unter Windows ist die Schaltfläche nicht korrekt übersetzt worden, daher wird dort ein »I« für »Italic« dargestellt.)

8

Fügen Sie die Auszeichnung Kursiv auch dem Satzglied Musician’s World am Ende des gleichen Satzes zu.

59

60 LEKTION 2 Mit Text und Tabellen arbeiten

Um einem ausgewählten Text einen Strukturstil hinzuzufügen, wählen Sie eine Möglichkeit aus dem Untermenü »Struktur« unter Text: Struktur aus. Weitere Informationen über Strukturstile finden Sie in Kapitel 4 unter »Formatieren von Text mit Hilfe von physischen und strukturellen Stilen« im Adobe GoLive 5.0 Handbuch.

Erzeugen von Listen Sie können Adobe GoLive verwenden, um Absätze schnell in nummerierte oder unnummerierte Listen zu formatieren. Sie werden nun aus einem Teil des Textes der Seite eine nummerierte Liste erzeugen. 1

Scrollen Sie im Text nach unten, um den gesamten Abschnitt Getting Your Guitar Appraised anzuzeigen.

2

Wählen Sie die sieben Absätze unter dem ersten Absatz in diesem Abschnitt aus (Ihre Auswahl sollte mit Two color photos beginnen und mit $25 payable by Visa, Mastercard, or a personal check drawn from a US bank. enden).

3

Klicken Sie auf die Schaltfläche »Nummerierte Liste« (Mac OS) bzw. »Numerierung« (Windows) ( ) in der Werkzeugleiste, um die sieben Absätze als nummerierte Liste zu formatieren.

ADOBE GOLIVE 5.0 Classroom in a Book

Adobe GoLive erzeugt per Voreinstellung eine nummerierte Liste mit arabischen Ziffern. Sie können aus mehreren Möglichkeiten auswählen, um die Art der Nummerierung der Liste zu ändern.

Erzeugen einer nummerierten Liste

4

Wählen Sie Text: Liste: Groß-Römisch, um die führenden Zeichen in große römische Ziffern zu ändern.

Nun werden Sie die nummerierte Liste in eine unnummerierte Liste ändern. 5

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Aufzählungspunkte« ( ), um die führenden Zeichen von Nummern in Punkte zu ändern.

6

Klicken Sie außerhalb der Liste, um die Auswahl aufzuheben.

Mit Adobe GoLive können Sie ganz einfach hierarchische Listen mit unterschiedlichen Nummerierungsstilen oder Führungszeichen erzeugen. 7

Wählen Sie den zweiten und den dritten Punkt der Liste an.

61

62 LEKTION 2 Mit Text und Tabellen arbeiten

8

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Listeneintrag einrücken« ( ), um die ausgewählten Punkte weiter einzurücken und ihre Führungszeichen von Punkten in Kreise zu ändern.

Einrücken von Listenpunkten

Hinzufügen eines Zeilenumbruchs Sie werden feststellen, dass der letzte Eintrag in der unnummerierten Liste länger als die übrigen Einträge ist. Sie können einen Zeilenumbruch verwenden, um den letzten Punkt in zwei Zeilen statt in einer fließen zu lassen. 1

Klicken Sie vor das Wort drawn im letzten Punkt, um eine Einfügemarke zu setzen.

2

Wählen Sie, wenn nötig, Fenster: Objekte, um die Objekte-Palette anzuzeigen, und vergewissern Sie sich, dass die Registerkarte »Allgemein« ( ) ausgewählt ist.

3

Doppelklicken Sie in der Palette auf das Zeilenumbruch-Symbol oder ziehen Sie das Zeilenumbruch-Symbol aus der Palette auf die Einfügemarke auf der Seite.

ADOBE GOLIVE 5.0 Classroom in a Book

Es wird ein Zeilenumbruch ausgeführt und der Text, beginnend mit drawn, fließt in die nächste Zeile.

Hinzufügen eines Zeilenumbruches

Sie können auch einen Zeilenumbruch erzeugen, indem Sie in einen Absatz klicken, um eine Einfügemarke zu setzen, und anschließend mit gedrückter Umschalttaste die Eingabetaste oder den Zeilenschalter drücken.

Ändern der Textfarbe Nun werden Sie die Farbe der unnummerierten Liste in Rot ändern. 1

Wählen Sie den Text in der unnummerierten Liste zusammen mit dem Führungszeichen des ersten Punktes der Liste aus.

2

Klicken Sie auf das Textfarbfeld in der Werkzeugleiste, um die Farben-Palette anzuzeigen.

3

Geben Sie in der Farben-Palette in das Feld »Wert« 990000 ein und drücken Sie die Eingabetaste.

Die gewählte Farbe erscheint im Vorschau-Feld der Farben-Palette und dem Textfarbfeld in der Werkzeugleiste. Außerdem ändert sich die Farbe des ausgewählten Textes in Rot. 4

Klicken Sie außerhalb des ausgewählten Textes, um die Auswahl aufzuheben.

5

Wählen Sie Datei: Speichern.

63

64 LEKTION 2 Mit Text und Tabellen arbeiten

Tabellen hinzufügen Adobe GoLive ermöglicht Ihnen das schnelle Hinzufügen von Tabellen in Ihre Dokumente. Tabellen werden häufig eingesetzt, um den Textfluss auf einer Webseite zu steuern. Außerdem werden Tabellen benutzt, um Informationen in Zeilen und Spalten darzustellen. Sie werden in dieser Lektion Tabellen für beide Anwendungsbereiche erstellen und formatieren.

Hinzufügen einer Tabelle, um den Textfluss zu steuern Um eine Vorstellung davon zu bekommen, wie Text auf einer Seite ohne Tabellen fließt, werden Sie die Fenstergröße des Dokuments ändern. 1

Wählen Sie aus dem Menü »Fenstergröße ändern« im Dokumentfenster unten rechts 200.

Sie werden feststellen, dass sich der Textfluss dem kleineren Fenster anpasst. Falls Sie verhindern möchten, dass sich der Text einem größenveränderten Fenster anpasst, können Sie ihn in einer einzelligen Tabelle platzieren. Text in einer einzelligen Tabelle behält auch dann die eingestellte Breite der Tabelle, wenn sich das umgebende Fenster in der Größe ändert.

Kleinere Fenstergröße wählen

Ergebnis

Nun werden Sie der Seite eine Tabelle hinzufügen, mit der Sie den Textfluss auf der Seite steuern können. 2

Wählen Sie aus dem Menü »Fenstergröße ändern« 580, um die voreingestellte Fenstergröße wiederherzustellen.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Scrollen Sie im Dokumentfenster an den Anfang des Dokuments. Klicken Sie auf der Seite vor die Überschrift Putting a Price on Your Guitar, um eine Einfügemarke zu erzeugen.

Sie werden jetzt an der Position der Einfügemarke eine Tabelle einfügen. 4

Doppelklicken Sie auf das Tabellensymbol in der Palette oder ziehen Sie das Tabellensymbol aus der Palette auf die Einfügemarke auf der Seite.

Hinzufügen einer Tabelle zur Seite

An der Einfügemarke erscheint eine leere Tabelle mit drei Zeilen und drei Spalten und der Text auf der Seite wird unter die Tabelle bewegt. Nun werden Sie mit Hilfe des Tabellen-Inspektors Zeilen und Spalten entfernen, um eine einzellige Tabelle zu erzeugen. 5

Wählen Sie Fenster: Inspektor, um den Inspektor anzuzeigen.

Der Inspektor ändert sich zum »Tabellen Inspektor« mit angewählter TabellenRegisterkarte (zur Erinnerung wird das Wort Tabelle in der Fußzeile des Inspektors dargestellt und zeigt somit an, dass der Inspektor sich in den TabellenInspektor geändert hat). 6

Geben Sie im Tabellen-Inspektor für Zeilen und Spalten jeweils 1 ein.

Jetzt werden Sie Optionen für das Erscheinungsbild der Tabelle festlegen. 7

Geben Sie unter »Breite« 580 ein, um die Tabelle zu verbreitern.

65

66 LEKTION 2 Mit Text und Tabellen arbeiten

Beachten Sie, dass im Popup-Menü »Höhe« standardmäßig »Autom.« ausgewählt ist, so dass die Höhe der Tabelle sich automatisch ihrem Inhalt anpasst. 8

Geben Sie unter »Rand« 0 ein, um den Rahmen der Tabelle zu entfernen. Geben Sie unter »Innenabstand« 25 ein, um den horizontalen und vertikalen Abstand der Tabellenzelle zu erhöhen.

Die Option »Innenabstand« legt die Ränder innerhalb jeder Tabellenzelle für Oben, Links, Rechts und Unten fest. Falls Sie diese Option mit einer einzelligen Tabelle benutzen, die den gesamten Text einer Seite enthält, legen Sie so im Grunde genommen die Ränder der Seite fest. Sie werden nun der Tabelle ein Hintergrundbild hinzufügen. 9

Schalten Sie das Kontrollkästchen für »Hintergrundbild:« ein und klicken Sie auf die zugehörige Schaltfläche »Durchsuchen« ( ). Wählen Sie die Datei Wood.gif im Pfad Lesson02/02Start/ aus und klicken Sie auf »Öffnen«.

Wenn Sie Ihre eigene Webseite mit einer Grafikdatei verknüpfen, empfehlen wir Ihnen, die HTML-Datei und die Grafikdatei im Adobe-GoLive-Site-Fenster zu speichern und zu verwalten. In Lektion 3, »Entwerfen von Webseiten«, werden Sie für Gage Vintage Guitars eine Website entwerfen und lernen, wie Sie das SiteFenster zum Speichern und Verwalten Ihrer Dateien benutzen können. Nun werden Sie den Text in die Tabellenzelle ziehen. 10 Platzieren Sie den Mauszeiger vor der Überschrift Putting a Price on Your Guitar und ziehen Sie mit gedrückter Maustaste über den gesamten Text auf der Seite, um ihn auszuwählen. 11 Scrollen Sie im Dokumentfenster nach oben, so dass Sie die Tabelle sehen können. Platzieren Sie den Mauszeiger über dem ausgewählten Text und ziehen Sie ihn in die Tabellenzelle.

Ziehen, um Text auf der Seite auszuwählen

Ziehen des ausgewählten Textes in die Tabellenzelle

ADOBE GOLIVE 5.0 Classroom in a Book

12 Scrollen Sie im Dokumentfenster nach oben, damit Sie den Anfang des Dokuments sehen können, und klicken Sie außerhalb des ausgewählten Textes, um die Auswahl aufzuheben. Jetzt werden Sie erneut die Fenstergröße verkleinern, um zu sehen, wie sich der Textfluss innerhalb der Tabelle verhält. 13 Wählen Sie im Menü »Fenstergröße ändern« 200. Sie werden feststellen, dass der Textfluss in der Tabelle sich auch dann an der eingestellten Tabellenbreite orientiert, wenn die Größe des Dokumentfensters geändert wird. 14 Wählen Sie im Menü »Fenstergröße ändern« 580, um wieder die ursprüngliche Fenstergröße einzustellen. 15 Wählen Sie Datei: Speichern.

Hinzufügen einer Tabelle zur Darstellung von Tabellenkalkulationsdaten In den schriftlichen Beurteilungen verwendet Gage Vintage Guitars Abkürzungen, um den Zustand einer Gitarre zu beschreiben. Sie werden eine zweite Tabelle hinzufügen, die eine Liste mit den verwendeten Abkürzungen und ihre Bedeutung enthält. Danach werden Sie Daten einer reinen Textdatei importieren, die mit einem Textverarbeitungsprogramm erzeugt wurden. 1

Scrollen Sie im Dokument nach ganz unten. Klicken Sie hinter das letzte Wort des Absatzes, der mit In our written appraisal beginnt, und drücken Sie die Eingabetaste.

2

Ziehen Sie das Tabellensymbol aus der Tabelle an die Einfügemarke auf der Seite.

An der Einfügemarke erscheint eine leere Tabelle und der Inspektor wird zum Tabellen-Inspektor.

67

68 LEKTION 2 Mit Text und Tabellen arbeiten

Beachten Sie, dass Sie die zweite Tabelle innerhalb der vorhandenen Tabellenzelle auf der Seite platziert haben. Adobe GoLive ermöglicht das Platzieren einer Vielzahl von Objekten innerhalb von Tabellenzellen. Dazu gehören Text, weitere Tabellen und Bilder.

Einnisten einer Tabelle

Jetzt werden Sie eine Textdatei in die Tabelle importieren. Die Daten in dieser Textdatei sind so formatiert, dass jede Zeile der Textdatei dem Inhalt einer Tabellenzeile entspricht und Tabulatoren die Trennungen zwischen den Spalten anzeigen. Falls Sie auf Ihrem System ein Textverarbeitungsprogramm installiert haben, können Sie die Textdatei zuvor darin öffnen und ihren Inhalt betrachten. Wenn Sie nicht über ein Textverarbeitungsprogramm verfügen, überspringen Sie die folgenden drei Schritte und machen bei Schritt 6 weiter 3

Starten Sie Ihr Textverarbeitungsprogramm.

4

Öffnen Sie die Datei Table.txt im Ordnerpfad Lesson02/02Start/.

5

Wenn Sie mit dem Betrachten der Datei fertig sind, schließen Sie sie und beenden Sie Ihr Textverarbeitungsprogramm.

6

Klicken Sie im Tabellen-Inspektor von Adobe GoLive auf die Schaltfläche »Durchsuchen« neben der Option »Tabulator-Text importieren«.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Wählen Sie die Datei Table.txt im Ordnerpfad Lesson02/02Start/. Vergewissern Sie sich, dass im Popup-Menü »Spaltentrennzeichen« der Eintrag »Tabulator« ausgewählt ist, und klicken Sie auf »Öffnen«.

Importieren einer Datei mit Tabulator-Spaltentrennzeichen

Ergebnis

Adobe GoLive fügt der Tabelle die notwendigen Zeilen und Spalten hinzu, damit die Daten untergebracht werden können, und importiert die Daten dann in die Tabelle. Die meisten Tabellenkalkulationsanwendungen können Daten als reine Textdateien exportieren. Weitere Informationen finden Sie in der Dokumentation Ihrer Tabellenkalkulationsanwendung.

Formatieren einer Tabelle mit Tabellenkalkulationsdaten Eine Tabelle lässt sich formatieren, indem Sie entsprechende Optionen im Tabellen-Inspektor festlegen, einen vordefinierten Tabellenstil aus der TabellenPalette hinzufügen oder beides zusammen durchführen. Den Tabellen-Inspektor benötigen Sie für das Festlegen des grundlegenden Erscheinungsbildes der Tabelle, wie beispielsweise der Anzahl der Zeilen und Spalten. Mit Hilfe von vordefinierten Tabellenstilen können Sie schnell bestimmte Tabellenformate zuweisen, wie zum Beispiel die Farbe einzelner Tabellenzellen.

69

70 LEKTION 2 Mit Text und Tabellen arbeiten

Nun werden Sie den Tabellen-Inspektor benutzen, um die Anzahl der Zeilen und Spalten der Tabelle festzulegen. Da die dritte Spalte keine Daten enthält, werden Sie sie aus der Tabelle entfernen. 1

Geben Sie im Tabellen-Inspektor unter »Spalten« 2 ein.

Nun werden Sie über jeder der Spalten der Tabelle eine Überschrift einfügen. Dazu fügen Sie am Anfang der Tabelle eine leere Zeile ein. 2

Klicken Sie die untere oder rechte Kante der ersten Zelle in der linken Spalte an, um sie auszuwählen. (Vergewissern Sie sich, dass Sie die Zelle auswählen und nicht den Text der Zelle.)

Im Tabellen-Inspektor wird automatisch die Registerkarte »Zelle« ausgewählt. 3

Klicken Sie im Tabellen-Inspektor auf die Schaltfläche »Zeile hinzu«, um über der aktuellen Auswahl eine Zeile einzufügen.

Klicken auf untere Kante der Tabellenzelle, um sie auszuwählen

4

Schaltfläche »Zeile hinzu«

Klicken Sie innerhalb der neuen ersten Zelle in der linken Spalte, um eine Einfügemarke zu platzieren.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Geben Sie Abbreviation ein, drücken Sie die Tabulatortaste, um die Einfügemarke in die erste Zelle der rechten Spalte zu bewegen, und geben Sie dort Meaning ein.

Jetzt werden Sie die Tabelle mit Hilfe eines in Adobe GoLive gespeicherten vordefinierten Tabellenstils formatieren. Zunächst werden Sie sich diesen Stil in der Tabellen-Palette in der Vorschau ansehen. 6

Wählen Sie Fenster: Tabelle, um die Tabellen-Palette anzuzeigen.

7

Klicken Sie in der Tabellen-Palette auf die Registerkarte »Stil«. Wählen Sie anschließend aus dem Popup-Menü in der oberen linken Ecke der Registerkarte »Stil« den Eintrag »Grün«.

8

Klicken Sie dann auf die Schaltfläche »Anwenden«, um der Tabelle den ausgewählten Stil hinzuzufügen.

Ein vordefinierter Stil lässt sich nach dem Hinzufügen ganz einfach wieder entfernen. 9

Klicken Sie in der Registerkarte »Stil« auf die Schaltfläche »Löschen«, um den ausgewählten Stil von der Tabelle zu entfernen.

Falls Sie unter den vordefinierten Tabellenstilen in Adobe GoLive keinen Stil finden, der Ihren Erfordernissen entspricht, können Sie mit Hilfe des TabellenInspektors und den zahlreichen Paletten in Adobe GoLive Ihre eigenen Stile entwerfen.

71

72 LEKTION 2 Mit Text und Tabellen arbeiten

Nun werden Sie mit Hilfe des Tabellen-Inspektors Optionen für das Erscheinungsbild der Tabelle festlegen. 10 Wählen Sie im Tabellen-Inspektor aus dem Popup-Menü »Breite« den Eintrag »Autom.«. 11 Geben Sie für »Umrandung« 6 ein, um die Breite des Tabellenrandes zu erhöhen. Geben Sie unter »Innenabstand« 4 ein, um den horizontalen und vertikalen Abstand der Tabellenzellen zu erhöhen. Geben Sie unter »Zellabstand« 4 ein, um den Abstand zwischen den Tabellenzellen zu erhöhen. Jetzt werden Sie über der Tabelle eine Beschriftung einfügen. 12 Schalten Sie im Tabellen-Inspektor das Kontrollkästchen vor »Beschriftung« ein und vergewissern Sie sich, dass im zugehörigen Popup-Menü der Eintrag »Über Tabelle« ausgewählt ist. 13 Klicken Sie unmittelbar über der Tabelle, um dort eine Einfügemarke zu platzieren, und geben Sie Abbreviations ein.

Optionen »Beschriftung« und »Über Tabelle«

Eingeben der Beschriftung über Tabelle

14 Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Linksbündig« ( um die Beschriftung am linken Rand der Tabelle auszurichten.

),

ADOBE GOLIVE 5.0 Classroom in a Book

15 Wählen Sie den Text Abbreviations aus und klicken Sie in der Werkzeugleiste auf die Schaltfläche »Fett« ( bzw. ). Anstatt den Text durch Ziehen mit der Maus auszuwählen, können Sie ein einzelnes Wort durch Doppelklicken oder eine Textzeile durch Dreifachklicken auswählen. Jetzt werden Sie die Schriftgröße des Textes Abbreviations vergrößern. Sie können das Menü »Schriftgröße« dazu verwenden, eigene Schriftgrößen hinzuzufügen, die die Voreinstellungen der Browser umgehen. Die meisten Browser sind auf die Darstellung von Text in 12 Punkt voreingestellt. Das Adobe-GoLiveSchriftgröße-Menü enthält Schriftgrößen von 1 bis 7. Die Schriftgröße 3 stellt Text in der voreingestellten Größe des Browsers dar, die Schriftgröße 2 stellt Text eine Stufe kleiner und die Schriftgröße 4 eine Stufe größer dar usw. 16 Wählen Sie in der Werkzeugleiste aus dem Menü »Schriftgröße« den Eintrag 4 und klicken Sie in den Leerraum außerhalb der Überschrift, um die Auswahl aufzuheben.

Jetzt werden Sie die Spaltenüberschriften formatieren. 17 Wählen Sie den Text Abbreviation in der ersten Zelle der Tabelle aus und wählen Sie Text: Stil: Unterstrichen, um den ausgewählten Text zu unterstreichen. Wählen Sie anschließend den Text Meaning aus und unterstreichen Sie ihn ebenfalls. Nun werden Sie die Breite der Spalten in der Tabelle anpassen. 18 Klicken Sie die untere oder rechte Kante einer beliebigen Zelle in der linken Spalte der Tabelle an, um sie auszuwählen.

73

74 LEKTION 2 Mit Text und Tabellen arbeiten

19 Wählen Sie im Tabellen-Inspektor aus dem Popup-Menü rechts vom Textfeld »Breite« den Eintrag »Pixel« aus. Geben Sie unter »Breite« 100 ein. Die ausgewählte Zelle und alle anderen Zellen in der Spalte werden verbreitert. 20 Klicken Sie die untere oder rechte Kante einer beliebigen Zelle in der rechten Spalte der Tabelle an, um sie auszuwählen. Wählen Sie »Pixel« aus dem Popup-Menü rechts vom Textfeld »Breite« und geben Sie unter »Breite« 140 ein. Sie können die Breite einer Tabellenspalte auch verändern, indem Sie den Zeiger auf dem rechten Rand der Spalte platzieren, so dass der Zeiger sich in einen Doppelpfeil ändert, und dann nach rechts oder links ziehen. 21

Wählen Sie Datei: Speichern.

Ändern der Farbe von Tabellenzellen Jetzt werden Sie die Farbe der Zellen in der Tabelle in Gelb ändern. 1

Bewegen Sie den Zeiger auf den linken Rand der Tabelle und klicken Sie, um die Tabelle auszuwählen.

Im Tabellen-Inspektor wird automatisch die Registerkarte »Tabelle« ausgewählt. 2

Klicken Sie im Tabellen-Inspektor auf das Farbfeld, um es auszuwählen und die Farben-Palette anzuzeigen. (Achten Sie darauf, das Farbfeld anzuklicken und nicht das Kontrollkästchen links daneben.)

3

Geben Sie in der Farben-Palette in das Textfeld »Wert« FFFFCC ein und drücken Sie die Eingabetaste.

ADOBE GOLIVE 5.0 Classroom in a Book

Die ausgewählte Farbe erscheint im Vorschaufenster der Farben-Palette und im Farbfeld des Tabellen-Inspektors; außerdem ändert sich die Farbe der Tabellenzellen in Gelb.

Linken Rand der Tabelle anklicken, um sie auszuwählen

Auf Farbfeld im Tabellen-Inspektor klicken; Farbe in Farben-Palette auswählen

Sie können auch die Farbe einzelner Zellen einer Tabelle ändern. Sie werden nun die Farbe der Zellen in der rechten Spalte in Grün ändern.

75

76 LEKTION 2 Mit Text und Tabellen arbeiten

4

Klicken Sie mit gedrückter Umschalttaste auf den oberen Rand der rechten Spalte, um alle Zellen dieser Spalte auszuwählen.

Alle Zellen einer Spalte auswählen

Die Registerkarte »Zelle« wird im Tabellen-Inspektor automatisch ausgewählt. 5

Klicken Sie im Tabellen-Inspektor auf das Farbfeld, um es auszuwählen und die Farben-Palette anzuzeigen.

6

Geben Sie in das Textfeld »Wert« der Farben-Palette 99CC99 ein und drücken Sie die Eingabetaste.

Die ausgewählte Farbe erscheint im Vorschaufenster der Farben-Palette und im Farbfeld des Tabellen-Inspektors; außerdem ändert sich die Farbe der Tabellenzellen in Grün. 7

Klicken Sie in den Leerraum außerhalb der Tabelle, um die Auswahl aller Zellen aufzuheben.

Inhalte einer Tabelle sortieren Adobe GoLive erleichtert Ihnen das Sortieren der Inhalte einer Tabelle, so dass der Inhalt ihrer Reihen oder Spalten in alphabetischer und numerischer Reihenfolge erscheint. Sie können diese Sortierung einer ganzen Tabelle, bestimmten Reihen, bestimmten Spalten oder bestimmten Zellen zuweisen. Sie werden nun die Registerkarte »Auswahl« der Tabellen-Palette verwenden, um den Inhalt der Tabelle zu sortieren.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Bewegen Sie den Mauszeiger zum linken Rand der Tabelle und klicken Sie, um die ganze Tabelle auszuwählen.

2

Klicken Sie in der Tabellen-Palette auf die Registerkarte »Auswahl«.

3

Ziehen Sie mit gedrückter Maustaste in der Tabellenvorschau in der Registerkarte »Auswahl« über alle Tabellenzellen, mit Ausnahme der Zellen in der ersten Zeile, um alle Zellen mit Ausnahme der beiden Zellen in der ersten Zeile auszuwählen.

4

Wählen Sie im Popup-Menü »Sortieren« den Eintrag »Zeilen«, um die Reihenfolge der Zeilen in der Tabelle zu sortieren. Durch das Sortieren der Zeilen werden die Inhalte von einer oder mehreren Spalten in alphanumerischer Reihenfolge angezeigt.

5

Wählen Sie im Popup-Menü ganz links über dem Popup-Menü »Sortieren« den Eintrag 1, um die erste Spalte als primäre Spalte beim Sortieren der Tabelleninhalte zu bestimmen. Das bedeutet, dass das Sortieren der ersten Spalte für Adobe GoLive oberste Priorität hat.

Nun werden Sie für die erste Spalte das Sortieren in aufsteigender Reihenfolge festlegen. 6

Achten Sie darauf, dass die Schaltfläche »Aufsteigende Reihenfolge« ( ) neben dem Popup-Menü ganz links angezeigt wird. Wenn das nicht der Fall ist, müssen Sie auf die Schaltfläche »Absteigende Reihenfolge« ( ) klicken, damit sie sich in die Schaltfläche »Aufsteigende Reihenfolge« ändert.

77

78 LEKTION 2 Mit Text und Tabellen arbeiten

Da die Tabelle nur aus zwei Spalten besteht, brauchen Sie keine zweite oder dritte Spalte für das Sortieren der Inhalte zu bestimmen. Das Sortieren der Inhalte der zweiten Spalte wird hier automatisch zur zweiten Priorität für Adobe GoLive. 7

Klicken Sie auf die Schaltfläche »Sortieren«, um die ausgewählten Tabellenzellen unter Berücksichtigung Ihrer festgelegten Kriterien zu sortieren.

Hinzufügen von Schriften Adobe GoLive enthält voreingestellte Sammlungen von Schriften, die Sie dem Text Ihrer Dokumente zuweisen können. Eines der Verzeichnisse enthält die Schriften Times New Roman, Georgia und Times. Wenn Sie diese Sammlung in Ihrer Webseite verwenden, wird der Browser eines Betrachters zuerst versuchen, den Text in Times New Roman darzustellen, dann in Georgia und zuletzt in Times. Falls keine dieser Schriften im Betriebssystem des Betrachters installiert ist, stellt der Browser den Text mit seinen voreingestellten Schriften dar. Jetzt werden Sie den Schriftsammlungs-Editor aufrufen, um mehr über die für Ihr Dokument zur Verfügung stehenden Schriftsammlungen zu erfahren. 1

Wählen Sie Text: Schrift: Schriftsammlungen bearbeiten, um den Schriftsammlungs-Editor aufzurufen.

2

Rufen Sie die voreingestellten Zeichensatz-Verzeichnisse auf:

• Unter Windows wählen Sie »Standard« aus dem Menü oben links im Dialogfeld. • Unter Mac OS wählen Sie »Standard« in der linken Spalte des Dialogfelds.

ADOBE GOLIVE 5.0 Classroom in a Book

Die Schriftsammlung »Arial« wird neben anderen Schriftsammlungen in der Spalte »Schriftsammlungen« des Dialogfelds angezeigt.

3

Klicken Sie auf »Abbrechen«, um das Dialogfenster zu schließen.

Nun werden Sie die für Text verwendete Schriftsammlung in Ihrem Dokument ändern. 4

Klicken Sie irgendwo in der einzelligen Tabelle, die den Seitentext und die platzierte Tabelle enthält, um eine Einfügemarke zu platzieren. Wählen Sie anschließend Bearbeiten: Alles auswählen, um den gesamten Text im Dokument auszuwählen.

5

Wählen Sie Text: Schrift: Arial, um die Schriftsammlung Arial für den ausgewählten Text auszuwählen.

6

Klicken Sie irgendwo innerhalb des Dokuments, um die Textauswahl aufzuheben.

Der überwiegende Teil des Textes übernimmt die Schrift Arial. Sie werden allerdings feststellen, dass der Text in der Tabelle weiterhin die Schrift Times verwendet. Um die Schrift innerhalb von Tabellen zu ändern, müssen Sie zunächst die Tabellenüberschrift und die Zellen einzeln auswählen. 7

Wählen Sie zunächst den Text Abbreviations in der Tabellenüberschrift aus und wählen Sie dann Text: Schrift: Arial. Klicken Sie anschließend außerhalb des ausgewählten Textes, um die Auswahl aufzuheben.

79

80 LEKTION 2 Mit Text und Tabellen arbeiten

Der Text in der Tabellenüberschrift ändert sich in die Schrift Arial. 8

Klicken Sie bei gedrückter Umschalttaste auf den oberen Rand der linken Spalte, um alle ihre Zellen auszuwählen. Klicken Sie mit gedrückter Umschalttaste auf den oberen Rand der rechten Spalte, um ihre Zellen zusätzlich auszuwählen. Wählen Sie dann Text: Schrift: Arial und klicken Sie anschließend außerhalb der ausgewählten Zellen, um die Auswahl aufzuheben.

Der Text in den Zellen der Tabelle ändert sich in die Schrift Arial. Sie können mit Adobe GoLive auch selbst Schriftsammlungen erzeugen, die Sie dem Text Ihrer Dokumente hinzufügen können. Weitere Informationen finden Sie unter »Schriftsammlungen zuweisen« im Kapitel 4 im Adobe GoLive 5.0 Handbuch.

Erfassen eines Tabellenstils Nun werden Sie den gerade erstellten Tabellenstil erfassen. Dabei wird der Stil der Registerkarte »Stil« in der Tabellen-Palette hinzugefügt, damit Sie diesen Stil weiter verwenden können und so ein einheitliches Erscheinungsbild der Tabellen Ihrer Website entsteht. 1

Klicken Sie auf den oberen oder linken Rand der Tabelle, die die Daten enthält, um sie auszuwählen.

2

Klicken Sie in der Tabellen-Palette auf die Registerkarte »Stil«.

3

Klicken Sie auf die Schaltfläche »Neu«, um einen neuen Tabellenstil zu erzeugen.

4

Geben Sie im Textfeld über der Schaltfläche »Neu« den Namen Gage als Name des neuen Tabellenstils ein.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Klicken Sie auf die Schaltfläche »Erfassen«, um den Stil der ausgewählten Tabelle im Dokumentfenster zu erfassen, und speichern Sie ihn als neuen Tabellenstil.

Um den neuen Stil einer anderen Tabelle zuzuweisen, brauchen Sie nur die gewünschte Tabelle im Dokumentfenster auszuwählen, den neuen Tabellenstil im Popup-Menü oben links im Tabellen-Inspektor auszuwählen und auf die Schaltfläche »Anwenden« zu klicken.

Bearbeiten von Text Mit Adobe GoLive können Sie den Text in Ihren Dokumenten so einfach wie mit einem Textverarbeitungsprogramm bearbeiten:

• Sie können Text löschen, indem Sie ihn entweder auswählen und die Löschtaste drücken oder Bearbeiten: Ausschneiden wählen oder die Tasten Strg+X (Windows) bzw. Befehl+X (Mac OS) drücken. • Sie können Rechtschreibfehler suchen und berichtigen lassen, indem Sie Bearbeiten: Rechtschreibprüfung (Windows) bzw. Bearbeiten: Rechtschreibkorrektur (Mac OS) auswählen. • Sie können Text suchen und ersetzen, indem Sie Bearbeiten: Suchen wählen.

81

82 LEKTION 2 Mit Text und Tabellen arbeiten

Sie werden jetzt das Wort loud suchen und durch das Wort powerful ersetzen. Sie werden damit beginnen, Voreinstellungen für das Finden von Text festzulegen. Dabei soll in Adobe GoLive das Dialogfeld »Finden« immer im Vordergrund des Dokumentfensters zu sehen sein, wenn eine Übereinstimmung gefunden wird. 1

Wählen Sie Bearbeiten: Voreinstellungen.

2

Klicken Sie im linken Teil des Dialogfensters »Voreinstellungen« auf das Symbol »Suchen«, um die Voreinstellungen für das Suchen von Text im rechten Teil des Dialogfensters anzeigen zu lassen.

3

Wählen Sie im rechten Teil des Fensters aus dem Popup-Menü »Wenn Übereinstimmung gefunden wurde:« die Option »Suchen-Fenster weiter im Vordergrund« aus und klicken Sie auf OK.

Jetzt werden Sie nach dem zu ersetzenden Text suchen. 4

Scrollen Sie an den Anfang des Dokuments und klicken Sie auf der Seite vor die Hauptüberschrift, um eine Einfügemarke zu platzieren.

5

Wählen Sie Bearbeiten: Suchen.

6

Geben Sie im Dialogfeld »Suchen« in das große Textfeld loud ein.

7

Klicken Sie auf das Dreieck( ) neben dem Wort »Ersetzen«, um das entsprechende Textfeld zu öffnen. Geben Sie dort powerful ein und klicken Sie auf »Suchen«.

Das Wort loud wird im Dokument hervorgehoben. 8

Klicken Sie im Dialogfeld »Suchen« auf die Schaltfläche »Ersetzen«. Das Wort loud wird im Dokument durch powerful ersetzt.

ADOBE GOLIVE 5.0 Classroom in a Book

9

Schließen Sie das Dialogfeld »Suchen« und wählen Sie Datei: Speichern.

Sie haben den Entwurf der »Appraisal«-Seite in dieser Lektion abgeschlossen. Jetzt können Sie die Seite in der Vorschau von Adobe GoLive betrachten.

Vorschau der Webseite in Adobe GoLive 1

Klicken Sie im Dokumentfenster auf den Reiter »Vorschau«, um das Dokument in der Voransicht betrachten zu können.

Wenn Sie mit Adobe GoLive für Mac OS arbeiten, können Sie die Ansicht zusammen mit der Vorschau verwenden, um eine ungefähre Vorstellung davon zu bekommen, wie Ihre Seite in unterschiedlichen Webbrowsern aussehen wird. 2

Wählen Sie unter Mac OS Fenster: Ansicht, um die Ansicht aufzurufen. Wählen Sie in der Ansicht aus dem Popup-Menü »Stamm-CSS« den Eintrag »Explorer 5 (Windows)«, um zu sehen, wie Ihre Seite im Microsoft Internet Explorer 5 unter dem Betriebssystem Windows aussehen wird. Probieren Sie auch die anderen Menü-Optionen aus und beobachten Sie, wie sich Ihre Seite jeweils in der Vorschau ändert. Sie werden feststellen, dass die Schriftgröße immer dann größer wird, wenn Sie auf einen Windows-basierten Browser wechseln.

3

Wählen Sie Datei: Schließen, um die Datei Appraise.html zu schließen.

Eigene Übungen Hypertext Markup Language (HTML) wird zur Veröffentlichung von Informationen im World Wide Web verwendet. In dieser Lektion haben Sie mit der Ansicht »Layout« von Adobe GoLive gearbeitet, um eine Webseite zu entwerfen. In dieser Ansicht schreibt Adobe GoLive den HTML-Code für Ihre Seite. Vielleicht möchten Sie aber auch einmal unmittelbar mit dem HTML-Code Ihrer Seite arbeiten. Adobe GoLive stellt dafür zwei unterschiedliche Ansichten von HTML-Code zur Verfügung, die Sie benutzen können, um Ihre Webseiten zu entwerfen und zu bearbeiten. Mit der Ansicht »Quellcode« können Sie sich den HTML-Code unmittelbar ansehen und mit der Ansicht »Outline« lässt sich die hierarchische geordnete Struktur des HTML-Codes betrachten.

83

84 LEKTION 2 Mit Text und Tabellen arbeiten

Jetzt, da Sie gelernt haben, wie mit der Ansicht »Layout« gearbeitet wird, können Sie versuchen, mit den Ansichten »Quellcode« und »Outline« zu arbeiten, um Veränderungen an der Seite »Appraisal« vorzunehmen. Dafür werden Sie zuerst die Seite »Appraisal« öffnen. 1

Wählen Sie in Adobe GoLive Datei: Öffnen. Wählen Sie die Datei Appraise.html im Ordner Lesson02/02End und klicken Sie auf »Öffnen«.

2

Wählen Sie im Dokumentfenster »Appraise.html« die Hauptüberschrift Putting a Price on Your Guitar aus.

3

Klicken Sie auf den Reiter »Quellcode« ( Quellcode-Ansicht anzuzeigen.

4

Sie werden feststellen, dass die Hauptüberschrift im Quellcode hervorgehoben ist. Falls nötig, können Sie die Rollbalken unten im Dokumentfenster benutzen und nach rechts scrollen, damit Sie den hervorgehobenen Text sehen können.

), um das Dokument in der

Nun werden Sie den HTML-Quelltext-Editor dazu benutzen, das Absatzformat der Hauptüberschrift von »Überschrift 1« in »Überschrift 2« zu ändern. 5

Wählen Sie den Text »h1« am Anfang der Zeile, die die Hauptüberschrift enthält, aus. Dieser nun ausgewählte Text ist das Start-Tag eines h1-Elementes und weist den Webbrowser an, die Hauptüberschrift im Format »Überschrift 1« darzustellen.

Text »h1« auswählen

ADOBE GOLIVE 5.0 Classroom in a Book

Jetzt ändern Sie das h1-Element in ein h2-Element, indem Sie seine Start- und End-Tags ändern. 6

Geben Sie h2 ein, um den ausgewählten Text zu ersetzen.

7

Wählen Sie den Text »/h1« am Ende der Zeile aus, die die Hauptüberschrift enthält. Das ist das End-Tag des ursprünglichen h1-Elements.

8

Geben Sie /h2 ein, um den ausgewählten Text zu ersetzen.

9

Klicken Sie auf den Reiter »Layout« ( ), um zurück in die Ansicht »Layout« zu gelangen. Sie werden feststellen, dass das Absatzformat der Hauptüberschrift nun »Überschrift 2« ist.

Sie werden jetzt mit Hilfe des HTML-Outline-Editors das Absatzformat der Hauptüberschrift wieder auf »Überschrift 1« einstellen. 10

Wählen Sie die Hauptüberschrift aus, wenn nötig.

11 Klicken Sie auf den Reiter »Outline« ( ), um das Dokument in der Ansicht »Outline« darzustellen. Beachten Sie, dass die Hauptüberschrift in dieser Ansicht von einem schwarzen Rahmen umgeben ist. 12 Klicken Sie auf den Text »h2«, der sich zwei Zeilen über der Hauptüberschrift befindet, um ihn auszuwählen. 13 Geben Sie h1 ein, um den ausgewählten Text zu ersetzen, und klicken Sie in den Leerraum außerhalb des ausgewählten Textes, um die Auswahl aufzuheben. Sie werden den HTML-Outline-Editor nun auch dazu benutzen, die Hauptüberschrift auf der Seite zu zentrieren. 14 Klicken Sie auf das Dreieck neben dem Text »h1«, um ein Popup-Menü aufzurufen. 15 Wählen Sie »align« aus dem Popup-Menü aus.

85

86 LEKTION 2 Mit Text und Tabellen arbeiten

16 Klicken Sie auf das Dreieck neben »align«, um ein weiteres Popup-Menü aufzurufen, und wählen Sie dort »center« aus.

»align« aus dem Popup-Menü auswählen

»center« aus dem zweiten Popup-Menü auswählen

Außerdem werden Sie den HTML-Outline-Editor dazu benutzen, die Hintergrundfarbe der Seite in Gelb zu ändern. 17

Klicken Sie auf das Dreieck rechts vom Text »body«. Die Attribute bgcolor und die Werte der Body-Elemente werden angezeigt, die die Hintergrundfarbe der Seite bestimmen.

18 Geben Sie in der Farben-Palette in das Textfeld »Wert« der »Web-Farbenliste« FFFFCC ein und drücken Sie die Eingabetaste. Die ausgewählte Farbe wird im Vorschaufeld angezeigt. 19 Ziehen Sie die Farbe aus dem Vorschau-Fenster auf das Farbfeld für die Hintergrundfarbe (body bgcolor) der Seite. Klicken Sie anschließend außerhalb des Farbfelds, um die Auswahl des Body-Elements aufzuheben.

Hintergrundfarbe der Seite ändern

ADOBE GOLIVE 5.0 Classroom in a Book

20 Klicken Sie auf den Reiter »Layout«, um zurück in die Ansicht »Layout« zu gelangen. Beachten Sie, dass das Absatzformat der Hauptüberschrift jetzt »Überschrift 1« und auf der Seite zentriert ist und die Hintergrundfarbe Gelb ist. 21 Wählen Sie Datei: Schließen, um die Seite zu schließen. Sie brauchen die Veränderungen, die Sie vorgenommen haben, nicht zu speichern.

87

88 LEKTION 2 Mit Text und Tabellen arbeiten

Fragen 1

Nennen Sie zwei Möglichkeiten, einem Dokument Text hinzuzufügen.

2

Wie fügen Sie einem Text ein Absatzformat hinzu? Wie fügen Sie einem Text eine Auszeichnung zu?

3

Was ist der häufigste Grund dafür, den gesamten Text eines Dokuments in einer einzelligen Tabelle unterzubringen?

4

Lassen sich Daten aus einer Tabellenkalkulation in eine Tabelle importieren?

5

Wie fügen Sie einer Tabelle einen vordefinierten Stil hinzu? Wie entfernen Sie einen vordefinierten Stil von einer Tabelle?

6

Wie fügen Sie einer Tabelle eine Beschriftung hinzu?

7

Mit welcher Palette können Sie den Inhalt einer Tabelle sortieren?

8

Wie können Sie mehr über die Schriftsammlungen eines Dokuments erfahren?

9

Wie können Sie Text in einem Dokument suchen und ersetzen?

Antworten 1

Sie können einem Dokument Text hinzufügen, indem Sie ihn unmittelbar in das Dokumentfenster eingeben, Text aus einer anderen Anwendung in eine Tabelle importieren, Layout-Textrahmen oder Rahmen verwenden, Text aus einem Dokument einer anderen Anwendung kopieren und ihn in ein AdobeGoLive-Dokument einsetzen oder einen Text-Clip aus einem SimpleTextoder NotePad-Dokument mit der Maus vom Desktop in ein Adobe-GoLiveDokument ziehen.

2

Um ein Absatzformat hinzuzufügen, klicken Sie irgendwo in einen Absatz und wählen Sie ein Format aus dem Absatzformat-Menü in der Werkzeugleiste oder eines der Formate aus Text: Überschrift. Um eine Auszeichnung hinzuzufügen, wählen Sie den Text aus und klicken auf eine der Schaltflächen »Fett«, »Kursiv« oder »Teletype« in der Werkzeugleiste oder Sie wählen eine Auszeichnung aus Text: Stil.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Einer der häufigsten Gründe dafür, den gesamten Text eines Dokuments in eine einzellige Tabelle einzugeben, ist, damit den Textfluss auf der Seite vorzugeben. Text in einer einzelligen Tabelle orientiert sich auch dann an der eingestellten Breite der Tabelle, wenn die Größe des Fensters verändert wird.

4

Ja, Daten lassen sich aus den meisten Tabellenkalkulationsanwendungen in eine Tabelle importieren. Dazu müssen Sie die Daten zunächst aus der Tabellenkalkulation in eine reine Textdatei exportieren. Die Daten in dieser Textdatei müssen formatiert vorliegen, so dass jede Zeile den Inhalt einer Tabellenzeile repräsentiert, die mit Spaltentrennern versehen ist (Tabulatoren, Kommas, Leerzeichen oder Semikolons). Weitere Informationen finden Sie in der Dokumentation Ihrer Tabellenkalkulationsanwendung.

5

Um einer Tabelle einen vordefinierten Stil zuzuweisen, wählen Sie aus dem Popup-Menü in der oberen linken Ecke der Registerkarte »Stil« der TabellenPalette einen Stil aus, achten darauf, dass die richtige Tabelle ausgewählt ist und klicken auf die Schaltfläche »Anwenden«. Um einen vordefinierten Stil einer Tabelle zu entfernen, vergewissern Sie sich, dass die richtige Tabelle ausgewählt ist, und klicken in der Registerkarte »Stil« auf die obere Schaltfläche »Löschen«.

6

Um einer Tabelle eine Überschrift hinzuzufügen, aktivieren Sie das Kontrollkästchen neben »Beschriftung« im Tabellen-Inspektor und wählen dann »Über Tabelle« oder »Unter Tabelle« aus dem Popup-Menü daneben. Dann klicken Sie über oder unter die Tabelle, um eine Einfügemarke zu platzieren, und geben den Text der Beschriftung ein.

7

Um die Inhalte einer Tabelle zu sortieren, verwenden Sie die Registerkarte »Auswahl« in der Tabellen-Palette.

8

Um mehr über die Schriftsammlungen eines Dokuments zu erfahren, wählen Sie Text: Schrift: Schriftsammlungen bearbeiten, um das Dialogfeld »Schriftsammlungen bearbeiten« aufzurufen. Im Dialogfeld wählen Sie eine der Schriftsammlungen aus, um ihren Inhalt darzustellen.

9

Sie können Bearbeiten: Suchen wählen, um Text in einem Dokument zu suchen und zu ersetzen.

89

Lektion 3

3 Entwerfen von Webseiten

Adobe GoLive stellt für das Entwerfen Ihrer Webseiten vielfältige Möglichkeiten bereit, damit Sie Text, Bilder und andere Objekte auf jeder Seite präzise platzieren können. Außerdem ermöglicht es Ihnen, häufig benötigte Objekte und Farben auf Ihrer Website schnell und einfach hinzuzufügen, damit Sie beim Erstellen Ihrer Seiten Zeit sparen. Beim Arbeiten mit dem Entwurf dreier Seiten werden Sie in dieser Lektion die vielfältigen Werkzeuge des Seitenlayouts kennen lernen.

94 LEKTION 3 Entwerfen von Webseiten

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Erzeugen einer neuen Website und Hinzufügen von Dateien • Erzeugen einer dynamischen Komponente, die häufig benötigten Seiteninhalt aufnimmt, und Hinzufügen dieser Komponente zu einer Seite • Erzeugen einer neuen Seite • Verwenden eines Layout-Rasters, um Objekte präzise auf einer Seite zu platzieren • Hinzufügen von Bildern zu einer Seite unter Verwendung unterschiedlicher Methoden • Bewegen, Ausrichten und Verteilen von Objekten auf einem Layout-Raster • Hinzufügen eines Hintergrundbildes zu einer Seite • Hinzufügen von Text zu einer Seite unter Verwendung von Layout-Textrahmen • Erzeugen einer selbst definierten Farben-Palette, die häufig benötigte Farben aufnimmt; Hinzufügen dieser Farben zu einer Seite • Entnehmen von Farbe aus einem Bereich unterhalb des Mauszeigers • Verwenden von Rahmen, um überlappende Objekte auf einer Seite zu platzieren Für diese Lektion werden Sie etwa eine Stunde benötigen. Entfernen Sie den Ordner mit der vorigen Lektion von Ihrer Festplatte und kopieren Sie, falls nötig, den Ordner Lesson03 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen In Lektion 2, »Mit Text und Tabellen arbeiten«, haben Sie eine Webseite für Gage Vintage Guitars entworfen. In dieser Lektion werden Sie eine ganze Website für die Firma erzeugen und mit drei Seiten-Entwürfen der Site arbeiten. Zuerst werden Sie die fertig gestellte Webseite in Ihrem Webbrowser betrachten. 1

Starten Sie Ihren Webbrowser.

2

Öffnen Sie die Datei Index.html im Pfad Lesson03/03End/Gage Folder/ Gage/Index.html.

3

Öffnen Sie die Datei Appraise.html im Pfad Lesson03/03End/Gage Folder/Gage/Pages/Appraise.html.

4

Öffnen Sie die Datei Hottest.html im Pfad Lesson03/03End/Gage Folder/Gage/Pages/Hottest.html.

95

96 LEKTION 3 Entwerfen von Webseiten

5

Wenn Sie mit dem Betrachten der Seiten fertig sind, schließen Sie die Dateien wieder und beenden Sie Ihren Browser.

Erzeugen einer neuen Website Sie werden in dieser Lektion damit beginnen, mit Adobe GoLive eine neue Website zu erzeugen. 1

Starten Sie Adobe GoLive. Es wird ein neues Dokument mit dem Namen Ohne Titel.html geöffnet. In diesem Teil der Lektion benötigen Sie allerdings kein neues Dokument.

2

Wählen Sie Datei: Schließen, um Ohne Titel.html zu schließen.

Jetzt können Sie mit dem Erzeugen einer neuen Website beginnen. 3

Wählen Sie Datei: Neu.

4

Geben Sie Gage als Namen der neuen Site ein.

5

Führen Sie einen der folgenden Schritte aus:

• Klicken Sie unter Windows auf »Auswahl« und verwenden Sie das aufgerufene Popup-Dialogfeld, um den Ordner Lesson03 auszuwählen. • Unter Mac OS 8 wählen Sie den Ordner Lesson03 aus, öffnen ihn aber nicht. • Unter Mac OS 9 wählen Sie den Ordner Lesson03 aus und öffnen ihn. 6

Stellen Sie sicher, dass die Option »Ordner anlegen« angewählt ist, damit Adobe GoLive einen neuen Ordner erzeugt.

7

Klicken Sie unter Windows auf OK. Unter Mac OS 8 klicken Sie auf »Auswählen«. Unter Mac OS 9 klicken Sie auf »Sichern«.

Neue Site erzeugen (Windows)

Neue Site erzeugen (Mac OS)

ADOBE GOLIVE 5.0 Classroom in a Book

Im Ordner Lesson03 wird der Ordner Gage erzeugt. Außerdem erscheint das SiteFenster mit ausgewählter Registerkarte »Dateien« und zeigt den Inhalt der GageSite an. 8

Öffnen den Sie den Ordner Gage Ordner im Windows-Explorer (Windows) bzw. im Finder (Mac OS) und schauen Sie sich seinen Inhalt an.

Der Ordner Gage enthält Folgendes:

• Den Ordner Gage, der die Seiten und Medien Ihrer Website aufnimmt. Beim Erzeugen einer neuen Website enthält er automatisch eine leere Seite namens Index.html. • Den Ordner Gage.data, der Dateien für den Aufbau und das Instandhalten der Site aufnimmt. • Die Datei Gage.site, die Informationen über die Struktur Ihrer Website aufnimmt. Wenn Sie diese Datei öffnen, wird das Site-Fenster in Adobe GoLive aufgerufen.

Hinzufügen von Dateien zur Website Nun können Sie der Website Dateien hinzufügen. Zuerst fügen Sie einen Ordner mit Bilddateien hinzu. Später in dieser Lektion werden Sie diese Bilddateien benutzen, um den Seiten der Website Bilder hinzuzufügen. 1

Verwenden Sie den Windows-Explorer (Windows) bzw. den Finder (Mac OS), um den Ordner Images im Pfad Lesson03/03Start auszuwählen. Ziehen Sie den Ordner Images vom Desktop in das Site-Fenster.

Ordner vom Desktop in das Site-Fenster ziehen

97

98 LEKTION 3 Entwerfen von Webseiten

2

Klicken Sie auf das Symbol neben dem Ordner Images im Site-Fenster, um dessen Inhalt darzustellen. Klicken Sie in den Leeraum des Site-Fensters, um seine Auswahl wieder aufzuheben.

Nun werden Sie der Website einen neuen Ordner hinzufügen. Dieser Ordner wird die Seiten der Website aufnehmen. 3

Wählen Sie Website: Neu: Ordner. Im Site-Fenster erscheint ein neuer Ordner mit Namen »Neuer Ordner«.

4

Geben Sie Pages als Namen ein, um den Ordner zu benennen, und klicken Sie außerhalb des Ordners, um die Auswahl aufzuheben.

Jetzt werden Sie dem Ordner Pages die fertig gestellte Webseite aus Lektion 2, »Arbeiten mit Text und Tabellen«, hinzufügen. Sie werden später in dieser Lektion den Entwurf der Seite noch auf den neuesten Stand bringen. 5

Benutzen Sie den Windows-Explorer (Windows) bzw. den Finder (Mac OS), um die Datei Appraise.html im Pfad Lesson03/03Start auszuwählen. Ziehen Sie die Datei Appraise.html vom Desktop auf das Ordnersymbol des Ordners Pages im Site-Fenster.

Hinweis: Wenn Sie zu lange mit dem Mauszeiger über dem Ordner Pages verweilen, wird er geöffnet und zeigt nur noch seinen Inhalt an. Um dann wieder zurück ins Wurzelverzeichnis der Gage-Site zu gelangen, klicken Sie auf das ( )-Symbol oben links im Site-Fenster, um in der Site-Hierarchie eine Ebene nach oben zu gehen.

Zurück zum Ordner Gage

6

Klicken Sie im aufgerufenen Dialogfenster »Dateien kopieren« auf OK.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Klicken Sie auf das Dreieck neben dem Ordnersymbol des Ordners Pages im Site-Fenster, um seinen Inhalt darzustellen.

Ordnerinhalte darstellen

Weitere Informationen über die Verwaltung von Websites mit Adobe GoLive finden Sie unter Verwalten von Websites ab Seite 449.

Erzeugen einer dynamischen Komponente Jetzt sind Sie bereit, mit dem Entwerfen der Seiten der Website zu beginnen. Sie werden oben auf jeder Seite das Gage Vintage Guitars-Logo und eine Navigationsleiste für die Site platzieren. Anstatt diesen Seiteninhalt mehrmals zu erzeugen, werden Sie ihn einmal erstellen und ihn als dynamische Komponente speichern, die Sie Ihren Seiten jederzeit hinzufügen können. Sie werden nun eine neue Seite erzeugen, die Sie als dynamische Komponente speichern. 1

Platzieren Sie das Site-Fenster unten auf Ihrem Desktop, so dass es sichtbar ist, wenn Sie eine neue Seite erzeugen. Um ein Fenster zu bewegen, ziehen Sie es an seiner Titelleiste.

2

Wählen Sie Datei: Neu, um eine neue Seite zu erzeugen.

Falls nötig, können Sie das Dokumentfenster und das Site-Fenster in der Größe anpassen, so dass sie weniger Platz auf dem Desktop benötigen. Um ein Fenster in der Größe zu verändern, ziehen Sie an seiner unteren rechten Ecke.

99

100 LEKTION 3 Entwerfen von Webseiten

3

Wählen Sie den Seitentitel Welcome to Adobe GoLive 5 aus.

Verwenden von dynamischen Komponenten Mit dynamischen Komponenten können Sie in einer Quelldatei Elemente erstellen, die Sie auf mehreren Seiten verwenden können. Diese Funktion ist nützlich für Schaltflächen, Logos, Titel und andere Elemente, die Sie auf Ihrer Site verwenden möchten. Über dynamische Komponenten Mit Adobe-GoLive-Komponenten können Sie andere HTML-Seiten referenzieren und in die Seite einbetten, einschließlich Text, Bilder und anderen visuellen Inhalt. Wenn Sie ein Element als dynamische Komponente einbetten, statt den HTML-Code in Ihre Seite zu schreiben, können Sie das Objekt einfach ändern, indem Sie durch Doppelklicken die Quelldatei (eine HTML-Seite, die nur das Element enthält) öffnen und dann das Objekt bearbeiten. Wenn Sie die Quelldatei speichern, aktualisiert Adobe GoLive automatisch alle Seiten, die das Element enthalten. Adobe GoLive schließt die eingebettete HTML-Seite in ein benutzerdefiniertes Element ein, das der Browser bei der Ausführung ignoriert (auch wenn der Inhalt korrekt verstanden und interpretiert wird), und markiert es als dynamischen Seiteninhalt, der jedes Mal aktualisiert werden muss, wenn die Quelldatei sich ändert. Hinweis: Dynamische Komponenten werden nur aktualisiert, wenn Sie auf Ihrer lokalen Festplatte arbeiten. Seiten im Webserver werden nicht einfach durch Hochladen der Quelldatei aktualisiert. Sie müssen alle Seiten hochladen, die eine Komponente referenzieren, um Ihre Site nach dem Ändern der Quelldatei zu aktualisieren.

4

Geben Sie Navigation Bar als neuen Titel ein und drücken Sie die Eingabetaste.

5

Falls nötig, wählen Sie Fenster: Inspektor, um den Inspektor aufzurufen.

6

Klicken Sie auf das Seite-Symbol ( ) in der oberen linken Ecke des Dokumentfensters. Der Inspektor ändert sich in den Seiten-Inspektor.

7

Klicken Sie im Seiten-Inspektor auf den Reiter »HTML«. Klicken Sie anschließend auf die Schaltfläche »Komponente«, um die aktuelle Seite als dynamische Komponente zu verwenden.

8

Wählen Sie Datei: Speichern, geben Sie der Seite den Namen Navbar.html und speichern Sie sie im Ordner Komponenten. Der Pfad ist Lesson03/Gage Folder/Gage.data/Komponenten.

ADOBE GOLIVE 5.0 Classroom in a Book

Der Ordner Komponenten nimmt alle dynamischen Komponenten der Site auf. Sie können den Inhalt des Ordners im Site-Fenster betrachten. 9

Klicken Sie auf das Doppelpfeilsymbol unten rechts im Site-Fenster, um das Site-Fenster zu erweitern. Der erweiterte Abschnitt des Site-Fensters wird mit ausgewählter Registerkarte »Extras« und geöffnetem Ordner Gage angezeigt.

10 Klicken Sie in der Registerkarte »Extras« im erweiterten Abschnitt des SiteFensters auf das Symbol neben dem Ordner Komponenten, um seinen Inhalt betrachten zu können.

Ordner »Komponenten« im erweiterten Abschnitt des Site-Fensters

Hinzufügen eines Layout-Rasters Sie können ein Layout-Raster verwenden, um Text, Tabellen, Bilder und andere Objekte exakt auf einer Seite zu platzieren. Beim Hinzufügen eines Layout-Rasters erzeugt Adobe GoLive im Grunde Tabellen im HTML-Quellcode der Seite. Diese Tabellen werden dann verwendet, um Objekte auf dieser Seite mit 1-PixelGenauigkeit zu platzieren. Jetzt werden Sie der Seite ein Layout-Raster hinzufügen. 1

Klicken Sie in das Fenster »Navbar.html«, um es zu aktivieren.

2

Falls nötig, wählen Sie Fenster: Objekte, um die Objekte-Palette aufzurufen, und vergewissern Sie sich, dass die Registerkarte »Allgemein« ( ) angewählt ist.

3

Ziehen Sie das Symbol »Layout-Raster« aus der Objekte-Palette auf die Seite.

Der Seite wird ein Layout-Raster hinzugefügt und der Inspektor ändert sich in den Layout-Raster-Inspektor.

101

102 LEKTION 3 Entwerfen von Webseiten

Hinweis: Falls sich der Inspektor nicht in den Layout-Raster-Inspektor ändert, klicken Sie auf das Layout-Raster der Seite, um es auszuwählen, so dass der Inspektor sich entsprechend ändert. Gehen Sie im ganzen Buch folgendermaßen vor: Wenn der Inspektor sich nicht wie in der Beschreibung angegeben ändert, wählen Sie das betreffende Objekt an, damit sich der Inspektor entsprechend ändert. Nun werden Sie die Breite des Layout-Rasters festlegen. 4

Geben Sie im Layout-Raster-Inspektor im Textfeld »Breite« 600 ein.

Sie können die Größe eines Layout-Rasters auch verändern, indem Sie es auswählen und an einem seiner Anfasser ziehen.

Hinzufügen eines Bildes mit Hilfe der Schaltfläche »Point & Shoot« Nun werden Sie der Seite vier Bilder hinzufügen und dabei unterschiedliche Methoden anwenden. Adobe GoLive unterstützt die Standard-Bildformate des Web: Graphical Interchange Format (GIF), Joint Photographic Experts Group (JPEG) und Portable Network Graphics (PNG). Üblicherweise werden für Strichzeichnungen, Volltonflächen und Schrift GIF-Bilder verwendet. Üblich sind für einfache Animationen animiertes GIF. Im Gegensatz zu JPEG unterstützt das aktuelle GIF-Format auch Transparenz. Sie können damit also Teilbereiche durchscheinen lassen. JPEG komprimiert (verdichtet) Bildinformationen stark. Problematisch ist, dass zwischen Komprimierung und Dekomprimierung oft Verluste auftreten. Das führt dazu, dass Bildinformationen teilweise verloren gehen: Das JPEG-Verfahren komprimiert verlustreich, anders beispielsweise PNG, mit dem Sie meist größere Dateien als mit JPEG erzeugen, das aber wie GIF Transparenz unterstützt. JPEG empfiehlt sich für Fotografien und andere Bilder mit mehr als 256 Farben. In dieser Lektion werden Sie GIF-Bilder verwenden. Weitere Informationen zur Verwendung von Bildern im Nicht-Web-Format, wie beispielsweise Bilder im nativen Photoshop-, Illustrator- oder LiveMotionFormat finden Sie unter Verwenden von Smart Objects ab Seite 139. Sie werden der Seite zuerst das Firmenlogo hinzufügen und dafür die Schaltfläche »Point & Shoot« im Bild-Inspektor benutzen.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Ziehen Sie den Platzhalter »Bild« aus der Objekte-Palette in die linke obere Ecke des Layout-Rasters.

Auf dem Layout-Raster erscheint ein Bildplatzhalter und der Inspektor ändert sich in den Bild-Inspektor.

Der Seite einen Bildplatzhalter hinzufügen

2

Vergewissern Sie sich, dass im Bild-Inspektor die Registerkarte »Allgemein« ausgewählt ist.

Beachten Sie, dass im Textfeld »Quelle« im Bild-Inspektor »(Empty Reference!)« angezeigt wird. Das bedeutet, dass der Bildplatzhalter noch keine Verknüpfung mit einem Bild enthält. Sie werden die Schaltfläche »Point & Shoot« benutzen, um ein bestimmtes Bild im Site-Fenster mit dem Bildplatzhalter auf der Seite zu verbinden. 3

Ziehen Sie mit gedrückter Maustaste von der Schaltfläche »Point & Shoot« ( ) im Bild-Inspektor auf Logo.gif im Ordner Images im Site-Fenster. Lassen Sie die Maustaste los, sobald Logo.gif hervorgehoben wird.

Verwenden der Schaltfläche »Point & Shoot«, um ein Bild zu bestimmen

103

104 LEKTION 3 Entwerfen von Webseiten

Das Firmenlogo wird der Seite hinzugefügt und das Textfeld »URL« im BildInspektor zeigt den Pfad zur Datei Logo.gif. Sie können die Lage des Bildes ganz einfach anpassen, indem Sie es an den gewünschten Ort ziehen. Adobe GoLive unterstützt Bilder, die in geringer Auflösung erscheinen. Damit lässt sich der Bildaufbau beschleunigen, da diese zunächst während des Ladens der hochaufgelösten Bilder im Browser des Betrachters gezeigt werden. Bilder in geringer Auflösung können Sie aus anderen Anwendungen übernehmen oder schnell mit Adobe GoLive selbst erzeugen. Genau das werden Ihre nächsten Schritte sein. 4

Klicken Sie im Bild-Inspektor auf den Reiter »Weitere« und in der Registerkarte dann auf die Schaltfläche »Erstellen«.

Im Ordner Images im Site-Fenster erscheint daraufhin ein Bild in geringer Auflösung mit Namen Logols.gif, und im Bild-Inspektor wird automatisch das Kontrollkästchen vor der Option »Geringe Auflösung« aktiviert. Nun geben Sie einen Ersatztext für das Bild ein. In Browsern, die keine Bilder unterstützen oder in denen das Laden von Bildern ausgeschaltet wurde, wird statt des Bildes dieser Ersatztext angezeigt. 5

Klicken Sie im Bild-Inspektor auf den Reiter »Allgemein« und geben Sie in das Textfeld »Ersatztext« den Text Gage Vintage Guitars Logo ein.

6

Wählen Sie Datei: Speichern, um die Seite zu speichern.

ADOBE GOLIVE 5.0 Classroom in a Book

Hinzufügen eines Bildes unter Verwendung eines Tastaturkürzels Jetzt werden Sie der Seite ein zweites Bild hinzufügen und dafür ein Tastaturkürzel anwenden. Dieses Bild ist Bestandteil der Navigationsleiste der Website. 1

Ziehen Sie den Platzhalter »Bild« aus der Objekte-Palette auf die Seite etwas rechts vom Firmenlogo.

2

Halten Sie die Alt-Taste (Windows) bzw. Befehlstaste (Mac OS) gedrückt und ziehen Sie vom Bildplatzhalter auf der Seite auf die Datei Items.gif im Ordner Images im Site-Fenster.

Tastaturkürzel verwenden, um Bild zu bestimmen

3

Geben Sie in das Textfeld »›Ersatztext« der Registerkarte »Allgemein« Items In Stock ein und drücken Sie die Eingabetaste, um diesen Ersatztext für das Bild Items.gif hinzuzufügen.

Da das Bild Items.gif schon eine recht geringe Dateigröße hat (1 Kbyte), brauchen Sie kein Bild in geringer Auflösung zu erzeugen.

105

106 LEKTION 3 Entwerfen von Webseiten

Hinzufügen von Bildern durch Ziehen Sie werden das dritte und vierte Bild der Seite durch Ziehen hinzufügen. Auch diese Bilder sind Bestandteile der Navigationsleiste der Website. Jetzt werden Sie der Seite das dritte Bild hinzufügen. 1

Ziehen Sie den Platzhalter »Bild« aus der Objekte-Palette auf die Seite etwas rechts vom Bild Items In Stock.

2

Ziehen Sie das Bild Repairs.gif aus dem Ordner Images im Site-Fenster auf den Bildplatzhalter auf der Seite.

Bilddatei aus dem Site-Fenster auf den Bildplatzhalter ziehen

3

Geben Sie im Bild-Inspektor in das Textfeld »Ersatztext« den Text Repairs ein und drücken Sie die Eingabetaste.

Nun werden Sie der Seite das vierte Bild hinzufügen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Ziehen Sie den Platzhalter »Bild« aus der Objekte-Palette auf die Seite etwas rechts vom Bild Repairs.

5

Ziehen Sie das Bild Appraisals.gif aus dem Ordner Images im Site-Fenster auf den Bildplatzhalter auf der Seite.

6

Geben Sie im Bild-Inspektor in das Textfeld »Ersatztext« den Text Appraisals ein und drücken Sie die Eingabetaste.

7

Wählen Sie Datei: Speichern, um die Seite zu speichern.

Sie können ein Bild auch hinzufügen, indem Sie die Bilddatei aus dem SiteFenster auf die Seite ziehen, ohne vorher einen Bildplatzhalter zu platzieren. Mit einem Bildplatzhalter haben Sie allerdings eine bessere Kontrolle über die anfängliche Platzierung des Bildes.

Ausrichten und Verteilen mehrerer Objekte Nun haben Sie der Seite alle Bilder hinzugefügt und sind bereit, sie mit Hilfe der Ausrichten-Palette auf der Seite auszurichten und zu verteilen. Während die Werkzeugleiste Ihnen das Ausrichten von Objekten relativ zum Layout-Raster ermöglicht, können Sie mit Hilfe der Ausrichten-Palette sowohl das Ausrichten als auch das Verteilen von Objekten relativ zueinander oder zu ihren übergeordneten Objekten ausführen. Jetzt werden Sie die Oberkanten der drei Bilder, die die Navigationsleiste bilden, ausrichten. 1

Wählen Sie Fenster: Ausrichten, um die Ausrichten-Palette aufzurufen.

2

Klicken Sie auf das Bild Items In Stock, um es auszuwählen. Klicken Sie dann mit gedrückter Umschalttaste auf die Bilder Repairs und Appraisals, um sie der Auswahl hinzuzufügen.

107

108 LEKTION 3 Entwerfen von Webseiten

3

klicken Sie in der Ausrichten-Palette im Bereich »Objekte ausrichten« auf die Schaltfläche »Vertikal oben ausrichten« ( ), um die Oberkanten der ausgewählten Objekte auszurichten. (Die Schaltfläche ist nicht anwählbar, wenn die Objekte bereits ausgerichtet sind.)

Mit gedrückter Umschalttaste klicken, um mehrere Objekte auszuwählen

4

Schaltfläche »Vertikal oben ausrichten«

Vergewissern Sie sich, dass die drei Bilder noch ausgewählt sind und klicken Sie im Bereich »Auf Übergeordnete ausrichten« auf die Schaltfläche »Vertikal oben ausrichten«. Damit werden die drei Bilder mit dem oberen Rand des Layout-Rasters ausgerichtet.

Nun werden Sie ein Tastaturkürzel benutzen, um alle drei Bilder gleichzeitig zu bewegen. 5

Wählen Sie nur das Bild Repairs auf der Seite aus und drücken Sie wiederholt die Wahltaste zusammen mit der linken Pfeiltaste (Mac OS) bzw. die StrgTaste zusammen mit der Alt-Taste und der linken Pfeiltaste (Windows), bis sich das Bild nicht mehr auf dem Layout-Raster bewegt.

6

Wählen Sie nur das Bild Appraisals auf der Seite aus und drücken Sie wiederholt die Wahltaste zusammen mit der linken Pfeiltaste (Mac OS) bzw. die Strg-Taste zusammen mit der Alt-Taste und der linken Pfeiltaste (Windows), bis sich das Bild nicht mehr auf dem Layout-Raster bewegt.

ADOBE GOLIVE 5.0 Classroom in a Book

Die ausgewählten Objekte werden auf der Seite waagerecht bewegt, bis sich ihre Bildränder berühren. Hinweis: Ausgewählte Objekte lassen sich auf einem Layout-Raster mit Hilfe der Pfeiltasten bewegen. Durch Drücken der Pfeiltaste werden Objekte per Voreinstellung um 16 Pixel verschoben, das entspricht dem Abstand der horizontalen und vertikalen Linien des Layout-Rasters. Falls in einem Layout-Raster die Option aktiviert ist, Objekte auf das Raster einzuschnappen, können Sie ein ausgewähltes Objekt ganz einfach pixelweise bewegen. Halten Sie die Strg- und die Alt-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt und drücken Sie dann eine der Pfeiltasten. 7

Klicken Sie in den Leerraum unter den ausgewählten Bildern, um ihre Auswahl aufzuheben.

Vielleicht haben Sie bemerkt, dass das Layout-Raster seine Größe verändert hat, um die Bilder, die Sie hinzugefügt haben, aufnehmen zu können. Nachdem Sie mit dem Platzieren von Objekten auf einem Layout-Raster fertig sind, ist es angebracht, das Layout-Raster zu optimieren. Dadurch verringert sich seine Größe, so dass es weniger Platz auf der Seite verbraucht. 8

Klicken Sie, wenn nötig, auf das Layout-Raster, um es auszuwählen. Klicken Sie anschließend im Layout-Raster-Inspektor auf die Schaltfläche »Optimale Größe«.

Optimiertes Layout-Raster

9

Wählen Sie Datei: Speichern, um die Seite zu speichern. Wählen Sie danach Datei: Schließen, um sie zu schließen.

109

110 LEKTION 3 Entwerfen von Webseiten

Entwerfen der Homepage Nun sind Sie bereit, die Homepage der Website zu entwerfen. 1

Doppelklicken Sie im Site-Fenster auf die Datei Index.html, um sie zu öffnen.

2

Ändern Sie den Titel der Seite in Gage Vintage Guitars.

Hinzufügen eines Hintergrundbildes Jetzt werden Sie der Homepage ein Hintergrundbild hinzufügen. Beim Auswählen eines Hintergrundbildes können Sie sich ruhig für ein Bild entscheiden, das kleiner als Ihre Seite ist. Adobe GoLive behandelt Hintergrundbilder als Kachel, genau wie Webbrowser, und wiederholt ihre Darstellung, um die Seite vollständig auszufüllen. Zuerst werden Sie eine Vorschau des Bildes betrachten. Sie können den DateiInspektor verwenden, um genaue Informationen über eine Datei zu erhalten, dazu gehört auch eine Vorschau ihres Inhalts. 1 Klicken Sie im Site-Fenster auf das Symbol der Datei Wood.gif im Ordner Images. (Stellen Sie sicher, dass Sie auf das Symbol klicken und nicht auf den Dateinamen.) Der Inspektor ändert sich in den Datei-Inspektor. 2 Klicken Sie im Datei-Inspektor auf den Reiter »Inhalt«. Es erscheint eine Vorschau von Wood.gif im Datei-Inspektor. Nun werden Sie der Seite Wood.gif als Hintergrundbild hinzufügen. 3 Klicken Sie auf das Symbol »Seite« ( ) in der oberen linken Ecke des Dokumentfensters. Der Inspektor ändert sich in den Seiten-Inspektor.

ADOBE GOLIVE 5.0 Classroom in a Book

4 Klicken Sie, wenn nötig, im Seiten-Inspektor auf den Reiter »Seite«. Klicken Sie auf das Kontrollkästchen neben »Bild«, um die Option »Bild« auszuwählen. 5 Ziehen Sie im Seiten-Inspektor vom Symbol »Point & Shoot« ( Wood.gif im Ordner Images im Site-Fenster.

) auf die Datei

Bild als Kachel für den Seitenhintergrund bestimmen

Das Bild von der Holzoberfläche wird gekachelt, um die Seite auszufüllen.

Hinzufügen einer Komponente Jetzt werden Sie der Homepage die Navigationsleiste hinzufügen und dazu die dynamische Komponente benutzen, die Sie weiter vorne in dieser Lektion erzeugt haben. 1

Klicken Sie in der Objekte-Palette auf den Reiter »Smart«( ). Ziehen Sie anschließend den Platzhalter »Komponente« in die Ecke oben links auf der Seite.

Hinzufügen eines Platzhalters »Komponente« zu einer Seite

111

112 LEKTION 3 Entwerfen von Webseiten

2

Klicken Sie auf den Platzhalter »Komponente«.

Der Inspektor ändert sich in den Komponenten-Inspektor. 3

Ziehen Sie im Komponenten-Inspektor mit gedrückter Maustaste von der Schaltfläche »Point & Shoot« ( ) auf die Datei Navbar.html im Ordner Komponenten im Site-Fenster. (Denken Sie daran, dass der Ordner Komponenten im erweiterten Abschnitt des Site-Fensters dargestellt wird.)

Verwenden der Schaltfläche »Point & Shoot«, um eine Komponente zu bestimmen

Die Navigationsleiste wird oben in die Homepage eingefügt. Adobe GoLive erzeugt außerdem im Site-Fenster automatisch einen Ordner GeneratedItems. In diesem Ordner befindet sich eine Datei namens CSScriptLib.js, in der Adobe GoLive allgemein gebräuchlichen Code Ihrer Seiten speichert; löschen Sie also auf keinen Fall diesen Ordner oder seinen Inhalt. 4

Wählen Sie Datei: Speichern, um die Seite zu speichern.

Hinzufügen von Text mit Hilfe von Layout-Textrahmen Nun werden Sie mit Hilfe von Layout-Textrahmen der Seite einen Text hinzufügen. Bevor Sie allerdings der Seite Layout-Textrahmen hinzufügen können, müssen Sie ihr ein Layout-Raster zuweisen. Anschließend platzieren Sie die Layout-Textrahmen auf dem Raster und dann können Sie in die Rahmen Text eingeben. Mit Hilfe der Layout-Textrahmen lassen sich Texte auf Ihrer Seite ganz leicht umstellen, indem Sie die Rahmen verschieben oder ausrichten.

ADOBE GOLIVE 5.0 Classroom in a Book

Zuerst werden Sie Ihrer Homepage ein Layout-Raster hinzufügen. 1

Klicken Sie in der Objekte-Palette auf den Reiter »Allgemein« ( ). Ziehen Sie anschließend den Platzhalter »Layout-Raster« aus der Palette unterhalb der Komponente auf der Seite.

2

Geben Sie im Layout-Raster-Inspektor für »Breite« 580 ein und drücken Sie die Eingabetaste.

3

Geben Sie im Layout-Raster-Inspektor für »Höhe« 300 ein und drücken Sie die Eingabetaste.

Jetzt können Sie der Seite den ersten Layout-Textrahmen hinzufügen. Sie werden diesen Rahmen dazu benutzen, der Seite eine Hauptüberschrift hinzuzufügen. 4

Ziehen Sie aus der Palette den Platzhalter »Layout-Textrahmen« auf die Position etwas oberhalb der Mitte des neuen Layout-Rasters auf der Seite.

Der Seite wird ein Layout-Textrahmen hinzugefügt. Falls nötig, können Sie die Lage des Rahmens ganz einfach anpassen. Bewegen Sie den Zeiger auf den Rand des Rahmens, so dass der Zeiger sich in einen Pfeil mit einem kleinen Quadrat ändert. Ziehen Sie dann den Rahmen auf die gewünschte Position. 5

Klicken Sie in den Layout-Textrahmen und geben Sie den Text Welcome to Gage Vintage Guitars ein. Wählen Sie anschließend aus dem Menü »Absatzformat« in der Werkzeugleiste den Eintrag »Überschrift 1« aus.

Text im Layout-Textrahmen, als Überschrift 1 neu formatiert

113

114 LEKTION 3 Entwerfen von Webseiten

Sie können ein ausgewähltes Objekt mit Hilfe der Werkzeugleiste präzise auf einem Layout-Raster positionieren. 6

Klicken Sie auf den Rand des Layout-Textrahmens, um ihn auszuwählen.

7

Geben Sie in der Werkzeugleiste in das Textfeld »Horizontale Position« den Wert 179 ein und drücken Sie die Tabulatortaste, um den Rahmen 179 Pixel vom linken Rand des Rasters zu positionieren und die Einfügemarke gleichzeitig in das nächste Eingabefeld springen zu lassen. Geben Sie in das Textfeld »Vertikale Position« den Wert 0 ein und drücken Sie die Tabulatortaste, um den Rahmen 0 Pixel vom oberen Rand des Rasters zu positionieren und die Einfügemarke gleichzeitig in das nächste Eingabefeld springen zu lassen.

Sie können die Werkzeugleiste auch dazu benutzen, ein ausgewähltes Objekt in der Größe zu verändern. 8

Geben Sie in der Werkzeugleiste in das Textfeld »Breite« 400 ein und drücken Sie die Tabulatortaste, um den Rahmen auf 400 Pixel zu verbreitern und die Einfügemarke in das nächste Eingabefeld zu bewegen. Geben Sie in das Textfeld »Höhe« 80 ein und drücken Sie die Eingabetaste, um die Höhe des Rahmens auf 80 Pixel zu vergrößern.

Jetzt werden Sie der Seite einen zweiten Textrahmen hinzufügen. Sie werden diesen Rahmen benutzen, um der Seite einen Untertitel hinzuzufügen. 9

Ziehen Sie den Platzhalter »Layout-Textrahmen« aus der Objekte-Palette nach oben links in das Layout-Raster.

10 Klicken Sie in den Layout-Textrahmen und geben Sie den Text Check Out This Week’s Hottest Buy! ein. Wählen Sie anschließend den gerade eingegebenen Text aus, klicken Sie auf die Schaltfläche »Fett« ( / ) in der Werkzeugleiste und wählen Sie aus dem Menü »Schriftgröße« in der Werkzeugleiste den Eintrag 4 aus.

ADOBE GOLIVE 5.0 Classroom in a Book

Falls nötig, können Sie den Layout-Textrahmen mit Hilfe seiner Anfasser in der Größe anpassen. Klicken Sie dazu auf eine der Ecken des Rahmens, um ihn auszuwählen, und ziehen Sie an einem seiner Anfasser.

Größe eines Layout-Textrahmens anpassen

11 Klicken Sie in den Leerraum außerhalb des Layout-Textrahmens, um seine Auswahl aufzuheben.

Hinzufügen von Text mit Hilfe einer Tabelle Nun werden Sie der Seite einen Text hinzufügen, in dem die Firma Gage Vintage Guitars vorgestellt wird. Sie werden beginnen, indem Sie eine einzellige Tabelle erzeugen. Danach werden Sie einen Text aus einem Textverarbeitungsprogramm in diese Tabelle importieren. Für weitere Informationen über das Verwenden von Tabellen lesen Sie Tabellen hinzufügen auf Seite 64.

115

116 LEKTION 3 Entwerfen von Webseiten

1

Ziehen Sie den Platzhalter »Tabelle« aus der Objekte-Palette unter die Hauptüberschrift auf dem Layout-Raster.

Einer Seite eine Tabelle hinzufügen

Der Inspektor ändert sich in den Tabellen-Inspektor mit ausgewählter Registerkarte »Tabelle«. 2

Geben Sie im Tabellen-Inspektor unter »Zeilen« 1 ein und drücken Sie die Tabulatortaste. Geben Sie unter »Spalten« 1 ein und drücken Sie die Tabulatortaste.

3

Wenn nötig, wählen Sie aus dem Menü rechts vom Textfeld »Breite« den Eintrag »Pixel« aus. Geben Sie im Textfeld »Breite« den Wert 400 ein und drücken Sie die Eingabetaste.

4

Geben Sie im Textfeld »Umrandung« den Wert 0 ein und drücken Sie die Eingabetaste, um den Tabellenrahmen zu entfernen.

5

Klicken Sie auf die Schaltfläche »Durchsuchen« rechts neben der Option »Tabulator-Text importieren«.

6

Wählen Sie die Datei Intro.txt aus dem Pfad Lesson03/03Start und klicken Sie auf »Öffnen«.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Geben Sie in der Werkzeugleiste in das Textfeld »Horizontale Position« den Wert 179 ein und drücken Sie die Tabulatortaste. Geben Sie in das Textfeld »Vertikale Position« den Wert 80 ein und drücken Sie die Eingabetaste.

8

Klicken Sie auf das Layout-Raster, um es auszuwählen. Klicken Sie dann im Layout-Raster-Inspektor auf die Schaltfläche »Optimale Größe«.

9

Wählen Sie Datei: Speichern, um die Seite zu speichern.

Eine selbst definierte Farben-Palette erzeugen und Text färben Nun werden Sie einen Teil des Textes einfärben. Sie beginnen damit, indem Sie dem Farbfeld im Site-Fenster eine Farbe hinzufügen. Sie können dieses Farbfeld als Spezial-Farbfeld verwenden, das Farben aufnimmt, die Sie auf Ihrer Website häufig verwenden. 1

Klicken Sie im Site-Fenster auf den Reiter »Farben«.

Registerkarte »Farben« im Site-Fenster

Sie werden feststellen, dass die Registerkarte »Farben« einen Ordner Neue Farben und eine Farbe unbenannte Farbe enthält. Beim Erzeugen einer neuen Site fügt Adobe GoLive der Registerkarte »Farben« automatisch diese Inhalte hinzu. Die unbenannte Farbe repräsentiert den voreingestellten weißen Hintergrund, der auf der Homepage Index.html verwendet wird. Sie werden zuerst der unbenannten Farbe einen Namen geben.

117

118 LEKTION 3 Entwerfen von Webseiten

2

Klicken Sie auf den Namen der unbenannten Farbe, um sie auszuwählen. (Achten Sie darauf, den Namen auszuwählen und nicht das Farbsymbol.) Geben Sie der Farbe den Namen White und klicken Sie in den Leerraum darunter, um die Auswahl aufzuheben, oder drücken Sie die Eingabetaste. Unter Windows ist der einfachste Weg, einer Farbe einen neuen Namen zu geben, die unbenannte Farbe auszuwählen und anschließend die Funktionstaste »F2« zu drücken. Damit wird einfach die interne Farbbezeichnung ausgewählt (in diesem Fall White für Weiß).

Nun werden Sie der Registerkarte »Farben« eine selbst definierte Farbe hinzufügen. 3

Falls nötig, wählen Sie Fenster: Farbe, um die Farben-Palette aufzurufen.

4

Vergewissern Sie sich, dass in der Farben-Palette die Schaltfläche »WebFarbenliste« ( ) ausgewählt ist. Geben Sie im Textfeld »Wert« den Wert 990000 ein und drücken Sie die Eingabetaste. Die ausgewählte Farbe erscheint im Vorschaubereich.

5

Ziehen Sie die Farbe aus dem Vorschaubereich in den Ordner »Neue Farben« in der Registerkarte »Farben« des Site-Fensters.

Farbe aus dem Vorschaubereich in die Registerkarte »Farben« des Site-Fensters ziehen

6

Geben Sie Red als Namen der Farbe ein und drücken Sie die Eingabetaste. Unter Windows ist der einfachste Weg, einer Farbe einen neuen Namen zu geben, die unbenannte Farbe auszuwählen und dann die Funktionstaste »F2« zu drücken.

Jetzt werden Sie einen Teil des Textes auf der Seite mit der Farbe Red einfärben.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Wählen Sie den Text Check Out This Week’s Hottest Buy! aus. (Vergewissern Sie sich, dass Sie den Text ausgewählt haben und nicht den Textrahmen.)

8

Ziehen Sie die Farbe Red aus der Registerkarte »Farben« des Site-Fensters auf den ausgewählten Text auf der Seite.

Farbe aus dem Site-Fenster auf den ausgewählten Text ziehen

9 Klicken Sie in den Leerraum außerhalb des ausgewählten Textes, um seine Auswahl aufzuheben. Sie können Farben auch aus Bereichen unter dem Mauszeiger aufnehmen und diese Farbe Ihrer selbst definierten Farben-Palette hinzufügen. Diese Möglichkeit ist nützlich, wenn Sie die Farbe von zwei Objekten angleichen möchten. 10 Bewegen Sie den Mauszeiger über die Farbfelderfläche in der Farben-Palette, so dass der Zeiger sich in eine Pipette ändert.

119

120 LEKTION 3 Entwerfen von Webseiten

11 Ziehen Sie mit gedrückter Maustaste von der Farbfelderfläche auf den Schatten des Plektrons auf der Seite und lassen Sie die Maustaste los. Die Farbe des Plektronschattens erscheint im Vorschaubereich der Farben-Palette.

Farbe von einem Bild auf der Seite aufnehmen

12 Ziehen Sie die neue Farbe aus dem Vorschaubereich auf den Ordner »Neue Farben« in der Registerkarte »Farben« des Site-Fensters. 13 Geben Sie Olive als Namen für die Farbe ein und klicken Sie anschließend auf den Leerraum unterhalb des Farbnamens, um seine Auswahl aufzuheben. Wenn Sie möchten, können Sie jetzt Objekte auf der Seite mit der Farbe des Schattens einfärben. Das Site-Fenster enthält Informationen darüber, ob eine Farbe Web-sicher ist. Die Farbe Olive hat in der Spalte »Web-Safe« keinen Punkt, was bedeutet, dass sie unter der Einstellung 256 Farben (Standard PC) gedithert dargestellt wird. 14 Wählen Sie Datei: Speichern, um die Homepage zu speichern. Wählen Sie anschließend Datei: Schließen, um sie zu schließen. Sie sind jetzt bereit, zwei weitere Seiten für die Website Gage Vintage Guitars zu entwerfen.

Entwurf der Appraisal-Seite aktualisieren Zuerst werden Sie den Entwurf der fertig gestellten Webseite aus Lektion 2, Mit Text und Tabellen arbeiten, aktualisieren.

ADOBE GOLIVE 5.0 Classroom in a Book

Eine dynamische Komponente hinzufügen Die Seite besitzt gegenwärtig noch nicht die Navigationsleiste der Website. Sie werden die Navigationsleiste schnell hinzufügen, indem Sie die dynamische Komponente verwenden, die Sie weiter vorne in dieser Lektion erzeugt haben. Sie haben bereits gelernt, wie Sie eine Komponente hinzufügen, indem Sie der Seite zunächst einen Komponentenplatzhalter hinzufügen. Jetzt werden Sie lernen, wie Sie eine Komponente auch ohne einen Platzhalter hinzufügen können. 1

Klicken Sie im Site-Fenster auf den Reiter »Dateien«.

2

Doppelklicken Sie im Site-Fenster im Ordner Pages auf die Datei Appraise.html, um sie zu öffnen.

3

Klicken Sie in der Objekte-Palette auf den Reiter »Website-Extras« ( ).

4

Wählen Sie »Komponenten« aus dem Menü in der unteren rechten Ecke der Palette. Es erscheint ein Symbol der dynamischen Komponente, Navbar.html, in der Objekte-Palette.

5

Ziehen Sie das Symbol »Navbar.html« aus der Objekte-Palette in die linke obere Ecke der Seite.

Symbol aus der Objekte-Palette verwenden, um eine dynamische Komponente hinzuzufügen

121

122 LEKTION 3 Entwerfen von Webseiten

6

Wenn nötig, scrollen Sie nach oben, um den Dokumentanfang sehen zu können.

Die Navigationsleiste wird oben auf der Appraisal-Seite hinzugefügt. Beachten Sie, dass im Textfeld »Seite« des Komponenten-Inspektors der Pfad von Navbar.html angezeigt wird. Adobe GoLive erzeugt außerdem im Site-Fenster automatisch einen Ordner GeneratedItems. In diesem Ordner befindet sich eine Datei namens CSScriptLib.js, in der Adobe GoLive allgemein gebräuchlichen Code Ihrer Seiten speichert; löschen Sie also auf keinen Fall diesen Ordner oder seinen Inhalt.

Eine selbst definierte Farben-Palette aktualisieren Nun werden Sie Ihre Spezial-Farben-Palette aktualisieren, indem Sie ihr alle Farben der Appraisal-Seite hinzufügen, die nicht bereits in ihr enthalten sind. 1

Klicken Sie auf den Reiter »Farben« im Site-Fenster und klicken Sie anschließend in der Werkzeugleiste auf die Schaltfläche »Aktualisieren« (

).

Die neuen Hintergrundfarben der Seite und der Tabellenzellen werden dem Ordner Neue Farben in der Registerkarte »Farben« des Site-Fensters hinzugefügt. Sie werden jeder Farbe einen Namen geben.

Aktualisierte selbst definierte Farben-Palette

2

Klicken Sie in den Leerraum außerhalb der ausgewählten Farben, um ihre Auswahl aufzuheben.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie auf den Namen der ersten unbenannten Farbe, um sie auszuwählen. Geben Sie Green ein und drücken Sie die Eingabetaste oder den Zeilenschalter. Klicken Sie anschließend in den Leerraum unterhalb des Namens, um seine Auswahl aufzuheben.

4

Ändern Sie den Namen der zweiten unbenannten Farbe in Khaki und den der dritten unbenannten Farbe in Yellow.

Jetzt werden Sie den Namen des Ordners Neue Farben ändern. 5

Klicken Sie auf den Namen des Ordners Neue Farben, um ihn auszuwählen. Geben Sie Gage Colors ein und klicken Sie in den Leerraum unterhalb des Namens, um seine Auswahl aufzuheben.

6

Klicken Sie auf die Titelleiste der Appraisal-Seite, um sie zu aktivieren. Wählen Sie Datei: Speichern, um die Seite zu speichern, und wählen Sie danach Datei: Schließen, um sie zu schließen.

Entwerfen der Seite Hottest Buy Nun werden Sie eine neue Seite entwerfen und dafür Rahmen benutzen. Rahmen ermöglichen Ihnen das freie Platzieren von Objekten auf der Seite, ohne Tabellen oder ein Layout-Raster zu verwenden. Außerdem können Sie mit ihrer Hilfe Objekte in Ebenen überlappen. Sie können einem Rahmen Text, Tabellen, Bilder und andere Objekte hinzufügen. Zuerst werden Sie eine neue Seite erzeugen. 1

Wählen Sie Datei: Neu.

2

Ändern Sie den Titel der Seite in Hottest Buy.

3

Wählen Sie Datei: Speichern, benennen Sie die Seite in Hottest.html um und speichern Sie sie im Ordner Pages. Der Ordnerpfad lautet Lesson03/Gage Folder/Gage/Pages.

Nun werden Sie die Hintergrundfarbe der Seite ändern. Mit Ihrer selbst definierten Farbtabelle können Sie den Hintergrund dieser Seite ganz einfach dem Hintergrund der Appraisal-Seite anpassen.

123

124 LEKTION 3 Entwerfen von Webseiten

4

Ziehen Sie die Farbe Khaki aus dem Site-Fenster auf das Symbol »Seite« ( ) in der oberen linken Ecke des Dokumentfensters.

Die Hintergrundfarbe der Seite ändert sich in Khaki.

Verwenden der Registerkarte »Farben« im Site-Fenster, um die Hintergrundfarbe der Seite zu ändern

Jetzt werden Sie dieser Seite die Navigationsleiste hinzufügen (wie bei den anderen Seiten der Website zuvor auch). 5

Ziehen Sie das Symbol »Navbar.html« aus der Registerkarte »Website-Extras« der Objekte-Palette in die obere linke Ecke der Seite.

6

Wählen Sie Datei: Speichern, um die Seite zu speichern.

Hinzufügen des ersten Rahmens Nun werden Sie der Seite einen Rahmen hinzufügen. Sie werden diesen Rahmen benutzen, um der Seite das Bild einer Gitarre hinzuzufügen. 1

Klicken Sie in der Palette auf den Reiter »Allgemein«. Ziehen Sie dann das Symbol »Rahmen« aus der Objekte-Palette auf die Seite; Sie können auch auf das Symbol »Rahmen« in der Objekte-Palette doppelklicken, wenn Sie bereits eine Einfügemarke in der Seite platziert haben.

ADOBE GOLIVE 5.0 Classroom in a Book

Auf der Seite erscheint ein Rahmen in der oberen linken Ecke unterhalb der Komponente und der Inspektor ändert sich in den Rahmen-Inspektor.

Seite einen Rahmen hinzufügen

Jetzt werden Sie dem Rahmen einen Namen geben, damit Sie ihn von anderen Rahmen, die Sie der Seite noch hinzufügen werden, unterscheiden können. 2

Geben Sie im Rahmen-Inspektor in das Textfeld »Name« den Text Image ein und drücken Sie die Eingabetaste.

Nun werden Sie dem Rahmen das Bild einer Gitarre hinzufügen.

125

126 LEKTION 3 Entwerfen von Webseiten

3

Klicken Sie im Site-Fenster auf den Reiter »Dateien«. Ziehen Sie dann die Datei Guitar.gif aus dem Ordner Images im Site-Fenster auf den Rahmen auf der Seite.

Bilddatei aus dem Site-Fenster auf den Rahmen ziehen

Das Bild der Gitarre erscheint im Rahmen. 4

Klicken Sie in den Leerraum außerhalb des Bildes, um seine Auswahl aufzuheben.

Hinzufügen des zweiten Rahmens Sie werden der Seite einen zweiten Rahmen hinzufügen, der eine Beschreibung der Gitarre enthalten soll, die Sie gerade der Seite hinzugefügt haben. 1

Doppelklicken Sie in der Objekte-Palette auf das Symbol »Rahmen«. Der zweite Rahmen erscheint über dem ersten Rahmen.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Geben Sie im Rahmen-Inspektor in das Textfeld »Name« den Text Description ein und drücken Sie die Eingabetaste.

Sie werden den Rahmen Description zunächst auf einen leeren Bereich auf der Seite bewegen. 3

Bewegen Sie den Mauszeiger über den Rand des Rahmens Description, so dass der Zeiger sich in eine nach links weisende Hand verändert.

4

Ziehen Sie den Rahmen Description nach rechts vom Rahmen Image.

Zweiten Rahmen nach rechts vom ersten Rahmen ziehen

Jetzt werden Sie dem Rahmen Description einen Text hinzufügen. Und zwar werden Sie eine Beschreibung der auf der Seite gezeigten Gitarre eingeben. 5

Klicken Sie in den Rahmen Description und geben Sie 1981 Gibson ES-347 ein. Wählen Sie dann den gerade eingegebenen Text aus, klicken Sie in der Werkzeugleiste auf die Schaltfläche »Fett« ( bzw. ) und wählen Sie in der Werkzeugleiste aus dem Menü »Schriftgröße« den Eintrag 6 aus.

6

Klicken Sie im Site-Fenster auf den Reiter »Farben«. Ziehen Sie anschließend die Farbe Red aus dem Site-Fenster auf den ausgewählten Text auf der Seite.

127

128 LEKTION 3 Entwerfen von Webseiten

7

Klicken Sie in den Leerraum außerhalb des ausgewählten Textes, um seine Auswahl aufzuheben.

Sie können die selbst definierten Farben Ihrer Website auch in der Registerkarte »Site-Farben« der Farben-Palette anzeigen lassen (der Reiter ganz rechts in der Palette). Dann können Sie die Farben-Palette anstelle des Site-Fensters benutzen, um der Seite Farbe hinzuzufügen. Jetzt werden Sie den Rahmen-Inspektor verwenden, um den Rahmen Description zu bewegen. 8

Bewegen Sie den Mauszeiger über den Rand des Rahmens Description, so dass der Zeiger sich in eine nach links weisende Hand ändert. Klicken Sie dann auf den Rand des Rahmens, um ihn auszuwählen.

9

Geben Sie im Rahmen-Inspektor im Textfeld »Links« den Wert 250 ein und drücken Sie die Eingabetaste, um den Rahmen 250 Pixel vom linken Rand der Seite entfernt zu positionieren. Geben Sie im Textfeld »Oben« den Wert 300 ein und drücken Sie die Eingabetaste, um den Rahmen 300 Pixel vom oberen Rand der Seite entfernt zu positionieren.

Nun werden Sie die Größe des Rahmens mit Hilfe des Rahmen-Inspektors ändern. 10 Geben Sie im Textfeld »Breite« den Wert 200 ein und drücken Sie die Eingabetaste, um den Rahmen auf 200 Pixel zu verbreitern. Geben Sie im Textfeld »Höhe« den Wert 100 ein und drücken Sie die Eingabetaste, um die Höhe des Rahmens auf 100 Pixel zu bringen.

ADOBE GOLIVE 5.0 Classroom in a Book

Sie können die Größe eines Rahmens auch ändern, indem Sie ihn auswählen und ihn an einem seiner Anfasser ziehen. 11 Wählen Sie Datei: Speichern, um die Seite zu speichern. Beachten Sie, dass die Bilder Items In Stock, Repairs und Appraisals auf der Seite Hottest Buy oben am Raster ausgerichtet sind. Sie werden diese Bilder nun nach unten bewegen, so dass sie auf dem Raster mittig ausgerichtet werden. 12 Versuchen Sie, eines der Bilder auszuwählen, um es zu bearbeiten. Sie werden feststellen, dass Sie stattdessen die gesamte dynamische Komponente ausgewählt haben. Sie können die Objekte der dynamischen Komponente von dieser Seite aus nicht bearbeiten. Stattdessen müssen Sie die Objekte der Komponente in der Datei bearbeiten, in der Sie sie erzeugt haben. 13

Wählen Sie Datei: Schließen, um die Seite zu schließen.

Bearbeiten einer dynamischen Komponente Ein weiterer Vorteil bei der Verwendung von dynamischen Komponenten für das Platzieren von häufig benötigtem Seiteninhalt liegt darin, dass Sie nur eine einzige Datei bearbeiten müssen, um Änderungen an Ihrer Komponente vorzunehmen. Sobald Sie die Änderungen der Komponente speichern, aktualisiert Adobe GoLive automatisch alle Dateien, die sie verwenden. Jetzt werden Sie die Datei Navbar.html öffnen, um sie zu bearbeiten. 1

Klicken Sie im erweiterten Site-Fenster auf den Reiter »Extras«.

2

Doppelklicken Sie im Ordner »Komponenten« des Site-Fensters auf die Datei Navbar.html, um sie zu öffnen.

3

Klicken Sie auf das Bild Items In Stock, um es auszuwählen. Klicken Sie dann mit gedrückter Umschalttaste auf die Bilder Repairs und Appraisals, um sie ebenfalls der Auswahl hinzuzufügen.

129

130 LEKTION 3 Entwerfen von Webseiten

Verwenden von Frames Mit Frames können Sie Seiteninhalte manipulieren und dynamische Effekte und eine mehrschichtige Anzeige erzielen. Sie können mit Frames eine Seite in Rechtecke unterteilen, die Sie individuell formatieren, mit HTML-Inhalt versehen und stapeln können. Diese Rechtecke können undurchsichtig oder transparent sein, um Objekte im Hintergrund sichtbar zu machen. Hinweis: Für die korrekte Anzeige von Frames ist ein Webbrowser der Version 4.0 oder später empfehlenswert. Obwohl Frames in der Zukunft vielleicht genau so oft verwendet werden wie HTMLTabellen, kann es für Besucher mit älteren Browsern problematisch sein, Seiten anzuzeigen, die Frames enthalten. Über Frames Frames basieren auf dem DIV-Tag, das seit HTML 3.2 verfügbar ist, jedoch nicht allgemein verwendet wird. HTML 4.0 verbessert die Funktionalität des DIV-Tags wesentlich, so dass es absolut positioniert und gestapelt werden kann, um ein Hintergrundbild oder eine Hintergrundfarbe aufzunehmen. Das DIV-Tag ist darüber hinaus ein Hauptelement von Dynamic HTML und ein Baustein für absolute Positionierung mit Cascading Stylesheets. Frames basieren auf den folgenden beiden Konzepten: • Die Stapelung ist eine Schlüsselfunktion von Frames. Frames können sich überlappen und übereinander platziert werden. Die Stapelreihenfolge wird durch das Attribut »z-Index« (z kommt von der z-Achse eines dreidimensionalen Koordinatensystems) gesteuert. Elemente mit höherem zIndex werden über Elementen mit niedrigerem z-Index angezeigt. Ein Element mit einem z-Index von 2 würde daher beispielsweise über einem Element mit einem z-Index von 1 »schweben«. Standardmäßig überlagern Frames den normalen HTML-Textfluss und das Adobe-GoLive-Layout-Raster. • Als unabhängige Komponente innerhalb der Seite nimmt ein Frames jedes andere HTML-Tag auf, z.B. ein Bild oder einen einfachen HTML-Text mit Formatierung. Ein Frames hat die gleichen Hintergrundbild- und Farbeigenschaften wie eine HTML-Seite.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Klicken Sie in der Werkzeugleiste im Bereich »Auf Übergeordnete ausrichten« auf die Schaltfläche »Vertikal zentriert ausrichten« ( ), um die Bilder auf dem Raster vertikal zu zentrieren.

Bilder auf dem Raster vertikal zentrieren

5 Klicken Sie in den Leerraum außerhalb der ausgewählten Bilder, um ihre Auswahl aufzuheben. 6 Wählen Sie Datei: Speichern, um die Seite zu speichern. Klicken Sie im aufgerufenen Dialogfeld auf OK, damit Adobe GoLive die Dateien, die Navbar.html als dynamische Komponente verwenden, automatisch aktualisiert. 7 Wählen Sie Datei: Schließen, um die Seite zu schließen. Sie haben den Entwurf der Website für diese Lektion abgeschlossen. Jetzt können Sie die Seiten in Adobe GoLive betrachten.

131

132 LEKTION 3 Entwerfen von Webseiten

Vorschau in Adobe GoLive Gehen Sie folgendermaßen vor, um jede Webseite in der Vorschau zu betrachten: 1

Doppelklicken Sie im Site-Fenster auf die Dateien Index.html, Appraise.html oder Hottest.html, um sie zu öffnen. (Die Dateien Appraise.html und Hottest.html befinden sich im Ordner Pages.)

2

Klicken Sie im Dokumentfenster auf den Reiter »Vorschau«.

Adobe GoLive stellt eine Vorschau der Seite dar. Beachten Sie, dass die Position der Navigationsleiste auf der Seite nach unten bewegt wurde; das spiegelt die Änderung wieder, die Sie an der dynamischen Komponente vorgenommen haben. 3

Wenn Sie mit dem Betrachten der Seite fertig sind, wählen Sie Datei: Schließen, um sie zu schließen.

4

Wenn Sie mit dem Betrachten aller Seiten fertig sind, wählen Sie Datei: Schließen, um das Site-Fenster zu schließen.

Weitere Informationen zur Vorschau von Seiten finden Sie unter Vorschau mit Adobe GoLive auf Seite 40 und Vorschau in einem Webbrowser auf Seite 42.

Eigene Übungen Manchmal möchten Sie vielleicht, dass einige Seiten in Ihrer Website sich im Seitenlayout und Konzept ähnlich sind. Anstatt jede Seite ganz von Neuem zu erzeugen, können Sie die Seite einmal erzeugen und als Vorlage speichern. Die Vorlagen in Adobe GoLive ähneln den Vorlagen, die in den meisten Textverarbeitungsanwendungen zur Verfügung stehen. Sie speichern die Seite als Vorlage und verwenden diese, um neue Seiten zu erzeugen, die vollständig editierbar sind. Versuchen Sie, eine Vorlage aus der Homepage der Website von Gage Vintage Guitars zu erzeugen. Verwenden Sie diese Vorlage dann, um eine neue Seite zu erzeugen. 1

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Gage.site. Sie finden die Datei im Pfad Lesson03/03End/Gage Folder/Gage.site.

2

Doppelklicken Sie im Site-Fenster auf die Datei Index.html, um sie zu öffnen.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie Datei: Speichern als und wählen Sie im Dialogfenster »Speichern als« aus dem rechten Popup-Menü im Bereich »Kodierung« den Eintrag »Vorlagen«.

4

Geben Sie der Seite den Namen Master.html und klicken Sie auf »Speichern«. Die neue Vorlage wird in dem Ordner Vorlagen der Seite gespeichert.

5

Wählen Sie Datei: Schließen, um die Seite zu schließen.

6

Klicken Sie in der Objekte-Palette auf den Reiter »Website-Extras« ( ).

7

Wählen Sie aus dem Menü in der unteren rechten Ecke der Objekte-Palette den Eintrag »Vorlagen« aus. Es erscheint ein Symbol der Vorlage Master.html in der Objekte-Palette.

8

Ziehen Sie das Symbol Master.html aus der Objekte-Palette auf den Ordner Pages im Site-Fenster. Es wird eine neue Seite der Vorlage Master.html im SiteFenster angezeigt.

Neue Seiten aus einer Vorlage erzeugen

9

Geben Sie New.html ein, um die Seite zu benennen, und drücken Sie die Eingabetaste. Klicken Sie anschließend in den Leerraum außerhalb des Dateinamens, um seine Auswahl aufzuheben.

10 Doppelklicken Sie im Site-Fenster auf die Datei New.html im Ordner Pages, um sie zu öffnen.

133

134 LEKTION 3 Entwerfen von Webseiten

11 Klicken Sie auf die Navigationsleiste oben in der Seite. Beachten Sie, dass Sie die gesamte dynamische Komponente ausgewählt haben. Wie auch auf den anderen Seiten, die die dynamische Komponente verwenden, können Sie ihre Objekte nicht von dieser Seite aus bearbeiten. Stattdessen bearbeiten Sie die Objekte der Komponente in der Datei, in der Sie sie erzeugt haben. 12 Wählen Sie den Text Check Out This Week’s Hottest Buy!. 13 Geben Sie den gewünschten neuen Text ein, der den ausgewählten Text ersetzen soll. (Wir haben Click Here for a Free Appraisal! eingegeben.) Beachten Sie, dass Sie den Text im Layout-Textrahmen auf der Seite bearbeiten können. Sie können auch Objekte von der Seite entfernen. 14 Klicken Sie auf den linken Rand der einzelligen Tabelle, um sie auszuwählen. (Die Tabelle enthält den Text, der die Firma Gage Vintage Guitars vorstellt.) Drücken Sie auf die Löschtaste, um die Tabelle zu entfernen. Sie können der Seite außerdem Objekte hinzufügen. 15 Klicken Sie in der Objekte-Palette auf den Reiter »Allgemein« ( ) und ziehen Sie das Symbol »Layout-Textrahmen« aus der Palette auf das Layout-Raster auf der Seite. Ein Layout-Textrahmen wird der Seite hinzugefügt. 16 Wenn Sie möchten, können Sie noch mehr auf der Seite ändern. Wenn Sie damit fertig sind, wählen Sie Datei: Schließen, um die Seite zu schließen. Sie brauchen Ihre Änderungen nicht zu speichern. Wählen Sie anschließend Datei: Schließen, um das Site-Fenster zu schließen.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Welche Datei wird im Site-Fenster angezeigt?

2

Nennen Sie zwei Vorteile der Verwendung einer dynamischen Komponente.

3

Wie kann man eine dynamische Komponente einer Seite hinzufügen?

4

Welches sind die drei Standard-Bildformate für das Web?

5

Nennen Sie zwei Wege, wie Sie ein Bild für einen Bildplatzhalter auf einer Seite festlegen können.

6

Welche Objekte müssen bereits vorhanden sein, bevor ein LayoutTextrahmen einer Seite hinzugefügt werden kann?

7

Wie erzeugt man eine selbst definierte Farben-Palette?

8

Kann man einem Bild, das einer Seite hinzugefügt wurde, Farbe entnehmen? Wenn ja, wie?

9

Warum sollten Sie Rahmen benennen?

10 Wie bewegt man einen Rahmen?

Antworten 1

Die Datei mit der Endung ».site« wird im Site-Fenster angezeigt.

2

Beim Verwenden einer dynamischen Komponente lassen sich wiederholende Seiteninhalte einmal erzeugen und anschließend schnell und einfach den Seiten Ihrer Website hinzufügen. Außerdem kann man Änderungen an sich wiederholendem Seiteninhalt in einer einzelnen Datei vornehmen und lässt anschließend Adobe GoLive die Seiten, die die dynamische Komponente verwenden, automatisch aktualisieren.

3

Dynamische Komponenten können einer Seite auf folgende Arten hinzugefügt werden:

• Ziehen Sie das Symbol »Komponente« aus der Registerkarte »Smart« in der Objekte-Palette auf die Seite. Ziehen Sie anschließend vom Symbol »Point & Shoot« im Komponenten-Inspektor auf eine HTML-Datei im Ordner Komponenten im Site-Fenster.

135

136 LEKTION 3 Entwerfen von Webseiten

• Wählen Sie »Komponenten« aus dem Menü unten rechts in der Registerkarte »Website-Extras« in der Objekte-Palette. Ziehen Sie anschließend das Symbol der HTML-Datei aus der Palette auf die Seite. 4

Die drei Standard-Bildformate für das Web sind Graphical Interchange Format (GIF), Joint Photographic Experts Group (JPEG) und Portable Network Graphics (PNG).

5

Man kann ein Bild für einen Bildplatzhalter festlegen, indem man folgendermaßen vorgeht: vom Symbol »Point & Shoot« im Bild-Inspektor auf eine Bilddatei im Site-Fenster ziehen, mit gedrückter Alt- (Windows) bzw. Befehlstaste (Mac OS) vom Bildplatzhalter auf eine Bilddatei im Site-Fenster ziehen oder eine Bilddatei aus dem Site-Fenster auf den Bildplatzhalter ziehen.

6

Bevor einer Seite ein Layout-Textrahmen hinzugefügt werden kann, muss ein Layout-Raster vorhanden sein.

7

Wählen Sie aus der Farben-Palette eine Farbe, die Sie in Ihre selbst definierte Farben-Palette aufnehmen möchten. Ziehen Sie diese Farbe dann aus dem Vorschaubereich der Farben-Palette auf die Registerkarte »Farben« im SiteFenster. Wenn die Registerkarte »Farben« im Site-Fenster ausgewählt ist, können Sie eine selbst definierte Farben-Palette auch schnell erzeugen, indem Sie eine neue Seite öffnen, der bereits Farben hinzugefügt wurden, und dann in der Werkzeugleiste auf die Schaltfläche »Aktualisieren« klicken.

8

Ja, man kann einem Bild, das einer Seite hinzugefügt wurde, Farben entnehmen. Ziehen Sie dazu von der Farbfelderfläche der Farben-Palette mit gedrückter Maustaste auf die gewünschte Farbe im Bild und lassen Sie die Maustaste los. Die Farbe des Bildes unter dem Mauszeiger erscheint im Vorschaubereich der Farben-Palette. Nun können Sie die Farbe aus dem Vorschaubereich in die Registerkarte »Farben« im Site-Fenster ziehen.

9

Rahmen sollten benannt werden, damit man sie von anderen Rahmen auf der Seite unterscheiden kann.

10 Bewegen Sie den Mauszeiger über den Rand eines Rahmens, so dass der Zeiger sich in eine nach links weisende Hand ändert. Ziehen Sie jetzt den Rahmen, um ihn zu bewegen. Sie können außerdem im Rahmen-Inspektor einzelne Werte eingeben, um einen ausgewählten Rahmen pixelgenau zu platzieren.

Lektion 4

4 Verwenden von Smart Objects

Adobe GoLive ermöglicht Ihnen das Einfügen von Smart Objects auf Ihren Webseiten, die dafür sorgen, dass Verknüpfungen auf die ursprünglichen Bilder in ihren jeweiligen Formaten beibehalten werden; zu ihnen gehören Photoshop-, Illustrator- und LiveMotion-Dateien. Daher können Sie diese Bilder in ihren ursprünglichen Anwendungen bearbeiten, und mit Hilfe der Verknüpfungen werden die Webseiten, die diese Bilder enthalten, automatisch aktualisiert. Smart Objects revolutionieren auf diese Weise den herkömmlichen Arbeitsablauf beim Erstellen von Webgrafiken und sorgen dafür, dass er effizienter und flexibler wird.

140 LEKTION 4 Verwenden von Smart Objects

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Die Technik der Smart Objects und ihre Wirkungsweise • Platzieren, Ändern der Größe und Bearbeiten eines Smart Photoshop Objects • Platzieren und Bearbeiten von Illustrator-Dateien • Platzieren und Bearbeiten von LiveMotion-Dateien Hinweis: Um diese Lektion bis zum Ende durcharbeiten zu können, müssen die Programme Adobe Photoshop 5.5, Adobe Illustrator 9.0 und Adobe LiveMotion 1.0 auf Ihrer Festplatte installiert sein. Für diese Lektion werden Sie etwa eine Stunde benötigen. Kopieren Sie, falls nötig, den Ordner Lesson04 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

Vorbereitungen Sie beginnen diese Lektion damit, eine fertig gestellte Webseite in Ihrem Webbrowser zu betrachten. 1

Starten Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei End.html im Pfad Lesson04/04End/Farm Folder/Farm/End.html.

3

Scrollen Sie im Browser durch die Seite, betrachten Sie die Platzierung der Bilder und achten Sie dabei insbesondere auf die drei Bilder ganz oben in der Tabelle. Das sind die Bilder, die Sie in dieser Lektion platzieren werden. Warten Sie auf jeden Fall die Animation ab.

4

Wenn Sie möchten, können Sie diese fertig gestellte Seite ausdrucken, um sie während dieser Lektion als Referenz zu verwenden.

5

Wenn Sie mit dem Betrachten der Seite fertig sind, schließen Sie Ihren Webbrowser.

141

142 LEKTION 4 Verwenden von Smart Objects

Mehr zu Smart Objects Smart Objects ermöglichen auf einfache Art und Weise das Einfügen von nativen Adobe-Photoshop-, Illustrator- und LiveMotion-Bildern in Ihre Webseiten. Die grundlegende Vorgehensweise ist dabei für alle Arten von Smart Objects gleich: Ziehen Sie einen Smart-Objects-Platzhalter aus der Objekte-Palette auf Ihre Webseite und legen Sie die entsprechende Quelldatei fest. Danach können Sie jedes Smart Object durch Doppelklicken auf das Smart Object auf der Seite in seinem Erstellungsprogramm öffnen. Mit Adobe GoLive können Sie eine Quelldatei aus einem dieser Programme in eines der Formate konvertieren, die von den aktuellen Webbrowsern unterstützt werden, das Bild optimieren und Smart Links zwischen der Web-sicheren Kopie und der Quelldatei beibehalten, um das Bearbeiten zu erleichtern und automatisches Aktualisieren zu ermöglichen. Smart Objects stellen also einen einfacheren, besseren Weg zur Verfügung, Ihre Webseiten mit Grafiken zu beleben. In dieser Lektion werden Sie eine sehr grafikorientierte Homepage für eine Bed & Breakfast-Pension auf dem Land erzeugen. Die Startseite wurde bereits teilweise für Sie erstellt, aber Sie werden noch einige Grafiken hinzufügen und mit Hilfe der Smart-Objects-Technik und Adobe GoLive mit diesen Grafiken arbeiten. Weitere Informationen über das Platzieren von Grafiken, die in einem websicheren Format vorliegen, finden Sie unter Hinzufügen eines Bildes mit Hilfe der Schaltfläche »Point & Shoot« auf Seite 102.

Verwenden von Smart Photoshop Objects Im ersten Abschnitt dieser Lektion werden Sie zwei Smart Photoshop Objects platzieren, eines davon in der Größe verändern und die Farbtabelle des anderen bearbeiten, um einen besonderen Effekt zu erzielen – und das alles, ohne Adobe GoLive zu verlassen. Adobe-Photoshop-Dateien können dazu in einem der folgenden Formate vorliegen: RGB 8-bit PSD, BMP, PICT (nur Mac OS), PCX, Pixar, Amiga IFF, TIFF und TARGA.

ADOBE GOLIVE 5.0 Classroom in a Book

Platzieren eines Smart Photoshop Objects Der erste Schritt betrifft das Platzieren eines Smart Photoshop Objects auf der Seite. Die Grafik ist eine Photoshop-Datei, die mit Hilfe von Adobe ImageReady in Segmente konvertiert wurde. 1

Öffnen Sie die Farm-Site im Pfad Lesson04/04Start/Farm Folder/Farm.site.

2

Klicken Sie mit der rechten Maustaste (Windows) oder mit gedrückter Befehlstaste (Mac OS) in das Site-Fenster und wählen Sie aus dem Kontextmenü den Eintrag »Neuer Ordner«. Geben Sie dem Ordner den Namen Images. In diesen Ordner werden Sie alle Ihre Bilder platzieren, um das Site-Fenster übersichtlicher zu halten.

Auswählen von »Neuer Ordner« aus dem Kontextmenü

3

Doppelklicken Sie im Site-Fenster auf die Datei Start.html, um diese Seite zu öffnen. Sie werden feststellen, dass die Seite aus einer Tabelle mit sieben Zellen besteht, die in den unteren drei Zellen bereits drei Bilder enthält.

143

144 LEKTION 4 Verwenden von Smart Objects

4

Ziehen Sie aus der Registerkarte »Smart« ( ) in der Objekte-Palette einen Smart-Photoshop-Object-Platzhalter in die obere linke Zelle der Tabelle.

Ziehen eines Smart-Photoshop-Object-Platzhalters auf Tabellenzelle

5

Klicken Sie im Live-Bild-Inspektor neben dem Textfeld »Quelle« auf die Schaltfläche »Durchsuchen« ( ) und suchen Sie nach der Datei Cow.psd im Ordner Startfiles. Der Pfad ist Lesson04/04Start/Farm Folder/Farm/Startfiles/Cow.psd. Klicken Sie anschließend auf »Öffnen«.

6

Wenn Sie dazu aufgefordert werden, wählen Sie den Ordner Images, den Sie zu Beginn der Lektion erzeugt haben. Da dieses Bild in Adobe Image Ready in Segmente aufgeteilt wurde (es sind vier Segmente vorhanden: die Kuh selbst und drei Segmente für den Himmel links, rechts und unterhalb der Kuh), werden Sie aufgefordert, einen Platz für den Ordner Cow.data zu bestimmen, der automatisch erzeugt wird, um alle Segmente im Web-sicheren Format zu speichern.

Dadurch wird das Dialogfeld »Für Web speichern« aufgerufen. 7

Klicken Sie auf die Registerkarte »Optimiert« und wählen Sie das SegmentAuswahlwerkzeug ( ).

8

Klicken Sie mit dem Segment-Auswahlwerkzeug auf das Kuh-Segment im optimierten Bild.

9

Wählen Sie aus dem Popup-Menü »Einstellungen« den Eintrag »JPEG Hoch«.

ADOBE GOLIVE 5.0 Classroom in a Book

10 Klicken Sie mit gedrückter Umschalttaste auf die drei Segmente, die den Himmel enthalten. Die drei Segmente befinden sich links, rechts und unterhalb vom Kuh-Segment. 11 Wählen Sie im Popup-Menü »Einstellungen« den Eintrag »GIF 32 No Dither«.

12

Klicken Sie im Dialogfeld »Für Web speichern« auf OK.

Adobe GoLive konvertiert das segmentierte Photoshop-Bild in mehrere websichere Bilder und fügt jedem Bild die entsprechende Dateinamenerweiterung hinzu. In diesem Beispiel werden es drei GIF-Bilder und ein JPEG-Bild. Dabei bleiben alle Bilder mit der ursprünglichen Photoshop-Datei verknüpft. Beachten Sie, dass Sie beim Importieren von segmentierten Bildern jedem Segment unterschiedliche Konvertierungseinstellungen zuweisen können, so wie Sie es auch in diesem Beispiel getan haben.

145

146 LEKTION 4 Verwenden von Smart Objects

Ändern der Größe eines Smart Photoshop Objects Sie müssen jetzt die Größe des gerade eingefügten Bildes anpassen. Das Ändern der Größe von GIF- oder JPEG-Bildern führt häufig zu wenig zufrieden stellenden Ergebnissen. Mit Hilfe der Smart-Objects-Technik gelangen Sie zurück zum Quellbild (in diesem Fall eine segmentierte Photoshop-Datei) und können aus der ursprünglichen Datei ein neues, größenverändertes Web-sicheres Bild erstellen. Diese neue Datei verwendet dabei die Einstellungen, die Sie im Dialogfeld »Speichern für Web« beim Platzieren des Smart Photoshop Objects vorgenommen haben. Die ursprüngliche Photoshop-Datei bleibt unverändert. 1

Ziehen Sie das ausgewählte Bild mit gedrückter Maustaste am unteren rechten Anfasser, bis es etwa die gleiche Breite wie das Bild des Milchwagens in der Zelle darunter hat. Der Fortschrittsbalken »Aktualisierung aus Quelldatei läuft« informiert darüber, dass Adobe GoLive die größenveränderte Websichere Version mit Hilfe der ursprünglichen Photoshop-Quelldatei erstellt.

Hinweis: Um das vollständige segmentierte Bild auszuwählen und nicht nur ein einzelnes Segment, bewegen Sie den Mauszeiger über die obere rechte Ecke des Bildes. Wenn sich der Mauszeiger in dieses Symbol ändert ( ), klicken Sie, um das gesamte segmentierte Bild auszuwählen. Wenn Sie klicken, solange der Mauszeiger noch so aussieht ( ), werden Sie stattdessen ein einzelnes Segment auswählen und die Schaltfläche »Einstellungen« wird nicht anwählbar sein. 2

Speichern Sie das Dokument als Working.html im Pfad Lesson04/04Start/Farm Folder/Farm.

Sie können ein Bild auch in der Größe ändern, indem Sie wieder das Dialogfenster »Für Web sichern« aufrufen. Das Kuh-Bild soll genau die gleiche Breite wie das Milchwagen-Bild in der Zelle darunter haben. 3

Wählen Sie das Milchwagen-Bild aus und notieren Sie seine Breite im BildInspektor. (Die Breite in unserem Dokument betrug 204 Pixel.)

ADOBE GOLIVE 5.0 Classroom in a Book

4

Wählen Sie das vollständige Kuh-Bild aus (nicht nur ein einzelnes Segment) und klicken Sie im Live-Grid-Inspektor auf die Schaltfläche »Einstellungen«. Sie werden wieder aufgefordert, einen Ort zum Speichern des Ordners Cow.data und der Bilder auszuwählen. Vergewissern Sie sich, dass in den Ordner Images gespeichert wird, und klicken Sie auf »Sichern«.

Kuh-Bild auswählen

Auf »Einstellungen« klicken

147

148 LEKTION 4 Verwenden von Smart Objects

5

Klicken Sie im rechten Bereich des Dialogfensters »Für Web speichern« auf den Reiter »Bildgröße«. Achten Sie darauf, dass die Option »Proportionen erhalten« eingeschaltet ist, geben Sie im Textfeld »Breite« den Wert 204 ein und drücken Sie die Eingabetaste. Merken Sie sich die Bildgröße (unser Wert betrug 204 mal 309). Sie werden diese Ausmaße später noch einmal benötigen, wenn Sie die Größe des Bildes ändern, das Sie in die obere rechte Ecke platzieren werden.

6

Klicken Sie auf »Anwenden« und anschließend auf OK.

Hinweis: Sie können das Dialogfenster »Für Web speichern« jederzeit aufrufen und mit unterschiedlichen Einstellungen herumexperimentieren.

Bearbeiten eines Smart Photoshop Objects Als Nächstes werden Sie der Seite ein weiteres Smart Photoshop Object hinzufügen und die Farbtabelle des Bildes bearbeiten, um einen Spezialeffekt zu erzeugen – wieder, ohne dass Sie dazu Adobe GoLive verlassen müssen. 1

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette einen SmartPhotoshop-Object-Platzhalter in die obere rechte Zelle der Tabelle.

2

Klicken Sie im Live-Bild-Inspektor neben dem Textfeld »Quelle« auf die Schaltfläche »Durchsuchen« und suchen Sie die Datei Wheat.psd im Ordner Startfiles. Der Pfad ist Lesson04/04Start/Farm Folder/Farm/Startfiles/Wheat.psd. Klicken Sie anschließend auf »Öffnen«.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie im Dialogfenster »Für Web speichern« im Popup-Menü »Einstellungen« den Eintrag »GIF 32 No Dither« und die Ansicht »Optimiert«.

4

Reduzieren Sie die Farben auf den Wert 20.

5

Doppelklicken Sie in der Farbtabelle auf das dunkelste braune Farbfeld.

Doppelklick auf Farbe

6

Wählen Sie im Dialogfenster »Farbe« (Windows) bzw. »Farbauswahl« (Mac OS) eine Farbe aus und klicken Sie auf OK. (Wir haben uns für Rot entschieden.) Alle Bereiche des Bildes mit der braunen Farbe werden jetzt in die neue Farbe geändert. Auf diese Weise lassen sich sehr einfach auffällige Spezialeffekte erzeugen.

Dialogfenster »Farbauswahl« (Mac OS)

7

Dialogfenster »Farbe« (Windows)

Klicken Sie im Dialogfenster »Für Web speichern« auf OK und klicken Sie auf »Speichern«, um das konvertierte Bild (wheat.gif) in Ihrem Ordner Images zu speichern.

149

150 LEKTION 4 Verwenden von Smart Objects

8

Das Bild mit dem Weizen sollte in etwa die gleiche Größe wie das Kuh-Bild haben (unseres hatte die Ausmaße 204 mal 309 Pixel), wählen Sie also das Smart Photoshop Object Wheat.gif in der oberen rechten Zelle aus.

9

Geben Sie in der Registerkarte »Allgemein« des Live-Bild-Inspektors die Abmessungen für Breite und Höhe ein, die Sie sich vorhin für das Kuh-Bild notiert haben. Drücken Sie nach der Eingabe jedes Wertes die Eingabetaste und achten Sie darauf, wie das Statusfenster »Aktualisierung aus Quelldatei läuft« Sie darüber informiert, dass Adobe GoLive das Web-sichere Bild aus seiner verknüpften Quelldatei heraus aktualisiert. Nun sollten das Kuh-Bild und das Weizen-Bild die gleiche Größe aufweisen.

Verwenden von Smart Adobe Illustrator Objects Smart Illustrator Objects lassen sich auf einer Webseite genauso einfach wie Photoshop-Bilder platzieren. Hinweis: Um diesen Abschnitt der Lektion vervollständigen zu können, müssen Sie Adobe Illustrator 9.0 oder neuer auf Ihrer Festplatte installiert haben.

Platzieren eines Smart Illustrator Objects Sie werden nun ein Smart Illustrator Object einfügen und seine Größe ändern.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette einen SmartIllustrator-Object-Platzhalter in die obere mittlere Zelle der Tabelle.

Einen Smart-Illustrator-Object-Platzhalter in die Tabelle ziehen

2

Klicken Sie im Live-Bild-Inspektor auf die Schaltfläche »Durchsuchen« ( ) und suchen Sie nach der Datei Lifeonfarm.ai im Ordner Startfiles. Der Pfad ist Lesson04/04Start/Farm Folder/Farm/Startfiles/Lifeonfarm.ai. Klicken Sie anschließend auf »Öffnen«.

3

Das Dialogfenster »Konvertierungseinstellungen« wird aufgerufen. Wählen Sie dort »GIF« aus und klicken Sie auf OK. Adobe Illustrator wird im Hintergrund geöffnet, wenn es nicht bereits geöffnet ist, und das Statusfenster »Aktualisierung aus Quelldatei läuft« informiert Sie über den Konvertierungsvorgang der Datei.

GIF auswählen

4

Wählen Sie im Bereich »Einstellungen« des Dialogfensters »Für Web speichern« den Eintrag »GIF 32 Dither« und reduzieren Sie den Wert für Farbe auf 20.

151

152 LEKTION 4 Verwenden von Smart Objects

5

Klicken Sie auf OK und speichern Sie die Datei in Ihrem Ordner Images.

6

Ändern Sie die Größe der platzierten Illustrator-Datei auf die gleiche Größe (232 mal 174) wie das Gemüse-Bild in der Zelle darunter, indem Sie sie entweder mit gedrückter Umschalttaste auf die richtige Größe ziehen oder den Bild-Inspektor verwenden.

Hinweis: Wenn die größenveränderte Webgrafik im SWF- oder SVG-Format vorliegt, kann das automatische Aktualisieren nicht durchgeführt werden, da diese Formate auf Vektoren basieren und generell nahezu verlustfrei skaliert werden können. Daher braucht Illustrator dann nicht im Hintergrund geöffnet zu werden. 7

Doppelklicken Sie auf das Smart Illustrator Object auf Ihrer Seite. Illustrator startet, wenn es nicht bereits geöffnet ist, und die ursprüngliche Quelldatei Lifeonfarm.ai wird aufgerufen. Nehmen Sie ein paar Änderungen an der Datei vor (ändern Sie beispielsweise die Farbe des weißen Rechtecks in Gelb, so wie wir es getan haben) und speichern Sie die Datei.

Hinweis: Falls die Smart-Objects-Anwendung nicht geöffnet wird, wählen Sie Bearbeiten: Voreinstellungen, klicken auf das Dreieck neben »Allgemein« im linken Teil des Dialogfensters, wählen dort den Eintrag »Benutzeroberfläche« und vergewissern sich, dass die Option »Andere Anwendungen zur Bearbeitung von Mediendateien starten« im rechten Teil des Dialogfensters eingeschaltet ist. 8

Kehren Sie wieder zu Adobe GoLive zurück. Adobe GoLive aktualisiert dann automatisch das Smart Illustrator Object auf Ihrer Seite, um die Änderungen widerzuspiegeln, die Sie an der Quelldatei in Illustrator vorgenommen haben.

ADOBE GOLIVE 5.0 Classroom in a Book

Verwenden von Smart Adobe LiveMotion Objects Sie können Ihren Webseiten LiveMotion-Dateien hinzufügen, die im SWFFormat gespeichert sind. Damit lassen sich Ihrer Site dynamisch animierte Bilder zuweisen, die mit den ursprünglichen LiveMotion-Quelldateien verknüpft bleiben. Daher werden alle Änderungen, die Sie in Adobe GoLive oder in LiveMotion vornehmen, automatisch für Sie aktualisiert. Hinweis: Um diesen Abschnitt der Lektion vervollständigen zu können, müssen Sie das Programm LiveMotion auf Ihrer Festplatte installiert haben. Bevor Sie Smart LiveMotion Objects in Adobe GoLive verwenden können, müssen Sie zunächst die folgenden Exporteinstellungen in LiveMotion eingeben: 1

Starten Sie LiveMotion, falls es nicht bereits geöffnet ist.

2

Wählen Sie Fenster: Export.

3

Wählen Sie im oberen Popup-Menü der Export-Palette den Eintrag »SWF«.

4

Schließen Sie LiveMotion.

153

154 LEKTION 4 Verwenden von Smart Objects

Platzieren eines Smart LiveMotion Objects 1

Ziehen Sie aus der Registerkarte »Smart« in der Objekte-Palette einen SmartLiveMotion-Object-Platzhalter in die obere mittlere Zelle unmittelbar unterhalb des Smart Illustrator Objects.

Smart-Live-Motion-Object-Platzhalter in Tabellenzelle ziehen

2

Klicken Sie im Live-Bild-Inspektor auf die Schaltfläche »Durchsuchen« ( ) und suchen Sie nach der Datei Rooster.liv im Ordner Startfiles. Der Pfad ist Lesson04/04Start/Farm Folder/Farm/Startfiles/Rooster.liv. Klicken Sie dann auf »Öffnen«.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Das Dialogfenster »Konvertierungseinstellungen« wird aufgerufen. Wählen Sie dort »Shockwave Flash« aus und klicken Sie auf OK. Adobe LiveMotion wird im Hintergrund geöffnet, wenn es nicht bereits geöffnet ist, und das Statusfenster »Aktualisierung aus Quelldatei läuft« informiert Sie über den Konvertierungsvorgang der Datei. Außerdem können Sie noch die Fortschrittsbalkenfenster »Erzeugen einer SWF-Datei« und »Erzeugen eines Berichts« sehen. Anschließend wird ein Dialogfenster »Sichern« aufgerufen.

4

Speichern Sie das Bild in Ihrem Ordner Images. Achten Sie auf die Dateinamenerweiterung ».swf«. Sie bedeutet, dass die Datei nun im SWF-Format vorliegt.

5

Schauen Sie sich die Seite Farm working.html in Ihrem Browser in der Vorschau an, um die Animation betrachten zu können, indem Sie Spezial: Im Standardbrowser anzeigen auswählen. Wenn Sie damit fertig sind, schließen Sie Ihren Browser wieder und kehren Sie zu Adobe GoLive zurück.

6

Doppelklicken Sie auf das Smart LiveMotion Object auf Ihrer Seite. LiveMotion startet, wenn es nicht bereits geöffnet ist, und die ursprüngliche Quelldatei Rooster.liv wird aufgerufen. Nehmen Sie ein paar Änderungen an der Datei vor (ändern Sie beispielsweise die Farbe des schwarzen Rechtecks) und speichern Sie die Datei.

Hinweis: Falls die Smart-Objects-Anwendung nicht geöffnet wird, wählen Sie Bearbeiten: Voreinstellungen, klicken auf das Dreieck neben »Allgemein« im linken Teil des Dialogfensters, wählen dort den Eintrag »Benutzeroberfläche« und vergewissern sich, dass die Option »Andere Anwendungen zur Bearbeitung von Mediendateien starten« im rechten Teil des Dialogfensters eingeschaltet ist.

155

156 LEKTION 4 Verwenden von Smart Objects

7

Kehren Sie wieder zu Adobe GoLive zurück. Adobe GoLive aktualisiert dann automatisch das Smart LiveMotion Object auf Ihrer Seite, um die Änderungen widerzuspiegeln, die Sie an der Quelldatei in LiveMotion vorgenommen haben.

Hinweis: Da Smart LiveMotion Objects immer im SWF-Format, einem vektorbasierten Format, platziert werden, das generell verlustfrei skaliert werden kann, muss LiveMotion beim Ändern der Größe eines Smart LiveMotion Objects auf Ihrer Webseite nicht im Hintergrund geöffnet werden. 8

Speichern Sie Ihr Dokument und schauen Sie es sich erneut in Ihrem Browser an.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Wie unterscheidet sich ein Bild, das mit Hilfe eines Platzhalters platziert wurde, von einem Bild, das als Smart Object platziert wurde?

2

Wie platzieren Sie ein Smart Object?

3

Was passiert mit der Quelldatei, wenn Sie die Größe eines Smart Objects auf Ihrer Seite ändern?

4

Welches Dialogfenster enthält alle Einstellungen, die Sie beim Platzieren eines Smart Photoshop Objects verwenden können?

5

Wie öffnen Sie die Quelldatei eines Smart Objects innerhalb von Adobe GoLive?

Antworten 1

Ein Bild, das auf einer Webseite mit Hilfe eines Bildplatzhalters platziert wird, muss in einem Web-sicheren Format, wie beispielsweise GIF, JPEG oder PNG vorliegen. Ein Bild, das als Smart Object platziert wird, kann in einer Vielzahl von nicht-Web-sicheren Bitmap- oder vektorbasierten Formaten aus Adobe Photoshop, Illustrator und LiveMotion vorliegen. Adobe GoLive konvertiert das Bild dann in ein Web-sicheres Bild und behält eine dynamische Verknüpfung mit der zugrunde liegenden Quelldatei bei. Wenn Sie die Quelldatei in ihrer nativen Anwendung ändern, wird Ihre Webseite beim nächsten Öffnen der Webseite in Adobe GoLive automatisch aktualisiert. Wenn Sie die Größe des Bildes auf der Webseite ändern, bedient sich Adobe GoLive der Quelldatei, um neue Web-sichere und optimale Bilder der größenveränderten Dateien zu erzeugen, ohne dabei die Quelldateien zu verändern.

2

Um ein beliebiges Smart Object (Photoshop, Illustrator oder LiveMotion) zu platzieren, ziehen Sie einfach den entsprechenden Smart-Object-Platzhalter aus der Registerkarte »Smart« in der Objekte-Palette auf Ihre Webseite. Anschließend bestimmen Sie im Live-Bild-Inspektor die Quelldatei für das Smart Object. Eine Reihe von Dialogfenstern führt Sie dann durch den Rest der Prozedur.

157

158 LEKTION 4 Verwenden von Smart Objects

3

Nichts! Das Besondere an Smart Objects ist, dass Ihre Quelldateien nicht verändert werden. Adobe GoLive erstellt lediglich die Web-sicheren Versionen, die auf Ihrer Webseite erscheinen sollen und lässt die Quelldateien unangetastet.

4

Immer, wenn Sie ein Smart Photoshop Object platzieren, wird das Dialogfenster »Für Web speichern« in Adobe GoLive aufgerufen. Es wird auch für Smart Illustrator Objects aufgerufen, wenn Sie ein Bitmap-Format wie beispielsweise GIF, JPEG oder PNG im einleitenden Dialogfenster »Konvertierungseinstellungen« auswählen. Es wird allerdings nie für Smart LiveMotion Objects aufgerufen, da diese immer im vektorbasierten SWF-Format vorliegen.

5

Sie können die Quelldatei eines beliebigen Smart Objects in seiner ursprünglichen Anwendung aufrufen, indem Sie auf das entsprechende Smart Object auf Ihrer Webseite doppelklicken. Falls das nicht funktioniert, wählen Sie Bearbeiten: Voreinstellungen, klicken auf das Dreieck neben »Allgemein« im linken Teil des Dialogfensters, wählen dort den Eintrag »Benutzeroberfläche« und vergewissern sich, dass die Option »Andere Anwendungen zur Bearbeitung von Mediendateien starten« im rechten Teil des Dialogfensters eingeschaltet ist.

Lektion 5

5 Verknüpfungen

Nachdem Sie den Inhalt Ihrer Webseiten erzeugt haben, müssen Sie den Betrachtern ermöglichen, von einer Seite auf eine andere zu gelangen. Mit Hilfe von Hyperlinks können die Besucher Ihrer Website von einer Position auf der Seite – Text oder Grafik – auf eine andere springen.

162 LEKTION 5 Verknüpfungen

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Einfügen von Verknüpfungen auf Grafiken in einer Webseite • Einfügen von Verknüpfungen (Hypertext-Links) in eine Webseite • Einfügen eines Ankers als Lesezeichen für andere Informationen auf derselben Webseite • Einfügen einer Aktion an eine Verknüpfung. • Ändern der Farbe und der Hervorhebung einer Verknüpfung • Überprüfen von Verknüpfungen • Erzeugen von anwählbaren Bildkarten und ihre Verknüpfung mit einer Webseite • Einfügen von Hotspot-Bereichen in eine Imagemap und Ändern ihres Aussehens • Bearbeiten von Verknüpfungen und Ankern • Reparieren fehlerhafter Verknüpfungen und Ändern der Voreinstellungen von Verknüpfungen Für diese Lektion werden Sie etwa 45 Minuten benötigen. Kopieren Sie, falls nötig, den Ordner Lesson05 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Einführung in Verknüpfungen Mit Hilfe von Verknüpfungen können Anwender von einer Position auf eine andere springen:

• Innerhalb derselben Website • An einen Bereich in derselben Seite wie die Verknüpfung (auch Anker genannt) • In das gesamte Web • Auf nicht zum Web gehörende Datenspeicher, wie FTP-Server, Newsgroups und E-Mail-Adressen

Vorbereitungen In dieser Lektion werden Sie die Verknüpfung von Grafiken und Text kennen lernen, auch Hypertext-Verknüpfung genannt; Sie werden Bildkarten erzeugen und einer Verknüpfung eine Aktion hinzufügen. Sie beginnen in dieser Lektion damit, die fertige Datei der Lektion in Ihrem Browser zu betrachten, um einen Eindruck von dem zu bekommen, was Sie bewerkstelligen werden. 1

Starten Sie Ihren Browser.

163

164 LEKTION 5 Verknüpfungen

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Index.html im Pfad Lesson05/05End/Gage Folder/Gage/Index.html.

Die fertig gestellte Datei Index.html als Vorschau im Browser Netscape

3

Klicken Sie auf die Verknüpfungen in der Datei Index.html und erkunden Sie die Website.

4

Wenn Sie mit dem Betrachten der Datei fertig sind, schließen Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

Öffnen einer Website Folgen Sie diesen Schritten, um die Website zu öffnen und beginnen Sie mit dem Erarbeiten dieser Lektion. 1

Starten Sie Adobe GoLive.

2

Schließen Sie das leere Dokument, das im Dokumentfenster in der LayoutAnsicht erzeugt wurde.

3

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Gage.site im Pfad Lesson05/05Start/Gage Folder/Gage.site.

Gage-Site-Fenster

Diese Website besteht aus der Datei Index.html, dem Ordner Images, der die Bilder dieser Website enthält, und dem Ordner Pages, der gesonderte HTML-Seiten enthält, mit denen Sie verknüpfen werden. 4

Doppelklicken Sie im Site-Fenster auf die Datei Index.html, um sie zu öffnen. Dies ist die Homepage der Gebraucht-Gitarren-Website.

165

166 LEKTION 5 Verknüpfungen

Erzeugen einer Verknüpfung von einer Grafik Durch das Hinzufügen einer Verknüpfung kann der Betrachter auf andere Seiten in der Website springen. Sie werden jetzt eine Verknüpfung von der Datei Index.html auf die Seite Stock erzeugen, so dass der Betrachter von der Homepage auf eine Liste der vorrätigen zu verkaufenden Gegenstände springen kann. Sie werden damit beginnen, nachzusehen, ob die Datei Index.html bereits Verknüpfungen enthält, und untersuchen, wo und wie Sie eine Verknüpfung auf die Datei hinzufügen können. 1

Klicken Sie oben im Dokumentfenster der Datei Index.html auf den Reiter »Vorschau« ( ), damit Sie zunächst in der Vorschau-Ansicht arbeiten können.

2

Klicken Sie mit dem Mauszeiger an verschiedene Stellen im Dokumentfenster. Sie werden feststellen, dass die Datei keine Verknüpfungen enthält.

3

Klicken Sie in der Datei Index.html auf den Reiter »Layout« ( in die Layout-Ansicht zu gelangen.

4

Klicken Sie im Dokumentfenster der Datei Index.html auf das Bild Items in Stock und versuchen Sie, es auf diese Weise auszuwählen. Sie werden das Bild nicht auswählen können, da es Teil einer dynamischen Komponente ist – einem Element, das automatisch über eine gesamte Website aktualisiert wird, sobald Sie es ändern.

Auswählen einer nicht verknüpften Grafik innerhalb einer dynamische Komponente

), um zurück

ADOBE GOLIVE 5.0 Classroom in a Book

Um die Verknüpfung erzeugen zu können, müssen Sie die dynamische Komponente öffnen und die Verknüpfung dieser Datei zuweisen. Das werden Sie im Laufe der nächsten Schritte tun. Dynamische Komponenten ermöglichen Ihnen das einfache Verwalten von sich wiederholenden Inhalten wie Überschriften, Fußnoten und anderen wiederkehrenden Designelementen, indem sie in eine einzige Datei aufgenommen werden, statt sie tatsächlich überall dort einzufügen, wo sie erscheinen sollen. (Eine Anleitung zum Erzeugen einer Komponente erhalten Sie im Abschnitt Erzeugen einer dynamischen Komponente auf Seite 99.) Sie werden der Komponente die Verknüpfung hinzufügen, damit alle Änderungen, die Sie später an der Verknüpfung vornehmen, automatisch auf der gesamten Website aktualisiert werden. 5

Öffnen Sie die Datei Navbar.html, indem Sie eine der folgenden Möglichkeiten wählen:

• Doppelklicken Sie auf die Navbar-Komponente im Dokumentfenster. • Wählen Sie Datei: Öffnen und öffnen Sie die Datei im Pfad Lesson05/05Start/Gage Folder/Gage.data/Komponenten/Navbar.html. • Klicken Sie auf das Symbol unten rechts im Site-Fenster, um den Inhalt der Website anzuzeigen. Im rechten Teil des erweiterten Site-Fensters wird in der Registerkarte »Extras« der Ordner Gage.data der Site mit seinem Inhalt angezeigt. Die Datei Navbar.html befindet sich im Ordner Komponenten.

Erweitertes Site-Fenster

167

168 LEKTION 5 Verknüpfungen

Wenn in Ihre Seiten eine dynamische Komponente eingebettet ist, können Sie sie ganz einfach bearbeiten, indem Sie die Quelldatei bearbeiten (in diesem Fall enthält die HTML-Seite lediglich die Kopfleiste) und dann Adobe GoLive alle Seiten aktualisieren lassen. 6

Falls der Inspektor nicht bereits geöffnet ist, wählen Sie Fenster: Inspektor, um ihn aufzurufen.

7

Klicken Sie im Dokumentfenster auf die Grafik Items in Stock, um sie auszuwählen. Dadurch wird der Bild-Inspektor aktiviert.

8

Klicken Sie im Bild-Inspektor auf den Reiter »Link«. Mit Hilfe dieser Palette können Sie Verknüpfungen festlegen.

Auswählen einer Grafik innerhalb einer dynamischen Komponente

Registerkarte »Link« im Bild-Inspektor

Sie können eine neue Verknüpfung auch erzeugen, indem Sie in der Werkzeugleiste auf die Schaltfläche »Neuer Link« klicken; Sie werden später in dieser Lektion so vorgehen. Sie werden Ihre erste Verknüpfung erzeugen, indem Sie mit Hilfe der Schaltfläche »Point & Shoot« im Bild-Inspektor eine Datei im Site-Fenster verknüpfen. 9

Ordnen Sie, falls nötig, das Dokumentfenster, das Site-Fenster und den BildInspektor so an, dass Sie sie alle auf Ihrem Bildschirm gleich gut sehen können.

ADOBE GOLIVE 5.0 Classroom in a Book

10 Klicken Sie in der Registerkarte »Link« des Bild-Inspektors auf die Schaltfläche »Neuer Link« ( ) oder drücken Sie die Tasten Strg+L (Windows) bzw. Befehl+L (Mac OS). Ziehen Sie anschließend von der Schaltfläche »Point & Shoot« ( ) auf die Datei Stock.html im Ordner Pages im Site-Fenster. Falls die Datei Stock.html nicht zu sehen ist, platzieren Sie den Mauszeiger auf dem Dreieck links vom Ordner Pages, bis er sich öffnet, und ziehen Sie dann mit der Maus auf die nun sichtbare Datei Stock.html, um sie auszuwählen.

Verwenden der Schaltfläche »Point & Shoot«, um das Bild Items in Stock mit der Datei Stock.html zu verknüpfen

Der Name und der Verzeichnispfad der Datei erscheint im Textfeld »URL« im Bild-Inspektor. Sie haben soeben Ihre erste Verknüpfung erzeugt. (Falls die Verknüpfung nicht erstellt werden kann, springt die angezeigte Verbindungslinie wieder auf die Schaltfläche »Point & Shoot« zurück, ohne dass ein Verzeichnispfad im Textfeld »URL« erscheint.)

169

170 LEKTION 5 Verknüpfungen

11 Klicken Sie auf den Reiter »Allgemein« im Bild-Inspektor. Geben Sie im Textfeld »Ersatztext« den Text Items In Stock ein und drücken Sie die Eingabetaste. Der Ersatztext erscheint im Browser, wenn er das Bild nicht darstellen kann. 12 Wählen Sie Datei: Speichern, um die Datei Navbar.html zu speichern. Wenn Sie im anschließend aufgerufenen Dialogfeld aufgefordert werden, die Dateien zu aktualisieren, die die Komponente verwenden, klicken Sie auf OK. Schließen Sie die Datei Navbar.html. Jetzt werden Sie die Verknüpfung ausprobieren, um sicherzustellen, dass sie erwartungsgemäß funktioniert.

Überprüfen einer Verknüpfung Sie können Ihre Verknüpfungen mit Hilfe der Registerkarte »Vorschau« im Dokumentfenster testen. 1

Gehen Sie zurück auf die Homepage, indem Sie auf die Seite Index.html klicken, um sie zu aktivieren.

2

Klicken Sie auf den Reiter »Vorschau« ( ) und klicken Sie anschließend auf die Grafik Items In Stock. Die Datei Stock.html wird in einem eigenen Dokumentfenster geöffnet.

Auf die verknüpfte Grafik klicken

Ergebnis

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen von Ankern In diesem Abschnitt werden Sie eine Verknüpfung von einem Element einer Aufzählung auf den entsprechenden Abschnitt weiter unten auf derselben Seite erzeugen. Anker dienen als Zielverweise auf Bereiche innerhalb derselben Seite. Auf diese Weise können Anwender zur gewünschten Information gelangen, ohne die Rollbalken der Seite verwenden zu müssen. Dafür können Sie eine einzelne oder mehrere Verknüpfungen erzeugen, die auf einen einzelnen Anker weisen. Sie werden jetzt mit der Stock-Seite arbeiten und ihr Verknüpfungen hinzufügen. Sie beginnen, indem Sie eine Verknüpfung von einem der Listenelemente auf einen Anker in einem Thema weiter unten auf der Seite erstellen. Dazu werden Sie mit der »Point & Shoot«-Methode arbeiten, mit der sich der Anker gleichzeitig mit der Verknüpfung auf den Anker erzeugen lässt. 1

Falls nötig, klicken Sie auf das Dokumentfenster Stock.html, um es zu aktivieren. Sie haben die Datei bereits geöffnet, als Sie die von Ihnen vorher erzeugte Verknüpfung ausprobiert haben.

Diese Textdatei beschreibt die Produktlinie der Firma Gage Vintage Guitar. Sie besteht aus akustischen und elektrischen Gitarren, Verstärkern, Pedalen und weiterem Zubehör. 2

Führen Sie mit der Einfügemarke einen Dreifachklick auf das zweite Element der Elementaufzählung Electric Guitars aus, um diese Zeile auszuwählen. Sie werden eine Verknüpfung von diesem Element auf einen Anker erzeugen, den Sie beim entsprechenden Thema weiter unten auf der Seite (im Abschnitt »Electric Guitars«) platzieren werden.

Am besten platziert man Anker im HTML-Textfluss, in einem Layout-Textrahmen oder in einer Tabelle. (Sie können dem Layout-Raster einen kleinen Layout-Textrahmen hinzufügen, um den Anker aufzunehmen.) Einheitlichere Ergebnisse erzielen Sie, indem Sie den Anker nahe an den linken Rand platzieren. Sie können nicht unmittelbar mit einer Grafik verankern, da HTML diese Möglichkeit bisher nicht unterstützt; platzieren Sie den Anker stattdessen oben links nahe an der Grafik.

171

172 LEKTION 5 Verknüpfungen

3

Halten Sie die Alt-Taste (Windows) bzw. die Befehlstaste (Mac OS) gedrückt und ziehen Sie mit gedrückter Maustaste vom ausgewählten Text nach unten links neben die Überschrift »Electric Guitars«, ohne dabei die Maustaste loszulassen. Beim Ziehen erscheint eine flexible Linie in Ihrem Dokument und ein zusätzliches kleines Symbol (eine kurze vertikale Linie) folgt dem Mauszeiger. Um durch das Dokument zu scrollen, ziehen Sie mit gedrückter Maustaste zum unteren Rand des Dokumentfensters und halten sie auch dann weiter gedrückt, wenn das Fenster mit dem Scrollen beginnt.

Nachdem Sie die Maustaste an der gewünschten Position losgelassen haben, springt das Dokumentfenster wieder zurück auf den ursprünglichen Verknüpfungspunkt (das Element »Electric Guitar« in der Elementeliste). Im Textfeld »URL« in der Registerkarte »Link« im Text-Inspektor wird der eindeutige Name des neuen Ankers angezeigt. Scrollen Sie im Fenster nach unten zur Überschrift »Electric Guitars«, um das Ankersymbol zu betrachten, das unmittelbar daneben eingefügt wurde.

Alt/Befehl-Ziehen vom Element der Aufzählung; Anker auf die Überschrift Electric Guitars setzen

Die »Point & Shoot«-Methode ist der einfachste Weg, einen Anker zu erzeugen. Als Nächstes werden Sie dafür die Objekte-Palette verwenden.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Klicken Sie in der Objekte-Palette auf den Reiter »Allgemein« ( ). Ziehen Sie anschließend den Platzhalter »Anker« aus der Palette auf den Abschnitt Guitar Amplifiers in der Seite Stock.html. Platzieren Sie den Anker links von der Überschrift.

Ziehen des Anker-Platzhalters aus der Objekte-Palette auf einen Text im Dokumentfenster

5

Geben Sie im Anker-Inspektor einen aussagekräftigen Namen ein (wir haben Amps gewählt). Das Benennen von Ankern erleichtert Ihnen das Aktualisieren sowie Auffinden und Korrigieren von unterbrochenen Verknüpfungen beim Verwalten Ihrer Website.

6

Scrollen Sie im Dokumentfenster nach oben zur Elementeliste und dreifachklicken Sie auf Guitar Amplifiers, um diesen Text auszuwählen

7

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link«. Ziehen Sie von der Schaltfläche »Point & Shoot« auf den Anker Amps, den Sie soeben eingefügt haben.

Nun haben Sie eine Verknüpfung zwischen dem Listenelement und dem Thema weiter unten in der Seite erstellt. Der Name des Ankers (Amps) erscheint im Textfeld »URL« im Text-Inspektor (Ankernamen geht immer ein Rautesymbol »#« voraus).

173

174 LEKTION 5 Verknüpfungen

8

Wählen Sie Datei: Speichern, um Ihre Datei zu speichern.

Überprüfen von Ankern Sie haben Verknüpfungen bereits mit Hilfe der Vorschauansicht in Adobe GoLive ausprobiert. Außerdem können Sie nachsehen, wie Verknüpfungen und Anker in einem Webbrowser funktionieren, indem Sie die Datei in einem Browser öffnen und dort die Verknüpfungen testen. Sie werden jetzt die gerade von Ihnen erzeugten Anker in einer Vorschau betrachten. 1

Klicken Sie oben rechts in der Werkzeugleiste auf die Schaltfläche »Im Browser anzeigen«. Das Dokument wird in dem Webbrowser aufgerufen, den Sie im Dialogfeld »Voreinstellungen« festgelegt haben.

Schaltfläche »Im Browser anzeigen«

2

Klicken Sie auf die Elemente in der Aufzählung, um zu sehen, wie die Verknüpfungen auf die entsprechenden Überschriften im Dokument springen.

3

Wenn Sie mit der Vorschau fertig sind, schließen oder beenden Sie Ihren Browser. Klicken Sie anschließend in das Dokumentfenster, um zurück in die Datei Stock.html zu gelangen.

4

Schließen Sie alle geöffneten Dateien außer den Dateien Stock.html und Gage.site.

Erzeugen von Hypertext-Verknüpfungen Sie werden nun ein paar Hypertext-Verknüpfungen erzeugen. Sie werden auf der Stock-Seite Text auswählen und ihn mit einer anderen Seite verknüpfen. Die Methode ähnelt der, eine Grafik-Verknüpfung oder einen Anker zu erzeugen. 1

Scrollen Sie im Dokumentfenster Stock.html auf der Seite ganz nach unten. Sie werden nun Hypertext-Verknüpfungen von der letzten Zeile des Dokuments Home | Stock | Appraisals | Repairs erzeugen.

2

Doppelklicken Sie auf das Wort Home, um es auszuwählen. Der Inspektor ändert sich in den Text-Inspektor.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link« ( ) oder drücken Sie die Tasten Strg+L (Windows) bzw. Befehl+L (Mac OS).

Sie werden Ihre erste Hypertext-Verknüpfung mit Hilfe der Schaltfläche »Point & Shoot« im Text-Inspektor erzeugen, um mit einer Datei im Site-Fenster zu verknüpfen. 4

Ziehen Sie im Text-Inspektor von der Schaltfläche »Point & Shoot« ( die Datei Index.html im Site-Fenster.

) auf

Erzeugen einer Verknüpfung vom Text Home auf die Datei Index.html mit Hilfe von »Point & Shoot«

Falls die Datei Index.html nicht zu sehen ist, platzieren Sie den Zeiger auf dem Symbol rechts vom Ordnernamen Gage, bis der Ordner Gage sich öffnet; ziehen Sie dann auf die Datei Index.html und lassen Sie die Maustaste los. 5

Falls Sie dabei einen Fehler gemacht haben, wählen Sie den Text Home im Dokumentfenster aus und klicken in der Werkzeugleiste auf die Schaltfläche »Link entfernen« ( ). Wiederholen Sie anschließend die Schritte 3 und 4, um die Verknüpfung zu erzeugen.

Sie können die Schaltfläche »Link entfernen« auch verwenden, um die Verknüpfungen mit Grafiken zu entfernen.

175

176 LEKTION 5 Verknüpfungen

Nun werden Sie einen Hypertext-Link auf eine andere Datei der Website erzeugen, indem Sie die Schaltfläche »Durchsuchen« des Inspektors verwenden, um eine Datei zu suchen. 6

Wählen Sie den Text Appraisals aus. Klicken Sie anschließend in der Werkzeugleiste auf die Schaltfläche »Neuer Link« ( ).

7

Klicken Sie im Text-Inspektor auf die Schaltfläche »Durchsuchen« ( ), suchen Sie die Datei Appraise.html, wählen Sie sie aus und klicken Sie auf »Öffnen«. Der Pfad lautet Lesson05/05Start/Gage folder/Gage/Pages/Appraise.html.

Eine andere Möglichkeit, Verknüpfungen im Inspektor festzulegen, ist, den vollständigen Pfadnamen der Datei in das Textfeld »URL« einzugeben. Sie werden jetzt die letzte Hypertext-Verknüpfung erzeugen. 8

Wählen Sie im Dokumentfenster den Text Repairs aus. Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Neuer Link« ( ). Geben Sie in der Registerkarte »Link« des Text-Inspektors den relativen Pfadnamen in das Textfeld »URL« ein: Repairs.html. (In diesem Fall ist kein Pfad nötig, weil sich die Datei Repairs.html im selben Verzeichnis wie Stock.html befindet.)

Wenn Sie die Zieldatei über die Auswahl oder durch Eingabe des URL angeben, reicht es aus, nur den relativen Pfad anzugeben (wobei der Ordnername der Website impliziert, d.h. vorausgesetzt wird). Absolute URLs beinhalten den vollständigen Pfadnamen einer Datei einschließlich Name des Website-Ordners. Relative URLs beinhalten nicht den vollständigen Pfadnamen und können sich auf eine Datei in einem Unterordner des Ordners beziehen, von dem aus die Verknüpfung ausgeht. Adobe GoLive »merkt« sich per Voreinstellung den WebsiteOrdner, so dass Sie ihn nicht mit in dem URL angeben müssen. 9

Wählen Sie Datei: Speichern, um die Datei Stock.html zu speichern.

10

Um eine Vorschau der Verknüpfungen zu erhalten, die Sie gerade erzeugt haben, klicken Sie auf den Reiter »Vorschau«. Klicken Sie in der Vorschauansicht auf die Verknüpfungen Home, Appraisals und Repairs, um sie zu testen. Jede Datei wird in einem eigenen Fenster geöffnet.

ADOBE GOLIVE 5.0 Classroom in a Book

Sie können diese Verknüpfungen auch in Ihrem Browser ausprobieren, indem Sie in der Werkzeugleiste auf die Schaltfläche »Im Browser anzeigen« klicken und anschließend auf eine Verknüpfung klicken, um sie zu testen. (Wenn Sie die Verknüpfungen richtig verbunden haben, erscheinen die entsprechenden Informationen im Dokumentfenster. Wenn nicht, wird im Browser eine Fehlermeldung angezeigt.) 11

Schließen Sie alle geöffneten Dateien außer Stock.html und Gage.site. Klicken Sie anschließend im Dokumentfenster der Datei Stock.html auf den Reiter »Layout-Editor« ( ), um zurück in die Layout-Ansicht zu gelangen.

Erzeugen externer Verknüpfungen Bisher haben die von Ihnen erzeugten Verknüpfungen innerhalb einer Seite (mit Ankern) oder auf Seiten Ihrer Website verwiesen. Sie können allerdings auch Verknüpfungen von Ihrer Website auf andere Sites im Web erstellen. Dazu werden Sie eine Verknüpfung auf einen externen URL erzeugen. Zuerst müssen Sie den in der Registerkarte »Extern« des Site-Fensters zu verwendenden URL speichern. Diese Registerkarte eignet sich zum Speichern von Informationen, die Sie auf mehr als einer Position Ihrer Website verwenden möchten. Wenn Sie später ein Element der Registerkarte »Extern« aktualisieren müssen, wird es automatisch überall dort auf der Website aktualisiert, wo es erscheint. 1

Klicken Sie im Site-Fenster auf die Registerkarte »Extern«.

177

178 LEKTION 5 Verknüpfungen

Wissenwertes über absolute Link-Pfade Website-Seiten enthalten Pfade zu verschiedenen, über Links verknüpfte Dateien: zu anderen Seiten in der Website (), zu auf der Seite angezeigten Bildern (), zu in der Seite eingebetteten Medienobjekten () usw. Wenn Sie einen Pfad als absolut festlegen, wird der gesamte Pfad vom Stammordner zur verknüpften Seite angegeben. Andernfalls wird er nur als relativer Pfad angegeben. Beispiel Die Seite /root/pages/info/page.html (wobei root der Name des Stammordners ist) enthält das Bild /root/images/image.gif. Der absolute Pfad zur Bilddatei lautet /images/image.gif. Die relative Pfadangabe lautet ../../images/image.gif. Absolute Pfade sind in den folgenden Fällen empfehlenswert: • Wenn ein Formular ein CGI-Skript auf der Stamm-Ebene des Website-Verzeichnisses (oder eines anderen Unterverzeichnisses) referenziert, sind Referenzen auf diese Datei in der Regel absolute Referenzen. • Wenn eine gemeinsame Navigationsleiste auf mehreren Seiten verwendet wird, die sich in Ordnern auf verschiedenen Hierarchieebenen befinden, können Sie durchgängig eine absolute Pfadangabe verwenden, um die zugehörigen Bilddateien zu referenzieren. Auf diese Weise können Sie denselben HTML-Auszug durch Kopieren und Einfügen auf allen Seiten platzieren. Absolute Pfade funktionieren jedoch nur auf Websites, bei denen ein Webserver Informationen über den Speicherort des Website-Stammordners liefert. Aus diesem Grund verhindert die Verwendung von absoluten Pfaden, dass eine Vorschau der Seiten in einem Webbrowser angezeigt werden kann, da ein Vorschau-Browser den Speicherort dieses Stammordners nicht kennt. Hinweis: Ein absoluter Pfad in Adobe GoLive ist kein vollständiger Pfad vom Dateisystem-Stamm oder vollqualifizierter URL. Einrichten von absoluten Link-Pfaden Sie können für alle neuen Links oder für bestimmte Links absolute Pfade festlegen. So machen Sie aus allen neuen Link-Pfaden absolute Pfade: 1. Wählen Sie Bearbeiten: Voreinstellungen, erweitern Sie »Allgemein« und klicken Sie im linken

Fensterbereich auf »URL-Verwaltung«. 2. Aktivieren Sie die Option »Neue Links absolut anlegen«. 3. Klicken Sie auf OK.

So machen Sie aus einem bestimmten Link einen absoluten Pfad: 1. Öffnen Sie die Seite, die den Link oder die Referenz enthält, in einem Dokumentfenster. 2. Zeigen Sie den Inspektor an. 3. Wählen Sie den Link aus. 4. Klicken Sie auf die Schaltfläche »Absolute Links« (

), die sich im betreffenden Inspektor oder Dialogfeld rechts vom Textfeld »Quelle« bzw. »URL« befindet, z.B. in der Registerkarte »Allgemein« des Bild-Inspektors oder auf der Registerkarte »Link« des Text-Inspektors.

Aus dem Adobe GoLive 5.0 Handbuch, Kapitel 17

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie in der Objekte-Palette auf die Registerkarte »Website«. Diese Registerkarte enthält Elemente für Websites, wie beispielsweise Seiten, URLs und E-Mail-Adressen. Ziehen Sie den Platzhalter »URL« aus der Palette auf das Site-Fenster.

Ein neuer unbenannter URL-Eintrag wird der Registerkarte »Extern« hinzugefügt und der Inspektor ändert sich in den Referenzen-Inspektor (unter Mac OS müssen Sie noch auf den Inspektor klicken, damit er sich ändert). Für diese Übung werden Sie eine externe Verknüpfung mit der Adobe-Homepage erzeugen. 3

Geben Sie dem URL einen Namen und benutzen Sie dazu das Textfeld »Name« entweder in der Registerkarte »Extern« oder im ReferenzenInspektor. (Dieser Name dient nur der Referenz und soll Ihnen dabei behilflich sein, den Überblick über die gespeicherten URLs zu behalten.)

4

Ändern Sie im Textfeld »URL« im Referenzen-Inspektor den Text »URL« in den korrekten Text des URL, mit der Sie verknüpfen möchten. Für die AdobeHomepage ändern Sie den Text http://www.untitled.1/ in den Text http://www.adobe.com. Achten Sie darauf, am Anfang des URL den Text http:// zu belassen.

179

180 LEKTION 5 Verknüpfungen

5

Drücken Sie die Eingabetaste. In der Registerkarte »Extern« wird der URL aktualisiert.

Hinweis: Der Registerkarte »Extern« lassen sich auch URLs hinzufügen, indem Sie sie aus einem geöffneten Webbrowser auf die Registerkarte ziehen. Weitere Informationen finden Sie unter Verwenden von Website-URLs und E-Mail-Adressen auf Seite 415 im Adobe GoLive 5.0 Handbuch. Nachdem der Registerkarte »Extern« nun der URL hinzugefügt wurde, werden Sie eine Verknüpfung vom Text der Seite Appraise.html mit ihm herstellen. 6

Klicken Sie im Site-Fenster auf den Reiter »Dateien«; doppelklicken Sie anschließend im Site-Fenster auf die Seite Appraise.html, um sie zu öffnen.

7

Suchen Sie den Text Classic Guitar am Ende des zweiten Textabsatzes und überstreichen Sie ihn mit gedrückter Maustaste, um ihn auszuwählen.

8

Klicken Sie in der Registerkarte »Link« des Text-Inspektors auf die Schaltfläche »Neuer Link« ( ).

9

Ziehen Sie von der Schaltfläche »Point & Shoot« auf den Adobe-URL in der Registerkarte »Extern« im Site-Fenster.

10 11

Wählen Sie Datei: Speichern, um die Datei Appraise.html zu sichern. Um eine Vorschau der soeben erzeugten Verknüpfung betrachten zu können, klicken Sie in der Werkzeugleiste auf die Schaltfläche »Im Browser anzeigen«. Klicken Sie dann auf die Verknüpfung »Classic Guitar«. Im Browser-Fenster wird die Seite Appraise.html durch die externe Website (in unserem Beispiel www.adobe.com) ersetzt.

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen von E-Mail-Verknüpfungen Jetzt werden Sie der Seite Appraise.html eine Verknüpfung hinzufügen, die ein E-Mail-Fenster mit einer vorbereiteten E-Mail-Adresse darin aufruft. E-MailAdressen lassen sich wie URLs in der Registerkarte »Extern« speichern. 1

Klicken Sie im Site-Fenster auf die Registerkarte »Extern«.

2

Klicken Sie in der Objekte-Palette auf den Reiter »Website« ( ).

3

Ziehen Sie den Platzhalter »Adresse« aus der Palette auf das Site-Fenster.

4

Doppelklicken Sie auf den Adressenplatzhalter im Site-Fenster, um den Inspektor in den Referenzen-Inspektor zu ändern. (Unter Windows ändert sich der Inspektor automatisch, nachdem Sie den Platzhalter auf das SiteFenster gezogen haben.)

5

Geben Sie im Textfeld »Name« des Referenzen-Inspektors einen Namen für die Adresse ein. Sie können den Namen »unbenannte Adresse« beispielsweise in »Annes Adresse« umbenennen. Obwohl es nicht erforderlich ist, kann das Eingeben von Namen in dieses Feld Ihnen das Verwalten der Adressen einer Website erleichtern.

6

Ändern Sie im Textfeld »URL« den Text nach »mailto:« in eine echte E-MailAdresse. Ändern Sie hier beispielsweise »mailto:unbenannt@1/« in »mailto:[email protected]«. Achten Sie darauf, dass Sie »mailto:« im Textfeld belassen und dass sich keine Leerzeichen zwischen »mailto:« und der E-Mail-Adresse befinden.

7

Wählen Sie am Ende der Liste mit Abkürzungen unten auf der Seite Appraise.html den Text »e-mail us« aus.

181

182 LEKTION 5 Verknüpfungen

8

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link« (

).

Die Verknüpfung wird hervorgehoben und unterstrichen. Jetzt können Sie diesen Text der soeben erzeugten E-Mail-Adresse als Verknüpfung zuweisen. 9

Ziehen Sie im Text-Inspektor von der Schaltfläche »Point & Shoot« ( den Platzhalter »Adresse« im Site-Fenster.

) auf

10 Wählen Sie Datei: Speichern. 11 Wählen Sie in der Werkzeugleiste aus dem Menü »Im Browser anzeigen« ( ) einen Browser aus. Klicken Sie dann im Browser in der angezeigten Seite Appraise.html auf die E-Mail-Verknüpfung und lassen Sie so einen E-Mail-Editor aufrufen. 12 Schließen Sie sowohl Ihren Browser als auch die Seite Appraise.html in Adobe GoLive.

Ändern der Farbe und der Hervorhebung einer Verknüpfung Nachdem Sie nun einige Verknüpfungen erzeugt haben, werden Sie sehen, wie einfach es ist, ihre Farbe zu ändern. Um die Farbe und die Hervorhebung einer Verknüpfung zu ändern, benutzen Sie den Seiten-Inspektor. 1

Klicken Sie im Dokumentfenster Stock.html oben links auf das Symbol »Seite« ( ). Der Inspektor ändert sich in den Seiten-Inspektor.

Klicken auf das Seite-Symbol, um den Seiten-Inspektor aufzurufen

ADOBE GOLIVE 5.0 Classroom in a Book

2

Falls die Farben-Palette nicht bereits geöffnet ist, klicken Sie auf das Farbfeld der Option »Link« im Seiten-Inspektor, um die Farben-Palette aufzurufen. Klicken Sie in der Farben-Palette auf die Schaltfläche »Webfarbenliste« ( ). Mit Hilfe dieser Schaltfläche können Sie Web-sichere Farben auswählen, um über Plattform- und Browser-Grenzen hinweg einheitliche Farben zu erhalten.

3

Wählen Sie in der Farben-Palette durch Klicken auf ein Farbfeld oder Eingeben eines Wertes eine andere Farbe aus. Die gewählte Farbe sollte einen ausreichenden Kontrast zum Hintergrund der Seite und der normalen Textfarbe bieten, so dass sie auffällt, aber nicht so sehr, dass sie den Betrachter stört oder ablenkt (wir haben den Wert 006600 verwendet). Durch Ausprobieren unterschiedlicher Farben können Sie die Auswirkung auf die Verknüpfungen unten in der Seite Stock.html betrachten.

Auf Farbfeld »Verknüpfung« klicken

4

Farbe aus der Farben-Palette auswählen

Wiederholen Sie die Schritte 2 und 3 für die Farbfelder der Optionen »Aktiver Link« und »Besuchter Link«, wobei Sie die Felder der Reihe nach auswählen. (Wir haben für die aktive Verknüpfung den Wert 6600FF und für die besuchte Verknüpfung den Wert FF3300 verwendet.)

Beim Auswählen der Farbe für besuchte Verknüpfungen ist es für den Betrachter hilfreich, wenn Sie eine Komplementärfarbe wählen. Wenn beispielsweise die Farbe der Verknüpfung Rot ist, könnten Sie Grün als Farbe der benutzten Verknüpfung wählen.

183

184 LEKTION 5 Verknüpfungen

5

Wählen Sie Datei: Speichern, um Ihre Arbeit zu sichern.

6

Um eine Vorschau der Verknüpfungsfarben und der Veränderungen beim Anklicken betrachten zu können, klicken Sie oben rechts in der Werkzeugleiste auf die Schaltfläche »Im Browser anzeigen«. Das Dokument wird in Ihrem Webbrowser aufgerufen.

7

Scrollen Sie im Browser an das Ende des Dokuments und klicken Sie auf die Verknüpfung Appraisals, um sie zu testen. Sie werden feststellen, dass sich die Farbe ändert, wenn Sie auf die Verknüpfung klicken (die Farbe für »Aktiver Link«) und nachdem Sie darauf geklickt haben (die Farbe für »Besuchter Link«).

Hinweis: Manche Browser können die von Ihnen festgelegten Farben je nach ihren Voreinstellungen möglicherweise nicht darstellen. 8

Wenn Sie mit dem Testen der Verknüpfungen fertig sind, schließen oder beenden Sie Ihren Browser.

9

Klicken Sie auf das Dokumentfenster der Datei Stock.html, um zurück zu Adobe GoLive zu gelangen.

Erzeugen einer Aktion Sie können Aktionen an Verknüpfungen anfügen und auf diese Weise ihre Interaktivität steigern. Verwenden Sie beispielsweise Aktionen, die beim Klicken auf eine Verknüpfung ein zweites Fenster öffnen. Oder Sie fügen einer Verknüpfung eine Aktion hinzu, die Informationen ein- oder ausblendet, wenn der Betrachter mit dem Mauszeiger auf die Verknüpfung zeigt. Außerdem können Sie einer Verknüpfung eine E-Mail-Aktion hinzufügen, die es dem Betrachter ermöglicht, Kommentare zu senden. Weitere Informationen finden Sie in Kapitel 9, »Verwenden von Aktionen und JavaScript«. Sie werden jetzt den Text Custom Acoustic Guitar auf der Stock-Seite mit einer Seite verknüpfen, die ein Gitarrenbild enthält. Danach werden Sie der Verknüpfung eine Aktion hinzufügen, die ein zweites Fenster mit dem Bild in einer festgelegten Größe öffnet.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Wählen Sie den Text 1927 Martin 0-28K im ersten Absatz des Abschnitts Acoustic Guitar in der Stock.html-Seite aus.

Bedenken Sie, dass Text, der als Verknüpfung verwendet werden soll, kurz und anschaulich sein soll. Versuchen Sie, den Text auf höchstens fünf Wörter zu beschränken, so dass er die Aufmerksamkeit des Betrachters ohne größere Anstrengung erlangt. Falls Sie versehentlich zu viel Text für eine Verknüpfung ausgewählt haben sollten, können Sie die Verknüpfung des unwesentlichen Teils des Textes mit Hilfe der Schaltfläche »Link entfernen« wieder lösen. 2

Klicken Sie in der Registerkarte »Link« im Text-Inspektor auf die Schaltfläche »Neuer Link« ( ).

3

Wählen Sie Fenster: Aktion, um die Aktionen-Palette zu öffnen.

4

Wählen Sie im Fensterbereich »Ereignis« den Eintrag »Mausklick«. Klicken Sie anschließend über dem Fensterbereich »Aktion« auf die Schaltfläche »Neue Aktion« ( ), um das Popup-Menü »Action« zu aktivieren.

5

Wählen Sie im Popup-Menü Link: Neues Fenster.

6

Klicken Sie neben dem Textfeld »Link« auf die Schaltfläche »Durchsuchen« und suchen Sie nach der Datei Martin.html im Ordnerpfad Gage/Pages. Klicken Sie anschließend auf »Öffnen«.

185

186 LEKTION 5 Verknüpfungen

7

Geben Sie in das erste Textfeld »Größe« den Wert 170 ein und in das zweite Textfeld »Größe« den Wert 325. Schalten Sie die Kontrollkästchen hinter »Skalierbar«, »Bildlauf«, »Menüs« und »Werkzeuge« aus. Das zweite Fenster soll in manchen Browsern weder in der Größe einstellbar sein, noch rollbar sein oder Menüs besitzen und auch keine Werkzeugleiste darstellen.

8

Wählen Sie Datei: Speichern, um die Datei zu sichern.

ADOBE GOLIVE 5.0 Classroom in a Book

9

Klicken Sie auf die Schaltfläche »Im Browser anzeigen«, um die Datei Stock.html zu betrachten, klicken Sie anschließend auf den Text 1927 Martin 0-28K, um die Aktion auszuprobieren. Schließen Sie danach Ihren Browser.

Vorschau der Aktion Neues Fenster

10

Schließen Sie die Dateien Martin.html und Stock.html.

Verwenden von Imagemaps Imagemaps sind Bilder mit Hotspots (Bereiche, die sich mit der Maus anklicken lassen). Sie können Imagemaps mit anderen Vorgängen verknüpfen und die Hotspot-Bereiche der Imagemaps mit weiteren scriptfähigen Aktionen wie beispielsweise Formularen oder E-Mail-Adressen verbinden. Jetzt sind Sie bereit, an der letzten Seite Ihrer Website zu arbeiten. Sie werden dem Bild einer Gitarre eine Imagemap hinzufügen und die Hotspot-Bereiche der Imagemap mit anderen Seiten verknüpfen. Sie beginnen damit, die Seite zu öffnen, in der Sie die Imagemap erzeugen werden.

187

188 LEKTION 5 Verknüpfungen

1

Doppelklicken Sie im Site-Fenster auf die Datei Repairs.html im Ordnerpfad Gage/Pages, um die Datei zu öffnen.

2

Ziehen Sie aus der Registerkarte »Allgemein« in der Objekte-Palette den Platzhalter »Bild« ( ) in das Dokumentfenster, so dass der Platzhalter unterhalb der Navigationsleisten-Komponente zentriert wird. Es ist nicht nötig, die Größe des Platzhalters zu ändern, da er sich automatisch dem einzufügenden Bild anpasst.

3

Klicken Sie auf den Reiter »Allgemein« im Bild-Inspektor, falls nötig.

4

Fügen Sie das Bild Map.gif aus dem Ordnerpfad Gage/Images ein, indem Sie eine der folgenden Methoden anwenden:

• Ziehen Sie von der Schaltfläche »Point & Shoot« ( ) auf die Datei Map.gif im Ordnerpfad Gage/Images im Site-Fenster.

ADOBE GOLIVE 5.0 Classroom in a Book

• Klicken Sie auf die Schaltfläche »Durchsuchen«, suchen Sie die Datei Map.gif im Ordnerpfad Gage/Images und klicken Sie auf »Öffnen«.

5

Falls nötig, ziehen Sie das Bild, um es unterhalb der NavigationsleistenKomponente auszurichten.

Erzeugen von Hotspot-Bereichen auf einer Imagemap Sie werden nun das Gitarrenbild benutzen, um bestimmte Reparaturen zu zeigen, die an Gitarren vorgenommen werden können. Zuerst werden Sie auf der Gitarre Hotspot-Bereiche für die Reparaturmöglichkeiten anlegen. Danach werden Sie Verknüpfungen von den Hotspot-Bereichen auf Informationen über die entsprechenden Reparaturwerkstätten erzeugen. 1

Geben Sie in der Registerkarte »Allgemein« in das Textfeld »Ersatztext« im Bild-Inspektor den Text Repair map ein. Dies ist der Ersatztext, der im Browser dargestellt wird, wenn das Bild nicht angezeigt werden kann.

189

190 LEKTION 5 Verknüpfungen

2

Klicken Sie im Bild-Inspektor auf den Reiter »Weitere«. Schalten Sie dort die Option »Imagemap« ein. Damit können Sie einem Bild eine Imagemap hinzufügen und die Imagemap-Werkzeuge in der Werkzeugleiste aktivieren.

Mit Hilfe der Imagemap-Werkzeuge erzeugen Sie eine Imagemap. Sie enthalten Zeichenwerkzeuge zum Erstellen der Hotspot-Bereiche einer Imagemap. 3

Geben Sie rechts neben dem Kontrollkästchen »Imagemap« im BildInspektor in das Textfeld »Name« einen Namen für die Karte ein und hängen Sie die Dateinamenserweiterung .map an. (Wir haben die Karte Guitar.map genannt.)

A

Einschalten des Kontrollkästchens »Imagemap«

B

C

D

A. Bereich auswählen B. Bereichswerkzeuge C. Bereiche umrahmen D. Farbwahl

4

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Bereichswerkzeug Rechteck« ( ).

5

Ziehen Sie im Dokumentfenster einen Rechteckbereich auf, der den Gitarrenhals vollständig bedeckt. An den Seiten und Ecken des Hotspot-Bereichs erscheinen Anfasser, die Sie benutzen können, um den Hotspot-Bereich anzupassen. Sie können ihn aber auch einfach ziehen, um ihn genau auszurichten.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Bereichswerkzeug Kreis« ( ). Ziehen Sie im Dokumentfenster einen kreisförmigen HotspotBereich über dem Gitarrenkörper auf, der den rechteckigen Hotspot-Bereich etwas überlappt.

Hotspot-Zeichenwerkzeuge in der Werkzeugleiste; Rechteck- und Kreis-Hotspot-Bereiche überlappen sich

Bearbeiten von Hotspots Sie können Hotspot-Bereiche einer Bildkarte bearbeiten, um ihre Form, ihre Farbe oder ihre Umrahmung zu ändern, außerdem lassen sie sich neu ausrichten und in ihrer Überlappung ändern. Sie werden nun die Farbe und Position der HotspotBereiche ändern.

191

192 LEKTION 5 Verknüpfungen

1

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Farbwahl« (die achte Schaltfläche von links), um die Farben-Palette zu öffnen. Klicken Sie dort auf eine Farbe oder geben Sie einen Wert ein, um die Füllfarbe des Hotspots zu ändern. (Standard ist Blau.)

Klicken auf Schaltfläche »Farbwahl«

2

Farbe in der Farben-Palette wählen

Klicken Sie, wenn Sie möchten, in der Werkzeugleiste auf die Schaltfläche »Bereiche umrahmen« (die sechste Schaltfläche von links), um die Umrahmung des Hotspot-Bereichs einzuschalten.

Sie können das Überlappen von Hotspot-Bereichen ändern, wenn ein HotspotBereich im Vordergrund einen anderen dahinter verdeckt, indem Sie einen der Hotspot-Bereiche auswählen und entweder auf die Schaltfläche »Bereich nach vorne« oder »Bereich nach hinten« klicken. Sie werden stattdessen die Lage der Hotspot-Bereiche verändern, so dass sie sich nicht mehr überlappen. 3

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Bereichswerkzeug Auswahl« (die Schaltfläche ganz links). Klicken Sie im Dokumentfenster auf den rechteckigen Hotspot-Bereich, um ihn auszuwählen. Nun werden um den Hotspot-Bereich Anfasser angezeigt.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Ziehen Sie an den Anfassern des Hotspot-Bereiches, um ihn so auszurichten, dass er den kreisförmigen Hotspot-Bereich nicht mehr überlappt.

Ziehen der Anfasser, um Hotspot-Bereich auszurichten

Verknüpfen einer Imagemap mit einer Webseite Um eine Imagemap mit einer Webseite zu verknüpfen, verwenden Sie eine Methode, die der Methode zum Erstellen einer Hypertext-Verknüpfung ähnelt. 1

Wählen Sie den rechteckigen Hotspot-Bereich aus.

2

Verknüpfen Sie im Imagemap-Bereich-Inspektor den rechteckigen HotspotBereich mit der Datei Neck.html und verwenden Sie dafür eine der folgenden Methoden:

• Ziehen Sie von der Schaltfläche »Point & Shoot« ( ) auf die Datei Neck.html im Ordnerpfad Gage/Pages/Repair_Pages im Site-Fenster. • Klicken Sie auf die Schaltfläche »Durchsuchen«, suchen Sie die Datei Neck.html im Ordnerpfad Gage/Pages/Repair_Pages und klicken Sie auf »Öffnen«.

193

194 LEKTION 5 Verknüpfungen

• Geben Sie im Textfeld »URL« Repair_Pages/Neck.html ein und drücken Sie die Eingabetaste. (Sie können hier ruhig einen relativen Pfadnamen benutzen.)

Rechteckiger Hotspot-Bereich in der Datei Repair.html

Verknüpfung auf Neck.html im Imagemap-Bereich-Inspektor

3

Wiederholen Sie die Schritte 1 und 2 und verknüpfen Sie den kreisförmigen Hotspot-Bereich mit der Datei Body.html im Ordnerpfad Gage/Repair_Pages.

4

Wählen Sie Datei: Speichern, um die Datei Repair.html zu sichern.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Um die Hotspots zu überprüfen, klicken Sie im Dokumentfenster auf den Reiter »Layout-Vorschau« und klicken dort auf den Hotspot. Wenn Sie mit dem Betrachten in der Layout-Vorschau fertig sind, schließen Sie die Dateien Neck.html und Body.html.

Auf Hotspot-Bereich klicken

Ergebnis

6

Klicken Sie im Dokumentfenster Repairs.html auf den Reiter »Layout«, um wieder zurück in die Layout-Ansicht zu gelangen.

195

196 LEKTION 5 Verknüpfungen

Voreinstellungen für Link-Warnungen Adobe GoLive markiert unterbrochene Verknüpfungen auf Seiten mit entsprechenden Link-Warnungen. Sie können das Erscheinungsbild von Link-Warnungen steuern (einschließlich der Umrahmung, der Text- und Hintergrundfarbe und der Textfeldgröße). Die Standard-Farbe für unterbrochene Verknüpfungen ist Rot. 1

Wählen Sie Bearbeiten: Voreinstellungen.

2

Klicken Sie im linken Bereich des Dialogfensters »Voreinstellungen« auf das Dreieck links neben der Option »Allgemein«, um weitere Optionen anzuzeigen. Klicken Sie dann auf die Option »Benutzeroberfläche«.

3

Um eine andere Farbe für Verknüpfungswarnungen auszuwählen, klicken Sie auf das Farbfeld neben »Link-Warnung«. Das Farbauswahlfenster des Betriebssystems wird aufgerufen.

4

Wählen Sie eine Farbe aus und klicken Sie anschließend auf OK.

5

Wenn Sie die Umrahmung verändern möchten, die Link-Warnungen im Text und um Bilder umgibt, wählen Sie aus dem Popup-Menü »Rahmen« einen der Einträge aus. Klicken Sie auf OK.

6

Wählen Sie Datei: Speichern, um die Datei zu sichern, und schließen Sie die Datei Repairs.html.

Finden und Reparieren von fehlerhaften Verknüpfungen In dieser abschließenden Aufgabe der Lektion werden Sie einige fehlerhafte Verknüpfungen in Navbar.html, der Komponente auf der Seite Index.html reparieren. Fehlerhafte Verknüpfungen werden per Voreinstellung im Dokumentfenster und im Textfeld »URL« des Inspektors mit einem roten Rand gekennzeichnet. 1

Doppelklicken Sie in der Registerkarte »Extra« des Site-Fensters auf die Datei Navbar.html. Diese Datei enthält einige unterbrochene Verknüpfungen. (Sie können die Datei auch im Pfad Gage/Gage.data/Komponenten vom Desktop aus öffnen.)

2

Klicken Sie oben im Dokumentfenster der Datei Navbar.html auf den Reiter »LayoutEditor« ( ), um sie in der Layout-Ansicht darzustellen.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Link-Warnungen« ( ), um die Darstellung von Verknüpfungsfehlern einzuschalten, oder wählen Sie Bearbeiten: Link-Warnungen anzeigen.

Bilder mit fehlerhaften Verknüpfungen werden mit einem Rahmen in der von Ihnen im vorigen Abschnitt für Link-Warnungen gewählten Größe und Farbe dargestellt. 4

Wählen Sie das Bild Repairs im Dokumentfenster aus.

5

Klicken Sie im Bild-Inspektor auf den Reiter »Link«. Sie werden feststellen, dass die Verknüpfung durch die farbige Hervorhebung im Textfeld »URL« neben der Schaltfläche »Point & Shoot« als fehlerhaft gekennzeichnet wird.

Unterbrochener Link

6

Registerkarte »Link« im Bild-Inspektor

Reparieren Sie die Verknüpfung, indem Sie von der Schaltfläche »Point & Shoot« aus auf die korrekte Datei Repairs.html im Ordner Pages des SiteFensters ziehen.

Sie werden nun die Schritte 4 bis 6 wiederholen, um das Bild Appraisals mit der entsprechenden Datei zu verknüpfen. 7

Wählen Sie im Dokumentfenster das Bild Appraisals. Diese Verknüpfung wird in der Registerkarte »Link« des Bild-Inspektors ebenfalls als unterbrochen gekennzeichnet.

197

198 LEKTION 5 Verknüpfungen

8

Verknüpfen Sie jetzt dieses Bild erneut mit der Datei Appraise.html, indem Sie von der Schaltfläche »Point & Shoot« in der Registerkarte »Link« auf die Datei Appraise.html im Ordner Pages des Site-Fensters ziehen. Die Umrahmung für die Link-Warnung wird nach dem Aufheben der Auswahl des Bildes Appraisals verschwinden.

9

Wählen Sie Datei: Speichern, um die Datei zu sichern. Wenn Sie durch das entsprechende Dialogfenster dazu aufgefordert werden, die Dateien zu aktualisieren, klicken Sie auf OK.

Aktualisieren einer dynamischen Komponente

10

Schließen Sie die Datei Navbar.html.

Überprüfen von Verknüpfungen Als letzten Schritt sollten Sie sich vergewissern, dass alle Ihre Verknüpfungen so funktionieren, wie Sie erwarten, indem Sie sie in Ihrem Browser überprüfen. 1

Starten Sie Ihren Browser.

2

Suchen und öffnen Sie Ihre fertig gestellte Datei Index.html. Wählen Sie Datei: Öffnen. Wählen Sie die Datei Index.html im Ordnerpfad Lesson05/05Start/Gage Folder/Gage und klicken Sie auf »Öffnen«.

3

Klicken Sie auf die Verknüpfungen in der Datei Index.html und erkunden Sie die Website.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Wenn Sie mit dem Betrachten der Datei fertig sind, schließen Sie sie.

5

Schließen und beenden Sie Ihren Browser.

Für weitere Übungen zum Reparieren fehlerhafter unterbrochener Verknüpfungen lesen Sie Lektion 13, »Verwaltung von Websites«.

199

200 LEKTION 5 Verknüpfungen

Fragen 1

Was ist ein Link bzw. eine Verknüpfung? Wie erzeugen Sie einen Link?

2

Was ist ein Anker? Wie erzeugen Sie einen Anker?

3

Welche ist die beste Position auf einer Seite für einen Anker?

4

Wie fügen Sie einer Verknüpfung eine Aktion hinzu?

5

Wie erzeugen Sie eine Verknüpfung in einer dynamischen Komponente?

6

Was ist der Unterschied zwischen relativen und absoluten Pfadnamen? Warum ist dieser Unterschied für Verknüpfungen wichtig?

7

Was ist eine Imagemap und wie können Sie sie erzeugen?

8

Was ist der Zweck einer Link-Warnung?

Antworten 1

Ein Link bzw. eine Verknüpfung ist ein Sprung von einer Position in einem Dokument an eine andere Position in einem Dokument – auf derselben Seite (auch Anker genannt), lokal innerhalb einer Website, im Web oder auf NichtWeb-Quellen wie beispielsweise FTP-Server, Newsgroups und E-MailAdressen. Einen Link erzeugen Sie mit einem Text oder einem Bild, indem Sie den Text oder das Bild im Dokumentfenster auswählen und dann in der Werkzeugleiste auf die Schaltfläche »Neuer Link« klicken. Danach klicken Sie auf den Reiter »Link« im Text-Inspektor oder im Bild-Inspektor und verwenden die Schaltfläche »Point & Shoot« oder die Schaltfläche »Durchsuchen«, um mit einer anderen Datei der Website zu verknüpfen oder Sie geben den Pfadnamen in das Textfeld »URL« im Inspektor ein. Sie können auch mit externen URLs verknüpfen, die in der Registerkarte »Extern« des Site-Fensters gespeichert sind.

2

Anker verhalten sich wie Verknüpfungsziele auf Positionen innerhalb derselben Seite. Sie können eine einzelne Verknüpfung erzeugen, die mit einem einzelnen Anker verbindet, oder Sie erzeugen mehrere Verknüpfungen, die alle auf einen einzelnen Anker weisen.

ADOBE GOLIVE 5.0 Classroom in a Book

Um einen Anker zu erzeugen, der von einer Position auf einer Seite auf eine andere weist, wählen Sie den Text aus, der verknüpft werden soll, und ziehen mit gedrückter Alt- (Windows) bzw. Befehlstaste (Mac OS) auf das Ziel der Verknüpfung auf der Seite. Auf diese Weise erzeugen Sie einen Anker und die entsprechende Verknüpfung in einem Schritt. Oder Sie ziehen einen AnkerPlatzhalter aus der Objekte-Palette auf den Zieltext im Dokumentfenster, klicken anschließend im Text-Inspektor auf die Schaltfläche »Neuer Link« und verwenden die Schaltfläche »Point & Shoot«, um den Anker auszuwählen. Adobe GoLive erzeugt automatisch einen Namen für den neuen Anker, den Sie aber mit Hilfe des Anker-Inspektors ändern können. 3

Am besten werden Anker in den Textfluss von HTML-Text in einen LayoutTextrahmen oder eine Tabelle platziert. (Sie können dem Layout-Raster einen kleinen Layout-Textrahmen hinzufügen, der den Anker aufnimmt.) Sie erreichen einheitlichere Ergebnisse, wenn Sie den Anker in die Nähe des linken Randes der Seite platzieren. Sie können nicht unmittelbar mit Grafiken verankern, da HTML diese Möglichkeit bisher nicht unterstützt; platzieren Sie den Anker stattdessen nahe der oberen linken Ecke einer Grafik.

4

Um einer Verknüpfung eine Aktion hinzuzufügen, treffen Sie zuerst eine Auswahl und erzeugen eine Verknüpfung mit der Schaltfläche »Neuer Link« in der Werkzeugleiste oder in der Registerkarte »Link« im Text-Inspektor. Danach verwenden Sie die Aktionen-Palette, um der Verknüpfung eine Aktion hinzuzufügen.

5

Eine dynamische Komponente aktualisiert alle Dateien, die sie verwenden, sobald die Komponente verändert wird. Das Einfügen einer Verknüpfung zu einer dynamischen Komponente verläuft nach dem selben Schema wie das Einfügen anderer Links, erfordert allerdings zuerst das Öffnen der eigentlichen Datei mit der dynamischen Komponente.

201

202 LEKTION 5 Verknüpfungen

6

Absolute URLs enthalten den vollständigen Pfadnamen einer Datei, einschließlich des Ordnernamens der Website. Relative URLs beinhalten nicht den vollen Pfadnamen und können sich auf eine Datei in einem Unterverzeichnis bzw. Unterordner von der zu verknüpfenden Datei aus beziehen. Wenn Sie nach dem Verknüpfungsziel suchen oder den URL eingeben, können Sie einfach den relativen Pfad eingeben (bei dem der Website-Ordner impliziert wird). Adobe GoLive ist sich per Voreinstellung des WebsiteOrdners »bewusst«, daher brauchen Sie ihn nicht mit in den URL einzugeben.

7

Imagemaps sind Bilder mit Hotspot-Bereichen. Sie können Imagemaps mit anderen Quellen verknüpfen und die Hotspot-Bereiche der Imagemaps mit anderen scriptfähigen Aktionen wie Formularen oder E-Mail-Adressen verbinden. Um eine Imagemap zu erzeugen, fügen Sie in Ihr Dokument ein Bild ein, bestimmen das Bild mit Hilfe der Registerkarte »Weitere« im BildInspektor als Imagemap und fügen mit Hilfe der Imagemap-Werkzeuge in der Werkzeugleiste Hotspot-Bereiche hinzu. Anschließend fügen Sie den HotspotBereichen auf die übliche Weise Verknüpfungen hinzu.

8

Link-Warnungen erscheinen als hervorgehobenes URL-Textfeld in der Registerkarte »Link« des Inspektors (oder als »Bug«-Symbol im Site-Fenster). Link-Warnungen machen Sie auf Dateien mit unterbrochenen Verknüpfungen aufmerksam, die repariert werden müssen, bevor die Dateien auf einen Webserver geladen werden (und dort Betrachter frustrieren würden, die die verknüpften Informationen nicht finden können).

Lektion 6

6 Arbeiten mit Frames

Frames sind für das Gestalten des Layouts und des Aufbaus Ihrer Website sehr praktisch. Sie können sowohl als Navigationswerkzeug als auch für die gleichzeitige Darstellung von mehr als einer Art von Information benutzt werden. In dieser Lektion werden Sie ein Frameset mit drei Frames erzeugen und ihren Inhalt hinzufügen.

206 LEKTION 6 Arbeiten mit Frames

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Erzeugen eines Framesets • Ändern von Frameset-Optionen mit Hilfe des Frameset-Inspektors • Konfigurieren einzelner Frames mit Hilfe des Frame-Inspektors • Hinzufügen, Verschieben und Löschen eines Frames • Hinzufügen von Inhalten zu Frames • Verknüpfen des Framesets mit Ihrer Homepage Für diese Lektion werden Sie etwa eine Stunde benötigen. Kopieren Sie, falls nötig, den Ordner Lesson06 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

Framesets Ein Frameset besteht aus einer HTML-Seite, die mehrere Frames aufnehmen kann und Ihnen erlaubt, in jedem dieser Frames ein anderes Dokument darzustellen. Der Vorteil im Aufbau einer Seite mit Frames liegt in der Darstellung mehrerer HTML-Dokumente auf einmal, wobei jedes in einem eigenen Fenster innerhalb des Browser-Fensters liegt und unabhängig ist und je nach Zweck mit oder ohne Rollbalken angelegt werden kann.

ADOBE GOLIVE 5.0 Classroom in a Book

Ein Frameset enthält die dargestellten HTML-Seiten nicht wirklich, sondern stellt ihnen einfach eine Gliederung zur Verfügung. Wenn Sie sich den HTMLQuellcode einer Seite ansehen, die ein Frameset enthält, werden Sie feststellen, dass sie bloß einfache HTML-Meta-Information und ein paar Zeilen beschreibenden Code für die Definition des Framesets enthält – weiter nichts. Das einfachste Frameset enthält zwei Frames: einen für die Navigation auf der Seite und einen für die Darstellung des Inhaltes. Das Frameset, das Sie in dieser Lektion erzeugen werden, wird aus drei Frames bestehen: einem NavigationsFrame, einem Frame für die Hauptseite und einem Frame für ein Banner-Bild. Hinweis: Sie werden in dieser Lektion keine Framesets ineinander verschachteln. Obwohl dies in HTML erlaubt ist, kann es zu ernsthaften Navigationsproblemen führen.

Aufbau eines Framesets In dieser Lektion werden Sie ein Frameset mit dem Titel Frameset.html erzeugen und anschließend eine Reihe von Inhaltsseiten importieren, wie in der folgenden Illustration gezeigt:

B

A

D

E

F

C

A. Frameset.html B. Nav.html C. Banner.html D. Head.html E. Thorax.html F. Abdomen.html

207

208 LEKTION 6 Arbeiten mit Frames

Vorbereitungen In dieser Lektion werden Sie ein Frameset für eine Website mit dem Namen BugBody erzeugen und diesen Frames danach Inhalte zufügen. Zuerst werden Sie sich die fertig gestellte Website in Ihrem Browser ansehen. 1

Öffnen Sie in Ihrem Webbrowser die Webseite Index.html im Pfad Lesson06/06End/BugBody Folder/BugBody/Index.html.

Dies ist die Homepage der Website BugBody. Da sie nicht Bestandteil des Framesets ist, erscheint sie als eine Seite über den gesamten Browser. 2

Klicken Sie auf »Enter«. Diese Verknüpfung verweist auf die HTML-Seite Frameset.html. (Wenn Sie nach einem Klick auf »Enter« eine Fehlermeldung erhalten, rufen Sie Frameset.html direkt auf.)

Obwohl Sie auf dieser Seite Inhalte sehen können, enthält Frameset.html nur HTML-Quellcode für das Frameset der Website. Die Seiten mit den Inhalten werden innerhalb des Framesets geöffnet.

ADOBE GOLIVE 5.0 Classroom in a Book

Sie werden feststellen, dass die Seite drei Frames aufweist: Die Information über den Kopf der Heuschrecke ist der Haupt-Frame und die Inhalts-Liste und das animierte Bild unten auf der Seite sind jeweils weitere Frames.

3

Klicken Sie auf die Verknüpfungen in der Inhalts-Liste und erkunden Sie die Website.

4

Wenn Sie mit dem Betrachten der Website fertig sind, beenden Sie Ihren Browser.

209

210 LEKTION 6 Arbeiten mit Frames

Erzeugen eines Framesets Wenn Sie eine neue Website erzeugen möchten und dafür Frames verwenden wollen, müssen Sie zuerst die Seite einrichten, die Ihr Frameset enthalten soll, und dann genau überlegen, wie die Frames aussehen sollen. Erst danach sollten Sie damit beginnen, Ihre Inhaltsseiten hinzuzufügen und zu formatieren. Sie werden in dieser Lektion damit beginnen, die BugBody-Website zu öffnen und eine neue HTML-Seite mit Frameset zu erzeugen. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei BugBody.site im Pfad 06Lesson/06Start/BugBody Folder/BugBody.site.

Diese Website enthält eine Homepage (Index.html) und einige Inhaltsseiten. Diese Seiten wurden noch nicht in Frames platziert. Sie werden als Nächstes ein Frameset für die Inhaltsseiten der Website erzeugen. 3

Wählen Sie Datei: Neu, um eine neue Seite zu erzeugen.

4

Wählen Sie den Seitentitel Willkommen bei Adobe GoLive 5 aus.

5

Geben Sie den Text Bug Parts als neuen Titel ein und drücken Sie die Eingabetaste.

Nachdem Sie nun eine neue Seite erzeugt haben, können Sie ihr ein Frameset hinzufügen. Beim Arbeiten mit Frames beginnen Sie immer damit, aus der Palette ein Frameset auszuwählen, anschließend konfigurieren Sie es im Frame-Editor des Dokumentfensters. 6

Klicken Sie im Dokumentfenster auf den Reiter »Frame-Editor« ( ), um den Frame-Editor anzuzeigen. Im Fenster steht momentan Keine Frames.

7

Klicken Sie in der Objekte-Palette auf den Reiter »Frames« ( ).

Registerkarte Frames in der Palette

ADOBE GOLIVE 5.0 Classroom in a Book

Die Registerkarte »Frames« enthält eine Vielzahl von Frameset-Vorlagen, mit jeweils bis zu drei Frames. Jede Vorlage zeigt Ihnen, wie die Frames auf der Seite dargestellt werden. Hinweis: Das erste Symbol in der obersten Zeile zeigt nur einen Frame. Sie können dieses Symbol benutzen, um einem Frameset einen weiteren Frame hinzuzufügen. 8

Wählen Sie in der Objekte-Palette in der Registerkarte »Frames« das Symbol mit drei Frames, das oben links einen schmalen senkrechten violetten Frame, oben rechts einen quadratischen blauen Frame und unten einen schmalen waagerechten violetten Frame darstellt, und ziehen Sie es aus der Palette auf den Frame-Editor. Im Dokumentfenster wird darauf ein Frameset dargestellt.

Frameset-Symbol auf den Frame-Editor ziehen

Sie werden feststellen, dass jeder Frame die Wörter »No Name« und ein Fragezeichen-Symbol mit der Bezeichnung »(Empty Reference!)« enthält. Sie werden später in der Lektion jeden Frame benennen und mit Inhalt versehen. Aber jetzt ist es an der Zeit, sich einmal den HTML-Quellcode des neuen Framesets anzusehen.

211

212 LEKTION 6 Arbeiten mit Frames

9

Klicken Sie im Dokumentfenster auf den Reiter »Quellcode« ( ), um in die HTML-Ansicht zu gelangen. Der HTML-Quellcode dieser Seite besteht nur aus den Frame-Tags und ein paar Meta-Informationen.

10 Kehren Sie zurück in den Frame-Editor. 11 Wählen Sie Datei: Speichern und sichern Sie die Seite als Frameset.html in den Ordnerpfad Lesson06/06Start/BugBody Folder/BugBody/Pages. Hinweis: Um ein Frameset zu löschen, klicken Sie auf die Umrahmung eines Frames und drücken die Löschtaste bzw. die Taste Entfernen.

Frameset ändern Sie können ein Frameset mit Hilfe des Frameset-Inspektors auf vielfältige Weise verändern, beispielsweise seine Ausrichtung oder seine Ränder. 1

Falls der Inspektor noch nicht geöffnet ist, wählen Sie Fenster: Inspektor, um ihn aufzurufen.

2

Klicken Sie oben auf den inneren Rand des unteren Rahmens, um den Inspektor in den Frameset-Inspektor zu ändern.

Sie können jeden beliebigen inneren Rand des Framesets auswählen, um den Inspektor in den Frameset-Inspektor zu ändern.

A B

C

A. Größe B. Format C. Randeinstellungen

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie das Format »Horizontal« und beachten Sie, wie sich das Erscheinungsbild der Frames oberhalb des ausgewählten Randes ändert. Wählen Sie anschließend wieder das Format »Vertikal« aus.

Hinweis: Diese Formate ändern nicht das Format des gesamten Framesets, sondern nur die an den ausgewählten Rahmen angrenzenden Frames. 4

Wählen Sie die Option »Randgröße«, geben Sie in das Textfeld den Wert 5 ein und drücken Sie die Eingabetaste. Sie werden feststellen, dass die Änderung nur dem Rand zugefügt wird, den Sie im Frameset-Inspektor ausgewählt haben.

5

Wählen Sie die Option »Randfarbe« und klicken Sie auf das graue Farbfeld, um die Farben-Palette zu öffnen.

6

Klicken Sie in der Farben-Palette auf die Schaltfläche »Webfarbenliste« ( ) und wählen Sie anschließend eine Farbe aus, indem Sie entweder auf ein Farbfeld klicken oder einen Farbwert in das Textfeld »Wert« eingeben und auf die Eingabetaste drücken. (Wir haben in das Textfeld »Wert« den Wert 99CC99 eingegeben.) Sie werden feststellen, dass diese Änderung allen inneren Rändern zugefügt wird.

Auswählen des Farbfeldes »Randfarbe« im Frameset-Inspektor

7

Farbe aus der Farben-Palette auswählen

Wählen Sie den inneren Rand zwischen den oberen beiden Frames.

213

214 LEKTION 6 Arbeiten mit Frames

Beachten Sie, dass dieser Frame auf das Format Horizontal eingestellt ist. Wählen Sie das Format Vertikal, um zu sehen, wie sich dies auf die Orientierung der Frames auswirkt; kehren Sie anschließend wieder zum Format Horizontal zurück. 8

Wählen Sie die Option »Randgröße« und geben Sie in das Textfeld 0 ein. Wählen Sie anschließend die Option »Randkante« und im zugehörigen Popup-Menü »Nein«. Der Rand wird im Browser nun nicht mehr angezeigt, obwohl Sie nach wie vor eine schwarze Linie im Frame-Editor sehen können.

Hinweis: Viele Web-Designer verwenden randlose Frames mit derselben Hintergrundfarbe, um den Eindruck einer Website ohne Frames zu erwecken. 9

Wählen Sie Datei: Speichern, um Ihre Arbeit zu sichern.

Einrichten der Inhalt-Frames Sie werden nun den Frame-Inspektor verwenden, um die Inhalt-Frames in Ihrem Set zu benennen, ihre Größe zu ändern und ihr Bildlaufverhalten zu bestimmen. 1

Wählen Sie den oberen linken Frame. Dadurch wird der Frame-Inspektor aufgerufen.

ADOBE GOLIVE 5.0 Classroom in a Book

Der Frame-Inspektor ermöglicht Ihnen das Festlegen von Optionen für einen ausgewählten Frame. Sie können ihn in der Größe verändern und benennen, ihn mit einer Inhaltsseite verknüpfen und seine Bildlauf- und Größenvoreinstellungen festlegen. Außerdem können Sie die Voransicht von Inhalten ein- oder ausschalten.

A B C D E F G

A. Größe B. Name C. URL-Textfeld D. Schaltfläche »Point & Shoot« für URL-Verknüpfungen E. Bildlauf F. Frame-Größe ändern G. »Durchsuchen« für URL-Verknüpfungen

2

Geben Sie im Textfeld »Name« des Frame-Inspektors den Namen Navigator für diesen Frame ein.

Jetzt werden Sie die Größe des Frames einstellen. Sie können dazu auf unterschiedliche Weise vorgehen:

• Geben Sie für jedes Fenster pixelgenaue Maße ein. • Geben Sie einen prozentualen Anteil am Browser-Fenster ein. • Lassen Sie den Frame variabel skalieren, damit er immer in das Browser-Fenster passt.

215

216 LEKTION 6 Arbeiten mit Frames

Sie werden die Größe des Navigations-Frames pixelgenau festlegen. Da dieser Frame eine Navigationsleiste aufnehmen soll, sollte er in allen Browsern und in allen Bildschirmauflösungen die gleiche Breite aufweisen, damit sichergestellt wird, dass die Bezeichnungen in der Navigationsleiste für die Verknüpfungen immer korrekt dargestellt werden. 3

Wählen Sie im Popup-Menü »Größe« den Eintrag »Pixel«, geben Sie in das Textfeld »Größe« den Wert 110 ein und drücken Sie die Eingabetaste, um die Größe des Frames entsprechend zu ändern. Sie werden feststellen, dass der Frame ganz links nun etwas größer als vorher ist.

Navigations-Frame auswählen

Pixel-Größe festlegen

4

Belassen Sie das Kontrollkästchen vor der Option »Frame-Größe änderbar« (Windows) bzw. »Framegröße veränderbar« (Mac OS) ausgeschaltet. Somit verhindern Sie, dass Betrachter das Layout Ihrer Frames verändern.

5

Wählen Sie im Popup-Menü »Bildlauf« den Eintrag »Nein«, damit das Fenster ohne Rollbalken dargestellt wird.

ADOBE GOLIVE 5.0 Classroom in a Book

Ein Navigationsfenster ist sinnvoller, wenn es ohne Rollbalken dargestellt wird. Bevor Sie die Betrachter veranlassen, mit der Bildlaufleiste durch Verknüpfungen zu scrollen, sollten Sie lieber den Inhalt eines Fensters kürzen. Falls Ihre Website so viele Seiten umfasst, dass sie nicht mehr alle im Navigationsfenster dargestellt werden können, sollten Sie darüber nachdenken, die Website neu zu ordnen, in Bereiche aufzuteilen, und das Navigationsfenster dazu benutzen, den Betrachter auf diese Bereiche anstatt auf einzelne Seiten zu lenken. Jeder Bereich kann dann sein eigenes Inhaltsverzeichnis bekommen, das die zugehörigen Seiten anzeigt. Sie werden jetzt den Hauptinhalt-Frame formatieren. 6

Wählen Sie den Frame oben rechts aus. Wählen Sie im Frame-Inspektor aus dem Popup-Menü »Größe« den Eintrag »Skalieren«.

Wenn ein Betrachter das Browser-Fenster vergrößert oder verkleinert, sorgt die Option Skalieren dafür, dass der Frame sich entweder ausdehnt oder verkleinert, um immer das Browser-Fenster rechts vom Navigations-Frame auszufüllen. 7

Geben Sie im Textfeld »Name« den Text Main ein.

8

Wählen Sie im Popup-Menü »Bildlauf« den Eintrag »Ja«. Damit werden dem Frame vertikale und horizontale Bildlaufleisten bzw. Rollbalken hinzugefügt.

Nun werden Sie den unteren Frame formatieren. 9

Wählen Sie den unteren Frame und geben Sie den Namen Banner ein.

10 Legen Sie seine Größe mit 90 Pixel fest. Das ist etwas größer als das Bild, das dieser Frame aufnehmen soll, um Verschiebungen in unterschiedlichen Browsern auszugleichen. 11 Wählen Sie im Popup-Menü »Bildlauf« den Eintrag »Nein«. 12 Wählen Sie Datei: Speichern, um Ihre Arbeit zu sichern.

Hinzufügen, Verschieben und Löschen von Frames Sie können einem Frameset Frames hinzufügen und diese verschieben und löschen. Zuerst werden Sie Ihrem Frameset einen vierten Frame hinzufügen.

217

218 LEKTION 6 Arbeiten mit Frames

1

Ziehen Sie aus der Registerkarte »Frames« in der Objekte-Palette einen neuen Frame (das erste Symbol der obersten Zeile) auf den unteren Frame Ihres Framesets. Er wird rechts von ihrem vorhandenen Frame dargestellt.

Einen neuen Frame aus der Objekte-Palette auf das Frameset ziehen

2

Ändern Sie die Größe des Frames, indem Sie im Popup-Menü »Größe« des Frame-Inspektors den Eintrag »Prozent« auswählen, in das entsprechende Textfeld den Wert 20 eingeben und die Eingabetaste drücken.

Sie werden nun den neuen Frame auf die Position links vom ursprünglichen Frame verschieben.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Ziehen Sie den neuen Frame auf den ursprünglichen unteren Frame, bis er seine Farbe in Schwarz (Windows) bzw. Grau (Mac OS) ändert, und lassen Sie ihn dann auf dem Frame los. Der neue Frame wird nun links vom ursprünglichen Frame dargestellt.

Neuen Frame nach links vom ursprünglichen Frame ziehen

4

Wählen Sie den neuen Frame und drücken Sie die Löschtaste. Damit wird der neue Frame entfernt und die Größe des ursprünglichen Frames wieder auf 90 Prozent der gesamten Seite geändert.

Hinzufügen von Inhalt in Frames Jetzt ist es an der Zeit, jedem Ihrer drei Frames Inhalt hinzuzufügen, indem Sie sie mit Inhaltsseiten verknüpfen. Sie werden dazu unterschiedliche Wege beschreiten, indem Sie:

• die Schaltfläche »Durchsuchen« im Frame-Inspektor benutzen • die Schaltfläche »Point & Shoot« ( ) im Frame-Inspektor verwenden • eine Inhaltsdatei mittels Drag & Drop unmittelbar in einen Frame ziehen

219

220 LEKTION 6 Arbeiten mit Frames

Sie werden jede der drei Methoden zum Hinzufügen von Inhalt zu den drei Frames jeweils einmal verwenden. Zuerst werden Sie die Schaltfläche »Durchsuchen« verwenden, um nach einer Datei zu suchen und sie dann dem Frame hinzuzufügen. Diese Methode ist besonders dann sinnvoll, wenn die Inhaltsseite sich nicht im selben Ordner wie die restlichen Dateien Ihrer Website befindet. 1

Wählen Sie den Navigations-Frame im linken Bereich der Seite. Klicken Sie im Frame-Inspektor auf die Schaltfläche »Durchsuchen« und suchen Sie nach der Datei Nav.html im Ordnerpfad BugBody/Pages und klicken Sie auf »Öffnen«. Im Frame erscheint stellvertretend für die Datei ein Symbol.

Klicken Sie unter Mac OS im Frame-Inspektor auf die Schaltfläche »Frame-Vorschau« ( ). Im Frame wird das Inhaltsverzeichnis der Datei Nav.html eingeblendet. (Sie können erneut auf die Schaltfläche klicken, um die Vorschau wieder auszuschalten. Lassen Sie sie aber vorerst eingeschaltet.)

Navigations-Frame auswählen (Mac OS)

Klicken auf Schaltfläche »Frame-Vorschau« im Frame-Inspektor (Mac OS)

ADOBE GOLIVE 5.0 Classroom in a Book

Sie werden nun eine andere Methode für das Hinzufügen einer Inhaltsdatei ausprobieren. Wenn sich die Datei in Ihrer Website befindet, können Sie dafür die Schaltfläche »Point & Shoot« im Frame-Inspektor verwenden. 2

Ziehen Sie, falls nötig, das Dokumentfenster an eine andere Stelle auf Ihrem Monitor, so dass Sie sowohl den Haupt-Frame (Main) Ihres Framesets als auch die Dateien in Ihrem Website-Fenster sehen können.

3

Öffnen Sie den Ordner Pages in Ihrem Site-Fenster.

4

Wählen Sie im Dokumentfenster den Haupt-Frame (Main).

5

Ziehen Sie im Frame-Inspektor von der Schaltfläche »Point & Shoot« ( ) auf die Datei Head.html im Site-Fenster, um eine Verknüpfung zu erzeugen.

Die letzte Möglichkeit, einem Frame Inhalt hinzuzufügen, ist wahrscheinlich auch die einfachste: Es wird einfach nur eine Datei auf den Frame gezogen. 6

Falls nötig, verschieben Sie das Dokumentfenster so, dass Sie sowohl den unteren Frame Ihres Framesets als auch die Dateien in Ihrem Website-Fenster sehen können (vielleicht müssen Sie außerdem die Größe von Frameset.html anpassen).

7

Ziehen Sie die Datei Banner.html aus Ihrem Site-Fenster auf den unteren Frame. Nun ist die Datei Banner.html mit dem Frame verknüpft.

221

222 LEKTION 6 Arbeiten mit Frames

8

Klicken Sie im Dokumentfenster auf den Reiter »Vorschau« (Windows) bzw. »Frame-Vorschau« (Mac OS) ( ), um den Inhalt aller drei Frames anzuzeigen.

Hinweis: Wenn Sie ein Bild als Inhalt eines Frames hinzufügen möchten, müssen Sie das Bild zunächst in eine HTML-Seite einsetzen. Ein Frame kann keine reine Bilddatei darstellen.

Registerkarte »Layout-Vorschau« (Windows)

Registerkarte »Frame-Vorschau« (Mac OS)

9

Wählen Sie Datei: Speichern, um Ihr Frameset zu sichern.

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen von Ziel-Verknüpfungen Obwohl Ihre Frames auch nur einfach dazu benutzt werden könnten, diese drei Webseiten darzustellen, können Sie mit ihnen viel mächtigere Aufgaben erledigen und mit ihnen durch die gesamte Website navigieren und sie darstellen lassen. Sie werden nun einem Betrachter das Ändern des Haupt-Frames (Main) ermöglichen, indem Sie Ziel-Verknüpfungen vom Navigations-(Inhaltsverzeichnis)Fenster auf andere Seiten verwenden. 1

Öffnen Sie vom Website-Fenster aus die Datei Nav.html.

2

Wählen Sie in der Datei Nav.html das Wort Thorax aus.

3

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link« ( ) und verwenden Sie die Schaltfläche »Point & Shoot«, um eine Verknüpfung auf Thorax.html zu erzeugen.

Auf diese Weise erzeugen Sie eine Verknüpfung zwischen den beiden Seiten. Aber in welchem Frame wird sie dargestellt? Sie möchten sie im Haupt-Frame (Main) darstellen lassen, also müssen Sie diesen Frame als Ziel auswählen. 4

Wählen Sie im Text-Inspektor aus dem Popup-Menü »Ziel« den Eintrag »Main« aus.

Auswählen des Main-Frames als Ziel

Wenn ein Besucher nun auf diese Verknüpfung im Inhaltsverzeichnis klickt, wird die Datei Head.html im Main-Frame durch die Datei Thorax.html ersetzt.

223

224 LEKTION 6 Arbeiten mit Frames

Erzeugen einer Verknüpfung zurück auf die Homepage Sie werden das Wort Welcome auf dieser Seite mit der Homepage als Ziel verknüpfen. Auf diese Weise können die Betrachter jederzeit und von überall her auf Ihrer Website zurück auf die Homepage gelangen. 1

Wählen Sie die Verknüpfung Welcome.

2

Vergewissern Sie sich, dass im Website-Fenster die Datei Index.html zu sehen ist.

3

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link« und verwenden Sie die Schaltfläche »Point & Shoot«, um eine Verknüpfung mit Index.html zu erzeugen.

4

Wählen Sie diesmal im Text-Inspektor aus dem Popup-Menü »Ziel« den Eintrag »_parent«.

Die Option _parent legt das Browser-Fenster als Ziel fest und weist den Browser an, den Inhalt des gesamten Fensters zu ändern. Der Browser wird das Frameset durch ein Fenster ersetzen, das die Homepage anzeigt; den Navigations- und den Banner-Frame stellt der Browser dann nicht mehr dar. Die beiden anderen Verknüpfungen wurden bereits für Sie vorgenommen. 5 Speichern und schließen Sie die Datei Nav.html. 6 Wählen Sie Datei: Speichern, um die Datei Frameset.html zu speichern. 7 Vergewissern Sie sich, dass die Datei Frameset.html ausgewählt ist und nicht nur einer der Frames innerhalb der Datei; wählen Sie dann Spezial: Im Browser anzeigen (Ihren bevorzugten Browser), um die Datei Frameset.html in Ihrem Browser darzustellen. 8 Klicken Sie auf jede der Verknüpfungen im Inhaltsverzeichnis-Fenster (wählen Sie die Verknüpfung Welcome zuletzt). Die verknüpften Seiten werden im Main-Fenster dargestellt. Beachten Sie, dass die Homepage der Website das gesamte Browser-Fenster ausfüllt, wenn Sie auf die Verknüpfung Welcome klicken. Auf diese Weise wird die Auswirkung der Zielverknüpfung auf _parent verdeutlicht. Allerdings werden Sie feststellen, dass nichts passiert, wenn Sie auf Enter klicken.

ADOBE GOLIVE 5.0 Classroom in a Book

Verknüpfen des Framesets mit Ihrer Homepage Nun müssen Sie noch eine Verknüpfung von Ihrer Homepage mit dem neuen Frameset zu erzeugen. Diese Verknüpfung wird meistens mit so etwas wie Enter oder Start bezeichnet. Wenn ein Betrachter darauf klickt, öffnet sich das Frameset und stellt die Start-Inhaltsseiten Ihrer Website dar. Bedenken Sie, dass Sie keine Verknüpfung mit einer Inhaltsseite erzeugen; Sie erzeugen eine Verknüpfung mit der Datei Frameset.html und lassen so die drei Inhaltsseiten in den Frames von Frameset.html darstellen. 1

Schließen Sie Ihren Browser.

2

Öffnen Sie im Website-Fenster die Datei Index.html. Vergewissern Sie sich, dass das Website-Fenster sichtbar und der Ordner Pages geöffnet ist.

3

Wählen Sie in der Datei Index.html den Text Enter aus.

4

Klicken Sie im Text-Inspektor auf die Schaltfläche »Neuer Link« ( ) und verwenden Sie die Schaltfläche »Point & Shoot«, um eine Verknüpfung mit der Datei Frameset.html zu erzeugen.

5

Wählen Sie Datei: Speichern, um sowohl die Datei Index.html als auch die Datei Frameset.html zu sichern.

Hinzufügen einer Aktion, damit das Frameset immer geladen wird Nachdem die Site BugBody nun fertig gestellt ist, ist es immer noch möglich, einzelne Seiten (wie beispielsweise Abdomen.html) außerhalb des Framesets zu laden, so dass es das Browser-Fenster vollständig ausfüllt. Wäre die Website bereits ins Web gestellt, könnten dadurch unerwünschte Folgen auftreten. Eine Suchmaschine im Internet könnte beispielsweise in der Seite Abdomen.html Inhalte entdecken und den URL für diese Seite für andere Anwender speichern. Durch Klicken auf diesen URL würde Abdomen.html unmittelbar im gesamten BrowserFenster dargestellt, ohne dass der Anwender Zugriff auf die Navigationsleiste oder eine der anderen Seiten in der Website hätte.

225

226 LEKTION 6 Arbeiten mit Frames

Um dies zu verhindern, können Sie einzelnen Inhaltsseiten Ihrer Website eine Aktion »Frame erzwingen« für den Head-Abschnitt zuweisen. Mit Hilfe dieser Aktion wird das Frameset erkannt, das einer Website zugewiesen ist, und der Browser angewiesen, die entsprechende Seite in diesem Frameset zu laden und so den Aufbau der Website beizubehalten. 1

Doppelklicken Sie im Site-Fenster auf die Datei Abdomen.html im Ordner Pages, um sie zu öffnen.

2

Klicken Sie auf das Dreieck oben links in der Seite, um den Head-Abschnittsbereich des Dokumentfensters zu öffnen.

3

Klicken Sie in der Objekte-Palette auf den Reiter »Smart« ( ).

4

Ziehen Sie das Symbol »Aktionsobjekt« aus der Objekte-Palette in den HeadAbschnittsbereich der Seite.

5

Wählen Sie im Aktionen-Inspektor aus dem Popup-Menü »Ausführen« den Eintrag »OnLoad«. Wählen Sie anschließend im Popup-Menü »Action« ActionsPlus: Frame erzwingen.

6

Als Nächstes müssen Sie das Frameset auswählen. Verwenden Sie dazu entweder die Schaltfläche »Point & Shoot« und erzeugen Sie eine Verknüpfung mit der Datei Frameset.html in der Website oder benutzen Sie die Schaltfläche »Durchsuchen«, um nach der Datei Frameset.html zu suchen und sie auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Wählen Sie Datei: Speichern, um sowohl Abdomen.html als auch Frameset.html zu sichern.

Jetzt können Sie die Aktion »Frame erzwingen« ausprobieren. Starten Sie einen Browser und öffnen Sie darin die Seite Abdomen.html. Die Seite wird im Frameset angezeigt, zusammen mit den Frames für die Navigationsleiste und das Banner.

Seite ohne Aktion »Frame erzwingen«

8

Seite mit Aktion »Frame erzwingen«

Schließen Sie Abdomen.html und Frameset.html.

Vorschau in einem Webbrowser Nachdem Sie nun ein Frameset und Inhaltsseiten für Ihre Website erstellt haben, können Sie die fertig gestellte Site in einem Webbrowser in der Vorschau betrachten. 1

Starten Sie Ihren Browser.

227

228 LEKTION 6 Arbeiten mit Frames

2

Suchen Sie nach der fertig gestellten Datei Index.html und öffnen Sie sie im Browser. Wählen Sie dazu Datei: Öffnen. Wählen Sie die Datei Index.html im Ordnerpfad Lesson06/06Start/BugBody Folder/BugBody.

3

Klicken Sie in der Datei Index.html auf die Verknüpfung »Enter« und erkunden Sie die Site.

4

Wenn Sie mit dem Betrachten der Seiten in der Website fertig sind, schließen Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Wo finden Sie einen Satz mit vorgefertigten Frame-Layouts?

2

Wie legen Sie die Größe eines Frames auf eine bestimmte Anzahl von Pixeln fest?

3

Wie fügen Sie einem Frame-Rand eine Farbe hinzu?

4

Wie fügen Sie einem Frame eine Bildlaufleiste hinzu?

5

Wie fügen Sie Ihrem Frameset einen neuen Frame hinzu?

6

Welche sind die drei Methoden, um einem Frame Inhalte hinzuzufügen?

7

Wie können Sie eine Voransicht des Inhalts Ihres Framesets bekommen, ohne erst einen Browser zu starten?

8

Wofür können Sie einer Webseite eine Aktion »Frame erzwingen« im HeadAbschnittsbereich hinzufügen?

Antworten 1

Sie finden einen Satz mit vorgefertigten Frame-Layouts in der Registerkarte »Frames« der Objekte-Palette.

2

Wählen Sie den gewünschten Frame an. Wählen Sie im Frame-Inspektor aus dem Popup-Menü »Größe« den Eintrag »Pixel« und geben Sie die Anzahl der Pixel in das entsprechende Textfeld ein.

3

Wählen Sie den Frame-Rand an. Wählen Sie im Frameset-Inspektor die Option »Randfarbe« und klicken Sie auf das Farbfeld daneben, um die Farben-Palette zu öffnen. Wählen Sie dort den Reiter »Webfarbenliste« und wählen Sie in der Registerkarte die gewünschte Farbe aus.

4

Wählen Sie einen Frame aus. Wählen Sie im Popup-Menü »Bildlauf« im Frame-Inspektor den Eintrag »Ja« aus.

5

Ziehen Sie aus der Registerkarte »Frames« der Objekte-Palette ein FrameSymbol auf Ihr Frameset. Lassen Sie es auf dem gewünschten Frame los.

6

Wählen Sie einen Frame aus. Nun können Sie ihm Inhalte hinzufügen, indem Sie:

229

230 LEKTION 6 Arbeiten mit Frames

• im Frame-Inspektor die Schaltfläche »Durchsuchen« verwenden, um eine Datei zu suchen • die Schaltfläche »Point & Shoot« im Frame-Inspektor benutzen, um mit einer Datei zu verknüpfen • eine Datei aus dem Website-Fenster auf den Frame ziehen 7

Klicken Sie im Dokumentfenster auf den Reiter »Layout-Vorschau« (Windows) bzw. »Frame-Vorschau« (Mac OS) oder doppelklicken Sie auf das Seiten-Symbol in einem Frame, um seine Inhalts-Datei in einem anderen Fenster zu öffnen.

8

Eine Aktion »Frame erzwingen« fügen Sie im Head-Abschnittsbereich einer Seite ein, um sicherzustellen, dass diese Seite immer als Teil eines Framesets geladen wird und nicht als einzelne Seite, die das gesamte Browser-Fenster ausfüllt.

Lektion 7

7 Erzeugen von Maus-Rollover-Effekten

In dieser Lektion werden Sie eine Navigationsleiste für die Homepage einer Website entwerfen. Dafür werden Sie zunächst Maus-Rollover-Schaltflächen erzeugen, die ihr Aussehen ändern, sobald Ihr Mauszeiger sich über sie bewegt. Anschließend werden Sie diesen Schaltflächen Aktionen zuweisen, so dass schwebende Rahmen aufgerufen werden, sobald sich Ihr Mauszeiger über sie bewegt. Schließlich werden Sie einer Maus-Rollover-Schaltfläche noch eine Aktion zuweisen, um einen Popup-Menü-Effekt zu erzeugen.

234 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Hinzufügen von Schweberahmen zu einer Seite, damit Sie Objekte überlappen können • Erzeugen von Maus-Rollover-Schaltflächen innerhalb von schwebenden Rahmen auf einer Seite • Hinzufügen von Bildern zu Schweberahmen auf einer Seite • Hinzufügen von Aktionen zu Maus-Rollover-Schaltflächen, um schwebende Rahmen ein- und auszublenden • Hinzufügen von Aktionen zu einer Maus-Rollover-Schaltfläche, um einen Popup-Menü-Effekt zu erzeugen • Verknüpfen einer Maus-Rollover-Schaltfläche mit einer Seite im Web • Vorschau einer Homepage in einem Webbrowser Für diese Lektion werden Sie etwa 45 Minuten benötigen. Kopieren Sie, falls nötig, den Ordner Lesson07 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen In dieser Lektion werden Sie mit dem Entwurf einer Homepage der Website eines fiktiven Unternehmens mit dem Namen Trilobite.com arbeiten, das sich auf den Verkauf von Trilobiten spezialisiert hat, das sind urzeitliche Gliederfüßer, die heute gerne als Fossilien gesammelt werden. Sie werden sich mit dem Entwurf einer Navigationsleiste für diese Seite beschäftigen, indem Sie ihr Maus-RolloverSchaltflächen hinzufügen und diesen Schaltflächen anschließend Aktionen zuweisen. Maus-Rollover-Schaltflächen sind Schaltflächen, die ihr Aussehen ändern, wenn Sie Ihren Mauszeiger über sie bewegen oder sie anklicken. Diesen Maus-RolloverSchaltflächen lassen sich Aktionen zuweisen, die durch die gleichen Mausereignisse ausgelöst werden können. Ein Beispiel für eine Aktion, die sich einer MausRollover-Schaltfläche zuweisen lässt, ist das Ein- und Ausblenden eines schwebenden Rahmens. Weitere Informationen über das Verwenden von Aktionen finden Sie in Kapitel 9, Verwenden von Aktionen und JavaScript. Zuerst werden Sie die fertig gestellte Homepage in Ihrem Webbrowser betrachten. 1

Starten Sie Ihren Webbrowser.

235

236 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

2

Öffnen Sie die Datei Index.html, die Homepage der Site. Sie finden sie im Pfad Lesson07/07End/Trilobite folder/Trilobite/Index.html.

Die Homepage begrüßt den Betrachter bei Trilobite.com. Sie enthält unter anderem eine grüne Schaltfläche im Bereich oben links auf der Seite. 3

Bewegen Sie Ihren Mauszeiger auf die grüne Schaltfläche. Sie werden feststellen, dass die Schaltfläche ihr Aussehen verändert und unterhalb der Schaltfläche ein mit ihr verbundener Text aufgerufen wird.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Klicken Sie auf die grüne Schaltfläche. Sie werden feststellen, dass zwei weitere Schaltflächen rechts neben der angeklickten Schaltfläche aufgerufen werden.

Hinweis: Falls die Schaltfläche nicht wie erwartet funktioniert, wenn Sie auf sie klicken, hat Ihr Browser möglicherweise Schwierigkeiten mit der Darstellung. Wenn Sie den Microsoft Internet Explorer verwenden, müssen Sie eventuell zweimal auf die Schaltfläche klicken, um die anderen Schaltflächen aufrufen zu lassen. 5

Bewegen Sie Ihren Mauszeiger über die neuen Schaltflächen auf der Seite. Sie werden feststellen, dass auch diese Schaltflächen ihr Aussehen verändern und verbundener Text unterhalb der einzelnen Schaltfläche aufgerufen wird.

Diese Schaltflächen wurden als Navigationsleiste entworfen, mit deren Hilfe der Anwender die Website erkunden kann. Momentan sind die Schaltflächen noch nicht mit anderen Seiten der Website verknüpft, weil sie nur diese Homepage enthält. Für diese Lektion haben wir die blaue Schaltfläche mit der Adobe-Website verknüpft, damit Sie sehen können, wie sich eine Schaltfläche mit einer anderen Seite im Web verknüpfen lässt. 6

Klicken Sie auf die blaue Schaltfläche, um auf die Adobe-Website zu gelangen.

7

Klicken Sie in der Navigationsleiste Ihres Browsers auf die Schaltfläche »Zurück«, um wieder auf die Homepage der Website von Trilobite.com zu gelangen.

8

Klicken Sie erneut auf die grüne Schaltfläche. Sie werden feststellen, dass die anderen Schaltflächen ausgeblendet werden.

9

Wenn Sie mit dem Betrachten der Homepage fertig sind, schließen Sie sie und beenden Sie Ihren Browser.

Öffnen der Homepage Sie beginnen in dieser Lektion damit, die Homepage der Website Trilobite.com in Adobe GoLive zu öffnen. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen, suchen Sie die Datei Trilobite.site und klicken Sie auf »Öffnen«. Der Ordnerpfad ist Lesson07/07Start/Trilobite Folder/Trilobite.site.

237

238 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

Das erste Site-Fenster der Trilobite-Website wird aufgerufen und die Registerkarte »Dateien« ist ausgewählt. Sie werden nun die Homepage der Trilobite-Website öffnen. 3

Doppelklicken Sie in der Registerkarte »Dateien« im Site-Fenster auf die Datei Index.html.

Die Homepage wird mit ausgewählter Registerkarte »Layout« aufgerufen. Die Seite enthält ein einzelnes großes Bild und einen schwebenden Rahmen, der eine animierte GIF-Grafik enthält.

4

Wählen Sie Fenster: Inspektor, um den Inspektor aufzurufen.

5

Klicken Sie auf der Homepage irgendwohin, nur nicht auf den schwebenden Rahmen, der die animierte GIF-Grafik enthält. Sie werden feststellen, dass der überwiegende Teil der Seite ausgewählt ist. Außerdem hat sich der Inspektor in den Bild-Inspektor geändert und zeigt auf diese Weise an, dass Sie ein Bild ausgewählt haben. (Zur Erinnerung erscheint außerdem das Wort Bild unten in der Fußzeile des Inspektors, um anzuzeigen, dass er sich in den BildInspektor geändert hat.)

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen einer Maus-Rollover-Schaltfläche Nachdem Sie nun die Homepage geöffnet haben, können Sie mit dem Entwerfen der Navigationsleiste für die Seite beginnen. Die Navigationsleiste soll drei MausRollover-Schaltflächen enthalten. Sie werden jede Rollover-Schaltfläche in einem schwebenden Rahmen auf der Seite platzieren. Schwebende Rahmen sind besonders gut geeignet, da sie Ihnen das Überlappen von Objekten auf der Seite ermöglichen. Mit ihrer Hilfe können Sie die Rollover-Schaltflächen über dem einzelnen großen Bild auf der Seite ausrichten. Alternativ zu schwebenden Rahmen könnten Sie Maus-Rollover-Schaltflächen auch unmittelbar auf einer Seite, einem Layout-Raster oder innerhalb einer Tabellenzelle platzieren. Sie werden jetzt der Homepage Ihre erste Maus-Rollover-Schaltfläche hinzufügen. Dafür fügen Sie der Seite zunächst einen schwebenden Rahmen hinzu. Anschließend platzieren Sie die Maus-Rollover-Schaltfläche innerhalb des schwebenden Rahmens. 1

Scrollen Sie im Dokumentfenster mit Hilfe der Bildlaufleiste nach unten bis zum Ende der Seite. Achten Sie auf das kleine Symbol in der unteren linken Ecke der Homepage. Das ist die Markierung für den schwebenden Rahmen, der das animierte GIF-Bild enthält. Das Symbol eines schwebenden Rahmens verbleibt auch nach dem Verschieben des Rahmens selbst an seiner ursprünglichen Position. Sie können auf dieses Symbol klicken, um den schwebenden Rahmen auszuwählen.

2

Klicken Sie in den Leerraum rechts von dem kleinen Symbol, so dass eine Einfügemarke erscheint.

3

Wählen Sie Fenster: Objekte, um die Objekte-Palette aufzurufen.

4

Achten Sie darauf, dass in der Objekte-Palette die Registerkarte »Allgemein« ( ) ausgewählt ist. Ziehen Sie aus der Objekte-Palette einen Platzhalter »Rahmen« auf die Einfügemarke im Dokumentfenster.

Dem Dokumentfenster wird ein leerer Rahmen hinzugefügt und der Inspektor ändert sich in den Rahmen-Inspektor.

239

240 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

5

Scrollen Sie im Dokumentfenster nach unten, so dass Sie den schwebenden Rahmen sehen können, den Sie der Seite hinzugefügt haben.

Platzhalter »Rahmen« auf Einfügemarke ziehen

Ergebnis

Sie werden nun mit Hilfe des Rahmen-Inspektors die Merkmale des schwebenden Rahmens festlegen. Zuerst geben Sie dem schwebenden Rahmen einen Namen, damit Sie ihn von den anderen Rahmen unterscheiden können, die Sie der Seite noch hinzufügen werden. Anschließend werden Sie seine Position auf der Seite und seine Größe bestimmen. 6

Achten Sie darauf, dass der schwebende Rahmen ausgewählt ist. Um einen schwebenden Rahmen auszuwählen, bewegen Sie den Mauszeiger über eine Kante des Rahmens, so dass der Mauszeiger sich in eine nach links weisende Handfläche ändert. Dann klicken Sie auf den Rand des Rahmens, um ihn auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Geben Sie im Rahmen-Inspektor folgende Texte und Werte ein: unter »Name« den Text Button01, unter »Links« den Wert 50, unter »Oben« den Wert 76 und für »Breite« und »Höhe« jeweils den Wert 40.

8

Wenn nötig, scrollen Sie im Dokumentfenster nach oben, damit Sie die neue Position und Größe des schwebenden Rahmens betrachten können.

Als Nächstes werden Sie dem schwebenden Rahmen einen Platzhalter für eine Maus-Rollover-Schaltfläche hinzufügen. 9

Klicken Sie in der Objekte-Palette auf den Reiter »Smart« ( ). Ziehen Sie aus der Objekte-Palette einen Platzhalter »Rollover« (Windows) bzw. »Aktives Bild« (Mac OS) in das Dokumentfenster.

Ziehen eines Platzhalters »Rollover« bzw. »Aktives Bild« in den schwebenden Rahmen

241

242 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

Der Inspektor ändert sich in den Rollover-Inspektor. Mit Hilfe des RolloverInspektors lassen sich drei unterschiedliche Bilder für drei unterschiedliche Zustände einer Maus-Rollover-Schaltfläche festlegen: das Aussehen der Schaltfläche im Normalzustand, das Aussehen, wenn Ihr Mauszeiger sich darüber befindet, und das Aussehen, wenn sie angeklickt wird. Zuerst werden Sie ein Bild bestimmen, das im Normalzustand der Schaltfläche angezeigt werden soll. 10 Suchen Sie von der Registerkarte »Dateien« aus die Datei 01_main.gif im Ordner Images. 11 Achten Sie darauf, dass im Bereich »Bild« im Rollover-Inspektor das Symbol »Normal« ausgewählt ist. Ziehen Sie dann von der oberen Schaltfläche »Point & Shoot« ( ) im Rollover-Inspektor auf die Datei 01_main.gif in der Registerkarte »Dateien« im Site-Fenster.

Ziehen von der Schaltfläche »Point & Shoot« auf Bilddatei im Site-Fenster

Der Dateipfad wird im Textfeld im Bereich »Bild« des Rollover-Inspektors dargestellt und das Bild für die Maus-Rollover-Schaltfläche im Dokumentfenster angezeigt. Jetzt werden Sie ein Bild für das Aussehen der Schaltfläche festlegen, wenn sich der Mauszeiger über ihr befindet.

ADOBE GOLIVE 5.0 Classroom in a Book

12 Klicken Sie im Rollover-Inspektor im Bereich Bild auf das Symbol »Cursor«, um es auszuwählen. Klicken Sie anschließend auf das Kontrollkästchen unterhalb der Symbole, die die unterschiedlichen Zustände der Schaltfläche repräsentieren, damit die obere Schaltfläche »Point & Shoot« wieder anwählbar wird. 13 Ziehen Sie im Rollover-Inspektor von der oberen Schaltfläche »Point & Shoot« ( ) auf die Datei 01_over.gif im Ordner Images in der Registerkarte »Dateien« des Site-Fensters.

14 Wählen Sie Datei: Speichern, um die Datei Index.html zu sichern.

Erzeugen zusätzlicher Rollover-Schaltflächen für eine Navigationsleiste Nun werden Sie der Homepage zwei weitere Maus-Rollover-Schaltflächen hinzufügen und dabei auf die gleiche Weise vorgehen, wie beim Hinzufügen der ersten Rollover-Schaltfläche. Damit Sie Ihre Kenntnisse überprüfen können, sind die Anweisungen für das Hinzufügen dieser Rollover-Schaltflächen weniger ausführlich gehalten. Wenn es nötig ist, können Sie unter Erzeugen einer MausRollover-Schaltfläche auf Seite 239 ausführlichere Informationen nachlesen. Sie werden der Homepage zunächst die zweite Rollover-Schaltfläche hinzufügen. 1

Scrollen Sie im Dokumentfenster nach unten, bis Sie sein Ende erreicht haben. Beachten Sie, dass jetzt zwei kleine Symbole in der linken unteren Ecke der Homepage angezeigt werden.

243

244 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

2

Klicken Sie in den Leerraum rechts vom zweiten kleinen Symbol, so dass eine Einfügemarke angezeigt wird.

3

Fügen Sie dem Dokumentfenster mit Hilfe der Registerkarte »Allgemein« in der Objekte-Palette einen dritten schwebenden Rahmen an der Einfügemarke hinzu.

4

Benennen Sie diesen dritten schwebenden Rahmen mit Hilfe des RahmenInspektors mit dem Text Button02, platzieren Sie ihn 90 Pixel vom linken Rand und 76 Pixel vom oberen Rand des Dokumentfensters und legen Sie seine Breite und Höhe mit jeweils 40 Pixeln fest. (Denken Sie daran, dass Sie den schwebenden Rahmen erst auswählen müssen, bevor Sie seine Eigenschaften im Rahmen-Inspektor festlegen können.)

5

Benutzen Sie die Registerkarte »Smart« in der Objekte-Palette und fügen Sie dem schwebenden Rahmen Button02 auf der Seite einen Platzhalter »Aktives Bild« hinzu.

6

Verwenden Sie den Rollover-Inspektor, um die Datei 02_main.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster als Bild für den Zustand »Normal« zu bestimmen.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Legen Sie mit Hilfe des Rollover-Inspektors das Bild für den Zustand »Cursor« fest und wählen Sie dafür die Datei 02_over.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster. (Denken Sie daran, dass Sie zunächst das notwendige Kontrollkästchen im Rollover-Inspektor einschalten müssen, bevor Sie die obere Schaltfläche »Point & Shoot« verwenden können.)

Nun werden Sie der Homepage die dritte Maus-Rollover-Schaltfläche hinzufügen. 8

Scrollen Sie im Dokumentfenster nach unten, bis Sie das Ende erreichen.

9

Klicken Sie in den Leerraum rechts vom dritten kleinen Symbol, so dass eine Einfügemarke angezeigt wird.

10 Fügen Sie dem Dokumentfenster mit Hilfe der Registerkarte »Allgemein« in der Objekte-Palette einen vierten schwebenden Rahmen an der Einfügemarke hinzu. 11 Benennen Sie diesen vierten schwebenden Rahmen mit Hilfe des RahmenInspektors mit dem Text Button03, platzieren Sie ihn 130 Pixel vom linken Rand und 76 Pixel vom oberen Rand des Dokumentfensters und legen Sie seine Breite und Höhe mit jeweils 40 Pixeln fest. 12 Benutzen Sie die Registerkarte »Smart« in der Objekte-Palette und fügen Sie dem schwebenden Rahmen Button03 auf der Seite einen Platzhalter »Aktives Bild« hinzu. 13 Verwenden Sie den Rollover-Inspektor, um die Datei 03_main.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster als Bild für den Zustand »Normal« zu bestimmen.

245

246 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

14 Legen Sie mit Hilfe des Rollover-Inspektors das Bild für den Zustand »Cursor« fest und wählen Sie dafür die Datei 03_over.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster. 15 Wählen Sie Datei: Speichern.

Hinzufügen von Bildern zu schwebenden Rahmen Nun werden Sie der Seite drei Bilder hinzufügen. Jedes der Bilder enthält Text, der je einer der Maus-Rollover-Schaltflächen zugewiesen wird. Genau wie die MausRollover-Schaltflächen werden Sie jedes Bild in einem schwebenden Rahmen platzieren, damit Sie es über dem einzelnen großen Bild auf der Seite positionieren können. Später in dieser Lektion werden Sie jeder Rollover-Schaltfläche dann eine Aktion zuweisen, damit sie das entsprechende Textbild anzeigt, wenn Ihr Mauszeiger sich über ihr befindet. Sie werden jetzt das erste Bild in einem schwebenden Rahmen der Seite hinzufügen. 1

Scrollen Sie im Dokumentfenster nach unten bis zum Ende.

2

Klicken Sie in den Leerraum rechts vom vierten kleinen Symbol, so dass eine Einfügemarke angezeigt wird.

3

Klicken Sie in der Objekte-Palette auf den Reiter »Allgemein« ( ). Ziehen Sie anschließend aus der Objekte-Palette einen Rahmen-Platzhalter auf die Einfügemarke im Dokumentfenster.

Dem Dokumentfenster wird ein fünfter schwebender Rahmen hinzugefügt, und der Inspektor ändert sich in den Rahmen-Inspektor. Nun werden Sie den Rahmen mit Hilfe des Rahmen-Inspektors benennen und seine Position und Größe festlegen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Geben Sie im Rahmen-Inspektor folgende Texte und Werte ein: unter »Name« den Text Text01, unter »Links« den Wert 45, unter »Oben« den Wert 116, unter »Breite« den Wert 300 und unter »Höhe« den Wert 30.

5

Falls nötig, scrollen Sie im Dokumentfenster nach oben, so dass Sie die neue Position und Größe des schwebenden Rahmens Text01 sehen können.

Nun werden Sie dem Rahmen Text01 einen Bildplatzhalter hinzufügen. 6

Ziehen Sie einen Bildplatzhalter aus der Objekte-Palette auf den schwebenden Rahmen im Dokumentfenster.

Der Inspektor ändert sich in den Bild-Inspektor. Jetzt werden Sie den Bildplatzhalter mit einer Bilddatei verknüpfen. 7

Ziehen Sie im Bild-Inspektor von der Schaltfläche »Point & Shoot« ( ) auf die Datei text01.gif im Ordner Images in der Registerkarte »Dateien« im SiteFenster.

Der Dateipfad wird im Textfeld »Quelle« im Bild-Inspektor angezeigt und das Bild wird im Dokumentfenster dargestellt.

247

248 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

Nun werden Sie der Homepage das zweite und dritte Bild zuweisen und dabei genauso vorgehen wie beim Hinzufügen des ersten Bilds. Damit Sie Ihre Kenntnissen überprüfen können, werden die Anweisungen im folgenden Abschnitt weniger ausführlich sein. Falls erforderlich, lesen Sie die entsprechenden ausführlichen Schritte zu Beginn dieses Abschnitts noch einmal. Zuerst fügen Sie der Homepage das zweite Bild zu. 8

Scrollen Sie im Dokumentfenster bis zum Ende nach unten.

9

Klicken Sie in den Leerraum rechts vom fünften kleinen Symbol, so dass eine Einfügemarke angezeigt wird.

10 Verwenden Sie die Registerkarte »Allgemein« in der Objekte-Palette, um einen sechsten schwebenden Rahmen im Dokumentfenster an der Einfügemarke hinzuzufügen. 11 Benutzen Sie den Rahmen-Inspektor, um dem sechsten Rahmen den Namen Text02 zu geben und seine Breite auf 300 Pixel und seine Höhe auf 30 Pixel einzustellen. Sie werden dem Rahmen zunächst ein Bild zuweisen, bevor Sie ihn auf der Seite neu ausrichten. Wenn Sie den Rahmen Text02 auf die gleiche Position verschieben wie den Rahmen Text01, wird der Rahmen Text02 über dem Rahmen Text01 dargestellt. 12 Fügen Sie dem Rahmen Text02 auf der Seite mit Hilfe der Registerkarte »Allgemein« in der Objekte-Palette einen Bildplatzhalter hinzu. 13 Verwenden Sie den Bild-Inspektor, um den Bildplatzhalter mit der Datei text02.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster zu verknüpfen. Jetzt können Sie den Rahmen Text02 neu ausrichten. 14 Bewegen Sie den Mauszeiger über eine Kante des Rahmens, so dass sich der Mauszeiger in eine nach links weisende geöffnete Hand ändert, und klicken Sie dann auf den Rand des Rahmens, um ihn auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

15 Platzieren Sie den Rahmen mit Hilfe des Rahmen-Inspektors 45 Pixel vom linken Rand und 116 Pixel vom oberen Rand des Dokumentfensters.

Festlegen der Position im Rahmen-Inspektor

Ergebnis

Jetzt fügen Sie der Homepage das dritte Bild hinzu. 16 Scrollen Sie im Dokumentfenster nach unten bis zum Ende. 17 Klicken Sie in den Leerraum rechts vom sechsten kleinen Symbol, so dass eine Einfügemarke angezeigt wird. 18 Verwenden Sie die Registerkarte »Allgemein« in der Objekte-Palette, um einen siebten schwebenden Rahmen im Dokumentfenster an der Einfügemarke einzufügen. 19 Benutzen Sie den Rahmen-Inspektor, um dem siebten Rahmen den Namen Text03 zu geben und seine Breite auf 300 Pixel und seine Höhe auf 30 Pixel einzustellen. 20 Fügen Sie dem Rahmen Text03 auf der Seite mit Hilfe der Registerkarte »Allgemein« in der Objekte-Palette einen Bildplatzhalter hinzu. 21 Verwenden Sie den Bild-Inspektor, um den Bildplatzhalter mit der Datei text03.gif im Ordner Images in der Registerkarte »Dateien« im Site-Fenster zu verknüpfen. Jetzt können Sie den Rahmen Text03 neu ausrichten.

249

250 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

22 Wählen Sie den schwebenden Rahmen aus und platzieren Sie ihn mit Hilfe des Rahmen-Inspektors 45 Pixel vom linken Rand und 116 Pixel vom oberen Rand des Dokumentfensters. 23 Wählen Sie Datei: Speichern.

Eine Aktion zum Ein- und Ausblenden von Rahmen hinzufügen Nun werden Sie jeder Maus-Rollover-Schaltfläche je eine Aktion zuweisen, damit ihr verknüpftes Bild eingeblendet wird, wenn Sie Ihren Mauszeiger über die Schaltfläche bewegen, und das Bild wieder ausgeblendet wird, wenn Sie den Mauszeiger wieder von der Schaltfläche wegbewegen. Zunächst werden Sie der ersten Rollover-Schaltfläche auf der Homepage Aktionen zuweisen. 1

Klicken Sie auf die erste Maus-Rollover-Schaltfläche (die linke Schaltfläche), um sie auszuwählen.

2

Wählen Sie Fenster: Aktion, um die Aktionen-Palette aufzurufen.

3

Wählen Sie in der Aktionen-Palette unter »Ereignis« den Eintrag »Mauseintritt«, um eine Aktion festzulegen, die ausgeführt werden soll, wenn der Mauszeiger über die Schaltfläche bewegt wird. Klicken Sie anschließend auf die Schaltfläche »Neue Aktion« ( ), um dem Listenfeld »Aktion« eine neue Aktion hinzuzufügen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Wählen Sie im Popup-Menü »Aktion« Multimedia: Sichtbarkeit. Im PopupMenü »Schweberahmen« wählen Sie den Eintrag »Text01« und im PopupMenü »Modus« den Eintrag »Einblenden«.

Auswählen der Aktion »Sichtbarkeit«

5

Auswählen des Modus »Einblenden«

Wählen Sie in der Aktionen-Palette unter »Ereignis« den Eintrag »Mausaustritt«, um eine Aktion zu bestimmen, die ausgeführt werden soll, wenn der Mauszeiger von der Schaltfläche wegbewegt wird. Klicken Sie anschließend auf die Schaltfläche »Neue Aktion« ( ), um dem Listenfeld »Aktion« eine neue Aktion hinzuzufügen.

251

252 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

6

Wählen Sie im Popup-Menü »Aktion« Multimedia: Sichtbarkeit. Im PopupMenü »Schweberahmen« wählen Sie den Eintrag »Text01« und im PopupMenü »Modus« den Eintrag »Ausblenden«.

Auswählen von Modus »Ausblenden«

Nun werden Sie der zweiten und dritten Maus-Rollover-Schaltfläche auf der Homepage ebenfalls Aktionen zuweisen und dabei genauso vorgehen, wie beim Hinzufügen der ersten Aktion zur ersten Schaltfläche. Damit Sie Ihre Kenntnisse überprüfen können, werden die Anweisungen im folgenden Abschnitt weniger ausführlich sein. Falls erforderlich, lesen Sie noch einmal die entsprechenden ausführlichen Schritte zu Beginn dieses Abschnitts. 7

Wählen Sie die zweite Maus-Rollover-Schaltfläche aus (die mittlere Schaltfläche). Legen Sie mit Hilfe der Aktionen-Palette fest, dass der schwebende Rahmen Text02 eingeblendet werden soll, wenn der Mauszeiger über die Schaltfläche bewegt wird. Bestimmen Sie anschließend, dass der Schweberahmen Text02 ausgeblendet werden soll, wenn der Mauszeiger wieder von der Schaltfläche wegbewegt wird.

8

Wählen Sie die dritte Maus-Rollover-Schaltfläche aus (die rechte Schaltfläche). Legen Sie mit Hilfe der Aktionen-Palette fest, dass der schwebende Rahmen Text03 eingeblendet werden soll, wenn der Mauszeiger über die Schaltfläche bewegt wird. Bestimmen Sie anschließend, dass der Schweberahmen Text03 ausgeblendet werden soll, wenn der Mauszeiger wieder von der Schaltfläche wegbewegt wird.

9

Wählen Sie Datei: Speichern.

ADOBE GOLIVE 5.0 Classroom in a Book

Maus-Rollover-Schaltflächen mit Seiten verknüpfen Gegenwärtig sind die Schaltflächen noch nicht mit anderen Seiten der Website verknüpft, weil die Site bisher nur aus der Homepage besteht. Für diese Lektion werden Sie die blaue Schaltfläche nun mit der Website von Adobe verknüpfen, damit Sie lernen, wie eine Schaltfläche mit einer Seite im Web verknüpft wird. Weitere Informationen über das Hinzufügen von Verknüpfungen auf Seiten finden Sie in Kapitel 5, »Verknüpfungen«. 1

Klicken Sie auf der Homepage auf die blaue Schaltfläche, um sie auszuwählen.

Der Inspektor ändert sich in den Rollover-Inspektor. 2

Geben Sie im Rollover-Inspektor in das Textfeld »URL« den Text http://www.adobe.com ein.

3

Wählen Sie Datei: Speichern.

Hinzufügen einer Aktion, um einen Popup-Menü-Effekt zu erzielen Sie werden nun einen Popup-Menü-Effekt erzeugen. Dazu werden Sie festlegen, dass die erste Maus-Rollover-Schaltfläche in der Navigationsleiste die einzige sichtbare Schaltfläche nach dem Laden der Homepage sein soll. Außerdem werden Sie der ersten Schaltfläche Aktionen zuweisen, die dafür sorgen, dass zwischen Ein- und Ausblenden der beiden anderen Schaltflächen hin- und hergeschaltet wird, wenn auf die erste Schaltfläche geklickt wird. Sie weisen jetzt der ersten Schaltfläche Aktionen zu. 1

Wählen Sie auf der Homepage die erste Schaltfläche aus (die linke Schaltfläche).

2

Wählen Sie in der Aktionen-Palette unter »Ereignis« den Eintrag »Mausklick«, um eine Aktion festzulegen, die ausgeführt werden soll, wenn mit der Maus auf die Schaltfläche geklickt wird. Klicken Sie anschließend auf die Schaltfläche »Neue Aktion« ( ), um dem Listenfeld »Aktion« eine neue Aktion hinzuzufügen.

253

254 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

3

Wählen Sie im Popup-Menü »Aktion« Multimedia: Sichtbarkeit. Im PopupMenü »Schweberahmen« wählen Sie den Eintrag »Button02« und im PopupMenü »Modus« den Eintrag »Wechseln«.

4

Fügen Sie der ersten Maus-Rollover-Schaltfläche mit Hilfe der AktionenPalette eine weitere Aktion hinzu, die bestimmt, dass der Schweberahmen Button03 zwischen Ein- und Ausblenden wechselt, wenn auf die Schaltfläche geklickt wird.

Auswählen von Modus »Wechseln«

Jetzt werden Sie den Popup-Menü-Effekt vervollständigen, indem Sie festlegen, dass der Schweberahmen mit der ersten Maus-Rollover-Schaltfläche und der schwebende Rahmen mit dem animierten GIF-Bild nach dem Laden der Homepage die einzigen sichtbaren Rahmen sind. 5

Wählen Sie Fenster: Rahmen, um die Rahmen-Palette aufzurufen.

6

Wählen Sie in der Rahmen-Palette den Eintrag »Button01« an, um den Rahmen Button01 im Dokumentfenster auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Achten Sie darauf, dass im Rahmen-Inspektor die Option »Sichtbar« ausgewählt ist, die dafür sorgt, dass der Rahmen Button01 nach dem Laden der Seite sichtbar ist.

Auswählen des Rahmens in der Rahmen-Palette

Auswählen der Option »Sichtbar« im Rahmen-Inspektor

8

Wählen Sie in der Rahmen-Palette den Eintrag »Button02« an, um den Rahmen Button02 im Dokumentfenster auszuwählen.

9

Schalten Sie im Rahmen-Inspektor die Option »Sichtbar« aus, damit der Rahmen Button02 nach dem Laden der Seite nicht sichtbar ist.

10 Stellen Sie die Sichtbarkeit aller anderen Rahmen (mit Ausnahme von Button01 und Animation) mit Hilfe der Rahmen-Palette und dem RahmenInspektor so ein, dass sie nach dem Laden der Homepage nicht sichtbar sind. 11 Wählen Sie Datei: Speichern.

Vorschau in einem Webbrowser Nachdem Sie nun mit der Änderung der Homepage der Website Trilobite.com fertig sind, werden Sie die Seite in einem Browser betrachten.

255

256 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

1

Klicken Sie in der Werkzeugleiste auf das Dreieck unten rechts in der Schaltfläche »Im Browser anzeigen« ( ) und wählen Sie im Popup-Menü den gewünschten Browser aus.

Auswählen eines Browsers im Popup-Menü »Im Browser anzeigen«

2

Wenn Sie mit dem Betrachten der Homepage fertig sind, schließen Sie sie und beenden Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Lässt sich eine Maus-Rollover-Schaltfläche unmittelbar einer Seite zuweisen?

2

Nennen Sie zwei Gründe dafür, eine Maus-Rollover-Schaltfläche innerhalb eines Schweberahmens hinzuzufügen.

3

Welchen Zweck hat das kleine Symbol, das angezeigt wird, wenn Sie einer Seite einen schwebenden Rahmen hinzufügen?

4

Welchem Zweck dient der Rollover-Inspektor?

5

Welche Palette verwenden Sie, um einer Maus-Rollover-Schaltfläche eine Aktion zuzuweisen?

6

Welche Objekte auf einer Seite können Sie mit Hilfe der Aktion »Sichtbarkeit« ein- oder ausblenden?

Antworten 1

Ja, Sie können eine Maus-Rollover-Schaltfläche unmittelbar in eine Seite, in ein Layout-Raster, in eine Tabellenzelle oder in einen schwebenden Rahmen einfügen.

2

Sie würden eine Maus-Rollover-Schaltfläche innerhalb eines schwebenden Rahmens einfügen, wenn diese Schaltfläche ein anderes Objekt auf der Seite überlappen soll, wie beispielsweise ein großes Bild. Außerdem würden Sie eine Maus-Rollover-Schaltfläche in einem Schweberahmen hinzufügen, wenn Sie die Schaltfläche mit Hilfe von Aktionen ein- oder ausblenden lassen wollen, die anderen Schaltflächen auf der Seite zugewiesen wurden.

3

Das kleine Symbol markiert die ursprüngliche Position des Schweberahmens auf der Seite. Sie können das Symbol auswählen, um den Rahmen auszuwählen.

4

Der Rollover-Inspektor lässt sich dazu benutzen, drei unterschiedliche Bilder für drei unterschiedliche Zustände einer Maus-Rollover-Schaltfläche zu bestimmen: wie die Schaltfläche im Normalzustand aussieht, wie die Schaltfläche aussieht, wenn sich der Mauszeiger über ihr befindet, und wie sie aussieht, wenn sie angeklickt wird. Außerdem lässt sich die Maus-RolloverSchaltfläche mit Hilfe des Rollover-Inspektors mit einer Webseite verknüpfen.

257

258 LEKTION 7 Erzeugen von Maus-Rollover-Effekten

5

Sie können die Aktionen-Palette verwenden, um einer Maus-Rollover-Schaltfläche eine Aktion zuzuweisen.

6

Mit Hilfe der Aktion »Sichtbarkeit« lassen sich schwebende Rahmen ein- oder ausblenden.

Lektion 8

8 Erzeugen von Animationen

Adobe GoLive unterstützt Dynamic HTML, damit Sie Ihren Webseiten Animationen hinzufügen können. Auf diese Weise lassen sich schwebende Rahmen so animieren, dass ihr Inhalt auf der Seite bewegt werden kann. Sie können die Schweberahmen sogar zunächst vor- und dann hintereinander bewegen.

262 LEKTION 8 Erzeugen von Animationen

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Ändern der Ebenen von Schweberahmen • Erzeugen von Animationen mit einem einzelnen und mit mehreren Schweberahmen • Verwenden von Aktionen, um Animationen Blendeneffekte hinzuzufügen • Erzeugen mehrerer Animationsszenen • Verwenden von Aktionen, um mehrere Szenen auf einer Webseite zu steuern Für diese Lektion werden Sie etwa eine Stunde benötigen. Kopieren Sie, falls nötig, den Ordner Lesson08 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

Vorbereitungen Sie werden diese Lektion damit beginnen, die fertig gestellten Webseiten der Site poetrypond.com zu betrachten, einer fiktiven Website einer internationalen Dichtervereinigung. 1

Starten Sie einen DHTML-fähigen Webbrowser, wie beispielsweise Netscape Communicator 4 oder Microsoft Internet Explorer 4. (Wenn der Browser nicht DHTML-fähig ist, können Animationen oder Aktionen nicht dargestellt werden.)

2

Öffnen Sie im Browser die Webseite Index.html im Pfad Lesson08/08End/Poetry Folder/Poetry/Index.html.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie auf die Verknüpfung Poetry Sampler oben auf der Webseite Index.html, um auf die Seite Poetry Sampler zu gelangen.

Mit der Seite Poetry Sampler sind vier weitere Seiten verknüpft, von denen jede eine Vielzahl von Schweberahmen und Animationseffekten enthält. Klicken Sie auf die Verknüpfungen, um die Seiten zu erkunden. Sie werden in dieser Lektion der Reihe nach in jeder der Seiten arbeiten und dabei einige der vorhandenen Animationen verändern und neue erzeugen. 4

Wenn Sie mit dem Betrachten der Website fertig sind, beenden Sie Ihren Browser.

Arbeiten mit schwebenden Rahmen In Lektion 3, Entwerfen von Webseiten, haben Sie gelernt, wie schwebende Rahmen zu Seiten hinzugefügt werden. Jetzt werden Sie lernen, wie zwei schwebende Rahmen überlappt werden und wie Sie ihre Stapelreihenfolge steuern können. In diesem Teil der Lektion werden Sie zwei Rahmen erzeugen und der Seite Forever hinzufügen (die erste Verknüpfung auf der Seite Poetry Sampler). Einen der beiden Rahmen werden Sie mit Text versehen, den anderen mit einem Bild. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Website poetrypond.com im Pfad Lesson08/08Start/Poetry Folder/Poetry.site.

263

264 LEKTION 8 Erzeugen von Animationen

3

Doppelklicken Sie auf die Datei Forever.html im Ordner Pages im Site-Fenster, um diese Webseite zu öffnen.

4

Klicken Sie in der Objekte-Palette auf den Reiter »Allgemein«( ).

Als Nächstes werden Sie den Anker für den Schweberahmen zwischen der Bannergrafik oben auf der Seite und dem Gedicht platzieren. Dafür müssen Sie die Einfügemarke unmittelbar hinter die Bannergrafik setzen. Das ist am einfachsten, wenn Sie den Mauszeiger auf die rechte Seite der Bannergrafik bewegen. Da Adobe GoLive den Anker nicht direkt auf der Bannergrafik platzieren kann, wird der Anker auf den nächsten verfügbaren Platz hinter der Grafik platziert.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Ziehen Sie den Platzhalter »Rahmen« aus der Objekte-Palette auf die rechte Seite der Bannergrafik auf der Webseite.

Platzhalter »Rahmen« ziehen

Ergebnis

Der Inspektor ändert sich in den Rahmen-Inspektor. In diese schwebenden Rahmen lassen sich Text, Bilder, JavaScript-Funktionen und QuickTime-Movies platzieren. Sie werden nun in diesen Schweberahmen Text einfügen. 6

Klicken Sie in den Rahmen und geben Sie den Text Forever Four ein, die Überschrift des Gedichtes.

265

266 LEKTION 8 Erzeugen von Animationen

7

Ziehen Sie mit gedrückter Maustaste über den Text, um ihn auszuwählen.

8

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Fett« ( / ) und wählen Sie aus dem Menü »Schriftgröße« ( ) den Eintrag 6 aus.

9

Wählen Sie Text: Schrift: Arial als Schrift.

10 Bewegen Sie den Zeiger auf den Rahmen, bis der Zeiger sich in eine nach links weisende Handfläche ändert, und klicken Sie anschließend, um den schwebenden Rahmen auszuwählen. Geben Sie im Rahmen-Inspektor im Textfeld »Name« den Text Title ein. Auf diese Weise geben Sie dem Rahmen einen Namen, damit das Arbeiten mit mehreren Rahmen übersichtlicher und einfacher wird. Sie können den Rahmen in der Größe anpassen, damit die Überschrift in eine Zeile passt. 11 Bewegen Sie den Mauszeiger auf die untere rechte Ecke des Rahmens. 12 Sobald der Zeiger sich in einen Pfeil ändert, ziehen Sie die Ecke des Rahmens so weit, bis beide Wörter des Titels in dieselbe Zeile passen. Ziehen Sie den Rahmen nochmals, damit er nahe am Text verläuft.

ADOBE GOLIVE 5.0 Classroom in a Book

13 Geben Sie im Textfeld »Links« im Rahmen-Inspektor den Wert 185 ein und drücken Sie die Eingabetaste. Geben Sie anschließend im Textfeld »Oben« den Wert 125 ein und drücken Sie die Eingabetaste, um die genaue Position des Rahmens festzulegen. Damit haben Sie ihren ersten schwebenden Rahmen fertig gestellt. 14 Wählen Sie Datei: Speichern.

Schwebende Rahmen stapeln Jetzt werden Sie einen zweiten Rahmen hinzufügen, der ein Bild aufnehmen wird. 1

Ziehen Sie den Platzhalter »Rahmen« aus der Objekte-Palette auf die Position unmittelbar rechts neben den kleinen gelben Anker des ersten Schweberahmens. (Sie können sicher sein, auf die korrekte Position gezogen zu haben, wenn rechts vom ersten Rahmenanker eine blinkende vertikale Einfügemarke dargestellt wird. Das Ergebnis sollte so aussehen, wie in der folgenden Illustration dargestellt.)

2

Geben Sie im Textfeld »Name« des Rahmen-Inspektors den Text Duck ein, damit Sie den Rahmen vom vorher eingefügten Überschrift-Rahmen unterscheiden können.

267

268 LEKTION 8 Erzeugen von Animationen

3

Ziehen Sie den Platzhalter »Bild« aus der Objekte-Palette auf den soeben erzeugten schwebenden Rahmen.

Der Bildplatzhalter befindet sich nun innerhalb des Rahmens und der Inspektor ändert sich in den Bild-Inspektor. Jetzt werden Sie den Bildplatzhalter mit einer Bilddatei verbinden. 4

Halten Sie die Alt-Taste (Windows) bzw. die Befehlstaste (Mac OS) gedrückt und ziehen Sie vom Bildplatzhalter der Webseite auf die Datei Duck.gif im Ordner Media im Site-Fenster. (Diese Methode führt zum gleichen Ergebnis wie das Ziehen von der Schaltfläche »Point & Shoot« im Bild-Inspektor auf eine Datei im Site-Fenster.)

Im Schweberahmen wird nun das Bild einer Ente dargestellt. Diesmal werden Sie den Rahmen mit der Maus ziehen, um ihn zu platzieren, anstatt Positionswerte im Rahmen-Inspektor einzugeben. 5

Klicken Sie auf eine Seite des neuen Schweberahmens, um ihn auszuwählen. Vergewissern Sie sich, dass der Rahmen ausgewählt ist und nicht das Bild in ihm. Sie können sicher sein, den Rahmen ausgewählt zu haben, wenn der Mauszeiger zu einer nach links weisenden Handfläche wird.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Ziehen Sie den neuen Rahmen so weit, bis sich seine rechte Seite unmittelbar neben dem linken Rand des Gedichts befindet und seine Oberkante mit der Überschrift Forever Four abschließt. Die Ente versperrt nun den Blick auf einen Teil der Überschrift.

7

Wählen Sie Datei: Speichern.

Beachten Sie, dass Sie auf dieser Seite kein Layout-Raster benutzt haben, um Objekte präzise anzulegen. Das liegt daran, dass schwebende Rahmen Ihnen das Verschieben von Objekten ohne die Notwendigkeit von Tabellen oder LayoutRastern ermöglichen. Tatsächlich könnte es sein, dass durch die zunehmende Verbreitung und Verwendung von HTML-4.0-fähigen Anwendungen die Notwendigkeit von Tabellen zum Platzieren von Elementen nach und nach zurückgeht.

269

270 LEKTION 8 Erzeugen von Animationen

Ändern der Stapelreihenfolge Sie können die Reihenfolge ändern, in der die Rahmen übereinander dargestellt bzw. gestapelt werden. Sie werden in diesem Beispiel die Stapelreihenfolge so ändern, dass der Rahmen mit der Überschrift über dem Rahmen mit dem Entenbild liegt. Die Stapelreihenfolge wird anfangs durch die Lage der Anker auf der Webseite bestimmt. Das heißt, je weiter unten und rechts auf der Seite sich der Anker eines Rahmens im Verhältnis zu anderen befindet, desto höher bzw. weiter vorne befindet er sich im Stapel. Allerdings können Sie durch Festlegen der Tiefe im Rahmen-Inspektor die voreingestellte Stapelreihenfolge aufheben. Die Ziffer, die im Rahmen in der Ecke unten rechts dargestellt wird, zeigt die Reihenfolge an, in der der Rahmen der Seite hinzugefügt wurde. 1

Wählen Sie den schwebenden Rahmen mit der Ente aus. (Denken Sie daran: Der Rahmen ist ausgewählt, wenn die Handfläche nach links weist.)

2

Geben Sie im Rahmen-Inspektor im Textfeld »Tiefe« den Wert 1 ein und drücken Sie die Eingabetaste.

3

Wählen Sie die rechte Seite des schwebenden Rahmens mit dem Text Forever Four an (da, wo er nicht von dem anderen Rahmen verdeckt wird).

4

Geben Sie im Rahmen-Inspektor im Textfeld »Tiefe« den Wert 2 ein und drücken Sie die Eingabetaste.

ADOBE GOLIVE 5.0 Classroom in a Book

Da der Rahmen mit der Überschrift nun eine höhere Ziffer aufweist, wird er in der Stapelreihenfolge nach vorne bzw. oben bewegt.

5

Wählen Sie Datei: Speichern.

6

Schließen Sie die Seite Forever.html.

Animieren eines schwebenden Rahmens In diesem Teil der Lektion werden Sie lernen, wie sich ein Schweberahmen so animieren lässt, dass er sich über die Seite bewegt. Dafür werden Sie mit der Seite Night.html arbeiten, der zweiten Verknüpfung der Seite Poetry Sampler. Diese Seite enthält das Bild eines singenden Vogels, etwas Text und einen schwebenden Rahmen mit dem Bild mehrerer Noten. Sie werden nun eine Animation erzeugen, die diese Noten über die Seite verschiebt. Zunächst müssen Sie allerdings Ihrer Seite eine spezielle Aktion zuweisen, damit sichergestellt wird, dass die Animation auch in allen Browsern korrekt dargestellt wird.

271

272 LEKTION 8 Erzeugen von Animationen

Hinzufügen einer Head-Aktion, um Animationen korrekt darzustellen Netscape Navigator enthält einen Programmfehler, der dazu führt, dass Webseiten Schwierigkeiten bei der Darstellung von Animationen haben, wenn Betrachter die Größe der Seite ändern. Sie können der Seite eine Head-Aktion zuweisen, die dieses Problem verhindert. Wir empfehlen, diese Aktion allen Seiten hinzuzufügen, die animierte Schweberahmen enthalten (wir haben diese Aktion bereits allen anderen Seiten hinzugefügt, die Sie in dieser Lektion verwenden werden). 1

Doppelklicken Sie auf die Datei Night.html im Ordner Pages im Site-Fenster, um die Webseite zu öffnen.

2

Klicken Sie im Dokumentfenster oben auf das Dreieck neben dem Seitensymbol ( ), um den Bereich »Head-Abschnitt« einzublenden.

Ergebnis nach dem Klicken auf Dreieck

3

Klicken Sie in der Objekte-Palette auf den Reiter »Smart« ( ).

4

Ziehen Sie das Symbol »Head-Aktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) aus der Objekte-Palette in den Head-Abschnitt des Dokumentfensters.

Der Inspektor ändert sich in den Aktion-Inspektor.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Wählen Sie im Aktion-Inspektor aus dem Menü »Ausf.« den Eintrag »OnLoad« (das entspricht der Voreinstellung). Wählen Sie anschließend aus dem Menü »Aktion« Sonstige: Netscape Fehlerbeheb CSS.

6

Klicken Sie auf das Dreieck neben dem Seitensymbol im Head-Abschnittsbereich des Dokumentfensters, um den Head-Abschnitt zu schließen.

7

Wählen Sie Datei: Speichern.

Verwenden von Keyframes Keyframes bezeichnen bestimmte Punkte (Frames) auf der Zeitlinie der Animation. Sie fügen diese Keyframes im Zeitachsen-Editor hinzu. Danach wählen Sie einen Keyframe aus und bewegen den Rahmen auf eine Position der Webseite. Wenn dann später die Animation abläuft und der Zeitcursor den Keyframe erreicht, bewegt sich der Rahmen auf die vorher festgelegte Position auf der Webseite. 1

Klicken Sie oben rechts im Dokumentfenster auf die Schaltfläche »DHTMLZeitachsen-Editor öffnen«( ).

273

274 LEKTION 8 Erzeugen von Animationen

Der Zeitachsen-Editor wird aufgerufen. Der Zeitachsen-Editor ermöglicht Ihnen während des Aufbaus und des Ausprobierens einer Animation die präzise Steuerung jedes einzelnen Frames in der Animation. Der Zeitachsen-Editor enthält für jeden schwebenden Rahmen auf der Webseite eine Animationsspur, oder auch Zeitspur genannt. Diese Animation hat eine Zeitspur für den Schweberahmen mit den Musiknoten. A

B

C D E

F

G

H

I

A. Frame-Markierungen B. Zeitcursor C. Aktionen-Spur D. Zeitspur für Schweberahmen E. Erster Keyframe F. Schaltfläche »Schleife« G. Schaltfläche »Palindrom« (»vor und zurück«) H. Schaltfläche »Abspielen« I. Menü »Frames pro Sekunde«

2

Klicken Sie auf den Anfangs-Keyframe in der Zeitachse, um ihn auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie den Rahmen mit den Musiknoten aus. (Sie erinnern sich: Die Handfläche weist nach links, wenn der Rahmen ausgewählt ist.)

Hinweis: Unter Windows müssen Sie während der ganzen Lektion jeweils einmal in das Dokumentfenster klicken, bevor Sie den Rahmen bewegen können. Klicken Sie anschließend wieder in den Zeitachsen-Editor, um ihn zu aktivieren, bevor Sie dort Frames bewegen oder einfügen.

4

Ziehen Sie nun bei ausgewähltem Keyframe den schwebenden Rahmen mit den Noten unmittelbar rechts an den Schnabel der Nachtigall. Damit wird festgelegt, wo sich der Rahmen befinden soll, wenn die Animation beginnt.

275

276 LEKTION 8 Erzeugen von Animationen

Nun werden Sie einen weiteren Keyframe hinzufügen und den schwebenden Rahmen auf seine nächste Position in der Animation bewegen. 5

Klicken Sie mit gedrückter Strg- (Windows) bzw. Befehlstaste (Mac OS) in die Zeitspur, um einen weiteren Keyframe an der Frame-Marke 30 hinzuzufügen. (Falls der Keyframe nicht an der richtigen Frame-Marke platziert wurde, können Sie ihn an die korrekte Position ziehen.)

6

Ziehen Sie den Schweberahmen unmittelbar unter die rechte Ecke des Banners.

Jetzt können Sie die Animation abspielen.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Klicken Sie unten links im Zeitachsen-Editor auf die Schaltfläche »Abspielen« ( ). Wenn Sie sich bereits am Ende der Animation befinden, müssen Sie die Schaltfläche »Abspielen« zweimal anklicken, um die Animation wieder vom Anfang an zu beginnen.

Die Animation wird einmal abgespielt und hält dann an. Jetzt werden Sie die Animation in einer Schleife vor und zurück abspielen lassen und ihre Geschwindigkeit ändern. 8

Klicken Sie im Zeitachsen-Editor auf die Schaltfläche »Loop« bzw. »Schleife«( ) und anschließend auf die Schaltfläche »Abspielen«, um die Animation ständig wiederholen zu lassen. Klicken Sie danach im ZeitachsenEditor auf die Schaltfläche »Palindrom« ( ), um die Animation vor und zurück abspielen zu lassen.

9

Wählen Sie unten im Zeitachsen-Editor unterschiedliche Geschwindigkeiten aus dem Menü »FPS« (Frames pro Sekunde), um die Animation schneller oder langsamer abspielen zu lassen.

10 Wenn Sie mit dem Ausprobieren fertig sind, wählen Sie im Popup-Menü »Frames pro Sekunde« den Eintrag 20 FPS. 11 Klicken Sie auf die Schaltfläche »Stop« (

), um die Animation anzuhalten.

12 Wählen Sie Datei: Speichern.

Bearbeiten von Keyframes 1

Klicken Sie mit gedrückter Strg- (Windows) bzw. Befehlstaste (Mac OS) in die Zeitspur, um zwei weitere Keyframes zwischen die beiden vorhandenen einzufügen, einen an der Frame-Marke 10 und den zweiten an der FrameMarke 20.

277

278 LEKTION 8 Erzeugen von Animationen

2

Wählen Sie den Keyframe an der Frame-Marke 10 aus und ziehen Sie den Rahmen etwa in die Mitte unter das Banner.

3

Wählen Sie den Keyframe an der Frame-Marke 20 aus und ziehen Sie den Rahmen näher an die Titelzeile des Gedichtes heran.

4

Klicken Sie auf die Schaltfläche »Abspielen« ( abzuspielen.

5

Klicken Sie auf die Schaltfläche »Stop« (

), um die Animation erneut

), um die Animation anzuhalten.

Damit der Schweberahmen den Eckpunkten nicht so statisch von Keyframe zu Keyframe folgt, werden Sie den Animation-Pfad nun etwas glätten.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Klicken Sie mit gedrückter Umschalttaste jeden einzelnen Keyframe an oder ziehen Sie mit gedrückter Maustaste über die Keyframes, um alle vier Keyframes auszuwählen.

Hinweis: Falls Sie mit der gedrückten Maustaste ziehen wollen, müssen Sie erst den Zeitcursor bewegen, bis er mit einem der Keyframes in der Animation ausgerichtet ist. Durch Anklicken eines Keyframes können Sie den Zeitcursor direkt auf diesen Keyframe bewegen.

7

Wählen Sie im Popup-Menü »Animation« im Rahmen-Inspektor den Eintrag »Kurve« aus.

8

Spielen Sie die Animation ab. Sie werden feststellen, dass die Bewegung nun viel weicher abläuft.

279

280 LEKTION 8 Erzeugen von Animationen

9

Halten Sie die Animation an.

10 Wählen Sie Datei: Speichern. 11 Schließen Sie den Zeitachsen-Editor und die Webseite Night.html.

Animieren von mehreren schwebenden Rahmen Da Sie nun das Animieren eines einzelnen schwebenden Rahmens kennen gelernt haben, sind Sie bereit für das Animieren mehrerer Schweberahmen. In diesem Teil der Lektion werden Sie eine Animation auf der Seite Haiku.html ändern, der dritten Verknüpfung der Seite Poetry Sampler. 1

Doppelklicken Sie auf die Datei Haiku.html im Ordner Pages im Site-Fenster, um die Webseite zu öffnen.

Diese Seite enthält bereits folgende Objekte:

• Einen großen schwebenden Rahmen (Poem), der die Bilder eines Gedichts, eines Teiches und von Schilf enthält.

ADOBE GOLIVE 5.0 Classroom in a Book

• Einen animierten Schweberahmen (Jumper) mit dem Bild eines springenden Frosches. Dieser animierte Schweberahmen wird zum Ende unsichtbar (bevor er wieder in einer Schleife abgespielt wird) und enthält einen Übergangseffekt, der Wipe genannt wird. Sie werden später in dieser Lektion lernen, wie Sie solche Effekte erzeugen können. • Einen schwebender Rahmen (Dragonfly) mit dem Bild einer Libelle. Für diese Aufgabe werden Sie den Schweberahmen Dragonfly so animieren, dass er sich erst vor und dann hinter dem Schilf bewegt. 2

Klicken Sie oben rechts im Dokumentfenster auf die Schaltfläche »DHTMLZeitachsen-Editor öffnen« ( ), um den Zeitachsen-Editor aufzurufen.

Sie werden feststellen, dass der Zeitachsen-Editor für jeden schwebenden Rahmen auf der Seite eine eigene Spur darstellt. Auf diese Weise können Sie jeden Rahmen einzeln animieren. Die Ziffer in der Ecke unten rechts eines jeden Schweberahmens entspricht der Ziffer der Spur im Zeitachsen-Editor.

3

Klicken Sie auf den ersten Keyframe in Spur 1, um ihn auszuwählen. Der Schweberahmen Dragonfly wird auch auf der Webseite ausgewählt.

Da Sie ausschließlich mit dem Schweberahmen Dragonfly arbeiten werden, können Sie die übrigen beiden Schweberahmen mit Hilfe der Rahmen-Palette auf ihren Positionen vorübergehend sperren, damit Sie sie nicht versehentlich auswählen oder verschieben. 4

Wenn nötig wählen Sie Fenster: Rahmen, um die Palette aufzurufen.

281

282 LEKTION 8 Erzeugen von Animationen

5

Klicken Sie in der Rahmen-Palette auf die Bleistift-Symbole neben Poem und Jumper, so dass sie verblasst dargestellt werden. Jetzt sind die Rahmen Poem und Jumper für den aktuellen Keyframe auf ihrer Position gesperrt.

6

Klicken Sie auf das Dokumentfenster, um es zu aktivieren, und ziehen Sie den Schweberahmen Dragonfly auf eine Position zentriert über dem Schweberahmen Poem.

7

Klicken Sie mit gedrückter Strg- (Windows) bzw. Befehlstaste (Mac OS) in die Zeitspur, um einen zweiten Keyframe für den Rahmen auf der Frame-Marke 20 im Zeitachsen-Editor zu erzeugen.

ADOBE GOLIVE 5.0 Classroom in a Book

8

Ziehen Sie den Schweberahmen Dragonfly im Dokumentfenster nach rechts unten rechts vom Schilf.

Beachten Sie, dass die anderen Rahmen ebenfalls auf ihren Positionen für FrameMarke 20 dargestellt wurden, als Sie den entsprechenden Keyframe ausgewählt haben.

9

Klicken Sie mit gedrückter Strg-/Befehlstaste, um einen dritten Keyframe für den schwebenden Rahmen auf Frame-Marke 40 zu erzeugen.

283

284 LEKTION 8 Erzeugen von Animationen

10 Wählen Sie den Keyframe aus und ziehen Sie den Schweberahmen zurück auf seine Anfangsposition in der Mitte der Seite.

Um den Rahmen auf dieselbe Anfangsposition zu ziehen, können Sie den ersten Keyframe (auf Frame-Marke 0) auswählen und sich die linken und oberen Koordinaten aus dem Rahmen-Inspektor notieren. Anschließend wählen Sie den Keyframe auf Frame-Marke 40 aus und geben die Koordinaten des Keyframes auf FrameMarke 0 ein. Oder klicken Sie mit gedrückter Alt- (Windows) bzw. Optionstaste (Mac OS) auf den ersten Keyframe und ziehen Sie anschließend auf den Frame auf Frame-Marke 40, um einen neuen Keyframe mit den gleichen Koordinaten zu erzeugen. 11 Spielen Sie die Animation ab. Die Libelle fliegt vor das Schilf und wieder zurück und der Frosch springt in den Teich. Jetzt werden Sie die Libelle hinter dem Schilf zurückfliegen lassen, wenn sie wieder von rechts nach links zurückfliegt.

ADOBE GOLIVE 5.0 Classroom in a Book

12 Halten Sie die Animation an. 13 Klicken Sie auf den ersten Keyframe der Spur 2, das ist die Spur für den Schweberahmen, der das Schilf enthält. 14 Geben Sie im Rahmen-Inspektor im Textfeld »Tiefe« den Wert 2 ein. Damit legen Sie die Tiefe des Schweberahmens Poem (der das Schilf enthält) in der Stapelreihenfolge der Schweberahmen auf der Seite fest. Durch das Bestimmen der Tiefe 2 erlangen Sie den Spielraum, dem schwebenden Rahmen Dragonfly eine höhere oder niedrigere Tiefe zuzuweisen. 15 Klicken Sie auf den ersten Keyframe im Rahmen Dragonfly (er ist in Spur 1), um ihn auszuwählen. Geben Sie im Rahmen-Inspektor im Textfeld »Tiefe« den Wert 3 ein und drücken Sie die Eingabetaste.

16 Wählen Sie den zweiten Keyframe in dieser Spur, geben Sie im Textfeld »Tiefe« den Wert 1 ein und drücken Sie die Eingabetaste. Die niedrigere Tiefe wird den Rahmen Dragonfly beginnend mit diesem Keyframe hinter das Schilf bringen. 17 Wählen Sie den letzten Keyframe auf der Spur des Rahmens Dragonfly, geben Sie im Textfeld »Tiefe« den Wert 3 ein und drücken Sie die Eingabetaste. Auf diese Weise wird der Rahmen Dragonfly in der Stapelreihenfolge wieder über bzw. vor das Schilf gebracht. 18 Spielen Sie die Animation ab.

285

286 LEKTION 8 Erzeugen von Animationen

Sie werden feststellen, dass die Libelle jetzt das Schilf zu umrunden scheint, indem sie zunächst vor dem Schilf und dann dahinter fliegt. 19 Halten Sie die Animation an und wählen Sie Datei: Speichern. 20 Schließen Sie den Zeitachsen-Editor und die Datei Haiku.html.

Hinzufügen von Aktionen zu Animationen Aktionen sind vorgefertigte Skripts, mit denen Sie Vorgänge auslösen und verschiedene Prozesse auf der Webseite steuern können. Aktionen lassen sich mit Text, Bildern und Schweberahmen verbinden. Sie können mit Hilfe von Animationen Übergangseffekte für schwebende Rahmen steuern und festlegen, welche Animationen auf einer Seite abgespielt werden (weitere Informationen finden Sie in Kapitel 9, Verwenden von Aktionen und JavaScript). In diesem Teil der Übung werden Sie zwei animierten Schweberahmen auf der Seite Prince.html (der letzten Verknüpfung der Seite Poetry Sampler) Aktionen zuweisen. Diese Schweberahmen enthalten ein Gedicht und eine Gedichtüberschrift. Nach dem Laden der Seite sind die Rahmen zunächst unsichtbar. Nachdem die Animation begonnen hat, erscheint zunächst der Rahmen mit der Überschrift und bewegt sich nach rechts, anschließend wird das Gedicht selbst sichtbar. Die Aktionen, die Sie zuweisen werden, sorgen dafür, dass beide Rahmen nach und nach abgestuft auf der Seite sichtbar werden.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Doppelklicken Sie auf die Datei Prince.html im Ordner Pages im Site-Fenster, um diese Webseite zu öffnen.

2

Klicken Sie oben rechts im Dokumentfenster auf die Schaltfläche »DHTMLZeitachsen-Editor öffnen« ( ), um den Zeitachsen-Editor aufzurufen.

Diese Animation enthält zwei Zeitspuren. Spur 1 steuert den schwebenden Rahmen, der die Überschrift des Gedichts enthält und Spur 2 steuert den Schweberahmen mit dem Gedicht. Beachten Sie, dass im ersten Frame der Animation beide Keyframes abgeblendet sind. Das bedeutet, dass die Schweberahmen in diesem Frame nicht sichtbar sind. Die Sichtbarkeit eines Schweberahmens steuern Sie mit Hilfe des Kontrollkästchens »Sichtbar« im Rahmen-Inspektor.

287

288 LEKTION 8 Erzeugen von Animationen

3

Wählen Sie den ersten Keyframe in Spur 1 aus. Schalten Sie im RahmenInspektor das Kontrollkästchen »Sichtbar« ein. Sie werden feststellen, dass der Keyframe vollständig sichtbar wird und der Rahmen mit der Überschrift im Dokumentfenster sichtbar wird. Schalten Sie das Kontrollkästchen »Sichtbar« nun wieder aus, um den Schweberahmen auszublenden.

4

Klicken Sie im Zeitachsen-Editor auf die Schaltfläche »Abspielen« ( ). Beachten Sie, wie die Überschrift in der Animation bei Frame 10 plötzlich sichtbar wird und sich über die Seite bewegt. Bei Frame 50 erscheint dann auch der Text des Gedichts.

5

Verwenden Sie die Bildlaufleiste unten im Zeitachsen-Editor, um zum ersten Frame der Animationsspur zu gelangen.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Klicken Sie in der Spur 1 im Zeitachsen-Editor auf den Keyframe bei Frame 10, um ihn auszuwählen. Beachten Sie, dass der Schweberahmen nun die Überschrift darstellt. Sie werden nun eine Aktion zuweisen, die dafür sorgt, dass die Überschrift nach und nach sichtbar wird, während sie sich von links nach rechts über die Seite bewegt.

7

Klicken Sie im Zeitachsen-Editor mit gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac OS) unmittelbar über dem Keyframe bei Frame 10 in die Aktionsspur (die graue Spur).

Der Inspektor ändert sich in den Aktion-Inspektor. 8

Wählen Sie im Menü »Aktion« im Aktion-Inspektor den Eintrag Multimedia: Blende.

9

Wählen Sie im Menü »Schweberahmen« den Eintrag Title, um diesen Rahmen auszuwählen.

289

290 LEKTION 8 Erzeugen von Animationen

10 Wählen Sie im Menü »Blendeneffekt« den Eintrag »Einblenden von oben nach unten«, um den gewünschten Blendeneffekt zu bestimmen. Geben Sie anschließend im Textfeld »Schrittzahl« den Wert 30 ein, um den Blendeneffekt über 30 Schritte auszuweiten. (Je mehr Schritte, desto länger und weicher fällt der Blendeneffekt aus.)

11 Wählen Sie Datei: Speichern, um die Seite zu sichern. Nun werden Sie der Zeitspur des Schweberahmens mit dem Gedicht eine Aktion zuweisen. 12 Verwenden Sie die Bildlaufleiste unten im Zeitachsen-Editor, um auf den Frame 50 der Animationsspur zu gelangen. 13 Wählen Sie in Spur 2 des Zeitachsen-Editors den Keyframe bei Frame 50 aus. Der Schweberahmen zeigt nun sowohl das Gedicht als auch die Überschrift darüber an. Sie werden jetzt eine Aktion zuweisen, die dafür sorgt, dass das Gedicht Zeile für Zeile von oben nach unten erscheint, statt plötzlich eingeblendet zu werden.

ADOBE GOLIVE 5.0 Classroom in a Book

14 Klicken Sie mit gedrückter Strg- (Windows) bzw. Befehlstaste (Mac OS) oberhalb des Keyframes auf der Frame-Marke 50 in die Aktionsspur im Zeitachsen-Editor.

15 Wählen Sie im Menü »Aktion« im Aktion-Inspektor den Eintrag Multimedia: Blende. 16 Wählen Sie im Menü »Schweberahmen« den Eintrag Poem, um diesen Rahmen auszuwählen. 17 Wählen Sie im Menü »Blendeneffekt« den Eintrag »Einblenden von oben nach unten«, um den gewünschten Blendeneffekt zu bestimmen. Geben Sie anschließend im Textfeld »Schrittzahl« den Wert 15 ein, um den Blendeneffekt zu verlangsamen. 18 Wählen Sie Datei: Speichern, um die Seite zu sichern. 19 Klicken Sie auf die Schaltfläche »Im Browser anzeigen«. Starten Sie einen Webbrowser, der DHTML unterstützt, wie zum Beispiel Netscape Communicator 4.0 oder Microsoft Internet Explorer 4.0. Betrachten Sie die Aktionen, die Sie den animierten Schweberahmen hinzugefügt haben. Sie werden feststellen, dass die Überschrift nun feiner abgestuft erscheint und dabei von links nach rechts eingeblendet wird. Das Gedicht wird nun abgestuft von oben nach unten eingeblendet.

291

292 LEKTION 8 Erzeugen von Animationen

Erzeugen einer neuen Szene Die Animation, mit der Sie bisher gearbeitet haben, wird auch Szene genannt. In Adobe GoLive kann eine Webseite mehrere Szenen enthalten. Alle Szenen teilen sich das gleiche Dokumentfenster und die gleichen Schweberahmen. Allerdings können Sie die schwebenden Rahmen in jeder Szene auf andere Positionen setzen und ihnen unterschiedliche Verhalten zuweisen. Außerdem lassen sich Aktionen verwenden, um Szenen zu beginnen und anzuhalten oder um unterschiedliche Szenen der Reihe nach abzuspielen. Im letzten Teil der Lektion werden Sie der Seite Prince.html eine zweite Animationsszene hinzufügen. Es wird eine kurze Animation sein, die dafür sorgt, dass der schwebende Rahmen mit der Überschrift ausgeblendet wird. Anschließend werden Sie eine Aktion erzeugen, die die Szene abspielt. Dafür werden Sie die Aktion so einstellen, dass sie durch das Frosch-Rollover-Bild ausgelöst wird. 1

Klicken Sie in den Zeitachsen-Editor der Seite Prince.html, um ihn zu aktivieren.

2

Klicken Sie im Zeitachsen-Editor auf das Popup-Menü »Optionen« ( Unten im Menü wird der Name der aktuellen Szene angezeigt: Scene 1. Wählen Sie im Menü den Eintrag »Neue Szene«.

3

Geben Sie im Dialogfenster »Neue Szene« einen neuen Namen ein, und klicken Sie auf OK. (Wir haben den Namen Scene 2 eingegeben.)

).

Der Zeitachsen-Editor stellt eine neue Zeitachse für Scene 2 dar. Beachten Sie, dass die Zeitlinie Anfangs-Frames für die beiden Schweberahmen aus Scene 1 enthält.

ADOBE GOLIVE 5.0 Classroom in a Book

Im ersten Frame der Scene 2 sollte der Schweberahmen Title über dem Schweberahmen Poem platziert werden, da, wo er sich auch im letzten Frame der Szene 1 befand. Dafür werden Sie die Koordinaten aus dem Frame Scene 1 kopieren und in den ersten Frame in Scene 2 einfügen. 4

Wählen Sie im Popup-Menü »Optionen« den Eintrag Scene 1.

5

Klicken Sie in der Zeitspur des Felds Title auf den dritten Frame. Kopieren Sie im Rahmen-Inspektor die Einstellungen für die Positionen »Links« und »Oben«.

6

Schalten Sie mit Hilfe des Popup-Menüs »Optionen« zurück zu Scene 2.

293

294 LEKTION 8 Erzeugen von Animationen

7

Wählen Sie den Keyframe für den Rahmen Title in der ersten Zeitspur aus. Schalten Sie im Rahmen-Inspektor das Kontrollkästchen »Sichtbar« ein. Geben Sie dann die kopierten Einstellungen des anderen Keyframes für »Links« und »Oben« ein.

Nun befindet sich der Rahmen Title sichtbar und an der korrekten Position im ersten Frame. Jetzt müssen Sie einen weiteren Frame hinzufügen, um den Rahmen wieder unsichtbar zu machen; anschließend fügen Sie noch einen Blendeneffekt hinzu. 8

Klicken Sie mit gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac OS) in die Zeitspur, um einen weiteren Keyframe bei der Frame-Marke 5 einzufügen.

9

Wählen Sie den Keyframe aus. Schalten Sie im Rahmen-Inspektor das Kontrollkästchen »Sichtbar« aus.

Der zweite Keyframe ist nun abgeblendet und der Schweberahmen ist im Dokumentfenster nicht mehr sichtbar. 10 Klicken Sie im Zeitachsen-Editor mit gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac OS) unmittelbar über Frame 5 in die Aktionspur. 11 Wählen Sie im Aktion-Inspektor im Menü »Aktion« Multimedia: Blende. 12 Wählen Sie im Menü »Schweberahmen« den Rahmen Title, um ihn auszuwählen. 13 Wählen Sie im Menü »Blendeneffekt« den Eintrag »Ausblenden von links nach rechts«. Geben Sie anschließend im Textfeld »Schrittzahl« den Wert 10 ein, um den Blendeneffekt über zehn Stufen auszuführen. 14 Klicken Sie auf die Schaltfläche »Autoplay« ( Abspielen auszuschalten.

), um das automatische

ADOBE GOLIVE 5.0 Classroom in a Book

In einer neuen Szene ist »Autoplay« standardmäßig eingeschaltet. »Autoplay« bedeutet, dass die Szene nach dem Laden der Seite in einen Browser automatisch abgespielt wird.

15 Wählen Sie Datei: Speichern, um die Seite zu sichern. Nachdem Sie nun Ihrer Seite eine weitere Szene hinzugefügt haben, stehen Ihnen nun zwei Szenen zur Verwendung mit dieser Seite zur Verfügung. Die erste Animation, Scene 1, wird automatisch abgespielt, wenn die Seite geladen wird. Die zweite Animation, Scene 2, wird überhaupt nicht abgespielt, wenn Sie keine Aktion zuweisen, um sie auszulösen.

Hinzufügen einer Aktion, um die Szene abzuspielen Jetzt werden Sie der Rollover-Schaltfläche mit dem Frosch eine Aktion zuweisen, die dafür sorgt, dass Scene 2 abgespielt wird. 1

Aktivieren Sie das Dokumentfenster Prince.html. Achten Sie auch darauf, dass die Aktionen-Palette ebenfalls sichtbar ist.

2

Wählen Sie das Bild mit dem Frosch auf der Seite aus. Der Inspektor ändert sich in den Rollover-Inspektor.

3

Wählen Sie in der Aktionen-Palette im Bereich »Ereignis« den Eintrag »Mausklick« aus. Damit wird bestimmt, dass eine Aktion ausgelöst wird, wenn ein Besucher der Webseite auf die Rollover-Schaltfläche klickt.

4

Klicken Sie in der Aktionen-Palette auf die Schaltfläche »Neue Aktion« ( Dadurch wird das Popup-Menü »Aktion« aktiviert.

).

Nun können Sie die gewünschte Aktion auswählen. In unserem Fall werden Sie sie mit der neuen Animationsszene verknüpfen, die Sie gerade erzeugt haben.

295

296 LEKTION 8 Erzeugen von Animationen

5

Wählen Sie im Menü »Aktion« Multimedia: Szene abspielen.

6

Wählen Sie im Popup-Menü »Szene« den Eintrag »Scene 2«.

7

Wählen Sie Datei: Speichern, um die Seite zu speichern.

Sie können Szenen auch mit Hilfe von Aktionen innerhalb einer Szene starten und anhalten. Um eine Szene dazu benutzen zu können, eine andere zu starten, fügen Sie der Aktionsspur der ersten Szene eine Aktion »Szene abspielen« hinzu. (Wenn es sich bei der ersten Szene um eine Schleifenanimation oder ein Palindrom handelt, müssen Sie vielleicht eine Aktion »Szene abspielen« gefolgt von einer Aktion »Szene anhalten« einfügen.) Weitere Informationen finden Sie unter Steuern des Abspielens von Szenen auf Seite 238 im Adobe GoLive 5.0 Handbuch.

Vorschau in einem Webbrowser Nachdem Sie nun mit dem Erzeugen und Ändern aller Animationen in der Website poetrypond.com fertig sind, können Sie sich die fertig gestellte Site in einem Browser ansehen. 1

Starten Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Suchen Sie nach der Homepage poetrypond.com. Wählen Sie Datei: Öffnen, und wählen Sie die Datei Index.html im Pfad Lessons/Lesson08/08Start/Poetry folder.

3

Klicken Sie oben in der Seite Index.html auf die Verknüpfung Poetry Sampler, um auf die Seite Poetry Sampler zu gelangen, und erkunden Sie die Verknüpfungen bzw. Links auf dieser Seite.

4

Wenn Sie mit dem Betrachten der Seiten dieser Website fertig sind, schließen Sie Ihren Browser.

297

298 LEKTION 8 Erzeugen von Animationen

Fragen 1

Welche sind die beiden Methoden, um Animationen zu erzeugen?

2

Wodurch wird die Stapelreihenfolge von Rahmen bestimmt?

3

Wofür eignet sich die (Schwebe-)Rahmen-Palette?

4

Wie können Sie eine Animation ruckelfrei anhand eines Pfades ablaufen lassen?

5

Wie erzeugen Sie einen Blendeneffekt für einen animierten Schweberahmen?

6

Was sind Szenen?

7

Wie können Sie das Abspielen einer Szene steuern?

Antworten 1

Sie können schnell und einfach Animationen erzeugen, indem Sie die Schaltfläche »Aufzeichnen« des Rahmen-Inspektors verwenden und einen Schweberahmen aufziehen, um diese Bewegungen aufzuzeichnen. Um eine höhere Genauigkeit zu erreichen, können Sie den Zeitachsen-Editor benutzen.

2

Zunächst ist die Stapelreihenfolge eines Rahmens durch die Lage seines Ankers auf der Seite bestimmt, wobei der Rahmen des Ankers, der sich am weitesten rechts befindet, sich auch am weitesten unten in der Stapelreihenfolge befindet und so weiter. Sie können die Stapelreihenfolge ändern, indem Sie im Rahmen-Inspektor einen Wert für die Tiefe vorgeben.

3

Mit Hilfe der (Schwebe-)Rahmen-Palette können Sie Schweberahmen auf ihren Positionen sperren. Innerhalb von Animationen sind Schweberahmen immer nur im jeweils ausgewählten Keyframe gesperrt.

4

Um einen Animationspfad ruckelfrei zu gestalten, müssen Sie zunächst alle Keyframes auswählen, aus denen die Animation besteht: Klicken Sie mit gedrückter Umschalttaste auf jeden Keyframe oder ziehen Sie mit gedrückter Maustaste über die Keyframes hinweg, um sie alle auszuwählen (achten Sie darauf, dass der Zeitcursor mit einem Keyframe ausgerichtet ist). Wählen Sie anschließend aus dem Popup-Menü »Animation« im Rahmen-Inspektor den Eintrag »Kurve«.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Um einen Blendeneffekt zu erzeugen, klicken Sie im Zeitachsen-Editor mit gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac OS) in die Aktionsspur unmittelbar über einem Keyframe. Dann wählen Sie im Menü »Aktion« des Aktion-Inspektors Multimedia: Blende. Wählen Sie anschließend den Schweberahmen, dem Sie den Blendeneffekt zuweisen wollen und die Anzahl der Schrittstufen aus (mehr Schritte für einen schnelleren Blendeneffekt, weniger für einen kürzeren).

6

Szenen werden verwendet, um mehrere Animationen derselben Webseite aufzunehmen. Alle Szenen teilen dieselben Schweberahmen, aber Sie können den Rahmen unterschiedliche Verhalten in verschiedenen Szenen zuweisen. Jede Webseite enthält per Standardeinstellung eine Szene. Um eine neue Szene zu erzeugen, wählen Sie aus dem Popup-Menü »Optionen« im ZeitachsenEditor den Eintrag »Neue Szene«.

7

Schalten Sie »Autoplay« ein, um eine Szene automatisch beim Laden der Webseite abspielen zu lassen. Sie können eine Szene aber auch durch Eingaben von Anwendern starten lassen, wie beispielsweise durch das Klicken auf eine Rollover-Schaltfläche. Wählen Sie die Rollover-Schaltfläche aus und klicken Sie in der Aktionen-Palette auf die Schaltfläche »Neue Aktion«. Wählen Sie im Popup-Menü »Aktion« Multimedia: Szene abspielen und wählen Sie danach die gewünschte Szene im Popup-Menü »Szene« aus.

299

Lektion 9

9 Verwenden von Aktionen und JavaScript

Adobe GoLive ermöglicht Ihnen das Hinzufügen von vorgefertigten Skripts, auch Aktionen genannt, zu Verknüpfungen, Bildern und Schweberahmen. Aktionen können Ereignisse auslösen, wie zum Beispiel das Abspielen von Animationen, Umleiten eines Besuchers, der einen älteren Browser verwendet, auf eine spezielle Version Ihrer Website oder Ändern von Bildinhalten. Außerdem können Sie eigene JavaScript-Skripts zu Adobe GoLives vorhandenem Repertoire hinzufügen, um eine noch größere Flexibilität zu erreichen.

304 LEKTION 9 Verwenden von Aktionen und JavaScript

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Erzeugen von Head-Abschnittsaktionen, die automatisch ablaufen, sobald eine Seite in einem Webbrowser geladen wird • Erzeugen einer Aktion »Browser-Weiche« • Erzeugen einer Aktion, die die Größe des Dokumentfensters automatisch anpasst • Zuweisen von Aktionen zu Schweberahmen, Bildern und Verknüpfungen • Hinzufügen von JavaScript-Skripts zu Seitenelementen Kopieren Sie, falls nötig, den Ordner Lesson09 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

Vorbereitungen Sie werden in dieser Lektion damit beginnen, mit Hilfe Ihres Webbrowsers eine Kopie der fertig gestellten Webseite zu betrachten. 1

Starten Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Index.html im Pfad Lesson09/09End/Stockblock Folder/Stockblock/Index.html.

3

Scrollen Sie durch die Seite und probieren Sie ihre Schaltflächen und die Benutzeroberfläche aus. Achten Sie auf das automatische Anpassen des Fensters nach dem Öffnen der Seite, auf das Popup-Ticker-Feld, das Erscheinungsbild der Informationsfelder, die Echtzeitaktualisierung von Börsenverkäufen und die dynamische Browserstatusleiste, die Sie über Käufe, Verkäufe und Verluste Ihrer Aktien informiert.

4

Wenn Sie mit dem Betrachten der Seite fertig sind, schließen Sie Ihren Browser.

305

306 LEKTION 9 Verwenden von Aktionen und JavaScript

Erzeugen von Head-Abschnittsaktionen Head-Abschnittsaktionen sind besondere vorformulierte Skripts, die in den Head-Abschnittsbereich einer Webseite eingefügt werden. Manche von ihnen laufen automatisch unmittelbar vor oder nach dem Öffnen der Seite in einem Webbrowser ab. Andere werden erst ausgeführt, wenn sie direkt aufgerufen werden und reagieren auf etwas, was der Betrachter durchgeführt hat, beispielsweise auf eine Verknüpfung oder ein Bild klicken. Sie werden in dieser Lektion einige Head-Abschnittsaktionen in die Seite einfügen. Die ersten drei Aktionen gehören zu den Aktionen, von denen die meisten Webdesigner meinen, dass sie in eine Website eingefügt werden sollten.

Erzeugen einer Aktion »Browser-Weiche« Besucher, die einen älteren Browser verwenden, können eine Webseite, die neuere Möglichkeiten und Techniken enthält (wie zum Beispiel JavaScript, Rahmen, Schweberahmen oder Tabellen) möglicherweise nicht korrekt sehen. Häufig unterbindet zudem der Systemadministrator die Nutzung vieler Optionen aus Sicherheitsgründen, beispielsweise den Einsatz von JavaScript. Daher ist es wichtig, diesen Besuchern eine alternative Webseite anzubieten, wenn sie auf Ihre Website gelangen. Eine Aktion »Browser-Weiche« leitet diese Betrachter automatisch auf eine beliebige von Ihnen zu bestimmende Seite um, selbst wenn diese Seite nur den Hinweis enthält, dass Ihre Website deren Browser nicht unterstützt. Die Seite, die Sie in dieser Lektion aufbauen werden, verwendet Funktionen, die mindestens Browser der Versionen 4.0 voraussetzen, daher ist es nötig, der Seite eine Aktion »Browser-Weiche« hinzuzufügen. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Index.html im Pfad Lesson09/09Start/Stockblock Folder/Stockblock/Index.html.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie oben im Dokumentfenster auf das Dreieck neben der Überschrift der Seite, um den Head-Abschnittsbereich der Seite zu öffnen. Sie werden feststellen, dass sich hier bereits fünf JavaScript-Objekte befinden. Später in dieser Lektion werden Sie sie verwenden, um Wertpapierhandelsinformationen zu berechnen.

Klicken auf Dreieck, um den Head-Abschnittsbereich zu öffnen

4

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette das Symbol »Head-Objekt für Browser-Weiche« in den Head-Abschnittsbereich des Dokumentfensters.

Ziehen des Symbols »Head-Objekt für Browser-Weiche« in den Head-Abschnittsbereich

5

Falls der Inspektor noch nicht geöffnet ist, doppelklicken Sie auf das soeben platzierte Symbol im Head-Abschnittsbereich der Seite, um seine Merkmale im Inspektor aufzurufen.

307

308 LEKTION 9 Verwenden von Aktionen und JavaScript

Die voreingestellten Merkmale sind korrekt und brauchen nicht geändert zu werden. Falls Sie bereits eine alternative Seite entworfen hätten, könnten Sie den Namen der Seite im Textfeld »Alternativer Link« eingeben. Das ist die Seite, die Betrachter mit älteren Browsern an Stelle der aktuellen Seite sehen würden. 6

Ziehen Sie das Symbol »Head-Objekt für Browser-Weiche« so weit wie möglich nach links. Diese Aktion soll noch vor allen anderen ausgeführt werden, damit Besucher mit älteren Browsern auf die alternative Seite umgeleitet werden, bevor der Rest der Seite geladen wird.

Ziehen des Head-Objekts für Browser-Weiche nach links

7

Wählen Sie Datei: Speichern.

Hinzufügen einer Aktion »Netscape Fehlerbeheb CSS« Netscape Navigator enthält einen Programmfehler, der dazu führt, dass Webseiten Schwierigkeiten bei der Darstellung von Animationen haben, wenn Betrachter die Größe der Seite ändern. Sie können der Seite eine Head-Aktion zuweisen, die dieses Problem verhindert. Wir empfehlen, diese Aktion allen Seiten hinzuzufügen, die animierte Schweberahmen enthalten.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette das Symbol »Head-Aktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) in den HeadAbschnittsbereich des Dokumentfensters.

Ziehen des Symbols »Head-Aktion« bzw. »Aktionsobjekt« in den Head-Abschnittsbereich

2

Falls der Inspektor noch nicht geöffnet ist, doppelklicken Sie auf das soeben platzierte Symbol im Head-Abschnittsbereich der Seite, um seine Merkmale im Inspektor aufzurufen.

Diese Aktion soll beim Laden der Seite ausgeführt werden, daher belassen Sie die Einstellungen im Popup-Menü »Ausführen« im Aktion-Inspektor auf »OnLoad«. 3

Wählen Sie im Popup-Menü »Aktion« Sonstige: Netscape Fehlerbeheb CSS.

Auswählen von Sonstige: Netscape Fehlerbeheb CSS im Popup-Menü »Aktion«

309

310 LEKTION 9 Verwenden von Aktionen und JavaScript

4

Wählen Sie Datei: Speichern.

Automatisches Anpassen eines Browser-Fensters Nun werden Sie eine Head-Abschnittsaktion einfügen, die das Browser-Fenster automatisch an den Entwurf Ihrer Webseite anpasst, damit Betrachter die Seite genau so sehen, wie von Ihnen vorgesehen. 1

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette das Symbol »Head-Aktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) in den HeadAbschnittsbereich des Dokumentfensters.

2

Falls der Inspektor noch nicht geöffnet ist, doppelklicken Sie auf das soeben platzierte Symbol im Head-Abschnittsbereich der Seite, um seine Merkmale im Inspektor aufzurufen.

Diese Aktion soll beim Laden der Seite ausgeführt werden, daher belassen Sie die Einstellungen im Popup-Menü »Ausführen« im Aktion-Inspektor auf »OnLoad«. 3

Wählen Sie im Popup-Menü »Aktion« Sonstige: Fenstergröße ändern.

4

Geben Sie in die Textfelder für Breite und Höhe jeweils den Wert 550 ein. Damit stellen Sie sicher, dass das Fenster 550 Pixel hoch und breit ist – gerade groß genug, um noch die Kopie More Info anzuzeigen.

5

Wählen Sie Datei: Speichern.

6

Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau betrachten zu können und um zu sehen, wie die Head-Abschnittsaktion »Fenstergröße ändern« funktioniert, die Sie soeben erzeugt haben.

Zuweisen von Aktionen zu Seitenelementen In diesem Teil der Lektion werden Sie damit beginnen, Aktionen den Elementen auf der Seite zuzuweisen. Aktionen lassen sich zahlreichen Elementen zuweisen, einschließlich Schweberahmen, Bildern und Verknüpfungen.

ADOBE GOLIVE 5.0 Classroom in a Book

Verwenden von Aktionen, um Schweberahmen zu beeinflussen Sie werden in diesem Teil der Lektion Aktionen verwenden, um den Börsenticker oben auf der Seite (ein Schweberahmen mit dem Namen Quotes) einziehbar zu gestalten, so dass er keinen Platz auf der Seite einnimmt, wenn er nicht benötigt wird. Dazu werden Sie einen weiteren Schweberahmen erzeugen, der ein Bild enthält, das den Ticker beim Anklicken aus- oder einfährt. Weitere Informationen über Schweberahmen finden Sie unter Arbeiten mit schwebenden Rahmen auf Seite 263. 1

Scrollen Sie auf der Seite nach ganz unten. Ziehen Sie aus der Registerkarte »Allgemein« der Objekte-Palette einen Platzhalter »Rahmen« nach unten auf die Seite auf eine freie Fläche, von anderen Objekten entfernt. Die genaue Position des neuen Schweberahmens werden Sie mit Hilfe des RahmenInspektors einstellen. Achten Sie darauf, dass der Rahmen weiter ausgewählt ist; eventuell müssen Sie dazu weiter nach unten scrollen, um ihn sehen zu können.

Ziehen eines Platzhalter »Rahmen« nach unten auf die Seite

311

312 LEKTION 9 Verwenden von Aktionen und JavaScript

2

Geben Sie für den Rahmen im Rahmen-Inspektor den Namen QuoteTrigger ein und legen Sie den Wert »Links« auf 451 und den Wert »Oben« auf 94 fest. Der Rahmen springt nun auf der Seite nach oben rechts vom Börsenticker. Eventuell müssen Sie auf der Seite nach oben scrollen, um ihn sehen zu können.

3

Ziehen Sie aus der Registerkarte »Allgemein« der Objekte-Palette den Platzhalter »Bild« auf den soeben erzeugten und neu benannten Schweberahmen.

4

Achten Sie darauf, dass der Bildplatzhalter weiter ausgewählt ist, und legen Sie sein Quellbild fest, indem Sie die Schaltfläche »Durchsuchen« im BildInspektor benutzen, um die Bilddatei tab.gif im Pfad Lesson09/09Start/Stockblock Folder/Stockblock/Images zu suchen und zu bestimmen.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Wählen Sie den Schweberahmen QuoteTrigger aus. Ändern Sie seine Größe mit Hilfe des Rahmen-Inspektors auf die Maße 26 mal 40 (die gleiche Größe wie das Bild tab.gif). Dieses Bild soll der Auslöser für die Bewegungen des Börsentickers werden.

6

Wählen Sie das Bild tab.gif aus. Schalten Sie im Bild-Inspektor das Kontrollkästchen »Rand« ein und geben Sie in das entsprechende Textfeld rechts daneben den Wert 0 ein, damit das Bild keinen Rand hat.

7

Klicken Sie im Bild-Inspektor auf den Reiter »Link« und klicken Sie in der Registerkarte oben links auf die Schaltfläche »Link«.

8

Ändern Sie im zugehörigen Textfeld den Eintrag »(Empty Reference!)« in »#«. Durch das Verknüpfen eines Objekts mit # wird das Objekt einfach mit einem leeren Anker auf der aktuellen Seite verknüpft – mit anderen Worten, ins Nichts. Aktionen lassen sich nur Bildern zuweisen, die verknüpft sind. Mit Hilfe dieser Technik können Sie eine Aktion einem Bild zuweisen und auf der aktuellen Seite bleiben. Weitere Informationen über das Erzeugen von Verknüpfungen finden Sie in Lektion 5, Erzeugen von Verknüpfungen.

Nachdem Sie nun den Schweberahmen erzeugt und platziert und das Bild als Auslöser festgelegt haben, können Sie mit dem Zuweisen von Aktionen beginnen.

313

314 LEKTION 9 Verwenden von Aktionen und JavaScript

9

Wählen Sie Fenster: Aktion, um die Aktionen-Palette zu öffnen. Im linken Bereich des Inspektors sind einige Ereignisse aufgeführt. Der Börsenticker soll angezeigt werden, wenn ein Betrachter auf das Bild klickt, daher wählen Sie nun das Ereignis »Mausklick« aus und klicken anschließend oben in der Aktionen-Palette auf die Schaltfläche »Neue Aktion« ( ).

Auf Schaltfläche »Neue Aktion« klicken

10 Achten Sie darauf, dass im rechten Bereich »Aktion« der Eintrag »Ohne« ausgewählt ist. Jetzt ist das Popup-Menü »Aktion« für »Ohne« anwählbar. Wählen Sie nun im Popup-Menü »Aktion« Multimedia: Pendeln. Die Aktion »Pendeln« schaltet einen Schweberahmen jeweils auf eine von zwei Positionen um, wenn die Aktion ausgelöst wird.

Auswählen von Multimedia: Pendeln aus dem Popup-Menü »Aktion«

ADOBE GOLIVE 5.0 Classroom in a Book

11 Wählen Sie aus dem Popup-Menü »Schweberahmen« den Eintrag »QuoteTrigger«. Position 1 bezieht sich auf die erste Position, auf die der Schweberahmen springen soll. In diesem Fall ist das die gegenwärtige Position des Rahmens, also können Sie auf die Schaltfläche »Get« klicken. Die Werte der aktuellen Position des Rahmens QuoteTrigger werden in die Textfelder neben Position 1 eingefügt. 12 Legen Sie die Werte für Position 2 auf 1 und 94 fest, nahezu linksbündig mit der linken Seite des Fensters. Dadurch wird der Schweberahmen ganz nahe am Rand platziert. 13 Achten Sie darauf, dass das Kontrollkästchen für »Animation« eingeschaltet ist, und geben Sie in das Textfeld »Zeiteinheiten« den Wert 3 ein. Dadurch wird die Bewegung animiert und der Rahmen wird in drei Schritten ein- und ausgefahren und nicht einfach auf seine Position springen.

14 Klicken Sie wieder auf die Schaltfläche »Neue Aktion« ( ), um dem Ereignis »Mausklick« eine weitere Aktion zuzuweisen, und wählen Sie wieder aus dem Popup-Menü »Aktion« Multimedia: Pendeln. 15 Wählen Sie aus dem Popup-Menü »Rahmen« den Eintrag »Quotes« und klicken Sie wieder auf die Schaltfläche »Get« neben Position 1. 16 Stellen Sie die Werte für Position 2 auf -450 und 95 fest. Damit wird der Schweberahmen Quotes außerhalb des Browser-Fensters platziert, bis er durch Auslösen bewegt wird.

315

316 LEKTION 9 Verwenden von Aktionen und JavaScript

17 Achten Sie darauf, dass das Kontrollkästchen für »Animation« eingeschaltet ist, und geben Sie in das Textfeld »Zeiteinheiten« den Wert 3 ein. 18 Jetzt sollen die Schweberahmen Quotes und QuoteTrigger auf ihre Startpositionen bewegt werden. Wählen Sie Fenster: Rahmen, um die Rahmen-Palette zu öffnen. Wählen Sie den Schweberahmen Quotes in der Rahmen-Palette aus. Geben Sie im Rahmen-Inspektor in das Textfeld »Links« den Wert -450 ein und im Textfeld »Oben« den Wert 95. 19 Wählen Sie in der Rahmen-Palette QuoteTrigger aus. Stellen Sie im Inspektor den Wert für »Links« auf 1 und den Wert für »Oben« auf 94 ein.

Auswählen des Schweberahmens

Ausrichten des Schweberahmens

20 Wählen Sie Datei: Speichern. 21 Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau zu betrachten und den neuen einziehbaren Börsen-Ticker auszuprobieren.

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen einer Aktion »OnCall« Im ersten Abschnitt dieser Lektion haben Sie bereits gesehen, wie HeadAbschnittsaktionen erzeugt werden können, die automatisch geladen werden, wenn der Betrachter die Seite zum ersten Mal öffnet. Im folgenden Abschnitt werden Sie weitere Head-Abschnittsaktionen erzeugen, die auf einen »OnCall«Auslöser warten, d.h., die Aktionen werden nur dann ausgelöst, wenn sie ausdrücklich aufgerufen werden, indem der Betrachter auf eine Schaltfläche klickt oder etwas anderes auf der Seite ausführt. Sie werden nun vorhandenen Schweberahmen ein Bild zuweisen, einige »OnCall«-Head-Abschnittsaktionen erzeugen und diese Aktionen anschließend dem Bild zuweisen, um auf diese Weise ein Informationsfeld »More Info« mit weiteren Informationen über die ausgewählte Firma aufzurufen.

Vorbereiten von Bildern für Aktionen Rechts vom Hauptteil der Seite befinden sich zwei überlappende Schweberahmen (im Moment nicht sichtbar), die weitere Informationen über zwei auf der Website aufgeführte Firmen enthalten. Diese More Info-Rahmen werden aufgerufen, wenn ein Betrachter auf die Schaltfläche »More Info« neben einer Firma in der Haupttabelle klickt. Sie werden sich nun diese Rahmen einmal ansehen und anschließend ein Bild zuweisen, das als Auslöser für die Anzeige eines More InfoRahmens dient, wenn es angeklickt wird. 1

Wählen Sie Fenster: Rahmen.

2

Klicken Sie in der Rahmen-Palette auf das Auge-Symbol neben dem Eintrag »ACMEInfo«. Der Schweberahmen ACMEInfo wird rechts neben der Haupttabelle eingeblendet. Eventuell müssen Sie im Dokumentfenster etwas nach rechts scrollen, um ihn sehen zu können. Klicken Sie noch einmal auf das Auge-Symbol, um den Rahmen wieder auszublenden. Jetzt werden Sie einen Auslöser erzeugen, damit ein Betrachter den entsprechenden More InfoRahmen sehen kann, wenn der Auslöser angeklickt wird.

317

318 LEKTION 9 Verwenden von Aktionen und JavaScript

3

Ziehen Sie aus der Registerkarte »Allgemein« der Objekte-Palette einen Bildplatzhalter auf die Zelle ganz rechts in der Tabellenzeile für Acme Industries, die die Informationen über die Firma enthält.

Ziehen eines Bildplatzhalters auf die Tabellenzelle

4

Klicken Sie auf den soeben platzierten Bildplatzhalter und legen Sie mit Hilfe der Schaltfläche »Durchsuchen« im Bereich »Quelle« in der Registerkarte »Allgemein« im Bild-Inspektor das Bild More.gif im Ordnerpfad Lesson09/09Start/Stockblock Folder/Stockblock/Images als Quellbild fest.

5

Wählen Sie das Bild More.gif aus. Schalten Sie dann im Bild-Inspektor das Kontrollkästchen »Rand« ein und geben Sie in das entsprechende Textfeld den Wert 0 ein, damit die Umrahmumg um das Bild entfernt wird.

6

Klicken Sie im Bild-Inspektor auf den Reiter »Link«, und klicken Sie oben links auf die Schaltfläche »Link«.

7

Ändern Sie den Text »(Empty Reference!)« in »#«, wie Sie es bereits vorher bei der Datei tab.gif durchgeführt haben.

ADOBE GOLIVE 5.0 Classroom in a Book

Hinzufügen von »OnCall«-Aktionen zu Bildern Nachdem nun das Bild vorbereitet wurde, können Sie die Head-Abschnittsaktion »OnCall« erzeugen, die dafür sorgt, dass der Schweberahmen More Info korrekt funktioniert, wenn auf das Bild geklickt wird. Da immer nur ein More InfoRahmen gleichzeitig dargestellt werden soll, werden Sie eine Head-Abschnittsaktionen-Sequenz erzeugen, die dafür sorgt, dass alle Schweberahmen geschlossen werden, wenn beim Klicken auf die Schaltfläche »More Info« welche angezeigt werden sollten. 1

Falls der Head-Abschnittsbereich der Seite nicht sichtbar ist, klicken Sie oben im Dokumentfenster auf das Dreieck neben der Seitenüberschrift, um den Head-Abschnittsbereich der Seite zu öffnen.

2

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette das Symbol »Head-Aktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) in den HeadAbschnittsbereich des Dokumentfensters.

3

Falls der Inspektor nicht angezeigt wird, doppelklicken Sie auf das soeben platzierte Symbol im Head-Abschnittsbereich der Seite, um seine Merkmale im Aktion-Inspektor anzuzeigen.

4

Wählen Sie im Popup-Menü »Ausführen« den Eintrag »OnCall«.

Auswählen von »OnCall« aus dem Popup-Menü »Ausführen«

5

Geben Sie im Textfeld »Name« den Text closeInfo ein.

6

Wählen Sie im Popup-Menü »Aktion« Spezial: Sequenz. Eine Sequenz kann mehr als eine Aktion enthalten.

319

320 LEKTION 9 Verwenden von Aktionen und JavaScript

7

Klicken Sie auf die Schaltfläche »Neue Aktion« ( ), um der Sequenz eine Aktion hinzuzufügen, und wählen Sie die neue Aktion aus.

Klicken auf Schaltfläche »Neue Aktion«

8

Wählen Sie im unteren Popup-Menü »Aktion« Multimedia: Sichtbarkeit.

9

Stellen Sie das Ziel dieser Aktion mit Hilfe des Popup-Menüs »Schweberahmen« auf den Schweberahmen ACMEInfo ein und den Modus mit Hilfe des Popup-Menüs »Modus« auf »Ausblenden«.

Auswählen von »Ausblenden« im Popup-Menü »Modus«

10 Klicken Sie wieder auf die Schaltfläche »Neue Aktion« ( die neue Aktion aus.

) und wählen Sie

ADOBE GOLIVE 5.0 Classroom in a Book

11 Wählen Sie im unteren Popup-Menü »Aktion« wieder Multimedia: Sichtbarkeit und stellen Sie den Schweberahmen FOOZInfo als Ziel und den Modus auf »Ausblenden« ein und verwenden Sie dazu die Popup-Menüs »Schweberahmen« und »Modus«. 12 Schließen Sie den Head-Abschnittsbereich der Seite. Nachdem Sie nun die notwendigen »OnCall«-Aktionen festgelegt haben, können Sie diese Aktionen dem Bild More zuweisen, das Sie bereits weiter vorne in der Lektion eingefügt haben. 13 Wählen Sie das Bild More.gif aus, und öffnen Sie die Aktionen-Palette, indem Sie Fenster: Aktion wählen, falls nötig. 14 Wählen Sie das Ereignis »Mausklick« aus und fügen Sie drei neue Aktionen hinzu, indem Sie dreimal auf die Schaltfläche »Neue Aktion« ( ) klicken. Da noch keine der drei Aktionen bestimmt wurde, trägt jede den Namen Ohne. 15 Wählen Sie die erste Aktion aus, und wählen Sie aus dem unteren PopupMenü »Aktion« Sonstige: Bildlauf nach rechts. 16 Geben Sie im Textfeld »Distanz (Pixel)« den Wert 300 und im Textfeld »Geschwindigkeit« den Wert 50 ein. 17 Wählen Sie die nächste Aktion aus und wählen Sie im unteren Popup-Menü »Aktion« Spezial: Aktion aufrufen. Auf diese Weise können Sie eine bereits festgelegte Aktion aufrufen, in unserem Fall die Aktion closeInfo. 18 Wählen Sie im untersten Popup-Menü »Aktion« den Eintrag »closeInfo«.

Auswählen von closeInfo

321

322 LEKTION 9 Verwenden von Aktionen und JavaScript

Bis jetzt führen die zugewiesenen Aktionen einen Bildlauf nach rechts aus und schließen jeden eventuell geöffneten Info-Rahmen. Jetzt ist es an der Zeit, die letzte Aktion zu bestimmen, damit auch der richtige More Info-Schweberahmen geöffnet wird. 19 Wählen Sie die letzte Aktion aus und wählen Sie im Popup-Menü »Aktion« Multimedia: Sichtbarkeit. Da sich das Bild in der Zeile ACME befindet, legen Sie den Schweberahmen ACMEInfo fest und bestimmen den Modus »Einblenden«. 20 Wählen Sie Datei: Speichern.

Kopieren von Grafiken mit zugewiesenen Aktionen Anstatt diese Schritte nun für jede einzelne Firma erneut auszuführen, können Sie die Schaltfläche »More Info«, die Sie soeben für ACME erzeugt haben, einfach duplizieren und anderswo verwenden und ihre Merkmale wie gewünscht einstellen. In unserem Fall werden Sie die Schaltfläche »More Info« kopieren und für die nächste aufgeführte Firma anpassen. 1

Halten Sie dazu die Strg-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt und ziehen Sie das Bild More Info nach unten, um eine Kopie des Originals in die letzte Zelle in der Zeile FOOZ zu ziehen.

Ziehen des Bildes More Info

2

Achten Sie darauf, dass die Kopie ausgewählt ist, und öffnen Sie die AktionenPalette. Alle Aktionen sollten noch die gleichen geblieben sein, außer der letzten Sichtbarkeits-Aktion.

3

Wählen Sie diese Aktion »Sichtbarkeit« aus.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Ändern Sie den Eintrag im Popup-Menü, der gegenwärtig ACMEInfo heißt, in FOOZInfo. Denken Sie daran, dass ACMEInfo und FOOZInfo die Namen der beiden More Info-Schweberahmen sind. Dadurch wird nun die richtige Information für diese Zeile angezeigt.

Auswählen von FOOZInfo aus dem Popup-Menü

5

Wählen Sie Datei: Speichern.

6

Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau zu betrachten und um die Schaltflächen »More Info« auszuprobieren und zu sehen, wie sie funktionieren.

Hinzufügen von Aktionen zu Textverknüpfungen Sie werden feststellen, dass es keine Möglichkeit gibt, einen einmal aufgerufenen More Info-Rahmen wieder zu schließen. Diesen Mangel können Sie beheben, indem Sie der Textverknüpfung close this in den beiden More Info-Rahmen ACMEInfo und FOOZInfo entsprechende Mausereignisse hinzufügen. Wenn Sie die Textverknüpfung einmal im Inspektor betrachten, werden Sie feststellen, dass eine Verknüpfung mit »#« festgelegt wurde, also die gleiche Technik, die wir schon weiter vorne in dieser Lektion mit Bildern verwendet haben, damit Sie ihnen Aktionen zuweisen konnten.

323

324 LEKTION 9 Verwenden von Aktionen und JavaScript

1

Blenden Sie den Schweberahmen ACMEInfo ein und schalten Sie die Möglichkeit ein, ihn zu bearbeiten, indem Sie in der Rahmen-Palette auf das Bleistift-Symbol klicken.

Klicken auf Bleistift-Symbol

Schweberahmen auswählen

2

Wählen Sie den Text »close this« aus und öffnen Sie die Aktionen-Palette (Fenster: Aktion).

3

Wählen Sie das Ereignis »Mausklick« aus und fügen Sie zwei Aktionen hinzu, indem Sie zweimal auf die Schaltfläche »Aktion hinzufügen« ( ) klicken.

4

Wählen Sie die erste Aktion »Ohne« und wählen Sie im Popup-Menü »Aktion« Sonstige: Bildlauf nach links, geben Sie im Textfeld »Distanz (Pixel)« den Wert 300 und im Textfeld »Geschwindigkeit« den Wert 50 ein.

5

Wählen Sie die andere Aktion »Ohne« und wählen Sie aus dem Popup-Menü »Aktion« Multimedia: Sichtbarkeit.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Stellen Sie das Ziel auf den Schweberahmen ACMEInfo und den Modus auf »Ausblenden« ein.

Auswählen von »Ausblenden« im Popup-Menü »Modus«

7

Blenden Sie den Schweberahmen ACMEInfo aus, indem Sie in der RahmenPalette auf sein Auge-Symbol klicken.

8

Wiederholen Sie die Schritte 1 bis 7 für den Schweberahmen FOOZInfo.

9

Wählen Sie Datei: Speichern.

10 Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau zu betrachten und um zu sehen, wie die Verknüpfung close this funktioniert.

Verwenden von JavaScript-Skripts In diesem Abschnitt werden Sie lernen, wie JavaScript-Skripts zahlreichen Seitenelementen zugewiesen werden können. Wir haben bereits einige Skripts in den Head-Abschnittsbereich des Dokuments eingefügt. Sie können natürlich auch Ihre eigenen selbst definierten Skripts schreiben und sie in Ihren eigenen Projekten verwenden. Lesen Sie dazu das Adobe GoLive 5.0 Handbuch, um weitere Einzelheiten über das Einfügen von Skripts zu erfahren.

325

326 LEKTION 9 Verwenden von Aktionen und JavaScript

Zuweisen von Skripts zu Seitenelementen Die eingeschlossenen JavaScript-Skripts dienen als Funktionen, mit deren Hilfe der Betrachter ein Wertpapierpaket auf der Website erhöhen, verringern oder verwerfen kann und anschließend im unteren Bereich der Seite eine Aktualisierung der gegenwärtigen Anzahl der Wertpapiere im Portfolio des Besuchers angezeigt wird. Zunächst werden Sie ein paar Schaltflächen hinzufügen, die diese Skripts aufrufen, wenn sie ausgelöst werden. 1

Ziehen Sie den Platzhalter »Bild« aus der Registerkarte »Allgemein« der Objekte-Palette in die Zeile unmittelbar unterhalb des Textes über ACME Industries (links vom ersten Eingabepfeil) und fügen Sie ein Leerzeichen ein.

Ziehen des Bildplatzhalters in die Zeile unterhalb des Textes

2

Wiederholen Sie den Schritt 1 zweimal, so dass Sie nun drei Bilder haben, die von dem vorherigen durch einen Leerschritt abgetrennt sind.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Benutzen Sie die Registerkarte »Allgemein« des Bild-Inspektors, um das Quellbild des ersten Bildes auf Buy.gif, das zweite auf Sell.gif und das dritte auf Dump.gif festzulegen. Alle drei finden Sie im Pfad Lesson09/09Start/Stockblock Folder/Stockblock/Images.

4

Wählen Sie die Registerkarte »Link« des Bild-Inspektors aus und legen Sie jedes Bild als Verknüpfung fest, indem Sie auf die Schaltfläche »Link« oben links klicken und im Textfeld das Zeichen »#« als Verknüpfung eingeben.

5

Schalten Sie in der Registerkarte »Allgemein« im Bild-Inspektor das Kontrollkästchen »Rand« ein und geben Sie in das Textfeld rechts daneben den Wert 0 ein, wenn nötig.

Der Besucher soll erkennen können, dass sich etwas geändert hat, wenn eine Transaktion durchgeführt wurde, indem er über die Browserstatusleiste informiert wird. 6

Klicken Sie oben im Dokumentfenster auf das Dreieck neben der Seitenüberschrift, um den Head-Abschnittsbereich der Seite zu öffnen.

7

Ziehen Sie aus der Registerkarte »Smart« der Objekte-Palette das Symbol »Head-Aktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) in den HeadAbschnittsbereich des Dokuments. Achten Sie darauf, dass es ausgewählt ist.

8

Wählen Sie im Popup-Menü »Ausführen« im Inspektor den Eintrag »OnCall« aus und wählen Sie im Popup-Menü »Aktion« Meldung: Status anzeigen aus.

9

Geben Sie in das Textfeld »Meldung« den Text Your portfolio has been updated. See below. ein.

10 Geben in das Textfeld »Name« den Text statusMessage als Namen der Aktion ein.

327

328 LEKTION 9 Verwenden von Aktionen und JavaScript

Nun werden Sie dem Ereignis »Mausklick« der ersten Grafik Aktionen und Skripts zuweisen. 11 Wählen Sie das Bild Buy.gif aus, wählen Sie in der Aktionen-Palette das Ereignis »Mausklick« und fügen Sie ihm zwei Aktionen hinzu, indem Sie zweimal auf die Schaltfläche »Neue Aktion« ( ) klicken. 12 Wählen Sie die erste Aktion »Ohne« aus und wählen Sie im Popup-Menü »Aktion« Spezial: Funktion aufrufen. Mit dieser Aktion können Sie auf vorbereitete JavaScript-Skripts zugreifen. 13 Wählen Sie im Popup-Menü »Funktion« den Eintrag »increment«. 14 Geben Sie im Textfeld »Argumente« den Wert 0 ein. Das Argument in dieser Funktion identifiziert lediglich die Firma. ACME hat das Argument 0, FOOZ das Argument 1 usw. Mit der Eingabe des Werts 0 wird die Aktion angewiesen, die Informationen von ACME zu erhöhen. 15 Wählen Sie die zweite Aktion »Ohne« aus und wählen Sie im Popup-Menü »Aktion« Spezial: Aktion aufrufen. 16 Wählen Sie im Popup-Menü »Aktion« den Eintrag »statusMessage«.

statusMessage auswählen

17 Wählen Sie Datei: Speichern. 18 Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau zu betrachten, und probieren Sie die Schaltfläche »Buy« aus. Durch das Klicken auf das Bild Buy.gif wird Ihrem Portfolio ein Wertpapier von ACME hinzugefügt und Sie werden in der Browserstatusleiste über die Transaktion informiert (unten links im Browser-Fenster).

ADOBE GOLIVE 5.0 Classroom in a Book

19 Wiederholen Sie die Schritte 11 bis 16 für die Bilder Sell.gif und Dump.gif, wobei Sie die Funktion »decrement« für Sell.gif und die Funktion »dump« für Dump.gif wählen, und das Argument jedes Mal bei 0 belassen, da alle Eingaben sich auf ACME beziehen. 20 Wählen Sie alle drei Schaltflächen aus, kopieren Sie sie und fügen Sie sie in die entsprechenden Zellen der verbliebenen Firmen ein. Achten Sie darauf, das Argument in jeder Schaltfläche für die jeweiligen Firmen jeweils um eins zu erhöhen, so dass alle Schaltflächen für FOOZ das Argument 1 besitzen, für BOCK das Argument 2 usw.

21 Wählen Sie Datei: Speichern. 22 Wählen Sie Spezial: Im Standardbrowser anzeigen, um die Seite in der Vorschau zu betrachten und das endgültige Ergebnis zu betrachten.

329

330 LEKTION 9 Verwenden von Aktionen und JavaScript

Fragen 1

Wie erzeugen Sie eine Head-Abschnittsaktion?

2

Warum ist das Einfügen einer Aktion »Browser-Weiche« in die Homepage einer Website sinnvoll?

3

Wie legen Sie ein Bild als Verknüpfung fest, das Ihnen das Zuweisen von Aktionen zu diesem Bild erlaubt und den Besucher gleichzeitig auf der gegenwärtigen Seite verbleiben lässt?

4

Wie können Sie eine Aktion einer Verknüpfung zuweisen?

5

Worin besteht der Unterschied zwischen den Aktionen »OnCall« und »OnLoad«?

6

Wie unterscheidet sich ein JavaScript-Skript von einer Aktion in der Aktionen-Palette?

Antworten 1

Sie erzeugen eine Head-Abschnittsaktion, indem Sie das Symbol »HeadAktion« (Windows) bzw. »Aktionsobjekt« (Mac OS) aus der Registerkarte »Smart« der Objekte-Palette in den Head-Abschnittsbereich eines Dokuments ziehen.

2

Das Einfügen einer Aktion »Browser-Weiche« in die Homepage Ihrer Website ermöglicht Ihnen das Umleiten von Betrachtern, die einen älteren Browser verwenden, auf eine alternative Version Ihrer Website. Damit können Sie immer die neuesten Web-Techniken verwenden, ohne sich Gedanken darüber machen zu müssen, ob die Website auch in älteren Browsern, die keine Rahmen darstellen können oder keine JavaScript-Skripts oder Schweberahmen unterstützen, so dargestellt wird, wie Sie sie entworfen haben.

3

Sie wählen das Bild aus, klicken im Inspektor auf die Schaltfläche »Link« und legen eine Verknüpfung mit »#« fest. Danach können Sie dem Bild Aktionen zuweisen, so dass es auf Mausklicks oder andere Ereignisse reagieren kann.

4

Sie wählen die gewünschte Verknüpfung aus und weisen ihr mit Hilfe der Aktionen-Palette Aktionen zu.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Eine Aktion »OnCall« läuft nur ab, wenn ein Ereignis wie beispielsweise ein Mausklick eines Besuchers die Aktion auslöst. Eine Aktion »OnLoad« wird automatisch ausgeführt, wenn ein Betrachter die Seite in einem Browser öffnet.

6

Die Aktionen, die in der Aktionen-Palette zur Verfügung stehen, sind vorgefertigte Aktionen, die mit Adobe GoLive ausgeliefert wurden. Ein JavaScriptSkript ist eine Funktion, die durch die Aktion »Funktion aufrufen« aufgerufen wird. Wenn Sie sich mit JavaScript auskennen, können Sie eigene JavaScriptSkripts schreiben, um die in Adobe GoLive eingebauten Aktionen mit Ihrem eigenen selbst definierten Skriptcode zu erweitern.

331

332 LEKTION 9 Verwenden von Aktionen und JavaScript

Lektion 10

10 Formulare einrichten

Formulare sind interaktive Elemente, die Ihnen das Erfassen von Daten der Besucher Ihrer Website erlauben. Sie ermöglichen den Besuchern das Anfordern von Informationen oder Produkten und die Übermittlung von persönlichen Informationen, wie beispielsweise ihre Namen, Adressen oder Kreditkartendaten.

336 LEKTION 10 Formulare einrichten

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Verwenden einer Tabelle für das präzise Platzieren von Formularfeldern auf einer Seite • Einfügen einer Vielzahl von Formularfeldern in eine Tabelle, einschließlich Textfelder und Popup-Menüs • Ablegen häufig benötigter Objekte in der Registerkarte »Eigene« (Windows) bzw. »Benutzerdefiniert« (Mac OS) in der Objekte-Palette und Einfügen dieser Objekte in eine Webseite • Hinzufügen von Optionsfeldern, eines Hotspots und einer »Formular zurücksetzen«-Schaltfläche • Anpassen eines Listenfelds in einem Formular • Festlegen der Reihenfolge, in der Formularfelder ausgewählt werden, wenn Betrachter wiederholt die Tabulatortaste drücken Für diese Lektion werden Sie etwa 45 Minuten benötigen. Kopieren Sie, falls nötig, den Ordner Lesson10 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen In dieser Lektion werden Sie den Entwurf eines Formulars für die Beantragung der Mitgliedschaft der Website poetrypond.com vervollständigen. Sie werden den Abschnitt erzeugen, in den Besucher ihre persönlichen Daten eingeben. Außerdem werden Sie den vorgegebenen Bereichen des Formulars eine Vielzahl von Feldern hinzufügen, zu denen Optionsfelder, ein Hyperlinkbereich (Hot Spot) und eine Rücksetzen-Schaltfläche gehören. Zuerst werden Sie sich das fertig gestellte Aufnahmeantragformular in Ihrem Browser ansehen. 1

Starten Sie Ihren Webbrowser.

2

Öffnen Sie die Datei Index.html, um die Homepage der Website poetrypond.com zu öffnen. Sie finden sie im Pfad Lesson10/10End/Forms Folder/Forms/Index.html.

3

Klicken Sie in der Seite auf das Bild des Frosches, um auf das Antragsformular zu gelangen.

Das Formular für die Beantragung der Mitgliedschaft enthält eine Vielzahl von Formularfeldern, wie beispielsweise Textfelder für das Eingeben von persönlichen Informationen, eine Auswahlliste zur Auswahl von Arbeitskreisen über Gedichte, Auswahllisten zum Auswählen der Zahlweise und einen Hyperlinkbereich (Hotspot), der für das Absenden des Formulars über das Web vorgesehen ist. 4

Versuchen Sie, das Formular auszufüllen, indem Sie Ihre persönlichen Daten in die Textfelder eingeben und Ihre Auswahl aus den Auswahllisten, den Popup-Menüs und den Optionsfeldern treffen.

Das Formular wurde ausschließlich zum Zwecke dieser Lektion entworfen. Daher können Sie Ihren Antrag nicht wirklich über das Internet abschicken. 5

Wenn Sie mit dem Betrachten des Formulars fertig sind, beenden Sie Ihren Browser.

337

338 LEKTION 10 Formulare einrichten

Um Informationen aus einem Formular über das Internet versenden und sammeln zu können, müssen Sie über eine Common Gateway Interface (CGI)Anwendung auf einem Webserver verfügen, die die Daten zunächst sammelt und an eine Datenbank weiterleitet. Die Bezeichnungen der Formularfelder müssen außerdem mit den gespeicherten Bezeichnungen in der CGI-Anwendung übereinstimmen. Denken Sie daran, dass CGI-Skripts in Anwendungen außerhalb von Adobe GoLive erstellt werden müssen und gewisse Programmierkenntnisse voraussetzen. CGI-Anwendungen werden üblicherweise durch einen WebserverAdministrator erstellt. Außerdem stellt möglicherweise Ihr Internet-Service-Provider (ISP) CGI-Skripts für seine Kunden bereit, die eine Homepage bei ihm führen. Fragen Sie Ihren ISP nach der Verfügbarkeit von CGI-Skripts für den Umgang mit Formularen.

ADOBE GOLIVE 5.0 Classroom in a Book

Formulare Die folgende Abbildung zeigt das fertig gestellte Layout des Formular für die Beantragung der Mitgliedschaft in Adobe GoLive.

Formular für die Beantragung der Mitgliedschaft in der Layout-Vorschau in Adobe GoLive

339

340 LEKTION 10 Formulare einrichten

Beachten Sie, dass das Formular in einem Rahmen angelegt ist, der das FormularSymbol ( ) enthält. Wenn Sie einer Seite dieses Symbol hinzufügen, fügen Sie in Wahrheit dem HTML-Quellcode der Seite ein Formularelement hinzu. Dieses Element kennzeichnet die aktuelle Webseite oder einen Abschnitt der Webseite als Formular und weist den Browser an, wie er die Formularinformationen weiterverarbeiten soll. Das Formularelement muss vorhanden sein, damit das Formular korrekt dargestellt wird und funktionieren kann. Achten Sie darauf, dass es jedem Formularelement vorangestellt ist. Weitere Informationen finden Sie unter »Einrichten der Formular- und Formular-Ende-Tags« in Kapitel 12 im Adobe GoLive 5.0 Handbuch. Beachten Sie außerdem, dass das Formular tatsächlich mit einer Tabelle mit zwei Spalten und fünf Zeilen angelegt wurde, wobei einige der Zellen der Tabelle wiederum Tabellen enthalten. Mit Hilfe von Tabellen können Sie Formularfelder präzise auf einer Webseite platzieren. Weitere Informationen über Tabellen finden Sie unter Tabellen hinzufügen auf Seite 64. Es folgt eine Inhaltsbeschreibung einer jeden Zeile in der Haupttabelle:

• Die erste Zeile der Haupttabelle enthält ein Bild (mit dem Text membership application), das sich über beide Spalten erstreckt. • Die zweite Reihe beinhaltet zwei Zellen, von denen jede wiederum eine eingebettete Tabelle enthält. Die eingebettete Tabelle in der ersten Zelle schließt Textfelder für die Eingabe von persönlichen Daten ein. Die eingebettete Tabelle in der zweiten Zelle enthält Text und eine Auswahlliste zur Auswahl von Arbeitskreisen (Workshops) über Gedichte. • Die dritte Zeile beinhaltet eine Linie, die sich über beide Spalten erstreckt. • Die vierte Zeile enthält eine eingebettete Tabelle für das Eingeben der Zahlweise. Diese eingebettete Tabelle enthält tatsächlich noch zwei weitere eingebettete Tabellen: eine für die Eingabe der Art der Mitgliedschaft und der Zahlungsart, die andere für die Eingabe der Kreditkartennummer und des Ablaufdatums. • Die fünfte Zeile enthält zwei Zellen, eine mit einem Hyperlinkbereich (Hotspot), der für das Absenden des Antrags vorgesehen ist, und eine mit einer »Rücksetzen«-Schaltfläche.

ADOBE GOLIVE 5.0 Classroom in a Book

Erzeugen eines Formularabschnitts Damit Sie gleich mit dem Entwerfen beginnen können, haben wir bereits einige Abschnitte des Antragsformulars für Sie erzeugt. Sie werden nun den Abschnitt des Formulars erzeugen, den Besucher für das Eingeben ihrer persönlichen Angaben benutzen sollen. Dafür werden Sie zunächst eine neue Seite verwenden. Später in dieser Lektion werden Sie den Inhalt der Seite dann dem vorhandenen Formular hinzufügen. 1 Starten Sie Adobe GoLive. Ein neues Dokument, Ohne Namen.html, wird geöffnet. Falls Sie Adobe GoLive nicht neu gestartet haben, wird möglicherweise kein neues Dokument mit dem Namen Ohne Namen.html auf Ihrem Schreibtisch geöffnet. Wählen Sie dann Datei: Neu, um eine neue Seite zu erzeugen. 2

Wählen Sie Datei: Speichern als, benennen Sie die Datei in Name_form.html um, und speichern Sie sie im Ordner Forms im Pfad Lesson10/10Start/Forms Folder/Forms.

3

Wählen Sie die Seitenüberschrift Willkommen bei Adobe GoLive 5 aus.

4

Geben Sie den Text Personal Information als neue Überschrift ein und wählen Sie Datei: Speichern.

Hinzufügen einer Tabelle für den Formularentwurf Nun werden Sie der Seite eine Tabelle hinzufügen. Mit Hilfe von Tabellen können Formularfelder präzise auf der Seite platziert werden. Wir empfehlen, Formulare immer mit Hilfe von einer oder mehreren Tabellen anzulegen. Wahlweise können Sie Formularfelder auch auf einem Layout-Raster auf der Seite platzieren. Allerdings ist diese Methode nicht empfehlenswert, da sich das Aussehen eines Formulars, das mit Hilfe eines Layout-Rasters erzeugt wurde, in Abhängigkeit des verwendeten Browsers und der benutzten Bildschirmauflösung des Betrachters stark ändern kann. 1

Falls nötig wählen Sie Fenster: Objekte, um die Objekte-Palette aufzurufen; achten Sie darauf, dass die Registerkarte »Allgemein« ( ) ausgewählt ist.

2

Falls nötig wählen Sie Fenster: Inspektor, um den Inspektor aufzurufen.

341

342 LEKTION 10 Formulare einrichten

3

Ziehen Sie das Symbol für Tabelle (oberste Reihe, viertes Symbol von links) aus der Objekte-Palette auf die Seite. Der Inspektor wird zum TabellenInspektor.

4

Geben Sie im Tabellen-Inspektor im Textfeld »Zeilen« den Wert 6 und im Textfeld »Spalten« den Wert 1 ein. Wählen Sie anschließend aus dem PopupMenü »Breite« den Eintrag »Pixel« und geben Sie in das entsprechende Textfeld den Wert 300 ein.

Neue Tabelle

Festlegen der Tabelleneinstellungen im Tabellen-Inspektor

Jetzt fügen Sie der ersten Zelle der Tabelle eine Überschrift hinzu. Dies wird die Überschrift des Formularabschnittes, den Sie erzeugen. 5

Geben Sie in die erste Zelle im Dokumentfenster den Text Personal Information: ein.

6

Wählen Sie den soeben eingegebenen Text aus und wählen Sie Text: Struktur: Starke Betonung, um den Text mit der Auszeichnung Fett zu versehen.

7

Wählen Sie in der Werkzeugleiste aus dem Menü »Schriftgröße« ( ) den Eintrag »2«. Mit dem Auswählen einer kleineren relativen Schriftgröße können Sie verhindern, dass der Text in der Tabellenzelle beim Betrachten mit den geläufigsten Browsern umbrochen wird.

ADOBE GOLIVE 5.0 Classroom in a Book

Bedenken Sie, dass Text in Browsern für Windows generell größer dargestellt wird. Falls Sie Ihre Formulare unter Mac OS entwerfen, sollten Sie den Text möglichst klein halten und zusätzlichen Platz in Ihren Tabellenzellen lassen. Sie sollten das Aussehen Ihrer Formulare grundsätzlich in Browsern unter Windows und Mac OS überprüfen, bevor Sie sie auf einen Webserver laden. 8

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Hinzufügen eines Name-Felds Jetzt werden Sie der Tabelle ein Textfeld hinzufügen, in das Besucher ihren Namen eingeben sollen. Wenn Sie Textfelder hinzufügen, sollten Sie immer auch eine Bezeichnung hinzufügen. Die Bezeichnung weist den Besucher auf die Art der einzugebenden Information hin. 1

Klicken Sie in der Objekte-Palette auf den Reiter »Formularelemente« ( ). Die Registerkarte »Formularelemente« enthält eine Vielzahl von Elementen, die Sie einem Formular hinzufügen können, einschließlich des FormularSymbols selbst. A

B

C

D

E

F

G

H

J

K

L

M

N

O

P

Q

I

A. Formular B. Abschicken-Schaltfläche C. Zurücksetzen-Schaltfläche D. Schaltfläche E. Formularbild (Windows) bzw. Bild (Mac OS) F. Beschriftung G. Textfeld H. Kennwort I. Textbereich J. Kontrollkästchen K. Optionsfeld L. Popup-Menü M. Listenfeld N. Datei-Browser O. Verborgenes Feld (Windows) bzw. Unsichtbar (Mac OS) P. Verschlüsselung Q. Gruppierung (Windows) bzw. Feldsammlung (Mac OS)

343

344 LEKTION 10 Formulare einrichten

2

Ziehen Sie ein Beschriftungssymbol aus der Objekte-Palette auf die zweite Zelle der Tabelle.

3

Wählen Sie das Wort Label aus. Geben Sie dann den Text Name: ein, um den Beschriftungstext zu ändern.

Um den Label-Text schnell und einfach auszuwählen, klicken Sie ihn unter Windows doppelt, unter Mac OS dreifach an. 4

Wählen Sie den Text aus, den Sie gerade eingegeben haben, und wählen Sie in der Werkzeugleiste aus dem Menü »Schriftgröße« ( ) den Eintrag »2«.

Nun werden Sie das Textfeld für den Namen des Besuchers hinzufügen. 5

Klicken Sie hinter die Beschriftung Name, um eine Einfügemarke zu setzen. (Vergewissern Sie sich, dass Sie hinter die Beschriftung geklickt haben und nicht auf den Beschriftungstext.) Drücken Sie danach die Leertaste, um ein Leerzeichen einzufügen.

6

Ziehen Sie aus der Objekte-Palette ein Textfeld-Symbol an die Einfügemarke auf der Seite.

Ziehen eines Textfeldes auf eine Tabellenzelle

Der Inspektor wird zum Formular-Textfeld-Inspektor. 7

Geben Sie im Textfeld »Name« des Formular-Textfeld-Inspektors den Text nameField ein. Damit benennen Sie das Textfeld in der Tabelle.

ADOBE GOLIVE 5.0 Classroom in a Book

8

Geben Sie im »Inhalt« (Mac OS) bzw. »Wert« (Windows) den Text Enter name here ein.

Der Text, den Sie gerade eingegeben haben, wird im Textfeld dieser Seite dargestellt. Besucher können beim Ausfüllen des Formulars diesen Text durch ihre eigenen Daten ersetzen. Falls Sie es vorziehen, Formulare ohne Beschriftungen zu entwerfen, können Sie stattdessen auch nur Beschreibungen in die Textfelder »Wert« (Mac OS) bzw. »Inhalt« (Windows) eingeben. 9

Geben Sie im Textfeld »Sichtbar« den Wert 20 ein. Das ist die Anzahl der sichtbaren Zeichen in diesem Feld.

10 Geben Sie im Textfeld »Maximal« den Wert 40 ein. Das ist die Anzahl der Zeichen, die höchstens in dieses Feld eingegeben werden können.

Hinzufügen von Adressfeldern Jetzt werden Sie der Tabelle drei Adressfelder hinzufügen, damit Besucher ihre postalische und ihre E-Mail-Adresse eingeben können. Um Zeit zu sparen, werden Sie die Beschriftung und das Textfeld aus der zweiten Zelle kopieren und in die dritte, vierte und fünfte Zelle einfügen. 1

Wählen Sie im Dokumentfenster den Inhalt der zweiten Zelle aus. (Die zweite Zelle enthält die Beschriftung Name: und das Textfeld Enter name here.) Am einfachsten gelingt dies, wenn Sie die Einfügemarke in der Zelle platzieren und anschließend Bearbeiten: Alles auswählen wählen.

2

Halten Sie die Strg-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt und ziehen Sie die Auswahl aus der zweiten Zelle nach unten in die dritte Zelle. Der Inhalt der zweiten und der dritten Zelle sollte nun gleich sein. (Achtung: GoLive 5.0 übernimmt unter Windows beim Kopieren der Zellen keine Leerzeichen. Das Leerzeichen im Feld Name: ist daher wie oben unter Schritt 5 beschrieben noch hinzuzufügen.)

3

Halten Sie die Strg-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt und ziehen Sie die Auswahl von der dritten Zelle in die vierte Zelle. Der Inhalt der dritten und der vierten Zelle sollte nun identisch sein (Leerzeichen!).

345

346 LEKTION 10 Formulare einrichten

4

Halten Sie die Strg-Taste (Windows) bzw. die Wahltaste (Mac OS) gedrückt und ziehen Sie die Auswahl von der vierten Zelle in die fünfte Zelle. Der Inhalt der vierten und der fünften Zelle sollte nun gleich sein (Leerzeichen!).

5

Ändern Sie den Beschriftungstext in der dritten Zelle in E-Mail:, den Beschriftungstext der vierten Zelle in Address 1: und den Beschriftungstext der fünften Zelle in Address 2:.

6

Wählen Sie das Textfeld mit der Beschriftung »E-Mail:« in der dritten Zelle aus. (Vergewissern Sie sich, dass Sie das Textfeld rechts auswählen, nicht die Beschriftung links.) Geben Sie im Textfeld »Name« des Formular-TextfeldInspektors den Text emailField ein.

7

Löschen Sie den Text im Textfeld »Inhalt« (Mac OS) bzw. »Wert« (Windows). Die meisten Betrachter werden nach dem Ausfüllen des ersten Textfeldes wissen, was in dieses Feld eingetragen werden soll. (Sie können wahlweise das Wort Name im Textfeld »Inhalt« (Mac OS) bzw. »Wert« (Windows) durch EMail address ersetzen.)

Auswählen eines Textfelds

8

Festlegen seiner Eigenschaften

Wählen Sie das Textfeld in der vierten Zelle mit der Beschriftung Address 1: aus. Geben Sie im Textfeld »Name« des Formular-Textfeld-Inspektors den Text address1Field ein. Löschen oder ändern Sie den Text im Textfeld »Inhalt« (Mac OS) bzw. »Wert« (Windows).

ADOBE GOLIVE 5.0 Classroom in a Book

9

Wählen Sie das Textfeld in der fünften Zelle mit der Beschriftung Address 2: aus. Geben Sie im Textfeld »Name« des Formular-Textfeld-Inspektors address2Field ein. Löschen oder ändern Sie den Text im Textfeld »Inhalt« (Mac OS) bzw. »Wert« (Windows).

Sie werden feststellen, dass für jedes Textfeld ein Kontrollkästchen »Kennwortfeld« im Formular-Textfeld-Inspektor vorgesehen ist. Sie können dieses Kontrollkästchen einschalten, wenn ein Betrachter ein Kennwort in das Textfeld eingeben soll.

Ausrichten von Tabellenzellen Sie werden jetzt den Tabellen-Inspektor dazu benutzen, den Inhalt aller Tabellenzellen auszurichten, die Textfelder enthalten. 1

Bewegen Sie den Zeiger über die rechte oder untere Kante der zweiten Zelle, bis sich der Zeiger in einen Pfeil ändert. Klicken Sie dann, um die Zelle auszuwählen.

Der Inspektor wird zum Tabellen-Inspektor und die Registerkarte »Zelle« wird automatisch angezeigt. 2

Klicken Sie mit gedrückter Umschalttaste auf die rechte oder untere Kante der dritten, vierten und fünften Zelle, um sie der Auswahl hinzuzufügen. Jetzt sollten alle Zellen ausgewählt sein, die Textfelder enthalten.

347

348 LEKTION 10 Formulare einrichten

3

Wählen Sie im Tabellen-Inspektor aus dem Popup-Menü »Vertikale Ausrichtung« (Windows) bzw. »Vert. Ausrichtung« (Mac OS) den Eintrag »Mittig«. Wählen Sie im Popup-Menü »Horizontale Ausrichtung« (Windows) bzw. »Horiz. Ausrichtung« (Mac OS) den Eintrag »Rechts«.

Auswählen aller Zellen, die Textfelder enthalten

Auswählen von mittiger vertikaler und rechter horizontaler Ausrichtung

4

Klicken Sie in den Leerraum außerhalb der Tabelle, um die Auswahl der Zellen aufzuheben.

5

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Verknüpfen von Beschriftungen mit Textfeldern Sie werden nun jede Beschriftung mit ihrem entsprechenden Textfeld auf der Seite verknüpfen. Dadurch ermöglichen Sie dem Betrachter, das Textfeld einfach auszuwählen, indem er auf die zugehörige Beschriftung klickt. Der Betrachter kann beispielsweise auf die Beschriftung Name: klicken, damit eine Einfügemarke in das Textfeld gesetzt wird und er seinen Namen eingeben kann. Zuerst werden Sie die Beschriftung Name: mit ihrem entsprechenden Textfeld verknüpfen.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Bewegen Sie den Zeiger auf einen Rand der Beschriftung Name:, so dass der Mauszeiger sich in dieses Symbol ( ) ändert. Klicken Sie dann auf die Beschriftung, um sie auszuwählen. Der Inspektor ändert sich in den Formular-Beschriftung-Inspektor.

2

Ziehen Sie im Formular-Beschriftungs-Inspektor von der Schaltfläche »Point & Shoot« ( ) auf das entsprechende Textfeld neben der Beschriftung Name:. Im Textfeld »Referenz« des Formular-Beschriftungs-Inspektors wird ein Verweis auf das Textfeld »nameField« angezeigt. Die automatisch generierte Ziffer in der Referenz hilft Adobe GoLive bei der Zuordnung der Beschriftung und des Feldes.

Verknüpfung von Beschriftung und Textfeld

3

Wählen Sie die Beschriftung E-Mail: aus und verknüpfen Sie sie mit ihrem entsprechenden Textfeld, indem Sie die Schaltfläche »Point & Shoot« im Formular-Beschriftungs-Inspektor benutzen.

4

Verknüpfen Sie die Beschriftungen Address 1: und Address 2: mit ihren entsprechenden Textfeldern.

Hinweis: Wenn Sie ein Label kopieren und einfügen, das mit einem Formularfeld verknüpft wurde, müssen Sie das neue Label erneut mit dem richtigen Feld verknüpfen. Andernfalls werden sich beide Labels auf dasselbe Feld beziehen. 5

Wählen Sie Datei: Speichern, um die Seite zu sichern.

349

350 LEKTION 10 Formulare einrichten

Erzeugen eines Popup-Menüs Popup-Menüs ermöglichen dem Betrachter die Auswahl aus einer Vielzahl von Optionen. Sie werden jetzt ein Popup-Menü hinzufügen, aus dem der Betrachter das Land aussuchen kann, in dem er lebt. 1

Ziehen Sie aus der Objekte-Palette ein Beschriftungssymbol auf die sechste Zelle der Tabelle.

2

Wählen Sie das Wort Beschriftung aus. Geben Sie anschließend den Text Country: ein, um den Beschriftungstext zu ändern.

3

Wählen Sie den Text aus, den Sie gerade eingegeben haben, und wählen Sie in der Werkzeugleiste aus dem Menü »Schriftgröße« den Wert »2« aus.

4

Klicken Sie hinter die Beschriftung, um eine Einfügemarke zu setzen. (Vergewissern Sie sich, wirklich hinter der Beschriftung geklickt zu haben und nicht auf den Beschriftungstext.) Drücken Sie anschließend die Leertaste, um ein Leerzeichen einzufügen.

5

Ziehen Sie aus der Objekte-Palette ein Popup-Symbol auf die Einfügemarke im Dokumentfenster. Auf der Seite wird ein Platzhalter für das Popup-Menü dargestellt.

6

Bewegen Sie den Zeiger über den rechten oder unteren Rand der sechsten Zelle, bis der Zeiger sich in einen Pfeil ändert. Klicken Sie dann, um die Zelle auszuwählen.

Der Inspektor ändert sich in den Tabellen-Inspektor und die Registerkarte »Zelle« wird automatisch ausgewählt. 7

Wählen Sie im Tabellen-Inspektor aus dem Popup-Menü »Vert. Ausrichtung« den Eintrag »Mittig«. Wählen Sie aus dem Popup-Menü »Horiz. Ausrichtung« den Eintrag »Rechts«.

8

Wählen Sie den Popup-Menü-Platzhalter auf der Seite aus. Der Inspektor wird zum Formular-Popup-Menü-Inspektor.

9

Geben Sie im Formular-Popup-Menü-Inspektor im Textfeld »Name« den Text countryPopup ein. Damit benennen Sie das Popup-Menü.

ADOBE GOLIVE 5.0 Classroom in a Book

Belassen Sie den Wert im Textfeld »Zeilen« auf 1. Das bedeutet, dass eine Zeile (oder ein Element) im Popup-Menü sichtbar ist. Nun werden Sie den Formular-Popup-Menü-Inspektor benutzen, um dem Popup-Menü weitere Elemente hinzuzufügen. 10 Klicken Sie in der Auswahlliste »Fokus« auf das erste Element, um es auszuwählen. (Das erste Element hat gegenwärtig die Beschriftung 1. und einen Wert von 1.) 11 Geben Sie in das erste Textfeld unten im Formular-Popup-Menü-Inspektor den Text Canada ein, um den Eintrag 1. zu ersetzen, und drücken Sie die Tabulatortaste. Geben Sie in das zweite Textfeld den Text Country_Canada ein, um den Eintrag 1. zu ersetzen. Im Popup-Menü wird die Beschriftung Canada als Element dargestellt und der Wert Country_Canada würde an das CGI-Script des Formulars zurückgesendet, wenn ein Besucher es auswählt. 12 Wählen Sie das zweite Element in der Auswahlliste »Fokus« aus. (Das zweite Element ist momentan mit 2. und einem Wert von 2. beschriftet.) Benutzen Sie die Textfelder unten im Formular-Popup-Menü-Inspektor, um France als Beschriftung und Country_France als Wert einzugeben. 13 Wählen Sie das dritte Element in der Auswahlliste »Fokus« und geben Sie Germany als Bezeichnung und Country_Germany als Wert ein. Jetzt werden Sie dem Popup-Menü ein viertes Element hinzufügen. 14 Klicken Sie auf die Schaltfläche »Neu«, um ein viertes Element zu erzeugen. Geben Sie anschließend USA als Beschriftung und Country_USA als Wert ein. Per Voreinstellung wird das erste Element, das Sie dem Popup-Menü hinzugefügt haben (Canada), im Browser angezeigt. Da allerdings vermutlich die meisten Betrachter dieser Website aus den Vereinigten Staaten von Amerika kommen werden, werden Sie die Voreinstellung so ändern, dass USA angezeigt wird.

351

352 LEKTION 10 Formulare einrichten

15 Klicken Sie im Formular-Popup-Menü-Inspektor auf das Kontrollkästchen neben dem Textfeld, das den Text USA enthält.

Festlegen des Menüelementes, das per Voreinstellung zuerst dargestellt werden soll

Das Popup-Menü auf der Seite zeigt nun den Text USA an. 16 Wählen Sie Datei: Speichern, um die Seite zu sichern.

Festlegen der Tabelleneigenschaften Mit dem Hinzufügen der Formularfelder zur Tabelle sind Sie nun fertig. Jetzt werden Sie den Rand der Tabelle entfernen und weitere Tabelleneigenschaften festlegen. Wenn Sie vorhaben, die Tabellenränder in Ihren Formularen zu entfernen, empfehlen wir Ihnen, diesen Schritt als letzten vorzunehmen. Es ist einfacher, Tabellenzellen auszuwählen, solange ihr Rand auf den Standardwert 1 eingestellt ist.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Bewegen Sie den Mauszeiger über den linken oder oberen Rand der Tabelle, so dass der Mauszeiger sich in dieses Symbol ( ) ändert. Klicken Sie dann auf die Tabelle, um sie auszuwählen. Der Inspektor wird zum Tabellen-Inspektor und die Registerkarte »Tabelle« wird automatisch dargestellt.

Sie können mit Hilfe des Inspektors überprüfen, ob Sie die Tabelle oder ein Formularfeld ausgewählt haben. 2

Geben Sie im Tabellen-Inspektor im Textfeld »Rand« den Wert 0 ein, den Wert 2 für »Zellinnenrand« und den Wert 0 für »Zellabstand«.

3

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Speichern von häufig verwendeten Objekten Sie können mit Adobe GoLive einfach und bequem Objekte auf einer Seite kopieren und in eine andere Seite einfügen. Häufig benutzte Objekte lassen sich in der Registerkarte »Eigene« (Windows) bzw. »Benutzerdefiniert« (Mac OS) der Objekte-Palette ablegen und anschließend schnell wieder Ihren Seiten hinzufügen. Nun werden Sie die Tabelle, die Sie gerade erzeugt haben, in der Registerkarte »Eigene« bzw. »Benutzerdefiniert« in der Objekte-Palette ablegen, damit Sie sie schnell in das Mitgliedschaft-Antragsformular einfügen können. 1

Klicken Sie in der Objekte-Palette auf den Reiter »Eigene« (Windows) bzw. »Benutzerdefiniert« (Mac OS) ( ), oder rufen Sie die Registerkarte über das Fenster-Popup-Menü auf, indem Sie rechts im Fenster auf das kleine schwarze Dreieck klicken und im Popup-Menü den Eintrag »Eigene« bzw. »Benutzerdefiniert« auswählen.

2

Klicken Sie in der Seite auf den linken oder oberen Rand der Tabelle, um sie auszuwählen.

353

354 LEKTION 10 Formulare einrichten

3

Ziehen Sie die ausgewählte Tabelle aus der Seite auf die Registerkarte »Eigene« bzw. »Benutzerdefiniert in der Objekte-Palette. (Lassen Sie die Tabelle los, wenn das Registerkartenfenster mit einem dicken schwarzen Rand dargestellt wird.) In der Objekte-Palette wird nun ein Symbol für die Tabelle dargestellt.

Ziehen der Tabelle von der Seite auf die Registerkarte »Eigene« (Windows) bzw. »Benutzerdefiniert« (Mac OS) der Objekte-Palette

4

Doppelklicken Sie auf das Tabellen-Symbol, um das Dialogfenster »Editor für Palettenelemente« aufzurufen. Geben Sie dort im Textfeld »Objektname« den Text Name and Address ein und klicken Sie auf OK. Damit benennen Sie das Tabellen-Symbol.

Objekte in der Registerkarte »Eigene« bzw. »Benutzerdefiniert« der ObjektePalette werden in Ihren Adobe-GoLive-Präferenzen (Preferences) gespeichert. Sie können diese Objekte den Seiten einer bestehenden Website oder einer neuen Website hinzufügen; sie bleiben so lange in der Objekte-Palette gespeichert, bis Sie Ihre Preferences löschen oder neu installieren. Objekte in der Registerkarte »Eigene« bzw. »Benutzerdefiniert« lassen sich löschen, indem Sie sie anklicken, um sie auszuwählen und anschließend Bearbeiten: Löschen wählen oder die Entfernentaste drücken. Sie werden jetzt die Registerkarte »Eigene« bzw. »Benutzerdefiniert« der ObjektePalette benutzen, um die Tabelle dem Aufnahmeantragformular für Mitglieder hinzuzufügen. 5

Wählen Sie Datei: Schließen, um die Datei Name_form.html zu schließen.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Wählen Sie Datei: Öffnen, und öffnen Sie die Datei Membership.html im Pfad Lesson10/10Start/Forms Folder/Forms/Membership.html.

Das Formular für die Beantragung der Mitgliedschaft wird geöffnet. 7

Vergrößern Sie das Dokumentfenster Membership.html so, dass Sie möglichst viel von dem Formular sehen können.

Sie werden feststellen, dass in dem Formular einige Bilder und Formularfelder fehlen. 8

Ziehen Sie das Tabellen-Symbol Name and Address aus der Objekte-Palette auf die Tabellenzelle im Formular direkt unter den Worten Membership Application.

Ziehen des Tabelle-Symbols aus der Objekte-Palette auf das Antragsformular

Die Haupttabelle für das Antragsformular wurde so eingerichtet, dass die Tabelle Personal Information genau in die vorgesehene Zelle passt. Normalerweise müssen Sie die Ausmaße einer Zelle in der Haupttabelle so anpassen, dass die einzubettende Tabelle genau passt.

355

356 LEKTION 10 Formulare einrichten

Bevor Sie mit dem Erzeugen eines Formulars anfangen, empfiehlt es sich, das Layout sorgfältig zu planen. Sie sollten sich Gedanken über den Inhalt der Haupttabelle machen und dabei besonders darauf achten, ob weitere Tabellen eingebettet werden sollen. Durch sorgfältiges Planen wird Ihnen die Mühe erspart, das Formular-Layout während des Erzeugens neu zu entwerfen. 9

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Hinzufügen eines Bildes über zwei Spalten Sie werden jetzt die Wörter Membership Application durch ein Bild ersetzen. Dafür werden Sie zuerst die Tabellenspalten ausrichten, damit die Wörter Membership Application über zwei Spalten reichen. 1

Bewegen Sie Ihren Mauszeiger auf die Zelle, die die Wörter Membership Application enthält, so dass der Mauszeiger sich in einen Pfeil ändert. Klicken Sie anschließend, um die Zelle auszuwählen.

Der Inspektor ändert sich in den Tabellen-Inspektor mit automatisch ausgewählter Registerkarte »Zelle«. 2

Geben Sie im Tabellen-Inspektor im Textfeld »Horiz. vereinigen« den Wert 2 ein.

Nun werden Sie den Text durch ein Bild ersetzen. 3

Wählen Sie die Wörter Membership Application aus und drücken Sie die Entfernentaste.

Sie werden eine Datei aus dem Site-Fenster benutzen, um dem Formular das Bild hinzuzufügen. 4

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Forms.site im Pfad Lesson10/10Start/Forms Folder/Forms.site.

Das Site-Fenster wird geöffnet. Es enthält einen Ordner Media, die Datei Index.html und die Datei Membership.html. Außerdem enthält es noch die Datei Name_form.html, die Sie weiter vorne in dieser Lektion erzeugt haben; um allerdings diese Datei im Site-Fenster darstellen zu lassen, müssen Sie den Inhalt des Fensters aktualisieren.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Klicken Sie auf die Schaltfläche »Aktualisieren« ( Fensters zu aktualisieren.

6

Öffnen Sie im Site-Fenster den Ordner Media. Ziehen Sie anschließend die Datei Form_header.jpg aus dem Ordner Media im Site-Fenster auf die nun leere Tabellenzelle, die vormals die Wörter Membership Application enthielt. Das Bild wird der Zelle hinzugefügt.

), um den Inhalt des Site-

Ziehen der Bilddatei aus dem Site-Fenster auf die Tabellenzelle

7

Wählen Sie Datei: Speichern, um die Seite zu sichern.

357

358 LEKTION 10 Formulare einrichten

Hinzufügen von Optionsfeldern Der Abschnitt Payment Information in der Ecke unten rechts im Formular enthält bereits eine eingebettete Tabelle (mit einer Zeile und fünf Spalten), die der Haupttabelle zugefügt wurde. Sie werden diesem Abschnitt eine Gruppe von Optionsfeldern hinzufügen, damit Betrachter eine Zahlweise auswählen können.

Abschnitt Zahlweise des Formulars

Wenn Sie den Abschnitt Zahlweise (Payment Information) ohne Vorgaben erzeugen müssten, würden Sie ihn ähnlich wie den Abschnitt über die persönlichen Angaben (Personal Information) aufbauen. Sie würden zunächst eine einzeilige Tabelle mit fünf Spalten anlegen. Danach würden Sie in die erste Zelle den Text Payment Type: eingeben und in die dritte und fünfte Zelle Abbildungen einer MasterCard und einer Visa Card einfügen. Sie würden anschließend in die zweite und vierte Zelle Optionsfelder einfügen, so, wie Sie es auch in dieser Lektion machen werden.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie in der Objekte-Palette auf den Reiter »Formular« ( ). Ziehen Sie danach das Optionsfeld-Symbol aus der Objekte-Palette in die leere Zelle links von der MasterCard-Abbildung auf der Webseite.

Ziehen des Optionsfeld-Symbols aus der Objekte-Palette in die Tabellenzelle

Der Inspektor ändert sich in den Formular-Optionsfeld-Inspektor. 2

Ziehen Sie ein weiteres Optionsfeld-Symbol aus der Objekte-Palette in die leere Zelle links von der VISA-Abbildung.

Sie können das vorhandene Optionsfeld auf der Webseite auch kopieren und in die leere Zelle einfügen. Dazu müssen Sie das Optionsfeld mit gedrückter Strg(Windows) bzw. Wahltaste (Mac OS) auf die leere Zelle ziehen. 3

Klicken Sie das erste hinzugefügte Auswahlfeld an, um es auszuwählen.

4

Geben Sie im Formular-Optionsfeld-Inspektor im Textfeld »Gruppe« den Text paymentType ein. Damit benennen Sie die Gruppe der Optionsfelder.

Sie werden denselben Gruppennamen für das zweite Auswahlfeld auf der Seite verwenden. Wenn zwei Optionsfelder denselben Gruppennamen verwenden, wird sichergestellt, dass Besucher nur ein Feld aus der Gruppe auswählen können. 5

Geben Sie im Textfeld »Wert« den Text mastercard ein. Das ist der Wert, der an das CGI-Skript des Formulars zurückgesendet wird, wenn ein Betrachter dieses Feld auswählt.

6

Wählen Sie die Option »Ausgewählt« an. Damit wählen Sie MasterCard als Voreinstellung aus.

Hinweis: Es ist nicht erforderlich, eines der Auswahlfelder als Voreinstellung auszuwählen.

359

360 LEKTION 10 Formulare einrichten

7

Wählen Sie das zweite Auswahlfeld aus, das Sie der Seite hinzugefügt haben.

8

Wählen Sie im Formular-Optionsfeld-Inspektor aus dem Popup-Menü neben dem Textfeld »Gruppe« die Option paymentType aus. Geben Sie im Textfeld »Wert« den Text visa ein.

9

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Sie werden sich jetzt eine Vorschau der Webseite in Adobe GoLive ansehen, um die Formularfelder auszuprobieren, die Sie bis jetzt eingefügt haben. 10 Klicken Sie im Dokumentfenster auf den Reiter »Layout-Vorschau«, um eine Vorschau der Seite in Adobe GoLive betrachten zu können.

Vorschau der Formularfelder, die Sie in die Webseite eingefügt haben

ADOBE GOLIVE 5.0 Classroom in a Book

11 Probieren Sie die von Ihnen erzeugten Formularfelder aus, indem Sie Ihren Namen und Ihre Adresse eingeben, ein Land auswählen und sich für eine der Zahlweisen entscheiden. 12 Klicken Sie auf den Reiter »Layout-Editor« im Dokumentfenster, um zurück in die Layout-Ansicht zu gelangen.

Ändern eines Listenfelds Oben rechts im Formular stellt ein Listenfeld eine Reihe von Arbeitskreisen (Workshops) vor, aus denen der Betrachter auswählen kann. Das Listenfeld wurde auf ähnliche Weise erzeugt wie das Popup-Menü »Country«. Sie werden am Listenfeld einige Änderungen vornehmen. Zunächst werden Sie das Listenfeld so ändern, dass es gleichzeitig sechs statt fünf Elemente anzeigen kann. 1

Klicken Sie auf das Listenfeld, um es auszuwählen. Der Inspektor ändert sich in den Formular-Listenfeld-Inspektor.

Sie werden feststellen, dass die Elemente im Formular-Listenfeld-Inspektor in der gleichen Weise wie im Popup-Menü »Country« eingegeben wurden. Jedes Element besitzt eine bestimmte Beschreibung und einen bestimmten Wert. 2

Geben Sie im Textfeld »Zeilen« den Wert 6 ein. Damit erhöhen Sie die sichtbaren Zeilen (bzw. Elemente) im Listenfeld auf sechs.

Sie werden jetzt das Listenfeld in ein Mehrfachauswahlformularfeld ändern, damit der Anwender mehr als einen Workshop auswählen kann.

361

362 LEKTION 10 Formulare einrichten

3

Schalten Sie das Kontrollkästchen »Mehrfachauswahl« ein.

Listenfeld auswählen

Optionen im Formular-ListenfeldInspektor einstellen

Nun werden Sie dem Listenfeld drei weitere Elemente hinzufügen. 4

Klicken Sie auf die Schaltfläche »Neu«, um ein neues Element zu erzeugen. Geben Sie im Formular-Listenfeld-Inspektor in das erste Textfeld unten den Text History of Poetry ein. Im zweiten Textfeld geben Sie den Text Workshops_History ein.

5

Falls nötig, scrollen Sie im Formular-Listenfeld-Inspektor im Listenfeld Fokus nach unten, um das von Ihnen gerade hinzugefügte Element zu betrachten. (Wahlweise können Sie auch die Ausmaße des Inspektors vergrößern, indem Sie an seiner rechten unteren Ecke ziehen.)

6

Klicken Sie auf die Schaltfläche »Neu«, um ein weiteres neues Element zu erzeugen, und geben Sie im Textfeld »Beschriftung« den Text European Poetry und im Textfeld »Wert« den Text Workshops_European ein.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Klicken Sie auf »Neu«, um noch ein neues Element zu erzeugen, und geben Sie African Poetry unter »Beschriftung« und Workshops_African unter »Wert« ein.

Erzeugen zusätzlicher Beschriftungen und Werte im Listenfeld Fokus

8

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Nun werden Sie sich die Seite in der Vorschau in Adobe GoLive ansehen, um das korrekte Funktionieren des Listenfelds zu überprüfen. 9

Klicken Sie im Dokumentfenster auf den Reiter »Layout-Vorschau«. Um mehr als ein Element im Listenfeld auszuwählen, klicken Sie zuerst auf das Element Ihrer Wahl und danach mit gedrückter Umschalttaste auf alle anderen, die Sie der Auswahl hinzufügen möchten. Außerdem können Sie mit gedrückter Umschalttaste einen unmittelbar aufeinander folgenden Bereich von Elementen in der Liste auswählen.

10 Klicken Sie im Dokumentfenster auf den Reiter »Layout-Editor«, um zurück in die Layout-Ansicht zu gelangen.

363

364 LEKTION 10 Formulare einrichten

Hinzufügen eines Hotspot-Bereichs Als Nächstes werden Sie dem Formular einen Hotspot-Bereich hinzufügen, um damit den Mitgliedschaftsantrag über das Web absenden zu können. Dies ist eine der Methoden, mit denen Sie dem Betrachter das Übermitteln eines Formulars ermöglichen können. Wahlweise können Sie auch eine Abschicken-Schaltfläche hinzufügen; mehr dazu lesen Sie unter Hinzufügen einer Zurücksetzen-Schaltfläche auf Seite 366. 1

Falls nötig, scrollen Sie im Dokumentfenster Membership.html nach unten, um den unteren Bereich des Formulars anzuzeigen. Die Haupttabelle, die für das Anlegen des Formulars benutzt wurde, besitzt in der letzten Zeile zwei leere Zellen.

2

Klicken Sie unterhalb der MasterCard-Abbildung, um eine Einfügemarke in die leere Zelle links zu setzen.

3

Ziehen Sie aus der Registerkarte »Formularelemente« der Objekte-Palette ein Bild-Symbol an die Einfügemarke auf der Seite. Der Tabellenzelle wird ein Formular-Bildplatzhalter hinzugefügt und der Inspektor ändert sich in den Formular-Bild-Inspektor.

4

Falls nötig ordnen Sie Ihren Desktop so an, dass Sie im Dokumentfenster sowohl den Formular-Bildplatzhalter als auch im Ordner Media im SiteFenster die Datei Submit.jpg sehen können. Klicken Sie dann auf den Formular-Bildplatzhalter auf der Webseite, um ihn wieder auszuwählen.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Ziehen Sie im Formular-Bild-Inspektor von der Schaltfläche »Point & Shoot« ( ) auf die Datei Submit.jpg im Ordner Media im Site-Fenster. Das Bild Submit application wird in die Zelle eingefügt.

Verbinden des Formular-Bildplatzhalters auf der Webseite mit der Bilddatei im Site-Fenster

6

Geben Sie im Textfeld »Ersatztext« den Text Submit Image als Ersatztext für das Bild ein.

7

Klicken Sie im Formular-Bild-Inspektor auf den Reiter »Weitere«. Geben Sie im Textfeld »Name« neben dem Kontrollkästchen »Formular« den Text submitImage ein. Damit wird das anklickbare Bild benannt.

8

Klicken Sie im Formular-Bild-Inspektor auf den Reiter »Allgemein«. Schalten Sie das Kontrollkästchen »Rand« ein und geben Sie erforderlichenfalls im zugehörigen Textfeld den Wert 0 ein. Dadurch verhindern Sie, dass ein Rahmen das Aussehen des Bilds beeinflusst.

9

Wählen Sie Datei: Speichern, um die Seite zu sichern.

365

366 LEKTION 10 Formulare einrichten

Hinzufügen einer Zurücksetzen-Schaltfläche Sie können Ihrem Formular auf mindestens zwei Arten Schaltflächen hinzufügen. Bei der ersten Methode erstellen Sie das Bild einer Schaltfläche und verknüpfen sie mit einer oder mehreren Aktionen. Die zweite Methode verwendet die »Abschicken-Schaltfläche« oder »Zurücksetzen-Schaltfläche« aus der Registerkarte »Formularelemente« in der Objekte-Palette. Im Folgenden wird erklärt, was passiert, wenn der Betrachter auf eine dieser vorbereiteten Schaltflächen klickt:

• Die Abschicken-Schaltfläche sendet die Daten des Besuchers an Ihre Datenbank und schließt das Formular. • Die Zurücksetzen-Schaltfläche löscht alle Daten des Besuchers und stellt die Standardeinstellungen des Formulars wieder her. Sie werden dem Formular nun eine Zurücksetzen-Schaltfläche hinzufügen. 1

Ziehen Sie ein Zurücksetzen-Schaltflächen-Symbol aus der Registerkarte »Formularelemente« in der Objekte-Palette auf die leere Tabellenzelle rechts vom Bild submit application. Der Inspektor ändert sich in den FormularSchaltflächen-Inspektor.

Ziehen des Zurücksetzen-Schaltfläche-Symbols aus der Objekte-Palette auf die Tabellenzelle

Die notwendigen Optionen für die Zurücksetzen-Schaltfläche sind bereits voreingestellt. Falls Sie eine Standardschaltfläche erzeugen möchten, brauchen Sie nur noch einen Namen und eine Beschriftung einzugeben.

ADOBE GOLIVE 5.0 Classroom in a Book

Um mehr über das Erzeugen von Standardschaltflächen zu erfahren, lesen Sie »Verwenden von universellen Schaltflächen« im Kapitel 12 im Adobe GoLive 5.0 Handbuch. 2

Wählen Sie Datei: Speichern, um die Seite zu sichern.

Ändern des Haupttabellenrands und des Zellabstands Nun sind Sie mit dem Hinzufügen von Bildern und Formularfeldern zum Formular fertig und können den Rand der Haupttabelle und den Zellabstand entfernen. (Sowohl der Rand als auch Zellabstand sind noch auf 2 eingestellt; dadurch war es für Sie einfacher, die Tabelle und ihre Zellen beim Ändern des Formulars auszuwählen.) 1

Klicken Sie im Dokumentfenster den linken oder oberen Rand der Haupttabelle an, um ihn auszuwählen. Der Inspektor ändert sich in den TabellenInspektor mit automatisch ausgewählter Registerkarte »Tabelle«.

2

Geben Sie im Tabellen-Inspektor im Textfeld »Rand« den Wert 0 ein und im Textfeld »Zellabstand« den Wert 0.

3

Wählen Sie Datei: Speichern, um die Seite zu sichern.

4

Klicken Sie im Dokumentfenster auf den Reiter »Layout-Vorschau« und überprüfen Sie das Erscheinungsbild der Webseite in der Vorschau.

5

Klicken Sie im Dokumentfenster auf den Reiter »Layout-Editor«, um wieder zurück in die Layout-Ansicht zu gelangen.

367

368 LEKTION 10 Formulare einrichten

Einrichten einer Tabulatorfolge Sie werden Ihrem Formular jetzt eine Navigationshilfe hinzufügen – eine Tabulatorfolge, die es dem Betrachter erlaubt, sich mit Hilfe der Tabulatortaste durch die Formularfelder zu bewegen. Um eine Tabulatorfolge zu erzeugen, legen Sie die Reihenfolge fest, in der die Formularfelder durch die Tabulatortaste ausgewählt werden. Sie sollten das Einrichten einer Tabulatorfolge erst ganz am Schluss vornehmen, wenn Sie mit dem Layout Ihres Formulars zufrieden sind. Hinweis: Einige Webbrowser erlauben dem Anwender von sich aus das Verwenden der Tabulatortaste zum Navigieren zwischen Textfeldern. Andererseits erlauben manche Browser die Benutzung der Tabulatortaste ausschließlich für die Navigation zwischen Textfeldern, aber keinen anderen Arten von Formularfeldern. Außerdem sollten Sie bedenken, dass die von Ihnen erzeugte Tabulatorfolge von manchen Browsern eventuell nicht erkannt wird; das kann vom verwendeten Browser bzw. der Version des Browsers abhängen. Sie können Ihre Tabulatorfolge mit jedem beliebigen Formularfeld beginnen. In unserem Fall werden Sie die Tabulatorfolge mit dem Textfeld für die Eingabe des Namens starten. 1

Wählen Sie das Textfeld mit dem Inhalt Enter name here auf der Webseite aus. Der Inspektor ändert sich in den Formular-Textfeld-Inspektor.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Schalten Sie im Formular-Textfeld-Inspektor das Kontrollkästchen »Tab« ein. Geben Sie im Textfeld »Tab« den Wert 1 ein. Damit legen Sie dieses Textfeld als erstes Formularfeld in der Tabulatorfolge fest.

Auswählen des Textfelds

3

Festlegen des Textfelds als erstes in der Tabulatorfolge

Klicken Sie auf die Schaltfläche zum Starten/Beenden der Indizierung ( ). Dadurch werden an jedem Formularfeld, das Teil der Tabulatorfolge sein könnte, kleine gelbe Quadrate dargestellt. (Die gelben Quadrate werden auch an den Formular-Beschriftungen angezeigt, obwohl Sie der Tabulatorfolge keine Beschriftungen hinzufügen können.)

369

370 LEKTION 10 Formulare einrichten

Das gelbe Quadrat im Textfeld für die Eingabe des Namens trägt bereits die Ziffer 1 und zeigt damit an, dass dieses Feld das erste in der Tabulatorfolge ist.

Klicken auf die Schaltfläche Starten/Beenden der Indizierung

Ergebnis

4

Klicken Sie auf das Textfeld für die Eingabe der E-Mail-Adresse. In seinem gelben Quadrat wird eine 2 angezeigt.

5

Fahren Sie mit dem Einrichten der Tabulatorfolge fort, indem Sie jeweils auf das gelbe Quadrat der verbleibenden Formularfelder klicken. (Achten Sie darauf, dass Sie auf die gelben Quadrate der Formularfelder klicken und nicht auf die Beschriftungen.)

6

Wenn Sie mit dem Einrichten der Tabulatorfolge fertig sind, klicken Sie im Inspektor auf die Schaltfläche zum Starten/Beenden der Indizierung. Damit haben Sie das Einrichten der Tabulatorfolge abgeschlossen und die gelben Quadrate werden nicht mehr angezeigt.

Falls Sie die Reihenfolge Ihrer Tabulatorfolge ändern möchten, können Sie jedes Formularfeld einzeln auswählen und im Inspektor eine neue Ziffer in das Textfeld »Tab« eingeben. 7

Wählen Sie Datei: Speichern, um die Seite zu sichern.

ADOBE GOLIVE 5.0 Classroom in a Book

8

Wählen Sie Spezial: Im Standardbrowser anzeigen. Platzieren Sie Ihren Mauszeiger in das Textfeld zum Eingeben des Namens und drücken Sie wiederholt die Tabulatortaste, um zu überprüfen, ob die Tabulatorfolge wie vorgesehen funktioniert.

9

Schließen Sie Ihren Browser.

10 Wählen Sie Datei: Schließen, um die Datei Membership.html zu schließen. In dieser Lektion haben Sie gelernt, wie Sie Formularfelder mit Hilfe einer Tabelle anlegen und wie Sie einem Formular eine Vielzahl von Formularfeldern hinzufügen können. Ihrem Formular lassen sich aber noch eine Menge anderer Formularfelder und Funktionen hinzufügen; dazu gehören: Kontrollkästchen, Dateiauswahlfelder, Verschlüsselungsgeneratoren, schreibgeschützte oder deaktivierte Formularelemente, Rahmenfelder für das Gruppieren von Formularfeldern und unsichtbare Formularfelder. Umfassende Informationen über das Erzeugen von Formularen in Adobe GoLive finden Sie in Kapitel 12 im Adobe GoLive 5.0 Handbuch, Einrichten von Formularen.

371

372 LEKTION 10 Formulare einrichten

Fragen 1

Was sind Formularfelder?

2

Warum müssen Sie jedem Formular das Formularelement-Symbol hinzufügen?

3

Warum sollten Sie es vermeiden, beim Anlegen eines Formulars ein LayoutRaster zu verwenden?

4

Wie können Sie einem Formular einen Hotspot-Bereich hinzufügen?

5

Wie fügen Sie einem Listenfeld ein Element hinzu?

6

Wie richten Sie für Ihr Formular eine Tabulatorfolge ein?

Antworten 1

Formularfelder sind Elemente, die Sie Ihrem Formular hinzufügen können; dazu gehören Textfelder, Optionsfelder oder Listenfelder. Der Betrachter kann mit diesen Formularfeldern interagieren, indem er Daten eingibt, darauf klickt oder Elemente auswählt.

2

Das Formularelement erzeugt den Container für jedes Formular und ermöglicht dem Formular die korrekte Darstellung und Funktionsweise.

3

Die Darstellung eines Formulars, das mit einem Layout-Raster angelegt wurde, kann je nach verwendetem Browser und Bildschirmauflösung des Besuchers unterschiedlich ausfallen.

4

Sie können folgendermaßen vorgehen, um einem Formular einen HotspotBereich hinzuzufügen:

• Ziehen Sie ein Bild-Symbol aus der Objekte-Palette auf das Formular und verwenden Sie die Schaltfläche »Point & Shoot« des Formular-BildInspektors, um den Platzhalter anschließend mit einer Bilddatei zu verbinden. • Ziehen Sie ein Bild-Symbol aus der Objekte-Palette auf das Formular und verwenden Sie die Schaltfläche »Auswahl« des Formular-Bild-Inspektors, um nach einer Bilddatei zu suchen. • Ziehen Sie eine Bilddatei direkt auf den Bildplatzhalter im Formular.

ADOBE GOLIVE 5.0 Classroom in a Book

Sie sollten außerdem sicherstellen, dass das Kontrollkästchen »Formular« im Formular-Bild-Inspektor eingeschaltet ist. 5

Klicken Sie im Formular-Listenfeld-Inspektor auf die Schaltfläche »Neu«, um ein neues Element zu erzeugen. Geben Sie anschließend in den Textfeldern »Beschriftung« und »Wert« entsprechende Texte und Werte ein.

6

Um eine Tabulatorfolge zu erzeugen, wählen Sie ein Formularfeld in Ihrem Formular aus und klicken Sie im Inspektor auf die Schaltfläche zum Starten/Beenden der Indizierung. Klicken Sie dann in der Reihenfolge, die der Betrachter beim Verwenden der Tabulatortaste einhalten soll, auf die gelben Quadrate der Formularfelder (nicht die Beschriftungen). Klicken Sie anschließend im Inspektor auf die Schaltfläche zum Starten/Beenden der Indizierung, um das Einrichten der Tabulatorfolge zu beenden.

373

Lektion 11

11 Verwenden von Cascading Style Sheets

Mit Hilfe von Style Sheets können Sie auf einfache Weise den Stil von großen Mengen Text aktualisieren und die Einheitlichkeit der Typographie und Formatierung einer ganzen Website beibehalten. Gutes, durchgängiges Design lässt eine Website für Betrachter einladender erscheinen und ist einfacher zu erkunden.

378 LEKTION 11 Verwenden von Cascading Style Sheets

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Bestimmen von Styles, die einem Dokument zugewiesen wurden • Erzeugen von Styles, die HTML-Elementen eines Dokuments, Textblöcken oder nur ausgewähltem Text zugewiesen werden • Aktualisieren von Styles und Zuweisen von globalen Style-Änderungen • Duplizieren und Ändern von vorhandenen Styles • Ändern von Seitenfarbe und -rändern mit Hilfe von Styles • Unterscheiden von internen und externen Style Sheets • Verknüpfen von externen Style Sheets mit einem Dokument und Verwendung dieser externen Style Sheets für das Aktualisieren einer Dokumentformatierung Für diese Lektion werden Sie etwa eine Stunde benötigen. Kopieren Sie, falls nötig, die Ordner Lesson11 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

Vorbereitungen Um einen Eindruck von dem zu bekommen, was Sie in dieser Lektion machen werden, werden Sie sich zunächst die fertig gestellte Datei aus dieser Lektion in Ihrem Browser ansehen. 1

Starten Sie Ihren Browser.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Index.html im Pfad Lesson11/11End/PoetryPond.com folder/PoetryPond.com/Index.html.

3

Scrollen Sie durch die Seite und achten Sie dabei auf ihre Formatierung.

4

Klicken Sie auf die Verknüpfung Benjamin Lucas. Die Formatierung und alle ihre Verknüpfungen werden durch ein Cascading Style Sheet gesteuert.

5

Wenn Sie mit dem Betrachten der Datei fertig sind, schließen Sie sie.

Style Sheets HTML ist eine einfache Sprache, die entwickelt wurde, um den Aufbau von Informationen und nicht ihre Präsentation zu steuern. Mit Style Sheets können WebDesigner die elementaren HTML-Formatierungen verbessern, indem sie Stile verwenden, mit deren Hilfe Text präzise platziert, Schriften gesteuert und Elemente auf der Webseite formatiert werden können. Cascading Style Sheets (abgekürzt CSS) sind eine einfache Methode, um HTMLDokumenten Stile hinzuzufügen und die grundlegenden Formatierungen der HTML-Elemente zu verbessern. Ein Style Sheet besteht aus einem Satz von StyleAnweisungen, die beschreiben, wie HTML-Dokumente dem Betrachter dargeboten werden sollen. Im HTML-Quellcode ist eine Anweisung eine Aussage über das stilistische Aussehen eines oder mehrerer Elemente, in denen ein Selektor bestimmt, welche Elemente der Anweisung – bestehend aus einer Eigenschaft und ihrem Wert – betroffen sind. Ein Beispiel: Die Style-Anweisung h1 { color : red } sorgt dafür, dass alle Überschriften der Ebene 1 in einem Dokument rot dargestellt werden. A

B

C

D

C

D

A. Anweisung B. Selektor C. Eigenschaft D. Wert

379

380 LEKTION 11 Verwenden von Cascading Style Sheets

Bisher mussten Web-Designer diese Prinzipien und Hintergründe bis ins Kleinste verstehen, damit sie Cascading Style Sheet-Code von Hand in HTML schreiben konnten. Von nun an schreibt Adobe GoLive diesen Quellcode für Sie, während Sie nur einfache Formatierungsbefehle hinzufügen, ganz so wie Sie es von Textverarbeitungs- oder Layoutanwendungen gewohnt sind. Außerdem werden alle Style Sheets, von allgemein bis sehr speziell, kaskadierend hinzugefügt (das bedeutet, dass mehrere Style Sheets einem Dokument zugewiesen werden können und das Aussehen des Dokuments nach bestimmten Prioritätsregeln beeinflussen). Adobe GoLive unterstützt Level 1 Cascading Style Sheets (CSS1), die Teil der HTML-4.0-Spezifikation sind. Die meisten Webbrowser unterstützen Style Sheets; zu ihnen gehören Microsoft Internet Explorer 3, 4 und 5.0/5.5; Netscape Navigator 4.0 und Netscape Communicator 4.0. (Microsoft- und Netscape-Browser unterscheiden sich allerdings darin, welche der CSS-Möglichkeiten sie unterstützen.) Damit Webbrowser in der Lage sind, Style Sheets zu erkennen und korrekt umzusetzen, müssen sie mindestens CSS1-Tags unterstützen. Ein paar Vorüberlegungen sind der Schlüssel zum erfolgreichen Benutzen von Style Sheets:

• Informieren Sie sich regelmäßig darüber, welche Style Sheet-Einstellungen von aktuellen Browsern unterstützt werden. Die CSS1-Spezifikation entwickelt sich stetig weiter. Unter http://www.w3.org/Style/ finden Sie immer die neuesten Informationen dazu. Probieren Sie verschiedene Einstellungen an unterschiedlichen HTML-Elementen aus. Es ist wichtig, sich die Ergebnisse immer wieder in aktuellen Browsern anzusehen, um die Wirkung Ihrer Style Sheets zu überprüfen.

ADOBE GOLIVE 5.0 Classroom in a Book

Überblick über die Style Sheet-Werkzeuge Drei Adobe GoLive-Werkzeuge ermöglichen Ihnen das Erzeugen und Bearbeiten von Style Sheets und das Verknüpfen mit externen Style Sheets: das Style Sheet-Fenster, die Style Sheet-Werkzeugleiste und der CSS-Selektor-Inspektor. Diese Abbildung zeigt die Beziehungen zwischen diesen drei Werkzeugen . Um das StylesheetFenster aufzurufen, klicken Sie auf die CSSSchaltfläche im Dokumentfenster.

Im Stylesheet-Fenster eines Dokuments werden sowohl interne als auch alle verknüpften externen Stylesheets angezeigt.

A

B

C

D

E

Mit Hilfe der Schaltflächen in der Werkzeugleiste lassen sich neue Styles für interne und externe Stylesheets im Stylesheet-Fenster erzeugen. A. Neuer Klassen-Selektor B. Neuer Element-Selektor

Der CSS-SelektorInspektor stellt StyleEigenschaften dar. Um einen Style zu bearbeiten, wählen Sie den Namen des Styles im Stylesheet-Fenster aus. Danach klicken Sie auf eine Registerkarte im CSS-Inspektor und können die Eigenschaften bearbeiten.

C. Neuer ID-Selektor D. Neues Objekt E. Duplizieren

Externe Stylesheets sind eigenständige Dokumente, die beliebigen HTML-Seiten durch Referenz zugewiesen werden können. Um einen neuen externen Stylesheet zu erzeugen, wählen Sie Datei: Neu Spezial: Neues Stylesheet Dokument. Erzeugen Sie Ihre Styles und speichern Sie sie mit der Dateinamenserweiterung ».css« in Ihren SiteOrdner. Um den Stylesheet mit einem Dokument zu verknüpfen, ziehen Sie ihn aus dem Site-Fenster in das Stylesheet-Fenster.

381

382 LEKTION 11 Verwenden von Cascading Style Sheets

Erkunden von Style Sheets Adobe GoLive unterstützt zwei unterschiedliche Arten von Style Sheets: interne und externe. Sie unterscheiden sich darin, wie sie mit Webseiten funktionieren. Interne Style Sheets werden nur in dem Dokument verwertet, in dem sie auch erzeugt wurden; allerdings können ihre Styles exportiert und in anderen Dokumenten verwendet werden. Externe Style Sheets lassen sich wesentlich flexibler als interne Style Sheets einer Gruppe von Dokumenten oder einer gesamten Website zuweisen. Bevor Sie also für jede einzelne Seite, der Sie eine besondere Formatierung zuweisen möchten, ein internes Style Sheet festlegen, ist es einfacher, ein eigenständiges externes Style-Sheet-Dokument zu erzeugen. Anschließend können Sie von jeder Seite aus auf dieses externe Style Sheet verweisen und so seine Optionen verfügbar machen.

Erkunden eines internen Style Sheets Sie werden in dieser Lektion mit dem Erkunden eines Style Sheets beginnen, das mit einem Dokument erzeugt wurde. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei PoetryPond.com.site im Pfad Lesson11/11Start/PoetryPond.com folder/PoetryPond.com.site.

3

Doppelklicken Sie im Site-Fenster auf die Datei Index.html, um die Homepage der Website PoetryPond.com zu öffnen.

Die Grundstruktur und einfache Formatierungen dieses Dokuments wurden durch das Hinzufügen der Basis-HTML-Elemente (wie , und

) zum Roh-Text erreicht. Das exakte Design, wie Schriftgröße und -farbe, Randbreite und sogar der weiße Hintergrund des Dokuments, wurde mit einem Style Sheet hinzugefügt. Sie werden sich das Dokument zuerst ohne die Style Sheet-Formatierung ansehen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Klicken Sie in das Dokumentfenster, um es zu aktivieren. Wählen Sie Fenster: Ansicht, um die Layout-Ansichtpalette aufzurufen. Wählen Sie dort im Popup-Menü »Stamm-CSS« den Eintrag »Explorer 3« (Windows oder Mac OS).

Auswählen eines Browsers, der CSS nicht unterstützt (in Layout-Ansichtpalette)

Explorer 3 unterstützt CSS nicht, daher führt das Auswählen dieses Browsers im Endeffekt dazu, dass die Style Sheets für das aktuelle Dokument ausgeschaltet werden. Achten Sie darauf, wie sich die Darstellung im Dokumentfenster ändert, wenn das Style Sheet nicht verwendet wird.

383

384 LEKTION 11 Verwenden von Cascading Style Sheets

In diesem Beispiel verlieren die Überschriften ihre Farbeinstellungen, die Schriften ändern sich in größere Serifen und der Hintergrund des gesamten Dokuments kehrt zurück zum Standardgrau einer Basis-HTML-Seite.

Style sheet eingeschaltet

Style sheet ausgeschaltet

Sie können diesen Wechsel des Dokuments zur Basis-HTML-Struktur im Menü »Format« überprüfen. 5

Fügen Sie im Dokumentfenster in die Überschrift Live webcast of poetry reading eine Texteinfügemarke ein und wählen Sie anschließend in der Werkzeugleiste das Menü Format.

ADOBE GOLIVE 5.0 Classroom in a Book

Im Menü Format wird die aktuelle HTML-Formatierung angezeigt. Das Häkchen neben Überschrift 2 zeigt, dass der Text mit dem Tag HTML gekennzeichnet ist. Der Text Events ist mit Überschrift 1 formatiert, was mit dem HTML-Tag übersetzt wird; die Absätze des Hauptteils sind mit dem Format Ohne formatiert, was mit dem HTML-Tag

übersetzt wird.

Überschrift 2-Format und entsprechender Text im Dokument

6

Wenn Sie mit HTML noch nicht so sehr vertraut sind, klicken Sie im Dokumentfenster auf den Reiter »Quellcode« ( ), um zu sehen, wie Adobe GoLive den HTML-Quellcode geschrieben und die unterschiedlichen Textstücke mit Tags ausgezeichnet hat.

HTML-Quelltext-Ansicht

7

Klicken Sie wieder auf den Reiter »Layout-Editor«( Layout-Ansicht des Dokuments zu gelangen.

), um zurück in die

385

386 LEKTION 11 Verwenden von Cascading Style Sheets

Sie werden nun einen Blick auf die vom Style Sheet gesteuerte Formatierung werfen. 8

Wählen Sie in der Layout-Ansichtpalette aus dem Popup-Menü »StammCSS« den Eintrag »Explorer 5« für Ihre Plattform. Das Dokumentfenster wird nun mit der Formatierung des Style Sheets dargestellt.

Mit Hilfe des Menüs »Stamm-CSS« in der Layout-Ansichtpalette lässt sich jeder der verbreiteten Browser auswählen, um zu sehen, wie sich die Darstellung ändert. Allerdings ist diese Vorschau nur eine Simulation der Darstellung in einem Browser und kein wirklicher Ersatz für die tatsächliche Voransicht der Seite in einem richtigen Browser. 9

Um ein Style Sheet betrachten zu können, klicken Sie im Dokumentfenster oben rechts auf die Schaltfläche »CSS-Fenster öffnen« ( ). Damit wird das Fenster »Index.html:Stylesheet« geöffnet.

Im Ordner Intern in diesem Fenster werden die unterschiedlichen Style-SheetSelektoren angezeigt, die für dieses Dokument bereits definiert wurden. Um alle verfügbaren CSS-Selektoren in Adobe GoLive betrachten zu können, wählen Sie Bearbeiten: Web-Einstellungen und klicken im aufgerufenen Fenster auf den Reiter »CSS« (

).

Element-Selektoren sind wahrscheinlich die flexibelsten Selektoren: Mit ihnen können Sie den sichtbaren Teil einer HTML-Dokument-Struktur neu formatieren. Der Designer kann jedem HTML-Element einen Style zuweisen, der dann automatisch allen Fällen des HTML-Elements im gesamten Dokument zugewiesen wird. Element-basierte Styles sind vollständig kompatibel mit Browsern,

ADOBE GOLIVE 5.0 Classroom in a Book

die keine CSS1-Information lesen können. Daher wird mit älteren Browsern, die keine Style Sheets unterstützen, die bloße HTML-Formatierung dargestellt, während in neueren Browsern, die Style Sheets unterstützen, die erweiterte Formatierung dargestellt wird. Element-Selektoren sind außerdem hilfreich, wenn sichergestellt werden soll, dass Ihre Dokumente auch in alternativen Browsern oder nicht standardisierten Geräten (beispielsweise Palmtops) zum Betrachten darstellbar sind. Klassen-Selektoren fügen einem Textblock nur in bestimmten Fällen Stilformate hinzu und nicht allen Fällen, in denen ein gemeinsames HTML-Element geteilt wird. Im Gegensatz zu Element-Selektoren sind Klassen-Selektoren unabhängig vom Dokumentaufbau; sie werden vom Designer festgelegt und müssen von Hand hinzugefügt werden. Klassen eignen sich für auffällige Formatierungen wie Warnhinweise oder Zusammenfassungen, die aus dem übrigen Text hervorstechen sollen oder für das Erzeugen von Spezialeffekten, wie unterschiedliche Schriftgrößen oder Farben innerhalb eines Wortes. Allerdings sollten Sie Klassen nicht für den Aufbau der Dokumentdarstellung benutzen; die Formatierung greift nicht, wenn Betrachter nicht-CSS-kompatible Browser verwenden. Benutzen Sie stattdessen Element-Selektoren, um so viel Design wie möglich zu erreichen und heben Sie sich Klassen-Selektoren für besonderes (aber nicht notwendiges) Design auf, damit Sie auch den Anwendern älterer Browser den Zugang zu Ihren Seiten gestatten. ID-Selektoren ermöglichen Ihnen das Einbetten bestimmter Stile in einzelne Textabsätze oder -bereiche Ihres Dokuments und das Erzeugen von Formateigenschaften einzelner Elemente. ID-Selektoren ermöglichen Ihnen außerdem das Festlegen der Eigenschaften von Schweberahmen und die Steuerung ihrer Breite, Sichtbarkeit und absoluter Position. Zum Hinzufügen von ID-Selektoren in Adobe GoLive ist das Bearbeiten des HTML-Quellcodes notwendig. 10 Beachten Sie, dass der Ordner Intern im Fenster »Index.html:Stylesheet« bereits einige allgemeine HTML-Elemente aufführt. 11 Falls der Inspektor nicht bereits geöffnet ist, wählen Sie Fenster: Inspektor, um ihn anzuzeigen.

387

388 LEKTION 11 Verwenden von Cascading Style Sheets

12 Klicken Sie im Fenster »Index.html:Stylesheet« auf einen Element-Selektor, um ihn auszuwählen. Der CSS-(Cascading Style Sheet)-Inspektor wird aufgerufen. 13 Vergewissern Sie sich, dass die Registerkarte »Allgemein« ( ) im CSS (Cascading Style Sheet)-Selektor-Inspektor ausgewählt ist. 14 Klicken Sie im Fenster »Index.html:Stylesheet« auf die unterschiedlichen Elemente. Achten Sie in der Registerkarte »Allgemein« des CSS-SelektorInspektors darauf, wie die Stilformate mit ihren entsprechenden Selektoren, Eigenschaften und Werten erscheinen.

Element-Selektor im Style-Sheet-Fenster ausgewählt

Stilregeln im CSS(Cascading Style Sheets)-Selektor-Inspektor

Exportieren eines internen Style Sheets Ein internes Style Sheet lässt sich ganz einfach exportieren, um es mit anderen Dokumenten oder als Sicherungskopie für das verwendete Style Sheet zu benutzen. 1

Falls die Datei Index.html nicht mehr geöffnet ist, öffnen Sie sie nun, indem Sie im Site-Fenster auf die Datei Index.html doppelklicken.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie irgendwo im Fenster »Index.html:Stylesheet« mit der rechten Maustaste (Windows) bzw. mit gedrückter Ctrl-Taste (Mac OS) und wählen Sie aus dem Kontextmenü den Eintrag »Interne CSS exportieren« aus.

3

Navigieren Sie zum Ordner Styles im Ordner PoetryPond.com, geben Sie der Datei den Namen Internal.css und klicken Sie auf »Sichern«.

Erkunden eines externen Style Sheets Style Sheets des aktuellen Dokuments können auch externe Style Sheets sein. Mit Hilfe einer Verknüpfung der Seite mit einem externen Style Sheet werden die Elemente auf der Seite entsprechend formatiert. Sie werden später in dieser Lektion ein externes Style Sheet erzeugen und mit einer Seite verknüpfen. Im Moment werden wir uns einfach einmal ansehen, wie ein externes Style Sheet aussieht. 1

Wählen Sie Datei: Öffnen und öffnen Sie die Datei Alternate1.css im Ordner Styles im Ordner PoetryPond.com. Das Style Sheet wird in einem eigenen Fenster namens »Alternate1.css« geöffnet.

2

Sie werden feststellen, dass das externe Style Sheet einige gebräuchliche HTML-Elemente enthält.

3

Falls der Inspektor nicht bereits geöffnet ist, wählen Sie Fenster: Inspektor, um ihn aufzurufen.

4

Wählen Sie im Fenster »Alternate1.css« einen Element-Selektor aus. Der CSS(Cascading Style Sheet)-Selektor-Inspektor wird aktiviert.

5

Achten Sie darauf, dass die Registerkarte »Allgemein« ( ) im CSS(Cascading Style Sheet)-Selektor-Inspektor ausgewählt ist, und klicken Sie auf unterschiedliche Elemente.

389

390 LEKTION 11 Verwenden von Cascading Style Sheets

6

Sie werden feststellen, dass die Styles mit ihren zugeordneten Selektoren, Eigenschaften und Werten in der Registerkarte »Allgemein« im CSS(Cascading Style Sheet)-Selektor-Inspektor genau so erscheinen, wie schon im internen Style Sheet, das Sie weiter vorne untersucht haben.

7

Schließen Sie das Style-Sheet-Fenster »Alternate1.css«, ohne es zu sichern.

Arbeiten mit Styles Adobe GoLive ermöglicht Ihnen das Arbeiten mit Style Sheets und ihren Styles auf zahlreiche Arten, einschließlich Aktualisieren eines Styles im gesamten Dokument, Bearbeiten eines Styles und Hinzufügen eines Styles.

Aktualisieren eines Styles im gesamten Dokument Sie werden jetzt einen Formatierungsstil bearbeiten, um zu sehen, wie Ihr Dokument sofort aktualisiert wird. 1

Falls nötig, passen Sie die Größe des Dokumentfensters so an, dass Sie ein paar unterschiedliche Überschriften und normalen Text sehen können.

2

Wählen Sie im Fenster »Index.html:Stylesheet« das Tag h2. Achten Sie auf seine Merkmale in der Registerkarte »Allgemein« im CSS-Selektor-Inspektor.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie im CSS-Selektor-Inspektor auf die Registerkarte »Schrift« ( ). Wählen Sie aus dem Popup-Menü »Farbe« eine andere Farbe aus (wir haben »Rotbraun« gewählt) und beobachten Sie, wie sich die Änderung sofort im Dokumentfenster auswirkt.

Dem h2-Tag eine andere Farbe hinzufügen

So einfach ist es, eine von Ihnen festgelegte Stilformatierung zu ändern und global hinzuzufügen. 4

Um die Schriftgröße etwas zu verkleinern, geben Sie in das Textfeld »Größe« den Wert 1 ein, wählen Sie aus dem Popup-Menü den Eintrag »em«.

Absolute und relative Schriftgrößen Sie werden feststellen, dass sich im Popup-Menü »Größe« viele unterschiedliche Maßeinheiten befinden. CSS unterstützt zwei Arten von Maßeinheiten: absolut und relativ. Absolute Maßeinheiten, wie zum Beispiel Pixel, eignen sich für die präzise Steuerung bei der Platzierung von Text und Grafiken auf einer Seite. Auf der anderen Seite wird Schrift, die in Pixeln dargestellt wird, möglicherweise in manchen Browsern nicht besonders gut dargestellt und kann so die Zugriffe auf Ihre Seite für Besucher mit eingeschränktem Sehvermögen erschweren, weil sie gezwungen sind, die Schrift in einer festen Größe zu betrachten. Eine relative Maßeinheit, wie beispielsweise em, passt die Schriftgröße in Abhängigkeit von der Einstellung der gegenwärtigen Schriftgröße im Browser eines Besuchers an und ist daher die bessere Wahl, wenn Sie an vielen Zugriffen interessiert sind oder die präzise Platzierung von Text und Grafik auf Ihren Seiten nicht unbedingt wichtig ist.

391

392 LEKTION 11 Verwenden von Cascading Style Sheets

Wenn Sie mit Hilfe des CSS-Inspektors einen Style erzeugen, schreibt Adobe GoLive den HTML-Quellcode für Sie. Sie werden sich jetzt diesen HTML-Code ansehen. 5

Klicken Sie im CSS-Selektor-Inspektor auf die Registerkarte »Allgemein« und achten Sie auf die Eigenschaften des h2-Elements.

6

Schalten Sie nun im Dokumentfenster auf die HTML-Ansicht, indem Sie auf den Reiter »HTML-Quelltext« oben im Fenster klicken.

7

Beachten Sie die Darstellung in der folgenden Abbildung:

In der Anweisung ist h2 der Selektor, und die Information in Klammern bestimmt, dass die Farbeigenschaft einen Wert Maroon (Rotbraun) hat, die Schriftgröße einen Wert 1 em hat, und so weiter. Denken Sie immer daran, dass Style-Regeln eine Anweisung bestehend aus einem Selektor und einer Erklärung über Eigenschaft und Wert eines Elements sind (d.h., sein genaues Aussehen). 8

Klicken Sie im Dokumentfenster auf den Reiter »Layout-Editor«, um zurück in die Layout-Ansicht zu gelangen.

Bearbeiten eines Styles in einem Style Sheet Sie werden in der Lektion fortfahren und einen weiteren Style im internen Style Sheet bearbeiten. Diesmal werden Sie den Style des

-Elements bearbeiten, um die Ränder des Body-Textes zu ändern.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie im Dokumentfenster Index.html oben rechts auf die Schaltfläche »CSS-Fenster öffnen« ( ), um das Fenster »index.html:Stylesheet« aufzurufen.

2

Wählen Sie im Fenster »index.html:Stylesheet« das

-Element im Ordner Internal aus. Beachten Sie seine Eigenschaften, die in der Registerkarte »Allgemein« im CSS-Selektor-Inspektor dargestellt werden.

3

Klicken Sie auf den Reiter »Block« ( ) im CSS-Selektor-Inspektor. Der rechte und der linke Abstand sind im Moment auf 2% eingestellt.

4

Geben Sie in die beiden Textfelder »Außenabstand« den Wert 5 ein, um die Ränder proportional einzurücken.

Seitenränder proportional eingerückt

Einstellungen Registerkarte »Block«

Beachten Sie, wie der linke und der rechte Abstand im Dokumentfenster an den Body-Text angepasst werden.

393

394 LEKTION 11 Verwenden von Cascading Style Sheets

Wie Sie sehen, kann mit Einstellungen Folgendes gesteuert werden: Schrift, Text (einschließlich Einzüge, Abstände und Ausrichtung), Rahmen- und Dokumentränder, Platzierung, Ränder, Hintergrund und Aufzählungen. Maße und Farben werden dabei durch Werte bestimmt. Hinweis: Noch kann mit den Browsern der Versionsnummer 4.0 lediglich eine geringe Anzahl von Stileigenschaften dargestellt werden; dazu gehören Basis- und einige Schrifteigenschaften. Allerdings unterstützen Browser zunehmend mehr Style Sheet-Eigenschaften. Um beste Ergebnisse zu erzielen, sollten Sie die von Ihnen gewünschten Eigenschaften immer mit den neuesten der beliebtesten Browser überprüfen. Für mehr Informationen lesen Sie »Vorschau der Ergebnisse in aktuellen Browsern« auf Seite 409.

Hinzufügen eines Styles Sie werden jetzt einen neuen Element-basierten Style erzeugen, um die Art der Darstellung der Hypertext-Verknüpfungen im gesamten Dokument zu ändern; dabei wird die Standard-HTML-Unterlinie entfernt, die Farbe geändert und ein fetter Schriftschnitt zugewiesen. Das Standard-HTML-Element für das Formatieren von HypertextVerknüpfungen lautet . Immer wenn Sie eine Hypertext-Verknüpfung erzeugen und dafür den Verknüpfungsbefehl verwenden, schreibt Adobe GoLive automatisch den HTML-Quellcode für Sie und zeichnet das Element als aus. 1

Um einem Style Sheet einen neuen Style hinzuzufügen, klicken Sie in der Style-SheetWerkzeugleiste auf die Schaltfläche »Neuer Element-Selektor« ( ). Im Fenster »index.html:Stylesheet« wird im Ordner »Internal« ein neues Element mit der Bezeichnung »element« eingerichtet.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Allgemein« und benennen Sie den Style mit a, um ihn namentlich dem HTML-VerknüpfungsElement anzupassen.

Immer, wenn Sie einen Element-Selektor erzeugen, müssen die Element-Namen denen des HTML-Quellcodes angepasst werden. Style-Definitionen verwenden keine Klammern, daher sollten Sie sie nicht als Teil des Namens verwenden. Die Tabelle »Gebräuchliche HTML-Elemente« auf Seite 396 führt gebräuchliche HTML-Tags auf und beschreibt die Adobe-GoLive-Befehle, die benutzt werden, um sie hinzuzufügen. 3

Drücken Sie die Eingabetaste, um das Element zu erzeugen.

4

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Schrift« ( ).

5

Schalten Sie im Abschnitt »Auszeichnung« das Kontrollkästchen »Ohne« ein, um die Unterlinie unter Hypertext-Verknüpfungen zu entfernen. Sie werden feststellen, dass die Unterlinien unter den vorhandenen Verknüpfungen im Dokument entfernt werden.

Sie werden nun die Farbe der Hypertext-Schrift ändern. 6

Wählen Sie im Popup-Menü »Farbe« eine neue Farbe und im Popup-Menü »Stärke« einen neuen Eintrag aus. (Wir haben »Olivgrün« und »Fetter« gewählt.)

Adobe GoLive bietet zahlreiche Möglichkeiten, die Farbe von Verknüpfungen zu ändern. Allerdings können Sie bei Verwendung eines Element-basierten Styles für die Änderung der Hypertext-Darstellung alle Verknüpfungen auf Ihrer Website global aktualisieren, indem Sie einfach den Style bearbeiten. Weiter hinten in dieser Lektion werden Sie eine ähnliche Methode benutzen, um die Hintergrundfarbe der Seite zu ändern. Hinweis: Um unter Windows ein Element oder einen Klassen-Selektor aus einem Style Sheet zu löschen, wählen Sie das Element im Style Sheet-Fenster aus und wählen Sie dann Bearbeiten: Löschen. 7

Aktivieren Sie wieder das Dokumentfenster Index.html.

8

Wählen Sie Datei: Speichern, um das Dokument Index.html zu sichern. Dabei wird auch das interne Style Sheet gespeichert.

9

Schließen Sie das Dokument.

395

396 LEKTION 11 Verwenden von Cascading Style Sheets

Gebräuchliche HTML-Elemente Hier finden Sie ein paar gebräuchliche HTML-Elemente, die Sie für das Erzeugen von Elementbasierten Styles in Cascading Style Sheets benutzen können.

Elementname

Abkürzung für

a

Link oder #Anker

blockquote

GoLive-Werkzeugleiste oder -Menübefehl

Block oder Inline

Beschreibung

Neue Verknüpfung

Inline

Hervorgehoben

»Ausrichtung«-Befehle

Block-Ebene

Eingerückt

Block-Ebene

#Inside canvas

body br

Break

Umschalt+Eingabe

Block-Ebene

Erzwungener Umbruch

em

Emphasis

Betonung oder Kursiv

Inline

Kursiv

h1, h2... h6

Heading levels

Überschrift 1, Überschrift 2 usw.

Block-Ebene

Große Schriften

i

Italic

Kursiv oder Betonung

Inline

Kursiv

img

Image

Inline

Als Bild

li

List item

»Unnummerierte Aufzählung«-Befehle

Block-Ebene

Markierte Aufzählung

ol

Ordered list

»Nummerierte Aufzählung«-Befehle

Block-Ebene

Nummerierte Aufzählung

p

Paragraph

Eingabe

Inline

Normaler Text

Fett

Inline

Fett

strong

Erzeugen eines Style Sheets Da Sie nun sowohl interne als auch externe Style Sheets erkundet haben, ist es an der Zeit, Ihr eigenes Style Sheet von Grund auf zu erzeugen. Sie werden jetzt ein externes Style Sheet erzeugen und es mit einem Dokument verknüpfen. 1

Doppelklicken Sie im Site-Fenster im Ordner Pages auf die Datei Spotlight.html, um die Datei zu öffnen.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie im Dokumentfenster auf die Schaltfläche »CSS-Fenster öffnen« ( ), um das Fenster »Spotlight.html:Stylesheet« aufzurufen.

Sie werden feststellen, dass im Ordner Intern des Fensters »Spotlight.html:Stylesheet« keine Styles dargestellt werden. Das Dokument weist lediglich seine BasisFormatierungen durch HTML-Elemente auf; bis jetzt sind keine Styles mit Elementen verbunden. 3

Um ein neues externes Style Sheet zu erzeugen, wählen Sie Datei: Neu Spezial: Neues Stylesheet Dokument CSS, um ein neues Fenster Ohne Titel.css zu öffnen.

4

Falls der Inspektor nicht geöffnet ist, wählen Sie Fenster: Inspektor, um ihn aufzurufen.

5

Um einen neuen Style hinzuzufügen, klicken Sie auf die Schaltfläche »Neues HTML-Element« in der Style-Sheet-Werkzeugleiste. Im Fenster »Spotlight.html:Stylesheet« wird ein neues Element namens element angezeigt.

6

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Allgemein« und benennen Sie den Style mit h2. Drücken Sie die Eingabetaste, um das Element zu erzeugen.

7

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Schrift« ( ), damit Sie Schrifteigenschaften festlegen können.

397

398 LEKTION 11 Verwenden von Cascading Style Sheets

8

Klicken Sie im CSS-Selektor-Inspektor auf die Schaltfläche »Neu«, und benutzen Sie die Popup-Menüs, um eine Schriftfarbe und -familie zu wählen. Wählen Sie außerdem eine Schriftgröße. (Wir haben Rotbraun, 1 em und die Schriftfamilie »Sans serif« gewählt.) Die Schriftfamilie können Sie im PopupMenü links neben der Schaltfläche »Neu« auswählen.

Sie haben nun den Style erzeugt, aber im Dokument hat sich nichts verändert. Im Gegensatz zu internen Style Sheets, die sofort ihre entsprechenden Dokumente aktualisieren, müssen externe Style Sheets zuerst gespeichert und anschließend einem Dokument zugewiesen werden, damit auch die Styles hinzugefügt werden.

Sichern und Verknüpfen eines Style Sheets Sie werden jetzt das Style Sheet speichern und mit Ihrem HTML-Dokument verknüpfen. Nachdem Sie ein Style Sheet mit Ihrem Dokument verknüpft haben, fügt Adobe GoLive dessen Styles automatisch hinzu. 1

Vergewissern Sie sich, dass das Fenster Ohne Titel.css aktiviert ist. Wählen Sie anschließend Datei: Speichern, benennen Sie das Dokument Ohne Titel.css mit MyPoetry.css und sichern Sie es im Ordner Styles im Ordner PoetryPond.com.

Es ist wichtig, die Dateinamenerweiterung .css zu verwenden, damit Browser das Dokument als Style Sheet erkennen können. Es ist nicht unbedingt erforderlich, das Style Sheet in einem Ordner Styles zu speichern, es hilft aber dabei, Ihre Website geordnet und übersichtlicher zu halten. 2

Falls das Fenster »Spotlight.html:Stylesheet« nicht bereits angezeigt wird, klicken Sie im Dokumentfenster oben rechts auf die Schaltfläche »CSSFenster öffnen« ( ), um es aufzurufen. In diesem Fenster werden alle internen und externen Style Sheets angezeigt, die mit Ihrer HTML-Seite verbunden sind.

3

Vergewissern Sie sich, dass die Datei MyPoetry.css in Ihrem Site-Fenster PoetryPond.com sichtbar ist. Eventuell müssen Sie Website: "Forms" erneut scannen wählen, um die Datei MyPoetry.css sehen zu können.

4

Ziehen Sie die Datei MyPoetry.css aus dem Site-Fenster in das Fenster »Spotlight.html:Stylesheet«.

ADOBE GOLIVE 5.0 Classroom in a Book

Die zweite Überschrift in Ihrem Dokument (mit dem Tag h2) wird automatisch neu formatiert und spiegelt damit die Style-Änderungen wider, die Sie im vorigen Abschnitt vorgenommen haben; das Style Sheet-Fenster wird aktualisiert und gibt so die Verknüpfung zwischen dem Dokument MyPoetry.css und Ihrer HTMLSeite wieder.

Style Sheet hinzugefügt (oben); Verknüpfen des externen Style Sheet durch Ziehen in das Style-SheetFenster (unten)

So einfach ist es, ein externes Style Sheet zu erzeugen und es mit einem Dokument zu verknüpfen. Sie werden jetzt damit fortfahren, die Formatierung des Spotlight.html-Dokuments zu verfeinern, indem Sie es mit einem weiteren Style Sheet verknüpfen. Dieses Style Sheet enthält bereits zahlreiche Styles, damit Sie gleich beginnen können. Sie werden diese Styles bearbeiten und auch ein paar neue hinzufügen. 5

Wählen Sie im Website-Fenster die Datei PoetryPond.css im Ordner Styles innerhalb des Ordners PoetryPond.com aus. Dieses Mal ziehen Sie das Style Sheet auf das Seite-Symbol ( ) im Dokumentfenster Spotlight.html.

399

400 LEKTION 11 Verwenden von Cascading Style Sheets

Dies ist eine andere Methode, um externe Style Sheets mit einem Dokument zu verknüpfen.

Verknüpfen mit einem externen Style Sheet durch Ziehen auf das Seite-Symbol (links); aktualisiertes Style-Sheet-Fenster (rechts)

Wieder wird die zweite Überschrift (Tag h2) neu formatiert, um die von Ihnen hinzugefügten Eigenschaften des Style Sheets widerzuspiegeln. Ein Kennzeichen von Cascading Style Sheets ist es, dass Sie einem Dokument mehr als ein Style Sheet hinzufügen und Styles kumulativ oder einzeln hinzufügen können. Wenn ein neues Style Sheet dieselben Style-Namen benutzt wie das vorige, werden die neueren Styles den Vorrang übernehmen und die Styles im älteren Style Sheet außer Kraft setzen. In diesem Fall hebt das Tag h2 das gleichnamige Tag im vorigen Style Sheet (MyPoetry.css) auf.

ADOBE GOLIVE 5.0 Classroom in a Book

Cascading Style Sheets Eines der Schlüsselmerkmale von CSS ist die Kaskadierung. Das bedeutet, dass einem Dokument mehrere Style Sheets aus unterschiedlichen Quellen zugewiesen werden können und alle von ihnen die Darstellung des Dokuments beeinflussen können. Beispielsweise kann der voreingestellte Browser ein Style Sheet hinzufügen, der Autor kann ein Style Sheet zugewiesen haben, um ein Dokument zu formatieren,und Betrachter können ihre eigenen Style Sheets hinzufügen, um zum Beispiel eine größere Schriftgröße zum Ausgleich für ihre Sehbehinderung oder ihre Zeichensatzvorlieben zum Ausdruck zu bringen. Im Konfliktfall wählt das CSS immer nur einen Wert, üblicherweise in folgender Gewichtung: Zuerst den des Autors, dann den des Betrachters und zum Schluss den aus der Voreinstellung des Browsers. (Um die Style-Anweisungen eines Autors aufzuheben, kann der Betrachter dessen Style Sheets ausschalten oder bestimmte Style-Anweisungen als »Wichtig« markieren.)

Anlegen und Entfernen einer Verknüpfung eines Style Sheets mit mehreren Seiten Adobe GoLive ermöglicht Ihnen das einfache Zuweisen eines externen Style Sheets zu mehreren Seiten auf einmal, ohne dass Sie es jeder Seite in einer Website einzeln und Seite für Seite zuweisen müssen. 1

Doppelklicken Sie im Site-Fenster auf das Style Sheet MyPoetry.css, um es zu öffnen.

2

Erzeugen Sie einen neuen Element-Selektor. Geben Sie ihm den Namen h1, legen Sie die Farbe Rot fest und bestimmen Sie die Schriftgröße 2 em.

3

Sichern und schließen Sie MyPoetry.css.

4

Wählen Sie mit gedrückter Umschalttaste in der Registerkarte »Dateien« im Site-Fenster die Dateien PoetryBuilder.html und Spotlight.html aus.

5

Klicken Sie im Datei-Inspektor auf die Registerkarte »Stil«.

6

Geben Sie unten im Inspektor in das Textfeld den URL des externen Style Sheets MyPoetry.css ein. Sie können auch mit der Schaltfläche »Point & Shoot« das Style Sheet in der Registerkarte »Dateien« im Site-Fenster auswählen oder in der Registerkarte »Stil« auf die Schaltfläche »Durchsuchen« klicken und nach dem Style Sheet MyPoetry.css im Ordner Styles im Ordner PoetryPond.com suchen.

401

402 LEKTION 11 Verwenden von Cascading Style Sheets

7

Klicken Sie auf die Schaltfläche »Hinzufügen«, um das gewählte Style Sheet mit den ausgewählten Dateien in der Registerkarte »Dateien« zu verknüpfen. Wenn Sie durch ein Dialogfenster aufgefordert werden, alle geöffneten Fenster zu sichern und zu schließen, klicken Sie auf »Schließen«, um fortzufahren.

Das ist bereits alles! Genauso einfach lassen sich Style Sheets von mehreren Seiten auch wieder entfernen. 8

Wählen Sie in der Registerkarte »Dateien« im Site-Fenster wieder die Dateien PoetryBuilder.html und Spotlight.html aus.

9

Klicken Sie im Datei-Inspektor auf die Registerkarte »Stil«.

10 Wählen Sie in der Registerkarte »Stil« das Style Sheet MyPoetry.css aus. 11 Klicken Sie auf die Schaltfläche »Entfernen«.

Erzeugen eines Klassen-Styles Klassen-Selektoren fügen bestimmten Bereichen eines Textblocks Style-Formatierungen hinzu und nicht allen Bereichen, die ein gemeinsames HTML-Element teilen. Im Gegensatz zu Element-Selektoren, die automatisch den entsprechenden HTML-Elementen zugewiesen werden, müssen Klassen-Selektoren ausdrücklich einer Auswahl zugewiesen werden. Sie werden nun einen neuen Klassen-Selektor erzeugen und seinen Style dem Text der Datei Spotlight.html der Site Poetry hinzufügen. Die erste Klasse, die Sie erzeugen werden, wird einen besonderen Text (pullquote) formatieren – ein kleiner Text oder ein Zitat, das von dem übrigen Text zum Zwecke der Auszeichnung und der grafischen Wirkung abgesetzt ist. 1

Öffnen Sie die Datei Spotlight.html, indem Sie im Site-Fenster auf sie doppelklicken.

2

Klicken Sie im Dokumentfenster oben rechts auf die Schaltfläche »CSSFenster öffnen« ( ), um das Fenster »Spotlight.html:Stylesheet« aufzurufen.

3

Doppelklicken Sie im Fenster »Spotlight.html:Stylesheet« auf PoetryPond.css, um es zu öffnen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Klicken Sie in der Style-Sheet-Werkzeugleiste auf die Schaltfläche »Neuer Klassen-Selektor« ( ), um eine neue Klasse zu erzeugen. Der Inspektor ändert sich in den CSS-Selektor-Inspektor.

5

Geben Sie der Klasse im CSS-Selektor-Inspektor in der Registerkarte »Allgemein« ( ) den Namen .pullquote.

Hinweis: Klassen-Selektor-Namen müssen mit einem Punkt beginnen, anderenfalls werden sie nicht als Klassen-Selektoren erkannt und auch nicht in der Registerkarte »Stil« im Text-Inspektor aufgeführt. 6

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Schrift« ( ) und stellen Sie mit Hilfe der Menüs und der Textfelder die Schrifteigenschaften von .pullquote ein. (Wir haben uns für Olivgrün, die Schriftgröße 0.75 em und den Stil Kursiv entschieden.)

7

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Block« ( ) und stellen Sie den linken und rechten Abstand ein. (Wir wählten 15%.)

Einstellungen Registerkarte »Schrift«

Einstellungen Registerkarte »Block«

Obwohl Sie den Klassen-Selektor nun erzeugt haben, wirkt er sich so lange nicht aus, bis Sie ihn einer Auswahl auf der Seite zuweisen. 8

Sichern Sie das Style Sheet PoetryPond.css.

9

Platzieren Sie im Dokumentfenster eine Einfügemarke in Lucas’ Beispielgedicht (Lucas’ sample poem). Der Inspektor ändert sich in den Text-Inspektor.

403

404 LEKTION 11 Verwenden von Cascading Style Sheets

10 Klicken Sie im Text-Inspektor auf den Reiter »Stil«. 11 Klicken Sie in der Registerkarte »Stil« in der Zeile ».pullquote« in die Spalte »Par« (Windows) bzw. »Absz« (Mac OS), um diese Klasse Ihrem ausgewählten Text hinzuzufügen.

Textauswahl

Klasse dem Element Absz bzw. Par hinzugefügt

Die Option »Par« bzw. »Absz« fügt einen Style einem ganzen Absatz (oder einem HTML-Block-Element) hinzu. Im Gegensatz dazu fügt das Formatieren eines Inline-Elements den Style nur der Auswahl hinzu. Für eine Übersicht über Blockund Inline-HTML-Elemente lesen Sie die Tabelle »Gebräuchliche HTML-Elemente« auf Seite 396. Die Registerkarte »Style« führt außerdem das Element Div auf, einen gesonderten Abschnitt der HTML-Seite, und den Style »Area«, der dem gesamten Abschnitt »Body« einer HTML-Seite eine Klasse hinzufügt. In dieser Lektion werden diese beiden Elemente allerdings nicht behandelt.

Importieren eines externen Style Sheets Das externe Style Sheet PoetryPond.css lässt sich importieren und in ein internes Style Sheet ändern.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie mit der rechten Maustaste (Windows) bzw. mit gedrückter CtrlTaste (Mac OS) irgendwo in das Style-Sheet-Fenster und wählen Sie aus dem Kontextmenü den Eintrag »Extern CSS importieren« aus.

2

Wählen Sie im Dateiauswahlfenster PoetryPond.css aus und klicken Sie auf »Öffnen«.

Alle im externen Style Sheet definierten Styles werden nun im Ordner Internal im Style-Sheet-Fenster als Bestandteile der internen Dokument-Style-Sheets angezeigt.

Duplizieren eines Styles Sie werden jetzt eine neue Klasse für die Beschreibung des Autors erzeugen, indem Sie den gerade erzeugten Selektor kopieren. 1

Wählen Sie im Fenster »Spotlight.html:Stylesheet« die gerade von Ihnen erzeugte Klasse .pullquote aus. Sie werden diese Klasse duplizieren und danach ihre Schrift ändern, um eine neue Klasse zu erzeugen.

405

406 LEKTION 11 Verwenden von Cascading Style Sheets

2

Klicken Sie in der Style-Sheet-Werkzeugleiste auf die Schaltfläche »Duplizieren« ( ), um den Klassen-Selektor zu duplizieren. Nun wird sowohl im Style-Sheet-Fenster im Ordner Internal als auch in der Registerkarte »Allgemein« im CSS-Selektor-Inspektor ein neues Element .pullquote1 angezeigt.

Duplizierte Klasse

Duplizierte Klassen-Eigenschaften

Sie werden jetzt die Eigenschaften dieser duplizierten Klasse bearbeiten. 3

Geben Sie der Klasse im CSS-Selektor-Inspektor in der Registerkarte »Allgemein« den Namen .author.class.

4

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Schrift« ( ). Sie werden feststellen, dass die Merkmale der Klasse .pullquote bereits dargestellt werden. Ändern Sie die Farbe der Schrift in Schwarz und den Stil in Ohne.

5

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Block« und geben Sie für den oberen Rand den Wert -1% ein, um den Abstand zwischen diesem Block und dem Block pullquote zu verringern.

Sie werden diese neue Klasse nun Ihrer Seite zuweisen. 6

Wählen Sie in Ihrem Dokumentfenster den Text Benjamin Lucas direkt unterhalb des Blockes pullquote aus.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Klicken Sie im Text-Inspektor in der Registerkarte »Stil« in der Zeile des author-Selektors in die Spalte »Par«. Damit aktualisieren Sie Ihre Seite mit dieser neuen Formatierung.

8

Aktivieren Sie das Dokumentfenster Spotlight.html und wählen Sie Datei: Sichern, um Ihre Änderungen zu sichern.

Ändern der Hintergrundfarbe Sie werden jetzt die Hintergrundfarbe der Seite ändern und dafür ein Style Sheet verwenden. Adobe GoLive bietet eine Vielzahl von Methoden für das Ändern der Hintergrundfarbe einer Seite. Dies mit einem Style Sheet durchzuführen, ist praktisch, weil Sie so den Hintergrund aller Seiten, die das Style Sheet verwenden, mit einem einzigen Schritt ändern können. Um Ihrem Dokument eine Hintergrundfarbe mit Hilfe eines Styles zuzuweisen, verwenden Sie einen Element-Selektor für das HTML-Body-Element. Das BodyElement enthält den gesamten dargestellten Inhalt Ihrer HTML-Seite. 1

Bringen Sie das Body-Element zur Ansicht, indem Sie in Ihrem Dokumentfenster auf den Reiter »Quellcode« ( ) klicken. Schauen Sie sich nun den Inhalt zwischen und an.

2

Klicken Sie auf den Reiter »Layout-Editor«, um zurück in die Layout-Ansicht zu gelangen.

407

408 LEKTION 11 Verwenden von Cascading Style Sheets

3

Klicken Sie im Dokumentfenster oben rechts auf die Schaltfläche »CSSFenster öffnen« ( ), um das Style-Sheet-Fenster anzuzeigen. Klicken Sie anschließend in der Style-Sheet-Werkzeugleiste auf die Schaltfläche »Neues HTML-Element«. Im Style-Sheet-Fenster erscheint im Ordner Internal ein neues Element namens element.

4

Geben Sie dem neuen Element in der Registerkarte »Allgemein« im CSSSelektor-Inspektor den Namen body.

5

Klicken Sie im CSS-Selektor-Inspektor auf den Reiter »Hintergrund« ( ) und wählen Sie aus dem Popup-Menü »Farbe« eine neue Farbe aus (wir haben uns für »Aqua« entschieden). Der Hintergrund Ihres Dokuments ändert sich in die neue Farbe.

Auswählen der Hintergrundfarbe Aqua

6

Ergebnis

Wählen Sie wieder Weiß als Hintergrundfarbe aus.

Sie können das Body-Element außerdem benutzen, um die Farbe des Body-Textes zu ändern, indem Sie den Body-Selektor im Style-Sheet-Fenster auswählen, auf den Reiter »Schrift« im CSS-Selektor-Inspektor klicken und dort anschließend eine Farbe und andere Eigenschaften wählen. Wenn Sie möchten, können Sie jetzt andere Hintergrundfarben und unterschiedliche Farbkombinationen für Hintergrund und Text ausprobieren.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Wählen Sie Datei: Speichern, um die Änderungen zu sichern.

Wie Sie bei dem h2-Element-Selektor, der der Überschrift der Ebene 2 (heading level 2) zugewiesen wurde, beobachten konnten, werden Formatierungen von Cascading Style Sheets zuerst allgemein und danach spezieller zugewiesen. Das Body-Element hat die Kontrolle über den gesamten Text im Dokument, bis ein speziellerer Style (beispielsweise h1 oder h2) eine andere Farbe für eine besondere Textauswahl vorschreibt.

Vorschau der Ergebnisse in aktuellen Browsern Es ist ratsam, immer die neuesten Browser-Versionen sowohl von Netscape als auch von Microsoft auf Ihrem Computer zu installieren, damit Sie in der Vorschau überprüfen können, wie wirkungsvoll und genau Ihre Style Sheets in den unterschiedlichen Umgebungen funktionieren Webbrowser müssen CSS1-Tags unterstützen, um Style Sheets erkennen zu können und richtig zu interpretieren. Gegenwärtig stellen die Browser mit den Versionsnummern 4.0 nur wenige Style-Eigenschaften dar. Manche Eigenschaften funktionieren nur mit einem bestimmten Browser, andere funktionieren überhaupt nicht, verursachen aber auch keine Probleme, und wieder andere führen zu Abstürzen des Browsers. Besuchen Sie Web Review’s Style Sheets Reference Guide unter www.webreview.com/guides/style/style.html, um eine Aufzählung der Browser-sicheren Merkmale zu erhalten. 1

Falls Sie bisher noch keinen bevorzugten Browser festgelegt haben, wählen Sie nun Bearbeiten: Voreinstellungen und klicken auf das Browser-Symbol im linken Teil des Dialogfelds »Voreinstellungen«. Im rechten Teil wählen Sie einen Browser aus und klicken das Kontrollkästchen neben seinem Namen an (vergewissern Sie sich, dass ein Häkchen dargestellt wird). Klicken Sie dann auf OK.

Wenn kein Browser bestimmt wurde, werden Sie aufgefordert, einen Browser auszuwählen, damit in der Vorschau keine leere Seite dargestellt wird.

409

410 LEKTION 11 Verwenden von Cascading Style Sheets

2

Klicken Sie in der Werkzeugleiste des Dokumentfensters auf die Schaltfläche »Im Browser anzeigen« oder wählen Sie Spezial: Im Browser anzeigen, um das Dokument Spotlight.HTML in Ihrem Browser darzustellen.

Weitere Informationen zur Vorschau von Webseiten finden Sie unter Vorschau mit Adobe GoLive auf Seite 40 und Vorschau in einem Webbrowser auf Seite 42. Achten Sie darauf, wie die dem Dokument zugewiesenen unterschiedlichen Element-Selektoren (a, body, h2 usw.) und Klassen-Selektoren (pullquote und author) in jedem der Browser dargestellt werden.

Style-Sheet-Vorschau Netscape Communicator 4.0 Style-Sheet-Vorschau Internet Explorer 5

3

Wenn Ihre Vorschau noch genauer sein soll, starten Sie Ihren Browser und öffnen Sie das Dokument Spotlight.html direkt in Ihrem Browser, um die Formatierung genau betrachten zu können.

Adobe GoLive simuliert das Zuweisen eines Style Sheets durch einen Browser, kann aber möglicherweise nicht die neuesten eingearbeiteten Style-Sheet-Standards wiedergeben.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Schließen Sie Ihre(n) Browser.

5

Kehren Sie zurück zu Adobe GoLive und schließen Sie das Dokument Spotlight.html und seine Style Sheets.

6

Schließen Sie das Site-Fenster PoetryPond.com.

Damit ist diese Lektion beendet. Um noch mehr Erfahrungen im Umgang mit Style Sheets zu erlangen, können Sie die Übung im nächsten Abschnitt ausprobieren.

Eigene Übungen Es ist ganz einfach, Ihrem Dokument Cascading Style Sheets hinzuzufügen oder sie wieder zu entfernen. Um mehr Erfahrung zu erlangen, können Sie mit einem Style Sheet arbeiten, das die gleichen Basis-HTML-Elemente verwendet, aber unterschiedliche Style-Eigenschaften besitzt. Wenn Sie dieses andere Style Sheet hinzufügen, werden Sie sehen, wie leicht sich Styles zuweisen und ändern lassen. 1

Wenn Adobe GoLive nicht bereits gestartet wurde, starten Sie es jetzt.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Website-Datei PoetryPond.com im Pfad Lesson11/11Start/PoetryPond.com folder/PoetryPond.com.site.

3

Doppelklicken Sie im Site-Fenster auf die Datei Spotlight.html im Ordner Pages, um dieses Dokument zu öffnen. Sie werden diesem Dokument eine externe Style-Sheet-Referenz hinzufügen.

4

Klicken Sie im Dokumentfenster oben rechts auf die Schaltfläche »CSSFenster öffnen« ( ), um das Style-Sheet-Fenster zu öffnen.

5

Klicken Sie in der Style-Sheet-Werkzeugleiste auf die Schaltfläche »Neue Stylesheet-Datei« ( ). Ein neues Element mit dem Namen »(Empty Reference!)« erscheint im Style-Sheet-Fenster und der Inspektor ändert sich in den Externes-Stylesheet-Inspektor.

6

Verknüpfen Sie ausgehend vom Externes-Stylesheet-Inspektor die Datei Alternate1.css mit dem Dokument Spotlight.HTML und verwenden Sie dabei eine der folgenden Methoden:

• Ziehen Sie die Datei Alternate1.css aus dem Site-Fenster in das Style-SheetFenster.

411

412 LEKTION 11 Verwenden von Cascading Style Sheets

• Ziehen Sie von der »Point & Shoot«-Schaltfläche auf die Datei Alternate1.css im Ordner Styles im Site-Fenster. • Klicken Sie auf »Durchsuchen«, suchen Sie die Datei Alternate1.css im Pfad PoetryPond.com/Styles und klicken Sie auf »Öffnen«.

Style Sheet Alternate1.css hinzugefügt (oben); Verknüpfen des externen Style Sheets mit Hilfe der Schaltfläche »Point & Shoot« (unten)

7

Achten Sie darauf, wie das Style Sheet das Dokument neu formatiert.

8

Versuchen Sie einmal, außer Alternate1.css alle anderen externen Style Sheets zu entfernen, die bereits mit der Seite verknüpft sind. Dazu müssen Sie sie nur im Style-Sheet-Fenster auswählen und auf die Entfernentaste drücken.

ADOBE GOLIVE 5.0 Classroom in a Book

9

Achten Sie darauf, wie die Seite danach neu formatiert wird.

10 Schließen Sie das Site-Fenster PoetryPond.com. 11 Schließen Sie das Dokument Spotlight.HTML, ohne Ihre Änderungen zu sichern.

413

414 LEKTION 11 Verwenden von Cascading Style Sheets

Fragen 1

Wie unterscheiden sich Styles von Basis-HTML-Formatierungen?

2

Was bedeutet »Cascading« im Zusammenhang mit Style Sheets?

3

Warum zeigen manche Browser keine Styles an, die einem Dokument zugewiesen wurden?

4

Wie können Sie sicherstellen, dass Ihre Style Sheets mit der Mehrzahl der Browser funktionieren?

5

Welche Werkzeuge verwenden Sie in Adobe GoLive, um ein Style Sheet zu erzeugen?

6

Worin besteht der Unterschied zwischen einem internen und einem externen Style Sheet?

7

Was ist der Unterschied zwischen einem Klassen-Selektor und einem Element-Selektor?

8

Worin liegt der Vorteil in der Verwendung eines externen Style Sheets für das Setzen der Farbe eines Hypertextes oder des Seitenhintergrundes?

Antworten 1

HTML steuert den Aufbau von Information (beispielsweise unterschiedliche relative Überschriften), aber nicht ihre Darstellung. Style Sheets ermöglichen den Web-Designern das Erweitern der HTML-Formatierung durch präzises Platzieren von Text und die Kontrolle über Schrift und die Formatierung anderer Elemente auf der Seite. Style Sheets können zum Beispiel benutzt werden, um Schriftgröße und -farbe, Ränder und sogar die Hintergrundfarbe eines Dokuments zuzuweisen.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Einem Dokument lassen sich ein oder mehrere Cascading Style Sheets (CSS) hinzufügen, um die Dokumentdarstellung zu beeinflussen. Beispielsweise können erst der Browser, dann der Autor bzw. Designer und auch noch der einzelne Betrachter jeweils einem Dokument Style Sheets hinzufügen. Der Einfluss der einzelnen Style Sheets »kaskadiert«, so dass nur einer der Werte zugewiesen wird, üblicherweise der des Designer-Style Sheets. Styles innerhalb eines Style Sheets kaskadieren ebenfalls und werden einem Dokument progressiv zugewiesen. Wenn ein Dokument mehrere Style Sheets verwendet, kann das letzte Style Sheet außerdem vorher zugefügte Style Sheets außer Kraft setzen, wenn alle dieselben Tags teilen; es kann aber auch vorher hinzugefügte Style Sheets erweitern.

3

Ein Webbrowser muss CSS1-Tags unterstützen, damit er Style Sheets erkennen und korrekt interpretieren kann. Gegenwärtig stellen die Browser der Versionsnummer 4.0 nur wenige Style-Eigenschaften dar und unterscheiden sich auch darin, welche Eigenschaften sie unterstützen.

4

Um Style Sheets erfolgreich zu verwenden ist es wichtig, immer auf dem neuesten Stand zu sein, zu wissen, welche aktuellen Browser welche StyleSheet-Eigenschaften unterstützen; mit dem Zuweisen unterschiedlicher Eigenschaften zu unterschiedlichen HTML-Elementen zu experimentieren und sich die Ergebnisse immer in aktuellen Browsern in der Vorschau zu betrachten, um die Wirkung Ihrer Style Sheets zu testen.

5

Drei Adobe GoLive-Werkzeuge ermöglichen Ihnen das Erzeugen und Bearbeiten von Style Sheets und das Verknüpfen mit externen Style Sheets: das Style-Sheet-Fenster, die Style-Sheet-Werkzeugleiste und der CSS-SelektorInspektor.

6

Interne Style Sheets sind Bestandteil eines Dokuments und werden mit ihm zusammen gesichert und können nicht exportiert werden. Sie müssen für jede Seite, für die ihre Formatierung gelten soll, einzeln definiert werden. Externe Style Sheets können einer Gruppe von Dokumenten oder einer ganzen Website zugewiesen werden. Sie können dann von jeder anderen Seite aus eine Referenz auf dieses externe Style Sheet setzen, um seine Optionen zur Verfügung zu stellen.

415

416 LEKTION 11 Verwenden von Cascading Style Sheets

7

Element-Selektoren werden von Adobe GoLive automatisch ihren entsprechenden HTML-Tags zugewiesen und sind vollständig kompatibel mit Browsern, die keine CSS1-Informationen lesen können. Element-Selektoren ermöglichen Ihnen das Neuformatieren der sichtbaren Teile eines HTMLDokuments aufgrund seines Aufbaus und sind daher wahrscheinlich die anpassungsfähigsten Selektoren. Klassen-Selektoren fügen nur speziellen Textblocks Style-Formatierungen hinzu, und nicht allen Fällen, die ein gemeinsames HTML-Element besitzen. Im Gegensatz zu Element-Selektoren sind Klassen-Selektoren unabhängig von der Dokument-Struktur; Sie werden vom Designer definiert, müssen aber manuell hinzugefügt werden.

8

Wenn Sie die Farbe oder andere Merkmale eines Hypertexts oder den Seitenhintergrund mit Hilfe eines Style Sheets festlegen, können Sie danach den Hypertext oder den Hintergrund aller Seiten, die dieses Style Sheet verwenden, mit einer einzigen Bearbeitung ändern.

Lektion 12

12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

In dieser Lektion werden Sie mit Adobe LiveMotion arbeiten, um eine Komposition zu erzeugen, die Platzhalter für QuickTime-Filme enthält, und diese Komposition dann in eine SWF-Datei exportieren. Danach werden Sie mit Hilfe von Adobe GoLive die SWF-Datei zusammen mit weiteren QuickTime-Filmen in einen QuickTime-Film für Ihre Webseite integrieren. Außerdem werden Sie Adobe GoLive benutzen, um den endgültigen Film zu bearbeiten, indem Sie Ton und Spezialeffekte hinzufügen, einschließlich Farbtöne, Bilder und Blendeneffekte zwischen Filmen.

420 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Mit Adobe LiveMotion eine Komposition erzeugen, die Platzhalter für QuickTime-Filme enthält • LiveMotion benutzen, um eine Komposition in eine SWF-Datei zu exportieren • Adobe GoLive verwenden, um eine SWF-Datei mit anderen QuickTime-Filmen in einen endgültigen QuickTime-Film zu integrieren • Mit Adobe GoLive Ton zu QuickTime-Filmen hinzufügen • Adobe GoLive benutzen, um QuickTime-Filmen Spezialeffekte hinzuzufügen, einschließlich Farbtöne, Bilder und Übergänge zwischen Filmen Hinweis: Falls Sie LiveMotion nicht auf Ihrem System installiert haben, können Sie den ersten Abschnitt dieser Lektion überspringen, der sich mit LiveMotion befasst, und gleich mit dem Abschnitt weitermachen, der sich wieder mit der Arbeit mit Adobe GoLive beschäftigt. Wir haben Ihnen die notwendigen Startdateien für das Arbeiten mit Adobe GoLive in den Übungslektionsdateien auf der CD-ROM bereitgehalten. Für diese Lektion werden Sie etwa eine Stunde benötigen. Kopieren Sie, falls nötig, die Ordner Lesson12 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Vorbereitungen Sie beginnen diese Lektion, indem Sie sich die fertig gestellte Filmdatei ansehen. Die Datei enthält die fertige LiveMotion-Komposition kombiniert mit drei QuickTime-Filmen in Adobe GoLive. 1

Starten Sie Adobe GoLive 5.0 oder einen QuickTime-Player.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Datei 12End.mov im Pfad Lesson12/12End/12End.mov.

3

Klicken Sie unten im Fenster auf die Schaltfläche »Abspielen« ( ), um den Film wiederzugeben.

4

Bewegen Sie den Mauszeiger über die umlaufenden Sterne, sobald diese zu sehen sind.

Beachten Sie, dass sich der Zeiger in eine Hand verändert, was darauf hinweist, dass es sich bei den Sternen tatsächlich um Rollover-Schaltflächen handelt. Jede Rollover-Schaltfläche ist mit einem anderen QuickTime-Film verknüpft.

Mauszeiger über umlaufenden Stern bewegen (Rollover-Schaltfläche)

5

Klicken Sie auf einen der umlaufenden Sterne, um den Film abzuspielen.

421

422 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Um diese Datei zu erzeugen, haben wir in LiveMotion eine Zeitachse bestimmt, einschließlich der Platzhalter für drei QuickTime-Filme. Die am unteren Filmrand durchlaufende Textzeile wurde in LiveMotion erstellt, indem die XKoordinate eines Textobjekts für einen bestimmten Zeitraum verändert wurde. Danach haben wir mit Hilfe von Adobe GoLive die endgültige LiveMotion-Komposition mit den QuickTime-Filmen zusammengebracht. Schließlich haben wir den Filmen in Adobe GoLive noch Sound und Spezialeffekte hinzugefügt. 6

Klicken Sie auf einen anderen der umlaufenden Sterne, um einen weiteren Film zu sehen.

7

Wenn Sie mit dem Betrachten der Filme fertig sind, wählen Sie Datei: Schließen, um die Datei zu schließen. Wählen Sie anschließend Datei: Beenden, um Adobe GoLive bzw. den QuickTime-Player zu beenden.

Öffnen der Komposition Damit Sie sofort mit dieser Lektion beginnen können, haben wir bereits eine Komposition in Adobe LiveMotion erzeugt. Sie enthält ein Hintergrundbild, das in Adobe Photoshop erzeugt wurde, und eine Animation mit Kreisen, umlaufenden Sternen und einem durchlaufenden Text, die in Adobe LiveMotion erzeugt wurde. Sie werden diese Komposition nun in LiveMotion öffnen. Falls Sie LiveMotion nicht auf Ihrem System installiert haben, überspringen Sie diesen Abschnitt und fahren Sie gleich mit »Integrieren der Komposition mit den QuickTime-Filmen« auf Seite 430 fort. 1

Starten Sie LiveMotion.

2

Wählen Sie Datei: Öffnen und öffnen Sie die Startdatei 12Start.liv im Pfad Lesson12/12Start/12Start.liv.

Sie können die Datei 12End.liv jederzeit während der Lektion öffnen, um Ihre Arbeit mit der fertigen LiveMotion-Version zu vergleichen. 3

Wählen Sie Fenster: Standardeinstellungen wiederherstellen, um alle Paletten auf die standardmäßigen Einstellungen zurückzusetzen.

ADOBE GOLIVE 5.0 Classroom in a Book

4

Wählen Sie Fenster: Zeitachse, um das Zeitachsenfenster zu öffnen.

Die Animation Opening Animation ist eine zeitunabhängige Gruppe, die zehn Objekte enthält. Sechs dieser Objekte sind zeitunabhängige Gruppen, bei drei Objekten handelt es sich um nicht animierte Kreise und das letzte Objekt ist ein schwarzes Rechteck, das als Filmhintergrund dient. 5

Doppelklicken Sie auf Opening Animation, um die eigene Zeitachse zu öffnen. Erweitern Sie die Gruppe von 9 Objekten, um sich den Inhalt der Komposition anzusehen.

Einrichten von Verhalten-Bezeichnungen Adobe LiveMotion ermöglicht Ihnen das Einrichten von Verhalten-Bezeichnungen auf einer Zeitachse, um bestimmte Zeitpositionen zu kennzeichnen. Auf diese Bezeichnungen können Sie sich beziehen, wenn Sie andere Verhaltensweisen erstellen. Sie werden Verhalten-Bezeichnungen für die drei QuickTime-Filme einrichten. Später werden Sie jeder Rollover-Schaltfläche in der Animation ein PlayVerhalten mit einem Bezug auf diese drei Movie-Kennzeichnungen hinzufügen. Sie werden diese Positionen auf der Zeitachse auch verwenden, wenn Sie die Komposition mit den aktuellen Filmen in Adobe GoLive integrieren. Hinweis: Wenn Sie die Zeitachse in LiveMotion für QuickTime-Filme einrichten, müssen Sie bereits vorher wissen, wie lang der jeweilige Film ist.

423

424 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Einrichten der Bezeichnung »Main« Sie werden die Bezeichnung Main einrichten, um den Anfang der Zeitachse in der Komposition zu kennzeichnen und ein Anhalten-Verhalten hinzufügen. Wenn sich jetzt die anderen Verhaltensweisen auf die Main-Bezeichnung beziehen, werden alle Filme angehalten. Die Filme warten nun auf eine Rollover-Auslösung durch den Anwender. (Die Animation Opening Animation wird von diesem Anhalten-Verhalten nicht beeinflusst, da die Animation über eine eigene Zeitachse verfügt.) 1

Klicken Sie oben im Zeitachsenfenster auf den nach links weisenden Pfeil ( ), um wieder die Zeitachse der Komposition anzuzeigen. Achten Sie darauf, dass die Zeitmarke auf 00:00 gesetzt ist.

2

Klicken Sie nun im Zeitachsenfenster auf die Schaltfläche »Verhalten bearbeiten« ( ).

3

Geben Sie im Dialogfeld »Verhalten bearbeiten« die Bezeichnung Main ein, wählen Sie aus dem Einblendmenü »Verhalten hinzufügen« den Eintrag »Anhalten«, aus dem Einblendmenü »Ziel« den Eintrag »Komposition« und klicken Sie auf OK.

Einrichten der Film-Bezeichnungen Sie werden die Anfangs- und Endbezeichnungen für die drei QuickTime-Filme und Verhaltensweisen für die Rückkehr zur Main-Bezeichnung einrichten. Der Sprung zur Main-Bezeichnung erfolgt dann, wenn der jeweilige Film sein Ende erreicht hat. Jeder Film für diese Lektion ist 20 Sekunden lang.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Klicken Sie im Zeitachsenfenster mehrmals auf die Auszoomen-Steuerung ( ) oder ziehen Sie den Regler nach links, so dass auf der Zeitachse nur Sekunden angezeigt werden.

2

Setzen Sie die Zeitmarke für die Anfangszeit des Films auf 01:00 (1 Sekunde) und klicken Sie auf die Schaltfläche »Verhalten bearbeiten« ( ).

3

Geben Sie im Textfeld »Bezeichnung« die Bezeichnung Movie A ein und klicken Sie auf OK.

Beachten Sie, dass Sie der Movie A-Bezeichnung kein Abspielen-Verhalten zuweisen. Grund: Der Film soll erst abgespielt werden, wenn der Anwender auf den umlaufenden Stern klickt. (Sie werden später das Abspielen-Verhalten der Rollover-Schaltfläche für den umlaufenden Stern und einer Gehe zu-Bezeichnung mit einem Bezug auf diese Movie A-Bezeichnung zuweisen.) 4

Verschieben Sie für die Endzeit des Films (er ist 20 Sekunden lang) die Zeitmarke auf 21:00 und klicken Sie auf die Schaltfläche »Verhalten bearbeiten« ( ).

5

Geben Sie im Dialogfeld »Verhalten bearbeiten« die Bezeichnung GoToMain ein und wählen Sie aus dem Einblendmenü »Verhalten hinzufügen« die Option »Gehe zu Bezeichnung«. Wählen Sie aus dem Einblendmenü »Ziel« die Option »Komposition« und aus dem Einblendmenü »Bezeichnung« die Option »Main«. Klicken Sie anschließend auf OK.

Wenn der Film nach 20 Sekunden beendet ist, springt die Zeitmarke zurück zur Main-Bezeichnung und die Animation wird angehalten.

425

426 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

6

Wiederholen Sie die Schritte 2 bis 5, um die Anfangs- und Endbezeichnungen für die Filme Movie B und Movie C setzen. Die entsprechenden Einstellungen, mit denen die Filme um eine Sekunde auf der Zeitachse versetzt werden, finden Sie in der folgenden Tabelle.

Bezeichnungen

Anfangszeit

Endzeit

Movie A, GoToMain

01:00

21:00

Movie B, GoToMain

22:00

42:00

Movie C, GoToMain

43:00

63:00

Hinweis: Die Einstellungen in dieser Tabelle basieren auf den aktuellen Zeiten der QuickTime-Filme für diese Lektion.

(43:00)

Movie C Platzhalter (20 Sekunden)

(63:00)

(42:00)

GoToMain

MovieC

(22:00)

Movie B Platzhalter (20 Sekunden)

GoToMain

(21:00)

(01:00)

MovieB

(00:00)

GoToMain

Main

Movie A

7

Movie A Platzhalter (20 Sekunden)

Wählen Sie Datei: Speichern, um die Datei 12Start.liv zu sichern.

Hinzufügen von Verhaltensweisen zum Abspielen eines Films Jeder umlaufende Stern in der Animation ist eine Rollover-Schaltfläche mit einem Darüber-Status und einem Gedrückt-Status. Sie werden jedem Gedrückt-Status das Verhalten Gehe zu Bezeichnung und das Verhalten Abspielen für das Abspielen eines der Filme hinzufügen. 1

Doppelklicken Sie im Zeitachsenfenster auf Opening Animation, um die eigene Zeitachse zu öffnen.

2

Erweitern Sie Gruppe von 9 Objekten und verschieben Sie die Zeitmarke an das Ende des Balkens für die Dauer des Star Orbit-Objekts (Gruppe von 9 Objekten).

ADOBE GOLIVE 5.0 Classroom in a Book

Damit wird sichergestellt, dass Sie die Objekte auswählen können, sobald Sie eine unabhängige Zeitachse öffnen. 3

Doppelklicken Sie auf Star Orbit 1, um die eigene Zeitachse zu öffnen. Wählen Sie anschließend das Star Button 1-Objekt aus.

4

Wählen Sie Fenster: Rollover oder klicken Sie auf das Register, um die Rollover-Palette anzuzeigen. Wählen Sie anschließend den Gedrückt-Status für Star Button 1 und klicken Sie unten in der Palette auf die Schaltfläche »Verhalten bearbeiten« ( ).

5

Wählen Sie im Dialogfeld »Verhalten bearbeiten« aus dem Einblendmenü »Verhalten hinzufügen« die Option »Gehe zu Bezeichnung«, aus dem »Ziel«Menü die Option »Komposition« und aus dem Einblendmenü »Bezeichnung« die Option »Movie A«. Wählen Sie dann aus dem

427

428 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Einblendmenü »Verhalten hinzufügen« die Option »Abspielen«, aus dem »Ziel«-Menü die Option »Komposition« und klicken Sie auf OK. Hinweis: Das Verhalten Gehe zu Bezeichnung muss vor dem Abspielen-Verhalten zugewiesen werden.

6

Klicken Sie oben links im Zeitachsenfenster auf den nach links weisenden Pfeil ( ), um wieder zurück zur Zeitachse von Opening Animation zu gelangen.

7

Wiederholen Sie die Schritte 3 bis 6, um auch den anderen Schaltflächen mit dem umlaufenden Stern entsprechende Filme zuzuweisen. Für jede Zuweisung müssen Sie auf das Gruppenobjekt Star Orbit doppelklicken, um die unabhängige Zeitachse zu öffnen. Wählen Sie dann das Objekt Star Button im Zeitachsenfenster aus, wählen Sie den bereits in der Rollover-Palette vorhandenen Gedrückt-Status aus und klicken Sie unten in der Palette auf die Schaltfläche »Verhalten bearbeiten«. Weisen Sie anschließend dem GedrücktStatus die Verhaltensweisen gemäß nachfolgender Tabelle zu.

Hinweis: Wenn Sie den Darüber-Rollover-Status einem Objekt nicht zuweisen können, achten Sie darauf, dass sich im Zeitachsenfenster die Zeitmarke über dem Balken für die Dauer des Objekts befindet. Doppelklicken auf Objekt

Auswählen des Objektes

Hinzufügen dieses Verhaltens zum Gedrückt-Status

Star Orbit 1

Star Button 1

Gehe zu Bezeichnung, Ziel = Komposition, Bezeichnung = Movie A Abspielen, Ziel = Komposition

Star Orbit 2

Star Button 2

Gehe zu Bezeichnung, Ziel = Komposition, Bezeichnung = Movie B Abspielen, Ziel = Komposition

ADOBE GOLIVE 5.0 Classroom in a Book

Doppelklicken auf Objekt

Auswählen des Objektes

Hinzufügen dieses Verhaltens zum Gedrückt-Status

Star Orbit 3A

Star Button 3A

Gehe zu Bezeichnung, Ziel = Komposition, Bezeichnung = Movie C Abspielen, Ziel = Komposition

Star Orbit 3B

Star Button 3B

Gehe zu Bezeichnung, Ziel = Komposition, Bezeichnung = Movie C Abspielen, Ziel = Komposition

8

Wählen Sie Datei: Speichern.

Exportieren der Komposition Als letzten Vorbereitungsschritt werden Sie die Komposition in das SWF-Format exportieren. Damit der fertige Film ruckelfrei abgespielt wird, muss die Frame-Rate der SWF-Animation mit der des QuickTime-Films übereinstimmen. Die in dieser Lektion bereitgestellten Filme besitzen eine Frame-Rate von 15 Frames pro Sekunde, was die standardmäßige Frame-Rate für LiveMotion-Kompositionen ist. 1

Wählen Sie Bearbeiten: Kompositionseinstellungen und achten Sie darauf, dass diese Einstellungen für die Komposition vorhanden sind: 500 für die Breite, 420 für die Höhe, 15 für die Frame-Rate, »Exportieren: Gesamte Komposition« sowie das ausgeschaltete Kontrollkästchen »HTML-Datei erstellen«. Klicken Sie dann auf OK.

2

Wählen Sie Fenster: Exportieren, um die Exportieren-Palette zu öffnen. Wählen Sie aus den Einblendmenüs SWF und JPEG und legen Sie 50 für Qualität, 6 für Deckkraft-Auflösung, Formatierung »Autom. Bitrate für MP3« und Formatierung »Dokumentrate« für Frame-Rate fest.

429

430 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

3

Wählen Sie Datei: Exportieren als, benennen Sie die Datei mit der .swf-Erweiterung und klicken Sie auf »Speichern«, um die Datei im Pfad Lesson12/12Start zu speichern.

4

Wählen Sie Datei: Beenden, um Adobe LiveMotion zu beenden.

Integrieren der Komposition mit den QuickTime-Filmen Unter Verwendung der QuickTime-Bearbeitungswerkzeuge in Adobe GoLive 5.0 bedarf es nur einiger weniger Schritte, um Ihre fertige Komposition mit den aktuellen QuickTime-Filmen zu integrieren. Sie werden die SWF-Datei in einen neuen QuickTime-Film einfügen, Video-Spuren für die drei QuickTime-Filme hinzufügen und diese Spuren mit den drei Filmen aus dieser Lektion verknüpfen. Danach werden Sie jeden der Filme mit einer Tonspur versehen.

Erstellen eines neuen QuickTime-Films Adobe GoLive ermöglicht Ihnen das vollständig neue Erstellen von QuickTimeFilmen. Sie werden einen neuen Film erstellen, der die LiveMotion-Komposition und die drei bereits fertigen QuickTime-Filme aufnehmen soll. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Neu Spezial: QuickTime Film.

3

Geben Sie im Dialogfeld »Neuer QuickTime-Film« den Namen des Films ein, 500 für die Breite, 420 für die Höhe und klicken Sie auf OK.

Einfügen der Komposition Sie werden eine SWF-Spur in die Zeitleiste des Films einfügen und diese mit der Datei der von Ihnen erstellten SWF-Komposition verknüpfen. Wenn Sie keine SWF-Datei mit Adobe LiveMotion erzeugt haben, können Sie sie mit einer SWFDatei verknüpfen, die wir für diese Lektion vorbereitet haben. 1

Wählen Sie Film: Zeitachse anzeigen, um das Fenster »Zeitachse« anzuzeigen.

2

Wählen Sie Fenster: Objekte, um die Objekte-Palette anzuzeigen. Klicken Sie in der Objekte-Palette auf den Reiter »QuickTime«( ).

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie in der Registerkarte »QuickTime« der Objekte-Palette auf das Symbol »SWF-Spur« und ziehen Sie es aus der Palette in den linken Bereich des Zeitachsenfensters. Lassen Sie die Maustaste los. Wählen Sie im Dialogfeld aus dem Ordner Lesson12/12Start die von Ihnen erzeugte SWF-Datei oder die vorbereitete Datei 12Start.swf und klicken Sie auf OK.

Symbol SWF-Spur aus der Objekte-Palette in die Spurliste ziehen

Der erste Frame der Animation wird im Filmfenster angezeigt. Das Fenster ist schwarz. Hinweis: Es ist wichtig, dass Sie im GoLive-Spur-Editor den Balken für die Dauer der SWF-Spur nicht auseinander ziehen, da sonst bei der Filmwiedergabe zum falschen Frame gesprungen wird. Nun werden Sie den Befehl »Sichern« verwenden, um den Film zu speichern. Wenn Sie einen Film zum ersten Mal sichern, wird das Dialogfenster »Film speichern unter« angezeigt und der Film auf eine Ebene reduziert. Durch die Reduzierung des Films auf eine Ebene werden alle Spurreferenzen aufgelöst und der Film wird optimiert, so dass er anschließend im Web platziert werden kann. 4

Wählen Sie Datei: Speichern, geben Sie der Datei einen Namen mit der Dateierweiterung .mov, navigieren Sie zum Ordner Lesson12/12Start und klicken Sie auf »Sichern«.

431

432 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Einfügen der Videospuren für jeden Film Sie werden drei Videospuren einfügen, diese mit den drei für diese Lektion bereitgestellten QuickTime-Filmen verknüpfen und die Filmeigenschaften im VideoSpur-Inspektor festlegen. Die Filme wurden in Adobe Premiere ® zusammengestellt, einschließlich dem Titel, Spezialeffekten und Ein- und Ausblenden des Tons. Zunächst werden Sie die Zeitauflösung des Films mit Hilfe des Reglers zur Zeitskalierung anpassen, damit Sie die zeitlichen Beziehungen der einzelnen Videospuren, die Sie hinzufügen werden, besser untersuchen können. Die Zeitskalierung reicht von einem Frame (maximale Auflösung) bis zu einer Minute (minimale Auflösung). 1

Ziehen Sie im Zeitachsenfenster den Regler zur Zeitskalierung nach rechts, um die Zeitauflösung auf vier Sekunden zu verringern.

2

Wählen Sie in der Objekte-Palette das Symbol »Videospur« und ziehen Sie es in den Spur Editor im Zeitachsenfenster. Wählen Sie im aufgerufenen Dialogfenster Mov1.mov im Pfad Lesson12/12Start/Media/Mov1.mov aus und klicken Sie auf »Öffnen«.

3

Wählen Sie im Spur Editor die neue Videospur aus und klicken Sie dann im Filmfenster auf den Reiter »Layout-Vorschau«, um in die Layout-Ansicht zu gelangen.

Beachten Sie, dass der Film ausgewählt in der oberen linken Ecke des Filmfensters erscheint. In der Layout-Ansicht können Sie Elemente innerhalb Ihres FilmDokuments neu anordnen. Sie werden die Filme an übereinstimmenden Positionen einfügen, indem Sie im Videospur-Inspektor genaue horizontale und vertikale Koordinaten festlegen. (Sie können die Position eines Films auch durch Ziehen mit der Maus ändern.) 4

Wählen Sie Fenster: Inspektor, um den Inspektor anzuzeigen.

Der Inspektor ändert sich in den Videospur-Inspektor. (Zur Erinnerung wird das Wort Videospur unten in der Fußzeile des Inspektors angezeigt, um darzustellen, dass er in den Videospur-Inspektor geändert wurde.)

ADOBE GOLIVE 5.0 Classroom in a Book

5

Geben Sie im Videospur-Inspektor unter »Position« im linken Textfeld den Wert 170 und im rechten Textfeld 155 ein.

Sie werden jetzt die Filmspur benennen und diese auf der Zeitachse positionieren. 6

Geben Sie im Videospur-Inspektor im Textfeld »Titel« den Namen Movie A und unter »Startpunkt« den Wert 00:00:01.00 ein.

Beachten Sie, dass diese Anfangszeit mit der Zeit übereinstimmt, die Sie in der LiveMotion-Komposition auf der Zeitachse für Movie A festgelegt haben. Sie werden außerdem festgestellt haben, dass der Film bei der aktuellen Zeit nicht mehr im Filmfenster angezeigt wird. 7

Wiederholen Sie die Schritte 2 bis 6, um Videospuren für Movie B und Movie C einzufügen. Geben Sie dazu im Videospur-Inspektor die Werte aus der folgenden Tabelle ein.

Spur einfügen

Datei

Titel

Startzeit

Position

Videospur

Mov1.mov

Movie A

00:00:01.00

170 und 155

Videospur

Mov2.mov

Movie B

00:00:22.00

170 und 155

Videospur

Mov3.mov

Movie C

00:00:43.00

170 und 155

433

434 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

8

Wählen Sie Datei: Speichern, um den Film zu speichern.

Hinzufügen von Ton für QuickTime-Filme Sie können in Adobe GoLive einem Film Tonspuren der unterschiedlichsten Formate hinzufügen, einschließlich AIFF, WAV und MP3. Für jede eingefügte Filmspur werden Sie eine Tonspur hinzufügen und diese mit der Tondatei des jeweiligen Films verknüpfen. Die bereits vorbereiteten Tondateien haben die gleiche Länge wie die QuickTime-Filme, d.h., die Tonspuren sind jeweils 20 Sekunden lang. Hinweis: Wenn Sie eine LiveMotion-Komposition exportieren und diese bereits Ton im SWF-Format enthält, komprimiert LiveMotion diesen Ton im MP3-Audioformat, das in Verbindung mit dem Plug-In Flash 4 Player oder 5 Player funktioniert. Da QuickTime 4.0 nur Flash 3 unterstützt, geht der komprimierte Ton verloren, sobald Sie in Adobe GoLive 5.0 die SWF-Datei in einen QuickTime-Film einfügen. 1

Wählen Sie in der Objekte-Palette das Symbol »Soundspur« und ziehen Sie das Symbol in den Spureditor im Zeitachsenfenster und platzieren Sie es zwischen Movie A und Movie B. Wählen Sie im aufgerufenen Dialogfenster die Datei Mov1_audio.aif im Pfad Lesson12/12Start/Media/Mov1_audio.aif aus und klicken Sie auf »Öffnen«.

2

Wählen Sie im Zeitachsenfenster die neue Tonspur aus.

Der Inspektor ändert sich in den Tonspur-Inspektor. 3

Geben Sie im Tonspur-Inspektor im Textfeld »Titel« den Namen Sound for Movie A und im Textfeld »Startzeit« den Wert 00:00:01.00 ein.

4

Wiederholen Sie die Schritte 1 bis 3 für Movie B und Movie C. Geben Sie dabei die Werte aus der folgenden Tabelle im Tonspur-Inspektor ein. Platzieren Sie die Tonspur für Movie B zwischen Movie B und Movie C und die Tonspur für Movie C unten in der Spurliste.

Spur einfügen

Datei

Titel

Startzeit

Soundspur

Mov1_audio.aif

Sound for Movie A

00:00:01.00

Soundspur

Mov2_audio.aif

Sound for Movie B

00:00:22.00

Soundspur

Mov3_audio.aif

Sound for Movie C

00:00:43.00

ADOBE GOLIVE 5.0 Classroom in a Book

Zeitachsenfenster mit zugefügten Tonspuren

5

Wählen Sie Datei: Speichern.

Wie Töne in Filmen in Adobe Premiere 5.0 separiert werden Die in dieser Lektion bereitgestellten drei QuickTime-Filme enthalten Tonspuren. Mit Hilfe von Adobe Premiere ab Version 5.0 können Sie diese Tonspuren aus den Filmen separieren und als gesonderte AIFF-Dateien speichern. 1. Starten Sie Adobe Premiere, wählen Sie Datei: Öffnen und öffnen Sie die Filmdatei. 2. Wählen Sie Datei: Exportieren: Audio. 3. Klicken Sie auf »Einstellungen«. 4. Wählen Sie unter »Allgemeine Einstellungen« für den Dateityp »AIFF Sound«. Wählen Sie dann

aus dem Einblendmenü die Option »Audioeinstellungen« und wählen Sie 11 kHz für die Rate und 8-Bit Mono für das Format. Klicken Sie auf OK. (Für eine besserer Qualität bei gleichzeitig größerer Datei wählen Sie als Rate 22 oder 44 kHz und 16-Bit Stereo.) Benennen Sie die Datei mit der .aif-Erweiterung und klicken Sie erneut auf OK.

435

436 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

Spezialeffekte zu QuickTime-Filmen hinzufügen Mit Hilfe von Filter-Spuren können Sie Ihren QuickTime-Filmen Spezialeffekte hinzufügen. Adobe GoLive hält Spuren mit einfachem Quellfilter und Spuren mit zweifachem Quellfilter bereit. Mit Spuren mit einfachem Quellfilter können Sie die visuelle Präsentation einer einzelnen Videospur ändern und mit einer Spur mit zweifachem Quellfilter lassen sich Überblendungen zwischen zwei Spuren zuweisen, beispielsweise einer Bildspur und einer Videospur.

Hinzufügen einer Spur mit einfachem Quellfilter Sie werden nun eine Spur mit einfachem Quellfilter hinzufügen, um Movie B einen Farbton zuzuweisen. 1

Wählen Sie das Symbol »Spur mit einfachem Quellfilter« in der ObjektePalette an, ziehen Sie es aus der Palette in die Spurliste im Zeitachsenfenster und platzieren Sie es zwischen Movie B und Sound for Movie B.

Ziehen des Symbols »Spur mit einem Quellfilter« aus der Objekte-Palette in die Spurliste

In der Filter-Spur können Sie die Eigenschaften der Spur festlegen, wie zum Beispiel Titel, Startzeit, Dauer und Position. Bevor Sie allerdings diese Eigenschaften bestimmen können, müssen Sie erst ein Sample für die Filter-Spur erstellen, das Sie zum Festlegen des zuzuweisenden Effekts benutzen können. Sie werden nun ein Sample für die Spur mit einfachem Quellfilter hinzufügen, die Sie vorher der Spurliste hinzugefügt haben.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Klicken Sie auf das Dreieck neben der Filter-Spur mit einfachem Quellfilter, um die Spur zu öffnen und die Samples anzuzeigen.

3

Klicken Sie im Zeitachsenfenster in der Werkzeugleiste auf das »Sample erstellen«-Werkzeug ( ), um es auszuwählen. Ziehen Sie dann mit diesem Werkzeug im Bereich der Sample-Spur des Zeitachsenfensters einen SampleSpurbalken auf.

A

B C

A. »Sample erstellen«-Werkzeug B. Spur mit einfachem Quellfilter C. Sample-Spurbalken durch Ziehen erzeugt

Jetzt werden Sie die Eigenschaften der Spur mit einfachem Quellfilter festlegen. 4

Wählen Sie im Zeitachsenfenster die neue einfache Quellfilter-Spur in der Spur-Liste aus.

Der Inspektor ändert sich in den Spur mit einfachem Quellfilter-Inspektor. 5

Geben Sie im Spur mit einfachem Quellfilter-Inspektor im Textfeld »Titel« den Text Tint for Movie B ein.

Sie geben nun für diese Spur mit einfachem Quellfilter die gleichen Werte für Startzeit, Dauer, Position und Größe ein wie für Movie B.

437

438 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

6

Geben Sie im Textfeld »Startzeit« den Wert 00:00:22.00 und im Textfeld »Dauer« den Wert 00:00:20.00 ein. Geben Sie für die Position im Textfeld »Links« den Wert 170 und im Textfeld »Rechts« den Wert 155 ein. Schalten Sie das Kontrollkästchen vor »Proportionen erhalten« aus und geben Sie unter »Größe« im Textfeld »Links« den Wert 160 und im Textfeld »Rechts« den Wert 120 ein.

7

Wählen Sie im Popup-Menü »Quelle« den Film »Movie B« aus, um ihn als Quelle für die Filter-Spur zu bestimmen.

Auswählen von Movie B aus dem Popup-Menü »Quelle«

Jetzt werden Sie die Eigenschaften für das Sample festlegen, um Movie B einen Farbton hinzuzufügen. 8

Wählen Sie im Zeitachsenfenster den Sample-Spurbalken aus.

Auswählen des Sample-Spurbalkens

ADOBE GOLIVE 5.0 Classroom in a Book

Der Inspektor ändert sich in den Sample mit einfachem Quellfilter-Inspektor. 9

Klicken Sie im Sample mit einfachem Quellfilter-Inspektor auf die Schaltfläche »Auswahl«. Wählen Sie im aufgerufenen Dialogfenster »Effekt wählen« im Listenfeld oben links den Eintrag »Colorieren«, wählen Sie dann rechts im Popup-Menü »Färbungstyp« den Eintrag »Andere« und klicken Sie auf das Farbfeld »Helle Farbe«, um es auszuwählen.

10 Wählen Sie im Dialogfenster »Farbauswahl« eine Farbe aus und klicken Sie auf OK. (Wir haben Grün gewählt.) 11 Klicken Sie im Dialogfenster »Effekt wählen« auf OK. Sie werden feststellen, dass dem Film im Filmfenster ein Farbton zugewiesen wurde.

12

Wählen Sie Datei: Speichern.

Hinzufügen einer Spur mit zweifachem Quellfilter Sie werden Movie A nun eine Titelseite zuweisen, indem Sie der Spur-Liste im Zeitachsenfenster eine Bildspur hinzufügen. Die Titelseite ist ein Bild, das in Adobe Photoshop erzeugt wurde. Anschließend werden Sie eine Spur mit zweifachem Quellfilter hinzufügen, um einen Blendeneffekt zwischen der Titelseite und Movie A einzufügen. Bildspuren lassen sich außerdem auch zum Vorführen von Dias verwenden.

439

440 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

1

Klicken Sie in der Objekte-Palette auf das Symbol »Bildspur«, ziehen Sie es aus der Palette in die Spur-Liste im Zeitachsenfenster und platzieren Sie es zwischen Movie A und Sound for Movie A.

2

Wählen Sie im Zeitachsenfenster die neue Bildspur in der Spur-Liste aus.

Der Inspektor ändert sich in den Bildspur-Inspektor. Jetzt werden Sie die Bilddatei für die Titelseite bestimmen, die dem QuickTimeFilm hinzugefügt werden soll. 3

Klicken Sie im Bildspur-Inspektor auf den Reiter »Bilder«. Schalten Sie anschließend das Kontrollkästchen »Bildproportionen erhalten« aus und klicken Sie auf die Schaltfläche »Importieren«. Navigieren Sie im aufgerufenen Dialogfenster zum Ordner Lesson12/12Start/Media, wählen Sie die Datei TitlePage.psd aus und klicken Sie auf »Hinzufügen« und »Fertig«.

4

Klicken Sie im aufgerufenen Dialogfenster auf OK, um die Standardkomprimierungseinstellungen für die Bilddatei zu übernehmen.

ADOBE GOLIVE 5.0 Classroom in a Book

Nun werden Sie die Eigenschaften der Titelseite festlegen, einschließlich der Anzeige nach einer Sekunde und für eine Dauer von fünf Sekunden. 5

Klicken Sie im Bildspur-Inspektor auf den Reiter »Allgemein«. Geben Sie in der Registerkarte im Textfeld »Titel« den Text Movie A Title Page ein. Im Textfeld »Startzeit« geben Sie den Wert 00:00:01.00 ein und im Textfeld »Dauer« den Wert 00:00:05.00. Geben Sie unter Position im Textfeld »Links« den Wert 170 und im Textfeld »Rechts« den Wert 155 ein. Achten Sie darauf, dass das Kontrollkästchen vor »Proportionen erhalten« ausgeschaltet ist und geben Sie unter Größe im Textfeld »Links« den Wert 160 und im Textfeld »Rechts« den Wert 120 ein.

Nun werden Sie eine Spur mit zweifachem Quellfilter in die Spur-Liste einfügen, um den Blendeneffekt zwischen der Titelseite und Movie A zu erzeugen. 6

Klicken Sie in der Objekte-Palette auf das Symbol »Spur mit zweifachem Quellfilter«, ziehen Sie es aus der Palette in die Spur-Liste im Zeitachsenfenster und platzieren Sie es zwischen Movie A und Movie A Title Page.

Als Nächstes werden Sie der Filter-Spur mit zweifachem Quellfilter ein Sample hinzufügen. 7

Klicken Sie auf das Dreieck neben der Filter-Spur mit zweifachem Quellfilter, um die Spur zu öffnen und die Samples anzuzeigen.

441

442 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

8

Klicken Sie im Zeitachsenfenster in der Werkzeugleiste auf das »Sample erstellen«-Werkzeug ( ), um es auszuwählen. Ziehen Sie dann mit diesem Werkzeug im Bereich der Sample-Spur des Zeitachsenfensters einen SampleSpurbalken auf.

Ziehen, um einen Sample-Spurbalken für die Filter-Spur mit zweifachem Quellfilter zu erzeugen

Jetzt werden Sie die Eigenschaften der Spur mit zweifachem Quellfilter festlegen. 9

Wählen Sie im Zeitachsenfenster die neue zweifache Quellfilter-Spur in der Spur-Liste aus.

Der Inspektor ändert sich in den Spur mit zweifachem Quellfilter-Inspektor. 10 Geben Sie im Spur mit zweifachem Quellfilter-Inspektor im Textfeld »Titel« den Text Transition ein. Sie geben nun für diese Spur mit zweifachem Quellfilter die gleichen Werte für Startzeit, Dauer, Position und Größe ein wie für Movie A. 11 Geben Sie im Textfeld »Startzeit« den Wert 00:00:03.00 und im Textfeld »Dauer« den Wert 00:00:03.00 ein. Geben Sie für die Position im Textfeld »Links« den Wert 170 und im Textfeld »Rechts« den Wert 155 ein. Schalten Sie das Kontrollkästchen vor »Proportionen erhalten« aus und geben Sie unter »Größe« im Textfeld »Links« den Wert 160 und im Textfeld »Rechts« den Wert 120 ein.

ADOBE GOLIVE 5.0 Classroom in a Book

12 Wählen Sie im Popup-Menü »Quelle A« die Titelseite »Title Page« und im Popup-Menü »Quelle B« den Film »Movie A« aus. Sie werden feststellen, dass der Bereich, dem Sie einen Blendeneffekt zuweisen wollen, seine Farbe in Weiß ändert. Der Bereich bleibt so lange weiß, bis Sie den gewünschten Blendeneffekt ausgewählt haben.

Jetzt werden Sie die Eigenschaften bestimmen, damit Sie zwischen der Titelseite und Movie A einen Blendeneffekt »Weiches Überblenden« einfügen können. Der Blendeneffekt »Weiches Überblenden« blendet die Bildspur langsam aus und blendet dann die Videospur langsam ein. 13 Wählen Sie im Zeitachsenfenster den Sample-Spurbalken aus. Der Inspektor ändert sich in den Spur mit zweifachem Quellfilter-Inspektor.

443

444 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

14 Geben Sie im Spur mit zweifachem Quellfilter-Inspektor im Textfeld »Startzeit« den Wert 00:00:03.00 und im Textfeld »Endzeit« den Wert 00:00:06.00 ein. Achten Sie darauf, dass die Option »Übergang von Quelle A zu B« ausgewählt ist und klicken Sie auf die Schaltfläche »Auswahl«. Wählen Sie im aufgerufenen Dialogfenster aus dem Listenfeld links oben den Eintrag »Weiches Überblenden« und klicken Sie auf OK.

Nun werden Sie den Film mit Hilfe des Befehls »Als eigenständigen Film sichern« auf eine Ebene reduzieren und speichern. Auf diese Weise werden alle Spurreferenzen aufgelöst und der Film wird optimiert, so dass er anschließend im Web platziert werden kann. 15 Wählen Sie Film: Als eigenständigen Film sichern, geben Sie der Datei einen Namen mit der Dateinamenerweiterung .mov, navigieren Sie zum Ordner Lesson12/12Start und klicken Sie auf »Sichern«. Jetzt sind Sie mit dem Bearbeiten Ihres QuickTime-Films mit Hilfe von Adobe GoLive fertig und können ihn in der Vorschau betrachten. 16 Klicken Sie im Filmfenster auf den Reiter »Vorschau« und klicken Sie anschließend unten im Filmfenster auf die Schaltfläche »Abspielen« (

).

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Wie fügen Sie einer vorhandenen Komposition in Adobe LiveMotion einen Platzhalter für einen QuickTime-Film hinzu?

2

Wie exportieren Sie eine Komposition aus LiveMotion in eine SWF-Datei?

3

Wie erzeugen Sie einen neuen QuickTime-Film in Adobe GoLive?

4

Warum sollten Sie in Adobe GoLive einem QuickTime-Film eine SWF-Spur hinzufügen?

5

Was bedeutet es, einen Film auf eine Ebene zu reduzieren? Und wie gehen Sie dabei vor?

6

Wie können Sie in Adobe GoLive QuickTime-Filme und Ton in einen fertig gestellten QuickTime-Film integrieren?

7

Wie gehen Sie vor, wenn Sie QuickTime-Filmen in Adobe GoLive Spezialeffekte, wie beispielsweise Farbtöne oder Blendeneffekte bzw. Übergänge hinzufügen möchten?

Antworten 1

Um einer vorhandenen Komposition einen Platzhalter für einen QuickTimeFilm hinzufügen, stellen Sie für den Film in Adobe LiveMotion eine Start- und eine Endbezeichnung ein.

2

Um eine Komposition aus LiveMotion in eine SWF-Datei zu exportieren, wählen Sie zunächst Fenster: Exportieren, um die Export-Palette anzuzeigen und Einstellungen vornehmen zu können. Dann wählen Sie Datei: Exportieren, geben der Datei einen Namen mit der Dateinamenerweiterung .swf und klicken auf »Sichern«.

3

Um in Adobe GoLive einen neuen QuickTime-Film zu erzeugen, wählen Sie Datei: Neu Spezial: QuickTime-Film. Im aufgerufenen Dialogfenster geben Sie einen Namen und die Ausmaße des Films ein und klicken auf OK.

4

Sie fügen einem QuickTime-Film dann eine SWF-Spur in Adobe GoLive zu, wenn Sie dem Film eine SWF-Datei hinzufügen möchten.

445

446 LEKTION 12 Animationen zusammen mit QuickTime-Filmen in Adobe LiveMotion

5

Durch das Reduzieren eines Films auf eine Ebene werden alle Spurreferenzen aufgelöst und der Film wird optimiert, damit er bereit ist, im Web platziert zu werden. Um einen Film auf eine Ebene zu reduzieren und zu speichern, wählen Sie Film: Als eigenständigen Film sichern.

6

Um in Adobe GoLive Filme und Ton in einen fertig gestellten QuickTimeFilm zu integrieren, müssen Sie der Spurliste im Zeitachsenfenster zusätzliche Videospuren für die Filme und Tonspuren für den Ton hinzufügen.

7

Um QuickTime-Filmen Spezialeffekte hinzuzufügen, können Sie FilterSpuren verwenden. Spuren mit einfachem Quellfilter ermöglichen das Ändern der visuellen Präsentation einer einzelnen Videospur. Mit Spuren mit zweifachem Quellfilter können Sie Blendeneffekte zwischen zwei Spuren einfügen, zum Beispiel zwischen einer Bildspur und einer Videospur.

Lektion 13

13 Verwalten von Websites

Mit den mächtigem Website-Verwaltungswerkzeugen in Adobe GoLive können Sie Ihre Website sowohl erstellen als auch aufbauen. Diese Werkzeuge umfassen das Website-Fenster, das alle Objekte Ihrer Seite darstellt und die Website-Ansicht, die gleichzeitig ein Hierarchie-Betrachter und ein Designer ist. Andere Verwaltungswerkzeuge ermöglichen Ihnen das Verwalten von Ordnern, Dateien und Verknüpfungen, das Importieren von Websites in Adobe GoLive sowie das Übertragen Ihrer Website auf einen Webserver.

450 LEKTION 13 Verwalten von Websites

Über diese Lektion In dieser Lektion lernen Sie Folgendes:

• Betrachten einer gut gewarteten Website • Importieren einer vorhandenen Website, die nicht mit Adobe GoLive erzeugt wurde, in Adobe GoLive • Erkunden des Website-Fensters • Reparieren von Fehlern in einer Site • Verwalten von Ordnern in einer Site • Hinzufügen neuer Seiten • Entwerfen und Verwalten Ihrer Website mit Hilfe der Navigationsansicht • Ändern von Verknüpfungen und Datei-Referenzen • Importieren von Ressourcen und Entfernen ungenutzter Ressourcen Für diese Lektion werden Sie etwa 90 Minuten benötigen. Kopieren Sie, falls nötig, den Ordner Lesson13 auf Ihre Festplatte. Beim Arbeiten mit dieser Lektion werden Sie die Dateien im Ordner Start überschreiben. Falls Sie die Start-Dateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive 5.0 Classroom in a Book-CD. Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien zunächst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Kopieren der Classroom in a Book-Dateien« auf Seite 15. Informationen zum Einrichten Ihres Arbeitsbereichs finden Sie unter Einrichten Ihres Arbeitsbereichs auf Seite 22.

ADOBE GOLIVE 5.0 Classroom in a Book

Website-Verwaltung mit Adobe GoLive Eine Website in Adobe GoLive enthält eine Site-Datei, die benutzt wird, um Daten der Website zu verwalten und zu speichern. Es ist wichtig, dass Sie alle Arbeiten, insbesondere Hinzufügen, Entfernen und Umbenennen von Dateien, innerhalb der Adobe-GoLive-Site-Datei und nicht auf dem Desktop durchführen. Falls Sie doch einmal eine Datei auf dem Desktop hinzugefügt haben, müssen Sie beim nächsten Start von Adobe GoLive Ihr Site-Fenster aktualisieren. Ein weiterer Grund dafür, ausschließlich in Adobe GoLive zu arbeiten, ist der, dass es zusätzliche Dateien und Ordner mit den Website-Verwaltungswerkzeugen erzeugt. Beispielsweise erzeugt es einen Ordner .data, der Komponenten, Vorlagen und den Website-Papierkorb aufnimmt.

Vorbereitungen In dieser Lektion werden Sie lernen, wie Sie eine vorhandene Website mit Hilfe von Adobe GoLive verwalten können. 1

Starten Sie Adobe GoLive.

2

Wählen Sie Datei: Öffnen, und öffnen Sie die Datei Gage.site im Pfad Lesson13/13End/Gage.site.

Diese Site enthält eine Reihe von HTML-Seiten und zwei Ordner, Animations und Images, die Grafikdateien enthalten. Wenn Sie diese Lektion abgeschlossen haben, wird Ihre Website genauso aussehen.

Gage Site-Fenster, mit Darstellung des Datei- und Ordneraufbaus und dem Fenster, das die Registerkarten Extras, Fehler und FTP enthält

451

452 LEKTION 13 Verwalten von Websites

Der erweiterte rechte Teil des Site-Fensters enthält in der Regel drei Registerkarten: Fehler, FTP und Extras (und WebDAV, falls das Modul aktiviert wurde). Die fertig aufgebaute Website enthält keine Fehler oder Extras und wurde bisher nicht auf eine FTP-Site geladen, daher sind diese Registerkarten hier leer. 3

Schließen Sie das Site-Fenster Gage.site. Damit wird auch die Website geschlossen.

Importieren einer vorhandenen Site in Adobe GoLive Sie werden nun mit den Dateien im Ordner Start arbeiten, der eine Website namens Gage enthält, die nicht mit Adobe GoLive erstellt wurde. Ihre erste Aufgabe ist es nun, die Site in Adobe GoLive zu importieren. 1

Wählen Sie Datei: Neue Website: Aus Ordner importieren. Klicken Sie auf die obere Schaltfläche »Durchsuchen« und suchen Sie den Ordner 13Start. Wählen Sie dort den Ordner Gage. Dies ist die Website, die Sie in das Adobe GoLive-Format importieren werden.

2

Klicken Sie auf OK (Windows) oder auf »Auswählen« (Mac OS). Im oberen Textfeld des Dialogfelds »Website-Ordner importieren« wird der Pfad des Ordners dargestellt.

Da die Site bereits eine Seite Index.html besitzt, erkennt Adobe GoLive diese als die Homepage und stellt sie automatisch im unteren Textfeld dar. Wenn die Seite Index.html fehlen würde, müssten Sie mit Hilfe der Schaltfläche »Durchsuchen« nach der Homepage der Website suchen.

ADOBE GOLIVE 5.0 Classroom in a Book

Hinweis: Wenn auf Ihrem Desktop ein Site-Ordner sichtbar ist, können Sie ihn direkt auf das obere Textfeld des Dialogfelds »Website-Ordner importieren« ziehen.

Importieren einer Site mit Hilfe des Dialogfelds »Website-Ordner importieren«

3 Klicken Sie auf »Importieren«. Die Website wird in das Adobe-GoLive-Format importiert und stellt alle Ordner, Dateien und andere Site-Objekte dar. 4

Wählen Sie Datei: Speichern als, geben Sie der Datei den Namen Gage.site und speichern Sie sie im Ordner 13Start. (Achten Sie darauf, sie nicht versehentlich im Ordner 13End zu speichern.)

Informationen über das Erstellen einer neuen Website in Adobe GoLive finden Sie unter Erzeugen einer neuen Website auf Seite 96.

453

454 LEKTION 13 Verwalten von Websites

Erkunden der Site im Site-Fenster Die Registerkarte »Dateien« im Site-Fenster stellt alle Objekte Ihrer Site dar; hier können Sie Ordner, Dateien und andere Site-Objekte erzeugen, umbenennen, verschieben und löschen. Die Site umfasst einen Ordner Animations, ein paar Grafikdateien und einige HTML-Seiten. Beachten Sie, dass in den Statusspalten mancher Dateien kleine Häkchensymbole dargestellt werden, die darauf hinweisen, dass ihre Verknüpfungen korrekt sind. Andere Dateien weisen kleine grüne Fehler-Symbole ( ) auf, die anzeigen, dass sie unterbrochene Verknüpfungen enthalten. Diese fehlerhaften Verknüpfungen werden in der Registerkarte »Fehler« des Site-Fensters dargestellt, auf die Sie später in dieser Lektion noch zurückkommen werden.

Darstellung der Site in der Registerkarte »Dateien« im Site-Fenster

ADOBE GOLIVE 5.0 Classroom in a Book

1

Wählen Sie im Site-Fenster die Datei Index.html.

Der Inspektor ändert sich in den Datei-Inspektor. Dieser Inspektor ermöglicht Ihnen das Umbenennen von Dateien, Verwalten ihrer Eigenschaften, Betrachten ihrer Inhalte und Ändern Ihrer Homepage. Mit seiner Hilfe können Sie eine Menge unterschiedlicher Dateien wie Seiten, Bilder und Mediadateien verwalten.

Datei-Inspektor

2

Klicken Sie im Datei-Inspektor auf den Reiter »Seite« und achten Sie darauf, dass die Option »Startseite« ausgewählt ist und diese Datei somit zu Ihrer Homepage gemacht wird. Allerdings ist die Option nicht aktiviert. Der einzige Weg, eine andere Datei als Homepage zu bestimmen, besteht darin, diese zu öffnen und dort die Option »Startseite« auszuwählen.

3

Wählen Sie im Site-Fenster die Datei logo.gif. Die Reiter des Datei-Inspektors stehen nun für Bildeigenschaften.

4

Klicken Sie im Datei-Inspektor auf den Reiter »Inhalt«, um ein Thumbnail des Bildes zu sehen. Wählen Sie ein weiteres Bild und dann noch ein drittes.

455

456 LEKTION 13 Verwalten von Websites

Sie können mit Hilfe der Registerkarte »Inhalt« des Bild-Inspektors durch alle Ihre Bilder rollen und nach einem gewünschten Bild suchen.

5

Wählen Sie Fenster: Link-Ansicht. Dadurch wird die Link-Ansicht-Palette aufgerufen.

Die Link-Ansicht-Palette stellt Verknüpfungen vom Bild auf die HTML-Seiten dar, in denen das Bild dargestellt wird. (Wählen Sie wieder ein paar andere Bilder aus, um zu beobachten, wie die Link-Ansicht-Palette sich ändert.) Die LinkAnsicht-Palette ist ein sehr nützliches Werkzeug, mit dem Sie Verknüpfungen erkennen, verwalten und korrigieren können. Ihre »Point & Shoot«-Schaltfläche ( ) ermöglicht Ihnen das einfache Erzeugen und Ändern von Verknüpfungen und die problemlose Reparatur fehlerhafter Verknüpfungen.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Klicken Sie auf das Symbol der Seite Index.html in der Link-Ansicht-Palette. Die Palette ändert ihre Darstellung, um alle Verknüpfungen von der und auf die Seite darzustellen. (Wenn nötig, passen Sie das Fenster der Palette an, damit Sie alle Verknüpfungen sehen können.)

Link-Ansicht-Palette

Wenn Sie auf eine der Verknüpfungen der Datei Index.html klicken, ändert sich der Mittelpunkt der Palette erneut. Auf diese Weise können Sie die Link-AnsichtPalette benutzen, um alle Ihre Verknüpfungen in Ihrer Website zu überprüfen. Außerdem eignen sich auch die unterschiedlichen Inspektor-Fenster zum Aktualisieren und Bearbeiten von Informationen über Ihre Site-Objekte und deren Verknüpfungen. 7

Schließen Sie die Link-Ansicht-Palette.

Erkunden des erweiterten Site-Fensters Sie werden jetzt einen Blick auf die Merkmale des erweiterten Site-Fensters werfen. 1

Falls erforderlich erweitern Sie das Site-Fenster, indem Sie unten rechts im Site-Fenster auf den Doppelpfeil ( ) klicken.

457

458 LEKTION 13 Verwalten von Websites

Wenn Sie möchten, können Sie die Reiter-Trennzeile zwischen den beiden Fensterabschnitten ziehen, um ihre Größe zu ändern. Vielleicht möchten Sie auch das Site-Fenster nach unten auf Ihrem Bildschirm ziehen. Auf diese Weise bleibt es sichtbar, wenn Sie Site-Dateien öffnen. Hinweis: Um das erweiterte Fenster wieder zusammenzuklappen, klicken Sie wieder auf den Doppelpfeil unten neben der Bildlaufleiste des linken Fensterteils.

Die Erweiterung des Site-Fenster enthält drei Registerkarten: Fehler, FTP und Extras (und WebDAV, falls das Modul aktiv ist). 2

Wenn die Registerkarte »Extras« nicht bereits ausgewählt ist, klicken Sie auf ihren Reiter.

Diese Registerkarte enthält vier Ordner: Komponenten, Designs, WebsitePapierkorb und Vorlagen. Diese Ordner wurden von Adobe GoLive erzeugt und in den Ordner Gage.data verschoben, als Sie die Website importiert haben.

• Der Ordner Komponenten nimmt HTML-Seiten auf, die Sie in andere HTMLSeiten einbetten können. Sie können eine einzelne Komponente erzeugen und sie immer wieder benutzen. Beispiele für Komponenten sind eine Navigationsleiste mit eigenen Bildern und Verknüpfungen, ein Copyright-Feld oder auch formatierter Text.

ADOBE GOLIVE 5.0 Classroom in a Book

• Der Ordner Designs speichert Entwürfe, die Sie für Ihre aktuelle Site erzeugt haben. Nachdem Sie einen Entwurf fertig gestellt haben, können Sie ihn auf Ihre Website verschieben. • Der Site-Papierkorb speichert jedes Site-Objekt, das Sie von Ihrer Site entfernt haben. Von hier aus können Sie sie entweder auf den Desktop-Papierkorb oder zurück in Ihre Site ziehen.

Website-Papierkorb Das Verschieben einer Datei aus dem Site-Fenster in den Adobe GoLive Website-Papierkorb ist nicht dasselbe wie das Verschieben einer Datei in den Papierkorb auf der Schreibtischoberfläche unter Windows oder Mac OS. Eine Datei im Website-Papierkorb verbleibt auf Ihrer Festplatte, auch wenn sie nicht mehr mit Ihrer Website verbunden ist. Sie können sie in den Systempapierkorb ziehen, um sie dauerhaft zu löschen, oder sie wieder zurück in die Website-Konstruktion ziehen. Sie können das Verhalten von Adobe GoLive beim Bewegen von Elementen in den Site-Papierkorb ändern, indem Sie die Voreinstellungen ändern. Per Voreinstellung werden Elemente nicht endgültig gelöscht und Sie werden gewarnt, bevor sie verschoben werden. Gehen Sie folgendermaßen vor, wenn Site-Elemente endgültig gelöscht werden sollen: 1. Wählen Sie Bearbeiten: Voreinstellungen, um das Dialogfeld »Voreinstellungen« zu öffnen. 2. Wählen Sie Website und anschließend In den Papierkorb des Systems (Windows) bzw. In den

Papierkorb des Finders (Mac OS). Mit dieser Option werden alle ausgewählten Elemente direkt in den Papierkorb des Betriebssystems verschoben und nicht mehr in den Site-Papierkorb. 3. Klicken Sie auf OK.

• Der Ordner Vorlagen nimmt Seitenvorlagen auf, die Framesets, Bilder, Style Sheets usw. enthalten können, die immer wieder benötigt werden. An dieser Stelle sind alle Ihre vier Ordner leer. 3

Klicken Sie auf den Reiter »FTP«.

Diese Registerkarte ist ebenfalls leer. Nachdem Sie einmal mit Ihrem FTP-Server verbunden waren, führt diese Registerkarte alle Dateien und Ordner (zusammen mit dem Datum der letzten Überarbeitung) auf, die Sie auf den Server geladen haben.

459

460 LEKTION 13 Verwalten von Websites

4

Klicken Sie auf den Reiter »Fehler«.

Diese Registerkarte führt jeden Fehler Ihrer Website auf. Beachten Sie, dass bereits ein paar Fehlerarten in der Registerkarte dargestellt werden: eine Datei, die sich außerhalb der Site befindet, ein unbestimmte Verknüpfung (oder Leere Referenz) und einige fehlende Hypertext-Verknüpfungen. 5

Klicken Sie auf das Dreieck links vom Ordner Verwaiste Dateien, um ihn zu erweitern (falls er es nicht bereits ist). Die verwaiste Datei, Star.gif, wird angezeigt.

Darstellung von Fehlern in der Registerkarte »Fehler« des Site-Fensters

Reparatur von Fehlern Sie werden jetzt die Fehler reparieren, die in der Registerkarte »Fehler« angezeigt werden. Zuerst werden Sie das Problem mit der verwaisten Datei beheben, die sich außerhalb der Site befindet.

Reparieren von verwaisten Dateien Eine verwaiste Datei ist eine Datei, auf die in Ihrer Site verwiesen wird, die aber nicht gefunden werden kann oder sich im Site-Papierkorb befindet. Das Kopieren der Datei in Ihren Site-Ordner wird das Problem lösen.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Wählen Sie in der Registerkarte »Fehler« die Datei Star.gif. Beachten Sie, dass der Inspektor zum Datei-Inspektor wird. Die Registerkarte »Inhalt« stellt das Bild, eine blinkende Animation, dar. Damit können Sie überprüfen, ob Sie mit der richtigen Datei arbeiten.

2

Ziehen Sie die Datei aus der Registerkarte »Fehler« auf den Ordner Animations in der Registerkarte »Dateien« im Site-Fenster.

Ziehen einer Datei aus der Registerkarte »Fehler« zurück in die Registerkarte »Dateien« im Site-Fenster

3

Klicken Sie im Dialogfeld »Dateien kopieren« auf OK. Damit bestätigen Sie, dass Sie die Datei in Ihre Website kopieren und ihre Verknüpfungen aktualisieren möchten.

Falls Sie mit dem Fallenlassen der Datei auf dem Ordner Animations zu langsam waren, kann es sein, dass der Ordner geöffnet wurde und Sie sich plötzlich innerhalb des Ordners befinden. Sie gelangen dann wieder zurück in das Wurzelverzeichnis, indem Sie oben in der Registerkarte »Dateien« auf die Schaltfläche »Navigation« ( ) klicken.

461

462 LEKTION 13 Verwalten von Websites

Warum war die Datei Star.gif eine verwaiste Datei? Erinnern Sie sich daran, dass Sie beim Erzeugen der Website den Ordner Gage importiert haben. Das Bild Star.gif befand sich nicht in diesem, sondern in einem anderen Ordner und wurde daher gar nicht in die Datei Gage.site importiert. Da das Bild von Index.html referenziert wurde, hatte Adobe GoLive es als verwaist markiert. Hinweis: Wenn Sie eine Datei in Ihr Site-Fenster kopieren, macht Ihr Desktop ebenfalls eine Kopie. Daher befinden sich nun Kopien der Datei Star.gif sowohl in Ihrem Site-Fenster als auch innerhalb des Ordners Gage auf Ihrem Desktop.

Reparatur fehlender Dateien und fehlerhafter Hypertext-Verknüpfungen Sie werden jetzt die fehlenden Dateien reparieren, die in der Registerkarte »Fehler« des Site-Fensters angezeigt werden. Benutzen Sie die Ansicht-LinkPalette, um herauszufinden, welche Dateien fehlerhafte Referenzen oder Verknüpfungen aufweisen. Sie können das Problem mit fehlenden Dateien auf mindestens drei Arten lösen:

• Indem Sie alle Referenzen auf die Datei entfernen. • Indem Sie alle Referenzen auf eine neue Datei weisen lassen. • Indem Sie mit Hilfe des Fehler-Inspektors nach der Datei suchen und sie in Ihre Site kopieren. 1

Wählen Sie in der Registerkarte »Fehler« des Site-Fensters die fehlende Datei (Leere Referenz!). Beachten Sie, wie der Inspektor zum Fehler-Inspektor wird und die Datei (Empty Reference!) im Textfeld »URL« angezeigt wird.

ADOBE GOLIVE 5.0 Classroom in a Book

2

Wählen Sie Fenster: Link-Ansicht. Die Link-Ansicht-Palette zeigt die leere Referenz und die Datei an, die sie enthält (Stock.html).

Betrachten einer leeren Referenz im Hyperlink-Inspektor

3

Doppelklicken Sie auf die Datei Stock.html in der Registerkarte »Dateien« des Site-Fensters. Es fehlt eine Bilddatei oben links auf der Seite. An ihrer Stelle befindet sich ein leerer Platzhalter. Falls nötig, vergrößern oder verschieben Sie die Datei Stock.html, damit Sie die Registerkarte »Dateien« des SiteFensters gut sehen können.

4

Wählen Sie den Bildplatzhalter in Stock.html aus.

5

Drücken Sie die Alt- (Windows) bzw. Befehlstaste (Mac OS), und ziehen Sie gleichzeitig mit gedrückter Maustaste eine Linie vom Bildplatzhalter auf die Datei Logo.gif in der Registerkarte »Dateien« des Site-Fensters. Lassen Sie die Maustaste los. Das schwarze Gage-Logo wird auf der Seite dargestellt.

463

464 LEKTION 13 Verwalten von Websites

Adobe GoLive hat die Fehlermeldung Leere Referenz! aus dem Site-Fenster entfernt. Hinweis: Falls die Registerkarte »Dateien« teilweise verdeckt wird, halten Sie den Mauszeiger über den sichtbaren Bereich, bis die Registerkarte automatisch nach vorne kommt.

Verknüpfen eines Bildes mit einer HTML-Seite mit Hilfe einer »Point & Shoot«-Linie auf eine Datei im Site-Fenster

Es gibt noch eine unterbrochene Hypertext-Verknüpfung auf der Seite, aber dieser Fehler ist nicht so einfach zu finden. 6

Falls nötig, vergrößern oder verschieben Sie die Datei Stock.html, damit Sie ihren gesamten Inhalt sehen können.

ADOBE GOLIVE 5.0 Classroom in a Book

7

Klicken Sie in der Werkzeugleiste auf die Schaltfläche »Link-Warnungen« ( ). Die fehlerhafte Verknüpfung wird rot hervorgehoben. (Sie müssen vielleicht auf der Seite ein wenig nach unten rollen, um sie sehen zu können.)

8

Doppelklicken Sie auf den hervorgehobenen Text (das Wort Repairs), um die Verknüpfung auszuwählen. Der Inspektor wird zum Text-Inspektor und der fehlerhafte URL wird im Textfeld »URL« rosa hervorgehoben.

9

Ziehen Sie im Text-Inspektor von der Schaltfläche »Point & Shoot« auf die Datei Repairs.html in der Registerkarte »Dateien«. Falls die Registerkarte »Dateien« teilweise verdeckt wird, halten Sie den Mauszeiger über der Registerkarte, bis sie automatisch nach vorne kommt. Falls Sie die Datei Repairs.html in der Registerkarte nicht sehen, können Sie in der Dateiliste nach unten rollen, indem Sie den Mauszeiger nach unten auf die letzte sichtbare Datei im Fenster bewegen.

Verwenden der Schaltfläche »Point & Shoot« des Text-Inspektors, um eine unterbrochene Verknüpfung zu reparieren

Die rosa Hervorhebung wird aus dem Textfeld »URL« im Text-Inspektor und dem Wort Repairs entfernt. Beachten Sie, dass die Hyperlink-Fehlerwarnung Repairs1.html ebenfalls entfernt wurde. 10 Wählen Sie Datei: Speichern und schließen Sie die Datei Stock.html. Es ist nur noch ein Fehler übrig: Eine fehlende Datei muss noch repariert werden. Als Nächstes werden Sie die Link-Ansicht-Palette benutzen, um die Verbindung mit Appraisals.html zu reparieren.

465

466 LEKTION 13 Verwalten von Websites

11 Wählen Sie Appraisals.html in der Registerkarte »Fehler« des Site-Fensters. Der Hyperlink-Inspektor zeigt an, dass Index.html die einzige Seite ist, die eine Verknüpfung mit der fehlenden Datei enthält. Die Verknüpfung von Index.html bezieht sich auf eine Datei Appraisals.html, aber die Registerkarte »Dateien« enthält eine Datei Appraise.html. Die Datei wurde zwischenzeitlich umbenannt, ohne anschließend alle ihre Verknüpfungen zu aktualisieren. Sie werden die Schaltfläche »Point & Shoot« in der Link-Ansicht-Palette benutzen, um diesen Fehler zu reparieren. Vergewissern Sie sich, dass Sie sowohl das Site-Fenster als auch die Datei Appraisals.html in der Link-Ansicht-Palette sehen können. 12 Ziehen Sie von der Schaltfläche »Point & Shoot« neben der Datei Appraisals.html auf die Datei Appraise.html in der Registerkarte »Dateien« des Site-Fensters. Hinweis: Die Schaltflächen »Point & Shoot« ( ) in der Link-Ansicht-Palette, im Fehler-Inspektor, Text-Inspektor, der Datei selbst und der Registerkarte »Fehler« funktionieren alle in der gleichen Weise.

Reparieren von Dateireferenzen mit dem Hyperlink-Inspektor

13 Klicken Sie im Dialogfeld »Referenz ändern« auf OK, um zu bestätigen, dass Sie alle Referenzen auf diese Datei ändern möchten.

ADOBE GOLIVE 5.0 Classroom in a Book

14 Schließen Sie die Link-Ansicht-Palette. Nun sollten alle Fehler beseitigt sein, und neben allen Ihren HTML-Seiten in der Registerkarte »Dateien« müssten jetzt Häkchen dargestellt werden, die darauf hinweisen, dass alle Verknüpfungen in Ordnung sind. 15 Klicken Sie in der Registerkarte »Dateien« auf die Spaltenüberschrift »Art«, um alle Dateien nach Dateiart sortieren zu lassen (falls erforderlich, rollen Sie im Fenster ein wenig nach rechts). Dabei werden alle HTML-Dateien gruppiert; dies wird Ihnen bei der Überprüfung ihrer Verknüpfungen helfen. 16 Klicken Sie in der Registerkarte »Dateien« auf den Reiter »Name«, um die Dateien wieder nach Name ordnen zu lassen.

Verwalten von Ordnern Sie werden nun den Aufbau der Website verbessern, indem Sie Ihre Ordner und Dateien umstellen. Da Adobe GoLive Ihre Verknüpfungen dynamisch aktualisiert, brauchen Sie keine Angst davor zu haben, jedes Mal neue Verknüpfungen herstellen zu müssen, wenn Sie Ordner und Dateien ändern.

Erzeugen eines Ordners und Hinzufügen von Dateien Wenn Ihre Site wächst, müssen Sie Ordner erzeugen, die alle Dateien aufnehmen und verwalten können. Sie werden damit beginnen, einen neuen Ordner für Bilder zu erzeugen und Dateien in ihn zu verschieben. 1

Klicken Sie irgendwo in die Registerkarte »Dateien« des Site-Fensters, um sie zu aktivieren.

467

468 LEKTION 13 Verwalten von Websites

2

Klicken Sie in der Werkzeugleiste der Site auf die Schaltfläche »Neuer Ordner« ( ).

3

Klicken Sie unter Mac OS in die Titelleiste des Inspektors, um ihn in den Ordner-Inspektor zu ändern.

4

Geben Sie im Textfeld »Name« des Ordner-Inspektors den Text Pix ein. Drücken Sie danach die Eingabetaste. Der Name des Ordners wird geändert.

Sie können den Namen einer jeden Datei und eines jedes Ordners ändern, indem Sie ihn in der Registerkarte »Dateien« auswählen und einen neuen Namen direkt über den alten Namen eingeben oder den neuen Namen im Textfeld des Inspektors eingeben. 5

Heben Sie die Auswahl des Ordners Pix in der Registerkarte »Dateien« auf. Klicken Sie alle Bilddateien (alle Dateien mit der Endung .gif) und den Ordner Animations mit gedrückter Strg- (Windows) bzw. Umschalttaste (Mac OS) an, um sie alle auszuwählen.

Unter Windows müssen Sie nach dem Auswählen aller Elemente die Strg-Taste wieder loslassen, weil Sie sie sonst nur kopieren und nicht verschieben werden.

ADOBE GOLIVE 5.0 Classroom in a Book

6

Ziehen Sie die ausgewählten Elemente in den Ordner Pix.

Ziehen von Elementen in den Ordner Pix

7

Klicken Sie im Dialogfeld »Dateien bewegen« auf OK. Adobe GoLive aktualisiert nun dynamisch alle Verknüpfungen.

8

Wählen Sie Datei: Speichern, um die Änderungen an Ihrer Site zu speichern.

Verschieben eines Ordners Als Nächstes werden Sie den Ordner Animations aus dem Ordner Pix zurück in den Ordner Gage bewegen und alle seine Verknüpfungen aktualisieren. 1

Falls erforderlich klicken Sie im Site-Fenster auf das Dreieck links vom Ordner Pix, um ihn zu erweitern.

469

470 LEKTION 13 Verwalten von Websites

2

Wählen Sie den Ordner Animations und verschieben Sie ihn ins Wurzelverzeichnis der Gage-Site, indem Sie ihn auf die Titelzeile »Name« ziehen.

3

Klicken Sie im Dialogfeld »Dateien bewegen« auf OK. Der Ordner Animations wird im Wurzelverzeichnis angezeigt und alle seine Verknüpfungen werden aktualisiert.

Umbenennen eines Ordners Sie werden nun den Ordner Pix in Images umbenennen und beobachten, wie Änderungen innerhalb von Adobe GoLive automatisch auf Ihrem Desktop aktualisiert werden. 1

Verkleinern Sie unter Windows das Fenster der Anwendung Adobe GoLive auf etwa die Hälfte Ihrer Bildschirmgröße.

2

Öffnen Sie den Ordner Pix mit Hilfe Ihres Betriebssystems und platzieren Sie das Fenster des geöffneten Ordners so, dass Sie ihn gut sehen können.

3

Führen Sie im Site-Fenster einen der folgenden Schritte aus:

ADOBE GOLIVE 5.0 Classroom in a Book

• Unter Windows wählen Sie den Ordner Pix und klicken in der Werkzeugleiste auf die Schaltfläche »Im Explorer zeigen« ( ). (Sie können auch mit der rechten Maustaste auf den Ordner Pix klicken und im Kontextmenü »Im Explorer zeigen« auswählen.) Passen Sie das ExplorerFenster in der Größe an und ziehen Sie es neben das Anwendungsfenster von Adobe GoLive. • Unter Mac OS wählen Sie den Ordner Pix und klicken in der Werkzeugleiste auf die Schaltfläche »Im Finder zeigen« ( ). (Sie können den Ordner Pix in der Registerkarte »Dateien« auch mit gedrückter Befehlstaste anklicken.) Falls nötig passen Sie das Fenster in der Größe an und ziehen Sie es neben das Site-Fenster. Sie sollten jetzt beide Fenster, das Adobe-GoLive-Fenster und das ExplorerFenster (Windows) bzw. Finder-Fenster (Mac OS) nebeneinander betrachten können. 4

Ändern Sie den Namen des Ordners Pix in der Registerkarte »Dateien« in Images. Drücken Sie die Eingabetaste.

5

Klicken Sie im Dialogfeld »Ordner benennen« auf OK, um zu bestätigen, dass die Dateien aktualisiert werden sollen.

Beachten Sie, wie sich der Ordnername auch auf Ihrem Desktop geändert hat. Adobe GoLive arbeitet mit Ihrem Betriebssystem zusammen, um die Zuverlässigkeit der Verknüpfungen innerhalb Ihrer Website zu gewährleisten. 6

Schließen Sie den Explorer (Windows) bzw. andere Fenster (Mac OS) auf Ihrem Desktop.

Hinzufügen neuer Seiten zu Ihrer Site Sie werden Ihrer Website nun zwei neue Seiten hinzufügen und dafür zwei unterschiedliche Methoden benutzen. Jede der Methoden kopiert automatisch die entsprechende Datei und platziert sie in Ihrem Site-Ordner, ohne dafür die Original-Datei zu bewegen. Zuerst werden Sie eine Datei mit dem Befehl »Dateien hinzufügen« einfügen.

471

472 LEKTION 13 Verwalten von Websites

1

Achten Sie darauf, dass das Site-Fenster aktiviert ist und keine Objekte in ihm ausgewählt sind.

2

Wählen Sie Site: Explorer: Dateien hinzufügen (Windows) bzw. Site: Finder: Dateien hinzufügen (Mac OS) und navigieren Sie zum Ordner Other Files in Ihrem Ordner 13Start. Öffnen Sie ihn und wählen Sie die Datei Hottest.html aus.

Verwenden des Befehls »Dateien hinzufügen«, um Ihrer Site eine Datei hinzuzufügen

3

Klicken Sie auf »Hinzufügen« und anschließend auf »Fertig«. Sie sollten nun die Datei Hottest.html in der Registerkarte »Dateien« des Site-Fensters sehen können.

Jetzt werden Sie eine weitere Datei hinzufügen, indem Sie aus dem Explorer (Windows) bzw. vom Desktop (Mac OS) auf Ihre Site ziehen. 4

Suchen Sie ausgehend vom Explorer (Windows) bzw. dem Desktop (Mac OS) den Ordner Other Files in Ihrem Ordner 13Start/Gage. Falls nötig passen Sie die Fenstergröße an.

ADOBE GOLIVE 5.0 Classroom in a Book

5

Ziehen Sie die Datei Martin.html aus dem Ordner Other Files auf den Ordner Gage in der Registerkarte »Dateien« des Site-Fensters.

Ziehen einer Datei aus dem Explorer (Windows) bzw. vom Desktop (Mac OS) auf die Registerkarte »Dateien« des Site-Fensters

Beachten Sie, wie die neu hinzugefügten Dateien im Ordnerfenster des Ordners Gage erscheinen, das im Explorer (Windows) bzw. auf dem Desktop (Mac OS) geöffnet ist. 6 Schließen Sie den Explorer (Windows) bzw. jedes Desktop-Fenster (Mac OS). Hinweis: Wenn Sie innerhalb von Ordnern im Explorer (Windows) bzw. auf dem Desktop (Mac OS) Dateien entfernen oder hinzufügen, ohne sie in Adobe GoLive zu kopieren, müssen Sie in der Website-Werkzeugleiste auf die Schaltfläche »Aktualisieren« ( ) klicken, um die Dateien auch Ihrer Site hinzuzufügen oder zu entfernen.

473

474 LEKTION 13 Verwalten von Websites

Verwalten einer Site mit Hilfe der Navigations- und Linkansicht Die Navigations- und Linkansichten sind mächtige Werkzeuge zur Steuerung Ihrer Site und können beide aus derselben Palettengruppe aufgerufen werden. Hier können Sie Ihre Site in einem grafischen Modus oder einem Gliederungsmodus betrachten, sehen, wie Seiten und andere Site-Objekte in Beziehung zueinander stehen und Verknüpfungen und Seiten verwalten. Mit Hilfe der Navigationsansicht können Sie sich die umfassende Struktur und den Aufbau Ihrer Site ansehen. Mit der Link-Ansicht können Sie alle Site-Objekte betrachten, einschließlich der Mediadateien und wie sie mit zahlreichen Seiten verknüpft sind. Im folgenden Abschnitt werden Sie diese Ansichten dazu benutzen, Verknüpfungen in Ihrer Site zu überprüfen, Seiten hinzuzufügen und Verknüpfungen mit ihnen zu erzeugen. 1

Wählen Sie Konstruktion: Navigationsansicht, um die Navigationsansicht zu öffnen.

2

Falls erforderlich, wählen Sie Fenster: Ansicht, um die Site-Ansicht zu öffnen, und wählen Sie Fenster: Link-Ansicht, um die Link-Ansicht-Palette zu öffnen.

Navigationsansicht

Site-Ansicht

ADOBE GOLIVE 5.0 Classroom in a Book

3

Klicken Sie in der Navigationsansicht auf das Plus-Zeichen( ) unterhalb der Datei Index.html, um mehr von der Seite sehen zu können.

Die Navigationsansicht stellt die Seite Index.html ganz oben in der Site-Hierarchie dar und drei weitere Seiten auf einer Hierarchie-Ebene darunter. Es gibt Hyperlink-Symbole auf Seiten ( ) und weg von Seiten ( ), die Verknüpfungen zu und von Seiten in anderen Bereichen der Site-Hierarchie anzeigen. 4

Klicken Sie auf die Seite Appraise.html. In der Link-Ansicht-Palette werden nun alle Verknüpfungen von und auf die Seite angezeigt.

Auswählen einer Seite, um ihre Verknüpfungen in der Link-Ansicht-Palette sehen zu können

5

Wählen Sie eine weitere Seite in der Navigationsansicht aus. Die LinkAnsicht-Palette ändert ihre Darstellung, um diese Seite anzuzeigen.

6

Wenn Sie fertig sind, schließen Sie die Link-Ansicht-Palette.

Sie können auch Teilbereiche Ihrer Site-Hierarchie aus- und einblenden. Das ist besonders dann nützlich, wenn Sie mit einer großen Website arbeiten.

475

476 LEKTION 13 Verwalten von Websites

7

Klicken Sie unterhalb des Seitensymbols Index.html auf das Minus-Zeichen ( ). Die Site wird auf das Seitensymbol Index.html reduziert.

Ausblenden der Site-Hierarchie durch Reduzierung auf das Seitensymbol Index.html

8

Ergebnis

Erweitern Sie die Site wieder, indem Sie auf das Plus-Zeichen ( ) unterhalb des Seitensymbols Index.html klicken. Die Website wird eingeblendet und zeigt alle anderen unmittelbar mit ihr verknüpften Seiten an.

Sie können auch die Art ändern, in der die Navigationsansicht Ihre Site darstellt. 9

Klicken Sie irgendwo in das Navigationsansichtsfenster, um die Auswahl der Seite Index.html aufzuheben, falls sie noch ausgewählt ist.

ADOBE GOLIVE 5.0 Classroom in a Book

10 In der Registerkarte »Anzeige« im Website-Ansicht-Fenster ist gegenwärtig die Option »Grafisch« ausgewählt. Normalerweise benutzen Sie diese Option, um Objekte auf Ihrer Website anzuordnen und sich durch die Objekte Ihrer Website zu bewegen.

Das Website-Ansicht-Fenster besitzt drei Registerkarten, mit denen Sie jeweils die Eigenschaften der Navigation, der Anzeige und der Filter der Navigations- und Linkansicht bestimmen können. Werfen Sie einen Blick auf die Registerkarten und ihre Optionen, bevor Sie fortfahren. 11 Klicken Sie auf den Reiter »Links« neben der Registerkarte »Navigation«, um von der Navigationsansicht in die Linkansicht zu wechseln (beide Ansichten sind in einer Palette zusammengefasst). Klicken Sie anschließend auf das rechte Plus-Zeichen neben Index.html. 12 Klicken Sie auf den Reiter »Filter« in der Website-Ansicht und klicken Sie auf die Schaltfläche »Medien wechseln«.

477

478 LEKTION 13 Verwalten von Websites

Diese Registerkarte ermöglicht Ihnen die Auswahl der Website-Objekte, die Sie in der Website-Ansicht darstellen lassen möchten. Beachten Sie, wie sich der Inhalt der Website-Ansicht verändert hat, eventuell müssen Sie in der Seite rollen, um die Änderungen sehen zu können). Es werden nun alle Media-Dateien entlang der HTML-Seiten angezeigt oder nicht angezeigt, wenn Sie auf die Schaltfläche »Medien wechseln« klicken.

13 Ziehen Sie den horizontalen Rollbalken der Website-Ansicht nach rechts, um alle hinzugefügten Mediadateien sehen zu können. 14 Schalten Sie wieder zurück in die Navigationsansicht, indem Sie auf den entsprechenden Reiter klicken.

ADOBE GOLIVE 5.0 Classroom in a Book

15 Wählen Sie aus dem Popup-Menü in der Navigationsansicht den Eintrag »Fenster für lose Seiten«. In diesem Fenster können Sie die Seiten sehen, die Ihrer Site hinzugefügt, aber bisher noch nicht verknüpft wurden.

16 Die beiden Dateien, die Sie vorhin zu Ihrer Website hinzugefügt haben, Martin.html und Hottest.html, sowie eine weitere nicht erreichbare Bilddatei, Martin.gif, werden angezeigt. Rollen Sie ein wenig nach unten, wenn nötig, um die Dateien sehen zu können.

Adobe GoLive hält auch eine Gliederungsansicht der Site-Hierarchie bereit.

479

480 LEKTION 13 Verwalten von Websites

17 Klicken Sie in der Website-Ansicht auf den Reiter »Anzeige« und wählen Sie oben in der Registerkarte die Option »Gliederung« aus.

Der Modus »Gliederung« stellt eine tabellarische Ansicht Ihrer Website dar. Außerdem enthält sie Informationen über Status, Art (der Datei) und URL eines jeden Objektes.

ADOBE GOLIVE 5.0 Classroom in a Book

18 Klicken Sie im Modus »Gliederung« auf das Symbol links neben der Seite Index.html, um die Baumansicht zu erweitern. In diesem Modus können Sie die Ansicht sowohl erweitern und reduzieren als auch Website-Objekte verschieben. Der Gliederungs-Modus ist kompakter als der grafische Modus und ähnelt der Registerkarte »Dateien« im Site-Fenster.

Erweitern des Modus »Gliederung« der Website-Ansicht

19 Wählen Sie in der Registerkarte »Anzeige« in der Website-Ansicht wieder die Option »Grafisch« aus, um zurück in die Grafikansicht Ihrer Site zu gelangen. 20 Probieren Sie in der Registerkarte »Anzeige« auch ein paar der anderen Ansicht-Optionen aus. Wenn Sie damit fertig sind, wählen Sie Symbole und Dateiname und geben Sie unter Zellengröße für die Breite den Wert 55 und für die Höhe den Wert 140 ein.

Verwenden des Website-Navigators Möglicherweise ist Ihr Bildschirm nicht groß genug, um Ihre gesamte Website darzustellen, daher verfügt Adobe GoLive über einen Website-Navigator, der Ihnen dabei behilflich ist, sich in der gesamten Hierarchieansicht zu bewegen. Der Website-Navigator ist ein eigenständiges Fenster, das Ihre gesamte Website darstellt, und mit einer Markierung den gegenwärtigen sichtbaren Bereich Ihrer Website in der Website-Ansicht hervorhebt. 1

Wählen Sie Fenster: Website-Navigator.

481

482 LEKTION 13 Verwalten von Websites

2

Platzieren Sie den Mauszeiger innerhalb der Markierung im WebsiteNavigator und benutzen Sie das Hand-Symbol, um die Markierung auf der Website zu bewegen. Beobachten Sie, wie die Website-Ansicht sich entsprechend den Bewegungen der Markierung verändert.

3

Schließen Sie das Website-Navigator-Fenster, wenn Sie mit dem Betrachten Ihrer Website fertig sind.

Bewegen der Website-Navigator-Markierung

Einfügen von Seiten in Ihre Website-Hierarchie Wie Sie sehen, sind die von Ihnen eingefügten neuen Seiten, Hottest.html und Martin.html, noch nicht Bestandteil der Haupt-Ansicht. Der Grund ist, dass Sie noch keine Verknüpfungen mit ihnen erzeugt haben, so dass sie vom übrigen Teil Ihrer Website nicht erreichbar sind. Eine dieser Seiten ist bereits für die Veröffentlichung vorgesehen, so dass Sie sie mit dem Rest Ihrer Website verknüpfen können.

ADOBE GOLIVE 5.0 Classroom in a Book

1

Ziehen Sie die Seite Hottest.html etwas unterhalb der Seite Index.html und lassen Sie sie los, wenn eine durchgezogene Linie unterhalb von Index.html erscheint.

Die Seite Hottest.html wird unter die Seite Index.html rechts von den übrigen Seiten bewegt.

Einfügen einer unerreichbaren Datei in die Website-Hierarchie

Wenn Sie Seiten auf andere Seiten in der Ansicht ziehen, können durchgezogene Linien über, unter oder auf derselben Hierarchieebene erscheinen, und Ihnen so anzeigen, wo das Fallenlassen von Seiten an einer beliebigen möglichen Stelle im Dateibaum erlaubt ist. 2

Belassen Sie die Datei Martin.html an ihrem Platz. Sie befindet sich weiter im Aufbau.

Erzeugen von Verknüpfungen zwischen Seiten mit Hilfe der Navigationsansicht Sie werden jetzt die Verknüpfung zwischen der Seite Index.html und der Seite Hottest.html erzeugen. 1

Doppelklicken Sie in der Navigationsansicht auf die Seite Index.html, um sie zu öffnen.

483

484 LEKTION 13 Verwalten von Websites

2

Verschieben Sie, falls nötig, die Seite Index.html oder passen Sie sie an, so dass Sie sowohl die Website-Ansicht als auch den Text Check Out This Week’s Hottest Buy sehen können.

3

Wählen Sie den Text Check Out This Week’s Hottest Buy aus.

4

Halten Sie die Alt- (Windows) bzw. Befehlstaste (Mac OS) gedrückt und ziehen Sie eine »Point & Shoot«-Linie vom ausgewählten Text auf die Seite Hottest.html in der Website-Ansicht. (Möglicherweise ist diese Seite teilweise durch die Seite Index.html verdeckt; halten Sie den Mauszeiger so lange über das Fenster der Seite Hottest.html, bis die Website-Ansicht automatisch nach vorne gebracht wird.)

ADOBE GOLIVE 5.0 Classroom in a Book

Der Text-Inspektor stellt die neue Verknüpfung mit der Seite Hottest.html im Textfeld »URL« dar.

Ziehen einer »Point & Shoot«-Linie, um eine Verknüpfung zu erzeugen

5

Speichern und schließen Sie die Seite Index.html.

485

486 LEKTION 13 Verwalten von Websites

Erzeugen neuer Seiten in der Navigationsansicht Ihre Website benötigt zwei neue Seiten für Ihre letzten Elemente. Sie können sie direkt in der Navigationsansicht erzeugen. 1

Wählen Sie in der Navigationsansicht das Seitensymbol für Stock.html aus.

2

Klicken Sie in der Site-Werkzeugleiste auf die Schaltfläche »Neue untergeordnete Seite« ( ). Es wird eine neue Seite Neu.html unter der Seite Stock.html dargestellt. Verwenden Sie, falls nötig, den Website-Navigator oder den vertikalen Rollbalken, um die neue Seite sehen zu können.

ADOBE GOLIVE 5.0 Classroom in a Book

3

Wählen Sie erneut Stock.html aus und wiederholen Sie Schritt 2, um eine weitere neue Seite zu erzeugen. Achten Sie darauf, dass beide neuen Seiten auf derselben Ebene der Hierarchie dargestellt werden.

Hinweis: Falls Sie einen Fehler machen und eine Seite einfügen, die Sie nicht möchten, wählen Sie die Seite aus und klicken in der Site-Werkzeugleiste auf die Schaltfläche »Auswahl löschen« ( ). Bestätigen Sie anschließend, dass Sie die Seite in den Site-Papierkorb bewegen möchten. 4

Wählen Sie die neuen Seiten im Site-Fenster aus und ändern Sie ihre Namen im Inspektor in Acoustic.html und Electric.html.

Im nächsten Abschnitt werden Sie diese unvollständigen Seiten mit dem Rest der Website verknüpfen.

Neue Seiten in der Navigationsansicht

487

488 LEKTION 13 Verwalten von Websites

Erzeugen von Verknüpfungen auf neue Seiten mit Hilfe der Navigationsansicht Sie werden jetzt diese beiden neuen Seiten mit dem Rest Ihrer Website verknüpfen und dafür die Navigationsansicht benutzen. Zuerst werden Sie Acoustic.html mit Stock.html verknüpfen. 1

Doppelklicken Sie in der Navigationsansicht auf das Symbol der Seite Stock.html, um die Seite zu öffnen.

2

Wählen Sie die Wörter Acoustic Guitars unten auf der Seite aus.

3

Halten Sie die Alt-Taste (Windows) bzw. die Befehlstaste (Mac OS) gedrückt und ziehen Sie eine »Point & Shoot«-Linie vom ausgewählten Text auf das Symbol der Seite Acoustic.html in der Navigationsansicht. Damit verknüpfen Sie den Text mit der Seite.

4

Wählen Sie die Wörter Electric Guitars unten auf der Seite aus.

5

Wiederholen Sie Schritt 3 und verknüpfen Sie diesmal den Text mit dem Symbol der Seite Electric.html in der Website-Ansicht.

6

Speichern und schließen Sie die Seite Stock.html.

7

Aktualisieren Sie den Bildschirmaufbau, indem Sie ein anderes Symbol anklicken.

Sie haben soeben zwei neue Seiten erzeugt, Ihre Website-Hierarchie neu aufgebaut und die neuen Seiten mit anderen Seiten verknüpft.

Verschieben von neu erzeugten Dateien in das Wurzelverzeichnis Immer, wenn Sie in der Website-Ansicht neue Seiten erzeugen, erzeugt Adobe GoLive einen Ordner NewFiles in der Registerkarte »Dateien« des Site-Fensters, um die neuen Dateien dort aufzunehmen. Das ist für Dateien, die sich noch im Aufbau befinden, sehr nützlich, aber Sie werden die Dateien jetzt in einen anderen Ordner verschieben. 1

Klicken Sie auf den Reiter »Dateien« des Site-Fensters, um ihn zu öffnen. Öffnen Sie anschließend den Ordner NewFiles, um die neuen Seiten Acoustic.html und Electric.html darzustellen.

ADOBE GOLIVE 5.0 Classroom in a Book

Es befinden sich zwei gelbe Symbole ( ) neben diesen Seiten, die anzeigen, dass sie sich noch im Aufbau befinden. Die Symbole werden nicht mehr angezeigt, sobald Sie mit dem Hinzufügen von Inhalt beginnen.

Symbole Im Aufbau werden neben den beiden neuen Seiten dargestellt

2

Klicken Sie mit gedrückter Umschalttaste auf die beiden Seiten, um sie auszuwählen, verschieben Sie sie in den Ordner Gage (im Wurzelverzeichnis), indem Sie sie zunächst in die Namensleiste ziehen und aktualisieren Sie die Verknüpfungen.

Ändern aller Hyperlink-Verknüpfungen und Datei-Referenzen Wenn Sie eine Seite entfernen und durch eine andere ersetzen, können Sie gleichzeitig dynamisch alle ihre Verknüpfungen auf die andere Seite übertragen. Das bezieht sich beispielsweise auch auf das Ändern eines Bildes, das in Ihrer Website immer wieder benutzt wird. Mit der Option »Referenz ändern« ist es sehr einfach, dies durchzuführen. Sie werden dieses Merkmal ausprobieren, indem Sie das Logo, das sich auf den meisten Seiten der Gage-Website befindet, von Logo.gif in Newlogo.gif ändern.

489

490 LEKTION 13 Verwalten von Websites

1

Doppelklicken Sie auf die Datei Index.html in der Registerkarte »Dateien« des Website-Fensters. Sie können das Gage Vintage Guitars-Logo in der Ecke oben links auf der Seite sehen. Dies ist das Bild, das Sie ändern werden.

2

Passen Sie, falls nötig, Index.html so an, dass Sie sowohl das Website-Fenster als auch das Logo sehen können.

3

Wählen Sie die Datei Logo.gif im Ordner Images in der Registerkarte »Dateien« des Site-Fensters.

4

Wählen Sie Site: Referenzen ändern. Klicken Sie auf die Schaltfläche »Durchsuchen« ( ), navigieren Sie zum Ordner 13Start/Other Files und öffnen Sie die Datei Newlogo.gif. Der neue Dateipfad wird im Dialogfeld »Referenzen ändern« dargestellt.

Suchen nach der Datei Newlogo.gif

5

Klicken Sie auf OK und bestätigen Sie anschließend, dass Sie alle Referenzen des Bildes ändern möchten.

ADOBE GOLIVE 5.0 Classroom in a Book

Alle Referenzen auf die alte Datei wurden geändert und das neue Logo wird auf der Seite Index.html dargestellt.

Neues Logo wird auf der Seite Index.html dargestellt

6 Speichern und schließen Sie die Seite Index.html. Wenn Sie überprüfen möchten, ob auch alle anderen Seiten aktualisiert wurden, können Sie diese Seiten nun öffnen.

Aufräumen einer Site Ihre Website besitzt nun eine Datei, die Sie nicht mehr benötigen (Logo.gif) und eine Datei, die von Ihrer Website referenziert wird, sich aber nicht im WebsiteOrdner befindet (Newlogo.gif). Die letztgenannte Datei ist eine verwaiste Datei; sie wird in der Registerkarte »Fehler« des Website-Fensters aufgeführt. Sie werden die Datei Newlogo.gif in Ihre Website importieren und dazu das Dialogfeld »Website aufräumen« benutzen. Gleichzeitig werden Sie die Datei Logo.gif und alle anderen unbenutzten Dateien und Nicht-Datei-Objekte, wie zum Beispiel URLs und E-Mail-Adressen, entfernen.

491

492 LEKTION 13 Verwalten von Websites

1

Wählen Sie Website: Website aufräumen. Wählen Sie alle Optionen in den Abschnitten »Benutzte Objekte aufnehmen« und »Unbenutzte Objekte entfernen« und klicken Sie anschließend auf OK.

Hinweis: Das Aufräumen der Website liest die gesamte Website neu ein und aktualisiert sie; außerdem werden dabei auch die Dateien auf Ihrem Desktop aufgeräumt. Das Dialogfeld »Website aufräumen« zeigt an, dass die Datei Newlogo.gif in der Website referenziert ist, sich aber nicht im Website-Ordner befindet. 2

Klicken Sie auf OK, um die Datei Newlogo.gif in den Website-Ordner zu kopieren.

Eine Liste mit allen Dateien, die aktualisiert werden müssen, wird im Dialogfeld »Dateien kopieren« angezeigt. 3 Klicken Sie auf OK, um diese Dateien zu aktualisieren. Eine Liste mit nicht-referenzierten Dateien wird dargestellt, die in den SitePapierkorb bewegt werden sollen. Es sind Logo.gif, Martin.gif und Martin.html.

ADOBE GOLIVE 5.0 Classroom in a Book

4 Klicken Sie auf OK, um diese Objekte von Ihrer Website zu entfernen. Hinweis: Sie können einzelne Dateien vor dem Site-Papierkorb bewahren, indem Sie das Kontrollkästchen neben ihnen deaktivieren. Allerdings werden diese Dateien nicht verknüpft und unbenutzt bleiben. Beachten Sie, dass der Fehler mit der verwaisten Datei, die sich außerhalb des Website-Ordners befand, in der Registerkarte »Fehler« des Site-Fensters nicht mehr angezeigt wird. Adobe GoLive hat diese Datei (Newlogo.gif) in den Ordner NewFiles in der Registerkarte »Dateien« des Site-Fensters bewegt. 5 Wählen Sie die Datei Newlogo.gif, bewegen Sie sie in den Ordner Images, und aktualisieren Sie ihre Verknüpfungen. 6 Löschen Sie den leeren Ordner NewFiles, indem Sie ihn auswählen und auf die Schaltfläche »Auswahl löschen« klicken. 7 Speichern Sie Ihre Site. Herzlichen Glückwunsch! Sie haben nun das Adobe GoLive 5.0 Classroom in a Book durchgearbeitet und dabei die grundlegenden Begriffe und Fähigkeiten erlernt, die für das Meistern dieser Anwendung notwendig sind. Sie haben Webseiten mit Grafiken erzeugt, mit Text, Animationen, CGI-Formularen und Cascading Style Sheets gearbeitet und Ihre Website für die Präsentation vorbereitet. Der letzte Schritt ist das Laden Ihrer Website auf einen Webserver, damit die Welt in den Genuss Ihrer Arbeit kommt. Da Sie hierfür bestimmte Hard- und Software benötigen, die nicht mit dem Adobe-GoLive-5.0-Paket geliefert wurde, können Sie diesen Schritt allein wagen.

493

494 LEKTION 13 Verwalten von Websites

Eigene Übungen Bevor Betrachter Ihre Website im Internet besuchen können, müssen Sie sie auf eine FTP-Site auf einem Webserver laden (Upload). Ihr Internet-Service-Provider kann Ihnen bei Fragen zum Hochladen und dem Verwalten und Unterhalten Ihrer Website behilflich sein. Weitere Einzelheiten zum Hochladen einer Website auf einen Server mit Hilfe von Adobe GoLives FTP-Möglichkeiten finden Sie unter Hochladen und Herunterladen von Websites in Kapitel 19 im Adobe GoLive 5.0 Handbuch.

ADOBE GOLIVE 5.0 Classroom in a Book

Fragen 1

Was ist eine verwaiste Datei und wie kann sie repariert werden?

2

Wie erzeugen Sie einen neuen Ordner und wie bewegen Sie Dateien in ihn? Was passiert, nachdem Sie die Dateien hineinbewegt haben?

3

Wie können Sie in der Navigationsansicht zwischen dem grafischen Layout und dem Gliederungs-Layout wechseln?

4

Welche sind die beiden Methoden, mit denen eine Datei aus einem Ordner außerhalb Ihrer Website Ihrer Website zugefügt werden kann?

5

Wie erzeugen Sie ein neues Seiten-Symbol unter einem vorhandenen SeitenSymbol in der Navigationsansicht?

6

Wie erzeugen Sie mit Hilfe der Navigationsansicht eine Verknüpfung von einem Text einer übergeordneten Seite auf eine untergeordnete Seite?

Antworten 1

Eine verwaiste Datei ist eine Datei, die in Ihrer Website referenziert wird, aber sich entweder nicht im referenzierten Ordner befindet oder in den SitePapierkorb bewegt wurde. Sie reparieren die Datei, indem Sie sie entweder zurück in den referenzierten Ordner bewegen oder alle Referenzen auf sie ändern oder die Datei aus dem Site-Papierkorb zurück in Ihre Website ziehen.

2

Sie verwenden die Schaltfläche »Neuer Ordner«, um einen neuen Ordner zu erzeugen. Sie können Dateien hinzufügen, indem Sie sie entweder in den Ordner ziehen (falls sie sich bereits in Ihrer Website befinden) oder indem Sie den Befehl »Dateien hinzufügen« benutzen (falls sie sich nicht in Ihrer Website befinden). Wenn Sie Dateien, die sich bereits in Ihrem WebsiteOrdner befinden, in den neuen Ordner bewegen, aktualisiert Adobe GoLive dynamisch die Verknüpfungen dieser Dateien.

3

Wählen Sie Fenster: Ansicht und wählen Sie in der Registerkarte »Anzeige« entweder »Grafisch« oder »Gliederung« aus.

495

496 LEKTION 13 Verwalten von Websites

4

Sie können Ihrer Website eine Datei von außerhalb hinzufügen, indem Sie entweder den Befehl »Dateien hinzufügen« verwenden oder die Datei aus Ihrem Ordner außerhalb der Website in die Registerkarte »Dateien« im Website-Fenster ziehen.

5

Dazu wählen Sie das vorhandene Seitensymbol aus und klicken in der SiteWerkzeugleiste auf die Schaltfläche »Neue untergeordnete Seite«.

6

Öffnen Sie die übergeordnete Seite, wählen Sie den Text aus, halten Sie die AltTaste (Windows) bzw. Befehlstaste (Mac OS) gedrückt und ziehen Sie vom Text auf untergeordnete Seitensymbol in der Navigationsansicht.

ADOBE GOLIVE 5.0 497 Classroom in a Book

Index (Empty Reference!), Warnung 103 A

Absoluter Pfad 178 Abspielen-Schaltfläche 277 Adobe Premiere 435 Adobe Software. Siehe einzelne Produkte Aktion 286, 306 automatisches Anpassen eines Browserfensters 310 Browser-Weiche 306 einer Animation zuweisen 287 einer Rollover-Schaltfläche hinzufügen 253 einer Verknüpfung hinzufügen 184 Frame erzwingen 226 Head-Abschnittsaktion 306, 317 hinzufügen zu Bildern 319 zu Schweberahmen 311 zu Text-Link 323 zu Textverknüpfung 323 Netscape Fehlerbeheb CSS 272, 308 neues Fenster 185 OnCall 306, 317 OnLoad 273 Szene abspielen 295 zum Ein- und Ausblenden von Rahmen hinzufügen 250 Aktionenpalette 185 Aktion-Inspektor 272, 289 Aktionsspur, im ZeitachsenEditor 289

Animation abspielen 277 Aktion zuweisen 287 beheben von Darstellungsfehlern 272 Geschwindigkeit steuern 277 hinzufügen von Aktionen 311 Keyframe 273 Pfad, bearbeiten 278 Rahmen 271, 280 Schleife 277 Schweberahmen 271, 280, 311 Szene hinzufügen 292 Übergangseffekt 289 Zeitspur 274 Anker erzeugen 171 platzieren 171 überprüfen 174 Anker-Inspektor 173 Arbeitsbereich 28 Aufzählungspunkte-Schaltfläche 61 Ausrichten und Verteilen von Objekten 107 Ausrichtenpalette 107 Auswahl löschen-Schaltfläche 487 Autoplay-Schaltfläche 295 B

Bearbeiten Hotspot 192 Text 81–83 Bild hinzufügen 102 Imagemap 187 Vorschau im Datei-Inspek-

tor 110 Bild-Inspektor 168 Bildspur-Inspektor 440 Browser automatisches Anpassen eines Fensters 310 Plug-In 42 Browser-Weiche, Aktion erzeugen 306 C

Cascading Style Sheets siehe CSS 379 CSS 379 .css-Dateinamenerweiterung 398 absolute und relative Schriftgröße 391 aktualisieren 390 ändern und vergleichen von Style Sheets 411 bearbeiten 392 Cascading Style Sheets 379 Cascading 401 duplizieren eines Styles 405 ein- und ausschalten 383 Element-Selektor 386 erzeugen 396 Erzeugen eines Klassen-Selektors 402 externesStyle Sheet 382, 389 gebräuchliche HTML-Elemente verwenden 396 Gewicht 401 Hintergrundfarbe 407 hinzufügen eines neuen Styles 394 ID-Selektor 387 importieren 404 internes Style Sheet, erkunden 382

498 Index

Klassen-Selektor 387, 402 mit Dokument verknüpfen 398 sichern 398 Style-Sheet-Selektoren 386 verknüpfen und entfernen mit mehreren Seiten 401 Vorschau 409 CSS-Selektor-Inspektor 381 Registerkarte Schrift 397 D

Dateiformat AIFF 434 MP3 434 SWF 13 WAV 434 Datei-Inspektor 110, 455 Datei-Referenz 489 DHTML-Zeitachsen-Editor öffnen-Schaltfläche 273 Dialogfeld Website aufräumen 491 Dokumentfenster 30 Registerkarte »Layout« 30 »Quellcode« 31 Duplizieren-Schaltfläche 406 Dynamische Komponente bearbeiten 129 E

E-Mail-Verknüpfung 181 Externes Style Sheet entfernen 401 importieren 404 mit mehreren Seiten verknüpfen 401 verknüpfen 398 F

Farben-Palette mit Text 56 selbst definiert 117 aktualisieren 122 verwenden 37

Farbwahl-Schaltfläche 192 Fenstergröße, Voreinstellung setzen 55 Fett-Schaltfläche 59 Filter-Spur 436 Flash-(SWF)-Dateiformat. Siehe SWF-Format und Dateien Formular anpassen von Spalten 356 eigene Elemente 353 einfügen von Tabellen 34 Formularfeldbezeichnung 343 hinzufügen einer Abschicken-Schaltfläche 366 hinzufügen einer Zurücksetzen-Schaltfläche 366 hinzufügen eines Bildes 356 hinzufügen eines HotspotBereichs 364 hinzufügen eines PopupMenüs 350 hinzufügen von Adressfeldern 345 hinzufügen von Auswahlfeldern 358 hinzufügen von Feldern 343–347 hinzufügen von NamenFeldern 343 Listenfeld ändern 361 mit Tabellen erzeugen 341 Rand 367 Rand und Zelle 352 Tabulatorfolge 368 Formular-Bild-Inspektor 365 Formular-Listenfeld-Inspektor 361 Formular-Optionsfeld-Inspektor 359 Formular-Schaltfläche-Inspektor 366 Formular-Textfeld-Inspektor 369 Frame Bildlaufleiste hinzufügen 217

einzelnen hinzufügen 211 erzwingen Aktion 226 Größe einstellen 216 Inhalt hinzufügen 219–222 Rollbalken hinzufügen 217 skalierbar 217 verwenden 130 Vorschau-Schaltfläche 220 Frame-Inspektor 214 Frameset 206 ändern 212 ändern der Randeinstellungen 213 erzeugen 210 Format Vertikal, Option 214 Frame hinzufügen 217 Frame löschen 217 Laden erzwingen 226 löschen 212 verknüpfen mit 225 verwenden der Option Parent 224 Ziel-Verknüpfung innerhalb 223 Frameset-Inspektor 212 G

Grafik als Verknüpfung 166 bearbeiten 142 hinzufügen 102 H

Homepage entwerfen 110 Hintergrundbild 110 Hotspot bearbeiten 192 erzeugen 189 überprüfen 195 Verknüpfung 193 HTML Anweisung 379 Erklärung 379 Selektor 379

ADOBE GOLIVE 5.0 499 Classroom in a Book

HTML-Outline-Editor 85 HTML-Quelltext-Editor 84 Hyperlink ändern 489 reparieren 464 Hypertext-Verknüpfung erzeugen 174 reparieren 464 I

Illustrator, mit Adobe GoLive verwenden 150 Im Browser anzeigen-Schaltfläche 174 Imagemap erzeugen 187 erzeugen von Hotspots 189 Hotspot-Farbe 192 überprüfen 195 Innenabstand 66 Inspektor Aktion 272, 289 Anker 173 Bild 168 Bildspur 440 CSS-Selektor 381 Datei 110, 455 Externes-Stylesheet 411 Formular-Bild 365 Formular-Listenfeld 361 Formular-Optionsfeld 359 Formular-Schaltfläche 366 Formular-Textfeld 369 Frame 214 Frameset 212 Im Browser anzeigen 174 Komponente 112 Layout-Raster 117 Ordner 468 Rahmen 125, 240, 265 Rahmeninspektor 311 Referenzen 181 Rollover 242 Sample mit einfachem Quellfilter 439 Schaltfläche »Point & Shoot« 37 Schlüsselwörter 39

Seite 56, 100, 182 Spur mit einfachem Quellfilter 437 Spur mit zweifachem Quellfilter 442, 443 Tabelle 65, 342 Text 173 verwenden 36 Videospur 432 Installieren Classroom in a BookSchriften 15 Lektionsdateien 15 internes Style Sheet exportieren 388 J

JavaScript Seitenelemente zuweisen 325 K

Keyframe 273 bearbeiten 277 hinzufügen 276 mehrere auswählen 279 Komponente 99 erzeugen 99 hinzufügen 111 Komponenten-Inspektor 112 Komposition exportieren (LiveMotion) 429 Kontextmenü verwenden 40 Kursiv-Schaltfläche 59 L

Layout-Ansichtpalette Stamm-CSS auswählen 383 Layout-Raster hinzufügen 101 Layout-Raster-Inspektor 117 Layout-Textrahmen 112 Link erzeugen eines leeren Links 313 Fehlersuche 196 hinzufügen von Aktionen

zu Textverknüpfungen 323 reparieren fehlender Dateien mit LinkAnsicht-Palette 462 unterbrochen 196 Voreinstellung für Warnung 196 Link entfernen-Schaltfläche 175 Linkansicht 474 Link-Ansicht-Palette 456 Linksbündig-Schaltfläche 72 Link-Warnungen-Schaltfläche 465 Listeneintrag einrückenSchaltfläche 62 LiveMotion hinzufügen von SWFDateien 153 Komposition exportieren 429 mit Adobe GoLive verwenden 153, 422 Smart Object 153 Verhalten-Bezeichnungen 423 Zeitachsenfenster 423 zeitunabhängige Gruppe 423 Loop-Schaltfläche 277 Lose Seiten 27 M

Maus-Rollover 235 einer Seite hinzufügen 242 hinzufügen einer Aktion 253 mit Seiten verknüpfen 253 Rahmen-Inspektor 240 schwebender Rahmen 239 Status erzeugen 242 Menü Absatzformat 58 Aktion 185 Animation 279 Ausführen 273 Fenstergröße 55

500 Index

FPS (Frames [Bilder] pro Sekunde) 277 Kontext 40 Optionen 292 Schriftgröße 73 Spaltentrennzeichen 69 Stamm-CSS 386 Umrahmung 196

Referenz ändern 489 Ordner Vorlagen459

QuickTime-Film abspielen in Adobe GoLive 421 auf eine Ebene reduzieren 431 Bearbeitungswerkzeuge 430 Film-Bezeichnung 424 neuen Film erzeugen 430 Spezialeffekt 436 SWF-Spur einfügen 430 Ton hinzufügen 434 Videospur einfügen 432 Vorschau 444

Rahmen, schwebender hinzufügen von Bildern 246 Maus-Rollover 239 Rahmen-Inspektor 125, 240, 265 Randgröße, Frameset 213 Referenzen-Inspektor 181 Registerkarte Layout 30 Quellcode 31 Website, Objekte-Palette 179 Extras, Site-Fenster 458 Fehler, Site-Fenster 460 Frame-Editor 210 Frames, Objekte-Palette 210 FTP, Site-Fenster 459 relativer Pfad 178 Rollover Effekt 235 einer Seite hinzufügen 242 hinzufügen einer Aktion 253 mit Seiten verknüpfen 253 Rahmen-Inspektor 240 schwebender Rahmen 239 Status erzeugen 242 Verhalten hinzufügen (LiveMotion) 426 Rollover-Inspektor 242

O

R

S

Objekte, ausrichten und verteilen 107 Objekte-Palette Registerkarte Benutzerdefiniert (Mac OS) 353 Eigene (Windows) 353 Frames 210 Smart 142 Website 179 verwenden 34 Online-Hilfe, verwenden 43 Option Innenabstand 66

Rahmen Aktion hinzufügen 250 animieren 271 Bilder hinzufügen 126–129, 246, 268 ein- und ausblenden 250 hinzufügen 124 mehrere animieren 280 sichtbar 288 sperren 281 stapeln 267 Stapelreihenfolge 270 ändern 285 verwenden 123

Sample mit einfachem Quellfilter-Inspektor 439 Schaltfläche Abspielen 277 Aufzählungspunkte 61 Auswahl löschen 487 Autoplay 295 DHTML-Zeitachsen-Editor öffnen 273 Duplizieren 406 Farbwahl 192 Fensterauswahl 33 Fett 32, 59 Frame-Vorschau 220 Im Browser anzeigen 43,

N

Navigationsansicht 26, 474 neue Dateien verschieben 488 neue Seiten verknüpfen 488 Registerkarte Anzeige 477 Seiten einfügen 482 Seiten erzeugen 486 zwischen Seiten verknüpfen 483 Netscape Fehlerbeheb CSS-Aktion mit animiertem Schweberahmen 308 Neue Aktion-Schaltfläche 251 Neue untergeordnete SeiteSchaltfläche 486 Neuer Element-SelectorSchaltfläche 394 Neuer Link-Schaltfläche 168 Neuer Ordner-Schaltfläche 467 Nummerierte Liste-Schaltfläche 60

P

Palette auf Titelleiste reduzieren 34 ausblenden 24 Link-Ansicht 456 Site-Fenster 23 verwenden 33 zurücksetzen 33 Pfad, absolut und relativ 178 Photoshop, mit Adobe GoLive verwenden 142 Q

ADOBE GOLIVE 5.0 501 Classroom in a Book

174 Kursiv 59 Link entfernen 175 Linksbündig 72 Link-Warnungen 465 Listeneintrag einrücken 62 Loop (Schleife) 277 Navigationsansicht 26 Neue Aktion 251 Neue untergeordnete Seite 486 Neuer Element-Selector 394 Neuer Link 168 Neuer Ordner 467 Nummerierte Liste 60 Objekte in Website finden 33 Palindrom 277 Schleife (Loop) 277 Stop 277 Verhalten bearbeiten (LiveMotion) 424, 427 Vertikal oben ausrichten 108 Vertikal zentriert ausrichten 131 Web-Farbenliste 38 Zeile hinzu 70 Zentriert 32 Schleife-Schaltfläche 277 Schlüsselwörter hinzufügen 38 Schriften fehlende dem System hinzufügen 15 hinzufügen 78 installieren 15 Schriftgröße, absolute und relative Größe 391 Schriftsammlungs-Editor 78 schwebender Rahmen hinzufügen von Bildern 246 und Maus-Rollover 239 Schweberahmen animieren 271, 311 hinzufügen von Bildern 268 mehrere animieren 280 sichtbar 288

sperren 281 stapeln 267 Stapelreihenfolge 270 Stapelreihenfolge ändern 285 zuweisen von Aktionen 311 Seite entwerfen Entwurf aktualisieren 120 Hintergrundfarbe ändern 56 Hinzufügen von Bildern 102 Komponente, erzeugen 99 Layout-Raster 101 Rahmen 123 Text hinzufügen 56 Titel ändern 55 Vorschau 83, 132 Seite-Inspektor 100 Selektor Element-basiert 386 ID-Selektor 387 Klassen-Selektor, 387 Site fehlende Datei reparieren 462 Datei hinzufügen 97–99 erzeugen 96 Homepage 452 importieren 452 Linkansicht 474 mit Befehl Website aufräumen aktualisieren 491 Navigationsansicht 474 neue Seiten hinzufügen 471 öffnen 24 Ordner erzeugen 467 hinzufügen 98 umbenennen 470 verschieben 469 verwalten 467 Reparatur von Fehlern 460 Site-Ordnerinhalt 97 Verknüpfungen 475 verwaiste Datei 460 Site-Ansicht-Fenster

Option Gliederung 479 Option Grafisch 477 Site-Fenster 23 erkunden 457 erweitert 457 Inhalt mit »Drag & Drop« bewegen 97 Ordner Designs 458 Ordner Komponenten 458 Ordner Vorlagen 458, 459 Paletten 23 Registerkarte »Navigation« 26 Registerkarte Extern 177, 181 Registerkarte Extras 167, 458 Registerkarte Fehler 460 Registerkarte FTP 459 Titelzeile Name 470 Website-Papierkorb 458 zweites 26 Site-Navigator 481 Smart Illustrator Object platzieren 150 Smart LiveMotion Object platzieren 154 Smart Object 142 Illustrator 150 LiveMotion 153 Photoshop 142 unterstützte Formate 142 Smart Photoshop Object bearbeiten 148 Farben ersetzen 148 Größe ändern 146 platzieren 143 verwenden von Slice-Bildern 143 Spur mit einfachem Quellfilter-Inspektor 437 Spur mit zweifachem Quellfilter-Inspektor 442, 443 Stop-Schaltfläche 277 Style-Sheet erzeugen 396 internen exportieren 388 Style-Sheet-Fenster 386

502 Index

Style-Sheet-Werkzeugleiste 381 Suchen und Ersetzen 82–83 SWF-Format und Dateien (LiveMotion) 153 exportieren 153, 429 importieren 431 Szene 292 Aktion zum Abspielen verwenden 295 mehrere erzeugen 292 neue erzeugen 292

mehrere Spuren 281 Ton, zu Filmen hinzufügen 434 U

Übergangseffekt hinzufügen 289 Wipe 289 unterbrochene Verknüpfung 196 unterbrochener Link 196 URL, verknüpfen mit 177 URL-Verwaltung Voreinstellungen 178

T

Tabelle Ausrichtung 348 Daten hinzufügen 67–69 formatieren 70–76 Spaltenüberschrift formatieren 73 Stil erfassen 80 Text importieren 68 Titelzeile hinzufügen 72 Zeilen hinzufügen 70 Zellenfarbe ändern 74 Tabellen-Inspektor 342 Horizontale Ausrichtung 348 Vertikale Ausrichtung 348 Text »Drag & Drop« 57 bearbeiten 81–83 Farbe ändern 37, 63, 117 formatieren 58 hinzufügen 57 hinzufügen mit Hilfe von Tabellen 115 Kopieren und ersetzen 57 Layout-Textrahmen 57, 112 Listen 60–62 Rahmen 57 Stile 58 Tabelle hinzufügen 64–67 Zeilenumbruch 62 Textfeld Ersatztext 170 Text-Inspektor 173 TimeLine-Editor

V

Verhalten in LiveMotion hinzufügen 426 LiveMotion 423 Verhalten bearbeiten-Schaltfläche (Live Motion) 424, 427 Verknüpfung absolute und relative Pfadnamen 176 Aktion hinzufügen 184 E-Mail 181 erzeugen einer leerenVerknüpfung 313 Farbe 182 Fehlersuche 196 Hervorhebung 182 hinzufügen von Aktionen zu Textverknüpfungen 323 Hypertext 174 Imagemap 187, 193 in Komponenten 167 mit einem Frameset 225 mit externen URLs 177 mit Hilfe der DurchsuchenSchaltfläche erzeugen 176 mit Hilfe von »Point & Shoot« erzeugen 168 Option Parent 224 reparieren fehlender Dateien mit Link-Ansicht-Palette 462

unterbrochen 196 verwenden mit Grafiken 166 Voreinstellung für Warnung 196 Verknüpfungen 163 Verknüpfungspfad, absolut und relativ 178 Vertikal oben ausrichtenSchaltfläche 108 Vertikal zentriert ausrichtenSchaltfläche 131 verwaiste Datei, Site 460 Videospur-Inspektor 432 Voreinstellungen Andere Anwendungen zur Bearbeitung von Mediendateien starten 152 Module 40 URL-Verwaltung 178 Vorschaumodus 40 Vorlage hinzufügen 132 verwenden 132 Vorschau mit Hilfe eines Web-Browsers 42 mit Hilfe von Adobe GoLive 40 Web-Seite 83 W

Warnung (Empty Reference!) 103 Webbrowser Plug-In 42 Webseite. Siehe Seite Website. Siehe Site Website aufräumen, Dialogfeld 491 Website-Ansicht-Fenster Option Gliederung 479 Option Grafisch 477 Website-Navigator 481 Website-Papierkorb, Erläuterung 459 Werkzeugleiste 31 ein- und ausblenden 32

ADOBE GOLIVE 5.0 503 Classroom in a Book

Z

Zeile hinzu-Schaltfläche 70 Zeilenumbruch im Text 62 Zeitachsen-Editor Aktionsspur 289 Menü Optionen 292 Möglichkeiten 274 Zeitspur 274 Zeitspur, im Zeitachsen-Editor 274