Using NVU ("en-view")

(To return to the rest of the website, just close this window)
Go to:

Please note: In order to have friendlier code with which to work, it would be a good idea, before starting your pages, to go under the Tools menu and select Preferences. In that window, unselect "using CSS styles instead of HTML elements and attributes".

Views:

	Normal - shows the page with which you are working.
	HTML tags - shows the page with major HTML commands.
	Source - shows the page's HTML commands.
	Preview - shows the page as it would appear in a browser.

Adding a Page Title:

• Go under Format to page Title and Properties.
• Fill out the appropriate line.

Changing Page Properties:

To change the page background, text color, and link colors, choose Page Colors and Background from the Format Menu .

* Edit Page Title as needed.

* Browse (choose file) for a file to use as a background image, if desired.

* Set colors for background, text, and links - either default colours or custom. Note: Links text = page link colour; Visited Link Text = the colour that will be displayed if the person has used the link before; Active Link Text = the colour the link will change to in the process of being clicked.

* Note: Any new page can take on the properties assigned here if you change the Tools --> Preferences... to what you wish to see in the future by default (see below).

Dealing With Unwanted Style Codes:

It is very important that you access the Tools Menu ---> Preferences ---> and UNCHECK the box beside "Use CSS styles . . .". Otherwise, you will have much in the way of extra style coding, which will complicate any editing you may wish to do in the code. CSS is a great tool for very large websites, but for our purposes, it just will get in the way.

When you use NVU in the lab, you will have to uncheck this setting each time, as each day, settings revert back to defaults. Using NVU from your flash drive requires you to make this setting change only once.

Dealing With Width Problems:

Unfortunately, if you close the Site Manager (see first image), the new blank NVU page defaults to a very wide setting. If you type from one margin to the other, or insert tables that go to the margins, your page will become so wide that you will be forced to scroll from side to side in a browser to see the whole page .

To avoid this, it is best to leave the Site Manager open, which keeps the width at a reasonable setting (F9 will restore a closed Site Manager).

Saving your Page:

• In the File Menu choose Save As…
• Type in the desired file name (names should not contain spaces or capital letters)
  NOTE: The file name of your main homepage should be index.htm
• Click Save

Inserting Tables:

Tables are useful for page organization. You can put text, links, images, and other objects inside table cells. Cells can also be resized and merged to create the size necessary for your needs.

• Position the cursor where you want the table inserted.
• Click on Insert ---> Table (or click on the table icon)
• Hover the cursor over the table sections to determine number of rows / columns. Adjustments can be made afterwards by selecting the table and going to Table -->T able Properties (see below).
• Cell Padding refers to the space between the cell contents and the cell wall in number of pixels.
• Cell Spacing refers to the space between cells in number of pixels
• In the Border field, enter the width (in pixels) of the desired border (enter 0 for no border)

* Click in the appropriate cell to type text, or insert an image, or to put in a cell background colour.

* To merge two cells together, highlight the desired cells and choose Join Selected Cells from the Table Menu.

Using a Table to Create Good Text Placement:

If you are looking to create, say, menu links across the top of a page while the rest of the page takes text / pictures normally, one way would be to create a table which would have one row and several cells, and then place your commands / links inside the cells.

There have been problems with the width of the page extending past the standard screen width, because the tables like to cross the entire page, and if you close the site manager (see first image oon this page), the page defaults to about 753 pixels wide instead of about 507 pixels wide. It is strongly recommended that you eother leave the site manager open, use tables to keep the text within range of most screens, or even indent / blockquote the text to ensure it is not too wide.

Avoiding the Table Centering Problem:

It is not uncommon to  have  tables jump around on you, or stretch across the page after carefully resizing all cells to avoid using the whole page.

One way (possibly) to avoid this may be to draw the table, then immediately go into table properties and take the number out of "width". The table will then collapse to a tiny little series of boxes on the left side. Then, after you drag the cells to the size you want, you can centre the table, etc. and the table should not try to assume a position that you do not want it to take.

Another way is to ensure the tables are created on an approximately 500 pixel wide page (see above).

Fixing the Background Colour in a Table:

Sometimes, a problem will occur in changing the colour of a table background. This does not occur when the colour is chosen initially - only when the change is wanted.

It seems that, especially where the table is only one cell, that the background in question is the cell background, not the table background.

Changing the table background only seems to change the border. In reality, the background of the table is being changed behind the cell colour. So, to change the colour, use the cell attributes box and select "Background Color". Notice how "Let table color show through" is mentioned, which is why the "border" seems to have a different colour sometimes.

Picture Background for a Table Cell:

To place a picture as a background for a table cell, you're going to have to do what you learned to do with Notepad; you will need to access the code. You need to select the "source" tab at the bottom of the screen, go to the appropriate cell and place the appropriate code in to make a picture appear as a background.
For example, placing this code inside the <td> command for a cell can get you this:

To Hold Space in an Empty cell in a Table:

In order to ensure that the space is held when a cell is empty, you need to:

• Highlight the cell(s) involved
• Choose "Source" at the bottom of the window
• Put in a non-breaking space where necessary

OR . . . you could place a period (.) inside the empty cell, and then set the text colour of the period to the same as the background of the cell to hide it. Works like a charm!

Inserting Images:

• Position the cursor where you want the image to be displayed.
• In the Insert Menu choose Image (or click on the images icon in the Menu)
• Select the image file you desire and click Ok
• The image will appear in your document.

Wrapping Text Around Pictures:

The best way to do this, if you are just wrapping around one picture (with more, it would be better to use a table) is to do the following:

1. Select the picture by 2* clicking on it. This opens the image properties box.
2. Click on the "Appearance" tab.
3. Select, under "align text to image" either "wrap to the left" or "wrap to the right" (whichever is appropriate).
4. Text will now wrap around the image.

Image Properties:

To view the image properties, select the image and double click on it.

• Width and Height can be set here, under the "dimensions" tab.
• One can turn the image into a link by designating a URL address, or by choosing another page file target in the "Link" tab. Either browse for a file, type in a web page URL, or you can make it link to an e-mail address..

* It won't let you save the picture until you provide an "Alternate text", or say you don't want one. Use this to set a descriptive "alternate" tag for the image that will appear during a mouseover. (this makes images more accessible to people with visual disabilities or for those with graphics turned off in their browser).

Adding an Email Link:

• Highlight the text you wish to make a link (it doesn't have to be an e-mail address).
• In the Insert Menu choose Insert Link, or select the Link icon in the menu.
• In the window that pops up, type in the email address to which you want the mail sent.

Modifying Text and Creating Links:

• Highlight the text you want changed.
• Selected text can be changed to a link by typing a URL address in the Link box, or locally by choosing a page file by clicking on the Choose File option (see above).
• The text colour can be changed by selecting it, and then by changing the colour under the Format Menu.
• Should you want to blockquote text, just choose Format --> increase indent. Want more indentation? Just do it again.

Adding Links to Points Within a Page (Anchor Tags):

If you have a long page, linking to points within the page is useful.

• Find the spot you want to link to and from the Insert Menu choose Named Anchor, or use the Anchor icon.
• In the window that pops up, type a one-word descriptive name for this link and click OK.
• Find and highlight the text you want to link to that spot in the Format --> Link Properties window, and use the drop-down box to select the anchor to which you wish to link (if there is only one anchor, it will be the only name there).

* To jump to the top of a page, insert an anchor at the top called "top". Then, use this same system to select it.

Remeber, NVU puts a hidden anchor before every inserted heading. So, if you want to jump to that heading, you don't need to insert another anchor; just use the link location drop down menu (left) and the anchor will be there.

Previewing in a Browser:

• In the File Menu choose Browse Page. The default browser will show you the way the page will look on the Net.
• The first time you do this, this message will appear as a safety precaution.
• Click "Launch application". The message will not be repeated if you ask it to remember your choice.

Please Note: The following section on Layering should be avoided unless you are quite advanced in your dealings with webpage construction - comes under the heading of "another thing that can go wrong".

Layering - Putting One Thing on top of Another:

Sometimes, you might want a picture (that is not a background) to appear behind some text that you are writing on the page. This is accomplished by layering. To do this, follow these steps:

• Insert picture on the page in the usual way
• Put the cursor on the page, and type the words in the usual way

• Highlight the words, and go to the third row of the menu and select the pin representing "layer"
• You will then see the text looking like this image to the right

• You can then drag the textbox over top of the image, or over  anything else on the page, by using the four headed arrow

You can use the tools beside "layer" to adjust which element is in front of which.

It Doesn't Look Right In Internet Explorer!

Sometimes, tables don't appear centered, text doesn't go right across the page, or text isn't centered in table cells when I know I centered it! This is sometimes the case when NVU files are viewed with Internet Explorer. The reason seems to be that certain "style" commands, which web authoring programs insert to make the coding more efficient, don't always work well in Internet Explorer.
You can fix this by going to the source code and deleting the offending style commands.
For purposes of the main project in this course, I will be doing grading based on how it looks in Firefox, where there should be no issue with these styles. However, if you want to distribute the project to others who may be using I.E., you may want to change the source code.

Why Create a Template?

You can use templates to create documents that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics. Once you apply a single template to a group of pages, you can change information on the group of pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text describing an item for sale) remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template.

For our project, we will not be creating true templates, but a master page from which we can save other pages. It is simpler to do, and, for our purposes, will suit us just fine. However, for those who wish to know:

Creating a Template

1. To create a template:
   • Click on File --> New, or click on the arrow besides "New" button and select "More Options"
   • Select Blank Template and click on "Create".
2. Add and format the content which will remain the same in every page with same methods used to edit normal text in a web page.
3. For the content which will be different in the web pages, Editable Area can be inserted by clicking on Insert --> Templates --> Editable Area.
4. Save the file as a Template (it will be a .mtz file).

Tip: You can remove an editable area or make an area editable using the status bar.

Using a Template

To use a Template for authoring web pages:

1. Click on File --> New or use the keyboard shortcut "Ctrl+N"
2. Select the option "A New Document based on a Template" and choose the template to use by clicking on "Choose File"
3. Click on Create.
4. Edit the content in the editable areas.
5. Save the file as an html document.

Tip: Click on Edit --> Detach From Template to detach a document from its template.

Tip: Transformation of an existing document into a template and vice-versa can be achieved by checking (unchecking) the "Templates" option in Format --> Page Title and Properties.