Rollovers dans Adobe Dreamweaver CS3 Adobe Dreamweaver Tutorial
Ce tutoriel est conçu pour donner à l'utilisateur plus de contrôle et de flexibilité en utilisant l'interface de Dreamweaver CS3 pour créer mouseovers d'image. Il enseignera également comment assigner la cible d'image mouseover à un autre endroit sur la page Web, puis attribuer un style CSS mouseover au bouton mouseover d'origine.
Partie 2 montre comment intégrer pop up vidéos swf dans votre page Web avec quelques modifications mineures des fonctions intégrées dans Dreamweaver CS3.
Abraham Chaffin
CreativeCOW.net,
Cambria, Californie
Quelques images de la même taille sont nécessaires pour ce tutoriel, donc je l'ai inclus quelques que vous pouvez télécharger ici.
Ouvrez le document HTML fourni dans Dreamweaver CS3 et commençons.
2) Cliquer à côté de l'image de survol nouvellement insérée et répéter l'étape 1 pour insérer plus / toutes les images de survol. Il suffit de remplacer les 1 dans la première étape avec 2 s etc.
Vous avez maintenant quelques images de survol. Enregistrer et prévisualiser votre fichier html et vous verrez qu'ils capotage bien. Mais si vous voulez avoir réellement l'image que vous roulez apparaissent au-dessus comme une image ci-dessus?
Faisons apparaître l'image de survol dans un autre emplacement sur la page. Nous avons d'abord besoin d'une image d'espace réservé qui se charge lorsque la page se charge avant tout renversements se produisent.
3) Mettre placeholder.gif au-dessus de nos images survolées en appuyant sur le retour avec votre curseur devant les images, puis allez insérer> image, choisissez placeholder.gif et appuyez sur OK.
4) Maintenant, nous devons nommer cette image afin que le script puisse le trouver. Sélectionnez l'espace réservé image dans la fenêtre des propriétés à la gauche de la largeur et la hauteur de paramètres de type « cible » pour le nom de l'image.
5) Affectation de la cible pour les images de roulement est assez simple. Ouvrez la fenêtre des comportements en allant dans le menu Fenêtre> Behaviors.
6) Cliquez sur la première image (Image1) et vous devriez voir deux comportements qui lui sont assignées.
onMouseOut | Restaurer l'image intervertie
onMouseOver | Image Swap
Nous voulons adapter le comportement d'échange d'image pour pointer vers l'autre image si double-cliquez sur « Image Swap ». Dans la fenêtre d'échange d'image sélectionnez la source Set de texte qui devrait être « 1-over.gif » et le couper de sorte qu'il enlève. Sélectionner une image « cible » coller « 1-over.gif » dans la source ensemble au champ, puis appuyez sur OK.
7) Répétez l'étape 6 pour toutes les images de survol afin que vous avez inséré la cible pour tous les est fixé à l'image nommée « cible ». Enregistrer, puis un aperçu de votre travail pour voir ce que vous avez fait.
Maintenant, si nous ne voulions pas l'image de changer après que nous reconduits et sommes descendus?
8) Cliquez sur « Image1 », dans la fenêtre Behaviors cliquez sur l'image Swap Restaurer et appuyez sur la touche Suppr. (Vous pouvez répéter cette étape encore pour toutes vos images survolées)
Maintenant que l'image de retournement va vers un autre emplacement des boutons de roulement sont à la recherche un peu terne. Assignons un peu de style CSS afin leur donner un aspect plus intéressant.
9) Dans la fenêtre CSS nous allons créer et de nouvelles règles CSS. Type de sélecteur sera classe, le nom sera « boutons » et définir dans: Ce document ne. Fixons un petit rembourrage et frontière invisible de 1 pixel. Le rembourrage est sous la catégorie Boîte - le mettre à 10 pour tous les côtés. Définir la frontière avec la même pour tous « solide. 1 pixel. #FFFFFF couleur ». Appuyer sur OK. (La raison pour laquelle nous avons mis une frontière invisible est donc quand nous créons une règle qui plus tard créer une frontière que nous ne voulons pas fausser le positionnement de nos éléments.)
11) Pour chaque bouton rollover choisir les boutons comme la « classe » dans la fenêtre Propriétés.
12) Créer une nouvelle règle CSS à affecter lorsque les boutons de renversement ou sur moused. Créez juste le même que l'étape 9 ne l'appeler « buttonsover », rembourrage de 10 pixels et une bordure de « solide. 1 pixel. Couleur # 990000 ».
13) Sélectionnez « Image1 » à nouveau et dans la fenêtre Behaviors faites un clic droit sur « Image Swap » et choisissez « Ajouter un nouvel élément de liste ». Clic gauche dans la nouvelle onMouseOver espace et tapez "Image1.className = 'buttonsover'". (Cela peut aussi être répétée pour toutes les autres images survolées.)
14) Dans la fenêtre des comportements dans la onMouseOut assign champ "Image1.className = 'boutons'". Cela rendra le revert classe lorsque vous passez la souris sur. Pour ce faire, pour toutes les images de roulement.
Cela devrait vous donner l'idée de base de certaines choses que vous pouvez faire avec les fonctions de roulement dans Dreamweaver CS3.
D'abord, vous devrez télécharger les fichiers de projet ici.
Le contenu de classe « movinvis » Goes Here
L'objet de ce tutoriel est d'afficher une vidéo lorsque vous capotage un élément. Nous allons commencer par créer les classes CSS que nous attribuerons à la div espace réservé tout au long de ce tutoriel.
1) Dans la fenêtre CSS cliquez sur l'icône « Nouvelle règle CSS ». le type de sélection sera « classe », appelez le nom de la classe « movinvis » et il devrait être créé pour ce document uniquement.
2) Dans la fenêtre de définition de la règle CSS sélectionnez la catégorie « positionnement » et définir le type de position absolue, la visibilité cachée, et le z-index à 999. (positionnement absolu fait la classe pas pousser d'autres éléments autour d'elle, et plus z-index mettra la classe au-dessus des autres éléments.) Appuyez sur OK.
3) Encore une fois créer une nouvelle règle CSS le même que dans les étapes 1 et 2 mis uniquement le nom de la classe « movvis » et réglez la visibilité sur visible.
4) Insérez une nouvelle div en allant dans le menu Insertion> Objets mise en forme> Div Tag. Ne définissez pas de propriétés pour la div encore et appuyez sur OK.
5) Sélectionnez le nouveau div et dans la fenêtre des propriétés de la division ID mis à « movtarget » et la classe « movinvis ».
Maintenant que le div espace réservé est configuré pour recevoir nos films Créons les boutons qui seront utilisés pour les renversements. Cette fois, pour plus de simplicité, nous utiliserons simplement le texte.
6) Placez votre curseur au-dessus de la div invisible et tapez « 1 film », sélectionnez le texte, et en faire un lien hypertexte. Mettez « # » comme nom de fichier ou URL. (Vous pouvez répéter cette étape pour configurer les survols pour « Movie 2 » et « Movie 3 »
Ensuite, nous allons insérer les films que nous voulons attribuer à la div en utilisant les liens de roulement. Ensuite, nous allons les affecter au onMouseOver div de nos liens. Enfin, nous attribuons les classes onMouseOver et onMouseOut de sorte que le div est visible lorsqu'un film est affiché.
7) Allez dans le menu Insertion> Médias> Flash et choisissez rollover1.swf. Appuyer sur OK.
8) Sélectionnez la vidéo flash vient d'être inséré et allez dans le menu Affichage> Code. Sélectionnez le code entre la les étiquettes et les copier dans le presse-papiers à coller plus tard.
9) Retour à la vue de conception en allant dans Affichage> Conception. Sélectionnez la vidéo flash et le supprimer.
10) Sélectionnez le lien « Movie 1 » et dans la fenêtre des comportements appuyez sur la (+) bouton Ajouter comportement. Choisissez Définir texte> Définir le texte du conteneur. Sélectionnez « la movtarget » du conteneur et collez le code copié dans le champ Nouveau HTML.
11) Assurez-vous 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 onMouseOver dans le menu déroulant.
12) Avec le lien « Movie 1 » toujours sélectionné (+) Ajouter un autre comportement appelé « changement de propriété ». Assurez-vous que le type d'élément est « DIV » et ID d'élément est div « movtarget ». Sélectionnez la touche « Entrée: » radio pour la propriété et entrez « className ». Entrez « movvis » pour la nouvelle valeur et appuyez sur OK. Assurez-vous que ce comportement est attribué à l'événement onMouseOver, en cas de changement pas.
13) Répétez l'étape 12 n'attribuez la nouvelle valeur comme « movinvis » et affecter l'action à l'événement onMouseOut.
14) Répétez les étapes 7-13 à "Movie 2" et "Movie 3".
Vous devriez être en mesure d'enregistrer et prévisualiser votre travail maintenant pour voir ce que vous avez fait. Cette technique peut être utilisée conjointement avec un script de positionnement pour obtenir le swf positionné exactement où vous le voulez. Ou configuration différente divs où vous voulez que les films spécifiques et cible l'événement pour y aller. Il existe d'autres façons d'obtenir ce même effet, mais cela est une manière légèrement piraté pour l'obtenir avec des fonctionnalités simples dans Dreamweaver construit juste CS3.
Rollovers dans Adobe Dreamweaver CS3
par Abraham Chaffin 285281887
Faire de l'image principale dans la partie 1 de ce tutoriel un lien hypertexte dans les conditions normales ne doivent pas affecter la fonctionnalité de renversement de l'image. Ce sont deux fonctions distinctes qui fonctionnent indépendamment l'un de l'autre. Essayez simplement faire un lien hypertexte.
Rollovers dans Adobe Dreamweaver CS3
par Lori Stammer 285378064
C'était génial, je cherchais cette capacité pendant un certain temps. Maintenant que les carottes sont miroiter, comment puis-je script pour l'image peut être liée?
Combler Web Design et le développement avec extrait Adobe
En utilisant PHP Pour obtenir des données à partir d'une base de données MySQL
Montrant comment utiliser PHP pour accéder à une base de données MySQL. Construire une application réelle, ce tutoriel est intéressant en ce qu'il montre comment affiner la recherche en fonction de 2 critères différents (2 différents champs MySQL). Enfin, ce tutoriel se termine par donner le code complet pour une page HTML, ainsi que les fichiers PHP.
Travailler avec Photoshop tranches dans Dreamweaver - 3
Lire la vidéo
Dans la troisième partie de cette série de tutoriel vidéo, Richard Williams montre comment convertir des images en images de fond et le texte mis sur le dessus d'eux à l'intérieur de Dreamweaver. Richard applique ensuite un style CSS au texte HTML pour faire correspondre avec la conception dans Photoshop.
Dans ce tutoriel, CreativeCOW leader Richard Williams explique les principes du menu Spry et répond aux questions les plus fréquemment posées.
Notions de base CSS dans Adobe Dreamweaver
Ce tutoriel est conçu pour introduire les concepts de l'utilisation de CSS dans Adobe Dreamweaver et HTML pour les concepteurs Web qui ne sont pas familiers avec CSS dans la conception web. CSS signifie Cascading Style Sheet et est un système permettant d'ajouter un style à vos pages Web et le contenu de la page Web.
Articles / Tutoriels récents:
Adobe Premiere Pro: Modifier plus rapide avec superposition d'édition
Éditeur, artiste VFX, propriétaire après maison et plug-in développeur Simon Ubsdell vous montre comment modifier plus rapidement et plus facilement en utilisant la très utile, mais pas souvent connu-sur la fonction d'édition de superposition dans Premiere Pro. Ce tutoriel Quick Tip offre également des conseils sur le regroupement.
Avez-vous d'éditer comme un sculpteur, ou comme un briqueteur? Il semble assez simple question, mais comme éditeur de longue date, le propriétaire de la maison après et développeur de logiciels VFX Simon Ubsdell montre, les conséquences sur la façon dont cela affecte la façon dont vous modifiez peut être profonde. Son conseil, quel que soit l'endroit où vous atterrissez sur le spectre? Toujours l'édition.