Grundbegriffe

Einführung in das Erstellen von Webseiten

Beachten Sie beim Erstellen von Webseiten mit Adobe Photoshop und Adobe ImageReady die in jeder Anwendung verfügbaren Werkzeuge und Funktionen.

·  Photoshop bietet Werkzeuge zum Erstellen und Bearbeiten von statischen Bildern für das Web. Sie können ein Bild in Slices unterteilen, Links und HTML-Text hinzufügen, Slices optimieren und das Bild als Webseite speichern.

·  Viele Bildbearbeitungswerkzeuge aus Photoshop sind auch in ImageReady verfügbar. Außerdem enthält das Programm Werkzeuge und Paletten für erweiterte Web-Verarbeitung und das Erstellen von dynamischen Web-Bildern wie Animationen und Rollovers.

Erstellen und Anzeigen von Slices

Ein Slice ist ein rechteckiger Bereich eines Bildes, den Sie zum Erstellen von Links, Rollovers und Animationen auf der resultierenden Webseite verwenden können. Durch Unterteilen eines Bildes in Slices können Sie es für die Web-Anzeige selektiv optimieren.

Auswählen und Ändern von Slices

Sie können Benutzer-Slices verschieben, duplizieren, kombinieren, unterteilen, skalieren, löschen, anordnen, ausrichten und verteilen. Zum Ändern von ebenenbasierten Slices und Auto-Slices sind weniger Optionen verfügbar. Beide Slice-Typen können jedoch jederzeit in Benutzer-Slices umgewandelt werden.

In Photoshop können Slices nicht unterteilt, kombiniert, ausgerichtet oder verteilt werden. Springen Sie zu ImageReady, um auf diese Slice-Bearbeitungsfunktionen zuzugreifen.

Festlegen von Slice-Optionen

Durch Festlegen von Slice-Optionen können Sie angeben, wie die Slice-Daten im Web-Browser angezeigt werden. Die verfügbaren Optionen variieren je nach gewählter Anwendung und Slice-Art. Sie können nur für jeweils ein Slice-Optionen festlegen.

Erstellen und Anzeigen von Imagemaps

Imagemaps ermöglichen die Verknüpfung eines Bildbereichs mit einer URL. Sie können in einem Bild mehrere verbundene Bereiche, sog. Imagemaps, mit Verknüpfungen zu Textdateien, anderen Bildern, Audio-, Video- oder Multimedia-Dateien, anderen Seiten auf der Website oder anderen Websites einrichten. Außerdem können Sie in Imagemap-Bereichen Rollover-Effekte erstellen.

Der Hauptunterschied bei der Verwendung von Imagemaps und Slices zum Erstellen von Links liegt in der Methode, mit der das Quellbild als Webseite exportiert wird. Mit Imagemaps bleibt das exportierte Bild als einzelne Datei intakt, während es mit Slices als separate Datei exportiert wird. Ein weiterer Unterschied besteht darin, daß mit Imagemaps kreisförmige, polygonale oder rechteckige Bildbereiche verbunden werden können, mit Slices aber nur rechteckige Bereiche. Wenn Sie nur rechteckige Bereiche verbinden müssen, sind Slices möglicherweise besser geeignet als Imagemaps.

Hinweis: Um unerwartete Ergebnisse zu vermeiden, sollten Sie in Slices mit URL-Verknüpfungen keine Imagemap-Bereiche erstellen, da die Imagemap- oder Slice-Verknüpfungen ggf. in einigen Browsern ignoriert werden.

Festlegen von Imagemap-Optionen

Sie können auf der Imagemap-Palette einen Namen, eine URL, einen Ziel-Frame und Alt-Text für einen Imagemap-Bereich festlegen.

So ändern Sie den Namen eines Imagemap-Bereichs

1 Wählen Sie einen Imagemap-Bereich aus.

2 Geben Sie auf der Imagemap-Palette im Textfeld "Name" einen neuen Namen ein.

So legen Sie Verknüpfungsoptionen für einen Imagemap-Bereich fest

1 Wählen Sie einen Imagemap-Bereich aus.

2 Geben Sie auf der Imagemap-Palette eine URL für die Verknüpfung ein, oder wählen Sie unter "URL" eine zuvor erstellte URL. Sie können eine relative oder vollständige URL eingeben. Schließen Sie bei einer vollständigen URL unbedingt die Zeichenfolge "http://" ein (z. B. "http://www.adobe.com" anstatt "www.adobe.com").

3 Geben Sie auf der Imagemap-Palette unter "Ziel" den Namen eines Ziel-Frames ein, oder wählen Sie aus dem Popup-Menü eine Option. Ein Frame-Name muß mit einem Frame übereinstimmen, der zuvor in der HTML-Datei für das Dokument definiert wurde. Wenn ein Benutzer auf die Verknüpfung klickt, wird die angegebene Datei im neuen Frame angezeigt:

 "_blank", um die verknüpfte Datei in einem neuen Fenster anzuzeigen. Das Original-Browser-Fenster bleibt offen.

 "_self", um die verknüpfte Datei in demselben Frame wie die Originaldatei anzuzeigen

 "_parent", um die verknüpfte Datei im ihrem übergeordneten Original-Frame-Set anzuzeigen. Wählen Sie diese Option, wenn das HTML-Dokument Frames enthält und der aktuelle Frame untergeordnet ist. Die verknüpfte Datei wird im aktuellen übergeordneten Frame angezeigt.

 "_top", um das gesamte Browser-Fenster durch die verknüpfte Datei zu ersetzen und alle aktuellen Frames zu entfernen

 Hinweis: Weitere Informationen zu Frames finden Sie in einer HTML-Referenz (gedruckt oder im Internet).

4 Geben Sie auf der Imagemap-Palette unter "Alt" Text für einen Alt-Tag ein. Der Alt-Text wird in nicht-grafischen Browsern anstatt des Imagemap-Bereichs angezeigt. In den meisten Browsern wird er auch angezeigt, wenn der Benutzer den Zeiger über dem Imagemap-Bereich positioniert.

Auswählen eines Imagemap-Typs

In ImageReadykönnen Client- und Server-seitige Imagemaps erstellt werden. Bei Client-seitigen Imagemaps werden die Verknüpfungen vom Browser selbst interpretiert. Bei Server-seitigen Imagemaps werden die Verknüpfungen vom Server interpretiert. Da Client-seitige Imagemaps ohne Kontakt zum Server funktionieren, kann mit ihnen oft erheblich schneller navigiert werden. Standardmäßig werden Imagemaps in ImageReady als Client-seitige Imagemaps gespeichert.

Wichtig: Server-seitige Imagemaps funktionieren nicht in Bildern mit mehreren Slices.

Wählen Sie im Dialogfeld "Ausgabe-Einstellungen" einen Imagemap-Typ. Wenn Sie eine Server-seitige Imagemap wählen, wird von ImageReady eine separate, auf der gewählten Server-Option basierende Map-Datei erstellt. Sie müssen jedoch in der HTML-Datei den Pfad zu der Map-Datei aktualisieren.

Arbeiten mit Rollovers

Die Rollover-Palette dient in Verbindung mit der Ebenen-Palette zum Hinzufügen von Rollover-Effekten zu einer Webseite. Sie können eine Animation als Rollover-Status anzeigen oder sekundäre Rollovers erstellen, in denen durch Bewegen des Mauszeigers über einen Bereich ein Bild in einem anderen Bereich geändert wird. In ImageReady wird der resultierenden HTML-Datei JavaScript-Code zum Definieren der Rollover-Status hinzugefügt.

Hinweis: Beim Arbeiten mit Rollovers ist es wichtig, eine Vorschau von Bildern in einem Web-Browser zu prüfen, damit das Dokument von Web-Benutzern einwandfrei verwendet werden kann. Beachten Sie außerdem, dass die Bildanzeige bei verschiedenen Betriebssystemen variiert.

Erstellen von Web-Fotogalerien

Mit dem Befehl "Web-Fotogalerie" können Sie aus einem Satz von Bildern automatisch eine Web-Fotogalerie erstellen. Eine Web-Fotogalerie ist eine Website, die eine Homepage mit Miniaturbildern sowie Galerieseiten mit Bildern in voller Größe hat. Jede Seite hat Links zum Navigieren durch die Site. Wenn ein Besucher z. B. auf der Homepage auf ein Miniaturbild klickt, wird eine Galerieseite mit dem zugehörigen Bild in voller Größe geladen.

Photoshop bietet für die Galerie eine Vielfalt von Stilen, die Sie mit dem Befehl "Web-Fotogalerie" auswählen können. Wenn Sie mit HTML vertraut sind, können Sie auch einen Stil durch Bearbeiten eines Satzes von HTML-Vorlagendateien oder Erstellen eines neuen Stiles individuell anpassen.

So erstellen Sie eine Web-Fotogalerie

1 Wählen Sie "Datei" > "Automatisieren" > "Web-Fotogalerie".

2 Klicken Sie unter "Dateien" auf "Quelle". Wählen Sie dann den Ordner mit den Bildern aus, die in der Galerie angezeigt werden sollen, und klicken Sie auf "OK". Wählen Sie "Alle Unterverzeichnisse einschließen" aus, um Bilder aus allen Unterordnern des ausgewählten Ordners einzuschließen.

3 Klicken Sie auf "Ziel". Wählen Sie dann den Zielordner aus, der die Bilder und HTML-Seiten für die Galerie enthalten soll, und klicken Sie auf "OK".

4 Wählen Sie unter "Stile" einen Stil für die Galerie. Im Dialogfeld wird eine Vorschau der Homepage für den gewählten Stil angezeigt.

5 Um Optionen für das auf jeder Seite der Galerie angezeigte Banner festzulegen, wählen Sie unter "Optionen" die Option "Banner". Führen Sie dann die folgenden Schritte durch:

·  Geben Sie unter "Name der Site" den Titel der Galerie ein.

·  Geben Sie unter "Fotograf" den Namen der Person oder Organisation ein, die für die Fotos in der Galerie Anerkennung verdient.

·  Geben Sie unter "Datum" das Datum ein, das auf jeder Galerieseite angezeigt werden soll. Standardmäßig wird in Photoshop das aktuelle Datum verwendet.

·  Wählen Sie unter "Schrift" und "Schriftgrad" Optionen für den Bannertext.

 6 Um Optionen für die Galerieseiten festzulegen, wählen Sie unter "Optionen" die Option "Galerie-Bilder". Führen Sie dann die folgenden Schritte aus:

·  Geben Sie unter "Randgröße" die Breite des Bildrandes in Pixeln ein.

·  Demit Photoshop die Quellbilder für die Plazierung auf den Galerieseiten skaliert, wählen Sie "Bilder skalieren" aus. Wählen Sie dann aus dem Popup-Menü eine Option für die Bildgröße, oder geben Sie eine Größe in Pixeln ein. Wählen Sie unter "JPEG-Qualität" eine Option. Sie können auch einen Wert zwischen 0 und 12 eingeben oder den Regler ziehen. Je höher der Wert, desto besser die Bildqualität und desto größer die resultierende Datei.

 7 Um Optionen für die Homepage festzulegen, wählen Sie unter "Optionen" die Option "Galerie-Miniaturen". Führen Sie dann die folgenden Schritte aus:

·  Wählen Sie unter "Bildunterschriften" die Option "Dateiname verwenden" aus, um den Dateinamen unter jeder Miniatur anzuzeigen.

·  Wählen Sie "Datei-Informationen-Objektbeschreibung verwenden" aus, um die Objektbeschreibung aus dem Dialogfeld "Datei-Informationen" unter jeder Miniatur und auf jeder Galerieseite anzuzeigen.

·  Wählen Sie unter "Schrift" und "Schriftgrad" Optionen für den Miniaturtext.

·  Wählen Sie unter "Größe" eine Option für die Miniaturgröße, oder geben Sie für die Breite jeder Miniatur einen Wert in Pixeln ein.

·  Geben Sie unter "Spalten" und "Zeilen" die Anzahl der Spalten und Zeilen zum Anzeigen der Miniaturen auf der Homepage an. Diese Option gilt nicht für Galerien, in denen der horizontale oder vertikale Frame-Stil verwendet wird.

·  Geben Sie unter "Randgröße" die Breite des Randes jeder Miniatur in Pixeln ein. 

8 Um Optionen für Farben von Elementen in der Galerie festzulegen, wählen unter "Optionen" die Option "Eigene Farben". Um die Farbe eines bestimmten Elements zu ändern, klicken Sie auf das entsprechende Farbfeld, und wählen Sie dann mit dem Farbwähler eine neue Farbe aus. Mit der Option "Hintergrund" können Sie die Hintergrundfarbe jeder Seite ändern. Die Hintergrundfarbe des Banners können Sie mit der Option "Banner" ändern.

9 Klicken Sie auf "OK", um die Galerie zu erstellen.

Die folgenden HTML- und JPEG-Dateien werden von Photoshop im Zielordner abgelegt:

·  Eine Homepage für die Galerie mit dem Namen "index.htm". Öffnen Sie diese Datei in einem beliebigen Web-Browser, um eine Vorschau der Galerie anzuzeigen.

·  JPEG-Bilder in einem Bild-Unterordner

·  HTML-Seiten in einem Seiten-Unterordner

·  JPEG-Miniaturbilder in einem Miniatur-Unterordner

Anpassen und Erstellen von Web-Fotogaleriestilen

Photoshop bietet für die Web-Fotogalerie eine Vielzahl von Stilen, die Sie mit dem Befehl "Web-Fotogalerie" auswählen können. Wenn Sie mit HTML vertraut sind, können Sie auch einen Stil durch Bearbeiten eines Satzes von HTML-Vorlagendateien oder Erstellen eines neuen Stiles individuell anpassen.