L’éditeur de page © Michel DURIEUX – mars 2007 Fédération CFDT Santé Sociaux.

Présentation au sujet: "L’éditeur de page © Michel DURIEUX – mars 2007 Fédération CFDT Santé Sociaux."— Transcription de la présentation:

1 L’éditeur de page © Michel DURIEUX – mars Fédération CFDT Santé Sociaux

2 L’éditeur de page, correspond à un traitement de texte sensiblement équivalent à votre logiciel habituel : Word. Toutefois, certaines fonctionnalités sont spécifiques à l’objectif de publication sur Internet. Cette présentation est donc le complément indispensable au module de formation « création de menu » Même si plusieurs icônes ou fonctionnalités vous semblent évidentes, il est important de consulter l’intégralité de cette présentation. Dans ce module d’aide et de formation, nous allons détailler les fonctions liées à chaque icône de l’éditeur de page.

3 Après avoir choisi l’option « ajouter une sous page » votre éditeur de page s’ouvre sous la présentation suivante. C’est à partir de cet éditeur que vous pourrez gérer le contenu des pages Internet de votre site. Pour enregistrer votre page et fermer l’éditeur, utilisez les boutons suivants

4 La première partie est consacrée aux renseignements et au statut de la page créée.
Le titre correspond à ce qui s’affichera dans les boutons de menu ou dans les sous rubriques. Il doit donc être très court et explicite. La position correspond à l’emplacement où vous souhaitez placer cette page. Ceci vous permet d’organiser l’ordre des menus et des sous rubriques (Ex. : placer le menu 3 après le menu « Qui sommes-nous ?»). Le statut en travaux ou en ligne. Il vous permet de sauvegarder votre page et la garder en mémoire sans que celle-ci soit consultable par les internautes. Vous pourrez ainsi la retravailler ultérieurement. A l’inverse, le statut en ligne a pour effet de rendre la page immédiatement visible sur votre site Internet.

5 Accès protégé par mot de passe
Toujours dans la partie supérieure de votre éditeur de page, vous pouvez saisir un mot de passe. Lorsque l’internaute voudra ouvrir cette page une fenêtre lui demandera ce mot de passe. L’accès à la page lui sera interdit s’il ne le saisit pas correctement.

6 L’espace temporaire, ou de brouillon, de votre éditeur de page
Cette partie, invisible aux internautes, vous permet de préparer du texte ou de réaliser une mise en page. Afin d’effectuer sa mise en ligne, il vous suffira de sélectionner votre texte et sa mise en page, le copier et le coller dans la troisième partie de l’éditeur de page.

7 L’éditeur de page Internet
C’est dans cette partie que vous réaliserez votre mise en page. Cet éditeur fonctionne comme un traitement de texte. Toutefois, ses fonctionnalités et ses particularités vous sont présentées dans le fichier d’aide « éditeur de page Internet ».

8 Éditeur de texte – édition en pleine page
Le premier bouton, permet un affichage en plein écran de votre éditeur de texte ce qui permet une meilleur lisibilité en mode édition. Cliquez Il vous faudra cliquer à nouveau sur ce bouton pour revenir à un mode d’affichage vous permettant d’enregistrer votre page et de fermer l’éditeur. Cliquez

9 Éditeur de texte – affichage et recherche
Le second bouton, vous permet de visualiser l’affichage de votre page selon différentes résolution d’écran. Cliquez Le bouton suivant, vous permet d’effectuer la recherche d’un mot et/ou de le remplacer sur tout ou partie de la page Cliquez

10 Éditeur de texte – Fonctions copier / coller
Ces fonctions sont bien connues des utilisateurs de tout traitement de texte. A noter que les « raccourcis clavier » fonctionnent tout également. Cliquez Couper : sélectionner le texte puis maintenez enfoncée la touche [Ctrl] et tapez la lettre X sur votre clavier ou bien cliquez sur le bouton suivant Cliquez Copier : sélectionner le texte puis maintenez enfoncée la touche [Ctrl] et tapez la lettre C sur votre clavier ou bien cliquez sur le bouton suivant Cliquez Coller : Placer le curseur à l’endroit où vous souhaiter coller le texte puis maintenez enfoncée la touche [Ctrl] et tapez la lettre V sur votre clavier ou bien cliquez sur le bouton suivant Cliquez

11 Éditeur de texte – Collage spéciale d’un texte issu d’un document Word
Vous pouvez très simplement intégrer un texte mis en page sous votre traitement de texte habituel comme Word par exemple. Toutefois, cette méthode peux provoquer quelques dysfonctionnements d’affichage. Il est donc conseiller de procéder en sélectionnant votre texte dans le document word. Puis de se positionner dans votre page web et d’utiliser, dans votre éditeur, le bouton « coller un document word ». Vous obtiendrez alors un copie de votre texte « Word » tout en conservant la police de caractère et les couleurs de votre page web. Cliquez Ouvrez votre document « Word » puis sélectionner le texte à intégrer dans votre page web Cliquez

12 Éditeur de texte – Collage spéciale d’un texte issu d’un document Word (suite)
Revenez à votre éditeur de page puis : placez le pointeur de souris à l’endroit où vous souhaitez insérer le texte copié Cliquez sur le bouton « Coller un document word » Cliquez Dans la nouvelle fenêtre, collez le document en utilisant le raccourci clavier maintenez enfoncée la touche [Ctrl] et tapez la lettre V Cliquez ensuite sur le bouton [OK] Cliquez Votre texte est maintenant inséré à votre page web tout en respectant la police et la couleur des caractères de cette page.

13 Éditeur de texte – Annuler ou répéter une action
Ces fonctions sont bien également bien connues des utilisateurs de tout traitement de texte. Annule l’action précédente Rétabli l’action.

14 Éditeur de texte – Couleur des caractères et de l’arrière plan
Pour modifier la couleur des caractères sélectionnés, et/ou intégrer un arrière p de couleur, vous devez sélectionner le texte ou la zone puis cliquer sur l’un et ou l’autre de ces boutons :. A noter que les codes R-V-B correspondant à l’orange et au vert de notre charte graphique sont les suivants : Vous pouvez également déterminer des couleurs spécifiques en utilisant la palette de couleurs. Cliquez sur le lien « autres couleurs » :.

15 Éditeur de texte – Signets
Un signet est un point de d’ancrage dans un document. La création de signet, permet ensuite de créer des liens hypertextes qui permettront aux internautes de se placer rapidement dans une même page web (un document ) par exemple, d’aller directement du sommaire à la conclusion d’un document de 100 pages. Voir dans les diapositives suivantes les liens Hypertextes Dans un premier temps, vous devez placer le curseur devant le « point d’ancrage souhaité. (exemple : devant sommaire) Cliquez ensuite sur le bouton [insérer un signet] puis donnez un nom à cet emplacement Cliquez ensuite sur le bouton [Insérer]

16 Éditeur de texte – Signets (suite)
Le repérage de ces signets est visible en mode administrateur mais que ces marques sont invisibles pour l’internaute.

17 Éditeur de texte – Signets (suite)
Pour créer les liens permettant de se déplacer dans la page, vous devez sélectionner le texte sur lequel l’internaute devra cliquer pour accéder vers le « signet » en question. Puis cliquez sur le bouton [insérer un lien hypertexte] Dans la nouvelle fenêtre, vous cocherez l’option [signet] puis vous sélectionnerez le nom du signet approprié Enfin, cliquez sur le bouton [insérer]

18 Éditeur de texte – Signets (suite)
Votre page disposera maintenant d’un lien hypertexte permettant à l’internaute de se rendre d’un simple « clic » au paragraphe spécifié.

19 Éditeur de texte – Créer un lien hypertexte vers un site Internet
Le lien hypertexte est la base de la navigation sur Internet. En cliquant sur un mot, une phrase, une image l’internaute déclenche l’ouverture d’un nouvelle fenêtre, d’un autre site Internet ou d’un fichier (word, pdf, excel, son etc…) Avec votre éditeur de page, vous pouvez réaliser très simplement ces liens. Positionnez le curseur à l’endroit où vous souhaitez insérer un lien hypertexte. Cliquez sur le bouton [Insérer un lien hypertexte]

20 Éditeur de texte – Créer un lien hypertexte vers un site Internet (suite)
Dans cette nouvelle fenêtre vous devrez saisir les informations utiles à l’action à effectuer . Dans le menu déroulant de la première cellule, vous choisirez le protocole si vous souhaitez créer un lien destiné à ouvrir un site Internet (ou mailto: si vous souhaitez renvoyer vers un message électronique). Dans la seconde cellule, vous saisissez l’adresse du site à ouvrir ( par exemple) Dans le menu déroulant de la cellule « cible », vous déterminerez si l’ouverture du site doit s’effectuer en remplacement de la fenêtre actuelle de lecture où dans une nouvelle fenêtre. Dans le cas d’un lien vers un autre site que le votre, il est préférable de renvoyer vers une nouvelle fenêtre car lors de sa fermeture, l’internaute reviendra automatiquement vers votre site.

21 Éditeur de texte – Créer un lien hypertexte vers un site Internet (suite)
Vous pouvez saisir un petit texte qui s’affichera dans une « info bulle » lorsque l’internaute passera le pointeur de sa souris sur le lien hypertexte.. Ne vous reste plus qu’à actualiser et à cliquer sur le bouton [OK] pour constater les effets du lien sur votre page.

22 Éditeur de texte – Créer un lien hypertexte vers un site Internet (suite)
Vous pouvez réaliser votre lien hypertexte sur le contenu d’un mot ou d’une phrase, ce qui est plus est plus agréable à la lecture (notamment lorsque les adresses sont longues). Pour cela, vous devrez au préalable sélectionnez le mot ou la phrase sur laquelle doit s’exercer le lien. Puis cliquez sur le bouton Insérer un lien hypertexte Procédez ensuite exactement comme décrit dans la diapositive précédente.

23 Éditeur de texte – Créer un lien hypertexte vers un site Internet (suite)
Vous constaterez que le lien s’effectue sur le texte sélectionné au lieu de reproduire l’adresse URL comme dans le premier exemple

24 Éditeur de texte – Créer un lien hypertexte vers un document
Vous procéderez de la même manière que pour les liens vers des sites Internet : Pour La création du lien sur un mot ou une phrase sélectionnée ou par l’affichage de l’adresse URL si aucun terme n’a été sélectionné Pour L’ouverture dans une nouvelle page Pour L’info bulle s’affichant au passage du pointeur de la souris La seule différence réside dans l’obligation de télécharger sur votre « gestionnaire de fichiers » le document à ouvrir (ou télécharger). Voir module de formation relatif au gestionnaire de fichiers Placez-vous sur l’emplacement du lien ou sélectionner le mot sur lequel il doit s’exercer. Puis cliquez sur le bouton [insérer un lien hypertexte]

25 Éditeur de texte – Créer un lien hypertexte vers un document (suite)
A l’ouverture de la fenêtre d’insertion de lien hypertexte, vous devrez ouvrir le gestionnaire de fichier à l’aide de l ’icône [parcourir] A noter qu’il est inutile dans ce cas de choisir une source ou un protocole Internet. Cliquez Dans la fenêtre gestionnaire de fichiers : vous sélectionnez le répertoire dans lequel vous avez enregistré votre fichier Vous sélectionnez ensuite le fichier dans la partie droite de la fenêtre Le chemin d’accès doit alors s’afficher sous l’écran de visualisation Cliquez ensuite sur le bouton [OK] pour créer le lien

26 Éditeur de texte – Créer un lien hypertexte vers un document (suite)
Si le fichier à ouvrir ou télécharger n’est pas préalablement enregistré dans votre gestionnaire de fichiers, vous devez l’incorporer en procédant de la manière suivante : Placez-vous sur l’emplacement du lien ou sélectionner le mot sur lequel il doit s’exercer. Puis cliquez sur le bouton [insérer un lien hypertexte] Et ouvrez le gestionnaire de fichiers à l’aide du bouton [parcourir] Cliquez

27 Éditeur de texte – Créer un lien hypertexte vers un document (suite)
Sélectionnez sur le disque dur de votre ordinateur le fichier à sélectionner ou ouvrir puis cliquez sur le bouton [ouvrir] :

28 Éditeur de texte – Créer un lien hypertexte vers un document (suite)
Après avoir vérifié le chemin d’accès, procédez exactement comme pour les liens vers des sites Internet en choisissant un affichage dans la même page ou dans une nouvelle fenêtre. Vous pouvez également prévoir une info bulle qui s’affichera sur le lien. Cliquez sur le bouton [insérer]

29 Éditeur de texte – Créer un lien hypertexte vers un document (suite)
Après validation, l’affichage de lien se fera sur votre page web : Avec le chemin d’accès au fichier Ou sur le texte si vous l’aviez sélectionné au préalable. En cliquant sur le lien, l’internaute se verra invité à ouvrir ou à enregistrer le fichier

30 Éditeur de texte – Insérer une image
Pour insérer une image, placez le curseur au point d’insertion puis cliquez sur le bouton [image] Cliquez Après l’ouverture de votre gestionnaire de fichiers, vous choisirez le répertoire dans lequel vous avez stocké vos images Le chemin d’accès s’affichera sous l’aperçu Cliquez sur le bouton [OK] pour insérer l’image sélectionnée

31 Éditeur de texte – Insérer une image (suite)
Vous pouvez déplacer votre image en l’alignant à gauche, à droite, ou en l’intégrant dans des tableaux Nous vous conseillons de ne pas dépasser des résolutions320 *240 pixels pour des images à insérer sur des pages web. Par défaut, votre gestionnaire de fichiers dispose d’un répertoire « utiles » dans lequel sont stockés les logos de la fédération, et les icônes des principales applications (word, excel, power point, pdf etc…)

32 Éditeur de texte – Insérer une image (suite)
Si l’image a insérer ne figure pas dans votre gestionnaire de fichiers, vous devez la télécharger de la même manière que vous aviez téléchargé un fichier word (voir diapositives précédentes) Utilisez les fonctions : Parcourir Sélectionnez le fichier à partir de votre disque dur Cliquez sur le bouton [publier]

33 Éditeur de texte – Insérer une image (suite)
Enfin, vous pouvez : Créer une « info bulle » au passage de la souris sur l’image Redimensionner votre image Créer une bordure autour de votre image

34 Éditeur de texte – Insérer une animation flash ou un média
De la même manière que vous avez inséré une image, vous placez le curseur à l’endroit souhaité pour l’insertion puis vous cliquez sur le bouton Flash ou Média Vous déterminerez ensuite la taille de la fenêtre qui recevra l’animation, puis vous vous utiliserez votre gestionnaire de fichiers pour sélectionner l’animation Cliquez sur le bouton [OK] pour insérer l’animation sur votre page

35 Éditeur de texte – Insérer lien vers une autre page de votre site
Sélectionnez le texte sur lequel devra s’exercer le lien Cliquez sur le bouton [Lien interne] Dans l’affichage du plan de votre site, sélectionnez la page vers laquelle vous souhaitez diriger le lien Cliquez sur le bouton Cliques sur le bouton [valider] puis [OK]

36 Éditeur de texte – Insérer un tableau
Placez le curseur à l’endroit souhaité pour l’insertion puis cliquez sur le bouton [Insérer un tableau] Déterminez le nombre de colonnes et de lignes (par exemple : 2 colonnes sur 2 lignes) Un tableau sans bordure (représenté en pointillés) utilisera toute la largeur de votre page. Vous pouvez modifier l’aspect de ce tableau en plaçant le curseur dans une cellule du tableau puis en cliquant sur le bouton [Édition Tableau/Cellule] qui s’est alors activé, puis choisissez l’option [Modifier le tableau sélectionné] Dans cet exemple nous intervenons sur l’ensemble du tableau, mais vous pourrez travailler de la même manière sur une seule cellule de votre tableau.

37 Éditeur de texte – modifier un tableau
Dans le premier onglet, vous choisirez la présentation des cellules de votre tableau : La largeur des cellules se dimensionne en fonction du texte contenu dans la cellule a1 exemple de cellule se justifiant sur le contenu b1 celulle b1 justifée a2 b2 Vous pouvez déterminer la largeur des cellules soit en pixels soit en pourcentage de la page (exemple : 400 pixels de large pour 100 pixels de haut) a1 b1 a2 b2 Par défaut la largeur des cellules sera répartie sur la largeur totale de la fenêtre (page) a1 b1 a2 b2

38 Éditeur de texte – modifier un tableau
Dans le second onglet, vous choisirez : Le type d’alignement du texte dans la cellule (à gauche, centré, à droite) Les marges à l’intérieur des cellules L’épaisseur de la bordure (l’option collapse permet une affichage des cellules en bord à bord) Une couleur d’arrière plan (ou une image en arrière plan L’espacement entre les cellules

39 Éditeur de texte – modifier un tableau
Exemple de tableau réalisé en utilisant les combinaisons suivantes

40 Éditeur de texte – insérer une ligne et/ou une colonne dans un tableau
Placez le curseur dans une cellule (exemple b2) Cliquez sur le bouton [ Édition tableau/cellule ] Choisissez l’option Taille Dans la nouvelle fenêtre, choisissez l’action désirée : exemple insérer une ligne Puis insérer une colonne

41 Éditeur de texte – autres fonctionnalités
Pour insérer des caractères spéciaux Pour insérer une ligne sur la page ou dans une cellule de tableau Pour annuler les modifications de mise en page Pour effacer tout le contenu de la page

42 Éditeur de texte – autres fonctionnalités
Vous pouvez afficher les codes de la page. Ce qui permettra aux habitués de travailler en mode programmation HTML

43 Éditeur de texte – Utilisation de styles
Pour votre mise en page, vous pouvez utiliser des styles de polices de caractères, taille et couleur prédéterminés. Sélectionnez le texte à traiter : Puis cliquer sur le bouton [sélectionner un style ] Dans la partie droite de la fenêtre vous pourrez sélectionner le style de votre choix Le texte sélectionné sera alors automatiquement modifié au format désiré.

44 Éditeur de texte – Utilisation des formats de paragraphes
Tout comme les styles, vous pouvez appliquer des formats prédéfinis pour l’ensemble d’un paragraphe. Sélectionner un mot ou placer le curseur dans le paragraphe à traiter : Puis cliquer sur le bouton [paragraphe ] Dans le menu déroulant vous pourrez sélectionner le style de votre choix Le texte sélectionné sera alors automatiquement modifié au format désiré.

45 Éditeur de texte – Utilisation des formats de paragraphes
Les derniers boutons, correspondent aux fonctions classiques bien connues de tout utilisateur d’un traitement de texte. Gras, Italique, souligné, barré Le choix de la police de caractères et la taille Les alignements : gauche, centre, droit ou justifié Les puces et numérotations de paragraphe Les retraits vers la gauche ou vers la droite

46 FIN