Guide d utilisation FCK Editor

Transcription

1 Guide d utilisation FCK Editor 1

2 Sommaire FCK Editor : introduction... 2 La mise en forme... 3 Agrandir la fenêtre de saisie... 3 Copier/Coller un contenu existant... 3 L utilisation des puces... 4 Création d un tableau... 5 Intégration d une image... 7 Enregistrer une image dans la bibliothèque... 8 Enregistrer une image à «usage unique»... 8 Afficher une image dans une fenêtre séparée... 9 Création d un lien / Chargement d un document Créer un lien vers un site ou une adresse mail Créer des liens vers des ancres Créer des liens vers des documents de la GED (Intranet Hospitalier) Publier un document FCK Editor : introduction 2

3 Atout Majeur Concept a fait le choix, dans ses différents logiciels créés pour son Intranet SESAME, d utiliser l éditeur de texte FCK Editor. Nous allons voir dans cette documentation les différentes possibilités offertes par cet éditeur WYSIWYG (What You See Is What You Get) dont le principe est de saisir vos informations en effectuant vous-même la mise en forme et en visualisant celle-ci directement. La mise en forme La mise en forme de votre texte se fera par paragraphe. Pour créer un nouveau paragraphe, utilisez la touche Entrée de votre clavier. Cela aura pour effet de fermer le paragraphe en cours, de sauter une ligne et de créer un nouveau paragraphe. Pour aller à la ligne, en restant dans le paragraphe en cours, cliquez sur Shift + Entrée. Certaines options de mises en forme (alignement, alinéa, puces, ) concerneront l ensemble du paragraphe. Il vous faudra donc créer un nouveau paragraphe pour changer celles-ci. Agrandir la fenêtre de saisie Afin de pouvoir visualiser plus facilement le contenu que vous saisissez, il est possible d éditer le texte en pleine page. Pour cela, cliquez sur l icône ci-dessous 3

4 Copier/Coller un contenu existant Si vous souhaitez copier le contenu d un document existant comme Word ou Open Office vers FCK Editor, nous vous conseillons d en enlever la mise en forme (police, taille caractères, ) car celle-ci peut être mal interprétée par FCK Editor. Afin de garder une homogénéité à travers les différentes publications, nous avons créé un style par défaut (exemple : Arial 12px). Il est donc important de ne pas attribuer de style au texte mais seulement aux titres ou à certains passages bien spécifiques. Lorsque vous désirez donc coller un texte copié depuis un document, utilisez le bouton Coller comme texte afin que celui-ci ne colle que le contenu sans la mise en forme. Si vous collez directement dans l éditeur de texte, une fenêtre apparaîtra afin que vous colliez votre texte à partir de celle-ci. Cochez alors les cases Ignorer les polices de caractères et Supprimer les styles. Si certaines mises en forme persistent ou si vous souhaitez tout simplement «nettoyer» votre texte, utilisez l outil Supprimer le format après avoir sélectionné le texte concerné. Astuce : Si vous voulez être sûr que le texte que vous collez est sans mise en forme, utilisez le Bloc-notes de Microsoft Windows. Copiez le texte d origine, collez le dans le Bloc-notes puis copiez de nouveau celui-ci pour le coller dans l éditeur de texte. L utilisation des puces Si vous désirez créer des listes, deux possibilités : la liste numérotée la liste à puces Pour créer une liste, vous devez ouvrir un nouveau paragraphe avec la touche Entrée. Ensuite utilisez l une des deux options proposées ci-dessus pour créer la première ligne de votre liste. Si vous souhaitez aller à la ligne sans créer une nouvelle puce, utilisez Shift+Entrée, et si vous préférez créer une nouvelle puce tapez directement Entrée. Tapez deux fois Entrée pour sortir de la liste. 4

5 Vous avez également la possibilité de modifier la mise en forme de vos puces en faisant un clic droit sur votre liste puis Propriétés de la liste. Si vous êtes en liste numérotée vous pouvez également définir la première occurrence. Une fois dans votre liste, vous pouvez en créer une seconde en utilisant l icône Augmenter le retrait. Cela aura pour effet de créer une nouvelle liste avec de nouvelles propriétés, vous pourrez donc changer la mise en forme de celle-ci. Tapez deux fois Entrée pour revenir à la première liste. Création d un tableau Pour créer un tableau, cliquez sur Insérer/Modifier le tableau. Une fenêtre vous permettra de paramétrer votre tableau. Pour la largeur, préférez utiliser une valeur en pourcentage afin que celle-ci soit bien proportionnée par rapport à la page. La hauteur n est pas vraiment utile celleci s ajustant en fonction du contenu. La bordure n étant pas très esthétique, si vous n en avez pas l utilité, entrez la valeur 0. L alignement correspond au placement du tableau dans la page. L espacement vous permettra de définir l espace entre les cellules alors que le contour vous permettra de définir l espace entre la bordure de la cellule et son contenu. Si vous désirez mettre une couleur de fond à vos cellules, utilisez plutôt le contour afin d éviter d avoir du blanc entre vos cellules. Une fois votre tableau créé, vous pouvez toujours modifier ses propriétés en utilisant le clic droit sur celui-ci. De cette-même manière vous pouvez également créer de nouvelles lignes, de nouvelles colonnes, fusionner des cellules, 5

6 Pour compléter la mise en forme de votre tableau, vous pouvez intervenir sur chaque cellule à l aide du clic droit, Cellule, Propriétés de cellule. Comme pour la largeur du tableau, utilisez plutôt une valeur en pourcentage pour définir la largeur de votre cellule. En définissant la largeur de la première cellule, toutes les cellules de cette même colonne seront de la même largeur. Le champ retour à la ligne permet de définir si vous désirez que le texte retourne à la ligne automatiquement lorsqu il arrive à la fin de la cellule ou alors que la cellule s adapte à la longueur du texte. Sélectionnez plutôt la valeur Oui afin que la largeur de la cellule ne soit pas modifiée. L alignement horizontal et vertical permet de placer votre texte dans la cellule. Utilisez la valeur Haut dans l alignement vertical afin que si sur une même ligne une cellule est plus haute qu une autre les textes soient bien situés en haut de la cellule. Les options fond et bordure vous permettent d attribuer une couleur à votre fond de cellule ou à la bordure de celle-ci. Pour affecter une couleur à la bordure vous devez avoir saisi une valeur autre que 0 dans la bordure du tableau. 6

7 Intégration d une image Pour intégrer une image à votre texte, utilisez l icône entourée : Une fenêtre apparaîtra avec différents onglets. Pour enregistrer une image deux options s offrent à vous. Soit il s agit d une image que vous pensez réutiliser et nous allons l enregistrer dans la bibliothèque des images, soit il s agit d une image à «usage unique» et nous utiliserons la méthode rapide de téléchargement. 7

8 Enregistrer une image dans la bibliothèque Pour se faire, dans l onglet Informations sur l image, cliquez sur Parcourir le serveur. Vous avez la possibilité dans cette bibliothèque de classer vos images dans différents dossiers à l aide du bouton Create New Folder. Pour ajouter une nouvelle image cliquez sur Parcourir et sélectionnez l image souhaitée. Cliquez ensuite sur Upload pour enregistrer l image dans la bibliothèque puis cliquez sur le nom de l image pour la sélectionner. Enregistrer une image à «usage unique» Dans l onglet Télécharger, cliquez sur Parcourir puis sélectionnez l image souhaitée. Ensuite téléchargez l image à l aide du bouton Envoyer sur le serveur, un message s affichera pour vous signaler que votre image a bien été enregistrée. Important: Lorsque vous téléchargez une image, veillez à ce que le nom de cette image ne comporte pas de caractères spéciaux (accents, cédilles, apostrophes, ), dans le cas contraire l image pourrait mal s enregistrer. Préférez un nom court avec lettres simples et chiffres. Si vous en avez la possibilité, essayez de réduire le poids de l image afin de ne pas surcharger le serveur. 8

9 Une fois l image chargée, celle-ci apparaîtra dans la fenêtre Prévisualisation. Vous trouverez la largeur et la hauteur initiale de l image dans la partie gauche de la fenêtre. Vous avez alors la possibilité de modifier la taille en modifiant l une des valeurs tout en conservant la proportionnalité de l image. Si vous désirez modifier une donnée sans modifier la deuxième utilisez le petit cadenas situé à droite. La flèche arrondi vous permettra de réinitialiser l image à sa taille d origine. Le champ Bordure vous permettra de préciser la taille en pixels que vous souhaitez attribuer à celle-ci. Important : Si vous ne saisissez pas de valeur aucune bordure ne sera visible dans un premier temps, par contre si vous affectez un lien à cette image une bordure apparaîtra pour signaler la présence d un lien. Utilisez alors la valeur 0, pour l enlever. Si vous désirez intégrer l image dans du texte, utilisez le champ de sélection Alignement. Les options Espacement horizontal et Espacement vertical vous permettront de définir l espace en pixels entre l image et le texte. Une fois validée vous pourrez déplacer l image et la retailler comme vous le désirez Afficher une image dans une fenêtre séparée Vous pouvez à l aide du dernier onglet insérer un groupe d image de façon à les afficher dans une fenêtre qui se place au premier plan. 9

10 Pour cela il suffit de sélectionner Use LightBox for this image et de cliquer sur une des trois options qui se présentent. Et enfin, dans le cas ou l on veut que les images appartiennent au même groupe, il faut saisir, lors de l ajout de chaque images, le même terme dans la zone de saisie Group. - Image : permet de rajouter une image ou un groupe d image sous forme d un simple défilement. On pourra naviguer parmi les images à l aide du bouton next. - Diaporama : permet de rajouter des images sous forme d un diaporama. Dans ce cas, les images enregistrées défileront automatiquement, l utilisateur n aura alors pas besoin de cliquer sur next pour passer à l image suivante. 10

11 - Contenu externe : Permet de lier du contenu externe dans un frame de la page 11

12 Création d un lien / Chargement d un document FCK Editor permet également de faire des liens vers des sites internet, ou de charger des documents que vous souhaitez publier. Pour ce faire, cliquez sur l icône entourée ci-dessous, une fois le texte sélectionné : Créer un lien vers un site ou une adresse mail Une fenêtre vous permettra de saisir directement l adresse du site web concerné dans le champ URL. S il s agit d une adresse de messagerie, sélectionnez dans Type de lien puis saisissez l adresse de messagerie ainsi que, si vous le désirez, un titre de sujet et un corps de message par défaut que l utilisateur pourra modifier par la suite au moment d envoyer le mail. Créer des liens vers des ancres Créer des liens vers des ancres vous permet de faire des liens vers des points donnés de cette même page. Cela peut-être utile sur de longs textes où vous pouvez créer des chapitres et faire des liens depuis le haut de page Pour cela vous devez d abord créer une ancre. Sélectionnez le texte sur lequel vous voulez créer une ancre et cliquez sur l icône entourée ci-dessous. Une fenêtre vous permettra alors d attribuer un nom à cette ancre. Ensuite comme pour un lien, sélectionnez le texte sur lequel vous souhaitez cliquer pour aller sur l ancre créé précédemment puis cliquez sur l icône Insérer/modifier le lien. Dans Type de lien, sélectionnez Ancre dans cette page puis sélectionnez le nom de l ancre concernée. 12

13 Créer des liens vers des documents de la GED (Intranet Hospitalier) IL est possible de faire un lien vers un autre document de la GED lors de la création d un document.pour cela, cliquez sur le bouton de l éditeur de texte. La fenêtre ci-dessous s affiche Cliquez ensuite sur afin d être redirigé sur la recherche de document Rentrez les informations pour retrouver le document recherché Cliquez sur le document qui va s intégrer au lien 13

14 Votre document est maintenant lié à votre nouvelle création Lien document GED Publier un document Pour publier un document, de la même manière que pour une image, vous avez deux possibilités. Soit enregistrer le document dans la bibliothèque afin de le réutiliser soit l enregistrer directement. Si vous souhaitez l enregistrer dans la bibliothèque, dans l onglet Informations sur le lien cliquez sur Parcourir le serveur. Une fenêtre vous permettra alors soit de sélectionner un document enregistré soit de télécharger un nouveau document. Vous avez également la possibilité de classer vos documents dans des dossiers avec le bouton Create New Folder. Pour télécharger un nouveau document, cliquez sur Parcourir puis sélectionnez le document souhaité. Utilisez ensuite le bouton Upload pour enregistrer le document dans la bibliothèque. Enfin cliquez sur le nom du document pour l attribuer à votre lien. Si vous souhaitez plutôt enregistrer votre document sans le cataloguer, allez dans l onglet Télécharger puis faites Parcourir afin de sélectionner le document souhaité puis cliquez sur Envoyer sur le serveur pour enregistrer le document. Un message apparaîtra alors pour vous signaler que le document est bien téléchargé. 14

15 Important Lorsque vous téléchargez un document, veillez à ce que le nom du document ne comporte pas de caractères spéciaux (accents, cédilles, apostrophes, ), dans le cas contraire le document pourrait mal s enregistrer. Préférez un nom court avec lettres simples et chiffres. Une fois le lien créé ou le document chargé, allez dans l onglet Destination et sélectionnez Nouvelle fenêtre (blank) afin que le lien s ouvre dans une nouvelle page. Astuce : Lorsque vous créé un lien sur du texte, celui-ci devient bleu et est souligné afin de signaler la présence d un lien. Pour éviter cet effet, attribuez lui une couleur et allez dans l onglet Avancé puis dans le champ Style et saisissez le code suivant : text-decoration:none; 15