Predesign 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, style preferences, page margins, and backgrounds. Dreamweaver makes it easy to set these preferences through the Document toolbar and the Preferences dialog box.

Adding a Page Title

Titling each page in your site is essential for several reasons. The page title is displayed in the browser window's title bar and is used to do the following:

  • 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 orientationyour 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 of a web page. It 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 has the default title of Untitled Document.

To change the page's title, type the new name in the Title field in the Document toolbar, as shown in Figure 23.18.

Figure 23.18. Type the new title for your page into the Title Field of the Document toolbar.


Establishing Page Properties

In addition to setting a page title, Dreamweaver enables you to easily customize other page 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.

New Dreamweaver documents have a white background by default. You can set the background of the page by choosing Modify, Page Properties from the menu bar to open the Page Properties dialog (see Figure 23.19). In the dialog box, you can either type the hexadecimal color value for the background into the Background Color text field or use the color picker to select from the palette.

Figure 23.19. Type the color value in directly or select a color using the color picker.


Setting Background Images

Using a background image can enhance the page both aesthetically and functionally, such as when using an image with a heavy transparency as a watermark for your page. However, selecting an inappropriate background can be distracting and cause eyestrain, especially if the site has a lot of text to read.

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 (the GIF format for graphics with large areas of solid color and the JPEG format for more complex images and photographs).

You can use a PNG graphic in the background. However, older browsers either do not support PNG or support it poorly. This makes the format a bad choice in general 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 only 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 23.20), which means that the background graphic, no matter how large or small in dimension, repeats 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 23.20. The background image is automatically tiled.


To add a background to your page, open the Page Properties dialog box and click the Browse button next to the Background Image field. Locate the image that you would like to use and click OK. Click Apply and a link to the image is embedded in your code and the background displays in the page.

Caution

If the image file you selected is not within the current website's local root folder, you are prompted as to whether you want to move a copy of the image file into the website. This is usually a good idea because it avoids the risk of forgetting to transfer the image when you upload the site.


If the image specified in the background URL does not exist, no image is displayednot even a broken image iconand the background color is used instead.

Working with Page Margins

Page margins are considered to be the distance between the edge of the viewable area of the browser window and the HTML content within it. You can control the top, bottom, and both side margins by opening the Page Properties dialog box (see Figure 23.21) and typing the appropriate value in the margin field. Be sure that when you type the value, you also select the appropriate unit of measurement.

Figure 23.21. Use the Page Properties dialog box to set margins.


Changing the Default Text Color

Although the color of your page text is entirely up to the design you choose and how it integrates with the color scheme of your site, 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.

Tips for Choosing a Color Scheme for Your Pages

Selecting a color scheme for your pages can often be as difficult as creating the page layout. If you are designing a site for an organization that has already chosen the colors to use in their logo, stationery, or media materials, it's a little easier to integrate those colors into your site. If, however, the organization has left it up to you to determine the color scheme, keep these tips in mind:

  • Stick with the web-safe palette, which is available when you choose any color picker within Dreamweaver. Although most home and business computers can see beyond the 216-color palette, an increasing number of people are browsing web pages on their cell phones and PDA devices, and these devices might not be capable of rendering colors properly beyond the web-safe palette.

  • Choose three or four colors that complement one another and stick with them. Don't try to add too much color to your pages, which can overload the look and feel.

  • Keep in mind that certain colors can invoke a specific mood from your visitors. Loud colors such as bright red or yellow can convey excitement or agitation whereas mellow colors such as pastels can have a calming effect. Choose colors that match the feel of your site.

  • Be certain that your text is readable when placed on any background color.

  • Keep in mind that unless controlled by a style or the document, the color of hyperlinked text is controlled by the browser. If you need your hyperlinks to be a specific color, be sure to create a style that controls them.

  • Be sure to accommodate users who have visual disabilities. Reds and greens are colors that commonly can't be seen by those with visual disabilities, so avoid using those colors for your text.

After you select your color scheme, be sure to test it out in a number of different browsers, at different screen resolutions, and at different color depths. This ensures that all your visitors can enjoy your site to the fullest.


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 between the text and the background, the more readability is enhanced. What's more, visitors who are visually impaired (such as those who are color blind) might not be able to see certain colors or combinations of colors. Therefore, your knowledge of the potential audience as well as the intent of the site should help dictate your color choices.

To change the text color with the Page Properties window, adjust the Text color field by typing a hexadecimal value or using the color picker to choose a color.

Managing Link Colors

The Page Properties dialog box also allows you to set colors for various different hyperlink states. These states include

  • Link This is the color of the link in its normal state prior to being clicked, and is expressed with the attribute name link.

  • Visited link When a link had been visited by a site visitor, the vlink attribute setting changes that link's color to denote that it has already been followed.

  • Rollover link When a hover style is selected, the rlink attribute changes a link to this color by default whenever the mouse pointer is placed over the link.

  • 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 Dreamweaver, no default link colors are set. If left unset, each visitor's browser controls the link colors according to its default settings or the custom settings that have been set by the visitor. Generally, the browser's default link colors are blue for unvisited links, red for active links, and purple for visited links.

As with other page properties, link colors can be set easily in the Page Properties dialog box. The link colors are located in the Links category of the dialog box, as shown in Figure 23.22. To adjust the values, type the hexadecimal value into the field or use the color picker to choose the desired color.

Figure 23.22. Select a color for the hypertext links on the page.


Tip

Hypertext links need to stand apart from other text on the screen so that users can recognize them as links. 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.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

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