Wie man eine einfache Maus über das Bild in Dreamweaver erstellen
Rollovers sind ein so beliebtes Feature, dass Dreamweaver ein Dialogfeld nur für Rollover-Effekte beinhaltet: das Einfügen über das Bild im Dialogfeld. Rollover-Bilder, wie der Name schon sagt, sind so konzipiert, zu reagieren, wenn jemand einen Cursor über ein Bild rollt. Der Effekt kann so dramatisch sein wie ein Bild von einem Hund durch ein Bild eines Löwen ersetzt, oder so subtil wie die Farbe eines Wortes Wechsel.
Sie können komplexere Rollover-Bild-Effekte mit dem Swap-Bild-Option aus dem Bedienfeld VERHALTEN erstellen. Das Swap-Bild-Option ermöglicht es Ihnen, mehrere Bilder gleichzeitig zu ändern.
Um einen einfachen Rollover-Effekt mit zwei Bildern unter Verwendung von Dreamweaver einfügen Bild Prolongation Dialogfeld zu erstellen, gehen Sie folgendermaßen vor:
Setzen Sie den Cursor auf der Seite, wo Sie die Rollover angezeigt werden soll.
Rollover-Effekte erfordern mindestens zwei Bilder: eines für den Anfangszustand und einen für den Rollover-Status. Sie können zwei verschiedene Bilder oder zwei ähnliche verwenden, aber sowohl die gleichen Abmessungen aufweisen sollte. Ansonsten sehen Sie seltsame Skalierungseffekte, da beide Bilder in genau den gleichen Raum auf der Seite angezeigt werden müssen.
Wählen Sie Einfügen-Bild-Maus über das Bild.
Alternativ können Sie die Dropdown-Liste aus dem Bilder-Symbol zur Verfügung verwenden im Panel Gemeinsame Einfügen und wählen Sie die Bild Prolongation.
Der Insert-Maus über das Bild Dialogfeld erscheint.
Im Bild Feld Name den Namen Ihres Bildes.
Bevor Sie ein Verhalten auf ein Element anwenden können, wie zum Beispiel ein Bild, muss das Element einen Namen haben, so dass das Verhalten Skript auf sie verweisen können. Sie können Elemente alles, was Sie so lange wie Name, wie Sie verwenden keine Leerzeichen oder Sonderzeichen.
Im Originalbildfeld die erste Bild, das Sie sichtbar werden soll. Verwenden Sie die Schaltfläche Durchsuchen ausfindig zu machen und das Bild auswählen.
Wenn die Bilder nicht bereits in der lokalen Site-Ordner befinden, Dreamweaver kopiert sie in Ihrer Website, wenn Sie die Rollover erstellen.
Im Bildfeld Mauszeiger bewegen, geben Sie das Bild, das Sie sichtbar werden wollen, wenn ein Besucher den Mauszeiger über das erste Bild bewegt.
Auch hier können Sie über die Schaltfläche Durchsuchen, um das Bild suchen und auszuwählen.
Wählen Sie den Preload Maus über das Bild Kontrollkästchen alle Rollover-Bilder in den Browser-Cache zu laden, wenn die Seite geladen wird.
Wenn Sie wählen, um diesen Schritt nicht zu tun, Ihre Besucher möglicherweise eine Verzögerung, weil das zweite Bild wird nicht heruntergeladen werden, bis ein Cursor über das Originalbild gerollt wird.
In der alternativen Textfeld eine Beschreibung der Bilder ein.
Alternativer Text ist optional, wird aber empfohlen, da die Verwendung von Keywords können Suchmaschinen-Optimierung zu verbessern. In ähnlicher Weise Alternativer Text ist ein wichtiger Teil der Web-Zugänglichkeit, weil dieser Text laut durch spezielle Browser Screen-Reader genannt gelesen wird, die von Menschen verwendet werden, die blind und andere mit eingeschränkter Sicht oder Mobilität sind. Alternativer Text ist nur im Browser angezeigt, wenn die Bilder nicht sichtbar sind.
In der beim Anklicken Zum Feld URL geben Sie eine beliebige Web-Adresse oder suchen Sie eine andere Seite in Ihrer Website zu finden, zu dem Sie verbinden.
Wenn Sie nicht über eine URL angeben, fügt Dreamweaver automatisch die # unterzeichnen als Platzhalter in den Code.
Das Zeichen # ist eine übliche Technik für Links zu schaffen, die nicht überall verknüpfe. Da Rollover-Bilder, die auf eine andere Seite nicht verlinken viele große Anwendungen haben, ist diese Technik nützlich. Denken Sie daran, dass, wenn Sie Ihre Roll wollen zu verbinden, müssen Sie das Zeichen # mit einem Link zu einer anderen Seite zu ersetzen.
Klicken Sie auf OK.
Die Bilder werden automatisch als Roll einrichten.
Um die Überschlags in Aktion zu sehen, speichern Sie die Datei und klicken Sie dann auf den Globus-Symbol oben im Arbeitsbereich Ihrer Seite in einem Web-Browser in der Vorschau anzeigen.
Sie können sehen, wie Ihre Rollover in Dreamweaver Entwurfsansicht funktioniert oder durch die Live-View-Option. Wenn Sie den Live-Button oben links im Arbeitsbereich klicken, schalten Sie im Wesentlichen Dreamweaver in einem Web-Browser, der Seiten ähnlich wie der Chrome-Browser anzeigt.
Wenn Sie eine Seite auf Ihrem Computer eine Vorschau, die ein Rollover-Bild enthält, werden einige Web-Browser eine Warnung besagt, dass Sie müssen zulassen ActiveX um die Seite anzuzeigen steuert. Dies ist eine Sicherheitswarnung, die nur angezeigt, wenn die Seite auf demselben Computer geöffnet wird, in dem die Seite gespeichert wird.
Wenn Sie die Seite zu einem Web-Server veröffentlichen und dann eine Internetverbindung Blick über Sie und Ihre Website-Besucher wird diesen Fehler nicht zu sehen.
