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 link 2New Perspectives on Microsoft Expression Web 3.0

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.03

Visual Overview The Insert Hyperlink Dialog Box New Perspectives on Microsoft Expression Web 3.04

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.05

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.06

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.07

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.08

Working with Hyperlinks – URL Components: protocol://service/domainname.suffix/path/file name New Perspectives on Microsoft Expression Web ProtocolServiceDomain Name SuffixPath 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 client New Perspectives on Microsoft Expression Web 3.010

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.011

Creating Links New Perspectives on Microsoft Expression Web 3.012

Creating Links New Perspectives on Microsoft Expression Web 3.013

Creating Links Linking to a Bookmark – Can use a text or an image New Perspectives on Microsoft Expression Web 3.014

Creating Links New Perspectives on Microsoft Expression Web 3.015

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.016

Creating Links New Perspectives on Microsoft Expression Web Link to an existing page is created:

Creating Links New Perspectives on Microsoft Expression Web Link to a Placeholder page is created:

Creating External Links New Perspectives on Microsoft Expression Web 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 External Links Creating An Link – Usually located in footer area of Web page – Serves as a way for visitors to contact the Webmaster – Uses the mailto: protocol – As address is typed, Expression Web creates the mailto: protocol before the address New Perspectives on Microsoft Expression Web 3.020

Creating External Links New Perspectives on Microsoft Expression Web 3.021

Visual Overview Creating Hotspots New Perspectives on Microsoft Expression Web 3.022

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.023

Using Images with Links New Perspectives on Microsoft Expression Web 3.024

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.025

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.026

Creating Hotspots New Perspectives on Microsoft Expression Web 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 New Perspectives on Microsoft Expression Web 3.028

Creating Hotspots New Perspectives on Microsoft Expression Web 3.029

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.030

Creating Hotspots New Perspectives on Microsoft Expression Web 3.031

Creating Hotspots New Perspectives on Microsoft Expression Web 3.032

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.033

Creating Hotspots New Perspectives on Microsoft Expression Web 3.034