Download Using the free iWeb webpage templates Overview Setup

Using the free iWeb webpage templates
Table of Contents:
Overview............................................................................................................................. 1
Setup ................................................................................................................................... 1
How to download................................................................................................................ 2
How to extract the template files from the .zip file ............................................................ 2
Programs to use................................................................................................................... 3
Rules to follow.................................................................................................................... 3
How to manipulate your web pages.................................................................................... 4
NVU layout..................................................................................................................... 4
Manipulating a web page template ................................................................................. 4
Saving your web page..................................................................................................... 5
How to upload..................................................................................................................... 5
More information ................................................................................................................ 6
Who to Contact ................................................................................................................... 6
Overview
This document contains the instructions on how to use the free webpage templates
located at the C&NS faculty training webpage:
http://www.fairfield.edu/cns_webtemplates.html
You can also view the available online video tutorials that visually take you through the
process outlined in this document, located at:
http://www.fairfield.edu/cns_webtemp_videos.html
These instructions are for both PC and Mac users. You will see “PC” and “Mac” outline
headings to distinguish between the two types of instructions for each type of computer.
Setup
Before we begin the web page creation process, we first must create a folder in which
you will save your webpage and the associated templates.
PC: The place to store you web page will be in the “My Documents” folder.
1. Open your “My Documents” folder from your Desktop or Start Menu.
1
2. From the menu bar, choose File>New>Folder.
3. A new folder will appear with the name highlighted in blue. Simply type the
name: “my website” and press the “Enter” key.
Mac: The place to store your web page will be in the “Sites” folder located in your
Home folder. Your Home folder is designated by the username you use to login to your
computer and it has a house icon to represent it.
1. Open a new “Finder” window. From the “Dock,” click on the smiley face icon all
the way to the left of the “Dock” to open a new “Finder” window.
2. Select your home folder on the left side of the “Finder” window.
3. Then select the “Sites” folder. Double or single click to go inside your “Sites”
folder.
4. Delete the existing “index.html” and “images” folder that are in the “Sites” folder.
How to download
1. Navigate to the web address http://www.fairfield.edu/cns_webtemplates.html
2. When on the “Webpage Templates” page, navigate to the available templates by
clicking on their respective links under the “Table of Contents.”
3. Within each template, you will have 8 options/links. Select the option/link you
wish to download.
PC:
1. When you select the link, you will be prompted to “Save” or “Open” a “.zip” file
respective to the name of the link in which you clicked.
2. Click the “Save” button.
3. Navigate to the “my website” folder in your “My Documents” folder. Click the
“Save” button.
4. Click the “Close” button to the download dialog that appears (if any).
Mac:
1. When you select the link, you will be prompted to “Open with” or “Save to disk”
a “.zip” file respective to the name of the link in which you clicked.
2. Select the “Save to Disk” option and click “OK.”
3. The “.zip” file will be downloaded to your desktop. Close the “Downloads”
dialog if there is any.
4. Move the “.zip” file to the “Sites” folder in your Home folder.
How to extract the template files from the .zip file
PC:
1. Inside of your “my website” folder, double-click on the “.zip” file.
2. If you have WinZip installed on your computer, the file will open with WinZip.
2
WinZip users:
1. Select the large “Extract” button in the WinZip toolbar.
2. In the “Extract to:” area, navigate to your “my website” folder. Click the “Extract”
button.
3. After the extraction is done, close the WinZip window.
4. Navigate to your “my website” folder and you will now notice an “index.html” and a
folder with a title related to the “.zip” file.
5. Double-click the “index.html” file to view your new webpage template.
Non WinZip users:
1. Double-click on the folder to open it.
2. You will see an “index.html” file and a folder with a title related to the “.zip” file.
3. Copy and paste both the “index.html” file and the folder to directly inside the “my
website” folder. So when done, you should have the “.zip” file, the “index.html” file
and the related folder in your “my website” folder.
4. Double-click the “index.html” file to view your new webpage template.
Mac:
1. Inside of your “Sites” folder, double-click on the “.zip” file.
2. A new folder will be created in the “Sites” folder with the name of the “.zip” file.
3. Open the new folder you will now notice an “index.html” and a folder with a title
related to the “.zip” file.
4. Double-click the “index.html” file to view your new webpage template.
Programs to use
Now that you have your template files on your computer, you are going to need a web
page editing program to manipulate the web pages. The program that we are going to use
for web page editing in this documentation is NVU. NVU is a free/easy to use web page
editing program that can be downloaded from: http://nvudev.com/index.php. It is
available for PC and Mac so the instructions on how to manipulate the web pages will be
the same for both computers. It also supports more web editing features than Netscape
Composer, which is currently discontinued along with Microsoft FrontPage which will
also be discontinued in the near future. In depth instructions on how to use NVU can be
found at: http://www.nvudev.org/guide/pdf/nvuug10r1.pdf
Rules to follow
When creating web pages, there are certain rules to follow to ensure you are creating your
web pages correctly.
1. Always keep the “index.html” and its associated folder together in the same
folder.
3
2. Any content such as images, audio, video, Microsoft Office documents, pdf’s etc.
that will be used with your website will be placed inside the folder that
accompanied the “index.html” file.
3. If you are creating a website with multiple pages, you can either use one
“index.html” template file for all of your pages or you can use multiple template
files for the other pages. Just remember, other templates require other
“index.html” files and other folders related to the “index.html” files.
4. Your home web page or your main page file will always be named “index.html.”
If it is not this name, your web page will not work properly. It also must reside in
the main/root folder in your web space. It can not be in another folder.
5. When you upload your web page files to you web space, they have to reside in the
same folder structure as they are on your computer.
How to manipulate your web pages
After you have installed your web page editing software (NVU), you are now ready to
manipulate the template file (index.html). To do so:
1. Open NVU.
2. From the icon/picture toolbar, select the “Open” icon.
3. In the “Open html file” dialog, navigate to your “my website” folder on your PC
or your “Sites” folder on your Mac.
4. Select the “index.html” file and click the “Open” button. You will now see the
web page that is ready for editing.
NVU layout
You will notice at the bottom of the NVU window, four tabs: Normal, HTML Tags,
Source, and Preview. When you want to edit the web page, you will use the “Normal”
tab. If you know how to manipulate a web page by editing the HTML code, you can use
the “HTML Tags” or “Source” tabs. The “Preview” tab will show you how your web
page will look when it is uploaded to your site.
There are three toolbars at the top of the NVU window, all of which have the tools you
will be using to manipulate your web page. You can use the menu bar as well to find the
available tools in NVU.
Manipulating a web page template
Once you have opened the “index.html” file you can begin to manipulate the page. The
idea of a template is that you should only edit certain areas of the webpage while keeping
the main portions of the page intact. Pieces of a webpage template such as the
background, headers, footers, side bars, and the location of text boxes and images should
remain untouched. This will help you create your web page more quickly than if you
were starting from scratch. If you do not like the template you are working with, simply
download another one. Some trial and error testing may be required on your part.
4
So what can you edit? Many of the templates are simple in that they are only going to
have images and textboxes. So the places you will be manipulating will be text boxes
and the areas that contain images. You can find a text box by clicking on top of available
text to get the blinking cursor. If you have the blinking cursor, you can begin editing
text. You can add links and tables if you like as well. You can edit an image by clicking
on the image, and pressing the “Delete” key on your keyboard to get rid of it. You can
then insert a new image in the same place and resize it to fit your layout.
So the idea is to keep the existing layout and background setup and only edit the text and
the images on the page. However, if you are an advanced web editor, your can
manipulate any aspect of the page at your convenience.
Saving your web page
When you are finished creating your webpage, you need to save it. When you first save
your page in NVU, you will be asked to give it a title. This title will appear in the title
bar of the web browser it is displayed in. So make sure the title describes what is on your
page.
Next, you will give the actual page a name. When you give your page a name, please do
not use spaces in the name. Web pages are sensitive to file names. Use underscores or
hyphens instead. (Ex. course_outline.html) Also, keep the page names as short as
possible. Remember, your first/main page must be named “index.html.” Any other page
after that can be named anything else.
How to upload
When you are finished creating your web pages, you then need to upload them to your
web space. One option is to upload your files using the web interface located at the
following address: www.faculty.fairfield.edu/upload You then login using your web
account credentials. This option is ideal if you are uploading a minimal amount of files
at a time.
**If you need to upload entire folders to your account, it would be best if you use a FTP
program to do so.** Use the contact information below for assistance.
Instructions on how to upload files to your web space, please consult the following pdf:
http://www.fairfield.edu/documents/administration/Fac_web_over_http.pdf
Please consult the following pdf for more info about uploading files to faculty web space:
http://www.fairfield.edu/documents/administration/Faculty_web_handout.pdf
5
More information
For more information about creating web pages, please consult the following pdf:
http://www.fairfield.edu/documents/administration/Web_Pages_Using_NVU.pdf
Who to Contact
If you have any questions concerning the templates or web page creation, please contact
Jeff Potocki or Mary Kleps in C&NS at ext. 4069 or send an e-mail to
[email protected].
6