3 - Using Nvu
- Finding your way
- Starting a page
- Editing in Nvu
- Working with text
- Working with images
- Using tables
- Links
- Frames
- Forms
- Layers
- Borders
- The Body
- Table of Contents
- Head area
- Page views
- Editing in Source view
- Selecting items
3 - Using Nvu
Nvu User Guide - Section 3
When Nvu starts the window carries a menu bar across the top (File, Edit, View etc). Below this are three 'Toolbars'. To ensure that everything is visible on the Menu bar select View > Show/Hide and see that each of the following is checked: Composition Toolbar, Format Toolbar, Edit Mode Toolbar, Status bar, Rulers, Site Manager.
The three toolbars across the top of the window carry buttons (represented by icons). Hover on any to find its function. If any are greyed out they are not functional in the current mode as they are context sensitive.
Note Not all buttons are installed initially. The full list is given in section 9.3 Customising toolbars
At the bottom of the window is the 'Status Bar'.
Across the centre of the window are two panes: the 'Site Manager' on the left and a blank web page on the right. The Site Manager is a powerful tool which is covered in section 8. Since it is not needed yet it may be closed by clicking on its close button or pressing F9.
At the top of the Page area there is a Page tab which carries the name of the page (‘Untitled’). (Nvu Help refers to this as the ‘Tab Browser’ toolbar.) If you had several pages open, as shown in the figure, this tab would allow you to select one them rapidly.
At the bottom of the page area is the ‘Edit Mode Toolbar’ which carries four tabs which select one of four ‘Viewing modes’ for a page (‘Normal’, 'HTML Tags', 'Source', 'Preview'.)
For details of viewing modes see section 3.15.
Note
The figure
shows the
buttons as they appear when Nvu is first
installed. They may be customised to different arrangements (see
section
9.3). If this has been done some
of the following may be
difficult to follow. To restore defaults click View >
Show/Hide
> Customize Toolbar > Main Toolbar > Restore
Default Set and
repeat similarly for the Format Toolbar.
Using KompoZer right-click any toolbar to customise it.
A new page can be created either from a blank page or by opening any pre-existing page.
Note There are often several ways of getting Nvu to do something. This guide will use the button on the Composition toolbar if that is available. For menu equivalents see section 9.3 Menu alternatives
Web pages use the HyperText Markup Language (HTML). There are number of variants of the basic language some details of which are outlined in Appendix 3. Nvu is capable of creating and editing four variants but for simplicity of explanation I recommend that users create the Strict HTML variant. I also recommend that you go the menu item Tools > Preferences and check the box 'Use CSS Styles instead of HTML Elements ...' this will give you the maximum functionality. You can edit documents which have been originated in other variants and again 'Use CSS Styles ...' gives maximum functionality.
Note If you find a button or menu item disabled it is likely to be a because 'Use CSS Styles ...' is not set but could be because of the context of the action.
There are several ways to start new pages or open existing ones.
To start a new blank page.
On the menu bar click File > New.
A window headed ‘Create a new document or template’ appears. Check the boxes ‘A blank document’ and ‘Strict DTD’ and clear ‘create a XHTML document’. (Without Strict DTD checked the document would have ‘Transitional’ DTD.)
Note The next time you want to repeat this action simply click the ‘New’ button on the Composition toolbar, the selections previously made will be remembered.
The use of templates is covered in section 7.
To open an existing page.
Either:
Click
the OPEN
button to access a normal
browse dialogue.The doctype of an existing page will remain the same as before it was opened. It cannot be changed in Nvu.
Each page opened starts in a new tab which can be clicked to select a document to work on.
Tip: The plus sign (+) means that you must press two keys surrounding the plus sign at the same time.
Nvu supports all the standard Windows editing commands and shortcut keys. e.g. Copy Ctrl+C, Paste Ctrl+V etc. There are other Nvu specifics. These are great time savers.
In ‘HTML Tags’ view Nvu supports drag and drop editing for block items. (Select an item by pressing the Control key while clicking on the Tag.)
An extreme time saver is Nvu’s double click response. In several cases, such as links, images and tables, a very useful editing window is opened.
Nvu supports many levels of Undo and Redo, however changes made in ‘Source’ view cannot be undone after you have changed the view.
HTML stands for HyperText Markup Language. It is the publishing language of the World Wide Web on which Nvu is based. Ideally it should be possible to use Nvu without any knowledge of this language and certainly without a knowledge of the details. As a precaution however a limited understanding is desirable. This tutorial covers a minimum of detail while introducing some useful features of Nvu.
Start a new blank page as described above.
On the status bar click on the '<> Source' tab. You will see a number of terms enclosed within angle <> brackets. These are HTML ‘Tags’. Everything starting from the <body> and finishing with </body> will appear on your web page.
Note In most cases tags occur in pairs – opening tags and closing tags – Closing tags always start with a forward slash.
All the page consists of now is a <br> tag which is a line break and which is, of course, invisible.
Later as a page builds up many more tags will be added. For the most part the pairs of tags enclose ‘contents’ from which the page is built up – items like Paragraphs, Headings, Tables, Images. The tags plus the contents are called ‘elements’. The tag names are usually either the same as element names or abbreviations of them. Some examples are ‘table’, ‘img’ for image, ‘p’ for paragraph, ‘br’ for line break (which is unusual in having no closing tag).
Nothing between the
<head> and </head> tags will appear
on the screen but may have quite useful functions nonetheless. For
instance, between the <title> and
</title>
tags there
isn’t anything. Go for it, between them type “My
first page” or something
like that. Click the tab for
‘Normal’ view, now the tab at the top carries your
page
title and you’ve edited raw HTML. Well done!
If you were too timid to do this all is not lost. There is no need to use source view at all. Go to Format > Page Title and Properties. Here you can enter various parameters including the title and the language you are writing in. These will be entered in the HEAD area for you. In some circumstances they can be important; the Title and Description, for instance, can be used by search engines to index the page.
Back to '<> Source'. Notice the first tag is <html> and the last </html>. All web pages must carry these in these positions. Actually the case doesn’t matter for any tag though it’s good practice to use lower case. (For XHTML lower case is mandatory.)
The first line, in a different colour, specifies the ‘Doctype’. This is a reference to the type of HTML document. Nvu determines the doctype according to the options selected on starting a page.
Tip: Filenames should generally be composed of unaccented letters, numbers and the underscore character. Some others are permissible but the rules for incorporating them are more complex.
Tip: Web pages are stored (hosted) on servers which usually run either a version of Windows or UNIX operating systems. UNIX filenames are case-sensitive while Windows are not. For this reason if you use mixed cases in filenames you must be very rigorous. A site which runs perfectly in your local Windows environment or on a host running Windows if transferred to a UNIX system might require extensive and time-consuming changes.
Finally, give the document a name and save it.
Go to File > Save as.
You are offered a
‘Save Page as’ window which allows you
to browse to the folder you want to use. You will find the file name
already completed with your page title. You will probably want to
change this to a shorter, all lower case, name (but you don’t
have to). You will find the file extension completed as
‘html’
you may prefer to, and you may alter it to
“htm”.
Note If you have hidden extensions for file types this becomes unavailable. Hide or view extensions is controlled in Windows by Control Panel > Folder options > View then scroll down and clear "Hide extensions for known file types".
After you edit files you need to re-save periodically. Click the ‘Save’ button.
Note KompoZer includes a small red warning icon in the page tab to indicate if a page has not been saved.
There is nothing mysterious about the files. The curious may open the file using any text editor e.g. Windows notepad. What you will see will look just like the HTML Source code you’ve been looking at in ‘Source’ view. This shows that the source is just a simple text document.
The
‘Print’
button allows you to print the current page
to a printer. This prints the page view and not the source code.
Text typed directly onto the Nvu page defaults to appearing in the format for the ‘body’ element. HTML defines a small number of elements specifically for text and it is usually preferable to use these.
To format text in a standard element format select the text (it is actually necessary simply to click anywhere within the block of text) and click the first drop-down box on the format toolbar. This offers a selection of standard text formats. Paragraph is the most appropriate for general text.
Once formatted as a paragraph, when typing in a text area, use of the ‘enter’ key starts a new block of text i.e. a paragraph. To start a new line within the current paragraph press Shift+Enter; this generates a line break.
Note This is the default action and can be altered. (See Toolbars section 9.3)
Other standard text formats are Heading formats from Heading 1, the largest (for the main heading), to Heading 6, the smallest (for the least significant). Browsers generally render headings in bold type.
Text can be edited in any of the viewing modes and Nvu responds to all the normal windows shortcut commands.
Tip: The outline of each block of text can be revealed by selecting View >Block outline. The dimensions of each block in pixels are shown on the rulers at the top and side of the page.
The elements just described mark out ‘blocks’ of text.
Within blocks it is possible to mark out sections of ‘inline’ text.
Tip: Text to be formatted may be selected in one of several ways.
Text can be formatted in a number of ways using the format toolbar. The changes listed in the table can be applied (hover over a tool to discover what it does).
| Choose a font * | |||
| Choose text colour * | Choose background colour * | ||
| Choose highlight colour * | |||
| Make text smaller * | Make text larger * | ||
| Embolden * | Italicise * |
Underline * | |
| Format as a numbered list | Format as a bulleted list | ||
| Align left | Align Centre | Align right | Justify |
| Indent text | Outdent text | ||
| Emphasise * | Strongly emphasise * | ||
Note 1 For the options marked with an asterisk select an inline section of text. This allows you to have a few words in a paragraph of a different size etc. (When you do this, if you use the 'HTML Tags' view, you will see the start of the change marked with a ‘Span’ marker.)
Note 2 'Choose background color' sets the colour for the background of the current block. If 'Use CSS Styles ...' is not checked, with Nvu it changes the background colour for the complete page, with KompoZer it has no effect.
Note 3 The emphasis button will result in italicised text with most browsers and the strong emphasis button in bold text.
Warning. With Nvu 1.0 when using Strict Doctype check 'Use CSS styles instead of HTML elements and attributes' in Tools > Preferences > General to ensure availability of all options.
Generally the position of text is determined by the fact that one block flows on after the previous one etc.
The space between blocks is determined by the browser. Through the use of styles (see section 4.2.1.4) these settings can be altered.
Paragraph and heading blocks stretch from one side of the screen to the other. This a very elegant way of operating. Try resizing the Nvu window. Until it becomes so narrow that nothing can fit, the text reformats so that it still fits – though narrower it becomes longer. It is fundamental to the way the web operates that it is designed for information transmission and not presentation. Web design tools allow us to refine presentation but, if we over constrain it, we may run into problems of getting it to fit on the screen. We really should allow the browser as much freedom as possible.
Nvu allows you to constrain the width of paragraphs. (The same applies to headings.) Try this. Set the window size so that it is somewhat narrower than the full screen width i.e. so that you have space either to narrow it more or to widen it.
Take two longish but similar paragraphs which fill about half of the window. Click in one, you will see the rulers both across the top and down the side. Grab the left edge of the ruler and draw it half way across the window. Do the same for the other paragraph but take the right edge of the ruler and drag it half way to the centre but in the opposite direction.
You probably think that you’ve achieved a rather elegant layout and discovered a flexible tool. Drag the window to be wider then narrower. Do you still think so? What you have done is to set the text to be in a fixed position and of fixed width. It no longer re-flows. Consider that visitors who view your pages may have smallish or very large screens. Will they all see what you want them to?
Supposing that you don’t like what you have just done – you can just Undo it – Edit > Undo or Ctrl+Z. However if you leave it to later you would first have to undo all later work. You can re- or de-format a paragraph directly and individually. This allows you precise control rather than relying on dragging the ruler. Go to 'HTML Tags' view, click on the yellow 'p' marker for a paragraph, on the status bar right-click on the highlighted 'p' area and select ‘Inline styles’. Now select ‘Box Properties’. This allows precise editing of the paragraph within the ‘box’ in which it is contained. If you clear everything and click “OK’ you’ll be back on virgin territory. Alternatively you can set it up precisely.
Nvu can format a list of items giving each item a sequential number in any of several formats (HTML calls these ordered lists <ol>) or presenting them bulleted (unordered lists <ul>).
To
start a list from scratch
To change existing text into a list
The text will be changed into a list a new item starting for each paragraph or other block item encountered.
To add items to a list
Numbering and format will continue from the previous item.
To change the formatting for a list click in the list and, on the menu bar, select Format > List and choose the preferred option. More options are available via the List properties option (which is also accessible by right-clicking in the list).
For numbered lists the numbering style may be selected, for bulleted lists the type of bullet may be changed.
Lists can be nested.
To start a new level of list within an existing list
Each level of list in a nested set may have either the same or different format which may be set as above. Nvu sets no format by default. Browsers normally by default render all numbered lists with decimal number format but each level of bulleted lists using a different bullet symbol.
The menu selection FORMAT offers many ways of formatting text. In some cases you can simply click within the text region in others you must select the section of text involved. Some of the effects may be repeated several times for more effect, some will reverse on a second application.
The
options offered
include
indenting text. Those unfamiliar with
web design may look, in vain, for a tab option. HTML does not support
tabs although the List feature does produce a tabbed effect. Nvu
substitutes for this in that pressing the Tab key introduces several
spaces – of course these do not produce the alignment effects
that real tabbing would. The spaces introduced by the
Tab key are technically known as non-breaking spaces. Pressing the
space bar more than once also introduces non-breaking spaces.
Strictly Nvu does not support
importing text from other applications
but it is possible to copy and paste text.
In normal view content from other web pages may be copied reliably. The
result will be rendered according to any styling applied in your
document; any reliance on external styles in the original document will
be lost. See section
4 for more on styles.
Text from word processors such as Microsoft Word or OpenOffice.org in
rtf or doc format or from text editors such as Windows notepad may also
be copied and pasted.
Warning Word processor data should be copied in .doc or .rtf form. Word processors can also save pages in html form but this is unsatisfactory because the code is of poor quality. It will be almost impossible to alter the formats in Nvu. To use such code first copy to a text editor, which removes all formatting, and then copy from the text editor to Nvu. Apply any required formats from scratch.
When such text is pasted into Nvu most formatting is lost but block divisions (paragraphs or headings) are retained. Text will be pasted into the selected element e.g. Body or ‘p’. If several paragraphs are pasted into a ‘p’ element they will be rendered as individual paragraphs. If they are pasted into the body, by selecting them all and re-formatting as ‘paragraph’, the individual paragraphs will be revealed.
Numbered lists will be retained.
Tabs will be rendered as three non-breaking spaces.
The contents of tables may be pasted, individual cells will be separated as if by tabs.
| Character | Entity | Decimal | |
|---|---|---|---|
| nrule | – | – | – |
| mrule | — | — | — |
| ellipsis | … | … | … |
| left single quote | ‘ | ‘ | ‘ |
| right single quote | ’ | ’ | ’ |
| left double quote | “ | “ | “ |
| right double quote | ” | ” | ” |
| infinity | ∞ | ∞ | ∞ |
| tilde | ˜ | ˜ | ˜ |
| capital Alpha | Α | Α | Α |
| lower case alpha | α | α | α |
| and so on for other Greek letters | |||
By special characters we refer to characters which do not have an equivalent keyboard key. HTML uses a system of characters known as 'Unicode'. This includes a large range of characters including all the international currency symbols and many thousands of others, though the fonts supplied on computers will support only a subset. A number of the more common, including accented ones, may be inserted using Insert > Characters and Symbols.
Nvu does not directly support ‘smart quotes’ but text which has been copied from applications like Microsoft Word or OpenOffice.org which include smart quotes will retain these details and they will be correctly rendered in browsers.
If you need a character which is unobtainable by these methods there are several alternatives available.
Some useful examples are shown in the box.
There is more on special characters in appendix 6 sections A6.3.7 and A6.3.8
Simplicity
itself. In
any
view,
other than ‘Source’,
click on the ‘Spell’ button. The spell checker will
work sequentially through the page. You will be offered
one
dictionary but you can add your own words to it. If the Spell button is
not installed see Section 9.3
By first highlighting a section of a page only that section will be checked.
It is also possible to run the spell checker all the time. Any
mis-spelled words
underlined in red. To set this option
on the Menu Bar select Tools
> Preferences.
In the Options
window which appears select the 'Advanced’ button and set
‘Underline misspelled words’ – OK.
Warning With Nvu 1.0 this setting must be made after the page is opened. Otherwise cancel and re-set.
Note Spell checking uses enormous processor resources. Open only one document at a time when spell checking. When working on long documents, if your system grinds to a halt, disable this when not required.
If you add words to the spell checker you create a custom dictionary. The spell checker will mark words as errors if they do not appear in either the standard or custom dictionaries. The custom dictionary is saved as a text file as persdict.dat in the chrome folder in your profiles folder. Refer to Appendix 4 for the location of profiles.
If you use a language other than that of the default dictionary or prefer a dictionary customised to regional spellings it is possible to install alternatives to cater for this.
With alternative dictionaries installed you can select which to use.
To select a dictionary.
The language selected will become the default until intentionally changed.
Spelling will use this selected dictionary plus any custom dictionary.
If you have more than one profile in use the dictionary settings must be made, as required, for each profile. You can find details of profiles in Appendix 4.2.
Acquiring dictionaries
Dictionaries may be available from a variety of sources one of which is at http://dictionaries.mozdev.org/installation.html
Dictionaries are formatted with xpi extensions.
To acquire a dictionary first identify a source. Then
To install a new dictionary
When the Spell Checker is next called the new dictionary appears in the drop down list.
[I am grateful to Greg and Elenora on the Forum for much of the above detail.]
The main page editing pane acts rather like a browser in that the text size may be viewed at different magnifications (this has nothing to do with the code for the final page). Set this using View > Text Zoom. This has no effect in Source view.
With Nvu it is easy to insert images on to your page. Browsers accept images in three formats ‘gif’, ‘jpg’ or ‘png’. You may have to use a graphics package to get your image into a suitable format. You can insert an image located anywhere on your computer but, for the sake of order, it is a good idea to locate any images which you intend to use either in the same folder (directory) as your page document or in a sub-folder of this.
Warning Before inserting an image save your page. Otherwise Nvu will have difficulty in referencing where your image is located.
As an exercise set your cursor in the middle of the paragraph, perhaps at the start of a sentence.
To insert an image
Click
the 'Image'
button on
the Composition
toolbar.You should see the image inserted into the middle of the paragraph. Maybe it has come out some ridiculous size. Click the image. A sizing box appears around the image. The box has 8 graphical handles (small white squares) one at each corner of the image and one in the middle of each side).
Drag on a handle to alter the size of the image. Make it some sensible size. Dragging a handle in the centre of a side will alter the shape of the image which is usually undesirable.
More precise control may be achieved via the Image properties window described after the note. Select the ‘dimensions’ tab.
Note Ideally images should be produced at the size required rather than resizing them. Importing large images and reducing the size wastes bandwidth and slows presentation. Resizing by small amounts can introduce undesirable artefacts.
Images in the middle of paragraphs are not usually what is needed. You can place them at either the right or left side and have the text wrap round.
To align an image (Method for transitional Doctypes)
Try the various options. The text starting from where the image is inserted will wrap around the image.
You may prefer the complete paragraph to wrap. Click on the image and drag the cursor to the start of the paragraph, or anywhere else. Moving images is easy!
You may find the first three options confusing. They refer to the position of the text relative to the image NOT the image relative to the text. Specifically you will find no way of putting an image in the middle of the page with text wrapping around it.
Note This type of presentation, common enough in print, is almost impossible to achieve using HTML even with full use of styles.
You may decide that the image is too close to the text, that you would like more space around it. Again ‘Image Properties’ allows this. On the ‘Appearance’ tab set ‘Spacing’ Top and Bottom and/or Left and Right as required. You can also put a border of selected width around a image. The border will be the same colour as the adjacent text.
An alternative way of aligning an image is to apply a style via a class as explained in sections 4.2.1.4 and 4.2.3.
Tables allow data – images, links, forms, form fields, other tables, text, etc. – to be arranged into rows and columns of cells.
A table is basically a rectangular grid forming an array of boxes into which the data are placed. The rules, between cells, and the border, around the outside of the table, may be either visible or invisible. The boxes are called ‘cells’ and may be coloured. The grid layout does not have to be regular – the first row may have one cell the second four, the third three; however, when first inserted, it will always be regular.
W3C recommends:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimise these problems, authors should use style sheets to control layout rather than tables. (HTML 4.01 Specification Section 11.1)
To insert a table
On
the Composition
Toolbar
click the Table
button. The “Insert table” window appears. Note If later the table border is set to zero these outlines disappear but Nvu in normal view replaces them with a red outline. This does not appear in Preview or in a browser.
Tables have resizing boxes similar to those used with images.
Alternatively for more control
Note CSS styles give fuller control of borders. See section 4.2.1.3.
For more options
Right-click the table and select Table Cell properties'. The Table properties window opens. This has two tabs 'Table' and 'Cells' which allow overall control of several aspects of either the table or individual cells. This includes
Tables created using the ‘Quickly’ tab have width set to 100% of the window size.
Note Sometimes Nvu creates tables at a different width in which case this may be altered as given below.
Tables at full window width give the maximum available space for data. The width accommodates to screen or window size.
It is possible to set the width to a smaller percentage of window size or to a fixed size in pixels. Fixed sized tables are inflexible in use and could result in the user having to scroll horizontally to read the content so must be used with caution. It is also possible to leave the width unspecified. This is likely to result in the best presentation as the browser will set the width to the optimal value.
To adjust table size, with the cursor in the table, click the table button (or double-click the table). In the Table Properties window select the ‘Table’ tab. The width can be set either as a percentage of window width or in pixels. To leave it unspecified clear any number in the width box.
It is possible to adjust the size of a table using the sizing boxes. When you do this the size is specified in pixels.
Right-Click in a table or cell and several menu options appear which allow the table or cell to be formatted as desired. Some of the options are context sensitive.
‘Table or cell background color’ allows the colour of the complete table or any cell to be set.
‘Table Insert’ provides means of adding rows, columns, individual cells or even tables into a cell.
‘Table delete’ provides the opposite.
A cell can be joined with the cell on its right, thus merging two cells. Virgin cells cannot be split but joined cells can.
If adjacent cells (whether within a row or column) are selected together they can be joined.
Each
cell, when clicked,
reveals a set of six manipulation symbols
(triangles and circles with x inside), these provide a rapid method of
inserting or deleting rows and columns of cells as shown in the figure.
Setting the cell background colour for adjacent cells to a dark colour reveals gaps between the cells.
This may be convenient if the cells are to be filled with text as it avoids two items of text abutting each other.
At other times it is a problem. The gap is controlled by the ‘Cellspacing’ attribute.
It is possible to set a background image for a table or cell.
The CSS Specification in section 14.2.1 recommends
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
The image appears behind anything else in the table. If the image is larger than the table the table is unaffected i.e. does not grow to accommodate the image, as much of the image as will fit is displayed. If the image is smaller than the table several options are offered e.g. the image may be centred or tiled horizontally, or vertically or in both directions until it fills the table.
To apply a background image
You can then select the tiling and/or position properties as required.
Note Background images are visible in Normal or Preview mode but not in HTML tags view.
Right-click in a table, select 'Table Cell Properties' and the ‘Table Properties’ window appears. By selecting the 'Table' Tab the spacing is revealed as defaulting to 2 pixels between cells. If this is set to zero the gaps referred to in the previous paragraph disappear.
Note The ‘Table Properties’ window can also be accessed from within a table by clicking the ‘Table’ button.
The ‘border’ defaults to 1 pixel. This border appears around the edge of the table and rules appear around each cell rendering the outlines easily visible. If the border is set to zero both border and rules disappear.
If the border is set to a value greater than 1 pixel the rules re-appear and the border appears in the wider value specified. The exact appearance of the table border depends on the browser used.
Other aspects of these lines e.g. colour or suppressing rules when table border is selected cannot be controlled using these methods.
Note For full control of borders use a Stylesheet (see section 4.2.1 especially 4.2.1.3).
The ‘Table Properties’ window also allows the ‘padding’ to be set. Padding is the distance between the cell content, e.g. text, and the edge of the cell. This provides an alternative way of establishing space between the content of adjacent cells. Padding applies to all four edges of a cell and to all the cells in a table. Once again use a style for fuller control.
This has already been referred to in section 3.6.2.2. Nvu however provides several routes to colouring tables or cells. These include:
As you work on a table the sizes of the cells may keep on changing. It is useful to understand how browsers treat tables. Unless the size of a table or cell is constrained in some way a browser will expand the cell in an attempt to accommodate any text inserted. Other cells in the same column will have the same width. This will tend to reduce the space available for any adjacent column of cells. Eventually the browser will attempt to balance the allocation to each column by wrapping the text. The overall effect will probably minimise the total height of the table.
Tables can have their width completely unspecified, specified to be a particular width in pixels or some percentage of window width.
When a table is started the Insert Table automatically selects the ‘Quickly’ tab. This allows Nvu to make the decisions. If the ‘Precisely’ tab is selected the user can make selections specifying the width in pixels or as a percentage and specifying the border width. Tables specified as percentage or unspecified are more accommodating to differing window or screen sizes and are recommended.
Browsers do not have to slavishly follow instructions. If a table specification is too narrow to accommodate the cell contents the table will grow beyond its specified limit. This can occur if a large image is inserted or a long word like ‘Antidisestablishmentarianism’.
The table properties window opens when you
Tables and cells can be re-formatted in many ways. This means that you don’t have to plan everything in advance before you start your table as settings can be adjusted later.
The table properties window provides an option to insert a caption which can be positioned on any edge.
For those familiar with them, the ‘Advanced Edit’ button gives direct access to inline styles.
Tip. Use HTML Tags view to see where to input the text.
Inserting text into a table cell is one of the simplest of tasks. Inserted text will be formatted as a TD element but may be re-formatted as a paragraph or using styles.
Even the simplest of can tasks become tedious if carried out repetitively possibly copying and pasting from pre-prepared text.
After selecting a piece of text Nvu offers a useful facility via Tables > Create table from selection. Lines of text (whether terminated by line breaks or paragraph ends) will be converted to table rows, a new cell being generated each time the specified character is met. This allows tabbed lists to be created and overcomes the fact that HTML does not support tabs – Simply type a hyphen (or some other character) instead of the tab and convert the text to a table.
Using this method tables may be imported from applications like MS Word. In Word convert the table to text separating using a character that does not appear in the text.
Note Do not use tab as the separator as Nvu will interpret this as several spaces. (See section 3.4.5)
Browsers normally display text aligned left and, in the vertical dimension, in then middle of the cell. To alter this place the cursor in a cell and click the Table button. The Table properties window allows the alignment to be altered. To set the alignment for all cells first select Table > Select> All Cells.
To align a table to the centre of a page click the table, right-click ‘Table Cell Properties’, select ‘Table’ and set ‘Table Alignment’ to ‘Center’.
Note
This works correctly with pages using Strict
Doctype. It also works correctly for pages using Transitional
doctype which have been created using KompoZer. For pages
using
transitional doctype created using Nvu Internet Explorer aligns
tables left. This may be corrected by editing the code in Source
view to precede
the Table with the code <div
align="center"> and follow the table with </div>.
N.B. This code would not be valid to use
for pages which have strict doctype.
There are a number of ways in which tables may be improved in presentation and accessibility. These include:
Caption - This is text describing the nature of the table. Insert this using the Table Properties window. The caption may be positioned on any edge of the table.
Summary - Captions will often be inadequate as a summary of the purpose and structure of the table from the perspective of people relying on non-visual user agents. W3C recommends "Authors should therefore take care to provide additional information summarizing the purpose and structure of the table using the summary attribute of the TABLE element. This is especially important for tables without captions." To add a summary, in the Table Properties window, select the Table tab and click the Advanced edit button. On the HTML attributes tab select the Summary attribute and insert the text in the 'Value' box.
Headings - Headings to rows and/or columns improve the visual presentation and make the meaning of the content clearer. By default headings are displayed bolder and centred. Headings are implemented in HTML by replacing td (table data) elements by th (table header) elements. To change a cell from td (normal cell) to heading select the cell and, using the Table Properties window, with the 'cells' tab selected tick the 'Cell Style' checkbox and set the style to 'Header'.
Accessibility - Adding summaries and headings represents the first step in improving accessibility of tables to non-visual users. HTML offers more powerful enhancements which improve the performance of text to speech devices. For more details about this see section 11.4 of the HTML 4.01 specification.
Links provide the main means of navigating web sites. They allow you to move quickly from one place to either another on the same page, a different page on the same site or a page on an external site. Links may be attached to any element on a page, in fact almost any part of a page content can form the basis of a link an element being generated specifically for the purpose. Usually however we use a few words of text or an image which we click on to activate the link.
To create a link
On
the Composition
toolbar
click on the
‘Link’ button, alternatively Right click and select
‘Create Link’. The ‘Link
Properties’ window
opens.In Normal or Preview mode you will now find your text underlined and in a different colour (probably blue) You can now try double-clicking on the text, you will see the 'Link Properties' pop up again. This can be very useful if you want to change the file to which the link refers. (In a browser you would expect the file viewed to be replaced by the one to which the link refers!)
If you now switch to 'HTML Tags' view you will see your text preceded by a yellow marker with an 'A' in it. Your text has been defined as an 'A' (Anchor) element.
Instead of linking to a file it is possible to insert an email address. The result will be that, in use, when the link is clicked the email client on the visitor’s machine will be opened with the correct address selected.
To do so proceed as under the previous heading. When the Link Properties window opens (or if Image Properties click the Link tab) enter the email address and check the box ‘The above is an email address’
There is a second type of Anchor element the ‘Named anchor’. Such an anchor is extremely useful as it can act as a type of bookmark defining a particular place on a page. Links can jump to such bookmarks.
To insert a named anchor
In 'HTML Tags' view
this time
the yellow marker has a picture of an
anchor 
.
Note The anchor is also visible in Normal view (but not in Preview).
Tip. If you have organised your page well using headings when appropriate Nvu makes linking to places on a page extremely easy. Even if you have not inserted an anchor choose the drop down list as described. All headings will be included in the list and clicking on one will simultaneously create the anchor and link to it.
Start as above for linking to another file. When the 'Link Properties' window opens, instead of choosing file use the drop down list. Your anchor name should appear there preceded by a “#”. Click it and OK. That’s it! If you test your page on a browser when you click the link the view should move to show the position of the anchor.
Note If your page is short you may not notice this. You need to test with a long page with the link towards the bottom and the anchor towards the top. With most browsers the anchor should be sit on the top visible line.
You can jump directly to the
position of named anchors in other
pages. Nvu does not make this quite so easy to achieve. Proceed as in
‘Linking to another file’ above. After you have
chosen the
file and clicked 'Open' you will see the name of the file in the box,
immediately after this type ‘#’ immediately
followed by the
name of the anchor. Thus, if your file was called
“pagetwo.html”
and the anchor was called
“p2anchor“
the complete entry should read
“pagetwo.html#p2anchor”
(without the quotes). Be
very
careful to get the case of the text right. With some systems it
doesn’t matter but with others your link will fail if the
case is
wrong. (I recommend always using lower case for filenames and anchors.)
Note
The anchor name is
‘p2anchor’
NOT
‘#p2anchor’.
The number symbol merely tells a
browser that
the following text is an anchor.
You can also, and extremely usefully, jump to pages or places on other web sites. All you have to do is the enter the full URL (Web address) into the box. Again be very careful about getting the case correct. Make sure that the check box (‘URL is relative to page location’ is cleared (you may have no option).
While you can link to named anchors on other sites I suggest that you don’t do this. Confine yourself to linking to the home page (usually ending /index.htm). To link to other pages or anchors presupposes that the webmaster will not re-arrange the structure of the site – in the end your visitors may land up with links that don't work.
Links are normally underlined and in blue text. If you look carefully you may see the colour change and wonder why. Links can exist in several states the principal are:
| unvisited links | the initial state |
| visited links | have been visited in the past |
| hovered | cursor now hovering over |
While these probably appear in different colours it is the browser which determines this.
Note For Transitional doctypes Nvu offers a means of altering the colours via Tools > Preferences > New Page Settings. All new pages should use the new selections (they don’t affect the currently open page). A better way to gain full, reliable control is to clear ‘Use custom, colors’ and set link colours using styles. See section 4.2.5.2.
The techniques and possibilities are very similar to those used with text.
To create a link
On
the
Composition
toolbar
click on the
‘Link’ button, alternatively Right click and select
‘Create Link’. The 'Image
Properties’ window
opens.To change the file to which a link refers, in Normal, Tags or Preview mode double-click on the link. The ‘Link properties’ window opens (for an image the ‘Image Properties’ window opens - click the Link tab). Edit the link.
To remove the link delete the link reference in the box.
If you don’t know what frames are read no further – you’ll be no worse off.
Nvu does not support frames – at least not at present. If you open a frame document, you get a message ‘This page can’t be edited for an unknown reason’ but it displays the frame content rather beautifully. Then you can do nothing with it except click on the ‘Source’ tab. You then see the source code and the system will seem to lock up. Actually it doesn’t lock and you can load another page and revert to normal operation.
This is not a great limitation. Though the code for frames takes a little getting used to it is usually quite short and can easily be produced using a text editor. Once established it probably rarely needs to be altered. You can use Nvu to develop the pages that go into the frames.
Frame-like presentations can be
simulated using CSS. http://www.nvu.com/demos/frames/frameSimulate.html
provides useful guidance which works well with Mozilla type browsers
but less well with Internet Explorer.
Forms provide a mechanism by which a visitor to a site may send data to as sever for processing. This may be as simple as a box to write a message for e-mailing or as complex as looking up items from a catalogue and sending an order to a supplier. Forms collect data typed in or collected from check boxes or lists and pass them to the server. It follows that forms can be used only in association with compatible software running on the server.
Forms may be placed on standard web pages and act as block level elements. In normal view Nvu shows forms surrounded by a dotted cyan box. Forms may contain other standard block level elements (paragraphs, headings …) as well as several specific elements known as ‘form controls’ which are designed for data collection. Since these form controls are essentially inline elements they must be laid out inside block level elements (typically paragraphs though divs would be equally suitable).
Each item of data sent to the server is tagged with information about which control has sent it. This is done by naming each control. Thus designers must give a unique name to each control to be used.
The data collected by a form will be sent to a URL specified in an element ‘action’ which Nvu will add to the form. This URL is often on the server that hosts the web page but does not have to be. The data will be processed using one of two methods known as ‘GET or ‘POST’ which also need to be specified. These details will be available from the provider of the associated software.
Click
the form button.Note Since this is a guide to using Nvu and not to designing forms this is as far as we go.
If the standard form styles do not appeal it is possible by the use of styles to customise them to personal preferences. For those familiar with using styles some specific details are given in section 4.2.5.3.
One
of Nvu’s
'Tip of
the day' says “Did you know that …
you can move elements? Just place the caret in the block
you’d
like to move and click once on the Layer button to make the block
movable.”
Items forming layers are taken out of the normal document flow and placed in positions defined on the page absolutely e.g. in positions fixed relative to the page boundary.
While layers introduce a level of flexibility to page design they also involve complexities that newcomers may wish to avoid. This section is therefore for those who wish to delve further.
To create a layer.
The
block becomes a
‘Layer’. Layers have sizing boxes
which allow the size to be altered. At the top of the layer is a
positioning handle (denoted by a four-way arrow)
. To move
the layer
click and drag the handle.
Layers do not have to consist of a single block – any sequence of elements that can be selected together can be converted into a layer. This may be several paragraphs with or without headings, images and tables.
Layers allow items to be placed on a page so that the absolute position, relative to the page, is defined. This provides a facility common in drawing and desk top publishing programs and allows items to be overlaid on top of each other. As such it is a very powerful tool.
Text items normally have transparent background so when overlaid become confused. By formatting them with a background colour they become solid. Similarly tables with solid background and non-transparent images may be overlaid on each other to produce clear effects.
Items converted to layers have several characteristics which differ from ‘normal’ items.
To move a layer click the positioning handle and drag it to the required position on the page.
To resize a layer drag a sizing handle as for other elements.
When positioning a layer, Nvu allows pixel-accuracy movement. This can be difficult to achieve and, if it is attempted to line up items, small errors may become obvious. Better results may be achieved by snapping positions to a coarser grid. To do so select Format > Positioning grid and set the granularity required. Movement will now be constrained to the selection made.
Note This setting must be set each time a page is opened. It is not remembered.
Note Snapping applies to dragging the position not the size.
Warning If several overlapping layers occur on a page it may become impossible to click on a handle. In this event try resizing it so that the handles become accessible, alternatively temporally move another layer out of the way.
Note If the height of a layer is dragged, though previously undefined, it becomes defined but the contents will overflow so there will be no visible change.
When
positioning
layers so
that
they overlap a mechanism is needed
to define which is in front (so entirely visible) which behind (so
partially obscured). Two buttons (‘Bring to front’
and
‘Send to back’) on the Format (2) toolbar take care
of
this.
Select the layer and click the appropriate button.
Layers,
as created, do not have
a property
‘z-index’
allocated. When brought to the front a z-index with value =1 is
attached. The z-index defines how far forward the layer is. If another
layer is to be brought to the front of the first it needs z-index to be
set to 2. Selecting it and bringing it to the front however merely sets
the index to 1. By repeating the process the index is set to 2 and the
layer brought further forward.
Note The buttons would be more appropriately labelled ‘Bring forward’, and ‘Send back’.
Six
other buttons on
the
Format (2) toolbar can be used to
modify the
behaviour of layers. They are
Glue
to the
topClicking the first (Glue to the left) initially has no effect since this is the default condition. If clicked after some conflicting condition was set it fixes the distance of the left hand side of the selected layer from the left edge.
Glue to the right fixes the distance of the right hand side (rather than the left hand side) of the layer from the right hand edge.
Glue to the center defines the position, not in absolute terms but as a percentage of the available width. Thus, if created at the centre of the space, it will remain in the centre, similarly for any other ratio.
Glue to the top also represents the default condition otherwise it fixes the distance from the top of the layer to the top edge.
Glue to the bottom and Stay in the center are best avoided by other than advanced users who will probably be using style sheets to achieve the effect required.
Dragging an item is a rather imprecise action. Nvu implements layers by using CSS absolute positioning styles. More precise control can be obtained by editing the style parameters.
To do so, in HTML tags view, right-click the ‘DIV’ tag for the layer and select ‘Advanced properties’, ‘Inline style’.
It is instructive to note which properties are applied to achieve each effect.
| Gluing option | |||||||
|---|---|---|---|---|---|---|---|
| Initial | Left | Center | Right | Top | Middle | Bottom | |
| Property | Values given to property | ||||||
| position | absolute | absolute | absolute | absolute | absolute | absolute | absolute |
| width | px | px | px | px | px | px | px |
| top | px | px | px | px | px | % |
auto |
| left | px | px | % | auto | px | px | px |
| right | auto | auto | px | ||||
| bottom | auto | auto | px | ||||
Instead of setting up layers manually as described so far, a class may be allocated to the ‘div’ that contains the layer. The CSS editor allows classes with the required properties to be established.
In the CSS editor all the required properties are located under the ‘Box’ tab. The required properties and values are
| Property | Value | Unit |
|---|---|---|
| Position | Position | absolute |
| Width | width | px |
| Top | Offsets - Top | px or % |
| Left | Offsets - Left | px or % |
| Right | Offsets - Right | px or % |
| Bottom | Offsets – Bottom | px or % |
| Z-index | Z-index | Integer |
By using a class further options become available which cannot be achieved by using the toolbar buttons. The position selector provides options of Absolute, Relative, Static or Fixed. The ‘fixed’ option is used in the HTML version of this User Guide to position the menu. The layer remains in a fixed position on the screen, not scrolling. The effect is similar to that attainable using frames for a web site.
Warning Internet Explorer version 6 interprets ‘fixed’ as is it were 'relative' so though it displays initially in the correct position it scrolls instead of remaining fixed on the page.
Elsewhere a number of methods for applying borders to images and tables have been mentioned. The level of control possible has varied from case to case and the use of style sheets to gain full control has been referred to.
There is one further method which is very easy to apply and which is applicable to all block level elements e.g. Table (and/or cells), Image, Heading, Paragraph, Form. The method uses the full border capabilities of CSS which provides complete control of
The method does not cover other options which are sometimes available elsewhere e.g. Padding.
To
apply a border
select a
block and click the ‘Borders’
button.
Note The Borders button is not installed by default. To access it customise the Format Toolbar. See section 9.3
Leave the check box ticked and set the style, width and colour for the top border. If all borders are to be the same click ‘OK’ otherwise clear the box and edit the settings for the other sides.
Note Borders can be applied in more than one way. If you click in a block the border is applied as described. If, in HTML tags view, you select the block marker the block is placed in a div and the border is applied to the div. If, in any view, you select more than one block they are placed in a div and border applied. (For more on ‘div’ see section 4.5.)
This is the background on which the whole page sits. The Body may be thought of as the Page itself. Normally it is of little concern to the designer but there are a few situations when it is.
The body can carry a background colour or image which lies behind everything else on the page in HTML documents (in XHTML documents, the background content for the body element defines only the background for the body element.).Thus the overall appearance of a page can be significantly determined by this content.
To set a background
The ‘Inline Styles’ allows you to set several other properties for the whole page. This includes Text, Border and Box properties. This can be a quick way of styling a whole page since Text properties, for instance, will trickle down (technically they are ‘inherited’) to everything on the page for which they are not otherwise specifically stated. Border and box properties are not inherited.
Stylesheets (see section 4.4) often set several general properties for the body to avoid having to repeat them several times.
Inline styles may set the body width to be less than the full window width. In this case it may be desired to centre the page in the window.
To centre a page in the window
Note Pages created using Nvu using Transitional doctype will not centre as described when viewed using Internet Explorer. This problem does not occur when using Strict doctype or with pages created using KompoZer. See also Doctypes supported.
If you have a long document with sections headed using heading formats Heading 1, Heading 2 etc Nvu can generate a Table of Contents (ToC) automatically. The table reflects the structure of the page, the content of the headings forming the text of the table.
By default the entries in the ToC will be linked to the heading to which they refer thus facilitating navigation around the page.
If required, the ToC can be numbered so that the Heading 1 levels are numbered from 1 upwards, Heading 2 levels are numbered from 1 upwards but this numbering restarts each time the level 1 number is incremented. Similarly for lower levels.
It is not necessary to list all heading levels in the ToC; for example it is possible to select only first and second levels. More importantly it is not necessary for the page to include any particular heading level so, if the page formatting uses Heading 5 and Heading 6 only, these may form the basis of the ToC; thus the use of Table of Contents imposes little restraint on the document structure.
If the headings in the page do not provide a satisfactory structure for the ToC it is possible to include short paragraphs specifically for this purpose. These may be included at any level in the ToC. The selected paragraphs are identified by applying a named class style (section 4.2.3) generated for the purpose (unless fortuitously pre-existing). Alternatively a <div> (section 4.5) to which a named class style has been applied may be used.
Generating and using a ToC in this way has the considerable advantage that it can be automatically maintained ensuring that changes to the page are accurately reflected.
A ToC works only within the page in which it resides. Links to other pages must be entered and maintained manually.
To insert a ToC
The Table of Contents will be created.
Note The box ‘Make the table of contents read-only’ does not work.
To update a ToC after changes have been made to a page.
There is no need to place the cursor.
To delete a ToC.
There is no need to place the cursor.
Nvu builds the ToC using Ordered or Unordered lists. (section 3.4.4). These lists have to be nested to produce the structure required. The result is that each level of the contents is indented relative to the previous. The indentation may be altered using styles and specifying the OL or UL and LI elements. The changes required will be to the margin and padding (section 4.2.1.4). Any changes made will apply to all lists on the page (not only ToC).
In order to make links work, each tag listed in the table will have a named anchor added automatically when the table is created or updated. Deleting a ToC also deletes all these anchors.
Every HTML document starts with a “Head” area. This provides information to browsers, search engines etc but is invisible on the page.
Items included on the head are gathered from a number of sources. These may include:
Source view allows advanced users to add further information as desired.
Nvu
provides four ways of
viewing a page – 'Normal', 'HTML Tags', 'Source',
'Preview'. These are
selected using the tabs on the Edit mode Toolbar. All provide full
editing facilities.
There is a yellow marker for the start tag for all elements (end tags are omitted). Clicking on a marker selects and highlights the whole of the element.
Note If clicking an element does not select it press the control key while clicking.
You will also see the element highlighted on the Status Bar (see figure). If you switch to Source view the element remains highlighted,
Note It will be on the screen but possibly right at the bottom.
This is of great assistance in editing. Marker names correspond with the HTML tag name with a few exceptions.
Note Named anchors are shown with a symbol whereas linked anchors are denoted by 'A', The marker 'Span' is used when certain changes are made inline with text – for instance if the colour is changed for a single word. Span in HTML has a more restricted use being confined to changes implemented using styles. This may be confusing.
In HTML Tags view background images do not appear.
An
additional view is
provided
via the ‘Browse’ button.
This opens your default browser and gives full browser functionality
and display to a page.
Warning If your default browser is Internet Explorer the page may open in source view instead of page view.
This mode is intended for those confident in coding in HTML. In this mode Nvu is not simply a text editor. On switching to a different mode Nvu carries out checks to ensure that the code is valid. If not it ‘fixes’ it. It will have made its best guess at what was intended – if it gets it wrong there is no going back – no ‘Undo’ button. While this may sometimes save you a lot of typing, if you know what you are doing, it is also possible to end up with a heavily ‘messed up’ page – it will display but half the content could have disappeared.
Needless to say good backup practice can save many disasters. The Site Manager (section 8) is actually a convenient tool for doing this. Create a backup folder and ‘Publish’ to this !
The line numbers which appear are an editing convenience, they form no part of the code. They can help to find your place when switching modes. When switching between applications the numbers are only an approximate guide.
Nvu provides some options in how lines are displayed as mentioned in section 9.2 on ‘Preferences’ or see Nvu Help.
By now Nvu users should be familiar with selecting and manipulating items. A recapitulation may be useful however.
These comments apply in Normal, HTML Tags or preview mode.
Nvu often offers a number of ways of doing something. Sometimes one method will apply sometimes an other. Which works will depend on a) what is to be selected and b) what is to be done with the selection.
Selecting text.
Many functions may be carried out on the selected text this includes
Selecting in HTML tags view
Sometimes selections in normal or preview mode become difficult or impossible.
Actions appropriate to complete blocks such as dragging or applying a class are possible.
Selecting via the Status bar
This is a quite excellent tool. Click in any text object or image, then, on the Status bar, click on the element marker farthest to the right. The object is selected. To the left of this are shown any elements higher in the document tree. Click any of these to select the corresponding elements. KompoZer also displays the class or id of each element allowing for easier selection.
Double clicking
This provides a powerful context-sensitive function which often provides the fastest route to appropriate actions.
Nvu
User Guide - Based on Nvu version 1.0 - Updated 28-July-2007
Traduction
française
日本語訳
Previous
Top
of page