Roulements à Adobe Dreamweaver CS3

Ce didacticiel est conçu pour donner à l'utilisateur plus de contrôle et de souplesse à l'aide du Dreamweaver CS3 interface pour créer l'image mouseovers. Il enseignera comment attribuer les mouseover image cible à un autre endroit sur la page web et ensuite attribuer un mouseover css Style de l'original mouseover bouton.

Partie 2 Montre comment intégrer pop up Swf vidéos dans votre page web, avec de légères modifications de la construction en fonctionnalités Dreamweaver CS3.

Abraham Chaffin CreativeCow.net, Cambria, California USA © 2007 CreativeCow.net. Tous droits réservés.

Partie 2

Film 1 Movie 2 Movie 3

L'objet de ce tutoriel est d'afficher une vidéo quand vous avez un élément de renversement. Nous allons commencer par créer les classes CSS que nous allons attribuer à l'espace tout au long de ce tutorial div.

1) dans la fenêtre cliquez sur le css "nouvelle règle css icône. Sélecteur de type sera «classe», Appeler le nom de la classe "movinvis" et il devrait être créé pour ce document uniquement.

2) dans la règle css sélectionnez la fenêtre de définition "positionnement" et définir le type de position absolue, Visibilité cachées, Et les z-index à 999. (positionnement absolu de la classe fait pas pousser les autres éléments autour d'elle, Et une augmentation de z-index permet de placer le classe au-dessus des autres éléments.) Appuyez sur OK.

3) créer un nouveau css la même règle que dans les étapes 1 et 2 seulement de définir le nom de la classe "movvis» et la visibilité visible.

4) insérer un nouveau div en allant sur le menu Insertion layout objets div tag. Ne fixent pas les propriétés de la div encore et appuyez sur OK.

5) sélectionner la nouvelle div et dans la fenêtre des propriétés de l'ensemble de div id "movtarget" et la classe à "movinvis".

Maintenant que le placeholder div est configuré pour recevoir nos films permettent de créer des boutons qui seront utilisés pour les rollovers. Cette fois pour des raisons de simplicité, nous utiliserons simplement le texte.

6) placez votre curseur au-dessus de la div invisible et le type "film" 1 ", sélectionnez le texte, Et en faire un lien hypertexte. Mettre «#» comme nom de fichier ou d'url. (vous pouvez répéter cette étape pour configurer l'rollovers pour "film" 2 "et" film "3"

Prochain, nous insérer les films que nous voulons assigner à l'div utilisant le renversement des liens. Puis nous allons les assigner au div onmouseover de nos liens. Enfin, nous allons attribuer les classes onmouseover et onmouseout de sorte que la div est visible uniquement lorsque le film est affiché.

7) pour aller dans le menu Insertion Médias Flash et choisissez rollover1.Swf. Appuyez sur OK.

8) Sélectionner le nouveau inséré Flash vidéo et aller à la vue du menu code. Select the code between the <noscript> and </noscript> tags and copy it to your clipboard to be pasted later.

9) revenir à vue en cours de conception pour le voir design. Sélectionner la Flash vidéo et de le supprimer.

10) sélectionner le "film" 1 "et les comportements dans la fenêtre de presse (+) ajouter comportement bouton. Choisir ensemble le texte set de texte contenant. Sélectionner le conteneur div "movtarget" et collez le code copié dans le nouveau html champ.

11) s'assurer que le comportement a été mis à l'événement onmouseover pour créer cet effet. Si ce n'était pas vous pouvez le modifier en cliquant sur l'événement et en choisissant dans le menu déroulant onmouseover.

12) avec le "film" 1 "le lien est toujours sélectionné (+) ajouter un autre problème appelé« changement de propriété ". Assurez-vous que le type d'élément "div", Et de l'élément div id est "movtarget". Sélectionnez l'option "entrer:"Radio de la propriété et tapez" classe ". Entrez "movvis" pour la nouvelle valeur et appuyez sur ok. Assurez-vous que ce comportement est attribué à l'événement onmouseover, Si elle ne change pas.

13) Répétez l'étape 12 seulement assigner la nouvelle valeur de "movinvis" et d'assigner l'action à l'événement onmouseout.

14) Répétez les étapes 7-13 pour "film" 2 "et" film "3".

Nous allons effectuer un hack sur le javascript qui utilise dw pour le changement de comportement de propriété pour le faire fonctionner de la manière que nous utilisons pour modifier les classes.

15) Accédez au menu Édition Rechercher et remplacer. Trouver dans "document", Recherche "source code", Trouver "obj.Style.", Remplacer "obj.", Et de remplacer les deux instances de ce dans le code javascript.

Vous devriez être en mesure de sauver et de prévisualiser votre travail pour voir ce que vous avez fait. Cette technique peut être utilisée en conjonction avec un positionnement de script pour obtenir le Swf placé exactement où vous le souhaitez. Ou de configuration différente divs où vous voulez que la cible spécifique des films et des cas d'y aller. Il existe d'autres moyens pour obtenir ce même effet, mais c'est un peu bricolé façon de l'obtenir avec de simples fonctions intégrées Dreamweaver CS3.