So ​​erstellen Sie Rollover in Adobe Dreamweaver CS6 - Dummys

In Adobe Dreamweaver CS6 können Sie Bildobjekte einschließlich Bildplatzhalter und Rollover -Bilder einfügen (Bilder, die sich ändern, wenn ein Betrachter rollt). Maus über das Bild), Navigationsleisten und Fireworks-HTML. Sie greifen auf diese Bildobjekte zu, indem Sie Einfügen → Bildobjekte wählen.

Führen Sie die folgenden Schritte aus, um ein Rollover-Bild zu erstellen:

1Erstellen Sie die Bilder, die als Rollover verwendet werden sollen.

Sie können diese Bilder in Fireworks, Illustrator, Photoshop oder einer anderen Anwendung erstellen, die Bilder speichern kann, die für das Internet optimiert sind. Erstellen Sie für beste Ergebnisse genau die gleiche Breite und Höhe.

2 Platzieren Sie den Cursor an der Stelle, an der der Rollover angezeigt werden soll, und wählen Sie Einfügen → Bildobjekte → Rollover-Bild oder klicken Sie im Bedienfeld "Einfügen" auf die Schaltfläche "Rollover-Bild".

Das Dialogfeld Rollover-Bild einfügen wird angezeigt.

3Tippen Sie einen Bildnamen ohne Leerzeichen in das Textfeld Bildname ein.

Dieser Name wird in dem Skript verwendet, das das Rollover erstellt.

4Klicken Sie auf die Schaltfläche Durchsuchen rechts neben den Textfeldern Originalbild und Rollover-Bild, um das Bild zu suchen, das als Standard auf der Seite erscheinen soll.

Das Bild wird nur angezeigt, wenn jemand den Mauszeiger über das Bild bewegt.

5Das Kontrollkästchen Preload Rollover Image ist aktiviert.

Diese Option lädt das Rollover-Bild herunter, wenn die Seite heruntergeladen wird, um Verzögerungen bei Rollovers zu vermeiden.

6 Geben Sie einen entsprechend beschreibenden Alternativtext ein.

Natürlich würden Sie es in das Alt-Textfeld eingeben.

7Geben Sie Dreamweaver im Textfeld Beim Klicken auf Gehe zu URL an, wohin die Betrachter geleitet werden, wenn sie auf Ihr Rollover-Bild klicken.

Sie können entweder auf die Schaltfläche Durchsuchen klicken, um eine andere Seite auf Ihrer Website zu suchen, oder eine URL eingeben.

Wenn Sie eine Verknüpfung zu einer anderen Website herstellen, müssen Sie das Präfix // am Anfang der URL einfügen. Wenn Sie dieses Feld leer lassen, fügt Dreamweaver automatisch einen toten Link (#) hinzu.

8Klicken Sie auf OK.

Das Rollover-Bild wird auf der Seite erstellt.

9Um das neue Rollover-Bild in der Vorschau anzuzeigen, wählen Sie Datei → Vorschau im Browser oder klicken Sie auf der Symbolleiste Dokument auf die Schaltfläche Live-Ansicht.

Wenn Sie noch keinen echten Link für eine Schaltfläche oder einen Hyperlink haben, können Sie ein Nummernzeichen (#) eingeben, um einen toten Link zu erstellen. Der Link oder die Schaltfläche ist anklickbar, geht aber beim Klicken nicht weg. Diese Option ist besser als das Drücken der Leertaste, um einen leeren Bereich als Link zu erstellen, da dieser Link beim Klicken auf einen Fehler Seite nicht gefunden zeigt.