Tutorial 4:

Tutorial 4:

Working with Hyperlinks

New Perspectives on Microsoft Expression Web 3.0 2

Objectives

• Session 4.1– Place bookmarks on a Web page– Create a link to a bookmark– Create a link to another Web page– Create a link to an external Web site– Create an email link


Objectives

• Session 4.2– Create a link to an image– Construct an image map– Create and modify hotspots– Change link colors– Edit a hyperlink


Visual OverviewThe Insert Hyperlink Dialog Box



• Terminology– Internet• Global network of computers

– World Wide Web (WWW)• Information is located and read in a nonlinear

manner



– Hyperlink• Targets another place in the same document, a

new document, or a Web site• Referred to as a “link”• Can be text or an image

– Broken link• Link that does not work



– URL• Uniform Resource Locator• Complete address of Web site and page

– Communications Protocol • Agreed-to standard for sending voice, data, and

video over communications lines– Hypertext Transfer Protocol (HTTP)• Protocol used to transfer Web pages



– Domain Name• Registered name of the file server where the

pages for a particular Web site are stored– Suffix• Top level domain name• Follows the domain name• Common suffixes - .com, .edu, .net, .org

– Path• Folder or folder directory stored on the server



– URL Components: • protocol://service/domainname.suffix/path/filename

http://www.expressionusers.org/tutorials/default.htm

Protocol Service Domain Name

Suffix Path Web page


Creating Links

• Purpose– Links allow visitors to quickly find topics of interest• A specific place on the same Web page• A different Web page at your Web site• A different Web site

– Links allow visitors to connect to an email client


Creating Links

• Creating Bookmarks– A bookmark is a place within a document used as a

target for a link– Fold • Bottom of first screen on home page• Create bookmarks below the fold if home page is

several screens long– Tracer • Visual representation of the location of a

bookmark, usually a dashed line


Creating Links


Creating Links


Creating Links

• Linking to a Bookmark– Can use a text or an image


Creating Links


Creating Links

• Creating Links to Other Pages– Referring page• Page where link is located

– Target page• Page that appears when link is clicked

– Placeholder page• Page with little or no content that can still be

used as a target of a hyperlink


Creating Links

Link to an existing page is created:


Creating Links

Link to a Placeholder page is created:


Creating External Links

• Type target Web page URL in the Address box• If URL is unknown, use the Browse the Web button to

open a Web browser



• Creating An E-Mail Link– Usually located in footer area of Web page– Serves as a way for visitors to contact the

Webmaster– Uses the mailto: protocol– As e-mail address is typed, Expression Web

creates the mailto: protocol before the e-mail address




Visual OverviewCreating Hotspots


Using Images with Links

• In addition to linking text, you can add links to images– Images such as arrow and pointers are often used

as navigational icons– Add alternative text to the images just in case the

browser is not set to display images• Formatting an Image used as a Link– White space can be added around the image– Alignment can be set as desired


Using Images with Links


Creating an Image Map

• Image Map– Image divided into sections known as hotspots– Allows the same image to serve as the location for

several links– User can click a hotspot to display the target page

or Web site– Any image can be used; typically is a map of some

kind


Creating Hotspots

• A Hotspot is an area on image that, when clicked, serves as a link to target page or Web site– XHTML recognizes three Shapes:• Circular• Rectangular• Polygonal (any shape not circular or

rectangular)– Five buttons on the Picture toolbar are used to

create hotspots


Creating Hotspots

Rectangular and circular hotspots created:


Creating Hotspots

• Viewing Hotspot Locations– Highlight Hotspots button displays outline of the

hotspot areas– Toggles between the hotspot and the image

• Modifying Hotspots– Use the sizing handles along the sides and corners

of the hotspots to change its shape


Creating Hotspots


Creating Hotspots

• Changing Link Colors– Unvisited links are usually underlined and blue– Visited links are usually underlined and purple– Use the Page Properties dialog box to change

colors• Can set different colors for mouseover, rollover,

or hover effects


Creating Hotspots


Creating Hotspots


Creating Hotspots

• Editing a Hyperlink– Expression Web keeps track of all hyperlinks and

linked documents– When pages are deleted, moved, or renamed, EW

does all the necessary code revision automatically– The Edit Hyperlink box can be used to:• Change the link text• Change the URL to which you want to link• Remove a link


Creating Hotspots

Documents

Tutorial 4: