Formation à l administration de votre site Internet

Transcription

1 Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3 Arborescence...3 Page web...3 Publier un lien vers un site Internet, une adresse mail...5 Publier un lien vers pdf...5 Publier une image...6 Déterminer l alignement de la photo par rapport au texte...6 Listes des pages à utiliser...7 Pages web spéciales...7 Les modules web...8 Diaporama flash...8 Actus...8 Photothèque...9 Autres > Intégrer une vidéo...9 Autres > Intégrer une brochure...11 Pour toute question, n hésitez surtout pas à contacter notre support technique : hotline@b2f-concept.com et Tel :

2 Introduction Vous êtes utilisateur d'un outil de gestion de site Internet dynamique, développé par B2F-Concept. Cet outil permet à un utilisateur non expérimenté de gérer avec une interface conviviale un site Internet. En effet, la technologie de gestion de site s'appuie sur des mécanismes simples d'identification, d'authentification et d'habilitation qui permettent, une fois identifié, à un utilisateur habilité d'effectuer des "tâches" de gestion(modification, création, suppression,...) d'un ou plusieurs "espaces" Internet à l'intérieur d'un site. Cette documentation a pour objectif de vous aider à appréhender les fonctionnalités avancées de cette technologie, en fonction de vos habilitations. Connexion à l administration L adresse de votre administration : (en attendant la mise en ligne finale, vous devez faire vos mises à jour sur le site de développement Votre site est donc visible en développement à cette adresse provisoire Vous venez d ouvrir la page de connexion à l administration de votre site. A la 1 ère demande de connexion, inscrivez les codes d accès suivants : acces_client Afw5OAg (lettre O majuscule) Arrivé sur cette page, entrez votre nom d utilisateur et votre mot de passe : Login : webmaster1 Mot de passe : drumettaz Login : webmaster2 Mot de passe : drumettaz 2

3 Gestion de contenu Arborescence Vous allez ici pouvoir modifier le titre, le nom des rubriques, et le titre et le nombre des sousrubriques de votre site. - La colonne «titre» vous permet de modifier les libellés de chaque rubrique et sous-rubrique. - Répertoire ne vous sert pas, vous ne devez pas l utiliser. - Lien de page vous permet de mettre une page en ligne avec un menu - Lien externe vous permet de mettre un lien externe au clic sur un menu. A éviter, mais si vous l utilisez, bien penser à cocher la case «Ouvrir dans une nouvelle fenêtre». - Les flèches noires permettent de modifier l ordre des rubriques. Vous ne pouvez pas créer un nouveau menu (le graphisme déterminé ensemble ne le permet pas) donc ne pas cliquer sur le bouton du haut. En revanche, vous pouvez créer autant de sous-rubriques que vous souhaitez à 7 menus. Pour créer un nouveau sous-menu à la partie «Société», cliquez sur l icône situé en bout de sa ligne. Une fois une sous-rubrique créée, il faudra : - Lui donner un nom - Rattacher une page précédemment créée pour ce menu. Pour cela, cliquez sur le picto «répertoire» et double-cliquez sur la page à rattacher à ce menu. - Insérer une image sur votre ordinateur. Attention elle doit être au format 96x96 px - Cocher la case «menu validé» et cliquez sur l icône pour valider. Page web Vous allez ici pouvoir modifier des pages web et de leurs contenus. Vous retrouvez également la liste de toutes les pages du site internet. Pour créer une nouvelle page, cliquez sur le lien en haut à droite. ATTENTION! Ne pas cliquer sur l icône «croix rouge» qui supprimera sans sauvegarde votre page. Pour modifier une page Web, cliquez sur l icône «crayon» en bout de ligne Vous entrez donc dans une de vos pages. Cliquez sur «Nouvelle Version / Version en ligne (2e onglet à droite), cliquez sur la langue «Français»pour voir le rendu de votre page. Les 1ers champs du haut sont à saisir pour chacune des pages, afin d en optimiser leur référencement. 3

4 Titre Internet de la page : c est le titre qui s affiche en haut de votre navigateur Internet. Important pour le référencement, les mots saisis doivent correspondre au contenu de la page. - Balise H1 : ne vous sert pas - Balise mots clés: il s agit ici des mots clés associés à la page. Ils doivent être eux aussi en accord avec le contenu de votre page. Vous n avez pas à la saisir, elle se saisit automatiquement. - Balise description : il s agit ici de la description du site ou/et de la page en question. Vous n avez pas à la saisir, elle se saisit automatiquement. Dessous apparaît l éditeur qui vous permet de voir le rendu actuel de la page sur votre site. Description des principaux icônes Gras, Italique, Souligné Texte aligné à gauche, au centre, droite ou justifié Coller un texte depuis Internet ou un Coller un texte depuis un document word (attention à bien cocher la case «supprimer les styles») pour éviter tout problème de mise en page Ajouter une image Ajouter une numérotation ou une puce Permet de modifier le type de puce, et d augmenter ou réduire l alinéa Ajouter un tableau Ajouter un lien vers un site Internet ou une adresse mail Supprimer ce lien Les menus déroulant «style» et «balise» permettent de mettre en forme graphiquement votre contenu. Pour appliquer un style, surligner le mot ou l expression de votre choix. Une fois surligné, cliquez sur le style à appliquer. 4

5 ATTENTION! Préconisations d usage avant utilisation - Les photos doivent être mises à la bonne taille et doivent être compressées avant de les insérer sur la page web. - Il faut bien respecter le style en fonction de la charte graphique du site. Les styles ont déjà été créés pour vous à l avance. Nous vous déconseillons d agrandir/réduire la taille de la police en passant par le menu «taille». Préférez utilisez les «styles» et «balise». Publier un lien vers un site Internet, une adresse mail. Surlignez votre texte de la façon suivante : et cliquez sur l icône Si il s agit d un site Internet, cliquez sur «URL» et indiquez l adresse : Ex : Si il s agit d une adresse mail, cliquez sur « » et indiquer votre adresse Ex : y.fournier@b2f-concept.com Cliquez sur «ok» pour valider votre opération. Pour effectuer un lien vers un site Internet, nous vous conseillons de l ouvrir dans une nouvelle page, pour éviter que l internaute ne «quitte» votre site. Pour cela, allez dans l onglet «Destination» de la fenêtre du dessus (à côté de «Informations sur le lien»), et renseignez l option «dans une nouvelle fenêtre». Publier un lien vers pdf Surlignez votre texte de la façon suivante : et cliquez sur l icône. Au lieu de cliquer sur «Url» comme pour un lien, cliquez sur le bouton «Parcourir le serveur». Suivez enfin les mêmes étapes que pour l insertion d une image. Bien penser à ouvrir votre pdf dans une nouvelle fenêtre car il s agit d un lien externe. 5

6 Publier une image Suivez les étapes Une fois après avoir cliqué sur «Parcourir» (étape 1), cherchez sur votre ordinateur l emplacement de la photo à appliquer à votre page (Ex : Mes Documents). Sélectionnez-la en cliquant dessus. Cliquez sur «Ouvrir» (étape 3) puis sur «Upload» (4). Validez l opération en cliquant enfin sur Ok. Déterminer l alignement de la photo par rapport au texte Cliquez sur la photo et ensuite sur l icône Cliquez sur le bouton «Parcourir» pour insérez votre image (voir page précédente). Vous pouvez ajouter une bordure en indiquant un chiffre dans la case «Bordure» Ex : 5, 10, 20. Cliquez enfin sur «Alignement» et choisissez celui de votre choix. Validez l opération en cliquant sur «Ok» Une fois que vous pensez avoir fait toutes les opérations nécessaires à la création ou à la modification de votre page, cliquez sur pour terminer et valider la publication en cliquant sur le bouton en bas. 6

7 Listes des pages à utiliser Hormis celles dont le nom parle de lui-même, voici les autres pages à administrer : - index : texte sur la page d accueil «Bienvenue à Drumettaz Clarafond» - brochures : page brochure, en lien dans la colonne de droite. - mentions-legales : pages mentions légales dans le pied de page. Pages web spéciales Vous avez la possibilité via ce menu de rajouter un petit texte de présentation de vos sous-rubriques. Pour cela, cliquez en haut à droite sur Vous devez nommer toutes ces pages de la sorte : contenu-nom DE LA PAGE. Ex pour la page «Présentation de la commune», elle se nomme «presentation», il a donc été crée la page «contenu-presentation». En cliquant sur le bouton «Créer une page», un onglet «Français» verra le jour en haut. Cliquez dessus, renseigner un titre et votre contenu dans l éditeur de la page. Valider par la bouton «Modifier la page» en bas. 7

8 Les modules web Diaporama flash C est ici qu il est possible de modifier ou d ajouter des photos du diaporama images. Ils sont au nombre de 7 : Accueil (celui de la page d accueil et des autres pages qui ne sont pas dans l arborescence), 1 pour chaque rubrique de niveau 1. Il est également possible de modifier l ordre d apparition des photos et le titre de chacune. Cliquez sur Insérer (en haut à droite), vous vous trouvez alors dans l onglet. Le champ «référence» ne vous sert pas sur le site, mais vous permet de vous rappeler de quelle image il s agit en administration. Via le bouton «parcourir» vous devez aller récupérer la photo en question sur votre ordinateur. Attention l image doit être compressée et mise à la bonne taille avant d être téléchargée. La taille à respecter est la suivante : 1000px x 350px Utile! Pour redimensionner vos images, un outil simple et sympa, Le champ «lien popup» ne vous sert pas, ni les positions des slogans. En revenant sur la page d accueil du diaporama flash vous pouvez définir l ordre d apparition de votre photo en cliquant sur les flèches. Vous pourrez également modifier ou effacer vos photos en cliquant sur les onglets. Actus La mise à jour de ces 2 modules correspond - aux 4 blocs de la page d accueil, qui se trouvent en bas des autres pages intérieures - au bloc défilant en haut de la colonne droite En administration, il se trouve dans Modules WEB > Actus. Pour publier une nouvelle actualité, cliquez sur Insérer une nouvelle news en haut à droite. Vous pouvez ici rentrer un titre, une image (format carré), une date de début et de fin de parution, choisir d activer la news et/ou de la supprimer si la validité est dépassée. 8

9 Attention l image doit être compressée et mise à la bonne taille avant d être téléchargée. La taille à respecter est la suivante : * Actualités et agenda : 150px x 80px * La mairie vous informe : 80px x 80px Cliquez sur puis allez sur l onglet pour rédiger votre news. La partie news pleine page correspond à l article complet qui sera affiché sur une page web. Si elle n est pas saisie, le bouton «Lire la suite» n apparaîtra pas sur le site. Attention de bien cliquer sur compte et remontent bien sur le site. Photothèque La photothèque est composée de planches photos. Vous devez autant que vous souhaitez, via le lien en haut à droite pour que les modifications soient prises en Une fois dans une planche, vous devez renseigner un titre et une description à cette dernière. Ces éléments remonteront sur le site. Dessous, vous devrez enfin ajouter toutes les photos de votre choix, et leur donner une légende. Attention à bien respecter les tailles et poids indiqués. Une fois la planche crée et alimentée de photos, tout remontera automatiquement sur la page photos, en lien dans la colonne de droite. Autres > Intégrer une vidéo Pour intégrer une vidéo depuis les plateformes de type Youtube, Dailymotion ou Viméo, suivez les étapes 9

10 1/ Récupérer le code html de la vidéo. Allez sur la plateforme, exemple Youtube. En bas de la vidéo, cliquez sur «partager» puis «intéger». Choisissez ensuite la largeur de votre choix. Pour votre information, la largeur maximale de votre éditeur de page est 920px. Une fois la taille réglée, copier le code html du dessus, commençant par <iframe Le code copié, vous devez aller dans votre administration site web, choisir la page web de votre choix et insérer le code dans le bouton «source» de votre éditeur de texte. 10

11 Autres > Intégrer une brochure Le site sur lequel aller pour mettre une brochure en format consultable est le suivant : Vous devez en 1er lieu vous créer un compte, puis l'activer par retour du mail que vous l aurez reçu. Une fois le compte activé, cliquer sur "Publier un document". Cliquer sur le bouton vert "Parcourir" et aller chercher sur ton ordinateur le fichier désiré. Suivre ensuite les informations de la copie d'écran ci-dessous. Et lancer la publication Une fois le chargement terminé, cliquez sur le bouton "Partager" de chaque pdf et recopiez le lien dans le champ "lire la publication". Vous n aurez ensuite plus qu'à insérer ce lien dans le Module Brochures de votre administration. 11