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 < prev    next >
Encoding:
Extensible Markup Language  |  2001-02-22  |  9.5 KB  |  202 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">
  5. <head>
  6.   <title>Style Sheets</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="en" lang="en">
  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" accesskey="p"><img
  20.         alt="previous" border="0" src="../Icons/left.gif" /></a> <a
  21.         href="Manual.html" accesskey="t"><img alt="top" border="0"
  22.         src="../Icons/up.gif" /></a> <a href="Attributes.html"
  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">Style Sheets</a></h2>
  32.  
  33. <p>The <strong>Style</strong> menu allows you to change the appearance of your
  34. documents by two different means:</p>
  35. <ul>
  36.   <li>using Cascading Style Sheets (CSS).</li>
  37.   <li>using HTML elements and attributes.</li>
  38. </ul>
  39.  
  40. <p>The first entries of the <strong>Style</strong> menu are dedicated to CSS,
  41. the last two entries to <a href="#L1371">HTML elements</a>.</p>
  42.  
  43. <h3><a name="Creating">Creating and updating a style attribute</a></h3>
  44.  
  45. <p>Each of the first four entries of the <strong>Style</strong> menu call a
  46. dialog box that allows associating a <code>style</code> attribute with the
  47. currently selected elements:</p>
  48. <ul>
  49.   <li><strong>Character Style</strong> allows choosing the font family, the
  50.     character style, the body size and the underline style.</li>
  51.   <li><strong>Colors</strong> allows choosing the foreground and background
  52.     colors from a palette. Click on a palette cell with the left button to set
  53.     the foreground color, click with the middle button to set the background
  54.     color.</li>
  55.   <li><strong>Format</strong> allows setting alignment, indentation,
  56.     justification and linespacing.</li>
  57.   <li><strong>Background Image</strong> allows choosing a background image and
  58.     its repeat mode.</li>
  59. </ul>
  60.  
  61. <p>In all these dialog boxes, <strong>Default</strong> buttons allow you to
  62. remove the corresponding style information for the selected elements.</p>
  63.  
  64. <p>All modifications made with these dialog boxes can be viewed immediately in
  65. both the Formatted view and the Structure view.</p>
  66.  
  67. <h4>Changing Width and Height of elements</h4>
  68.  
  69. <p>The width and height of any element in a document can be changed
  70. interactively, in the same way as <a href="ImageMaps.html#L1171">image map
  71. areas</a>. By pressing the Control key on the keyboard and the middle button
  72. of the mouse, you can resize the box associated with the element under the
  73. cursor. When you release the mouse button, the element size is changed and a
  74. <code>style</code> attribute is associated with the element.</p>
  75.  
  76. <p>When the resized element is an image, this image is zoomed to fill its new
  77. box.</p>
  78.  
  79. <h3><a name="Creating,">Creating, a generic style for an element or a
  80. class</a></h3>
  81.  
  82. <p>When a <code>style</code> attribute has been associated with an element,
  83. you can use that element as a model for creating or modifying a style rule.
  84. Select this element (you must select only one element and this element must
  85. have a <code>style</code> attribute) and choose <strong>Create Rule</strong>
  86. from the <strong>Style</strong> menu. A dialog box pops up that displays a
  87. list of CSS selectors. This list comprises all classes that are defined for
  88. the current document as well as, the element type to which the style is
  89. associated. Choose a selector in this list or enter a new class name and press
  90. the <strong>Confirm</strong> button. The style of the selected element is then
  91. associated with the chosen selector and the <code>style</code> attribute is
  92. removed from the selected element. Its content is moved to the
  93. <code>STYLE</code> element, in the document <code>HEAD</code>, and all
  94. elements matching the selector are displayed with the new style.</p>
  95.  
  96. <p>When you have created new classes with the <strong>Create Rule</strong>
  97. command, you can associate these classes with some elements in the document.
  98. Choose <strong>Apply Class</strong> from the <strong>Style</strong> menu. A
  99. dialog box pops up which displays all existing classes. Choose one of these
  100. classes. The selected elements are then displayed with the style associated
  101. with the chosen class.</p>
  102.  
  103. <p>To associate a class with an element, you can use the <a
  104. href="Attributes.html#L1073"><strong>Attributes</strong> menu</a> too. This
  105. menu also allows you to delete a class attribute from an element or to change
  106. it: the class attribute is handled like any other attribute.</p>
  107.  
  108. <h3><a name="External">External CSS style sheets and user style
  109. sheets</a></h3>
  110.  
  111. <p>A document can link several external style sheets which are downloaded with
  112. the document and applied to it. One external style sheet can apply to several
  113. documents. When the same style sheet applies to several displayed documents,
  114. Amaya loads only one instance of the style sheet.</p>
  115.  
  116. <p>The user can define a specific style sheet that applies to all loaded
  117. documents. This style sheet is called the <strong>User's Style Sheet</strong>
  118. and is the local file <strong>amaya.css</strong> stored in the user's
  119. environment (the <a href="Configure.html#AmayaHome">AmayaHome Directory</a>).
  120. For example if you prefer to display documents in Helvetica and to print with
  121. small fonts size, you may create your user's style sheet with following CSS
  122. rules:</p>
  123. <pre>@media print {
  124.  BODY {font-size: 10pt}
  125. }
  126. @media screen {
  127.  BODY {font-family: Helvetica}
  128. }</pre>
  129.  
  130. <h3><a name="Managing">Handling external CSS style sheets</a></h3>
  131.  
  132. <p>The entry Style Sheets gives access to a set of commands which allows one
  133. to control external and User's preference CSS style sheets:</p>
  134. <ul>
  135.   <li>The command <strong>Link</strong> allows one to link a new CSS style
  136.     sheet to the current document. One can click directly the target style
  137.     sheet if it is already displayed in a Amaya window. In other case the user
  138.     should click in the current document to get a dialog box and type the
  139.     target style sheet's URI. This command adds an element link with its
  140.     attributes into the head of the document.</li>
  141.   <li>The command <strong>Open</strong> allows one to open one of the CSS
  142.     style sheets applied to the current document.</li>
  143.   <li>The command <strong>Disable</strong> allows one to remove effects of one
  144.     of the enabled CSS style sheets to the current document. This command
  145.     doesn't affect the CSS link in the document.</li>
  146.   <li>The command <strong>Enable</strong> allows one to re-apply effects of
  147.     one of the disabled CSS style sheets to the current document. This command
  148.     doesn't affect the CSS link in the document.</li>
  149.   <li>The command <strong>Remove</strong> allows one to remove one of the
  150.     external CSS style sheets. This command acts as the Disable command but in
  151.     addition to that the element link which attaches the external CSS style
  152.     sheet is removed.</li>
  153. </ul>
  154.  
  155. <p>Commands Open, Disable and Enable can be applied to the User's preference
  156. style sheet, but commands Link and Remove concern only linked CSS style
  157. sheets. The following figure shows the list of CSS style sheets proposed for
  158. the command Open. If no CSS style sheet is currently applied to a document, a
  159. dialog box explains that there is "No CSS file available".</p>
  160.  
  161. <p><img alt="css.gif" src="../Icons/css.gif" /></p>
  162.  
  163. <p></p>
  164.  
  165. <h3><a name="L1371">Style through HTML elements</a></h3>
  166.  
  167. <p>HTML provides some character-level elements that allow you to associate
  168. style with character strings. Two entries from the <strong>Style</strong> menu
  169. allow you to handle these HTML elements.</p>
  170.  
  171. <h4>Creating HTML style elements</h4>
  172.  
  173. <p>Item <strong>Information type</strong> from the <strong>Style</strong> menu
  174. presents a submenu offering a choice of HTML elements that define abstract
  175. styles. Select first a character string in your page and then choose an item
  176. in this menu. The selected character string receives the corresponding style.
  177. Three of these styles are also available through buttons: <em>emphasis</em>
  178. (<img src="../Icons/Em.gif" alt="Emphasis button" />), <strong>strong</strong>
  179. (<img src="../Icons/Strong.gif" alt="Strong button" />) and <code>code</code>
  180. (<img src="../Icons/Cour.gif" alt="Code button" />).</p>
  181.  
  182. <p>Item <strong>Character elements</strong> from the <strong>Style</strong>
  183. menu offers another menu for changing the style of text. The first entries of
  184. this menu could be replaced by CSS and should not be used. They are here only
  185. to complete the HTML 3.2 implementation.</p>
  186.  
  187. <h4>Removing style</h4>
  188.  
  189. <p>To remove style from a character string, select the string first and
  190. re-apply the command that was used for associating the style you want to
  191. remove. All commands in the submenus <strong>Information Type</strong> and
  192. <strong>Character Element</strong> toggle themselves if re-applied.</p>
  193. </div>
  194.  
  195. <p align="right"><a href="ImageMaps.html"><img alt="previous" border="0"
  196. src="../Icons/left.gif" /></a> <a href="Manual.html"><img alt="top" border="0"
  197. src="../Icons/up.gif" /></a> <a href="Attributes.html"><img alt="next"
  198. border="0" src="../Icons/right.gif" /></a></p>
  199. <hr />
  200. </body>
  201. </html>
  202.