Amaya - Guide utilisateur
Irène Vatton
Dernière mise à jour : 2006-04-18
Ce document a pour but d'aider les nouveaux utilisateurs d'Amaya. Pour
plus de détail sur l'interface, il faut se reporter au manuel de référence.
1. Introduction
L'objectif du Web est de permettre l'échange d'informations quelque soit
le support.
- A opposer à l'approche Word :
En général la description d'un document Word se limite à la
présentation, essentiellement l'usage de fontes. Si le destinataire ne
dispose pas des mêmes fontes, le document peut être illisible.
- La solution préconisée est d'utiliser un modèle de description
clairement défini et ouvert. C'est ce que permet de faire HTML en
définissant un modèle de document Web standard.
Avec les CSS (Cascading Style Sheets) il y a même séparation entre la
structure + contenu et la présentation.
L'auteur d'un document Web doit distinguer ce qui est du ressort de la
structure (titres, paragraphes, listes, etc.) de ce qui n'est que de la
présentation (taille de caractères, couleurs, etc.)
Un bon exercice : comprendre un document en lisant ses balises HTML et le
texte.
Pourquoi un éditeur structuré pour HTML ?
HTML définit une structure (organisation) de document.
- Elements : Découpage sémantique du document même si ce
découpage a un effet sur la présentation
Par exemple un H2 a un effet de présentation mais donne aussi une
information sémantique. C'est un en-tête moins important qu'un H1 et plus
important qu'un H3.
De même un lien (ancre + href) définit plus qu'un simple texte
coloré/souligné.
- Attributs : Caractérisation sémantique
L'attribut class="section" sur une division, la cible d'un lien
href="http://www.w3.org/"
La décoration des documents est confiée à un langage de style CSS
(Cascading Style Sheets).
Pourquoi des familles HTML ?
Avant que le langage CSS ne soit finalisé, HTML avait introduit des
éléments et des attributs qui n'avaient pas de valeur sémantique, mais
servaient à modifier la présentation des documents. Par exemple
<font>...</font> pour choisir une police de caractères
particulière. Avec le langage CSS, ces éléments et attributs n'ont plus de
raison d'être. La sous-famille de HTML 4.0 Strict élimine les éléments et
attributs HTML qui doivent être remplacé par des propriétés CSS (center,
font, color, background).
La sous-famille de HTML 4.0 Frameset isole les éléments et attributs qui
décrivent le découpage en fenêtres (frames). Le W3C décommande l'utilisation
des "frames" pour faire que les sites Web soient accessibles aux handicapés
(problèmes de navigation et de contexte).
D'autres familles XHTML ont été introduites par :
Les différences entre HTML et XHTML
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Amaya - Guide utilisateur</title>
</head>
<body xml:lang="fr">
<h1 id="Amaya">Amaya - Guide utilisateur</h1>
<h2>Plan</h2>
<ol>
<li>Introduction</li>
<li>HTML</li>
<li>Quelques règles</li></ol>
</body>
</html>
Les familles HTML
| Famille |
Eléments + attributs |
Strucutre |
HTML 4.0 Transitional
|
Tout sauf les frames |
Structure implicite |
| HTML 4.0 Strict |
Sans éléments de présentation |
Structure implicite |
| HTML 4.0 Frameset |
Les frames |
Structure implicite |
| XHTML 1.0 Transitional |
Tout sauf les frames |
Structure bien formée |
| XHTML 1.0 Strict |
Sans éléments de présentation |
Structure bien formée |
| XHTML 1.0 Basic |
Adapté aux téléphones |
Structure bien formée |
| XHTML 1.1 |
XHTML 1.0 Strict + annotations Ruby |
Structure bien formée |
Quelques règles d'accessibilité à suivre
Enoncé de quelques règles
2. Présentation générale d'Amaya
Amaya est à la fois navigateur et un éditeur :
Amaya est un éditeur doté de capacités de navigation.
C'est à dire que pendant que l'utilisateur travaille sur les documents de son
site Web, il peut accéder n'importe quel autre document Web de sites
extérieurs.
Lorsqu'il est utilisé comme navigateur, Amaya se comporte comme beaucoup
d'autres navigateurs Web, excepté pour ce qui est d'activer les liens. Par
défaut le simple clic est utilisé pour poser la sélection (définir le point
d'insertion de texte) et il faut effectuer un double-clic sur un lien pour
l'activer.
Fenêtre initiale :
Par défaut, l'utilisateur voit la vue formatée du document. C'est l'aspect
final du document tel qu'il est vu par un navigateur Web
La barre de menu :
- Fichier : création de documents, navigation, impression, fermeture.
- Edition : édition de base, recherche/remplacement, correction
orthographique, paramétrage.
- XHTML : création/remplacement d'éléments (X)HTML.
- XML : création d'éléments XML.
- Liens : création et destruction des liens.
- Vues : gestion des différentes vues du document.
- Style : gestion du style CSS.
- Annotations : création, destruction d'annotations.
- Aide : donne accès au manuel en ligne.
Les barres d'outils
Contient quelques boutons d'accès aux fonctions les plus utilisées
- Stop
: arrête le
transfert d'information depuis un serveur Web
- Document précédent
:
retour au document précédent (s'il y en a un)
- Document suivant
:
retour au document suivant (s'il y en a un)
- Recharger
:
recharge le document (accès serveur)
- Page personnelle
:
affiche la page de démarrage
- Sauver
: sauver les
modifications
- Imprimer
: imprime
le document
- Rechercher/Remplacer
: affiche un formulaire de recherche/remplacement de texte
- Mise en évidence
:
permet de créer/supprimer un élément "mise en évidence"
(<em>...</em>)
- Important
: permet
de créer un élément "important" (<strong>...</strong>)
- Fonte fixe
: permet de
créer un élément "fonte fixe" (<code>...</code>)
- Ajout d'une image
:
permet de créer un élément "image" (<img/>)
- Titre niveau 1
: permet de
créer un élément "titre niveau 1" (<h1>...</h1>)
- Titre niveau 2
: permet de
créer un élément "titre niveau 2" (<h2>...</h2>)
- Titre niveau 3
: permet de
créer un élément "titre niveau 3" (<h3>...</h3>)
- Liste
: permet de créer
un élément "liste à puces" (<ul>...</ul>)
- Liste numérotée
:
permet de créer un élément "liste numérotée"
(<ol>...</ol>)
- Liste de définitions
: permet de créer un élément "liste de définition"
(<dl>...</dl>)
- Lien
: permet de créer un
élément "titre niveau 1" (<a href="...">...</a>)
- Table
: permet de créer
un élément "titre niveau 1" (<table>...</table>)
- Maths
: palette pour
créer des formules
- Graphique
: palette pour
créer des graphiques vectoriels
- Bibliothèque SVG
:
affiche la palette de graphiques prédéfinis
et une zone d'affichage de l'adresse du document.
3. Paramétrage de l'application
Avant d'éditer des documents Web avec Amaya, il est important de fixer un
certain nombre de paramètres. Pour cela il faut ouvrir au moins deux des dix
menus de préférences disponibles dans Éditer/Préférences.
Chaque menu présente trois boutons d'action :
| Appliquer |
Ce bouton valide et stocke les options affichées dans le menu. |
| Défauts |
Ce bouton rétablit, mais ne sauve pas, les valeurs par défaut. Il
faut utiliser le bouton Appliquer pour valider les options. |
| Terminer |
Ce bouton ferme le menu. |
Voici les paramètres importants à régler :
Dans les préférences générales
- Page de démarrage : Spécifie l'URI qu'Amaya chargera
au démarrage ou quand l'utilisateur pressera le bouton (par exemple l'URI
http://www.w3.org).
- Activer le coller ligne à ligne :
Cette option concerne le coller depuis une autre application. Quand cette
option est activée, les lignes de l'application source sont conservées.
Sinon les caractères « fin de ligne » sont remplacés par des espaces.
- Produire des fichiers de sauvegarde : Si cette option
est active Amaya va produire périodiquement un fichier de sauvegarde pour
chaque document édité.
- Montrer boutons : Contrôle l'affichage de la barre de
boutons pour tous les documents.
- Montrer l'adresse : Contrôle si Amaya affiche
l'adresse des documents.
- Montrer les cibles : Contrôle si les cibles de liens
sont visualisées ou non. Montrer les cibles peut aider quand on veut
créer de nouveaux liens. Cette option agit immédiatement sur tous les
documents édités.
- Zoom caractères : Cette option vous permet de réduire
ou d'augmenter les tailles des polices de caractères utilisées. Cette
option a un effet immédiat sur tous les documents édités.
- Langue du dialogue : Spécifie la langue utilisée dans
les menus et les messages. La langue par défaut est l'anglais américain
(valeur en). D'autres langues sont possibles comme le français (fr),
l'italien (it), l'espagnol (es), et l'allemand (de).
Dans les préférences de navigation
- Charger les images : Contrôle si les images doivent
être chargées et affichées. Sinon, l'attribut ALT est visualisé à la
place de l'image. Cette option prend effet dès que le formulaire est
validé.
- Charger les objets : Contrôle si les objets doivent
être chargés et affichés. Sinon, le contenu de l'objet est visualisé à la
place de l'objet. Cette option prend effet dès que le formulaire est
validé.
- Montrer les images de fond : Contrôle si les images en
arrière plan doivent être montrées ou non. Cette option prend effet dès
que le formulaire est validé.
- Le double clic active les liens : Depuis la première
version d'Amaya, les utilisateurs ont besoin de double cliquer sur un
lien pour l'activer. Cela permet de différencier l'édition d'un lien de
son activation. Vous pouvez changer ce comportement en désactivant cette
option.
A voir pour plus de détail
4. Création/Edition d'une page Web
L'entrée Fichier/Nouveau permet de créer un nouveau
document d'un type donné. Amaya demande de spécifier l'URI ou le nom local du
document à créer (un nom par défaut est généré). Après confirmation, Amaya
ouvre un nouveau document vide.
L'entrée Fichier/Ouvrir remplace le document affiché.
Amaya utilise la même entrée de menu par le nouveau document sélectionné.
Amaya utilise la même entrée de menu pour ouvrir un document local ou un
document d'un serveur Web.
L'entrée Fichier/Ouvrir dans nouvelle fenêtre affiche le
nouveau document sélectionné dans une nouvelle fenêtre.
Les entrées du menu XHTML présentent les éléments que l'on peut insérer
dans le document affiché, en fonction de la famille XHTML choisie. La manière
la plus simple de créer de nouveaux éléments dans un document est de placer
le point d'insertion dans la position voulue et d'utiliser le menu
Xhtml, ou les boutons correspondant aux éléments les plus
communs (images, en-têtes, listes...). Ces boutons ou entrées de menu créent
l'élément correspondant à la position courante. Si l'élément désiré ne peut
pas être créé exactement à la position choisie. Amaya tente alors de créer
l'élément à l'endroit le plus proche possible.
Définir le titre du document
Par défaut Amaya donne le titre "No title" au document nouvellement créé
parce que cet élément est obligatoire. Il ne faut pas oublier de mettre à
jour ce titre en activant l'entrée XHTML/Changer le
titre.
Définir la langue utilisée
Il est important de définir la langue dans laquelle est écrit le document.
Sans indication explicite, le document est supposé écrit en anglais. La
langue est utilisée par le correcteur orthographique.
Pour définir qu'un document est écrit français, il faut sélectionner
l'élément <body> et lui appliquer l'attribut lang=fr.
Première méthode
On pose la sélection n'importe où dans le document et on utilise la touche
F2 pour remonter la sélection sur l'élément <body>. La barre
de statut affiche l'élément sélectionné. A ce moment là on sélectionne
l'entrée du menu Attributs/Langue pour afficher le
formulaire de choix de la langue.
Deuxième méthode
On ouvre la vue Structure (entrée Vue/Montrer la
structure), on sélectionne l'élément <body>.A ce moment là on
sélectionne l'entrée du menu Attributs/Langue pour afficher
le formulaire de choix de la langue.
Amaya ne fournit aucune vue d'ensemble des pages installées sur le
serveur. Cependant il est possible de sauver ou copier des fichiers sur un
serveur ou sur sur son disque local grâce aux commandes
Sauver et Sauver comme. Pendant ces
opérations, Amaya tient compte des images.
La commande sauver peut être invoquée soit en choisissant
Sauver depuis le menu Fichier (Ctrl
s pour Windows, Ctrl x Ctrl s pour Unix) ou bien en cliquant
sur le bouton .
Le fait de sélectionner l'entrée Sauver comme dans le
menu Fichier ouvre une boîte de dialogue qui permet de
sauver le document courant à une adresse différente (sur un serveur Web ou
sur le disque local) ou de changer certains paramètres, comme le format du
document et l'encodage.
5. Création du contenu (paragraphes, en-têtes de sections,
divisions)
Par défaut, Amaya crée un nouveau paragraphe chaque fois que l'on active
la touche Enter. Une fois le paragraphe et son contenu créé, on
peut insérer un en-tête de section, avant, après, ou au milieu du
paragraphe,
- en activant un des boutons Hn,
- ou en tapant Ctrl n (n allant de 1 à 6),
- ou en sélectionnant, l'entrée correspondante du menu
XHTML.
Quand l'insertion se fait au milieu du paragraphe, Amaya coupe le
paragraphe existant en deux et insère l'en-tête au milieu.
Transformations
Si une partie du paragraphe est sélectionnée au moment où on insère
l'en-tête, ce texte sera supprimé dans le paragraphe et inséré dans l'en-tête
créé.
On peut aussi sélectionner le paragraphe (touche F2) et
transformer ainsi le paragraphe en en-tête. Un ou plusieurs paragraphes
peuvent en fait se transformer en liste, table, préformaté en fonction de
l'élément cible choisi. L'entrée de menu Edition/Transformer
propose les cibles possibles pour la sélection courante.
Préformaté
L'élément préformaté est un paragraphe particulier qui permet de préserver
tous les caractères : espace, fin de ligne.
Pour transformer un paragraphe en préformaté, on sélectionne le paragraphe
en entier et on active l'entrée de menu XHTML/Préformaté (ou
Ctrl h Ctrl p).
Pour transformer un préformaté en paragraphe, on sélectionne le préformaté
en entier et on active l'entrée de menu XHTML/Paragraphe.
Quand la sélection se trouve à la fin d'un <pre>, la touche
Enter crée une nouvelle ligne du <pre>. Pour créer un
paragraphe après le <pre>, il faut sélectionner le <pre> en
utilisant la touche F2 puis Enter.
Division
Il est possible de grouper une série de paragraphes, en-têtes, etc. dans
une division. Pour cela, on sélectionne les éléments à grouper ainsi que
l'entrée DIV dans le menu XHTML.
La touche Enter
La touche Enter (ou Return) joue un rôle particulier. En
général elle clôt l'élément courant et crée un paragraphe juste après. Si un
élément complet est sélectionné, la touche Enter crée une autre
instance de cet élément. Par exemple si on sélectionne un en-tête, la touche
Enter va créer un en-tête vide après.
Des éléments consécutifs peuvent être fusionnés, même s'ils ne sont pas au
même niveau dans la structure du document. La fusion s'effectue à l'aide des
touches Back Space et Delete. Quand le point
d'insertion est à la fin d'un élément, utilisez la touche Delete.
Quand il est au début, utilisez la touche Back Space. Dans les
deux cas, ces touches n'effacent aucun caractère. Elles fusionnent des
éléments séparés par une limite de structure.
Quand le point d'insertion est à l'intérieur d'un élément, ces deux
touches effacent comme d'habitude le caractère suivant ou le caractère
précédent.
Caractères spéciaux
Pour les caractères ISO-latin qui ne sont pas directement disponibles
depuis le clavier, Amaya utilise le support standard fournit par le
système.
Amaya fournit aussi des raccourcis pour certains caractères non
disponibles au clavier comme :
- Pour obtenir un espace non sécable, vous devez taper Ctrl -
espace. Ce caractère sera sauvé comme une entité
( ).
- Pour obtenir un € (euro), vous devez taper Alt e.
- Pour obtenir un «, vous devez taper Ctrl < (ou
Shift Ctrl < selon le clavier).
- Pour obtenir un », vous devez taper Shift Ctrl >.
Insérer une image
Pour insérer une image, on choisit l'entrée Image dans le
menu XHTML (raccourci Ctrl h Ctrl i) ou on clique
sur le bouton . Une boîte de dialogue s'affiche qui permet de
rentrer le nom du fichier et le texte
de remplacement ('ALT' texte) de l'image. L'insertion n'est prise en
compte que lorsque le texte de remplacement est fourni.
L'image est affichée avec ses dimensions par défaut. On peut
redimensionnerer l'image insérée :
- soit par manipulation directe - en combinant la touche
Control et le bouton droit ou le bouton du
milieu de la souris,
- soit en éditant les attributs width et
height de l'image. Quand l'image est sélectionnée, on
sélectionne l'entrée width ou height du
menu Attributs.
Par défaut l'image est cadrée à gauche. On peut modifier le cadrage de
l'image sélectionnée en modifiant l'alignement dans le formulaire
Format du menu Style.
Remplacer une image
Pour remplacer une image il faut sélectionner cette image en draguant sur
l'image avec la souris. Procédez alors comme pour l'ajout d'une image (voir
ci-dessus). Lorsqu'une image (et seulement une image) est entièrement
sélectionnée, la boîte de dialogue des images effectue le remplacement de
l'image sélectionnée au lieu d'insérer une nouvelle image.
Copier/Coller, Défaire/Refaire
Amaya permet copier/coller non seulement du texte et des images, mais
aussi une structure complexe comme une division ou une suite de paragraphes
et d'en-têtes.
Il est toujours possible de défaire et de refaire les dernières
modifications opérées dans le document.
A voir pour plus de détail
Exercice 1 : Créer un document contenant des
paragraphes, des en-têtes, des divisions.
6. Les listes
Editer les listes à puces ou les listes numérotées
Première méthode
En cliquant sur (ou
Ctrl h Ctrl l) on crée une liste à puces et un premier item de
liste à l'intérieur.
- Il ne reste plus qu'à taper le texte de l'item.
La touche Enter en fin d'item va créer un paragraphe vide
dans l'item et on peut immédiatement saisir le contenu de ce nouveau
paragraphe.
- Si on ne veut pas insérer de paragraphe mais passer à l'item suivant,
on double la touche Enter.
Attention en cliquant sur (ou Ctrl h Ctrl l) on crée une nouvelle liste à puces à
l'intérieur de l'item courant.
- Si on veut terminer la liste, on triple la touche Enter.
En cliquant sur (ou Ctrl h Ctrl n) on crée une liste numérotée et un item de
liste à l'intérieur.
Deuxième méthode
On peut saisir du texte sans définir au préalable de type d'élément. Par
défaut, Amaya crée un nouveau paragraphe chaque fois que l'on active la
touche Enter. On peut ensuite sélectionner plusieurs paragraphes
et cliquer sur (ou Ctrl
h Ctrl l) pour créer une liste à puces.
Pour sélectionner tout le contenu d'une suite de paragraphes, on utilise
la touche F2.
Transformation d'une liste à puces et en liste numérotée
On pose la sélection dans un item de liste, puis en doublant la touche
F2 on sélectionne la liste complète. En cliquant sur (ou Ctrl h Ctrl
n) on crée une liste numérotée à la place. On peut bien sûr passer de
la même façon d'une liste numérotée à une liste à puces.
Editer les listes de définitions (dl/dt/dd)
En cliquant sur (ou Ctrl h Ctrl d) on crée une liste de définitions.
La touche Enter est également utile pour éditer des listes de
définitions. Considérez l'exemple suivant :
- Terme 1
- Terme 2
- Définition des deux termes.
C'est une liste de définitions (dl) contenant deux termes
(dt) suivis par une définition (dd). Pour ajouter
un nouveau paragraphe à l'intérieur de la définition (dd),
placez le point d'insertion à la fin (après le mot "termes") et appuyez sur
la touche Enter. Si vous pressez Enter deux fois, vous
sortez de la définition en cours (dd) et vous créez un nouveau
terme (dt). A la fin de ce nouveau terme, presser une fois la
touche Enter vous permet de créer encore un nouveau terme
(dt). La presser deux fois crée une nouvelle définition
(dd).
Si vous voulez créer un nouveau terme avec sa définition avant le
Terme 1, mettez le point d'insertion au début du terme 1 et appuyez sur
Enter. Tapez le nouveau terme (dt), puis pressez
Enter deux fois : une nouvelle définition (dd) est
créée directement après le nouveau terme.
De façon générale on utilise la touche Enter pour insérer des
éléments de structure avant ou après des listes ou des items de liste, et les
touches Back Space et Delete pour fusionner des listes
ou des items de listes.
Exercice 2 : Créer et transformer des listes.
7. Les liens
Les liens hypertexte permettent de relier des parties de document
entre-elles ou des documents entre-eux.
Création de cibles
La cible d'un lien hypertexte peut être
- un document entier,
- ou un passage du document englobé par une ancre cible,
- ou un élément HTML qui possède un identificateur (attribut ID)
Pour créer une cible dans un document, il suffit de sélectionner le
passage désiré et d'activer l'entrée de menu Créer cible
(Ctrl l Ctrl t) dans le menu Liens. Si la
sélection porte sur un élément HTML entier, Amaya va lui associer un
identificateur unique. Sinon, Amaya va englober le contenu de la sélection
dans une ancre cible.
On peut demander à Amaya d'associer un identificateur à tous les éléments
d'un certain type dans le document. Pour cela on active l'entrée
Ajouter/Retirer des attributs ID dans le menu
Liens. Par exemple, on peut demander d'associer un
identificateur à tous les éléments H2.
Création de liens
L'origine d'un lien est une ancre qui possède un attribut
href. On procède de la même façon pour un lien vers un document
entier ou une cible.
Lien vers un autre document édité par Amaya
- On sélectionne le passage choisi.
- On clique sur le bouton
- On clique sur le document cible affiché.
Autre méthode :
- On sélectionne le passage choisi.
- On choisit Créer/changer lien du menu Liens (raccourci
Ctrl l Ctrl l) pour afficher le formulaire de création de lien.
- Soit on saisit l'URI du document cible et on confirme. Soit on décide
de désigner la cible avec la souris (bouton Clic puis clic sur le
document cible affiché).
Dans tous les cas, une fois la cible choisie, Amaya va calculer l'URL
relative qui permet d'aller du document source au document cible.
Lien vers une ancre cible d'un document édité par Amaya
Pour créer un lien vers une ancre cible particulière ou vers un élément
cible particulier d'un document édité par Amaya, il faut d'abord demander la
visualisation des cibles 
dans le document concerné en activant l'entrée
Montrer les cibles du menu Vues ou ouvrant
la vue des liens (entrée Montrer les liens du menu
Vues). Ensuite :
- On sélectionne le passage choisi.
- On clique sur le bouton
- On clique sur la cible choisie.
Lien vers un autre document non affiché
Pour créer un lien vers un autre document local ou distant :
- On sélectionne le passage choisi.
- On clique sur le bouton
- On clique sur une zone du document qui ne peut pas être une cible pour
afficher le formulaire de saisie de l'URL. Si le document est local, on
peut utiliser le browser de fichier pour sélectionner le fichier.
Autre méthode :
- On sélectionne le passage choisi.
- On choisit Créer/changer lien du menu
Liens (raccourci Ctrl l Ctrl l)
- On saisit l'URL du document cible et on confirme.
Pour garder une ancre mais changer la cible du lien correspondant, on
place la sélection dans l'ancre et on procède comme pour la création de lien
(bouton ou l'entrée
Créer/changer Lien du menu Liens). On peut
alors désigner la nouvelle cible ou éditer l'URI.
Pour changer la cible d'un lien, on peut également éditer l'attribut
href dans la vue structure.
Le menu Liens contient une entrée Détruire
ancre qui permet de détruire l'ancre cible ou le lien sélectionné.
Il suffit que la sélection soit à l'intérieur de l'ancre à détruire. L'ancre
est détruite, mais son contenu reste.
Exercice 3 : Créer des liens dans un document et
entre documents, copier/coller de structures contenant des liens, remplacer,
détruire.
8. Mises en évidence du texte
Il est possible de marquer des parties de texte mises en ligne soit en
utilisant les CSS (voir plus loin), soit en utilisant les éléments mise en
évidence, important, code, citation, abréviation, etc. de HTML.
Les entrées de menu et les boutons correspondants fonctionnent comme des
bascules (activée/désactivées).
Souvent l'introduction de mises en évidence engendrent des problèmes de
perte des blancs.
Traitement des blancs
Le traitement des blancs est appliqué par Amaya lors du chargement d'un
document et lors de l'édition de celui-ci. Par exemple, le code source
suivant:
<p>Amaya supprime les<strong> blancs non significatifs </strong>au chargement</p>
donnera :
Amaya supprime lesblancs non significatifsau chargement
car les blancs de début et de fin de l'élément strong sont
considérés comme non significatifs et sont donc supprimés.
La forme correcte aurait été :
<p>Amaya supprime les <strong>blancs non significatifs</strong> au chargement</p>
9. Les tables
Quand on active le bouton table ou quand on sélectionne l'entrée Table
depuis le menu Xhtml, Amaya visualise une boîte de dialogue
qui permet de spécifier le nombre initial de lignes, de colonnes, ainsi que
la bordure en pixels.
En confirmant on crée une table comme suit.
L'espace au dessus de la table est réservé à la légende. Le point
d'insertion est automatiquement placé dans cette légende pour en saisir le
contenu. La touche Delete supprime la légende.
La nouvelle table contient des cellules vides. On peut cliquer sur l'une
d'entre elles au hasard et y insérer du texte, des images et autre. On peut
également déplacer le point d'insertion de cellule en cellule par
l'intermédiaire des flèches du clavier.
Il n'existe deux commandes spécifiques pour créer une nouvelle
colonne :
- Insérer une colonne dans le sous-menu
Table (Ctrl t Ctrl b) ajoute une nouvelle
colonne avant la colonne sélectionnée.
- Ajouter une colonne dans le sous-menu
Table (Ctrl t Ctrl a)ajoute une nouvelle
colonne après la colonne sélectionnée.
Si on a sélectionné une cellule complète par F2 la touche
Enter crée une nouvelle cellule après et la colonne
correspondante.
Détruire une colonne
Pour détruire une colonne de table, il faut sélectionner la colonne et
utiliser la commande Delete. Il y a deux méthodes pour
sélectionner une colonne :
- Soit l'entrée Sélectionner la colonne dans le
sous-menu Table (Ctrl t Ctrl c).
- Soit étendre la sélection sur au moins deux cellules dans la même
colonne (Cell 1.1 à Cell 2.1 dans l'exemple ci-dessous) puis deux fois
F2 pour sélectionner la colonne.
Légende
| Cell 1.1 |
I |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
|
|
|
Copier/Coller ou Déplacer une colonne
Pour déplacer ou copier/coller une colonne de table :
- Il faut sélectionner la colonne comme dans le cas de Détruire
une colonne et copier (Ctrl c) ou couper (Ctrl
x pour Windows, Ctrl w pour Unix) son contenu.
- Pour coller la colonne avant une autre colonne
- soit on sélectionne le début d'une cellule de colonne et on active
la commande coller (Ctrl v pour Windows, Ctrl y
pour Unix),
- soit on utilise l'entrée de menu Coller avant dans
le sous-menu Table (Ctrl t Ctrl p).
- Pour coller la colonne après une autre colonne
- soit on sélectionne la fin d'une cellule de colonne et on active la
commande coller (Ctrl v pour Windows, Ctrl y
pour Unix),
- soit on utilise l'entrée de menu Coller après dans
le sous-menu Table (Ctrl t Ctrl v).
Il n'existe deux commandes spécifiques pour créer une nouvelle ligne :
- Insérer une ligne dans le sous-menu
Table (Ctrl t Ctrl i) ajoute une nouvelle
ligne avant la ligne sélectionnée.
- Ajouter une ligne dans le sous-menu
Table (Ctrl t Ctrl n)ajoute une nouvelle
ligne après la ligne sélectionnée.
Si on a sélectionné une ligne complète par F2 la touche Enter
crée une nouvelle ligne après.
Détruire une ligne
Pour détruire une ligne de table, il faut sélectionner la ligne et
utiliser la commande Delete. Il y a deux méthodes pour
sélectionner une ligne :
- Soit l'entrée Sélectionner la ligne dans le sous-menu
Table (Ctrl t Ctrl r).
- Soit poser la sélection sur une cellule de la ligne (Cell 1.1 dans
l'exemple ci-dessous) puis deux fois F2 pour sélectionner la
ligne.
Copier/Coller ou Déplacer une ligne
Pour déplacer ou copier/coller une ligne de table :
- Il faut sélectionner la ligne comme dans le cas de Détruire une
ligne et copier (Ctrl c) ou couper (Ctrl x
son contenu.
- Pour coller la ligne avant une autre ligne
- soit on sélectionne le début d'une ligne et on active la commande
coller (Ctrl v,
- soit on utilise l'entrée de menu Coller avant dans
le sous-menu Table (Ctrl t Ctrl p).
- Pour coller la colonne après une autre colonne
- soit on sélectionne la fin d'une ligne et on active la commande
coller (Ctrl v pour Windows, Ctrl y pour
Unix),
- soit on utilise l'entrée de menu Coller après dans
le sous-menu Table (Ctrl t Ctrl v).
Cellules étendues
Il n'existe quatre commandes spécifiques pour étendre ou réduire
l'extension de cellules :
- Joindre avec la cellule à droite dans le sous-menu
Table (Ctrl t Ctrl e) étend la cellule d'une
position à droite et colle le contenu des deux cellules.
- Joindre avec la cellule au-dessous dans le sous-menu
Table (Ctrl t Ctrl j)étend la cellule d'une
position vers le bas et colle le contenu des deux cellules.
- Réduire extension horizontale (Ctrl t Ctrl
s) réduit l'extension horizontale de la cellule d'une position et
engendre une cellule vide.
- Réduire extension verticale (Ctrl t Ctrl m)
réduit l'extension verticale de la cellule d'une position et engendre une
cellule vide.
On peut aussi éditer directement les attributs colspan et rowspan de la
cellule.
Ajouter un nouveau corps de table (tbody)
- Pour créer un nouveau corps de table en dessous d'un corps de table
existant, il faut placer le curseur à la fin de la dernière cellule de la
dernière ligne du corps de table et sélectionner l'entrée Corps
(tbody) dans le sous-menu Table.
- Pour créer un nouveau corps de table au-dessus d'une ligne existante,
il faut placer le curseur au début de la première cellule de la ligne et
sélectionner l'entrée Ligne dans le sous-menu
Table.
De nouveaux corps de table peuvent être créés efficacement avec la touche
Enter. Quand le corps de table entier est
sélectionné (il faut utiliser la touche F2), en tapant la touche
Enter vous créez une nouveau corps de table après le corps de
table sélectionné.
De nombreux types d'éléments peuvent être inclus à l'intérieur des
cellules de la table. Pour cette raison, Amaya pourrait mal comprendre vos
intentions quand vous sélectionnez un type d'élément (par exemple cliquant
H1, H2, etc. ou sélectionnant une entrée dans le menu Xhtml)
pendant qu'un composant de la table est sélectionné.
Création d'un paragraphe après une table
Quand la sélection se trouve dans une table, la touche Enter
crée un nouveau paragraphe dans la table.
Pour créer un paragraphe après la table, il faut sélectionner la table
entière en utilisant la touche F2 puis Enter.
Ce nouveau paragraphe peut être modifié si besoin est.
Exercice 4 : Créer une table, créer une ligne
avant/après, déplacer une ligne, créer une colonne avant/après, déplacer une
colonne.
10. Recherche/Remplacement - Correction orthographique
Recherche et remplacement de texte
La recherche/remplacement se lance, soit en cliquant sur le bouton , soit par l'entrée de menu
Edition/Rechercher. Un boite de dialogue apparaît. vous avez
deux zones de saisie la première sera pour le texte à rechercher la deuxième
zone de saisie sera pour le texte à remplacer.
Pour chacune des actions vous avez des choix d'options.
- les options de recherche :
- la casse : pour la recherche permet de spécifier s'il y a lieu de
différencier ou non les majuscules des minuscules.
- case à cocher pour sélectionner la zone sur laquelle réaliser la
recherche avant la sélection, après la sélection, dans la sélection
ou sur la totalité du document.
- Les options de remplacement :
- le type de remplacement : pas de remplacement (juste une
recherche), remplacement avec un fenêtre de confirmation,
remplacement automatique.
Correction orthographique
La correction orthographique se réalise à l'aide d'une boite de dialogue
activée par l'action Edition/Vérifier orthographe.
les options de la boite de dialogue :
- Le dictionnaire utilisé se fait en fonction de la langue définie au
niveau de l'élément ou du document.
- On peut spécifier le nombre de propositions (par défaut 3).
- On peut exclure des éléments lors de recherche de correspondance de
mots avec le dictionnaire (par défaut toutes les options sont activé)
- Options de zone de recherche vous avez la possibilité de spécifier la
zone sur laquelle cette correction orthographique se fera avant la
sélection, après la sélection, dans la sélection ou sur la totalité du
document.
- les boutons d'activation de recherche.
- recherche du suivant (sans action) : considère que le mot est
correcte et passe à l'erreur suivante.
- rajoute au dictionnaire personnel : rajoute le mot au dictionnaire
personnel.
- remplace le mots et passe à l'occurrence suivante.
- remplace le mots et le rajoute dans le dictionnaire personnel.
- confirmer permet de fermer la boite de dialogue.
Exercice 5 : Rechercher/remplacer, changer la
lange d'un passage et passer le correcteur orthographique.
11. Attributs
Il y a deux manières d'éditer des attributs :
- Le menu Attributs
- La Vue structure
Le menu Attributs donne une liste de tous les attributs
qui peuvent être associés à l'élément sélectionné. Il peut être utilisé pour
créer un attribut, pour changer la valeur d'un attribut existant ou pour
effacer un attribut.
Pour éditer un attribut, sélectionnez d'abord l'élément approprié. Vous
devez sélectionner l'élément entier et pas seulement un caractère à
l'intérieur de l'élément. Pour cela, il faut utiliser la touche
F2. Quand l'élément est sélectionné, le menu
Attributs affiche la liste des attributs applicables. On
peut voir rapidement si l'attribut a une valeur ou non
Tous les attributs sont affichés dans la Vue structure. Les attributs dont
la valeur peut être choisie librement sont affichés en prune et vous pouvez
éditer leur valeur comme n'importe quelle autre chaîne de caractères. Quand
la valeur de l'attribut est affichée en bleu, vous pouvez seulement la
changer à l'aide du menu Attributs. Ceci assure que seules
des valeurs correctes soient choisies.
Quand la sélection se trouve dans une valeur d'attribut, la touche
F2 sélectionne la valeur complète. La touche Delete
détruit alors la valeur, et un deuxième Delete supprimera
l'attribut.
12. Création de feuilles de style CSS
Un document peut associer plusieurs feuilles de style externes qui sont
chargées avec le document et lui sont appliquées. Une feuille de style
externe peut s'appliquer à plusieurs documents.
L'utilisateur peut définir une feuille de style spécifique qui s'applique
à tous les documents chargés. Cette feuille de style est appelée
Feuille de Style Utilisateur et est le fichier local
amaya.css conservé dans l'environnement de l'utilisateur (le
répertoire d'AmayaHome). Par
exemple si vous préférez afficher les document en Helvetica et imprimer avec
une police de caractères de petite taille, vous pouvez créer votre feuille de
style utilisateur avec les règles CSS suivantes :
@media print {
BODY {font-size: 10pt}
}
@media screen {
BODY {font-family: Helvetica}
}
L'entrée de feuilles de style donne accès à une série de commandes qui
permettent de contrôler les feuilles de style CSS externes et celles qui
donnent les préférences de l'utilisateur :
- La commande Ajouter permet de lier une nouvelle
feuille de style CSS à un document courant. On peut cliquer directement
sur la cible de la feuille de style si elle est déjà visualisée dans la
fenêtre Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans
le document courant pour avoir accès à une boîte de dialogue et taper
l'URL de la cible de la feuille de style. Cette commande ajoute un
élément lien avec ses attributs à la tête du document.
- La commande Ouvrir permet d'ouvrir une des feuilles de
style CSS appliquées au document courant.
- La commande Désactiver permet de supprimer les effets
d'une des feuilles de style actives du document courant. Cette commande
n'affecte en rien le lien CSS dans le document.
- La commande Réactiver permet de rétablir les effets
d'une des feuilles de style CSS désactivées du document courant. Cette
commande n'affecte en rien le lien CSS dans le document.
- La commande Retirer permet de retirer une des feuilles
de style CSS externes. Cette commande agit comme la commande Désactiver.
En plus de cela, l'élément lien qui attache les feuilles de style CSS est
supprimé.
Les commandes Ouvrir, Désactiver et Réactiver peuvent être appliquées aux
feuilles de style qui donnent les préférences de l'utilisateur, mais les
commandes Ajouter et Retirer concernent uniquement les feuilles de style
reliées. La figure suivante montre la liste des feuilles de style CSS
proposées pour la commande Ouvrir. Si aucune feuille de style CSS n'est
actuellement appliquée à un document, une boîte de dialogue expliquera
"qu'aucun fichier CSS n'est disponible".
Visualiser le style appliqué
S'il y a beaucoup de feuilles de style attachées à un document, il est
difficile de comprendre pourquoi un élément est visualisé avec cette couleur
ou ces marges, etc. Pour aider l'utilisateur, Amaya fournit une commande
Montrer le style appliqué qui visualise dans une fenêtre
externe les propriétés CSS appliquées au premier élément de la sélection
courante.
L'utilisateur peut afficher le source CSS qui engendre chaque propriété en
double (ou simple) cliquant sur la propriété. Aussi longtemps que la fenêtre
est ouverte, Amaya met à jour le contenu de la fenêtre quand la sélection
change.
En appuyant sur la touche F2 sur les, l'utilisateur peut voir
les propriétés CSS appliquées aux éléments englobants.
Créer des propriétés CSS
Amaya ne fournit pas pour le moment une liste complète des propriétés CSS
2 sauf pour les propriétés les plus courantes. En général l'utilisateur doit
donc se reporter à la spécification CSS 2 pour connaître le nom des
propriétés et leurs valeurs.
Les quatre premières entrées du menu Style permettent de
produire les propriétés CSS les plus courantes pour les éléments sélectionnés
:
L'option Style de caractères permet de choisir certaines polices de
caractère, le style du caractère, la taille du corps et le style
souligné.
- L'option
Couleurs permet de choisir les couleurs du premier plan et de
l'arrière plan dans la palette. Cliquez sur une cellule de la palette
avec le bouton gauche de la souris pour attribuer la couleur du premier
plan, cliquez sur le bouton du milieu pour attribuer la couleur de
l'arrière plan.
- L'option Format permet de choisir l'alignement, le
renfoncement, la justification et l'interligne.
- L'option Image de fond permet de choisir une image de
fond et son mode de répétition.
Pour le moment le style est associé à un ou plusieurs éléments
particuliers. Un élément peut être utilisé comme un modèle pour créer ou
modifier une règle de style :
- On sélectionne cet élément (un seul élément ayant un attribut
style)
- On sélectionne l'entrée Créer une règle du menu
Style. Une boîte de dialogue surgit et visualise une
liste de sélecteurs CSS. Cette liste inclus toutes les classes qui sont
définies pour le document courant (y compris les classes définies par les
feuilles de style liées au document), ainsi que les types d'élément
auquel le style est associé.
- On choisit un sélecteur dans cette liste ou on saisit un nouveau nom de
classe puis on confirme. Le style de l'élément sélectionné est désormais
associé au sélecteur choisi et l'attribut
style est supprimé
pour l'élément sélectionné. Son contenu est déplacé à l'élément
STYLE, dans le HEAD document, et tous les
éléments correspondant au sélecteur sont visualisés dans le nouveau
style.
- Si une nouvelle classe est créée, elle peut être appliquée à d'autre
éléments du document par la commande Appliquer une
classe du menu Style. Une boîte de dialogue
surgit, affichant toutes les classes existantes. On choisit une de ces
classes. Les éléments sélectionnés sont désormais visualisés avec le
style associé à la classe choisie.
Pour associer une classe à un élément, vous pouvez également utiliser le
menu Attributs. Ce
menu permet aussi d'effacer un attribut de classe pour un élément ou de le
changer : l'attribut de classe se manipule comme un autre attribut.
Exercice 6 : Mettre de la couleur, appliquer une
feuille de style, voir le style.
13. Détection des erreurs
Au chargement d'un document, Amaya peut détecter des erreurs de HTML (mais
le parseur HTML est très tolérant) ou des incompatibilités avec la famille
XHTML choisie.
- 1er exemple :
- Un document est déclaré comme HTML 4.0 Strict et contient des
attributs non acceptés.
- 2ème exemple :
- Un document XHTML mal formé
On peut corriger les erreurs
On peut voir le détail des erreurs détectées dans l'entrée Montrer
les erreurs du menu Vues. Pour corriger ces
erreurs, on active le lien vers la vue source du document pour visualiser la
position de l'erreur dans le source.
Une fois les erreurs corrigées on synchronise pour voir si tout est
correct, on peut alors sauver le document corrigé.
On peut aussi modifier le type du document
L'entrée Modifier le doctype du menu
Fichier permet de modifier le type du document.
Dans le 2ème exemple, le bouton Recharger permet de lire
le document comme un document HTML au lieu de XHTML et donc éviter de bloquer
sur le parseur XML.