Exemple de création d'un site avec FrontPage 2000

RésuméExemple de création d’un siteavec FrontPage 2000Création d’un site de formation sur le thème « Comment réaliser une saucebéchamel »Création d’une page d’accueil reliant trois autres pages:o ingrédients,o phases techniques,o liensEdition et formatage du contenuCréation d’une navigationMise en page à l’aide de tablesInstructionsCréation d’un site «Fichier/Nouveau/Site Web »: C:\FormationFP\Bechamel Fermer le site Web. «Fichier/Fermer le Site Web »: « Fichier/Ouvrir un site Web » et regarder l’icône spéciale de répertoire pour un siteweb FrontPageCréation et formatage de pages Ouvrir la page « index.htm ». On double-clique sur l’icône du fichier Tapez le texte suivantComment réaliser une sauce béchamel Mettre en forme le texte avec le style Titre1 et centrez Changer la couleur d’arrière-plan. « Fichier/ Propriétés ->onglet » « Fichier/Enregistrer » Visualisez le rendu final en cliquant sur l’onglet « aperçu ». Observez le formatHTML sous-jacent en cliquant sur l’onglet « HTML ». Puis revenir au mode« normal ». « Fichier/Nouveau/Page » puis « Fichier/Enregistrer ». Enregistrer sousingedient.htm « Fichier/Importer/Ajouter un dossier ». Sélectionner :C:\FormationFP\ressource Ouvrir le fichier texte1.doc du répertoire Ressouce et coller son contenu dans la pageLe fichier contient le texte suivantIngrédients70 g de beurre70 g de farine1 litre de laitSel finPoivreNoix de muscadeUstensiles

2 casseroles1 fouet1 spatule en bois Tout sélectionner +A et choisir le style « Normal » Mettre en forme le texte avec les styles Titre1 et Titre2 Mettre une image d’arrière-plan. « Fichier/ Propriétés ->onglet » etchoisir « back.gif » « Fichier/Enregistrer » « Fichier/Nouveau/Page » puis « Fichier/Enregister ». Enregistrer sous fiche.htm Ouvrir le fichier texte2.doc du répertoire Ressource et coller son contenu dans la pageLe fichier contient le texte suivantPorter le lait à ébullition.Faire fondre le beurre dans une casserole.[img1]Lorsqu'il commence à grésiller, ajouter la farine en uneseule fois.[img2]Bien mélanger à la spatule en bois ou au fouet[img3]Cuire le roux blanc quelques minutes. Attention de ne pasle laisser brunir. Il ne doit surtout pas colorer.[img4]Verser le lait bouillant sur le roux blanc froid[img5]Bien mélanger avec un fouet et porter à nouveau àébullition. La sauce béchamel va se mettre à épaissir.[img6]Laisser cuire quelques minutes en remuant constamment. Tout sélectionner +A et choisir le style « Normal » Placer le curseur sur les paragraphes marqués [img] et sélectionner le menu« Insertion/image/A partir du fichier »Insérer les images suivanteso img1.gifo img2.gifo img3.gifo img4.gifo img5.gifo img6.gif Supprimer les marques [img] et centrer au besoin les images Mettre en forme le texte à l’aide de puces et de titre Mettre une image d’arrière-plan. « Fichier/ Propriétés ->onglet » etchoisir « back.gif » Créer un lien hyper texte vers « ressources1/clope.mov » sur le texte «Cliquezici pour un exemple en vidéo » « Fichier/Enregistrer » Créer une page supplémentaire nommée « liens »

Montage d’une navigation Tapez les trois termes « Objectif » « Fiche » et « Liens » sur la page d’accueil Créer une navigation en ajoutant un line hypertexte à chacun des trois termes Pour cela, sélectionner le termes puis « Insertion/Lien Hypertexte » et selectionnerle fichier approprié Pour chacune des trois autres pages, entrez le texte retour et créez sur ce mot un lienhypertexte sur la page d’accueil « index.htm » Enregistrez toutes les pages et testez la navigation dans le mode aperçu Revenir en mode « normal »Application des éléments automatisés de FrontPage : ajout d’un thèmeet d’une navigation Appliquez un thème avec « Format/Thème ». Choissiez « toutes les pages », « thèmeAquarelle » et « couleurs vives » Regardez l’apparence de toutes vos pages Changer de thème, au besoin pour voir comment se modifient vos pages, quels sont lesélément qui sont affectés par l’application d’un thème Cliquez sur navigation dans la barre « affichage » Renommer la page d’accueil en « accueil » Faire glisser « objectifs » « fiche » et « liens » sous « accueil » et les renommer Ouvrez chacune des pages. « Fichiers/Propriétés » « général/titre » et renommerchacune des pages Noter la distinction des trois noms pour une page : le nom de fichier, le titre HTML etlibellé de navigation Passer en mode « page » dans la barre « affichage » Ouvrir la page d’accueil « Insertion/Barre de navigation » « Niveau enfant – Horizontale – Boutons » Procédez de même pour les trois autres pages en choisissant « Insertion/Barre denavigation » «Même Niveau – Horizontale – Boutons – Page d’accueil » Supprimer des quatre pages la navigation texte Sauver toutes les pages et vérifier la navigation en passant en mode « aperçu »Formatage à l’aide de tables Deux utilisations pour les tables:1. Formatage de tableaux (tableaux de chiffres)2. Puis avec la sophistication de fusion de cellules et de contraintes sur la dispositionde cellules, utilisation comme cadre de disposition de page Ouvrir « liens.htm » « Tableau/insérer/Tableau » « colonnes : 2 – Lignes : 5 » Tapez « Site– Description » sur la première ligne Ouvrez le fichier « texte3.doc » Coller le fichier dans la page sous le tableau Créer un lien hyper-texte sur le mot . Le lien pointera sur l’URLhttp://www.meilleurduchef.com/ Faites glisser le mot « Le meilleur du chef » dans la cellule de gauche de la deuxièmeligne du tableau Faites glisser sa description dans la cellule de droite

Recommencer l’opération pour les deux sites suivants (on pourra éviter la saisiemanuelle de l’URL et faisant un couper/coller avec l’adresse entre parenthèses) Note : Remarquer la syntaxe différente de celle des liens créés auparavant. Le liencommence par http://nomsite/ . Ce sont des liens absolus. Ils pointent vers une autreadresse fixe quelque soit l’emplacement du fichier d’origine. Dans les liens créésprécédemment l’adresse ne contenait pas le préfixe http mais donnait le nom et laposition relative du fichier cible par rapport au fichier source Effacer les deux dernières cellules inutiles du tableau. Les sélectionner en tirant avecla souris. Puis clic bouton droit et sélectionner « supprimer les cellules » dans lemenu. Sélectionner toutes les cellules. Clic droit « Propriétés de la cellule »Choisir les optionsAlignement horizontal : gaucheAlignement vertical : haut Modifier les propriétés du tableau. Clic droit « Propriétés du tableau »Choisir les optionsAlignement : centréMarge intérieure des cellules : 7Spécifier la largeur : 80 (en pourcentage) Enregistrer et fermer le fichier Ouvrir objectif.htm et positionner le curseur en tête de fichier puis créer un tableau« Tableau/insérer/Tableau » « colonnes : 2 – Lignes : 2 » Sélectionner les deux cellules du haut. Clic droit. «Fusionner les cellules » Sélectionnez puis copiez le titre « Objectifs » dans la cellule du haut. Remarquez ladifférence si on inclus la marque de fin de paragraphe dans notre sélection ou non Sélectionner et coller le texte dans la cellule en bas à droite. Copier la barre de navigation dans la cellule en bas à gauche Modifier l’apparence de la barre de navigation. Clic droit sur la barre de navigation« Propriétés/verticale »Remarque la disposition « verticale : :centrée » du contenu des cellules. Changer avecclic droit « Propriétés de la celluleChoisir les optionsAlignement vertical : hautSpécifier la largeur : décocher la case Modifier les propriétés du tableau. Clic droit « Propriétés du tableau »Choisir les optionsBordures/taille : 0Marge intérieure des cellules : 7Faire de même pour les autres fichiers mais cette fois ci en formatant l’alignementvertical des cellules AVANT de copier le contenu dans les cellulesPour le fichier liens.htm, observez attentivement les difficultés liées au déplacementdu tableau intérieur. Ne pas oublier que pour sélectionner un tableau c’est « Tableau -sélectionner-Tableau »Enregistrer tout et tester la navigation