5. More Dreamweaver


		Authoring

	Week 5 of 5



	Table of Contents
	1. Image Maps 2. Relative vs. Absolute Addressing 3. Named Anchors

1. Image Maps

Add an image to your Web page.
Click on the image to highlight it.
From the properties menu, click on one of the three hotspot drawing tools - rectangle, circle, or polygon.
Draw the shape you want on your image.
In the properties window for the hotspot, type in or browse to the page that hotspot should link to.
Continue adding hotspots until your map is complete.
Click on the arrow icon to edit other properties of the image.
Set up different alt text depending upon where your readers are, by adding alt text to the hotspots.
Preview your image map in a browser to make sure it works correctly.

See:

http://www.entheosweb.com/website_design/image_maps.asp

2. Relative vs. Absolute Addressing

What is an absolute URL?

A URL defines the location of an object. When an URL is absolute, it defines unambiguously where the object is located. For example, http://www.microsoft.com/FrontPage/default.htm is the exact location of the welcome page for Microsoft FrontPage.

The object, default.htm, is stored in the folder or subweb on the web server, www.microsoft.com. A disk-based web that contains your webs on your hard drive might have a base absolute URL such as file:///C:/My Documents/My Webs or C:/WINNT/Profiles/your logon alias/Personal/My Webs/index.htm.

As Web sites are updated and the structure of a web evolves, documents can often be moved from one location to another in a web. If you're using a relative address, you may break some links. For example, if you have a document that has a hyperlink to an object, you can use an absolute URL to insure that the hyperlink always refers to that object.

For example, a document such as file:///C:/My Documents/My Webs/mydocument.htm, may contain an absolute URL that refers to the welcome page, http://www.microsoft.com/FrontPage/default.htm. If the document, default.htm, is moved to another location, the absolute URL for the document will always refer to the object on the web server at www.microsoft.com in the subweb.

If the URL for the hyperlink to default.htm is a relative address, the link could be broken if mydocument.htm is moved to a different subweb or main web.

What is a relative URL?

Instead of specifying every piece of a URL that fully defines how to find an object, you can abbreviate a URL to make it relative to a current location. Relative URLs are typically used when creating a web site in which the pages in it refer to other pages on the site. A page such as file:///C:/My Documents/My Webs/mydocument.htm can have a relative URL to newdocument.htm or to ../My Webs2/default.htm.

In these two cases, the referred addresses for these files are file:///C:/My Documents/My Webs/newdocument.htm and file:///C:/My Documents/My Webs2/default.htm. Notice that the full web server or explicit directory isn't specified, the location is based on where the document is located.

Relative URLs are very useful, particularly when constructing a site in one place, and then publishing it to another place. For example, you might not want to specify a server name while authoring a web page, because the server name will change when the web is published.

How can an absolute URL be made relative?

URLs can be made relative either to a server or to a page. In order to make a URL relative to a folder or to a web, you need to make the URL relative either to a server or to a page, because Dreamweaver will treat the URL as if it were being made relative to a page in that folder or web. Each relative URL, combined with its base URL fully specifies where the object is located. When you have an absolute address such as http://www.microsoft.com/myweb, with an image file called MyPicture.gif residing in the images folder on the web, you can create a relative URL for that address by deciding whether the relative address will refer to a server or a page.

For a server relative URL, youd use myweb/images/MyPicture.gif with the server name as the base for the relative URL, this relative address fully defines the location of the object.

For a page relative URL, youd use images/MyPicture.gif with theserver name and the web name as the base for the relative URL, this relative address fully defines the location of the object. For a folder relative URL, youd use MyPicture.gif with the server name, web name, and folder name as the base for the relative URL, this relative address fully defines the location of the object. A folder relative URL can also be specified from a different folderfor example, ../images/MyPicture.gif could be used if the referring document was in another top level folder on the same web and server.

The .. is the notation used to indicate up one folder level from the current URL address.

Programmatic Access to Relative URLs

Once you've decided whether to use server, web, or folder relative URLs, you can determine which objects to use. For server or web relative URLs, you would be working with methods related to the Web object. For folder relative URLs, you would be working with methods related to the WebFolder object.

Converting relative and absolute URLs

Recommended use for Dreamweaver is absolute addressing. However, once you have specified relative URL within Dreamweaver, you can use the MakeAbs method to convert it into an absolute URL. Similarly, if you have an absolute URL, and you want to insert a reference into a document as a relative URL, you can use MakeRel to convert the address to a relative address. You can also use the MakeAbs and MakeRel methods to convert a hyperlink for a Web, WebFolder, WebFile, NavigationNode, or IHTMLDocument2 object.

3. Named Anchors

Named Anchors allow you to just to a later point in a webpage, e.g. from a Table of contents, and they are created as follows;

We will call the point we are linking from, the LINKFROM location and where we are jumping to the LINKTO location.

To create the LINKTO location

Place your cursor in front of the location you wish to jump to. This is where the first link will jump to when clicked

Insert > Named Anchor

or, click the Named Anchor icon on the Insert Bar

Enter a name for the anchor in the "Insert Named Anchor" dialog window, e.g. fred

Continue adding new anchors for each of the steps or areas in your HTML page

To create the LINKFROM location

Once you've inserted your anchors, you're ready to create the links

Select the text or image to which you want to assign the link.

Highlight the first text link by clicking and dragging to select the entire word

Type in '#' followed by the name you gave to the Named Anchor, e.g. #fred

also, see;