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.
|
|
|
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.
Espace de travail Édition
2
|
Choisissez l’outil Fractionnement et cliquez sur l’image dans laquelle vous souhaitez créer une ligne de fractionnement. |
5
|
Dans la zone Texte à afficher, tapez le texte que le navigateur peut afficher pendant le téléchargement de la cellule. |
|
• |
_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. |
|
|
|
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.
|
|
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.
|
|
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.
|
|
Cliquez sur la cellule à l’aide de l’outil Flèche et désactivez la case Inclure la cellule dans le tableau.
|
|
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.
|
|
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.
Espace de travail Édition
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. |
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.
Espace de travail Édition
Espace de travail Édition
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.
Copyright 2014 Corel Corporation. Tous droits réservés.