Dreamweaver Book.com Dreamweaver Book.com
The companion site for
Dreamweaver CS3: Visual QuickStart Guide
 

Sponsored Advertising:



Chapter 4: Adding Text To Your Pages

(Part 1 of 4)

From Dreamweaver CS3: Visual QuickStart Guide, by Tom Negrino and Dori Smith.

Sample Chapter is provided courtesy of Peachpit Press.

Click thumbnails to open figures in a new window.

 

The main message of most Web sites is conveyed by the site's text, and a major part of your job in working with any site will be adding, modifying, and styling that text. Dreamweaver gives you the tools you need to effectively put text on your pages and get your message across.

When you add text, you need to deal with two different aspects of the text: its structure and its presentation. Structural elements are things like paragraphs, headings, lists, and the like; presentation is how the text looks, including things like the font, font size, text color, and so on. Most sites these days separate the structure and the presentation. Structure is about organizing the content on the page, and presentation is concerned with making the content look good.

In this chapter, we'll concentrate on getting text onto your page, and how to apply structure using headings and lists. We'll also cover using basic HTML text styles to change the look of your text. You'll learn how to more precisely style text and present it using Cascading Style Sheets in Chapter 5.

Adding Text

Most of the text on a Web page is formatted in blocks, which are enclosed by beginning and ending HTML tags. For example, the HTML for a line of text with paragraph tags wrapped around it looks like this:

<p>This text is wrapped in beginning and ending paragraph tags.</p>

In order for a browser to understand that this is a paragraph, you (or in this case, Dreamweaver) have to make it one by adding the surrounding <p> tags.

Of course, in Dreamweaver's Design view, you won't see the HTML tags. All of the text contained between the opening <p> tag and the closing </p> tag is considered by a Web browser to be within the same paragraph, no matter how much text is between the tags. The <p>...</p> combination is an example of a container tag. Virtually all of the structural formatting that you can apply with Dreamweaver is done with container tags.

When you add text to a page with Dreamweaver, the program automatically wraps the text with paragraph tags when you press the Enter (Return) key on your keyboard. You can see this if you switch to Code view, by clicking the Code button at the top of the Dreamweaver editing window, as shown in Figure 4.1.

Figure 4.1

Figure 4.1 Dreamweaver adds paragraph tags around text when you press the Enter (Return) key.

Dreamweaver also has special commands that help you import entire Microsoft Word or Excel documents as Web pages. (See "Using Paste Special," later in this chapter, and Chapter 16 for more information.)

To insert text:

  1. In Dreamweaver's Design view, click in the page where you want to add text.
  2. Type the text you want.

Cutting, Copying, and Pasting Text

Just like a word processor, you can cut, copy, and paste text on a page in Dreamweaver, which shares the same menu commands with virtually all standard Windows and Mac word processors and text editors. When pasting text in Design view from one part of a Dreamweaver page to another, or between Dreamweaver pages, text formatting is automatically maintained.

Dreamweaver also allows you to paste text and maintain some or all of the text's formatting. This is especially useful when moving text from applications such as Microsoft Word or Excel to a Web page. See "Using Paste Special," later in this chapter.

To cut or copy text:

  1. Select the text you want to cut or copy.
  2. To cut the text to the Clipboard, choose Edit > Cut, or press Ctrl-X (Cmd-X) on the keyboard.

    or

    To copy the text to the Clipboard, choose Edit > Copy, or press Ctrl-C (Cmd-C) on the keyboard.

    The text is placed on the Clipboard.

Selecting Text

Besides selecting text by dragging over it with the mouse cursor, Dreamweaver also gives you some text selection shortcuts:

  • Double-click a word to select it.
  • Move your cursor to the left of a line of text until the cursor changes from an I-beam to an arrow pointing at the text. Then click once to highlight a single line, or drag up or down to select multiple lines.
  • Triple-click anywhere in a paragraph to select the entire paragraph.
  • For finer control over selecting individual letters, hold down the Shift key and press the left or right arrow keys to extend the selection one letter at a time.
  • Ctrl-Shift (Cmd-Shift) plus the left or right arrow key extends the selection one word at a time. Ctrl (Cmd) plus the left or right arrow key moves the cursor one word to the left or right, but doesn't select any text.
  • Press Ctrl-A (Cmd-A) to Select All (the entire contents of the current document).

To paste plain text:

  1. Click to place the insertion point on the page where you want the text to appear.
  2. Choose Edit > Paste, or press Ctrl-V (Cmd-V) on the keyboard.

Dragging and Dropping Text

If all you want to do is move some text from one place on a page to another, it's often faster to drag and drop the text.

To drag and drop text:

  1. Select the text you want to move (Figure 4.2).
    Figure 4.2

    Figure 4.2 Begin dragging and dropping text by selecting it.

  2. Move the cursor over the selected text.

    The cursor changes from an I-beam to an arrow.

  3. Click and hold your mouse button over the selected text, and drag it to its new location, releasing the mouse button when the cursor is where you want the text (Figure 4.3).
    Figure 4.3

    Figure 4.3 When you release the mouse button, the text moves to where you dropped it.

    The text moves to its new home.

Using Paste Special

Dreamweaver's Paste Special command in the Edit menu gives you a variety of options that control the way formatted content is pasted into Dreamweaver's Design view.

You will probably use the Paste Special command most often when pasting in text from Microsoft Word or Excel, in order to maintain the formatting that the text had in those programs (Figure 4.4). Text pasted in from Excel can appear in Dreamweaver as a formatted table which saves you a lot of time and effort.

Figure 4.4

Figure 4.4 Paste Special does a great job of maintaining the formatting from Microsoft Word documents.

The Paste Special options are:

  • Text only pastes just the text; paragraph marks and all formatting are stripped from the text (Figure 4.5).
    Figure 4.5

    Figure 4.5 This is the "Text only" version of the text from Figure 4.4, with paragraph marks and formatting stripped out.

  • Text with structure pastes the text and maintains the structure (notably paragraphs, tabs, and lists), but eliminates other text formatting (Figure 4.6).
    Figure 4.6

    Figure 4.6 With the "Text with structure" option, the text in paragraph marks are there, but there's no character formatting.

  • Text with structure plus basic formatting keeps the text and text structure and retains bold and italic formatting (Figure 4.7).
    Figure 4.7

    Figure 4.7 The "Text with structure plus basic formatting" option maintains bold and italic formatting.

  • Text with structure plus full formatting preserves the text, structure, and styles from the original document (Figure 4.8).
    Figure 4.8

    Figure 4.8 The final option, "Text with structure plus full formatting," maintains all the formatting from the Word document.

To use Paste Special:

  1. Select the text you want to cut or copy.

    The text will usually be in a different application than Dreamweaver.

  2. Cut or copy the text.
  3. Switch to Dreamweaver, and click to set the insertion point where you want the text to appear.
  4. Choose Edit > Paste Special, or press Ctrl-Shift-V (Cmd-Shift-V).

    The Paste Special dialog appears (Figure 4.9).

    Figure 4.9

    Figure 4.9 Choose the option that you want from the Paste Special dialog.

  5. In the dialog, click the radio button next to the paste option you want.
  6. Click OK.

    The text pastes in according to the option you selected.

Applying Headings

After paragraphs, headings are the most important structural element on most Web pages. Headings point your site's visitors to essential information on the page, and they separate sections of the page. Think of headings as being similar to headlines in a newspaper.

Text you enter into Dreamweaver begins with no heading; Dreamweaver refers to this text as None in the Property Inspector. As soon as you press Enter (Return), Dreamweaver wraps the text in paragraph tags, and the text becomes paragraph text.

HTML has six sizes of headings, plus paragraph text, as shown in Figure 4.10. These headings don't have a fixed point size, unlike headings in say, Microsoft Word or Adobe InDesign. Instead, they are sized relative to one another and the size of the paragraph text, and the size that the user sees depends on the settings in the user's Web browser. By default, headings are usually displayed in boldface.

Figure 4.10

Figure 4.10 Here are examples of the six Heading sizes, plus Paragraph, which is usually used for body text.

You can change the look of headings (their size, font, color, and so forth) using CSS, which we'll cover in Chapter 5.

To apply a heading:

  1. Click in the line you want to change.

    Note that you don't have to select text; a heading is a block style, so it affects the entire paragraph the cursor is in.

  2. Choose Text > Paragraph Format >

    Heading x, where x is the heading size you want (Figure 4.11).

    Figure 4.11

    Figure 4.11 Choose the heading size you want from the Paragraph Format submenu.

    or

    Press Ctrl-1 for Heading 1, Ctrl-2 for Heading 2, and so on. On the Mac, press Cmd-1 for Heading 1, Cmd-2 for Heading 2, and so on.

    or

    Choose a heading from the Format pop-up menu of the Property Inspector (Figure 4.12).

    Figure 4.12

    Figure 4.12 Another way to choose the heading size is to use the Format pop-up menu of the Property Inspector.

    or

    Click one of the heading buttons in the Text tab of the Insert Bar (Figure 4.13).

    Figure 4.13

    Figure 4.13 The Text tab of the Insert Bar gives you buttons with many options, including ways to apply three heading sizes.

    There are only buttons for Heading 1, Heading 2, and Heading 3, listed as h1, h2, and h3, respectively.

    The text changes to the heading you selected.

To turn text into paragraph text:

  1. Click in the line you want to change.
  2. Choose Text > Paragraph Format > Paragraph.

    or

    Choose None from the Format pop-up menu of the Property Inspector.

    or

    Press Ctrl-Shift-P (Cmd-Shift-P).

    Dreamweaver changes the text into a paragraph.

To remove heading formatting:

  1. Click in the line you want to change.
  2. Choose Text > Paragraph Format > None.

    or

    Press Ctrl-0 (Cmd-0). (Those are zeros, not the letter "O".)

    The Format menu of the Property Inspector changes to None, indicating that the text has no heading or paragraph style assigned to it.

Continued on Page 2 >>>


800 East 96th Street Indianapolis, Indiana 46240