updated 11/18/11

This assignment is the first step toward the creation of a simple electronic portfolio, the final requirement for this course. Here is an example of one made for UGS 302, using IWeb. Your first goal is to make the first two links of your website, the links for projects one and two. It is very important that you learn how to do this as you go along, rather than wait until the end of the semester. This initial website will be uploaded to the course website and your project will then be "published" without your name. So you will want everything to work and want the result to look as good as possible.

FIRST OF ALL, return to WORD and REMOVE YOUR NAME AND ALL OTHER INFORMATION THAT WOULD IDENTIFY THE ESSAY AS YOURS, so that it can be published on the web anonymously, with your permission, of course.

In the following instructions, the places where most students make mistakes appear in red.

1. On your jump drive create a folder titled "website." Inside that folder create two more folders, one called "P1" and another called "P2."

2.Convert your project into web  (htm or html) files. If you have not written your project in a web-site-creation program such as Dreamweaver, iWeb, or Publisher you will need to convert your file(s) into web files, that is, "htm" or "html" files. Most students use Microsoft Word for word processing, so we will use that as our example. The version I will be using will be the 2008 version for Macs, so your version may differ. Also, I am going to assume that you will be using a jump drive for that makes all this much easier and they cost less than $10 usually.

2a. BEFORE YOU BEGIN, PUT THE CAPTIONS OF THE PICTURES IN EACH PROJECT INTO A LIST OF ILLUSTRATIONS AT THE END OF YOUR PROJECTS. Otherwise, Word will just probably mess them up when you save your projects as web pages. So, your images should now be "naked," that is, with no captions, footnotes, or endnotes.

2b. In WORD open the file you used to print the hard copy of project one (the one with the color pictures inserted in the text). When you have the file open, select the ÒSave as Web PageÓ option in Word.  (Eventually, you will save it to your jump drive.) (If your word processing program does not have this option, see the instructor.) Do NOT choose the option "Single File Web Page" which results in an "mht" rathe than an "htm" file.

2b1. If you  have chosen the right option, at the top of the option choice page you will see your project name now followed by "htm." Make sure your file ends in "htm -- "not "mht" or "doc" or "wps." (You can not just type "htm" at the end of the file name because that alone won't make the file accessible to the web.) Also, if the resulting file name is long or contains spaces, shorten it. Generally, make file names and folder names as brief as possible to avoid transcription errors later. For example, P1A.doc, rather than Project One about .......... doc. At the next stage then you will have P1A.htm rather than Project One about ..........

2b2. At the bottom of the page in the format options make sure it says "Web Page (htm)" and make sure to check "Save entire file into HTML" below the format option.

3. Return to top of the option choice page and notice that to the right of the new title of the project, now ending in .htm, there is a selection icon or whatever that lets you decide where to save the file. Choose that icon and specify that the file is to be saved onto the jump drive in the folder titled "P1" which is inside the folder titled "website" on the jump drive.

3a. Now select the "Save" option in the lower right hand corner of the option choice page.

4. Repeat this process for project two, substituting "project two" where it says "project one" above.

5. Check the "website" folder on your jump drive. Inside the "P1" folder there should be the P1 htm file and another folder containing the images for P1. (Inside the P2 folder there should be the P2 htm file and probably another folder containing the images for P2.)

6. Now is the time to switch to DREAMWEAVER, iWeb, or Publisher or some such program if possible and you have the time to learn how to use it. DREAMWEAVER and iWeb are available in Par 102 for your use.

If you don't use DREAMWEAVER or some such program, return to Microsoft Word, and open a new document and SAVE IT TO THE WEBSITE FOLDER ON YOUR JUMP DRIVE as "index." [Do not use any other name for this file, not "home file," or "my file" or whatever.]

(DO NOT CAPITALIZE "index")

Now check your website folder on your jump drive. Is the "index" file in there along with, but outside of the P1 and P2 folders? In other words, inside the "website" folder there should be three items: the index file, the P1 folder, and the P2 folder. If not, start over until all three are there.  If so, proceed as follows.

6a. In the blank space of your open "index" Word document type the words "Project One" one one line and "Project Two" on the next.

6b. Select the words "Project One" and then go to "Insert" above and scroll down to "Hyperlink"

6c. Choose "Document" rather than "Web Page" as the source of the link. Now you should see the option "file to link to." Go to "Select" and find your project-one htm file inside the Project One folder on your jump drive. "Select" that one file. 

This should put the actual file name of the web page version of your project as the link for the hyperlink. You are now writing in a foreign language, computer code, not in English, and there is no forgiveness. THE FILE NAME MUST BE EXACTLY CORRECT, that is, "project 1.htm" (for example), not "Project 1.htm" nor "project1.htm" or any other variant. Make sure there is nothing in front of the name of the file, i.e. nothing like "C:/local drive/......." If there is any such nonsense erase all but the name of the project file if you can. If you can't, start over making sure the new index file is created inside the folder "website" on the jump drive.

6d. Go back to your open document in Word and do the same for the words "Project Two" only this time, of course, choosing the P2 document title ending in htm.

7. Now that the phrases "Project One" and "Project Two" have become hyperlinks you can save your "index" document "As Web Page" as follows.

7a. Select the ÒSave as Web PageÓ option again in Word. At the top of the option choice page you will see your page now called "index.htm." 

7b. At the bottom of the page in the format options make sure it says "Web Page (htm)" and make sure to check "Save entire file into HTML" below the format option.

7c. Return to top of the option choice page and notice the title of the file is "index.htm" To make this work on a Mac server, such as the at U.T., you need to add an "l" to make "index.html" Once you have made that change, notice that to the right of the "index.html" there is a selection icon or whatever that lets you decide where to save the file. Choose that icon and specify that the file is to be saved on the jump drive [not on the desktop] in the folder titled titled "website." (Do not put it in either the P1 or P2 folders.)

7d. Now select the "Save" option in the lower right hand corner of the option choice page.

8. Check the "website" folder on your jump drive again. Inside it you should have three items: a file called index.html, the "P1" folder, and the "P2" folder. Click on the index.html file. Your page should appear with the two hyperlinks "P1" and "P2." (You should not see any other files.)  Click on each hyperlink and the relevant project should open immediately as a web page with pictures. If you click on the hyperlink and the project folder comes up instead of the project itself, or a project file with an htm ending, or anything else goes wrong, retrace the steps above more carefully and/or get help.*

How index files work. Index files are the preferred way to write your portfolio or website. The internet is set up so that when a folder (directory) is selected, the internet automatically looks for a file named "index.html". When such a file is found, it is automatically activated. When you revise an index file, I just upload the new one onto the old one and the old one is replaced with the new one. So your main file is index.htm and it links to various folders each containing their own index.htm files. As long as you keep these index files in their respective folders there should be no problem confusing them. So don't start adding numbers or letters to your index files, as in indexa.htm or index2.htm. The internet does not recognize these files automatically and the more times you do this the more confusing your website becomes. Do not rename your index file as anything other than "index.html" In other words, we do not want the first file to be "Welcome.html" or "Home.html" or anything but "index.html"!

 

9. Finally, the jump drive must be properly labeled with some kind of indelible ink. Then you need to put it in a baggie of some type with your name on the outside. If you don't do this, it may well get lost and thus you will lose all your work and what may be your once chance at immortality.

10. FINAL CHECK. THIS WEBSITE WILL NOT BE ACCEPTED IF

11. If, after the instructor uploads your "website" folder to the course website and the hyperlinks do not work, you will have to do this all over again, OR you can change the hyperlinks so that they have what are called "hard" as opposed to "relative" links.

To see what the "hard" link looks like, open your browser, and go to your course website and look at the URLs that appear at the top of the page. Now back to your index file. Change the code for, say, P1, to one with a long URL. In the case of, say, a course called "603A11," where the website folder is "w," "Spider's" website URL would be

http://www.cwrl.utexas.edu/~bump/603A11/w/Spider/Website/

When we go there the invisible index file automatically puts up two choices, one for Project One and one for Project Two. Selecting Project One we get this URL

http://www.cwrl.utexas.edu/~bump/603A11/w/Spider/Website/P1/P1.htm

Now you see that the "hard" hyperlink address is

http://www.cwrl.utexas.edu/~bump/603A11/w/

followed by the name on your folder at this website as in

http://www.cwrl.utexas.edu/~bump/603A11/w/Spider/

You replace your hyperlinks that do not work with this URL, adding on the equivalent of your name, as it appears in the directory, and "website" if that is the folder name in your directory. So the result would be something like

http://www.cwrl.utexas.edu/~bump/603A11/w/[your name here]/[name of your website folder]/

 

Return to Bump Home Page