Rollovers in Adobe Dreamweaver CS3 Adobe Dreamweaver Tutorial
Dieses Tutorial wird entwickelt, um dem Benutzer mehr Kontrolle und Flexibilität mit der Dreamweaver CS3-Schnittstelle geben Bild per Mouse over zu erstellen. Es wird auch lehren, wie das Mouseover-Bild Ziel irgendwo anders auf der Web-Seite zuweisen und dann einen Mouseover CSS-Stil auf die ursprüngliche Mouseover-Taste zuweisen.
Teil 2 zeigt, wie Pop-up-swf Videos in Ihre Web-Seite mit einigen kleineren Verbesserungen der integrierten Funktionen in Dreamweaver CS3 einzubetten.
Abraham Chaffin
CreativeCOW.net,
Cambria, Kalifornien, USA
Ein paar Bilder von der gleichen Größe sind für dieses Tutorial benötigt, damit ich ein paar aufgenommen haben, die Sie hier herunterladen können.
Öffnen Sie die HTML-Dokument in Dreamweaver CS3 und lassen Sie uns beginnen.
2) Klicken neben dem neu eingefügten Rollover-Bild und wiederholt Schritt 1 mehr / alle der Rollover-Bilder einzufügen. Ersetzen Sie einfach die 1s im ersten Schritt mit 2s usw.
Sie haben jetzt ein paar Rollover-Bilder. Speichern Sie und Ihre HTML-Datei in einer Vorschau und Sie werden sehen, dass sie schön Rollover. Aber was, wenn Sie wollte eigentlich um das Bild haben, dass Sie überrollen erscheinen als ein größeres Bild oben?
Lassen Sie sich das Rollover-Bild in einem anderen Ort auf der Seite erscheinen. Zunächst müssen wir einen Platzhalter Bild, das geladen wird, wenn die Seite geladen wird, bevor irgendwelche Rollovers auftreten.
3) Setzen Sie placeholder.gif über unsere Rollover-Bilder von Rückkehr mit dem Cursor vor den Bildern drücken und dann gehen Sie auf Einfügen> Bild, wählen placeholder.gif und drücken Sie OK.
4) Jetzt müssen wir dieses Bild benennen, so dass das Skript es finden kann. Wählen Sie das Platzhalter-Bild, in dem Eigenschaftenfenster links von der Breite und Höhe Parameter Typen in „Ziel“ für die Bildnamen.
5) zuordnen, das Ziel für die Rollover-Bilder ist ziemlich einfach. Öffnen Sie das Verhalten Fenster, indem auf das Fenster-Menü> Behaviors.
6) Klicken Sie auf das erste Bild (Image1) und Sie sollten zwei Verhaltensweisen zugeordnet, um es zu sehen.
onMouseOut | Bildaustausch wiederherstellen
onMouseOver | Bild austauschen
Wir wollen das Bild austauschen Verhalten anzupassen, um das andere Bild so klicken Sie doppelt auf „Bild austauschen“ zu zeigen. Im Bildfenster Swap wählen Sie das Set Quelle Text, die „1-over.gif“ sein soll und geschnitten, damit er es entfernt. Motiv auswählen „Ziel“ und Einfügen „1-over.gif“ in die Set Quelle und drücken Sie OK zum Feld.
7) Wiederholen Sie Schritt 6 für alle Rollover-Bilder Sie eingefügt, so dass das Ziel für alle, sie zu dem Bild mit dem Namen „Ziel“ gesetzt ist. Speichern und dann eine Vorschau Ihrer Arbeit zu sehen, was du getan hast.
Was nun, wenn wir wollten nicht das Bild ändern, nachdem wir über gerollt und dann kam aus?
8) Klicken Sie auf „Bild1“, im Fenster Behaviors klicken Sie auf Bildaustausch wiederherstellen und die Entf-Taste drücken. (Sie können diesen Schritt wiederholen, wieder für alle Rollover-Bilder)
Nun, da das Rollover-Bild an einem anderen Ort wird die Rollover-Buttons suchen ein wenig eintönig. Lassen Sie uns einige CSS Styling zuweisen, so machen sie interessanter aussehen.
9) Im CSS-Fenster lassen Sie uns erstellen und neue CSS-Regel. Selektor-Typ wird die Klasse, werden Namen „Knöpfe“ und definieren in: Dieses Dokument nur. Lassen Sie uns einen kleinen Polster und unsichtbare Grenze von 1 Pixel eingestellt. Die Polsterung ist unter der Box Kategorie - stellen Sie es auf 10 für alle Seiten. Stellen Sie die Grenze Das Gleiche gilt für alle „fest. 1 Pixel. Farbe # FFFFFF“. Drücke OK. (Der Grund setzen wir eine unsichtbare Grenze, so ist, wenn wir eine Regel erstellen, die eine Grenze später schaffen wir wollen nicht die Positionierung unserer Elemente verzerren.)
11) Für jede Rollover-Schaltfläche wählen Tasten als die „Klasse“ im Fenster Eigenschaften.
12) Erstellen eine neue CSS-Regel zugewiesen werden, wenn die Rollover-Buttons oder über moused. Erstellen ihm genau die gleichen wie in Schritt 9 nennt es nur „buttonsover“ padding von 10 Pixeln, und eine Grenze von „Feststoff. 1 Pixel. Color # 990000“.
13) Wählen Sie „Bild1“ wieder und im Behaviors Fenster rechts klicken Sie auf „Bild austauschen“ und wählen Sie „Neue Liste hinzufügen Item“. Ein Linksklick in den neuen onMouseOver Raum und geben Sie "Image1.className = 'buttonsover'". (Dies kann auch für alle anderen Rollover-Bilder wiederholt werden.)
14) Im Fenster Verhalten in der onMouseOut Feld Assign "Image1.className = 'Tasten'". Dadurch wird die Klasse zurück wechseln, wenn Sie die Maus aus. Tun Sie dies für alle Rollover-Bilder.
Dies sollten Sie die Grundidee einiger Dinge, die Sie mit den Rollover-Funktionen in Dreamweaver CS3 tun können.
Zuerst müssen Sie die Projektdateien hier zum Download bereit.
Inhalt für die Klasse „movinvis“ Goes Here
Das Ziel dieser Übung ist es, ein Video angezeigt wird, wenn Sie ein Element Rollover. Wir gehen durch die Schaffung der CSS-Klassen zu starten, die wir auf den Platzhalter div in diesem Tutorial zuweist.
1) In der CSS-Fenster klicken Sie auf die „Neue CSS-Regel“ -Symbol. Selektor-Typ wird „Klasse“, rufen Sie den Namen der Klasse „movinvis“ und es sollte nur für dieses Dokument erstellt werden.
2) In der Regel CSS Definitionsfenster wählen Sie die „Positionierung“ Kategorie und stellen die Position Typ absolute, Sichtbarkeit verborgen, und die z-Index 999. (Die absolute Positionierung macht die Klasse nicht andere Elemente herum drücken, und eine höhere z-Index wird die Klasse auf andere Elemente setzen.) Drücken Sie OK.
3) Erstellen Wieder ein neues CSS die gleiche Regel wie in den Schritten 1 und 2 festgelegt nur den Namen der Klasse „movvis“ gesetzt und die Sichtbarkeit zu erkennen.
4) Setzen Sie einen neuen div durch auf das Einfügen-Menü> Layout-Objekte> Div-Tag. setzen Sie keine Eigenschaften für die div noch und drücken Sie OK.
5) Wählen Sie die neu erstellte div und im Eigenschaftenfenster legen Sie die Div-ID „movtarget“ und die Klasse „movinvis“.
Nun, da der Platzhalter div Setup ist unsere Filme erhalten wir die Schaltflächen erstellen, die für die Rollovers verwendet werden. Dieses Mal der Einfachheit halber werden wir nur Text.
6) Setzen Sie den Cursor über dem unsichtbaren div und Typ „Movie 1“ wählen Sie den Text, und es einen Hyperlink machen. Put „#“ als Dateiname oder URL. (Sie können diesen Schritt Setup wiederholen Sie die Rollovers für „Film 2“ und „Movie 3“
Als nächstes werden wir die Filme einsetzen, die wir dem div die Rollover-Links verwenden zuweisen möchten. Dann werden wir sie an die div onMouseOver unserer Links zuweisen. Schließlich werden wir die Klassen onMouseOver und onMouseOut zuweisen, so dass die div ist nur sichtbar, wenn ein Film angezeigt wird.
7) Gehen Sie das Menü Einfügen> Medien> Flash und wählen rollover1.swf. Drücke OK.
8) Wählen Sie das neu eingefügte Flash-Video und gehen Sie zum Menü Ansicht> Code. Wählen Sie den Code zwischen den Tags und kopieren Sie sie in die Zwischenablage später eingefügt werden.
9) Gehen Sie zurück zur Entwurfsansicht, indem Sie auf Ansicht> Entwurf. Wählen Sie das Flash-Video und löschen.
10) Wählen Sie die „Movie 1“ -Link und im Verhalten Fenster drücken Sie die (+) Schaltfläche Hinzufügen Verhalten. Wählen Sie Set Text> Set Text von Containern. Wählen Sie den Container div „movtarget“ und fügen Sie den kopierten Code in das neue HTML-Feld.
11) Stellen Sie sicher, dass das Verhalten der onMouseOver Ereignis festgelegt wurde, diesen Effekt zu erstellen. Wenn es nicht ist, kann man es auf der Veranstaltung, indem Sie ändern und onMouseOver aus der Dropdown-Auswahl.
12) Mit dem „Film 1“ Link noch ausgewählt (+) hinzufügt ein anderes Verhalten als „Eigenschaft ändern“. Stellen Sie sicher, dass die Art des Elements „DIV“ und Element-ID ist div „movtarget“. Wählen Sie die „Enter“ Radio für die Immobilie und geben Sie „classname“. Geben Sie „movvis“ für den neuen Wert ein und drücken Sie OK. Stellen Sie sicher, dass dieses Verhalten das onMouseOver Ereignis zugeordnet ist, wenn es nicht ändern.
13) Wiederholen Sie Schritt 12 nur den neuen Wert als „movinvis“ zuweisen und die Aktion der onMouseOut Ereignis zuordnen.
14) Wiederholen Sie die Schritte 7-13 auf "Movie 2" und "Movie 3".
Sie sollen nun Ihre Arbeit zu speichern und eine Vorschau der Lage sein, zu sehen, was du getan hast. Diese Technik kann in Verbindung mit einem Positionierungs Skript verwendet werden, um die swf zu bekommen positioniert, wo genau Sie es wollen. Oder Setup verschiedene divs, wo Sie die spezifischen Filme wollen und die Veranstaltung Ziel dorthin zu gehen. Es gibt auch andere Möglichkeiten, um diesen gleichen Effekt zu erzielen, aber das ist ein leicht gehackt, wie es mit einfachen Funktionen direkt in Dreamweaver CS3 gebaut zu bekommen.
Rollovers in Adobe Dreamweaver CS3
von Abraham Chaffin 285281887
in Teil 1 dieses das Hauptbild Herstellung eines Hyperlink in der normalen Weise tutorial nicht die Rollover-Funktionalität des Bildes beeinflussen sollte. Sie sind zwei getrennte Funktionen, die unabhängig voneinander arbeiten. Versuchen Sie es einfach einen Hyperlink zu machen.
Rollovers in Adobe Dreamweaver CS3
von Lori Stammer 285378064
Das war großartig, ich habe eine Zeit lang für diese Funktion gesucht. Nun, da die Möhren baumelte worden, wie kann ich Skript so das größere Bild verknüpft werden kann?
Bridging Web Design und Entwicklung mit Adobe Extract
Um Daten aus einer MySQL-Datenbank mit PHP
Das zeigt, wie PHP verwenden, um eine MySQL-Datenbank zuzugreifen. Der Aufbau einer realen Welt Anwendung ist dieses Tutorial interessant, weil es zeigt, wie eine Suche auf 2 verschiedenen Kriterien (2 verschiedene MySQL-Felder) basierend einzuengen. Schließlich endet dieses Tutorial mit vollständigem Code für eine HTML-Seite als auch die PHP-Dateien geben.
Arbeiten mit Photoshop Slices in Dreamweaver - 3
Video abspielen
In Teil drei dieser Video-Tutorial-Serie, zeigt Richard Williams, wie Bilder Hintergrund Bilder konvertieren und setzt Text über die Oberseite von ihnen innerhalb von Dreamweaver. Richard gilt dann CSS Styling auf den HTML-Text, um ihn mit dem Design in Photoshop anzupassen.
In diesem Tutorial erklärt CreativeCOW Leiter Richard Williams, die Grundsätze des Spry-Menüs und beantwortet die am häufigsten gestellten Fragen.
CSS-Grundlagen in Adobe Dreamweaver
Dieses Tutorial soll die Konzepte der Verwendung von CSS in Adobe Dreamweaver und HTML für Web-Designer vorstellen, die mit CSS in Web-Design nicht vertraut sind. CSS steht für Cascading Style Sheet und ist ein System, Styling, um Ihre Web-Seiten und Web-Seite Inhalte hinzuzufügen.
Aktuelle Artikel / Tutorials:
Adobe Premiere Pro: Bearbeiten Sie schneller mit Overlay bearbeiten
Editor, VFX Künstler, post-Hausbesitzer und Plug-in-Entwickler Simon Ubsdell zeigen Ihnen, wie schneller bearbeiten und leichter mit der sehr nützlich, aber nicht oft bekannt-über Overlay-Editierfunktion in Premiere Pro. Das Quick Tip Tutorial bietet auch Tipps zur Gruppierung.
Haben Sie wie ein Bildhauer, oder wie ein Maurer bearbeiten? Es scheint eine einfache genug Frage, aber als langjähriger Redakteur, Posthauseigentümer und VFX Software-Entwickler Simon Ubsdell zeigt, die Auswirkungen darauf, wie dies wirkt sich auf die Art und Weise Sie tiefgreifend sein bearbeiten können. Sein Rat, und zwar unabhängig davon, wo Sie auf dem Spektrum landen? Immer Bearbeitung.