Chapter 1: Introduction

From NvuTutoriaWiki

Nvu (pronounced: "n vue") is an open source, cross-platform, standalone WYSIWYG complete web authoring system. It is based on the state-of-the-art Gecko Runtime Environment (GRE). GRE is the core of Mozilla based applications like Firefox, Thunderbird, Sunbird, etc. In addition to being a powerful HTML editor, it is a very easy to use WYSIWYG editor for absolute beginners.

Contents 1 User Interface 1.1 Composition Toolbar 1.2 Formatting Toolbar 1.2.1 Formatting Toolbar: Row 1 1.2.2 Formatting Toolbar: Row 2 1.3 Customizing Toolbars 1.4 Tabbed Interface 2 Sample Text 3 Next

User Interface

Nvu's interface consists of easily accessible toolbar buttons for all the major functions a user needs to use while designing a web page. With the modern Gecko technology as it base, Nvu offers incredible features like a tabbed interface, extension manager, themes manager, javascript console, etc. With the capability of opening multiple tabs within the same window, you can edit several files in the same instance of Nvu without wasting valuable desktop space and without cluttering the Windows Taskbar or Status Panels. Another feature unique to Nvu is that the status bar shows the tags enclosing the current position of the cursor in real-time giving you a feel of the HTML source while editing the document in WYSIWYG mode. Advanced users can edit the HTML document in Normal, HTML Tags, or Source View modes. The following sections will introduce us to the basic Nvu interface.

Composition Toolbar

The Composition Toolbar consists of buttons used to accomplish common tasks while composing a web page. These buttons perform the functions that you will use most often while creating or editing your web pages. Fig1.1 below shows the composition toolbar (enclosed by a blue rectangle) in its default state. A corresponding list below describes functions of each of the toolbar buttons briefly.

• New: Opens a blank document for editing. Clicking the down button besides the New button gives an option of how to open a blank document: in a new tab or a new window. Third option opens a dialog box which allows you to open either a blank document (new tab or new window), document based on a template or a blank template.
• Open: Opens a file open dialog box where you can choose an already present file for editing.
• Save: Saves the current document being edited. If the document is being saved the first time, a dialog box is opened, prompting the user where to save the file.
• Publish: Opens the Site Manager to publish the document to the server which hosts your web pages.
• Browse: Opens the current document being edited in your default browser. This way you get a feel how it will look when users visit your website. If the page is not saved, Nvu prompts you to save the file first and then it opens it in the browser.
• Anchor: Opens a dialog box to create an anchor. Anchors are the target locations used normally to jump from one place to another in the same page. For example, a document with a short table of contents (TOC) may use anchors for the TOC to allow the user to jump to any section straight away.
• Link: Opens a dialog box to create a hyper link. You can either put in the URL of a local file, a file on the internet or a named anchor. You can also enter other properties for the link like title text, XFN information, or other advanced properties with the advanced properties editor. See Appendix 1 for details about advanced property editor.
• Image: Opens a dialog box to select an image to be inserted at the current cursor position. For other advanced settings for the image to be inserted see Appendix 2.
• Table: Opens a dialog box to select the size of the table to be inserted at the current cursor position. See Chapter 4 for details on inserting and using tables in your documents.
• Form: Opens a dialog box prompting the user to type in the properties to insert a form at the current cursor position. See Chapter xx for details on using Forms in your documents.
• Spell: Starts the spell checker to check the spellings of the text you typed in the document. The spell check uses the dictionary you are using (default is US English).
• Print: Opens the Print dialog to select the printer and print properties before printing your document.

Image:Composition toolbar.png Fig. 1.1 Blue marker encloses the Composition Toolbar.

While users can open the composition dialog windows for the Anchor, Link, Image, and Table buttons to create the respective objects on the web page, clicking one of these buttons when the caret is already on the object will open the objects properties. For example, if your caret is in a table, clicking the "Table" button will open the table properties dialog window. Users can thus easily change or add properties for these objects.

Formatting Toolbar

The Formatting Toolbar is located just below the Composition Toolbar. It consists of two rows of buttons, Fig 1.2 and Fig 1.3 shows the formatting toolbar in the default state. Users can also customize it by right clicking on the Format Toolbar and choosing "Customize". Formatting toolbar gives you quick access to the most frequently used text formatting functions e.g. making text bold, italic, underlining text, choosing font face, creating ordered or unordered lists, etc. A more detailed description of each button is provided below:

Formatting Toolbar: Row 1

Image:Format toolbar r1.png Fig1.2 Blue marker encloses the Formatting Toolbar Row 1.

• Choosing Paragraph Format: Choose the paragraph style of selected text. Available options include:
  • Body Text: Renders selected as unformatted text.
  • Paragraph: Marks the selected block of text as a paragraph.
  • Heading Levels 1-6: Marks selected text as a Heading of Level 1,2,..or 6.
  • Address: Marks the selected text as Address format. Address format is in effect italicized text. You will need to add the line breaks in yourself.
  • Preformat: Marks the selected text as preformatted text. Preformatted text is displayed by the browser as-is. For example, browsers consider multiple white spaces as single white space, but in preformatted text white space is rendered as actually is. Preformatted text is generally used to display code examples.
• Choose Font Face: With this drop down menu, you can choose the font face for the selected text. The list contains only the fonts installed on your system. It is advised that you use generic font family as the fonts installed on your system may not be available to other viewers.
• Choose Font Color: Opens the color picker to select the color for the selected text.
• Choose Background Color: Opens the color picker to select color for background of block of text.
• Highlight Text: Opens the color picker to select color for highlighting the selected text.
• Increase Font Size: Increases the font size of selected text.
• Decrease Font Size: Decreases the font size of selected text.
• Bold: Makes the selected text bold faced.
• Italic: Italicizes the selected text.
• Underline: Underlines the selected text.
• Numbered List: Starts a numbered (ordered) listing.
• Bulleted List: Starts a bulleted (unordered) listing.
• Align Left: Left aligns the selected block of text.
• Center Align: Center aligns the selected block of text.
• Align Right: Right aligns the selected block of text.
• Justify: Justifies both sides the selected block of text.
• Indent Text: Right indents the currently active block of text.
• Outdent Text: Decreases the indent of already indented text.

Formatting Toolbar: Row 2

Image:Format toolbar r2.png Fig1.3 Blue marker encloses the Formatting Toolbar Row 2.

• Apply Class to Selection: Apply one of the available classes to selected text. Note: only available if you have a style sheet attached to your document (internal or external).
• Layer: Encloses the selected text as a layer i.e. an absolutely positioned div.
• Bring to Front: Brings the active layer in front of the other layers.
• Send to Back: Sends the active layer behind other layers.
• Emphasize: Emphasizes selected text.
• Strong Emphasize: Strongly emphasizes selected text.
• Definition Term: Converts selected text as definition term.
• Definition Description: Converts selected text as definition description.
• Glue to Left Border: Defines left margin (absolute) explicitly for a layer.
• Stay in Center: Defines left and right margins(absolute) explicitly to keep the layer in center of the window.
• Glue to Right Border: Defines right margin (absolute) explicitly for a layer.
• Glue to Top Border: Defines top margin (absolute) explicitly for a layer
• Stay in Middle: Defines top and bottom margins (absolute) explicitly for a layer.
• Glue to Bottom Border: Defines bottom margin (absolute) for a layer.

Customizing Toolbars

Users can customize the composition and the formatting toolbar according to their liking. Customizing a toolbar allows users to do the following operations:

• add buttons to the toolbar from the customization window,
• remove buttons from the toolbar and put them away in the customization window, and
• add/remove fixed/flexible spacers to the toolbar create groups of buttons e.g. buttons with similar functionality.

To open the customization window, right-click on the composition or formatting toolbar and select "Customize". You can now drag and drop buttons, a separator, a flexible space or fixed space to the toolbar to add items to it. Or drag items from the toolbar into the customization window to remove items. You can also choose to show only the icons, icons with text or just text in the composition toolbar via the Show drop down menu.

Tabbed Interface

Nvu, like Firefox, has the feature of tabbed interfaces. Multiple tabs allow the user to edit more than one HTML document in the same window at the same time. Each tab has an independent Undo/Redo list, so as to make editing of multiple documents independent of each other.

Image:Tabs.pngFig1.4 Tabbed Interface with Saved and Unsaved documents

Fig1.4 is a typical screen shot of how multiple tabs look like while editing. For convenience, each tab indicates the state of the document being edited in it. An unsaved document is shown by displaying a "red floppy" icon on the corresponding tab as shown in the second tab in Fig1.4. You can close an individual tab by right-clicking with the mouse on the tab and selecting Close Tab, while the active tab can be close by clicking the "Close" icon on the right end of tabbed interface bar.

The tabbed interface also helps users do work more efficiently. You can easily switch from one web page to another by either clicking on the corresponding tab or using the keyboard shortcuts Ctrl+PageUp, and Ctrl+PageDown.

Sample Text

In this tutorial article, we will use the text in the box below. The sample text at present is just plain text. As we go on learning, the text will be transformed using various features/functions of Nvu. For each kind of transformation, there will be a link at the end of the section, which will open the sample text in your default browser with only that transformation applied. The cumulative effect of all the transformations applied to this raw text will be shown at the end of each chapter in a similar box.

It would be beneficial if you do the tasks as described in the tutorial along with it. All you will have to do to start along with the tutorial is to copy the "Same Text" section text and paste it in Nvu. You can just do the same operations that we perform in this tutorial and check if your progress with the HTML document looks the same as the one in the tutorial. Once done, you can start playing around with the various functions in Nvu so that you feel at home when using it. Also, clicking on the "Save" button in the Composition Toolbar every few minutes is a good practice.

If you just want to read the tutorial, you will find it easier to view all the sample text at the end of the chapter with all the transformations applied cumulatively. Also, to make it more clear, formatted text will be black in color (or some color other than gray).

UNIQ55c3644551ae056d-HTMLCommentStrip53b972a19d52dda00000001

Next

In the next chapter, we will use the Formatting Toolbar to format our sample article text. Although the formatting toolbar helps us with easy access with frequently used formatting options, we will also introduce a few formatting trick using the File Menu "Format". The Format file menu provides the complete web document formatting functionality.

©2004-2006 KDS Sahambi