2.1 Adding Text in Dreamweaver

In many ways, Dreamweaver works like a word processing program. When you create a new document, the blinking cursor appears at the top of the page, ready for you to begin typing. When you finish a paragraph, you press Enter or Return to start a new one. Text, as well as anything else you add to a Web page, starts at the top of the page and works its way to the bottom.

2.1.1 Adding Special Characters

Many useful special characters—such as copyright or trademark symbols—don't appear on your keyboard, making them difficult or impossible to type. The Text tab of the Insert bar lets you use a variety of symbols and international characters quickly by clicking an icon.

To open this panel:

Choose Text from the menu on the Insert bar.
If the Insert bar isn't visible, choose WindowInsert to open it, or use the keyboard shortcut Ctrl+F2 (-F2).
The palette shown in Figure 2-1 appears. Many of the options let you add common HTML tags like the <b> (bold) and <strong> (strong) tags, most of which you can apply more easily using the Property inspector, as discussed in the next chapter. This panel also features less frequently used tags like <abbr> (abbreviation) or <dl> (definition list). You satisfy your curiosity about these tags using Dreamweaver's HTML reference (Section 10.6).
The last option on the bar is actually a menu that offers a wide range of symbols and international characters. Unlike regular Western characters, such as a or z, these special characters are represented in HTML by a code name or number. For instance, a trademark symbol (™) is written in HTML as ™.
From the menu at the right end of the Insert bar, select the symbol you wish to insert (see Figure 2-1).
Dreamweaver inserts the appropriate HTML code into your Web page. (Alternatively, you can select the Other Characters option to bring up the wider-ranging Other Character dialog box shown at bottom in Figure 2-1.)

If you set the encoding of your Web page to anything other than Western in the Page Properties window (by choosing ModifyPage Properties and clicking the Title/Encoding category), you can reliably insert only line breaks and non-breaking spaces. The other special characters available from the Character category of the Objects panel may not work.

Selecting Other Characters from the Characters menu (top) brings up the Insert Other Character dialog box (bottom). However, there are even more characters in the Western alphabet than are listed in this dialog box. You can find a table listing these characters and their associated entity names and numbers at www.w3.org/TR/ xhtml1/dtds.html#h-A2 .

2.1.1.1 Line breaks

Pressing Enter creates a new paragraph, exactly as in a word processor. Unfortunately, Web browsers automatically insert a blank line's worth of extra space above and below paragraphs—which can be a real nuisance if you're trying to create several singlespaced lines of text, like this:

702 A Street

Toadsuck, AR 98789

USA

Here, each part of the address is on its own line, but it's still just a single paragraph (and shares the overall formatting of that paragraph, as you'll learn in the next chapter).

NOTE

If you want to entirely dispense with the space that browsers insert between paragraphs, don't use line breaks each time. Instead, use CSS to eliminate the top and bottom margins of the <p> tag, as described in the tip in Section 6.7.5.

To create this effect, you need to insert a line break at the insertion point, using one of these techniques:

Select line break from the Characters menu on the Text tab of the Insert bar (the first menu option at top in Figure 2-1).
Choose InsertHTMLSpecial CharactersLine Break.
Press Shift-Enter.

When you place a line break in Dreamweaver, you may get no visual hint that it's even there; after all, a regular paragraph break and a line break both create a new line of text.

This is especially likely if you copy text from applications other than Microsoft Word or Excel. Text from other programs—especially email programs—can be loaded with an infuriating number of line breaks. To add to the confusion, a line break may go unnoticed if it occurs at the end of a long line. Your only hope is to make them visible, as follows:

Choose EditPreferences (or DreamweaverPreferences on the Mac), or press Ctrl+U (-U). Click the Invisible Elements category. Make sure the Line Breaks checkbox is turned on. Now you'll see each line break appear as a small gold shield ().

You can then select a line break by clicking the shield, and delete it like any page element. Better yet, select the shield, then hit Enter or Return, to eliminate the line break and create a new paragraph.

2.1.1.2 Non-breaking spaces

You may have noticed that if you type more than one space in a row, Dreamweaver ignores all but the first space. This isn't a glitch in the program; it's standard HTML. Web browsers ignore any spaces following the first one.

Therefore, a line like "Beware of llama," with several spaces between each word, would appear on a Web page like this: "Beware of llama." Not only do Web browsers ignore multiple spaces, but they also ignore any spaces that aren't between words. So if you hit the Space bar a couple of times to indent the first line of a paragraph, you're wasting your time. A Web browser won't display any of those spaces.

This feature makes good sense, because it prevents Web pages from being littered with extraneous spaces.

There may be times, however, when you need more than one space in a row. Consider the text navigation bar at the bottom of a Web page, a common Web page element that lists the different sections of a Web site. Visitors can click one of the section titles to jump directly to a different area of the site. For clarity, many designers like to add multiple spaces between the text links, like this:

News Classifieds Jobs

In all these cases, a non-breaking space can save the day. It looks just like a regular space, but it acts as glue that prevents the words on either side from being split apart at the end of a line. (That's why it's called a non-breaking space.)

NOTE

Designers used to use the non-breaking space to create an indent on the first line of paragraphs. Fortunately, you don't need to resort to such trickery anymore. The CSS Text-Indent property, described in Section 6.7.3, creates the same effect more efficiently.

But when designing Web pages, you'll probably be interested in this fascinating cousin of the regular Space bar for a different reason: it's the only "text spacer" you can use in HTML text.

To insert a non-breaking space, click where you wish to add the space, and then do one of the following:

Select Non-Breaking Space from the Characters menu on the Text tab of the Insert bar (the second menu option at top in Figure 2-1).

UP TO SPEED
Keeping Headlines Together

You can use non-breaking spaces as invisible glue that keeps two or more words together on a single line. That's a very useful tactic when you're dealing with headlines, for example, in which a single word, if forced onto its own line, would create unappealing white space and confuse the headline's meaning, as shown here.

Adding a non-breaking space between the words "Mother" and "Says" in this example ensures that those words won't get split across a line break, and helps clarify the presentation and meaning of this headline. You can use any of the three methods described on this page and the facing page. (There's also a CSS property called White-space to which you can apply the value "nowrap" [Section 6.7.6]. This move prevents words from wrapping to the next line, effectively gluing them together.)

figs/02_sb01.jpg

Choose InsertHTMLSpecial CharactersNon-Breaking Space.
Press Ctrl+Shift+Space bar (-Shift-Space bar).

If you often add multiple spaces, Dreamweaver offers a shortcut. Choose EditPreferences to open Dreamweaver's Preferences window (in Mac OS X, choose DreamweaverPreferences instead). Click the General category. Then turn on "Allow multiple consecutive spaces" under "Editing options." Now, whenever you press the Space bar more than once, Dreamweaver inserts non-breaking spaces.

In fact, MX 2004 is even smarter than that. It inserts a regular space if you press the Space bar just once, a non-breaking space followed by a regular space if you hit the space bar twice, and multiple non-breaking spaces followed by a final regular space if you hit the Space bar repeatedly. Since non-breaking spaces act like glue that keeps words stuck together (see the box in Section 2.1.1.2), the extra regular spaces allow the lines to break normally, if necessary.

2.1.2 Adding a Date to Your Page

The Common tab of the Insert bar offers an icon called Date. Clicking this icon () or choosing InsertDate opens the Insert Date dialog box (Figure 2-2). Either way, Dreamweaver inserts today's date, as your computer understands it, onto your Web page in progress. You can also specify whether to include the day of the week and the current time.

Select the format you wish from the Date Format list. There are thirteen different formats to choose from, such as March 7, 1974 or 3/7/74.

You may wonder why Dreamweaver includes an insert date function anyway. How hard is it to type Thursday, July 12?

Actually, the real value of the Insert Date feature lies in the "Update Automatically on Save" checkbox. Choosing this option forces Dreamweaver to update the date each time you save the document.

When you insert a date object (a placeholder for the actual date) onto a Web page, you have several additional options: If you want to add the day of the week, choose the format you want from the Day Format pop-up menu (top). You may also choose to add the current time in hours and minutes—in either military time (22:18) or regular time (10:18 PM)—from the Time Format pop-up menu (bottom).

Many designers use this feature to stamp their Web pages with dates that indicate when the contents were last updated. For example, you might type This page was last revised on: , then choose InsertDate and select the "Update automatically on save" option. Now, each time you make a change to the page, Dreamweaver will automatically change the date to reflect when you saved the document. You never again have to worry about it.

< Day Day Up >