Upload
britney-cook
View
219
Download
0
Embed Size (px)
Citation preview
Creating Links – Lesson 3 1
Creating Links
Lesson 3
2 Creating Links – Lesson 3
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 Creating Links – Lesson 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 Creating Links – Lesson 3
Create a hypertext link using text
To create a link to an external document: Open a Dreamweaver 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 Creating Links – Lesson 3
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 Links – Lesson 3
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 Creating Links – Lesson 3
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 user’s computer for every window you open.
8 Creating Links – Lesson 3
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 Creating Links – Lesson 3
Create links using image maps with defined hotspots You can define hotspots in an image to act as
links. For example, an image that is the map of a state may
have several cities labeled on the image. You can 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 inspector’s Map text box.
10 Creating Links – Lesson 3
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 Creating Links – Lesson 3
The Map text box in the Property inspectorThis 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 Creating Links – Lesson 3
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 Creating Links – Lesson 3
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 category of the Insert bar to open the Named Anchor dialog box.
Enter a name for the location and click OK. Don’t 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 Creating Links – Lesson 3
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 below 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 Creating Links – Lesson 3
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.