Using the free iweb webpage templates

Transcription

1 Table of Contents: Using the free iweb webpage templates 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: You can also view the available online video tutorials that visually take you through the process outlined in this document, located at: 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 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 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

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: 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: 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

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 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

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: 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: Please consult the following pdf for more info about uploading files to faculty web space: 5

6 More information For more information about creating web pages, please consult the following 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 or send an to 6