Starting off, you will need to have
the proper file structure. You will
create a folder labeled 'public_html'
Inside the 'public_html' folder, you
will create a folder for your images labeled 'images'
All of the Web pages will be a seperate
file. The first file in any site needs to be labeled 'index.html'
The other files will also need to be
saved in the 'public_html' folder.
NOTE: File names should
not contain upper case or spaces in the file name. You might want to
create the file structure prior to opening NVU.
Lets get to work
1) Open N-Vu – a blank document will be created. Set the title
of the document by going to the Format menu and selecting “Page
Title and Properties”.
Add a title and the other information is not necessary.
Page Title and Properties 1
|
|
Page Title and Properties 2
|
|
2) Save
the file using the extension ‘.html or .htm’. You do not
need to keep the same name for the file name as for the file. If this
is your first page, you should use “index.html or index.htm”
(why is this?). Other file names should be relatively short with only
letters and numbers (no upper case or spaces in your file name. For
spaces, you can use an underscore ‘_’ for spaces).
Save As
|
|
3) Add text
to your page by clicking, typing and formatting (just like a word processor).
To change the background color select Format and Page Colors and Background.
Select “Use custom colors” and click on the swatch for background.
Background Color
|
|
4) You can
add tables for more formatting options (e.g. two columns). Click on
the Table button (or Insert menu: Table…). Select the number of
rows and columns. If you want an invisible table, click on the Precisely
tab and set the Border to 0 (zero – table will show up as red
line which will not be visible in a browser).
Inserting Table(s)
|
|
Example of a Table
|
|
5) To create
a link, highlight the text or select an image and then select 'Insert'
and then 'Link...' Type the text to display the link and enter the URL
for the location to link to. For a link to another page in your site
only include the folder an file names (e.g. “nextpage.html”
a relative link). For a link to another site, include “http://”
and the full URL (and absolute link).
(creating
e-mail link, you will need to type in the text field, “mailto:tae.chang@csun.edu).
Creating Links
|
|
6) To add
a picture, you need to find a picture and save it as a separate file
(e.g. mypict.jpg). Put this picture into the appropriate location in
your website. This could be in the same location as your html page,
or in a folder called “images” or “graphics”.
Then select Insert menu: Image…. For Image Location click on Choose
File and select your image. You can set many properties of your image
using this window (you can recall this window by double-clicking on
any picture in NVu). To make your picture a hotlink, choose the Link
tab and enter a URL for the file to link to (either a relative or absolute
link).
Inserting an Image
|
|
7) Save your work (often) and take
a look at what it looks like in a browser by clicking on the Browse
button. When you make additional changes after viewing the page in a
browser, you will need to save your work and then go back to the browse
mode and hit either refresh or reload to see the changes.
Some Web sites that will be of assistance,
http://flamingtext.com/, http://www.animfactory.com/, http://www.google.com/ (and select the image
icon).
For this exersice, you will have…
A homepage saved as 'index.html'
Three types of hyperlinks, 1) linking
all of your pages, 2) to the world wide web and 3) email.
Hints: your file name should all be
in lower case and you should not leave a space between any file names. (examples of a good file names, “index,” “daily_notes,” “teaching_philosophy,”
and etc.)
Some recommendations to make your pages
look outstanding, font, background, tables and etc.
To make you page work, you will need to obtain a URL and then upload
your work to a Web host.
