Expression Web 3 Book Terms and Notes by FJW

Tutorial 4 Hyperlinks

Task 1: Insert a bookmark (or anchor) for TopOfPage

Task 2: Insert an Internal hyperlink at the bottom of the page (Top) to go to the TopOfPage

Task 3: Insert an ID for the middle or bottom of the page. Ex: <h1 id="Ch2">Chapter 2</h1>

Task 3b: Insert an Internal hyperlink at the top of the page to go to the ID.

Task 4: Add a Local or Relative link to a page on your Web site (even to a placeholder page)

Task 5: Add an External or Absolute text link to another Web site, and open it in a new window

Task 6: Add an External or Absolute image link to another Web site, and open it in a new window

Task 7: Add a working Email link to your email address

Task 8: Add a hyperlink to a PDF file (Besides Adobe, Office 2007 & Open Office can create PDF files)

Task 9: Add mouseover or rollover, or hover effect for your links. Choose a color to match your style.

Task 10: Add a working Hotspot for an image

EW 153 A ScreenTip (=Alt tag) is text that appears when a user’s pointer hovers over a link in the browser.

EW 153 A bookmark (=ID or anchor) is a place to link to within the same document. (Not a Favorite)

<a name="TopOfPage"></a> or <h2 id=" Chapter 1">Chapter 1</h2>
<a href="#TopOfPage">Top</a>

EW 153 You can set a Target Frame to specify whether a link opens in the same browser window or a different one.

EW 154 A hyperlink is HTML code that refers to a location within the same document, another Web page at the same

Web site, or another Web site.

EW 154 A Web server is a computer that is used to send pages and data to your computer. Servers can also be used to receive data from your computer; for example, when you make a purchase online

EW 154 A Uniform Resource Locator (URL) is the complete address of a Web page. A URL is composed of several parts. A communications protocol is an agreed-to standard for sending voice, data, and video over communications lines. Hypertext Transfer Protocol (HTTP) is the protocol used to transfer Web pages. A domain name is the registered name of the file server where the pages for a particular Web site are stored. A suffix, also known as a top-level domain name, follows the last dot of a domain name, and it broadly identifies the nature of the activity at the Web site. Common suffixes include .com, .net, .edu, and .org. The path is the listing of one or more nested folders that contain the Web page on the Web server. When entering a URL in a browser’s Address bar, you type forward slashes ( / ), not backslashes. A URL for a Web page has the following components: protocol://service.domainname.suffi x/path/filename

EW 155 Cybersquatting is the registering, trafficking in, or use of a domain name with the sole intent to profit from a

trademark belonging to someone else. The goal is to buy a domain name as an investment, and to later sell it at a profit.

EW 155 ICANN: Disputes among domain names are usually resolved by the Internet Corporation for Assigned Names and Numbers. ICANN is responsible for managing the assignment of domain names and IP addresses

FJW:

An Absolute External hyperlink (Absolute because the entire URL path, including http:// is needed.)	Insert a link to a Web page on a different site. Example: <a href="http://msn.com" target="_blank">MSN</a>
A Relative Local hyperlink (Relative because the entire path is not needed.)	Insert a link to a Web page in the same folder, on the same site. Examples: <a href="resume.htm">Owner's Resume</a> <a href="Demo.htm">Demo Page </a>
Add an Internal Anchor hyperlink (notice how you must use the # sign) to an ID (preferred) or an Anchor or Bookmark. (Anchor because an "anchor" or bookmark or ID must be first set to mark the destination anchor on the same page.)	Insert a link to the internal id/anchor somewhere on the page other than "Top" Newer Style: This will name the ID: <h1 id="SamplePage">Sample Page</h1> This will link to the Chapt2 ID: <a href="#SamplePage">Sample Page</a> Older Style: This will name the bookmark: <a name="Chapt2"></a> This will link to the Chapt2 bookmark or anchor: <a href="#Chapt2">Chapter 2</a>
Add an Image Hyperlink	<a href="#TopOfPage"> <img src="images/arrow.gif" alt="Arrow" style="border:0px"/></a>
A working Email link (If clicked it starts an email process)	Include a working link to your Email address. Ex: <a href="mailto:MyName@Host.com">Email Me</a>

EW 158 in a Web browser, the fold is the bottom of the first screen of a Web page. The fold serves to divide the top screen of your page with the content below it… If a Web page is several screens long, it is helpful to include a link back to the top of the page so users don’t have to scroll back up: at the top of the page- click Insert on the menu bar, and then click Bookmark. Name the new bookmark (anchor) TopOfPage.

EW 160 Linking to a Bookmark: Select the text or image to be used as the link. Click Insert on the menu bar, click Hyperlink, click Place in This Document, and then select the previously set bookmark. (Avoid expressions such as “Click here” as link text.)

EW 164 Creating a Link to Another Page: Select the link text, click Insert on the menu bar, and then click Hyperlink, click Existing File or Web page in the Link to bar.

EW 165 placeholder pages are pages with little or no content. You merely create the pages, and then as you further develop the Web site, you can add content to the placeholder pages.

EW 175 An image map is an image that is divided into section(s) known as hotspot(s), which allow the same image (or portion of the image) to serve as the location for one or more links. A user can click a hotspot to display the target page or Web site.

EW 176 Creating a Hotspot:

* Click the image to select it.
* On the Pictures toolbar, click either the Rectangular Hotspot button, the Circular Hotspot button, or the Polygonal Hotspot button.
* On the image, click and drag to draw the hotspot.
* In the Insert Hyperlink dialog box that opens, select the file to which you want to link and then click the OK button.

EW 183 As a means of enhancing accessibility for the visually impaired, it’s a good idea for each link to use the title attribute and a value that describes the hotspot area. The title attribute creates a ScreenTip that will appear in the browser.

EW 185 Modifying a Hotspot: For a rectangular hotspot, sizing handles appear along each side and in the corner. As you pass the pointer over a resize handle, the pointer turns into the resize pointer (a double-headed arrow). You can click and drag the sizing handles to adjust the hotspot shape. (FJW: Or edit the image map in code view.)

EW 185 Any electronic file is a potential link target, including a Microsoft Word, Excel, or PowerPoint file or an Adobe PDF file. You should always include some text on your Web page that identifies the target of such a link as a non-HTML file and specify its file extension.

EW 186 Changing the Link Colors (FJW: but staying with standard colors is often best.)

* In Design view, right-click a blank area of the page, and then click Page Properties on the shortcut menu.

* In the Page Properties dialog box, click the Formatting tab.

* In the Colors section, click the Hyperlink arrow, select a color from the palette, and then repeat for Visited hyperlink, Active hyperlink, and Hovered hyperlink, in that order.

EW 186 You also change the color of links when a user moves the pointer over them without clicking. This type of change is known as a mouseover or rollover, or hover effect.

EW 189 If you have created an Expression Web site, Expression Web keeps track of all the links for your Web pages. Should you move, delete, or rename a file using the Folder List panel, Expression Web automatically rewrites the HTML code to reflect the changes you have made to your Web site file structure. Expression Web keeps track of all your linked documents and does all the tedious code revision for you automatically in seconds.