Exemple Dreamweaver MX : compétences en application d’images

Accélérez les téléchargements d'images

S'il y a trop d'images dans la page Web, cela affectera la vitesse de navigation. Dreamweaver peut facilement configurer des images préchargées pour accélérer le téléchargement des images, permettant ainsi au site d'apparaître devant les utilisateurs le plus rapidement possible.

La description de l'effet consiste à créer un fichier et à précharger d'abord l'image afin que l'image soit téléchargée dans le cache à l'avance afin d'accélérer la vitesse de téléchargement de l'image. Pour connaître l'effet réel, veuillez parcourir le fichier "Exemple 36 - Accélération de la vitesse de téléchargement des images" dans le répertoire "Dreamweaver MX 2004 100 Exemples" sur le CD fourni avec le livre.

Pensées créatives Ouvrez la nouvelle page du logiciel Dreamweaver MX 2004, puis ouvrez le panneau d'étiquettes et sélectionnez l'option [Précharger l'image] dans [Comportement] pour accélérer le téléchargement des images.

Étapes de fonctionnement

(1) Créez un nouveau fichier, l'opération est illustrée à la figure 36-1.



(2) Enregistrez la page et insérez l'image. Afin de ne pas demander de chemins relatifs lors de l'insertion d'images, enregistrez d'abord la page sous "36.htm". Insérez ensuite l'image à précharger, comme indiqué dans la figure 36-2.


Figure 36-2 Insérer une image

(3) Ajouter la fonction "précharger l'image". Utilisez le panneau de comportement de Dreamweaver pour ajouter la fonction « précharger l'image », comme illustré dans la figure 36-3.

(4) Sélectionnez l'image à précharger et l'opération est comme indiqué sur la figure 36-4.

Astuce : S'il y a plusieurs grandes images sur le site, vous pouvez cliquer sur l'icône [+] au-dessus de [Preload Image] pour ajouter plusieurs images de préchargement. L'opération spécifique est la même que celle illustrée dans la figure 36-4.

(5) Enregistrez le fichier pour terminer l'opération. De cette façon, la vitesse de téléchargement des images peut être accélérée, de sorte que les utilisateurs n'attendent pas trop longtemps lorsqu'ils naviguent sur le Web, ce qui est d'une grande importance pour améliorer les performances du site Web.

Images publicitaires aléatoires

Lorsqu'ils parcourent une page Web, les internautes peuvent constater que les images publicitaires mises à jour dynamiquement sur la page Web sont plus dynamiques et attrayantes que les images statiques et fixes. Comment créer des images publicitaires aléatoires dans des pages Web est la question à étudier dans cet exemple.

Effet Description Lors de la navigation sur une page Web, une image publicitaire apparaîtra dans la zone de bannière de la page Web, comme le montre la figure 38-1. Par la suite, l'image publicitaire est mise à jour toutes les deux secondes et l'image publicitaire apparaît de manière aléatoire, comme le montre la figure 38-2.

Idées créatives En utilisant le plug-in d'extension Advance_Random_Images de Macromedia, vous pouvez facilement créer des images publicitaires aléatoires dans des pages Web.

Étapes de fonctionnement

(1) Installez le plug-in. Utilisez la commande [Command] | [Extension Management] dans la barre de menu pour afficher la boîte de dialogue [Macromedia Extension Manager] et installez l'extension Advance_Random_Images, comme illustré dans la figure 38-3.

(2) Appelez la commande. Ouvrez le fichier bannière.htm dans le dossier source de cet exemple, placez le curseur à l'emplacement où vous souhaitez insérer la publicité et appelez la commande [AdvancedRandomImages], comme indiqué dans la figure 38-4.

(3) Définissez l'image. Définissez les propriétés de transformation d'image dans la boîte de dialogue [RandomImages] qui apparaît, comme illustré dans la Figure 38-5.

(4) Ajoutez des images. Ajoutez la première image publicitaire, comme indiqué dans la figure 38-6.

Astuce : Les images utilisées dans cet exemple sont placées dans le dossier bannière du dossier matériel de cet exemple.

(5) Utilisez ensuite la même méthode pour ajouter d'autres images. Une fois l'ajout terminé, cliquez sur le bouton [OK] pour confirmer l'opération, comme indiqué sur la figure 38-7.

(6) Enregistrez ensuite le fichier de page et prévisualisez-le, et l'effet de l'image publicitaire aléatoire sera créé. Les lecteurs peuvent se référer au fichier d'effet bannièreok.htm dans le dossier matériel de cet exemple pour voir si le résultat de la production est correct. À ce stade, cet exemple est terminé.

La technologie décrite dans cet exemple est couramment utilisée sur divers sites Web. Par exemple, sur plusieurs grands sites Web de portail nationaux, ces publicités de transformation peuvent être vues sur presque toutes les pages. Les lecteurs peuvent se référer à ces contenus pour s'entraîner davantage.