Previous Section  < Day Day Up >  Next Section

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 0.2 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 options梙eadlines, lists, indents, and alignment, for example梒an 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.)

Both of 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 "Do We Really Need New Domains?," with its larger type, size 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, the largest type element, "Main Menu," sits in the middle of a scattered, randomly formatted sea of text.

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?lt;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 above, 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.

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梐 subhead. You'll see this kind of structure in this book. Each section begins with a headline ("Paragraph Formatting," 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 organization 梒hapter title, main headlines, subheads, bulleted lists, numbered step-by-step instructions, and paragraphs of information梬ould remain the same.

HTML is actually intended to provide structure to a document, not make 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 looks梚ts presentation梚s 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 MX 2004 takes the same approach. The program comes with old-style, design-oriented HTML tags turned off. (To turn them back on, see Section 3.3.) 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:

The formatting choices labeled here in italics apply to an entire paragraph. The other options represent inline, or character-level formatting options; they apply only to the currently selected text.
  • In the Property inspector, choose Paragraph from the Format menu.

  • Choose TextParagraph FormatParagraph.

  • Press Ctrl+Shift+P (Shift-figs/command.jpg-P).

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 can be 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 in Section 6.7.5 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 topics梖rom chapter titles all the way down to subsections梩he 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 TextParagraph FormatHeading 1-6.

  • Press Ctrl+1 (figs/command.jpg_1), for the Heading 1 style, Ctrl+2 (figs/command.jpg-2) for Heading 2, and so on.

3.1.3 Preformatted Text

Web browsers normally ignore extra spaces, tabs, and other blank-space characters 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 non-breaking space characters (see Section 2.1.1) to insert more than one space in a row.

You can apply any of eight basic paragraph formats to a block of text: Headings 1 through 6, Paragraph, and Preformatted. In their default settings, they vary in size, font, and boldness.

The original idea behind the Preformatted format was to display tabular data梐s in a spreadsheet梬ithout 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 superior method of creating columns; see Chapter 7.

Nonetheless, the Preformatted format can still be useful梬hen 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:

  • Choose FormatPreformatted in the Property inspector.

  • Choose TextParagraph FormatPreformatted 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. 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 page梡erhaps an elegantly centered title梠r 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 elegant梥imulating the typography of a fine book梩he formatting doesn't show up in some olderrole="missingmanual" browsers (Internet Explorer 4, for example). While there are many ways to align text in Dreamweaver, the Property inspector's word processor-like 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 TextAlignLeft, Center, Right, or Justify.

  • Use one of the following keyboard shortcuts:

    Left: Ctrl+Alt+Shift+L (Shift-Option-figs/command.jpg-L)

    Centered: Ctrl+Alt+Shift+C (Shift-Option-figs/command.jpg-C)

    Right: Ctrl+Alt+Shift+R (Shift-Option-figs/command.jpg-R)

    Justify: Ctrl+Alt+Shift+J (Shift-Option-figs/command.jpg-J).

Keep Your Pages Lean

Many of the things that contribute to slow Web page downloads梒ongestion on the Internet, for example梐re 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.

Another example: 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 will download, and the happier your audience will be. (A good target for a page's maximum size is 40 to 45 K. Dreamweaver can help you determine your page's size, as described in Section 15.8.)

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.


When Dreamweaver aligns text using this method, it adds 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 in 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 default setting. (This 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:

  • Click the Indent button on the Property inspector (see Figure 3-2).

  • Choose TextIndent.

  • Press Ctrl+Alt+] (Option-figs/command.jpg-]).

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.


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 (Section 6.8) instead, you get superior formatting choices. For example, you can specify exactly how much indentation you want, right down to the pixel; the 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 word梕ver since Microsoft made it up.) To remove a paragraph's indent formatting梩hat is, remove a <blockquote> tag梒lick inside the paragraph and do one of the following:

  • Click the Outdent button on the Property inspector (see Figure 3-2).

  • Choose TextOutdent.

  • Press Ctrl+Alt+[ (Option-figs/command.jpg-[).

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.

    Previous Section  < Day Day Up >  Next Section