Projets

Association

Dossiers tech.

Connexion

Rechercher Web Pages

Edition de page

Objectif:

Cette page à pour but de permettre aux personnes voulant créer des pages de documentation de le faire sans dificuté...

Dans cette page de "trucs et astuces", vous trouverez:

• Où éditer une nouvelle page
• Comment organiser sa page par sections
• Insérer une image
• Créer une liste à puce (ce que vous lisez actuellement :) ), ajouter un lien, etc.

Où éditer une nouvelle page

Tout d'abord, vous devez vous loguer (donc être enregistré auprès du webmaster!) et avoir demandé (et reçu!) les droits nécessaires d'édition de documents via le forum.

Ensuite, la marche à suivre est la suivante:
Dans le bloc vous saluant, allez dans le Panneau de contrôle, choisissez l'onglet Contenu du site puis le lien Pages Web.

Toutes les pages listées à cet emplacement sont en cours de création. Pour un nouvel ajout, en haut à droite, choisir "Nouvelle Page" puis actionnez le bouton "En Avant"!

Comment organiser sa page par sections

L'éditeur de page vous invite à créer une nouvelle section: kézako?

Le découpage d'une page par sections permet une organisation optimale de celle-ci. En effet, faire correspondre à chaque paragraphe une section et à chaque image une section, permet une gestion de la page simplifiée. Chaque section d'une même page est indépendante des autres sections et peut-être ainsi modifiée, déplacée ou supprimée sans incidence sur les autres sections.
(voir l'image ci-dessous reprenant la création des trois premiers paragraphes de cette page)

Nous retiendrons donc que:

• chaque nouveau paragraphe (ou bloc) = une nouvelle section
• chaque nouvelle image = une nouvelle section

Mais également que:

• Chaque section peut être modifiée ou supprimée
• Chaque section peut être "déplacée" (réorganisée) au sein de la page grâce aux boutons "Haut" et "Bas"

Insérer une image

Comme une image correspond à une section, vous allez devoir créer autant de sections que d'images à insérer dans votre page.

Dans l'exemple ci-dessous, la partie droite est le résultat donné par les informations précisées dans la partie gauche pour l'insertion d'une image.

A noter:

• la légende sera toujours placée sous l'image.
• Le modèle "image_center.tpl" doit être sélectionné pour avoir une image centrée

Créer une liste à puces, ajouter un lien...

Comme vous l'aurez sûrement remarqué, l'éditeur de page vous propose une aide à l'édition au travers de différents boutons ci-dessous:
Détaillons un peu ceux qui vous serviront le plus:

Les puces
En cliquant sur l'icone des puces, le code suivant s'insère (toujours) à la fin de votre texte:

<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Par défaut, l'éditeur insère trois puces. A vous de modifier le code afin de l'adaper à vos besoins.
La liste de puces démarre par le code <ul> et se termine par </ul>. Entre ces deux balises indispensables, nous trouvons les puces.
Chacune est définie par une balise d'ouverture <li> + du texte ("Item x" par défaut) + une balise de fin </li>.

Exemple: le code ci-dessous...

<ul type="disc">
<li>Premier point à développer</li>
<li>Un deuxième</li>
<li>Voici le texte de la 3ème puce</li>
<li>Et la 4ème pour conclure l'exemple</li>
</ul>

...affichera ceci:

• Premier point à développer
• Un deuxième
• Voici le texte de la 3ème puce
• Et la 4ème pour conclure l'exemple

L'habillage du texte

En cliquant sur les différents icônes d'habillage de texte, le code s'insère (toujours) à la fin de votre texte:

• L'icône #B# met le texte entre les balises en gras et génère le code suivant: <b>Bold Text</b>
• L'icône #I# met le texte compris entre les balises en italique et génère le code suivant: <i>Italicized Text</i>
• L'icône #U# souligne le texte compris entre les balises et génère le code suivant: <u>Underlined Text</u>

Ainsi, le code ci-dessous...
<b>Ce texte sera en gras</b>
<i>celui-ce plutôt en italique</i>
<u>ce dernier sera souligné</u>

...affichera ceci:
Ce texte sera en gras
celui-ce plutôt en italique
ce dernier sera souligné


Les liens

En cliquant sur l'icône de lien (ressemble à un éclair :) ), le code suivant s'insère (toujours) à la fin de votre texte:
<a href="http://www.web_address.here">Click Text Here</a>

Il ne vous qu'à modifier l'@ du lien et le texte à afficher. Par exemple, le code ci-dessous...
<a href="http://www.astrimage.org">Site Astrimage</a>

...affichera ceci:
Site Astrimage



Note: rien ne vous empèche biensûr de ne pas utilier les boutons d'aide et de taper directement les balises...!!!