So erstellen Sie Swaps mit mehreren Bildern in Dreamweaver

Bevor Sie eine komplexere Seite Design mit Dreamweaver Bild austauschen Startverhalten zu schaffen, schauen auf eine fertige Seite. Mit dem Bild austauschen Verhalten, können Sie einzelne oder alle Bilder auf einer Seite ersetzen.

Wenn Sie das Bild austauschen Verhalten verwenden, ist es wichtig, alle Bilder zu machen, dass Sie die gleiche Größe tauschen wird (Höhe und Breite). Wenn die Bilder nicht gleich groß sind, werden alle Bilder außer dem ersten durch das erste Bild gestreckt oder gestaucht werden, um den Raum zu passen in die Seite eingefügt aufgenommen.

Wenn Sie das Bild austauschen Verhalten mit einer Reihe von Bildern verwenden, die nicht alle die gleiche Höhe und Breite sind, haben Sie ein paar Optionen:

Crop die größeren, so dass alle Bilder die gleiche Größe haben.

Machen Sie horizontale und vertikale Bilder den gleichen Raum in Ihrem Design durch die Kombination von zwei vertikalen Bilder für jede horizontale aufzunehmen. Erstellen Sie einfach eine Datei in einem Programm wie Photoshop zwei vertikale Bilder in die gleiche Datei Seite einfügen einander, und die Größe dann das Bild so, dass die Datei die gleiche Größe wie eine horizontale Bild ist.

Erstellen einer Image-Datei die Größe Ihrer größten Bild, stellen Sie den Hintergrund auf eine neutrale Farbe, wie schwarz oder weiß, und fügen Sie dann alle anderen Bilder auf den Hintergrund, so dass Sie sie alle mit der gleichen Dateigröße speichern.

Gehen Sie wie folgt vor, um das Bild austauschen Verhalten zu verwenden:

2

Benennen Sie Ihre Bilder im Eigenschafteninspektor.

Um Ihre Bilder mit javascript-Ziel, das ist, wie Verhaltensweisen arbeiten, geben zuerst jedes Bild eine eindeutige ID. Das Bild-ID ist nicht das gleiche wie das Bild, Dateinamen oder den Text-Tag, obwohl man die gleichen oder ähnliche Namen verwenden können. Bild-IDs sollten keine Leerzeichen oder Sonderzeichen.

3

Wählen Sie Window-Behaviors.

Das Bedienfeld VERHALTEN öffnet. Sie können das Bedienfeld Verhalten an anderer Stelle auf der Seite ziehen, und Sie können es erweitern, indem sie ihre unten oder seitlich verschieben. Sie können auch mehr Platz zu machen, indem Sie den dunkelgrauen Leiste klicken am oberen Rand jeder Platte alle anderen offenen Panels schließen möchten.

6

Geben Sie die Bilder im Dialogfeld Bild austauschen zu tauschen.

In der Bilder-Liste wählen Sie die ID für das Bild, das ersetzt werden soll. Klicken Sie auf die Schaltfläche Durchsuchen um das Bild auszuwählen, das die Haupt Bild ersetzt. Wenn das Bild nicht bereits in der lokalen Site-Ordner gespeichert wird, wird Dreamweaver bieten es für Sie es zu kopieren.

7

Am unteren Rand des Dialogfelds Bild austauschen, wählen Sie die Option Preload Bilder den Browser anweisen, alle Bilder in den Cache zu laden, wenn die Seite geladen wird.

Wenn Sie diese Option nicht auswählen, kann eine Verzögerung auftreten, wenn das Bild Swap verwendet wird.

8

Wenn Sie möchten, deaktivieren Sie die Wiederherstellungs-Images onmouseout Option.

Die Restore-Images onmouseout Option bedeutet, dass, wenn ein Ereignis abgeschlossen ist (wie zum Beispiel, wenn die Maus bewegt wird, um die Auslösung Miniatur aus), wird das Originalbild ersetzt. Standardmäßig vorwählt Dreamweaver diese Option für das Bild austauschen Verhalten. Sie können diese Option zu deaktivieren möchten, wenn Sie feststellen, dass jedes Mal das Originalbild Ersetzen Sie den Cursor über ein anderes Thumbnail rollen ablenkt.

9

Nachdem Sie alle Einstellungen für das Verhalten angeben, klicken Sie auf OK.

Das neue Verhalten wird im Bedienfeld Verhalten.

10

ein Ereignis für das Verhalten angeben.

Nachdem die Aktion angewendet wird, können Sie zurückgehen und angeben, welches Ereignis die Aktion auslösen soll. In der Standardeinstellung Dreamweaver gilt onmouseover Ereignis, wenn Sie die Aktion Bild austauschen, aber Sie können dieses Ereignis zu jedem verfügbaren man ändern, wie zum Beispiel Auf Knopfdruck, was erfordert, dass der Benutzer das Bild klicken Sie auf das Bild austauschen Aktion auszulösen.

11

Wenden Sie zusätzliche Verhaltensweisen.

Um das Bild austauschen Verhalten auf andere Bilder auf eine Seite anwenden, wiederholen Sie die Schritte 5-10, klicken Sie das Bild auszuwählen, das Sie als Auslöser dienen wollen und dann das entsprechende Bild angeben, die ausgelagert werden sollen.

Vergrößern
12

Testen Sie Ihre Arbeit in einem Browser.

Sie können nicht die Auswirkungen von Verhaltensweisen wie diese sehen, bis Sie die Live-Ansicht auf die Schaltfläche oben links im Arbeitsbereich in Dreamweaver klicken oder Ihre Seite in einem Web-Browser anzeigen.

Ähnliche

Menü