Home « Infos portail « Gérer mon espace dans l'annuaire «

Mettre en forme mes communications

gresivaudan.org vous propose toute une série d'outils pour mettre en forme vos communications.

Si la publication web comporte quelques spécificités qui font que vous ne pouvez pas travailler exactement comme sur votre suite bureautique, il est tout de même aisé d'obtenir de bons résultats visuels à peu de frais.

Votre éditeur de texte

À partir de votre profil, en choisissant "modifier", vous pouvez indiquer quel éditeur de texte vous préférez utiliser. Il y en a trois :

textarea est un éditeur ultra simple. Vous disposez d'une zone de saisie, et au-dessus d'une barre de boutons pour l'insertion automatique des codes les plus utilisés (gras, italique, titres...), ainsi que des principaux emoticons utilisés. Vous pouvez bien entendu utiliser tous les codes disponibles (un lien vers l'index des codes et des emoticons est disponible sous la zone de saisie).
FCKeditor est un éditeur plus graphique, proche des outils bureautique que vous connaissez. Il est moins léger que textarea, mais sans doute plus familier. N'oubliez pas quand même que vous n'êtes pas sur votre traitement de texte, et certaines manipulations sont définitivement différentes : vous ne pouvez pas, par exemple, copier une image et la coller dans votre page. Sur internet, il vous faut impérativement d'abord télécharger l'image sur le serveur pour pouvoir vous en servir (voir ci-dessous pour l'utilisation des images). Bien sûr, vous pouvez aussi utiliser l'ensemble des codes de formattages disponibles sur ce serveur.
TinyMCE est un autre éditeur graphique. Il possède l'avantage de pouvoir basculer en mode "plein écran", ce qui est très confortable pour travailler sur de grands textes ou encore quand la mise en page est très travaillée. Ici également, vous pouvez utiliser tous les codes de formattage disponibles.

Retour à la ligne

Le langage Web ne reconnaît pas le retour chariot - touche entrée de votre clavier - comme un traitement de texte. Pour aller à la ligne, sans sauter de ligne, il vous faut saisir le code [nl], symbole de "new ligne" en anglais. Par contre, si vous appuyez deux fois sur la touche entrée, le saut de ligne sera, lui, reconnu.

Les codes de formattage

Ils vous permettent d'assurer la mise en gras, en italique, de contrôler 4 tailles de texte, et quelques familles de police. De plus, vous pouvez insérer des liens (internes, c'est à dire vers une autre page, ou une image... de ce serveur) ou externe (c'est à dire des adresses internet), organiser des tableaux (tables), rajouter des drapeaux pour signaler un contenu dans une autre langue... Rendez-vous sur l'index des codes pour visualiser la liste des codes disponibles sur ce serveur.
Chaque code présente sa syntaxe qui vous est expliquée, ainsi qu'un exemple de saisie et un exemple de rendu.
Il y a en beaucoup, mais vous verrez que la syntaxe, très logique, vous permettra d'en retenir un bon nombre très facilement. Les plus utilisés (aller à la ligne, faire un retrait, mettre en gras, en italique, souligner, faire une liste, des liens, une citation ou indiquer deux niveaux de titre), sont accessibles avec textarea directement au dessus de la zone de saisie du corps de votre page, sous forme de boutons : sélectionnez le texte auquel vous voulez appliquer la mise en forme et cliquez sur le bouton approprié. Vous pouvez également les saisir avec les éditeurs graphiques.

Ajouter des images et les positionner

L'ajout d'images se fait dans un second temps. En effet, vous devez d'abord créer une page, lui donner un nom et du contenu, puis l'enregistrer. Ensuite, vous pourrez facilement y rajouter des images.

Le formulaire d'enregistrement d'image et ses options

Une fois votre nouvelle page enregistrée - n'oubliez pas le mode brouillon si nécessaire - cliquez sur le lien de menu ajouter une image et laissez-vous guider par le formulaire.
Donnez obligatoirement un titre à votre image (il apparaîtra sous l'image, sauf si celle-ci est désignée comme icône ou comme vignette de page). C'est également un gage d'accessibilité pour les personnes mal-voyantes.

Souvent, les options d'image par défaut suffisent. Enregistrez, et votre image sera placée en fin d'article. Vous pourrez modifier cela (voir plus bas).

Si ce n'est pas le cas, déroulez (en cliquant dessus) les options avancées du formulaire d'image, et faites votre choix parmi les différentes options :

ajoutez un lien pour rendre l'image cliquable et la faire pointer vers une autre page ou un site de votre choix (ne fonctionne pas si l'image est juste une vignette).
cochez la case de votre choix pour utiliser l'image : directement en haut de votre page, ou en bas, ou encore l'utiliser uniquement comme icône de page (elle est alors positionnée en haut à droite de l'article), ou encore comme vignette de page (elle apparaît avec le titre et le sous-titre de votre article dans la plupart des liste de la section mère à laquelle est rattaché votre article. Un exemple courant d'utilisation : la rubrique Annonces animations).
Par défaut, l'image est positionnée en fin d'article, et vous pouvez modifier cela par la suite en modifiant votre article.
L'option redimensionner l'image si nécessaire est cochée par défaut, et il est conseillé de la laisser cochée : si votre image est très grande, elle sera automatiquement retaillée pour que son plus grand côté fasse 640 pixel au maximum. Sinon, il ne se passera rien. Dans la pratique, rappelez-vous que les images sont généralement très "lourdes" (en kilo octets) et que plus une image est lourde, plus il faut du temps pour l'afficher. Pensez à ceux qui n'ont pas l'adsl ! Si vous le pouvez, pensez à retailler vos images en leur donnant au maximum 640 pixels au plus large avant de les télécharger sur le serveur, elles n'en seront que plus légères.
Enfin, les trois dernières options vous permettent de décider si l'image doit s'afficher dans sa totalité ou seulement sous forme de vignette. L'option par défaut est de ne pas utiliser de vignette pour les images légères (moins de 20 ko) et systématiquement des vignettes pour les images plus lourdes que 20 ko. Les utilisateurs cliqueront alors sur l'image pour la voir s'afficher en entier.
La deuxième option force l'affichage en vignette pour l'image, et la troisième force l'affichage en entier. À vous de voir selon la taille de votre image et ce que vous voulez en faire.

Sachez enfin que toutes ces options sont modifiables par la suite : il suffit de modifier son article, et de dérouler en bas de page l'option images pour accéder aux principales modifications, y compris accéder au formulaire d'enregistrement d'image pour changer les options dont nous venons de parler, ou mettre à jour votre image.

Positionner l'image dans votre article

Lors de l'enregistrement, par défaut votre image est donc en fin de page. Elle est positionnée par un code de formattage comme ceci : [image=id]. L'id est le numéro d'enregistrement de votre image. Chacune a le sien et il est unique.

Vous pouvez positionner ce code n'importe où dans votre texte pour maîtriser l'apparence de votre page. Voici les quatre manières de gérer vos images :

le format par défaut :

[image=id]. Il coule dans le texte. Le résultat peut parfois être surprenant. N'hésitez pas à tester. Si l'image est affichée sous forme de vignette, il faut cliquer dessus pour la voir en grand. Dans ce mode par défaut, l'écran s'assombrit et l'image apparaît au dessus de la page, en grand.

à gauche :

[image=id,left]. L'image est affichée là où vous positionnez le code dans le texte, à gauche du bloc de texte.

à droite :

[image=id,right]. L'image est affiché là où vous positionnez le code, à droite du bloc de texte.

centré :

[image=id,center]. L'image est affichée dans un bloc centré au milieu de la page. S'il y a du texte, il "coule" au dessus et en dessous. Ces codes sont disponibles lorsque vous modifiez votre article auquel est attaché l'image, dans l'option images (en bas du formulaire). Si vous travaillez avec l'éditeur textarea, il vous suffira de positionner votre curseur dans le texte puis de cliquer sur le lien qui vous convient dans les options : le code sera automatiquement inséré à l'emplacement du curseur. Si vous utilisez FCKeditor ou TinyMCE, les liens dans les options ne sont pas cliquables, mais vous avez juste à les recopier.

Ajouter des fichiers

Vous pouvez, une fois votre article enregistré, ajouter des fichiers que les visiteurs pourront télécharger. Cliquez sur le lien de menu ajouter un fichier et laissez vous guider par le formulaire.

Donnez obligatoirement un titre à votre fichier (qui peut être différent du nom du fichier et gagne en tout état de cause à être explicite pour les visiteurs) et cliquez sur parcourir pour aller choisir votre fichier sur votre disque dur.
Vous pouvez préférer indiquer une référence de page web si le fichier est à disposition quelque part sur internet (attention alors de vérifier que le lien reste valide dans le temps).
Si vous le souhaitez, indiquez quelques précisions dans la zone de description.
Les options avancées sont assez explicites : indiquez une source si vous avez pioché ce fichier ailleurs et souhaitez indiquer un auteur ou un site internet source, ne mettez rien à "lien alternatif" si vous n'en connaissez pas, et indiquez quelques mots clés qui pourront faciliter les recherches des visiteurs.

Une fois enregistré, votre fichier s'ajoute à la page de votre article, et les visiteurs pourront le télécharger en cliquant sur son titre. Une icône précisera le format du fichier automatiquement.

À propos de formats de fichiers, soyez vigilants : si vous utilisez pour créer votre document un logiciel spécifique, il y a de grandes chances pour que tout le monde n'ait pas le même à la maison et ne puisse pas lire votre document ! Pensez à enregistrer vos fichiers dans des formats standards autant que possible, et pour les textes avec des mises en page bien calculées, préférez - de loin - le format pdf.

Si vous souhaitez modifier votre fichier pour le mettre à jour, vous cliquerez, juste sous le titre du fichier, sur le lien détacher : il sera mentionné que vous avez temporairement détaché le fichier pour le travailler. Une fois vos modifications faites, cliquez sur mettre à jour et ré-attachez le fichier révisé pour le mettre à disposition de tous.

Voilà, vous avez là l'essentiel (et déjà bien détaillé !). Utilisez le mode brouillon et faites des tests, vous verrez que c'est souvent plus facile à faire qu'à expliquer. Et n'hésitez pas à poser vos questions sur les forums si vous hésitez sur la démarche à suivre.

Annotate this page · Trackback