Topics covered in this tutorial:
- Defining Head Elements
- The Page Properties Dialog Box
- Choosing a Page palette
- Understanding meta and other head tags
- The Tags
- Inserting tags with the Meta object
Defining Head Elements
Information pertaining to the Web page overall is contained in the <head> section of an HTML page. Browsers read the <head> to find out how to render the page - for example, is the page to be displayed using the Western, the Chinese, or some other character set? Search engine spiders also read this section to quickly glean a summary of the page.
When you begin inserting JavaScript (or code from another scripting language such as VBScript) into your Web page, all the subroutines and document-wide declarations go into the <head> area. Dreamweaver uses this format by default when you insert a JavaScript behavior.
Dreamweaver enables you to insert, view, and modify <head> content without opening an HTML editor. Dreamweaver 4’s View Head Content capability enables you to work with <meta > tags and other <head> HTML code as you do with the regular content in the visual editor.
Establishing page properties
When you first start Dreamweaver, your default Web page is untitled, with no background image but a plain white background. You can change all these properties and more through Dreamweaver’s Page Properties dialog box. As usual, Dreamweaver gives you more than one method for accessing the Page Properties dialog box. You can select Modify -> Page properties or you can use the keyboard shortcut Ctrl-J (Command-J).
Manually Opening the Page Properties Dialog Box
Here’s the other way to open the Page Properties dialog box. Right-click (Command-click) any open area in the Document window - that is, any part of the screen not occupied by an image, table, or other object (text outside of tables is okay to click, however). From the bottom of the Shortcut menu, select Page Properties.
The Page Properties dialog box, shown in following Figure 4-1, gives you easy control of your HTML page’s overall look and feel.
Technically, some of the values you assign through the Page Properties dialog box are applied to the <body> tag; because they affect the overall appearance of a page, however, they are covered in this <head> section.
The Page Properties Dialog Box
The key areas of the Page Properties dialog box are as follows:
The Page Properties dialog box also displays the document folder if the page has been saved, and the current site root folder if one has been selected. The Tracing Image option is a powerful feature for quickly building a Web page based on design comps.
Choosing a Page palette
Getting the right text and link colours to match your background colour has been largely a trial-and-error process. Generally, you’d set the background colour, add a contrasting text colour, and then add some variations of different colours for the three different link colours - all the while clicking the Apply button and checking your results until you found a satisfactory combination. This is a time-intensive chore, to say the least.
However, Dreamweaver ships with a command that enables you to quickly pick an entire palette for your page in one fell swoop. The Set Color Scheme command, shown in following Figure 4-2, features palette combinations from noted Web designers Lynda Weinman and Bruce Heavin. The colours available in the command are all Web safe - which means that they will appear the same in the major browsers on all Macintosh and Windows systems without dithering.
