Hyperlink Formatting: Beyond Black Coffee
Default text-based hyperlinks look kinda boring: blue and underlinedwhoopy-doo. So we gotta get them looking a little more twenty-first centuryand again, Cascading Style Sheets formatting saves the day. If you've been paying attention for the past few chapters, this should come as wonderful news.For hyperlink formatting needs, Cascading Style Sheets formatting again saves the day.
Getting Started with Hyperlink Formatting
To get started with hyperlink formatting, you'll use Dreamweaver's Page Properties dialog box. By starting here, you can control the look of all the hyperlinks on your page in one shot. This makes it easy to control fonts, colors, and other attributes of your hyperlink text.Here's how to use the Page Properties settings to control your links:
| 1. | Choose Modify > Page Properties. | | 2. | In the Page Properties dialog box that appears, click the Links category at the left. | | 3. | To change the typeface and size of your links, use the Link Font and Size menus.[View full size image] Noteworthy | Seriously consider using a different color for visited links. It can be difficult for visitors to remember where they've already been on your site, so help them out by providing a visual reminder. |
| | 4. | To control the color of your links, use the Link Color, Visited Links, Rollover Links, and Active Links fields.Link Color: Link Color sets the color for all active links on your page. If you leave this option unset, then your links will appear in blue, the default.Visited Links: To control the color of links that have already been clicked, set a color for Visited Links. Setting different colors for Link Color and Visited Links helps your visitors remember where they've already navigated to.Imminent Doom | If you decide to use the Show Underline Only on Rollover option, make sure you use a different text color for your hyperlinks than you used for your page text. Otherwise, visitors will have no idea where the hyperlinks are on your page. |
Rollover Links: Add some interactivity to your page by setting a color for Rollover Links. Whenever your visitor moves the mouse over the hyperlink, the text will change to this color.Active Links: Use the Active Links setting to control the color of a link when the user's mouse clicks it. The color flickers very quickly, and it's hardly noticeable, so many designers (myself included) usually don't bother with it. (If anything, I'll set this color to the same value that I used for Link Color.)
| | 5. | To really add some interactivity to your links, choose an option from the Underline Style menu. Your choices are Always Underline, Never Underline, Show Underline Only on Rollover, and Hide Underline on Rollover. Having an underline appear only when the visitor's mouse moves over the link (Show Underline Only on Rollover) is a very popular choice for web designers. | | 6. | Once your formatting is complete, click OK to close the Page Properties dialog box. |
Depending on the settings you've chosen in the Page Properties dialog box, you'll see some styles appear in the CSS Styles panel. In the next section, you'll see how to control your link formatting directly with CSS.CSS is back, this time to help you with hyperlink formatting.
Controlling Link Formatting with CSS
Chapter 8? Everything you saw there applies, so if you want to make further changes to your hyperlink styles, add new attributes, orbest of allexport your hyperlink styles to an external style sheet, the process is the same as you saw in Chapter 8.Chapter 8 applies here.
Gettin' a Grip on Rollover States
| The CSS Style | Also Known As |
|---|
| a:link | A link's up state: the style of a hyperlink before it has been clicked by the visitor. | | a:hover | A link's over state: the appearance of a hyperlink when the user's cursor moves over it. | | a:active | A link's down state: the style of a link when it's selected by the user. | | a:visited | A link's visited state: the appearance of the hyperlink after it has been clicked by the visitor. | |
Using Rollover Images to Identify Links
A common web design feature these days is the rollover imagethat is, a button or graphic that changes appearance whenever the visitor's mouse pointer hovers over it. Keep in mind that a rollover image isn't necessarily a hyperlink. However, you can use rollover images to identify hyperlinked graphics, just as you can use color or underlining or other formatting to identify hyperlinked text.A common web design feature is the rollover imagea button or graphic that changes appearance whenever the visitor's mouse pointer hovers over it.Rollovers are so common, in fact, that many surfers now expect a site's main navigation bar to include them. Rollovers are easy to create in Dreamweaver, and they add a nice level of interactivity to your site.Yeah, I'm a grumpy tart without coffee. Here's an example of two graphics that'll be used in a rollover: the left one before the rollover and the right one after. Remember that both have to be the same size, and most important, bring coffee!
 Before you begin, you'll need some graphics. Because the image is going to change when your visitor moves the mouse over it, you'll need two graphics: one for the image as it normally appears, and one for the image as it appears when the visitor's cursor is over it. You can use images you already have, or you can create your own. Regardless, make sure that both the normal and rolled-over graphics have the same dimensions. Otherwise, your image will appear distorted when the visitor moves the mouse over it. If you want to find out how you can create your own buttonsfor a navigation bar, for instancesee the sidebar "How to Make Your Own Buttons" later in this chapter.Here's how to add rollover images to your page:
| 1. | Place your cursor on your page where you want to insert the rollover graphic. | | 2. | Choose Insert > Image Objects > Rollover Image.Choosing Rollover Image from the Insert submenu brings up a dialog box with options for your rollover.
 | | 3. | In the Image Name field in the Insert Rollover Image dialog box that appears, specify a name for your rollover. | | 4. | Click the Browse button beside the Original Image field to specify the graphic that will be used as the normal image.This is the idle graphic that will be seen when there's no interactivity from the usercalled the rollover's up state.[View full size image] | | 5. | Click the Browse button next to the Rollover Image field to select the image for the button's over state.This graphic will appear when the visitor's mouse rolls over the button. | | 6. | If you want, specify some alternative text in the Alt field, then set the button's hyperlink in the When Clicked, Go to URL field.Your rollover image doesn't have to have a hyperlink attached to it, but if you leave the When Clicked, Go to URL field in the Insert Rollover Image dialog box blank, Dreamweaver will insert a number sign (#) in the field, indicating a null link.Some browsers (such as Internet Explorer in Windows) will jump the visitor to the top of the page when the visitor clicks a null link. To avoid this jumping behavior, type javascript:; in the URL field. This code will prevent the page from scrolling to the top when the visitor clicks your rollover image | | 7. | When your rollover settings are complete, click OK.The rollover is inserted onto your page, but unfortunately you won't be able to see the effect in Dreamweaver. To see it work, save your page and preview it in your browser.Hyperlinks are key to building navigation systems. | | 8. | Save your page. Then preview your work in your browser. |
 |
Ten Ton DreamweaverBy
Geoff Blake...............................................Publisher: Peachpit PressPub Date: February 08, 2006Print ISBN-10: 0-321-37412-6Print ISBN-13: 978-0-321-37412-7Pages: 456Index
لطفا منتظر باشید ...
![[View full size image]](/image/library/english/13880_249fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13880_253fig02_alt.jpg){kind=link}