25 pages
Français

Tutoriel de démarrage rapide destiné aux editeurs

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

Informations

Publié par
Nombre de lectures 279
Langue Français
Poids de l'ouvrage 3 Mo
Tutoriel de démarrage rapide destiné aux EDITEURS © 2007 Joseph Beeson josephbeeson@gmail.com 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 ? 3 • Qu'est que CMS Made Simple ? 3 • A qui s’adresse ce tutoriel ? 3 • Note aux webmasters. 4 Le tutoriel • Comment ↴ ↳ se connecter au SGC ? 4 ↳ changer la langue de l'interface ? 5 ↳ naviguer dans l’espace d’administration ? 5 ↳ créer une page vierge ? 7 ↳ éditer une page-web ? 7 ↳ changer la taille/couleur/style du texte ? 9 ↳ ajouter un lien ? 10 ↳ ajouter une image dans une page ? 11 ↳ créer et modifier un tableau ? 14 ↳ éditer une image ? 16 ↳ dupliquer une page web ? 19 ↳ convertir un document Word en page web ? 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. Une fois authentifié, votre session reste ouverte pendant plusieurs jours. 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 et changez-le. Cliquez ensuite sur le bouton « Submit » au fond de la page pour changer la langue. 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 4 5 3 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 ou sur le petit triangle qui précède le titre de la page. 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 : (Flèche 1) Choisissez un titre pour la 5 nouvelle page. Facultatif : Saisissez un titre pour le menu. Par défaut, le titre de la page sera utilisé. 6 1 (Flèche 2) Placez la page dans l’arborescence. (Flèche 3) Choisissez un gabarit. 2 (Flèche 4) Rédigez la page. (Flèche 5) N’oubliez pas de sauvegarder, 3 même en cours de rédaction. (Flèche 6) Utilisez l’aperçu pour afficher la 4 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) L’intitulé de cette page. (Flèche 2) Le texte qui apparaît dans le menu sur vos pages internet. (Flèche 3) Le gabarit auquel cette page est rattachée. (Flèche 4) 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 2 3 4 5 6 7 8 9 10 (Flèche 1) Alignement du texte (à gauche, centré, à droite, justifié). (Flèche 2) Styles prédéfinis. (Flèche 3) Police de texte (17 choix). (Flèche 4) Taille du texte. (Flèche 5) Texte gras, italique, souligné, barré. (Flèche 6) Listes. (Flèche 7) 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:votre@adresse.mel » 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