Utilisation de l'éditeur WYSIWYG

Un article de Sites Internet Easy manuels d'utilisation.

L'éditeur texte WYSIWYG permet de mettre en forme votre document.

Les Styles de caractères

Afin de respecter la charte graphique et pour rester cohérent dans l'image de votre site, sans avoir à vous intéresser au nom, à la taille, et au code couleur des caractères, vous utilisez les styles.

Tapez votre paragraphe, lorsque vous avez terminé modifiez le style en cliquant sur le menu déroulant style. Sélectionnez un nouveau style.

Les styles commençant par "Style_texte_" sont ceux dont vous avez besoin le plus couramment.

Les tableaux

Utiliser les tableaux pour la mise en page

Pour contrôler la position des textes et des images dans votre page les tableaux sont essentiels.

Par exemple si vous voulez un texte sur deux colonnes vous créez un tableau transparent d'une largeur de 100%, d'une ligne, et de deux colonnes d'une largeur de 50% chacunes.

Insérer un tableau dans une page

Dans le menu de l'éditeur texte cliquez sur:
La fenêtre montante suivante apparaît:
- Colonnes: nombre de colonnes du tableau.
- Lignes: nombre de lignes du tableau.
- Espacement dans les cellules: c'est l'espace en pixels qu'il y a entre le bord de la cellule et le centre de la cellule, cela permet d'aérer les cellules. Mettez le à 3 pour un tableau aéré.
- Espacement des cellules: c'est l'espace en pixels qu'il y a entre chaque cellules. Mettez le à 3 pour un tableau aéré.
- Alignement: généralement pas utilisé au niveau du tableau, mais des cellules.
- Bordure: c'est la largeur de la bordure du tableau en pixels, mettez 0 si vous voulez un tableau transparent.
- Largeur: largeur du tableau en pourcentage ou en pixels.
  - Mettez 100% si vous voulez que le tableau utilise toute la largeur disponible.
  - Ne mettez rien si vous voulez que le tableau soit fait automatiquement au plus juste.
- Hauteur: ne mettez rien, il est utilisé que dans de très rares cas.
- Classe : style de teste appliqué à tout le tableau
sur la même fenêtre montante cliquez sur le bouton Avancé si vous voulez utiliser d'autres possibilités:
- Couleur de la bordure: c'est la couleur de fond du tableau, elle est codée en html, si vous connaissez le code de la couleur vous pouvez la saisir directement, sinon vous pouvez cliquer sur pour afficher des palettes, ne mettez rien si vous voulez un tableau transparent.
- Couleur du fond: c'est la couleur de fond du tableau, ne mettez rien si vous voulez un tableau transparent.

Modifier un tableau

Cliquez sur le tableau, puis cliquez sur :
apparaît alors la même fenêtre montante que pour la création d'un nouveau tableau.

Voir: Insérer un tableau dans une page pour plus de détails.

Propriétés des cellules

Cliquez dans la cellule qui vous intéresse, le bouton:
La fenêtre montante suivante apparaît :

dans l'onglet Général
- Alignement : alignement horizontal du texte dans la cellule
- Alignement vertical : alignement vertical du texte dans la cellule
- Largeur : Largeur de cellule en % ou en pixels
- Classe : style de caractère appliqué à la cellule
dans l'onglet Avancé
- Couleur du fond: couleur du fond de la cellule

Insérer une ligne ou une colonne

Cliquez sur une cellule du tableau

Cliquez sur l'un des deux boutons pour insérer une ligne en dessous ou au dessus de celle où est placée votre curseur dans le tableau de l'éditeur texte.
Cliquez sur l'un des deux boutons pour insérer une colonne à droite ou à gauche de de celle où est placé votre curseur dans le tableau de l'éditeur texte.

Supprimer une ligne ou une colonne

Cliquez sur une cellule du tableau

Cliquez sur le bouton pour supprimer la ligne où est pacé votre curseur dans le tableau de l'éditeur texte.
Cliquez sur le bouton pour supprimer la colonne où est placé votre curseur dans le tableau de l'éditeur texte.

Fusionner des cellules

Fusionner des cellules permet de répartir une cellule sur plusieurs lignes ou plusieurs colonnes.

Cliquez sur une cellule du tableau.
Cliquez sur le bouton
la fenêtre suivante apparaît:

colonnes : nombre de cellules fusionnées à droite de la cellule sélectionnée.
lignes : nombre de cellules fusionnées en dessous de la cellule sélectionnée.

Les Images

Logiciel pour préparer vos images au web

Il existe de très nombreux logiciels pour préparer vos images pour le site. Si vous avez l'habitude d'un logiciel d'image en particulier. Ne changez rien.

Si vous ne savez pas comment redimensionner ou recadrer une image, ou encore la compresser au format jpg et que vous n'avez pas de logiciel nous vous conseillons très fortement PhotoFiltre, il est gratuit, en français et très complet. Vous pouvez le télécharger gratuitement à l'url : http://www.photofiltre.com

Préparer ses images pour le web

Nous allons voir ici toutes les étapes pour préparer vos photos à votre site internet. Les étapes de correction sont détaillées pour le logiciel PhotoFiltre (Logiciel pour préparer vos images au web). Commencez par ouvrir votre photo dans votre logiciel d'image.

Recadrage : Il arrive que le sujet ne soit pas centré correctement sur votre photo, il faut donc la recadrer.
Avec PhotoFiltre:
1. Choisissez l'outil "Sélection", c'est la flêche dans le menu de boutons situé à droite.
2. Recadrez : cliquez avec le bouton gauche de votre souris au bord supérieur gauche où vous voulez recadrer votre photo et faites glisser votre souris en maintenant le bouton enfoncé jusqu'au bord inférieur droit où vous voulez recadrer
3. Ajustez votre cadre en cliquant sur le bord du cadre que vous voulez modifier, déplacez votre souris en maintenant le bouton enfoncé pour déplacer le bord du cadre.
4. Recadrez votre image en allant dans le menu "Image" et cliquez sur "Recadrer"
5. Si votre image penche à droite ou à gauche dans le menu "Image" choisissez "Rotation" puis "Paramétrée..." et ajustez l'angle comme vous le désirez.
Correction de la luminosité et des couleurs : les photos sont souvent un peu plus claires et les couleurs un peu plus vives sur internet.
Avec PhotoFiltre vous trouverez tous ces outils de correction dans le menu "Réglage".
1. Si votre photo est trop claire ou trop foncé nous vous conseillons de commencer par la fonction "Correction Gama...".
2. Rajoutez de la saturation à vos couleurs si celles-ci sont ternes, utilisez "Teinte / Saturation".
Redimensionner : vos images doivent avoir des dimensions en rapport de la page, il faut les redimensionner.
Mettez votre image à l'échelle 1 dans votre logiciel d'images (100% dans la barre de boutons haut pour PhotoFiltre) afin de voir votre image dans ses dimensions telles qu'elle apparaitra sur le site.
Les dimensions maximum conseillées pour les plus grandes sont 640 pixels pour la largeur et 540 pixels pour la hauteur. Respectez les proportions afin de ne pas déformer l'image.
Avec PhotoFiltre : dans le menu "Image" cliquez sur "Taille de l'image..." modifiez la largeur ou la hauteur suivant vos besoins. Attention que "Conserver les proportions" soit bien coché.
Enregistrer au format JPEG : Afin de pouvoir utiliser votre image dans vos pages web vous devez les enregistrer au format jpg ce qui vous permet de les compresser pour les rendre plus légères. Nous conseillons des taux de compression entre 60 et 80%, 60 suffit dans la plupart des cas.
Dans PhotoFiltre : dans le menu "Fichier" sélectionnez "Enregistrer sous", dans la fenêtre montante pour "Type" sélectionnez JPEG, sélectionnez le dossier où vous voulez enregistrer le fichier, donnez un nom à votre fichier comme monimage.jpg, cliquez sur le bouton "Enregistrer". Dans la nouvelle fenêtre montante mettez la barre de compression sur 60, activez "Format progressif" et cliquez sur le bouton "Ok".

Mettre une image sur le serveur

Un module de l'administration est réservée à la gestion de vos images sur le serveur.

Depuis la page de l'administration allez sur l'onglet "Contenu" pois cliquez sur "Gestionnaire d'images".
Cliquez sur le bouton "Parcourir..." et sélectionnez l'image sur votre disque dur.
Cliquez sur le bouton "Envoyer".

Insérer une image dans une page

Mettez le curseur de l'éditeur texte à l'endroit exact où vous voulez insérer l'image, puis cliquez sur :
La fenêtre suivante apparait:
Cliquez sur le bouton:

pour afficher le dossier dans lequel se trouve vos images.
Sélectionnez l'image désirée en cliquant dessus.
Si vous voulez que votre image soit identifiée par les moteurs de recherche ou qu'un texte apparaisse lorsqu'un visiteur passe sa souris au dessus de l'image remplissez les champs "Description de l'image" et "Titre".

Propriétés des images

Les propriétés de l'image sont modifiables lors de l'ajout d'un image ou à tout moment en cliquant sur l'image pour la sélectionner puis en cliquant sur:
Apparait alors la fenêtre:
- Alignement: c'est la position de l'image par rapport au texte. Vous disposez d'une prévisualisation dans l'encadrement de droite.
- Dimensions: c'est la dimension de votre image en pixels.
- Espacement vertical: c'est l'espace entre l'image et l'élément qui se trouve au dessus et en dessous.
- Espacement horizontal: c'est l'espace entre l'image et l'élément qui se trouve à sa droite et sa gauche.
- Bordure: c'est la taille de la bordure de l'image. A cause de certains navigateurs internet, mettez 0 pour être certain qu'une bordure n'apparaîsse pas si vous créez un lien à partir de cette image ou photo.

Les Liens

Lien interne

Le lien interne est un lien vers une autre page de votre site.

Cliquez sur:
Un menu déroulant avec les pages de votre site apparaît.
Cliquez sur le nom de la page que vous désirez et le lien apparaît dans l'éditeur

Lien vers un fichier

Si vous voulez que l'on puisse télécharger un document (pdf, doc, xls, zip,...) sur votre site il faut d'abord télécharger votre document sur le serveur.

Mettre un fichier sur le serveur

Afin d'offrir le maximum de compatibilité:
- le nom du fichier ne doit pas contenir d'espaces (remplacez les par des "-" ou des "_"),
- le nom du fichier ne doit pas contenir de caractères spéciaux comme le sont les accents.
Dans l'administration amenez votre souris sur l'onglet "Contenu" puis cliquez sur "Gestionnaire de fichiers".
Dans la nouvelle fenêtre cliquez sur l'onglet "Télécharger les fichiers".
Cliquez sur le bouton "Parcourir" pour sélectionner sur votre disque dur le fichier à envoyer vers votre serveur.
Cliquez sur le bouton "OK" pour envoyer les fichiers vers le serveur.
Patienter quelques instants pendant l'envoi des fichiers vers le serveur, cela peut prendre plus d'une minute suivant la taille du fichier et la qualité de votre connexion internet.

Créer un lien vers un fichier sur le serveur

Afin d'insérer un document sur votre il faut d'abord connaitre son adresse sur le serveur
- Dans l'administration amenez votre souris sur l'onglet "Contenu" puis cliquez sur "Gestionnaire de fichiers".
- Faites un clic droit sur le nom du fichier que vous voulez mettre à télécharger, le menu contextuel apparaît, cliquez alors sur "Copier l'adresse du lien", l'adresse du document sur le serveur est maintenant dans la mémoire de votre ordinateur.
Allez dans l'édition de la page où vous voulez rajouter le lien vers le document
- Tapez le texte que vous désirez pour le lien vers le document (par exemple: "Cliquez pour télécharger le PDF").
- Sélectionnez le texte avec la souris puis cliquez sur le bouton:
- Apparaît alors la fenêtre:
- Mettez le curseur dans le champ "URL du lien", faites un clic droit sur la souris apparaît alors le menu contextuel, cliquez sur "Coller", l'adresse de votre fichier apparaît dans le champ.
- Validez.

Lien externe

Tapez le texte que vous désirez pour le lien vers le site.
- Sélectionnez le texte avec la souris puis cliquez sur le bouton:
- Apparaît alors la fenêtre:
- Mettez le curseur dans le champ "URL du lien", saisissez l'adresse de la page.
- Validez.