Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

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 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.)

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<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.

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--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 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 TextParagraph FormatHeading 1-6.

Press Ctrl+1 (_1), for the Heading 1 style, Ctrl+2 (-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 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 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:

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 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 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).

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

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--]).

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 (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 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:

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

Choose TextOutdent.

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.