Création de documents interactifs au format Html sous Word 97

Transcription

1 Création de documents interactifs au format Html sous Word 97 Microsoft Word ainsi que certains autres programmes Microsoft Office fournissent des outils de création de pages Web afin d en faciliter la création pour les intranets et le World Wide Web. Si ces outils ne figurent pas sur votre ordinateur, il convient d exécuter à nouveau le programme d'installation d Office 97 afin de les installer en même temps que les rubriques d'aide traitant de leur utilisation 1. La création de pages Web dans Word permet d'utiliser de nombreuses fonctionnalités Word courantes, notamment la vérification de l'orthographe et de la grammaire, l'insertion automatique ainsi que les tableaux. Certaines fonctionnalités, comme les puces et les lignes graphiques, sont personnalisées afin de faciliter la création de Web. Les fonctionnalités non prises en charge par le langage HTML ne sont pas disponibles lors de la création de pages Web. 1 Qu est-ce qu une page HTML? C est une page qui ne contient que du texte. Ce texte comprend des «balises» ce sont des codes qui sont interprétés par les navigateurs pour présenter la page, afficher les textes en gras, positionner correctement les illustrations. Bien qu il soit possible (connaissant le langage Html), de créer de toutes pièces une page Html depuis un éditeur de texte de type bloc-notes, le rôle d un éditeur html est de générer ces «balises» d une manière transparente pour le créateur. Les pages Html contiennent des «hyperliens». Ce sont des zones sensibles qui permettent par un simple clic d atteindre un autre endroit d une même page, une autre page, voire de provoquer le téléchargement d un fichier ou encore d activer le logiciel de messagerie électronique pour envoyer un message à un destinataire (voir infra). 2 En quoi se différencie-t-elle d une page d un document Word? Largeur : Une page Html doit être visualisée par un navigateur, elle doit donc permettre l affichage des informations sur une largeur voisine de celle de l écran. Ainsi, si l on est l heureux possesseur d un écran de 21 pouces, on prendra garde de ne pas utiliser toute la largeur de son écran au moment de la composition, car l utilisateur final ne possède peut-être qu un écran de 14 pouces. Alors que le texte d une page est recomposé en fonction de la taille de la fenêtre d affichage du navigateur, les images souvent déposées dans une cellule de tableau pour faciliter leur positionnement, risquent de nécessiter l utilisation de la barre de défilement horizontale pour être visualisées. Longueur : Il n y a pas de longueur imposée par un format de page, ainsi un document word de 13 pages donnera lieu à la création d une seule page Html, ce qui n est pas toujours souhaitable. Il faut en effet penser à la durée de chargement d une page et aux facilités de déplacement et repérages sur cette page. Que se passe-t-il au moment de l enregistrement d une page comportant des images? Cas d un document Word : Sauf stipulation contraire, les images sont enregistrées dans le document), le document Word est enregistré sous Ma_page.doc, donc un seul fichier (au sens du système d exploitation), contient le texte et les images. 1 Pour installer les fonctionnalités de création de pages Web, utiliser le cédérom d installation d Office 97. Office 97 vérifie les éléments installés sur la machine puis propose d ajouter/supprimer des composants, activez alors la case à cocher Création de pages Web (HTML). Word 97 et le Html IUFM de Reims Jacques Bresson page 1/9

2 Cas de l enregistrement au format Html : Une page Html ne contenant que du texte, ce dernier contient des «appel» à des images dont les fichiers sont distincts de la page, les balises Html assurant leur positionnement au moment de l affichage dans un navigateur. Les images ont donc une existence propre (elles sont renommées automatiquement par Word et sont alors au format Gif ou JPEG pour diminuer leur taille donc les temps de chargement) Ma_page.html Ma_page.doc Img2.gif Img1.gi f Page Html ne contenant que du texte et un lien vers les images qui sont stockées séparément. Il convient de veiller à copier tous les fichiers indispensables lors d un éventuel déplacement des pages Html ainsi générées. 3 Création d une page Html depuis Word 3.1 Création d un nouveau document «page Web» Fichier Nouveau Onglet «pages Web» Nouvelle page Web (vierge) ou Assistant pages Web (qui permet de créer des pages pré-renseignées en fonction de modèles préétablis) 3.2 Saisie du contenu informationnel de la page Ne pas choisir une police «exotique», en effet au moment de la visualisation de la page sur le poste de l utilisateur final, la police devra être disponible sur la machine de ce dernier (on restera donc dans les polices «classiques de Windows», pour éviter tout désagrément, lorsque le navigateur de l utilisateur final, à défaut de trouver la police demandée affiche la page dans sa police par défaut (généralement Arial ou Times New Roman). A la fin d un paragraphe, lorsque l on frappe de la touche «<Entrée>, on génère un «interligne» important avant le paragraphe suivant. ceci est du à une particularité du langage Html ; Si l on ne souhaite pas faire apparaître un tel espacement des paragraphes, il est judicieux de provoquer un retour à la ligne (<maj>+<entrée>) plutôt qu une fin de paragraphe. Si l on souhaite modifier des espacements non désirés entre des paragraphes déjà saisis, il convient d afficher (si ce n est déjà le cas) les caractères de gestion du texte en cliquant sur le bouton de la barre d outils. Une marque de fin de paragraphe est symbolisée par le caractère un retour à la ligne par Les marques de paragraphes sont alors facilement identifiables et peuvent être supprimées et remplacées par des sauts de lignes à l aide du raccourci clavier <maj>+<entrée>. Word 97 et le Html IUFM de Reims Jacques Bresson page 2/9

3 3.3 Choix d un arrière plan (couleur, trame ou texture) pour la page Activer la commande : Format Arrière-plan Attention : Le mode d affichage «lecture à l écran» ne rend pas tout à fait compte de ce qui sera vu par un navigateur! Il conviendra de visualiser la page sous un navigateur pour en apprécier le rendu. 3.4 Donner un titre à la page Une «page» Html (qui peut correspondre à plusieurs pages «imprimées» au sens de Word) peut être identifiée par un titre et recherchée dans les moteurs de recherches par des mots clés. Il est donc très important de distinguer le nom du fichier (.html) et le titre de la page (ce titre est affiché dans la barre de titre du navigateur lorsqu elle est consultée par l utilisateur final). un moteur de recherche sur le Web de type Altavista, permet une recherche en plein texte d un document (si le robot l a indexée), mais également une recherche sur le titre seul (saisir dans la fenêtre de recherche «title :nom du titre de la page»). Par ailleurs dans de nombreux moteurs de recherche, l ordre dans lequel sont présentés les résultats d une recherche dépendent bien souvent de la présence des mots recherchés dans le titre ou dans les mots-clés de la page ; ainsi une page contenant un mot recherché dans son titre ou dans ses mots-clés apparaîtra avant une autre page contenant le même mot recherché seulement à la 25 ème ligne du corps du texte. Il convient donc de renseigner les rubriques titre et mots-clés des propriétés de la page : Fichier Propriétés Cliquer en bas de la boîte dialogue sur Activer l onglet «Résumé» de Le nom de la page peut ne comporter aucun espace, aucun accent (ce qui est souhaitable dans la mesure ou certains serveurs les ignorent), le titre lui peut être constitué d un groupe de mots. 3.5 Enregistrer la page (.html) Word 97 et le Html IUFM de Reims Jacques Bresson page 3/9

4 3.6 Visualiser la page sous un navigateur Bien que l apparence de la page sous Word soit assez conforme à celle qui sera observée depuis un navigateur, pour constater ce qui sera vu par «l utilisateur final», il est souhaitable de la visualiser depuis un navigateur (il serait même prudent de la visualiser depuis des navigateurs de diverses versions pour voir si les différences d affichage sont acceptables, rappelons-nous que le but est d être vu et lu par le plus grand nombre d internautes). Le bouton dans la barre d outils «standard» permet de provoquer l affichage de la page Html générée dans le navigateur par défaut. 4 Transformation d un document Word traditionnel en document Html 4.1 Ouvrir sous Word le document (.doc) à transformer en Html 4.2 Choisir la police et le corps des caractères (Attention aux polices utilisées, voir à ce sujet le paragraphe 3.2) 4.3 Enregistrer la page au format Html au format Word (extension de fichier doc) pour pouvoir plus facilement la retravailler en cas de modifications et d ajouts puis au format Html (extension de fichier H tml) pour pouvoir la visualiser à l aide d un navigateur. 4.4 Visualisation de la page sous un navigateur Après enregistrement au format Html, Word ouvre le document Html généré et propose un nouveau bouton dans la barre d outils «standard» Cette icône permet de provoquer l affichage de la page Html générée dans le navigateur par défaut. On peut constater que les marges du document Word ont disparu, ce qui est une bonne chose compte tenu de la taille des écrans de visualisation. Cependant l interlignage des paragraphes n est pas conforme à l original. C est qu en fait le langage Html insère l équivalent des «espaces après» que l on gère habituellement grâce à la commande Format de paragraphe dans Word (pour y remédier, voir supra le chapitre «modification des espacements entre les paragraphes»). 4.5 Modification des espacements entre les paragraphes Il est possible de remanier manuellement (et donc ponctuellement) le document pour éviter les interlignes trop grands entre deux paragraphes. Il convient d afficher (si ce n est déjà le cas) les caractères de gestion du texte en cliquant sur le bouton de la barre d outils. Les marques de paragraphes sont alors facilement identifiables et peuvent être supprimées et remplacées par des sauts de lignes par un raccourci clavier (<maj>+<entrée>). Une marque de fin de paragraphe est symbolisée par le caractère un retour à la ligne par Word 97 et le Html IUFM de Reims Jacques Bresson page 4/9

5 Une procédure de «recherche / remplacement» permet de remplacer, (à l aide de la commande «Edition Remplacer» de Word), les marques de fin de paragraphes par des marques de saut de ligne. 4.6 Enregistrer le document.html modifié 5 Le positionnement précis des images dans une page Html Il est possible, (commande Image du menu Insertion), d insérer une image présente sur le disque dur, un clipart depuis le cédérom d Office 97 etc. Mais le positionnement précis des images en Html impose certaines contraintes. D où la nécessité de préciser d abord les deux modes de positionnement des images sous Word avant d aborder leur placement dans une page Html. 5.1 Le positionnement des images dans Word : Image caractère ou image flottante? Dans un document Word l image peut être insérée de deux manières différentes : Soit en tant que caractère (l image est alors placée comme un caractère sur la ligne de base où sont disposés les autres caractères, elle est dite «en place»). Soit sur la couche dessin du document, elle peut alors être déplacée à volonté elle est dite «flottante». C est l option «Dissocier du texte» qui permet d obtenir cette deuxième solution. Cette option peut être activée (par défaut) ou désactivée depuis la boîte de dialogue «Insertion Image» «A partir d un fichier». Par défaut, Word insère les images importées sous la forme d'images flottantes, c'est-à-dire d'images placées sur une couche de dessin, ce qui permet de les positionner avec précision sur la page ou de les placer au-dessus ou en dessous du texte ou des autres dessins. 5.2 Le positionnement des images dans les pages Html Hormis les cas où l image est «mise en vedette» (pas de texte à gauche et à droite de l image), une image ne pourra être positionnée avec précision par rapport à du texte, que si elle est insérée dans une cellule d un tableau. Pour ce faire elle doit être considérée comme un caractère, c est à dire qu elle doit être une image «en place» (voir supra). Au moment de l insertion, il faudra donc décocher l option «dissocier du texte» pour pouvoir la positionner dans une cellule de tableau. Remarque : Si une image est déjà dans le document, pour remplacer une image flottante par une image «en place», à savoir une image placée directement dans le texte à l'emplacement du point d'insertion, sélectionnez l'image, puis cliquez dans le menu Format sur Objet. Sous l'onglet Position, désactivez la case à cocher Dissocier du texte. Word 97 et le Html IUFM de Reims Jacques Bresson page 5/9

6 5.3 Modification de l aspect des images Dès lors qu elle est sélectionnée, une image peut toujours être redimensionnée en déplaçant ses poignées ou par l intermédiaire de la commande Format Image -> taille( ou menu contextuel par clicdroit) Si une partie de l image doit être supprimée, l outil permet de découper l image. En fait l image n est pas découpée (et continue à peser autant en terme d encombrement sur le disque), c est simplement la fenêtre de visualisation de l image qui est réduite. La barre d outils Image, visible dès lors qu une image est sélectionnée (on peut en demander l affichage par la commande «Barre d outils Image» du menu «Affichage») permet également de modifier la luminosité, le contraste, de rendre une couleur transparente etc. On pourra visualiser les différents outils disponibles en «stationnant» quelques instants sur un outil avec le pointeur de la souris pour voir s afficher les bulles d aide. Remarque : l habillage d image est inopérant en Html. 6 La mise en place des hyperliens 6.1 Liens entre différentes pages Html Un hyperlien est constitué par une zone sensible créée à partir d une sélection de texte (le texte apparaît en bleu et souligné) ou d une image qui permet par un simple clic (le pointeur de la souris prend l apparence d une main) d atteindre une autre page html stockée localement ou une page présente sur Internet (dès lors que l ordinateur y est connecté) Création d un lien 1. Sélectionner le texte support du lien 2. Activer la commande «Lien hypertexte» du menu Saisir le nom de la page de destination pour le lien ou la rechercher avec le bouton parcourir insertion ou barre d outils. de la Cette option permet de ne retenir que la partie indispensable du chemin qui mène à la page de destination depuis la page qui contient le lien (si les deux pages sont dans le m ême répertoire, le chemin sera omis, ce qui permet aux liens de trouver leur «cible» même après déplacement de l ensemble des pages dans un autre répertoire). Comment supprimer un lien? 1. Sélectionner le texte du lien avec le pointeur texte 2. Activer l outil de liaison pour ouvrir la boîte de dialogue modifier le lien hypertexte. (les opérations 1 et 2 peuvent être réalisées également par un clic droit donnant accès à la commande modifier le lien hypertexte du menu contextuel) 3. Cliquer sur le bouton Supprimer le lien figurant en bas de la boîte de dialogue. Word 97 et le Html IUFM de Reims Jacques Bresson page 6/9

7 6.2 Liens vers un endroit précis d une page A l instar d un document Word, une page Html peut contenir des signets. Les signets sont des repères électroniques qui sont associés à une partie de texte ou une image (on peut visualiser l information associée au signet par la commande «Atteindre» du menu «Edition» ou grâce à un lien hypertexte. La mise en place de signets sera utilisée dans une même page notamment pour permettre un va et vient entre le sommaire de la page et les différentes parties de celle-ci. Les signets seront également utilisés pour atteindre depuis le texte d une page donnée, tel ou tel élément d un glossaire situé sur une autre page Mise en place d un signet 1. Sélectionner l information devant constituer la cible (texte ou image) 2. Activer la commande «Signet» du menu «Insérer» 3. Renseigner la boîte de dialogue en donnant un nom évocateur pour ce signet. Attention, un nom de signet ne peut contenir d espace sous Word Créer le lien qui mène vers le signet Activer la commande «Lien hypertexte» du menu insertion ou de la barre d outils. Nom de la page html à atteindre, si différente de la page en cours Utiliser «Parcourir» pour voir s afficher la liste des signets associés à la page html précédemment choisie, puis choisir le signet souhaité On prendra soin bien entendu de mettre en place des noms de signets plus évocateurs que ceux-ci choisis à titre de (mauvais) exemple! Il est préférable de tester les liens vers des signets sous un navigateur, pour constater le positionnement exact de la zone de la page demandée dans la fenêtre du navigateur. Word 97 et le Html IUFM de Reims Jacques Bresson page 7/9

8 6.3 Liens vers une page située sur Internet Activer la commande «Lien hypertexte» du menu insertion ou de la barre d outils. Il suffit de saisir l URL (Uniform Ressource Locator, adresse de la page sur Internet. 6.4 Liens vers des adresses électroniques Activer la commande «Lien hypertexte» du menu insertion ou Faire précéder l adresse électronique de la mention mailto: de la barre d outils. Remarque : Il ne s agit pas à proprement parler d un lien vers une adresse électronique, mais d un lien qui, lorsqu il est activé par un clic de souris, déclenche l ouverture du logiciel de messagerie avec création d un nouveau message comportant l adresse du destinataire telle qu elle figure dans le lien (sans mailto :). Ceci évite les erreurs de saisie dans les logiciels de messagerie qui conduiraient à une erreur d acheminement du message. 7 Assistant HTML pour Word (versions 2 à 7) Cet outil est distribué par Microsoft sur le Cédérom Solutions pour Internet ou téléchargeable depuis le site Microsoft. Une fois l'installation automatique réalisée, le menu insertion de Word offre la possibilité d'insérer un lien hypertexte, et il est possible de tester les liaisons en naviguant sur les documents. L'icône de la barre d'outils permet d'accéder au mode navigation, sans quitter Word. Une nouvelle barre d'outils est affichée, elle permet alors la navigation ou le retour en mode édition : L'icône permet de revenir en mode édition (le mode habituel de travail sous Word). Word 97 et le Html IUFM de Reims Jacques Bresson page 8/9

9 Table des matières 1 Qu est-ce qu une page HTML? En quoi se différencie-t-elle d une page d un document Word? Création d une page Html depuis Word Création d un nouveau document «page Web» Saisie du contenu informationnel de la page Choix d un arrière plan (couleur, trame ou texture) pour la page Donner un titre à la page Enregistrer la page (.html) Visualiser la page sous un navigateur Transformation d un document Word traditionnel en document Html Ouvrir sous Word le document (.doc) à transformer en Html Choisir la police et le corps des caractères Enregistrer la page au format Html Visualisation de la page sous un navigateur Modification des espacements entre les paragraphes Enregistrer le document.html modifié Le positionnement précis des images dans une page Html Le positionnement des images dans Word : Image caractère ou image flottante? Le positionnement des images dans les pages Html Modification de l aspect des images La mise en place des hyperliens Liens entre différentes pages Html Liens vers un endroit précis d une page Mise en place d un signet Créer le lien qui mène vers le signet Liens vers une page située sur Internet Liens vers des adresses électroniques Assistant HTML pour Word (versions 2 à 7)... 8 Word 97 et le Html IUFM de Reims Jacques Bresson page 9/9