Utilisation d'images tranchées pour la création rapide de pages Web: Tutorial

Trucs et astuces

Utilisation d'images tranchées pour la création rapide de pages Web

Comme la plupart des concepteurs Web, vous pouvez développer vos pages dans Adobe® Photoshop®. Grâce aux objets dynamiques d'Adobe GoLive®, vous pouvez désormais gagner du temps et importer des tranches de vos fichiers Photoshop en toute simplicité.GoLive assemble les tranches dans un tableau et vous permet d'optimiser chacune d'elles individuellement. Les tranches peuvent être utilisées comme liens de navigation, dans des boutons animés ou comme balises d'emplacement destinées à l'affichage d'images différentes. La procédure ci-après vous indique comment trancher une image et utiliser cette tranche dans une page Web.

1. Ouvrir une image dans Photoshop.
Lorsque Photoshop est lancé, choisissez la manière dont vous souhaitez diviser votre image pour créer la page Web. D'une manière générale, une page Web est constituée de barres de navigation, de bannières, de boutons et d'une image ou d'une zone d'information principale. Commencez par les zones les plus grandes et les plus logiques, puis créez de tranches de plus petite taille autour d'éléments individuels, tels que les boutons. L'utilisation des repères peut s'avérer utile pour l'organisation des images en tranches.

2. Découper l'image en tranches.
Sélectionnez l'outil Tranche. Faites glisser la souris sur une partie de votre image en maintenant le bouton enfoncé, puis relâchez le bouton afin de créer une tranche. L'image est à présent divisée en plusieurs tranches : la tranche utilisateur que vous venez de créer et des tranches automatiques supplémentaires créées sur le reste de l'image. Recommencez la procédure pour créer des tranches supplémentaires à partir d'autres zones de l'image. Les options de magnétisme des repères et des tranches du menu Affichage peuvent s'avérer utiles lors de la division de l'image en tranches. L'outil Sélection de tranche permet de sélectionner et de redimensionner les tranches créées. Pour redimensionner une tranche, cliquez sur celle-ci à l'aide de l'outil Sélection de tranches et faites-en glisser l'une des poignées.

3. Nommer les tranches.
Sélectionnez la tranche qui vous intéresse à l'aide de l'outil Sélection de tranche, puis cliquez sur le bouton Options de tranche de la barre d'outils des options. Dans la boîte de dialogue des options de tranche, saisissez un nom évocateur pour la tranche dans la zone de texte appropriée. GoLive nomme l'image optimisée pour le Web en fonction du nom de la tranche.

4. Créer une tranche sans image.
Outre les tranches d'image, vous pouvez créer des tranches "vides" (ou tranches sans image) qui peuvent contenir du code HTML ou du texte, ou simplement servir de balises d'emplacement. Pour créer une tranche sans image, choisissez la commande Aucune image du menu Type de tranche de la boîte de dialogue des options de tranche, puis saisissez du texte dans la zone de texte HTML.

5. Ajouter l'image tranchée au site.
Après avoir préparé l'image tranchée dans Photoshop, enregistrez le fichier avec l'extension .psd et placez-le dans le dossier de votre site. Ouvrez ensuite le site dans GoLive et créez une page vierge. Faites glisser le fichier image Photoshop de la fenêtre du site vers la nouvelle page. Si la boîte de dialogue de configuration des variables s'affiche, cliquez sur OK pour la fermer. GoLive ouvre cette boîte de dialogue lorsque le calque supérieur du fichier Photoshop est un calque de texte. GoLive place automatiquement un objet Photoshop dans la page et ouvre la boîte de dialogue Enregistrer pour le Web.

6. Définir les paramètres d'optimisation de chaque tranche.
Sélectionnez chaque tranche à l'aide de l'outil de sélection de tranche et définissez les paramètres d'optimisation souhaités dans la boîte de dialogue Enregistrer pour le Web. Utilisez la compression JPEG pour les tranches contenant des photos et la compression GIF pour les autres tranches de l'image. Cliquez sur Enregistrer pour fermer la boîte de dialogue Enregistrer pour le Web, puis choisissez le dossier dans lequel vous souhaitez enregistrer les données de l'image tranchée. Un dossier de données est créé. GoLive ajoute à la page un tableau HTML spécifique destiné à contenir les images optimisées pour le Web ; chaque image Web et chaque tranche sans image est placée dans une cellule distincte.

7. Ajouter des liens et remplacer le texte d'une tranche sans image.
Sélectionnez une tranche de la page en cliquant dessus. Vous pouvez sélectionner et saisir du texte directement dans une tranche sans image, ou cliquer sur le bord de la tranche pour la sélectionner. Vous pouvez modifier la couleur de fond et l'alignement des tranches sans image dans l'inspecteur de la tranche de texte. Dans l'inspecteur de texte ou l'inspecteur de la tranche utilisateur, vous pouvez cliquer sur le bouton Nouveau lien et lier la tranche à un URL spécifique. Prévisualisez la page dans le navigateur et vérifiez que les éléments qu'elle contient fonctionnent correctement. Si vous effectuez des changements dans le fichier Photoshop, les tranches d'image sont directement mises à jour dans GoLive ; les tranches sans image restent inchangées. Les images tranchées s'avèrent très pratiques pour créer facilement et rapidement une page Web.