La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


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 2007 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 à lobjectif 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 lintégralité de cette présentation. Dans ce module daide et de formation, nous allons détailler les fonctions liées à chaque icône de léditeur de page.

3 Après avoir choisi loption « ajouter une sous page » votre éditeur de page souvre sous la présentation suivante. Cest à 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 saffichera dans les boutons de menu ou dans les sous rubriques. Il doit donc être très court et explicite. La position correspond à lemplacement où vous souhaitez placer cette page. Ceci vous permet dorganiser lordre 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 linverse, 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 Laccès à la page lui sera interdit sil ne le saisit pas correctement. Lorsque linternaute 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.

6 Lespace 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 deffectuer 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 Cest 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 daide « é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 daffichage vous permettant denregistrer votre page et de fermer léditeur. Cliquez

9 Éditeur de texte – affichage et recherche Le second bouton, vous permet de visualiser laffichage de votre page selon différentes résolution décran. Cliquez Le bouton suivant, vous permet deffectuer la recherche dun 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 à lendroit 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 dun texte issu dun 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 daffichage. 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 dutiliser, 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 dun texte issu dun document Word (suite) Revenez à votre éditeur de page puis : placez le pointeur de souris à lendroit 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 laction précédente Rétabli laction.

14 Éditeur de texte – Couleur des caractères et de larriè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 lun et ou lautre 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 à lorange et au vert de notre charte graphique sont les suivants :

15 Éditeur de texte – Signets Un signet est un point de dancrage 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, daller directement du sommaire à la conclusion dun document de 100 pages. Voir dans les diapositives suivantes les liens Hypertextes Dans un premier temps, vous devez placer le curseur devant le « point dancrage 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 linternaute.

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 linternaute 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 loption [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 dun lien hypertexte permettant à linternaute de se rendre dun 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 linternaute déclenche louverture dun nouvelle fenêtre, dun autre site Internet ou dun fichier (word, pdf, excel, son etc…) Avec votre éditeur de page, vous pouvez réaliser très simplement ces liens. Positionnez le curseur à lendroit 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 à laction à 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 ladresse du site à ouvrir ( par exemple) Dans le menu déroulant de la cellule « cible », vous déterminerez si louverture du site doit seffectuer en remplacement de la fenêtre actuelle de lecture où dans une nouvelle fenêtre. Dans le cas dun 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, linternaute 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 saffichera dans une « info bulle » lorsque linternaute 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) Pour cela, vous devrez au préalable sélectionnez le mot ou la phrase sur laquelle doit sexercer 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 dun mot ou dune phrase, ce qui est plus est plus agréable à la lecture (notamment lorsque les adresses sont longues).

23 Éditeur de texte – Créer un lien hypertexte vers un site Internet (suite) Vous constaterez que le lien seffectue sur le texte sélectionné au lieu de reproduire ladresse 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 laffichage de ladresse URL si aucun terme na été sélectionné Pour Louverture dans une nouvelle page Pour Linfo bulle saffichant au passage du pointeur de la souris La seule différence réside dans lobligation 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 lemplacement du lien ou sélectionner le mot sur lequel il doit sexercer. Puis cliquez sur le bouton [insérer un lien hypertexte]

25 Éditeur de texte – Créer un lien hypertexte vers un document (suite) A louverture de la fenêtre dinsertion de lien hypertexte, vous devrez ouvrir le gestionnaire de fichier à laide de l icône [parcourir] A noter quil 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 daccès doit alors safficher 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 nest pas préalablement enregistré dans votre gestionnaire de fichiers, vous devez lincorporer en procédant de la manière suivante : Placez-vous sur lemplacement du lien ou sélectionner le mot sur lequel il doit sexercer. Puis cliquez sur le bouton [insérer un lien hypertexte] Et ouvrez le gestionnaire de fichiers à laide 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 daccè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 saffichera 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, laffichage de lien se fera sur votre page web : Avec le chemin daccès au fichier Ou sur le texte si vous laviez sélectionné au préalable. En cliquant sur le lien, linternaute 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 dinsertion puis cliquez sur le bouton [image] Cliquez Après louverture de votre gestionnaire de fichiers, vous choisirez le répertoire dans lequel vous avez stocké vos images Le chemin daccès saffichera sous laperçu Cliquez sur le bouton [OK] pour insérer limage sélectionnée

31 É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 dun 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 lalignant à gauche, à droite, ou en lintégrant dans des tableaux

32 Éditeur de texte – Insérer une image (suite) Si limage 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 limage 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 à lendroit souhaité pour linsertion puis vous cliquez sur le bouton Flash ou Média Vous déterminerez ensuite la taille de la fenêtre qui recevra lanimation, puis vous vous utiliserez votre gestionnaire de fichiers pour sélectionner lanimation Cliquez sur le bouton [OK] pour insérer lanimation sur votre page

35 Éditeur de texte – Insérer lien vers une autre page de votre site Sélectionnez le texte sur lequel devra sexercer le lien Cliquez sur le bouton [Lien interne] Dans laffichage 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 à lendroit souhaité pour linsertion 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 laspect de ce tableau en plaçant le curseur dans une cellule du tableau puis en cliquant sur le bouton [Édition Tableau/Cellule] qui sest alors activé, puis choisissez loption [Modifier le tableau sélectionné] Dans cet exemple nous intervenons sur lensemble 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 a2b2 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) a1b1 a2b2 Par défaut la largeur des cellules sera répartie sur la largeur totale de la fenêtre (page) a1b1 a2b2

38 Éditeur de texte – modifier un tableau Dans le second onglet, vous choisirez : Le type dalignement du texte dans la cellule (à gauche, centré, à droite) Les marges à lintérieur des cellules Lépaisseur de la bordure (loption collapse permet une affichage des cellules en bord à bord) Une couleur darrière plan (ou une image en arrière plan Lespacement 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 loption Taille Dans la nouvelle fenêtre, choisissez laction 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 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

44 Tout comme les styles, vous pouvez appliquer des formats prédéfinis pour lensemble dun 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

45 Les derniers boutons, correspondent aux fonctions classiques bien connues de tout utilisateur dun 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 gauche ou vers la droite

46 FIN


Télécharger ppt "Léditeur de page © Michel DURIEUX – mars 2007 Fédération CFDT Santé Sociaux."

Présentations similaires


Annonces Google