Because accessing a document on the web is very much like accessing a document from your hard drive or ZIP disk, so we will create exactly same file structure on our computer hard drive as on our Web server. Then we can transfer the whole structure on to the web server. Let’s think our computer desktop as the public_html folder which is supposed to contain all of our HTML files. That means we need to create an image folder on the desktop to save all our image files referenced in our homepage. You can create a new folder by right-clicking your mouse. We also need to create a resume folder and a project folder. The resume folder should contains resume page, resume.pdf file, and resume.txt file; and the project folder will contains project page, and other two sub-directories.

Let’s put some pictures that you want to use on the homepage into the image folder. Here I have two pictures that I want to use on my homepage: rose.jpg and flower.jpg. I am going to put those pictures into my images folder on the desktop.
Then we will open up DreamWeaver to create a simple homepage first. We usually save homepage as “index.html”, and remember to save this file directly on the desktop. The reason that we save our homepage as “index.html” is that once you transfer your homepage onto the server, the URL will be www.ischool.utexas.edu/~yourusername. This is my simple homepage. Then I will insert one picture into this homepage from images folder on the desktop. Since this homepage will provide links to my resume page and my class project page, so we will put those links on it. We will learn how to make these links later on. Right now, we are going to create other two pages-resume page and class project page first.

Let’s save this homepage again, then we will go to file, and create a new one for resume page. Let’s save this new page as “resume.html” into resume folder on the desktop. On the resume page, remember, we discussed before: on this page we should provide a link that goes back to the homepage. So let’s put a link to homepage first. Then we also need to provide links to other formats of our resume: link to PDF format and link to straight text format. Then I will teach you how to make those links later on. But so far we just created a very simple resume page and save it.

We also need to create another Webpage which is class project page. Let’s go to file > new > create new page. This should be my class project page. Same as resume webpage: we need to provide link back to homepage. Let’s save project page also as “index.html”. Because we will save this page into different directory from homepage (index.html), so we will not get confused. We will save this project page under projects directory on the desktop.

Okay, so far we have created three pages: one is our homepage which we call “index.html”. It is directly on the desktop. And we have our project page which has the same name as our homepage, but we saved it under the different sub-directory. Then we will learn how to make those links activated.

Let’s go back to homepage and learn to make links to resume page and project page. Web designers usually use relative links when linking to other sections of the Web site that are under their control, and absolute links when they cannot control the site. For example, the relative link from your homepage to the resume page will be resume/resume.html; the absolute link to our iSchool homepage is http://www.ischool.utexas.edu/
Here we will mainly focus on making relative links to WebPages designed by user self. To link to the folders from the main page (homepage in our case), the relative link would look like this: "foldername/filename ". For example, the link to resume page from homepage should read “resume/resume.html”. Same as project page: if we want to provide a link from homepage to project page, the link would read “projects/index.html”. Let’s save this page and check if these links have been activated, we close Dreamweaver file and open up our web page on the desktop. This link should open up our resume page. If you click on it, it goes to the resume page which is resume.html. We go back to check the link to project page. Click on the link, it opens up project page. Those two links are the relative links. We also made one absolute link which should open up our iSchool homepage. If we click on it, it does.
So far, we have learned how to make relative link from homepage, so the relative link should look like “foldername/filename”. Now we have resume page and project page and we will learn how to make linking outside a folder, for example, to make link from resume or project page to main page (homepage: index.html), your link would look like this: ../index.html. In this example, we want to make a link to the homepage. Because homepage is located in the upper level of our resume page, so if you want to provide a link on your resume page to the homepage, the link should read “../index.html”.
Notice the "../" That's a code that tells the browser it should get out of your folder one time and then access files in the folder where your folder is located. Every time you type "../" you're telling the browser to go outside one folder. This time we type “../index.html”, we tell the browser to go outside our resume sub-directory to look for a file called “index.html”. Let’s check if it works. Save this page, then open up resume page in a browser. If you click on the link to homepage, it goes back to the homepage.

Now we will learn how to make a link from project page to homepage. Same as resume page: it should read “../index.html”, because we are linking file from outside folder. Let’s save this project page and open it up in a browser and see if the link opens up homepage. Everything seems working perfectly.
So far we have learned how to link to a folder from main page and how to make linking outside a folder. If you want to link files that are located in same directory, link is simply the file name. For example, if you want to link from resume homepage to resume.pdf file, and resume.txt, the links should read “resume.pdf ” and “resume.txt”, because the resume page, resume.pdf file, and resume.txt file are all in the same directory - resume directory. Let’s open up resume directory on the desktop. This is the resume page we just created. You can create resume.pdf and resume.txt file by converting your word resume file into PDF and plain text file. Let me open up resume page in Dreamweaver, then we will learn how to make link to these different formats of our resume. As I said, the link is just the file name, because those three files are located in same directory. So the link to resume.pdf is just “resume.pdf”, and link to text format is “resume.txt”. Let’s save this page and open up to check if those links have been activated. Supposedly, if I click on “PDF Format”, it should open up PDF format of my resume. It seems working. Let’s try the text format. So far we have learned how to link files in same directory.