• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Editing Page Content > Using HTML Styles

Using HTML Styles

HTML provides quite a few methods for styling and formatting text that allow Web browsers to display text as bold, italic, colored, and so on.

Contribute shields you from the mechanics of HTML; you don’t need to know HTML to add formatting to your draft pages. Like word processors, Contribute uses familiar formatting tools, which you can find in the Editing toolbar (Figure 4.3) and in the Format and Insert menus.

Figure 4.3. The Editing toolbar provides most of the tools you’ll need to change the content on your draft pages.


Setting Font Styles

The most common text formatting is to make text bold or italicized, change the font, or change the size. Contribute groups controls for these settings together on the Editing toolbar (Figure 4.4). Contribute can also format text as Strikethrough (text with a thin line through it), Emphasis (another style of italic text), Strong (another style of bold text), or Fixed Width (text is monospaced, like old-fashioned typewriter type, or as in the Courier font).

Figure 4.4. The most common text-formatting controls are grouped together on the toolbar.


Your site administrator can allow or deny users the ability to apply HTML styles, so if some of these controls are disabled, you should check with the administrator.

To make text bold, italic, or underlined:

1.
Select the text you want to modify.

2.
Click the Bold button on the Editing toolbar, choose Format > Bold, or press Ctrl-B (Cmd-B).

or

Click the Italic button on the Editing toolbar, Choose Format > Italic, or press Ctrl-I (Cmd-I).

or

Choose Format > Underline, or press Ctrl-U (Cmd-U).

The text’s appearance changes.

✓ Tips

  • Though you can underline text with Contribute, I don’t recommend it, because people have come to expect that underlined text on Web sites indicates a link.

  • To remove a text style, select the text and click the style button again, reselect the menu command, or repeat the shortcut key command. Reapplying the format acts as a toggle, each click turns the formatting on or off.


To format text as Strikethrough, Emphasis, Strong, or Fixed Width:

1.
Select the text you want to modify.

2.
Choose Format > Other, then pick one of the four choices from the submenu.

✓ Tip

  • Your site administrator may have configured Contribute to use the Strong tag <strong> for bold text and the Emphasis tag <em> for italic text. These tags tell Contribute to use a more accessible version of the HTML it is creating behind the scenes, helping the visually disabled. You probably won’t notice a difference.


Setting Fonts and Font Sizes

In Contribute, you have the ability to set the typeface, or font, for any text on your page. But not all computers or Web browsers use the same fonts. If you specify a font that your site visitor doesn’t have on his or her computer, chances are the content won’t look the way you intend. Because neither you nor Contribute can be sure what fonts will be available to your site visitors, Contribute uses font combinations to work around the problem. Font combinations allow you to provide options for the browser by creating multiple font choices. For example, a font combination could include Arial, Helvetica, and Geneva fonts, and the Web browser would render the page using the first choice available to the browser. If none of the fonts in the combination are installed, the browser will display the text using whatever font is set as the default in the browser’s preferences. Contribute comes with six predetermined font combinations, and you can add more as you need them. Each choice in the Font menu represents the first font in that font combination.

Although Contribute is reminiscent of a word processor, it’s really not one, and it has the font-handling characteristics of HTML and CSS. Contribute 3 allows users, if allowed by their site administrator, to apply 16 font sizes, which it implements as CSS styles (Figure 4.5). The sizes in Contribute’s Font Size menu are listed in points, but Contribute actually creates equivalently sized CSS styles in pixels, as shown in Table 4.1. Contribute doesn’t give you the freedom to set custom font sizes, though designers, using CSS styles, can set custom sizes in Macromedia Dreamweaver templates (see the section “Using CSS Styles,” in this chapter).

Figure 4.5. Relative font sizes chosen from the Contribute Font Size menu. Not shown: the 26, 28, 36, 48 and 72 point sizes.


Table 4.1. Font Size Point/Pixel Equivalents
FONT SIZE MENU (POINTS)CSS STYLES (PIXELS)
811
912
1013
1115
1216
1418
1621
1824
2026
2229
2432
2634
2837
3648
4864
7296


The subject of font sizes on Web pages is actually quite complex, and it has generated much gnashing of teeth and heartache between designers, Web browser makers, and standards bodies. But Contribute makes a valiant attempt—largely successful—to shield you from the furor, so we’ll leave the angst to others and get on with building our pages.

To set a font or font size:

1.
Select the text you want to modify.

2.
Choose a different font from the Font menu in the toolbar, or choose Format > Font, and then choose the font from the submenu.

or

Choose a different size from the Font Size menu in the toolbar, or choose Format > Size, and then choose the font size from the submenu.

The text changes appearance.

✓ Tips

  • Contribute’s preset font combinations include fonts that are found on nearly every computer sold in the last several years. Most of these fonts are available for both Windows and Macintosh. For example, Arial, Courier, Georgia, Helvetica, Times New Roman, Verdana, and Trebuchet are all fonts that come standard on both platforms.

  • Contribute doesn’t allow you to enter a custom font size, as you can in many word processors.


Changing Font Combinations

You can modify the preset font combinations, and you can also create new font combinations.

To edit the Font List:

1.
In the Pages panel of the sidebar, switch to a new or draft page.

or

Browse to a page you want to edit, then click Edit Page.

2.
Choose Format > Font > Edit Font List. The Edit Font List dialog appears (Figure 4.6).

Figure 4.6. The Edit Font List dialog lets you define new font combinations.


3.
To add a font combination, click the plus button, then click the arrow buttons in the Available Fonts list and select fonts to move them to the Chosen Fonts list.

or

Select a font combination in the Font List, and click the minus button to remove it.

or

Use the arrow buttons above the Font List to move a selected font combination up or down in the list.

4.
Click OK to save your changes.

✓ Tip

  • You can type the name of a font not on your system in the field below the Available Fonts list, then click the left-facing arrow button to add that font to the Chosen Fonts list. You might choose to add a font when you want to use one you know is available on the systems of users who will be visiting your site. For example, if your site will attract many Mac OS X visitors, you can use some of the OS X system fonts, such as Lucida Grande, that are common on the Mac but not on Windows.


Assigning HTML Heading Styles

HTML supplies six levels of headings that you can use to call attention to text on your Web pages. Think of headings as being similar to headlines in a newspaper. They’re usually bigger than the body text on the page and are often bold. Headings are known as a paragraph style, so a line of white space may precede and follow a heading depending on how your Web administrator has set up your site. Heading styles are numbered, with Heading 1 being the largest and Heading 6 the smallest. Headings are selected from the Contribute Style menu on the Editing toolbar (Figure 4.7), or by choosing Format > Style. If your site administrator is using Cascading Style Sheets to format text on your site (see “Using CSS Styles,” later in this chapter), these heading choices might not be available.

Figure 4.7. You’ll find HTML headings in the Style menu on the toolbar.


One other choice appears in the Style menu—Normal, for the style Normal Text, which is the text used for the body of your document (Figure 4.8).

Figure 4.8. Here are examples of the six Heading sizes, plus Normal Text, which is usually used for body text.


To apply a heading style:

1.
Click within the line you want to make into a heading to place the insertion point.

2.
Select a heading size (1-6) from the Style menu in the Editing toolbar.

or

Choose Format > Style, then choose a heading style from the submenu.

The text is formatted as a heading.

Coloring and Highlighting Text

You can select individual blocks of text and change their color, or you can apply a highlighting effect, in which the background of the text is colored.

To color text:

1.
Select the text you want to color.

2.
Click the Text Color button in the Editing toolbar (Figure 4.9).

Figure 4.9. The Text Color and Highlight Color buttons on the Editing toolbar.


or

Choose Format > Text Color.

The color picker appears (Figure 4.10).

Figure 4.10. Use the eyedropper on the color picker to choose your new text color.


3.
Click a color with the eyedropper to select it; it can be any color in the color picker or any color visible on your desktop or the page you are editing.

When you select the color, the color picker closes and the text changes color.

To highlight text:

1.
Select the text you want to highlight.

2.
Click the Highlight Color button in the toolbar.

or

Choose Format > Highlight Color.

The color picker appears.

3.
Click a color with the eyedropper to select it; it can be any color in the color picker or any color visible on your desktop or the page you are editing.

When you select the color, the color picker closes, and the text is highlighted the selected color.

✓ Tip

  • Pressing Esc closes the color picker without applying a color (Windows only).


Setting Text Alignment

Contribute’s similarity to a word processor continues with its ability to align text with the left margin, the right margin, or the center of the page. You can also justify text, which adds space as needed between words so that both the left and right margins are aligned.

To align text:

1.
Select the text you want to align.

2.
On the Editing toolbar, click the Left, Center, Right, or Justify button (Figure 4.11).

Figure 4.11. The text-alignment buttons on the Editing toolbar.


or

Choose Format > Align > and then choose Left, Center, Right, or Justify.

You can also use the shortcut keys listed in Table 4.2.

Table 4.2. Alignment Shortcut Keys
SHORTCUTKEY (WINDOWS)SHORTCUT KEY (MAC)WHAT IT DOES
Ctrl-Alt-Shift-LCmd-Opt-Shift-LLeft alignment
Ctrl-Alt-Shift-CCmd-Opt-Shift-CCenter alignment
Ctrl-Alt-Shift-RCmd-Opt-Shift-RRight alignment
Ctrl-Alt-Shift-JCmd-Opt-Shift-JFull justification


The text is aligned according to the option you clicked.

✓ Tip

  • You can change the alignment for a single paragraph, a heading, or an entire page.


Indenting Text

You can indent blocks of text in Contribute, but indenting works a little differently here than it does in a word processor. In Word, for example, an indent for a paragraph might pull the left margin of the paragraph in toward the center of the page and might further indent the first line of the paragraph, but would leave the right margin of the paragraph unchanged. The Indent command in Contribute indents the text of the paragraph from both margins (Figure 4.12).

Figure 4.12. When you indent text, it is indented from both margins.


To indent text:

1.
Click within the paragraph you want to indent, or if you want to indent more than one paragraph, select the text.

2.
Click the Indent button on the toolbar (Figure 4.13).

Figure 4.13. The Indent and Outdent buttons on the toolbar.


or

Choose Format > Indent, or press Ctrl-Alt-] (Cmd-Opt-]).

You can increase indent levels by repeating this step.

To remove indents:

1.
Click within the paragraph where you want to remove indenting, or if you want to affect more than one paragraph, select the text.

2.
Click the Outdent button on the Editing toolbar.

or

Choose Format > Outdent, or press Ctrl-Alt-[ (Cmd-Opt-[).

✓ Tips

  • You can often get better control over text placement by using tables rather than indenting. See Chapter 7, “Creating Tables,” for more information.

  • Contribute does its indenting by applying the HTML <blockquote> tag.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint