adobe dreamweaver cs5 on demand part 18 doc

ptg 108 Chapter 5 Horizontal lines have a variety of uses in the construction of a Web page. Whether they’re used to separate sections of a page or to under- line an important piece of text, you have several decisions to make. Inserting a horizontal line provides a simple, yet effective way to high- light the information you want visitors to see. Lines have a variety of properties that you can modify, including width, height, alignment, and color. Inserting Horizontal Rules Insert a Horizontal Line Open and display the Web page you want to use. Click where you want to insert a horizontal line. Click the Insert menu‚ point to HTML, and then click Horizontal Rule. 3 2 1 3 2 Inserted horizontal line From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 109 Modify a Horizontal Line Open and display the Web page with the horizontal line you want to change. Select the horizontal line you want to modify. Select the formatting options you want in the Properties panel: ◆ W. Width of the line. Specified in pixels or as a percentage of the window width. ◆ H. Height of the line in pixels. ◆ Align. Alignment of the line on the page. ◆ Shading. Select the check box to create a shaded line. 3 2 1 2 3 From the Library of Wow! eBook ptg 110 Chapter 5 Most word processors have the ability to create bulleted or numbered lists of information. A bulleted list can itemize a topic's points or cata- log the properties of an object. A numbered list is helpful for giving step-by- step instructions. A list can break up the page and simultane- ously draw the viewer's eye to key details. Lists are an important alter- native to the basic textual tools of paragraphs and headings. In this chapter, you can study Dreamweaver's tools for designing and working with each of the three basic types of lists available in HTML: ordered lists, unordered lists, and definition lists. An ordered list is used when it's important that the listed items appear in a sequential order. As a professional chef, I use ordered lists all the time for the steps to a spe- cific recipe. An unordered list is used when the sequence of the listed items is of no great concern. Again, as a chef, I use unordered lists to display my list of ingredients to a recipe. Creating Ordered and Unordered Lists Create an Ordered List Open the Web page you want to format. Click within the document where you want to insert the ordered list, or select a group of text that you want to convert into a list. Click the Window menu, and then click Properties to display the Properties panel. Click HTML to format HTML tags. Click the Ordered List button in the Properties panel. Dreamweaver inserts the Roman numeral 1 into the document. To ad d items to the list, type an item, and then press Enter (Win) or Return (Mac). 6 5 4 3 2 1 6 2 Did You Know? You can create a nested or indented list. A nested list is a list that contains another list. Select the items you want to nest, click the Indent button in the Properties panel, or click the Format menu, and then click Indent. 4 5 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 111 Create an Unordered List Open the Web page you want to format. Click within the document where you want to insert the unordered list, or select a group of text that you want to convert into a list. Click the Window menu, and then click Properties to display the Properties panel. Click the Unordered List button in the Properties panel. Dreamweaver inserts a default round bullet into the document. To ad d items to the list, type an item, and then press Enter (Win) or Return (Mac). Create a List Using Existing Text Open the Web page you want to format. Select the paragraphs you want to make into a list. Click the Unordered List or Ordered List button in the Properties panel, or click the Format menu, point to List, and then select the type of list you want: Unorder List, Ordered List, or Definition List. 3 2 1 5 4 3 2 1 2 List changed to bullets 2 5 4 3 From the Library of Wow! eBook ptg A definition list doesn't use leading characters (bullets or numbers) to map the items; instead, definition lists are used in areas like glossaries. I might create a definition list explaining cooking terminology. A defini- tion list does not use bullets to identify the items, and it's composed of two lines: the first line is for the name of the item, and the second line is indented and describes the item; hence the name, definition list. If you happen to have a very long definition, and you want to separate it into two or more paragraphs, don't press the Enter key; that will take you to a new definition term. Simply press the Shift plus Enter key to create a soft return, and then type the second paragraph. 112 Chapter 5 Creating Definition Lists Create an Definition List Open the Web page you want to format. Click within the document where you want to insert the definition list. Click the Format menu, point to List, and then click Definition List. Type a definition term and press the Enter (Win) or Return (Mac) key. The new line is automatically indented. Type in a definition description. Press the Enter (Win) or Return (Mac) key to add another definition term, and press Enter (Win) or Return (Mac) again to add the corresponding definition description. The Definition list can be continued for as long as you want. Press the Enter (Win) or Return (Mac) key twice to end the list and return to the normal paragraph style type. 7 6 5 4 3 2 1 5 42 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 113 Modifying Lists Modify a List Click anywhere within the ordered list you want to modify, or click a specific item that you want to change. Click the Format menu, point to List, and then click Properties. To mo dify the list use the following options: ◆ Click the List Type list arrow, and then click Bulleted List, Numbered List, Directory List, or Menu List. ◆ Click the Style list arrow, and then select the style you want. NOTE You'll see different options based on the list type chosen. ◆ Enter the starting number you want to use by the list (available only when creating a numbered list). To mo dify an individual item: ◆ Click the New Style list arrow to change the style of the active list item. ◆ Enter the reset count number you want to use by the active list item (available only when creating a numbered list). Click OK. 5 4 3 2 1 After you create a list, you can use the List Properties dialog box to make changes to it. Some of the list options you can change include number style, number reset, or bullet style. You can make changes to the entire list or to a specific item in the list. 2 5 3 4 1 From the Library of Wow! eBook ptg 114 Chapter 5 Dreamweaver gives us the ability to change the style of text. A style is a collection of formatting settings saved with a Web site or template that you can apply to text, graphics, and tables at any time. Changing the style of text is useful when you want to draw the reader's eyes to a particular phrase or word. For example, using a bold font might indicate that the word is very important. Dreamweaver accomplishes this by using two types of tags: physical tags and logical styles. Physical tags change how the text looks (bold, italic, underline, etc). Logical styles define a certain look or style. For example, a paragraph style, or a heading style changes the text, based on pre-defined values. In addi- tion, when you use logical styles for HTML text, it becomes easier to find what you're looking for. For example, you could conduct a search to find all paragraphs defined as citation text. Dreamweaver provides you with built-in styles, or you can create your own user-defined styles. Applying Text Styles Apply a Built-In Text Style Open the Web page you want to apply a text style. Select the character, word, or words that you want to apply the text style. If you select a word or words and apply a style, the style will only affect the selected text. If you click inside a paragraph and apply a style, the style will change the entire paragraph. Click the Format menu, point to Style, and then select from the following options: ◆ Bold, Italic, Underline TIMESAVER You can also change the font style in the Properties panel. Click the Bold, Italic, or Underline buttons you want to apply. ◆ Strikethrough, Teletype, Emphasis, Strong ◆ Code, Variable, Sample, Keyboard ◆ Citation, Definition, Deleted, Inserted 3 2 1 2 3 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 115 Apply a Built-In Font and Size Style Open the Web page you want to apply a text style. Select the character, word, or words that you want to apply the text style. If you select a word or words and apply a style, the style will only affect the selected text. If you click inside a paragraph and apply a style, the style will change the entire paragraph. Click CSS in the Properties panel to apply or create a CSS rule. Choose from any of the following style options: ◆ Font. Click the Font list arrow, and then select the font style you want. ◆ Size. Click the Size list arrow, and then select the point size you want. NOTE You can also change the font using the Format menu. Click the Format menu, point to Font, and then select a style. If the New CSS Rule dialog box appears, select the following options: ◆ Selector Type. Specify a selector type: Class, ID, Tag, or Compound. ◆ Selector Name. Select or enter a name for your selector. ◆ Rule Definition. Select where to define the rule, either a current document or external CSS file. Click OK. 6 5 4 3 2 1 2 Using the <strong> and <em> Tags The two style tags <b> bold and <i> italic are common use tags in Dreamweaver; however, it is better to use the, <strong> for bold and <em> for italic. Dreamweaver allows you to specify which tags to use. Click the Edit (Win) or Dreamweaver (Mac) menu, click Preferences, click the General category, select the Use <strong> and <em> in place of <b> check box, and then click OK. For Your Information 4 3 From the Library of Wow! eBook . add another definition term, and press Enter (Win) or Return (Mac) again to add the corresponding definition description. The Definition list can be continued for as long as you want. Press. second paragraph. 112 Chapter 5 Creating Definition Lists Create an Definition List Open the Web page you want to format. Click within the document where you want to insert the definition. definition list. If you happen to have a very long definition, and you want to separate it into two or more paragraphs, don't press the Enter key; that will take you to a new definition term.