| You can specify the default color of text links on your page. Choosing a link color that stands out from the regular body text in the document enables viewers to spot the links easily. The default link properties for your document are specified through the Page Properties dialog box. If you don't specify link colors, the browser defaults will be used when the page displays in the user's browser. These defaults can vary depending on the browser. When you begin working on the appearance of your site, it is best to take the color scheme of the site as a whole into account. When you decide on the site-wide styles and colors, you can change the link colors so that they will be consistent with the colors used elsewhere in your pages. The colors you select should contrast (but not clash) with the background and other elements so the links can be read clearly. Note Dreamweaver can control the appearance of links through the use of Cascading Style Sheets (CSS) to set color, font face, and font size properties that apply only to links. A CSS link style is known as a pseudoclass, which is a type of style that is created with parameters that it be applied only under specific circumstances. CSS is covered in Lesson 4.
| | 1. | Open the index.html document, located in the Lesson_03_Links folder. Choose Modify > Page Properties (Cmd-J/Ctrl-J) and then select the Links category.
For this exercise, you should leave the Link font option on the default selection (Same as page font). With this setting, the links on your page inherit the properties of the styles that you'll set for your document in the next lesson.
Note If you apply a CSS style for the text in which a link is locatedas you'll do in the next lessonthe link inherits the properties of that style instead of the default document styles.  There are different states of a link, such as links that haven't been clicked and those that have. You can specify appearance attributes for each state of a link. You have the option to define colors for up to four different link states based on a user's actions.
Link Color: The initial color of a link, prior to the link being clicked. The standard default browser color for a link is blue. Visited Links: The color that a link changes to when a user clicks the link. The standard default browser color for a visited link is purple. Rollover Links: The color to which a link changes as a user pauses the pointer over the link. This serves as an additional indicator that the item is clickable. No rollover is used if this is left blank. Active Links: The color of the link when the mouse is being pressed. Active links can serve as an interactive indicator to the visitor that the link is being clicked, although as a result of the growing speed with which users access the Web, the Active link is no longer as prominent as it used to be. No active color is used if it is left blank.
Note CSS link styles control the link tag (<a>) with specific attributes for the different states that can be applied to it. The different states of the <a> tag are activated when a user performs an action such as clicking the link. The states are defined through the following CSS selectors: a:link for the link color; a:visited for visited links; a:hover for rollover links; and a:active for active links. | | | 2. | Use the text fields next to the color boxes to select the colors for your links by entering #FF3300 for the Link color, #FF9900 for the Rollover Links color, #993300 for the Visited Links color, and #FFCC00 for the Active Links color.
 When you know the hexadecimal valuescodes that are used on the Web to represent colorsof the colors you want to use, you can enter the numbers directly in the link color text fields. Dreamweaver automatically fills in the color box with the matching color swatch. You can also click the color box located just to the left of the text field to bring up a palette with a variety of color swatches. If you choose a color swatch from the palette, Dreamweaver automatically fills in the text field with the equivalent hexadecimal value, which displays at the top of the palette as you roll over the color swatches. When using the color palette, the mouse will turn into a color picker, which you can use to select any color visible on the screen by rolling over the desired area and clicking to select the color. This method allows you to easily match existing colors from other documents, images, and media.
 Note For more colors, click the arrow located in the upper-right corner of the color pop-up window and choose another color palette type from the pop-up menu. Keep in mind that other palettes are not limited to cross-platform, Web-safe colors. Web-safe colors are a set of 216 colors that are the same on both Macintosh and Windows operating systems. Although the color choices in this palette are extremely limited, using Web-safe colors ensures that users with systems that use 256 colorsmuch less common now that many people have video cards capable of millions of colorscan see your pages with the intended colors. Alternative Web access devices such as PDAs still use a limited number of colors, so you might want to use Web-safe colors if you are developing sites that are intended to be accessible by such devices. This factor is one example of why it is important to spend the time to research the audience of your siteas you learned in Lesson 1and to determine the most common systems and configurations the majority of that audience is likely to have .
Understanding Hexadecimal Color Codes Colors are defined in hexadecimal code using RGB: red, green, and blue. Hexadecimal is a base-16 numbering system that uses 0 through 9 and A through F. In the six-digit code used in HTML to describe color, the first two digits represent red, the second two digits represent green, and the last two digits represent blue. For example, #00FF00 has no red, a bright green, and no blue; #000000 has no red, no green, and no blueit is black. Conversely, #FFFFFF signifies the maximum levels of red, green and blue, which combine to display white on your screen. Remember that computer screens use light to render the colors that you see. The color properties of light (which is based on an additive system, in which all colors combine to make white) are much different from the properties of pigment used in print media (which is based on a subtractive system, in which all colors combine to make black). The number sign (#), also known as a pound sign, indicates that what follows is a hexadecimal value and not a named color (such as black, white, red, and so on). |
Although Dreamwaver will accept values entered without the number sign, it is best to include it. When you use the color box to select a swatch, notice that the number sign is included.
Consider the standard link colors, listed for each link state in Step 1 of this exercise, when you select the colors for your link. It might be confusing for visitors if, for example, you decide to use a purple similar to the standard visited link color as your regular (not yet clicked) link color. Taking what have become standard Web conventions into consideration and understanding your viewers' expectations are important when designing your site.
The last option in the Links section of the Page Properties dialog box is the definition of the Underline style to be used on your page. For this exercise, you should leave the menu selection on the default: Always Underline. The other options in this menu are Never Underline, Show Underline Only On Rollover, and Hide Underline On Rollover. You can use the Never Underline option to remove the default underline that appears on all links, but remember to consider the expectations of your visitors when creating Websites. Many users have become accustomed to the conventional underlined appearance of links. If you remove the underlines, your users might overlook the links and miss the information. Conversely, if you underline other words in your text, users might try to click them, expecting links.
| | | 3. | Click OK to close the Page Properties dialog box and then save the index.html file.
|
The default link colors for your page are now the colors you specified. You will see these colors in use as you begin to create links in the next exercise. Keep the document index.html open to work with in the following exercises. |
