Editing Hyperlinks


You can change your hyperlinks as easily as you can change anything else about your Web page. You can change the text that makes up the link, the destination to which the link leads, the appearance of the link, and even how it behaves.

Changing a hyperlink's text or destination and adding a ScreenTip

A visit to the Edit Hyperlink dialog box enables you to change the text that makes up a hyperlink, change its destination, or add a ScreenTip. A ScreenTip is a captionlike label that pops up when a visitor passes the cursor over a link (similar to the ToolTip that appears when you hover your cursor over a toolbar button in Expression Web).

Warning 

ScreenTips don't show up in all browsers, especially older ones. (For example, Microsoft Internet Explorer before version 4.0 doesn't display them.)

To change a hyperlink's text or destination, or to add a ScreenTip to a hyper-link, follow these steps:

  1. In the page, click the hyperlink that you want to change. If it's text, click anywhere in the hyperlink text.

  2. image from book Click the Insert Hyperlink button to open the Edit Hyperlink dialog box.

    You can also right-click the hyperlink and, from the pop-up menu, choose Hyperlink Properties.

  3. To change the hyperlink text visible in the page, type new text in the Text to Display text box.

  4. To change the link's destination, click a different file in the file list or type a different URL in the Address list box.

    Refer to the "Linking to a Web page or file" section, earlier in this chapter, for detailed instructions on how to specify a link's destination.

  5. To add a ScreenTip, click the ScreenTip button to display the Set Hyperlink ScreenTip dialog box. Type the ScreenTip text into the appropriate text box and then click OK.

    The Edit Hyperlink dialog box becomes visible again.

  6. Click OK to close the dialog box.

Displaying a hyperlink's destination in a new browser window

You may have experienced this trick during your own Web wanderings: You click a link inside a Web page, and, instead of replacing the contents of the current browser window, the hyperlink destination shows up in a new browser window.

This effect comes in handy for several situations. Some Web site creators program all their external links (links that point to locations outside the Web site) to pop open new windows when clicked so that visitors get a clear visual cue when they "leave" the site. Other designers use this effect to display supplementary information without replacing the contents of the original window. (A good example is a product catalog with a link leading to a size chart that appears in its own window.)

REMEMBER 

Regardless of what you want to happen when a visitor clicks a link, in many browsers your visitors control whether the link opens in a new window, a new tab, or in the open tab or window (usually by changing settings in the Options, Internet Options, or Preferences dialog box). Not to worry: A visitor who knows how to change a Web browser's settings also knows how to find her way back to your Web site! To cause the hyperlink destination to appear in a new browser window, do the following:

  1. In the page, click the hyperlink you want to change.

  2. image from book Click the Insert Hyperlink button to open the Edit Hyperlink dialog box.

  3. In the dialog box, click the Target Frame button.

    The Target Frame dialog box appears.

  4. In the dialog box's Common Targets list box, click New Window, and then click OK.

    The Target Frame dialog box closes, and the Edit Hyperlink dialog box becomes visible again.

  5. Click OK to close the dialog box.

GLANCE AT THE CODE 

Take a look at the code for a link that opens a new browser window. In this example, the hyperlink initiates a file download-in this case, a PDF of a user manual:

 <a target="_blank" href="usermanual.pdf">Download the user           manual</a> 

The opening <a> tag contains both the code telling the browser to open a new window (target=“_blank”) and the hyperlink destination, href=“usermanual.pdf”.

TECHNICAL STUFF 

Another way to control whether a link opens a new browser window is to use JavaScript. Check out JavaScript For Dummies, 4th Edition, by Emily A. Vander Veer (Wiley) for details.

Changing hyperlink color

Hyperlinks stand out from regular text because they're often underlined and a different color from surrounding text. The default hyperlink color is blue, but you can change the link's color to coordinate with the site's color scheme.

Hyperlinks have four distinct colors, or states; these colors appear when a visitor views the page in a Web browser:

  • Default color: The link's color before the visitor clicks it and jumps to the hyperlink destination. When a visitor arrives at your page for the first time, all the page's links appear in the default color because the visitor hasn't yet followed any links.

  • Active color: The color the link becomes "mid-click." The appearance of the active color tells visitors, "Fasten your seatbelts; you're going somewhere new."

  • Visited color: The color the link changes to after a visitor follows a link and then returns to the page. The visited color lets visitors know which links they have already followed. (Each individual visitor's browser keeps track of which links that person has followed inside each page.)

  • Hover color: The color the link changes to when a visitor passes the mouse cursor over the link. The appearance of the hover color tells the visitor, "Click me; I'll take you somewhere."

To select link colors for a page, follow these steps:

  1. With the page open in Design view, choose Format image from book Background.

    The Page Properties dialog box appears with the Formatting tab visible. The current link color settings appear in the list boxes labeled Hyperlink, Visited Hyperlink, Active Hyperlink, and Hovered Hyperlink, as shown in Figure 4-2.

    image from book
    Figure 4-2: The Formatting tab in the Page Properties dialog box.

    Note 

    If an external style sheet is controlling the formatting for the page, the Background command is unavailable. You have to change hyperlink colors in the style sheet file itself. We tell you how to edit styles in Chapter 7. We cover external style sheets in Chapter 9.

  2. Choose a new color from one or all of the list boxes corresponding to each hyperlink state.

    If you choose More Colors, the More Colors dialog box appears. We explain how to use the More Colors dialog box in Chapter 3.

  3. Click OK.

    The dialog box closes, and the page's links change color. To see how the active and visited colors look, preview the page in a Web browser. We explain how to preview pages in Web browsers in Chapter 2.

REMEMBER 

Although you can set different hyperlink colors for each page, keep in mind that Web surfers expect hyperlinks to look the same throughout a Web site. So if you change hyperlink colors and formatting, change them for all pages on your Web site.

When you change the default colors for links, Expression Web writes the new color information as CSS styles. But these styles affect only the current page. After you figure out your link colors on your page, you can save the link color styles to an external CSS style sheet and attach it to the rest of your pages, and-voila!-all your Web pages throughout the site use the same link color scheme. We tell you how to use external style sheets in Chapter 9.

GLANCE AT THE CODE 

Take a look at the style rules that Expression Web sticks in your code when you change hyperlink colors. In this example, you change default hyperlinks to lime green and change visited links to dark green:

 a {            color: #00FF00; } a:visited {            color: #008000; } 

The first style rule controls the color of an unvisited hyperlink sitting patiently on a page while waiting to be clicked for the first time. CSS uses a for the <a> (anchor) tag as the selector to tell the browser what's being styled. The second style rule controls the color of the visited link. This style rule also uses a for the selector, but tacks :visited onto it, which tells the browser more specifically which of the four link states the rule applies to.



Microsoft Expression Web for Dummies
Microsoft Expression Web For Dummies
ISBN: 0470115092
EAN: 2147483647
Year: 2004
Pages: 142

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net