Web Page Design & Intro to Web Page Development

Linking files

The power of the Web clearly emanates from the linking of files. Web pages normally contain two types of links, internal and external. Although fundamentally the same, they require a slightly different procedure.

Internal links

One of the first links you will likely want to make is between two different pages within your site-an internal link. Below is a simple Home page with the text Link to Page 1. Page 1 has the file name page1.htm. Therefore, to link to the page, I highlight the text I want linked and type page1.htm in the Link field of the property inspector.

Since I didn't specify an exact location for the page1.htm it is an example of a relative link. In other words, the description of where page1.htm is located is dependent upon, or relative to the referring page. In this example, the file is assumed to be in the same folder as the referring page. In contrast, an absolute link would have read something like:

C:\MyDocuments\Dreamweaver\page1.htm

This reference is referring to the file location on the C drive on my computer - not a good thing if I want people to be able to view these pages on the Web. If someone other than me attempts to select the link, their Web browser will look for the file on their C drive, and of course, will not find it. This is why a relative link is almost always preferable over an absolute link-especially with links to files within your Web site.

External links

You will also frequently want to link to files or Web sites that are external to your own site. In the example pictured below, I have set up a link to the Yahoo Web site. Note that I used the entire URL, including the http://, otherwise, your users will receive a 'page not found' error. The process is otherwise the same as the links to internal files.

Adding Images

Adding multimedia elements such as images to Web pages can greatly enhance your site. To insert an image, select Insert-Image from the Dreamweaver menu. You will next need to direct the program to the appropriate image. Generally you will want to have the image stored in the same folder as the original or a folder below (i.e., within) entitled images.

Web browsers are finicky about the kinds of images that can be displayed. The only two safe image formats are the Graphic Interchange Format (GIF) and the Joint Photographic Experts Group format (JPEG). These are identified by the extensions .gif, .jpg or .jpeg. If you have images saved in other formats, save the file as a gif or jpeg in any photo-editing program.

Note that when you insert or select an image, your property inspector changes to reflect the new type of object (see picture below). The property inspector will allow you to manipulate the alignment, what the image links to (i.e., an internal or external hyperlink) and the Alt Tag. The Alt tag is important because that is the alternative text that is used to represent your image. That text will appear if the browser can't find the image, when the user points to the image and a screen reader will use this text to describe the page to users with visual impairments.

Creating an E-mail link

To create a link so that people visiting your site can e-mail you, go to Insert, Email Link. The following screen will appear. Type in what text you want the link to read, and then the correct e-mail address. Click OK, and the link will appear.

Previous    |    Next