Formation à la mise à jour de votre site internet

Transcription

1 TECHNOLOGIES DE L INFORMATION ET DE LA COMMUNICATION Accessibilité, Ergonomie, e-qualité Formation à la mise à jour de votre site internet 4.3 mardi 2 novembre

2 1 Objet du document Quelques recommandations éditoriales avant de commencer Les usages de lecture sur internet : Les principes rédactionnels pour internet : S'identifier pour accéder à l'administration Vos premiers pas dans l'administration Les grands principes de bases à connaître avant de commencer Principes de création du contenu À la découverte de l'administration du site Rubriques / sous-rubriques Créer une nouvelle rubrique/sous-rubrique Modifier les titres des menus/rubriques Supprimer une rubrique Les articles Créer un article Sur un grand nombre d objet, vous pouvez associer une image de présentation. Pour cela cliquez sur «Ajouter un objet», Modifier un article Supprimer un article Masquer un objet Toutes les fonctionnalités de l'éditeur Copier / coller un texte dans l'éditeur Sauter une simple ligne Vue d ensemble des boutons de la barre d outils Création et gestion des tableaux Créer un tableau Modifier les paramètres généraux du tableau Changer la largeur des colonnes Entrer du texte, l aligner à droite dans le tableau Créer un en-tête de colonnes / de ligne au tableau

3 11 Gestion des styles, des paragraphes et des titres Modifier les styles d un paragraphe Gérer les titres à l intérieur de vos contenus Créer un lien hypertexte Création d un lien externe Création d un lien de type «mail» Création d un lien interne vers un contenu du site Les autres types de liens Modifier ou supprimer un lien Modifier un lien Supprimer un lien Insérer une image dans un article ou une rubrique Aller rechercher une image pour l associer à l article ou la rubrique Paramétrer les propriétés d insertion d une image Modifier les propriétés d insertion d une image Insérer un fichier dans un article ou une rubrique Aller rechercher un fichier pour l associer à l article ou la rubrique Paramétrer les propriétés d insertion d un fichier Modifier les paramètres d insertion d un fichier La Médiathèque Gestion des images, des fichiers, des vidéos, des animations flash, etc Créer une nouvelle rubrique dans la médiathèque Supprimer une rubrique de la médiathèque Insérer une nouvelle image dans la médiathèque Insérer un fichier dans la médiathèque Insérer une vidéo dans la médiathèque, dans une rubrique ou article Insérer une vidéo externe de type You Tube ou Daily Motion Insérer un fichier audio / podcast dans la médiathèque, dans une rubrique ou article Insérer une playlist sur le site (playlist audio ou vidéo) Créer une playlist de vidéos Créer une galerie d images Créer une galerie, diaporama, e-cards et fonds d écrans Fonctionnalités avancées : Menu gauche de l administration Les différentes fonctionnalités du menu gauche et du menu contextuel

4 Voir Editer en Copier Déplacer Supprimer Avancé Réduire Ajouter à mes signets Ajouter à mes notifications Créer ici Open Office Multi téléchargement Masquer un objet Fonctionnalités avancées : Zone centrale Les différentes fonctionnalités du menu central Prévisualisation Détails Traductions Emplacements Ajouter un emplacement Les sous-éléments Modifier l ordre de tri des éléments Spécification de l ordre de tri Ordre de tri par priorité Fonctionnalités avancées : Menu droit Signets Utilisateurs Lien Visualiser les liens brisés Gestion des groupes et utilisateurs Rôles et droits Section Création des groupes et utilisateurs Les groupes prédéfinis par Le groupe «Administrateurs Inovagora» Le groupe «Utilisateurs Anonymes» Le groupe «Invités» Le groupe «Utilisateurs du site» Spécification des droits Conception des droits Héritage des rôles Les rôles prédéfinis Les groupes Assignation pratique de rôles à des groupes

5 Les groupes sans rôle Les sections Création d une section réservée Création de la section Droits d accès à la section Quelques pièves concernant les sections Modification des rôles

6 1 Objet du document Ce document a pour objet de vous apprendre à maîtriser l'outil de gestion de contenu ez Publish afin de mettre à jour votre site internet. 6

7 2 Quelques recommandations éditoriales avant de commencer De manière générale, un texte en ligne doit contenir moitié moins de mots qu'un texte imprimé. Le plus souvent toutefois, un quart voire un dixième de la longueur d'un texte imprimé sera plus approprié. Cette réduction du nombre de mots ne devra pas se faire au détriment de la clarté. La brièveté pourra se faire : En éliminant les mots superflus, En gardant les phrases courtes et simples, En présentant une idée par paragraphe, En utilisant des sous-titres clairs, explicites et pertinents qui permettent aux lecteurs d'avoir une vue d'ensemble du contenu, En présentant des mots ou des phrases importantes sous forme de listes à puces. L'utilisation des listes à puces permet d'organiser l'information et de la mettre en évidence. Parce que les lecteurs balayent les pages Web, cette activité devra être facilitée. Dans la mesure du possible, le texte devra être découpé en utilisant des titres et sous-titres, et de nombreux paragraphes. Par ailleurs on prendra soin de : Mettre l'information importante en début de phrase et les phrases importantes en début de paragraphes, Utiliser le terme le plus court possible, D éviter les périphrases, Utiliser la forme active (et non passive). Le texte devra évidemment être exempt d'erreurs grammaticales orthographiques et typographiques. Bien que tous les lecteurs ne fassent pas attention à ces erreurs, ces dernières laissent une mauvaise impression à ceux qui les découvrent. Enfin, Le style italique est moins lisible que le style roman, on l'utilisera donc avec parcimonie. Les mots écrits en lettres minuscules sont plus faciles à lire que ceux écrits en lettres capitales. 2.1 Les usages de lecture sur internet : - 79% des internautes balayent une page pour trouver un mot clé ou une phrase - Seuls 16% des internautes lisent mot à mot - Un même texte publié sur internet est lu 25% plus lentement que sur un support papier (à cause de la résolution de l'écran) - La lecture à l'écran diminue la fréquence de battement des paupières (5x/minute), ce qui entraîne une fatigue de l'œil 7

8 - Sur un écran, les internautes survolent les textes ils ne lisent pas vraiment les textes. En conséquence, les rédacteurs du site doivent augmenter le plus possible la lisibilité d'une page pour faciliter la compréhension du message qui sera véhiculé par le site. 2.2 Les principes rédactionnels pour internet : La structure d'une page web doit permettre à l'internaute de repérer rapidement les informations importantes du texte. - Paragraphe : Le texte doit être découpé en paragraphes (avec saut de ligne). Un paragraphe contient en moyenne 5 à 6 lignes. - Longueur des phrases : Les phrases doivent comporter, en moyenne, 15 mots. - Titres : Les titres, sous-titres et intercalaires doivent être clairs et explicites et respecter la même règle sur l'ensemble du site. - Illustration : Intégrer au moins une image par texte de plus de 300 signes - Téléchargement : Les textes de plus de 1500 signes doivent être proposés en téléchargement. - Lisibilité : L'œil des internautes balaye un page Web, plutôt que de la lire mot à mot. Plus les repères visuels sont évidents, plus le texte sera lisible. - Consistance : La navigation, la terminologie et le ton doivent être consistants à travers le site. - Cohésion : Logique, ordre des mots, grammaire et syntaxe, qualité de l'argumentation. Pour résumer : Mettre au moins une photo par article (même si ce n est qu une photo d illustration). Aérer les textes en créant des paragraphes et des sauts de ligne. ll est recommandé de présenter en début de chaque rubrique plusieurs articles sur une même pageécran, sous la forme de courts extraits ou d introductions renvoyant aux articles complets («lire la suite») pour que l internaute puisse rapidement juger de son «intérêt» pour les articles proposés et décider d aller plus loin ou de passer à une autre rubrique ou information. Il faut donc prévoir ce texte introductif lors de la rédaction. 8

9 3 S'identifier pour accéder à l'administration Dans l écran D'AUTHENTIFICATION : Tapez votre identifiant (nom d usager) puis votre mot de passe (attention à respecter les majuscules et minuscules pour le mot de passe) Cliquez ensuite sur «Entrer» 9

10 4 Vos premiers pas dans l'administration 4.1 Les grands principes de bases à connaître avant de commencer Principes de création du contenu Quand vous souhaitez créer quelque chose sur le site (un article, une rubrique ), le principe de base à connaître c est que vous devez d abord vous placer à l endroit où vous souhaitez créer cet objet. Le fonctionnement est ensuite toujours le même, quel que soit ce que vous souhaitez créer, vous vous placez à l endroit voulu et, avec le menu déroulant en bas de page, vous choisissez ce que vous voulez créer (un article, une rubrique, une image, un fichier ) 4.2 À la découverte de l'administration du site Après s'être connecté, vous tombez sur le tableau de bord. Cette page retrace les dernières modifications apportées au site internet. La page «tableau de bord» remonte 4 blocs. Mes éléments en attente : Liste des éléments nécessitant votre validation pour publication. Mes derniers éléments modifiés : Liste des éléments que votre compte a modifiés Mes brouillons : Liste des éléments dont la rédaction à débuté, mais devant encore être mis à jour avant publication. Derniers éléments publiés : Liste des derniers éléments publiés tous comptes administrateurs confondus 10

11 Dans la barre du haut s affichent les onglets correspondant aux différents modules auxquels vous avez accès. Les onglets les plus utilisés sont «Contenu» et «médiathèque». A gauche apparaît l arborescence complète du site. Pour déplier ou replier des portions de cette arborescence, il suffit de cliquer sur le + ou le [Développer/Réduire]) présent devant les éléments (à savoir : si un élément ne comporte pas de +/-, c'est parce qu'il ne contient pas de sous arborescence) 1 Corbeille : pour supprimer un élément : Cliquez sur le titre d un élément (celui-ci se met en surbrillance orange) puis cliquez au centre de la page sur le bouton «Supprimer» (vous pouvez également faire un clic gauche sur le pictogramme qui représente l'élément dans l'arborescence et dans le menu contextuel qui 1 apparaît, cliquez sur «Supprimer»). On vous demande alors de confirmer la suppression de l'élément et par défaut, une case cochée indique que l'élément sera déplacé dans la Corbeille pour que vous puissiez le récupérer si besoin (il ne sera donc pas définitivement supprimé, sauf si vous décochez la case «Déplacer vers la corbeille»). Pensez à faire le tri dans votre corbeille pour alléger le poids sur l espace disque. Pour accéder aux éléments jetés dans la Corbeille, il suffit de cliquer sur le pictogramme représentant la Corbeille. 11

12 5 Rubriques / sous-rubriques 5.1 Créer une nouvelle rubrique/sous-rubrique 1 Onglet Contenus : Dans l arborescence du site, placez-vous sur l'emplacement dans lequel vous voulez créer votre rubrique (ici «Rubrique 02», en surbrillance orange). 2 En bas de la page, dans la zone centrale, ouvrez-le menu déroulant et sélectionnez «Rubrique». 3 Cliquez sur «Créer Ici» A SAVOIR : Il n y a pas de limitation au nombre de sous-dossiers (sous-menus) que l on peut créer. En clair, il n y a pas de limitation à la profondeur des menus. 12

13 Entrez le nom (titre) de votre rubrique A SAVOIR : On peut créer autant d objets que l on souhaite ayant strictement le même nom. En effet, à chaque création d objet, le système affecte à cet objet un identifiant unique qui ne sera jamais plus utilisé, quand bien même cet objet serait supprimé! 2 Si le site a été prévu pour afficher une image de rubrique (tout dépend de la maquette et de ce qui a été décidé pendant la préparation du projet), sélectionnez-la en cliquant sur «Ajouter un objet» pour aller la rechercher dans la médiathèque (vous devez donc au préalable l'avoir rangée dans un dossier de la médiathèque). Pour ce faire, après avoir cliqué sur «Ajouter un objet», cliquez sur l'onglet «Médiathèque» puis naviguez à l'aide de l'arborescence à gauche ou du centre de la page pour sélectionner votre image. 3 Entrez une introduction si vous le souhaitez (celle-ci s affichera après un clic sur le titre de la rubrique). Vous pouvez mettre en page votre contenu (voir la page éditeur). A SAVOIR : Si le contenu de votre rubrique se limite à 1 page (autrement dit à un seul article), Attention, dans un souci d harmonie, l éditeur est bridé. Les liens, les images ne sont pas autorisés. 13

14 4 5 4 Entrez une Description si vous le souhaitez (celle-ci s affichera immédiatement sous l introduction ou après un clic sur «Lire la suite» selon ce qui a été déterminé lors de la phase de préparation du site). Vous pouvez mettre en page votre contenu (voir la page Editeur). 5 La case «Afficher les contenus» est cochée par défaut. Si vous créez un article ou un autre élément dans la rubrique, il apparaîtra donc d'emblée sur le site. Si au contraire vous souhaitez d'abord préparer tous les articles de la rubrique et les afficher ensuite, il vous suffit de décocher la case. 14

15 Vous pouvez si vous le souhaitez afficher le nom de l auteur en cochant la case «Afficher le/les auteur(s)». 7 Le champ «Date de publication» vous permet de publier automatiquement la rubrique à une date donnée (si vous souhaitez par exemple préparer une rubrique à l'avance et la publier uniquement le jour d'un événement particulier). Si vous ne renseignez pas ce champ et que vous cliquez sur le bouton «Envoyer à la publication», la rubrique sera publiée immédiatement sur le site. Le format est le suivant : (pour le 3 août 2010) mais vous pouvez également cliquer sur le petit calendrier pour choisir la date souhaitée. Dans le champ Heure et Minute, vous pouvez indiquer «01 00» (une heure du matin) puisqu'un petit programme passe automatiquement à 1h15 du matin tous les jours pour publier / dépublier tout ce qui est en attente (si le site est hébergé sur nos machines, sinon les horaires précis seront à déterminer avec l'hébergeur). 8 De la même manière, le champ «Date de dépublication» vous permet de dépublier automatiquement la rubrique à une date donnée (dans le cas par exemple d'une rubrique temporaire liée à un événement particulier). Si ce champ n'est pas renseigné, la rubrique restera toujours publiée. NB : vous n êtes pas obligé de rentrer une date de publication ET une date de retrait, vous pouvez rentrer soit l un, soit l autre, ou les deux, bien évidemment. Avertissement : La publication différée est liée à sa programmation dans les processus de workflows. 9 Meta description sert à paramétrer des éléments utiles au référencement du site. Vous pouvez décrire le contenu de votre page en une phrase ou deux afin de parfaire le référencement du site (la description apparaîtra uniquement dans le code source de la page). Cliquez ensuite sur «Envoyer à la publication» pour que votre rubrique apparaisse ensuite en ligne. 15

16 Si vous souhaitez la conserver dans le back-office mais ne pas l afficher tout de suite, cliquez sur «Sauver le brouillon». Pour annuler votre création de rubrique ou revenir à la page précédente, cliquez sur «Annuler le brouillon» (attention, celui-ci ne sera pas sauvegardé si c est une première version ou sera sauvegardé dans sa version antérieure si une autre version existe). ATTENTION : Il est important, lorsque vous souhaitez sortir de votre rubrique (ou de tout autre objet) sans sauvegarder vos modifications, de toujours cliquer sur le bouton «Annuler le brouillon» et de ne jamais passer par le bouton «Précédent» de votre navigateur. En effet, cela aurait pour effet de ne pas fermer la rubrique en cours d'édition, ce qui pourra poser problème lors d'une ouverture ultérieure. A SAVOIR : La nouvelle rubrique peut ne pas apparaître immédiatement si un circuit de validation (un workflow) a été défini. 5.2 Modifier les titres des menus/rubriques Pour modifier les titres des menus/rubriques il faut cliquer sur l onglet Contenus dans l'outil d'administration. S affiche alors, sur la gauche, l'arborescence des contenus. Le nom de chaque sous-dossier est matérialisé par l icône Pour modifier un titre, il suffit de faire un clic gauche sur l icône qui précède le nom du dossier puis sélectionner «Editer en > Français» dans le menu contextuel : Un clic gauche sur l icône choisie permet de faire apparaître le menu contextuel. 16

17 Vous pouvez également éditer la rubrique en cliquant sur son nom (qui se met alors en surbrillance orange) puis ensuite, au centre de la page, cliquer sur le bouton «Editer». Dans la page qui s affiche alors, on peut modifier le Nom de la rubrique, ainsi que tous les autres champs de la rubrique. L édition d un menu / d une rubrique engendre une nouvelle version de «brouillon» qui passera au statut «publié» lors de l enregistrement des modifications apportées. La validation des nouvelles informations se fait en cliquant sur le bouton «Envoyer pour publication». Ceci fait, on voit dans le module gauche «Contenus», que le nouveau nom est bien pris en compte (si aucun processus de validation n'est mis en place sur le site). 5.3 Supprimer une rubrique 1 ère méthode : Pour supprimer une rubrique ou une sous-rubrique (donc un dossier ou un sous-dossier), il suffit de cliquer dessus dans le module «Contenus» (elle se met alors en surbrillance orange) puis sur le bouton «Supprimer» au centre de la page. 17

18 On peut également supprimer un élément de manière générale en passant par le menu contextuel (clic gauche sur l icône qui précède le titre du dossier à supprimer) et en sélectionnant «Supprimer». Quelle que soit la méthode employée, il faut ensuite, dans le cadre qui s affiche, confirmer la suppression de la rubrique en cliquant sur OK. Si vous êtes sûr de n avoir pas besoin de ces éléments ultérieurement, vous pouvez décocher «Déplacer vers la corbeille» (case cochée par défaut) pour les jeter définitivement et ainsi ne pas encombrer inutilement la corbeille (les éléments que vous supprimez se mettent en effet par défaut dans la corbeille pour pouvoir les récupérer si besoin est). Sur cette page apparaît également le chemin de l objet à supprimer, son type (article, rubrique, formulaire, etc ) et s il contient des souséléments, la suppression de l objet supprimera aussi ses sous-éléments. A SAVOIR : l option Déplacer vers la corbeille permet de récupérer ultérieurement l objet supprimé. Sous le module «Contenus», vous trouverez l icône d une corbeille sur laquelle il suffit de cliquer pour en voir le contenu et récupérer les objets que l on désire récupérer. IMPORTANT : La structure de la corbeille est une structure plate. Ceci veut dire que tout objet placé dans la corbeille ne contient plus aucune information sur son emplacement et éventuellement sur son contenu. La restauration / récupération d un dossier qui contenait des objets ne restaurera / récupérera pas les objets. Lors de la récupération des objets, vous aurez le choix soit de restaurer à sa place d origine, soit un nouvel emplacement. 18

19 6 Les articles 6.1 Créer un article 1 1 Pour créer un nouvel article, placez-vous d abord à l endroit où vous souhaitez le placer (l emplacement se met alors en surbrillance orange) et 3 Ensuite, tout en bas de la page, choisissez «Article» dans le menu déroulant, puis cliquez sur le bouton «Créer ici». ASTUCE : pour accéder plus rapidement à la lettre A (le «A» de «Article») dans le menu déroulant, appuyez sur la touche «A» de votre clavier lorsque vous avez ouvert le menu déroulant (si vous appuyez plusieurs fois sur la lettre «A», vous passez en revue chaque terme les uns après les autres commençant par la lettre «A». Pour créer un nouvel article, vous pouvez également faire un clic gauche sur l icône qui précède le nom de la rubrique où vous voulez placer votre article et ensuite sélectionner «Créer ici» dans le menu contextuel, puis choisir «Article» dans le menu. Cette méthode peut être utilisée pour la création de tout objet dans. 19

20 Dans la page qui apparaît : 1 Entrez le titre de votre article (il apparaîtra tel quel sur le site). 2 Chaque article peut avoir une image de présentation propre. Le choix se fait ici. 3. L article comprend un champ «Introduction» (bloc texte). L éditeur est bridé à la mise en place du gras, italique. Il également possible d insérer les abrévihations. 4 La barre d éditeur vous permet de mettre en forme votre texte (gras, italique ), de mettre des images, etc Vous pouvez également désactiver l éditeur et accéder directement au code XML en cliquant sur le bouton «Désactiver l éditeur». 5 L article comprend un champ «Introduction» (bloc texte) et un champ «Contenu» (bloc XML) avec barre d éditeur pour la mise en page, ce qui vous permet de scinder l article en deux parties (votre article comportera donc un extrait introductif et tout l article sera visible lorsque l internaute cliquera sur le lien «Lire la suite». Pour ce faire, copiez l introduction de l article dans le champ «Introduction» et le reste de l article dans le champ «Contenu». (Pour informations, vous n avez pas besoin de recopier le texte d introduction dans le champ «Contenu», celui-ci se retrouvera automatiquement lorsque l internaute consultera l article en entier). «Lire la suite : Par défaut, si votre article contient une introduction et une suite, le lien entre les deux parties sera «Lire la suite». A l inverse, si vous souhaitez créer un article d un seul tenant, copiez tout votre texte dans le champ «Introduction, il n y aura donc pas de suite à votre article. Vous pouvez aussi le copier dans le champ «Contenu», alors s affichera sur le site le titre de l article et le lien de continuation «Lire la suite», pour accéder au contenu. 20

21 Exemple d articles d un seul tenant et scindé en deux : l image de gauche montre un exemple d article traité d un seul tenant, puis d un second article avec extrait introductif. Autoriser les commentaires : si vous cochez cette case et que l article comprend un extrait introductif et une suite, dans la suite de l article (et uniquement dans ce cas là), l internaute aura la possibilité de déposer un commentaire. 6 21

22 7 Sur un grand nombre d objet, vous pouvez associer une image de présentation. Pour cela cliquez sur «Ajouter un objet», et 8 Ensuite il vous faudra cliquer sur l onglet Médiathèque afin d y retrouver l image déposée au préalable. Si vous souhaitez mettre un texte alternatif à l image (utile pour des questions d accessibilité mais uniquement s il ne s agit pas d une image purement décorative), indiquez-le dans le champ «Texte alternatif de l image». Si vous souhaitez également indiquer une légende à cette image (elle apparaîtra sous l image), indiquez la dans le champ «Légende». Et enfin, le copyright. Il fonctionne de la même manière que la légende. 1 1 Si l éditeur ne se met pas automatiquement dans l onglet médiathèque (suivant les versions) il vous faudra alors cliquer sur l onglet «Médiathèque». 22

23 Cliquez sur «Images», c est le dossier principal qui contient les sous-dossiers où sont déposées les images. 3 Au centre de la page, la visualisation de vos dossiers ou images peut se faire soit par liste soit par vignette. 4 et 5 Vous pouvez sélectionner le dossier dans lequel se trouve votre image, soit en cliquant sur son nom dans le menu déroulant de gauche, soit en cliquant sur le bouton radio sous son icône au centre de la page. Pour sélectionner l image qui vous convient, cliquez sur le bouton radio sous celle-ci, puis cliquez sur le bouton «Sélectionner» en bas de page. Votre image ira directement se placer dans votre article. 23

24 et 7 La date de publication et de dépublication vous permet d écrire un article à l avance tout en choisissant une date de publication ultérieure et / ou une date de retrait déjà déterminée. L article se publiera alors automatiquement ou se dépubliera automatiquement : publication différée. Format : pour 3 août Vous pouvez également utiliser le petit calendrier en cliquant dessus pour choisir une date. Indiquez également une heure, sachant qu un petit programme repère tout ce qui est en attente de publication ou dépublication vers 1h15 heures du matin. Vous pouvez donc indiquer 1 heure du matin comme heure. A SAVOIR également : la publication différée est liée à sa programmation dans les processus de workflow. ATTENTION : si le site n est pas hébergé sur nos machines, vous devrez demander à votre hébergeur à quelle heure et quelle fréquence passe le CRON (c est-à-dire le programme qui publie ou dépublie ce qui est en attente). Bien sûr, vous n êtes pas obligés de rentrer une date de publication ET une date de retrait, vous pouvez rentrer soit l une, soit l autre ou les deux. 8 Le champ «Tags» permet de définir des mots clés supplémentaires à l article pour le retrouver plus facilement via le moteur de recherche (si par exemple le mot «enfance» n existe pas dans l article et que vous souhaitez qu un internaute le retrouve lorsqu il tapera ce mot dans le moteur de recherche, indiquez-le dans le champ «Tags». Ce champ peut également servir en option pour relier plusieurs articles entre eux via ce qu on appelle des «Nuages de tags» (ce sont des successions de termes avec une police de caractère plus ou moins grande pour faire ressortir les termes les plus présents sur le site). A NOTER : si vous indiquez plusieurs mots clés, il n est pas utile de les séparer par des virgules, vous pouvez simplement les écrire les uns à la suite des autres. 9 Meta description sert à paramétrer des éléments utiles au référencement du site. Vous pouvez décrire le contenu de votre page en une phrase ou deux afin de parfaire le référencement du site (la description apparaîtra uniquement dans le code source de la page). Ce champ est également utilisé pour le moteur de recherche full texte du site internet. 24

25 Cliquez ensuite sur «Envoyer à la publication» pour que votre article apparaisse de suite en ligne. Si vous souhaitez le conserver dans le back-office mais ne pas l afficher tout de suite, cliquez sur «Sauver le brouillon». Pour annuler votre création d article ou revenir à la page précédente, cliquez sur «Annuler le brouillon» (attention, celui-ci ne sera pas sauvegardé si c est une première version ou sera sauvegardé dans sa version antérieure si une autre version précédente existe. ATTENTION : Il est important, lorsque vous souhaitez sortir de votre article (ou de tout autre objet) sans sauvegarder vos modification de toujours cliquer sur le bouton «Annuler le brouillon» et de ne jamais passer par le bouton «Précédent» de votre navigateur. En effet, cela aurait pour effet de ne pas fermer l objet en cours d édition, ce qui pourra poser problème lors d une ouverture ultérieure. A SAVOIR : Le nouvel article peut ne pas apparaître immédiatement si un circuit de validation (un workflow) a été défini. 7.1 Modifier un article Pour modifier un article (ou n'importe quel objet), il faut cliquer sur l onglet Contenus. S affiche alors, sur la gauche, le module Contenus dans lequel se trouvent les articles, que l on reconnaît avec cette icône : Pour modifier un article, faites un clic gauche sur l icône, puis sélectionnez «Editer en > Français» ou «Modifier» dans le menu contextuel. Dans la page qui s affiche, vous pouvez alors modifier tous les champs de l article : son titre, l introduction, le contenu, les images associées, etc La validation des modifications se fait en cliquant sur le bouton «Envoyer à la publication». 25

26 Il existe également une autre méthode pour modifier un article (c est-à-dire l éditer). Cliquez sur le titre de l article (ou n importe quel objet) que vous souhaitez modifier. Il se met alors en surbrillance orange. Puis, au centre de la page, cliquez sur «Editer». A SAVOIR : Pour retrouver un article et le modifier, vous pouvez également utiliser le moteur de recherche situé en haut à droite de l outil d administration. 7.2 Supprimer un article Première méthode : Pour supprimer un article, il suffit de passer par le menu contextuel en faisant un clic gauche sur l icône qui précède le titre de l article puis en sélectionnant «Supprimer». Ensuite, il faut confirmer la suppression en cliquant sur «OK». 26

27 Deuxième méthode : On peut également supprimer un article en cliquant sur son nom, qui se met alors en surbrillance orange, puis sur le bouton «Supprimer» au centre de la page. Il faut ensuite confirmer la suppression en cliquant sur «OK». A SAVOIR : Pour retrouver un article et le supprimer, vous pouvez utiliser le moteur de recherche situé en haut à droite de l outil d administration. 27

28 8 Masquer un objet Il est possible, plutôt que d effacer un objet que l on ne désire plus voir s afficher (ex : une rubrique, un article, un événement d'agenda...), de simplement en masquer l affichage sur les pages du site. Pour masquer un objet et tout ce qu il contient, il suffit de cliquer sur l icône qui précède le nom de l objet et dans le menu contextuel qui s affiche, de cliquer sur «Avancé» > «Cacher / rendre visible». La deuxième manière de faire est de cliquer sur le titre de l objet, il se met en surbrillance orange, et sur la page centrale qui s affiche, de cliquer sur l onglet «Emplacements» sur le lien «Masquer». 28

29 A NOTER : Sur la capture ci-contre, on peut voir que le dossier «Publications» et tout ce qu il contient est en surbrillance grise. Ceci indique que le menu est masqué, et donc, automatiquement, tout ce qu il contient aussi. Pour révéler un objet qui a été masqué, on procède de la même manière. Mais cette fois-ci dans l onglet «Emplacements» on clique sur le lien Révéler qui s affichera en lieu et place du lien Masquer, et dans le menu contextuel (si vous passez par un clic gauche sur l icône qui précède le nom du dossier «Avancé» > «Cacher / Rendre visible». Si l objet était visible sur les pages du site, alors cette action aura pour effet de le masquer. Si l objet était masqué sur les pages du site, alors cette action aura pour effet de le rendre visible. Bien évidemment, il est possible de ne masquer, non pas tout un menu, mais uniquement une partie de son contenu (un seul article ou un seul sondage par exemple). Pour cela, on commence par dérouler le menu en cliquant sur la petite croix qui précède l icône du menu visé et, soit on clique sur le titre de l objet que l on souhaite Masquer / Révéler, soit on fait un clic gauche sur l icône qui précède le titre de l objet que l on désire Masquer / Révéler. 29

30 9 8. Toutes les fonctionnalités de l'éditeur 9.1 Copier / coller un texte dans l'éditeur IMPORTANT : Il est possible de copier / coller un texte dans l éditeur mais soyez très prudent. Si vous avez déjà tapé votre texte dans un logiciel de type Word, il peut y avoir un conflit entre la mise en forme existante de votre document (ex. feuilles de styles spécifiques à word, police choisie par rapport à celle définie sur le site et notamment lorsque vous utilisez plusieurs tailles de police, caractères spéciaux de type qui ne seront pas reconnus dans l éditeur, puces, marges, bordures, tabulations ). Dans l éditeur, ne collez donc pas de textes issus de Word dont la mise en forme est complexe. En revanche, si votre mise en forme est classique (avec uniquement l utilisation du gras, de l italique ou du souligné, l utilisation d une police uniforme identique à celle utilisée sur le site ainsi qu une taille de police identique dans tout le document), vous pouvez directement coller votre texte dans l éditeur (depuis Word, il est préférable de passer par le bloc note au préalable), Pour être certain de ne pas créer de conflit de ne pas créer de conflit avec l éditeur et avoir un texte exempt de tout formatage ou style particulier, vous pouvez d abord copier / coller votre texte dans le Bloc notes de votre ordinateur, puis le copier / coller ensuite dans l éditeur. Il ne vous restera alors plus qu à retravailler la mise en forme (couleur du texte, gras, italique, souligné ) directement dans l éditeur. Pour accéder au Bloc-notes de votre ordinateur : allez dans Démarrer > Tous les programmes > Accessoires > Bloc-notes. 9.2 Sauter une simple ligne Si vous souhaitez revenir à la ligne dans l éditeur (sans créer un nouveau paragraphe), appuyez simultanément sur MAJ + ENTREE. Si vous souhaitez faire un nouveau paragraphe, appuyez seulement sur ENTREE. 30

31 9.3 Vue d ensemble des boutons de la barre d outils Défaire la dernière action dans l éditeur. Pour défaire plus d une action, continuez de cliquer sur le bouton. Raccourci : Ctrl + Z Inverser la commande «Défaire». Raccourci : Crtl + Y Mettre en gras le texte sélectionné. Si le texte sélectionné est déjà en gras, ce bouton va supprimer ce format. Raccourci : Ctrl + B Créer en italique le texte sélectionné. Si le texte sélectionné est déjà en italique, ce bouton va supprimer ce format. Raccourci : Ctrl + I Créer une liste numérotée. Pour créer un nouvel élément dans la liste, cliquez sur «Entrée». Pour finir une liste, cliquez deux fois sur «Entrée» à la fin de la liste. Si vous cliquez sur ce bouton lorsque le curseur est sur un élément de la liste, le formatage sera supprimé. Créer une liste à puces. Pour créer un élément dans la liste, cliquez sur «Entrée». Pour finir une liste, cliquez deux fois sur «Entrée» à la fin de la liste. Si vous cliquez sur ce bouton lorsque le curseur est sur un élément de la liste, le formatage sera supprimé. Accroître l indentation (le retrait) d une liste (à puce ou numérotée). Placez-vous d abord sur un élément de la liste puis cliquez sur ce bouton pour créer un alinéa supplémentaire à l élément. Décroître l indentation (le retrait) d une liste (à puce ou numérotée). Placez-vous d abord sur un élément de la liste, puis cliquez sur ce bouton pour enlever un alinéa à l élément. Insérer un objet à partir de la liste des objets associés, télécharger un nouvel objet, recherche un objet existant. Pour télécharger un fichier en local depuis votre ordinateur, cliquez sur le bouton «Parcourir» dans l onglet «Télécharger», choisissez le fichier local, précisez le nom du nouvel objet, choisissez un emplacement dans la liste, puis cliquez sur le bouton «Télécharger un fichier local». Insérer une image à partir de la liste d images associées, télécharger une nouvelle image, rechercher des images existantes. Pour télécharger une image locale, choisissez le fichier local, précisez le nom de l image, choisissez un emplacement dans la liste, écrivez une légende si vous le souhaitez, puis cliquez sur le bouton «Télécharger un fichier local». Pour les images, vous pouvez spécifier la taille et / ou l alignement. Pour télécharger des images / fichiers locaux, cliquez sur le bouton «Télécharger un nouvel objet». Dans la fenêtre de téléchargement d un fichier local, choisissez le fichier, spécifiez le nom du nouvel objet, choisissez un emplacement à partir de la liste et cliquez ensuite sur le bouton «Télécharger». Créer un lien hypertexte. Sélectionnez d abord le texte, puis cliquez sur le bouton pour faire de ce texte un lien. Créer une ancre. Une icône d ancre apparaîtra dans l éditeur. Spécifiez-lui un nom (exemple : intro.). Attention les ancres sont ensuite utilisées dans les URL, ne mettez donc pas d accent ou d espace. Vous pourrez ensuite faire un lien vers cette ancre en ajoutant à l URL du lien #intro dans cet exemple (une ancre est toujours précédée du caractère #). Pour ce faire, lorsque vous créez votre lien vers l ancre (exemple : «Accéder à l introduction»), sélectionnez votre texte, cliquez sur le picto «Lien» et dans le premier champ indiquez uniquement #intro et validez. 31

32 Ce bouton vous permet d indiquer des abréviations dans votre texte, d indiquer des mots en langue étrangère, de mettre des parties de texte en avant (fond de couleur), etc Insérer du code HTML. Cliquez sur «Insérer un texte littéral» après avoir sélectionné votre texte (ou cliquez d abord sur «Insérer un texte littéral»), puis choissez «HTML» dans le menu déroulant de la fenêtre qui s ouvre. Insérer un caractère spécial. Cliquez sur le bouton pour ouvrir la fenêtre dédiée aux caractères spéciaux. Cliquez sur un caractère pour l insérer. Insérer un tableau à la position sélectionnée. Supprimer le tableau sélectionné (cette cellule est grisée / inactive lorsque vous êtes en dehors d un tableau) Supprimer la colonne sélectionnée (cette cellule est grisée / inactive lorsque vous êtes en dehors d un tableau). Insérer une colonne à droite de la cellule sélectionnée (cette cellule est grisée / inactive lors que vous êtes en dehors d un tableau). Supprimer la ligne sélectionnée (cette cellule est grisée / inactive lorsque lors que vous êtes en dehors d un tableau). Insérer une ligne en-dessous de la ligne en cours (cette cellule est grisée / inactive lorsque vous êtes en dehors d un tableau). Fusionner les cellules sélectionnées en une seule cellule (cette cellule est grisée / inactive lorsque lors que vous êtes en dehors d un tableau). Refractionner les cellules si celles-ci ont été précédemment fusionnées (cette cellule est grisée / inactive lorsque lors que vous êtes en dehors d un tableau). Ouvrir l éditeur en mode plein écran. Ouvrir la fenêtre d aide : récapitule la fonctionnalité de chacun des boutons. 32

33 10 Création et gestion des tableaux 10.1 Créer un tableau Pour créer un tableau, placez d abord votre curseur à l endroit où vous souhaitez le positionner, puis cliquez sur ce pictogramme : Dans la fenêtre qui apparaît, entrez d abord le nombre de colonnes et de lignes souhaitées à votre tableau. 2 Indiquez ensuite la largeur souhaitée (n oubliez pas de mettre le signe pourcentage (exemple : 60%) si vous indiquez une valeur en pourcentage. Sinon la valeur sera exprimée en pixels (exemple : 600). 3 Dans le champ «Contour», laissez la valeur à zéro si vous ne souhaitez pas que votre tableau ait de bordures. Si vous souhaitez que les bordures soient visibles, mettez le chiffre 1 à la place de 0. 33

34 A SAVOIR : Vous pouvez également indiquer des valeurs supérieures (telles que 5) pour avoir une épaisseur de bordure plus importante. Néanmoins, plutôt que d utiliser le champ «Contour» (le tableau étant alors en HTML pur sans aucun style), nous vous conseillons plutôt de choisir un style prédéfini dans le champ «Classe». 4 Dans le champ «Classe», vous avez la possibilité de choisir un style prédéfini pour votre tableau. Nous vous conseillons de le faire pour que les marges du tableau soient correctes et que la couleur du tableau soit en adéquation avec celle du site. 5 Le champ «Description» vous permet de faire un résumé rapide de ce que contient votre tableau. Ce résumé n apparaîtra pas tel quel sur le site (il n apparaîtra que dans le code source de la page) mais il permettra aux aides techniques utilisées par les personnes handicapées (exemple : un malvoyant) de décrire le contenu du tableau. Vous pouvez donc indiquer par exemple «Température de la semaine en fonction de la ville», en sachant que c est cette information qui sera restituée en premier lors de la lecture du tableau. Attention, si vous faites un tableau de mise en forme (uniquement pour mettre en page votre contenu), la description doit impérativement rester vide. 6 Dans le champ «Légende», indiquez un titre à votre tableau (il apparaîtra alors au-dessus de votre tableau). Ce champ est facultatif mais nous vous conseillons fortement de le renseigner car il fournit à l utilisateur de manière synthétique une information sur ce qu il va trouver dans le tableau. L attribution de titres aux tableaux de données permet en outre de les différencier les uns des autres lorsqu une page en contient plusieurs. Enfin, validez la création du tableau en cliquant sur OK. Pour rajouter une colonne, une ligne, supprimer une colonne ou une ligne, fusionner plusieurs cellules, etc, utilisez les pictogrammes détaillés dans le chapitre précédent après avoir placé votre curseur dans la cellule souhaitée (ou les cellules lorsque vous en sélectionnez plusieurs pour les fusionner) Modifier les paramètres généraux du tableau Pour modifier les paramètres d un tableau, placez-vous d abord dans n importe quelle cellule du tableau. Apparaissent alors en bas de l éditeur un chemin avec la liste des balises utilisées pour faire ce tableau. Cliquez sur «table» pour ouvrir la boîte de dialogue qui vous permettra d avoir accès aux paramètres que vous aviez entrés. Cliquez sur «tableau de données» pour ouvrir la boîte de dialogue qui vous permettra d avoir accès aux paramètres du tableau que vous aviez entrés. 34

35 Vous pouvez modifier, la classe, la description et la légende du tableau. La boîte de dialogue apparaît alors pour que vous puissiez modifier les paramètres. Validez vos modifications en cliquant sur OK. 35

36 10.3 Changer la largeur des colonnes Par défaut, toutes les cellules d un tableau ont la même largeur. Ainsi, si vous faites un tableau d une largeur de 100% à 2 colonnes, chaque colonne fera 50%. Si votre tableau comporte 4 colonnes, chaque colonne fera 25%. Par défaut, la largeur des colonnes s adapte aux contenus. Si vous souhaitez modifier la largeur d une de ces colonnes, il vous suffit de placer votre curseur à l intérieur d une des cellules de la colonne et tout en bas dans l éditeur, dans le Chemin qui apparaît, de cliquer sur «Table cell» pour avoir accès aux paramètres de la cellule comme le montre la capture d écran ci-dessous : Cliquez sur «Table cell» pour modifier la largeur de la colonne. Dans la boîte de dialogue qui apparaît, entrez la largeur souhaitée dans le champ «Largeur». N oubliez pas d indiquer % sinon la valeur sera considérée comme étant exprimée en pixels. Dans le champ «Appliquer à» sélectionnez «Colonne». Enfin, validez vos modification en cliquant sur OK. 30% 36

37 10.4 Entrer du texte, l aligner à droite dans le tableau Par défaut, le texte est aligné à gauche dans les cellules d un tableau. Si vous souhaitez l aligner à droite ou le centrer placez-vous dans la cellule de votre choix et tout en bas dans l éditeur, dans le Chemin qui apparaît, cliquez sur «Table cell» pour avoir accès aux paramètres de la cellule comme le montre la capture d écran ci-dessous : Cliquez sur «Table cell» pour centre / aligner à droite le texte de votre cellule. Dans la fenêtre qui apparaît, choisissez désormais dans le champ «Classe», de centrer ou aligner à droite votre contenu Créer un en-tête de colonnes / de ligne au tableau Pour des questions d accessibilité, il est impératif que vos en-têtes de colonnes ou de ligne soient construits correctement, autrement dit, dans le code source de la page, ils doivent comporter une balise TH (Table Header). En effet, celle-ci permet aux utilisateurs de navigateurs vocaux et lecteurs d écran de connaitre le titre de la ligne ou de la colonne dans laquelle ils se trouvent (mettre simplement en gras, par exemple, vos en-têtes de lignes ou de colonnes ne suffit pas). Les personnes aveugles ont une lecture linéaire des tableaux, aussi le marquage des en-têtes de colonnes constitue-t-il un point de repère essentiel. Le sens de lecture est également récupéré. Rangées d en-têtes Colonnes d en-têtes 37

38 Pour construire correctement ces en-têtes, placez-vous dans la cellule qui contient un en-tête, puis tout en bas dans l éditeur, dans le Chemin qui apparaît, cliquez sur «Table cell» pour avoir accès aux paramètres de la cellule. Ensuite, dans la fenêtre qui apparaît, dans le champ «Balise», choisissez «TH». Désormais, le code source de la page indiquera donc bien qu il s agit d un entête de tableau et pas simplement d une ligne quelconque, «TH» signifiant littéralement «Table Header», soit «En-tête de tableau». Dans le champs «Appliquer à» choisissez également «Ligne» si vos en-têtes sont situés sur la 1 ère ligne, ou «Colonne» si vos en-têtes sont situés sur la 1 ère colonne. 38

39 11 Gestion des styles, des paragraphes et des titres 11.1 Modifier les styles d un paragraphe Après avoir écrit ou copié / collé votre texte dans l éditeur, vous avez la possibilité d affecter des styles particuliers à certains paragraphes. Pour ce faire, placez d abord votre curseur devant le paragraphe dont vous souhaitez modifier les styles, puis tout en bas, dans le Chemin de l éditeur, cliquez sur «Paragraph» pour avoir accès aux paramètres du paragraphe comme le montre la capture d écran ci-dessous : Placez d abord votre curseur devant le paragraphe que vous intéresse, puis tout en bas, dans le Chemin de l éditeur, cliquez sur «paragraph». Ensuite, dans la fenêtre qui apparaît, sélectionnez le style que vous souhaitez affecter à votre paragraphe, puis cliquez sur OK. Les différents styles existants sont les suivant : Mis en avant : Le paragraphe sera mis en avant à l aide d un fond de couleur (ce fond de couleur dépend de la maquette du site et éventuellement de la rubrique dans laquelle vous vous trouvez). Sans espacement : Votre paragraphe sera collé au précédent. Espacement moyen : Il y aura un grand espacement entre votre paragraphe et celui qui le suit. Très grand espacement : Il y aura un très grand espacement entre votre paragraphe et celui qui le suit. 39

40 Retour chariot : Le paragraphe sera précédé d un saut de ligne. Pour revenir en arrière et retirer la mise en forme que vous venez de faire, placez votre curseur sur l un des mots du paragraphe (n importe lequel), puis tout en bas dans le Chemin de l éditeur, cliquez sur ce qui commence par «Paragraph» (la suite dépend du style que vous avez affecté préalablement au paragraphe). Ensuite, dans la fenêtre qui apparaît, choisissez le premier style «None», c est-à-dire que vous n allez affecter aucun style au paragraphe. Attention : si vous faites «Entrée» à la fin d un paragraphe pour en créer un nouveau et que celui-ci avait un style défini (Introduction par exemple), le paragraphe que vous venez de créer aura automatiquement le même style. Si vous souhaitez lui retirer ce style, cliquez sur ce nouveau paragraphe puis affectez lui le style «None» comme expliqué juste au-dessus. Astuce : pour aller plus vite, vous pouvez également lui affecter un des styles listés dans le menu déroulant à gauche de l éditeur puis lui remettre le style «Paragraphe» Juste après. 40

41 11.2 Gérer les titres à l intérieur de vos contenus Pour des questions d accessibilité et de lisibilité, il est important que vos pages soient bien structurées. Pour ce faire, si vos contenus contiennent des titres entre les différents paragraphes, ils doivent être hiérarchisés correctement en utilisant les styles appropriés tels que Titre 1, Titre 2, Titre 3, etc (un peu comme vous le faites dans Word). Les internautes repèreront ainsi plus facilement l importance de tel ou tel paragraphe et les utilisateurs qui ne voient pas le texte à l écran (qui utilisent par exemple un lecteur d écran) identifieront également mieux les différents blocs d information et la relation des différents textes les uns par rapport aux autres. En effet, le fait d utiliser un style particulier de type Titre1, Titre 2, etc génèrera des balises de type <H1>, <H2> etc dans le code source de la page. C est ce code qui sera ensuite interprété par les différentes aides techniques utilisées par les internautes malvoyants notamment. La structuration de la page par le code permet donc aux utilisateurs non-voyants de se constituer une table des matières du contenu de la page. On peut comparer cette fonctionnalité à la table des matières constituée par un logiciel de traitement de texte lorsque les styles automatiques sont utilisés pour marquer les différents chapitres et sections d un document. Si le concepteur du document n a pas attribué de style automatique de type Titre 1, Titre 2 à ses différentes parties, le logiciel sera incapable de générer automatique une table des matières. Par contre, si des styles automatiques ont été attribués, la table des matières pourra être obtenue à tout moment. Avec une page Web structurée, les utilisateurs pourront alors rapidement accéder à une section de la page grâce à une fonctionnalité spécifique de leur navigateur ou de leur aide technique. Ils pourront comprendre comment la page est organisée et cela leur permettra d accélérer leur mode de navigation et d effectuer une lecture plus rapide du contenu de la page. Qui plus est, l utilisation de balises de structure telles que les Titre 1, Titre 2, etc, permettent aux moteurs de recherche de mieux référencer la page. A savoir : En HTML, il existe 5 niveaux de hiérarchie de Titre 1 pour le titre le plus important à Titre 5 pour le moins important. Pour mettre en place ces titres dans vos pages, c est très simple, il suffit de placer votre curseur devant la ligne qui doit devenir un titre puis en haut à gauche dans l éditeur, de sélectionner le style de titre approprié comme sur la capture d écran ci-dessous : 41

42 Attention : La hiérarchie entre les titres doit être impérativement respectée et les degrés de titre ne peuvent pas être sautés (par exemple un Titre 3 ne peut pas venir directement après un Titre 1, et vous devez impérativement commencer par un Titre 1 dans la page). Vous ne devez pas non plus utiliser ces titres à mauvais escient simplement pour qu un intitulé ressorte bien (par exemple en gras et en taille de police supérieure à celle du texte). Les titres doivent vraiment être utilisés pour que le «sommaire» de la page soit clair. A savoir : En fonction des maquettes des sites, les différents titres comporteront une couleur spécifique et une taille de police spécifique. Revenir à un paragraphe classique : Si vous souhaitez revenir en arrière et retirer le titre que vous venez de mettre en place, il vous suffit de replacer votre curseur devant la ligne concernée et de sélectionner «paragraphe» dans le listing des différents styles en haut à gauche de l éditeur. Vous reviendrez alors à un style de paragraphe normal. 42

43 12 Créer un lien hypertexte Vous pouvez créer des liens hypertextes dans vos articles ou vos rubriques. Il existe plusieurs types de liens hyper textes. Les trois qui vous seront les plus utiles sont les suivants : http : lien hypertexte renvoyant l utilisateur vers un site externe mail : lien hypertexte permettant de créer un lien vers une adresse mail (exemple : mail@ville.fr) eznode : lien hyper texte envoyant l utilisateur vers une partie du site en interne. Nous allons voir ici comment créer chacun de ces types de liens après avoir étudié le menu «Lien hypertexte» de manière générale. 1 Pour insérer un lien hypertexte dans un article ou une rubrique, il vous faut d abord taper le texte sur lequel vous voulez créer un lien. Vous devez ensuite le sélectionner, puis cliquer dans l éditeur sur l icône représentant une chaine : 43

44 Dans la fenêtre qui apparaît, vous trouverez plusieurs champs à remplir : La 1 ère liste déroulante commençant par «Other» va vous permettre de choisir le type de lien que vous voulez créer ( mail, eznode, etc ). Nous y reviendrons dans les paragraphes suivants. 2 Les 3 pictogrammes suivants vont vous faciliter la création de liens : Le 1 er pictogramme représentant une loupe vous permet de rechercher un objet sur lequel vous souhaitez faire un lien (comme nous l expliquerons dans les pages suivantes, il vous suffira donc de rechercher un mot, et dans les résultats proposés, de choisir vers lequel vous souhaitez effectuer un lien). Le pictogramme représentant un dossier vous permet d aller parcourir toute l arborescence du site pour aller sélectionner l emplacement vers lequel vous souhaitez effectuer un lien. Le pictogramme représentant un marque-page vous permet d avoir un accès direct à tout ce que vous avez placé en favoris pour faire un lien vers l un de ces favoris. (signet) 44

45 3 Le champ suivant vous permet de rentrer l adresse vers laquelle le lien va pointer. 4 Dans le champ «Visualiser», vous avez la possibilité de choisir quel type de lien sera mis en place (par défaut, Full ou Line) mais dans 99% des cas, vous n aurez pas à modifier ce champ (laissez-le sur «Default»). Il ne sera utile que dans quelques cas spécifiques. 5 Le champ «Cible» va vous permettre de choisir où ouvrir la page. Nous vous conseillons fortement de laisser «aucun». Il n est pas bon de prendre la main sur le poste de l internaute. S il veut ouvrir dans une nouvelle fenêtre, il utilise la combinaison crtl+clic. 6 En option uniquement : le champ «Classe» s il est activé, permet de choisir l apparence qu aura le lien. 7 Le champ «Titre» vous permet d entrer le texte qui s affichera en info-bulle (lorsque le lien sera survolé par l utilisateur). Ce champs doit être uniquement rempli si l intitulé du lien n est pas suffisamment explicite, et dans ce cas, le titre doit comporter au minimum ce qui est contenu dans l intitulé du lien et éventuellement des informations complémentaires comme par exemple «Nouvelle fenêtre» pour indiquer aux utilisateurs que le lien s ouvrira dans une nouvelle fenêtre Création d un lien externe 1 Pour faire un lien vers un site externe (ex. Google), il vous faut d'abord sélectionner votre texte puis cliquer sur le pictogramme représentant une chaîne et 3 Ensuite, dans la fenêtre qui apparaît, sélectionnez «http» dans la 1 ère liste déroulante. Une fois ce type sélectionné, le champ suivant est automatiquement rempli avec Il vous 45

46 suffit alors de compléter ce début d URL par Le champ doit au final contenir : Attention : Dans le cas où vous copierez / collerez directement une adresse depuis la barre URL de votre navigateur web de ne pas vous retrouver avec deux fois Pensez à enlever celui qui est de trop si besoin, sinon votre lien ne fonctionnera pas. 4 Cible du lien. Cf page ci-dessus. 5 Éventuellement dans le champ «Titre» vous pouvez rentrer, dans l'exemple présent, le texte «Accéder au site de Google (nouvelle fenêtre)» qui s'affichera lorsque l'utilisateur survolera le lien Cliquez enfin sur le bouton «OK» en bas de la boîte de dialogue. Votre lien vers le site de Google est créé Création d un lien de type «mail» 1 Pour faire un lien de type mail (vers l'adresse mail contact@inovagora.net par exemple), sélectionnez votre texte puis cliquez sur le pictogramme représentant une chaîne et 3 Dans la fenêtre qui apparaît, sélectionnez «Mail» dans le premier menu déroulant. Une fois ce type sélectionné, le champ suivant est automatiquement rempli avec mailto. Il vous suffit alors de compléter ce début d'url par 46

47 Le champ doit au final contenir : mailto:contact@inovagora.net (tout attaché) 4 Dans le champ «Titre» vous pouvez éventuellement rentrer le texte «Nous contacter» si l'intitulé du lien n'est pas suffisamment explicite. Celui-ci s'affichera lorsque l'utilisateur survolera le lien. Automatiquement, le système indique «Ouverture de votre messagerie» sur le alt du lien. Cliquez enfin sur le bouton «OK» en bas de la boîte de dialogue. Votre lien est créé Création d un lien interne vers un contenu du site 1 Pour faire un lien interne (vers une rubrique ou un article de votre site, par exemple, mais plus généralement vers tout objet de votre site), il vous faut d'abord sélectionner le texte qui devra faire lien (ex. «Son patrimoine» dans l'exemple ci-dessous). 1 2 Ensuite, dans la fenêtre qui s'ouvre vous avez la possibilité : Soit de faire une recherche dans les contenus du site pour rechercher celui vers lequel vous souhaitez faire un lien. Soit de feuilleter l arborescence du site pour aller sélectionner la rubrique ou l article vers lequel vous souhaitez faire un lien. Soit d utiliser les signets si le contenu vers lequel vous souhaitez faire un lien est présent dans vos favoris. Nous allons expliquer chacune de ces possibilités l une après l autre. Faire une recherche : dès que la nouvelle fenêtre s ouvre, cliquez sur le pictogramme représentant la loupe. S ouvre alors une nouvelle fenêtre dans laquelle il vous suffit de taper un mot clé recherché (exemple : «patrimoine»), puis cliquez sur Rechercher. 47

48 Apparaissent alors la liste des résultats dans lesquels le mot recherché est présent. Si l objet recherché est présent dans ces résultats, cochez tout simplement la rubrique ou l article (ou n importe quel type d objet) vers lequel vous souhaitez faire un lien. S il n est pas présent, cliquez sur la croix rouge en haut à droite de la fenêtre pour revenir à la fenêtre précédente ou effectuez une nouvelle recherche. Recherche par type d objet : Par défaut, lorsque vous effectuez une recherche, «Tous» est coché, ce qui signifie que la recherche s effectue dans tous les types d objet. Mais si vous souhaitez restreindre votre recherche à un type d objet en particulier (un article par exemple ou une rubrique, un agenda, etc ) sélectionnez celui-ci ou sélectionnez-en plusieurs en maintenant la touche CRTL enfoncée. A noter : la liste des résultats vous indique pour chaque objet trouvé s'il s'agit d'un article, d'une rubrique, d'une image etc... Une fois que vous avez choisi un des résultats proposés, vous revenez automatiquement à la fenêtre précédente mais celle-ci est désormais remplie en fonction de ce que vous avez coché. Il ne vous reste plus qu'à remplir éventuellement le champ «Titre» puis à validez en cliquant sur OK. Votre lien est désormais créé. Feuilleter l arborescence du site : Dès que la nouvelle fenêtre s'ouvre, cliquez sur le pictogramme représentant un dossier et sélectionnez l'objet vers lequel faire un lien. S'ouvre alors une nouvelle fenêtre dans laquelle apparaît en règle générale «Accueil» (c'est-à-dire le premier niveau de l'arborescence, il se peut donc que l'intitulé ou le nombre de rubriques de 1 er niveau soit différent d'un site à l'autre). Cliquez dessus (sur le nom) pour avoir accès aux contenus (rubriques, articles etc...) présents à l'intérieur de ce premier niveau puis de nouveau sur l'intitulé qui contient l'objet recherché (et ainsi de suite jusqu'à ce que vous retrouviez l'objet vers lequel vous souhaitez faire un lien). 48

49 Cliquez sur une rubrique pour déployer ses sous rubriques Chemin pour parcourir le niveau supérieur Sélectionnez l objet vers lequel faire un lien 49

50 A noter : la liste des objets présents dans l arborescence vous indique pour chacun s il s agit d un article, d une rubrique, d une image, etc Navigation à l intérieur de l arborescence : Si vous cliquez sur un intitulé, vous accéderez à ce qui se trouve à l intérieur (si les intitulés sont soulignés c est qu ils contiennent quelque chose : un article, une sous rubriques, etc ). A l inverse, un intitulé non souligné signifie qu il ne contient plus rien, c est le cas par exemple des articles ou des rubriques qui seraient vides de contenus. Remonter d un niveau : Pour remonter d un niveau, il vous suffit d utiliser le chemin qui comment par «Nœuds supérieurs», ou des rubriques. Une fois que vous avez trouvé l'objet vers lequel vous souhaitiez faire un lien, sélectionnez-le en cochant le bouton radio qui se trouve juste devant son intitulé (cliquez sur un intitulé ne permet pas de le sélectionner, cela permet uniquement d'aller voir ce qu'il y a à l'intérieur). Une fois que vous avez choisi un des résultats proposés, vous revenez automatiquement à la fenêtre précédente mais celle-ci est désormais remplie en fonction de ce que vous avez coché. Il ne vous reste plus qu'à remplir éventuellement le champ «Titre» puis à validez en cliquant sur OK. Votre lien est désormais créé. Accéder aux signets (c'est-à-dire à vos favoris) : Dès que la nouvelle fenêtre s'ouvre, cliquez tout de suite sur le pictogramme représentant un marque page si vous souhaitez aller voir vos signets (les signets ce sont des objets placés en favori par l'utilisateur parce qu'il les utilise souvent, par exemple parce qu'il actualise souvent la rubrique «Environnement» ou tel article etc...). Si vous savez que l'objet vers lequel vous voulez faire un lien est présent dans vos favoris (les favoris sont propres à chaque utilisateur), vous pouvez donc directement accéder à cet objet en cliquant sur le picto Marque page. Apparaissent alors tous les objets que vous aviez placé en favori (la liste vous indique pour chaque objet s'il s'agit d'un article, d'une rubrique etc...). 50

51 Sélectionnez l objet vers lequel faire le lien Si l'objet vers lequel vous souhaitiez faire un lien se trouve dans cette liste, sélectionnez-le en cochant le bouton radio qui se trouve devant son intitulé (si l'objet se trouve plutôt à l'intérieur d'un de ces objets, il vous suffit alors de cliquer sur le nom de l'objet - dès lors qu'un objet est souligné cela signifie qu'il contient lui-même d'autres objets - et ainsi de suite jusqu'à ce que vous retrouviez celui souhaité). Une fois que vous avez sélectionné l'objet vers lequel faire un lien, vous revenez automatiquement à la fenêtre précédente mais celle-ci est désormais remplie en fonction de ce que vous avez coché. Il ne vous reste plus qu'à remplir éventuellement le champ «Titre» puis à valider en cliquant sur OK. Votre lien est désormais créé Les autres types de liens Nous venons d expliquer comment effectuer un lien externe, un lien vers une adresse mail et un lien interne, les 3 types de liens les plus fréquents. Mais il existe également d autres types de liens. Lien de type «Other» Ce type de lien vous servira peu, excepté si vous souhaitez faire un lien vers une ancre, c est-à-dire vers une sous partie, paragraphe, d une page. 1 1 Pour faire une ancre, il faut d abord placer votre curseur à l endroit où vous souhaitez créer une ancre. Puis, cliquez sur le pictogramme «Ancre». 51

52 2 2 Entrez un nom à votre ancre (attention sans accent ni espace car le nom que vous lui donnerez se rajoutera à la fin de l URL de la page), puis cliquez sur OK. 3 3 Ensuite, là où vous le souhaitez dans votre texte (ou dans une autre page), tapez le texte qui servira de lien vers cette ancre, sélectionnez-le, puis cliquez sur le pictogramme représentant une chaîne pour lui insérer un lien. 52

53 Dans la fenêtre qui apparait, il vous suffit de laisser «Other» sélectionné et dans le champ juste en dessous, de commencer par dièse (#) et d écrire le nom que vous aviez donné à votre ancre (ici : #nomdemonancre). Le texte doit bien être tout attaché et n oubliez surtout pas de commencer par #, car c est ce symbole qui sert à faire des ancres en HTML. Faire une ancre vers une autre page de votre site Lorsque vous souhaitez faire un lien interne avec un paragraphe d une autre page du site, la procédure diffère légèrement que lorsque vous faites un lien dans la même page Votre ancre doit être au préalable créée dans la page cible. 2- Ensuite, dans la page où vous vous trouvez, sélectionnez le texte qui servira de lien avec cette ancre, puis cliquez sur le pictogramme représentant une chaîne pour lui insérer un lien. 3 Dans la fenêtre qui apparaît, sélectionnez «eznode», puis parcourir (pictogramme représentant un petit dossier) pour rechercher la page cible de votre lien, sélectionnez-la. Dans la fenêtre qui apparaît rajouter, après le texte eznode, # suivi du nom que vous aviez choisi, (ici eznode://21182#tarifs2010), pour votre ancre, sans toutefois oublier de ne mettre ni espace ni accent. Votre lien interne est créé. 53

54 Lien de type «ezobject» Lorsque vous faites un lien «ezobject», vous faites un lien vers un autre objet du site : article, rubrique, etc Comme nous l avons vu précédemment avec le lien «ancre» d une page de votre site vers une autre, le lien «ezobject» vous permet, dans une page donnée, de faire un lien vers une autre page, mais non pas seulement vers une sous partie de page. 1 1 Pour faire le lien «ezobject», il vous suffit de surligner le texte qui fera lien et de cliquer sur le pictogramme «chaîne» pour créer le lien. 2 2 Ensuite il faut cliquer sur le pictogramme parcourir pour rechercher la page avec laquelle vous souhaitez faire un lien. 54

55 3 3 Dans la fenêtre qui apparaît il vous suffit de sélectionner l article, la rubrique, ou tout autre objet avec lequel vous souhaitez faire un lien. Enfin, il ne vous reste plus qu à cliquer sur OK. Votre lien est désormais créé. Vous auriez pu, en procédant de la même manière mais en choisissant eznode à la place de ezobjet faire un lien vers un emplacement du site au lieu de faire un lien vers un objet. La différence entre le lien eznode et le lien ezobject est que si vous faites un lien vers un objet directement et que celui-ci est placé à plusieurs endroits du site (donc à plusieurs emplacements, nœuds), le lien se fera vers l emplacement principal de l objet. Donc, si votre objet est placé par exemple dans la rubrique «Patrimoine» en placement principal puis dans la rubrique «Histoire» en emplacement secondaire, l internaute arrivera dans l emplacement principal, rubrique «Patrimoine». Autrement dit, il est plus précis de faire un lien vers un emplacement que vers un objet. A noter : si vous supprimez un nœud alors qu un lien existait vers ce nœud, le lien ne fonctionnera plus. En revanche, si l objet était placé à plusieurs endroits et que vous aviez fait un lien avec l objet (et non vers l emplacement, nœud), le lien continuera de fonctionner même si vous supprimez le nœud vers lequel le lien pointait, en effet, le lien pointera vers l emplacement principal de l objet). Lien de type «ftp» Ce type de lien est très peu utilisé, il sert à faire un lien vers un serveur ftp, par exemple un lien de type ftp://free.fr Lien de type «file» Utilisez ce lien si vous voulez faire un lien vers un fichier qui se trouve en local sur votre ordinateur par exemple (pourrait servir dans le cas d un intranet où les documents sont en partage sur un serveur local), par exemple : file://partage/document.pdf Lien de type «https» Au lieu d utiliser le lien de type «http», utilisez ce lien si la page vers laquelle vous faites un lien est une page sécurisée, en effet, toute page sécurisée commence par «https» Modifier ou supprimer un lien Modifier un lien 1 Pour modifier un lien, il vous suffit de place votre curseur sur le texte du lien (n importe où sur le lien), puis de cliquer sur le pictogramme représentant une chaîne. Vous retrouverez alors tous les paramètres du lien que vous aviez créé dans la fenêtre qui s ouvre, vous pouvez alors modifier tous les paramètres du lien, puis valider en cliquant sur OK. 55

56 2 Pour modifier votre lien, placez votre curseur sur le texte du lien (n importe où sur le lien), puis cliquez dans le Chemin en bas de l éditeur sur «link». Vous retrouverez alors tous les paramètres du lien que vous aviez créé dans la fenêtre qui s ouvre. Vous pouvez alors modifier tous les paramètres du 1 lien puis valider en cliquant sur OK Supprimer un lien Pour supprimer un lien, il vous suffit de placer votre curseur sur le texte du lien (n importe où sur le lien), puis de cliquer sur le pictogramme représentant une chaîne rompue. Votre lien est alors supprimé. A noter : le pictogramme représentant une chaîne rompue est grisé, donc inactif, lorsque votre curseur n est pas positionné sur le lien. 56

57 13 Insérer une image dans un article ou une rubrique Vous pouvez insérer dans vos articles ou vos rubriques autant d images que vous le souhaitez Aller rechercher une image pour l associer à l article ou la rubrique 1 1 Pour associer une image à un article, vous devez d abord placer votre curseur à l endroit où vous voulez voir apparaître l image, puis cliquez sur l icône représentant un arbre (Insérer / modifier une image) A B C D 2 Dans la fenêtre qui apparaît, vous avez quatre possibilités pour aller chercher votre image : A Soit utiliser le 1 er onglet «Télécharger» pour aller rechercher votre image en local, c est-àdire sur votre ordinateur, un CD, etc. Nous attirons votre attention sur le fait qu il est toujours préférable de ranger vos images dans la médiathèque, ainsi celles-ci pourront servir à tous les administrateurs. 57

58 B Soit utiliser le 2 ème onglet «Rechercher» pour effectuer une recherche dans toutes les images déjà présentes dans l outil d administration. C Soit utiliser le 3 ème onglet «Parcourir» pour feuilleter la médiathèque dans laquelle votre image aura été placée préalablement. D Soit utiliser le 4 ème onglet «Signet» au cas où la rubrique «Médiathèque» ou l un de ses sous-dossiers ferait partie de vos favoris pour pouvoir directement cliquer dessus A Télécharger une image en local : Si votre image n a pas été rangée dans la médiathèque et qu elle se trouve en local sur votre ordinateur, utilisez cet onglet pour aller la chercher. 1 Dans le champ «Nom», donnez un titre à votre image. 2 Cliquez sur le bouton «Parcourir» pour aller chercher l image. 3 Dans le menu déroulant «Emplacement» choisissez la rubrique médiathèque dans laquelle l image ira se ranger dès que vous l aurez téléchargée (le menu déroulant vous propose automatique les rubriques de la médiathèque). 4 Dans le champ «Alternative text» entrez éventuellement un texte alternatif à votre image. C est ce texte qui remplacera l image si celle-ci ne s affiche pas, notamment sur les navigateurs textes spécifiques au malvoyants. Attention, le texte alternatif n est pas obligatoire, en particulier lorsqu il s agit d images de décoration. Contrairement à ce que l on pourrait croire, il ne faut donc pas systématiquement le remplir. 5 Dans le champ «Légende» entrez éventuellement une légende à votre image, elle s affichera sous l image si vous choisissez de l afficher dans vos articles. 6 Dans le champ «Tag «vous pouvez mettre des mots clés qui vous permettront plus tard, entre autre, de retrouver votre image lors d une recherche. 58

59 B Rechercher une image : si vous souhaitez taper un mot clé pour rechercher votre image dans la médiathèque cliquez sur cet onglet Tapez un mot dans la zone de texte (par exemple le nom de l image, des mots présents dans sa légende ou dans son texte alternatif ou encore un des mots clés placés dans les «tags de l image, etc ) 2 Ensuite, cliquez sur «Rechercher». Dans la liste qui s affichera, cochez le bouton radio qui correspond à l image que vous voulez afficher dans l article ou la rubrique. Si aucune des images ne vous convient, vous pouvez effectuer une nouvelle recherche ou utiliser un autre onglet, pour aller chercher l image sur votre disque dur ou pour feuilleter directement la médiathèque par exemple. Comme vous pouvez le constater sur la capture d écran ci-dessus, «Image» est sélectionné d office, ce qui signifie que la recherche ne s effectue que dans les images. A savoir : vous pouvez prévisualiser chacune des images proposées en survolant le lien «Prévisualiser» à droite de chaque nom d image. C Parcourir la médiathèque : si vous souhaitez parcourir la médiathèque ou éventuellement l arborescence du site, pour aller chercher votre image. Cliquez sur cet onglet, cela signifie bien sûr, que vous y aviez placé votre image au préalable. 1 Cliquez sur «Médiathèque pour déployer l arborescence de la médiathèque 1 Dans l onglet «Parcourir», cliquez directement sur «Médiathèque» pour pouvoir déployer son arborescence et aller rechercher votre image. 59

60 Chemin 2 Déplacez-vous dans les rubriques en cliquant sur leur intitulé 2 Dans l arborescence de la médiathèque cliquez sur les intitulés des rubriques pour aller voir ce qu elles contiennent et pour remonter d un niveau, utilisez le chemin en cliquant sur le niveau supérieur souhaité. A savoir : Lorsqu une rubrique ne comporte aucune image, son nom est grisé. Vous voyez également en face de chaque intitulé s il s agit d une rubrique, d une image, etc Une fois que vous avez trouvé l image qui vous convient (vous pouvez les prévisualiser en survolant «Prévisualiser» à droite du nom de chaque image), cochez le bouton radio qui lui correspond. 60

61 D Aller chercher dans les signets (favoris) : si vous souhaitez aller voir vos favoris pour rechercher l image souhaitée, cliquez sur le dernier onglet «Signets». Cela peut avoir un intérêt notamment si la médiathèque ou l un de ses sous-dossiers fait partie de vos favoris, en revanche, il est rare de voir une image directement placée en favoris). 1 1 Dès que vous cliquez sur l onglet «Signets», tout ce que vous avez placé en favoris apparaît directement. Vous pouvez donc cliquer sur un des dossiers faisant partie de vos favoris. Une fois que vous aurez cliqué sur ce dossier l arborescence qui se trouve à l intérieur se déploiera. Une fois l image souhaitée trouvée, sélectionnez-là en cochant le bouton radio se trouve juste devant son intitulé. Quelle que soit la méthode employée, une fois que vous avez sélectionné votre image, vous retournez sur la première fenêtre dans laquelle vous allez devoir paramétrer les différentes propriétés de l image. 61

62 13.2 Paramétrer les propriétés d insertion d une image Après avoir sélectionné votre image, vous retournez sur la première fenêtre dans laquelle vous allez devoir paramétrer les propriétés de votre image. Ce paramétrage sert à choisir son emplacement, choisir la taille souhaitée, etc Visualiser : Dans le menu déroulant «Visualiser», vous avez la possibilité de choisir le type de vue qu aura votre image et la quantité d informations qui lui seront associées Embed : Si vous choisissez de mettre une image en vue «Embed», l image ne sera pas cliquable et ne pourra pas être visualisée en grand. Utilisez donc cette vue si vous ne souhaitez pas que l image soit cliquable. Embed in line: Ne s utilise pas pour les images mais pour les fichiers. Full : Si vous choisissez de mettre une image en vue «Full», plusieurs informations apparaîtront en plus de l image (son poids, son nom, etc ). Cette vue ne sera quasiment pas utilisée. Line : Si vous choisissez de mettre une image en vue «Line», c'est le nom de l'image qui apparaîtra sur le site en lien hypertexte, ce lien pointant vers l'image (l'internaute aura donc un clic à faire avant de voir l'image). Cette vue ne sera en général jamais utilisée. 62

63 Lightbox : Si vous choisissez de mettre une image en vue «lightbox», lorsque l'internaute cliquera sur l'image, elle s'affichera en grand et sera mise en avant (le reste du site aura alors un fond opaque noir). Cette vue ne devra être utilisée que lorsque que vous souhaitez que l image puisse être agrandie car délivrant une information spécifique. (Taille d origine). 2 2 Taille : Dans le menu déroulant, choisissez dans quelle taille vous souhaitez afficher votre image sur le site (les tailles proposées dépendent de chaque site de ce qui a été déterminé pendant la phase de conception). Les tailles sont exprimées en pixels. Généralement, la taille standard qui est utilisée est le «Medium». A noter : Dès que vous modifiez un paramètre tel que la taille, l image visible en bas à droite de la fenêtre s ajuste automatiquement pour que vous puissiez prévisualiser le résultat. 3 Aligner : Dans le champ «Aligner», choisissez l emplacement de votre photo. Elle peut être alignée à gauche, au centre ou à droite. 4 En ligne : Equivalent à embed-inline. 63

64 5 Décalage : A priori, le décalage se fait par défaut et vous n aurez pas à le modifier. 6 Limite: Vous n aurez jamais besoin de remplir cette case lorsque vous insérerez une image dans un article ou une rubrique (elle sert dans d autres cas qui seront expliqués plus loin). Une fois que avez paramétré toutes les propriétés de votre image, validez en cliquant sur OK. Si vous souhaitez annuler l insertion de l image cliquez sur annuler. A savoir : Si vous cliquez sur «Basculer vers l image embarquée», vous retournez sur la fenêtre avec les différents onglets : Télécharger, Rechercher, Parcourir, Signets. Vous pouvez alors aller rechercher une image qui remplacera celle que vous étiez en train de paramétrer. Une fois que votre image est placée dans l éditeur, vous pouvez si besoin la déplacer en cliquant dessus avec votre souris, en maintenant le clic enfoncé puis en la déplaçant jusqu à l endroit voulu. Cela ne changera pas l alignement que vous aviez défini auparavant. Si vous souhaitez changer son alignement, il faudra passer par ses propriétés pour effectuer de changement Modifier les propriétés d insertion d une image Pour modifier les propriétés d une image, deux méthodes sont possibles. 1 ère méthode : cliquez d abord sur l image (elle est alors entourée de poignées) puis sur le pictogramme représentant un arbre «Insérer / modifier une image). Vous retombez alors sur la fenêtre qui permet de gérer les propriétés de l image. Faites vos modifications puis cliquez sur OK pour valider. 2 ème méthode : Cliquez d abord sur l image (elle est entourée de poignées) puis dans le chemin en bas de l éditeur, sur le dernier terme présent. Vous retombez alors sur la fenêtre qui permet de gérer les propriétés de l image. Faites vos modifications puis cliquez sur OK pour valider. 1 2 Lorsque vos images sont déjà associées à l article ou la rubrique, vous les verrez apparaître tout en bas dans la fenêtre sous «images associées» après avoir cliqué sur 64

65 Il peut être utile lorsque vous travaillez sur un long article qui contient beaucoup d images de les voir toutes en un clin d œil pour savoir si telle ou telle image a déjà été placée dans l article. Attention, vous ne les verrez toutes apparaître que lorsque l article aura été validé. A savoir : Si vous cliquez directement sur une de ces images associées à l article ou la rubrique, vous allez la replacer quelque part dans l article, la rubrique. 65

66 14 Insérer un fichier dans un article ou une rubrique Vous pouvez insérer dans vos articles ou rubriques autant de fichiers que vous le souhaitez Aller rechercher un fichier pour l associer à l article ou la rubrique. 1 Pour associer un fichier à un article, vous devez d abord placer votre curseur à l endroit où vous voulez voir apparaître le fichier, puis cliquez sur l icône représentant un trombone «Insérer / modifier un objet» : 1 Dans la fenêtre qui apparait, vous avez quatre possibilités pour aller chercher votre fichier : A B C D A Utiliser le 1 er onglet «Télécharger» pour aller chercher votre fichier en local, c est-à-dire sur votre ordinateur ou sur un CD, par exemple. Cela signifie donc que vous n avez pas rangé votre fichier au préalable dans la médiathèque. 66

67 B Utiliser le 2 ème onglet «Rechercher» pour effectuer une recherche dans tous les fichiers déjà présents dans l outil d administration. C Utiliser le 3 ème onglet «Parcourir» pour feuilleter la médiathèque dans laquelle votre fichier aura été placé au préalable. D Utiliser 4 ème onglet «Signets» au cas où la rubrique «Médiathèque» ou l un de ses sousdossiers ferait partie de vos favoris pour pouvoir directement cliquer dessus. Nous allons expliquer chaque possibilité l une après l autre. A Télécharger un fichier en local : Si votre fichier n a pas été rangé dans la médiathèque et qu il se trouve en local sur votre ordinateur, utilisez cet onglet pour aller le chercher Dans le champs «Nom», donnez un titre à votre fichier. 2 Cliquez sur le bouton «Parcourir» 3 Dans le menu déroulant «Emplacement» choisissez la rubrique de la médiathèque dans laquelle le fichier ira se ranger dès que vous l aurez téléchargé. 4 Dans le champ «Description» entrez une description facultative à votre fichier. Cliquez sur télécharger un fichier local. B Rechercher un fichier : si vous souhaitez rechercher votre fichier dans la médiathèque cliquez sur cet onglet. 67

68 1 2 1 Tapez un mot clé dans la zone de texte (le nom du fichier ou un mot présent dans sa description ou encore un des mots clés placés dans les «tags» du fichier, etc ) Comme vous pouvez le constater, «Tous» est sélectionné par défaut, ce qui signifie que la recherche s effectue dans tous les types d objets, mais si vous souhaitez restreindre vos recherches aux fichiers uniquement, sélectionnez-le dans la liste (pour arriver directement à votre fichier, placez-vous en début de liste et tapez sur la lettre «F» de votre clavier, plusieurs fois jusqu'à arriver à «Fichier». 2 Ensuite, cliquez sur «Rechercher». 3 Dans la liste des résultats qui s affichent cochez le bouton radio qui correspond au fichier que vous voulez insérer dans votre article ou rubrique. 4 Si aucun fichier ne convient, vous pouvez effectuer une nouvelle recherche ou utiliser un autre onglet (pour aller chercher le fichier en local, par exemple, ou pour feuilleter directement la médiathèque). C Parcourir la médiathèque : Si vous souhaitez parcourir la médiathèque, ou éventuellement l arborescence du site pour rechercher votre fichier, cliquez sur l onglet «Parcourir». Bien entendu, cela signifie que vous avez déjà placé votre fichier dans la médiathèque. 68

69 1 1 Cliquez sur «Médiathèque» pour déployer l arborescence de la médiathèque. Chemin 2 2 Déplacez-vous dans les rubriques en cliquant sur son arborescence. Une fois que vous avez trouvé le fichier qui vous convient, cochez le bouton radio qui lui correspond. Pour remonter d un niveau dans l arborescence, utilisez le chemin en cliquant sur le niveau supérieur souhaité. A savoir : Lorsqu une rubrique ne comporte aucun fichier (ou aucun objet), son nom n est pas souligné, il n est donc pas cliquable. En face de l intitulé, vous voyez s il s agit d un fichier, d une rubrique, etc D Aller voir dans les Signets (Favoris) : Si vous souhaitez aller dans vos favoris pour rechercher le fichier souhaité, cliquez sur l onglet «Signets». 69

70 Dès lors que vous cliquez sur l onglet «Signets», tout ce que vous avez placé en favori apparaît directement. Une fois que vous avez trouvé le fichier souhaité, sélectionnez-le en cochant le bouton radio qui se trouve devant son intitulé. Quelle que soit la méthode employée, une fois votre fichier sélectionné, vous retournerez sur la première fenêtre dans laquelle vous allez devoir paramétrer les différentes propriétés de votre fichier Paramétrer les propriétés d insertion d un fichier Après avoir sélectionné votre fichier, vous vous retrouvez sur la première fenêtre dans laquelle vous devrez paramétrer les propriétés de votre fichier. Nous allons expliquer un à un ces différents paramètres. 1 1 Visualiser : Dans le menu déroulant «Visualiser», choisissez le type de vue associé à votre fichier. La vue «Lightbox» ne devra jamais être utilisé puisqu elle est uniquement réservée aux images. La plupart du temps, la vue que vous utiliserez est la vue «Embed». Embed : Utilisez cette vue si vous souhaitez que le nom du fichier apparaisse à la ligne. Un nouveau paragraphe sera donc automatiquement créé. Le nom du fichier sera automatiquement précédé d un pictogramme représentant le format du fichier (pdf, word, powerpoint, excel, etc ) Le paragraphe suivant ne se mettra pas nécessairement à la ligne, il habillera le fichier, mais si vous souhaitez que le paragraphe suivant se mette à la ligne, il vous faudra affecter le style «Passer à la ligne» au paragraphe suivant. 70

71 A noter : lorsque vous intégrez un fichier sur le site, son nom est automatiquement suivi entre parenthèses du format (pdf, word, etc ) et de son poids. Embed inline : Cette vue est à utiliser si vous souhaitez mettre le fichier au milieu d un texte. Si vous souhaitez mettre un fichier en vue «Embed inline», le plus simple est d abord de cocher la case «En ligne» car cela aura pour effet de sélectionner automatiquement «Embed inline» dans le menu «Visualiser» et de faire disparaître les cases qui ne concernent pas l insertion de fichiers. A savoir : Lorsque vous utilisez cette vue, le fichier n est pas précédé d un pictogramme représentant son format. En revanche, et c est le cas pour toutes les vues, il est suivi du type de format et de son poids entre parenthèses. Full : Si vous choisissez de mettre un fichier en vue «Full», plusieurs informations apparaîtront en plus du fichier. Line : Si vous choisissez de mettre un fichier en vue «Line», le nom de celui-ci sera cliquable et lorsque l internaute cliquera dessus, il arrivera sur une page où il pourra alors télécharger le fichier. 71

72 14.3 Modifier les paramètres d insertion d un fichier Pour modifier les propriétés d un fichier, c est-à-dire changer son alignement ou sa vue par exemple, deux méthodes sont possibles. 1 ère méthode : Cliquez n importe où sur le nom du fichier, il est alors entièrement sélectionné. Puis dans le chemin en bas de l éditeur, cliquez sur le dernier terme présent. Vous retombez sur la fenêtre qui permet de gérer les propriétés du fichier. Faites vos modifications, puis cliquez sur OK pour valider. 2 ème méthode : Cliquez d abord n importe où sur le nom du fichier, il est alors complètement sélectionné. Puis, cliquez sur le pictogramme représentant un trombone «Insérer / modifier un objet». Vous retombez alors sur la fenêtre qui permet de gérer les propriétés du fichier. Faites vos modifications, puis cliquez sur OK pour valider. 1 2 A savoir : lorsque des fichiers sont déjà associés à l article / la rubrique, vous les verrez apparaître tout en vas dans la fenêtre sous «Fichiers associés» après avoir cliqué sur le pictogramme «Insérer / modifier un objet» Cela peut être utile lorsque vous travaillez sur un long article qui comporte déjà beaucoup de fichiers. Vous pouvez ainsi savoir d emblée si tel ou tel fichier a été placé dans l article. 72

73 15 La Médiathèque 15.1 Gestion des images, des fichiers, des vidéos, des animations flash, etc La médiathèque vous permet de stocker et de classer toutes les images, les fichiers, les vidéos, les animations et tout autre document utilisé sur votre site, quel que soit sa destination (article, rubrique, etc ) Pour accéder à la médiathèque, cliquez sur l onglet «Médiathèque» dans l outil d administration du site. Vous pouvez à l intérieur de cette médiathèque créer des rubriques pour organiser vos documents, comme par exemple une rubrique «Fichiers» dans laquelle seraient rangés tous vos fichiers, une rubrique image dans laquelle seraient rangées toutes vos images et une rubrique multimédia dans laquelle seraient rangés les documents multimédias tels que les vidéos ou animations flash. Vous pouvez aussi créer des rubriques thématiques propres à votre site. A noter : Les rubriques de premier niveau sont déjà créées dans la médiathèque, mais vous avez ensuite totale liberté pour créer à l intérieur des sous-rubriques voire des sous-sousrubriques. Toutefois, il est préférable d éviter de créer trop de sous-rubriques en profondeur, sinon au moment d aller chercher un document vous aurez de nombreux clics à faire pour y accéder. 73

74 15.2 Créer une nouvelle rubrique dans la médiathèque Pour créer une nouvelle rubrique dans la médiathèque, placez-vous d abord sur la rubrique dans laquelle vous souhaitez placer votre nouvelle rubrique. Cliquez bien sur le nom de la rubrique et non sur l icône qui la précède. Le nom de la rubrique sélectionnée se met alors en surbrillance orange. Ensuite, tout en bas de page, dans le menu déroulant sélectionnez «Rubrique», puis cliquez sur le bouton «Créer ici». Dans la page qui s ouvre, entrez uniquement un nom à votre rubrique, puis cliquez tout en bas de la page sur «Envoyer à la publication». Vous n avez pas besoin de remplir les autres champs. Votre nouvelle rubrique étant créée, vous allez pouvoir y déposer des documents de tous types (fichiers, images, vidéos ). 74

75 15.3 Supprimer une rubrique de la médiathèque Pour supprimer une rubrique de la médiathèque, il faut appliquer la même méthode que pour n importe qu elle contenu. Dès que vous voulez supprimer un type d objet (article, rubrique ) un message vous invite à confirmer ou infirmer cette suppression. N oubliez donc pas après avoir cliqué sur «Supprimer» de valider la suppression en cliquant sur OK. Si au contraire vous vous rendez compte que vous supprimez la mauvaise rubrique, cliquez sur «Annuler» pour annuler la suppression. A noter : Si vous supprimez une rubrique qui contient des sous-éléments (images, fichiers pdf ) l outil vous l indique au moment de la confirmation de la suppression, car si vous supprimez une rubrique qui contient des sous-éléments, ils seront supprimés en même temps que la rubrique qui les contient. Veillez donc bien à vérifier au moment de la suppression que vous ne supprimez pas par erreur une rubrique qui contient des éléments dont vous pourriez avoir besoin Insérer une nouvelle image dans la médiathèque Pour insérer une nouvelle image, vous devez vous placer sur la rubrique dans laquelle vous souhaitez placer votre image (cliquez sur le nom de la rubrique et non sur le nom qui la précède). La rubrique sélectionnée se met alors en surbrillance orange. 75

76 Attention : vous ne pourrez pas intégrer d images en CMJN. Les photos que vous intégrerez devront impérativement être en RVB (Rouge, Vert, Bleu). Les formats des images peuvent être jpg, gif, png. Ensuite, tout en bas au centre de la page, dans le menu déroulant, sélectionnez «Image», puis cliquez sur le bouton «Créer ici». Dans la page qui s ouvre :

77 1 Donnez un nom à votre image. Le nom de l image est obligatoire et important, c est grâce à lui que vous identifierez vos images. 2 Cliquez sur «Parcourir» pour aller chercher votre image sur votre ordinateur. 3 Entrez, si nécessaire un texte alternatif à l image. Ce champ ne doit être rempli que si l image comporte des informations. S il s agit d une image décorative, ne le remplissez pas. 4 Entrez, si nécessaire un copyright à l image. Vous pourrez ensuite l afficher sous l image dans l article. 5 Entrez éventuellement une légende. 6 Entrez éventuellement des tags, c est-à-dire des mots clés à votre image. Ils sont facultatifs, vous n aurez pas besoin de toujours les renseigner. Pour valider la création de votre image, cliquez sur «Envoyer à la publication». Votre image est désormais intégrée à la médiathèque, vous allez donc pouvoir l associer à vos articles, rubriques, etc 15.5 Insérer un fichier dans la médiathèque Pour insérer un nouveau fichier dans la médiathèque, placez-vous d abord sur la rubrique dans laquelle vous souhaitez placer votre fichier (cliquez sur le nom de la rubrique et non pas sur l icône qui la précède). 1 La rubrique sélectionnée se met alors en surbrillance orange. 1 77

78 2 Ensuite, en bas, dans le menu déroulant, sélectionnez «Fichier» puis cliquez sur le bouton «Créer ici». 2 Dans la page qui s ouvre :

79 1 Entrez un nom à votre fichier. Ce nom est obligatoire, il vous permettra d identifier et de retrouver votre fichier. 2 Allez chercher votre fichier en cliquant sur le bouton «Parcourir». 3 Eventuellement, entrez une description à votre fichier. Celle-ci est facultative et ne s affichera que si vous choisissez de placer ensuite votre fichier en vue «Full» dans votre article ou votre rubrique Si vous souhaitez mettre en place une base documentaire, la date du publication peut devenir utile. C est ici qu il faut la saisir. Penser à cocher la case. 5 Enfin, entrez éventuellement des tags, c est-à-dire des mots clés, à votre fichier. Les tags sont facultatifs, la plupart du temps vous n aurez pas besoin de les renseigner. Pour valider la création de votre fichier, cliquez sur «Envoyer à la publication». Votre fichier est désormais intégré à la médiathèque, vous allez donc pouvoir l associer à votre article, rubrique 79

80 15.6 Insérer une vidéo dans une rubrique ou article Il vous est possible d agrémenter votre site de vidéos. Un seul format de vidéo est accepté : Vidéo FLV (flash) de préférence Nous vous recommandons de toujours convertir vos vidéos en.flv (format flash) avant de les intégrer sur le site. Ce format est optimisé pour le web. C est avec ce format que vous aurez la possibilité, via l outil d administration de joindre des sous-titres à la vidéo, une audio description et d y ajouter une transcription textuelle, tous éléments impératifs pour que votre vidéo soit accessible. Voici un site qui vous permet de convertir gratuitement vos vidéos en.flv : Nous allons vous expliquer comment placer votre vidéo sous une rubrique pour qu elle apparaisse directement sur le site. Nous expliquerons également comment insérer une vidéo qui provient de You Tube ou Daily Motion, c est-à-dire une vidéo externe. Dans la liste déroulante en bas de page, choisissez «Vidéo FLV» puis cliquez sur «Créer ici». 80

81 1 2 3 Dans la page qui apparaît : 1 entrez un titre à votre vidéo, il apparaîtra sur le site. 2 texte d introduction pour présenter la vidéo. 3 Allez chercher votre vidéo sur votre disque dur ou DVD en cliquant sur «Parcourir». 81

82 «Dimension». Ici, vous donnez les dimensions souhaitées à votre vidéo. 5 «Sous-titres». Pour rendre votre vidéo accessible, il vous faut y ajouter des sous-titres. Pour ce faire, cliquez sur le bouton «Parcourir» pour aller rechercher les sous-titres, au format XML uniquement. Les sous-titres s afficheront ensuite sur la vidéo. 6 «Audio». De la même manière, vous devez également fournir une audio description à votre vidéo pour qu elle soit accessible. Pour ce faire, cliquez sur le bouton «Parcourir» pour aller chercher l audio description de la vidéo, au format MP3 idéalement. 7 «Image de prévisualisation». Si vous souhaitez ajouter une image de prévisualisation à votre vidéo, cliquez sur «Parcourir» pour aller la rechercher sur votre disque dur. C est cette image qui s affichera en image de présentation avant que l internaute ne clique sur lecture, elle s affichera également dans la playlist. Enfin, pour validez cliquez sur «Envoyer à la publication». Votre vidéo est insérée dans la médiathèque Insérer une vidéo externe de type You Tube ou Daily Motion Si vous souhaitez insérer sur le site une vidéo issue d un autre site tels que You Tube ou Daily Motion, il vous faut d abord récupérer le code HTML de la vidéo sur le site en question. Insérer une vidéo externe au sein d un article ou d une rubrique en code HTML Si vous souhaitez insérer directement votre vidéo externe dans un article, il vous suffit de créer un article (ou d en modifier un déjà existant), puis de placer votre curseur dans l éditeur et de cliquer sur le pictogramme «Insérer un texte littéral». 82

83 Dans la fenêtre qui apparaît, choisissez «html» dans le menu déroulant. Apparait alors une zone de texte bleu dans l éditeur dans laquelle vous n avez plus qu à coller votre HTML. Enfin, validez votre article ou rubrique. La vidéo externe apparait alors dans cet article ou rubrique. 83

84 15.7 Insérer un fichier audio / podcast dans la médiathèque, dans une rubrique ou article L outil d administration vous permet de mettre des fichiers MP3 (ou podcast) sur le site. Comme pour la vidéo, vous pouvez soit les placer directement sous une rubrique, le fichier audio apparaîtra alors directement sur le site comme n importe quel objet, soit les associer à vos articles ou rubriques en utilisant les relations d objets. Nous allons d abord vous expliquer comment placer votre fichier MP3 dans la médiathèque, sachant qu il faut effectuer la même opération pour placer le fichier MP3 directement sous une rubrique, il suffit alors de se placer sur la rubrique au lieu de se placer dans la médiathèque. Pour placer votre fichier audio dans la médiathèque, cliquez sur l onglet «Médiathèque» puis placez-vous dans la rubrique «Multimédia» (ou n importe quelle autre rubrique de votre choix) en cliquant sur son titre dans le menu de gauche. Le titre se met alors en surbrillance orange). Dans la liste déroulante en bas de page, choisissez «Audio» puis cliquez sur «Créer ici» Dans la page qui apparaît : 5 1 entrez un titre à votre fichier audio, il apparaîtra sur le site. 2 Vous pouvez, si vous le souhaitez, entrer une image de présentation. 3 Indiquez éventuellement une introduction. Elle est facultative mais si vous en mettez une, elle s affichera sur le site). 84

85 4 «Fichier audio», allez rechercher votre fichier audio sur votre disque dur, DVD ou autre en cliquant sur «Parcourir». 5 Pour des raisons d accessibilité, il vous faut remplir le champ «Transcription textuelle» pour permettre aux personnes malentendantes ou sourdes d accéder aux contenus présents dans le fichier son. Comme pour tout objet, vous pouvez autoriser les commentaires, afficher l auteur, la date de publication et de dépublication et les tags. Il ne vous reste plus qu à valider en cliquant sur «Envoyer à la publication». Votre fichier audio est désormais inséré dans la médiathèque Insérer une playlist sur le site (playlist audio ou vidéo) Nous venons de voir que vous pouvez placer des vidéos ou des fichiers sons dans la médiathèque, puis les associer à vos articles ou directement les placer sous des rubriques. Nous allons désormais voir que vous pouvez également créer des playlists de plusieurs vidéos ou de plusieurs fichiers sons et les placer directement sous des rubriques pour qu elles apparaissent directement ou les associer à des articles ou rubriques. Exemple de playlist vidéo Exemple de playlist audio Créer une playlist de vidéos Pour créer une playlist de vidéos, il vous faut d abord importer des vidéos. Pour importer des vidéos dans la médiathèque ou dans une rubrique, reportez-vous au chapitre 9.6. Une fois que toutes vos vidéos au format FLV ont été intégrées dans l outil d administration, placez-vous dans l arborescence, à l endroit où vous souhaitez créer votre playlist. L emplacement se met alors en surbrillance orange. Puis, tout en bas dans le menu déroulant choisissez «Playlist» et cliquez sur «Créer ici». 85

86 Dans la page qui apparait, insérez un nom à votre playlist. 2 Si vous le souhaitez, ajoutez une image de présentation. 3 Si vous le souhaitez, indiquez une introduction. 4 Dans la zone «Fichier», c est ici que vous allez rechercher toutes vos vidéos. Cliquez sur «Ajouter des objets» pour aller chercher une ou plusieurs vidéos en même temps, l intérêt d une playlist étant de proposer plusieurs vidéos dans la liste. Pour sélectionner plusieurs vidéos en même temps, il faut qu elles soient toutes dans le même dossier. Si vous prenez les vidéos une par une, cliquez sur «Ajouter des objets» autant de fois que nécessaire. 5 Largeur : indiquez ici la largeur souhaitée de la playlist, exprimée en pixels. Une valeur est déjà exprimée par défaut. 6 Hauteur totale du lecteur : indiquez ici la hauteur totale souhaitée pour votre playlist (cette hauteur inclut la hauteur de la vidée, de la barre de lecture et de la liste de toutes les vidéos disponibles. La taille est exprimée en pixels. 86

87 Hauteur vidéo : indiquez ici la hauteur de la vidéo souhaitée, elle est exprimée en pixels. 8 Taille de la barre de lecture : indiquez la taille de la barre de lecture (sa hauteur). 9 Taille de la playlist : indiquez la taille souhaitée de la playlist. Dans le cas où elle est située en bas il s agit de sa hauteur, et lorsqu elle est située à droite, il s agit de sa largeur. 10 Couleur du volume et du survol : Vous pouvez choisir la couleur qu aura le volume ainsi que le survol des éléments de la liste. Cette couleur est à indiquer en hexadécimal, exemple : blanc : FFFFFF ; Noir : ; Rouge : FF0000 ; Bleu : 3300FF ; Vert : 00CC Couleur de fond : indiquez la couleur de fond souhaitée. 12 Couleur du lecteur et de la police : indiquez la couleur souhaitée pour la police et le lecteur. 13 Position de la barre de lecture : Choisissez ici la position souhaitée pour la barre de lecture ; bottom : en bas ; over : par-dessus ; none : aucun. 14 Position de la playlist : Choisissez la position souhaitée de la playlist ; none : aucune ; bottom : en bas ; right : à droite ; over : par-dessus. 15 Skin : 4 skins, apparences de la playlist, sont disponibles. Choisissez celle que vous désirez : Vidéo, Simple, Nacht, Slim. 16 Lecture aléatoire : si vous souhaitez que la lecture soit aléatoire, choisissez «True», sinon, choisissez «False». 17 Lecture continue : Si vous souhaitez que la lecture se fasse en boucle, choisissez «True». 87

88 16 Créer une galerie d images 16.1 Créer une galerie, diaporama, e-cards et fonds d écrans L outil d administration vous permet de créer simplement des galeries d images, affichant les images en miniature cliquables et permettant de lancer un diaporama de ces images. Ces galeries s avèrent très pratiques lorsque vous souhaitez mettre en ligne un grand nombre de photographies, pour faire un retour sur une manifestation, par exemple. Dans l onglet «Contenus», placez-vous à l endroit où vous souhaitez voir apparaître la galerie d images en cliquant sur le titre de l emplacement dans l arborescence. Puis, dans la liste déroulante de bas de page, sélectionnez «Galerie» et cliquez sur le bouton «Créer ici» Vous pouvez créer ici une galerie sous forme de diaporama, d e-cards ou de fonds d écrans, suivant le type que vous aurez sélectionné. 2 Donnez un titre à votre galerie. 3 Vous pouvez mettre un image de têtière et un image de présentation propre à la galerie 4 Texte d introduction pour présenter la galerie. 88

89 5 6 5 Descriptif complet de la galerie. Ce texte s affiche au-dessus du diaporama. 6 Il vous reste maintenant à associer des images à votre galerie. Pour cela, vous devez lui associer des images déjà présentes dans la médiathèque. Cliquez sur «Ajouter des objets» et allez sélectionner les images souhaitées. Pour valider, cliquer sur «Envoyer à la publication». Votre galerie d images est créée. 89

90 17 Fonctionnalités avancées : Menu gauche de l administration 17.1 Les différentes fonctionnalités du menu gauche et du menu contextuel On appelle menu contextuel le menu qui s ouvre lorsque, dans l arborescence, vous effectuez un clic gauche sur l icône d un objet. Ce menu contextuel permet d avoir accès directement à un certain nombre d actions à effectuer sur l objet en question, vous permettant ainsi de gagner du temps. Nous allons ici détailler les différents raccourcis qui sont proposés par ce menu contextuel Voir Le raccourci «Voir» équivaut à un clic sur le nom de l objet afin de l afficher dans la page centrale de l outil d administration, il apparaît alors en surbrillance orange dans l arborescence Editer en Lorsque vous survolez l option «Editer en» apparaît un autre sous-menu. Vous devez alors choisir «Français» afin d ouvrir l objet pour pouvoir le modifier. Si votre est disponible dans une autre langue, cliquez «Autre langue». Anglais par exemple. Et traduire depuis la version Fr pour pouvoir comparer le 2 versions Copier Cette fonctionnalité vous permet de copier l objet vers l emplacement de votre choix. Attention : si votre objet comporte des sous-éléments, ceux-ci ne seront pas copiés, à moins que vous ne sélectionniez «Copier la sous-arborescence». Attention : Si vous copiez un objet et que vous modifiez ultérieurement l objet source, la copie ne sera pas modifiée. La copie est totalement indépendante de la source. 90

91 Déplacer Cela vous permet de déplacer un objet vers l endroit de votre choix. Une fois que vous avez cliqué sur «Déplacer», dans la colonne centrale s ouvre alors une interface vous permettant de naviguer dans l arborescence du site afin de choisir l emplacement où vous voulez déplacer votre objet. Pour naviguer simplement dans l arborescence, il vous suffit de cliquer sur le nom d une rubrique pour afficher ses sous-éléments et, à l inverse de cliquer sur la flèche en haut à gauche pour remonter à la rubrique parente. Pour sélectionner l emplacement désiré, il vous suffit de cocher le bouton radio au-dessus du nom de l emplacement, puis de cliquer sur le bouton «Sélectionner». Votre objet est alors automatiquement placé, ainsi que ses éventuels sous-éléments vers l emplacement que vous avez choisi. A savoir : Pour déplacer un objet, vous pouvez également cliquer sur le nom de votre objet dans l arborescence. Il se met alors en surbrillance orange. Ses propriétés s affichent alors dans la colonne centrale où il faudra cliquer sur le bouton «Déplacer» Supprimer Cette option vous permet de supprimer un objet, voire plusieurs si l objet supprimé contient des sous-éléments. Il est possible de supprimer un objet depuis l arborescence des contenus en cliquant sur son nom qui se met alors en surbrillance orange. Puis cliquez sur le bouton «Supprimer» au centre de la page. A savoir : l objet ne se supprime pas immédiatement, vous devez d abord confirmer la suppression. 91

92 A noter : Si vous supprimez une rubrique qui contient des sous-éléments, l outil vous l indiquera au moment de la confirmation de la suppression, car si vous supprimez une rubrique qui contient des sous-éléments ceux-ci seront supprimés en même temps que la rubrique. Veillez donc à bien vérifier au moment de la suppression que vous ne supprimez pas erreur une rubrique qui contient des éléments dont vous pourriez avoir besoin Avancé Dans l'onglet «Avancé» vous trouverez : «Échanger avec un autre nœud» vous permet d'échanger la position de cet objet avec un autre objet (cette fonctionnalité est très pratique) «Cacher/rendre visible» vous permet soit de cacher votre objet sur le site web si celui-ci est visible, soit de le montrer si celui-ci est caché. «Voir l index vous permet d afficher, dans la page centrale, la liste des sous-éléments de votre objet, ainsi que leurs sous-éléments de premier niveau. «Objets associés par relations inverse pour la sous-arborescence» : Sert à visualiser les autres objets qui appelle celui que l on visualise. «Gérer les versions» : Chaque modification (publication, brouillon) crée une version. Cette commande permet de lister les différentes versions existantes, et revenir à une version ultérieur si besoin. «Gérer les alias d URL» : Grâce à cet outil, vous avez la possibilité de renommer une url si celle est trop longue. (ex : Réduire «Réduire» vous permet d'afficher ou de cacher les sous-éléments de cet objet dans l'arborescence de gauche. L objet apparaît alors en fond grisé Ajouter à mes signets «Ajouter à mes signets» vous permet de créer un lien direct vers cet objet dans la rubrique «Mes signets», à droite Ajouter à mes notifications En cliquant sur «Ajouter à mes notifications», vous serez informé dès que cet objet est modifié Créer ici En cliquant sur ce bouton, la liste de tous les objets disponible apparait. En sélectionnant le bon type, vous créerez un contenu de ce type à l'emplacement désigné. 92

93 Attention : tous les types de contenus apparaissent indépendamment du contrôle des droits. Il est donc possible d'aboutir à une page d'erreur si le contenu choisi ne peut être créé à l'endroit désigné Open Office En cliquant sur une des sous-options, vous pouvez importer ou exporter un article dans un fichier OpenOffice.org qui peut être édité, ou importé dans un autre site. Pour utiliser cette fonctionnalité, vous n'avez pas besoin qu'openoffice.org soit installé sur votre PC. Vous n'en avez besoin que si vous souhaitez éditer le fichier. Il n'est par contre pas possible d'utiliser l'export au format Word ou Excel, qui nécessitent une configuration spécifique du serveur, qui le rendrait moins sécurisé et moins performant. Lors de l'import d'un fichier OpenOffice.org, les formatages suivant sont supportés: Texte normal Portions de texte en gras ou en italique. Les liens. Les «custom tags» Les listes et les listes numérotées sur un niveau Les titres (éléments du plan) Les tableaux (sans fusion de cellules) Les images embarquées: L'alignement et la taille sont exportés Les légendes ne sont pas exportées Export au format OpenOffice.org Pour exporter un article au format OpenOffice.org, il suffit de cliquer sur l'icone d'un article, puis sur l'option «Exporter au format OO». Un fichier OpenOffice.org est téléchargé. Les informations sauvegardées sont le titre, l'introduction, et le corps de l'article. L'image de présentation et les autres attributs ne sont pas exportés. Les images incluses dans l'introduction et le corps sont exportées et pourront être réimportées. Si vous éditez le fichier exporté sous OpenOffice.org, prenez soin de ne pas modifier la séparation en section. Import au format OpenOffice.org Pour importer un article à partir d'un fichier OpenOffice.org, il suffit de cliquer sur l'icône d'une rubrique, puis sur l'option «Importer un fichier OO». La page suivante apparait : Cliquez sur le bouton «Parcourir», sélectionnez votre fichier, puis cliquez sur «Charger le fichier». Un article est automatiquement créé dans la rubrique sélectionnée. Attention : Les images qui peuvent se trouver dans le corps du texte sont automatiquement importées. On les trouve dans l'onglet «Médiathèque», dans la rubrique «Images issues des imports». S il existe un workflow pour les éléments de cette rubrique, l'import échouera. A savoir: si le fichier importé est issu d'un export, le contenu du fichier sera mis dans les champs «Intro» et «Corps de l'article» comme il l'était dans l'article exporté. Sinon, la totalité de l'article sera dans le champ «Intro» 93

94 Import d'un fichier exporté après modification sous OpenOffice.org Si vous exportez un article, que vous le modifiez sous OpenOffice.org, et que vous souhaitez réimporter ce fichier pour que les modifications faites sous le traitement de texte soient prises en compte sur le site, comment faire? Pour remplacer un article existant par le contenu d'un fichier OpenOffice.org, il suffit de cliquer sur l'icône d'une rubrique, puis sur l'option «Remplacer un fichier OO». La marche à suivre est alors celle décrite pour le premier import d'un fichier (cf. ci-dessus). Attention: si vous éditez le fichier exporté sous OpenOffice.org, prenez soin de ne pas modifier la séparation en sections si vous voulez que les champs soient correctement remplis après le nouvel import Multi téléchargement En cliquant sur «Ajouter plusieurs fichiers», vous avez la possibilité d intégrer plusieurs objets (fichiers ou images) en même temps. Attention, le nom des objets à importer sur votre disque dur sera le nom repris dans le champ titre de l objet fichier ou image. Il faut donc que celui-ci soit parlant et explicite (ex : mairie.jpg, ou publication.pdf). De plus, cela signifie que si vous souhaitez placer des légendes, ou les textes alternatifs vous devrez rééditer les objets un à un après le téléchargement général afin de renseigner ces champs. Les documents (images ou fichiers) seront placés dans la même rubrique Masquer un objet Il est possible, plutôt que d effacer un menu que l on ne désire plus voir s afficher, de simplement en masquer l affichage sur les pages publiques du site. Lorsqu'un objet est caché, il est en surveillance grise. Pour masquer un menu et tout ce qu il contient, il suffit de cliquer sur l icône qui précède le nom de l objet et dans le menu contextuel qui s affiche, de cliquer sur Avancé > Cacher / rendre visible. Une 2 ème manière de le faire est de cliquer sur le titre de l objet (il se met alors en surbrillance orange) et sur la nouvelle page qui s affiche de cliquer dans le cadre Emplacements sur le lien [Masquer]. Attention : l affichage des Emplacements doit être activé, sinon vous ne le verrez pas (en haut de page, le bouton Emplacements doit donc être bleu, et non gris. Si c est le cas, cliquez sur le bouton pour l activer) 94

95 18 Fonctionnalités avancées : Zone centrale 18.1 Les différentes fonctionnalités du menu central Dans l onglet «Contenus» ou l onglet «Utilisateurs», un menu fait de boutons est présent en haut de la colonne centrale. Lorsque ceux-ci sont sur un fond blanc, ils ne sont pas affichés dans le menu central. Pour qu ils s affichent, cliquez dessus, ils passeront au bleu et apparaîtront plus bas Prévisualisation Lorsque vous activez le bouton en cliquant dessus, vous avez un aperçu de l objet sélectionné dans l arborescence. Vous pouvez «Modifier» l objet, que ce soit un article, une image ou autre. Vous pouvez aussi le «Déplacer» en navigant dans l arborescence, ou bien le «Supprimer». Vous pouvez aussi en choisir la langue dans le menu déroulant Détails Vous avez dans le tableau «Détails», le nom du créateur de l objet, la date à laquelle il a été créé, sa section, ainsi que le nombre de traductions et de versions ( brouillons ). 95

96 Traductions Cette fonctionnalité vous permet de choisir d autres langues. Vous pouvez l éditer à l aide du crayon à droite Emplacements Il vous permet de trouver l emplacement exact de votre objet (le fil d Ariane). Vous pouvez aussi «Masquer» votre objet ce qui le rendra invisible sur le site tout en restant présent dans l outil d administration. Il apparaîtra grisé. Mais surtout, il est possible d ajouter des emplacements à votre objet, si un même article devait, par exemple, apparaître à différents endroits de votre site. En cliquant sur «Ajouter des emplacements», sélectionnez dans l arborescence l endroit où vous souhaitez qu il se trouve Ajouter un emplacement Vous avez la possibilité d ajouter des emplacements à un objet (article, rubrique ) afin que celui-ci apparaisse à différents endroits de votre site web. Un même article peut apparaître dans deux rubriques distinctes. Attention : Si vous ajoutez un emplacement à un objet contenant des sous-éléments, cet ajout d emplacement ne vaudra pas pour les sous-éléments (par exemple une rubrique apparaîtra bien à l emplacement supplémentaire attribué, mais pas ses articles. Si vous souhaitez que les articles apparaissent également aux deux endroits, il faudra donc également faire la manipulation pour chacun d entre eux. 1 Cliquez tout d abord dans l arborescence à gauche, sur le nom de votre objet afin d afficher ses propriétés dans la colonne centrale. Le nom de l objet se met alors en surbrillance orange. 2 pour chaque contenu, vous trouverez plusieurs onglets, dont «Emplacement» : Si l onglet «Emplacement» n est pas bleuté, cliquez dessus afin d afficher les emplacements de votre objet dans la page centrale. 96