Créer un pop-up avec DreamWeaver

Transcription

Créer un pop-up avec DreamWeaver
Créer un pop-up avec DreamWeaver
Pour créer un POPUP, nous avons besoin de trois choses; l'objet, l'action et l'événement. On peut résumer en disant:
lorsque l'internaute clique (événements Onclick) sur la petite image, ou le lien (objet), une fenêtre du navigateur (action)
s'ouvre et affiche la grande image ou le texte.
Ensuite, préparez tous vos documents. Vous avez besoin de votre image réduite (la vignette) et de l'image agrandie. Un
conseil, il ne faut jamais réduire les dimensions d'une image avec Dreamweaver. Vous ne faîtes que diminuer la hauteur et
la largeur. Le poids fichier reste identique. Le but recherché des vignettes est justement d'alléger la page au chargement.
Utilisez un logiciel de retouche d'image comme Photoshop.
// 1. Introduisez votre vignette sur votre page
// 2. Créez un nouveau document htm (Fichier - Nouveau). Enregistrez-le déjà dans votre dossier du site. Faîtes Modifier Propriétés de la page. Le titre est le nom qui s'affichera sur le pop-up. Pour toutes les marges, indiquez la valeur 0. Cela
aura pour effet de supprimer les bords blancs.
// 3. Dans cette nouvelle page, introduisez votre image agrandie ou un tableau contenant le texte à afficher. Enregistrez la
page et fermez-la.
// 4. C'est le moment de travailler avec le comportement de pop up. Mais avant ça, il faut définir la
version du navigateur des internautes. Actuellement, la majorité dispose d'une version égale ou
supérieure à Internet Explorer 4.0 Les versions antérieures supportent très peu de comportements.
Pour se faire, cliquez sur puis "Afficher les éléments pour" et sélectionnez IE 4.0
// 5. Sélectionnez votre vignette ou votre texte et dans le champ lien de la palette des propriétés mettre « javascript : ».
Cliquez sur
dans le panneau des comportements. Choisissez "Ouvrir la fenêtre Navigateur". La fenêtre ci-dessous
apparaît.
Dans l'"URL à afficher", cliquez sur le bouton Parcourir pour rechercher votre page htm que vous avez créée. Indiquez les
dimensions de l'image ou du tableau créé dans le document précédent. Dans notre cas, la photo fait 600 pixels de large sur
402 pixels de haut. Cliquez sur OK.
// 6. Dans le panneau de comportement apparaît l'effet voulu. En principe l'événement est onClick (par défaut). C'est-à-dire
qu'il se déclenche lorsque le curseur clique sur l'image, si OnClick n’est pas disponible, saisir dans le champ lien
« javascript :; ».
Si vous avez un autre événement, cliquez sur le comportement puis sur
Il n’y a plus qu’a faire F12 et à tester.
. Vous trouvez la liste des événements.