Calques

Transcription

Calques

Créer un site Web avec DreamWeaver
Calques
Dans Dreamweaver, un calque est un conteneur (souvent balise <div></div>) destiné à faciliter la mise en
forme des documents. Il peut contenir toutes sortes d'éléments HTML (texte, image, tableau, formulaire…).
Un calque peut apparaître, disparaître ou se déplacer à la suite d'une temporisation ou d'une action de
l'utilisateur, en modifiant ces propriétés CSS, éventuellement à l'aide d'un script.
Copiez le dossier tp_calque dans votre dossier personnel. Il possède 2 sous-dossiers images et pages.
Ouvrez le fichier ecran_bonsgrains.gif pour voir le résultat auquel vous devez aboutir. Fermez-le ensuite.
Définissez un site basé sur ce dossier dans Dreamweaver en indiquant le nom du Dossier racine local, et
aussi le nom du Dossier des images par défaut.
1 Création de la page d'accueil
Créez un nouveau document vierge HTML (conforme XHTML) qui sera la page d'accueil du site.
Enregistrez-le dans le dossier tp_calque, à la racine, sous le nom bonsgrains.htm.
Choisissez Modifier > Propriétés de la page puis Titre/Codage. Tapez Les bons grains : graines pour oiseaux
comme Titre. Cliquez sur le bouton Appliquer (sans fermer).
2 Insertion d'un tracé d'image
Ce fichier n'est pas à insérer dans le site mais une image de ce que vous devez obtenir. L'infographiste de
l'entreprise vous a fourni ce dessin de l'écran complet souhaité, optimisée pour un écran de 800x600. Vous
allez la placer comme guide pour tracer vos zones de textes et d'images dans la fenêtre. Cette image sera
ensuite supprimée, une fois que nous aurons placer les images et textes correspondant.
Dans la même boite de dialogue, dans Catégorie, choisissez Tracé de l'image.
Cliquez sur le bouton Parcourir, et choisissez le fichier ecran_bonsgrains.gif.
Remarque : le contenu de la fenêtre Internet Explorer occupe 783 x 501(pixels) en résolution 800x600.
Réglez la transparence de l'image à environ 50% pour différencier cette image des éléments à ajouter.
Cliquez sur OK.
3 Affichage du panneau calque
Fenêtre > Calques (ou touche F2) permet d'afficher le panneau de calques.
Cochez le cas échéant la case Empêcher le chevauchement. Si on empêche le chevauchement des cadres,
les calques peuvent être convertis en tableaux (ce qui était utile avec d'anciennes versions de navigateur
ne comprenant pas les cadres).
4 Insertion de calque par menu
er
Insérez un 1 calque dans le fichier avec Insertion > Objets de mise en forme > Calque. Le calque apparait.
Cliquez dans le calque. Choisissez Insertion > Image et sélectionnez dans le dossier Images le fichier
logo.gif. Le calque s'agrandit à la taille du logo. Mettez comme texte alternatif à l'image (zone Sec de
l'inspecteur de propriétés : Logo de l'entreprise Les bons grains.
5 Insertion de calque par tracé
Cliquez si besoin sur Affichage > Grille > Afficher la grille pour afficher une grille qui servira de répère.
Cliquez si besoin sur Affichage > Grille > Aligner sur la grille. Les calques seront attirés par la grille.
Dans le panneau Insertion (zone d'outils sous la barre de menu), choisissez la barre d'outil Mise en forme,
puis dans les icones proposées, cliquez sur le bouton Dessiner un calque (ou faire Insertion > Mise en forme >
Calque)
Université de Marne-la-Vallée
DreamWeaver MX 2004 (v.7)
Novembre 2006
F. Petit / DW_MX7_calque.doc
1/7
Cliquez-glissez le pointeur de souris dans le document pour tracer le rectangle qui entoure les 3 boutons
du menu (accueil, produits, contacts) selon le découpage du dessin ci-dessus.
Recommencez pour les 6 autres calques. Les autres zones restent vides.
Cliquez dans le cadre du moulin et insérez l'image moulin.gif du dossier Images. Mettez un texte
alternatif.
6 Sélection de calque
Pour sélectionner l'ensemble du calque, soit cliquer directement sur la
bordure du calque, soit sélectionner le calque dans la liste de la palette
de calques. Des poignées apparaissent.
logo
bandeau
7 Nom de calque
promo- moulin
nourrir
Renommez par une des 2 méthodes
tion
nourriture graine
suivantes chaque calque avec un nom
menu
plus explicite que le nom provisoire
layer. Ce nom doit être court, sans espace, ni caractères spéciaux (ex :
logo, promotion, bandeau, moulin, menu, nourrir, nourriture, graines).
1. Double-cliquez sur le nom du calque (ID du calque) dans la
fenêtre des calques et saisissez le nom souhaité.
2. Sélectionnez le calque et modifiez son nom dans l'inspecteur de propriétés.
8 Insertion de texte par saisie
Cliquez dans le calque Nourrir et tapez Nourrir ses oiseaux. Ne pas se préoccuper maintenant de la mise
en forme des caractères.
9 Insertion de texte par copier/coller
Vous allez maintenant insérer du texte existant en le copiant et en le plaçant préalablement dans un des
calques.
Choisissez Fichier > Ouvrir, et sélectionnez textes_bonsgrains.txt.
Sélectionnez les 2 premières lignes (Nourriture...)
Choisissez Edition > Copier pour copier le texte du document.
Cliquez sur l'onglet du document bonsgrains.htm pour le rendre actif.
Positionnez le curseur dans le calque nourriture.
Choisissez Edition > Coller pour coller le texte dans le calque.
Recommencez avec l'autre texte de textes_bonsgrains.txt pour le placer dans le calque graines.
Fermez le document textes_bonsgrains.txt.
10 Structuration des textes et mise en forme
Créez une feuille de style CSS nommée stylebonsgrains.css avec le panneau Style CSS.
Créez des styles dans cette feuille afin de redéfinir les balises suivantes :
- body (arrière-plan : blanc ; texte : noir ; police : Arial, Helvetica, Sans-serif ; marge:0)
- h1 (texte : vert ; taille : 18px ; police : Verdana, Arial, Helvetica, Sans-serif)
- h2 (taille : 16px ; police : gras)
Sélectionnez Nourrir ses oiseaux et mettez-le en en-tête1 (balise h1) dans l'inspecteur de propriétés.
Sélectionnez Nourriture et mettez-le en en-tête2 (balise h2) dans l'inspecteur de propriétés.
Sélectionnez Les graines et mettez-le en en-tête2 (balise h2) dans l'inspecteur de propriétés.
Par ailleurs, vous devez aussi supprimer les marges hautes et basses que les navigateurs ajoutent au
paragraphes et en-têtes... A vous d'essayer en modifiant le style des balises h2 et p !
11 Choix d'une couleur avec la pipette
Dreamweaver permet de choisir une couleur du document ou de l'environnement avec une pipette.
Vous allez modifier le style h1 de manière à ce que le vert choisi soit exactement celui de la tête du canard.
Vérifiez que le logo avec la tête du canard apparaisse sur votre écran.
Avec le panneau Style CSS, sélectionnez le style h1 puis le bouton
Modifier le style.
Dans la boîte de dialogue, cliquez-glissez sur le carré Couleur pour
amenez l'icône de la pipette sur la tête verte du canard du logo.
Relachez une fois dans la partie verte pour prélever les
caractéristiques de cette couleur.
On peut utiliser la pipette pour choisir la couleur d'arrière-plan d'un
style CSS ou choisir une couleur par l'inspecteur de propriétés.
Novembre 2006
2/7
Image survolée
Vous allez ajouter une image qui change lorsque le curseur vient se placer au-dessus d'elle. Une image à
effet de survol ou de substitution est une image survolée (rollover en anglais). Elle peut avoir un lien ou non.
Placez le point d'insertion dans le calque promotion.
Appuyez sur Entrée pour passer une ligne.
Cliquez sur Insertion > Objets images > image survolée (ou dans le panneau d'Insertion Commun, déroulez
image pour choisir Image survolée).
Une fenêtre s'affiche. Comme nom de l'image, tapez promotion.
Comme image originale, sélectionnez le fichier promo1.gif.
Comme image survolée, sélectionnez promo2.gif.
Cochez la case Précharger l'image survolée.
Comme Texte alternatif, tapez logo promotion.
Complétez la zone Si cliquée, allez à l'URL à l'aide du bouton Parcourir, en sélectionnant dans le dossier
pages le fichier promotions.htm. Si l'on veut modifier ultérieurement le lien, utiliser la zone Lien de
l'inspecteur de propriétés de l'image.
Testez l'image survolée dans le navigateur.
Remarque :
Affichez la fenêtre Comportements de Dreamweaver. Cliquez sur l'image
survolée.
Le survol d'image correspond au comportement OnMouseOver.
Le rétablissement de l'image d'origine au comportement OnMouseOut. Un
comportement est la combinaison d'un événement et d'une action. Pour
modifier un comportement, il faut modifier l'événement ou l'action.
Barre de navigation
Dreamweaver a une fonction qui insère un script qui permet d'instérer une barre de navigation. Une barre de
navigation est composée d'une série d'images survolées qui envoient vers différents liens.
Une image peut avoir jusqu'à quatre états :
- Haut : état normal de l'image, telle qu'elle apparaît initialement au chargement de la page.
- Dessus : image qui apparaît quand le pointeur de la souris survole l'image.
- Abaissée : image qui apparaît lorsque l'utilisateur clique sur l'image.
- Dessus déjà abaissée : image qui apparaît quand le pointeur de la souris survole l'image après un clic.
Cliquez dans le calque bandeau.
Choisissez Insertion >Objets images > Barre de navigation.
Dans le champ Nom de l'élément, tapez un nom
représentatif de l'élément (ex : accueil).
Dans Image haut, sélectionnez accueil1.gif.
Dans Image Dessus, sélectionnez accueil2.gif.
Dans Image Abaissée, sélectionnez accueil1.gif.
omme Texte alternatif, tapez Accueil.
Dans Si cliqué, aller à l'URL, sélectionnez l'emplacement du
fichier lié (ici bonsgrains.htm).
Cochez Précharger les images.
Dans la zone Insérer, choississez horizontalement.
Cliquez sur le bouton + et ajoutez l'élément Produits à la barre de navigation. Les images sont
produits1.gif et produits2.gif. Le lien est sur le fichier produits.htm.
Recommencez avec l'élément contact. Les images sont contact1.gif et contact2.gif. Le lien est de type
mailto:[email protected]
Cliquez sur OK.
Testez la barre de navigation dans le navigateur.
Pour modifier si besoin la barre de navigation, utilisez Modifier > Barre de navigation.
Critique : Que pensez-vous des intitulés de cette barre de navigation ? Sont-ils tous utiles ? Quelle
amélioration peut-on apporter ?
Novembre 2006
3/7
Menu de reroutage
1 Création d'un menu de reroutage
Un menu de reroutage est un menu déroulant dont chaque élément pointe vers un lien.
Vous allez créer un menu de reroutage pour accéder à chaque page de produits.
Il contiendra :
- une invite de sélection
- des liens vers des pages produits.
Cliquez dans le calque menu sous le calque moulin.
Choisissez Insertion > Formulaire > Menu de reroutage.
Dans le champ Texte, tapez - - Choisissez un produit - Dans Options, cochez Sélectionner le premier
élément après le changement d'URL.
er
Le menu présentera de nouveau le 1
élément (l'invite de sélection) après que
l'utilisateur ait choisi un élément du menu.
Cliquez sur le bouton + pour ajouter un autre
élément de menu.
Dans le champ Texte, tapez grains de blé.
Dans le champ Si sélectionné, aller à l'URL,
cliquez sur Parcourir et sélectionnez ble.htm.
De la même manière, ajoutez un élément
grains d'orge associé au fichier orge.htm.
Ajoutez un élément grains d'avoine associé
au fichier avoine.htm.
Cliquez sur OK pour fermer la boîte de
dialogue. Enregistrez votre document.
Vérifiez le menu de reroutage dans un navigateur. En cas d'erreur, sélectionnez le menu de reroutage,
puis, dans l'inspecteur de propriétés, cliquez sur Valeurs de la liste et faites les modifications.
2 Positionnement des calques
Vous allez aligner au maximum les calques entre eux.
Sélectionnez les 2 calques de texte (Nourriture et Graines) en cliquant dessus avec la touche Maj
enfoncée (l'alignement se fera sur le dernier sélectionné).
Alignez leurs bords supérieurs avec Modifier > Aligner > haut.
Alignez en haut les bords supérieurs de moulin et nourrir de la même manière.
Alignez à gauche les bords de moulin et menu de la même manière.
Utilisez Modifier > Aligner > même largeur (ou même hauteur) pour homogénéiser les largeurs des calques
moulin et menu, ainsi que les hauteurs de nourriture et graines.
Améliorez l'alignement des calques en vérifiant dans l'inspecteur de propriété les dimensions suivantes :
G : dimension en pixel entre le bord gauche de la fenêtre et le bord gauche du calque
S : dimension en pixel entre le bord supérieur et le bord supérieur du calque.
L : largeur du cadre
H : hauteur du cadre
3 Régler les options de débordement
Le débordement (zone Visib.), partie du contenu qui déborde des limites d'un calque) peut être réglé à Visible
(contenu toujours visible), Hidden (contenu supplémentaire caché), Default (apparition de barre de défilement
si besoin), Inherit (comme la zone parente).
Réglez tous les débordements de calques ici à Visible.
4 Conversion des calques en tableau
Les calques peuvent être convertis en tableaux pour une meilleure compatibilité avec les anciennes versions
(3 et avant) des navigateurs et avec Netscape Navigator qui les prend mal
en charge.
Dreamweaver va créer des lignes, des colonnes et des cellules de tableau
correspondant aux calques. Pour réduire leur nombre lors de la conversion, il
faut aligner les calques avant de convertir le document.
Choisissez Modifier > Convertir > Calques en tableau.
Cochez les options de Mise en forme du tableau :
- Le plus petit : réduit le nombre de cellules vides
- Utiliser GIF transparents : L'espace entre colonnes et lignes du tableau
Novembre 2006
4/7
sera rempli par un fichier transparent.gif qui se placera au niveau du dossier racine du site.
Dans Outils de mise en page, cochez l'option Empêcher le chevauchement des calques. Il n'est pas possible de
créer un tableau à partir de calques imbriqués ou qui se chevauchent !
Cliquez sur OK. Les calques sont convertis en tableau. Observez le code HTML avec les <table>
<tr><td>.
Il est possible de transformer à l'inverse un tableau en calques. Choisissez Modifier > Convertir > Tableaux
en calques. Remarquez que les calques ont un nom générique (layer1...) et sont adaptés à la taille du
contenu.
5 Utilisation du panneau Historique
En fait, nous allons revenir à nos calques d'origine avant les essais de convertion en tableaux.
Affichez si besoin le panneau Historique. Dans le panneau Historique, cliquez et glissez le curseur situé à
gauche vers le haut jusqu'à revenir à la ligne au dessus de l'étape "Convertir en tableau". Les étapes endessous se retrouvent en grisé.
Enregistrez le fichier.
6 Finition
Vérifiez les liens du site et corrigez-les si nécessaire.
Dans Modifier > Propriétés de la page > Tracé de l'image, effacez le fichier ecran_bonsgrains.gif.
Scénario
Les scénarios Dreamweaver s'appuie sur le Dynamic HTML (DHTML) qui permet de modifier les propriétés
de style ou de positionnement d'éléments d'un document HTML à l'aide d'un langage de script. On peut créer
une animation en modifiant sur une échelle temporelle les propriétés des calques (position, taille, visibilité,
ordre) et des images (source de l'image). Ici, un oiseau, placé dans un calque, va traverser la page d'accueil.
1 Préparation du calque à animer
Créez un calque nommé oiseau à l'emplacement prévu (en bas à droite)
Cliquez dans ce calque et insérez dedans l'image oiseau2.gif.
2 Affichage du panneau Scénario
Affichez le panneau de scénario avec Fenêtre > Scénarios.
3 Ajout d'un élément au scénario
Sélectionnez le calque (pas l'image) oiseau et glissez-le sur la piste n°1.
Renommez la piste Timeline1 en volOiseau.
4 Réglage du panneau Scénario
Cochez Lecture auto pour que le navigateur lance l'animation dès le chargement de la page.
Ne cochez pas Boucle pour cet exercice. L'oiseau ne passe qu'une fois.
Laissez la vitesse de lecture (nombre d'images par seconde = ips) au réglage par défaut : 15.
5 Modification de durée d'un élément du scénario
Cliquez-glissez le point correspondant à la position finale de l'oiseau jusqu'à la position 45 afin d'allonger
la durée de l'animation, par défaut de 15 ips.
6 Déplacement rectiligne d'un élément
Cliquez sur le point correspondant à la position finale de l'oiseau (vers le logo bonsgrains). Dans la
fenêtre document, déplacez le calque pour que l'oiseau soit à gauche de l'écran. L'oiseau, à droite sur
l'image initiale, se déplace de manière rectiligne jusqu'à la position finale de l'animation, à gauche.
Si besoin, dans le panneau Calques, décochez la case Empécher le chevauchement (superposition possible).
7 Test de l'animation
Testez l'animation pas-à-pas avec les flèches de la fenêtre Scénario ou en déplaçant la tête de lecture
rouge de gauche à droite sur l'échelle temporelle.
Testez l'animation dans le navigateur (Bouton Recharger ou Actualiser pour rejouer l'animation).
8 Ajout d'image-clé à une animation
Cliquez avec le bouton droit dans la ligne oiseau à la position 25 et choisissez Ajouter une image-clé.
Placez dans la fenêtre document le calque oiseau vers le moulin.
Recommencez en ajoutant une image-clé à la position 30. Placez l'oiseau sous l'image promotion.
Novembre 2006
5/7
Recommencez en ajoutant une image-clé et la position 35. Placez l'oiseau vers le canard.
Testez. Les images-clés sont les points de rupture du déplacement.
9 Suppression d'une animation
Cliquez avec le bouton droit dans la ligne oiseau de la piste 1.
Choisissez Supprimer le scénario afin de créer un nouveau scénario avec un déplacement plus complexe.
10
Déplacement avec chemin enregistré
Insérez de nouveau le calque oiseau en piste 1 du scénario sur 45 ips.
Vérifiez que la tête de lecture (curseur rouge) soit bien au début de la piste vide.
Faites un clic droit sur la piste du calque oiseau puis choisissez Enregistrer le chemin du calque.
Cliquez-glissez le calque de l'oiseau en oiseau lui faisant faire un mouvement un peu complexe.
11 Ajout d'un arrêt sur image (image fixe) en fin de trajectoire
Cliquez sur le point correspondant à la position finale de l'oiseau dans la piste du scénario. Le calque se
sélectionné, avec cette position.
Cliquez-glissez de nouveau le calque sélectionné de l'oiseau à la fin de la ligne de scénario. Cliquezglissez l'image-clé de quelques images pour la prolonger et donner l'impression d'un arrêt final sur place.
12 Modification de visibilité d'un calque
Sélectionnez le point correspondant à la position finale de l'oiseau sur cette nouvelle animation.
Masquez l'oiseau pour qu'il disparaisse à la fin, soit dans la fenêtre calque en cliquant sur l'œil du calque
oiseau pour le fermer, soit dans le panneau Propriété, en mettant la zone Visib à Hidden.
13 Modification de juxtaposition (ordre d'empilage) de calque
Sélectionnez le calque de l'oiseau.
Dans le panneau Propriété, changez la zone Index Z qui correspond à l'empilement des calques. Si l'index
du calque est inférieur à celui d'un autre calque, il est en-dessous, s'il est supérieur, il est au-dessus.
Changez l'index d'autres calques si besoin pour que l'oiseau passe sous un calque et sur un autre.
Comportements
Les comportements sont des segments de code JavaScript pré-écrits. Chaque comportement est la
combinaison d'un événement et d'une action.
Exemple : lorsque la souris survole une image (c'est l'événement), l'image change d'aspect (c'est l'action
déclenchée par l'événement).
Remarque : il est parfois nécessaire d'insérer préalablement un lien nul (lien vers l'adresse #) sur un objet
pour sélectionner l'objet et permettre l'application de comportement.
Affichez la fenêtre de comportement avec Fenêtre > Comportements.
1 Principe général (à lire simplement)
Sélectionner l'élément (texte hyperlien, image, balise <body>…) auquel va être appliquer le comportement.
Dans la fenêtre Comportements, cliquer sur le bouton + .
Choisir dans le menu déroulant le comportement recherché.
Compléter les paramètres de ce comportement dans la boîte de dialogue.
Choisir dans le menu déroulant Afficher les événements pour puis choisir les versions de navigateurs.
Choisir dans le menu déroulant Evénements l'événement voulu (la liste diffère selon les navigateurs).
Pour modifier une action, double-cliquer dessus et modifier les paramètres.
2 Comportement "Jouer le son"
En bas, sous la fenêtre document, cliquez sur la balise <body> afin de sélectionner le document.
Dans le panneau Comportements, cliquez sur le bouton + (signe plus) et choisissez dans le menu
déroulant le comportement Jouer le son.
Cliquez sur Parcourir et sélectionnez le fichier ugc.mp3 du dossier son. Cliquez
sur OK. Testez.
Modifiez le son (double-clic sur Lire le son du panneau Comportements) pour
tester l'autre fichier son.
Remarque : Certains navigateurs nécessitent une prise en charge externe du son
(par exemple un plug-in audio) pour la reproduction des sons. En cas de problème,
testez dans un autre navigateur.
3 Comportement "Ouvrir la fenêtre du navigateur"
Novembre 2006
6/7
Dans la cellule de l'image Promotion, saisissez le texte Recevoir notre lettre d'information selon l'exemple
ci-contre.
Dans l'inspecteur de propriété, tapez dans la zone Lien le caractère #. Il correspond à un lien "nul".
Sélectionnez ce texte.
Dans la fenêtre Comportements, choisissez le comportement Ouvrir la fenêtre navigateur.
Choisissez les paramètres de la fenêtre.
Validez.
Réglez pour que le comportement se déclenche lors d'un
clic sur le texte.
Testez et modifiez éventuellement les paramètres par un
double-clic sur l'action.
Créez un style dans la feuille CSS pour le type de
sélecteur avancé a:link (couleur de texte rouge).
Dupliquez le style de a:link (clic droit > Dupliquer) pour
l'appliquer à a:active, ainsi qu'à a:visited.
Créez un style CSS pour le type de sélecteur avancé a:hover (couleur de texte vert au survol).
Remarque : Dans la feuille de style, l'ordre doit être: a:link, a:visited, a:hover,a:active.
4 Comportement "Vérifier le formulaire"
Ouvrez le fichier informations.htm.
Sélectionnez le formulaire form avec le sélecteur de balise, en bas de la fenêtre du document.
Dans le panneau Comportements, choisissez le comportement
Valider le formulaire. Cochez Obligatoire et Adresse électronique.
Testez en complétant le formulaire avec une adresse vide, puis
une adresse sans @, puis sans domaine principal (ou top
domain, comme .fr).
Notez chaque partie de message exact en anglais. A l'aide du
menu Edition > Rechercher et remplacer, recherchez dans le
code source de ce document, chaque partie de texte anglais et remplacez-le par sa traduction.
Testez de nouveau les messages d'erreurs et améliorez la traduction si nécessaire.
Remarque : Comme le fichier n'est pas en xhtml, convertissez-le avec Fichier Convertir > XHTML.
Observez le code : les <br> sont transformés en <br />, un en-tête est ajouté...
Dans le panneau Style CSS, liez ce fichier à la feuille de style du site.
Dans le panneau Style CSS, ajoutez un style pour ce document seulement, qui redéfinit la balise body
avec un arrière-plan vert comme les boutons du menu de navigation (à prelever avec la pipette) et des
marges de 15px.
5 Comportement "Permuter une image" (faire une image survolée)
Ce comportement permet d'afficher une image survolée.
Supprimez l'image du moulin.
Insérez à la place moulinF.gif (image du moulin mais fixe) avec comme texte alternatif "Moulin" (zone
Sec de l'inspecteur de propriété) et comme nom "moulin" (zone de gauche de l'inspecteur de propriété).
Sélectionner cette image et dans le panneau Comportements, choisissez Permuter une image.
Indiquez moulin.gif (l'image animée) comme image permutée (définir la source à...). Cochez les cases
demandant de précharger et de restaurer le survol en onMouseOut (pour revenir au moulin fixe, à la
sortie du survol). Validez et testez l'image au survol et à la sortie du survol.
Dans le panneau Comportements, remarquez 2 comportements : onMouseOver (survol) et onMouseOut
(sortie du survol).
6 Comportement "Lire un scénario"
Nous allons modifier le déclenchement du scénario : ce ne sera plus le chargement du document mais un
clic sur le moulin qui va déclencher le scénario.
Affichez le panneau Scénario puis décochez Lecture auto.
Sélectionnez l'image de moulin dans le document.
Dans le panneau Comportements, choisissez Scénario > Lire un scénario.
Sélectionnez le scénario volOiseau. Validez
Dans le panneau Comportements, déroulez l'événement onLoad correspondant au comportement Lire un
scénario pour le remplacer par onClic. Attention à ne pas modifier les autres comportements.
Testez au survol du moulin puis au clic.
Novembre 2006
7/7

Calques

Transcription

Documents pareils

Formation Photoshop Initiation

Comment fabriquer un gif animé avec Photoshop

Repoussage d`après une carte

C dans lʼair : 21 août 2007 (Krach boursier, vendre ou pas ?)

Télécharger le PDF

Créer un menu avec paint

Signet avec une image dans le texte

DEVOIR MAISON : La répartition mondiale des volcans

Tutorial Photoshop Elements (7)