FrontPage
Créer un nouveau site      Les barres d'outils      Écrire un texte      Insérer une image       Le travail sur l'image
Créer une vignette      Mes premiers liens      Un bouton-lien      Une partie d'image en lien

Créer un nouveau site

Page de travail de FrontPage
Pour créer un site, il suffit d'ouvrir le menu "Fichier" puis de choisir "Nouveau" et "Site Web".
Une fenêtre s'ouvre : choisir "Site Web normal".

L'affichage de la page de travail change alors : 

Par défaut, c'est la page en mode "Normal" qui s'affiche. ce mode permet de travailler sur FrontPage comme dans tout logiciel éditeur de textes.

Le mode "Aperçu" permet de voir le rendu dans un navigateur comme Internet Explorer. il n'est pas possible de modifier quoi que ce soit dans ce mode.
Le mode "HTML" représente la réalité de la page, telle qu'elle est "lue" par le navigateur. Ce mode permet d'avoir accès au codage de la page. ce mode est déconseillé aux débutants !

Ci-contre, le codage d'une page vide (presque vide : la barre espace a été frappée une fois...) !

En bleu : des balises propres au code Html, en noir, le contenu des balises.

Les barres d'outils

 

Les fonctionnalités principales de ces deux barres d'outils sont expliquées en cliquant dessus...

 

Écrire un texte et le mettre en forme
Il suffit de se placer dans la page de travail (en mode "Normal" : onglet du bas) et d'écrire, comme dans Word...

La barre encadrée en rouge donne accès à toutes les modifications possibles du texte :

  • mise en forme automatique
  • choix de la police et de sa taille
  • caractères
  • alignements (remarquez qu'Internet n'accepte pas la double justification à droite et à gauche en même temps)
  • listes et retraits
  • surlignage
  • couleur de la police

Toutes ces fonctionnalités sont aussi accessibles depuis le menu "Format" qui offre la possibilité de cliquer sur "police" : une nouvelle fenêtre s'ouvre (voir plus bas) qui permet notamment d'avoir accès à des Polices plus complexes (mise en exposant, en indice...).

 

Texte modifié (titre 2, Arial, gras, couleur rouge)
Fenêtre accessible par le menu "Format" puis un clic sur la proposition "Police".

Insérer une image

Cliquer sur l'icône "Insérer une image depuis un fichier"

Une fenêtre s'ouvre qui permet de choisir une image dans un répertoire du disque dur. Une petite fenêtre bien pratique permet de voir un aperçu de l'image à choisir.

Si vous n'avez pas accès à toute l'arborescence de votre disque dur, cliquez sur l'icône en bas.

Seules les images de format .JPG  JPEG ou .GIF sont admises et intéressantes pour l'Internet.
Résultat : parfois surprenant parce que FrontPage affiche l'image directement selon le nombre de pixels qui la définissent (hauteur fois largeur).

Ici l'image est très grande. Il est possible de la redimensionner en cliquant dessus et en sélectionnant les bords de l'image : par cliquer-glisser on détermine la taille de l'image à l'écran.

Remarque très importante : cela ne redimensionne absolument pas l'image en terme d'octets ! Une image de 2 mégaoctets peut apparaître petite à l'écran après la manipulation, elle reste néanmoins de  2 Moctets ! Ce qui veut dire qu'elle sera très longue à charger sur Internet. une image ne devrait pas dépasser les 300 koctets pour Internet.

Ici l'image remise à la taille voulue (mais elle "pèse" toujours aussi lourd en terme de taille en octets...

Le travail sur l'image

 

Mettre l'image en "position absolue"

 

Par défaut l'image insérée est fixée comme un texte, elle est dite "ancrée" au texte. Il est possible de la positionner où on le désire en cliquant sure l'icône "Position absolu". Il est alors possible de déplacer l'image par cliquer-glisser.
Ici l'image est positionnée partiellement sur le texte, ce qui n'est pas possible quand l'image est "ancrée" au texte.

Changer le plan de l'image

 
Dans l'exemple précédent, l'image en position absolue est placée par dessus le texte (elle est à "l'avant-plan").

Les icônes "avancer ou reculer d'un plan" permettent de changer cet ordre.
Ici l'image a été sélectionnée puis "reculée d'un plan". Elle apparaît maintenant sous le texte.

Cette fonction est applicable à plusieurs images superposées (Il faut que ces images soient en position absolue pour être superposables...).

Rendre une couleur "transparente"

 
Il peut être intéressant de rendre une couleur d'une image transparente à l'affichage. cela permet de jouer avec des surimpressions et d'éviter l'effet "rectangle" autour de l'image. la fonction est accessible par l'icône "définir la couleur comme transparente".

Une petite pissette remplace le curseur de la souris et permet de sélectionner directement sur l'image la couleur à rendre invisible.
Remarque : si l'image n'était pas au format .GIF, une fenêtre s'ouvrira et proposera de convertir l'image à ce format. En effet seul le format .GIF permet d'obtenir les effets de transparence sur Internet. Le format GIF étant en 256 couleurs, il se peut que l'image perde en qualité lors de la conversion (surtout s'il s'agissait d'une image .jpg de haute qualité avec des dégradés).

Ici, la couleur noire de la photo initiale a été rendue transparente.

Créer une vignette

Pour éviter qu'une page mettre trop de temps à charger sut Internet ou bien pour présenter plusieurs image à l'écran sans avoir à recourir aux ascenseurs, il est possible de créer des "vignettes" ou "miniatures".

Après sélection de l'image il suffit de cliquer sur l'icône "Créer une miniature". l'image est instantanément réduite à une petite vignette encadrée de bleu. Cela indique que la vignette est un lien qui mène directement à une nouvelle page contenant l'image "grand format".

C'est pratique parce que FrontPage gère seul la mise en service de ces liens et nouvelles pages.

Mes premiers liens
Le but est de créer deux liens simples entre deux pages : un lien qui permet de passer de la page 1 à la page 2 puis l'inverse.

Le lien sera ici porté par un texte.

 
Sur la première page, taper le texte du modèle.
Créer ensuite la seconde page en utilisant l'icône du modèle.
Taper le texte qui identifie cette nouvelle page et le texte qui symbolisera le lien de retour vers la page précédente.
Pour revenir à la première page (et d'une manière générale pour aller de page en page) il faut ouvrir le menu "Fenêtre" et choisir sa page. Ici, on revient vers la page initiale nommée "nouvelle page1.htm).
de retour sur la page 1 il faut sélectionner le texte qui deviendra le support du lien.
Cliquer directement sur l'icône "Lien hypertexte" ou bien passer par le menu "Insertion" et choisir "lien hypertexte"
Une fenêtre s'ouvre : elle permet de choisir vers quelle page se fera le lien. Au centre sont proposées toutes les pages directement disponibles (qui sont dans le même répertoire que la page ouverte). il est possible d'aller créer un lien vers une autre page se trouvant ailleurs dans le disque dur.
Le lien se fera vers la "nouvelle page 2" nom de la page 2...

L'URL correspond à la définition du lien. Ici, le texte mènera donc à une page nommée "nouvelle page 2" située dans le même répertoire que la page ouverte.

Un lien est absolu ! cela veut dire que si, plus tard, vous mettez les pages liées dans des répertoires différents, les liens seront rompus (ils ne fonctionneront plus).

C'est pour cette raison qu'il faut mieux mettre toutes les pages d'un même site dans un même et unique répertoire. cela évite les mauvaises surprises !

Après avoir cliqué sur "OK" le texte qui sert de lien apparaît en bleu et souligné : c'est la forme que prennent les liens par défaut.

Renouvelez les mêmes procédures avec l'autre page :

Passez par le menu "Fenêtre" pour rejoindre la page 2

Sélectionnez le texte "lien vers page 1"

Insérez un lien hypertexte en sélectionnant la"nouvelle page1".

 
 

Pour activer les liens il faut que les pages soient sauvegardées ! Enregistrez votre travail (icône "enregistrer" dans la barre d'outil du haut). Sauvegardez chaque page puis allez dans le mode aperçu (onglet "Aperçu" en bas de la page de travail) pour faire fonctionner vos liens...

 

Notez qu'entre temps, après la sauvegarde, vos pages s'affichent dans la fenêtre intermédiaire appelée "Liste des dossiers".

Cette page fonctionne comme un explorateur de Windows. Vous pouvez dès lors passer d'une page à l'autre en double-cliquant directement dessus dans cette fenêtre.

N'oubliez pas que pour pouvoir de nouveau travailler sur la page il faut quitter le mode aperçu et revenir en mode "Normal" (onglets du bas).

Un bouton-lien
 

Sur de nombreux sites, les liens entre les pages se font par l'intermédiaire de boutons cliquables. Ces liens sont tout simplement des images qui contiennent un lien.

 
Créer un nouveau site : celui-ci comportera une page index et une "nouvelle page 1", page de travail directement affichée.

Insérer une image sur cette page.

Effectuer un clic droit sur celle-ci et une fenêtre contextuelle s'ouvre : choisir "Lien hypertexte".

Il est aussi possible de sélectionner l'image et d'aller dans le menu "insertion" puis de choisir "Lien hypertexte".
Une nouvelle fenêtre remplace la précédente : il suffit de choisir la page qui devra apparaître en cliquant sur l'image.

En fait il s'agit du même mode opératoire que pour créer un lien à partir d'un texte : ce n'est pas un mot ou un texte qui a été sélectionné pour créer le lien mais une image.

Enregistrer le travail pour rendre le lien actif.
 

Pour aller un petit peu plus loin :

Plutôt que de créer une image de bouton différente pour chaque lien (fastidieux si le site est vaste et contient de nombreux boutons), il suffit de créer un seul bouton, vierge comme dans l'exemple, et d'écrire ensuite sur celui-ci avec FrontPage.

 
Pour cela, il existe un outil spécifique pour écrire du texte SUR une image.

Il faut sélectionner l'image et ensuite cliquer sur l'icône "Texte" dans la barre d'outil inférieure (spéciale images).
Une zone de saisie de texte apparaît alors au centre de l'image. Il est possible d'écrire ce que l'on veut. Le texte est ensuite sélectionnable pour choisir sa police (par le menu "Format").
Ici le texte "index" a été écrit sur l'image. Le lien créer vers la page index est toujours actif.

La même image peut alors être insérée ailleurs et il est possible de lui attribuer un nouveau lien et un nouveau texte. Pour finir, le site sera moins "lourd" en terme d'octets car il n'y aura qu'une seule image qui permet d'afficher de multiples possibilités de liens.

Une partie d'image en lien
 

Il peut être intéressant qu'une seule et même image comporte plusieurs liens différents. Par exemple, l'image contient plusieurs indications et chacune mérite une information supplémentaire.

 
Créer un nouveau site puis insérer une image sur la page de travail ("nouvelle page 1" par défaut).

Insérer une image sur cette page.

 
Créer une autre page (dans l'exemple cette page sera sauvegardée sous le nom de "la mer").
Revenir à la page 1 (menu "Fenêtre" permet d'aller d'une page à l'autre).

Sélectionner l'image et choisir une des trois icônes suivantes dans la barre d'outils graphiques :

Zone réactive rectangulaire, ronde ou polygonale. L'exemple ici est "Zone réactive polygonale". cette dernière est plus intéressante si la zone de l'image que l'on souhaite transformer en lien n'est pas clairement un rectangle ou un cercle.
Il suffit ensuite de détourer la zone que l'on souhaite. Ici, chaque point correspond à un clic de souris, permettant de changer de direction à chaque fois. Quand on reclique sur le premier point défini, la zone polygonale est fermée : la zone est prête.
Une fenêtre s'ouvre alors directement et propose de choisir vers quelle page est dirigé ce lien.

Dans l'exemple proposé, l'utilisateur arrivera sur la page "La-mer.htm" en cliquant sur la zone qui entoure la mer dans l'image. l'autre partie de l'image ne mène à aucune page.

Il est bien sur possible de créer une seconde zone réactive et d'y affecter un nouveau lien sur la même image. Une seule contrainte cependant : il ne faut pas que les zones se recouvrent !