Chapter 4: Adding Text To Your Pages

<<< Back to Page 2

Working with Lists

Lists are an easy way to organize content on your Web page. Dreamweaver supports three types of lists:

• Numbered lists or Ordered lists, for lists with items that need to be in a particular order (Figure 4.29). List items are numbered and indented from the left margin. If you add or remove items from the numbered list, it automatically renumbers.
  

  Figure 4.29 Numbered lists automatically renumber if you insert a new item between two existing items.

• Bulleted lists or Unordered, for lists of items in no particular order (Figure 4.30).
  

  Figure 4.30 Bulleted lists are single-spaced and indented.

• Definition lists, where each item has an indented subitem (Figure 4.31).
  

  Figure 4.31 Definition lists have the definitions indented under the definition terms. The definition terms don't have to be all uppercase—they just happen to be in this figure.

To create a list:

1. Type the items for your list into the window. After typing each item, press Enter (Return).
2. Select the items in the list.

3. Choose Text > List, then choose Unordered List, Ordered List, or Definition List from the submenu.

   or

   Click either the Unordered List or Ordered List button in the Property Inspector.

   or

   Click one of three buttons in the Text tab of the Insert Bar: ul for Unordered List, ol for Ordered List, or dl for Definition List.

   The text changes to the kind of list you chose.

   TIPs

   • At the end of your list, you can turn off the list function either by pressing Enter (Return) twice or by clicking the appropriate list button in the Property Inspector.
   • There are three other buttons in the Text tab of the Insert Bar that you can use to apply list tags to text. The li button marks text as a list item; the text must be within a bulleted or numbered list. The other two buttons are used for definition lists. The dt button marks text as a definition term, and the dd button marks text as a definition description.
   • Because the Text tab of the Insert Bar was originally designed to help you work in Code view, some of the list buttons will cause the Dreamweaver window to change to Split view, so you can see the code and design panes at the same time. If you want to avoid code altogether, use the Property Inspector or the menu bar to format your lists.

Setting List Properties

You can change numbered list and bulleted list properties in Dreamweaver. Choose between five types of numbering, as shown in Table 4.3. For bulleted lists, you can choose either a round bullet (the default) or a square bullet. There are no properties to set for a definition list.

Table 4.3. List-Numbering Options

To set list properties:

1. Click in the list you want to change to place the insertion point.

2. Choose Text > List > Properties.

   The List Properties dialog appears (Figure 4.32).

   

   Figure 4.32 In the List Properties dialog, you can change the way lists are numbered and bulleted.

3. Do one or more of the following:
   • In the List type pop-up menu, select Bulleted List, Numbered List, or Directory List ("definition list" is called "Directory List" in this dialog for some reason).
   • In the Style pop-up menu, select one of the Bulleted List or Numbered List styles.
   • Use the Start count text box to set the value for the first item in the numbered list.
4. Click OK.

   TIP

   • You may notice that there is a fourth choice in the List type pop-up menu, called Menu List. That choice creates an unusual type of list that is based on the <menu> tag. That tag was deprecated (that is, recommended that it not be used) when HTML 4.01 was standardized several years ago. We suggest that you avoid the use of the Menu List option.

Nesting Lists

You can indent lists within lists to create nested lists. Because nested lists do not have to be of the same type, you can create, for example, a numbered list with an indented bulleted list, and you can have multiple levels of nested lists within one overall list (Figure 4.33).

Figure 4.33 You can nest bulleted lists inside numbered lists.

To create a nested list:

1. Click the end of a line within an existing list to place the insertion point.

2. Press Enter (Return).

   Dreamweaver creates another line of the list.

3. Press Tab.

   Dreamweaver creates a new indented sublist of the same type as the parent list. For example, if the parent list is a numbered list, the new sublist will also be a numbered list.

4. (Optional) If you want the sublist to be a different type of list than the parent list, click the Numbered List or Bulleted List button in the Property Inspector.
5. Type the list item.

6. Press Enter (Return).

   Dreamweaver creates a new sublist item.

7. To return to the original list, use the up or down arrow keys to move the insertion point into one of the items in the original list, or click to place the insertion point where you want it.

   TIPs

   • You can also click the Outdent button in the Property Inspector to merge the sublist back into the main list.
   • Use the List Properties dialog to format sublists as well as lists.
   • If you try to create a sublist within a list that is in a table by pressing Tab, Dreamweaver jumps to the next cell, rather than indenting and creating a nested list. One workaround is to create the nested list outside of the table, cut it, then paste it in the table cell where you want it to go.

Inserting Special Characters

You can add special characters, such as the Euro, copyright, or trademark symbol, to your page in Dreamweaver without having to remember their bizarre HTML equivalents or odd keyboard combinations. In Dreamweaver, relief is just a menu choice away.

To insert a special character:

1. Click in the page to place the insertion point where you want the special character to appear.

2. In the Text tab of the Insert Bar, choose the character you want from the Special Characters pop-up menu (Figure 4.34).

   

   Figure 4.34 Insert unusual characters from the Special Characters pop-up menu in the Text tab of the Insert Bar.

   or

   Choose Insert > HTML > Special Characters, then choose the special character you want from the submenu.

   or

   If the character you want doesn't appear in the menu, choose Other Characters from the pop-up menu in the Insert Bar, or choose Other from the Insert > HTML > Special Characters submenu. The Insert Other Character dialog appears (Figure 4.35).

   

   Figure 4.35 The Insert Other Character dialog provides the rest of the special characters Dreamweaver can insert.

3. Click the character you want to use, then click OK to close the dialog.

   Dreamweaver inserts the special character on your page.

<p>&nbsp;</p>

Adding Automatic Dates

Dreamweaver can insert the current date and time in a variety of formats into your Web page. You can choose whether or not to add the day of the week.

To insert the current date:

1. Click in your page to place the insertion point where you want the date to appear.

2. Choose Insert > Date.

   The Insert Date dialog appears (Figure 4.36).

   

   Figure 4.36 Dreamweaver lets you insert dates into your pages in a variety of formats.

3. Do one or more of the following:
   • If you want the name of the day to appear, use the Day format pop-up menu to set the appearance of the day of the week.
   • Make a selection from the Date format list.
   • If you want the time to appear, choose the 12-hour or 24-hour format from the Time format list.
   • Select Update automatically on save, if you want that to happen. This is very useful if you want visitors to your site to know when the page was last updated.

4. Click OK.

   Dreamweaver inserts the date (and any additional items you chose) into your page.

Adding Horizontal Rules

A horizontal rule is a line that runs across the page, creating a division between parts of the document (Figure 4.37). By default, a horizontal rule in Dreamweaver is the width of the page, is 1 pixel high, and has a small drop shadow. You can change these properties if you want.

Figure 4.37 This horizontal rule separates two sections of the page.

To insert a horizontal rule:

1. Click in the page to place the insertion point where you want the horizontal rule to appear.

2. Choose Insert > HTML > Horizontal Rule.

   A line appears as wide as the page.

To modify a horizontal rule's properties:

1. Click the horizontal rule to select it.

   The Property Inspector changes to show the Horizontal Rule properties (Figure 4.38).

   

   Figure 4.38 You can change the width and height of a horizontal rule in the Property Inspector.

2. Do one or more of the following:
   • Type a number in the W (for Width) field, and choose either pixels or % from the pop-up menu. Choosing pixels creates a fixed-width line; choosing % creates a line that expands or contracts depending on the width of the site visitor's browser window.
   • In the H (for Height) text box, type a number for the horizontal rule. This height is measured in pixels.
   • From the Align pop-up menu, choose Default, Left, Center, or Right. The Left and Right choices are only going to be useful if the width of the horizontal rule is less than the width of the page.
   • The Class pop-up menu allows you to apply a CSS style to the horizontal rule.
   • If you select the Shading check box, the line appears as an outline, rather than as a solid line.

   TIP

   • Horizontal rules are a leftover from the early days of HTML. Use them sparingly, if at all, because they tend to make a page look dated.

Continued on Page 4 >>>