This chapter is from the book

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

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.

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:

In Dreamweaver’s Design view, click in the page where you want to add text.

Type the text you want.

Selecting Text

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

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