3. Travail avec Front Page Express

Front Page Express est un logiciel gratuit, livré avec Internet Explorer à partir de la version 4. Pour l’utiliser, il faut opter pour l'installation complète du logiciel Internet Explorer.

Une fois l'installation réalisée, on met en route le logiciel en effectuant la démarche suivante : Bouton Démarrer à Programmes à Internet Explorer à FrontPage Express.

NB : Le logiciel Front Page Express permet de concevoir les pages Web, mais il ne peut les visualiser. Pour se rendre compte du travail réalisé, il faut donc utiliser un navigateur (Internet Explorer ou Netscape).

a. Enregistrer.

Pour éviter les pertes de données, il est préférable d'enregistrer la page à vide. Pour enregistrer : Menu Fichier à Enregistrer sous, la boîte de dialogue suivante apparaît :

Il faut ensuite appuyer sur le bouton Fichier, se déplacer dans le disque dur vers le répertoire où se trouve déjà les différentes ressources et donner un nom au fichier (8 lettres au maximum, sans accent et sans majuscule)

Exemple : sommaire.htm (ne pas mettre html, votre fichier ne serait pas lu par les "browsers" sous DOS).

La première page d'un site est pratiquement toujours nommée index.htm (c'est le cas pour Edunet) ou default.htm.

Dès que la page est enregistrée, on peut la visualiser à l'aide d'Internet Explorer.

b. Insérer un fond d'écran.

Par défaut, le fond de l'écran est blanc. On a la possibilité de mettre un peu de fantaisie dans la présentation, en choisissant une autre couleur de fond ou une image en arrière plan.

Pour ce faire, menu Format à Arrière-plan, la boîte de dialogue suivante s'affiche :

On a la possibilité de paramétrer la couleur du fond et celle des caractères. Il existe un certain nombre de couleurs prédéfinies, mais il est possible de personnaliser la palette.

Remarques : Evitez les combinaisons agressives pour la vue. Il faut privilégier les fonds pastels ou les gris. Pour donner un aspect professionnel à votre production, il vaut mieux adopter la même présentation pour vos différentes pages (à faire découvrir aux élèves par tâtonnements).

Pour insérer une image de fond, il faut cocher la case adéquate et appuyer sur le bouton Parcourir. Il reste à choisir l'image voulue (formats : GIF ou JPEG). Cette option donne la possibilité d'insérer un fond personnalisé (par exemple marbré). Ces images seront répétées autant de fois que nécessaire sur le fond d'écran. Conseil : Très important, supprimez toute référence au disque dur C: dans la zone du nom de l'image (ce conseil est d'ailleurs valable pour toutes les insertions (liens, sons…).

Conseil : Préparez toutes vos pages "à vide" en suivant la démarche exposée ci-dessus.

b. Insérer du texte sur une page.

Pour insérer du texte, il suffit de cliquer avec le bouton gauche de la souris sur le fond de la page. Un curseur clignotant apparaît alors. Comme dans un traitement de texte, le retour à la ligne se fait automatiquement. On peut centrer le texte, l'aligner à gauche ou à droite, mais il est impossible de justifier le texte (limite du langage HTML) : Menu Format à Paragraphe…

On peut changer la police de caractère et la taille de cette police à l'aide de la fenêtre adéquate.

Menu Format à Police…

Conseil : Evitez les caractères trop petits, la taille 10 est le minimum acceptable.

On peut aussi insérer du texte en utilisant le copier / coller, mais dans ce cas le texte importé devra impérativement être remis en forme.

c. Insérer un lien sur une page.

Le lien interne.

• Il est particulièrement utile lorsque l'on a de longues pages de texte sur un site, pour renvoyer vers des notes de bas de page, pour créer un index ou un glossaire…
  Avant de créer ce lien, il faut d'abord déterminer la cible (on parle aussi de signet ou d'ancre), c'est à dire un mot qui constituera le point d'arrivée lors de l'activation du lien. La première étape consiste donc à sélectionner cette cible. On ouvre ensuite le menu Edition à Signet… On peut alors donner un nom au signet, il est conseillé de garder celui proposé par le logiciel (exemple : arrivée).
  L'étape suivante consiste à créer le lien vers la cible. Pour cela, on sélectionne un autre mot du texte ou une image. On active ensuite le menu Insertion à Lien. Dans la zone URL, on tape le caractère # (dièse) suivi immédiatement du nom de la cible (dans notre exemple : #arrivée). Il faut ensuite valider avec la touche OK.
  Remarque : On peut définir autant de cibles qu'il est nécessaire et plusieurs mots ou images peuvent faire référence à une même cible.

Le lien vers une autre page.

• Il faut d'abord sélectionner le mot (ou l'image) qui permettra d'activer le lien. Ensuite, on se rend dans le menu Insertion à Lien. Dans la boîte de dialogue qui s'ouvre alors (onglet World Wide Web), il faut sélectionner http dans le menu déroulant type de lien. Dans la zone URL qui se trouve en dessous, il faut indiquer le nom de la page d'arrivée. Attention, effacez les caractères : http://. Si la page cible se trouve dans le sous répertoire pages dans votre répertoire Internet, il faut alors indiquer dans la zone URL : /pages/sommaire.htm. Il faut ensuite valider avec la touche OK.

Le lien vers la messagerie (Email).

• Il est particulièrement intéressant pour recueillir les impressions des visiteurs de vos pages. La première étape consiste à sélectionner un mot explicite qui permettra à votre lecteur de savoir qu'il s'apprête à vous envoyer un message. On peut aussi utiliser des images animées explicites (cf. plus loin).
  Ensuite, on se rend dans le menu Insertion à Lien. Dans la boîte de dialogue qui s'ouvre alors (onglet World Wide Web), il faut sélectionner mailto dans le menu déroulant type de lien. Dans la zone URL qui se trouve en dessous, il faut indiquer les coordonnées de votre adresse Email derrière mailto: (exemple : mailto:tartempion@ia62ac-lille.fr). Il faut ensuite valider avec la touche OK.

d. Insertion d'une image sur la page.

L'insertion.

• La première étape consiste à placer le curseur à l'endroit où l'on désire implanter l'image. On active ensuite le menu Insertion à Image… Une boîte de dialogue s'ouvre alors, il faut appuyer sur le bouton Parcourir et se rendre dans le répertoire où vous avez placé vos différentes ressources. On sélectionne l'image voulue et l'on valide ensuite avec le bouton OK.
  NB : On peut définir l'alignement de cette image en utilisant les boutons de la barre d'outils ou le menu Format à Paragraphe… puis en sélectionnant l'alignement désiré par menu déroulant en bas de la boîte de dialogue qui s'ouvre.

Redimensionner une image insérée.

• Lorsque l'image est sur la page, on clique une fois dessus pour la mettre en surbrillance (ce qui indique qu'elle est sélectionnée). On remarque alors des petits carrés noirs sur les côtés de l'image. Pour agrandir ou rétrécir l'image, il faut pointer le curseur de la souris sur l'un de ses plots, on active alors le clic gauche et on entraîne la souris en maintenant la pression sur le bouton.

Utiliser une image allégée.

• Le logiciel Front Page Express permet de créer des pages web sur lesquelles n'apparaîtront dans un premier temps que des images allégées (l'internaute décidera s'il le veut de visualiser cette image en qualité optimale par un simple clic sur l'illustration, il pourra alors voir et imprimer éventuellement une image de bonne facture).
  Pour réaliser cette opération, il faut disposer de deux images similaires, l'une en basse qualité (75 dpi), l'autre en haute qualité (200 dpi) et les nommer avec des noms voisins (exemple : image1hq et image2bq). On insère l'image de haute qualité (voir plus haut) et dans la boîte de dialogue des propriétés de l'image, on renseigne la ligne Basse résolution avec le nom de l'image de basse qualité (sans oublier le chemin d'accès à cette image, utilisez si nécessaire le bouton Parcourir).

La fonction "Alt" ou "Texte alternatif".

• Certains internautes changent les paramètres par défaut de leur navigateur (Internet Explorer ou Nestcape) afin de ne jamais charger les images (essentiellement pour gagner du temps). Ces personnes ne peuvent donc visualiser vos photos ou dessins. Pour que ces visiteurs puissent avoir une idée de l'image qu'ils n'aperçoivent pas, il existe une alternative. La balise HTML Alt permet de remplacer l'image non affichée par un texte descriptif.
  Pour insérer un texte alternatif, il faut activer la boîte de dialogue des propriétés de l'image après avoir sélectionné cette dernière. Menu Edition à Propriété de l'image ou clic droit sur l'image. Juste en dessous du champ Basse résolution, figure un champ texte dans lequel vous pouvez taper quelques mots. Attention : ce texte doit être adapté à la taille de l'image, inutile de placer une texte de trois lignes en lieu et place d'une minuscule vignette, il ne sera pas affiché dans sa totalité.
  Remarques sur les images : Evitez de placer trop d'images sur vos pages Web. Posez-vous toujours la question suivante : Cette image est-elle bien utile pour appuyer mes propos ? Sachez que les images ralentissent sensiblement la navigation. Veillez à ce qu'elles ne "pèsent" pas plus de 30 ko (ce qui est peu). Evitez de placer de trop nombreux gifs animés qui ne manqueront pas de détourner les lecteurs du message que vous souhaitez faire passer (surtout les enfants).

e. Intégrer un tableau sur la page.

• Le tableau représente un moyen très pratique pour organiser des données sur une page web. Il permet d'encadrer du texte et d'effectuer des mises en page combinant images et textes (comme avec un logiciel de PAO Cf. Publisher). Avant de tracer un tableau, il est important de savoir combien il doit avoir de lignes et de colonnes. La première étape consiste ensuite à utiliser le menu Tableau à Insérer Tableau. Dans la boîte de dialogue qui s'ouvre, on peut entrer le nombre de lignes et de colonnes, l'alignement du tableau sur la page, la taille de la bordure du tableau…etc. Je vous suggère de faire des essais pour visualiser les possibilités offertes.

f. Insérer un fond musical.

Retour au sommaire