Working with Text in the Design View


Now that you know what tools are available for your use, it's time to start putting them to use. Probably the most common element of all web pages is text that conveys information. You enter text into Dreamweaver by either typing directly in the Document window or cutting/copying and pasting text from another source. You can select text for editing or cut and paste within the document, using many of the same menu commands and keyboard shortcuts available in most word processors.

After the text is entered into the Document window, you have many options for formatting it. Because text itself may not necessarily convey emphasis or emotion, a variety of styles, fonts, sizes, and colors can be used to tailor the message to the audience.

Paragraphs

Most of the text you'll be adding to your web pages is probably going to be formatted into standard paragraphs. To create a paragraph break, simply press (Return) [Enter] and a blank line of whitespace is inserted below the paragraph. You can then begin typing your new paragraph and the two blocks of text will be separated by whitespace.

Note

From a markup standpoint, Dreamweaver assumes your text is in paragraph format by default until you apply formatting to the contrary. All text within the <p>...</p> tag pair is formatted as one paragraph.


Line Breaks

Whitespace is important for control of design and readability. In most HTML editors, including Dreamweaver 8, when you press the (Return) [Enter] key, a new <p> tag is inserted. Dreamweaver also automatically inserts a new HTML paragraph with a nonbreaking space &nbsp; entity between the opening and closing tags. If you then type on this new line, the nonbreaking space is replaced with your content. If you leave the paragraph blank, however, the paragraph tags remain with a non-breaking space. Because the tag is not empty, browsers correctly interpret this paragraph as a blank line.

Conversely, you might want to start a new line of text without that blank line inserted by the paragraph tags. To do this, use a line break. A line break inserts a carriage return in the text without closing the paragraph tags and, thus, without inserting extra space between the two lines. If you view the line break in the code view, you'll see that a single <br> tag is inserted instead of the <p>&nbsp;</p> tags.

To add a line break to your text, place the cursor in the appropriate location and press the Shift+Enter key combination. You can also insert a line break from the menu bar by choosing Insert, HTML, Special Characters, Line Break.

With the line break inserted, the text is forced to a new line without additional whitespace between lines. Line breaks can also be used to force more whitespace within a paragraph if you add multiple breaks consecutively.

Styling Text

Styling the text used to present your content is usually one of the easiest ways to personalize the presentation of your information. Until the last few years, however, the use of the font element as the preferred method of styling left web developers with a very limited selection of "safe" fonts and attributes from which to choose. With the announcement of new HTML 4.0 standards, the font element has now been deprecated (meaning it's not recommended anymore) by the World Wide Web Consortium (W3C) and Macromedia has shifted the way that Dreamweaver 8 applies font styling to pages from the use of <font> tags to Cascading Style Sheets (CSS).

Note

Dreamweaver 8 has not abandoned the use of the font element completely. If you have existing projects that already use the font element, you can continue applying font styling in that manner by choosing Edit, Preferences, and in the General category remove the check in the box next to Use CSS Instead of HTML Tags.


The nice thing about using CSSs in Dreamweaver is you can have as much or as little control over them as you wish. If you're accustomed to using the standard fonts that have traditionally been "safe" for web use, the Font drop-down in the Property inspector enables you to apply a font and never have to touch a style sheet. Instead, Dreamweaver embeds the style into your document and you are able to reuse it over and over.

If, however, you would like to work with new fonts and styles that are available with the adoption of CSS, you can create custom style sheets that can easily be applied on a page-by-page basis or linked throughout your entire site. CSS is covered in depth a little later.

When applying a style to your text, you can modify several attributes easily via the Property inspector (see Figure 22.35).

Figure 22.35. The Property inspector puts the most common text style attributes within easy reach.


Setting the Font Face

In Dreamweaver, fonts are chosen from one of the predefined font groups available in the Font drop-down in the Property inspector. To apply a font to a block of text, simply select a range of text, and then choose from one of the six fonts.

When you apply the font, Dreamweaver automatically creates a style based on the font face, font size, and any other formatting and embeds it in the page. This makes the style available from the Style drop-down in the Property inspector and you can reapply it throughout your pages.

Setting the Font Size

Prior to the adoption of CSS as the preferred styling method, the font element used a set of arbitrary font sizes ranging from 1 to 7. The worst part about these sizes is that different browsers interpreted their sizes differently. This meant that text would appear differently in different browsers. Through the use of CSS, however, you can now control the exact pixel size of your fonts, ensuring that they are displayed consistently across every browser. To set the font size for a block of text, select the text and then choose the appropriate size from the Size drop-down in the Property inspector.

Just as it does with font styling, Dreamweaver creates a style for size changes that you make to a block of text. If the selected text already has a style applied to it, Dreamweaver updates that style to include the font size as well.

Setting the Font Color

The default text color for the page is set in the Page Properties dialog box. Unless you modified the page properties, the default color for text is black (#000000). To change the color of text from the default, select the text and then use the Color Picker in the Property inspector to select a new color (see Figure 22.36). The Text Color field uses the same Dreamweaver color picker as the Page Properties and other color tools. Alternatively, you can type the hexadecimal code in the text box to the right of the Color Picker.

Figure 22.36. Using the Color Picker to set the font color is a quick, visual way to colorize your fonts.


Tip

To return text to the default text color, either delete the hexadecimal value in the field next to the Color Picker or click the Color Picker and then click the white square with the red strikethrough.


Setting Font Styles

A font style is formatting such as bold or italic applied to a font. Styles can be used to show emphasis, provide editorial marks, or even differentiate between standard text and computer code.

Although the Property inspector enables you to apply bold and italic to a text block, you can also choose additional font styles by selecting Text, Style from the menu bar (see Table 22.2). If appropriate, you can also apply more than one style for the same text selection, such as when creating bold, italicized text.

Table 22.2. Font Faces and Their Uses

Font Style

HTML Element

Used For

Bold

b

Adding bold emphasis

Italic

i

Adding emphasis with italicization

Underline

u

Adding emphasis with underline

Strikethrough

s or strikethrough

Editorial purposes

Teletype

tt

Monospaced font

Emphasis

em

Usually displayed as italic

Strong

strong

Stronger emphasis than just using the emphasis style; usually displays as bold

Code

code

Text that represents a computer program listing

Variable

var

Text that represents a program variable

Sample

samp

Text that represents sample output from a program

Keyboard

kbd

Text that represents user input

Citation

cite

Source of a quote

Definition

dfn

Text that is a definition

Deleted

del

Text that has been deleted from the page

Insert

ins

Text that has been inserted into the page


If you select a style before typing, the style is applied to all subsequent text.

Caution

Remember to exercise caution when applying the underline style to a web page. Text that is underlined on your pages can be confused with a link.


Aligning Text

Paragraph alignment is used to position text relative to its confining margins, whether those margins are the page margins, a table cell, or a layer. To change the alignment of text, select the appropriate text and then click the Align Left, Align Center, Align Right, or Justify buttons on the Property inspector.

You can also align text by selecting Alignment from the Text menu or by using the appropriate keyboard shortcut.

Indenting Text

Text can be indented or outdented in several ways. Select the desired text and use one of the following methods to indent or outdent the text:

  • Use the Property inspector and click the Text Indent or Text Outdent button.

  • From the menu bar, select Text, Indent or Text, Outdent.

  • If the text you highlight is a list, you can right-click it and select List, Indent or List, Outdent from the context menu.

Indents and outdents can be applied multiple times until the text is positioned where you want. Although this is easy to do, it's not the preferred method for positioning text. A better solution is to use a table or CSS.

Creating Lists in Documents

Lists bring order and structure to text on the web. Large blocks of text are difficult to read onscreen, so lists tend to break things into manageable blocks of text that are much easier to read.

In HTML, you create list items by placing each item inside the <li>...</li> tag pairs. The list in its entirety also needs to be defined. The manner in which this is done depends on the type of list.

Unordered (Bulleted) Lists

An unordered list is used when the sequence of the items isn't important. Bulleted lists can be created from text you've already entered, or the list can be created as you type the text. To create a list, select the text you want to include in the list and click the Unordered List button on the Property inspector. If you want to create a new list, place your cursor in the appropriate place in the page and then click the Unordered List button. Any text you type after that is preceded by a bullet. To end a list, either press (Return) [Enter] twice or click the Unordered List button again.

List items are spaced more closely together than paragraphs (see Figure 22.37). If you look at the Code view, the unordered list is contained within a <ul>...</ul> tag pair.

Figure 22.37. An unordered list is used for items that don't need to appear in a specific order.


Font faces, colors, sizes, and styles can be applied to lists. Paragraph formatting, however, is likely to destroy the list layout, so it should be avoided. To remove list formatting, select the entire list and then click the Unordered List button in the Property inspector. The text itself remains, but the formatting of the list is deleted, as is the markup that created the list.

Ordered (Numbered) Lists

Ordered lists are used when items follow one another sequentially. Create these lists in the same manner as unordered lists, but click the Ordered List button instead. Examining the code, you can see that ordered lists are defined by the <ol>...</ol> tag pair.

One of the best features of an ordered list is its capability to renumber itself as items are added, deleted, or moved. To add an item to the list, position the insertion point at the end of the list item above which you want the addition to appear. Press (Return) [Enter] to add a new line; then type in the new item. To move an item in the list, either use the cut-and-paste method or highlight the list item and then drag it to its new location.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

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