home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 May / PCWorld_2005-05_cd.bin / komunikace / amaya / amaya-WinXP-9.1.exe / doc / html / Tutorial.html.fr < prev    next >
Extensible Markup Language  |  2005-01-06  |  61KB  |  1,412 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  3.        "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <title>Amaya - Guide utilisateur</title>
  8.   <style type="text/css">
  9.  
  10. .xml {color: #E50000}
  11. .exercice {color: #A9B200}
  12. h1 {color: #FFFFFF; background-color: #7995B6; padding: 5px 1px}
  13. address {margin-bottom: 30px}
  14. body {background-color: #F9F7F4; color: #666666; font-family: helvetica; }
  15. .author {font-style: italic; font-weight: bold}
  16. .head {margin: 1em 0 3em 0}
  17. h1 {font-size: 24pt}
  18. body {padding-left: 2em}</style>
  19.   <meta name="generator"
  20.   content="amaya 9.0-pre, see http://www.w3.org/Amaya/" />
  21. </head>
  22.  
  23. <body xml:lang="fr">
  24.  
  25. <div class="head">
  26. <h1 id="Amaya">Amaya - Guide utilisateur</h1>
  27.  
  28. <p class="head"><span class="author">IrΦne Vatton</span> <br />
  29. DerniΦre mise α jourá: <!--$date=-->mercredi 08 d├⌐cembre 2004 - 12:59:45<!--$-->
  30. </p>
  31. </div>
  32.  
  33. <p>Ce document a pour but d'aider les nouveaux utilisateurs d'Amaya. Pour
  34. plus de dΘtail sur l'interface, il faut se reporter au <a
  35. href="Manual.html.fr">manuel de rΘfΘrence</a>.</p>
  36.  
  37. <div>
  38. <h3>Plan</h3>
  39. <ol>
  40.   <li><a href="#L85">Introduction</a>
  41.     <ul>
  42.       <li>Pourquoi un Θditeur structurΘ pour HTML ?</li>
  43.       <li>Pourquoi des familles HTML ?</li>
  44.       <li>Les familles HTML</li>
  45.       <li>Quelques rΦgles d'accessibilitΘ α suivre</li>
  46.     </ul>
  47.   </li>
  48.   <li><a href="#L271">PrΘsentation gΘnΘrale d'Amaya</a></li>
  49.   <li><a href="#L483">ParamΘtrage de l'application</a></li>
  50.   <li><a href="#L608">CrΘation/Edition d'une page Web</a></li>
  51.   <li><a href="#L662">CrΘation du contenu (paragraphes, en-tΩtes de sections,
  52.     divisions)</a></li>
  53.   <li><a href="#L831">Le listes</a></li>
  54.   <li><a href="#L1002">Les liens</a></li>
  55.   <li><a href="#L11631">Mises en Θvidence du texte</a></li>
  56.   <li><a href="#L12061">Les tables</a></li>
  57.   <li><a href="#L12281">Recherche/Remplacement - Correction
  58.   orthographique</a></li>
  59.   <li><a href="#L1230">Attributs</a></li>
  60.   <li><a href="#L1232">CrΘation de feuilles de style CSS</a></li>
  61.   <li><a href="#L1242">DΘtection des erreurs</a></li>
  62. </ol>
  63. </div>
  64.  
  65. <div>
  66. <h2 id="L85">1. Introduction</h2>
  67.  
  68. <p>L'objectif du Web est de permettre l'Θchange d'informations quelque soit
  69. le support.</p>
  70. <ul>
  71.   <li>A opposer α l'approche Word :
  72.     <p>En gΘnΘral la description d'un document Word se limite α la
  73.     prΘsentation, essentiellement l'usage de fontes. Si le destinataire ne
  74.     dispose pas des mΩmes fontes, le document peut Ωtre illisible.</p>
  75.   </li>
  76.   <li>La solution prΘconisΘe est d'utiliser un modΦle de description
  77.     clairement dΘfini et ouvert. C'est ce que permet de faire HTML en
  78.     dΘfinissant un modΦle de document Web standard.
  79.     <p>Avec les CSS (Cascading Style Sheets) il y a mΩme sΘparation entre la
  80.     structure + contenu et la prΘsentation.</p>
  81.     <p></p>
  82.   </li>
  83. </ul>
  84.  
  85. <p>L'auteur d'un document Web doit distinguer ce qui est du ressort de la
  86. structure (titres, paragraphes, listes, etc.) de ce qui n'est que de la
  87. prΘsentation (taille de caractΦres, couleurs, etc.)</p>
  88.  
  89. <p>Un bon exercice : comprendre un document en lisant ses balises HTML et le
  90. texte.</p>
  91.  
  92. <h3>Pourquoi un Θditeur structurΘ pour HTML ?</h3>
  93.  
  94. <p>HTML dΘfinit une structure (organisation) de document.</p>
  95. <ul>
  96.   <li><strong>Elements</strong> : DΘcoupage sΘmantique du document mΩme si ce
  97.     dΘcoupage a un effet sur la prΘsentation
  98.     <p>Par exemple un H2 a un effet de prΘsentation mais donne aussi une
  99.     information sΘmantique. C'est un en-tΩte moins important qu'un H1 et plus
  100.     important qu'un H3.</p>
  101.     <p>De mΩme un lien (ancre + href) dΘfinit plus qu'un simple texte
  102.     colorΘ/soulignΘ.</p>
  103.   </li>
  104.   <li><strong>Attributs</strong> : CaractΘrisation sΘmantique
  105.     <p>L'attribut class="section" sur une division, la cible d'un lien
  106.     href="http://www.w3.org/"</p>
  107.   </li>
  108. </ul>
  109.  
  110. <p>La dΘcoration des documents est confiΘe α un langage de style CSS
  111. (Cascading Style Sheets).</p>
  112.  
  113. <h3>Pourquoi des familles HTML ?</h3>
  114.  
  115. <p>Avant que le langage CSS ne soit finalisΘ, HTML avait introduit des
  116. ΘlΘments et des attributs qui n'avaient pas de valeur sΘmantique, mais
  117. servaient α modifier la prΘsentation des documents. Par exemple
  118. <font>...</font> pour choisir une police de caractΦres
  119. particuliΦre. Avec le langage CSS, ces ΘlΘments et attributs n'ont plus de
  120. raison d'Ωtre. La sous-famille de HTML 4.0 Strict Θlimine les ΘlΘments et
  121. attributs HTML qui doivent Ωtre remplacΘ par des propriΘtΘs CSS (center,
  122. font, color, background).</p>
  123.  
  124. <p>La sous-famille de HTML 4.0 Frameset isole les ΘlΘments et attributs qui
  125. dΘcrivent le dΘcoupage en fenΩtres (frames). Le W3C dΘcommande l'utilisation
  126. des "frames" pour faire que les sites Web soient accessibles aux handicapΘs
  127. (problΦmes de navigation et de contexte).</p>
  128.  
  129. <p>D'autres familles XHTML ont ΘtΘ introduites pará:</p>
  130. <ul>
  131.   <li>Besoin de <strong>modularisation</strong> pour s'adapter α de nouveaux
  132.     supports (PDA, tΘlΘphones, tΘlΘvision)</li>
  133.   <li>NΘcessitΘ d'avoir des <strong>structures propres</strong> pour filtrer
  134.     et transformer de faτon automatique les documents
  135.     <p>Exempleá: extraire les titres et ne prΘsenter le texte qui suit qu'α
  136.     la demande</p>
  137.   </li>
  138.   <li>Autoriser la <strong>composition</strong> avec d'autres langages XML
  139.     (RDF, MathML, SVG, SMIL, autres).</li>
  140. </ul>
  141.  
  142. <h3>Les diffΘrences entre HTML et XHTML</h3>
  143. <pre><span class="xml"><?xml version="1.0" encoding="iso-8859-1"?></span>
  144. <span class="xml"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  145.       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></span>
  146. <span style="color: #9969FF"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  147.       "http://www.w3.org/TR/html4/loose.dtd"></span>
  148. <html <span class="xml">xmlns="http://www.w3.org/1999/xhtml"</span>>
  149. <head>
  150. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"<span style="color: #E50000" class="xml">/</span>>
  151. <title>Amaya - Guide utilisateur</title>
  152. </head>
  153. <body <span class="xml">xml:lang="fr"</span>>
  154. <h1 id=<span class="xml">"</span>Amaya<span class="xml">"</span>>Amaya - Guide utilisateur<span class="xml"></h1></span>
  155. <h2>Plan<span class="xml"></h2></span>
  156. <ol>
  157. <li>Introduction<span class="xml"></li></span>
  158. <li>HTML<span class="xml"></li></span>
  159. <li>Quelques rΦgles<span class="xml"></li></span></ol>
  160. <span class="xml"></body></span>
  161. <span class="xml"></html></span></pre>
  162.  
  163. <h3>Les familles HTML</h3>
  164.  
  165. <table border="1">
  166.   <caption></caption>
  167.   <tbody>
  168.     <tr>
  169.       <th>Famille</th>
  170.       <th>ElΘments + attributs</th>
  171.       <th>Strucutre</th>
  172.     </tr>
  173.     <tr>
  174.       <td><p>HTML 4.0 Transitional</p>
  175.       </td>
  176.       <td>Tout sauf les frames</td>
  177.       <td>Structure implicite</td>
  178.     </tr>
  179.     <tr>
  180.       <td>HTML 4.0 Strict</td>
  181.       <td>Sans ΘlΘments de prΘsentation</td>
  182.       <td>Structure implicite</td>
  183.     </tr>
  184.     <tr>
  185.       <td>HTML 4.0 Frameset</td>
  186.       <td>Les frames</td>
  187.       <td>Structure implicite</td>
  188.     </tr>
  189.     <tr>
  190.       <td>XHTML 1.0 Transitional</td>
  191.       <td>Tout sauf les frames</td>
  192.       <td>Structure bien formΘe</td>
  193.     </tr>
  194.     <tr>
  195.       <td>XHTML 1.0 Strict</td>
  196.       <td>Sans ΘlΘments de prΘsentation</td>
  197.       <td>Structure bien formΘe</td>
  198.     </tr>
  199.     <tr>
  200.       <td>XHTML 1.0 Basic</td>
  201.       <td>AdaptΘ aux tΘlΘphones</td>
  202.       <td>Structure bien formΘe</td>
  203.     </tr>
  204.     <tr>
  205.       <td>XHTML 1.1</td>
  206.       <td>XHTML 1.0 Strict + annotations Ruby</td>
  207.       <td>Structure bien formΘe</td>
  208.     </tr>
  209.   </tbody>
  210. </table>
  211.  
  212. <h3>Quelques rΦgles d'accessibilitΘ α suivre</h3>
  213.  
  214. <p>EnoncΘ de quelques rΦgles</p>
  215. <ul>
  216.   <li>Produire des documents valides</li>
  217.   <li>SΘparer structure et prΘsentation
  218.     <p>Ne pas considΘrer que tout le monde dispose du mΩme Θcran que vous</p>
  219.   </li>
  220.   <li>Ne pas utiliser du JavaScript pour naviguer</li>
  221.   <li>Ne pas utiliser les frames</li>
  222.   <li>Fournir des textes alternΘs pour les images, les vidΘos, etc.</li>
  223. </ul>
  224. </div>
  225.  
  226. <div>
  227. <h2 id="L271">2. PrΘsentation gΘnΘrale d'Amaya</h2>
  228.  
  229. <p>Amaya est α la fois navigateur et un Θditeurá:</p>
  230.  
  231. <p><strong>Amaya</strong> est un Θditeur dotΘ de capacitΘs de navigation.
  232. C'est α dire que pendant que l'utilisateur travaille sur les documents de son
  233. site Web, il peut accΘder n'importe quel autre document Web de sites
  234. extΘrieurs.</p>
  235.  
  236. <p>Lorsqu'il est utilisΘ comme navigateur, Amaya se comporte comme beaucoup
  237. d'autres navigateurs Web, exceptΘ pour ce qui est d'activer les liens. Par
  238. dΘfaut le simple clic est utilisΘ pour poser la sΘlection (dΘfinir le point
  239. d'insertion de texte) et il faut effectuer un double-clic sur un lien pour
  240. l'activer.</p>
  241.  
  242. <p></p>
  243.  
  244. <p>FenΩtre initialeá:</p>
  245.  
  246. <p>Par dΘfaut, l'utilisateur voit la vue formatΘe du document. C'est l'aspect
  247. final du document tel qu'il est vu par un navigateur Web</p>
  248.  
  249. <p>La barre de menu :</p>
  250. <ul>
  251.   <li>Fichierá: crΘation de documents, navigation, impression, fermeture.</li>
  252.   <li>Editioná: Θdition de base, recherche/remplacement, correction
  253.     orthographique, paramΘtrage.</li>
  254.   <li>XHTML : crΘation/remplacement d'ΘlΘments (X)HTML.</li>
  255.   <li>XML : crΘation d'ΘlΘments XML.</li>
  256.   <li>Liens : crΘation et destruction des liens.</li>
  257.   <li>Vues : gestion des diffΘrentes vues du document.</li>
  258.   <li>Style : gestion du style CSS.</li>
  259.   <li>Annotations : crΘation, destruction d'annotations.</li>
  260.   <li>Aide : donne accΦs au manuel en ligne.</li>
  261. </ul>
  262.  
  263. <p>Les barres d'outils</p>
  264.  
  265. <p>Contient quelques boutons d'accΦs aux fonctions les plus utilisΘes</p>
  266. <ul>
  267.   <li>Stop <img alt="(Stop)" src="../images/stop.gif" />á: arrΩte le
  268.     transfert d'information depuis un serveur Web</li>
  269.   <li>Document prΘcΘdent <img alt="(PrΘcΘdent)" src="../images/Back.gif" />á:
  270.     retour au document prΘcΘdent (s'il y en a un)</li>
  271.   <li>Document suivant <img alt="(Suivant)" src="../images/Forward.gif" />á:
  272.     retour au document suivant (s'il y en a un)</li>
  273.   <li>Recharger<img alt="(Recharger)" src="../images/Reload.gif" /> :
  274.     recharge le document (accΦs serveur)</li>
  275.   <li>Page personnelle <img alt="(Home)" src="../images/home.gif" />á:
  276.     affiche la page de dΘmarrage</li>
  277.   <li>Sauver <img alt="(Sauver)" src="../images/floppy.gif" />á: sauver les
  278.     modifications</li>
  279.   <li>Imprimer <img alt="(Imprimer)" src="../images/Print.gif" />á: imprime
  280.     le document</li>
  281.   <li>Rechercher/Remplacer <img alt="(Rechercher)" src="../images/find.gif"
  282.     />á: affiche un formulaire de recherche/remplacement de texte</li>
  283.   <li>Mise en Θvidence <img alt="(Evidence)" src="../images/Em.gif" />á:
  284.     permet de crΘer/supprimer un ΘlΘment "mise en Θvidence"
  285.     (<em>...</em>)</li>
  286.   <li>Important <img alt="(Important)" src="../images/Strong.gif" />á: permet
  287.     de crΘer un ΘlΘment "important" (<strong>...</strong>)</li>
  288.   <li>Fonte fixe <img alt="(Code)" src="../images/code.gif" />á: permet de
  289.     crΘer un ΘlΘment "fonte fixe" (<code>...</code>)</li>
  290.   <li>Ajout d'une image <img alt="(Image)" src="../images/Image.gif" />á:
  291.     permet de crΘer un ΘlΘment "image" (<img/>)</li>
  292.   <li>Titre niveau 1á<img alt="(H1)" src="../images/H1.gif" />á: permet de
  293.     crΘer un ΘlΘment "titre niveau 1" (<h1>...</h1>)</li>
  294.   <li>Titre niveau 2 <img alt="(H2)" src="../images/H2.gif" />á: permet de
  295.     crΘer un ΘlΘment "titre niveau 2" (<h2>...</h2>)</li>
  296.   <li>Titre niveau 3 <img alt="(H3)" src="../images/H3.gif" />á: permet de
  297.     crΘer un ΘlΘment "titre niveau 3" (<h3>...</h3>)</li>
  298.   <li>Liste <img alt="(Liste)" src="../images/OList.gif" />á: permet de crΘer
  299.     un ΘlΘment "liste α puces" (<ul>...</ul>)</li>
  300.   <li>Liste numΘrotΘe <img alt="(Liste num)" src="../images/NumList.gif" />á:
  301.     permet de crΘer un ΘlΘment "liste numΘrotΘe"
  302.   (<ol>...</ol>)</li>
  303.   <li>Liste de dΘfinitions <img alt="(DΘfinitions)" src="../images/DL.gif"
  304.     />á: permet de crΘer un ΘlΘment "liste de dΘfinition"
  305.     (<dl>...</dl>)</li>
  306.   <li>Lien <img alt="(Lien)" src="../images/Link.gif" />á: permet de crΘer un
  307.     ΘlΘment "titre niveau 1" (<a href="...">...</a>)</li>
  308.   <li>Table <img alt="(Table)" src="../images/table.gif" />á: permet de crΘer
  309.     un ΘlΘment "titre niveau 1" (<table>...</table>)</li>
  310.   <li>Maths <img alt="(Math)" src="../images/Math.gif" />á: palette pour
  311.     crΘer des formules</li>
  312.   <li>Graphique <img alt="(SVG)" src="../images/Graph.gif" />á: palette pour
  313.     crΘer des graphiques vectoriels</li>
  314.   <li>BibliothΦque SVG <img alt="(Librairie)" src="../images/libsvg.gif" />á:
  315.     affiche la palette de graphiques prΘdΘfinis</li>
  316.   <li>Ligne de temps <img alt="(Animation)" src="../images/anim.gif"
  317.     />á:áaffiche la ligne de temps pour l'animation des graphiques</li>
  318. </ul>
  319.  
  320. <p>et une zone d'affichage de l'adresse du document.</p>
  321. </div>
  322.  
  323. <div>
  324. <h2 id="L483">3. ParamΘtrage de l'application</h2>
  325.  
  326. <p>Avant d'Θditer des documents Web avec Amaya, il est important de fixer un
  327. certain nombre de paramΦtres. Pour cela il faut ouvrir au moins deux des dix
  328. menus de prΘfΘrences disponibles dans <strong>╔diter/PrΘfΘrences</strong>.
  329. Chaque menu prΘsente trois boutons d'action :</p>
  330.  
  331. <table border="0" cellspacing="5" cellpadding="5"
  332. summary="action button chart">
  333.   <tbody>
  334.     <tr>
  335.       <th>Appliquer</th>
  336.       <td>Ce bouton valide et stocke les options affichΘes dans le menu.</td>
  337.     </tr>
  338.     <tr>
  339.       <th>DΘfauts</th>
  340.       <td>Ce bouton rΘtablit, mais ne sauve pas, les valeurs par dΘfaut. Il
  341.         faut utiliser le bouton Appliquer pour valider les options.</td>
  342.     </tr>
  343.     <tr>
  344.       <th>Terminer</th>
  345.       <td>Ce bouton ferme le menu.</td>
  346.     </tr>
  347.   </tbody>
  348. </table>
  349.  
  350. <p>Voici les paramΦtres importants α rΘglerá:</p>
  351.  
  352. <h4>Dans les prΘfΘrences gΘnΘrales</h4>
  353. <ul>
  354.   <li><strong>Page de dΘmarrage</strong>á: SpΘcifie l'URI qu'Amaya chargera
  355.     au dΘmarrage ou quand l'utilisateur pressera le bouton <img
  356.     alt="(Page personelle)" src="../images/home.gif" /> (par exemple l'URI
  357.     <code>http://www.w3.org</code>).</li>
  358.   <li><strong><a id="Enable">Activer le coller ligne α ligne</a></strong>á:
  359.     Cette option concerne le coller depuis une autre application. Quand cette
  360.     option est activΘe, les lignes de l'application source sont conservΘes.
  361.     Sinon les caractΦres ½áfin de ligneá╗ sont remplacΘs par des espaces.</li>
  362.   <li><strong>Produire des fichiers de sauvegarde</strong>á: Si cette option
  363.     est active Amaya va produire pΘriodiquement un fichier de sauvegarde pour
  364.     chaque document ΘditΘ.</li>
  365.   <li><strong>Montrer boutons</strong>á: Contr⌠le l'affichage de la barre de
  366.     boutons pour tous les documents.</li>
  367.   <li><strong>Montrer l'adresse</strong>á: Contr⌠le si Amaya affiche
  368.     l'adresse des documents.</li>
  369.   <li><strong>Montrer les cibles</strong>á: Contr⌠le si les cibles de liens
  370.     sont visualisΘes ou non. Montrer les cibles peut aider quand on veut
  371.     crΘer de nouveaux liens. Cette option agit immΘdiatement sur tous les
  372.     documents ΘditΘs.<br />
  373.   </li>
  374.   <li><strong>Zoom caractΦres</strong>á: Cette option vous permet de rΘduire
  375.     ou d'augmenter les tailles des polices de caractΦres utilisΘes. Cette
  376.     option a un effet immΘdiat sur tous les documents ΘditΘs. <br />
  377.   </li>
  378.   <li><strong>Langue du dialogue</strong>á: SpΘcifie la langue utilisΘe dans
  379.     les menus et les messages. La langue par dΘfaut est l'anglais amΘricain
  380.     (valeur en). D'autres langues sont possibles comme le franτais (fr),
  381.     l'italien (it), l'espagnol (es), et l'allemand (de).</li>
  382. </ul>
  383.  
  384. <h4>Dans les prΘfΘrences de navigation</h4>
  385. <ul>
  386.   <li><strong>Charger les images</strong> : Contr⌠le si les images doivent
  387.     Ωtre chargΘes et affichΘes. Sinon, l'attribut ALT est visualisΘ α la
  388.     place de l'image. Cette option prend effet dΦs que le formulaire est
  389.     validΘ. <br />
  390.   </li>
  391.   <li><strong>Charger les objets</strong> : Contr⌠le si les objets doivent
  392.     Ωtre chargΘs et affichΘs. Sinon, le contenu de l'objet est visualisΘ α la
  393.     place de l'objet. Cette option prend effet dΦs que le formulaire est
  394.     validΘ.</li>
  395.   <li><strong>Montrer les images de fond</strong> : Contr⌠le si les images en
  396.     arriΦre plan doivent Ωtre montrΘes ou non. Cette option prend effet dΦs
  397.     que le formulaire est validΘ.</li>
  398.   <li><strong>Le double clic active les liens</strong> : Depuis la premiΦre
  399.     version d'Amaya, les utilisateurs ont besoin de double cliquer sur un
  400.     lien pour l'activer. Cela permet de diffΘrencier l'Θdition d'un lien de
  401.     son activation. Vous pouvez changer ce comportement en dΘsactivant cette
  402.     option.<br />
  403.   </li>
  404. </ul>
  405.  
  406. <p><a href="Configure.html.fr">A voir pour plus de dΘtail</a></p>
  407. </div>
  408.  
  409. <div>
  410. <h2 id="L608">4. CrΘation/Edition d'une page Web</h2>
  411.  
  412. <p>L'entrΘe <strong>Fichier/Nouveau</strong> permet de crΘer un nouveau
  413. document d'un type donnΘ. Amaya demande de spΘcifier l'URI ou le nom local du
  414. document α crΘer (un nom par dΘfaut est gΘnΘrΘ). AprΦs confirmation, Amaya
  415. ouvre un nouveau document vide.</p>
  416.  
  417. <p>L'entrΘe <strong>Fichier/Ouvrir</strong> remplace le document affichΘ.
  418. Amaya utilise la mΩme entrΘe de menu par le nouveau document sΘlectionnΘ.
  419. Amaya utilise la mΩme entrΘe de menu pour ouvrir un document local ou un
  420. document d'un serveur Web.</p>
  421.  
  422. <p>L'entrΘe <strong>Fichier/Ouvrir dans nouvelle fenΩtre</strong> affiche le
  423. nouveau document sΘlectionnΘ dans une nouvelle fenΩtre.</p>
  424.  
  425. <p>Les entrΘes du menu XHTML prΘsentent les ΘlΘments que l'on peut insΘrer
  426. dans le document affichΘ, en fonction de la famille XHTML choisie. La maniΦre
  427. la plus simple de crΘer de nouveaux ΘlΘments dans un document est de placer
  428. le point d'insertion dans la position voulue et d'utiliser le menu</p>
  429.  
  430. <p><strong>Xhtml</strong>, ou les boutons correspondant aux ΘlΘments les plus
  431. communs (images, en-tΩtes, listes...). Ces boutons ou entrΘes de menu crΘent
  432. l'ΘlΘment correspondant α la position courante. Si l'ΘlΘment dΘsirΘ ne peut
  433. pas Ωtre crΘΘ exactement α la position choisie. Amaya tente alors de crΘer
  434. l'ΘlΘment α l'endroit le plus proche possible.</p>
  435.  
  436. <h3>DΘfinir le titre du document</h3>
  437.  
  438. <p>Par dΘfaut Amaya donne le titre "No title" au document nouvellement crΘΘ
  439. parce que cet ΘlΘment est obligatoire. Il ne faut pas oublier de mettre α
  440. jour ce titre en activant l'entrΘe <strong>XHTML/Changer le
  441. titre</strong>.</p>
  442.  
  443. <h3>DΘfinir la langue utilisΘe</h3>
  444.  
  445. <p>Il est important de dΘfinir la langue dans laquelle est Θcrit le document.
  446. Sans indication explicite, le document est supposΘ Θcrit en anglais. La
  447. langue est utilisΘe par le correcteur orthographique.</p>
  448.  
  449. <p>Pour dΘfinir qu'un document est Θcrit franτais, il faut sΘlectionner
  450. l'ΘlΘment <body> et lui appliquer l'attribut lang=fr.</p>
  451.  
  452. <h4>PremiΦre mΘthode</h4>
  453.  
  454. <p>On pose la sΘlection n'importe o∙ dans le document et on utilise la touche
  455. <code>F2</code> pour remonter la sΘlection sur l'ΘlΘment
  456. <body>. La barre de statut affiche l'ΘlΘment sΘlectionnΘ. A ce moment
  457. lα on sΘlectionne l'entrΘe du menu <strong>Attributs/Langue</strong> pour
  458. afficher le formulaire de choix de la langue.</p>
  459.  
  460. <h4>DeuxiΦme mΘthode</h4>
  461.  
  462. <p>On ouvre la vue Structure (entrΘe <strong>Vue/Montrer la
  463. structure</strong>), on sΘlectionne l'ΘlΘment <body>.A ce moment lα on
  464. sΘlectionne l'entrΘe du menu <strong>Attributs/Langue</strong> pour afficher
  465. le formulaire de choix de la langue.</p>
  466. </div>
  467.  
  468. <div>
  469. <h3><a id="L1104">Sauver des documents en HTML</a></h3>
  470.  
  471. <p><b>Amaya</b> ne fournit aucune vue d'ensemble des pages installΘes sur le
  472. serveur. Cependant il est possible de sauver ou copier des fichiers sur un
  473. serveur ou sur sur son disque local grΓce aux commandes
  474. <strong>Sauver</strong> et <strong>Sauver comme</strong>. Pendant ces
  475. opΘrations, Amaya tient compte des images.</p>
  476.  
  477. <h4><a id="L1517">La commande Sauver</a></h4>
  478.  
  479. <p>La commande sauver peut Ωtre invoquΘe soit en choisissant
  480. <strong>Sauver</strong> depuis le menu <strong>Fichier</strong> (<code>Ctrl
  481. s</code> pour Windows, <code>Ctrl x Ctrl s</code> pour Unix) ou bien en
  482. cliquant sur le bouton <img alt="floppy" src="../images/floppy.gif" />.</p>
  483.  
  484. <h4><a id="L1518">La commande Sauver comme</a></h4>
  485.  
  486. <p>Le fait de sΘlectionner l'entrΘe <strong>Sauver comme</strong> dans le
  487. menu <strong>Fichier</strong> ouvre une boεte de dialogue qui permet de
  488. sauver le document courant α une adresse diffΘrente (sur un serveur Web ou
  489. sur le disque local) ou de changer certains paramΦtres, comme le format du
  490. document et l'encodage.</p>
  491.  
  492. <p style="text-align: center; text-indent: 15pt"><img
  493. src="../images/SaveAs-fr.gif" alt="SaveAs" /></p>
  494.  
  495. <h2 id="L662">5. CrΘation du contenu (paragraphes, en-tΩtes de sections,
  496. divisions)</h2>
  497.  
  498. <p>Par dΘfaut, Amaya crΘe un nouveau paragraphe chaque fois que l'on active
  499. la touche <code>Enter</code>. Une fois le paragraphe et son contenu crΘΘ, on
  500. peut insΘrer un en-tΩte de section, avant, aprΦs, ou au milieu du
  501. paragraphe,</p>
  502. <ul>
  503.   <li>en activant un des boutons Hn,</li>
  504.   <li>ou en tapant <code>Ctrl n</code> (n allant de 1 α 6),</li>
  505.   <li>ou en sΘlectionnant, l'entrΘe correspondante du menu
  506.     <strong>XHTML</strong>.</li>
  507. </ul>
  508.  
  509. <p>Quand l'insertion se fait au milieu du paragraphe, Amaya coupe le
  510. paragraphe existant en deux et insΦre l'en-tΩte au milieu.</p>
  511.  
  512. <h3>Transformations</h3>
  513.  
  514. <p>Si une partie du paragraphe est sΘlectionnΘe au moment o∙ on insΦre
  515. l'en-tΩte, ce texte sera supprimΘ dans le paragraphe et insΘrΘ dans l'en-tΩte
  516. crΘΘ.</p>
  517.  
  518. <p>On peut aussi sΘlectionner le paragraphe (touche <code>F2</code>)
  519. et transformer ainsi le paragraphe en en-tΩte. Un ou
  520. plusieurs paragraphes peuvent en fait se transformer en liste, table,
  521. prΘformatΘ en fonction de l'ΘlΘment cible choisi. L'entrΘe de menu
  522. <strong>Edition/Transformer</strong> propose les cibles possibles pour la
  523. sΘlection courante.</p>
  524.  
  525. <h3>PrΘformatΘ</h3>
  526.  
  527. <p>L'ΘlΘment prΘformatΘ est un paragraphe particulier qui permet de prΘserver
  528. tous les caractΦresá: espace, fin de ligne.</p>
  529.  
  530. <p>Pour transformer un paragraphe en prΘformatΘ, on sΘlectionne le paragraphe
  531. en entier et on active l'entrΘe de menu <strong>XHTML/PrΘformatΘ</strong> (ou
  532. <code>Ctrl h Ctrl p</code>).</p>
  533.  
  534. <p>Pour transformer un prΘformatΘ en paragraphe, on sΘlectionne le prΘformatΘ
  535. en entier et on active l'entrΘe de menu <strong>XHTML/Paragraphe</strong>.</p>
  536.  
  537. <p>Quand la sΘlection se trouve α la fin d'un <pre>, la touche
  538. <code>Enter</code> crΘe une nouvelle ligne du <pre>. Pour crΘer un
  539. paragraphe aprΦs le <pre>, il faut sΘlectionner le <pre> en
  540. utilisant la touche <code>F2</code> puis <code>Enter</code>.</p>
  541.  
  542. <h3>Division</h3>
  543.  
  544. <p>Il est possible de grouper une sΘrie de paragraphes, en-tΩtes, etc. dans
  545. une division. Pour cela, on sΘlectionne les ΘlΘments α grouper ainsi que
  546. l'entrΘe DIV dans le menu XHTML.</p>
  547.  
  548. <h3>La touche Enter</h3>
  549.  
  550. <p>La touche <code>Enter</code> (ou Return) joue un r⌠le particulier. En
  551. gΘnΘral elle cl⌠t l'ΘlΘment courant et crΘe un paragraphe juste aprΦs. Si un
  552. ΘlΘment complet est sΘlectionnΘ, la touche <code>Enter</code> crΘe une autre
  553. instance de cet ΘlΘment. Par exemple si on sΘlectionne un en-tΩte, la touche
  554. <code>Enter</code> va crΘer un en-tΩte vide aprΦs.</p>
  555.  
  556. <h3><a id="Back">Les touches Back Space et Delete</a></h3>
  557.  
  558. <p>Des ΘlΘments consΘcutifs peuvent Ωtre fusionnΘs, mΩme s'ils ne sont pas au
  559. mΩme niveau dans la structure du document. La fusion s'effectue α l'aide des
  560. touches <code>Back Space</code> et <code>Delete</code>. Quand le point
  561. d'insertion est α la fin d'un ΘlΘment, utilisez la touche
  562. <code>Delete</code>. Quand il est au dΘbut, utilisez la touche <code>Back
  563. Space</code>. Dans les deux cas, ces touches n'effacent aucun caractΦre.
  564. Elles fusionnent des ΘlΘments sΘparΘs par une limite de structure.</p>
  565.  
  566. <p>Quand le point d'insertion est α l'intΘrieur d'un ΘlΘment, ces deux
  567. touches effacent comme d'habitude le caractΦre suivant ou le caractΦre
  568. prΘcΘdent.</p>
  569.  
  570. <h3>CaractΦres spΘciaux</h3>
  571.  
  572. <p>Pour les caractΦres ISO-latin qui ne sont pas directement disponibles
  573. depuis le clavier, Amaya utilise le support standard fournit par le
  574. systΦme.</p>
  575.  
  576. <p>Amaya fournit aussi des raccourcis pour certains caractΦres non
  577. disponibles au clavier commeá:</p>
  578. <ul>
  579.   <li>Pour obtenir un espace non sΘcable, vous devez taper <code>Ctrl -
  580.     espace</code>. Ce caractΦre sera sauvΘ comme une entitΘ
  581.     (<code>&nbsp;</code>).</li>
  582.   <li>Pour obtenir un € (euro), vous devez taper <code>Alt e</code>.</li>
  583.   <li>Pour obtenir un ½, vous devez taper <code>Ctrl <</code> (ou
  584.     <code>Shift</code> <code>Ctrl <</code> selon le clavier).</li>
  585.   <li>Pour obtenir un ╗, vous devez taper <code>Shift Ctrl ></code>.</li>
  586. </ul>
  587.  
  588. <h3>InsΘrer une image</h3>
  589.  
  590. <p>Pour insΘrer une image, on choisit l'entrΘe <strong>Image</strong> dans le
  591. menu <strong>XHTML</strong> (raccourci <code>Ctrl h Ctrl i</code>) ou on
  592. clique sur le bouton <img alt="Image " src="../images/Image.gif"
  593. longdesc="longdesc.htm" />. Une boεte de dialogue s'affiche qui permet de
  594. rentrer le nom du fichier et le <a href="ImageMaps.html.fr#Alternative">texte
  595. de remplacement</a> ('ALT' texte) de l'image. L'insertion n'est prise en
  596. compte que lorsque le texte de remplacement est fourni.</p>
  597.  
  598. <p style="text-align: center"><img alt="(Insertion image)"
  599. src="../images/create_image-fr.png" /></p>
  600.  
  601. <p>L'image est affichΘe avec ses dimensions par dΘfaut. On peut
  602. redimensionnerer l'image insΘrΘe :</p>
  603. <ul>
  604.   <li>soit par manipulation directe - en combinant la touche
  605.     <kbd>Control</kbd> et le <kbd>bouton droit</kbd> ou le <kbd>bouton du
  606.     milieu</kbd> de la souris,</li>
  607.   <li>soit en Θditant les attributs <strong>width</strong> et
  608.     <strong>height</strong> de l'image. Quand l'image est sΘlectionnΘe, on
  609.     sΘlectionne l'entrΘe <strong>width</strong> ou <strong>height</strong> du
  610.     menu <strong>Attributs</strong>.</li>
  611. </ul>
  612.  
  613. <p>Par dΘfaut l'image est cadrΘe α gauche. On peut modifier le cadrage de
  614. l'image sΘlectionnΘe en modifiant l'alignement dans le formulaire
  615. <strong>Format</strong> du menu <strong>Style</strong>.</p>
  616.  
  617. <h3>Remplacer une image</h3>
  618.  
  619. <p>Pour remplacer une image il faut sΘlectionner cette image en draguant sur
  620. l'image avec la souris. ProcΘdez alors comme pour l'ajout d'une image (voir
  621. ci-dessus). Lorsqu'une image (et seulement une image) est entiΦrement
  622. sΘlectionnΘe, la boεte de dialogue des images effectue le remplacement de
  623. l'image sΘlectionnΘe au lieu d'insΘrer une nouvelle image.</p>
  624.  
  625. <h3 style="clear: both">Copier/Coller, DΘfaire/Refaire</h3>
  626.  
  627. <p>Amaya permet copier/coller non seulement du texte et des images, mais
  628. aussi une structure complexe comme une division ou une suite de paragraphes
  629. et d'en-tΩtes.</p>
  630.  
  631. <p>Il est toujours possible de dΘfaire et de refaire les derniΦres
  632. modifications opΘrΘes dans le document.</p>
  633.  
  634. <p><a href="Creating.html.fr">A voir pour plus de dΘtail</a></p>
  635.  
  636. <p class="exercice"><em>Exercice 1á:</em> CrΘer un document contenant des
  637. paragraphes, des en-tΩtes, des divisions.</p>
  638.  
  639. <h2 id="L831">6. Les listes</h2>
  640.  
  641. <h3>Editer les listes α puces ou les listes numΘrotΘes</h3>
  642.  
  643. <h4>PremiΦre mΘthode</h4>
  644.  
  645. <p>En cliquant sur <img alt="(Liste)" src="../images/OList.gif" /> (ou
  646. <code>Ctrl h Ctrl l</code>) on crΘe une liste α puces et un premier item de
  647. liste α l'intΘrieur.</p>
  648. <ul>
  649.   <li>Il ne reste plus qu'α taper le texte de l'item.
  650.     <p>La touche <code>Enter</code> en fin d'item va crΘer un paragraphe vide
  651.     dans l'item et on peut immΘdiatement saisir le contenu de ce nouveau
  652.     paragraphe.</p>
  653.   </li>
  654.   <li>Si on ne veut pas insΘrer de paragraphe mais passer α l'item suivant,
  655.     on double la touche <code>Enter</code>.
  656.     <p>Attention en cliquant sur <img alt="(Liste)" src="../images/OList.gif"
  657.     /> (ou <code>Ctrl h Ctrl l</code>) on crΘe une nouvelle liste α puces α
  658.     l'intΘrieur de l'item courant.</p>
  659.   </li>
  660.   <li>Si on veut terminer la liste, on triple la touche
  661.   <code>Enter</code>.</li>
  662. </ul>
  663.  
  664. <p>En cliquant sur <img alt="(Liste numΘrotΘe)" src="../images/NumList.gif"
  665. /> (ou <code>Ctrl h Ctrl n</code>) on crΘe une liste numΘrotΘe et un item de
  666. liste α l'intΘrieur.</p>
  667.  
  668. <h4>DeuxiΦme mΘthode</h4>
  669.  
  670. <p>On peut saisir du texte sans dΘfinir au prΘalable de type d'ΘlΘment. Par
  671. dΘfaut, Amaya crΘe un nouveau paragraphe chaque fois que l'on active la
  672. touche <code>Enter</code>. On peut ensuite sΘlectionner plusieurs paragraphes
  673. et cliquer sur <img alt="(Liste)" src="../images/OList.gif" /> (ou <code>Ctrl
  674. h Ctrl l</code>) pour crΘer une liste α puces.</p>
  675.  
  676. <p>Pour sΘlectionner tout le contenu d'une suite de paragraphes, on utilise
  677. la touche <code>F2</code>.</p>
  678.  
  679. <h4>Transformation d'une liste α puces et en liste numΘrotΘe</h4>
  680.  
  681. <p>On pose la sΘlection dans un item de liste, puis en doublant la touche
  682. <code>F2</code> on sΘlectionne la
  683. liste complΦte. En cliquant sur <img alt="(Liste numΘrotΘe)"
  684. src="../images/NumList.gif" /> (ou <code>Ctrl h Ctrl n</code>) on crΘe une
  685. liste numΘrotΘe α la place. On peut bien s√r passer de la mΩme faτon d'une
  686. liste numΘrotΘe α une liste α puces.</p>
  687.  
  688. <h3 id="edit-dl">Editer les listes de dΘfinitions (dl/dt/dd)</h3>
  689.  
  690. <p>En cliquant sur <img alt="(Liste de dΘfinitions)" src="../images/DL.gif"
  691. /> (ou <code>Ctrl h Ctrl d</code>) on crΘe une liste de dΘfinitions.</p>
  692.  
  693. <p>La touche <code>Enter</code> est Θgalement utile pour Θditer des listes de
  694. dΘfinitions. ConsidΘrez l'exemple suivant :</p>
  695.  
  696. <blockquote>
  697.   <dl>
  698.     <dt>Terme 1</dt>
  699.     <dt>Terme 2</dt>
  700.       <dd>DΘfinition des deux termes.</dd>
  701.   </dl>
  702. </blockquote>
  703.  
  704. <p>C'est une liste de dΘfinitions (<code>dl</code>) contenant deux termes
  705. (<code>dt</code>) suivis par une dΘfinition (<code>dd</code>). Pour ajouter
  706. un nouveau paragraphe α l'intΘrieur de la dΘfinition (<code>dd</code>),
  707. placez le point d'insertion α la fin (aprΦs le mot "termes") et appuyez sur
  708. la touche <code>Enter</code>. Si vous pressez <code>Enter</code> deux fois,
  709. vous sortez de la dΘfinition en cours (<code>dd</code>) et vous crΘez un
  710. nouveau terme (<code>dt</code>). A la fin de ce nouveau terme, presser une
  711. fois la touche <code>Enter</code> vous permet de crΘer encore un nouveau
  712. terme (<code>dt</code>). La presser deux fois crΘe une nouvelle dΘfinition
  713. (<code>dd</code>).</p>
  714.  
  715. <p>Si vous voulez crΘer un nouveau terme avec sa dΘfinition <em>avant</em> le
  716. Terme 1, mettez le point d'insertion au dΘbut du terme 1 et appuyez sur
  717. <code>Enter</code>. Tapez le nouveau terme (<code>dt</code>), puis pressez
  718. <code>Enter</code> deux fois : une nouvelle dΘfinition (<code>dd</code>) est
  719. crΘΘe directement aprΦs le nouveau terme.</p>
  720. </div>
  721.  
  722. <p>De faτon gΘnΘrale on utilise la touche <code>Enter</code> pour insΘrer des
  723. ΘlΘments de structure avant ou aprΦs des listes ou des items de liste, et les
  724. touches <code>Back Space</code> et <code>Delete</code> pour fusionner des
  725. listes ou des items de listes.</p>
  726.  
  727. <p class="exercice"><em>Exercice 2á:</em> CrΘer et transformer des listes.</p>
  728.  
  729. <div>
  730. <h2 id="L1002">7. Les liens</h2>
  731.  
  732. <p>Les liens hypertexte permettent de relier des parties de document
  733. entre-elles ou des documents entre-eux.</p>
  734.  
  735. <h3>CrΘation de cibles</h3>
  736.  
  737. <p>La cible d'un lien hypertexte peut Ωtre</p>
  738. <ul>
  739.   <li>un document entier,</li>
  740.   <li>ou un passage du document englobΘ par une ancre cible,</li>
  741.   <li>ou un ΘlΘment HTML qui possΦde un identificateur (attribut ID)</li>
  742. </ul>
  743.  
  744. <p>Pour crΘer une cible dans un document, il suffit de sΘlectionner le
  745. passage dΘsirΘ et d'activer l'entrΘe de menu <strong>CrΘer cible</strong>
  746. (<code>Ctrl l Ctrl t</code>) dans le menu <strong>Liens</strong>. Si la
  747. sΘlection porte sur un ΘlΘment HTML entier, Amaya va lui associer un
  748. identificateur unique. Sinon, Amaya va englober le contenu de la sΘlection
  749. dans une ancre cible.</p>
  750.  
  751. <p>On peut demander α Amaya d'associer un identificateur α tous les ΘlΘments
  752. d'un certain type dans le document. Pour cela on active l'entrΘe
  753. <strong>Ajouter/Retirer des attributs ID</strong> dans le menu
  754. <strong>Liens</strong>. Par exemple, on peut demander d'associer un
  755. identificateur α tous les ΘlΘments H2.</p>
  756.  
  757. <h3>CrΘation de liens</h3>
  758.  
  759. <p>L'origine d'un lien est une ancre qui possΦde un attribut
  760. <code>href</code>. On procΦde de la mΩme faτon pour un lien vers un document
  761. entier ou une cible.</p>
  762.  
  763. <h4>Lien vers un autre document ΘditΘ par Amaya</h4>
  764. <ol>
  765.   <li>On sΘlectionne le passage choisi.</li>
  766.   <li>On clique sur le bouton <img alt="Link " src="../images/Link.gif"
  767.   /></li>
  768.   <li>On clique sur le document cible affichΘ.</li>
  769. </ol>
  770.  
  771. <p>Autre mΘthodeá:</p>
  772. <ol>
  773.   <li>On sΘlectionne le passage choisi.</li>
  774.   <li>On choisit <strong>CrΘer/changer lien</strong> du <a
  775.     href="Browsing.html.fr"></a>menu <strong>Liens</strong> (raccourci
  776.     <code>Ctrl l Ctrl l</code>) pour afficher le formulaire de crΘation de
  777.     lien.
  778.     <p><img alt="(CrΘation de lien)" src="../images/create_link-fr.png" /></p>
  779.   </li>
  780.   <li>Soit on saisit l'URI du document cible et on confirme. Soit on dΘcide
  781.     de dΘsigner la cible avec la souris (bouton Clic puis clic sur le
  782.     document cible affichΘ).</li>
  783. </ol>
  784.  
  785. <p>Dans tous les cas, une fois la cible choisie, Amaya va calculer l'URL
  786. relative qui permet d'aller du document source au document cible.</p>
  787.  
  788. <h4>Lien vers une ancre cible d'un document ΘditΘ par Amaya</h4>
  789.  
  790. <p>Pour crΘer un lien vers une ancre cible particuliΦre ou vers un ΘlΘment
  791. cible particulier d'un document ΘditΘ par Amaya, il faut d'abord demander la
  792. visualisation des cibles <a id="target"><img src="../images/target.gif"
  793. alt=" target " /></a> dans le document concernΘ en activant l'entrΘe
  794. <strong>Montrer les cibles</strong> du menu <strong>Vues</strong> ou ouvrant
  795. la vue des liens (entrΘe <strong>Montrer les liens</strong> du menu
  796. <strong>Vues</strong>). Ensuiteá:</p>
  797. <ol>
  798.   <li>On sΘlectionne le passage choisi.</li>
  799.   <li>On clique sur le bouton <img alt="Link " src="../images/Link.gif"
  800.   /></li>
  801.   <li>On clique sur la cible choisie.</li>
  802. </ol>
  803.  
  804. <h4>Lien vers un autre document non affichΘ</h4>
  805.  
  806. <p>Pour crΘer un lien vers un autre document local ou distantá:</p>
  807. <ol>
  808.   <li>On sΘlectionne le passage choisi.</li>
  809.   <li>On clique sur le bouton <img alt="Link " src="../images/Link.gif"
  810.   /></li>
  811.   <li>On clique sur une zone du document qui ne peut pas Ωtre une cible pour
  812.     afficher le formulaire de saisie de l'URL. Si le document est local, on
  813.     peut utiliser le browser de fichier pour sΘlectionner le fichier.</li>
  814. </ol>
  815.  
  816. <p>Autre mΘthodeá:</p>
  817. <ol>
  818.   <li>On sΘlectionne le passage choisi.</li>
  819.   <li>On choisit <strong>CrΘer/changer lien</strong> du menu
  820.     <strong>Liens</strong> (raccourci <code>Ctrl l Ctrl l</code>)</li>
  821.   <li>On saisit l'URL du document cible et on confirme.</li>
  822. </ol>
  823.  
  824. <h4><a id="Changing">Mettre α jour un lien</a></h4>
  825.  
  826. <p>Pour garder une ancre mais changer la cible du lien correspondant, on
  827. place la sΘlection dans l'ancre et on procΦde comme pour la crΘation de lien
  828. (bouton <img alt="Link " src="../images/Link.gif" /> ou l'entrΘe
  829. <strong>CrΘer/changer Lien</strong> du menu <strong>Liens</strong>). On peut
  830. alors dΘsigner la nouvelle cible ou Θditer l'URI.</p>
  831.  
  832. <p>Pour changer la cible d'un lien, on peut Θgalement Θditer l'attribut
  833. <code>href</code> dans la vue structure.</p>
  834.  
  835. <h4><a id="Removing">Supprimer un lien ou une ancre cible</a></h4>
  836.  
  837. <p>Le menu <strong>Liens</strong> contient une entrΘe <strong>DΘtruire
  838. ancre</strong> qui permet de dΘtruire l'ancre cible ou le lien sΘlectionnΘ.
  839. Il suffit que la sΘlection soit α l'intΘrieur de l'ancre α dΘtruire. L'ancre
  840. est dΘtruite, mais son contenu reste.</p>
  841.  
  842. <p class="exercice"><em>Exercice 3á:</em> CrΘer des liens dans un document et
  843. entre documents, copier/coller de structures contenant des liens, remplacer,
  844. dΘtruire.</p>
  845. </div>
  846.  
  847. <div>
  848. <h2 id="L11631">8. Mises en Θvidence du texte</h2>
  849.  
  850. <p>Il est possible de marquer des parties de texte mises en ligne soit en
  851. utilisant les CSS (voir plus loin), soit en utilisant les ΘlΘments mise en
  852. Θvidence, important, code, citation, abrΘviation, etc. de HTML.</p>
  853.  
  854. <p>Les entrΘes de menu et les boutons correspondants fonctionnent comme des
  855. bascules (activΘe/dΘsactivΘes).</p>
  856.  
  857. <p>Souvent l'introduction de mises en Θvidence engendrent des problΦmes de
  858. perte des blancs.</p>
  859.  
  860. <h3>Traitement des blancs</h3>
  861.  
  862. <p>Le traitement des blancs est appliquΘ par Amaya lors du chargement d'un
  863. document et lors de l'Θdition de celui-ci. Par exemple, le code source
  864. suivant:</p>
  865. <pre><code>    <p>Amaya supprime les</code><strong><code> blancs non significatifs </code></strong><code>au chargement</p></code></pre>
  866.  
  867. <p>donneraá:</p>
  868. <pre><code>    Amaya supprime les</code><code><strong>blancs non significatif</strong></code><code><strong>s</strong>au chargement</code></pre>
  869.  
  870. <p>car les blancs de dΘbut et de fin de l'ΘlΘment <code>strong</code> sont
  871. considΘrΘs comme non significatifs et sont donc supprimΘs.</p>
  872.  
  873. <p>La forme correcte aurait ΘtΘ :</p>
  874. <pre>    <p>Amaya supprime les <strong>blancs non significatifs</strong> au chargement</p></pre>
  875. </div>
  876.  
  877. <div>
  878. <h2 id="L12061">9. Les tables</h2>
  879.  
  880. <h3><a id="Creating1">CrΘer une nouvelle table</a></h3>
  881.  
  882. <p>Quand on active le bouton table <img src="../images/table.gif"
  883. alt="Table button" /> ou quand on sΘlectionne l'entrΘe <strong>Table</strong>
  884. depuis le menu <strong>Xhtml</strong>, Amaya visualise une boεte de dialogue
  885. qui permet de spΘcifier le nombre initial de lignes, de colonnes, ainsi que
  886. la bordure en pixels.</p>
  887.  
  888. <p style="text-align: center"><img alt="(Create table)"
  889. src="../images/create_table-fr.png" /></p>
  890.  
  891. <p>En confirmant on crΘe une table comme suit.</p>
  892.  
  893. <table border="1" summary="table">
  894.   <caption>I</caption>
  895.   <tbody>
  896.     <tr>
  897.       <td></td>
  898.       <td></td>
  899.     </tr>
  900.     <tr>
  901.       <td></td>
  902.       <td></td>
  903.     </tr>
  904.   </tbody>
  905. </table>
  906.  
  907. <p>L'espace au dessus de la table est rΘservΘ α la lΘgende. Le point
  908. d'insertion est automatiquement placΘ dans cette lΘgende pour en saisir le
  909. contenu. La touche <code>Delete</code> supprime la lΘgende.</p>
  910.  
  911. <p>La nouvelle table contient des cellules vides. On peut cliquer sur l'une
  912. d'entre elles au hasard et y insΘrer du texte, des images et autre. On peut
  913. Θgalement dΘplacer le point d'insertion de cellule en cellule par
  914. l'intermΘdiaire des flΦches du clavier.</p>
  915.  
  916. <h3><a id="Adding3">InsΘrer/Ajouter une colonne</a></h3>
  917.  
  918. <p>Il n'existe deux commandes spΘcifiques pour crΘer une nouvelle
  919. colonneá:</p>
  920. <ul>
  921.   <li><strong>InsΘrer une colonne</strong> dans le sous-menu
  922.     <strong>Table</strong> (<code>Ctrl t Ctrl b</code>) ajoute une nouvelle
  923.     colonne avant la colonne sΘlectionnΘe.</li>
  924.   <li><strong>Ajouter une colonne</strong> dans le sous-menu
  925.     <strong>Table</strong> (<code>Ctrl t Ctrl a</code>)ajoute une nouvelle
  926.     colonne aprΦs la colonne sΘlectionnΘe.</li>
  927. </ul>
  928.  
  929. <p>Si on a sΘlectionnΘ une cellule complΦte par <code>F2</code>
  930. la touche <code>Enter</code> crΘe une nouvelle cellule aprΦs et la
  931. colonne correspondante.</p>
  932.  
  933. <h3>DΘtruire une colonne</h3>
  934.  
  935. <p>Pour dΘtruire une colonne de table, il faut sΘlectionner la colonne et
  936. utiliser la commande <code>Delete</code>. Il y a deux mΘthodes pour
  937. sΘlectionner une colonne :</p>
  938. <ol>
  939.   <li>Soit l'entrΘe <strong>SΘlectionner la colonne</strong> dans le
  940.     sous-menu <strong>Table</strong> (<code>Ctrl t Ctrl c</code>).</li>
  941.   <li>Soit Θtendre la sΘlection sur au moins deux cellules dans la mΩme
  942.     colonne (Cell 1.1 α Cell 2.1 dans l'exemple ci-dessous) puis deux fois
  943.     <code>F2</code> pour sΘlectionner la colonne.</li>
  944. </ol>
  945.  
  946. <table border="1" summary="table">
  947.   <caption>LΘgende</caption>
  948.   <tbody>
  949.     <tr>
  950.       <td>Cell 1.1</td>
  951.       <td>I</td>
  952.       <td>Cell 1.2</td>
  953.       <td>Cell 1.3</td>
  954.     </tr>
  955.     <tr>
  956.       <td>Cell 2.1</td>
  957.       <td></td>
  958.       <td></td>
  959.       <td></td>
  960.     </tr>
  961.   </tbody>
  962. </table>
  963.  
  964. <h3>Copier/Coller ou DΘplacer une colonne</h3>
  965.  
  966. <p>Pour dΘplacer ou copier/coller une colonne de tableá:</p>
  967. <ol>
  968.   <li>Il faut sΘlectionner la colonne comme dans le cas de <strong>DΘtruire
  969.     une colonne</strong> et copier (<code>Ctrl c</code>) ou couper
  970.     (<code>Ctrl x</code> pour Windows, <code>Ctrl w</code> pour Unix) son
  971.     contenu.</li>
  972.   <li>Pour coller la colonne avant une autre colonne
  973.     <ul>
  974.       <li>soit on sΘlectionne le dΘbut d'une cellule de colonne et on active
  975.         la commande coller (<code>Ctrl v</code> pour Windows, <code>Ctrl
  976.         y</code> pour Unix),</li>
  977.       <li>soit on utilise l'entrΘe de menu <strong>Coller avant</strong> dans
  978.         le sous-menu <strong>Table</strong> (<code>Ctrl t Ctrl p</code>).</li>
  979.     </ul>
  980.   </li>
  981.   <li>Pour coller la colonne aprΦs une autre colonne
  982.     <ul>
  983.       <li>soit on sΘlectionne la fin d'une cellule de colonne et on active la
  984.         commande coller (<code>Ctrl v</code> pour Windows, <code>Ctrl
  985.         y</code> pour Unix),</li>
  986.       <li>soit on utilise l'entrΘe de menu <strong>Coller aprΦs</strong> dans
  987.         le sous-menu <strong>Table</strong> (<code>Ctrl t Ctrl v</code>).</li>
  988.     </ul>
  989.   </li>
  990. </ol>
  991.  
  992. <h3><a id="Adding11">InsΘrer/Ajouter une ligne</a></h3>
  993.  
  994. <p>Il n'existe deux commandes spΘcifiques pour crΘer une nouvelle ligneá:</p>
  995. <ul>
  996.   <li><strong>InsΘrer une ligne</strong> dans le sous-menu
  997.     <strong>Table</strong> (<code>Ctrl t Ctrl i</code>) ajoute une nouvelle
  998.     ligne avant la ligne sΘlectionnΘe.</li>
  999.   <li><strong>Ajouter une ligne</strong> dans le sous-menu
  1000.     <strong>Table</strong> (<code>Ctrl t Ctrl n</code>)ajoute une nouvelle
  1001.     ligne aprΦs la ligne sΘlectionnΘe.</li>
  1002. </ul>
  1003.  
  1004. <p>Si on a sΘlectionnΘ une ligne complΦte par <code>F2</code>
  1005. la touche Enter crΘe une nouvelle ligne aprΦs.</p>
  1006.  
  1007. <h3>DΘtruire une ligne</h3>
  1008.  
  1009. <p>Pour dΘtruire une ligne de table, il faut sΘlectionner la ligne et
  1010. utiliser la commande <code>Delete</code>. Il y a deux mΘthodes pour
  1011. sΘlectionner une ligne :</p>
  1012. <ol>
  1013.   <li>Soit l'entrΘe <strong>SΘlectionner la ligne</strong> dans le sous-menu
  1014.     <strong>Table</strong> (<code>Ctrl t Ctrl r</code>).</li>
  1015.   <li>Soit poser la sΘlection sur une cellule de la ligne (Cell 1.1 dans
  1016.     l'exemple ci-dessous) puis deux fois <code>F2</code> pour sΘlectionner la ligne.</li>
  1017. </ol>
  1018.  
  1019. <h3>Copier/Coller ou DΘplacer une ligne</h3>
  1020.  
  1021. <p>Pour dΘplacer ou copier/coller une ligne de tableá:</p>
  1022. <ol>
  1023.   <li>Il faut sΘlectionner la ligne comme dans le cas de <strong>DΘtruire une
  1024.     ligne</strong> et copier (<code>Ctrl c</code>) ou couper (<code>Ctrl
  1025.     x</code> pour Windows, <code>Ctrl w</code> pour Unix) son contenu.</li>
  1026.   <li>Pour coller la ligne avant une autre ligne
  1027.     <ul>
  1028.       <li>soit on sΘlectionne le dΘbut d'une ligne et on active la commande
  1029.         coller (<code>Ctrl v</code> pour Windows, <code>Ctrl y</code> pour
  1030.         Unix),</li>
  1031.       <li>soit on utilise l'entrΘe de menu <strong>Coller avant</strong> dans
  1032.         le sous-menu <strong>Table</strong> (<code>Ctrl t Ctrl p</code>).</li>
  1033.     </ul>
  1034.   </li>
  1035.   <li>Pour coller la colonne aprΦs une autre colonne
  1036.     <ul>
  1037.       <li>soit on sΘlectionne la fin d'une ligne et on active la commande
  1038.         coller (<code>Ctrl v</code> pour Windows, <code>Ctrl y</code> pour
  1039.         Unix),</li>
  1040.       <li>soit on utilise l'entrΘe de menu <strong>Coller aprΦs</strong> dans
  1041.         le sous-menu <strong>Table</strong> (<code>Ctrl t Ctrl v</code>).</li>
  1042.     </ul>
  1043.   </li>
  1044. </ol>
  1045.  
  1046. <h3>Cellules Θtendues</h3>
  1047.  
  1048. <p>Il n'existe quatre commandes spΘcifiques pour Θtendre ou rΘduire
  1049. l'extension de cellulesá:</p>
  1050. <ul>
  1051.   <li><strong>Joindre avec la cellule α droite</strong> dans le sous-menu
  1052.     <strong>Table</strong> (<code>Ctrl t Ctrl e</code>) Θtend la cellule
  1053.     d'une position α droite et colle le contenu des deux cellules.</li>
  1054.   <li><strong>Joindre avec la cellule au-dessous</strong> dans le sous-menu
  1055.     <strong>Table</strong> (<code>Ctrl t Ctrl j</code>)Θtend la cellule d'une
  1056.     position vers le bas et colle le contenu des deux cellules.</li>
  1057.   <li><strong>RΘduire extension horizontale</strong> (<code>Ctrl t Ctrl
  1058.     s</code>) rΘduit l'extension horizontale de la cellule d'une position et
  1059.     engendre une cellule vide.</li>
  1060.   <li><strong>RΘduire extension verticale</strong> (<code>Ctrl t Ctrl
  1061.     m</code>) rΘduit l'extension verticale de la cellule d'une position et
  1062.     engendre une cellule vide.</li>
  1063. </ul>
  1064.  
  1065. <p>On peut aussi Θditer directement les attributs colspan et rowspan de la
  1066. cellule.</p>
  1067.  
  1068. <h3>Ajouter un nouveau corps de table (tbody)</h3>
  1069. <ol>
  1070.   <li>Pour crΘer un nouveau corps de table en dessous d'un corps de table
  1071.     existant, il faut placer le curseur α la fin de la derniΦre cellule de la
  1072.     derniΦre ligne du corps de table et sΘlectionner l'entrΘe <strong>Corps
  1073.     (tbody)</strong> dans le sous-menu <strong>Table</strong>.</li>
  1074.   <li>Pour crΘer un nouveau corps de table au-dessus d'une ligne existante,
  1075.     il faut placer le curseur au dΘbut de la premiΦre cellule de la ligne et
  1076.     sΘlectionner l'entrΘe <strong>Ligne</strong> dans le sous-menu
  1077.     <strong>Table</strong>.</li>
  1078. </ol>
  1079.  
  1080. <p>De nouveaux corps de table peuvent Ωtre crΘΘs efficacement avec la touche
  1081. <a href="Creating.html.fr#L906">Enter</a>. Quand le corps de table entier est
  1082. sΘlectionnΘ (il faut utiliser la touche <code>F2</code>), en tapant
  1083. la touche <code>Enter</code>
  1084. vous crΘez une nouveau corps de table aprΦs le corps de table sΘlectionnΘ.</p>
  1085.  
  1086. <h3><a id="Adding21">Ajouter quelque chose aprΦs une table</a></h3>
  1087.  
  1088. <p>De nombreux types d'ΘlΘments peuvent Ωtre inclus α l'intΘrieur des
  1089. cellules de la table. Pour cette raison, Amaya pourrait mal comprendre vos
  1090. intentions quand vous sΘlectionnez un type d'ΘlΘment (par exemple cliquant
  1091. H1, H2, etc. ou sΘlectionnant une entrΘe dans le menu <strong>Xhtml</strong>)
  1092. pendant qu'un composant de la table est sΘlectionnΘ.</p>
  1093.  
  1094. <h3>CrΘation d'un paragraphe aprΦs une table</h3>
  1095.  
  1096. <p>Quand la sΘlection se trouve dans une table, la touche <code>Enter</code>
  1097. crΘe un nouveau paragraphe dans la table.</p>
  1098.  
  1099. <p>Pour crΘer un paragraphe aprΦs la table, il faut sΘlectionner la table
  1100. entiΦre en utilisant la touche <code>F2</code> puis <code>Enter</code>.</p>
  1101.  
  1102. <p>Ce nouveau paragraphe peut Ωtre modifiΘ si besoin est.</p>
  1103.  
  1104. <p></p>
  1105.  
  1106. <p class="exercice"><em>Exercice 4á:</em> CrΘer une table, crΘer une ligne
  1107. avant/aprΦs, dΘplacer une ligne, crΘer une colonne avant/aprΦs, dΘplacer une
  1108. colonne.</p>
  1109. </div>
  1110.  
  1111. <div>
  1112. <h2 id="L12281">10. Recherche/Remplacement - Correction orthographique</h2>
  1113.  
  1114. <h3>Recherche et remplacement de texte</h3>
  1115.  
  1116. <p>La recherche/remplacement se lance, soit en cliquant sur le bouton <img
  1117. src="../images/find.gif" alt="find " />, soit par l'entrΘe de menu
  1118. <strong>Edition/Rechercher</strong>. Un boite de dialogue apparaεt. vous avez
  1119. deux zones de saisie la premiΦre sera pour le texte α rechercher la deuxiΦme
  1120. zone de saisie sera pour le texte α remplacer.</p>
  1121.  
  1122. <p style="text-align: center"><img alt="(Rechercher/Remplacer)"
  1123. src="../images/search_and_replace-fr.png" /></p>
  1124.  
  1125. <p>Pour chacune des actions vous avez des choix d'options.</p>
  1126. <ul>
  1127.   <li>les options de recherche :
  1128.     <ul>
  1129.       <li>la casse : pour la recherche permet de spΘcifier s'il y a lieu de
  1130.         diffΘrencier ou non les majuscules des minuscules.</li>
  1131.       <li>case α cocher pour sΘlectionner la zone sur laquelle rΘaliser la
  1132.         recherche avant la sΘlection, aprΦs la sΘlection, dans la sΘlection
  1133.         ou sur la totalitΘ du document.</li>
  1134.     </ul>
  1135.   </li>
  1136.   <li>Les options de remplacement :
  1137.     <ul>
  1138.       <li>le type de remplacement : pas de remplacement (juste une
  1139.         recherche), remplacement avec un fenΩtre de confirmation,
  1140.         remplacement automatique.</li>
  1141.     </ul>
  1142.   </li>
  1143. </ul>
  1144.  
  1145. <h3>Correction orthographique</h3>
  1146.  
  1147. <p>La correction orthographique se rΘalise α l'aide d'une boite de dialogue
  1148. activΘe par l'action <strong>Edition/VΘrifier orthographe</strong>.</p>
  1149.  
  1150. <p style="text-align: center"><img alt="(Correcteur)"
  1151. src="../images/spellchecking-fr.png" /></p>
  1152.  
  1153. <p>les options de la boite de dialogue :</p>
  1154. <ul>
  1155.   <li>Le dictionnaire utilisΘ se fait en fonction de la langue dΘfinie au
  1156.     niveau de l'ΘlΘment ou du document.</li>
  1157.   <li>On peut spΘcifier le nombre de propositions (par dΘfaut 3).</li>
  1158.   <li>On peut exclure des ΘlΘments lors de recherche de correspondance de
  1159.     mots avec le dictionnaire (par dΘfaut toutes les options sont activΘ)</li>
  1160.   <li>Options de zone de recherche vous avez la possibilitΘ de spΘcifier la
  1161.     zone sur laquelle cette correction orthographique se fera avant la
  1162.     sΘlection, aprΦs la sΘlection, dans la sΘlection ou sur la totalitΘ du
  1163.     document.</li>
  1164.   <li>les boutons d'activation de recherche.
  1165.     <ul>
  1166.       <li>recherche du suivant (sans action) : considΦre que le mot est
  1167.         correcte et passe α l'erreur suivante.</li>
  1168.       <li>rajoute au dictionnaire personnel : rajoute le mot au dictionnaire
  1169.         personnel.</li>
  1170.       <li>remplace le mots et passe α l'occurrence suivante.</li>
  1171.       <li>remplace le mots et le rajoute dans le dictionnaire personnel.</li>
  1172.       <li>confirmer permet de fermer la boite de dialogue.</li>
  1173.     </ul>
  1174.   </li>
  1175. </ul>
  1176.  
  1177. <p class="exercice"><em>Exercice 5á:</em> Rechercher/remplacer, changer la
  1178. lange d'un passage et passer le correcteur orthographique.</p>
  1179. </div>
  1180.  
  1181. <div>
  1182. <h2 id="L1230">11. Attributs</h2>
  1183.  
  1184. <p>Il y a deux maniΦres d'Θditer des attributs :</p>
  1185. <ul>
  1186.   <li>Le menu <strong>Attributs</strong></li>
  1187.   <li>La Vue structure</li>
  1188. </ul>
  1189.  
  1190. <h3><a id="L1073">Editer des attributs par le biais du menu Attributs</a></h3>
  1191.  
  1192. <p>Le menu <strong>Attributs</strong> donne une liste de tous les attributs
  1193. qui peuvent Ωtre associΘs α l'ΘlΘment sΘlectionnΘ. Il peut Ωtre utilisΘ pour
  1194. crΘer un attribut, pour changer la valeur d'un attribut existant ou pour
  1195. effacer un attribut.</p>
  1196.  
  1197. <p>Pour Θditer un attribut, sΘlectionnez d'abord l'ΘlΘment appropriΘ. Vous
  1198. devez sΘlectionner l'ΘlΘment entier et pas seulement un caractΦre α
  1199. l'intΘrieur de l'ΘlΘment. Pour cela, il faut utiliser la touche
  1200. <code>F2</code>. Quand l'ΘlΘment est
  1201. sΘlectionnΘ, le menu <strong>Attributs</strong> affiche la liste des
  1202. attributs applicables. On peut voir rapidement si l'attribut a une valeur ou
  1203. non</p>
  1204.  
  1205. <h3><a id="Editing">Editer des attributs dans la Vue structure</a></h3>
  1206.  
  1207. <p>Tous les attributs sont affichΘs dans la Vue structure. Les attributs dont
  1208. la valeur peut Ωtre choisie librement sont affichΘs en prune et vous pouvez
  1209. Θditer leur valeur comme n'importe quelle autre chaεne de caractΦres. Quand
  1210. la valeur de l'attribut est affichΘe en bleu, vous pouvez seulement la
  1211. changer α l'aide du menu <strong>Attributs</strong>. Ceci assure que seules
  1212. des valeurs correctes soient choisies.</p>
  1213.  
  1214. <p>Quand la sΘlection se trouve dans une valeur d'attribut, la touche
  1215. <code>F2</code> sΘlectionne la valeur
  1216. complΦte. La touche <code>Delete</code> dΘtruit alors la valeur, et un
  1217. deuxiΦme <code>Delete</code> supprimera l'attribut.</p>
  1218. </div>
  1219.  
  1220. <div>
  1221. <h2 id="L1232">12. CrΘation de feuilles de style CSS</h2>
  1222.  
  1223. <h3><a id="feuilles">Les feuilles de style CSS externes et les feuilles de
  1224. style CSS utilisateur</a></h3>
  1225.  
  1226. <p>Un document peut associer plusieurs feuilles de style externes qui sont
  1227. chargΘes avec le document et lui sont appliquΘes. Une feuille de style
  1228. externe peut s'appliquer α plusieurs documents.</p>
  1229.  
  1230. <p>L'utilisateur peut dΘfinir une feuille de style spΘcifique qui s'applique
  1231. α tous les documents chargΘs. Cette feuille de style est appelΘe
  1232. <strong>Feuille de Style Utilisateur</strong> et est le fichier local
  1233. <strong>amaya.css</strong> conservΘ dans l'environnement de l'utilisateur (le
  1234. <a href="Configure.html.fr#AmayaHome">rΘpertoire d'AmayaHome</a>). Par
  1235. exemple si vous prΘfΘrez afficher les document en Helvetica et imprimer avec
  1236. une police de caractΦres de petite taille, vous pouvez crΘer votre feuille de
  1237. style utilisateur avec les rΦgles CSS suivantesá:</p>
  1238. <pre>@media print {
  1239.  BODY {font-size: 10pt}
  1240. }
  1241. @media screen {
  1242.  BODY {font-family: Helvetica}
  1243. }</pre>
  1244.  
  1245. <h3><a id="Managing">GΘrer des feuilles de style CSS externes</a></h3>
  1246.  
  1247. <p>L'entrΘe de feuilles de style donne accΦs α une sΘrie de commandes qui
  1248. permettent de contr⌠ler les feuilles de style CSS externes et celles qui
  1249. donnent les prΘfΘrences de l'utilisateur :</p>
  1250. <ul>
  1251.   <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle
  1252.     feuille de style CSS α un document courant. On peut cliquer directement
  1253.     sur la cible de la feuille de style si elle est dΘjα visualisΘe dans la
  1254.     fenΩtre Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans
  1255.     le document courant pour avoir accΦs α une boεte de dialogue et taper
  1256.     l'URL de la cible de la feuille de style. Cette commande ajoute un
  1257.     ΘlΘment lien avec ses attributs α la tΩte du document.</li>
  1258.   <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
  1259.     style CSS appliquΘes au document courant.</li>
  1260.   <li>La commande <strong>DΘsactiver</strong> permet de supprimer les effets
  1261.     d'une des feuilles de style actives du document courant. Cette commande
  1262.     n'affecte en rien le lien CSS dans le document.</li>
  1263.   <li>La commande <strong>RΘactiver</strong> permet de rΘtablir les effets
  1264.     d'une des feuilles de style CSS dΘsactivΘes du document courant. Cette
  1265.     commande n'affecte en rien le lien CSS dans le document.</li>
  1266.   <li>La commande <strong>Retirer</strong> permet de retirer une des feuilles
  1267.     de style CSS externes. Cette commande agit comme la commande DΘsactiver.
  1268.     En plus de cela, l'ΘlΘment lien qui attache les feuilles de style CSS est
  1269.     supprimΘ.</li>
  1270. </ul>
  1271.  
  1272. <p>Les commandes Ouvrir, DΘsactiver et RΘactiver peuvent Ωtre appliquΘes aux
  1273. feuilles de style qui donnent les prΘfΘrences de l'utilisateur, mais les
  1274. commandes Ajouter et Retirer concernent uniquement les feuilles de style
  1275. reliΘes. La figure suivante montre la liste des feuilles de style CSS
  1276. proposΘes pour la commande Ouvrir. Si aucune feuille de style CSS n'est
  1277. actuellement appliquΘe α un document, une boεte de dialogue expliquera
  1278. "qu'aucun fichier CSS n'est disponible".</p>
  1279.  
  1280. <p><img alt="css.gif" src="../images/css.gif" /></p>
  1281.  
  1282. <p></p>
  1283.  
  1284. <h3>Visualiser le style appliquΘ</h3>
  1285.  
  1286. <p>S'il y a beaucoup de feuilles de style attachΘes α un document, il est
  1287. difficile de comprendre pourquoi un ΘlΘment est visualisΘ avec cette couleur
  1288. ou ces marges, etc. Pour aider l'utilisateur, Amaya fournit une commande
  1289. <strong>Montrer le style appliquΘ</strong> qui visualise dans une fenΩtre
  1290. externe les propriΘtΘs CSS appliquΘes au premier ΘlΘment de la sΘlection
  1291. courante.</p>
  1292.  
  1293. <p>L'utilisateur peut afficher le source CSS qui engendre chaque propriΘtΘ en
  1294. double (ou simple) cliquant sur la propriΘtΘ. Aussi longtemps que la fenΩtre
  1295. est ouverte, Amaya met α jour le contenu de la fenΩtre quand la sΘlection
  1296. change.</p>
  1297.  
  1298. <p>En appuyant sur la touche <code>F2</code> sur les, l'utilisateur peut
  1299. voir les propriΘtΘs CSS appliquΘes aux ΘlΘments englobants.</p>
  1300.  
  1301. <h3>CrΘer des propriΘtΘs CSS</h3>
  1302.  
  1303. <p>Amaya ne fournit pas pour le moment une liste complΦte des propriΘtΘs CSS
  1304. 2 sauf pour les propriΘtΘs les plus courantes. En gΘnΘral l'utilisateur doit
  1305. donc se reporter α la spΘcification CSS 2 pour connaεtre le nom des
  1306. propriΘtΘs et leurs valeurs.</p>
  1307.  
  1308. <p>Les quatre premiΦres entrΘes du menu <strong>Style</strong> permettent de
  1309. produire les propriΘtΘs CSS les plus courantes pour les ΘlΘments sΘlectionnΘs
  1310. :<strong></strong><strong></strong></p>
  1311. <ul>
  1312.   <li><h3><span style="font-size: 12pt"><span
  1313.     style="font-weight: normal">L'option</span> Style de caractΦres <span
  1314.     style="font-weight: normal">permet de choisir certaines polices de
  1315.     caractΦre, le style du caractΦre, la taille du corps et le style
  1316.     soulignΘ.</span></span></h3>
  1317.   </li>
  1318. </ul>
  1319. <ul>
  1320.   <li><strong><span style="font-weight: normal">L'option</span>
  1321.     Couleurs</strong> permet de choisir les couleurs du premier plan et de
  1322.     l'arriΦre plan dans la palette. Cliquez sur une cellule de la palette
  1323.     avec le bouton gauche de la souris pour attribuer la couleur du premier
  1324.     plan, cliquez sur le bouton du milieu pour attribuer la couleur de
  1325.     l'arriΦre plan.</li>
  1326.   <li>L'option <strong>Format</strong> permet de choisir l'alignement, le
  1327.     renfoncement, la justification et l'interligne.</li>
  1328.   <li>L'option <strong>Image de fond</strong> permet de choisir une image de
  1329.     fond et son mode de rΘpΘtition.</li>
  1330. </ul>
  1331.  
  1332. <p>Pour le moment le style est associΘ α un ou plusieurs ΘlΘments
  1333. particuliers. Un ΘlΘment peut Ωtre utilisΘ comme un modΦle pour crΘer ou
  1334. modifier une rΦgle de styleá:</p>
  1335. <ul>
  1336.   <li>On sΘlectionne cet ΘlΘment (un seul ΘlΘment ayant un attribut
  1337.     <code>style</code>)</li>
  1338.   <li>On sΘlectionne l'entrΘe <strong>CrΘer une rΦgle</strong> du menu
  1339.     <strong>Style</strong>. Une boεte de dialogue surgit et visualise une
  1340.     liste de sΘlecteurs CSS. Cette liste inclus toutes les classes qui sont
  1341.     dΘfinies pour le document courant (y compris les classes dΘfinies par les
  1342.     feuilles de style liΘes au document), ainsi que les types d'ΘlΘment
  1343.     auquel le style est associΘ.</li>
  1344.   <li>On choisit un sΘlecteur dans cette liste ou on saisit un nouveau nom de
  1345.     classe puis on confirme. Le style de l'ΘlΘment sΘlectionnΘ est dΘsormais
  1346.     associΘ au sΘlecteur choisi et l'attribut <code>style</code> est supprimΘ
  1347.     pour l'ΘlΘment sΘlectionnΘ. Son contenu est dΘplacΘ α l'ΘlΘment
  1348.     <code>STYLE</code>, dans le <code>HEAD</code> document, et tous les
  1349.     ΘlΘments correspondant au sΘlecteur sont visualisΘs dans le nouveau
  1350.   style.</li>
  1351.   <li>Si une nouvelle classe est crΘΘe, elle peut Ωtre appliquΘe α d'autre
  1352.     ΘlΘments du documentá par la commande <strong>Appliquer une
  1353.     classe</strong> du menu <strong>Style</strong>. Une boεte de dialogue
  1354.     surgit, affichant toutes les classes existantes. On choisit une de ces
  1355.     classes. Les ΘlΘments sΘlectionnΘs sont dΘsormais visualisΘs avec le
  1356.     style associΘ α la classe choisie.</li>
  1357. </ul>
  1358.  
  1359. <p>Pour associer une classe α un ΘlΘment, vous pouvez Θgalement utiliser le
  1360. <a href="Attributes.html.fr#L1073">menu <strong>Attributs</strong></a>. Ce
  1361. menu permet aussi d'effacer un attribut de classe pour un ΘlΘment ou de le
  1362. changer : l'attribut de classe se manipule comme un autre attribut.</p>
  1363.  
  1364. <p class="exercice"><em>Exercice 6á:</em> Mettre de la couleur, appliquer une
  1365. feuille de style, voir le style.</p>
  1366. </div>
  1367.  
  1368. <div>
  1369. <h2 id="L1242">13. DΘtection des erreurs</h2>
  1370.  
  1371. <p>Au chargement d'un document, Amaya peut dΘtecter des erreurs de HTML (mais
  1372. le parseur HTML est trΦs tolΘrant) ou des incompatibilitΘs avec la famille
  1373. XHTML choisie.</p>
  1374. </div>
  1375. <dl>
  1376.   <dt>1er exempleá:</dt>
  1377.     <dd>Un document est dΘclarΘ comme HTML 4.0 Strict et contient des
  1378.       attributs non acceptΘs.
  1379.       <p><img alt="(profil invalide)" src="../images/invalid_profile-fr.png"
  1380.       /></p>
  1381.     </dd>
  1382.   <dt>2Φme exempleá:</dt>
  1383.     <dd>Un document XHTML mal formΘ
  1384.       <p><img alt="(mal formΘ)" src="../images/not_well_formed-fr.png" /></p>
  1385.     </dd>
  1386. </dl>
  1387.  
  1388. <div>
  1389. <h4>On peut corriger les erreurs</h4>
  1390.  
  1391. <p>On peut voir le dΘtail des erreurs dΘtectΘes dans l'entrΘe <strong>Montrer
  1392. les erreurs</strong> du menu <strong>Vues</strong>. Pour corriger ces
  1393. erreurs, on active le lien vers la vue source du document pour visualiser la
  1394. position de l'erreur dans le source.</p>
  1395.  
  1396. <p>Une fois les erreurs corrigΘes on synchronise pour voir si tout est
  1397. correct, on peut alors sauver le document corrigΘ.</p>
  1398.  
  1399. <h4>On peut aussi modifier le type du document</h4>
  1400.  
  1401. <p>L'entrΘe <strong>Modifier le doctype</strong> du menu
  1402. <strong>Fichier</strong> permet de modifier le type du document.</p>
  1403.  
  1404. <p>Dans le 2Φme exemple, le bouton <strong>Recharger</strong> permet de lire
  1405. le document comme un document HTML au lieu de XHTML et donc Θviter de bloquer
  1406. sur le parseur XML.</p>
  1407. </div>
  1408.  
  1409. <p></p>
  1410. </body>
  1411. </html>
  1412.