Editeur de texte. Web4 v1.00. Editeur de texte

Transcription

1 Editeur de texte 1

2 TABLE DES MATIÈRES Editeur de texte... 1 Utilisation de l éditeur de texte... 3 Raccourcis clavier :... 3 Interface... 3 Liste des fonctionnalités... 4 Insérer et éditer une image... 7 Insérer un lien vers un document... 9 Insérer un lien vers une page de mon site Insérer une vidéo depuis Youtube Insérer une vidéo depuis dailymotion Insérer une video depuis vimeo Insérer une carte Google Map Mise en page avancée Mise en page avancée Alignement des images Insérer un tableau Alignement avancée Créer un lien en forme de bouton

3 UTILISATION DE L ÉDITEUR DE TEXTE RACCOURCIS CLAVIER : Ces raccourcis clavier vont vous permettre d être plus efficace avec l éditeur de texte : Ctrl+c : Copier la sélection dans le presse papier Ctrl+v : Coller la sélection dans l éditeur de texte Ctrl+a : Tout sélectionner Ctrl+x : Couper la sélection dans le presse papier Ctrl+z : Annuler la dernière action Ctrl+y : Refaire la dernière action Shift+enter : Retour à la ligne simple Enter : Retour à la ligne et création d un paragraphe INTERFACE L interface se décompose en deux parties une barre d outil et la zone de contenu : 3

4 LISTE DES FONCTIONNALITÉS Nous allons décrire dans cette section le rôle des différents bouton de la barre d outil : Bouton Description Afficher ou modifier le code source du document (pour les utilisateurs avancés). Couper le fragment de texte sélectionné dans le presse-papiers. Copier le fragment de texte sélectionné dans le presse-papiers. (ctrl+c) Coller le contenu copié dans le presse papier avec la mise en forme. Coller le contenu du presse-papiers à copier sans formatage. Coller le contenu copié à partir de Microsoft Word. Tout sélectionner. (ctrl+a) Annuler ou rétablir la dernière action effectuée. (ctrl+z / ctrl+y) Enlever la mise en forme Rechercher. Rechercher et remplacer dans le texte. Mettre la sélection en gras. (ctrl+b) Mettre la sélection en italique. (ctrl+i) Mettre la sélection en souligné. (ctrl+u) 4

5 Mettre la sélection en barré. Mettre la sélection en indice. Mettre la sélection en exposant. Mettre la sélection en citation. Insérer un caractère spécial. Insérer / supprimer la sélection en liste numérotés. Insérer / supprimer la sélection en liste à puces. Diminuer le retrait Augmenter le retrait Aligner la sélection à gauche Centrer la sélection Aligner la sélection à droite Justifier la sélection Insérer un lien Supprimer un lien Insérer une ancre dans le texte Insérer une image 5

6 Insérer un tableau Insérer un séparateur horizontal Format du paragraphe : titre, normal, etc. Style de police Taille de police Couleur de texte Couleur d arrière plan Afficher les blocs 6

7 INSÉRER ET ÉDITER UNE IMAGE Reportez-vous au chapitre gestion des fichiers du manuel d utilisation de votre site afin de placer vos images sur le serveur AVANT d insérer votre image dans le contenu. Nous vous conseillons également de redimensionner préalablement vos images afin d optimiser le chargement de vos pages. Pour insérer une nouvelle image dans le contenu cliquer sur le bouton images : Puis cliquer sur le bouton Explorer le serveur : Sélectionner l image à insérer en parcourant les dossiers, vous pouvez apercevoir un aperçu de l image en plaçant la souris comme ci-dessous : 7

8 Une fois l image sélectionnée vous pouvez modifier les dimensions comme ci-dessous Editeur de texte Le verrou vous permet de conserver les proportions de l image afin de ne pas la déformer. Il suffit ensuite de cliquer sur le bouton OK pour insérer l image dans le contenu. Pour éditer l image, il vous suffit de faire un clic droit sur l image afin d accéder à nouveau aux propriétés de l image : 8

9 INSÉRER UN LIEN VERS UN DOCUMENT Reportez-vous au chapitre gestion des fichiers afin de placer vos images sur le serveur AVANT d insérer votre image dans le contenu. Pour insérer un lien vers un document sélectionner la partie du texte qui contiendra le lien puis cliquer sur le bouton liens : Cliquer sur le bouton explorer le serveur Puis sélectionner votre document : 9

10 Valider ensuite avec le bouton OK comme ci-dessous Votre lien est maintenant en place : Vous pouvez supprimer votre lien avec le bouton Supprimer le lien comme ci-dessous : Si vous souhaitez éditer le lien vous pouvez faire un clic droit sur le lien : 10

11 INSÉRER UN LIEN VERS UNE PAGE DE MON SITE Pour insérer un lien vers une page de votre site vous devez copier le lien de la page en le sélectionnant et en le copiant avec le raccourci ctrl+c : Il vous suffit ensuite de créer un lien comme dans l exemple précédent : Puis de coller avec le raccourci ctrl+v votre lien comme ci-dessous : Il vous suffit maintenant de valider en cliquant sur le bouton OK. 11

12 INSÉRER UNE VIDÉO DEPUIS YOUTUBE Cliquer sur le bouton Partager Copier le code suivant (ctrl+c) Coller le dans la source de votre contenu (ctrl+v) 12

13 INSÉRER UNE VIDÉO DEPUIS DAILYMOTION Cliquer sur le bouton Export Cliquer sur le bouton Lecteur exportable Coller le dans la source de votre contenu (ctrl+v) 13

14 INSÉRER UNE VIDEO DEPUIS VIMEO Cliquer sur le bouton Share Copier le code situé ci-dessous : Coller le dans la source de votre contenu (ctrl+v) 14

15 INSÉRER UNE CARTE GOOGLE MAP Cliquer sur le bouton comme ci-dessous Copier le code situé ci-dessous : Coller le dans la source de votre contenu (ctrl+v) 15

16 MISE EN PAGE AVANCÉE Dans cette section nous allons regarder comment utiliser l éditeur de texte pour réaliser des mises en pages avancées : ALIGNEMENT DES IMAGES Vous pouvez facilement aligner vos images autour de vos texte dans vos contenus en vous rendant des les propriétés de l image puis en sélectionnant un alignement : Vous pouvez également ajouter des espacements entre l image et votre texte avec l aide des champs espacement horizontal et espacement vertical : Avec un alignement à gauche et des espacements de 10 vous aurez le résultat suivant par exemple : 16

17 INSÉRER UN TABLEAU Vous pouvez insérer un tableau dans votre contenu avec le bouton tableau : Vous pouvez alors sélectionner le nombre de colonnes et de lignes que vous souhaitez : Vous devriez obtenir le tableau suivant avec les valeurs de bases : 17

18 Vous pouvez changer les propriétés du tableau mais également des lignes et des cellules en effectuant un clic droit : De la même manière vous pourrez insérer une ligne par le biais de ce menu : 18

19 ALIGNEMENT AVANCÉE Vous pouvez utiliser les tableaux de l exemple précédent afin de vous aider à effectuer vos alignements : Il suffit de régler les valeurs Taille de bordure, espacement des cellules et marge interne des cellules à 0 pour obtenir le tableau suivant : 19

20 CRÉER UN LIEN EN FORME DE BOUTON Accéder aux propriétés avancées de votre lien : Puis dans le champ classe du CSS insérer le texte «btn» Vous obtenez alors le résultat suivant : 20