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 TitleTitling 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:
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 PropertiesIn 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 ColorSelecting 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 ImagesUsing 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.
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 MarginsPage 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 ColorAlthough 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.
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 ColorsThe Page Properties dialog box also allows you to set colors for various different hyperlink states. These states include
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. |