Using the free iweb webpage templates

(1)

Using the free iWeb webpage templates

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.

(2)

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.

(3)

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.

(4)

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

(5)

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

(6)

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

Using the free iweb webpage templates