Professor: Eduardo Navas (ean13@psu.edu)

 

Dreamweaver HTML Lecture #2

Links: There are two types of links: relative links and absolute links. Relative links are defined by hierarchy within the local files. Absolute links point to a universal address that is always accessible no matter where the page in which the link is embedded is archived.

An absolute link:

<a href = http://nytimes.com">nytimes</a>

A relative link:

<a href = "images/myPage.html">my page here</a>

Remember that anything that goes between the <a href> </a> tag is linkable. This includes images. An image will look as follows:

<a href = "http://nytimes.com"><img src = "images/myImage.jpg"></a>

Note that the image source in the above example is relative, while the link address is absolute.

When you need to go into a local folder to access a file, whether this one is an image or an html page, you will need to create a relative link as follows:

"folder/image.jpg" or "folder/myFile.html" these go within the "a href" tag as defined above.

If you need to access a folder outside of the folder you are currently in, you will use the following set up:

"../images/myImage.jpg" or "../folder/myFile.html"

Here is one example of a relative link coming out of a folder:

<a href = "..folder/myFile.html">my file</a>

To create a series of pages with links:

Create one page with all the links that will be included in your website. If you have five pages, then create five links. Place them in the area of your layout that you desire. Then for each page create a link:

<a href = "page1.html">page 1</a>
<a href = "page2.html">page 2</a>
<a href = "page3.html">page 3</a>
<a href = "page4.html">page 4</a>
<a href = "page5.html">page 5</a>

Remember that you can place these links in a table or a paragraph.

Once you create your first page and you are satisfied with it, "save as" and create pages 2 through 5. For each page, undo the respective link to hint that the user is at the page that is not clickable.

--------------

In Imageready:

Slice your initial image as you desire, including links. From the top menu, select Window > Slice. You will see options including "URL." Select it and enter the address of your page link: "page2.html" etc. Do this for all your links.

Once you have your page done, test it in the browser, and then "save as" four times to create pages 2 through 5. For each page make the desire changes to make it specific to your web design, i.e. replace an area of say "works" for an area that shows your "bio" etc.