Pre-Design Page Setup

Before you begin with the layout and content of your page, it's a good idea to set up the foundation of your page, including elements such as the page title, font preferences, and backgrounds.

Adding the Page Title

Titling your page is essential for numerous reasons. The page title is displayed in the browser window's title bar and is used to

Denote bookmarks when a visitor bookmarks that page.
Provide a marker for a browser's history feature.
Promote better accessibility by assisting site visitors with orientation ”your page title helps visitors know where on the Web they are, and specifically , where on your site they might be.
Label the page, should it be printed out.

The title is ASCII text that resides in the title container in the head section of a Web page and can contain letters , numbers , and character entities as well as spaces.

NOTE

Although you can use character entities (such as   and so on) in the title, you cannot use any HTML or XHTML itself. So, if you want to add quotation marks or a copyright symbol to your title, you can do so by using an entity. However, you can't use any formatting, such as bold or italic.

Whenever you create a new Web page in Macromedia Dreamweaver, it will have the default title Untitled Document .

To set your title, follow these steps:

In the Document window, highlight the default Untitled Document text located in the Title: field.
Type in the new title.
Click OK. Your title will be updated.

What happens when you don't add a title to your page? Find out in "Trouble with No Title Information " in the "Troubleshooting" section, later this chapter.

Establishing Default Page Properties

Dreamweaver enables you to easily customize each page's default properties. Through the Page Properties dialog box, you can establish elements such as text properties, link colors, page encoding, and much more.

Selecting a Background Color

Selecting the right background is important to the design process. You want to select a color that contrasts with the text (foreground) color so that reading is easier. If you decide to use a background image, use one that promotes readability, unless you are going for a completely visual effect. Selecting a background that is too distracting can cause eye strain, especially if the site has a lot of text to read.

New documents are set to white by default. You can see this by opening the Page Properties window. Right below the Background Image textbox you can see the Background option.

If you know the hexadecimal color value for the background of your page, type it into the Background text box and click Apply. To set a color value for your background with the color chip, follow these steps:

Open the Page Properties dialog box by choosing Modify, Page Properties from the Menu bar.
In the Page Properties dialog box, choose Appearance from the Category panel.
Click the Background color chip to open a color palette from which to choose your color (see Figure 6.13).

Figure 6.13. Type the color value in directly or select a color from the drop-down menu.
Move your pointer over the colors until you find one you like for your page. You'll see the hexadecimal value of the color appear in the top bar of the palette.
Click the desired color. The palette loads the hexadecimal value into the Background color text box, and the color chip is updated to reflect your color.
Click Apply in the Page Properties window to see the background color in action.

Setting Background Images

Using a background image can enhance the page both aesthetically and functionally, such as when using a background with a colored section for navigation.

Image Formats for Page Backgrounds

Background images can be any type of image that browsers can display.

Generally , the image format you choose should be the one that compresses your image the most with the least loss of visual quality (for graphics with large areas of solid color, the GIF format, and for more complex images and photographs, the JPEG format).

You can use a PNG graphic in the background. However, a lot of browsers simply do not support PNG or poorly support PNG graphics. This makes the format a generally bad choice unless you know without a doubt that your audience is using browsers that have correct PNG support for your needs.

You can also use GIF animations as background graphics, but use background animations with extreme care and in special cases in which the visual or motion design of the page is more important than its readability.

All background graphics tile by default (see Figure 6.14). This means that your background graphic, no matter how large or small in dimension, will repeat horizontally and vertically across the page. So, when you create it, consider how it will look when placed end-on-end in two dimensions.

Figure 6.14. The Background image is automatically tiled behind all other content on the Web page.

After you have created or chosen the background graphic you'd like to use, place it in your images folder. To add the background to your page by using the Page Properties dialog box, follow these steps:

In the Page Properties dialog box, click Choose (Mac) or Browse (Windows). This will open a browsing window.
Locate the file you just saved to your images directory and select it.
Click Apply to apply your background image to the current page.

CAUTION

If the image file you selected is not within the current Web site's local root folder, you will be prompted by Macromedia Dreamweaver as to whether you want to move a copy of the image file into the Web site. This is usually a good idea because it avoids the risk of losing the image when you upload the site.

If the image dictated in the URL does not exist, no image is displayed ”not even a broken image icon ”and the background color is used instead.

Working with Page Margins

Page margins are considered to be between the edge of the viewable area of the browser window and the HTML content within it. Using Dreamweaver, you can control the top, bottom, and both side margins.

Macromedia Dreamweaver allows you to control the margins for a page using the Page Properties window. To do so:

Open the Page Properties window and choose the Appearance category.
Type the margin number (in pixels) you'd like to use for each of the margins for the page (see Figure 6.15).

Figure 6.15. Use the Page Properties dialog box to set margins.
Click OK and continue working.

Changing the Default Text Color

Text color is traditionally black for any text running longer than a few sentences. Black text on a white background provides the highest contrast possible and, arguably, is the easiest to read on screen and paper alike.

Of course, to create compelling designs, you might want to use other colors from your palette for the general text color. But remember that the higher the contrast, the better readability will result. What's more, many people are color blind and cannot see certain colors or combinations of colors. Your knowledge of audience and the intent of the site will help dictate your color choices.

To change the text color with the Page Properties window, follow these steps:

Click the Text color chip to bring up the color palette.
Find the color you'd like and click on it. The hex code for the color is entered into the Text color textbox, and the chip changes color from default black to the text color of your choice.
Click Apply to apply your text color changes to the document.

Managing Link Colors

By the Page Properties dialog box, you can also set colors for four different link states:

Link ” This is the color of the link in its normal state and is expressed with the attribute name link .
Visited link ” When a link had been visited by a site visitor, setting the vlink attribute changes that link color to denote that the link has already been followed.
Rollover link ” When a hover style is selected, the link changes to this color by default.
Active link ” This is the link color that displays as the visitor clicks on the link. Its attribute name is alink .

When a new document is opened in Macromedia Dreamweaver, no default link colors are set. If left unset, the browser sets the link colors to its own defaults or to user specifications. Generally, the browser's default link colors are blue for unvisited links, red for active links, and purple for visited links.

Some concern exists over the coloring of links outside of the familiar browser defaults. Find out how this affects you in "Coloring Links" in the "Troubleshooting" section later this chapter.

As with other page properties, link colors can easily be set in the Page Properties window. To do so, follow these steps:

Open the Page Properties window and choose the Links category. Click the color chip next to Links, and select your link color. If you already know your color, simply type the hex value into the Links color text box (see Figure 6.16).

Figure 6.16. Select a color for the hypertext links on the page.
Move to the Visited Links option and either use the color chip or enter the known hex color into the text box.
Continue on to the Rollover Links option, making your changes by following the same steps as with other link options.
Finally, select a default color for the Active links option.
After you have all the link colors added, click Apply to apply them to your page, or click OK to continue working.

TIP

Hypertext links need to stand apart from other text on the screen so that users can recognize them. To that end, the colors you choose should contrast sharply with the text color. Generally, it is best to select a more vibrant color for unvisited than for visited links.