Get documents about "NVU
Document Sample
Simple Web Design Using the Freeware Program NVU
OR how to make a simple three page Web site for a specific purpose or group
eg. Humpback Whales.
Nvu is an open source WYSIWYG (What You See Is What You Get) complete
Web authoring system. It is based on Gecks, the Mozilla rendering engine. Nvu is
completely free and can be downloaded from http://www.nvu.com/ (http stands
for hypertext transfer protocol; some other protocols – SMTP, POP, FTP)
It is possible to build nice looking Web sites without any real understanding of
what makes a Web page work, but you will have much more control over your
Web pages if you know a few basics. It is not that hard. HTML is not a computer
programming language but a document (HyperText) Markup Language. Then
when you want to make some changes to your Web page that your Web page
construction software does not do easily, you can “duck behind the curtain” and
do it yourself. This will give you the best of both worlds. However, don‟t expect
to make a brilliant Web page in a few minutes. Good pages need a lot of thought
put into their design, and a lot of time put into their implementation.
1. Decide the general content (text and images and internet links) and have a
vision of the layout.
2. Collect all the text and images into a new folder. If the text is in MS WORD
format, save also a text version, with no formatting. Images should be in the
GIF format for simple drawings and JPEG for high-resolution photographs.
For large photographs, use a graphics program to make a lower
resolution/memory version and save it as a GIF with the same name. The
IrfanView freeware program will do this. Keep the name short and without
gaps (big_dog.gif is acceptable). Animated .gif are also available and will
show some movement. They are available from the net. Remember one 20kB
image is equivalent in memory and loading time to about eight pages of text.
3. Open the Nvu program, a new “untitled” tab will appear. (NOTE, to edit an
existing file you would use File>Open and choose the file you want to edit).
Diagram nvi1.gif.
4. Note the Menu Bar (eg. File, Edit etc.) and the FIVE Toolbars (1)
Composition Toolbar eg. New, Open, (2) Two Format Toolbars eg. B, I, U etc,
(3) Page Tabs for open documents eg. (untitled), (4) Edit Mode Toolbars at
bottom of page – Normal; HTML; Source; Preview, and (5) Status Bar eg.
<body>.
5. To give the page a TITLE, go to the Format Menu and click on “Page Title
and Properties”. Diagram nvu6.gif. Under “Title” give this page a meaningful
title e.g. Humpback Whales and click on OK. The page will still appear blank
but you will notice that at the top of the page and the Page Tab now have this
same title. You have given your webpage a TITLE. It is an important
decision, because it is what will be seen at the top of browsers and what is
saved when people Bookmark your site.
You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; killcare@gmail.com
Page 1 of 5
6. Now using the File>Save As menu, save this page into the newly prepared
folder with your other files and images. As this is the first or HOME page, this
untitled file must be renamed index.html. All opening pages in HTML have
this name. (Nvu automatically puts on the .html extension). The top of the
page will show this file name.
7. Click on the SOURCE Edit Mode button. It will open with an HTML
DOCTYPE introduction (the writing in blue and purple is HTML code). So
what is HTML? - (HyperText Markup Language, there are various versions)
– it is not as complex as a computer language. Browsers need to identify what
version of HTML is used, so the DOCTYPE statement is used to identify this
to the computer processors. You will be using Version 4.01 Transitional.
(a) HTML is composed of key words or phrases, enclosed in <angle
brackets>, called TAGS , eg <body> and </body> that go before and after the
text. You will note that straight after the identification at the top, there is an
<html> tag and its closing pair </html> is right at the bottom of the page. Your
whole Web page sits between these two tags.
(b) Inside the <html> tags you will see two main parts, <head> </head> and
<body></body>. The head section contains two main elements (Title and Meta)
and the rest of your Web page will automatically go between the <body> and
</body> tags.
(c) TITLE. Each Web page has in fact three titles, (i) what the file is saved as
(always index.html for the first/home page), (ii) the words between <title> and
</title> which also appear on top of the browser as the page title, and (iii) the one
that you will write later as text heading on the page. You will notice that your title
appears between the two title tags.
(d) META is used by search engines and we will return to it later.
(e) Many other tags include an attribute (tag property) with its value (eg.
name=”description”, content=”a…”) inside the opening tag of the pair. We will
see this later.
8. Return to Normal on Edit mode. The page will appear blank again
9. Diagrams nvu.2,3,4,5. Check the Tools/Preferences (a) Under General, select
"Retain Original Source Formatting" and tick all the other boxes EXCEPT for
the Cascading Style Sheets, (b) Fonts, leave it as the present default values, (c)
New Page Settings, tick "Readers Default Colors" and leave the rest with the
present default values, (d) Advanced, tick "HTML 4", "Transitional" and
"Return in a Paragraph ....." and leave the rest with the default values.
10. To give the page a background image (a small image that is tiled over the
whole page) and a background colour ( a fallback position) use the Format
menu and click on “Page Colors and Background). Click on “Custom Colors”
and then on the “Background” box. There are six options for choosing the
colour. Select one eg. change the hex box to #ff0000 to get red then for
“Background Image” use the Choose File to find the image you have saved in
your folder (a small repeatable tiled pattern). Then click on Open then OK.
The page will show the tiled image.
11. We will use a TABLE for the basic structure of the Web pages. They are
liquid and can expand and contract proportionally to the visitor‟s browser
window. The key is to use percentages instead of fixed pixel based width.
You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; killcare@gmail.com
Page 2 of 5
12. Use the Table Menu (or Insert or Icon), select “Insert” and “Table” (Diagram
nvu.7) and then click on the “Precisely” Tab. Make the table two rows, three
columns and 100 percent of window width and zero border, then OK. Click
somewhere on the table and then use the Table menu to select “Table
Properties”. Diagram nvu.8,9. Click on the Cells Tab and use the first pull
down menu to get “column”. Give it a width of 20 % of table, and use next to
make the next two columns 70% and 10%. The Table Properties dialogue box
enables you to set border, spacing, padding, background colour and alignment
(important) now or later. NOTE, cells can also be joined and inserted. Apply
and OK. (An extension to HTML is to use Cascading Style Sheets CSS for
structure, appearance and text style. They are not hard but beyond the scope of
this introductory presentation).
13. Use can use the Edit menu to Undo and Redo editing.
14. We will insert an icon gif image. Click in the top left cell, then click on the
Image Icon. Use the “Choose file” button to find the small image you have
saved, open it and give it an appropriate title in the “Alternate Text” box (less
than 50 characters). Under “Dimensions”, give the icon a Constrained Custom
height no larger than 100 pixels. Save. NOTE, simple gif images with
transparent surroundings can fit in more easily and display a non-rectangular
background)
15. To give the Page a heading, type Humpback Whales into the middle top cell.
Use the mouse to highlight the words. Change the Body Text to Heading 1 and
click on the Centering icon.. Save
16. Web sites need to have a mechanism for moving from page to page, i.e.
Navigation. Research shows that the best position is on the left side. A simple
name for each of our pages is listed in the bottom left cell – Home, Pictures,
Links. Put two spare lines above this with the ENTER key. Use the mouse to
highlight the list and click on the Bulleted List Icon. Apply, OK and Save.
17. To make this list into links, highlight just the first (Home) and click on the
Link Icon. On the pop-up menu, click on “Choose File” and select the
index.html file then OK. NOTE, it changes colour and is underlined (link
style) In turn highlight the next two links. We have not saved these files yet,
so you will need to type in their name (pictures.html and links.html). Save.
18. To change the background colour in the Navigation cell, RIGHT click
somewhere in the cell, select “Table or cell Background Color” and use one of
the methods to set a colour.
19. It is proper to let visitors know the author of the site and how up to date it is.
Move a few lines down from the Navigation and enter a suitable comment.
Convert it to Paragraph text.
20. We now have a completed common framework. Save.
21. Do a Save As to make a second copy called pictures.html and a third copy
called links.html and use the File/Open to have all three pages open. Look at
the very top line of the window for the file name.
22. To put the text on the first page, copy and paste from your previously saved
text document into the cell below the heading. Highlight the headings and
make them all “Heading 2” and highlight the rest and make it into
“Paragraph”. Save.
23. We can insert a horizontal dividing line by using the Insert Menu or the
H.Line Icon.
You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; killcare@gmail.com
Page 3 of 5
24. Double clicking or Right clicking brings up a Dialogue Box which can be used
to change the width, height, shading and alignment of the line.
25. If we want feedback from visitors, we need to supply a suitable email link. In
the paragraph mode, type the words you want to appear eg To email me, click
here. Highlight the link words, and click on the Link button. Enter your email
address in the box, tick the box for “The above is an email address”, then OK.
Save and view. In Source mode, you should see something like
mailto:whales@hotmail.com. When you click on the link using your browser,
you should get an empty send email page.
26. The page needs a little decoration. We can insert an image into the page by
putting the cursor on the start of the desired line of text. Click on the Image
Icon to obtain the Image Properties pop-up box. Under Location, use the
Choose File to find your previously saved image and put a label in the
Alternate Text box. Under Dimensions, select Custom Size and Constrain
(keeps ratio). Change the Width to 200 pixels (Specify size means speedier
viewing, the size can be modified later). Under Appearance, use the Align
Text to Image to Wrap to the Right (or left) Spacing and Border can be
modified later. OK. A Double (or Right) click on the image gives the Image
Properties box so that modifications can be made. NOTE, the image can be
dragged by mouse to different parts of the text. (it will keep its Left/Right text
alignment)
27. The page is now so long that we have scrolled off the bottom of the page. To
make it easy to return to the top of the page we need to put in an Anchor. We
use jump point links within the site (or named anchors).
28. Firstly you set the named anchor or target, then you link to it as we did links
before. So use the mouse to highlight your heading text and then click on the
Anchor button. In the Name box, change this to TOP. This is now the anchor
point. You could use any word for top. Then, at the bottom of the page, in a
new paragraph type your sentence eg. To go to the top of the page, click here.
Use the mouse to highlight “click here” and then click on the Link button. In
the pull down menu, find your anchor eg #top, click on it and then OK. You
could use the same method to lay anchors in other parts of the page. Anchors
are commonly used with an index at the top, leading to the appropriate sub
heading and content further down a long Web page. (NOTE, each section
should also have an anchor leading back to the top.)
29. Now for the second page. We put in some introductory explanatory text and a
2 X 2 table by using the Insert Menu to insert a Table by the Quickly method.
We Insert each of the gif thumbprints into a cell, keeping each with roughly
the same dimensions, especially height. In turn, then Link each thumbprint to
its full version.
30. Now for the third page. Making links to external Web sites is easy, however
you must get the full correct address, so again, many authors use the cut and
paste method to avoid mistakes. A little preparation with your browser and a
text page can make the process easier. Type in the appropriate text, select the
desired key link words, click on the Link Icon and put the FULL address
(including the html:// bit) into the Choose File box. OK.
31. Although the majority (about 60%) of people using the net use Microsoft
Internet explorer for their browser, there are other browsers being used and
each can have a different effect on your Web page.
You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; killcare@gmail.com
Page 4 of 5
32. It is good practice to check the appearance of your Web site now on two or
three other browsers such as Netscape, Mozilla Firefox and Opera. Use the
Right mouse button to Open With.
33. There is another useful tool on Nvu called File Manager. It is used to keep
track of your files and hosting. The site manager allows you to navigate your
site or between sites easily. It can deal with sites that are on your computer (or
after completion, those that have been uploaded to a hosting remote
server).Site Manager provides a directory tree view of a site similar to the
view with Windows Explorer. It however lists only directories which you have
specifically set up as „Sites‟. You can set up many sites; they appear in Site
Manager irrespective of where they appear in a normal directory tree.
34. To open Site Manager (a) use the View Menu and select Show/Hide then Site
Manager – (NOTE, you can use the F9 Function key as a toggle to turn Site
Manager On/OFF).(b) To set up a new site, click „Edit Sites‟. This opens the
„Publish Settings‟ window. (c) Choose a convenient name for the site such as
“Humpback Whales” and enter it in the box „Site Name‟. (d) In the
„Publishing server‟ area click „Select directory‟ and browse to the folder
where the site is located, select the folder and OK. The box should read
something like “file:///C:/Documents .... “ Leave the other boxes empty at this
stage.
35. Back in Site Manager in the column headed „Name‟ the new site should be
listed and can be expanded to show its contents. Double-click any site to
expand it. At the top of the Site Manager window a drop down box allows you
to view all files or to select to view only html files or image. For files it is
possible to display the file size and modified date. To select or de-select these
options, in the column heading, to the right of name, click the icon and select
the options required. You may have to widen the site manager window to view
all the details. Double click on any html file to load it directly to the page area
for editing. It is possible to rename and delete files and to create folders by
using the buttons at the top of the Site Manager window.
36. To actually now move your Web design onto the net you need a host site (free
or paid) and a means of moving the file (File Transfer Protocol or FTP). Use
the Site Manager to set up the parameters and then the Publish Icon to upload
each Web page in turn with its related images. NOTE, be careful with the
various settings.
37. Web sites can also link to other files eg MS WORD documents, text
documents and PDF files. NVU does not transfer all files under Publish, so
you sometimes need to use an independent FTP program such as FTP
Commander. Likewise, not all free host sites will accept all types of attached
files.
38. There are a number of other features that are used in HTML that can improve
and enhance your site. These include Style Sheets (CSS), Meta Tags, Java,
Feedback Forms, Comments, reading source Code, etc.
39. Keep it small, your home/index page should load in less than 30 seconds
(better if 10-15 seconds) on a slow modem. The website at
www.websiteoptimization.com/services/analyze/ will analyse your Web pages
and give you feedback on its size and loading time. One or two graphics per
page. Try to keep images to 40KB each.
You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; killcare@gmail.com
Page 5 of 5
