Bienvenue dans le cours sur l’édition de texte sur un site web

Présentation au sujet: "Bienvenue dans le cours sur l’édition de texte sur un site web"— Transcription de la présentation:

1 Bienvenue dans le cours sur l’édition de texte sur un site web
Centre d’échange d’informations sur la Convention sur la Diversité Biologique Bienvenue dans le cours sur l’édition de texte sur un site web développé avec le PTK

2 Objectif de ce manuel : Etre capable d’éditer du texte sur un site web
développé avec le Portal ToolKit (PTK)

3 Prérequis avant de lire ce manuel :
Avoir pris connaissance des manuels suivants : - « Introduction et connexion au PTK » « Métadonnées »

4 Comme dans Word, le PTK vous permet de mettre en page votre texte de façon personnalisée. Attention, il n’y a que dans le champ «Corps» de l’objet PTK que vous ferez des modifications et jamais dans le champ «Description» !

5 L’ensemble des fonctions d’édition du texte figurent dans la partie supérieure du champ «Corps ».

6 Pour éditer du texte, la première chose à faire est de sélectionner
la phrase ou la portion de texte que vous voulez éditer. Ici, vous pouvez constater que seule la première phrase est sélectionnée (sur fond gris) ainsi toutes les mises en forme ne s’appliqueront qu’à cette première phrase.

7 Le premier menu déroulant intitulé «Format» permet de définir
le format du texte. Par défaut, le PTK mettra le texte au format «Paragraphe», nous vous conseillons de le laisser ainsi. «Div» indique un bloc de texte. Viennent ensuite les différents formats de titres selon leur niveau hiérarchique (de 2 à 6, le titre de niveau 1 étant le texte du champ «Titre» de l’objet), enfin le format «Bloc de citation» permettra d’ajouter une indentation.

8 Paragraphe Div Titre 2 Titre 3 Titre 4 Titre 5 Titre 6 Bloc de citation Ci-dessus vous pouvez voir un exemple de chaque format tel qu’il apparaitra sur la page web du PTK.

9 Le PTK utilise des fichiers CSS (Cascading Style Sheets) pour définir la police et la taille du texte. Nous vous conseillons fortement de ne pas utiliser les fonctionnalités de modification de la police et de la taille de votre texte montrées aux pages suivantes...

10 Le menu déroulant « police » : permet de définir le type
de police du texte.

11 Le dernier menu déroulant, intitulé « Taille », est celui qui permet de définir la taille du texte.

12 B: vous permet de mettre le texte en gras (Bold en anglais)

13 I: vous permet de mettre le texte en italique

14 U: vous permet de souligner du texte (Underline en anglais)

15 ABC : vous permet de rayer du texte

16 Voilà comment s’afficheront les 4 types de mise en forme du texte
sur le site PTK.

17 Les 4 prochains boutons vous permettent d’aligner le texte sur la page web.

18 Le premier bouton vous permet d’aligner le texte à gauche.

19 Le second bouton vous permet de centrer le texte.

20 Le troisième bouton vous permet d’aligner le texte à droite.

21 Le dernier bouton vous permet de justifier le texte.

22 Les 4 prochains boutons vous permettent de créer des listes et d’ajouter / supprimer des indentations dans le texte.

23 Le 1er type est une liste non numérotée, dite « à puces ».

24 Le 2nd type est une liste numérotée.

25 Le 3ème bouton vous permet d’ajouter une indentation.

26 Le 4ème bouton vous permet de supprimer l’indentation
Le 4ème bouton vous permet de supprimer l’indentation. Il n’est visible que lorsque vous placez le curseur sur une indentation.

27 Le bouton suivant vous permet d’ancrer du texte : ce texte renverra vers une autre zone de la page ou une autre page du site. Prenons un exemple :

28 Ici, chaque question a été ancrée avec la réponse lui correspondant.
Ainsi les visiteurs n’auront qu’à cliquer sur la question pour être redirigé automatiquement vers sa réponse.

29 2 – Cliquez sur le logo représentant une ancre marine
1 – Placez le curseur à l’endroit où vous voulez insérer l’ancrage Comment ancrer du texte ? Ici nous allons ancrer la question 1 à sa réponse.

30 Puis cliquez sur le bouton « Insérer ».
Une fenêtre « Insérer/ éditer une ancre » s’est ouverte. Vous pouvez maintenant taper le nom de l’ancre, ici, on a choisi « Question1 ».

31 L’ancrage a bien été ajouté au début de la réponse à la question 1.
La prochaine étape est de créer un lien hypertexte de la question vers l’ancrage.

32 Vous devez sélectionner le texte sur lequel vous voulez créer le lien, ici il s’agit de toute la phrase.

33 Vous devez sélectionner le texte sur lequel vous voulez créer le lien, ici il s’agit de toute la phrase. Puis vous devez cliquer sur l’icône « Insérer / Editer un lien » représenté par la chainette.

34 La fenêtre « Insert / Edit link » s’est ouverte.

35 Puis cliquez sur le bouton « Insert ».
Vous devez alors taper l’adresse de l’ancrage suivie de son nom précédé d’un # : ici c’est donc

36 Vous pouvez constater que le lien hypertexte a bien été ajouté.
Ainsi en cliquant sur la question les visiteurs du site seront directement réorientés vers la réponse. Si vous voulez voir ce que ça donne sur un site web actif, voilà le lien vers la page du blog de la COP10 qui nous a servi d’exemple ici.

37 Les deux boutons suivants ne seront fonctionnels qu’à condition
de sélectionner du texte. Ils vous permettront de créer des liens hypertextes. Un manuel spécial a été développé sur le sujet, il est ici, nous n’en détaillerons donc pas l’utilisation…

38 Ce bouton va vous permettre d’insérer un tableau dans le texte.
Nous allons vous en expliquer les différentes étapes :

39 La 1ère étape est de cliquer sur le bouton « Insérer un nouveau tableau »

40 Une nouvelle fenêtre appelée « Insérer/ modifier un tableau » s’ouvre.

41 Puis cliquer sur le bouton « Insérer ».
Vous pouvez paramétrer : le nombre de colonnes le nombre de lignes etc…

42 Le but de ce cours n’étant pas de vous apprendre à faire un tableau, nous n’irons pas plus loin dans les explications. Un cours sera prochainement développé sur le sujet.

43 Tous les boutons suivants ne seront fonctionnels qu’après avoir
créé un tableau. Vous découvrirez leurs fonctionnalités dans le cours prévu à cet effet.

44 Ce bouton vous permet d’insérer une ligne horizontale dans le texte.

45 Ce bouton vous permet de supprimer la mise en forme de tout ou d’une partie du texte.

46 Ce bouton vous permet de mettre le texte sélectionné en indice.

47 Ce bouton vous permet de mettre le texte sélectionné en exposant.

48 Ce bouton vous permet de coller du texte au format « texte brut ».

49 Ce bouton vous permet de coller du texte provenant de Word en gardant toute la mise en page du texte initial.

50 Ce bouton vous permet de changer la couleur du texte.

51 Ce bouton vous permet de changer la couleur de l’arrière plan du texte.

52 Ce bouton vous permet d’insérer et de mettre en forme des images, voir le cours intitulé « Insérer une photo » pour de plus amples détails sur le sujet.

53 Ce bouton vous permet d’avoir un aperçu du texte tel qu’il apparaîtra
sur votre site PTK.

54 Ce bouton permet de nettoyer le code HTML inutile.

55 Ce bouton permet de voir le code HTML associé au texte.

56 Ce bouton permet d’accéder à de l’information technique sur
le logiciel TinyMCE utilisé par les développeurs du site.

57 Ce bouton permet d’afficher le champ en mode plein écran.

58 Bravo, vous êtes arrivé à la fin de ce cours !