léditeur de page © michel durieux – mars 2007 fédération cfdt santé sociaux

L’éditeur de pageL’éditeur de page

© Michel DURIEUX – mars 2007Fédération CFDT Santé Sociaux

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.

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

La première partie est consacrée aux renseignementset 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.

Accès protégé par mot de passe

L’accès à la page lui sera interdit s’il ne le saisit pas correctement.

Lorsque l’internaute voudra ouvrir cette page une fenêtre lui demandera ce mot de passe.

Toujours dans la partie supérieure de votre éditeur de page, vous pouvez saisir un mot de passe.

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.

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

É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

É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

É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

É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

É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 claviermaintenez 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.

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

É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 :.

Vous pouvez également déterminer des couleurs spécifiques en utilisant la palette de couleurs. Cliquez sur le lien « autres couleurs » :.

A noter que les codes R-V-B correspondant à l’orange et au vert de notre charte graphique sont les suivants :

É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]

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


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]


Votre page disposera maintenant d’un lien hypertexte permettant à l’internaute de se rendre d’un simple « clic » au paragraphe spécifié.

É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]

É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 http:// 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 (www.cfdt.fr par exemple)

www.cfdt.fr

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.


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.


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.

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


Vous constaterez que le lien s’effectue sur le texte sélectionné au lieu de reproduire l’adresse URL comme dans le premier exemple

É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 lienou sélectionner le mot sur lequel il doit s’exercer.

Puis

cliquez sur le bouton [insérer un lien hypertexte]

É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


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


Sélectionnez sur le disque dur de votre ordinateur le fichier à sélectionner ou ouvrir puis cliquez sur le bouton [ouvrir] :


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]


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

É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

Éditeur de texte – Insérer une image (suite)

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

Vous pouvez déplacer votre image en l’alignant à gauche, à droite, ou en l’intégrant dans des tableaux


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]


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

Éditeur de texte – Insérer une animation flash ou un médiaDe 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

É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]

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

É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

a1exemple de cellule se justifiant sur le contenu

b1celulle 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


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


Exemple de tableau réalisé en utilisant les

combinaisons suivantes

É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

Éditeur de texte – autres fonctionnalitésPour 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

É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

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

Éditeur de texte – Utilisation de styles

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

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

Éditeur de texte – Utilisation des formats de paragraphes

Le choix de la police de caractères et la taille

Gras, Italique, souligné, barré

Les alignements : gauche, centre, droit ou justifié

Les puces et numérotations de paragraphe

Les retraits vers la gaucheou vers la droite

léditeur de page © michel durieux – mars 2007 fédération cfdt santé sociaux

Documents