A " picture show " oder " Bildergalerie " präsentiert Fotografien in einem Portfolio -like Webseite. Während Bildergalerien vielen Konfigurationen haben kann, zeigt ein beliebtes Format Miniaturbilder entlang der Seite, von oben oder unten auf der Seite . Wenn der Benutzer klickt jedes Miniaturbild , zeigt eine entsprechende volle Version von dem Foto in der Mitte der Seite . Dreamweaver CS3 unterstützt mehrere Wege, um Bildergalerien erstellen. Einer der leichter und einheitlicher Methoden , ist, ein " frameset . " Ein Frameset ist eine HTML- Webseite Behälter , bestehend aus zwei oder mehr "frames ". Jeder Rahmen zeigt eine einzelne Seite oder URL . Was Sie brauchen
Adobe Dreamweaver CS3 oder höher Adobe Photoshop
Apple iPhoto , Windows Paint oder ein anderes Bildbearbeitungsprogramm
anzeigen Weitere Anweisungen
Vorbereiten Fotos
1
die Größe der Fotos in Ihrer Bildbearbeitungssoftware . Sie müssen zwei Versionen der jedes Bild --- ein Full-Size -Version (etwa 400 x 300 Pixel , oder was auch immer funktioniert am besten für die Form und die Größe Ihrer Fotos) und eine Vorschau -Version ( sagen wir, 100 um 75 Pixel ) .
2
Stellen Sie die Auflösung für jedes Bild zu " 72 " Punkte (oder Pixel ) pro Zoll ( oder "96" für High-Definition- Monitore) .
3
Speichern Sie jedes Bild in einem Unterverzeichnis des Verzeichnisses , in dem Sie Ihre Bildergalerie Website erstellen möchten . Nennen Sie die Sub- Verzeichnis " Bilder ". Speichern Sie die Bilder als JPEGs . Nennen Sie sie " photo1 ", " photo2 ", und so weiter; Name der entsprechenden Thumbnails " thumb1 ", " thumb2 " usw.
Erstellen Sie Ihre Bildergalerie in Dreamweaver
4
öffnen Dreamweaver , und klicken Sie dann auf "Datei" in der Menüleiste . Wählen Sie " Neu", um das Dialogfeld Neues Dokument angezeigt werden soll.
5
Klicken Sie auf " Seite von Muster" in der linken Spalte der Dialogbox , und klicken Sie dann auf " Frameset " in der "Sample Folder" Spalte . Dies zeigt eine Liste der Probe Framesets in der dritten Spalte der Dialogbox . Wählen Sie " Left behoben . "
6
Klicken Sie auf " Erstellen". Dreamweaver zeigt das " Frame-Tag -Attribute "-Dialogbox . Klicken Sie auf " OK". Die Rahmen werden nach ihrer Plazierung auf der Seite genannt. Der linke Rahmen trägt den Namen " Leftframe " und der Hauptrahmen trägt den Namen " mainFrame . "
7
Klicken Sie auf " File" in der Menüleiste und wählen Sie " Alle speichern. " Dreamweaver wird Sie auffordern, drei Dateien , eine nach der anderen zu nennen : " . Galerie " Erstens, das Frameset selbst --- nennen es Zweitens, der Hauptrahmen --- name it " photo1 . " Drittens, die linken Frame --- nennen Sie es " Miniaturen ".
8
Insert " photo1.jpg " im Hauptmenü (rechts) Rahmen, und klicken Sie dann auf "Datei" in der Menüleiste und wählen Sie " Frame speichern . "
9
erstellen Sie eine neue HTML-Datei in den Hauptrahmen für jedes Foto und speichern Sie sie , wie folgt aus: löschen " photo1.jpg " aus dem Hauptrahmen . Legen " photo2.jpg " in den Hauptrahmen . Klicken Sie auf " File" in der Menüleiste und wählen Sie " Frame speichern unter . " Benennen Sie die Datei " photo2 " und speichern Sie es . Wiederholen Sie diesen Vorgang für jedes Ihrer Fotos auf, indem jeder HTML-Datei mit dem entsprechenden Namen des Fotos .
10
Legen Sie Ihre Miniaturansichten im linken Frame . Legen Sie die Bilder vertikal in dem Rahmen in der gewünschten Reihenfolge nannte sie --- " photo1 " first ", photo2 " zweite usw.
11
Wählen Sie die erste Miniaturansicht. Gehen Sie auf die Eigenschaften -Panel und geben Sie den Dateinamen und den Pfad für das erste Full-Size Foto HTML-Seite im Feld "Link" , wie folgt aus: . " Images/photo1.html " (ohne Anführungszeichen )
12
Klicken Sie auf das "Target " drop-down im Eigenschaften-Bedienfeld und wählen Sie " mainFrame . " Damit der Browser des Benutzers zu photo1.html im Hauptrahmen laden, wenn sie die Vorschau klickt .
13
Wiederholen Sie die beiden vorherigen Schritte für jede Ihrer Miniaturansicht und Bild in voller Größe Sets.
14
Klicken Sie auf " File" in der Menüleiste und wählen Sie "Speichern Frame" zu retten " thumbnails.html . "
15
öffnen " gallery.html " in einem Browser zu testen Ihre Bildergalerie .
