Creating Links - PowerPoint PPT Presentation

Loading...

PPT – Creating Links PowerPoint presentation | free to view - id: 54d91-ODk0Y



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Creating Links

Description:

Text links on a page are usually displayed in a color and are underlined. ... definitions, such as hawaii in the Named Anchor box and Hawaii in the Link box, ... – PowerPoint PPT presentation

Number of Views:46
Avg rating:3.0/5.0
Slides: 16
Provided by: tomb130
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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.
About PowerShow.com