Casa Basa ~ blending art with technology

Linking

Previously, we worked through the creation of our root folder, home page (index.html) and creation of our Site Map. The root folder holds all of our information, and should be called by your last name. Within that folder, we created another folder to hold all of our graphics in one place.On the first level of the root folder, we also opened our first document, index.html. Index.html became our home page.

Through the Site drop down menu, we can store several different Sites that we may be working on. For class, you will be working on two different Sites. One folder will contain all the information for your personal site and is called by your last name. The other folder contains the assigned labs from class. The Site drop down menu allows you to choose which site you wish to work on.

When working on your personal web page, you will more than likely produce a page that has more text and graphics than a single view screen will show. That means that the viewer will need to scroll to see all of the contents. To accommodate your viewer (you will want them to visit your site again!), it is considerate if you provide links to "Return To The Top" if the page is quite long. You may also wish to provide links to specific areas of interest within the page. A good instance of this may be a top portion of your page that states all the wonderful items of interest found further down the page, with links to those locations. By doing this, you are informing your viewer of what is not visible to them in the hopes of enticing them to "read further". An example of this is my Syllabus, which has a link to my Study Schedule {smile}.

The HTML tag for creating a hypertext link is called an anchor tag. An anchor tag that allows you to jump to a specific location within a document is called a Named Anchor Link.

Linking to a named anchor

Named anchors set position placemarkers within your page. You use a named anchor to link to a particular area in your current document. They're used to jump to a specific topic or to the top of a document, quickly allowing the viewer access to selected areas.

Creating a link to a named anchor is a two-step process. First, create a named anchor, then create a link to the named anchor. Note: Named anchors are case sensitive.

To create a named anchor:

1. In the Document window, place your cursor where you want the named anchor
2. Do one of the following:
   • Choose Insert > Named Anchor
   • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh)
   • Choose the Invisibles panel of the Objects palette and click the Anchor button
3. In the Anchor Name field of the Insert Named Anchor dialog box, type a name for the anchor. Keep the name short and sweet, and use all small letters.

To link to a named anchor:

1. In the Document window, select text or an image to create a link from.
2. In the Link field of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link to an anchor named "top" in the current document, type #top.

To link to a named anchor using the point-to-file method:

1. Select text or an image in the Document window
2. Then do one of the following:
   • Click the point-to-file icon to the right of the Link field in the Property inspector and drag it to the anchor you want to link to.
   • Shift-click in the Document window and drag to the anchor you want to link to.

Linking a graphic

1. Click on the graphic image that you want to link to either another page (.html) or to a bigger version of the image (.jpg or .gif).
2. In the Properties Inspector, click the browse button (looks like folders) that is next to the Link: box.
3. Choose the .html or the graphic that you want to link to once the dialog box appears and click Open.
4. The link should now appear in the Link: box in the Properties Inspector

Linking with text

1. Do the same as above, except click and drag over the words that will be the hypertext link
2. In the Properties Inspector, click the browse button then choose the .html page you want to link to.  Click Open.
3. The link will now appear in the Link: box in the Properties Inspector

Creating an e-mail link

An e-mail link opens a new message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the To field will have the address specified in the link.

To create an e-mail link using the Insert E-Mail Link command:

1. In the Document window, position the cursor where you want the link or select the text that you want as the e-mail link. Then do one of the following:
   • Choose Insert > E-Mail Link
   • Use the Obejcts Palette's Common panel and select the E-Mail Link
2. In the Text field of the Insert E-Mail Link dialog box, type or edit the text to appear in the document as an e-mail link.
3. In the E-Mail field, type the e-mail address mail should be addressed to.
4. Press OK.

To create an e-mail link using the Property Inspector:

1. Select text or an image in the Document window.
2. In the Link field of the Property Inspector, type mailto: followed by an e-mail address (all one word).

Creating an external link

When creating a link to another Web site other than your own, you are creating an external link, and are dealing with absolute paths. Absolute paths provide a complete URL (Uniform Resource Locator) of the linked Web site. Each Web page has a unique address, so when providing a link to a page outside of your own site, you would provide all the details of that page's URL, including the protocol to use (usually http:// for Web pages).

You must use an absolute path to link to a document on another server.

When you are linking to an outside Web page, generally you would have text that is hyperlinked to the URL of that page. For example, I have mentioned on my syllabus that a good HTML tutorial can be found at www.webmonkey.com. You could reach that address either through the provided link or by File > Open in your browser and typing that information. But actually, it is pointing to the more complete URL address, which is http://hotwired.lycos.com/webmonkey/. Your browser, too, points you to the correct URL address.

To create an External link:

1. In the Document window, select the text or image that you want as the external link. Then in the Properties Inspector, type the URL in the Link text box
2. Hit enter or click outside of the box

Managing links

To turn on link management in Dreamweaver:

1. Choose Edit > Preferences, then select General
2. Select Prompt from the Update Links pop-up menu and click OK.

If you choose Always, Dreamweaver will automatically update all links to and from a selected document whenever you move or rename it. If you choose Prompt, then a dialogue box is brought up that gives you the option by listing files affected by your change.

Return to top

Image Maps

In general, an image map is a single graphic that can be used to create links to several sections of your page. Different areas of the image can each have different URL's.

To create an image map, you will need a graphic that is strong enough to be divided into sections.

• Select the image that will be divided
• The Properties Inspecter will reflect changes that can be done on a graphic
• In the Map field of the Properties Inspector, name your image map something relevant
• Next to the Map field, choose a Hotspot Tool to draw around the appropriate section to define that link
• A light blue box will appear around the image and your options will change in the Properties Inspector.
• Note that you will either need to remove the pound sign (#) or name the link so that viewers will not be confused
• With the light blue area selected, you can then use one of the linking methods to specify where on the page that section of the graphic will take you. Since we are only doing a single page, it would probably be easiest to use the Point-to-File to create the link.
• Since there will be several links within the image, it would be very, very wise to use the Alt tag to describe the link.
• Hit Enter/Return to accept your work.

Alt tags

Alt tags give information about the image should the viewer have their graphics turned off, or if they are using a voice or text program that will not "read" the images. Using Alt tags is a good way to let your audience know what is "missing". Alt tags are created using the Properties Inspector. Information can contain download time of the picture if it is available in a larger file version, or can describe what the picture is of, or what pressing its link will do (like take you to their home page or email.)