Section 6.1. Sorting Out Formats

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.

TECHTALK

The format of a block of text identifies the text as belonging to a certain category, such as a paragraph or a heading.

BEHIND THE SCENES

It's entirely possible to leave unformatted text on your page. That is to say, you don't have to mark it up with any HTML tag whatsoever, and the browser still displays it as text.

While leaving text in the raw might sound like a tempting time-saver, this humble tome advises you in the strongest possible terms not to succumb. Always classify every piece of text according to its proper format. If you don't, you don't get the full benefit of applying CSS styles, because the browser isn't sure what the text is supposed to be: a paragraph, a heading, a table caption, or what have you. So when it comes time to design the default look of your paragraphs, only those paragraphs that you have expressly formatted as such receive your custom style, and your raw, unformatted text remains its boring old self in the browser window.

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.

Figure 6-1. The default appearance of the six levels of headings

TIP

It's very unlikely that the content on any given page of your site requires six levels of organization, so don't feel compelled to think of designs for six levels of headings. Three is usually more than enough.

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.

TIP

Be careful about using headings for the page title, the links in your navigation area, and so on. Many designers reach for the heading format whenever they want to make a certain piece of text stand out. But remember, with Cascading Style Sheets, you don't need headings for their appearance. You can make a special paragraph class style that's just as big and bold as a level-one heading. You should identify a piece of text as a heading only when it actually functions as a heading in the running text by separating sections of 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.

Figure 6-2. HTML paragraphs look like this by default

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.

TECHTALK

In an ordered list, the leading character or typographical mark in front of each list item is sequential.

Figure 6-3. Ordered lists are numbered by default

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.

TECHTALK

In an unordered list, the default leading character is a bullet.

Figure 6-4. Unordered lists are bulleted by default

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.

TIP

With CSS, it's also possible to create an unordered list that doesn't have a leading charactera bulleted list without the bullets, so to speak.