- What You Will Learn
- Approximate Time
- Lesson Files
- Specifying Link Color and Forma
- Creating Hypertext Links
- Understanding Links and File Structure
- Adding New Folders and Files to a Site
- Creating a Site Map
- Working with Links in Site Map View
- Viewing a Subset of the Entire Site
- Saving the Site Map
- Targeting Links
- Inserting and Linking to Named Anchors
- Inserting E-mail Links
- Working with Links On Your Own
- What You Have Learned
This chapter is from the book
This chapter is from the book
This chapter is from the book
Specifying Link Color and Format
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.
- 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.
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.
- 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 values—codes that are used on the Web to represent colors—of 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.
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.
- 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.