Slices und Rollover für die Startseite einer Bildergalerie

Transkript

1 Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei ist Übersichtlichkeit und bequeme Navigation für die Anwender oberstes Gebot. Eine sehr gute und optisch attraktive Möglichkeit ist es, Rollovereffekte in Dreamweaver zu verwenden. Bei einem Rollover wird durch Mauskontakt ein Bild durch ein anderes ausgetauscht. Gleichzeitig kann ein Hyperlink geklickt werden. Da ggf. auf mehrere Inhalte hingewiesen wird und eine Eingangsgrafik das Bild der Webseite gestalten kann, können mehrere Rollovereffekte in ein und dasselbe Bild eingearbeitet werden. Hierzu ist es notwendig, eine Grafik in Slices aufzuteilen. Diese Slices sind unsichtbare Teilgrafiken, die im Bildschirm wie ein einziges Bild aussehen. Erst nach Mausberührung beginnt sich die Grafik in einzelne Teile aufzuspalten und unter jedem Teilbild der Grafik können Rolloverbilder oder Informationsgrafiken erscheinen, die dann zu einem weiteren Thema leiten. Um so eine Seite z. B. für eine Bildergalerie zu erstellen, müssen zuerst die große Grafik optimiert und in Slices eingeteilt werden. Danach müssen zusätzlich Grafiken in genau der Größe der Slices erstellt werden, um anschließend in Dreamweaver Rollovereffekte zu erzeugen. 1. Ein Bild in der Größe optimieren z. B. mit Photoshop Das Ausgangsbild, das insgesamt bei Start der Webseite sichtbar wird, muss vor dem Einfügen in die Webseite hinsichtlich der Abmessungen und der Dateigröße für das Internet und die damit verbundenen Ladezeiten optimiert werden. Sie starten Photoshop und öffnen das Bild, das später insgesamt auf der Webseite sichtbar werden soll. Das Bild ist vielleicht ein Foto von hoher Qualität und ist 2272 x 1704 Pixel groß. Photoshop zeigt die Bildgröße mit dem Befehl Bild > Bildgröße. In diesem Dialogfeld kann jetzt die Bildgröße geändert werden. Wichtig ist das Kontrollkästchen Proportionen erhalten, wenn das Bild in der Breite und Höhe erhalten bleiben soll.

2 Sie aktivieren das Kontrollkästchen Proportionen erhalten und geben als Bildbreite die gewünschte Breite für die Webseite ein. Im Beispiel sind dies 400 Pixel. Sie bestätigen mit OK, das Bild ist fertig. 2. Für das Web speichern Sie wählen danach den Befehl Datei > Für Web speichern. Sie erhalten hier eine Vorschau von bis zu vier Vergleichsbildern.

3 Links oben ist das Original, in den weiteren drei Bildern können Sie die Grafikeinstellungen steuern, um so die beste Optimierung zu erreichen. Hierfür markieren Sie ein Bild und wählen z. B. das Bild links unten. Danach können Sie im rechten Bereich des Dialogfeldes den Dateityp wählen, bei Fotos in der *.jpg. Zusätzlich können Sie die Qualitäten niedrig, mittel oder hoch wählen. Die Entscheidung für das richtige Format ist ein Abwägen aus der sichtbaren Qualität des Bildes und der unter dem ausgewählten Bild angezeigten Dateigröße und Ladezeit der Datei bei einer bestimmten Geschwindigkeit im Netz. Heute (2002) können wir von einer Ladegeschwindigkeit von 56,6 Kbs ausgehen. Sie können die Ladezeit verändern, wenn Sie mit der rechten Maustaste auf das Vorschaubild klicken und eine andere Ladezeit auswählen. Sind Sie mit dem Optimierungsergebnis zufrieden, bestätigen sie das markierte Bild mit OK und wählen den Speicherort und den Dateinamen. (Falls Sie bereits eine Website bearbeiten, wählen Sie am besten den Ordner Images, ansonsten einen anderen Ordner Ihrer Wahl.) Sie schließen Photoshop. 3. Slices mit Image Ready erstellen Sie schließen das aktuelle Bild in Photoshop und öffnen das optimierte Bild. 1. Sie blenden die Lineale ein (Ansicht > Lineale einblenden) 2. In den Linealen sehen Sie die Pixelmaße ihres Bildes. 3. Sie ziehen aus den Linealen Hilfslinien, mit denen Sie das Bild in mehrere Rechtecke einteilen können. Diese Rechtecke werden nachher Einzelbilder für den Rollovereffekt. 4. Sie wählen: Slices > Slices entlang der Hilfslinien erstellen Anschließend sehen Sie auf dem Bild vier Ziffern für die entstandenen vier Bildteile.

4 4. Die vier Bildslices speichern Sie wählen Datei > optimierte Version speichern unter Sie wählen einen Ordner, in den Sie die Bilder speichern. Sie wählen eine Speicheroption. Image Ready speichert HTML und Bilder das ist praktisch, weil man die Internetdatei nicht mehr selbst erstellen muss. Nur Bilder wenn man die HTML-Datei selbst erstellt. Nur HTML- wenn man die Bilder schon hat und eine Tabelle für das Einsetzen der Bilder braucht. Im Beispiel wählen wir HTML und Bilder. So kann man auch das Bild zusammengesetzt rasch ansehen und ggf. die Bildnamen oder die Reihenfolge der Nummern feststellen. Sie öffnen die HTML-Datei aus dem Ordner mit Doppelklick und sehen im Internetexplorer die einheitliche Bilddatei. Wählen Sie Ansicht > Quelltext. Im HTML-Quelltext wird deutlich, dass das Bild aus vier Teilen zusammengesetzt ist und dennoch genau wie ein einheitliches Bild erscheint. Auch wenn Sie noch kein HTML können: Table heißt: Es wird eine Tabelle erstellt. TR heißt: TD heißt: Eine Tabellenzeile Eine Tabellenzelle IMG SRC heißt: Ein Bild wird eingefügt. Dahinter steht der Name des Bildes, das eingefügt wird. Sie können diesen Text vier mal im Text finden, dahinter steht jeweils der gleiche Bildname mit einer Nummer. Das sind die Grafiken, die wir mit den Slices erzeugt haben.

5 <TABLE WIDTH=400 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <IMG SRC="images/Beispielbild-für-Rolloverf_.jpg" WIDTH=200 <IMG SRC="images/Beispielbild-für-Rollove-02.jpg" WIDTH=200 </TR> <TR> <IMG SRC="images/Beispielbild-für-Rollove-03.jpg" WIDTH=200 <IMG SRC="images/Beispielbild-für-Rollove-04.jpg" WIDTH=200 </TR> </TABLE> Gleichzeitig hatte Image Ready einen Ordner Images erstellt. In diesem Ordner sind die vier Bildteile gespeichert. Dadurch, dass die Tabelle keine Rahmenlinien und Zell- und Textabstände hat, liegen die Bildteile nahtlos aneinander. 5. Bilder für den Rollovereffekt erstellen Für den Rollovereffekt, den wir anstreben, müssen Bilder erstellt und optimiert werden, die exakt so groß sind wie eines der gerade erstellten Slices. Wir machen es uns einfach. Das Erstellen vieler Wechselbilder ist schon sehr zeitaufwändig. Wir werden einfach unser Bild in Graustufen erstellen, noch einmal die Slices und danach die Rollovereffekte mit Dreamweaver erstellen. Wir öffnen in Fotoshop das Originalbild ohne Slices. Wir wählen anschließend Wir wählen Bild > Modus > Graustufen Bild > Modus > RGB-Farben Speichern unter > den bekannten Ordner

6 und geben den Dateinamen: Bild in Graustufen. Das Graustufenbild ist im bekannten Ordner gespeichert. Wir schließen Photoshop und öffnen das Graustufenbild in Image Ready. Dort wiederholen Sie die Schritte 3 und 4. Anschließend haben wir im Ordner Images 8 Teilbilder oder Slices. Vier stammen von unserem Originalbild, vier stammen vom Graustufenbild. 6. Mit Dreamweaver eine Tabelle für die Rollovergrafiken erstellen. In Dreamweaver wählen Sie die Website, in der Sie die Rollovergrafik einbauen wollen. Wenn Sie noch keine Website haben oder eine Seite für eine ferne Website erstellen wollen, wählen Sie Datei > öffnen. Sie durchsuchen nach dem Ordner, in dem Sie die HTML-Datei aus Image Ready gespeichert haben. Sie markieren diese Datei und wählen Öffnen. Danach sehen Sie in Dreamweaver das Bild. Wenn Sie auf eines der Bildteile klicken, sehen Sie die Grafik in einer Tabelle. Für die Rollovereffekte löschen Sie die Grafik in der linken oberen Ecke der Tabelle. Der Cursor blinkt in der leeren Zelle. Sie wählen: Rollover-Effekte- Einfügen Sie wählen das Graustufenbild, das in die linke Ecke gehört aus dem Ordner Images und als Rolloverbild das Farbbild, das Sie gerade gelöscht haben, aus dem Ordner Images.

7 Dies wiederholen Sie für jedes der Teilbilder. 1. Teilbild löschen, 2. Rollover-Bild einfügen anklicken, 3. Originalbild auswählen, 4. Rollover-Bild auswählen, 5. Mit OK bestätigen. a. Die Tabelle selbst erstellen Die HTML-Tabelle kann auch selbst erstellt werden. Es wird eine Tabelle gebraucht, die genau der Breite des ursprünglichen Bildes entspricht. Die Tabelle enthält so viele Zellen wie Slices. Alle anderen Optionen der Tabelle müssen auf 0 gesetzt werden, also Cellspacing, Cellpadding und Border. Wenn diese Attribute genutzt werden sollen, können durch Abstände zwischen den Rolloverbildern reizvolle grafische Effekte erzielt werden. 7. Schritt Wenn Sie fertig sind, Speichern Sie die Datei. Sie tippen auf F12 oder wählen Hier müsste das Rolloverbild funktionieren. 8. Weiteres Datei > Vorschau in Browser Sie können jetzt jedes der Rolloverbilder mit einem Hyperlink auf eine weitere HTML-Datei in Ihrer Website versehen. Damit können Sie sehr schöne Verweise auf wichtige Inhalte in Ihrer Website erstellen.