| S'applique à |
Microsoft Office FrontPage® 2003
|
Inutile d'être un expert en imagerie ou en codage pour ajouter des boutons fonctionnels à vos pages Web. Avec FrontPage 2003, il suffit d'utiliser des boutons interactifs.
Ces boutons, colorés et d'aspect professionnel, sont dignes d'un outil d'édition graphique avancé. Contrairement aux boutons standard,
ils changent d'apparence lorsque vous passez le pointeur au-dessus d'eux ou lorsque vous cliquez dessus.
Ajouter un bouton interactif à une page Web
Pour ajouter un bouton interactif, cliquez sur l'endroit de la page Web où vous voulez ajouter le bouton. Dans le menu Insertion, cliquez sur Bouton interactif. Lorsque la boîte de dialogue Bouton interactif apparaît,
sélectionnez un style de bouton, puis choisissez l'apparence et le comportement que vous voulez donner au bouton.
Procédure pour obtenir l'apparence que vous voulez donner au bouton interactif
Lorsque vous ajoutez un bouton interactif, vous pouvez choisir la forme, la couleur, la finition, la bordure ainsi que le style et la taille de la police. Les différentes formes incluent les cercles, les rectangles, les capsules et les onglets. Les boutons peuvent également être brillants ou mats, et avoir des bordures en relief.
À l'aide de l'onglet Bouton de la boîte de dialogue Boutons interactifs, vous pouvez sélectionner un style de bouton, ajouter un texte au bouton et insérer un lien entre le bouton et une autre page du site Web actuel, un site Internet ou une adresse de messagerie.
À l'aide de l'onglet Police, outre la possibilité de choisir le style et la taille de la police, vous pouvez définir l'alignement du texte du bouton et sélectionner les couleurs de la police en fonction de chaque état du bouton : normal, survolé (lorsque vous déplacez le pointeur au-dessus d'un bouton) et enfoncé.
À l'aide de l'onglet Image, vous pouvez redimensionner l'image du bouton. Ce point est important à noter car vous ne pouvez pas redimensionner ces boutons en mode Création, comme vous pouvez le faire avec d'autres types d'images.
De plus, c'est ici que vous choisissez le format de fichier image du bouton.
Choisir le format de fichier image d'un bouton
Pour déterminer s'il convient d'enregistrer les images du bouton en tant que fichier JPEG ou GIF, notez ce qui suit :
JPEG
- L'avantage du format de fichier JPEG est qu'il permet à FrontPage de fournir des variations graduelles pour les couleurs et les effets des boutons de style plus élaboré, par exemple biseauté, en relief et brillant.
- L'inconvénient du format JPEG est qu'il a un arrière-plan uni. Si l'arrière-plan de votre page est uni, vous pouvez assortir la couleur d'arrière-plan du bouton à l'arrière-plan de la page. Dans le cas contraire, le bouton au format JPEG ne s'affichera pas correctement.
GIF
- L'avantage du format GIF est qu'il offre un arrière-plan transparent. Si le bouton a des bords arrondis, l'arrière-plan de la page transparaît.
- L'inconvénient d'une image GIF est qu'elle ne s'affiche qu'en 256 couleurs, lesquelles suffisent parfois pour afficher des variations graduelles de couleurs et d'effets sur des styles de boutons très élaborés. Les bords des boutons et certains dégradés de couleurs peuvent apparaître irréguliers, par rapport au format JPEG.
États d'une image de bouton interactif
Lorsque vous insérez un bouton interactif, FrontPage crée automatiquement trois images séparées représentant les trois façons dont les visiteurs de sites Web interagissent avec ces boutons : un état normal, un état de survol et un état enfoncé. Lorsque vous enregistrez vos pages Web, FrontPage vous demande d'enregistrer également les fichiers image de ces boutons.
Lors du premier enregistrement, FrontPage propose automatiquement trois noms de fichiers image du bouton par défaut. Le nom de fichier commence par le mot « button » et se termine par une valeur unique, un chiffre ou une lettre par exemple.

Il est recommandé de renommer correctement les fichiers image par défaut afin de pouvoir mieux les différencier ultérieurement dans une liste de noms de fichiers image du bouton.
Remarque La suppression d'un bouton interactif d'une page Web ne supprime pas les trois fichiers image associés à ce bouton. Pour les supprimer définitivement, vous devez les supprimer manuellement, l'un après l'autre.
Scénario : Le Cru Coho
Eric, copropriétaire de l'établissement vinicole Le Cru Coho, demande à Jean, le directeur informatique, si son équipe de concepteurs et de développeurs de sites Web peut créer une page « Nos primeurs » contenant des liens sous forme d'images de boutons vers la page « Offres spéciales ». L'équipe de Jean étant trop occupée à la refonte infographique du site Web maison, Jean décide de s'en charger lui-même.
Jean sait que FrontPage 2003 propose des boutons prédéfinis dont il peut définir les propriétés. La tâche qui l'attend lui semble du coup beaucoup plus légère.
Pour ajouter le bouton interactif, Jean clique sur un endroit de la page Web Nos primeurs. Dans le menu Insertion, il clique sur Bouton interactif. Lorsque la boîte de dialogue Boutons interactifs apparaît, il sélectionne le style de bouton Capsule en relief 1, entre le texte du bouton « Pinot » et spécifie un lien sur la page Offres spéciales répertoriant la sélection de vins Pinot et les prix.
Ensuite, Jean clique sur l'onglet Police et définit les propriétés de la police. Sous l'onglet Image, Jean conserve les paramètres concernant la taille et l'état et prend soin d'enregistrer l'image du bouton en tant fichier JPEG. L'arrière-plan de cette page étant blanc, le bouton fait très bonne impression. Lorsqu'il clique sur OK, Jean affiche le bouton avec le texte approprié.
Dans le menu Fichier, Jean clique sur Enregistrer. La boîte de dialogue Enregistrer les fichiers incorporés apparaît. Jean renomme les trois fichiers image par défaut : PinotSurvol.jpg, PinotNormal.jpg et PinotEnfoncé.jpg.
En suivant le même processus, Jean crée des boutons interactifs pour toutes les offres spéciales Le Cru Coho.
Eric est très satisfait des résultats, alors que Jean est ravi du peu de temps que cette tâche lui a pris.
À l'instar de Jean, vous pouvez créer des boutons d'aspect professionnel sur votre page Web grâce aux boutons interactifs.
Utilisation des boutons interactifs
Les procédures décrites ci-dessous vous permettent d'ajouter un bouton interactif, de le supprimer ou d'en définir les propriétés.
Ajouter un bouton interactif
- En mode Page, cliquez sur Création, au bas de la fenêtre de document.
- Placez le point d'insertion à l'endroit où vous voulez ajouter le bouton.
- Dans le menu Insertion, cliquez sur Bouton interactif.
- Sous l'onglet Bouton, dans la liste Boutons, cliquez sur un style de bouton.
- Dans la zone Texte, entrez le texte que vous voulez faire figurer sur le bouton.
- En regard de la zone Lien, cliquez sur Parcourir.
- Recherchez et sélectionnez le fichier, l'URL (URL (Uniform Resource Locator) : adresse qui spécifie un protocole (tel que HTTP ou FTP) et l'emplacement d'un objet, d'un document, d'une page World Wide Web ou d'une autre destination sur Internet ou un intranet, par exemple : http://www.example.com/.) ou l'adresse de messagerie que vous voulez associer au bouton, puis cliquez sur OK.
Remarque Lors de l'enregistrement de la page Web, Microsoft FrontPage vous demandera d'enregistrer les images associées au bouton.
Définir les propriétés d'un bouton interactif
- Cliquez avec le bouton droit sur le bouton interactif dont vous voulez définir les propriétés, puis cliquez sur Propriétés du bouton dans le menu contextuel.
- Effectuez une ou plusieurs des opérations suivantes :
Définir le texte
- Sous l'onglet Bouton, dans la zone Texte, entrez le texte que vous voulez faire figurer sur le bouton.
Définir la police
- Sous l'onglet Police, sélectionnez les propriétés de police que vous voulez.
Définir l'arrière-plan du bouton
Sous l'onglet Image, effectuez l'une des opérations suivantes :
- Pour faire correspondre l'arrière-plan du bouton avec une page Web dotée d'un arrière-plan uni, cliquez sur Créer le bouton sous forme d'image JPEG et utiliser cette couleur d'arrière-plan, cliquez sur la flèche dans la liste, puis cliquez sur une couleur qui corresponde à votre page Web.
- Pour faire correspondre l'arrière-plan du bouton à une page Web dotée d'un arrière-plan varié, cliquez sur Créer le bouton sous forme d'image GIF et utiliser un arrière-plan transparent.
Définir la taille
Sous l'onglet Image, effectuez l'une des opérations suivantes :
- Pour définir la hauteur et la largeur d'un bouton, entrez ou sélectionnez les valeurs en pixels que vous voulez dans les zones Hauteur et Largeur.
- Pour conserver les proportions du bouton, activez la case à cocher Conserver les proportions.
Définir le comportement
Sous l'onglet Image, effectuez une ou plusieurs des opérations suivantes :
- Pour que le bouton s'affiche différemment lorsque le visiteur laisse reposer le pointeur de la souris dessus, activez la case à cocher Créer une image au survol.
- Pour que le bouton s'affiche différemment lorsque le visiteur clique dessus, activez la case à cocher Créer une image au clic.
- Pour charger les images des états au survol et au clic du bouton à mesure du chargement du reste de la page, activez la case à cocher Précharger les images des boutons.
Supprimer un bouton interactif
- En mode Page, cliquez sur Création au bas de la fenêtre de document.
- Cliquez sur le bouton et appuyez sur SUPPR.
Remarque La suppression d'un bouton ne supprime pas les fichiers associés à ce bouton. Vous devez supprimer les fichiers du bouton dans la Liste des dossiers.
Boutons sensitifs
Dans les versions précédentes de FrontPage, il était possible d'utiliser les boutons sensitifs pour ajouter des liens à des pages Web. Même si les boutons sensitifs sont toujours présents dans FrontPage 2003, ils sont maintenant remplacés par les boutons interactifs.