FrontPage affiche la page d'accueil d'une société de produits vétérinaires en mode Aperçu.

Supposez que vous êtes le directeur d'une petite entreprise de produits vétérinaires et que vos clients réclament une adresse Web leur permettant de consulter votre gamme de produits. Vous souhaitez pouvoir élaborer rapidement des pages d'aspect professionnel.

Le pointeur se déplace vers le volet de navigation de gauche et pointe successivement sur trois des boutons interactifs proposés. Chaque bouton change de couleur d'arrière-plan lorsque le pointeur le survole et le texte du troisième bouton change de couleur lorsque le pointeur l'enfonce.

Le pointeur se place sur le bouton Création et clique. La fenêtre de création apparaît. Le pointeur se place à droite du bouton Produits alimentaires et clique avec le bouton droit pour ouvrir le menu contextuel. Le pointeur clique sur Insérer des lignes et le menu est refermé. Une nouvelle cellule vide apparaît au-dessus des boutons interactifs. Le pointeur se place dans cette cellule. Dans le menu Insérer , le pointeur clique sur Boutons interactifs.

Entrez des boutons interactifs. Voici sur la gauche de la page quelques-uns des nouveaux boutons de FrontPage 2003. Ils s'allument et vous pouvez modifier la couleur du texte. Vous en avez peut-être entendu parler sous le terme boutons de substitution.

Vous avez le choix parmi une grande variété de styles et de couleurs de bouton. Vous allez en ajouter un pour présenter votre gamme de produits Vitamines.

La boîte de dialogue Boutons interactifs apparaît. Dans l'onglet Bouton , le pointeur clique sur Colonne en chaîne 3 dans la zone Aperçu . L'image du bouton change. Le pointeur fait défiler la liste de la zone Boutons et sélectionne Société 5. L'image de la zone Aperçu change.

Vous pouvez ainsi avoir un aperçu d'un bouton interactif ou tester ses effets. Vous remarquerez que l'image change lorsque vous pointez ou cliquez dessus.

Pour respecter l'apparence de votre site Web, vous allez choisir le style de bouton Société 5.

Pour vous permettre d'ajouter un intitulé au nouveau bouton, le pointeur se place sur la zone Texte . Le texte Vitamines est saisi. Ce texte apparaît sur le bouton dans la zone Aperçu .

Pour transformer le bouton Vitamines en lien hypertexte, le pointeur se place sur Parcourir et clique sur ce bouton. La boîte de dialogue Modifier le lien hypertexte contient la liste des liens possibles. Le pointeur parcourt cette liste, sélectionne Vitamines et clique sur OK. La boîte de dialogue Boutons interactifs revient au premier-plan.

Vous allez ensuite attribuer un intitulé au bouton Vitamines et le lier à la page ciblée.

Grâce à ces boutons, vous pouvez ajouter une interactivité stupéfiante à votre site sans avoir à faire l'effort de maîtriser les techniques de conception graphique et de codification.

Le pointeur clique sur l'onglet Police et l'aspect de la boîte de dialogue change. Le pointeur ouvre la liste Couleur au clic et sélectionne Bleu vert foncé dans la grille des échantillons de couleur. La barre de la zone Couleur au clic devient bleu vert foncé. Le pointeur se place sur la zone Aperçu et clique sur l'image du bouton : la couleur du texte passe au bleu vert foncé.

Dans les onglets Police et Image , vous pouvez commencer à modifier le bouton. Par exemple, vous pouvez changer en bleu vert foncé la couleur au clic du bouton et la tester. Vous pouvez de cette manière signaler aux clients de votre site qu'une action va se produire.

Le pointeur clique sur l'onglet Image et l'aspect de la boîte de dialogue change. Le pointeur se place sur la zone Largeur et la valeur 200 est saisie. L'image du bouton est modifiée dans la zone Aperçu . Le pointeur annule la sélection de la case Conserver les proportions . La valeur 110 apparaît dans la zone Largeur , tandis que la valeur 26 s'inscrit dans la zone Hauteur . L'image du bouton est modifiée dans la zone Aperçu .

Le pointeur se place sur une zone intitulée Créer le bouton sous forme d'image JPEG et utiliser cette couleur d'arrière-plan : et ouvre une grille d'échantillons de couleur. La grille est refermée. Le pointeur clique sur OK et la boîte de dialogue est refermée.

Vous pouvez également modifier la taille du bouton. Si vous augmentez sa largeur à 200, il est trop large. Choisissez dans ce cas de ne pas conserver les proportions et attribuez-lui des dimensions de 110 par 26. Ne modifiez pas les autres options.

Une image JPEG est ce qui permettra le mieux de mettre les boutons en évidence car elle peut afficher des millions de couleurs sur un fond uni.

En mode Création, dans le menu Fichier , le pointeur clique sur Enregistrer. La boîte de dialogue Enregistrer les fichiers incorporés s'affiche et plusieurs noms de bouton sont sélectionnés. Le pointeur clique sur OK et la boîte de dialogue est refermée.

FrontPage laisse la place à Microsoft Internet Explorer, qui affiche la page d'accueil ; celle-ci contient désormais un bouton Vitamines.

Maintenant, enregistrez vos modifications et consultez le site à partir d'un navigateur.

Les boutons interactifs facilitent la navigation pour les utilisateurs de deux manières : à l'aide des liens hypertexte et par la modification de la couleur des boutons.

Le pointeur se place sur le bouton Vitamines . La couleur du bouton et du texte change. Le pointeur clique sur le bouton Vitamines et une page Web différente s'affiche.

Voici votre nouveau bouton interactif. Il change d'aspect lorsqu'on le survole et la couleur du texte est modifiée lorsque l'on clique dessus.

Dans cette page Vitamines, le bouton Vitamines est marron. Le pointeur se déplace jusqu'à la section en-tête de page, qui indique le nom de la société.

Maintenant dans la page de produits Vitamines, avez-vous remarqué que le bouton est marron ? Grâce au changement de couleur, les boutons interactifs mettent en évidence le contexte de navigation sur votre site. Cela signifie que vous pouvez conserver le même titre sur toutes les pages.

Le pointeur se déplace vers la gauche et clique sur l'icône Accueil pour revenir à la page d'accueil où le bouton Vitamines n'est pas marron mais bleu comme les autres boutons de cette page. Le texte animé Préparez-vous aux petits bonheurs de la vie professionnelle apparaît. Au-dessous est inscrit le texte statique Pour plus d'informations , suivi de l'URL http://www.microsoft.com/office.

En faisant appel aux boutons interactifs de FrontPage 2003, vous êtes à même de créer rapidement un site Web et de consacrer plus de temps à vos clients.