Eine Bildergalerie Karte Bild in Dreamweaver CS3 erstellen

"Bilderschau" oder "Bildergallerie" präsentiert Fotografien in einer Portfolio-wie-Webseite. Während Bildergalerien viele Konfigurationen haben können, zeigt ein beliebtes Format Miniaturen entlang der Seite, oben oder unten auf der Seite. Wie der Benutzer jedes Miniaturbild klickt, zeigt eine entsprechende Vollbildversion der das Foto in der Mitte der Seite. Dreamweaver CS3 unterstützt verschiedene Möglichkeiten zum Erstellen von Bildergalerien. Eine der Methoden einfacher und häufigeren ist, benutzen ein "Frameset". Ein Frameset ist eine HTML-Webseite-Container, bestehend aus zwei oder mehr "Frames." Jeder Frame zeigt eine einzelne Seite oder URL.

Anweisungen

Fotos vorbereiten

1 Die Größe der Fotos in der Bild-Bearbeitungssoftware. Sie benötigen zwei Versionen jedes Bild---eine Vollbildversion (sagen, 400 x 300 Pixel, oder was auch immer für die Form und die Größe Ihrer Fotos am besten geeignet) und eine Miniaturansicht (sagen wir, 100 von 75 Pixel).

2 Legen Sie die Auflösung für jedes Bild zu "72" Punkte (oder Pixel) pro Inch (oder "96" für hochauflösende Monitore).

3 Speichern Sie jedes Bild in einem Unterverzeichnis des Verzeichnisses, in der Sie Ihre Bild-Galerie-Website erstellen möchten. Nennen Sie das Unterverzeichnis "Bilder." Speichern Sie die Bilder als JPEGs. Nennen Sie sie "Foto1", "foto2," und so weiter; Benennen Sie die entsprechenden Thumbnails "thumb1", "thumb2," etc..

Erstellen Ihre Bildergalerie in Dreamweaver

4 Öffnen Sie Dreamweaver, und klicken Sie auf der Menüleiste auf "Datei". Wählen Sie "Neu" im Dialogfeld Neues Dokument angezeigt.

5 Klicken Sie auf "Page von Sample" in der linken Spalte des Dialogfelds, und klicken Sie "Frameset" in der Spalte "Beispielordner". Dies zeigt eine Liste der Probe Framesets in der dritten Spalte des Dialogfelds. Wählen Sie "Links festgesetzt."

6 Klicken Sie auf "Erstellen". Dreamweaver zeigt das Dialogfeld "Eingabehilfen-Attribute für Frame-Tag". Klicken Sie auf "OK". Die Frames werden gemäß ihrer Platzierung auf der Seite benannt. Im linke Frame ist "LeftFrame" heißt, und Hauptframe "MainFrame."

7 Klicken Sie auf der Menüleiste auf "Datei" und wählen Sie "Save All." Dreamweaver fordert Sie auf, nennen Sie die drei Dateien, eine nach der anderen: zuerst das Frameset selbst---nennen Sie es "Galerie." Sekunde, Hauptframe---nennen Sie es "Foto1." Drittel, der linke Frame---nennen Sie es "Vorschaubilder."

8 Einfügen von "photo1.jpg" im Hauptframe (rechts), und dann klicken Sie auf der Menüleiste auf "Datei" und wählen Sie "Save Frame."

9 Erstellen Sie eine neue HTML-Datei im Hauptframe für jedes Foto und speichern Sie sie, wie folgt: "photo1.jpg" aus der Haupt-Frame löschen. Hauptframe "photo2.jpg" einfügen. In der Menüleiste auf "Datei" und wählen Sie "Bild speichern als." Benennen Sie die Datei "foto2" und speichern Sie sie. Wiederholen Sie diesen Vorgang für jedes Ihrer Fotos, benennen jede HTML-Datei mit den entsprechenden Namen des Fotos.

10 Legen Sie Ihre Vorschau-Bilder im linken Frame. Platzieren Sie die Bilder vertikal in dem Bild in der Reihenfolge, dass Sie Ihnen---"Foto1" zuerst, "foto2" zweiter benannt, etc..

11 Wählen Sie die erste Miniaturansicht. Gehen Sie auf das Bedienfeld "Eigenschaften" und geben Sie den Dateinamen und Pfad für die erste Full-Size HTML-Fotoseite im Feld "Link" wie folgt: "images/photo1.html" (ohne Anführungszeichen).

12 Klicken Sie auf das "Ziel" Drop-Down im Bedienfeld "Eigenschaften" und wählen Sie "MainFrame." Dadurch wird der Browser des Benutzers photo1.html im Hauptframe geladen, wenn sie das Vorschaubild klickt.

13 Wiederholen Sie die beiden vorherigen Schritte für jede Ihrer ein Bild und Bild in voller Größe legt.

14 Klicken Sie auf der Menüleiste auf "Datei" und wählen Sie "Frame speichern" Speichern "thumbnails.html."

15 Öffnen Sie "gallery.html" in einem Browser testen Sie Ihre Bildergalerie.

Tipps & Warnungen

• Wenn Sie lieber Ihre Miniaturen über die unten oder oben auf der Seite platzieren würde, wählen Sie das entsprechende Frameset im Dialogfeld Neues Dokument wie "Feste Bottom" Miniaturansichten Frame unten zu platzieren.
• Wenn Sie die Bildergalerie auf einen Webserver hochladen, stellen Sie sicher, dass alle HTML-Dateien und das Unterverzeichnis "Bilder".