Dreamweaver 8 Design and Construction (OReilly Digital Studio)

6.1. Sorting Out Formats

Here's the best piece of advice that you're going to get in this entire chapter: when you're building a web page, you should always classify every block of text on the page according to its category or format, to use the Dreamweaver jargon. The reason is simple. The format identifies the text as a certain kind of thingi.e., a paragraph or a headingwhich in turn tells the browser how to display the text in question. As you saw in Chapter 1, when you apply a Dreamweaver format to a block of text, Dreamweaver marks it up with the corresponding HTML tags on your behalf.

The browser comes with built-in style rules for the various text formats, so if you give the browser a paragraph, it displays the text in a certain way. In most browsers, paragraphs appear in relatively small type, much like the running text in this book. If you like the way that the browser displays a particular format, then your job is done. But if you take exception to the generally poor aesthetic quality of built-in browser styles, as most designers do, then you have an excellent remedy at your disposal: you simply redefine its appearance to suit your needs.

You do this by way of a Cascading Style Sheet (CSS), which, as you'll recall from Chapter 1, is a set of style rules that govern the appearance of the elements that make up your site. In essence, a Cascading Style Sheet says something like this to the visitor's web browser: "When you see a block of text in the paragraph format, please display it in the Arial typeface with a type size of 10 points. But when you see a first-level heading, I want it in 16-point Verdana, and make it boldface."

Better still, you can define special styles to distinguish among several different appearances for the same format. Using these styles, you can create a general paragraph style for the content area of your layout, a separate paragraph style for the items in your sidebar, another paragraph style for the secondary navigation, and yet another paragraph style for the copyright notice in the footer, all in the same stylesheet.

You'll begin to construct your stylesheet in Chapter 12, after you've built the layout for your pages. For now, it's worth looking at the most common text formats and figuring out how best to use them.

6.1.1. About Headings

Use headings to mark off sections of content in the running text of your page.

Web browsers recognize six levels of headings. Level-one headings are the most important, like the front page headline in a newspaper. Level-six headings are the least important, like the headline of a classified ad. Figure 6-1 shows the standard appearance of the six levels of headings in a browser. Whatever custom designs you conceive for the headings in your stylesheet should follow the same basic idea of decreasing visual importance. At level one, your headings should scream. At level six, they should squeak.

The trick to using headings correctly on a web page is to start at level one and work your way down. The main content divisions in your page begin with first-level headings. If you require subdivision within each section, go to second-level headings, and then third-level headings, and so on, but don't skip from a first-level heading directly to a third-level heading. Always move down in incremental steps. This helps browsing devices to ascertain the underlying structure of your content.

6.1.2. About Paragraphs

It should come as no surprise that the paragraph format is for paragraphs of running text, much like the paragraph that you're currently reading. Figure 6-2 shows the default appearance of paragraphs in a browser. Notice that paragraphs aren't indented. Instead, the browser adds a line of whitespace to separate them. When you create a stylesheet for your site, you're not locked into this kind of formatting. Your paragraphs can be indented, and they don't need to have whitespace between them.

What may not be obvious is that the paragraph style is also the catchall for any block of text that isn't a heading or a list. The title of the web page, the items in the main navigation, and the copyright notice in the footer all fall into this category, so you mark them up as paragraphs in Dreamweaver. To distinguish the various types of paragraphs that you use, you create CSS class styles. This prevents the paragraphs in the running text from looking like the paragraphs in other areas, such as the navigation area.

6.1.3. About Lists

In web publishing, there are two types of lists: ordered lists and unordered lists. What distinguishes them is their leading character, or the typographical mark that precedes each list item. In an ordered list, the leading character is sequentialeither numerically (1, 2, 3) or alphabetically (a, b, c). By default, the browser gives you numerically sequenced ordered lists, as shown in Figure 6-3. With Cascading Style Sheets you can easily change the leading character to letters or Roman numerals. One nice feature of ordered lists is that that you don't have to number (or letter) the list items by hand. The browser automatically numbers them on your behalf. Remove an item from the middle of the list, and the browser renumbers your list.

In an unordered list, the leading character is a bullet, as Figure 6-4 shows. Again, with Cascading Style Sheets, you can change the default bullet to something other than a solid circle. You can even supply an image file of your own design.

Lists are most effective inside the running text of your page, although some designers choose to format their main navigation as a list. There are no special merits to marking up your navigation in this way as opposed to using paragraphs, although if you want to offset your navigation choices with bullets, then using an unordered list is smart thinking. As always, you can create a special class style for your navigation list to distinguish it visually from the lists that appear in your running text.