145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

Transcription

1 Guide de l utilisateur CMS 1 Navigation dans le CMS Menu principal Modules tableau Modules formulaire Navigation dans le site Web en mode édition Utilisation de l éditeur de texte HTML Fonctionnalités générales Plein écran Copier-coller Nettoyage du code Clic droit (menu contextuel) Mode HTML Aide Texte et mise en page Liens hypertextes Photos Téléverser (upload) Redimensionner Insérer et modifier Fichiers téléchargeables Intégration (YouTube, Google Maps et Facebook) Médias (vidéo et audio) Tableau, styles et modèles Quelques modules Nouvelles Album photos Utilisateurs Exemples de modules possibles A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

2 1 Navigation dans le CMS Pour accéder au système de gestion de contenu de votre site Web, ou en anglais content management system (CMS), il vous suffit d aller sur votre site Web et d ajouter «/cms» à votre domaine (ex. : Cela vous mènera à la page d authentification. Entrez y le nom d utilisateur et le mot de passe qui vous ont été fournis. Vous pouvez revenir au site Web en cliquant sur le lien sous la boîte d authentification. Une fois correctement identifié, vous serez redirigé vers le menu principal. Notez qu il est important de quitter le CMS avec le bouton Quitter en haut à droite, une fois vos activités de modification complétées. C est une question de sécurité physique sur votre poste de travail. 1.1 Menu principal Le menu principal variera d un site Web à l autre selon les modules utilisés par le site. Les modules sont des tableaux servant à la gestion (ajout, modification, suppression) des différentes données du site Web. Vous verrez en détail les modules dans les sections 1.2, 1. 3 et 3. Pour la navigation dans le menu principal, il vous suffit de choisir le module dans lequel vous voulez faire des changements ou encore d utiliser la fonction Modification des pages, qui vous permettra de modifier les contenus des différentes pages de votre site Web en naviguant sur celui ci (voir la section 1.4 pour plus de détails). 145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

3 Notez la présence du bouton modifications complétées. Quitter en haut à droite; il est important de l utiliser une fois vos 1.2 Modules tableau Tous les modules du CMS ont la même interface de navigation. Les colonnes du tableau et les possibilités de fonctionnalités varient selon les besoinss de chaque module. Observez la disposition des éléments dans l image suivante. En premier lieu, remarquez, en haut à droite, le bouton de retour au menu principal. Encore en haut à droite, se trouve le bouton pour quitter le CMS n importe quellee interface sans problème.. Vous pouvez le faire de Ensuite, sous cette ligne bleue, à droite, se trouve un sous menu, qui contient quelques liens que l on trouve aussi dans le menu principal. Ce sous menu varie en fonction du module en cours. Au dessumodule. En dessous du titre, à droite, se trouvent des outils du tableau de données, se trouve le titre du de tri et de recherche. Notez que ce n est pas tous les 3

4 modules qui ont ces outils. Pour le filtre de tri, il suffit de sélectionner une valeur dans la liste déroulante pour que le tableau n affiche plus que des lignes ayant cette propriété. Dans l image d exemple, on voit le filtre de tri avec la colonne «Type» du tableau. Pour ce qui est de la recherche, il suffit d entrer une série de caractères et de cliquer sur les jumelles. La recherche sera lancée dans la ou les colonnes spécifiées devant la zone de texte de la recherche. Dans l image d exemple, la recherche se fera dans la colonne «Titre» (Titre :). Le tableau présente chacune des lignes d enregistrement contenues dans la base de données. Les colonnes avec des titres représentent les champs du formulaire, mais ce ne sont pas nécessairement tous les champs du formulaire que l on voit dans le tableau. Avec le filtre, la recherche et la pagination dans le bas du tableau, vous pouvez naviguer dans celui ci et trouver l enregistrement pour lequel vous voulez faire des modifications. Les colonnes peuvent être de différents types : texte, date, image, «Oui/Non», «Mémo». Pour les «Oui/Non» qui sont des cases à cocher dans le formulaire, le «Oui» (cocher) est représenté par et le «Non» (décocher), par. Ce sont les mêmes icônes pour les colonnes «Mémo», qui sont des éditeurs de texte HTML; le crochet indique qu on a entré du contenu dans l éditeur. Pour modifier un enregistrement (une ligne), il suffit de cliquer sur le crayon au bout à droite de la ligne. Cela mènera au formulaire de modification rempli avec les données de l enregistrement sélectionné (pour plus de détails sur le formulaire de modification, voir la section 1.3). Pour supprimer un enregistrement (une ligne), il suffit de cliquer sur le au bout à droite de la ligne désirée et de confirmer. Notez que cet enregistrement ne pourra plus être récupéré. Pour ajouter un enregistrement, il suffit de cliquer sur Ajouter en bas à gauche du tableau. Cela vous mènera au formulaire d ajout, qui sera vide et prêt à être rempli (pour plus de détails sur le formulaire d ajout, voir la section 1.3). Pour changer l ordre de tri des enregistrements, cliquez sur Ordre en bas à gauche du tableau. Cela mènera à un tableau avec les titres des enregistrements. Il suffit de les ordonner selon vos désirs en les sélectionnant avec la souris et en les déplaçant avec les flèches vertes, vers le haut ou le bas. Une fois vos manipulations complétées, enregistrer avec Enregistrer en bas. Notez que vous pouvez sélectionner plusieurs lignes à la fois et les déplacer en bloc. Vous pouvez également annuler avec Annuler pour revenir en arrière. Lorsqu il y a plusieurs enregistrements dans le tableau, vous aurez peut être besoin de la pagination pour pouvoir tous les consulter. La pagination se trouve dans le pied de page du tableau. La partie de gauche indique le nombre d enregistrements visibles sur le total. La partie de droite 4

5 permet de naviguer entre les différentes pages du tableau. 1.3 Modules formulaire Voici un exemple de formulaire en mode modification. Dans ce cas, c est un module de nouvelles. Notez que le formulaire d ajout est identique, mais vide d information. Dans le formulaire, on trouve plusieurs types de champs. Voici quelques précisions pour quelques uns d entre eux. 5

6 Le champ Date est accompagné d un calendrier de sélection. Vous pouvez ainsi sélectionner la date voulue dans le calendrier. Vous pouvez également écrire manuellement la date, mais important de le faire dans le bon format, soit année mois jour (ex. : ). il est très Pour les champs Photo et Fichier, vous aurez une zone de texte avec un bouton Parcourir... Il vous suffit de cliquer sur ce bouton; la fenêtre qui apparaîtra vous permettra de parcourir votre ordinateur pour sélectionner l image ou le fichier que vous désirez lier à cet enregistrement. Si vous êtes en mode modification et qu il y avait déjà une image ou un fichier d inséré, alors vous aurez la possibilité de le retirer avec la case à cocher Effacer l image (ou le fichier). Vous avez également la possibilité de le remplacer avec le bouton Parcourir Pour les champs d édition de texte HTML, un outil très complet et simple d utilisation vous permet toutes les possibilités d ajout et de modification des contenus Web. Pour plus de détails sur cet outil, consultez la section 2. Une fois vos modifications ou ajouts complétés, enregistrez avec Enregistrer en bas. Vous pouvez également annuler avec Annuler pour revenir au tableau des enregistrements. 1.4 Navigation dans le site Web en mode édition Avec le lien du menu principal (ou des sous menus) Modification des pages, vous serez redirigé vers le site Web en mode modification. Vous pouvez alors modifier le contenu de toutes vos pages en naviguant normalement dans votre site Web. 6

7 En tout temps, vous pouvez revenir au CMS avec le bouton au dessus de l éditeur de texte HTML. Retourner au menu principal, qui est Une fois vos modifications effectuées, sauvegardez les avec le bouton directement en bas de l éditeur de texte HTML, Enregistrer. Si vous n enregistrez pas, aucune modification ne sera sauvegardée. Donc, pour annuler les modifications d une page non sauvegardée, changez simplement de page. Vous pouvez visualiser vos modifications sans qu elles ne soient sauvegardées avec le bouton du bas Prévisionner. Une autre fenêtre s ouvrira sur la page en cours, avec les modifications qui viennent d être faites en mode normal (non édition). Cela permet de voir le résultat avec les styles du site Web appliqués. Si votre navigateur vous demande une confirmation pour ouvrir la fenêtre, sélectionnez Toujours autoriser pour ce site. 2 Utilisation de l éditeur de texte HTML 2.1 Fonctionnalités générales Voici un aperçu des boutons des fonctionnalités de l éditeur de texte HTML. Dans la présente section, nous décrirons certaines de ses fonctionnalités les plus utiles. Notez que les autres sont toutes fonctionnelles; nous vous invitons à placer votre curseur sur le bouton ou à utiliser l aide pour avoir de l information sur ces boutons et les essayer Plein écran Il est beaucoup plus facile et agréable de travailler dans l éditeur de textee HTML en mode plein écran. Utilisez le bouton (ou la touche F12) mode plein écran, réalisez vos travaux. Pour sauvegarder, par exemple), cliquez de nouveau sur le bouton pour passer en mode plein écran. Une fois en revenir à l interface standard (pour pouvoir (ou appuyez sur F12). Copier-coller La fonction copier coller d un document Microsoft Word, par exemple, est une opération que l on a souvent à faire pour la publication en ligne d information. Il faut savoir que l éditeur de texte HTML présente l information de façon semblable à un document Word, mais génère en fait du code HTML, qui est le code permettant d afficher du texte dans les navigateurs internet. Lorsque l on fait un copier coller d un document de type Word ou d une page HTML de n importe quel site 7

8 Web, des balises (tags) de code HTML seront également copiées. Cela permet d avoir les mêmes styles de police d écriture. Par contre, dans notre outil, pour l uniformité du site Web, vous n avez pas à vous soucier de la mise en forme du texte. Un style par défaut sera appliqué à tous les contenus. Donc, ces balises de stylisation sont indésirables et peuvent nuire à l affichage (la page pourrait simplement ne pas apparaître). Pour éviter cela, faites toujours le copier coller avec le bouton Coller du texte simple. Il vous suffit de copier d abord le contenu désiré de n importe quel document, puis de revenir au CMS, de placer le curseur dans l éditeur de texte à l endroit désiré, puis de cliquer sur le bouton. Par la suite, vérifiez la mise en page : il est possible que des sauts de ligne non désirés aient apparu. Supprimez les tout simplement et ajoutez de nouveau les gras et italiques désirés. Travailler en mode plein écran vous facilitera la tâche Nettoyage du code Tel qu expliqué dans la section «2.1.2 Copier coller», il se peut qu à la suite d un copier coller mal réalisé ou sans le bouton Coller du texte simple, vous vous retrouviez avec des balises de stylisation indésirables. Vous pourrez alors utiliser le bouton Nettoyer le code et ainsi supprimer toutes les balises HTML. Attention, car cette opération s appliquera à toute la page et non seulement à vos derniers copier coller. Vous risquez donc d éliminer les mises en page réalisées précédemment avec l éditeur Clic droit (menu contextuel) Dans l éditeur, vous pouvez utiliser un clic droit sur tous les objets pour modifier leurs propriétés et leur appliquer des styles particuliers, que ce soit une image, une vidéo, du texte, etc. Le menu vous présente des raccourcis des fonctionnalités de l éditeur, mais également un bouton Propriétés pour aller plus loin dans les modifications de l objet sélectionné. Vous pouvez aussi faire un clic gauche sur les balises HTML présentées dans le bas de l éditeur (ex. : Table). Voyez la section 2.8 sur les styles pour plus d information Mode HTML Vous avez en tout temps la possibilité de consulter le code HTML de vos contenus avec le bouton HTML dans le bas de l éditeur. Il suffit de cliquer sur Normal par la suite pour revenir en mode design Aide Avec le bouton Aide, vous trouverez une brève description des boutons de l éditeur de texte. Notez que les descriptions sont disponibles en anglais seulement et que les boutons ne présentent pas tous une description. 8

9 2.2 Texte et mise en page Tout d abord, il faut savoir que, dans notre outil, pour l uniformité du site Web, vous n avez pas à vous soucier de la mise en forme du texte. Un style par défaut est appliqué à tous les contenus. Vous pouvez quand même styliser vos affichages à votre guise; le site vous appartient, après tout. D ailleurs, nous vous recommandons d utiliser le Gras, l Italique et le Souligné comme il vous plaît, afin de mettre en évidence des sous titres ou de mettre l accent sur certains éléments. Ces fonctionnalités s utilisent exactement comme dans n importe quel éditeur de texte standard (voir l image ci dessous). Toujours sur la deuxième ligne de boutons de l éditeur de texte HTML (ci dessus), vous trouverez une panoplie de fonctionnalités que l on trouve également dans tout éditeur de texte. Utilisez les à votre guise pour créer votre mise en page, que ce soit pour modifier les couleurs, l alignement, les listes à puces, les retraits, les exposants, les majuscules, etc. Le bouton de la gomme à effacer vous aidera à supprimer ces mises en page, le cas échéant : sélectionnez d abord votre texte, puis cliquez sur la gomme à effacer. La dernière ligne de boutons de l éditeur de texte HTML (voir l image ci dessus) contient des listes déroulantes et vous permettra également de modifier la mise en page, en changeant la police et la taille du texte. N oubliez pas que la police est appliquée par défaut sur tout le site Web. Si vous la modifiez, cela enlèvera l uniformité du site, et le résultat sera peu professionnel. La liste déroulante avec le libellé Paragraphe vous permettra d appliquer des balises HTML prédéfinies telles que h1, h2, etc. Cette fonction peut être utile pour créer des sous titres avec Entête 1, ce qui créera une balise h1, par exemple. 2.3 Liens hypertextes Pour créer un lien hypertexte, sélectionnez le texte désiré, puis cliquez sur le bouton Insérer un lien. Ce bouton se trouve sur la troisième ligne de boutons, servant à l insertion d objets, dont les liens hypertextes. Une fois la fenêtre apparue, entrez dans le champ URL le lien hypertexte vers lequel vous voulez diriger l utilisateur. Vous pouvez créer 9

10 toute sorte de liens, que ce soit mailto pour les courriels ou pour les pages Web; la liste déroulante Type vous aidera à le spécifier. Notez qu elle sera sélectionnée automatiquement selon l entrée dans le champ URL. IMPORTANT : Il faut préfixer le domaine par dans le champ URL, lorsque vous créez des liens vers un site Web externe au vôtre. Dans ce cas, utilisez la liste déroulante Cible en choisissant Nouvelle fenêtre, cela ouvrira une nouvelle fenêtre du navigateur Web et ainsi les utilisateurs demeureront tout de même sur votre site Web. Si vous faites un lien à l interne sur votre site Web, pour pouvez simplement indiquer la page à partir de la racine du domaine de vote site Web (la barre oblique indique la racine, soit ex. : /?page=2 ou /nouvelle.aspx). Dans ce cas, vous n avez pas à spécifier la cible, puisque vous voulez demeurer dans la même fenêtre. Pour tester vos liens avant la sauvegarde, cliquez dans le bas de l éditeur sur Prévisionner, puis cliquez sur le lien; vous verrez alors le résultat. Cliquez ensuite sur Normal dans le bas de l éditeur pour revenir en mode modification. Pour modifier un lien, placez votre curseur sur le texte du lien (il n est pas nécessaire de le sélectionner), puis cliquez sur Insérer un lien. Pour retirer un lien, placez de nouveau votre curseur, puis cliquez sur la chaîne brisée Enlever un lien. Notez que, dans la fenêtre d insertion de liens hypertextes, une multitude d options de configuration vous permettra de personnaliser ce lien, mais rien n est obligatoire ou nécessaire pour le bon fonctionnement d un lien. 2.4 Photos Dans la présente section, vous apprendrez à manipuler vos photos pour les insérer dans vos contenus. Ci après, vous verrez l interface d insertion de photos présentée après un clic sur le bouton Insérer une image. Le bouton Insérer une image (Galerie) vous permettra quant à lui de visualiser et d insérer rapidement les images, mais sans la possibilité de les téléverser (upload), de les redimensionner et de les modifier. Les sous sections suivantes présentent plus en détail l interface d insertion d images. 10

11 2.4.1 Téléverser (upload) Pour envoyer une image de votre ordinateur vers le serveur Web et ainsi pouvoir l insérer dans vos contenus, utilisez le bouton Téléchargement de la partie du bas à droite (voir l image cidessus). Une fenêtre d exploration de votre poste s ouvrira, et vous pourrez alors sélectionner l image désirée. Vos photos doivent avoir une taille maximale de 1,17 Mo (soit 1200 Ko). Pour les redimensionner sur votre poste, nous vous conseillons d utiliser le logiciel Microsoft Office Picture Manager. Pour l ouvrir, faite un clic droit sur votre photo dans Windows, faites un clic gauche sur Ouvrir avec et sélectionnez Microsoft Office Picture Manager. Dans le menu du haut du logiciel, cliquez sur Image, puis sélectionnez Redimensionner... Diminuez le pourcentage, puis faites OK jusqu à ce que l image soit de taille inférieure à 1200 Ko. Lorsque vous sélectionnez une image de bonne dimension dans l explorateur de votre poste, cliquez sur Ouvrir et l image sera envoyée sur votre site Web. Le téléversement peut prendre 11

12 quelques secondes ou minutes, selon la vitesse de votre connexion et la taille de l image. Ensuite, l image apparaît dans la colonne de gauche avec son nom de fichier Redimensionner Dans la section sur le téléversement, il a été expliqué que vous pouvez redimensionner vos photos sur votre poste pour qu elles ne soient pas trop volumineuses à envoyer. Une fois les photos envoyées, elles auront une taille maximale de 750 px de largeur, ce qui est une grosse photo pour une page Web. Vous avez alors le choix entre deux types de redimension : 1. Vous pouvez redimensionner l image au niveau du HTML seulement, ainsi elle apparaîtra selon vos dimensions désirées. Par contre, il faut faire attention, car l image sera envoyée au visiteur de votre site Web selon sa dimension originale sur le serveur. Donc, une photo de 1200 Ko peut prendre quelques secondes à s afficher sur un site Web même si elle s affiche en très petit. Pour réaliser ce type de redimension, utilisez, dans la section du bas à gauche, les champs Largeur et Hauteur, qui représentent la dimension de l image en pixels. Ce mode est utile dans le cas d une petite redimension, qui aura peu d incidence sur la taille de l image. 2. Recommandé : Pour une redimension complète de l image et de sa taille, utilisez le bouton en haut à droite Vignette auto. Cela vous permettra de créer une nouvelle image avec votre taille spécifiée. La nouvelle image apparaîtra dans la colonne de gauche avec le même nom que l ancienne, mais avec le préfixe t. Ainsi, l image sera plus petite à l affichage, mais également à l envoi au visiteur de votre site, ce qui améliorera grandement la vitesse de navigation sur votre site Web Insérer et modifier Pour insérer une image, il suffit simplement de la sélectionner dans la colonne de gauche; une prévisualisation apparaîtra alors à droite. Puis, cliquez sur Insérer, en bas à droite. Avant l insertion, vous pouvez configurer l insertion de l image, par exemple, en lui attribuant un Alignement. Cela placera la photo dans le corps d un texte selon l alignement indiqué, soit à gauche, à droite ou au centre. Avec cet alignement, vous pouvez spécifier le nombre de pixels d espacement entre le texte et l image avec les champs Espacement, soit Horizontal et Vertical (ex. : 10). Vous pouvez aussi ajouter un encadré autour de votre photo avec la propriété Taille des bordures, qui indique la taille en pixels, et Border color, qui indique la couleur. Par défaut, la taille doit être à 0. Vous pouvez également indiquer le Texte alternatif et la Description de l image, qui apparaîtront si le navigateur ne peut afficher l image ou lorsque l utilisateur placera son curseur sur l image. Cela aide également à l indexation par les moteurs de recherche (ex. : Photo du chalet Gaspésie). 12

13 De plus, il est possible de modifier vos photos, un peu comme dans Paint de Windows, directement dans cette interface avec le bouton en haut à droite Image Editor. Finalement, vous pouvez toujours revenir à cette interface après l insertion en faisant un clic droit sur l image puis en sélectionnant Propriétés (voir «2.1.4 Clic droit (menu contextuel)»). 2.5 Fichiers téléchargeables Vous pouvez également insérer des fichiers de type PDF, DOC, XLS, etc. dans vos contenus que le visiteur pourra télécharger. Pour cela, utilisez le bouton Insérer un fichier téléchargeable. Vous remarquerez que l interface ressemble grandement à celle d insertion d images de la section «2.4 Photos». Encore une fois, pour envoyer vos fichiers sur le serveur, utilisez le bouton Téléchargement. Cette fois ci, la taille maximale des documents est de 9,77 Mo. Une fois le fichier téléchargé sur le serveur, sélectionnez le document désiré dans la colonne de gauche et utilisez le champ Titre pour indiquer le texte sur lequel il y aura le lien vers le fichier. Finalement, cliquez sur le bouton Insérer, cela insérera le lien dans le contenu où était placé le curseur. 2.6 Intégration (YouTube, Google Maps et Facebook) Avec le bouton Embed a YouTube video, vous pouvez insérer des contenus d intégration d autres sites Web de type I frame (image intra), non seulement des vidéos YouTube, mais également des cartes Google Maps ou des boutons J aime de Facebook. Il vous suffit de copier coller le code I frame récupéré sur le site Web de l élément désiré dans l interface ouverte par le bouton. Voici comment récupérer ces codes selon les trois plug in (modules d extension) les plus populaires : YouTube Allez à la page de la vidéo YouTube que vous désirez intégrer dans votre page Web. Sous la vidéo, cliquez sur Partager, puis sur Intégrer, et copiez le code qui débute par <iframe. Collez le dans l interface du bouton. Google Maps Dans la page de la carte Google Maps que vous désirez intégrer à votre site Web, cliquez sur la chaîne en haut à droite au dessus de la carte. Une petite fenêtre apparaîtra. Vous pouvez copier directement le code de la deuxième ligne qui commence par <iframe ou cliquer sur le lien Personnaliser et prévisualiser la carte intégrée. Nous vous recommandons cette dernière option, qui permet de voir le résultat final. Vous pouvez ainsi ajuster les dimensions, mais également le zoom et les styles de la carte. Collez ensuite le code dans l interface du bouton. Facebook Allez à la page box. Entrez l URL de votre site Facebook; ce doit être une page Facebook et non un profil personnel (ex. : Acadien du Qu%C3%A9bec/ ). 13

14 Configurez le plug in selon vos goûts, puis cliquez sur le bouton Get Code. Copiez ensuite le deuxième code qui débute par <iframe et collez le dans l interface du bouton. Autres Vous trouverez ce genre de code I frame dans plusieurs sites, par exemple un plug in de météo sur le site Web de MétéoMédia ( 2.7 Médias (vidéo et audio) Comme dans le cas des images et des fichiers téléchargeables, vous pouvez insérer du contenu média tel que des vidéos (.avi,.mpeg) ou des fichiers audio (.mp3,.wma). Utilisez pour cela le bouton Média. Encore une fois, l interface ressemble grandement à celle d insertion d images de la section «2.4 Photos». Pour envoyer vos fichiers sur le serveur, utilisez le bouton Téléchargement. Cette fois ci, la taille maximale des documents est de 9,77 Mo. Une fois le fichier téléchargé sur le serveur, sélectionnez le dans la colonne de gauche, puis cliquez sur le bouton Insérer, cela insérera le lecteur média dans le contenu où était placé le curseur. 2.8 Tableau, styles et modèles Tableau Il est très pratique pour la mise en page de créer des tableaux. Pour ce faire, cliquez sur le bouton Insérer/Modifier un tableau, et sélectionnez les cellules voulues pour votre tableau. Vous pouvez également utiliser le lien dans la petite fenêtre ouverte par ce bouton, l Assistant tableau, pour créer votre tableau avec plus de propriétés. Une fois le tableau inséré, vous pouvez revenir à l interface des propriétés du tableau en faisant un clic droit lorsque le tableau est sélectionné, puis en cliquant sur Propriétés. Vous pouvez également faire un clic gauche sur la balise Table située en bas de l éditeur de texte, si votre curseur est à l intérieur du tableau. Comme propriétés du tableau dans les onglets Tableau et Général de l interface, vous pouvez indiquer l espacement entre le texte des cellules et les bordures avec le champ Cell padding. Vous pouvez également indiquer la largeur du tableau en pixels (faites attention de ne pas dépasser la zone de contenu de votre site Web). Vous pouvez aussi centrer le tableau avec l alignement et personnaliser toutes les couleurs de fond ou de bordures du tableau. Dans l onglet Constructeur de style, vous pouvez aller encore plus loin dans la personnalisation de votre tableau en colorant indépendamment chaque bordure, par exemple. La troisième ligne de boutons des fonctionnalités de l éditeur de texte HTML vous permettra de manipuler facilement votre tableau. Vous pouvez par exemple créer des colonnes de texte ou des tableaux de prix. 14

15 Styles Pour créer des styles avancés sur du texte, utilisez le clic gauche sur les balises en bas de l éditeur, telles que <p> ou <span>. Pour créer une balise span (étendue) sur du texte, sélectionnez le texte désiré, cliquez sur la liste déroulante Style, puis sélectionnez Non réglé. Dans le menu ouvert par le clic gauche sur la balise Span dans le bas de l éditeur, utilisez Styles ou Propriétés pour pleinement personnaliser la présentation du texte. Modèles Vous pouvez également créer des modèles HTML que vous pourrez facilement intégrer dans vos contenus par la suite. Avec le bouton Modèles, vous pouvez envoyer des pages HTML (.html ou.htm) que vous aurez créées avec votre éditeur HTML préféré tel que Dreamweaver ou Front Page. Vous pourrez par la suite insérer ces contenus autant de fois que vous le voulez. On utilise entre autres ce procédé pour créer des exemples de tableaux de tarification préconçus. Pour l instant, cette opération n est pas fonctionnelle en Internet Explorer 9. Nous vous conseillons donc d utiliser Mozilla Firefox pour profiter de cette fonctionnalité. Une prochaine mise à jour la rendra possible en Internet Explorer 9. 3 Quelques modules 3.1 Nouvelles Avec le module Nouvelles, vous pouvez ajouter, modifier ou supprimer les nouvelles qui apparaissent sur votre site Web. Pour l utilisation de l interface, référez vous aux sections 1.2 et 1.3 sur les modules. Dans ce module, les nouvelles inactives demeurent dans la base de données, mais ne s affichent plus sur le site Web. La description courte s affiche dans la page de présentation de toutes les nouvelles, mais pas la description détaillée. Les champs Titre et Description courte sont obligatoires. L utilisateur pourra voir la version pleinee grandeur de la photo en cliquant dessus dans la page de détails de la nouvelle. 3.2 Album photos Le module Album photos permet de gérer les photos des différents albums. Les photos inactives demeurent dans la base de données, mais ne s affichent plus sur le site Web. Le champ Titre n est pas obligatoire. Vous pouvez insérer autant de photos que vous le désirez. Les photos insérées dans ce formulaire seront redimensionnées sur le serveur avant d être envoyées au visiteur de votre site Web, ce qui optimise la vitesse d affichage de votre site Web. Pour plus d information sur l utilisation de l interface, référez vous aux sections 1.2 et 1.3 sur les modules. 15

16 3.3 Utilisateurs Vous avez la possibilité, avec le module Utilisateurs, de gérerr (ajouter, modifier ou supprimer) les comptes d utilisateurs qui peuvent se connecter au CMS. Vous pouvez entrer le nom complet de la personne, son nom d utilisateur et son mot de passe (ces deux derniers sont utilisés pour se connecter dans l interface de connexion; voir la section 1). Vous pouvez également paramétrer les permissions de chacun des différents utilisateurs. Un utilisateur peut avoir seulement accès à l album photos, par exemple. En mode modification, le mot de passe n apparaît pas dans le champ, ne le remplissez pas si vous désirez conserver le même. Entrez le nouveau et sauvegardez le pour le changer. Attention : Votre nom d utilisateur et votre mot de passe ne doivent pas contenir d apostrophes ou de caractères spéciaux. 3.4 Exemples de modules possibles Spectacles, Projets de construction, Avis travaux en cours, Bières (ou produits), Tâches, Fichiers, Visuel, Pages, etc. Les modules dépendent de votre réalité professionnellee et de vos besoins. Contactez nous pour plus d information au 16