Section 3.1. Paragraph Formatting | Dreamweaver 8[c] The Missing Manual

3.1. Paragraph Formatting

Just as you use paragraphs to help organize your thoughts into clear, well-structured , and cohesive units when you're writing a paper or letter, you organize content on Web pages into blocks of information within HTML tags (see Section 3.2.1 for more on tags). The most basic block of information is a simple paragraph, indicated in HTML by a paragraph tag, like this:

 <p>Hello. This is one paragraph on this Web page. </p>

To a Web browser, everything between the opening <p> and closing </p> tags is considered part of the same paragraph. Many Dreamweaver formatting optionsheadlines, lists, indents, and alignment, for examplecan apply only to an entire paragraph at a time, as opposed to individual words. In a word processor, you'd call this kind of formatting paragraph formatting; in Web design, it's called block-level formatting. The idea is exactly the same: these characteristics affect an entire paragraph (that is, a block of text, whether that's just one sentence or several sentences) at a time. ( Character-level formatting, on the other hand, can be applied to individual words or even letters . Bold and italic fall into this category, as described later in this chapter.)

Figure 3-1. Both these pages use different fonts, colors, and sizes to display text, but the one at bottom uses a consistent arrangement of styles to organize the text and guide the reader through the page. Notice how the headline "Linux Powers Airborne Bots," with its larger type, draws your eye to it immediately. Below that, the supplementary articles and their summaries are easy to identify and read. In the page at top, by contrast, while the name of the site is big and bold, the rest of the text on the page shares similar font sizes and colors. Nothing stands out or grabs your attention.

3.1.1. Paragraphs

When you create a new document in Dreamweaver and start typing, the text you type has no paragraph formatting at all, as indicated by the word None in the Format menu at the left side of the Property inspector. ( None isn't an HTML tag; it just means that your text isn't surrounded by any of the paragraph tags used in this menu<p>, <h1>, and so on.)

When you press Enter or Return, you create a new paragraph, complete with opening and closing <p> tags, as shown earlier, but your newly born paragraph still has no design applied to it. When your Web site visitors look at it, the font and size of your type are determined by their own Web browser preference settings. It may not look anything like the typography you saw in Dreamweaver.

UP TO SPEED
Separating Structure from Presentation

Formatting isn't just about good looks or fancy design. Some formatting options also give structure to a Web page, providing valuable insight into the organization of content on a page.

For example, the Heading 1 (<h1>) tag indicates a headline of the highest level and, therefore, greatest importance; the smaller Heading 2 (<h2>) tag represents a headline of slightly lower importance: a subhead. You'll see this kind of structure in this book. Each section begins with a headline ("Paragraph Formatting," on Section 3.1, for example), and includes subheads that further divide the content into logical blocks of information.

Structure is more about organizing content than making it look pretty. Whether or not the headlines in this book used different colors and fonts, the fundamental organizationchapter title, main headlines, subheads, bulleted lists, numbered step-by-step instructions, and paragraphs of informationwould remain the same.

HTML is actually intended to provide structure to a document, rather than making it look good. In fact, for some types of visitors (people who can't see, computer spiders that crawl Web sites for information, search engines, or text-only browsers, for example), how a Web page looksits presentationis irrelevant. What matters are the cues that let the visitor know what the content means.

For a while, HTML did double duty, giving structure through tags like <h1>, <ul> (for bulleted lists), and <p> (for a paragraph of information), and providing visual design with tags like <font> (for setting font types, colors, and sizes).

Today, however, the World Wide Web Consortium (W3C, the main organization for determining the current and future standards for the Web) considers this approach outmoded. It has officially deprecated HTML tags that add design to a page, like the <font> tag, which means that future versions of HTML (and possibly future versions of Web browsers) won't recognize them.

Dreamweaver 8 takes the same approach. The program comes with old-style, design-oriented HTML tags turned off. (To turn them back on, see Section 1.3.1.) Instead, to provide visual design to a page, you should use Cascading Style Sheets, just as professional designers do.

CSS provides much more advanced and beautiful design possibilities than HTML ever did. In other words, let HTML provide the structure; let CSS create the presentation. HTML gives order, while CSS makes everything look good.

Chapter 6 covers CSS in depth, and throughout the book, you'll find notes that indicate when you can use CSS instead of HTML to achieve the same design goals.

You can add the Paragraph format to any block of text. Since this formatting option affects all of the text in the block, you don't need to select any text as a first step. Simply click inside the block of text and do one of the following:

In the Property inspector (Figure 3-2), choose Paragraph from the Format menu.
Choose Text Paragraph Format Paragraph.
Press Ctrl+Shift+P (Shift-P).

Figure 3-2. The formatting choices labeled here in bold apply to an entire paragraph. The other options represent inline, or character-level, formatting options; they apply only to the currently selected text.

Note: Much to the chagrin of Web designers, Web browsers display a line's worth of blank space before and after block-level elements like headings and paragraphs. This visual gap is distracting, but unfortunately , you can't get rid of it with regular HTML.However, many of the formatting limitations of HTML, including this one, go away when you use Cascading Style Sheets. See the Tip on Section 6.7.4.1 to fix this problem.

3.1.2. Headlines

Headlines announce information ("The Vote Is In!") and help organize content. Just as this book uses different levels of headings to introduce its topicsfrom chapter titles all the way down to subsectionsthe HTML heading tag comes in a variety of sizes used to indicate importance.

Headlines range in size from 1 (largest) to 6 (smallest), as shown in Figure 3-3. They provide organization to a document, much like an outline has headings, subheads, and sub-subheads.

To turn a paragraph into a headline, click inside the line, or block, of text and then do one of the following:

In the Property inspector, select one of the heading levels (Heading 1 through Heading 6) from the Format menu.
Choose Text Paragraph Format Heading 1 (or Heading 2, Heading 3, and so on).
Press Ctrl+1 ( -1), for the Heading 1 style, Ctrl+2 ( -2) for Heading 2, and so on.

Figure 3-3. You can apply any of eight basic paragraph formats to a block of text: Headings 1 through 6, Paragraph, and Preformatted. If you don't add any special modifications to the individual paragraph formats, they vary in size, font, and boldness, as you can see here.

3.1.3. Preformatted Text

Web browsers normally ignore extra spaces, tabs, and other blank space characters in the underlying HTML when displaying a Web page. However, using the Preformatted paragraph format, you can override this behavior. Preformatted paragraphs display every text character in a paragraph, including tabs, multiple spaces, and line breaks, so you don't have to resort to multiple nonbreaking space characters (see Section 2.1.3) to insert more than one space in a row.

The original idea behind the Preformatted format was to display tabular dataas in a spreadsheetwithout the use of tables. That's why preformatted paragraphs show up in a monospaced font like Courier. In monospaced fonts, each letter of the alphabet, from i to w, is the same width and takes up the same horizontal space on a page, making it easy to align letters in columns. That's also why, when you use this paragraph style, you can use tabs to align text in columns. (When you use any other paragraph format, Web browsers ignore tabs.) These days, however, Dreamweaver's table feature is a much more superior method of creating columns ; see Chapter 7.

Nonetheless, the Preformatted format can still be usefulwhen displaying sample HTML or programming code, for example. You can add the Preformatted format to any block of text. Simply click inside the block of text and then take one of these two steps:

In the Property inspector, choose Format Preformatted.
Choose Text Paragraph Format Preformatted Text.

Keep in mind that preformatted text appears exactly as you enter it. Unlike normal paragraph text, lines of preformatted text don't automatically wrap if they're wider than the window. That means if you present your site visitors with a really long line of preformatted text, they'll have to scroll horizontally to see all of it. To end a line of preformatted text and create another, you must press the Enter or Return key to create a manual line break.

3.1.4. Paragraph Alignment

All text in a Web page starts out aligned with the left edge of the page (or, in the case of tables, to the left edge of a table cell ). But there are times when you may want to center text in the middle of the pageperhaps an elegantly centered titleor align it to the right side. You can even create nice straight margins on both sides of a paragraph using the justification option. Although justified text looks elegantsimulating the typography of a fine bookthe formatting doesn't show up in some browsers (Internet Explorer 4, for example). While there are many ways to align text in Dreamweaver, the Property inspector's word processorlike controls make this a snap (or, rather, a click).

To change a paragraph's alignment, click inside a paragraph and do one of the following:

In the Property inspector, click one of the alignment icons in the upper-right corner (see Figure 3-2).
Choose Text Align Left, Center, Right, or Justify.
Use one of the following keyboard shortcuts:

Left : Ctrl+Alt+Shift+L (Shift-Option-

-L)

Centered : Ctrl+Alt+Shift+C (Shift-Option-

-C)

Right : Ctrl+Alt+Shift+R (Shift-Option-

-R)

Justify : Ctrl+Alt+Shift+J (Shift-Option-

-J)

UP TO SPEED
Keep Your Pages Lean

Many of the things that contribute to slow Web page downloadscongestion on the Internet, for exampleare out of your control. But you can do your part by making sure your pages are as compact as possible. For instance, keep the file size of graphics down and eliminate extraneous lines of HTML code. The more HTML you include in a page, the larger the file, and the slower the download.

An example of a situation in which extraneous HTML code is produced is when aligning text to the left. Text on a Web page aligns to the left of a page by default. You'd be pointlessly bloating your Web page, therefore, by specifying left alignment of your text using a paragraph's alignment property. In fact, when you encounter the phrase "by default" describing an HTML property in this book, it's a safe bet that you can get that effect without adding any HTML.

Other ways to keep your pages lean and fast are highlighted throughout this book, but remember this rule of thumb: the less HTML code you create, the faster your Web page downloads, and the happier your audience is. (A good target for a page's maximum size is 40 to 45 KB.

After you align a paragraph, the Property inspector displays a depressed button for the alignment option you chose, indicating what kind of alignment you've applied.

Note: Dreamweaver aligns text by adding code to the selected HTML tag. For example, centering a paragraph of text adds align="center" to the <p> tag. You can achieve the same effect with the Text-Align CSS property described on Section 6.7.3.

You can remove an alignment by reapplying the same alignment. For instance, if you've right-aligned a paragraph, clicking the right-align button in the Property inspector removes all alignment information and returns that paragraph to its original setting. (This method of resetting the paragraph is a better solution than clicking the left-align button, which adds extra lines of HTML code to do the same thing.)

3.1.5. Indented Paragraphs

Indenting a paragraph can set it apart from the paragraphs before and after it. It's perfect for adding a small amount of space on either side of a paragraph, and it's frequently used to present a long quote or passage from a book or other source. In fact, an indented paragraph is called a blockquote in HTML.

To indent a paragraph or block-level element like a heading, click it and do one of the following:

On the Property inspector, click the Indent button (see Figure 3-2).
Choose Text Indent.
Press Ctrl+Alt+] (Option-]).

Unfortunately, since indenting a paragraph simply nests that paragraph in a basic HTML <blockquote> tag, you don't have any control over how much space is added to the margins of the paragraph. Most Web browsers insert about 40 pixels of blank space on the left and right side of a blockquote.

You can add additional space to the margins of a paragraph by applying another indent, thus creating a nested set of blockquotes. To do so, click an already indented paragraph and repeat one of the indenting procedures described above. To add multiple indents, continue in this way.

Note: Technically, the <blockquote> is designed to identify quotes on a page, not to indent regular paragraphs of text.But if you use the CSS margin property (see Section 6.7.4.1) instead, you get superior formatting choices. For example, you can specify exactly how much indentation you want, right down to the pixel; specify indentation to just the left or right; and even provide independent indentation amounts for each side of the paragraph.

But what if you want to remove indents from a paragraph? Use Dreamweaver to outdent it, of course. (Yes, outdent is a real wordever since Microsoft made it up.)

To remove a paragraph's indent formattingthat is, remove a <blockquote> tagclick inside the paragraph and do one of the following:

On the Property inspector, click the Outdent button (see Figure 3-2).
Choose Text Outdent.
Press Ctrl+Alt+[ (Option-[).

You can continue to outdent a paragraph using one of these methods until the paragraph returns to the left edge of the page; at that point, the outdenting commands have no further effect.