Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Créer des couches avec Dreamweaver

 

Les zones réservés aux couches sont des éléments spéciaux d'HTML qui peuvent être utilisées pour contenir d'autres éléments HTML et pour les montrer dynamiquement à l'aide de scripts Java. Nous pouvons empiler plus d'une couche sur l'autre. Une ou plusieurs couches peuvent être rendues visibles de manière dynamique en cachant d'autres. A l'aide de Dreamweaver, vous pouvez faire tout cela sans même savoir JavaScript ou le codage.

L'inconvénient avec des couches est,qu'elles peuvent être vues seulement avec des navigateurs récents. Ici, dans ce tutoriel permettez-moi de supposer que vous utilisez une version à jour de votre navigateur.

Dans ce tutoriel, nous allons utiliser des couches multiples empilées les unes sur les autres, et les rendre visibles lorsque la souris survole (passe au dessus de) une image. Dans cette étude de cas j'ai pris 2 images de survol Image1, image 2 et trois couches: Layer1, Layer2 et Layer3.

Lorsque nous avons de la souris sur le Image1, la deuxième couche apparaîtra alors Layer1 et Layer 3 seront cachés avec leur contenu. De même pour l'image 3, Layer1 et 2 seront caché et Layer3 apparaîtra avec son contenu. Lorsque nous avons la souris hors de la couche l'image 1 va revenir. Pour atteindre ceci, suivez les étapes et profitez-en!

Création d'images de survol

D'abord comme je l'ai dit pour les 2 images, nous pouvons utiliser Fireworks pour créer des images, dans notre cas j'ai conçu 4 boutons, 2 pour l'état haut et 2 pour l'état bas. Après la conception des boutons, ouvrez une nouvelle page dans Dreamweaver, créez une table 2X1. Maintenant Insérez les images à l'aide, Insertion> Objets image > Image survolée. Parcourez et sélectionnez le premier pour l'état haut et le second pour l'état bas. (Je suppose que les images sont dans le dossier approprié). Maintenant faites de même pour l'image suivante, de sorte que les deux images soient dans la première colonne de la table, comme indiqué dans cet exemple). Maintenant, il devrait ressembler à ceci.

 

Insérer des couches

Insertion > Objets mise en forme >> div PA et placez le Layer1. Déplacez le calque dans la colonne 2 du tableau. Maintenant, vous pouvez écrire le contenu à l'intérieur de la couche. Sélectionnez le calque dans l'inspecteur Propriétés et sélectionnez visibl. comme «par défaut». Cela rend cette première couche par défaut et la rend visible tandis que la page soit

Les éléments de la couche 2 apparaîssent ici.

chargée.

Couche DreamweaverPropriétés de la couche Dreamweaver

Notez la position de la couche à 200px X 115px. Insérer les deuxième et troisième couches sur la même position, de sorte qu'ils se reposent

Ici la couche 3 avec son contenu.

Image 5

Image 6

sur la première couche. Maintenant, insérez le texte sur ces couches. (Remarque: En raison de lasuperposition des couches le texte peut ne pas être clair alors, vous pouvez placer les calques à un autre endroit, écrivez le texte, puis modifiez la position des couches pour se positionner sur la première position des couches.)

Modifier les propriétés des couches

Sélectionner Fenêtre > Eléments PA. Vous obtiendrez l'inspecteur des couches avec tous les détails sur les trois couches. Sélectionnez ApDiv3 et ApDiv4 et si l'œil est ouvert, cliquez sur sa fermeture pour chacun d'eux. Dans l'Inspecteur des propriétés que vous pouvez voir la visibilité est sélectionnée comme cachée pour ApDiv3 et ApDiv4. Cela permet à ApDiv3 et 4 d'être cachées tandis que la page est chargée.

Ajouter des comportements

 

Maintenant, sélectionnez l'Image1 où nous allons ajouter les effets de calque dynamiques. Puis Ouvrez Fenêtre > Comportements. Vous pouvez voir les événements et les actions créées par Dreamweaver pour les images de survol que nous avons fait dans l'étape 1.

Cliquez sur le

le bouton et sélectionnez "Afficher-masquer les calques". Vous obtiendrez cette case à cocher "Afficher ou masquer" les couches. Maintenant, faites ce qui suit ...
a. Sélectionnez Layer1 que cliquer sur «Masquer»
b. Sélectionnez Layer2 et cliquez sur «Afficher», puis,
c. Sélectionnez Layer3 et cliquez sur «Masquer». Cette action fera l'Layer1 et 3 à disparaître et de montrer la Layer2 pendant que vous déplacez votre souris sur l'Image1.

Vous pouvez également voir les nouveaux événements JavaScript créé par Dreamweaver dans l'inspecteur des comportements. Voici la nouvelle onmouseover et onmouseout avec Show-masquer les calques comme des actions.

Notez ici, vous pouvez utiliser d'autres événements également que vous le souhaitez. Par exemple au lieu de onmouseover vous pouvez utiliser onclick. Pour ce faire, vous devez cliquer sur le petit noir, flèche inversée en regard à l'événement. Utilisez cette option pour sélectionner d'autres événements, c.-à-onclick, Bas etc. Au pied de la liste il ya une catégorie qui vous permet de choisir les navigateurs pour soutenir, assurez-vous que le chèque est à côté de navigateurs 4 et plus. (Seulement après avoir choisi le navigateur 4 ou supérieur, vous serez en mesure de voir tous les événements dans une liste)

Suivez l'étape 4 en sélectionnant Image2. Puis, a.Sélectionnez Layer1 que cliquer sur «Masquer»; b.Select Layer2 et cliquez sur «Masquer», puis, c.Select Layer3 et cliquez sur "Afficher". Cette action fera l'Layer1 et Layer2 à disparaître et de montrer la Layer2 pendant que vous déplacez votre souris sur l'Image1.

Image 6  
Image 7  

 

Assigner une couche par défaut

 

Or, comme une étape finale, vous avez besoin pour ramener le Layer1 lorsque vous déplacez votre souris sur l'image (ou la souris lorsque vous loin des images à quelque part sur cette page). Sélectionnez le Image1 et cliquez sur le
le bouton et sélectionnez "Afficher-masquer les calques". Vous obtiendrez cette case à cocher "Afficher ou masquer" les calques.
Maintenant, faites ce qui suit ...
une. Sélectionnez Layer1 que cliquer sur "Afficher"
b. Sélectionnez Layer2 et cliquez sur "caché", puis,
c. Sélectionnez Layer3 et cliquez sur «Masquer».

Cette action fera l'Layer2 et Layer3 à disparaître et de montrer la Layer1 pendant que vous déplacez votre souris sur l'Image1. Aussi, ne pas oublier de changer les événements à onmouseout.

Répétez l'étape 5 avec Image2 aussi. Maintenant vous devriez obtenir l'inspecteur comportement comme celui-ci l'image, montrant tous les événements à la fois pour Image1 et l'image2.

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter