PageRenderTime 53ms CodeModel.GetById 26ms RepoModel.GetById 1ms app.codeStats 0ms

/projects/netbeans-7.3/usersguide/javahelp/org/netbeans/modules/usersguide/xml/css/csh/about_source_editor.html

https://gitlab.com/essere.lab.public/qualitas.class-corpus
HTML | 176 lines | 136 code | 8 blank | 32 comment | 0 complexity | 16a2385db420c2938d9dfc3130e6519d MD5 | raw file
    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. 

  2. <!--       
    3. 

  3.  * Copyright  © 1997, 2011, Oracle and/or its affiliates. All rights reserved.
    4. 

  4.  *     Use is subject to license terms.
    5. 

  5.  *
    6. 

  6. -->
    7. 

  7. <html>
    8. 

  8.     <head>
    9. 

  9.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    10. 

  10. 

  11.         <title>About the CSS Source Editor</title>
    12. 

  12.         <link href="nbdocs://org.netbeans.modules.usersguide/org/netbeans/modules/usersguide/ide.css" 
    13. 

  13.               rel="StyleSheet" type="text/css">
    14. 

  14. 

  15.     </head>
    16. 

  16. 

  17.     <body>
    18. 

  18.         <h2>About the CSS Source Editor</h2>
    19. 

  19.         <p> <small><a href="#seealso">See Also</a>&nbsp; </small>
    20. 

  20.         <p>The CSS Source Editor is a full-featured text editor that is integrated with 
    21. 

  21.             other parts of the IDE. You open the Source Editor by 
    22. 

  22.             creating a new CSS file or double-clicking a CSS file node in the Projects window, Files window, or 
    23. 

  23.             Navigator window. 
    24. 

  24.         </p>
    25. 

  25.         <p>The CSS editor has the following features:</p>
    26. 

  26.         <dl>
    27. 

  27.             <dd><a href="#tabs">Tabs</a></dd>
    28. 

  28.             <dd><a href="#toolbar">Toolbar</a></dd>
    29. 

  29.             <dd><a href="#margins">Left Margin</a></dd>
    30. 

  30.             <dd><a href="#errorstripe">Error Stripe</a></dd>  
    31. 

  31.             <dd><a href="#status">Status Line</a></dd>
    32. 

  32.             <dd><a href="#colors">Syntax Coloring</a></dd>
    33. 

  33.             <dd><a href="#completion">Code Completion</a></dd>
    34. 

  34.             <dd><a href="#style-builder">CSS Styles Window</a></dd>
    35. 

  35.             <dd><a href="#pair">Pair Completion</a></dd>
    36. 

  36.             <dd><a href="#insert">Insert Mode and Overwrite Mode</a></dd>
    37. 

  37.             <dd><a href="#preview">Preview Window</a></dd>
    38. 

  38. 

  39.         </dl>
    40. 

  40.         <h3><a name="tabs">Source Editor Tabs</a></h3>
    41. 

  41.         <p>The top of the Source Editor has a tab for each open document. Each tab shows
    42. 

  42.             the name of the document. If the document has been modified and has not been
    43. 

  43.             saved, there is an asterisk (*) after its name. </p>
    44. 

  44.         <p>If multiple files are open, you can split the Source Editor view by clicking
    45. 

  45.             and dragging the tab. As you drag to different parts of the editing
    46. 

  46.             area, you see a red outline that shows you where the new
    47. 

  47.             window will open. When one of these boxes appears, you can drop the document
    48. 

  48.             and split the pane.</p>
    49. 

  49.         <ul class="note">
    50. 

  50.             <li>You must close the split file if you want the editor to return to its unsplit
    51. 

  51.                 state. </li>
    52. 

  52.         </ul>
    53. 

  53.         <p>You can right-click a tab to access the following commands:</p>
    54. 

  54.         <ul>
    55. 

  55.             <li><b>Close All Documents.</b> Closes all files that are open in the Source 
    56. 

  56.                 Editor area.</li>
    57. 

  57.             <li><b>Close Other Documents. </b> Closes all files except for the selected file.</li>
    58. 

  58.             <li><b>Save Document.</b> Saves the selected file.</li>
    59. 

  59.             <li><b>Clone Document.</b> Opens a new tab for the same document. This command is 
    60. 

  60.                 particularly useful in combination with splitting the window so that you can view 
    61. 

  61.                 different parts of the same file simultaneously.</li>
    62. 

  62.             <li><b>Close Window.</b> Closes the selected file.</li>
    63. 

  63.             <li><b>Maximize Window/Restore Window.</b> Maximize Window hides other windows and 
    64. 

  64.                 expands the Source Editor to use all of the window space in the IDE. Restore Window 
    65. 

  65.                 returns the windows to the state that they were before you chose Maximize Window. 
    66. 

  66.                 You can also maximize and restore the Source Editor by double-clicking a tab.</li>
    67. 

  67.             <li><b>Undock/Dock Window</b> Opens document in an editor in a new window. If window is 
    68. 

  68.                 already undocked, the Dock Window option appears instead.</li>
    69. 

  69. <li><strong>New Document Tab Group/Collapse Document Tab Group.</strong> Splits the editor window into two groups of tabs and separates the selected tab into the new group. If a separate group of tabs exists, Collapse Document Tab Group combines these groups into one group.</li>
    70. 

  70.             <li><b>Select in Projects</b> Highlights the file's node in the Projects window.</li>
    71. 

  71.             <li><b>Local History</b> Opens a menu from which you can view the changes you made to the
    72. 

  72.                 file or revert those changes.</li>
    73. 

  73.             <li><b>SVN/Git/Mercurial/etc</b> If the file is under version control, this option appears. 
    74. 

  74.                 The option opens a menu of relevant version control commands.</li>
    75. 

  75.             <li><b>Diff To...</b> Diff the file to another file in its folder or another file open in the editor.</li>
    76. 

  76.         </ul>
    77. 

  77.         <h3><a name="toolbar">Toolbar</a></h3>
    78. 

  78.         <p>The editor toolbar at the top of the Source Editor window has
    79. 

  79.             buttons for various navigating and editing shortcuts. 
    80. 

  80.             Hold the cursor over a button to display
    81. 

  81.             a description of the command. </p>
    82. 

  82.         <h3><a name="margins">Left Margin</a></h3>
    83. 

  83.         <p> The left margin displays annotation glyphs that indicate line status, such
    84. 

  84.             as warnings.  </p>
    85. 

  85. 

  86.         <p>You can right-click the left margin to display a pop-up menu. The margin
    87. 

  87.             can also optionally display line numbers.</p>
    88. 

  88.         <h3><a name="errorstripe">Error Stripe</a></h3>
    89. 

  89.         <p>The error stripe is the strip to 
    90. 

  90.             the right of the right scroll bar and 
    91. 

  91.             contains marks for various things in your file, such as errors, bookmarks, 
    92. 

  92.             and comments for the To Do list. The error stripe represents the whole file, not 
    93. 

  93.             just the lines currently displayed. You can immediately identify whether your 
    94. 

  94.             file has any errors without having to scroll through the entire file. You can double-click 
    95. 

  95.             a mark in the error stripe to jump to the line that the mark refers to.</p>
    96. 

  96.         <h3><a name="status">Status Line</a></h3>
    97. 

  97.         <p> The Source Editor status line is in the bottom right corner of the IDE. The first
    98. 

  98.             area of the status line shows the current line number and row number in the
    99. 

  99.             form <tt>line:row</tt>. The second area of the status line indicates the insertion
    100. 

  100.             mode (INS or OVR). The text area on the right is used for status messages.</p>
    101. 

  101.         <h3><a name="colors">Syntax Coloring</a></h3>
    102. 

  102.         <p> Source code displayed in the Source Editor is syntactically colored. For example,
    103. 

  103.             all CSS keywords are shown in blue and all CSS comments in light gray.  </p>
    104. 

  104.         <h3><a name="completion">Code Completion</a></h3>
    105. 

  105.         <p>The IDE's code completion feature helps you fill in code and tags as you are typing. 
    106. 

  106.             Code completion is available for CSS, HTML, and XML files.
    107. 

  107.         </p>
    108. 

  108.         
    109. 

  109.         
    110. 

  110.         <h3><a name="pair">Pair Completion</a></h3>
    111. 

  111.         <p>When you edit CSS, the Source Editor does matching of pair characters
    112. 

  112.             such as brackets, parentheses, and quotation marks. Closing characters are
    113. 

  113.             not duplicated if you type them yourself rather than letting the editor add
    114. 

  114.             them for you. </p>
    115. 

  115.         <h3><a name="insert">Insert Mode and Overwrite Mode</a></h3>
    116. 

  116.         <p>When the Source Editor is in insert mode, the default insertion point is a vertical
    117. 

  117.             bar, and text that you type is inserted. In overwrite mode, the default insertion
    118. 

  118.             point is a solid block, and text that you type replaces the existing text. </p>
    119. 

  119.         <p>Use the Insert key to toggle between the two modes. </p>
    120. 

  120.         <p>Whenever the insertion point in the Source Editor is located immediately after
    121. 

  121.             a brace, bracket, or parenthesis, the matching brace, bracket, or parenthesis
    122. 

  122.             is highlighted. </p>
    123. 

  123.         <ul class="note">
    124. 

  124.             <li>If the Source Editor beeps when you try to enter new text, the file is a
    125. 

  125.                 read-only file. </li>
    126. 

  126.         </ul>
    127. 

  127.         <h3><a name="style-builder"></a>CSS Styles Window</h3>
    128. 

  128.         <p>The IDE includes a CSS Styles window that can help you define 
    129. 

  129.             the properties and values for each HTML element.
    130. 

  130.             For each property you can select standard values from a dropdown list.
    131. 

  131.         You can use the upper pane of the CSS Styles window to quickly locate and navigate to elements in the style sheet. 
    132. 

  132.         </p>
    133. 

  133.         <p>If the CSS Styles window does not open when you open the CSS file you can open the window by choosing Window &gt; Web &gt; CSS Styles from the main menu.
    134. 

  134.             The CSS Styles window opens in the main window next to the Editor window.</p>
    135. 

  135.         <!--<p>To use the CSS Styles window, go to the Editor window and place your cursor 
    136. 

  136.             in the element whose style you want to define. A set of tabs appear in the Style
    137. 

  137.             Builder. The tabs correspond to style categories, such as Font and Background. 
    138. 

  138.         Select a tab and select style settings in that tab. For example, to set the font
    139. 

  139.         of the &lt;h2&gt; element as Verdana, find <span style="color:green"><b>h2</b></span>
    140. 

  140.         in the Editor, open the Font tab in the Style builder, and select "Verdana, Arial, Helvetica,
    141. 

  141.         sans-serif" in the list of fonts.  
    142. 

  142.         </p>
    143. 

  143.         <ul class="note">
    144. 

  144.             <li>Use the scrollbars in the Style Builder. Some of the selections may be hidden. You
    145. 

  145.             can increase the size of the Style Builder window by raising its top border.</li>
    146. 

  146.             <li>Combine the Style Builder and the <a href="#preview">Preview Window</a> to 
    147. 

  147.             experiment easily with styles.</li>
    148. 

  148.         </ul>
    149. 

  149.         
    150. 

  150.         <h3><a name="preview"></a>Preview Window</h3>
    151. 

  151.         <p>The IDE provides a Preview window in which you can preview what HTML elements
    152. 

  152.             look like according to your CSS. By default, the Preview window appears below and to 
    153. 

  153.             the right of the Editor window when you open a CSS file. If the Preview window is
    154. 

  154.             closed, open it by going to Window &gt; Other &gt; CSS Preview.</p>
    155. 

  155.         <p>The Preview window requires a CSS Previewer plugin. The NetBeans Update Center
    156. 

  156.             includes one CSS Previewer, the Flying Saucer Renderer. To install Flying Saucer,
    157. 

  157.             go to Tools &gt; Plugins, open the Available Plugins tab, and find the CSS Preview
    158. 

  158.             Flying Saucer plugin.</p>
    159. 

  159.         <p>To use the Preview window, select a CSS element in the Editor window. If the previewer
    160. 

  160.             can render the element, sample text in that style appears in the Preview window.</p>
    161. 

  161. -->
    162. 

  162.         <dl>
    163. 

  163.             <dt><a name="seealso">See Also</a></dt>
    164. 

  164.             <dd><a href="../css_create.html">Creating a Cascading Style Sheet</a></dd>
    165. 

  165.             <dd><a href="../css_edit.html">Editing a Cascading Style Sheet</a></dd>
    166. 

  166.         </dl>
    167. 

  167. 

  168.         <hr>
    169. 

  169.         <small><a href="../../../credits.html">Legal Notices</a></small>
    170. 

  170.         <table cellpadding="50" border="0">
    171. 

  171.             <tr>
    172. 

  172.                 <td>&nbsp;</td>
    173. 

  173.             </tr>
    174. 

  174.         </table>
    175. 

  175.     </body>
    176. 

  176. </html>
    177. 

  177.