Upload
patrick-howell
View
45
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Tutorial 4:. Working with Hyperlinks. 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 - PowerPoint PPT Presentation
Citation preview
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
New Perspectives on Microsoft Expression Web 3.0 3
Objectives
• Session 4.2– Create a link to an image– Construct an image map– Create and modify hotspots– Change link colors– Edit a hyperlink
New Perspectives on Microsoft Expression Web 3.0 4
Visual OverviewThe Insert Hyperlink Dialog Box
New Perspectives on Microsoft Expression Web 3.0 5
Working with Hyperlinks
• Terminology– Internet• Global network of computers
– World Wide Web (WWW)• Information is located and read in a nonlinear
manner
New Perspectives on Microsoft Expression Web 3.0 6
Working with Hyperlinks
– 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
New Perspectives on Microsoft Expression Web 3.0 7
Working with Hyperlinks
– 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
New Perspectives on Microsoft Expression Web 3.0 8
Working with Hyperlinks
– 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
New Perspectives on Microsoft Expression Web 3.0 9
Working with Hyperlinks
– URL Components: • protocol://service/domainname.suffix/path/filename
http://www.expressionusers.org/tutorials/default.htm
Protocol Service Domain Name
Suffix Path Web page
New Perspectives on Microsoft Expression Web 3.0 10
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
New Perspectives on Microsoft Expression Web 3.0 11
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
New Perspectives on Microsoft Expression Web 3.0 12
Creating Links
New Perspectives on Microsoft Expression Web 3.0 13
Creating Links
New Perspectives on Microsoft Expression Web 3.0 14
Creating Links
• Linking to a Bookmark– Can use a text or an image
New Perspectives on Microsoft Expression Web 3.0 15
Creating Links
New Perspectives on Microsoft Expression Web 3.0 16
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
New Perspectives on Microsoft Expression Web 3.0 17
Creating Links
Link to an existing page is created:
New Perspectives on Microsoft Expression Web 3.0 18
Creating Links
Link to a Placeholder page is created:
New Perspectives on Microsoft Expression Web 3.0 19
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
New Perspectives on Microsoft Expression Web 3.0 20
Creating External Links
• 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
New Perspectives on Microsoft Expression Web 3.0 21
Creating External Links
New Perspectives on Microsoft Expression Web 3.0 22
Visual OverviewCreating Hotspots
New Perspectives on Microsoft Expression Web 3.0 23
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
New Perspectives on Microsoft Expression Web 3.0 24
Using Images with Links
New Perspectives on Microsoft Expression Web 3.0 25
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
New Perspectives on Microsoft Expression Web 3.0 26
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
New Perspectives on Microsoft Expression Web 3.0 27
Creating Hotspots
Rectangular and circular hotspots created:
New Perspectives on Microsoft Expression Web 3.0 28
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
New Perspectives on Microsoft Expression Web 3.0 29
Creating Hotspots
New Perspectives on Microsoft Expression Web 3.0 30
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
New Perspectives on Microsoft Expression Web 3.0 31
Creating Hotspots
New Perspectives on Microsoft Expression Web 3.0 32
Creating Hotspots
New Perspectives on Microsoft Expression Web 3.0 33
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
New Perspectives on Microsoft Expression Web 3.0 34
Creating Hotspots