site web « savoirs cdi » création des pages et saisie des contenus · guide d’utilisation –...

Guide d’utilisation – Alimentation du site Ecole pour tous sur 44

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.

Date : version 1 : 31.10.2008


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


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


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.

Guide d’utilisation – Alimentation du site Savoir CDI sur 44

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 Concepts de base TYPO3

3.1 La page

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 Créer un lien (vers un fichier, une page interne ou encore vers un site

extérieur).

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 :


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


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 sous-

dossiers.

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 |).

site web « savoirs cdi » création des pages et saisie des contenus · guide d’utilisation –...

Documents