Création d'images pour le Web : Fractionnement d’images
 
Fractionnement d’images
Lorsque vous fractionnez une image, vous la divisez en plusieurs images plus petites que vous pouvez enregistrer sous divers formats ou avec différents niveaux d’optimisation. Ces images optimisées étant plus rapides à transférer qu’une image de grande taille, le temps de chargement des pages Web est accéléré.
Le fractionnement d’une image permet également de réduire le nombre d’images à enregistrer. Si le même logo ou la même image se répète dans plusieurs pages du site Web, vous ne devez enregistrer cette section qu’une seule fois si vous avez recours au fractionnement des images, car le logo et l’image sont rechargés dans toutes les images.
Vous pouvez utiliser la fonction de fractionnement des images pour créer un tableau à partir de l’image, dans lequel l’emplacement de chaque section fractionnée est enregistré en tant que région, puis le code HTML de la colonne et des cellules est généré. Vous devez ensuite copier ce code dans vos fichiers source, afin de pouvoir réassembler l’image lorsqu’un utilisateur charge la page Web.
Vous pouvez également créer des zones dynamiques affichant une autre image lorsque l’utilisateur clique dessus ou les survole à l’aide de la souris.
Création et modification de cellules
Lors du fractionnement d’une image, vous divisez l’image en cellules dont vous modifiez les bordures. Pour effectuer cette opération, vous devez utiliser les outils du pavé Outils de la boîte de dialogue Image fractionnée.
 
Outil
Description
L’outil Flèche permet d’activer une cellule ou de déplacer ses bordures.
L’outil Grille permet de créer une grille dont les cellules sont uniformément espacées, sur toute l’image ou à l’intérieur d’une autre cellule.
L’outil Fractionnement permet de créer une ligne horizontale ou verticale.
L’outil Supprimer permet de supprimer des lignes de fractionnement.
L’outil Panoramique permet de faire glisser l’image dans la zone d’aperçu et d’afficher ses zones masquées.
Définition des propriétés des cellules fractionnées
Après la création des cellules fractionnées, vous pouvez définir l’URL, le texte et les cibles de chaque cellule. Vous avez également la possibilité d’afficher la cellule dans l’image transférée. Si vous ignorez des cellules, vous pouvez ajouter des cellules provenant d’autres images (des logos ou du texte, par exemple) et créer des images de forme non rectangulaire.
Si vous définissez du texte supplémentaire, il s’affiche pendant le chargement de l’image. Le texte est également affiché si l’image ne peut pas être chargée ou si l’affichage des images est désactivé dans le navigateur Web de l’utilisateur. Ce texte s’affiche également sous forme d’infobulle dans certaines versions d’Internet Explorer.
Préférences pour le fractionnement
Vous pouvez sélectionner des couleurs pour les lignes de bordure des zones actives et inactives.
Enregistrement et chargement des paramètres de fractionnement
Lors de l’enregistrement des paramètres de l’image fractionnée, vous enregistrez l’agencement des cellules et les données entrées dans la boîte de dialogue Image fractionnée. Vous pouvez ensuite recharger ces paramètres dans la même image ou les utiliser avec une autre image.
Enregistrement d’images fractionnées
Vous pouvez enregistrer les images fractionnées dans un dossier du disque dur en vue d’une réutilisation ou d’une modification ultérieure.
Pour fractionner une image en cellules
Edit workspace 
1 Sélectionnez Fichier Exporter Image fractionnée.
La boîte de dialogue Image fractionnée s’affiche.
2 Choisissez l’outil Fractionnement et cliquez sur l’image dans laquelle vous souhaitez créer une ligne de fractionnement.
Note: Pour créer une ligne verticale, faites glisser verticalement. Pour créer une ligne horizontale, faites glisser horizontalement.
3 Choisissez l’outil Flèche, puis cliquez dans la cellule pour l’activer.
Les informations sur les bordures de la cellule sont affichées dans la partie inférieure du pavé Propriétés de la cellule.
4 Dans la liste déroulante URL, tapez l’adresse de la page Web dans laquelle la cellule doit figurer.
Pour sélectionner une adresse déjà utilisée dans l’image, choisissez l’adresse appropriée dans la liste déroulante URL.
5 Dans la zone Texte à afficher, tapez le texte que le navigateur peut afficher pendant le téléchargement de la cellule.
6 Sélectionnez l’une des options d’image ou de fenêtre cible suivantes dans la liste déroulante Cible :
_blank : charge la page liée dans une nouvelle fenêtre du navigateur.
_parent : charge la page liée dans l’image mère du lien. Si le lien ne se trouve pas dans une image imbriquée, l’image est chargée dans l’intégralité de la fenêtre du navigateur.
_self : charge la page liée dans la même image que le lien.
_haut : charge la page liée dans l’intégralité de la fenêtre du navigateur et supprime les autres images.
7 Cliquez sur Enregistrer.
La boîte de dialogue Enregistrement du fichier HTML sous s’affiche.
8 Accédez au dossier dans lequel vous souhaitez enregistrer le code HTML et cliquez sur Enregistrer.
 
Vous pouvez également
 
Créer des cellules avec une taille et un espacement uniformes
Cliquez sur l’outil Grille . Cliquez dans la zone d’aperçu pour ouvrir la boîte de dialogue Taille de la grille. Renseignez ensuite les zones Lignes et Colonnes.
Déplacer une ligne de fractionnement ou une bordure
Cliquez sur l’outil Flèche et positionnez le curseur sur une ligne. Lorsque le curseur prend la forme d’une double flèche, cliquez sur la ligne et faites-la glisser vers un nouvel emplacement. Pour déplacer uniquement le segment de la cellule active, maintenez la touche Maj enfoncée en cliquant sur la ligne.
Supprimer une ligne ou une bordure
Cliquez sur l’outil Supprimer et positionnez le curseur sur la ligne. Lorsque le curseur prend la forme d’une gomme, cliquez pour supprimer la ligne. Si la suppression de la ligne risque de créer une zone non valide, Corel PaintShop Pro affiche l’icône pour indiquer que vous ne pouvez pas effacer cette ligne.
Ignorer une cellule de l’image téléchargée
Cliquez sur la cellule à l’aide de l’outil Flèche et désactivez la case Inclure la cellule dans le tableau.
Enregistrer les paramètres de fractionnement dans le Presse-papiers afin de les coller dans le code HTML
Cliquez sur Enregistrer dans le Presse-papiers pour ouvrir la boîte de dialogue Dossier de destination HTML, accédez au dossier dans lequel le fichier HTML est enregistré et cliquez sur OK pour enregistrer les paramètres de fractionnement.
Ouvrez le fichier HTML, positionnez le curseur à l’emplacement où vous souhaitez insérer le code HTML, puis appuyez sur les touches Ctrl + P.
Créer une zone dynamique pour une cellule
Cliquez sur Création d’images dynamiques. Pour plus d’informations sur la création d’images dynamiques, reportez-vous à la section Création d’images dynamiques.
Vous pouvez déplacer les lignes vers le haut, mais pas sur les lignes parallèles adjacentes. Vous pouvez déplacer des lignes individuelles et les lignes d’une grille. Lorsque vous faites glisser une ligne, Corel PaintShop Pro déplace le segment le plus long pouvant être repositionné sans créer de cellule non rectangulaire.
Pour définir des préférences de fractionnement
Edit workspace 
1 Dans la boîte de dialogue Image fractionnée, cliquez sur Préférences.
2 Cliquez sur la case Couleur des bordures de la cellule active et choisissez une couleur.
3 Cliquez sur la case Couleur des bordures des cellules inactives et choisissez une couleur.
4 Dans la zone Taille maximale de l’historique des opérations, entrez ou définissez le nombre d’entrées dans les listes déroulantes URL et Texte à afficher situées dans le pavé Propriétés de la cellule de la boîte de dialogue Image fractionnée.
5 Cliquez sur OK.
Cochez la case Demander le dossier de l’image pour les commandes Enregistrer et Enregistrer sous si vous souhaitez que le système vous demande l’emplacement et le nom du fichier des images fractionnées lors de l’enregistrement du code HTML.
Pour enregistrer des paramètres de fractionnement
Edit workspace 
1 Dans la boîte de dialogue Image fractionnée, cliquez sur Enregistrer les paramètres.
La boîte de dialogue Enregistrement des paramètres de fractionnement s’affiche.
2 Accédez au dossier dans lequel vous souhaitez enregistrer le fichier de paramètres.
3 Tapez le nom du fichier et cliquez sur Enregistrer.
Le fichier est enregistré au format JSD.
Pour charger des paramètres de fractionnement
Edit workspace 
1 Dans la boîte de dialogue Image fractionnée, cliquez sur Enregistrer les paramètres.
La boîte de dialogue Chargement des paramètres de fractionnement s’affiche.
2 Sélectionnez le fichier JSD à charger et cliquez sur Ouvrir.
Si vous chargez une grille dans une autre image, Corel PaintShop Pro ajuste automatiquement la taille de la grille aux dimensions de l’image, si nécessaire.