1. Introduction


    2. Au début, les créateurs de pages web utilisaient un éditeur de texte et un navigateur en parallèle. Dans l'un ils tapaient le code HTML de la page, et dans l'autre ils visualisaient cette page. On a crée des éditeurs plus conviviaux, des éditeurs WYSIWYG (What You See Is What You Get = ce que vous voyez correspond à ce que vous obtenez).
    Dorénavant, par exemple avec FrontPage 2000, la création, la modification et la publication d'une page s'effectuent sans quitter le logiciel.

  2. Qu'est-ce qu'un site web FrontPage et comment en créer un ?


    3. En Word ou en Excel, un travail correspond à un fichier. Un site web est constitué de plusieurs fichiers reliés les uns aux autres. Un site web FrontPage contient donc tous les fichiers correspondant à un site web, les liens entre ces fichiers et des informations sur l'état du site (dernières modifications, connexion de base de données,...)

    Il existe deux moyens de créer un site web:
    Chaque site web FrontPage contient un dossier private et un dossier Images . On conseille de garder tous les fichiers graphiques du site dans le dossier Images et les fichiers auxquels les visiteurs ne doivent pas accéder dans le dossier private.

    Attention, par défaut le dossier private est aussi public que n'importe quel autre. Il faut utiliser des options de sécurité pour en préserver le contenu. Si le site web comporte plusieurs pages, la page principale du site s'appelle en général index.html (ou index.asp si elle contient du script asp).


    Pour supprimer un site FrontPage, soit vous supprimez les informations qui permettent à FrontPage de le modifier, soit vous supprimez entièrement le site.
    Pour cela, il faut ouvrir le site, afficher la liste des dossiers, faire un clic droit sur le nom du site, et sélectionner Supprimer. Une boite de dialogue apparait permettant de choisir
    supprimersite
    Cette action est irréversible.
    Effacre les informations de FrontPage rend impossible la reconnaissance du site par FrontPage mais les fichiers contenus dans le site restent intacts.

  3. L'organisation d'un site web


    4. En général, un document correspond à un fichier, quelque soit le nombre de pages (document Word, Excel,...). Ce n'est pas le cas avec un site web. Les pages web se présentent généralement en groupe. En effet, il vaut mieux définir un ensemble de pages web liées plutôt qu'un fichier volumineux, difficile à manier. Cela simplifie notamment l'utilisation de liens hypertexte.

    Lorsqu'un site web est ouvert, FrontPage offre six modes d'affichage permettant d'accéder rapidement à diverses informations sur ce site:

    Regardons ces modes un peu plus en détails:

  4. Mise en forme d'une page web


    5. Il faut bien se rappeler que la page d'accueil est la page la plus importante: Les pages qui ne sont pas accessibles par des liens hypertexte sont des pages qui ne seront pas visitées.

    1. Créer une page web


      2. On peut créer une page web:

    2. Le titre de la page


      3. Chaque page d'un site porte un titre. FrontPage en attribue un par défaut (Nouvelle Page ...). Le titre de la page apparait en général dans la barre de titre de la plupart des navigateurs. Pour titre une page, il faut sélectionner Propriétes dans le menu Fichier ou cliquer sur le bouton droit sur la page, et sélectionner Propriétés de la page dans le menu. Sous l'onglet Général de la boite de dialogue qui s'ouvre, on peut sélectionner le titre de la page.
      choisirtitre
      Il faut essayer de choisir un titre court et évocateur, qui facilite l'orientation des visteurs dans le site web.

    3. Le texte


      4. Pour saisir le texte, il faut se mettre en mode Page. Lorsque quelques lignes de texte on été saisies, on peut en sélectionner une partie et lui appliquer les mises en forme de texte proposées par FrontPage. On trouve divers boutons dans la barre d'outils: La largeur effective de la marge de droite dépend beaucoup du navigateur et du système utilisés pour consulter la page.

    4. Quelques effets dans le texte


      5. D'autres effets peuvent être appliqués au texte
      Les autres effets sont utilisés pour définir le type d'information présenté:

    5. Les titres dans la page


      6. Il existe six niveaux de titres dans une page web. Pour transformer du texte en titre, le plus simple est d'utiliser le menu déroulant Style de la barre d'outil Mise en forme.
      transformerentitre.
      Pour spécifier la couleur et la police d'un texte, il faut le sélectionner et cliquer sur Format, Police. On a alors cette boite de dialogue:
      boitepourpolice
      Vous pouvez choisir n'importe quelle police présente sur votre système. Si l'utilisateur de la page web ne possède pas cette police, c'est la police par défaut de son navigateur qui lui est substituée. Essayez d'utiliser les polices courantes.

    6. Les liens hypertexte


      7. Pour transformer du texte en un lien hypertexte, il faut sélectionner la partie de la page à transformer en lien. On sélectionne ensuite la commande Insertion, Lien hypertexte ou on clique sur le bouton Lien hypertexte dans la barre d'outils.
      Les liens hypertexte peuvent être associés à des fichiers du site, ou à n'importe quelle adresse URL.

      On peut également faire un lien vers un endroit précis d'une page web (par défaut, le lien hypertexte est fait vers le début de la page web). Pour cela, il faut d'abord donner un nom à l'endroit que l'on souhaite atteindre. Sélectionnez le mot désiré. Cliquez Edition Signet. Le nom sélectionné s'affiche dans la zone Nom du signet. Vous pouvez éventuellement le modifier. Un nom de signet ne doit pas contenir d'espace.
      Un signet est signalé par un soulignement en pointillé.
      Il reste à créer le lien hypertexte. Sélectionnez le mot vers lequel vous souhaitez renvoyer le premier signet. Cliquez Créer ou modifier un lien hypertexte. Dans la boîte Créer un lien hypertexte, sélectionnez le signet désiré dans la zone Optionnel.
      lienverssignet

      Pour modifier un lien hypertexte, sélectionnez le mot contenant le lien hypertexte désiré. Cliquez Créer ou modifier un lien hypertexte. Faites vos modifications dans la boîte de dialogue Modifier un lien hypertexte.

      Si vous faites des liens hypertextes vers des pages web du même site, utilisez plutôt des adresses relatives. Ainsi les liens resteront valides lorsque vous déplacerez le site (par exemple pour le rendre ...)
      pasadresseabsolue
      adresserelative

    7. Les listes


      8. Les pages web FrontPage peuvent afficher deux types de listes: Pour mettre en forme une liste, il faut cliquer sur les boutons Numérotation ou Puces de la barre d'outils
      boutonslistes
      Par défaut, une liste numérotée démarre à 1. On peut décider de démarrer à un autre numéro. Il faut cliquez à droite lorsque l'on est sur la liste, et choisir Propriétées de la liste
      proprietesdelistes1
      proprietesdelistes2
      Plusieurs listes peuvent être imbriquées. FrontPage peut activer la réduction et le développement des sous-niveaux de listes, pour les navigateurs récents. Pour activer la réduction ou le déroulement, il faut sélectionner les éléments concernés, cliquer à droite et choisir Propriétes de la liste.

    8. Les images


      9. Les formats d'enregistrement des fichiers images de FrontPage sont .GIF et .JPEG Cependant vous pouvez aussi insérer d'autres types de format d'images, FrontPage les convertira automatiquement.
      Pour insérer une image, il fautaller dans le menu Insérer et choisir Image. Une fois l'image insérée dans la page, on peut déterminer sa position par rapport à d'autres éléments de la page, dans la boite de dialogue Propriétés de l'Image, accesible par un clic droit sur l'image.
      proprietesimage
      L'onglet Apparence permet de définir l'alignement d'une image (Gauche = l'image apparaît à gauche du texte et des autres éléments, Droite = l'image apparaît à droite du texte et des autres éléments, ...). Sur une page web, le texte suit l'image si celle-ci a été insérée

      Pour modifier une image après l'avoir sélectionnée, utilisez les boutons de la barre d'outils Images.
      barreoutilsimage
      Pour passer de la couleur au noir et blanc, cliquez Noir et blanc dans la barre d'outils Image.
      couleur-noirblanc
      Pour ajouter du texte dans une image, cliquez Texte dans la barre d'outils Image.
      textedansimage
      Lorsque l'image est en format .JPEG, FrontPage demande si vous souhaitez convertir cette image en .GIF. En effet, .JPEG ne supporte pas le texte.

      On peut également ajouter un lien hypertexte à une image, et prévoir un texte de remplacement décrivant l'image (utile si la page risque d'être longue à chargée, le texte s'affiche en attendant que l'image apparaisse).
      Pour ajouter un lien hypertexte, il faut sélectionner l'image et choisir Insertion, Lien hypertexte ou cliquer sur le bouton Lien hypertexte dans la barre d'outils standard.

      Il est possible de rendre transparente une ou plusieurs couleurs d'une image .GIF, en cliquant sur le bouton Définir cette couleur comme transparente dans la barre d'outils.
      definircouleurtransparente
      Le pointeur prend alors la forme d'un crayon surmonté d'une gomme, et il ne reste qu'à cliquer sur la couleur à rendre transparente. Cela peut notamment servir à rendre transparent l'arrière-plan d'une image.
      fondimagetransparent
      Les couleurs de l'image ne sont pas réellement altérées. si on enlève l'effet de transparence, on constate que l'image est inchangée.

    9. Images interactives


      10. On peut associer des zones précises d'une image à des liens hypertexte. Une image peut ainsi se substituer à un menu. On utilise pour cela la barre d'outils Image
      barreoutilsimage
      À l'extrémité de la barre d'outils, plusieurs boutons arborent des formes géométriques. Ces boutons servent à créer les zones réactives. Ces zones permettent d'associer chaque lien hypertexte à une portion seulement de l'image. Il existe trois types de zones réactives: Pour tracer un rectangle ou un rond, il suffit de faire glisser la souris sur la zone qu'occupera la zone. Pour tracer un polygone, il faut cliquer sur chaque intersection des côtés du polygone, et terminer par un double-clic.
      Quelle que soit la forme choisie, une boite de dialogue s'ouvre et permet de spécifier le lien hypertexte à lui associer.
      Si toute l'image n'est pas couverte par des zones réactives, il est préférable de spécifier un lien hypertexte par défaut qui s'ouvre si le visiteur clique sur une partie non réactive de l'image, en utilisant la boite de dialogue Propriétés de l'image.
      Si deux zones réactives se chevauchent, la plus récemment créée sera active dans la zone de chevauchement.
      Pour distinguer les zones réactives, il suffit d'utiliser le bouton Surligner les zones réactives. L'image disparait alors et on voit les zones réactives.
      zonesreactives

    10. Les tableaux


      11. L'aspect du contenu d'une page web est souvent difficile à controler. Le texte, les images et les utres éléments s'affichent différemment selon le navigateur et le système du visiteur. Insérer des éléments de la page dans un tableau permet de mieux en contrôler l'affichage. Les informations sont ainsi alignées horizontalement et verticalement.
      Pour ajouter un tableau à une page, il suffit de cliquer sur le bouton Insérer un tableau de la barre d'outil.
      ajoutertableau
      Si vous voulez créer davantage de cellules, il faut maintenir le bouton de la souris appuyé, et faire glisser le pointeur hors de la grille.
      Pour ajouter du texte, des images ou autres dans une cellule, il suffit de cliquer dans cette cellule pour y placer le curseur. Les tableaux commencent par présenter des cellule de la même taille. FrontPage s'efforce de maintenir cette mise en forme. Les mots passent automatiquement à la ligne lorsqu'ils atteignent le bord de la cellule. Lorsque le contenu d'une cellule est trop grand (par exemple avec une image), celle-çi s'élargit. On peut également réduire la taille d'une cellule pour l'ajuster au contenu en cliquant sur Tableau, Ajuster.
      ajustercellule
      Pour ajuster une ligne ou une colonne, il suffit de faire un clic droit ans une cellule adjacente à l'emplacement désiré. Le menu propose les commandes Insérer une ligne et Insérer une colonne.
      insererlignecolonne
      Pour supprimer des lignes et des colonnes, il faut sélectionner la zone à supprimer, faire un clic droit et choisir Supprimer dans le menu.

      Par défaut, toutes les cellules ont la même taille et elles s'ajustent à leur contenu. Mis à part ces deux options, on peut redimensionner individuellement les colonnes et les lignes. Pour cela, il faut placer le pointeur sur une bordure de lignes ou de colonne. Il se transforme alors en flèche à deux pointes, indiquant les directions dans lesquelles vous pouvez faire glisser la bordure.

      La boite de dialogue Propriétes de la cellule (accessible par un clic droit), permet de spécifier les dimensions (en pixels).
      proprietescellule
      On peut définir la largeur d'un tableau en lui attribuant un certain pourcentage de l'espace disponible, en utilisant la boite de dialogue Propriétées du tableau
      proprietestableau
      Une largeur de 100% accorde au tableau toute la largeur de la page, à moins qu'il ne se trouve dans un autre tableau.
      On peut également modifier: Il est possible de fusionner plusieurs cellules, ce qui est très pratique si on utilise un tableau pour la mise en page. On peut ainsi étendre une cellule, pour qu'elle couvre l'espace normalement occupé par plusieurs cellules. our cela, il faut sélectionner les cellules à fusionner (qui doivent former un bloc rectangulaire), cliquer à droite et choisir Fusionner les cellules.
      fusioncellules
      Pour mettre en forme votre tableau, cliquez Affichage Barre d'outils Tableau. Pour mettre en forme une cellule, une ligne, une colonne, après avoir sélectionné l'un de ces éléments, cliquez la commande qui vous intéresse dans la barre d'outils.
      barreoutilstableau.
      Pour transformer son tableau en texte, sélectionnez le tableau, et cliquez Tableau Convertir le tableau en texte.
      Pour transformer un texte en tableau, cliquez Tableau Convertir le texte en tableau. Choisissez alors l'option de séparation.

      Pour encadrer le tableau, cliquez le bouton droit sur le tableau, puis sélectionnez Propriétés du tableau. Cliquez Style, cliquez l'onglet Bordures.
      borduretableau.

    11. Arrière-plan


      12. Pour sélectionner un arrière-plan, sélectionner la commande Arrière-plan dans le menu Format. La boite de dialogue Propriétes de la page s'affiche:
      proprietespagearriereplan.
      Pour choisir une image, il faut cocher la case Image, puis Parcourir le réseau jusqu'au bon fichier.

    12. Texte défilant


      13. Sélectionnez le texte que vous souhaitez faire défiler, puis cliquez sur Insertion Eléments actifs. Choisissez Texte défilant. Vous pouvez alors définir différents paramètres (direction, vitesse de défilementÉ) Pour voir le texte défiler, vous devez lancer le navigateur ou afficher en aperçu.

  5. Mise en forme d'un site web


    1. Utilisation de thèmes


      2. L'aspect visuel est un point très important d'un site web. Des couleurs criardes et une mise en page surchargée ou déroutante font fuir les visiteurs. Pour donner à votre site une apparence sophistiquée et cohérente, FrontPage permet d'utiliser des thèmes.
      Plusieurs éléments déterminent l'aspect visuel d'un site FrontPage permet de définir les caractéristiques visuelles d'un site. Une douzaine de thèmes sont inclus, auxquels on accède par la commande Format, Thème. On a alors le choix entre plusieurs thèmes pré-définis:
      themes
      On peut appliquer le thème à une seule page ou à tout le site. Dans le premier cas, le thème s'applique uniquement à la page ouverte en affichage Page au moment du choix.

      Vous pouvez également créer votre propre thème. Commençons par modifier un thème existant. Pour cela, il faut selectionner le thème de base, puis cliquez sur modifier dans la boite de dialogue
      modifierthemes
      Trois nouveaux boutons apparaissent: Couleurs, graphismes, Texte.
      modifierthemes2
      Chacun de ces boutons permet de modifier un aspect du thème.

      Il y a plusieurs manières de modifier la couleur: Concernant le graphisme, on peut changer l'image d'arrière-plan
      modifierthemesgraphismes2
      et le style d'écriture.
      modifierthemesgraphismes1
      Et enfin, on peut modifier le texte
      modifierthemestexte

    2. Les cadres


      3. Les cadres divisent la fenêtre du navigateur en plusieurs zones, chacune d'elles affichant une page web indépendamment des autres. Le concepteur doit définir la taille de chaque cadre. L'utilisateur peut redimensionner le cadre dans le navigateur, à moins que cette fonction ne soit désactivée.
      Un lien hypertexte dans un cadre peut entrainer le chargement d'une page dans un autre cadre, appelé cadre de destination.

      La première étape pour créer des cadres dans FrontPage consiste à choisir un modèle de cadres. Lorsque vous ouvrez la boite de dialogue Nouveau en demandant la création d'une page, l'onglet Cadres propose plusieurs combinaisons de cadres:
      creercadre
      L'aperçu en bas à droite permet de se faire une idée des proportions.
      Il suffit de sélectionner un modèle pour le créer dans l'affichage Page. Contrairement au modèle de page simple, aucune page n'est créée: chaque cadre contient les boutons Choisir la page initiale, Nouvelle Page et Aide
      cadresvides
      Le bouton Nouvelle Page crée une page et la place dans le cadre. Le bouton Choisir la page initiale ouvre une boite de dialogue permettant de pplacer une page existante dans le cadre. Cette page peut appartenir au site, ou se trouver sur le web

      Ce n'est pas immédiatement visible mais une page supplémentaire est créée, en plus des pages contenues dans les cadres.
      pagedescadres
      Cette page, appelée frameset ou page des cadres renferme les informations déterminant entre autre la taille et le nom des différents cadres. Lorsque vous enregistrez vos pages, pensez à enregistrer cette page, sinon toutes les informations concernant les cadres seront perdues.

      Pour modifier un cadre, il faut faire un clic droit à l'intérieur de ce cadre, et sélectionner Propriétés du cadre. On obtient alors une boite de dialogue
      proprietescadre

      Chaque page reçoit un nom par défaut. Les liens hypertexte qui chargent des pages dans le cadre y font référence. Un lien hypertexte peut ouvrir une page dans son propre cadre, dans un cadre différent, ou dans une autre fenêtre du navigateur. On peut modifier le cadre de destination chaque fois que l'on crée ou modifie un lien hypertexte.
      choisircadredestination
      On peut définir le cadre de destination par son nom, ou choisir parmi plusieurs options:
      optionscadredestination

    3. Transition de pages


      4. On peut créer des effets de passage d'une page à l'autre. Par exemple,
      transitioncercle
      Pour cela, il faut aller dans le menu Format et choisir Transitions de page pour ajouter un effet de transition de page, ou le retirer. L'effet peut êtreassocier à quatre évenements:

    4. Les feuilles de style


      5. La tendance actuelle tend à dissocier le contenu d'une page web de sa présentation. Cela simplifie le travail lorsqu'il faut faire des modifications. Par exemple, si l'on veut modifier une police, il n'est plus nécessaire de modifier toutes les pages si l'on a regroupé les styles.
      Les CSS (Cascading Style Sheets, feuille de style en cascade) sont un nouveau langage qui permet de déterminer l'aspect d'une page web et de ses éléments. Les fonctionnalité des feuilles de style sont plus étendues que celles des thèmes, et permettent, entre autres, d'appliquer un thème. On peut notamment Pour créer une feuille de style, il faut cliquer sur Fichier, Nouveau, Page puis sélectionner l'onglet feuille de style. Les feuilles de style doivent être enregistrées avec l'extension .css Pour utiliser une feuille de style dans une page web, il faut les lier en se placant dans la page web et en allant dans le menu Format, Lien de feuille de styles.

      Pour modifier une feuille de styles, il faut cliquer sur Format, Style à partir d'une page web ou à partir d'un fichier .css ouvert en mode Page. La boite de dialogue Style apparait
      boitedesstyles
      Si on modifie une feuille de styles à partir d'une page web, les modifications ne seront enregistrées que sur cette page. Si on modifie à partir d'un fichier .css, les modifications sont appliquées à toutes les pages liées à la feuille de style.

  6. Les formulaires


    7. Pour récupérer des données de l'utilisateur, on utilise un formulaire. Il existe différentes manières de travailler avec les formulaires: On peut ensuite recupérer les informations dans un fichier texte ou une page web.
    Si vous n'avez jamais créer de formulaire, le plus simple est de commencer avec l'assistant Création de formulaire, qu'il faut sélectionner dans le menu proposer lors de la création d'une page web (menu Fichier, Nouveau, Page).
    Deux éléments doivent être clairement définis: le message (la question) et le type de données(type de la réponse). Plusieurs types sont disponibles: assistantcreationformulaire

    Il faut donner un nom à la variable d'une question. C'est le nom de l'emplacement où l'information recueillie dans le formulaire sera stockée. Le nom d'une variable doit reflèter son contenu. Il peut contenir des lettres, des chiffres, et le caractère underscore (_).

    Dans l'assistant Création de formulaire, deux types de données permettent de sélectionner une ou plusieurs réponses dans une liste: Le message doit expliquer comment répondre. Les listes qui permettent de choisir une seule option parmi plusieurs peuvent être présentées de trois façons différentes: par un menu déroulant, avec des cases d'options ou de liste.
    formulaireplusieursoptions


    Les réponses peuvent être traitées de trois manières différentes: formulairetraitement
    Pour les deux premières options, il faut que le serveur accepte les extensions FrontPage. Toutes les réponses au formulaire sont enregistrée dans la même page. Chaque question est identifiée par son nom de variable suivi d'un point-virgule.

    On peut créer un formulaire manuellement, en allant dans le menu Insertion, Formulaire. On peut ajouter divers éléments Le bouton Envoyer permet de transmettre les informations recueillies. Le bouton Rétablir permet de modifier une ou plusieurs réponses.
    On peut regrouper plusieurs cases d'options en leur donnant le même nom. Dans un groupe de cases d'options, une seule peut être cochée. Si l'une est sélectionnée, les autres sont aussitôt déselectionnées.

  7. Références