Chapter 4. Working with Text

CONTENTS

graphics/01icon01.gif

 

  •  HTML and CSS
  •  Typing, Copying/Pasting, and Importing Text into Dreamweaver
  •  Formatting Text with the Property Inspector
  •  Text Formatting with the Dreamweaver HTML Styles Feature
  •  Special Characters
  •  Using Images as Text
  •  Working with Dynamic Text Elements
  •  Summary

HTML text is the staple food of the World Wide Web a fast-loading, flexible, and easily editable component that arguably has the potential to communicate more and better than anything else on the web.

With the rise of graphics and multimedia, text has begun to see some neglect, as designers spend more and more time and effort trying to dazzle viewers. Most web users are looking for information, however, and for that, well formatted and styled text is hard to beat. With the rise of Cascading Style Sheets (CSS), the possibilities for styling text are constantly pushing the old limits, and the opportunities for artistry in typography are as exciting as in the world of graphics.

Knowing how to add text to an HTML document and how to format it properly is essential to the craft of web page design.

HTML and CSS

Although HTML provides the <font> with which to style text, the use of this tag is now discouraged by the World Wide Web Consortium (W3C). Cascading Style Sheets (CSS) not only provide much more flexibility, but also adheres a lot more closely to the original concept of HTML as a structural markup language.

HTML Beginnings as a Structural Markup Language

The original concept for HTML was that of a language used to mark up text to describe the different structural elements of a document. HTML tags (see table 4.1) identified which portion of a document was a heading, which portions were paragraphs, which portion was part of a list, and which words needed to be emphasized. The browsers were designed to interpret these structural elements in such a way that the text onscreen made sense to the reader (see Figure 4.1). Not every browser displayed text the same; one might show text marked "emphasize" in italics and another boldfaced, but either way the text was emphasized. The goal was readable documents that would display with structural definition across a variety of platforms (see Figure 4.2).

Figure 4.1. Text styled only with structural markup is plain, but readable.

graphics/04fig01.gif

Figure 4.2. Basic structural markup tags as they display in a browser window.

graphics/04fig02.gif

Table 4.1. Common Structural HTML Tags

HTML Tag

Encloses What Kind of Text

<p></p>

Paragraph

<h1></h1>

Top-level heading

<h2></h2>

Second-level heading

<h3></h3>

Third-level heading

<em></em>

Emphasized

<strong></strong>

Strongly emphasized

<ul></ul>

Unordered list

<ol></ol>

Ordered list

<li></li>

List item

<blockquote> </blockquote>

Quoted text

Increasing Use of Presentational Markup

With the advent of graphical browsers and the rapid expansion of the web came the demand from HTML authors for new tags that would specify presentational effects rather than just structure. Designers were no longer satisfied to specify that a word needed to be emphasized somehow; they wanted to be able to specify exactly how the word would be emphasized (by bolding, for instance). In response to this pressure, physical elements such as <b> and <i> began to enter the language. Soon a structural language was evolving into a presentational one, and the <font> tag for styling text came into wide usage.

Note

graphics/01icon07.gif

Logical elements, such as <em>, indicate the meaning or role of certain text; the browser in some way should emphasize text marked <em>, but the markup doesn't dictate exactly how. Physical elements, such as <b>, do just the opposite: They specify how the text should be styled (in this case, in boldface), but indicate nothing about the part the text plays in the document's structure.

What's Wrong with Presentational Markup?

Web site designers were happy to have some control over presentation, but as they stopped using structural formatting, it was no longer possible to deduce the structure of the information from the source. This has a number of negative repercussions, including the following:

  • The code produced doesn't convey anything about the meaning of the text being presented. Structurally, these pages are just strings of letters. A speech-synthesis browser, for example, will read text marked with <h1> tags as a main heading; it will read text marked to be rendered in large type and bold just like any other text.

  • Unstructured markup is much more difficult to maintain. Text marked up logically according to the meaning of the content results in clean code that makes sense.

  • Unstructured pages are very difficult to index. If page headings and section headings are clearly marked, search engines can use them to enable the user to perform targeted searches for relevant information. (See Chapter 7, "Utilizing Head Content," for a full discussion of search engines and indexing.)

This Is a Job for CSS

The W3C quickly recognized that the nature of HTML was being changed by the increasing use of presentational markup and that a solution was needed. As a direct response, work began on Cascading Style Sheets, and in 1996, CSS was made a full W3C Recommendation.

CSS is designed to allow the web designer a lot of control over how his pages display, while retaining the basic essence of HTML as a structural language. It allows for much more complex and varied presentation of text than HTML ever could, permitting styling such as the creation of borders, determining the amount of space around elements, variations on capitalization, decoration (such as underlining), letter spacing, and many other possibilities (see Figure 4.3).

Figure 4.3. CSS allows for much more advanced typography than the styling possible with presentational HTML based on the <font> tag.

graphics/04fig03.gif

Almost as exciting is the lightening of the web developer's workload brought about by the use of linked style sheets, where a single change to a style declaration can affect specifically targeted text sitewide.

CSS is clearly the direction of things to come for web designers, and should be part of the tool kit of any serious web designer. The Cascading Style Sheets specification is covered thoroughly in Chapter 13, "Using Cascading Style Sheets."

Note

graphics/01icon07.gif

With the proliferation of new and alternative web browsing devices such as cellular phones, handhelds, personal digital assistants, and web TV, logical document structuring might well become critical. In conjunction with CSS, this approach allows for very different presentations as determined by the device being used to view the page exactly as in the original concept for HTML.

The <font> Tag as an Alternative

However, you also can style text by using the <font> tag. Although this is not ideal for the reasons previously discussed, and because it is deprecated (discouraged) by the W3C, if you need to style your text quickly and choose to postpone learning CSS, Dreamweaver offers formatting tools for this purpose, and this chapter explains how to use them.

Typing, Copying/Pasting, and Importing Text into Dreamweaver

Before text can be formatted and styled, it needs to find its way into a document in the first place. There are several ways this usually happens:

  • Text is typed directly into the document in Design view in Dreamweaver.

  • Text is copied and pasted from an outside source into the document.

  • Text is imported from a program such as Microsoft Word.

Typing Text Directly into a Dreamweaver Document

Text can be typed into any HTML document in the Dreamweaver Document window in Design view in much the same way as with a word processor. However, Dreamweaver enables you to format text only in ways that HTML allows; for instance, HTML does not allow tabs, and so none are available in Dreamweaver.

One difference between Dreamweaver and a typical word processor often confuses those just starting out, and that is the difference between a paragraph break and a line break. The following sections explain this.

Ending a Paragraph and Beginning a New Paragraph

In Dreamweaver, pressing Enter ends the current paragraph and begins a new paragraph; in the source code, both paragraphs are formatted with <p></p> tags. In the Dreamweaver Document window, the break between paragraphs displays as a double space; most browsers display paragraphs like this as well.

Ending a Line of Text and Beginning a New Line of Text

Pressing Shift+Enter ends the current line and begins a new line; in the source code, a <br> tag is entered. In the Dreamweaver Document window as well as in the browsers, the text just begins at the far left on a new line.

Tip

graphics/01icon07.gif

You can spell-check your text inside Dreamweaver. To access the spell checker, pull down Text > Check Spelling from the main menu, or use the keyboard shortcut Shift+F7.

Your typed-in text naturally will need some formatting; this can be done either with CSS (see Chapter 13) or with the <font> tag, explained later in this chapter.

Copying/Pasting Text from Another Program

If you want to paste text into Dreamweaver after copying it to the Clipboard from another program, you have two choices, which you can see by pulling down the Dreamweaver Edit menu. One is called Paste; the other is called Paste HTML. Although the reasoning for the names of these two options is slightly obscure, the difference between them is clear.

Paste inserts your Clipboard contents into your document, retaining the line breaks and, in some cases, the formatting (such as bold letters).

However, retaining line breaks from the original document is usually not a good idea. Ideally, text should "flow" inside its container on an HTML page, with line breaks being determined on-the-fly by the browser; having predetermined line breaks, or hard returns, will usually cause some undesired results.

However, the Paste option might be appropriate for situations in which you want the speed and convenience of dropping formatted text onto a Dreamweaver HTML document.

With Paste HTML, all line breaks are removed, leaving you with one long string of unbroken, unformatted text, retaining only the single-space breaks between words (see Figure 4.4).

Figure 4.4. Using the Paste HTML option removes all line breaks from a document copied from a browser or word processor window.

graphics/04fig04.gif

The main advantage of using the Paste HTML option is that, with all formatting removed, you can format your text exactly the way you choose. If the document is not a large or complex one, this is probably the best option.

The real use for Paste HTML, though, is for use with actual HTML code. So, for example, if you copy the contents of a web page, then paste into the Dreamweaver Design window, you will get text with line breaks and some simple formatting. If you view the source of that same web page, copy from the browser, then paste HTML within Code view, you get the entire page with all formatting.

Exercise 4.1 Copying/Pasting Text from Microsoft Word

This exercise requires Microsoft Word. Here you'll copy text from a Word document and paste it into a Dreamweaver document, using first the Paste feature, then the Paste HTML feature. This will clarify the difference between the two features.

Before you start, copy the chapter_04 folder on the CD to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.

  1. Within your local chapter_04 folder, find and open the file nc_facts.doc in Microsoft Word.

  2. Choose Site > Site Files View > New File to open a new Dreamweaver document. Name the document nc_facts.html.

  3. In the open Word document, choose Edit > Select All, and then Edit > Copy.

  4. Back in your new blank Dreamweaver document, place the cursor on the page and choose Edit > Paste. The text will be pasted into your HTML document. As you can see, most of the formatting from the Word document has been lost, but some paragraphs and line breaks have been retained. What was a bulleted list in Word is now a kind of jury-rigged list in Dreamweaver using a special character for a bullet. Switch into Code view to take a look at the source code; you can see that a somewhat random mix of <p> and <br> tags have been used to format the text. This illustrates why it is usually preferable to use the other Dreamweaver option, Paste HTML, and do the formatting yourself, as you'll see in just a moment.

  5. At the bottom of the Dreamweaver Document window, in the Quick Tag Selector, click the <body> tag and press Delete on your keyboard. This will delete all the content you just added.

  6. The copied text from the Word document is still in your Clipboard. Now choose Edit > Paste HTML. Your text will be pasted in again, but this time without the sketchy formatting.

  7. Save your Dreamweaver document; you'll return to it in Exercise 4.2.

Importing Text from Microsoft Word

You can copy and paste text from a Microsoft Word document as described in the preceding section. However, you might come across a Microsoft Word document that has elaborate formatting (such as charts and lists), which could mean hours of HTML coding for you. Instead of pasting the text and laboriously formatting it yourself, you can utilize some special features in both Word and Dreamweaver to save yourself time and produce a serviceable HTML document. First, use the Save as Web Page command in Microsoft Word (called Save as HTML in some versions of Word) and open the resulting HTML file in Dreamweaver.

Tip

graphics/01icon07.gif

You can open Word HTML inside Dreamweaver with the File > Open menu option.

Freshly imported into Dreamweaver, the code of a Word HTML document is full of extraneous markup. Take a close look at the code that appears at the top of Figure 4.5.

Figure 4.5. Microsoft Word HTML shown in Design and Code view.

graphics/04fig05.gif

The problem with using the Save as Web Page command in Microsoft Word is that Microsoft Word HTML is actually a mix of HTML and XML code. It also includes an abundance of CSS styles and countless <meta> tags, which significantly worsen the situation. The code in the upper window of Figure 4.4 is a far cry from the plain HTML you would write if coding by hand.

A Microsoft Word HTML file like the one in Figure 4.4 will usually look presentable in most web browsers, especially Microsoft Internet Explorer. As you've seen, however, the automatic conversion to HTML results in bloated and unwieldy code that is far from ideal simply due to its sheer size; it is also almost impossible to edit. If you have no need to edit the page in Dreamweaver or any other HTML editor, using the document as Microsoft Word produces it is an option.

If you want to be able to edit the Microsoft Word HTML file, however, you should use the Dreamweaver Clean Up Word HTML command first to remove extraneous code. Your cleaned-up document will be much closer to standard HTML, and it will be both easier and safer to make changes to it.

To use the Clean Up Word HTML command, open your Word HTML file inside Dreamweaver, and select Commands > Clean Up Word HTML.

Figure 4.6 shows the resulting window. The checked boxes inside this box indicate the Dreamweaver defaults.

Figure 4.6. The Clean Up Word HTML dialog box.

graphics/04fig06.gif

Inside this box you'll find two tabs, Basic and Detailed. Click OK to simply accept the defaults and convert the HTML, or choose from among the Basic or Detailed options. For more information about the options under the Basic tab, take a look at Table 4.2.

Table 4.2. Clean Up Word HTML, Basic Options

Option

Description

Remove All Word Specific Markup

Removes all XML from HTML tags and other formatting specific to Microsoft Word.

Clean Up CSS

Removes tags that refer to CSS, including inline CSS styles (as long as the parent style shares the same style properties). It also removes style attributes beginning with mso, and non-CSS-style descriptions. This is beneficial because Microsoft Word HTML relies heavily on CSS styles for formatting, most of them being document-level styles that increase page-loading time in the web browser.

Clean Up <font> Tags

Removes the <font> HTML tags and converts the default body text to size 2.

Fix Invalidly Nested Tags

Removes invalid <font> tags. Invalid <font> tags are those found in spotswhere the <font> tag shouldn't be, according to the W3C. Specifically, these are the <font> tags outside the paragraph and heading (block-level) tags.

Set Background Color

To use a hexadecimal value to set the background color of your document, enter it into the Text field box. Without a set background color, the document will have a gray background. By default, the background color is white, or #FFFFFF.

Apply Source Formatting

Applies the source formatting options that you specified in your sourceformat.txt file. This file is located in your Configuration folder. (See Chapter 34, "Customizing Dreamweaver," for more about setting your preferences.)

Show Log on Completion

Check this box to see a log listing what changes have been made.

You can use the options in the Detailed tab to make even more changes to the conversion.

After you make your selections, click OK. Dreamweaver processes the file and a cleaned-up version of the page appears in the Document window.

Tip

graphics/01icon07.gif

If you find that your HTML code contains unwanted tags even after you clean up, try looking at your HTML Format preferences (from the main menu, choose Edit > Preferences and then choose Code Format) to make sure you have them set the way you want. Alternatively, you can run an advanced Find/Replace query to get rid of even more tags, or run the general Clean Up HTML command. See Chapter 33, "Writing Code in Dreamweaver," for a full discussion of code rewriting, code formatting, and using Find/Replace for code cleanup.

Formatting Text with the Property Inspector

graphics/01icon05.gif

When working in Design view in Dreamweaver, and when portions of text are selected, the Property inspector can be used to format and style it in a number of ways. New in Dreamweaver MX is the ability to apply CSS classes to your text using the Property inspector; this is covered in Chapter 13. Here, however, we will be looking at the non-CSS text-formatting capabilities in Dreamweaver.

The Dreamweaver MX Text Property inspector has two modes that can be toggled: HTML Mode and CSS Mode. The options available to you from the Property inspector depend upon which mode you're working in. To apply HTML formatting, as we will be doing in the rest of this chapter, you want to be in HTML mode (see Figure 4.7).

Figure 4.7. The Toggle CSS/HTML Mode button.

graphics/04fig07.gif

Note

graphics/01icon07.gif

Throughout this chapter, it is assumed that you are working in Dreamweaver Standard view, not in Layout view.

Note

graphics/01icon07.gif

Remember that text in the Dreamweaver Document window must be selected to apply any formatting with the Property inspector (see Figure 4.8).

Figure 4.8. Text-formatting options of the Property inspector.

graphics/04fig08.gif

Paragraphs, Headings, and Preformatted Text

The drop-down list in the upper-left corner of the Property inspector enables you to style selected text as a paragraph, as any one of the six heading sizes, or as preformatted text. You've already read about paragraphs and headings earlier in this chapter; they are essential structural page elements.

The Preformatted Text option is used when the exact formatting of certain text must be preserved, including its spacing, returns, and tabs. Because HTML default behavior is to ignore this type of spacing, Preformatted Text is provided to enable you to retain them; the text won't reflow when the browser is resized, as with ordinary HTML text. Two instances in which preformatted text might be used are when formatting poetry or source code on an HTML page. Browsers generally render preformatted text in a monospaced font such as Courier.

Choosing Fonts

The next option to the right on the Property inspector is an unlabelled drop-down list that enables you to choose a font face (or typeface) for your text.

Tip

graphics/01icon07.gif

You also can access most of the formatting options for selected text available in the Property inspector by pulling down the Text menu.

Choosing a font for your text is simple: Just select the text, and in the drop-down list, click your choice. However, some explanation of why Dreamweaver offers these lists of fonts is called for.

It's important to understand how browsers work with regard to fonts. The crucial thing to remember is that the end user will see only fonts that he has installed on his local hard drive. If you specify a font that a particular user doesn't have installed, your text will display in his browser's default font, usually Times New Roman.

Because most web designers want to have as much control as possible over the font that displays on a web page they've created, the <font> tag's face attribute is usually written so that it includes a list of fonts, beginning with the designer's first choice, including several more choices, and finishing with a generic font category. This way, if the designer's first choice isn't available, hopefully the second or third choice is. If none of the specific font face choices are available on the user's computer, at least some font from the generic font family will be used.

On Windows, the most commonly installed fonts are Times New Roman, Arial, Courier New, Verdana, Georgia, Trebuchet MS, and MS Comic Sans. On a Mac, the most commonly installed fonts are Times, Helvetica, Courier, Verdana, Georgia, Trebuchet MS, and MS Comic Sans.

The Dreamweaver Property inspector offers you the following font-face combinations:

  • Arial, Helvetica, sans serif

  • Times New Roman, Times, serif

  • Courier New, Courier, mono

  • Georgia, Times New Roman, Times, serif

  • Verdana, Arial, Helvetica, sans serif

Although this might seem at first glance to be a rather limited selection, these combinations have been chosen carefully to present a first choice for both Windows and Mac platforms and a generic font family. By using one of these combinations, you can be confident that your text will display in the font you've chosen, or at the very least, a similar font.

Tip

graphics/01icon07.gif

Verdana (sans serif) and Georgia (serif) are both good choices for body text on web sites. A type designer named Matthew Carter, who was hired by Microsoft to create two very readable screen-based families, developed them especially for screen reading.

Adding and Removing Fonts and Font Combinations

You can add or edit this list of font combinations. On the Property inspector, at the bottom of the drop-down list of font combinations, you'll see the Edit Font List option. Click that to open the Edit Font List dialog box (see Figure 4.9).

Figure 4.9. The Edit Font List dialog box.

graphics/04fig09.gif

The Available Fonts listing shows the fonts installed on your computer's hard drive; this is the list from which you can choose. To add a new combination, first be sure that Add Fonts in List Below is selected in the Font List at the top of the dialog box. You can then add a new font by selecting one from the Available Fonts list and then clicking the button with the double left-pointing arrows. Add as many as you want to your new combination. Always finish a font combination with a generic font family; these can be found at the very end of the Available Fonts list. When your combination list is complete, click the plus (+) button at the top of the dialog box; your new combination will now be available in the Property inspector. You can remove a font combination completely by selecting it and clicking the minus (-) button at the top of the dialog box.

Editing existing font combinations is easy; just select the font combination and use the double arrows to add or subtract fonts from the combination.

When you're finished, click OK to close the Edit Font List dialog box.

Note

graphics/01icon07.gif

Text must be selected to apply any <font> tag styles with the Property inspector. There is no way to set a default font face, size, and/or color for an entire site or even an entire page using this method. However, a pagewide or sitewide style can be easily specified with Cascading Style Sheets; this is one of the primary strengths of CSS.

Setting Font Sizes

To the right of the font face drop-down list is a drop-down menu of font sizes. You can use the Property inspector to specify relative sizes (which are preceded by a plus or minus sign) or absolute sizes (plain numbers) for your fonts. What's the difference?

Relative font size values define the font size relative to the primary font size of a document. In most browsers, this default font size is 3. So, if you specify a font size of -1, the result will be the same as an absolute font size of 2.

Using absolute fonts enables you to override the font preferences selected in your user's browser, giving you more control over the way your pages look. If you specify a font size of 5, for instance, the font appears in your user's browser as size 5, regardless of the browser's default font size. Be aware, however, that some newer browsers are allowing the user to override even absolute font settings. It is best to never base a page design on the assumption that your text will render in precisely the way you specify.

When working using the Property inspector to format text with the <font> tag, you might become frustrated at the limited number of available font sizes. If so, it is time to learn how to use CSS.

Tip

graphics/01icon07.gif

If you have trouble applying font faces, it could be that you have inadvertently doubled your <font> tags by applying them too many times. Use the Clean Up HTML command (default settings) from the Commands menu to remove extra tags.

Text Colors

Colored text can increase the visual impact of your web pages. For instance, you might want to put your body copy in a color that contrasts against your heads and subheads. You also might want to use other techniques for example, make colorful headlines, subtle footnotes, or white text that pops out against a black background. Although it's not always easy to make design choices about text color, Dreamweaver helps you to implement those choices after you make them.

In the Property inspector, click the text color box. From the color palette that pops up, you can select your text color.

In the Property inspector, click the text color box. This accesses the standard Dreamweaver color palette, from which you can select your text color. (See "Working with the Color Picker" in Chapter 2, "Setting Up the Dreamweaver Workspace," for a discussion of how to use the color palette. If you want to learn more details about web color, see Chapter 8, "Design Issues.")

Bold and Italic

You can use the Property inspector to style your type as bold or italic, using the buttons marked B and I (see Figure 4.7). This will add <b> and <i> tags to your formatted text:

<font face="Arial">This is your <b><i>chance</b></i>!</font>

When text formatted as bold or italic is selected, the corresponding button will appear pressed down; the button can be used to toggle bold or italic formatting on and off.

graphics/01icon05.gif

New in Dreamweaver MX is the option to set a preference (Edit > Preferences > General) that will make using the B button insert a pair of <strong> tags and the I button insert a pair of <em> tags. Because <strong> and <em> are structural tags specifying the role of the text they are applied to rather than presentational tags, which specify only the how the text should be presented, their use is preferred by many web developers.

Alignment

The Property inspector offers four tools for aligning your text left, right, center, or fully justified (see Figure 4.8). The text-alignment tools are to the far right, on the top row, next to the question mark icon.

To align text to the right, left, or center, select it and then click the icon of the alignment type you want to use. To remove alignments, select the type again and click the button off.

Tip

graphics/01icon07.gif

When text is contained within a table cell, it can be aligned left, right, or center by setting the table cell alignment. Select the table cell using the tag selector (at the bottom of the Dreamweaver Document window) and from the drop-down Horizontal list, choose Left, Right, or Center.

Tip

graphics/01icon07.gif

Don't confuse text alignment with image alignment. When an image is selected, the Property inspector will display a drop-down list of image alignment choices; these affect the placement of the image in relationship to the text around it. Text alignment works very much the way it does in a word processor, and affects only the text itself.

Making Lists

Numbered and bulleted lists have been around since the beginning of HTML.

The two icons on the Property inspector used to make lists are located below the bold and italic icons (see Figure 4.7). To create a list, click the list button (either bulleted or numbered) on the Property inspector, and then type your first list item. When you've finished typing the item, press Enter; the cursor will move to the next line, and a new list item will be created.

Another way to create a list is to type the list items one by one, separating them by pressing Enter at the end of each line. Then, select the whole list and click the desired list button on the Property inspector. Note that if your list items are separated with simple line breaks (using the <br> tag), the list function considers everything on your list to be one single item, and only one bullet point appears, adjacent to the topmost list item.

To make a nested list, or a list inside a list, separate the nested list items with hard returns, select them, and press the Indent button on the Property inspector.

To remove numbered or bulleted list formatting, select the list item or items and click the Bulleted List or Numbered List icon.

The List Item button, below the two list icons, can be clicked when the cursor is within an existing list, and enables you to edit a number of list-formatting options.

Indenting Text

Sometimes you want to indent text without adding bullets or list numbers. You can do so by using the Indent and Outdent icons on the Property inspector. See Figure 4.7.

Select the text you want to indent and click the Indent icon. This moves your text inward, indenting from both the left and right margins. You can click the icon again to move the text in even more. However, it's important to remember that when using these indent icons you are actually inserting <blockquote> tags into your code, and when you click the icon several times, you're inserting several pairs of tags. The <blockquote> tag pair is intended to display quoted blocks of text; using multiple nested pairs of these tags is not good HTML.

The best way to indent text is with CSS (covered in Chapter 13). The indent icons provide a workaround, which can suffice in a pinch.

To remove indents, select the text and click the Outdent icon. This moves the text back to the left side of your document.

Exercise 4.2 Formatting Text with the Property Inspector

This exercise is divided into two parts. In this first part, you learn how to mark up the document structure.

If you haven't done so yet, copy the chapter_04 folder on the CD to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.

  1. Open the file nc_facts.html that you created in Exercise 4.1.

  2. In the Dreamweaver Document window, place the cursor after the words North Carolina and press Enter.

  3. Select the words North Carolina. In the Property inspector, from the Format drop-down list, click H1 to wrap this text in <h1> tags and make it a top-level heading (see Figure 4.10).

    Figure 4.10. Formatting paragraphs and headings with the Property inspector.

    graphics/04fig10.gif

  4. Now place the cursor after the words Essential Facts and press Enter. Select Essential Facts, and in the Format drop-down list, click H3 to style this text as a subheading. (You're skipping H2 and going straight to H3 for this next level of subheadings simply because H2 is usually rendered rather large in browsers.)

  5. Place the cursor after the words per square mile and press Enter. Notice that Paragraph appears in the Format drop-down list; this block of text is now formatted as a simple paragraph.

    Note

    graphics/01icon07.gif

    graphics/01icon06.gif

    In Dreamweaver MX, there is now a preference which will cause it to revert automatically to paragraph formatting after creating a heading and pressing Enter. This is usually more convenient than having the ensuing line made into a heading as well. To be sure this preference is chosen, go to Edit > Preferences > General and check Switch to Plain Paragraph After Heading.

  6. Place the cursor after State Nickname and press Enter. Select State Nickname and use the Property inspector's Format drop-down list to style it as another H3 heading.

  7. Place the cursor after the words tar their heels and press Enter.

  8. Select the words The Tar Heel State and from the menus, choose Text > Style > Strong.

  9. With the cursor after State Motto, press Enter.

  10. Select State Motto and again, in the Property inspector, choose H3.

  11. With the cursor after the words rather than to seem, press Enter. Select the complete quotation "To be, rather than to seem" and in the Property inspector, on the right side, press the button with the right arrow to wrap this text with <blockquote> tags.

  12. Place the cursor after Largest Cities and press Enter. Select Largest Cities and style it as another H3 heading.

  13. One at a time, place the cursor after each of the numbers in the last paragraph and press Enter. Then, select all four city names and population count numbers. In the Property inspector, on the right side, click the button that shows bulleted text to format this as an unordered list.

  14. Save your work, and if you want to, view the document in your favorite browser by pressing F12 (see Figure 4.11). This is very basic structural formatting; in the next part of this exercise, you try some more advanced text formatting using the Property inspector.

    Figure 4.11. Fully formatted page from the first part of Exercise 4.2 as it appears in Internet Explorer.

    graphics/04fig11.gif

In the second part of this exercise, you'll add some presentational styling to the document using the Property inspector.

  1. With the document from the first part of this exercise, nc_facts.html, still open, select the words North Carolina. In the Property inspector, from the Fonts drop-down list, choose the combination beginning with Courier New. Then click the color box and choose a nice Carolina blue, such as #3399FF, for this main heading.

  2. Select all the text from just below North Carolina to the end of the document, and choose the font combination that begins with Verdana.

  3. Select each of the H3 subheadings, one by one, and to each one do the following: Using the color palette, make them green (your choice of shades), and then make each italic by clicking the I button.

  4. Select the paragraphs of body text under each heading, one by one, and from the Font Size drop-down list, choose 2.

  5. Save your document and press F12 to view it in your default browser (see Figure 4.12).

    Figure 4.12. Fully formatted page from the second part of Exercise 4.2 as it appears in Internet Explorer.

    graphics/04fig12.gif

Text Formatting with the Dreamweaver HTML Styles Feature

If you are working with a large amount of text, it pays to explore options for automating the process.

The following section takes you through the ins and outs of a non-CSS, Dreamweaver-specific way to add automation to your text formatting: HTML Styles.

The Dreamweaver HTML Styles feature works in this way: A user-determined set of specific HTML tags is saved within Dreamweaver and then can be applied to selected text using the HTML Styles panel. This method enables you to quickly re-apply a set of HTML tags anywhere in your site.

It's important to understand, however, that HTML Styles uses no CSS whatsoever, but uses presentational HTML formatting, usually based heavily on the <font> tag. As discussed earlier, this type of formatting is not ideal; and in fact, in the HTML 4.0 specification released by the W3C in early 1998, the use of HTML formatting tags is deprecated. However, because it is available to you in Dreamweaver, it is explained here.

In some ways, this feature mimics CSS. However, it is important to be aware of one major difference: If an HTML style is changed or edited, only future uses of that HTML style will reflect the changes; past instances of that HTML style will not be updated to reflect those changes. In contrast, CSS styles in a linked style sheet, when updated, instantly update instances of that style sitewide.

Dreamweaver HTML Styles are created by first formatting some text with the Property inspector, then saving this combination as an HTML Style in the HTML Styles panel. Figure 4.13 shows the HTML Styles panel.

Figure 4.13. The HTML Styles panel.

graphics/04fig13.gif

To access the HTML Styles panel, choose Window > HTML Styles.

Create a New HTML Style Based on Existing Text

You can create a new HTML Style from scratch, or based on formatting you have already applied to existing text. To create a new HTML Style based on existing text, follow these steps:

  1. If you have some already formatted text you want to use as the basis of the HTML style, select it.

  2. Select text that has the HTML formatting you want to use as the basis of your new HTML Style. (You'll need some existing formatted text to create an HTML Style.) In the HTML Styles panel, click the new style icon (the plus [+] button) in the lower-right corner.

  3. In the Define HTML Style dialog box, name the style. If you had formatted text selected before you started, its formatting will appear in the dialog box. If not, choose the formatting you want here. You also can adjust the formatting if you like.

  4. Determine whether you want to apply the HTML Style to selected text or to entire paragraphs. A paragraph style is applied to the entire paragraph in which the insertion point is located, whether or not the text is selected. Determine whether you want the HTML Style applied in addition to, or instead of, any existing formatting, either HTML or in-line CSS.

  5. Make selections from the Font Attributes or Paragraph Attributes fields as desired, to alter or add to the style already present in the selection.

  6. Click OK to close the dialog box and create the style.

Create a New HTML Style from Scratch

In the HTML Styles panel, click the New Style icon, and proceed in the same manner as when creating a new HTML Style based on existing text, as discussed in the preceding section.

Apply an HTML Style to Text

To apply a paragraph style, place the cursor within the paragraph. To apply a selection style, select the text. Then, follow these steps:

  1. In the HTML Styles panel, select the desired style.

  2. Apply the style one of two ways, depending on whether the Apply check box at the bottom of the panel is selected:

    • With Apply checked (selected), just click the style once.

    • With Apply unchecked (deselected), click the style and then click Apply.

Edit an HTML Style

To edit an existing HTML Style, follow these steps:

  1. In the HTML Styles panel, deselect the Apply check box to turn off the Auto Apply option. (If the Auto Apply option is not turned off, selecting a style will automatically apply that style to text in your document.)

  2. In the HTML Styles panel, select a style, and then click the triangle in the upper-right corner of the panel to display the drop-down context menu. Choose Edit. Or, you can double-click the style name.

  3. In the Define HTML Style dialog box, edit the style as desired. When you're finished, click OK.

Delete an HTML Style

To remove an HTML Style, follow these steps:

  1. In the HTML Styles panel, deselect the Apply check box to turn off the Auto Apply option.

  2. Select an HTML Style. Click the Delete Style (trash can) icon in the lower-right corner of the panel.

Note

graphics/01icon07.gif

When using HTML Styles, it is important to understand the difference between a paragraph style and a selection style.

A paragraph style, indicated on the HTML Styles palette with a paragraph symbol, applies that style to the entire paragraph, no matter whether any text is selected. In other words, if your cursor is blinking inside a paragraph, and you click a paragraph style in the HTML Styles palette, the style will be applied.

A selection style can be applied only if text is selected. A selection style is indicated in the HTML Styles palette by a lowercase a with a line beneath it (a).

Special Characters

When working with text, you will no doubt encounter a need for special characters such as accented letters, copyright symbols, or the angle brackets used to enclose HTML elements. To use such characters in an HTML document, they must be represented in the HTML by special codes that take the form &code, in which code is a word or numeric code indicating the actual character you need to display onscreen.

There are hundreds of special characters; this discussion focuses on the set provided by Dreamweaver.

How to Use Special Characters

To add a special character to your document in Dreamweaver, follow these steps:

  1. On the Insert bar, choose the Characters tab (see Figure 4.14).

    Figure 4.14. Inserting special characters with the Insert bar.

    graphics/04fig14.gif

  2. The Insert bar then offers you a series of icons that represent some of the most commonly used special characters. Click the character you want to use and it will appear in your text. If you switch to HTML Code view, you can see the code as it appears in the text.

An alternative method is to choose Insert > Special Characters from the Dreamweaver main menu.

If the special character you need is not listed, click the Insert Other Character icon, also located in the Insert bar, adjacent to the TM icon (see Figure 4.14). You also can use the Insert pull-down menu from the main menu bar and select Special Characters > Other.

This option results in a new window from which you can choose a special character (see Figure 4.15). When you click a character icon, it will appear in the text field box at the top of the window. You also can type your own special character code into the box.

Figure 4.15. The Insert Other Character dialog box.

graphics/04fig15.gif

Tip

graphics/01icon07.gif

You might find yourself using a special character frequently that isn't included with the set provided in the Insert bar. Adding a special character to the Insert bar is not difficult and is covered in Chapter 36, "Creating Extensions."

Using Images as Text

HTML text is one of the "lightest" components of any web site; a page can contain more than 5,000 words and still "weigh" only 40 KB. Text also flows easily with differences in the size of the browser window, and can be edited very quickly. Because of these major advantages of text over images, it is almost always best to use straight HTML text whenever possible, instead of using images containing text.

Exceptions apply, however. As discussed earlier in this chapter, HTML text can display only in a font face installed on the user's computer; this greatly limits the designer's options with regard to typefaces. This is usually acceptable for body text, where fancier typefaces are usually a detriment anyway. For titles and headings, however, it is sometimes desirable to use an unusual typeface. GIF and JPEG images and Flash text enable you to achieve this, and merit a mention here.

Using Images for Titles

With a graphics program such as Fireworks, it is a fairly simple matter to create an image containing text in any font face installed on your computer. Of course, almost limitless choices of size and color are available, as well as special effects such as drop shadows and bevels. This type of graphic can usually be saved as a GIF file with a fairly small file size, and can easily be added to a Dreamweaver document using the Image object found on the Common tab of the Insert bar.

Flash Text

The Dreamweaver Flash Text object enables you create and insert a Flash movie that contains text only. This enables you to create a small, vector-graphic movie with the designer fonts and the text of your choice (see Figure 4.16).

Figure 4.16. The Insert Flash Text dialog box.

graphics/04fig16.gif

In addition to their small file size, a major advantage of using the Flash Text object over a GIF or JPEG image is that the Flash Text object enables you to provide a mouseover effect without using multiple images, as is necessary with ordinary graphic rollovers.

A potential disadvantage to using Flash for titles and other text is that visitors must have the Flash Player plugin installed in their browser to see it.

For a full discussion of Flash text, see Chapter 20, "Building Web Pages with Flash." For a discussion of plugin issues, see Chapter 19, "Plugins, ActiveX, and Java."

Working with Dynamic Text Elements

graphics/01icon02.gif

 

Dynamic text elements are the contents of database fields, placed in your page as text. Prices, names of things, and descriptions are all good candidates to be inserted as text elements. Depending on how much text the database field contains, the dynamic element can be as short as a few letters or words, or as long as several paragraphs. Dynamic text elements all appear as placeholders in Design view:

(Recordset1.category)

Or in Code view:

<%=(Recordset1.Fields.Item("category").Value)%>

Remember, the placeholder is not an indication of how much room the actual text will take up.

Inserting Dynamic Text

The simplest way to insert dynamic text into a document is to drag a recordset field from the Bindings panel into the Document window, wherever you want your text to appear (see Figure 4.17). After the text is in place, the Server Behaviors panel will show that a new Dynamic Element behavior has been added to the document.

Figure 4.17. Dynamic text, formatted as a list item and set to be a repeating region.

graphics/04fig17.gif

Formatting Dynamic Text

Any formatting you would normally apply to text, you can apply to the placeholder for dynamic text. Just select it and use the Property inspector or CSS panel as you normally would. If you look at your page in Code view, you'll see that the formatting code is wrapped around the placeholder code like this:

<h1><%=(Recordset1.Fields.Item("category").Value)%></h1>

Applying Prefab Formatting

You can tell Dreamweaver to build certain formatting instructions into the page code things like adding dollar signs or other currency symbols to numbers, displaying numbers with only a set number of decimal points, applying capitalization to text, and so forth. Do this:

  1. Insert some dynamic text.

  2. In the Server Behaviors panel, find the behavior that corresponds to the text you want to format.

    Tip

    graphics/01icon07.gif

    When you select a placeholder in Design view, the behavior responsible for creating that item should highlight in the Server Behaviors panel.

  3. Double-click the server behavior to edit it.

  4. In the dialog box that appears, choose your desired formatting from the pop-up Format list. When you're done, click OK.

Interspersing Dynamic Text with Regular Text

You can mix and match dynamic text placeholders and actual text any way you like. Two placeholders can be placed in subsequent paragraphs, or separated only by a space, or right next to each other whatever you need.

This code:

The lovely <%=(Recordset1.Fields.Item("category").Value)%> in our  jewelry collection are from known artists. The current page shows  <%=(Recordset1.Fields.Item("artistname").Value)%>'s most prized  works.

Will generate HTML like this:

The lovely bracelets in our jewelry collection are from known  artists. The current page shows Duncan Smith's most prized works.

Using Text Chunks as Repeated Regions

Any chunk of HTML code including individual words, lines, and list items can be turned into repeating regions that will display multiple records from a database. To turn a piece of text into a repeating region, simply select it and, from the Server Behaviors panel, choose Repeat Region.

Warning

graphics/01icon07.gif

Make sure you have selected carefully, so you're repeating exactly the code you want this might mean working in Code and Design view so you can see the HTML source as you work. To repeat a list item, for instance, you want to make sure the opening and closing <li> tags are both selected, but not the <ul> or <ol> tags around them.

Summary

Text is a critical aspect of any good web site, and Dreamweaver provides many excellent tools for incorporating and manipulating text. This chapter discussed the various ways to bring text into a Dreamweaver document, the difference between structural and presentational markup, the importance of Cascading Style Sheets, and the features Dreamweaver offers to make styling text with presentational HTML markup easy.

CONTENTS


Inside Dreamweaver MX
Inside Dreamweaver MX (Inside (New Riders))
ISBN: 073571181X
EAN: 2147483647
Year: 2005
Pages: 49

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net