Comment créer des swaps avec plusieurs images dans dreamweaver
Avant de commencer la création d'une conception de page plus complexe avec le comportement d'échange d'image de Dreamweaver, regardez une page fini. Avec le comportement d'échange d'image, vous pouvez remplacer une ou toutes les images sur une page.
Sommaire
- Créer une conception de la page avec toutes les images que vous souhaitez afficher initialement.
- Nommez vos images dans l'inspecteur des propriétés.
- Choisissez window-comportements.
- Sélectionnez une image.
- Choisissez le comportement d'échange d'image.
- Spécifier les images pour échanger dans la boîte de dialogue d'échange d'image.
- Au bas de la boîte de dialogue d'échange d'image, sélectionnez l'option précharger les images de charger le navigateur de charger toutes les images dans la mémoire cache lorsque la page est chargée.
- Si vous voulez, désélectionner les images de restauration onmouseout option.
- Après avoir spécifié tous les paramètres pour le comportement, cliquez sur ok.
- Spécifiez un événement pour le comportement.
- Appliquez des comportements supplémentaires.
- Testez votre travail dans un navigateur.
Lorsque vous utilisez le comportement d'échange d'image, il est important de réaliser toutes les images que vous allez troquer la même taille (hauteur et largeur). Si les images ne sont pas de la même taille, toutes les images sauf la première seront étirées ou compressées pour adapter l'espace occupé par la première image insérée dans la page.
Si vous utilisez le comportement de permutation d'images avec une série d'images qui ne sont pas tous de la même hauteur et la largeur, vous avez un peu d'options:
Recadrer les plus grandes de sorte que toutes les images sont de la même taille.
Réaliser des images horizontales et verticales occupent le même espace dans votre conception en combinant deux images verticales pour chacun horizontale. Il suffit de créer un fichier dans un programme tel que Photoshop, insérer deux images verticales dans le même côté du fichier à côte, puis taille d'image afin que le fichier est la même taille que une image horizontale.
Créer un fichier d'image de la taille de votre image la plus grande, comme arrière-plan une couleur neutre, comme le noir ou blanc, puis insérez toutes les autres images sur l'arrière-plan de sorte que vous pouvez les sauver tous avec la même taille de fichier.
Suivez ces étapes pour utiliser le comportement d'échange d'image:
AgrandirCréer une conception de la page avec toutes les images que vous souhaitez afficher initialement.
Chacun des trois photos dans la conception de la page pour le Tower Bridge à Londres possède deux copies: une vignette et un version plus grande. Lorsque la première page chargée dans un navigateur web, tous les trois images miniatures sont positionnés sur le bas de la page, avec la première des versions plus grandes correspondants affichés dans la zone principale, juste au-dessus des vignettes.
AgrandirNommez vos images dans l'inspecteur des propriétés.
Pour cibler vos images avec javascript, ce qui est le fonctionnement des comportements, donner d'abord chaque image un identifiant unique. L'image ID est pas le même que le nom du fichier image ou le texte
Choisissez Window-Comportements.
Le panneau Comportements ouvre. Vous pouvez faire glisser le panneau Comportements ailleurs sur la page, et vous pouvez étendre en faisant glisser le bas ou le côté. Vous pouvez également fermer tous les autres panneaux ouverts à faire plus de place en cliquant sur la barre gris foncé au sommet de tout panneau.
AgrandirSélectionnez une image.
Sélectionnez l'image dans la page qui servira de déclencheur pour l'action.
Choisissez le comportement d'échange d'image.
Avec l'image de déclenchement sélectionné dans l'espace de travail, cliquez sur le signe plus dans le panneau Comportements pour ouvrir la liste déroulante des actions, et choisissez l'action que vous souhaitez appliquer.
AgrandirSpécifier les images pour échanger dans la boîte de dialogue d'échange d'image.
Dans la liste des images, sélectionnez l'ID de l'image qui va être remplacé. Cliquez sur le bouton Parcourir pour sélectionner l'image qui remplace l'image principale. Si l'image est pas déjà sauvegardé dans le dossier du site local, Dreamweaver vous proposera de le copier là pour vous.
Au bas de la boîte de dialogue d'échange d'image, sélectionnez l'option Précharger les images de charger le navigateur de charger toutes les images dans la mémoire cache lorsque la page est chargée.
Si vous ne sélectionnez pas cette option, un retard peut se produire lorsque l'image swap est utilisé.
Si vous voulez, désélectionner les images de restauration onmouseout option.
La restauration Images onmouseout option signifie que lorsqu'un événement est terminé (comme lorsque la souris est déplacée au large de la vignette de déclenchement), l'image originale est remplacé. Par défaut, Dreamweaver présélectionne cette option pour le comportement d'échange d'image. Vous pouvez désactiver cette option si vous trouvez que le remplacement de l'image originale à chaque fois que vous roulez le curseur sur une autre vignette est distrayant.
Après avoir spécifié tous les paramètres pour le comportement, cliquez sur OK.
Le nouveau comportement apparaît dans le panneau Comportements.
AgrandirSpécifiez un événement pour le comportement.
Après l'action est appliquée, vous pouvez revenir en arrière et de spécifier quel événement va déclencher l'action. Par défaut, Dreamweaver applique la onmouseover événement lorsque vous utilisez l'action d'échange d'image, mais vous pouvez changer ce cas une quelconque disponibles, tels que Sur clic, qui exige que l'utilisateur clique sur l'image pour déclencher l'action d'échange d'image.
Appliquez des comportements supplémentaires.
Pour appliquer le comportement d'échange d'image à d'autres images sur une page, répétez les étapes 5-10, en cliquant pour sélectionner l'image que vous voulez servir comme un déclencheur et en spécifiant l'image correspondante qui doit être échangé.
AgrandirTestez votre travail dans un navigateur.
Vous ne pouvez pas voir les effets des comportements comme celui-ci jusqu'à ce que vous cliquez sur le bouton Live View en haut à gauche de l'espace de travail dans Dreamweaver ou un aperçu de votre page dans un navigateur Web.
Comment ajouter des images à votre site Web dans Dreamweaver Ajout d'une image à votre page Web peut sembler presque magique d'abord parce que le processus est si simple avec Dreamweaver. Le défi avec des graphismes Web ne sont pas les ajouter à vos pages, mais la création de bonnes prospectifs images qui…
Comment créer une image simple de renversement dans Dreamweaver Les transferts sont une telle fonctionnalité populaire que Dreamweaver comprend une boîte de dialogue spéciale juste pour les renversements: la boîte de dialogue Insérer l'image survolée. Images de survol, comme son nom l'indique, sont conçus…
Comment créer des substitutions dans Adobe Dreamweaver CS6 Dans Adobe Dreamweaver CS6, vous pouvez insérer des objets d'image, y compris les espaces réservés d'image, rouler images (images qui changent quand un spectateur déplace la souris sur l'image), les barres de navigation et Fireworks HTML. Vous…
Comment insérer une image de fond dans Dreamweaver Les images de fond peuvent ajouter de la profondeur et la richesse à une conception de la page de Dreamweaver. Utilisé intelligemment, une image de fond qui télécharge rapidement et efficacement contribue à créer l'illusion que la page…
Comment passer photoshop objets intelligents dans Adobe Dreamweaver CS6 La possibilité de travailler avec des fichiers Photoshop dans Adobe Dreamweaver CS6 est utile pour la plupart des concepteurs qui dépendent de Photoshop dans le cadre de leur flux de travail. Lorsque vous placez les fichiers Photoshop sur une…
Comment utiliser une image comme arrière-plan dans Adobe Dreamweaver CS6 Création de décors pour des pages Web dans Adobe Dreamweaver CS6 est amusant et peut être poursuivi de plus de manières que la plupart des gens ne l'imagine. Vous pouvez créer un motif répétitif avec une seule petite image, créer un…
Comment utiliser le comportement d'ouverture de la fenêtre du navigateur dans dreamweaver Vous pouvez utiliser des comportements dans Dreamweaver pour créer de nombreuses fonctionnalités interactives, telles que l'ouverture d'une nouvelle fenêtre de navigateur lorsque quelqu'un clique sur une image ou un lien texte. Ouverture d'une…
Le placement de l'image dans Adobe CS5 pages dreamweaver Vous pouvez utiliser les éléments de menu, copier et coller, et même faire glisser et déposer des images sur votre page de Dreamweaver d'Adobe Creative Suite 5 (CS5 Adobe). En conséquence, de mettre des images sur une page web dans Dreamweaver…
Renversements d'image dans Adobe CS5 Dreamweaver Dans Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, vous pouvez insérer des objets d'image, y compris les espaces réservés d'image, les images de survol (des images qui changent quand un spectateur déplace la souris sur l'image), barres de…
Photoshop objets intelligents dans Adobe CS5 Dreamweaver Si vous avez créé les illustrations ou images préparées dans Photoshop, vous pouvez placer des fichiers PSD originaux directement dans vos Adobe Creative Suite 5 (CS5 Adobe Dreamweaver) pages. La fenêtre de prévisualisation de l'image vous…
Comment insérer des images à partir du Web dans Excel 2,013 En plus de télécharger clip art à partir du site Microsoft Office pour une utilisation dans Excel 2013, vous pouvez également télécharger des photos depuis le Web en utilisant le moteur de recherche Bing. Pour télécharger une image avec…
Création d'une image survolée dans Dreamweaver CS3 Dans Dreamweaver, les images de survol - comme son nom l'indique - sont conçus pour réagir quand quelqu'un lance un curseur sur une image. L'effet peut être aussi dramatique que l'image d'un chien étant remplacé par une image d'un lion, ou…
Comment télécharger une page vignette sur Squarespace Vignettes de page sont utilisés pour certaines fonctionnalités de votre site. Squarespace, il est facile de les ajouter à votre site. Par exemple, certains modèles utilisent commeLa vue d'index pour les pages ajoutées dans la zone de navigation…
Comment télécharger des images sur Squarespace Les images sont importantes, car elles ajoutent un attrait visuel important pour la conception de votre site web. Vous pouvez obtenir une image sur votre site Web grâce Squarespace de trois façons:Glissez et déposez l'imageSélectionnez et…