Date : version 1 : 31.10.2008 Site web «Savoirs CDI» Création des pages et saisie des contenus BONNIN Julia à Auteurs Savoirs CDI THIBAUD François Objet Guide de saisie (backoffice TYPO3) des contenus du site Savoirs CDI. Guide d utilisation Alimentation du site Ecole pour tous Page 1 sur 44
Sommaire 1 Généralités 4 2 Accès au BackOffice (espace d administration du site) 4 3 Concepts de base TYPO3 5 3.1 La page 5 3.2 Le contenu 5 4 Présentation des outils du BackOffice 6 4.1 Le mode Page 6 4.2 Le mode Voir 6 4.3 Le mode Liste 6 4.4 Le mode Fonctions 6 5 Ajout, modification, suppression de pages/fiches, et des contenus de ces pages. 6 5.1 Création d une fiche/page 6 5.1.1 Créer une fiche/page 6 5.1.2 Créer simultanément plusieurs fiches/pages 7 5.2 Modifier les propriétés d une fiche/page 7 5.3 Supprimer une fiche/page 7 5.4 Ajouter du contenu texte dans une fiche/page 8 5.4.1 Conseils pour bien commencer 10 5.4.2 Modification du contenu d une fiche/page 10 5.4.3 Suppression du contenu d une fiche/page 10 5.4.4 Ajouter/supprimer un lien hypertexte 10 5.5 Ajouter une image présente sur votre disque dur 12 5.6 Ajouter des éléments sur le serveur : gérer le dossier «Fichiers auteurs» 13 5.6.1 Ajouter un document ou une image sur le serveur (dossier «Fichier auteurs») 13 5.6.2 Ajouter une image du serveur dans un contenu de type «Image» ou «Texte & image» 14 5.6.3 Activer «l affichage Lightbox»d une image 14 5.6.4 Ajouter une image du serveur dans un contenu de type «Texte» 15 5.6.5 Ajouter un lien vers un fichier dans un contenu de type «Texte» 16 6 Gestion de la mise en forme 17 6.1 Les «template» 17 6.1.1 Niveau n+1 17 Guide d utilisation Alimentation du site Ecole pour tous Page 2 sur 44
6.1.2 Niveau n+2 texte 18 6.1.3 Niveau n+2 texte de base 19 6.1.4 Niveau n+2 interview 20 6.1.5 Changer de template pour une page 20 6.2 La page d accueil 21 6.2.1 Présentation des actualités 21 6.2.2 Ajouter une actualité 22 6.2.3 Modifier le nombre d actualités d une rubrique affichées sur la page d accueil _25 6.3 La page niveau n+1 26 6.3.1 La bulle d information (page n+1) 26 6.3.2 Le menu automatique des sous-pages 27 6.3.3 La zone de droite : texte 27 6.3.4 La zone de droite : menu 28 6.3.5. Intégrer un texte de description pour une page dans le menu de gauche 31 6.4 La page niveau n+2 texte 31 6.4.1 La bulle d information (page n+2 texte) 32 6.4.2 L en-tête en italique 32 6.4.3 Les blocs de textes 33 6.4.4 Les notes de bas de page 34 6.4.5 Le sommaire 35 6.5 La page niveau n+2 texte de base 36 6.5.1 Le sommaire automatique 36 6.5.2 Le texte et ses styles : titres, listes, et colonnes grisées. 38 6.6 La page niveau n+2 interview 39 6.6.1 La bulle d information (page n+2 itw) 40 6.6.2 La liste de liens 40 6.6.3 L en-tête en italique 40 6.6.4 L interview 40 6.6.5 L encart «pour allez plus loin» 40 7 Les éléments communs à toutes les pages 42 7.1 Le nuage de mots-clés et les mots-clés des pages 42 7.2 Les commentaires 42 7.3 Les tableaux 43 Guide d utilisation Alimentation du site Ecole pour tous Page 3 sur 44
1 Généralités Le site est construit sur la base de Typo3 version 4.1.5, logiciel de gestion de contenus open source disponible à l adresse suivante : www.typo3.org. Typo3 est une application de gestion de contenus évoluée qui permet de : Structurer les contenus : pages et contenus de pages selon une arborescence de profondeur infinie. Séparer les contenus de leur forme : utilisation de gabarits de page (définition des espaces, des blocs) et de contenus de page (définition de la mise en forme des blocs). Gérer des fonctionnalités de publication automatisée : Typo3 dispose de types de contenus natifs ou par «extensions» qui permettent de gérer les éléments simples comme les textes, images, titrages, liens, documents à télécharger, tableaux mais aussi les macroéléments comme les actualités, les forums, les newsletter, les faq, etc Autorise des développements spécifiques pérennes : Typo3 propose un système d extensions évolutif qui permet l ajout de développements sans remettre en cause le système. 2 Accès au BackOffice (espace d administration du site) Afin d éviter les conflits d écriture et de création/modification des fiches/pages, chaque auteur dispose de ses propres identifiants de connexion au BackOffice. Une fois connecté, vous accédez à la page d accueil du BackOffice.
Chaque auteur a ainsi accès à une partie restreinte du site, et endosse alors le rôle de contributeur. Toutes les fonctionnalités techniques du site (gestion des templates, des plugins et de la base de données TYPO3, par exemple) lui sont masquées, allégeant ainsi son interface de saisie. 3.1 La page 3 Concepts de base TYPO3 Au sens de Typo3, la page représente «un nœud» de la structure du site. Les pages peuvent être comparées aux répertoires sous Windows. La page de Typo3 est un conteneur qui pourra recevoir divers éléments comme des contenus à afficher, des enregistrements D autre part, la page de Typo3 représente également une page Web qui sera affichée en tant que tel sur le site, au niveau d arborescence correspondant à sa place dans la structure du site. La page Typo3 endosse donc un double rôle : Répertoire Page Web 3.2 Le contenu Un contenu Typo3 est un ensemble de textes, images, liens, documents destiné à être publié sur une page Web.
Il peut y avoir plusieurs «contenus» sur une page Web. Ces contenus peuvent se placer dans les colonnes si le gabarit le prévoit, et s empilent les uns au-dessus des autres. 4 Présentation des outils du BackOffice 4.1 Le mode Page Le mode Page permet de faire la plupart des opérations de contribution : ajout/suppression de pages ou de contenus. Le mode Page est surligné de gris dans le bandeau de gauche ainsi que la page sélectionnée. Dans le bandeau de droite, on voit les différentes colonnes de contenu, chaque symbole est un lien qui permet de saisir un nouveau contenu. 4.2 Le mode Voir Il permet d avoir une visualisation de la page en cours d édition directement dans le backoffice. Il s agit plus d un mode gadget que d un mode réellement utile. 4.3 Le mode Liste Il permet de visualiser l ensemble des enregistrements se trouvant dans la page en cours et non pas seulement l ensemble des contenus comme le fait le mode Page. 4.4 Le mode Fonctions C est le mode à utiliser lorsqu on souhaite créer plusieurs pages en même temps sous une rubrique ou trier les pages selon leur titre. 5 Ajout, modification, suppression de pages/fiches, et des contenus de ces pages. 5.1 Création d une fiche/page 5.1.1 Créer une fiche/page Pour ajouter une fiche/page dans une rubrique : 1. Passez en mode Page dans le menu de gauche
2. Dans l arborescence du site, repérez la page dans laquelle va être créée la nouvelle page, et cliquez sur la petite icone, à côté du titre de cette page 3. Cliquez sur «Nouveau» dans le menu qui s ouvre 4. Cliquez sur «Page (Dans)» à droite 5. Rentrez le «Titre de la page», éventuellement le «Sous-titre», et en haut du formulaire, décochez la case «Cacher la page». 6. Enregistrez 7. Vous remarquerez que la page créée apparaît dans l arborescence du site. Si vous avez laissé la case «Cacher la page» cochée, son icone comporte un petit pictogramme (sens interdit) indiquant que cette page est cachée, et qu elle n apparait donc pas en ligne. 8. Il est éventuellement possible de cliquer/déposer cette page dans l arborescence pour la changer de place. 5.1.2 Créer simultanément plusieurs fiches/pages Si vous devez créer plusieurs fiches, il peut vous être pratique de les créer toutes en même temps (et vous éviter ainsi de répéter le processus décrit en 5.1.1 autant de fois que vous avez de pages à créer). Pour cela : 1. Passez en mode Fonctions dans le menu de gauche 2. Cliquez sur le titre de la page dans laquelle vont être créées les nouvelles pages 3. Un formulaire apparait. Rentrez les noms de vos fiches/pages. 4. Enregistrez 5.2 Modifier les propriétés d une fiche/page 1. Passez ou restez en mode Page dans le menu de gauche 2. Cliquez sur le nom de la page que vous souhaitez modifier dans l arborescence du site 3. A droite, cliquez sur le bouton «Editer les propriétés de la page» pour modifier les informations de la page. Le formulaire de modification de page s affiche. 4. Vous pouvez alors modifier les paramètres de visibilité de la page (cachée, pas cachée), son type (même si le type «standard» vous suffira), son titre, et éventuellement son sous-titre. 5. Enregistrez. Vos modifications ont été sauvegardées. 5.3 Supprimer une fiche/page
Passez ou restez en mode Page dans le menu de gauche Dans l arborescence du site, repérez la page que vous voulez supprimer, et cliquez sur la petite icone, à côté du titre de cette page Cliquez sur «Supprimer» dans le menu qui s ouvre Votre page disparaît alors de l arborescence du site. 5.4 Ajouter du contenu texte dans une fiche/page Une fois votre (vos) fiche(s)/page(s) créée(s), il faut ensuite créer son (leur) contenu. Passez ou restez en mode Page dans le menu de gauche Dans l arborescence du site, repérez la page dans laquelle vous voulez ajouter du contenu, et cliquez sur la petite icone, à côté du titre de cette page Cliquez sur «Nouveau» dans le menu qui s ouvre Cliquez sur «Contenu de la page» à droite Choisissez le type de contenu, et remplissez les champs du formulaire qui apparait en fonction du type de contenu que vous aurez choisi. Enregistrez Dans une seule et même fiche/page, vous pouvez créer autant de contenus que vous le souhaitez. Ils apparaitront dans le site, dans l ordre où ils apparaissent dans le backoffice. Pour créer un nouveau contenu, sous un contenu existant, il vous suffit de cliquer sur l icone de ce contenu existant. Ci-dessous, le détail des possibilités de mise en page offertes par l éditeur de texte WYSIWYG. Globalement, l éditeur de texte fonctionne de la même façon qu un traitement de texte de type MS Word, avec cependant et bien évidemment des fonctionnalités moindres. Le menu «Paragraphe» permet de changer le style d un bloc de texte précis (et donc d un paragraphe). Vous trouverez dans cette liste déroulante des styles prédéfinis, correspondants à la charte graphique du site. Le menu «Texte» fonctionne de la même manière que le menu paragraphe, sauf qu il concerne des titres ou des morceaux de texte. La liste déroulante va également proposer des styles prédéfinis, correspondants à la charte graphique du site La liste déroulante «Normal» ne vous sera d aucune utilité. Il s agit d une fonctionnalité par défaut de l éditeur, qui ne servira pas dans le cadre du site «Ecole pour tous». Vous retrouvez ensuite les fonctionnalités usuelles de mise en page et de gestion de contenu :
o Gras o Italique o Souligné o Aligné à gauche o Centré o Aligné à droite o Liste à puces o Liste à puces o extérieur). Créer un lien (vers un fichier, une page interne ou encore vers un site o Insérer une image o Accéder au code HTML du contenu (pour modifier directement le code HTML) o Copier o Couper o Coller o Annuler Frappe o Répéter Frappe
5.4.1 Conseils pour bien commencer 1. Tapez tout votre texte au kilomètre dans l éditeur (texte non stylisé) sauf si vous voulez copier/coller du texte provenant d un traitement de texte. Dans ce cas-là, passez-le par le bloc-notes pour enlever tous les styles propres à votre traitement de texte : a. copiez votre texte dans votre traitement de texte, b. collez-le dans le bloc-notes, c. copiez alors tout le texte dans le bloc-notes, d. collez-le dans l éditeur TYPO3. 2. Si vous vous trompez de style ou si l éditeur ne semble pas appliquer le style que vous pensiez avoir choisi, sélectionnez votre texte et appliquez le style «défaut» pour enlever la mauvaise mise en page. 5.4.2 Modification du contenu d une fiche/page 1. Pour modifier le contenu d une page : 2. Passez ou restez en mode Page dans le menu de gauche 3. Cliquez sur le titre de la page dans laquelle se trouve le contenu que vous souhaitez modifier 4. Repérez le contenu que vous souhaitez modifier et pour l éditer : a. Cliquez sur l icone b. Ou bien cliquez directement sur le texte du contenu 5. Faites vos modifications et n oubliez pas de les enregistrer. 5.4.3 Suppression du contenu d une fiche/page 1. Passez ou restez en mode Page dans le menu de gauche 2. Cliquez sur le titre de la page dans laquelle se trouve le contenu que vous souhaitez supprimer 3. Repérez le contenu que vous souhaitez supprimer et cliquez sur l icone 4. Votre contenu a été supprimé. 5.4.4 Ajouter/supprimer un lien hypertexte Pour ajouter un lien hypertexte interne, vers une page du site : 1. Si vous n êtes pas déjà dans l éditeur de texte avec le bon contenu : en mode page, cliquez sur la page de votre contenu, repérez le contenu que vous souhaitez modifier et pour l éditer :
a. Cliquez sur l icône b. Ou bien cliquez directement sur le texte du contenu 2. Sélectionnez le ou les mots à lier. 3. Cliquez sur l icône de la barre d outils 4. Dans les onglets qui s affichent, choisissez «Page». 5. Dans les champs en-dessous, a. Cible : saisissez «_self» (touche 8 en haut du clavier et «self», sans espace) pour que le lien s affiche dans la fenêtre courante. Important : en général, sur internet, les liens internes au site s ouvrent dans la fenêtre en cours et les liens externes (vers un autre site) s ouvrent dans une nouvelle fenêtre du navigateur. b. Laissez «Ouvrir dans fenêtre» et «Style» tels quels. c. Titre : Effacez la description par défaut et saisissez une description succincte de la page liée. Exemple : «Retour sur la page d accueil» ou même simplement le titre de la page «La politique documentaire». Cette description est utile car elle apporte une information supplémentaire aux malvoyants qui visiteront le site. Elle permet de plus un meilleur référencement du site sur les moteurs de recherche. d. Enfin, choisissez dans l arborescence en-dessous la page en lien. Vous devez ensuite voir dans l éditeur votre ou vos mots liés, soulignés en bleu. Pour ajouter un lien hypertexte externe, vers un autre site web : 1. Sélectionnez le ou les mots à lier. 2. Cliquez sur l icône de la barre d outils 3. Dans les onglets qui s affichent, choisissez «URL externe» 4. Même procédure que le lien interne, sauf pour les champs : a. Url : entrez l adresse complète du lien, sans oublier le http :// b. Cible : saisissez «_blank» (touche 8 en haut du clavier et «blank», sans espace) pour que le lien s affiche dans une nouvelle fenêtre. c. Laissez «Ouvrir dans fenêtre» et «Style» tels quels. d. Titre : Effacez la description par défaut et saisissez une description succincte de la page liée. Exemple : «Site du Ministère de l Éducation Nationale Nouvelle fenêtre». Précisez bien «nouvelle fenêtre» dans le titre pour les liens externes, il permet aux malvoyants de comprendre où s est ouvert le lien. e. Ensuite, cliquez sur «Attribuer le lien». f. Vous verrez apparaître une icône automatique, qui permet de différencier un lien externe d un interne.
5.5 Ajouter une image présente sur votre disque dur Si vous avez une image à ajouter en lien avec un paragraphe de texte, choisissez un contenu de type texte/image plutôt que texte. Si votre paragraphe est déjà saisi en tant que texte simple, il vous suffit de changer le type de contenu. En dessous de l éditeur de texte, vous trouverez des champs se rapportant à l image. 1. Cliquez sur parcourir pour aller chercher votre image sur votre disque dur. L image peut aussi être déjà présente sur le serveur, dans le dossier «Fichier auteurs». Pour savoir comment ajouter une image ou un document dans ce dossier, voir le chapitre suivant 5.6.2 2. Ensuite, remplissez les différents champs. Dans la copie d écran ci-dessous, vous trouverez des informations concernant l utilisation des données de ces champs. 3. Vous pouvez aussi ajouter des images seules, en ajoutant un contenu de type image. Les champs à remplir sont les mêmes. Attention : les images intégrées de cette manière ne s affiche pas en mode «lighbox». Pour en savoir plus sur le mode lightbox, voir le chapitre 5.6.3
5.6 Ajouter des éléments sur le serveur : gérer le dossier «Fichiers auteurs» 5.6.1 Ajouter un document ou une image sur le serveur (dossier «Fichier auteurs») 1. Connectez-vous dans le backoffice du site 2. Dans le menu de gauche, choisissez fichier >> fichiers 3. Dans la colonne de l arborescence, un dossier Fichiers auteurs est représenté par une petite bille verte pomme ou une icône dossier selon vos droits d utilisateur. Cliquez dessus. 4. Dans la colonne de droite, vous visualisez les documents qui se trouvent déjà dans le dossier. Pour en ajouter, et donc envoyer des documents de votre disque dur sur le serveur, cliquez sur «Envoyer des fichiers». 5. Dans la liste déroulante qui s affiche, vous pouvez choisir un nombre entre 1 et 10 fichiers à envoyer. Cliquez sur chaque bouton «parcourir» et aller chercher chacun des fichiers à envoyer.
6. Si vous souhaitez remplacer un fichier déjà présent sur le serveur, vérifiez d abord que les deux fichiers ont le même nom et cochez la case «Ecraser les fichiers existants». 7. Cliquez ensuite sur «Envoyer des fichiers» Il est aussi possible de créer un ou plusieurs sous-dossiers dans ce dossier «Fichiers auteurs». Pour cela, en 4-, cliquez sur le bouton Nouveau, et choisissez dans la liste déroulante le nombre de dossiers à créer. Saisissez dans les champs les noms des sousdossiers. Une fois les fichiers présents sur le serveur, vous pouvez les lier dans un contenu texte par exemple, ou s il s agit d image, les afficher en tant que contenu image, plutôt que d aller les chercher sur votre disque dur. 5.6.2 Ajouter une image du serveur dans un contenu de type «Image» ou «Texte & image» 1. Au lieu de cliquer sur «parcourir» pour aller chercher votre image sur votre disque dur, cliquez sur l icône «dossier» à droite du champ «image» : 2. Vous avez ensuite l arborescence du dossier «Fichiers auteurs» qui s affiche (si ça n est pas le cas, cliquez dessus), il vous suffit ensuite d aller choisir l image que vous souhaitez intégrer. 5.6.3 Activer «l affichage Lightbox»d une image 1. Les images intégrées en tant que contenu «image» ou «text&image» peuvent s agrandir au clic dans un encart spécial :
2. Pour cela, il vous suffit de rentrer une largeur plus petite que la taille réelle de l image. Ex : 3. Ensuite, cliquez sur Liens d image juste en dessous, un champ supplémentaire va s ouvrir en haut de votre page : 4. Ne rentrez rien pour «lien» mais cochez la case «cliquer pour agrandir». Enregistrez. 5.6.4 Ajouter une image du serveur dans un contenu de type «Texte» 1- Dans l éditeur de texte, cliquez sur l icône pour insérer une image 2- L onglet «Plain» image permet l insertion d images à l endroit où le curseur du texte est placé, l onglet «Glisser-Déposer» permet de repositionner l image dans le texte à l endroit voulu. Choisissez l un ou l autre des onglets. 3- Cliquez sur le dossier «Fichier auteurs», puis allez sélectionner l image à intégrer.
4- Attention : une image intégrée de cette manière ne peut pas s agrandir au clic, ni dans une «lightbox». Pour cela, l image doit être intégrée en tant que contenu de type «image» ou «texte&image» - voir 1.c. 5.6.5 Ajouter un lien vers un fichier dans un contenu de type «Texte» 1. Créer votre lien (cf 6.1.2) 2. Choisissez l onglet «Fichier» 3. Remplissez les champs correctement (cible : _blank, Titre : précisez le format du fichier ex : PDF, son poid ex : 10Ko, et Nouvelle Fenêtre) 4. Cliquez sur le dossier «Fichier auteurs» en dessous, puis allez sélectionner le fichier à intégrer
6 Gestion de la mise en forme 6.1 Les «template» Les pages du site ont chacune un «template», un modèle d affichage qui permet de leur attribuer des styles et des graphismes particulier. Il y a sept template différents, mais seulement trois vous concernent directement. Par exemple, la page d accueil a son propre template, il sera toujours le même et vous n aurez pas besoin de le changer. Par contre, si vous créez une nouvelle page de contenu, vous devez lui attribuez le template qui lui correspond. Voici la liste des template du site que vous devez connaitre : 6.1.1 Niveau n+1 Les pages concernées par le niveau n+1 sont toutes celles du menu principal (Métier, Centre de ressources, etc ) ainsi que leurs premières sous pages :
A priori, aucune autre page que celles-ci ne doit avoir ce type d affichage. 6.1.2 Niveau n+2 texte Ce template sera utilisée pour les contenus ayant un contenu important. Il est constitué d un menu à gauche à créer à partir d ancres placées dans la page, de préférence à chaque titre. Il est possible d ajouter un encart à droite «A Noter» qui n est pas obligatoire (si rien n est écrit dedans, il disparait), et il est possible également d ajouter des notes de bas de page.
6.1.3 Niveau n+2 texte de base Ce template peut-être utilisé dans tous les autres cas de page.
6.1.4 Niveau n+2 interview Ce template est réservée aux interviews. 6.1.5 Changer de template pour une page Lorsque vous créez une nouvelle page dans typo3, elle a, par défaut, le template «texte de base». Pour en changer, il vous suffit d aller dans les propriétés de la page, et de choisir le template correspondant. 1. Mode page >> cliquez sur votre nouvelle page dans l arborescence >> Editer les propriétés de la page. Si vous venez de créer votre page, vous êtes par défaut directement sur ce formulaire. 2. Repérez la zone «Select template» : Choisissez dans la liste déroulante le template qui correspond à votre page : Defaut : Niveau n+2 texte de base
(index.html) : Page d accueil (niveau1a.html) : Page niveau n+1 (Métier, Centre de ressources, etc.) (niveau1b_recherche.html) : Page de recherche (niveau2_interview.html) : Page niveau n+2 interview (niveau2a.html) : Page niveau n+2 texte de base (niveau2b.html) : Page niveau n+2 texte Vous n aurez à priori à ne choisir que parmi les trois derniers, grisés ci-dessus. 6.2 La page d accueil 6.2.1 Présentation des actualités La page d accueil est constituée d éléments de type «News», qui sont des résumés de contenus de page. Ces news, ou actualités, sont classées par rubrique, et les rubriques correspondent aux titres des blocs de la page d accueil : Pour info, Notre sélection, Le personnage du mois, etc La rubrique du bloc constitué de liens bleus, en dessous «Le coin du juriste», a été nommée Autres. Une actualité sur la page d accueil n affiche que quelques éléments de son contenu : titre, première ligne du texte, voir auteur et date. En cliquant sur son titre, on arrive dans une page affichant l intégralité de son contenu. Puis, si l auteur l a intégré, un lien vers la page de contenu à laquelle elle fait référence.
Les actualités les plus récentes apparaissent en têtes des blocs auxquelles elles appartiennent. Elles sont ensuite automatiquement archivées au fur et à mesure lorsqu elles ont plus d un mois, mais restent cependant affichées sur la page d accueil si aucune actualité plus récente n a été ajoutée. Pour voir les pages d archives des actualités, cliquez sur les liens «voir les précédents» de la colonne de droite. Il est important de comprendre qu on demandera dans une actualité de résumer un contenu de page au minimum, et d y ajouter un lien vers la page où contenu complet sera intégré. Il s agit ici d inviter l internaute à en lire plus s il en a envie. Il est déconseillé, au moins dans les actualités, de surcharger les pages de texte, et d éviter, l effet «descente en rappel» dans la page avec une barre d ascenseur trop longue. 6.2.2 Ajouter une actualité 3. Connectez-vous au backoffice de typo3 4. En mode «page», cliquez sur l icône du dossier «Actualités», et choisissez «nouveau» dans la liste déroulante qui s affiche. 5. À droite, dans la liste de des éléments, choisissez «nouvelles» : 6. Remplissez les champs du formulaire. Selon la rubrique de l actualité, les champs seront affichés à différents endroits. Ex : pour la rubrique «Le personnage du mois», le champ auteur est important, il s affiche en gris clair en dessous le champ «sous-titre» lorsque l actualité est en tête de liste :
Lorsque l utilisateur cliquera sur le titre, il accèdera à l intégralité de l actualité et notamment au champ Texte, où vous devez saisir un cour résumé. Pour les rubriques Pour info et Notre sélection, vous pouvez choisir un type d actualités différent : un clic sur le titre renverra vers un site externe plutôt que vers l actualité en elle-même. Cela est notamment conseillé pour la rubrique «Notre sélection». Pour cela, choisissez dans le champ «Type» Link external URL : BUG en cours de résolution : Le problème de ce type de news est qu il n est pour l instant pas possible de paramétrer le «title» du lien, pour avoir une information accessible de type «Lien externe Nouvelle fenêtre». 7. Une fois les champs remplis, passez au deuxième onglet Relation:
8. Choisissez ici une catégorie d actualité, correspondant au bloc de la page d accueil : Il est très important de choisir une catégorie, sinon votre actualité ne s affichera pas. 9. En-dessous, choisissez une image si vous en avez une de prévue. Les images seront automatiquement réduites si elles sont trop grandes, un clic sur l image l affiche «grandeur nature». Pour en savoir plus sur la manière d attacher une image, voir le chapitre 6.2 et 6.5. Les champs «liens», «nouvelles en relations», «fichiers» et «options générales» n ont pas besoin d être remplis. 10. Enregistrez
11. Par défaut, les actualités sont cachées à l affichage. Pour rendre visible votre actualité, cliquez sur le dossier «actualités», repérez votre nouvelle actualité cachée (icône : ), cliquez sur cette icône et choisissez dans le menu : Afficher. 6.2.3 Modifier le nombre d actualités d une rubrique affichées sur la page d accueil Cela vous est possible pour les catégories «Pour info» et «Autres». Il vous faut pour cela rentrer dans les paramètres du plugin d actualités sur la page d accueil : 1. Une fois sur la page d accueil, choisissez la colonne correspondant à la catégorie d actualités : Les actualités Pour infos sont stockées dans la colonne «gauche» et les «Autres» dans la colonne «Bordure». 2. Editez le plugin correspondant à votre catégorie 3. Allez directement dans l onglet Other Settings 4. Repérez la ligne : Limit: max items for LIST and LATEST et saisissez le chiffre correspondant au nombre d actualités que vous souhaitez voir afficher.
6.3 La page niveau n+1 Les pages de menu général (Métier, Centre de ressources, etc.) sont constituées : 1. D une «bulle» d information dans la zone grise 2. D un menu automatique des sous-pages à gauche 3. D une zone de texte à droite, ou pour les sous-pages, d un autre menu. 6.3.1 La bulle d information (page n+1) Le texte de la bulle d information est à saisir dans la colonne bordure de votre page. Attention à ne pas dépasser une certaine longueur de texte pour ne pas sortir de la zone grise.
6.3.2 Le menu automatique des sous-pages Sur ce template n+1, ce menu ne peut pas être géré par les auteurs. Il est constitué des sous-pages de la page. Si vous ne souhaitez pas voir une sous-page dans ce menu : 1. Placez-vous dans les propriétés de la sous-page (Mode page >> cliquez sur votre sous-page dans l arborescence >> Editer les propriétés de la page.) 2. Cochez la case «Hors menu» 3. Enregistrez. 6.3.3 La zone de droite : texte Les pages du menu général ont une zone de texte à droite, à remplir dans la colonne «normal». Un texte d information comme «Choisissez une rubrique dans le menu de gauche.» est le bienvenu, mais cela peut tout à fait être modifié.
6.3.4 La zone de droite : menu Les sous-pages sont elle aussi constituées du template niveau n+1 : Seule la zone de droite change, il s agit là d un plugin de menu des sous-sous-pages. Il est généralement déjà intégré, mais peut-être caché. Par exemple, la page «Espace CDI» de la rubrique «Centre de ressources» contient actuellement une image «En déménagement». Pour cacher cette image et activer le menu des sous-sous-page : 1. Si ça n est pas déjà fait, afficher les éléments masqués de la page : 2. Dans la colonne normale, un plugin «plan du site déroulant» apparait. Sinon, voir le point suivant pour ajouter un plugin «plan du site déroulant» et le paramétrer. 3. Cachez l image ou supprimez là (cliquez sur l ampoule pour cacher et la poubelle pour supprimer) 4. Décachez le plan du site en cliquant sur l ampoule allumée. Si le menu de droite n est pas déjà intégré: Ajouter le plugin :
1. Dans la colonne «normal» de votre page, cliquez sur pour ajouter un contenu. 2. Choisissez dans la liste des contenus, le module «Plan du site déroulant» en bas de la liste. Attention à ne pas confondre avec le module «Plan du site» qui ne permet pas de faire la même chose : La page de paramétrage du module apparaît. Paramétrer le plugin : 1. Onglet général : Le point d entrée est la page mère des pages du menu que vous souhaitez afficher. En général, ici il s agit de la page sur laquelle vous intégrer le menu. 2. Onglet Page : voici un exemple de paramétrage. Si vous souhaitez exclure des pages filles du menu, vous pouvez les intégrer dans le champ «Page à exclure» :
3. Onglet Options : Ici vous pouvez choisir d inclure les sous-pages des pages filles, par exemple, en choisissant 2 niveaux à afficher et à étendre. Attention à bien rentrer «[description]» comme champ de description. 4. Onglet Effets : AUCUN 5. Onglet Avancé : Balise de liste «Liste à puce (UL)»
6.3.5. Intégrer un texte de description pour une page dans le menu de gauche Comme sur cette copie d écran, vous pouvez ajouter une description de page dans ce menu. Pour cela : 1. Placez-vous dans les propriétés de la page qui doit avoir une description (Mode page >> cliquez sur votre sous-page dans l arborescence >> Editer les propriétés de la page.) 2. Passez-là en mode Avancé dans le champ «Type» (cliquez sur ok si un message d information apparaît) 3. Un champ description s ajoute : saisissez ici le texte de description qui apparaitra dans le menu. 6.4 La page niveau n+2 texte
Cette page est constituée de : 1. Une bulle d information à remplir dans les propriétés de la page 2. Un en-tête en italique, avec ou sans photo 3. Un «post-it» (non obligatoire) 4. Des blocs de texte avec des styles prédéfinis à attribuer, notamment des notes de bas de page 5. Un sommaire constitué d ancres vers les blocs de contenus et généré «à la main» par les auteurs 6.4.1 La bulle d information (page n+2 texte) Le titre est généré automatiquement : c est le titre de la page Les autres informations sont à saisir dans les propriétés de la page (mode page >> éditer les pptés de la page) : 1. Passez votre page en mode «avancé» (champ Type) 2. Pour l auteur : À côté du champ «résumé», cliquez sur l icône «Plus d options» a. Des champs supplémentaires apparaissent en haut de votre écran, et notamment le champ Auteur : b. Saisissez ici le nom de l auteur de l article. 3. Pour les fonctions et la date : saisissez-les dans le champ résumé, en passant à la ligne pour la date et en la mettant entre crochets. 4. Pour les mots clés : dans le champ Mots-clés, séparez-les par des virgules. Ces mots-clés seront repris dans le nuage de tag de la page d accueil. 6.4.2 L en-tête en italique Il s agit d un simple contenu de type «Texte&Image», à saisir dans la colonne «normal» de votre page. Intégrez l image comme indiqué dans le point 6.2, elle sera automatiquement redimensionnée sil elle est trop grande. Pour la position, choisissez le mode «Habillé, gauche».
Pour le texte, saisissez-le et passez-le en italique. 6.4.3 Les blocs de textes Dans typo3, les ancres sont générées par les blocs de contenu. En conséquence, chaque contenu devant apparaître dans le sommaire doit être dans un bloc séparé, car le sommaire est fait par des ancres. 1. Attribuer les styles aux titres dans un bloc de contenu : Un bloc de contenu à un champ «en-tête» qui est son titre, il est par défaut en style de titre 1. Pour le passer en titre 2 ou autre, cliquez sur «plus d options» à côté du champ En-tête, et choisissez un type de disposition différent : disposition 2 pour titre 2, 3 pour titre 3, etc. Dans la zone de texte, si vous souhaitez ajouter un style à un titre, sélectionnez les mots du titre et choisissez dans la liste déroulante commençant par «normal» : 2. Les listes à puces Elles sont stylées par défaut, il vous suffit de sélectionner votre texte et de cliquer sur le bouton liste à puces de l éditeur. Pour indenter et passer au niveau de puce inférieur, tapez la touche tabulation de votre clavier.
3. Le post-it Tout texte saisi dans un bloc de contenu de type «texte» dans la colonne «droite» de la page sera automatiquement intégré dans un post-it à droite dans la page(visible en ligne, mais pas dans l éditeur de texte). 6.4.4 Les notes de bas de page 1. Commencez par créer un bloc de contenu en fin de colonne «normal», qui sera le bloc des notes. 2. Sans vous préoccuper du style du texte pour le moment, saisissez vos notes et intégrez, en début de ligne, le lien-numéro vers chaque paragraphe correspondant. 3. Pour faire un lien vers un bloc paragraphe d une page, faites un lien classique vers la page en cours de modification, mais cliquez sur la petite flèche rouge à droite pour voir la liste des blocs de contenus, puis choisissez le bloc correspondant à la note : 4. Entre chaque note de bas de page, pour éviter des problèmes de styles plus tard, ne passez pas à la ligne avec la touche «entrée» mais plutôt en créant des retours à la ligne avec les touches «maj+entrée» (en HTML, balise <br/> plutôt que <p>).
5. Une fois que toutes vos notes de bas de page sont intégrées, appliquez-lui le style «note de bas de page». Pour cela, sélectionnez l intégralité de votre texte, liens compris (ctrl+a), puis dans la liste déroulante «paragraphe», choisissez le style : Note de bas de page bleue. 6. Si vous avez créé par inadvertance plusieurs paragraphes avec la touche entrée, vous verrez plusieurs fois l image d entête du style «note». Pour corriger cela, repassez en style «par défaut» et modifiez vos sauts de paragraphes en retour à la ligne - touches «maj+entrée» plutôt que «entrée». 7. Il ne vous reste plus qu à ajouter dans vos textes des blocs de contenu les numéros en liens vers les notes : ce sont de simples liens vers le bloc de notes de bas de page. Attention aux crochets, à saisir pour chaque lien, [1], touche Alt gr + ( et Alt gr + ). 6.4.5 Le sommaire Pour ce template, le sommaire doit être fait «à la main», c'est-à-dire que vous devez saisir un lien pour chaque titre que vous voulez voir apparaître dans le sommaire. Le sommaire est un bloc de texte à créer et à saisir dans la colonne «gauche». Il faut qu il prenne la forme d une liste à puce. Ne vous fiez pas au style qu il prendra dans l éditeur, le style de cette colonne n est pas visible ici, visualisez plutôt en ligne. 1. Intégrez tout vos titres et liez-les à leur bloc de contenu voir 7.3.4, point 3, pour faire un lien vers un paragraphe. 2. Sélectionnez l intégralité des titres (ctrl+a) et appliquez la liste à puces. 3. Indentez avec la touche tabulation en fonction de la hiérarchie du sommaire.
6.5 La page niveau n+2 texte de base Ce template est constitué de : 1. Un sommaire qui peut être automatique 2. Un texte avec beaucoup de styles différents 6.5.1 Le sommaire automatique Ce sommaire peut-être générer automatiquement par un plugin, qui prendra les titres de chaque bloc de contenus. 1. Dans la colonne «gauche», intégrez un nouveau contenu de type «Plan du site» (ne pas confondre avec plan du site déroulant) :
2. Dans le champ «type de menu», choisissez Index des sections (contenu w/index coché) 3. Comme point d entrée, allez choisir la page en cours de modification. 4. Enregistrez. Le menu va prendre tout les titres des blocs de contenu et en faire une liste de liens vers ces contenus. Si vous souhaitez exclure certains blocs du contenu de ce sommaire : 1. Editez le bloc à exclure 2. À côté du champ Type, en tête de formulaire, cliquez sur l icône «plus d options» : 3. Dans les options secondaires qui apparaissent en haut de page, décochez la case Index : cela va enlever le titre du menu automatique.
6.5.2 Le texte et ses styles : titres, listes, et colonnes grisées. Les titres sont stylés avec la liste «normal ; titre 1 ; etc.» comme indiqué en 7.3.3. Idem pour le champ En-tête, voir le 7.3.3 pour changer la disposition et appliquer un style de titre différent que le titre 1 par défaut. Les styles de titres apparaissant par défaut dans l éditeur de texte ne sont pas les bons, visualisez en ligne de préférence. Les listes à puces sont par défaut les mêmes qu en 7.3.3, mais vous devez appliquer un style différent pour les listes de liens : Pour cela : 1. Créez votre liste de liens et appliquez les puces par défaut 2. Sélectionnez l intégralité de la liste et appliquez le style de paragraphe «Liste à puce chevron orange» Sachez que tous les liens externes ont une icône automatiquement intégrée pour indiquer l ouverture d une nouvelle fenêtre. Les deux colonnes grisées sont un peu plus complexe à intégrer. Ne vous fiez pas à l éditeur de texte, les styles n y sont pas correctement appliqué, préférez une visualisation en ligne. 1. Intégrez l intégralité du texte des deux colonnes dans un même bloc, sans vous souciez pour l instant du style. 2. Séparez les deux colonnes par un saut de paragraphe touche entrée. 3. Créez les liens s il y en a dans le texte. 4. Si vous souhaitez passez à la ligne dans le texte, préférez le «maj+entrée» plutôt que «entrée», qui ne doit être utilisé que pour la séparation entre les deux colonnes.
5. Une fois le texte et les liens finalisés, sélectionnez la partie du texte qui doit être l entête de la colonne : ou Et appliquez le style dans la liste texte (pas paragraphe) : Entête coche verte ou Entête coche rouge. Faites-le pour chacune des deux colonnes. 6. Ensuite, sélectionnez l ensemble du texte de la première colonne, et appliquez le style de paragraphe «Parag en colonne fond gris». Faites la même chose ensuite pour la seconde colonne. 7. Enregistrez et visualisez. 6.6 La page niveau n+2 interview Cette page est constituée de : 1. Une bulle d information 2. Une liste de liens 3. Un entête de présentation de l interrogé 4. Une interview 5. Un encart «pour allez plus loin»
6.6.1 La bulle d information (page n+2 itw) Elle est constituée de la même manière que la page n+2 texte : voir 7.3.1. 6.6.2 La liste de liens Il s agit d un simple contenu de type texte, intégré dans la colonne «gauche» de la page. Saisissez et créez vos liens et appliquez-leur la liste à puce (ne vous fiez pas à l éditeur pour l apparence). 6.6.3 L en-tête en italique Même chose que 7.3.2 6.6.4 L interview Les questions doivent avoir le style «Titre 1». L idéal est de créer un bloc de contenu par question/réponse, et d intégrer la question en tant qu En tête du bloc : les en-têtes sont par défaut des titres 1. Si vous préférez, vous pouvez aussi saisir l intégralité de l interview dans un seul bloc, puis appliquer le style «Titre1» à chaque question. Ne vous fiez pas à l éditeur de texte pour l apparence. 6.6.5 L encart «pour allez plus loin» Pour le template n+2 interview, tout texte intégré dans la colonne «droite» prendra l apparence du bloc «pour allez plus loin».
Pour le titre en gras en dessous «Pour allez plus loin», il s agit d un titre qui doit avoir le style «titre 2» (ou de l entête en mode «disposition 2» voir 7.3.3). Pour les mots en gras orangés, appliquez-leur le style de texte (pas de paragraphe) «ITW nom orange gras» :
7 Les éléments communs à toutes les pages 7.1 Le nuage de mots-clés et les mots-clés des pages Pour que le nuage de mots-clés fonctionnent correctement, vous devez saisir des mots-clés définissant chacune des pages, ou du moins celles ayant un contenu «éditorialisé». Pour ajouter les mots-clés : 1. Dans les propriétés de la page, passez en type «Avancé» si ça n est pas déjà fait. 2. Dans le champ Mots-clés, saisissez les mots-clés, de préférence au singulier, et séparés par des virgules. Le nuage de mots-clés récupère ces mots et les agrandit en fonction du nombre de fois où ils sont cités en tant que mots-clés. 7.2 Les commentaires Vous pouvez ajouter un formulaire de commentaires pour les visiteurs, en bas d une page par exemple. Ce système de commentaires peut être ajouté sur toutes les pages de type «niveau 2 texte», «niveau 2 texte de base» et «niveau 2 interview».
Il vous faut pour cela ajouter un plugin dans la colonne «bordure» de la page. Le formulaire et les commentaires s afficheront alors en bas de tout contenu de la page. 1. Positionnez-vous sur la page où vous souhaitez ajouter des commentaires, et ajouter un nouveau contenu dans la colonne «bordure» : 2. Choisissez un contenu module de type Forum de discussion WEC 3. Entrez les paramètrages suivants : a. Onglet Main : rien, laissez tous les champs vides tels quels. b. Onglet Options (changez seulement les options suivantes) : i. Type : comments ii. Show sidebar and/or actionbar? : Actionbar only iii. Show archive : décochez iv. Show choose category : décochez c. Onglet Control (changez seulement les options suivantes) : i. Can subscribe to this forum : décochez ii. Allow single view : décochez* d. Onglet Spam (changez seulement les options suivantes) : i. HTML tags allowed : 0 ii. Use image captcha? : cochez e. Onglet Fields : i. Display fields : Les deux premiers (User name who posted et Subject of post) ii. Required fields: idem que Display fields. f. Onglets Administrator et Text : rien, laissez tous les champs vides tels quels. 7.3 Les tableaux Il est possible d ajouter facilement des tableaux en tant que contenu. Cependant, il est recommandé de ne pas utiliser les tableaux pour de la mise en page. En clair, n utilisez les tableaux que lorsque les données des cellules ont un «lien» entre elles. Pour les autres cas, préférez l utilisation des colonnes grisées (chapitre 6.5.2). Pour ajouter et paramétrer un tableau : 1. Ajouter un nouveau bloc de contenu dans votre page (colonne «normale»)
2. Choisissez un contenu de page «Tableau» 3. Dans les paramètres : a. Laissez la mise en page en normal b. Choisissez le nombre de colonnes de votre tableau dans «colonnes du frame» c. Dans le champ Texte, intégrez les données de votre tableau, par ligne, et séparez soit par des virgules, soit par des points-virgules, soit par des traits horizontaux ( : altgr + le 6 du haut du clavier). Ex : donnera : 4. Continuez les paramétrages dans les options du plugin : a. Titre du tableau : apparait au dessus du tableau b. Résumé : Texte descriptif du contenu du tableau (facultatif, lu par les synthèses vocales des ordinateurs équipés pour des malvoyants, aide à l accessibilité) c. Le pied du tableau «tfoot» : si vous souhaitez mettre en valeur (en gras) la dernière ligne du tableau, cochez cette case. d. Position de l entête : dans l exemple, l entête est la première ligne du tableau (haut), mais vous pouvez choisir la première colonne (gauche). e. Aucun style css pour ce tableau: cochez cette case (la css s applique par défaut à tous les tableaux, pas besoin de rajouter de classe personnalisée) Onglet Analyse du tableau : f. Délimiteur de texte : aucun g. Délimiteur de champ : choisissez le caractère séparateur que vous avez mis dans le texte en point 3 c (, ; ou ).