Docstoc

html_word

Document Sample
html_word Powered By Docstoc
					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 utilisation1.
                  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
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

                                                                        Page Html ne
                                                       Img1.gi          contenant que
                                                       f                du texte et un
                                                                        lien vers les
                                           Img2.gif                     images qui sont
                                                                        stockées
                                                                        séparément.
          Ma_page.doc


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    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                         de
   dialogue sur
      ÄActiver l’onglet « Résumé »


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
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
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
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 clic-
droit)
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                                     Saisir le nom de la page de
                                                       destination pour le lien ou la
2. Activer la commande « Lien                          rechercher avec le bouton parcourir
   hypertexte » du menu

    insertion ou       de la
    barre d’outils.



                                                                         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
                                                                                                   me
                                                                         pages sont dans le m ê 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
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.


 6.2.1 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.




 6.2.2   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
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          de la barre d’outils.
 Faire précéder l’adresse électronique de la mention “mailto:”




 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
                                                  Table des matières

1     Qu’est-ce qu’une page HTML ? ................................................................................................ 1

2     En quoi se différencie-t-elle d’une page d’un document Word ?............................................ 1

3     Création d’une page Html depuis Word ................................................................................... 2
    3.1     Création d’un nouveau document « page Web » .................................................................. 2
    3.2     Saisie du contenu informationnel de la page......................................................................... 2
    3.3     Choix d’un arrière plan (couleur, trame ou texture) pour la page ........................................... 3
    3.4     Donner un titre à la page ...................................................................................................... 3
    3.5     Enregistrer la page (.html) .................................................................................................... 3
    3.6     Visualiser la page sous un navigateur................................................................................... 4
4     Transformation d’un document Word traditionnel en document Html ................................... 4
    4.1     Ouvrir sous Word le document (.doc) à transformer en Html ................................................. 4
    4.2     Choisir la police et le corps des caractères ........................................................................... 4
    4.3     Enregistrer la page au format Html ....................................................................................... 4
    4.4     Visualisation de la page sous un navigateur ......................................................................... 4
    4.5     Modification des espacements entre les paragraphes ........................................................... 4
    4.6     Enregistrer le document .Html modifié .................................................................................. 5
5     Le positionnement précis des images dans une page Html ................................................... 5
    5.1     Le positionnement des images dans Word : Image caractère ou image flottante ?................ 5
    5.2     Le positionnement des images dans les pages Html............................................................. 5
    5.3     Modification de l’aspect des images...................................................................................... 6
6     La mise en place des hyperliens .............................................................................................. 6
    6.1     Liens entre différentes pages Html ....................................................................................... 6
    6.2    Liens vers un endroit précis d’une page................................................................................ 7
      6.2.1    Mise en place d’un signet ........................................................................................... 7
      6.2.2    Créer le lien qui mène vers le signet .......................................................................... 7
    6.3    Liens vers une page située sur Internet ................................................................................ 8
    6.4     Liens vers des adresses électroniques ................................................................................. 8
7     Assistant HTML pour Word (versions 2 à 7) ............................................................................ 8




Word 97 et le Html – IUFM de Reims – Jacques Bresson                                                                                page 9/9

				
DOCUMENT INFO
Categories:
Tags:
Stats:
views:0
posted:10/28/2012
language:
pages:9