1 / 34

Tutorial 4:

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

patrick-howell
Download Presentation

Tutorial 4:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 4: Working with Hyperlinks

  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 http://www.expressionusers.org/tutorials/default.htm Web page Protocol Service Domain Name Suffix Path • URL Components: • protocol://service/domainname.suffix/path/filename 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 New Perspectives on Microsoft Expression Web 3.0 Type target Web page URL in the Address box If URL is unknown, use the Browse the Web button to open a Web browser

  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 New Perspectives on Microsoft Expression Web 3.0 Rectangular and circular hotspots created:

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

More Related