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

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

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

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

• 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

• 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

Tutorial 4:

Documents

Tutorial Brainshark 4

TUTORIAL 4

Tutorial (4)

MGF2351 Tutorial 4 Week 4

Degenerasi Tutorial 4

4 4 1 Tutorial Slideshare

SolidWorks tutorial 4 KAARSENHOUDERglobalsite.solidworks.com/files/solidworks-tutorial-4-voor-lager... · SolidWorks® tutorial 4 KAARSENHOUDER ... Tutorial 4: kaarsenhouder 4 1 Start

C++ TUTORIAL 4

Marketing tutorial 4

4 Tutorial

NACT TUTORIAL 4 MEASURING DUT FREQUENCY RESPONSEmidnightdesignsolutions.com/sna/tutorials/Tutorial 4 - Measuring... · NACT TUTORIAL 4 MEASURING DUT FREQUENCY RESPONSE 4 8. Each time

DirectMark Tutorial 4 - Trotec... DirectMark Tutorial 4 Direct marking of color images DirectMark Tutorial 4 for ProMarker Series | V001_DM-Tutorial (06/2015)

SimpleScalar Tutorial COMP4611 Tutorial 4 Oct 8,9, 2014

Tutorial 4: Histograms...Tutorial 4: Histograms Leah Brooks February 4, 2020 Intoday’stutorial,welearnhowtomakehistograms. Histogramsareplotsthatshowthedistributionofone

Debian 4 Tutorial

Winsteps Tutorial 4winsteps.com/a/winsteps-tutorial-4.pdf1 # Winsteps Tutorial 4 Mike Linacre, instructor – June 2012 1. Tutorial 4. Almost to the summit ! Differential Test Function

Tutorial 4!

SOLIDWORKS tutorial 4 KAARSENHOUDERglobalsite.solidworks.com/files/solidworks-tutorial-4... · · 2015-07-10SOLIDWORKS® tutorial 4 KAARSENHOUDER ... nager voor de materi-aaldikte

Eap tutorial 4

Project Tutorial 4