Guide WikiPro

Créé avec WikiPro

Éditer une page web

Accès aux pages web en mode édition

Pour éditer une page web, vous devez être connecté en mode édition, c’est à dire :

1. Vous rendre  à l’adresse web http://www.monadresse.fr/wp-admin

2. Saisir vos identifiants :

site Professionnel se connecter Éditer une page web

 

Vous arrivez alors sur la page d’accueil du système WikiPro avec entre autres un cadre intitulé « Pages » qui présente la liste des pages.

Au départ, une seule page existe : la page d’accueil du site.

Pour l’éditer, il suffit de cliquer sur son titre (1) directement ou sur « Modifier » (2) dans la fenêtre qui s’affiche en survolant avec la souris le titre de la page :

Dreamweaver 64 Éditer une page web

 

Une page web est constituée au minimum :

  1. D’un titre,
  2. D’une adresse web,
  3. D’un texte structuré,
  4. D’images.

Vous avez accès en édition à ces 4 parties principales d’une page web  en éditant une page web1 :

Dreamweaver 66 Éditer une page web

Le titre de page

Il est unique pour chaque page et dans un champ spécifique.

Champ d’édition du titre :

Dreamweaver 27 Éditer une page web

Il s’affichera à la fois dans le menu et en haut de la page avant le contenu proprement dit (textes et images) :

Dreamweaver 28 Éditer une page web

Si vous voulez un titre long dans la page et un titre court dans le menu, c’est possible en saisissant le titre du menu et le titre à afficher sur la page dans le formulaire situé sous la zone d’édition de contenu:

Dreamweaver 30 Éditer une page web

Voilà alors ce qui s’affiche sur le site web après avoir enregistré les modifications:

Dreamweaver 29 Éditer une page web

L’adresse web ou permalien

C’est cette adresse web qui permet à un ordinateur d’accéder à votre page web : elle doit être unique (impossible d’avoir deux adresses identiques pour 2 pages différentees).

L’adresse web de la page d’accueil est l’adresse web du site : elle ne peut pas être modifiée.

Les autres adresses web peuvent être éditées.

WikiPro vous aide à gérer les adresses web :

  • Les adresses web sont automatiquement générées par WikiPro à partir du titre initial de votre page web.
  • Les caractères accentués, interdits dans les adresses web, sont automatiquement remplacés par leur équivalent sans accent.
  • Les espaces , interdits dans les adresses web, sont automatiquement remplacés par un tiret haut : « -« .
  • Un numéro est ajouté en cas d’adresse web identique déjà existante.
  • Les anciennes adresses web sont redirigées vers la nouvelle adresse web.

Cette adresse web est très importante pour le référencement : elle doit contenir vos mots clés et ne pas être trop longue.

Pour l’éditer, vous cliquez sur le bouton Modifier qui est situé juste à droite de l’adresse web de la page éditée :

Dreamweaver 67 Éditer une page web

La partie éditable de l’adresse web s’affiche alors dans un champ modifiable :

Dreamweaver 68 Éditer une page web

Une fois vos modifications terminées, vous pouvez cliquer sur le bouton

  1. OK pour valider vos modifications,
  2. Mettre à jour pour enregistrer la nouvelle adresse web.

Le texte d’une page

Le format et le contenu de la page sont séparés avec le système WikiPro : le contenu qui est affiché en mode édition par défaut n’est pas mis en forme et ne correspond pas à la mise en page finale.

Seule la structure est indiquée avec des formats standard pour les titres, les sous-titres et les listes.

Néanmoins, vous êtes libre de forcer le style d’affichage final en utilisant les outils d’édition qui permettent de changer l’apparence des textes :

  • Couleurs du texte,
  • Tailles du texte,
  • Textes en gras,
  • Textes en italique,
  • Textes en souligné,
  • listes,
  • alignement des textes horizontal et vertical,
  • famille de polices de caractères,

Ensemble des outils de mise en forme:

Dreamweaver 16 Éditer une page web

En survolant avec la souris les différents outils de mise en forme, vous verrez leur titre et le raccourci clavier associé.

Ajouter du texte

Vous pouvez rédiger directement le texte dans votre zone d’édition.

L’édition dans cette zone est très similaire à l’édition dans les logiciels de traitement de texte :

  • Sélection du texte avec la souris puis clic sur un outil pour modifier le texte sélectionné,
  • Raccourcis clavier Ctrl.C et Ctrl.V pour copier/coller du texte (les outils de la barre d’outil de copier/coller ne fonctionne pas avec tous les navigateurs, mais les raccourcis clavier fonctionnent sur tous les navigateurs).

Ne vous souciez pas de la mise en page telle qu’elle apparait dans le mode édition : elle sera automatiquement transformée par WikiPro lors de l’affichage de votre site web.

Affichage de texte en mode édition :

Dreamweaver 8 Éditer une page web

Affichage du même texte dans le site web2:

Dreamweaver 9 Éditer une page web

Vous notez que les polices de caractère, l’espace entre les lignes, la taille et la couleur des caractères sont différents.

Avec WikiPro, le fond et la forme sont séparés : ainsi, à tout moment, vous pouvez réutiliser le même contenu dans une mise en page complètement différente en choisissant simplement une autre mise en page dans notre catalogue.

Éditer le texte confortablement

Vous pouvez agrandir la zone d’édition si vous voulez avoir une vue plus globale sur votre contenu en maintenant le clic droit appuyé sur le coin inférieur droit de la zone d’édition :

Dreamweaver 33 Éditer une page web

Pour les textes assez longs, nous vous recommandons de les rédiger d’abord dans votre éditeur de texte préféré (Word, Google documents, Apple Pages, etc) sans y ajouter les images et sans mise en page particulière en dehors des styles de titre, de sous-titres et des listes.

Une fois les textes bien rédigés, sans fautes de grammaire ni d’orthographe, et bien structurés avec des titres et des sous-titres, il vous suffit de les copier-coller dans WikiPro.

Une fois que vous avez copié le texte à insérer depuis votre traitement de texte habituel, vous pouvez l’insérer grâce à un des deux boutons prévus à cet effet :

  • Coller du texte simple :

Dreamweaver 10 Éditer une page web

  • Coller du texte Word :

Dreamweaver 11 Éditer une page web

Structurer le texte

Une fois les textes collés, il faut donner aux titres et aux sous-titres les styles respectifs « Titre 2″ et « Titre 3 »3 en cliquant sur ces titres et sous-titres et en sélectionnant pour chacun le bon format dans la fenêtre de format :

Dreamweaver 31 Éditer une page web

Référencement: pour bien référencer une page web, il est important qu’il n’y ait qu’un seul titre au format « Titre 1″, en principe c’est le titre principal de la page.

Dans le cadre du bon référencement d’une page web, le style « Titre 1″ ne doit pas être utilisé dans le texte d’une page.

Vous pouvez par contre définir un troisième niveau de titre avec le format « Titre 4″.

Ajouter des liens textuels

Pour créer un lien dans un texte, il suffit de sélectionner avec la souris le mot ou les mots qui vont constituer le lien (1) et de cliquer sur l’outil « Insérer/modifier un lien » (2) :

Dreamweaver 36 Éditer une page web

Une fenêtre qui permet de saisir l’adresse du lien (1) et le titre du lien (2) apparait :

Dreamweaver 34 Éditer une page web

Vous pouvez aussi choisir d’ouvrir le lien dans une nouvelle fenêtre (3) et valider en cliquant sur « Ajouter un lien » (5).

Pour les pages web définie dans WikiPro, un cliquant sur le petit triangle (4), vous faites apparaitre la liste des pages web existantes dans votre site web.

En cliquant sur une des pages web existantes, les champs d’adresse web et d’adresse sont automatiquement remplis :

Dreamweaver 35 Éditer une page web

Les liens apparaissent en bleu ou violet et soulignés en mode édition.

Supprimer un lien textuel sans supprimer le texte du lien

Il suffit de cliquer sur le lien avec la souris (1) et de cliquer sur l’outil « Défaire le lien » (2) :

Dreamweaver 37 Éditer une page web

Résultat : le lien disparait mais pas le texte :

Dreamweaver 38 Éditer une page web

Vérifier automatiquement l’orthographe et la grammaire

Une fois votre texte bien formaté, vous pouvez lancer une vérification orthographique et grammaticale automatique de vos textes en français en cliquant sur le bouton suivant :

Dreamweaver 2031 Éditer une page web

Après quelques secondes de calcul:

  • les mots identifiés comme mal orthographiés apparaissent soulignés en rouge (uniquement en mode édition),
  • les problèmes de grammaire soulignés en vert  (uniquement en mode édition).

Attention : cet assistant automatique n’est pas parfait : il peut se tromper en oubliant certaines erreurs ou en détectant de fausses erreurs.

Avec un clic droit sur les mots soulignés en rouge, une liste de mots de remplacement sont proposés : vous pouvez cliquez sur celui qui convient pour corriger la faute d’orthographe.

Exemple en cliquant sur le mot « commodo » :

Dreamweaver 43 Éditer une page web

Avec un clic droit sur les mots soulignés en vert, une explication est proposée :

Dreamweaver 42 Éditer une page web

Exemple d’explication concernant « mon entreprises » :

Dreamweaver 44 Éditer une page web

Copier /Coller du contenu web existant

C’est utile quand vous voulez :

  • Réorganiser l’ordre des textes d’une page existante,
  • Diviser une page existante en deux pages,
  • Récupérer les pages de votre ancien site web dans le cadre d’une refonte de site.

Depuis WikiPro vers WikiPro

Vous pouvez librement copier /coller le contenu existant entre les pages crées dans WikiPro en sélectionnant le contenu à déplacer, en cliquant le raccourcis clavier Ctrl+C, puis en allant à l’endroit avec la souris là où vous voulez insérer le contenu et en utilisant le raccourci Ctrl+V : tout le contenu, y compris les images, est déplacé sans être modifié.

Depuis un autre site web vers WikiPro

Vous devez avoir les droits de propriétés intellectuelles sur les images et les textes copiés, comme c’est la cas normalement depuis votre ancien site web vers votre nouveau site web.

Avec les images, même si elles apparaissent dans WikiPro, elle sont en réalité toujours hébergées sur l’autre site web.

Il est donc préférable de télécharger toutes les images sur votre ordinateur avant de les télécharger dans WikiPro.

 

Ajouter une image

Nous vous conseillons de préparer un dossier avec tous les fichiers de vos images en prenant soin de :

  • Donner à chaque fichier un nom qui décrive le contenu de chaque image
  • Régler la largeur des images afin qu’elle ne dépassent pas 650 pixels de large
  • Régler la compression des images afin que la taille des fichiers ne dépassent pas 200 Ko.

Vous positionnez le curseur à l’endroit où l’image doit être insérée (1), vous cliquez sur le bouton « Ajouter une image » (2):

Dreamweaver 51 Éditer une page web

Une fenêtre intitulée « Insérer un média« s’affiche avec deux onglets :

  • En cliquant sur  l’onglet intitulé « Envoyer des fichiers » (1), vous pourrez télécharger une image depuis votre ordinateur en cliquant sur « Sélectionner des fichiers » (2) (cela prend quelques secondes en fonction de la taille du fichier de votre image et de votre connexion Internet),

Dreamweaver 522 Éditer une page web

  • En cliquant sur l’onglet intitulé « Bibliothèque de médias » (1), vous pouvez réutiliser une image déjà téléchargée sur votre site web4 en cliquant dessus (2) puis en cliquant sur le bouton « Insérer dans la page » (3):

Dreamweaver 53 Éditer une page web

Pour afficher une image web déjà publiée sur un autre site web à partir de son adresse web, vous pouvez cliquer en bas de la colonne de gauche sur le lien « Insérer à partir d’une adresse web ». Cette option est à utiliser avec parcimonie, uniquement avec des images libre de droit et dont vous maitrisez l’hébergement sur le web.

Options d’affichage d’une image

Une même image peut être :

  • De taille différente,
  • Positionnée horizontalement différemment (à gauche, au centre ou à droite).

A chaque fois qu’une image est téléchargée dans WikiPro, 3 fichiers de la même image sont créés avec 3 tailles différentes:

  • Taille originale (celle du fichier d’origine)
  • Moyenne (300 pixels de large, hauteur proportionnelle à l’image d’origine)
  • Miniature (recadrage d’un carré de 150 pixels sur 150 pixels centré au milieu de l’image d’origine)

Dans la fenêtre « Insérer un média » qui s’affiche après avoir cliqué sur « Ajouter une image« , en bas à droite, un menu déroulant apparait avec la liste des 3 fichiers quand on clique sur « Taille originale – … x … » :

Dreamweaver 45 Éditer une page web

Vous pouvez choisir la taille qui vous convient avant de cliquer sur « Insérer dans la page« .

L’alignement horizontal peut également être défini (2) avant de cliquer sur « Insérer dans la page » (3) :

Dreamweaver 55 Éditer une page web

 

Vous pouvez choisir un alignement horizontal.

Exemple d’alignement « Aucun » (par défaut) :

Dreamweaver 58 Éditer une page web

Gauche :

Dreamweaver 59 Éditer une page web

Centre :

Dreamweaver 60 Éditer une page web

Droite :

Dreamweaver 61 Éditer une page web

Associer un lien à une image

Vous pouvez ajouter un lien lié à une image, de sorte qu’en cliquant dessus, une nouvelle page web s’affiche.

Par défaut, WikiPro associe l’image inséré avec l’image originale correspondante, de sorte qu’en cliquant dessus, un diaporama de l’ensemble des images de la page fait défiler toutes les images de la page web.

Pour enlever cet effet sur une image et le remplacer par un lien vers une autre page web, vous pouvez éditer une image déjà insérée en cliquant sur l’image puis sur l’icône d’édition:

Dreamweaver 56 Éditer une page web

Dans la fenêtre qui s’affiche, vous pouvez remplacer le lien vers l’image par le lien de votre choix5 ou par aucun lien (1) et de cliquer sur « Mettre à jour » :

Dreamweaver 57 Éditer une page web

 

Vous notez au passage qu’il est également possible dans cette fenêtre de régler la taille d’affichage (en pourcentage de l’affichage courant) et l’alignement horizontal de l’image.

Effacer une image

Il suffit de :

  • cliquer dessus et de cliquer sur votre clavier sur le bouton « Suppr »

OU

  • de cliquer sur la photo puis de cliquer sur l’icône rouge de suppression en haut à gauche de l’image :

Dreamweaver 32 Éditer une page web

 

Important: cela n’efface pas le fichier de l’image qui reste toujours disponible dans la liste de la bibliothèque de médias.

Supprimer le fichier d’une image

Après avoir vérifié qu’une image n’est pas utilisée dans votre site web et qu’elle ne le sera pas, vous pouvez supprimer le fichier de cette image.

Cliquez dans le menu gauche sur « Images, PDF… » (1), vérifiez que l’image n’est pas utilisée (2) et cliquez sur le lien « Supprimer définitivement » qui s’affiche lorsque la souris survole la ligne correspondante (3):

Dreamweaver 63 Éditer une page web

Option : Ajouter une image à la Une

Une image « à la Une » est l’image principale associée à une page web.

Si vous définissez parmi les images d’une page web l’image qui doit être à la Une, elle s’affichera à côté du titre de la page dans les résultats de recherche, dans les listes de pages, etc.

Cette option est utile pour bien illustrer les différents affichages de votre site web et les rendre plus attractifs.

Sur la page web qui sert de page d’accueil, une image à la une à été définie au départ.

Pour la remplacer par votre propre image, il suffit de cliquer sur « Supprimer l’image à la Une » :

Dreamweaver 2019 Éditer une page web

L’image disparait immédiatement.

Pour rajouter votre propre image à la Une, il suffit de cliquer alors sur le lien « Utiliser comme image à la Une« :

Dreamweaver 46 Éditer une page web

Dans la fenêtre qui s’affiche,  vous pouvez sélectionner une image dans la liste (1) et cliquer sur « Utiliser comme image à la Une » (2) :

Dreamweaver 48 Éditer une page web

Résultat : votre image est sélectionnée comme image à la Une associée à cette page web :

Dreamweaver 49 Éditer une page web

Cette image est associée à la page web et servira à l’illustrer comme par exemple dans les résultats de recherche:

Dreamweaver 50 Éditer une page web

  1. sauf l’adresse web de la page d’accueil qui est fixe par définition [Retour ↩]
  2. mise en forme automatique avec WikiPro [Retour ↩]
  3. le style « Titre 1″ est réservé au titre de la page déjà utilisé [Retour ↩]
  4. Il est inutile de télécharger plusieurs fois la même image affichée à des pages différentes [Retour ↩]
  5. http://… [Retour ↩]

© 2013-2021 Aellio Web Agency Tous droits réservés