Support Joomla ®, guides et aide Joomla

Contactez nous !

  

Mettre son article en forme

Les sujets abordés sur cette page :

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

La zone d'édition de JCE (ou de tout autre éditeur WYSIWYG) vous permet donc de saisir du texte, de le mettre en forme, d'y insérer images et vidéos. Ce sont les pages de contenus qui seront vues dans le corps de page de votre site Joomla.

Corps de page d'un site Joomla

 Note : certains composants prennent la place des articles dans le corps de page. Les pages qui affichent, par exemple, un annuaire, une liste de petites annonces, un agenda, ne sont pas des articles : ce sont des pages affichant le contenu des composants en question. Si vous vous connectez en frontal avec votre compte administrateur, vous verrez que vous ne pourrez pas éditer directement ces pages, à contrario des articles, à côté desquels apparaîtra systématiquement la petite icône d'édition.


Copier/coller un contenu externe dans un article

Boutons coller depuis Word et coller du texte

Il est bien sûr possible de venir coller un contenu depuis une source externe, que cela soit un fichier Word, un document PDF, ou autre. Attention, cependant, à ne jamais copier coller directement ce contenu dans la zone d'édition de votre article.

Copier coller un texte directement depuis un document Word ou depuis une page web externe cause l'importation de code impur, et peut, dans les cas extrêmes poser des problèmes lors de l’affichage de la page.

Il est donc impératif de passer par l'outil fourni par JCE qui permet de coller un texte depuis une source extérieure (icône encerclée de rouge ci-dessus).

 Note : notre barre d'outils de JCE a été réduite au minimum nécessaire et a été débarrassée de ses boutons inutiles.

En cliquant sur l’icône une fenêtre va s’ouvrir, dans laquelle vous pourrez copier votre texte afin de le nettoyer de tout code suspect.

Coller du texte

 Note : JCE vous permet de faire un clic droit quand vous êtes dans la zone de saisie. Vous y retrouverez l'option "Coller du texte"

Coller du texte via le clic droit

Venez coller votre texte dans cette fenêtre, puis cliquez sur Insérer.

Seule contrainte : le texte sera débarrassé de toute mise en forme (gras, italique, liens, titres, paragraphe). C'est le prix à payer pour avoir une page sans problèmes d'affichage, au code HTML respectueux des normes.


Mettre le texte en forme

Barre d'outils de JCE : mise en forme

Afin de mettre le texte en forme vous disposez de toute une série d'icônes similaires à celles que l’on trouve dans les logiciels de traitement de texte, et qui permettent, entre autre de mettre le texte en gras, en italique, de le souligner, de l'aligner (à droite, à gauche, au centre), de le justifier, de créer des listes à puces, etc. Evitez en revanche les changements de couleurs trop violents, les fonds colorés (redoutables pour le confort de lecture), et si possible n'utilisez pas de polices de caractères ou de tailles de polices autres que celles définies par votre feuille de style (CSS)

Il est également important d’utiliser le menu déroulant Format pour mettre le texte en forme à l’aide de classes prédéfinies qui seront reconnues et mises en valeur par la feuille de style :

Barre d'outils de JCE

Parmi elles on trouve le paragraphe, les différentes tailles de Titre (Titre 1 pour un titre principal, Titre 2 pour un ou plusieurs titres secondaires, Titre 3, etc), mais aussi la citation, la définition, etc.

L’utilisation de ces balises est importante car elles permettent de mettre le texte en forme en conservant une bonne hygiène de mise en page et de code HTML.


Insérer un lien

Barre d'outils de JCE : insérer un lien

L’éditeur intègre également deux boutons permettant de créer ou modifier des liens. Par défaut, ils apparaissent grisés : on ne peut pas cliquer dessus.

 

Boutons de liens grisés

Pour insérer un lien, sélectionner avec le curseur de la souris les mots ou la portion de texte sur lesquels vous souhaitez créer un lien :

Sélection de texte

Vous pouvez également choisir de créer un lien sur une image déjà placée dans le texte. Cliquez sur l'image pour la sélectionner (un cadre noir avec des petits carrés blancs doit apparaître autour de l'image) :

Insérer un lien sur une image

Les icônes vont alors devenir cliquables.

Boutons liens actifs

 Note : une fois encore, vous pouvez également faire un clic droit quand vous avez sélectionné votre texte ou votre image. Vous y retrouverez l'option "Insérer/Editer un lien"

Clic droit pour faire un lien

Clic droit sur une image

La première icône permet de créer ou de modifier un lien, si celui-ci existe déjà. Cliquez dessus pour faire apparaître une nouvelle fenêtre :

Gestionnaire de liens

L’adresse (URL) est le champ le plus important, puisque c’est lui qui contiendra l’adresse vers laquelle on souhaite faire pointer ce lien.

Si vous la connaissez déjà, il est tout à fait possible de copier/coller une adresse directement dans ce champ de saisie URL (pensez à coller l’adresse complète avec le http:// s’il s’agit d’un lien vers un autre site, sinon le lien ne fonctionnera pas).

Champ URL

Dans le cas où vous souhaitez créer un lien interne (c'est-à-dire vers une page de votre propre site), l’outil intègre plusieurs fonctionnalités pour vous faciliter la tâche, en vous permettant de naviguer dans votre contenu :

  • Contacts vous permet de faire un lien vers une fiche de contact, gérée dans le composant Contacts
  • Contenu vous permet de faire un lien directement vers l’un de vos articles, ou l’une de vos sections ou catégories
  • Menu vous permet de faire un lien directement vers l’un de vos menus
  • Liens Webs vous permet enfin de faire un lien vers votre collection de liens, gérée dans le composant Liens Web (attention : cela ne sert pas pour faire des liens externes directs)

Naviguez dans votre contenu et sélectionnez la page vers laquelle vous voulez créer le lien.

A droite du champ Adresse (URL) se trouvent également deux petites icônes :

Explorateur et mail

L’icône de gauche est un explorateur, qui vous permettra de créer un lien dans le texte vers l’un des fichiers ou documents de votre site, par exemple un PDF.

Explorateur de fichiers

L’icône de droite permet de créer un lien qui, lorsqu’il sera cliqué, ouvrira le client mail de l'internaute, et lui permettra d’envoyer directement un mail à la personne dont l’adresse aura été renseignée sur la première ligne (champ Adresse).

Il est également possible d’y préciser les adresses qui recevront le mail en copie, voire en copie cachée, ainsi que le sujet du message :

Envoyer par mail

Une fois votre choix effectué, que cela soit un lien vers un site externe en copiant/collant l’adresse directement dans le champ Adresse, un lien vers une page interne, vers un document, ou encore vers une adresse mail, vous pouvez définir la cible du lien, et son titre.

Cible et titre du lien

La Cible détermine la fenêtre du navigateur dans laquelle va s’ouvrir la page quand on clique sur le lien :

  • Ouvrir dans cette fenêtre/cadre : s’ouvre dans la même fenêtre du navigateur
  • Ouvrir dans nouvelle fenêtre : ouvre une nouvelle fenêtre ou un nouvel onglet du navigateur

Enfin, le champ Titre permet de donner un titre au lien, qui apparaîtra lorsque l’on passe la souris au-dessus du lien en frontal :

Titre du lien

Une fois tous ces paramètres réglés, vous n’avez plus qu’à cliquer sur Insérer.

Insérer le lien

 Note : si vous créez un lien sur une image, il est possible, si votre feuille de style (CSS) ne le prend pas en charge, que celle-ci soit automatiquement entourée d'un petit cadre bleu, censé montrer que l'image est cliquable. C'est une convention vieille comme le Web, mais qui n'est plus très utilisée aujourd'hui, principalement pour des raisons esthétiques. Pour la faire disparaître, si votre feuille de style ne s'en charge pas déjà, éditez votre image (rendez-vous sur cette page si vous ne savez pas comment faire), puis créez lui une bordure dont la largeur est égale à 0 (cliquez sur "Bordure" et dans le menu déroulant Largeur choisissez 0).

Bordure d'image à 0

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

Modifier un lien existant

Il bien sûr possible de modifier un lien existant.

Pour ce faire, dans la zone d'édition, placez le curseur "dans" votre texte, à l'endroit où le lien est actif, ou sélectionnez l'image sur laquelle se trouve le lien. Cliquez sur la même icône que précédemment, qui va se mettre en surbrillance, ou faites un clic droit sur la souris pour faire apparaître le Insérer/Editer un lien.

Vous allez faire réapparaître la fenêtre d'édition de lien, que vous pourrez modifier avec les nouveaux paramètres.

Modifier un lien

En cliquant sur Mettre à jour, vous modifierez votre lien.


Supprimer un lien

Pour supprimer un lien, sélectionnez le lien de la même façon que pour le modifier. Cliquez sur la seconde icône pour le supprimer définitivement :

Supprimer un lien

 Note : selon votre navigateur, il est possible que la suppression d’un lien sur une portion de texte provoque un petit bug sur l’éditeur JCE, qui garde le texte surligné même quand le curseur de la souris n’est plus sur l’élément. Pour corriger le problème, sélectionnez le texte avec le curseur puis désélectionnez-le, ce bug purement visuel devrait disparaître.


Utiliser des ancres

Ancres

JCE vous permet également de créer aisément des ancres.

Les ancres sont des liens internes situés uniquement sur la même page, qui permettent de se rendre en un seul clic sur une autre partie de l’article, comme vous pouvez le voir d'ailleurs sur cette page avec les liens situés tout en haut qui vous amènent en un clic à une zone située en-dessous. Les ancres sont extrêmement pratiques, notamment pour les longs articles que l’on ne veut pas séparer sur plusieurs pages.

Pour créer une ancre, placez votre curseur dans le texte à l’endroit précis de la page où se rendront les utilisateurs en cliquant sur le lien, puis cliquez sur l’icône en forme d’ancre :

Nommer l'ancre

Donnez-lui le nom que vous voulez et cliquez sur Insérer. Une petite icône apparaîtra dans la zone de saisie, à l’emplacement choisi.

Icône situant l'ancre dans le texte

Puis, comme pour créer un lien vers une URL externe ou une autre page du site, sélectionnez le texte sur lequel vous voulez créer le lien qui mènera à l'ancre.

Sélection du texte

Cliquez sur l’icône pour insérer un lien et la fenêtre du gestionnaire de lien s’ouvrira :

Gestionnaire de lien

Cette fois, au lieu de choisir une URL, une page du site, ou encore un menu, cliquez sur le menu Ancres en bas de la fenêtre. Vos différentes ancres apparaîtront, vous n’aurez plus qu’à choisir la bonne.

Choix de l'ancre

Insérez votre lien, et désormais quand les gens cliqueront sur le lien, leur navigateur les placera directement sur le point précis sur lequel vous avez créé votre ancre.

 Note : les ancres ne fonctionnent qu’au sein d’une même page. Elles ne fonctionnent pas d’une page sur l’autre, à moins d’utiliser d’abord un lien externe auquel vous aurez rajouté # puis le nom de l’ancre.

Exemple : http://www.monsite.com/mapage.html#monancre

Vous serez alors emmené sur la nouvelle page, comme avec un lien ordinaire, mais directement à l'emplacement de la zone monancre.

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

Insérer des images dans son article

Astuces et Conseils

Si votre hébergement est chez OVH, la procédure classique consistant à ajouter à votre fichier .htaccess la ligne php_value register_globals Off ne fonctionnera pas.

En effet OVH a modifié la configuration de ses serveurs. Pour désactiver le Register globals il faut ajouter cette ligne : SetEnv REGISTER_GLOBALS 0

Lors de l'installation de Joomla il faut modifier certains droits sur les dossiers et fichiers. Si votre hébergement est chez OVH, il faut savoir que leurs serveurs n'acceptent pas les CHMOD 777 sur les dossiers. Il faut mettre un CHMOD 755.

Lorsque vous trier votre liste d'articles pour n'afficher que ceux d'une section voire d'une catégorie donnée, si vous cliquez sur Nouveau, le nouvel article sera directement dans la section et dans la catégorie avec lesquelles vous avez filtré vos articles.


Attention : les noms de tous les fichiers (documents, images) comme ceux des répertoires doivent s’écrire sans accents, sans espaces, et sans caractères spéciaux autres que - (tiret) _ (underscore) ou . (point). Les majuscules sont tolérées, mais sont dispensables.
Exemples de nommage corrects : image-du-chateau.jpg, le_chateau.jpg, chateau.jpg
Exemples de nommage incorrects : image du chateau.jpg, château.jpg


Attention : les seuls formats d’images tolérés sont JPG (ou JPEG), GIF et PNG. Les formats BMP, PSD, TIFF et autres sont fortement déconseillés.


Qui est Support Joomla! ® ? | Plan du site | Mentions Légales | Nous contacter









Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, qui reste le propriétaire mondial de la marque.
Support Joomla n'est ni affilié à Open Source Matters ou au projet Joomla!®, ni approuvé par eux.

http://www.support-joomla.com/ is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Support Joomla est basé sur le template JA Purity II par JoomlArt