Mar 24, 2009

Using Status Bar for Formatting Your Web Page in Nvu html editor


Nvu has an innovative feature of editing/applying inline styles and applying class or id tags to selected text via its status bar. Styling using the status bar is possible in all modes except Source viewing mode.
  • Select Clicking on "Select" will select the entire text bounded by the style tag.
  • Remove Tag Clicking on "Remove Tag" will remove the style tag, and in turn all the styles for that tag will be removed.
  • Change Tag Using this option, the user can change the tag used for the text with the least effort. Clicking on "Change Tag" makes the text for the corresponding tag to be editable in the status bar. Type in the desired tag and press "Enter". The default properties of the tag will be applied to the text in the web page.
  • Inline StylesWhile in any of the Normal, HTML Tags, or Preview viewing modes the tags surrounding the current position of the cursor are shown in the status bar of Nvu's window. Style properties of any of the tags can be changed by choosing an option from the context menu. To change inline style properties:
    1. Right click on the tag you wish to edit.
    2. Click on "Inline Styles"
    3. Select the properties section you want to edit:
      • Text Properties
      • Border Properties
      • Background Properties
      • Box Properties
      • Aural Properties
      • Extract and create Generic Style

    Secting any of the options except the last one will open the corresponding tab section from CaScadeS CSS editor. With the corresponding section open, the user can define his/her own styles which will be saved according to W3C CSS coding style.

  • The Extract and create Generic Style option allows the user to extract the style information into an style rule and save it in the external/internal style sheet.

  • Templates offers you two options, "Make Editable" and "Remove Editable Area", which can be used while working with Templates.
  • ID shows ID tags(if available) from the current style sheet applied to the document. To apply a particular tag to the selected text, just click on that ID tag.
  • Class shows the class tags(if available) from the current style sheet applied to the document. To apply a class to the selected text just click on that Class tag.
  • Advanced Properties allows you to use the Advanced Property editor for adding HTML attributes and Javascript to objects such as tables, images, links, etc.

 
Design by Free WordPress Themes | Bloggerized by Premium Blogger Themes