home *** CD-ROM | disk | FTP | other *** search
/ PC World 2001 April / PCWorld_2001-04_cd.bin / Komunik / Amaya / WinNT2000 / amaya-WindowsNT-4.3.exe / _SETUP.1 / StyleSheets.html.fr < prev    next >
Encoding:
Extensible Markup Language  |  2001-02-22  |  11.0 KB  |  225 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  5. <head>
  6.   <title>Les feuilles de style</title>
  7.   <meta name="GENERATOR" content="amaya V4.2.2" />
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. </head>
  10.  
  11. <body xml:lang="fr" lang="fr">
  12.  
  13. <table border="0" width="100%" summary="toc">
  14.   <tbody>
  15.     <tr>
  16.       <td><p><img border="0" alt="W3C" src="../../Icons/WWW/w3c_home" /> <img
  17.         border="0" alt="Amaya" src="../Icons/amaya.gif" /></p>
  18.       </td>
  19.       <td><p align="right"><a href="ImageMaps.html.fr" accesskey="p"><img
  20.         alt="previous" border="0" src="../Icons/left.gif" /></a> <a
  21.         href="Manual.html.fr" accesskey="t"><img alt="top" border="0"
  22.         src="../Icons/up.gif" /></a> <a href="Attributes.html.fr"
  23.         accesskey="n"><img alt="next" border="0" src="../Icons/right.gif"
  24.         /></a></p>
  25.       </td>
  26.     </tr>
  27.   </tbody>
  28. </table>
  29.  
  30. <div id="Style">
  31. <h2><a name="L1023">Les feuilles de style</a></h2>
  32.  
  33. <p>Le menu <strong>Style</strong> vous permet de changer l'apparence de vos
  34. documents de deux faτons diffΘrentes :</p>
  35. <ul>
  36.   <li>en utilisant les cascades des feuilles de style (CSS).</li>
  37.   <li>en utilisant les ΘlΘments et les attributs HTML.</li>
  38. </ul>
  39.  
  40. <p>Les premiΦres entrΘes du menu <strong>Style</strong> sont consacrΘes aux
  41. CSS et les deux derniΦres entrΘes aux <a href="#L1371">ΘlΘments HTML</a>.</p>
  42.  
  43. <h3><a name="Creating">CrΘer et mettre α jour un attribut de style</a></h3>
  44.  
  45. <p>Chacune des quatre entrΘes du menu <strong>Style</strong> appelle une boεte
  46. de dialogue qui permet l'association d'un attribut de <code>style</code> aux
  47. ΘlΘments courants sΘlectionnΘs :<strong></strong><strong></strong></p>
  48. <ul>
  49.   <li><h3><span style="font-size: 12pt"><span
  50.     style="font-weight: normal">L'option</span> Style de caractΦres<span
  51.     style="font-weight: normal">permet de choisir la police de caractΦre, le
  52.     style du caractΦre, la taille du corps et le style
  53.     soulignΘ.</span></span></h3>
  54.   </li>
  55. </ul>
  56. <ul>
  57.   <li><strong><span style="font-weight: normal">L'option</span>
  58.     Couleurs</strong> permet de choisir les couleurs du premier plan et de
  59.     l'arriΦre plan dans la palette. Cliquez sur une cellule de la palette avec
  60.     le bouton gauche de la souris pour attribuer la couleur du premier plan,
  61.     cliquez sur le bouton du milieu pour attribuer la couleur de l'arriΦre
  62.     plan.</li>
  63.   <li>L'option <strong>Format</strong> permet de choisir l'alignement, le
  64.     renfoncement, la justification et l'interligne.</li>
  65.   <li>L'option <strong>Image de fond</strong> permet de choisir une image de
  66.     fond et son mode de rΘpΘtition.</li>
  67. </ul>
  68.  
  69. <p>Dans toutes ces boεtes de dialogue, les boutons <strong>DΘfaut</strong>
  70. permettent de supprimer l'information de style correspondant pour les ΘlΘments
  71. sΘlectionnΘs.</p>
  72.  
  73. <p>Toutes les modifications faites avec ces boεtes de dialogue peuvent Ωtre
  74. vues immΘdiatement dans la vue formatΘe et Θgalement dans la vue
  75. structure.</p>
  76.  
  77. <h4>Changer la largeur et la hauteur des ΘlΘments</h4>
  78.  
  79. <p>La largeur et la hauteur de n'importe quel ΘlΘment dans un document peuvent
  80. Ωtre changΘes de faτon intΘractive, de la mΩme faτon que les <a
  81. href="ImageMaps.html.fr#L1171">zones actives</a>. En tapant sur la touche
  82. Control sur le clavier et en cliquant sur le bouton du milieu de la souris,
  83. vous pouvez redimensionner la boεte associΘe α l'ΘlΘment situΘ sous le
  84. curseur. Quand vous lΓchez le bouton de la souris, la taille de l'ΘlΘment est
  85. changΘe et un attribut <code>style</code> est associΘ α l'ΘlΘment.</p>
  86.  
  87. <p>Quand l'ΘlΘment redimensionnΘ est une image, cette image est retaillΘe pour
  88. remplir sa nouvelle boεte.</p>
  89.  
  90. <h3><a name="Creating,">CrΘer un style gΘnΘrique pour un ΘlΘment ou une
  91. classe</a></h3>
  92.  
  93. <p>Quand un attribut <code>style</code> a ΘtΘ associΘ α un ΘlΘment, vous
  94. pouvez utiliser cet ΘlΘment comme un modΦle pour crΘer ou modifier une rΦgle
  95. de style. SΘlectionnez cet ΘlΘment (vous devez sΘlectionner un seul ΘlΘment et
  96. cet ΘlΘment doit avoir un attribut <code>style</code>) et choisissez
  97. <strong>CrΘer une rΦgle</strong> depuis le menu <strong>Style</strong>. Une
  98. boεte de dialogue surgit et visualise une liste de sΘlecteurs CSS. Cette liste
  99. inclus toutes les classes qui sont dΘfinies pour le document courant, ainsi
  100. que les types d'ΘlΘment auquel le style est associΘ. Choisissez un sΘlecteur
  101. dans cette liste ou entrez un nouveau nom de classe et cliquer sur le bouton
  102. <strong>Confirmer</strong>. Le style de l'ΘlΘment sΘlectionnΘ est dΘsormais
  103. associΘ au sΘlecteur choisi et l'attribut <code>style</code> est supprimΘ pour
  104. l'ΘlΘment sΘlectionnΘ. Son contenu est dΘplacΘ α l'ΘlΘment <code>STYLE</code>,
  105. dans le <code>HEAD</code> document, et tous les ΘlΘments correspondant au
  106. sΘlecteur sont visualisΘs dans le nouveau style.</p>
  107.  
  108. <p>Quand vous avez crΘΘ de nouvelles classes avec la commande <strong>CrΘer
  109. une rΦgle</strong>, vous pouvez associer ces classes α certains ΘlΘments dans
  110. le document. Choisissez <strong>Appliquer une classe</strong> depuis le menu
  111. <strong>Style</strong>. Une boεte de dialogue surgit, affichant toutes les
  112. classes existantes. Choisissez une de ces classes. Les ΘlΘments sΘlectionnΘs
  113. sont dΘsormais visualisΘs avec le style associΘ α la classe choisie.</p>
  114.  
  115. <p>Pour associer une classe α un ΘlΘment, vous pouvez Θgalement utiliser le <a
  116. href="Attributes.html.fr#L1073">menu <strong>Attributs</strong></a>. Ce menu
  117. permet aussi d'effacer un attribut de classe pour un ΘlΘment ou de le changer
  118. : l'attribut de classe se manipule comme un autre attribut.</p>
  119.  
  120. <h3><a name="feuilles">Les feuilles de style CSS externes et les feuilles de
  121. style CSS utilisateur</a></h3>
  122.  
  123. <p>Un document peut associer plusieurs feuilles de style externes qui sont
  124. chargΘes avec le document et lui sont appliquΘes. Une feuille de style externe
  125. peut s'appliquer α plusieurs documents. Quand la mΩme feuille de style
  126. s'applique α plusieurs documents affichΘs, Amaya ne charge qu'une seule
  127. instance de la feuille de style.</p>
  128.  
  129. <p>L'utilisateur peut dΘfinir une feuille de style spΘcifique qui s'applique α
  130. tous les documents chargΘs. Cette feuille de style est appelΘe <strong>Feuille
  131. de Style Utilisateur</strong> et est le fichier
  132. local<strong>amaya.css</strong> conservΘ dans l'environement de l'utilisateur
  133. (Le <a href="Configure.html.fr#AmayaHome">rΘpertoire d'AmayaHome</a>). Par
  134. exemple si vous prΘfΘrez afficher les document en Helvetica et imprimer avec
  135. une police de caractΦres de petite taille, vous pouvez crΘer votre feuille de
  136. style utilisateur avec les rΦgles CSS suivantesá:</p>
  137. <pre>@media print {
  138.  BODY {font-size: 10pt}
  139. }
  140. @media screen {
  141.  BODY {font-family: Helvetica}
  142. }</pre>
  143.  
  144. <h3><a name="Managing">GΘrer des feuilles de style CSS externes</a></h3>
  145.  
  146. <p>L'entrΘe de feuilles de style donne accΦs α une sΘrie de commandes qui
  147. permettent de contr⌠ler les feuilles de style CSS externes et celles qui
  148. donnent les prΘfΘrences de l'utilisateur :</p>
  149. <ul>
  150.   <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle feuille
  151.     de style CSS α un document courant. On peut cliquer directement sur la
  152.     cible de la feuille de style si elle est dΘjα visualisΘe dans la fenΩtre
  153.     Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans le
  154.     document courant pour avoir accΦs α une boεte de dialogue et taper l'URL
  155.     de la cible de la feuille de style. Cette commande ajoute un ΘlΘment lien
  156.     avec ses attributs α la tΩte du document.</li>
  157.   <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
  158.     style CSS appliquΘes au document courant.</li>
  159.   <li>La commande <strong>DΘsactiver</strong> permet de supprimer les effets
  160.     d'une des feuilles de style actives du document courant. Cette commande
  161.     n'affecte en rien le lien CSS dans le document.</li>
  162.   <li>La commande <strong>RΘactiver</strong> permet de rΘtablir les effets
  163.     d'une des feuilles de style CSS dΘsactivΘes du document courant. Cette
  164.     commande n'affecte en rien le lien CSS dans le document.</li>
  165.   <li>La commande <strong>Retirer</strong> permet de retirer une des feuilles
  166.     de style CSS externes. Cette commande agit comme la commande DΘsactiver.
  167.     En plus de cela, l'ΘlΘment lien qui attache les feuilles de style CSS est
  168.     supprimΘ.</li>
  169. </ul>
  170.  
  171. <p>Les commandes Ouvrir, DΘsactiver et RΘactiver peuvent Ωtre appliquΘes aux
  172. feuilles de style qui donnent les prΘfΘrences de l'utilisateur, mais les
  173. commandes Ajouter et Retirer concernent uniquement les feuilles de style
  174. reliΘes. La figure suivante montre la liste des feuilles de style CSS
  175. proposΘes pour la commande Ouvrir. Si aucune feuille de style CSS n'est
  176. actuellement appliquΘe α un document, une boεte de dialogue expliquera
  177. "qu'aucun fichier CSS n'est disponible".</p>
  178.  
  179. <p><img alt="css.gif" src="../Icons/css.gif" /></p>
  180.  
  181. <p></p>
  182.  
  183. <h3><a name="L1371">Mettre du style en utilisant des ΘlΘments HTML</a></h3>
  184.  
  185. <p>HTML fournit certains ΘlΘments de niveau de caractΦre qui permettent
  186. d'associer du style aux chaεnes de caractΦres. Deux entrΘes depuis le menu
  187. <strong>Style</strong> permettent de manier ces ΘlΘments HTML.</p>
  188.  
  189. <h4>CrΘer des ΘlΘments de style HTML</h4>
  190.  
  191. <p>La commande<strong>Types information</strong> du menu
  192. <strong>Style</strong> prΘsente un sous-menu offrant un choix d'ΘlΘments HTML
  193. qui dΘfinissent des styles abstraits. SΘlectionnez tout d'abord une chaεne de
  194. caractΦres dans votre page et ensuite choisissez une commande dans ce menu. La
  195. chaεne de caractΦres sΘlectionnΘe reτoit le style correspondant. Trois de ces
  196. styles sont Θgalement disponibles par l'intermΘdiaire des boutons :
  197. <em>emphasis</em> (<img src="../Icons/Em.gif" alt="Emphasis button" />),
  198. <strong>strong</strong> (<img src="../Icons/Strong.gif" alt="Strong button"
  199. />) and <code>code</code> (<img src="../Icons/Cour.gif" alt="Code button"
  200. />).</p>
  201.  
  202. <p>La commande<strong>╔lΘments caractΦres</strong> du menu
  203. <strong>Style</strong> offre un autre menu changeant le style du texte. Les
  204. premiΦres entrΘes de ce menu peuvent Ωtre remplacΘes par CSS et ne devraient
  205. pas Ωtre utilisΘes. Elles sont lα uniquement pour se conformer α
  206. l'implΘmentation de HTML 3.2.</p>
  207.  
  208. <h4>Supprimer le style</h4>
  209.  
  210. <p>Pour supprimer le style d'une chaεne de caractΦres, sΘlectionnez tout
  211. d'abord la chaεne et appliquez de nouveau la commande qui a ΘtΘ utilisΘe pour
  212. associer le style que vous voulez supprimer. Toutes les commandes des
  213. sous-menus<strong>Types</strong><strong>information</strong>et
  214. <cite></cite><strong>╔lΘments caractΦres</strong> s'annulent si elles sont
  215. appliquΘes de nouveau.</p>
  216. </div>
  217.  
  218. <p align="right"><a href="ImageMaps.html.fr"><img alt="previous" border="0"
  219. src="../Icons/left.gif" /></a> <a href="Manual.html.fr"><img alt="top"
  220. border="0" src="../Icons/up.gif" /></a> <a href="Attributes.html.fr"><img
  221. alt="next" border="0" src="../Icons/right.gif" /></a></p>
  222. <hr />
  223. </body>
  224. </html>
  225.