Tutoriel CMS Made Simple - Easy

Tutoriel de démarrage rapide
destiné aux EDITEURS
© 2007 Joseph Beeson
[email protected]
Sous une licence Creative Commons :
Paternité - Pas d'Utilisation Commerciale Partage des Conditions Initiales.
Voir : http://creativecommons.org/
licenses/by-nc-sa/2.0/fr/
1
Table des matières
Introduction
Page
• Qu’est qu’un Système de Gestion de Contenu ?
• Qu'est que CMS Made Simple ?
• A qui s’adresse ce tutoriel ?
• Note aux webmasters.
3
3
3
4
Le tutoriel
• Comment ↴
↳ se connecter au SGC ?
↳ changer la langue de l'interface ?
↳ naviguer dans l’espace d’administration ?
↳ créer une page vierge ?
↳ éditer une page-web ?
↳ changer la taille/couleur/style du texte ?
↳ ajouter un lien ?
↳ ajouter une image dans une page ?
↳ créer et modifier un tableau ?
↳ éditer une image ?
↳ dupliquer une page web ?
↳ convertir un document Word en page web ?
4
5
5
7
7
9
10
11
14
16
19
21
2
Introduction
Qu’est qu’un Système de Gestion de Contenu ?
Un système de gestion de contenu, ou SGC, est une technologie qui permet de faire des modifications
et des mises à jour directement sur un site-web. Parmi les avantages d’un SGC, voici les principales :
• Les débutants peuvent réaliser des pages-web sans aucune notion de programmation.
• Plusieurs individus peuvent travailler en collaboration sur un même document avec des rôles
différents, comme : webmasters, éditeurs, administrateurs, invités.
• La mise en page et le contenu sont gérés distinctement.
• Il existe des modules supplémentaires pour mettre en place facilement des FAQ, des blogs, des
forums de discussion, des lecteurs multimédia, des albums photos, etc.
• Etant libre et gratuit, il permet de gérer son site web sans acheter un logiciel propriétaire comme
Macromedia Dreamweaver, Adobe GoLive, ou encore Microsoft Frontpage.
Qu'est que CMS Made Simple?
Sur internet il existe des centaines de SGC libres avec des objectifs bien diverses. Une bonne partie de
ces SGC sont très complexes et pointus. Une autre partie est simpliste, incohérent et trop figé. CMS
Made Simple est un SGC qui représente un bon équilibre entre simplicité d’utilisation et flexibilité
créative. Son nom, qui signifie « le système de gestion de contenu rendu simple » en anglais, décrit
bien l’état d’esprit de ces créateurs, qui l’ont conçu pour être avant tout intuitif.
CMS Made Simple est entièrement gratuit à télécharger et à installer à partir de cette adresse :
http://cmsmadesimple.org/. Le site web est disponible en anglais, en français et en allemand. CMS
Made Simple lui-même est disponible dans plus de vingt langues différentes.
A qui s’adresse ce tutoriel ?
Ce tutoriel est destiné aux éditeurs de site web. Le rôle d’un éditeur est de gérer le contenu du site
web. Il peut donc créer des pages web, les modifier, les mettre à jour, mettre des images et des
documents supplémentaires en ligne, et changer la structure des pages. Naturellement, ce document ne
traite ni l’installation de CMS Made Simple, ni la mise en forme des pages, étant donné que c’est le
rôle du webmaster.
Ce document est destiné aux utilisateurs débutants qui sont déjà familier avec l’informatique et
internet. Cependant, aucune notion de web-design ni des langages de programmation (HTML, CSS,
PHP), n’est attendue. Ce document n’aborde que légèrement le langage HTML. Il utilise des
exemples illustrés et bien concrets afin de démontrer rapidement les tâches premières d’un éditeur.
3
Naturellement, il existe des site web où vous pouvez solliciter de l’aide gratuitement. Je vous
conseille de consulter la version française du site web de CMS Made Simple :
http://www.cmsmadesimple.fr/. Là, vous trouverez une documentation plus élaborée ainsi que des
forums de discussion où vous pouvez poser vos questions aux autres utilisateurs de ce SGC.
Note aux webmasters
Ce tutoriel a été écrit sur CMS Made Simple version 1.1.3.1 « Apia » sur une configuration standard
avec l’éditeur WYSIWYG défaut, TinyMCE Basic. Pour les exercices de manipulation de tableau, il
faut que ces opérations soient activés dans TinyMCE.
Le Tutoriel
Comment se connecter au SGC ?
Un site web géré par un SGC nécessite un système de sécurité afin de distinguer les éditeurs des
visiteurs ayant seulement le droit de consulter les pages. En tant qu’éditeur, vous devez vous
authentifier avec un nom d’utilisateur et un mot de passe crées au préalable par le webmaster. Pour ce
faire, allez sur l’espace d’administration : www.votre-site-web.com/admin/login.php où vous verrez
cette page :
Saisissez ces deux informations puis cliquez sur envoyer pour vous connecter.
authentifié, votre session reste ouverte pendant plusieurs jours.
Une fois
4
Comment changer la langue de l'interface ?
La première fois que vous vous connectez à l’espace d’administration, il est possible que vous le
trouviez en anglais. Pour basculer en mode français, (faites Menu  My Preferences  User
Preferences ) puis cherchez
« Submit » au fond de la page pour changer la langue.
et changez-le. Cliquez ensuite sur le bouton
Comment naviguer dans l’espace d’administration ?
Après l’authentification, voici la page d’accueil de l’espace d’administration :
1a
1b
2
3
(Flèche 1) CMS Made Simple s’organise autour d’un menu de navigation où vous pouvez accéder à
toutes les fonctionnalités du SGC (flèche 1a). Ce tutoriel vous demandera souvent de
naviguer vers des pages en utilisant ce menu. Dans ces cas, le chemin sera écrit de manière
simplifiée, par exemple : « Menu  Contenu  Pages » pour naviguer comme l’indique la
flèche 1b.
(Flèche 2) A partir de la page d’accueil, il y a des liens utiles pour trouver de l’aide.
(Flèche 3) N’oubliez pas de vous déconnecter une fois que vous avez terminer votre session.
5
En tant qu’éditeur votre rôle est de travailler essentiellement sur le contenu du site. CMS Made
Simple est capable de gérer des types de contenu différents, comme des pages web et des images.
Cette gestion est présentée sous la rubrique « Contenu ». Pour débuter, nous allons étudier la liste des
pages, faites Menu  Contenu  Pages pour afficher la page suivante :
1
2
3
4
5
6
7
Dans l’exemple on voit un site avec deux pages apparentes intitulées « FRANÇAIS » et
« ENGLISH » , organisées sous forme de tableau.
(Flèche 1) Le repère de page.
(Flèche 2) Le gabarit des pages. Le gabarit est le « contenant » des pages, c’est-à-dire le menu de
navigation du site web, les éléments de navigation, les couleurs et la taille du texte. Ce site,
étant bilingue, exploite deux gabarits différents. Toutes les pages écrites en français
utilisent, donc, le gabarit français tandis que celle écrites en anglais utilisent « english
template ».
(Flèche 3) Le type de page. Comme CMS Made Simple est extensible, il peut gérer des pages sous
forme de FAQ, blog, album photo, etc... Dans ce tutoriel nous allons seulement travailler
sur les pages « traditionnelles » qui sont de type Content.
(Flèche 4) Le propriétaire des pages. C’est le nom de l’éditeur qui a créé chaque page. Les éditeurs
ont le droit de modifier les pages créées par leurs collègues.
(Flèche 5) Actif. Pour être disponible sur le serveur, il faut qu’une page soit activée. Dans l’exemple
ci-dessus, toutes les pages sont activées (indiqué par la coche verte). Un éditeur peut se
servir de la fonctionnalité de désactivation lorsqu’il apporte des modifications pendant une
longue période et il souhaite cacher les brouillons au publique.
(Flèche 6) Page par défaut (celle qui a la coche verte). C’est la page qui s’affiche par défaut, la page
d’accueil. Ici, la page par défaut est la page de garde en français.
(Flèche 7) Déployer toutes les sections. CMS Made Simple permet de classer les pages dans une
arborescence. Ainsi une page peut contenir des « sous-pages » qui contiennent encore
d’autres sous-pages. Ceci permet de créer une structure d’organisation. Le site web dans
l’exemple contient plus d’une quinzaine de pages, celles en français sont classées sous
« FRANÇAIS » et parallèlement pour les pages en anglais. Pour afficher ces pages cachées,
cliquez sur
page.
ou sur le petit triangle
qui précède le titre de la
6
Comment créer une page vierge ?
Allez à la liste des pages, (faites Menu  Contenu  Pages). Ensuite, cliquez sur le bouton
et une page vierge s’affichera :
5
6
1
2
3
4
(Flèche 1) Choisissez un titre pour la
nouvelle page. Facultatif :
Saisissez un titre pour le menu.
Par défaut, le titre de la page
sera utilisé.
(Flèche 2) Placez la page dans
l’arborescence.
(Flèche 3) Choisissez un gabarit.
(Flèche 4) Rédigez la page.
(Flèche 5) N’oubliez pas de sauvegarder,
même en cours de rédaction.
(Flèche 6) Utilisez l’aperçu pour afficher la
page sans la mettre en ligne.
Comment éditer une page-web ?
A partir de la liste des pages (Menu  Contenu  Pages), cliquez sur le titre de la page que vous
voulez éditer. Ainsi vous lancerez l’éditeur de pages :
7
1
2
3
4
5
6
(Flèche 1)
(Flèche 2)
(Flèche 3)
(Flèche 4)
L’intitulé de cette page.
Le texte qui apparaît dans le menu sur vos pages internet.
Le gabarit auquel cette page est rattachée.
La barre d’outils de l’éditeur de contenu. Cet éditeur, inspiré des antécédents comme
Microsoft Word, vous permet de modifier vos pages directement dans votre navigateur et
constitue l’une des parties les plus puissantes de CMS Made Simple. Sans aucune
connaissance du langage HTML, vous pouvez y générer des tableaux, insérer des images,
insérer des liens, et rédiger des textes. La majorité des exemples suivants vont faire appel à
cet éditeur.
(Flèche 5) Le contenu de la page que vous éditez.
(Flèche 6) Une fois que vous avez terminé, il faut sauvegarder la page pour que les modifications
soient enregistrées et mises en ligne. Pour sauvegarder la page puis retourner sur la liste
8
des pages, cliquez sur « Envoyer ». Pour sauvegarder et continuer d’éditer la même page,
cliquez sur « Appliquer ». Pour sortir sans sauvegarder les modifications, cliquez sur
« Annuler ».
Comment changer la taille/couleur/style du texte ?
L’une des premières choses que vous allez faire est d’apprendre à styliser et à colorier le texte de vos
pages web. Il faut noter que, malgré la puissance de cet éditeur, il a des limitations. Comparé à un
logiciel comme Word où vous avez le choix entre des centaines de police de texte avec des options de
coloriage et d’affichage pointues, sur internet le choix est plus limité. Cela s’explique par le fait que
les ordinateurs ne sont pas configurés de la même manière. Trois différences importantes de
configuration à prendre en compte :
La taille de son écran, et donc la largeur maximale de contenu que l’on peut afficher.
Son navigateur. Il y a des différences entre la même page web affichée par Mozilla
Firefox et Internet Exploreur.
Les polices de texte. Quand vous attribuez une police à un morceau de texte, il faut que
cette police soit disponible sur l’ordinateur du visiteur pour que le texte soit affiché
correctement. Dans le cas où la police manque, une autre sera mise à la place, mais ce ne
sera pas affiché comme vous le vouliez.
•
•
•
Pour les web designers qui veulent que leur site web soit aussi beau sur tous les écrans, ces
différences sont la cause de beaucoup de frustration. Si vous aimez écrire avec des police de texte
fantastiques, classiques, delirantes ou inédites, vous allez être déçu.
Sur le web, on peut utiliser un
peu près 17 polices avec certitude.
L’utilisation de CMS Made Simple pour styliser le texte est similaire à Microsoft Word :
1
5
(Flèche 1)
(Flèche 2)
(Flèche 3)
(Flèche 4)
(Flèche 5)
(Flèche 6)
(Flèche 7)
6
2
7
3
8
9
4
10
Alignement du texte (à gauche, centré, à droite, justifié).
Styles prédéfinis.
Police de texte (17 choix).
Taille du texte.
Texte gras, italique, souligné, barré.
Listes.
Retrait du texte.
9
(Flèche 8) Défaire / refaire les actions. Si vous faites une erreur, il est possible de revenir en arrière,
comme dans Microsoft Word, avec le même raccourci clavier.
(Flèche 9) Insérer un caractère spécial (© ® ™ ¶ € )
(Flèche 10) Couleur de texte, couleur de fond.
Comment ajouter un lien ?
Deux façons existent pour créer des liens avec CMS Made Simple. Pour ajouter un lien vers un site
extérieur utilisez la méthode suivante :
1. Ajout d’un lien extérieur
1
2
(Flèche 1) Sélectionnez tout d’abord le texte ou image que vous voulez convertir en lien.
(Flèche 2) Cliquez sur l’icône d’une maille
, la fenêtre suivante apparaîtra :
3
4
(Flèche 3) Saisissez l’adresse complète du site commençant par « http:// ».
Exemple :
http://www.mon-site-prefere.com. Vous pouvez aussi ajouter un lien vers votre adresse
email en saisissant « mailto:[email protected] » comme dans l’exemple ci-dessus.
(Flèche 4) Une fois l’adresse saisie, cliquez sur Insérer.
2. Ajout d’un lien vers une autre page dans CMS Made Simple
10
1
2
(Flèche 1) Sélectionnez tout d’abord le texte ou image que vous voulez convertir en lien.
(Flèche 2) Cliquez sur l’icône du palmier , la fenêtre suivante apparaîtra :
(Flèche 3) Choisissez la page destinataire.
(Flèche 4) IMPORTANT : décochez la boite
« Generate taglink » sinon le lien devient
presque illisible.
(Flèche 5) Cliquez sur Insérer.
3
4
5
• Pour supprimer un lien, sélectionnez-le, puis cliquez sur l’icône «d’une maillon cassée
.
• Pour modifier un lien (interne ou externe), sélectionnez-le, puis cliquez sur l’icône d’une maillon
.
Comment ajouter une image dans une page ?
CMS Made Simple contient un gestionnaire d’image avec lequel vous pouvez charger des photos sur le
site, les modifier et les supprimer. Dans cet exemple, vous allez insérer une image à partir d’un fichier
de votre ordinateur. Alors, il va falloir suivre deux étapes : charger l’image sur le serveur puis l’insérer
dans la page.
1. Charger l’image sur le serveur.
Allez au gestionnaire d’images (Menu  Contenu  Gestionnaire d’images) :
11
2
1
(Flèche 1) Cliquez sur « Parcourir » et choisissez l’image à charger.
(Flèche 2) Cliquez sur Envoyer pour charger l’image sur le serveur. Votre image est maintenant prête
à être utilisée. Ensuite allez sur la page où vous souhaitez insérer l’image (faites Menu 
Contenu  Pages )
3
(Flèche 3) Dans la barre d’outils, cliquez sur l’icône « arbre »
. La fenêtre suivante apparaîtra :
12
(Flèche 4) Cliquez sur ce petit icône.
4
Encore une autre fenêtre
apparaîtra qui contient toutes
vos images. (vous remarquerez
que cette fenêtre n’est pas
traduite en français, mais ce
n’est pas grave car son
utilisation est très simple)
(Flèche 5) Cliquez sur la photo à insérer.
La fenêtre se fermera et vous
vous trouverez à nouveau en
face de la fenêtre d’avant.
5
13
6
8
7
(Flèche 6) L’emplacement (URL) de
l’image est automatiquement
mis en place.
(Flèche 7) N’oubliez pas de donner un
équivalent textuel à l’image.
(Flèche 8) Si vous souhaitez ajouter une
bordure ou changer
l’alignement de l’image, cliquez
sur l’onglet « Apparence »
(Flèche 9) Cliquez sur Appliquer pour
terminer.
9
• Pour modifier une image, sélectionnez-la en cliquant dessus, puis cliquez sur l’icône « arbre »
.
Comment créer et modifier un tableau ?
Un tableau est un outil très puissant pour présenter du texte ou des données de manière structurée et
organisée. Les 11 dernières icônes de la barre d’outils sont dédiés à la création et la manipulation des
tableaux.
1. Créer un nouveau tableau.
1
(Flèche 1) Cliquez sur cet icône dans la barre d’outils. Une nouvelle fenêtre apparaîtra :
14
6
(Flèche 2) Déterminez le nombre de
colonnes et rangées.
(Flèche 3) Décidez la marge, en pixels,
que vous souhaitez entre les
cellules du tableau.
(Flèche 4) Décidez la bordure, en pixels.
Mettez zéro pour un tableau
sans bordure.
(Flèche 5) La largeur du tableau, en pixels
ou en pourcentage. Mettez
100% pour un tableau qui
s’étend sur toute la largeur de
la page. Mettez 150 pour une
largeur figée à 150 pixels.
2
3
4
5
7
(Flèche 6) Options avancées. Vous pouvez y mettre une couleur ou image sur l’arrière plan du tableau
ainsi que changer la couleur de la bordure.
(Flèche 7) Cliquez ici pour l’insérer.
2. Modifier un tableau
• Pour modifier un tableau, sélectionnez-le en cliquant dessus, puis cliquez sur l’un de ces boutons :
1
2
3
4
5
6
7
8
9
10
11
1. Modifier la bordure, largeur, hauteur, espace entre les cellules, arrière plan de tout le tableau.
2. Modifier l’alignement vertical, l’alignement horizontal de la rangée sélectionnée.
3. Modifier la largeur, la hauteur, l’alignement vertical, l’alignement horizontal de la cellule
sélectionnée.
4. Insérer une nouvelle rangée avant la rangée sélectionnée.
5. Insérer une nouvelle rangée après la rangée sélectionnée.
6. Supprimer la rangée sélectionnée. Attention ! Vous ne pouvez pas défaire cette action !
7. Insérer une nouvelle colonne avant la colonne sélectionnée.
8. Insérer une nouvelle colonne après la colonne sélectionnée.
9. Supprimer la colonne sélectionnée. Attention ! Vous ne pouvez pas défaire cette action !
10. Scinder la cellule sélectionnée.
11. Fusionner plusieurs cellules en une.
Il n’y a pas de bouton pour supprimer complètement un tableau. Cependant vous pouvez cliquer
plusieurs fois sur le bouton « Supprimer la Rangée » jusqu’à ce que toutes les rangées disparaissent.
15
Comment éditer une image ?
CMS Made Simple offre un module de modification d’image. Cette fonctionnalité ne peut pas
remplacer un programme de manipulation d’image comme Adobe Photoshop ou Corel Paint, mais il
permet quand même de faire de simples changements directement dans le navigateur. Vous pouvez
recadrer une image, réduire sa taille et même tournez une image.
1. Réduire une image directement dans CMS Made Simple
Dans cet exemple nous allons aborder une problématique : à 2 mégapixels et plus, les fichiers sont trop
lourds pour être mis en ligne. Donc pour réduire une image, allez au gestionnaire d’images (Menu 
Contenu  Gestionnaire d’images) :
1
(Flèche 1) La troisième image dans le gestionnaire est trop grande pour être affichée sur une page.
Comparez sa taille de 1024 pixels de large par 683 pixels de haut à celle des autres images !
Pour réduire l’image, cliquez sur l’icône de crayon
.
Malheureusement, l’éditeur d’image n’est pas traduit en français.
Sur la gauche de l’éditeur se trouvent six boutons : Crop (Recadrer), Resize (Réduire),
Rotate (Tourner), Measure (Mesurer), Marker (changer la couleur du carré d’encadrement ;
soit noir, soit blanc) et Save (Sauvegarder).
16
2
(Flèche 2) Pour réduire notre image vous allez vous servir le l’outil « Resize »:
3
4
5
(Flèche 3) Saisissez 500 pour « Width » (Largeur) pour diviser la taille en deux.
(Flèche 4) Cliquez ensuite sur la coche verte et l’image se réduira. A 500x333, l’image s’affiche
entièrement dans la fenêtre, signe qu’elle était vraiment trop grande avant !
(Flèche 5) Cliquez sur « Save » pour sauvegarder une copie de l’image :
17
6
7
8
9
(Flèche 6) Sur « Filename » (Nom du fichier) saisissez un nom de fichier en n’oubliant pas le .jpg à la
fin.
(Flèche 7) Facultatif : Si vous souhaitez sauvegarder l’image en un autre format, sélectionnez-le ici.
(Fleche 8) Qualité de compression. Plus la qualité de compression est haute, plus le fichier sera grand.
Laissez-la à 85 pour un bon équilibre entre taille de fichier et qualité d’image.
(Flèche 9) Cliquez sur la coche verte pour sauvegarder le fichier. Ce nouveau fichier est une copie de
l’original. Même si vous mettez le même nom de fichier que l’original, l’éditeur le
sauvegarde comme un nouveau fichier. Si vous souhaitez supprimer l’original, il faut le
faire dans le gestionnaire d’images (Menu  Contenu  Gestionnaire d’images) en
cliquant sur l’icône de poubelle sous l’image à supprimer.
2. Recadrer une image directement dans le navigateur.
Une autre fonctionnalité de cet éditeur est d’extraire le portrait d’une personne à partir d’une photo de
groupe. Pour l’effectuer nous allons utiliser l’outil « Crop ».
Voici une photo de groupe :
3
1
2
(Flèche 1) Choisissez
l’outil « Crop »
(Flèche 2) Dessinez un
carré qui
entoure le
visage.
(Flèche 3) Cliquez sur la
coche verte
pour isoler la
zone
sélectionnée.
18
5
(Flèche 4) Cliquez sur
« Save » pour
sauvegarder.
(Flèche 5) Choisissez un
nom de fichier.
Ensuite cliquez
sur la coche
verte pour
sauvegarder le
fichier.
4
Dans le gestionnaire, voici la nouvelle image à côté de l’original :
Comment dupliquer une page web ?
Il est possible de créer une nouvelle page qui est basée sur une autre. Cela peut être utile, par exemple,
lorsque vous traduisez une page ou si vous avez deux pages similaires avec seulement des petites
différences. Dans ces cas, vous pouvez cloner une page afin d’éviter de réécrire.
19
Allez à la liste des pages, (faites Menu  Contenu  Pages). Ouvrez la page que vous voulez
dupliquer :
(Flèche 1) Placez le curseur dans la zone
d’édition en y cliquant.
1
Pour l’étape suivante, utilisez votre clavier.
Si vous êtes sur Windows, tapez CTRL A
pour tout sélectionner, puis CTRL C pour
copier.
puis
Si vous êtes sur Macintosh, tapez ⌘ A pour
tout sélectionner, puis ⌘ C pour copier.
puis
Vous avez copié la page entière. Maintenant retournez à la liste des pages, (faites Menu  Contenu 
Pages). Ensuite, cliquez sur le bouton
page :
pour créer la nouvelle
4
1
2
3
(Flèche 1) Choisissez un titre pour cette
nouvelle page.
(Flèche 2) Placez la page dans
l’arborescence et choisissez un
gabarit.
(Flèche 3) Placez le curseur dans la zone
d’édition en y cliquant.
• Si vous êtes sur Windows, tapez
CTRL V pour coller.
• Si vous êtes sur Macintosh,
tapez ⌘ V pour coller.
(Flèche 4) Sauvegardez la page. Maintenant
vous avez deux pages identiques.
20
Comment convertir un document Word en page web ?
Il est possible de créer des page web dans CMS Made Simple à partir de fichiers Word. Etant donné
que les fichiers .doc sont banalisés, il est très probable que quelqu’un vous donne un contenu issu d’un
fichier .doc à insérer dans votre site web. Vous vous rendrez compte très vite des différences entre les
deux et des frustrations qu’il peut y avoir pour convertir entre les deux.
1. Deux différences à prendre en compte :
a) Support : Les fichiers .doc sont destinés à être imprimés. C’est-à-dire que ces fichiers sont
pour un support physique. La largeur et la hauteur des pages ont des valeurs réels (format A4,
A3, lettre, etc...), le contenu du fichier est paginé, et les unités de mesures sont des unités réels
(centimètres, pouces). Conséquence : ce fichier, imprimé de n’importe quel ordinateur, donnera
le même document physique.
Contrairement, les pages web sont destinés à être visualisés sur l’écran, ce sont des fichiers sans
support physique. La largeur d’une page web s’adapte à l’écran de l’utilisateur et cette
souplesse a un impact sur la mise en page du contenu. En plus, les unités de largeur et de
hauteur ne sont pas physiques. Pour les pages web, tout se mesure en pixels ou en pourcentage
de la fenêtre qui contient la page. Conséquence : Même s’il est possible d’imprimer des pages
web, le contenu n’est pas paginé. La mise en page dépend de l’imprimante. Donc, l’impression
ne donnera pas le même résultat sur des configurations différentes.
b) Fichiers supplémentaires : Les fichiers .doc ne se limitent pas au texte, vous pouvez y rajouter
des diagrammes, des images, des macros, des dessins, des options des style personnalisées etc.
Et tous ces éléments sont stockés dans un seul et unique fichier .doc.
A l’inverse, les pages web elles-mêmes, étant écrites en langage html, ne peuvent contenir que
du texte. Oui, bien sûr que nous voyons des images, des animations et même des vidéos sur
internet. Mais tous ces éléments sont stockés dans des fichiers externes et encastrés dans la
page web via html. Tandis qu’un document Word est seulement un fichier, une page web peut
impliquer des douzaines, voire des centaines de fichiers différents. Il faut, donc gérer ces
fichiers et leur emplacement relatif au fichier html.
Etant donné que les fichiers html et Word sont d’une nature très différente, toute traduction entre un
format et l’autre engendre des pertes d’information. Ici nous allons démontrer deux façons de
convertir, une qui est plus simple mais plus basique, l’autre qui est plus élaborée et qui permet de
convertir avec moins de perte de données.
A. Façon basique – copier seulement le texte.
Comme dans l’exemple « Comment dupliquer une page web ? » il est possible de copier tout le contenu
d’un document Word et ensuite le coller dans une page web. Cette méthode est la moins compliquée
mais aussi la plus limitée :
21
Lancez Microsoft Word et ouvrez la document à convertir. Copiez ensuite tout son contenu.
Si vous êtes sur Windows, tapez CTRL A
pour tout sélectionner, puis CTRL C pour
copier.
puis
Si vous êtes sur Macintosh, tapez ⌘ A pour
tout sélectionner, puis ⌘ C pour copier.
puis
Maintenant retournez à la liste des pages dans CMS Made Simple, (faites Menu  Contenu  Pages).
Ensuite, cliquez sur le bouton
pour créer la nouvelle page :
4
1
(Flèche 1) Choisissez un titre pour la page.
(Flèche 2) Placez la page dans
l’arborescence et choisissez un
gabarit.
(Flèche 3) Placez le curseur dans la zone
d’édition en y cliquant.
• Si vous êtes sur Windows, tapez
CTRL V pour coller.
2
• Si vous êtes sur Macintosh,
tapez ⌘ V pour coller.
3
(Flèche 4) Sauvegardez la page.
Cette méthode vous permet de transférer seulement le texte d’un document Word. Malheureusement,
les images, dessins, tableaux, couleurs et styles de texte seront perdus.
B. Façon plus élaborée – préserver les tableaux et les images.
Word possède une fonctionnalité d’exportation en tant que page web. Cette fonctionnalité extrait les
images encastrées en fichiers externes, convertit les tableaux Word en tables html, et essaie de
convertir au mieux les styles de texte. Cette méthode permet de convertir avec plus de fidélité mais
elle engendre plus d’étapes.
22
1
(Flèche 1) Dans Word, faites Menu  Fichier 
Enregistrer en tant que Page Web.
Choisissez ensuite un nom de fichier. Les
images extraites seront stockées dans un
dossier avec le même nom que celui que
vous avez choisi pour la conversion. Word
convertira le document et affichera le
résultat.
Ensuite vous allez charger toutes les images sur le serveur, une par une. En laissant Word ouvert, allez
au gestionnaire d’images (Menu  Contenu  Gestionnaire d’images) :
2
3
(Flèche 2) Cliquez sur « Parcourir » et choisissez un des fichiers à charger.
(Flèche 3) Cliquez sur Envoyer pour envoyer le fichier au serveur. Soyez patient et attendez à ce que
l’image se charge. Une fois fait, l’image apparaîtra dans le gestionnaire. Répétez ce
processus pour chacune de vos images.
Une fois que toutes les images sont sur le serveur, vous allez coller une partie du code html généré par
Word dans une nouvelle page dans CMS Made Simple.
23
(Flèche 4) Retournez dans Word. Pour afficher le
code source, faites Menu  Affichage 
Source HTML.
Ensuite une page s’affichera avec des
lignes et des lignes de code HTML.
N’ayez pas peur de ce code. Cette étape
est la plus dure mais permet de convertir
avec un maximum de fidélité.
4
(Flèche 5) Dans le code html, trouvez la
ligne qui commence par
</head> et sélectionnez tout le
code qui suit. Copiez ce texte
avec le raccourci clavier :
CTRL C sur Windows
5
ou
⌘ C pour Macintosh
Le code html est maintenant prêt à coller dans votre page web. Allez ensuite à la liste des pages, (faites
Menu  Contenu  Pages). Puis cliquez sur le bouton
:
24
7
6
(Flèche 6) Dans la barre d’outils, cliquez sur le petit icône HTML pour éditer le code source. Une
nouvelle fenêtre s’affichera. Collez ensuite le code html dans cette fenêtre puis cliquez sur
le bouton « Appliquer ». Après une petite pause, cette fenêtre disparaîtra et votre page
Word apparaîtra dans le contenu de la page.
(Flèche 7) Sélectionnez tout le contenu avec cette raccourci clavier :
ou
Sur Windows
Sur Macintosh
Avec tout le contenu sélectionné, cliquez sur le bouton de nettoyage de code HTML indiqué
par la flèche 7. Ensuite sauvegardez la page.
Vous avez maintenant une page web issue d’un document Word. Il reste un dernier souci : toutes les
images dans la page sont cassées. Il faut les refaire pour qu’elles soient correctement encastrées dans la
page. Suivez les instructions d’insertion d’image pour effectuez cette dernière étape.
25