Tutoriel DNN (site internet d'école) formation N 1

Transcription

1 Tutoriel DNN (site internet d'école) formation N 1 Barre d'outils Écrire dans un module "texte/html" Insérer un tableau dans un module "Texte/html" Ajouter une page Créer une "page-fille" Insérer une image dans un module "texte html" Enregistrer plusieurs images sur le serveur Les modules(liste) Texte/html(déplacer, ajouter, titrer, afficher container) Les permissions Créer des liens(dans un module texte, dans un module Links, Vers une page du site) Connexion

2 Barre d'outils 1 Éditeur de page 2 Création de module 3 Outils Pour modifier des pages du site Pour ajouter un module sur la page : c'est un cadre dans lequel on dépose du contenu. Exemple module texte/html pour du texte, des illustrations. Site : paramétrer le site Utilisateurs et Rôles : donner des droits de visite ou de création sur les pages Fichiers : gérer les fichiers du site (images, documents, vidéos, sons...) Les zones de publication : TopPane et BottomPane : toute la largeur de la page Content pane : le centre de la,page LeftPane et RightPane : à gauche et à droite Dans ces zones de publication, on insère des modules afin de publier du contenu.

3 Ajouter une page Dans l'éditeur de page, en,à gauche, Cliquer sur "Ajouter " 1 Nommer la page: nom qui appraraitra dans l'arborescence : (ici Test 1) Donnez-lui le même titre. "Page Parente" <...> : La page se place en de l'arborescence, dans le bandeau du site Voir créer une "page fille " Visible? : pour que le visiteur puisse voir le nom de la page dans l'arborescence. Permissions : Ne rien cocher : seul l'administrateur(c'est vous!) verra la page. Un cadre rouge lui rappelera ce paramétrage. En cochant "Tout le monde" (colonne afficher), la page sera totalement visible. Pour l'instant, ne pas cocher dans la colonne "Modifier". Ne pas oublier d'enregistrer

4 Page Test 1 Vous venez de créer la page "Test 1". Par défaut un module texte est installé dans la zone du milieu (ContentPane). Ici un cadre rouge vous rappelle que seul l'administrateur peut voir cette page. Lien vers la page "comment rendre visible une page aux visiteurs (donner la permission)". Écrire dans un module "Texte-html" Cliquer sur le petit triangle Bleu Vous avez accès aux paramètres du module. Cliquez sur "Éditer le texte". À la place de "Ajouter un contenu", vous pouvez écrire, coller du texte(depuis un autre traitement de texte). Pour les copier coller, utiliser les touches clavier : CtrlC = copier CtrlV= coller Des icônes standard de mise en forme sont accessibles. Pensez à "Enregistrer" lorsque vous avez fini.

5 Insérer un tableau dans un module "texte html" Cliquer sur l'icône tableau : Choisissez le nombre de colonnes et de lignes (possibilité de modifier par la suite) Conseil : Réglez la largeur à 100 % Cliquez sur "OK" Ajouter un tableau dans la page vous permet de mieux agencer texte et illustrations.

6 Insérer une image dans un module "texte/html" Pas de copier-coller possible pour les images! Il faut enregistrer les images sur le serveur pour pouvoir ensuite les utiliser dans les pages. 1 Éditer un module "texte/html" ici page test 1, module "Texte/html" de la ContentPane, case 2 du tableau. Cliquez sur l'icône "Insérer/modifier l'image" : Parcourir le serveur Choisir ici le dossier dans lequel enregistrer l'image (ici : /images). 2 Choisir l'image à enregistrer sur

7 le serveur (recherche à faire dans son ordinateur, ou clé usb par exemple) Cliquez sur "Parcourir" et sélectionnez dans votre arborescence l'image.(ici "imagedrapé"). Puis sur "Installer" L'image s'affiche dans le dossier (ici 2012/2013, images) 3 Sélectionner cette image pour l'intégrer au module Cliquez sur l'image Puis sur "OK". (ici "image-drapé"). L'image s'insère bien dans la deuxième case du tableau N'oubliez pas d'enregistrer (en bas) Enregistrer plusieurs images sur le serveur

8 (pour ensuite pouvoir les insérer dans les pages) 1 Les images Taille des images : maxi 200Ko, résolution :72 pixels par pouce Voir tutoriel "notions de base sur l'image" 2 Réunir les images dans une archive; Sélectionner les images, "clicdroit", "envoyer vers", "dossier compressé". 3 Un nouveau fichier est créé : C'est ce fichier que vous allez enregistrer sur le serveur. 4 Enregistrer le fichier compréssé sur le serveur. Cliquez sur l'onglet "Site" dans le bandeau supérieur. Puis sur "Fichiers". Sélectionnez le dossier où enregistrer les images. (ici "2012/2013", "images") Cliquez sur "Parcourir" Puis sur "Charger"

9 (pour rechercher les images compressées). Ici moutarde : Cochez "Décompresser les fichiers ZIP" puis cliquer sur "Charger". Ré-ouvrez votre dossier (ici "2012/2013", "images"). Les images du dossier compressé sont bien dans le dossier"images". Haut Les modules Haut

10 1 Déplacer les modules dans la page Cliquez sur le petit triangle Bleu Vous avez accès aux paramètres du module. "Déplacer" ici on déplace le module texte/html" vers la zone de gauche : LeftPane. 2 Ajouter un module "Texte/html" (les modules) Haut

11 Choisir la page dans laquelle insérer le module (ici test 1). Dans la "Barre d'outils", en, au centre : 1 Choisir le module "Texte/html" (faire défiler l'ascenseur). 2 Choisir un titre (ici essai1). 3 Choisir la zone d'insertion (ici : ContentPane). 4 Cliquer sur "Ajouter". 3 Les modules les plus utilisés à l'école (les modules) Agenda (Agenda type dans lequel on peut créer des évènements) Album photos (publication d'une série de photos dans un module spécial) Authentification ( pour créer des utilisateurs qui auront ensuite des permissions spéciales : exemple un compte parents pour restreindre la visibilité du site de l'école) Banque de documents (par exemple pour déposer rapidement sur le site des documents à télécharger par les visiteurs : documents administratifs, documents pour les élèves...) Blog ( insérer un blog à l'intérieur d'une page pour publier des billets) Dépôt ( utile par exemple pour publier des enregistrements sonores(lecteur intégré)) Text/html ( le plus utilisé : texte/images) Vidéo (pour publier des vidéos : attention voir le CPTICE pour les paramétrages, voire l'installation des modules très particuliers)

12 4 Afficher ou non le container (les modules) Le container est ce cadre qui identifie le module (ici cadre orange). On peut le rendre invisible. Cliquer sur le petit triangle Bleu. 1 Vous avez accès aux paramètres du module. 2 Puis sur : "Paramètres d'affichage". 3 Décochez : "Afficher le container". Changer le titre d'un module

13 Créer une "page fille" Une page "fille" permet de créer une sous-arborescence. La page sous laquelle elle se place est la page parente. Exemple : La page parente est la page "Classes". Les pages filles sont les pages des différentes classes de l'école Créer une page fille de la page test1 Barre d'outils, Éditeur de page, Ajouter Nommer la nouvelle page (ici "sous-page") titre et nom identiques Page parente : choisir ici la page test1 N'oubliez pas d'enregistrer Résultat : "Sous-page" vient se positionner sous sa page parente "test1"

14 Les permissions Rôle des permissions : Autoriser ou refuser l'accès à certains contenus. Exemple: une page est en création. Le travail de rédaction va s'échelonner sur plusieurs jours et l'on ne veut pas que la page soit "visible" tant qu'elle n'est pas terminée. La solution est de garder la page invisible pendant la construction : pas de permission. Lorsqu'elle est terminée, on ouvre les permissions : la page devient "visible". Rendre une page "visible" (ici test1) Allez sur la page "test 1". Dans la "Barre d'outils", "Éditeur de page", cliquez sur "Éditer". Cochez "Tout le monde" dans la colonne "Afficher". Ne jamais rien cocher dans la colonne "Modifier". On peut à tout moment gérer les permissions (accepter/refuser) en éditant les paramètres d'une page. Haut

15 Créer des liens Haut 1 Créer des liens vers d'autres sites internet A Dans un module texte/html Copier l'adresse URL du site choisi. (ici : site de la DSDEN = touche raccourci "Ctrl C" Éditer un module "Texte/html". Saisissez le titre du lien (ici DSDEN de la Gironde). Sélectionnez ce titre. Cliquez sur l'icône : "Insérer/Modifier un lien". Coller l'adresse du site copiée, en utilisant les touches "Ctrl V". Puis cliquez sur "OK". De retour sur la page, cliquez sur "Enregistrer". Le titre du lien est maintenant souligné, preuve que le texte est maintenant un lien. Haut

16 B Dans un module "Links" (Liens) Haut Ajoutez sur la page un module "Links" Choisissez son emplacement (ici LeftPane) Cliquez sur "Ajouter un lien". Cliquez sur le petit triangle bleu. Choisissez un titre au lien (ici DSDEN de la Gironde). Collez l'adresse URL du site (ici : site de la DSDEN = Touches raccourci : [Ctrl C] N'oubliez pas d'enregistrer (en bas) Quelque soit le module utilisé, on peut diriger le lien vers l'extérieur ou vers une page (ou un fichier) du site lui-même.

17 2 Créer des liens vers d'autres pages du site de l'école -Ouvrez une page (ici page"test 1) -Ajoutez un module "texte/html". -Saisissez le titre du lien (ce peut être le nom de la page vers laquelle pointera le lien). (ici "page fille") -Sélectionnez le lien (ici page fille") Cliquez sur l'icône "Insérer/modifier le lien". Puis "parcourir le serveur". -Sélectionnez "Page". -Puis choisissez dans l'arborescence la page du site vers laquelle pointera le lien. ( ici : "page fille") -Validez en cliquant sur : "Use selected link". -Puis cliquez sur "OK". -N'oubliez pas d'enregistrer!