Creating Links

1
Creating Links

• Lesson 3

2
Objectives

• Define how linking works.
• Choose objects to use as links.
• Display linked content in a new browser window.
• Create text and graphic links, and hotspots.
• Create named anchors to jump to a location within
  a Web page.

3
What is a link?

• One reason for the popularity of HTML is its
  ability to link to another document in the same
  or different site, or instantly jump to a
  specific location in the current document.
• This is done via hypertext links, also called
  hyperlinks.
• Text links on a page are usually displayed in a
  color and are underlined.
• Graphic links may have a colored border around
  them.
• An HTML link consists of two parts
• There is the text or the graphic that serves as
  the source or trigger for the link. The link is
  activated when the text or image is clicked.
• The path to the target file or an URL if the link
  target is a Web page.

4
Create a hypertext link using text

• To create a link to an external document
• Open a Dreamweaver MX document and select a word,
  sentence, or even a paragraph to use as the link.
• In the Property inspector, click the Folder icon
  next to the Link box.
• Locate the file that is the target of the link in
  the Select File dialog box.
• Select the file and click the OK button. The name
  of the file you selected will now appear in the
  Link box.

5
An example of a link to a Web page
This figure shows the Property inspector after a
link to a Web page has been defined. Note that
the link box contains the full URL to the file,
including the http// protocol statement. Note
also that, in this case, a graphic file has been
defined as the source of the link, not text.
Clicking the Folder icon will open the Select
File dialog box.
6
Creating a link using a graphic image

• Using a graphic as the source of a link is not
  much different than using text.
• In the Document window, select the graphic to be
  used.
• If linking to a local file, follow the same steps
  as when creating a text link.
• If linking to a Web page, type the full URL of
  the Web page into the Link box.

7
Display linked content in a new browser window

• Normally, when you activate a link, the target
  page opens in the same browser window you are
  currently in, overwriting your page with the link
  page.
• You can force the link to open in a new window so
  that the user still has full access to your site.
• You use the Target pop-up menu in the Property
  inspector to set options that determine how the
  link page opens.
• Be aware that when you do open link pages in new
  windows, it requires more memory usage on the
  users computer for every window you open.

8
Link Target value settings

• The settings you can select from the Target
  pop-up menu for a link page are
• _blank Loads the link page in a new window.
• _parent Loads the link page in the parent
  frameset or window of the page that is the source
  of the link.
• _self Loads the link page in the same frame or
  window as the source link.
• _top Loads the link page in the full browser
  window, removing all frames.
• Targets other than _blank only work when your
  page has frames defined.

9
Create links using image maps with defined
hotspots

• You can define hotspots in an image to act as
  links.
• For example, you might have an image that is the
  map of a state, with several cities labeled on
  the image. You could create a hotspot for each
  label so the user could view additional
  information about each city by clicking the city
  name.
• An image that has hotspots defined in it is
  called an image map.
• One image map may contain links to many different
  Web pages, to some other graphic, or to some new
  location in the current document.
• You can create rectangular, circular or oval, or
  polygon hotspots using tools in the Property
  inspectors Map text box.

10
Create a rectangular hotspot

• Click the Rectangular Hotspot tool in the
  Property inspector Map text box.
• Drag a rectangular area around the area of the
  image to be defined as the hotspot.
• A translucent blue-green area with sizing handles
  will appear where you dragged.
• Select the Pointer Hotspot tool and resize the
  box, or drag it to cover the exact area you want
  defined.
• With the rectangle still selected, enter a
  description in the Alt text box (optional).
• Click the Folder icon next to the Link text box
  and locate the file that is the target of the
  link.
• Repeat this procedure for every hotspot to be
  defined for the current image map. You can mix
  shapes without problems, i.e. one rectangle
  hotspot, one circular, one polygon, etc.

11
The Map text box in the Property inspector
This figure shows the Map text box at the bottom
of the Property inspector. If it is not visible
in your Property inspector, click the expander
arrow in the bottom-right corner of the inspector.
The Hotspot tools Pointer Rectangle
Oval Polygon
12
Link to named anchors

• In addition to linking to external documents or
  Web pages, you may want to link to some spot in
  the current page.
• To do that, you must create a jump-to point in
  the document, which is called a named anchor.
• After defining the named anchor, when you select
  the text or image as the source for the link, you
  point to the named anchor as the target instead
  of an external file or URL.

13
Create a named anchor

• To create a named anchor
• Position the insertion point in front of the text
  or graphic that you want to jump to.
• Click Named Anchor on the Common tab of the
  Insert bar to open the Named Anchor dialog box.
• Enter a name for the location and click OK.
• Dont use spaces or special characters in the
  name.
• Named anchors are case sensitive in many
  browsers.
• Select the text or image in the document that is
  the source of the link. In the Link text box of
  the Property inspector, enter the name you
  assigned to the anchor preceded by a pound or
  number sign (), such as anchor1.
• When you click on the source of the link, you
  will jump to the named anchor elsewhere in the
  document.

14
The Named Anchor dialog box and the Property
inspector
The figure on the left shows the Named Anchor
dialog box where you define the name to use for
the anchor. The figure on the right shows the
Property inspector with that named anchor listed
in the Link box, preceded by the symbol to
indicate it is a named anchor.
Mixing case in your anchor definitions, such as
hawaii in the Named Anchor box and Hawaii in the
Link box, may cause the link not to work in some
browsers. Be consistent in your use of case when
defining named anchors.
15
Summary

• In this lesson, you learned
• To define how linking works.
• How to choose objects to use as links.
• How to display linked content in a new browser
  window.
• How to create text and graphic links, and
  hotspots.
• How to create named anchors to jump to a location
  within a Web page.