|< Day Day Up >|
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
UP TO SPEED
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, choose Paragraph from the Format menu.
Choose TextParagraph FormatParagraph.
Press Ctrl+Shift+P (Shift--P).
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 (_1), for the Heading 1 style, Ctrl+2 (-2) for Heading 2, and so on.
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.
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.
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--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
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.)
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).
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.
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).
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.
|< Day Day Up >|