ptg Chapter 4 Managing Web Site Files 81 When you create a Web page, one of the first things to do is to apply some general settings to your page. The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages. Dreamweaver pro- vides the ability to embed these changes to the page in one of two ways: HTML or CSS. Dreamweaver formats text using CSS (Cascading Style Sheets), by default, and it would prefer to set page preferences in this manner. If you use the default CSS setting, Dreamweaver uses CSS tags for all properties defined in the Appearance (CSS), Links (CSS), and Headings (CSS) categories of the Page Properties dialog box. The CSS tags defining these attributes are embedded in the head section of the page. To view the tags, simply click the Code button, located in the upper left corner of the document window, and Dreamweaver changes the view from Design to Code. Scroll up to the Head section of the document and view the property codes. If, however, you want to use HTML tags, you can set page preferences in the Appearance (HTML) category of the Page Properties dialog box. The options are similar to those in the Appearance (CSS) category. The page properties you choose apply only to the active document. If a page uses an external CSS style sheet, Dreamweaver does- n’t overwrite the tags set in the style sheet, as this affects all other pages using that style sheet. Preparing to Set Page Properties Appearance (CSS) options From the Library of Wow! eBook ptg 82 Chapter 4 Setting Appearance Page Properties Set Appearance Page Properties Open the Web page you want to change. Click the Modify menu, and then click Page Properties. Click the Appearance (CSS) or Appearance (HTML) category. Select from the following options: ◆ Page Font and Size. Specify the font type and size you want. ◆ Text and Background Color. Specify the text and background color you want. ◆ Background Image. Specify the font type, size, and text color you want. ◆ Repeat. Specify how you want the background image to appear on the page. No-repeat appears once; Repeat appears tiled horizontally and vertically; Repeat-x appears horizontally; and Repeat-y appears vertically. ◆ Margins. Specify the page margins you want. Most designers place zeros in all four boxes (top, bottom, left, right), so when a visitor opens the page, all elements align to the upper left corner of the page. Click OK. 5 4 3 2 1 The Appearance category in the Page Properties dialog box allows you to set the default options for CSS and HTML you want for page font type and size, text and background color. You can also use a picture as the background for a page and specify how it appears. If you’d like to add some interest to your pages, you can add a background color. If the background image contains any transparent areas, the background color appears. When selecting background colors, some creative judg- ment is required. For example, if you choose a dark color for your back- ground, make sure you use a light color for your text (the most commonly used is white) to generate the appropriate contrast required for easy reading. 5 3 4 Appearance (HTML) category From the Library of Wow! eBook ptg Chapter 4 Managing Web Site Files 83 Setting Link Page Properties Set Link Page Properties Open the Web page you want to change. Click the Modify menu, and then click Page Properties. Click the Links (CSS) category. Select any of the following font options: ◆ Link Font. Specifies the default font family to use for links. (Default uses entire page font set in the Appearance category). ◆ Bold or Italic. Specifies whether to use bold or italic for links. ◆ Font Size. Specifies the default size to use for links. Select a color for the following options: ◆ Link Color. Displays color for linked text. ◆ Visited Links. Displays color for links you visit. ◆ Rollover Links. Displays color for links you point at. ◆ Active Links. Displays color for links you click. Click the Underline Style list arrow, and then select the underline option you want. Click OK. 7 6 5 4 3 2 1 The Links category in the Page Properties dialog box allows you to change the default nature of the links on a page. For example, a word defined as a link has a blue underline, by default. You could change the color to red. You can specify link colors for text, visited, rollover, and active links. In addition, you can even choose not to use an underline, or only have it appear when the visitor rolls over the text. 6 3 4 7 5 From the Library of Wow! eBook ptg 84 Chapter 4 The Headings category in the Page Properties dialog box allows you to specify the default settings for up to six heading styles. You can specify the font type, size, color, and formatting. For example, you can specify that every H2 heading style that is applied to text is 14 points and red. In addition, you have the option of choosing whether the heading styles are Bold or Italic style. Setting Heading Page Properties Set Heading Page Properties Open the Web page you want to change. Click the Modify menu, and then click Page Properties. Click the Headings (CSS) category. Specify the Heading font you want. Click the Bold and/or Italic buttons if you want. Specify the specific font size and color of the H1 through H6 heading styles you want. Click OK. 7 6 5 4 3 2 1 7 4 5 6 3 From the Library of Wow! eBook ptg Chapter 4 Managing Web Site Files 85 The Title/Encoding category in the Page Properties allows you to change the Web page title and specify the document encoding type you want. A Web page title is the text that visitors see on the title bar of their Web browser when they display the Web page. The document type and encoding options in the Page Properties dialog box allow you to specify the language you want to use for a Web page. File encoding makes sure your Web browser and Dreamweaver use the right charac- ter set for the selected language. The standard settings for a simple HTML page are: Document Type (DTD) XHTML 1.0 Transitional, Encoding Unicode 4.0 UTF-8, and Unicode Normalization None. Changing Title and Encoding Page Properties Change Title and Encoding Page Properties Open the Web page you want to change. Click the Modify menu, and then click Page Properties. Click the Title/Encoding category. Enter the title you want for the Web page title bar. TIMESAVER Enter a title in the Title box on the Document toolbar. Select from the following options: ◆ Document Type (DTD). Select XHTML 1.0 Transitional or XHTML 1.0 Strict to make new Web pages XHTML-compliant. ◆ Encoding. Select the language you want. The default for HTML encoding is Unicode (UTF-8), which safely represents all characters. ◆ Unicode Normalization Form. If you select Unicode (UTF-8) for encoding, select the form option you want: C, D, KC, or KD. Form C is the most common one used for the Web in the Character Model. The others are provided by Adobe. Click OK. 6 5 4 3 2 1 6 3 4 5 From the Library of Wow! eBook ptg 86 Chapter 4 A tracing image is a JPEG, GIF, or PNG formatted image that lays in the background to help you layout the page. For example, you could comp your site in Fireworks and then bring it into Dreamweaver to use as a guide to align tables and layers. Tracing images are not saved with the final document and don’t appear in a Web browser. It doesn't matter how big or complex the tracing images are because they are only used by Dreamweaver during the design phase. Once the file is saved and moved to the server, the tracing image goes away, and the file retains its original small size. Changing Page Properties for a Tracing Image Change Page Properties for a Tracing Image Open the Web page you want to change. Click the Modify menu, and then click Page Properties. Click the Tracing Image category. Click Browse, locate the image you want to use, select it, and then click OK. TIMESAVER Click the View menu, point to Tracing Image, and then click Load to insert a tracing image. Drag the Transparency slider to the percentage level you want for the image. Click OK. 6 5 4 3 2 1 6 3 5 See Also See “Using a Tracing Image” on page 204 for information on using a tracing image to create a Web page. 4 From the Library of Wow! eBook . (CSS) category. Select any of the following font options: ◆ Link Font. Specifies the default font family to use for links. (Default uses entire page font set in the Appearance category). ◆ Bold. you want the background image to appear on the page. No-repeat appears once; Repeat appears tiled horizontally and vertically; Repeat-x appears horizontally; and Repeat-y appears vertically. ◆. options: ◆ Page Font and Size. Specify the font type and size you want. ◆ Text and Background Color. Specify the text and background color you want. ◆ Background Image. Specify the font