macromedia Dreamweaver MX Bible phần 5 doc

447 Chapter 12 ✦ Creating Lists The List Properties dialog box opens with Numbered List showing as the List Type, as shown in Figure 12-5. Figure 12-5: Use the List Properties dialog box to alter the numbering style in an ordered list. 3. Open the drop-down list of Style options, and choose any of the numbering types. 4. Click OK. If the List Item button is inactive in your Text Property inspector, make sure that you have only one list item selected. Selecting more than one list item deactivates the List Item button. As with unordered lists, when you modify the style of one ordered list item, all the other items in the same list adopt that style. To alter the style of a single item, follow these steps: 1. Select the item you wish to change. 2. In the expanded portion of the Text Property inspector, select the List Item button. 3. From the List Item section of the List Properties dialog box, open the New Style list of options. 4. Select one of the numbering options. Although you can’t automatically generate an outline with a different numbering system for each level, you can simulate this kind of outline with nested lists. See “Using Nested Lists” later in this chapter. Making Definition Lists A definition list is another type of list in HTML. Unlike ordered and unordered lists, definition lists don’t use leading characters such as bullets or numbers in the list items. Definition lists are commonly used in glossaries or other types of documents in which you have a list of terms followed by their descriptions or explanations. Browsers generally render a definition list with the definition term flush left and the definition data indented, as shown in Figure 12-6. As you can see, no additional styling is added. You can, however, format either the item or the definition with the Text ➪ Style options or by using Cascading Style Sheets. Caution 154931-6 ch12.F 7/18/02 6:59 AM Page 447 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 448 Part II ✦ Web Design and Layout Figure 12-6: Definition lists are ideal for glossaries or other situations in which you have a list of terms followed by their definitions. To begin your definition list in Dreamweaver, follow these steps: 1. Choose Text ➪ List ➪ Definition List or click the Definition List button in the Text cate- gory of the Insert bar. 2. Type in the definition term and press Enter (Return) when you are finished. Dreamweaver indents the line. 3. Type in the definition data and press Enter (Return) when you are finished. 4. Repeat Steps 2 and 3 until you have finished your definition list. 5. Press Enter (Return) twice to stop entering definition list items. If you have an extended definition, you may want to format it in more than one paragraph. Because definition lists are formatted with the terms and their definition data in alternating sequence, you have to use the line break tag, <br> (or <br /> for XHTML documents), to create blank space under the definition if you want to separate it into paragraphs. Press Shift+Enter (Shift+Return) or select the Line Break button from the Insert bar to enter one or two <br> tags to separate paragraphs with one or two additional lines. Tip Definition data Definition term 154931-6 ch12.F 7/18/02 6:59 AM Page 448 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 449 Chapter 12 ✦ Creating Lists When you insert a definition list, Dreamweaver denotes it in code using the <dl> </dl> tag pair. Definition terms are marked with a <dt> tag, and definition data uses the <dd> tag. A complete definition list looks like the following in HTML: <dl> <dt>Capital</dt> <dd>Sum owed by a business to its owners. See Owner’s Equity.</dd> <dt>Cash</dt> <dd>Total of currency, coins, money orders, checks, bank drafts, and letters of credit the firm has on hand or in bank accounts from which money can be drawn immediately.</dd> <dt>Cash Payments Journal</dt> <dd>Journal for recording payments made in cash.</dd> </dl> You can vary the structure of a definition list from the standard definition term followed by the definition data format, but you have to code this variation by hand. For instance, if you want a series of consecutive terms with no definition in between, you need to insert the <dt> </dt> pairs directly in Code view or in the Code inspector. To facilitate the inser- tion of these tags, you can click the Definition Term and Definition Description buttons in the Text category of the Insert bar to insert the appropriate tags in Code view. Using Nested Lists You can combine, or nest, lists in almost any fashion. For instance, you can mix an ordered and unordered list to create a numbered list with bulleted points. You can have one num- bered list inside of another numbered list. You can also start with one numbering style such as Roman Large, switch to another style such as Alphabet Small, and return to Roman Large to continue the sequence (like an outline). Dreamweaver offers an easy route for making nested lists. The Indent button in the Text Property inspector — when used within a list — automatically creates a nested list. As an example, the ordered list in Figure 12-7 has a couple of bulleted points (or unordered list items) inserted within it. Notice how the new items are indented one level. Follow these steps to create a nested list in Dreamweaver: 1. Select the text in an existing list that you want to indent and reformat with a different style. 2. In the Text Property inspector, choose the Indent button. You can also select the Text ➪ Indent command. Dreamweaver indents the selected text and creates a separate list in the HTML code with the original list’s properties. Nested unordered lists exhibit a cool feature in most browsers — they automatically change the list style for each level. In many browsers, the outermost level is displayed with a bullet, the second level with a circle, and the third level with a square. This feature provides auto- matic outlining from an unexpected source! For ordered lists, the style of indented items does not change automatically. 3. Go to the List Properties dialog box and select another list type or style, as described in preceding sections. Note Tip 154931-6 ch12.F 7/18/02 6:59 AM Page 449 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 450 Part II ✦ Web Design and Layout Figure 12-7: Dreamweaver automatically generates the code necessary to build nested lists when you use the Indent button on the Text Property inspector. You can unnest your list and reverse the effects of the Indent button by selecting the Outdent button in the Text Property inspector or by choosing Text ➪ Outdent. Be careful, however, when selecting your text for this operation. When you use the mouse to perform a click-and- drag selection, Dreamweaver tends to grab the closing list item tag above your intended selection. A better way to highlight the text in this case is to use the Tag Selector on the sta- tus bar. Place the cursor in the indented list you want to outdent and choose the innermost <ol> or <ul> tag from the Tag Selector. To examine the origins of the term nested list, look at the code created by Dreamweaver for the following list type: <ol> <li>Stir in two sets of Venetian blinds.</li> <li>Add one slowly rotating ceiling fan.</li> <li>Combine one flashing neon sign with one dangling light bulb. <ul> <li>Use a bare bulb, preferably swinging.</li> <li>The neon sign should throw contrasting shadows.</li> </ul> Caution Outdent button Indent button 154931-6 ch12.F 7/18/02 6:59 AM Page 450 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 451 Chapter 12 ✦ Creating Lists </li> <li>Toss in 150 cubic yards of fog.</li> </ol> Notice how the unordered tag pair, <ul> </ul>, is completely contained between the ordered list items. If you don’t indent your list items before you change the list format, Dreamweaver breaks the current list into three separate lists: one for the original list above the selected text, another for the selected text itself, and a third list for the items following the selected text. If you don’t want this arrangement, use the Tag Selector to select the entire list you want to indent, and then choose the Indent button in the Text Property inspector. Dreamweaver will nest the list as described previously. Accessing Special List Types Dreamweaver gives you access to a couple of special-use list types: menu lists and directory lists. When the tags for these lists — <menu> and <dir>, respectively — were included in the HTML 2.0 specification, they were intended to offer several ways to present lists of short items. Unfortunately, browsers tend to render both tags in the same manner: as an unordered list. You can use Cascading Style Sheets to restyle these built-in tags for use in 4.0 and later browsers. Both the <menu> and <dir> tags are deprecated in HTML 4.0. Since most browsers format these lists like unordered lists, you should typically just use ordered lists instead of either of these list types. Ordered lists are supported in both older browsers and will continue to be supported in the future. Menu lists A menu list generally comprises single items, with each item on its own individual line. To apply a menu list style, follow these steps: 1. In an existing list, select one item. 2. In the expanded Text Property inspector, select the List Item button. 3. In the List Properties dialog box, open the List Type drop-down list and choose Menu List, as shown in Figure 12-8. 4. Click OK. Figure 12-8: Making a menu list. Note Caution 154931-6 ch12.F 7/18/02 6:59 AM Page 451 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 452 Part II ✦ Web Design and Layout Directory lists The directory list was originally intended to provide Web designers with an easy way to cre- ate multiple-column lists of short items. Unfortunately, the most current browsers present the directory list’s items in one long list, rather than in columns. The directory list format is applied in the same way as the menu list, and here as well, most browsers render the format as an unordered list with bullets. To create a directory list, follow these steps: 1. In the current list, select one item. 2. In the expanded Text Property inspector, select the List Item button. 3. In the List Properties dialog box, open the List Type list (refer to Figure 12-8) and choose Directory List. 4. Click OK. Dreamweaver Technique: Building Graphical Bullets HTML unordered lists are functional and often useful, but they’re not particularly decorative. If you are a Web designer, you might very well want to spice up your bulleted list of items with graphics. Although the CSS technique described earlier offers the possibility of selecting an image to use as the bullet, this solution is not available to older Netscape browsers or 3.0 versions of Internet Explorer. Moreover, you don’t have much control over the vertical place- ment of the bullet, so the image often appears higher than desired. The following technique is intended for designers working just with Dreamweaver and any graphics editor. However, if you have Fireworks 3 or later, you can automate the process of replacing an unordered list with graphical bullets. The Convert Bullets to Images command (originally developed by the author as BulletBuilder) converts list items to paragraph lines and places a custom bullet — available in 10 different shapes and any Fireworks style — before the line. You’ll find this extension on the Macromedia Exchange. Substituting a graphical bullet for the HTML versions is practical and often desirable. Because a small, single image is used repeatedly, the impact on a Web page’s size is negligi- ble, and the image downloads quickly. You can include graphical bullets in two basic ways: inline and tables. Inline graphical bullets put the bullet image right next to the text, whereas the table technique keeps all the bullets in one column and the bullet items in another. Which technique you use depends on the length of the bulleted item. If your bulleted items are short enough so that they won’t wrap, use the inline technique; on the other hand, if the text is wrapping from one line to the next, use the table technique. To use graphic images as bullets in an inline technique, follow these steps: 1. Create your image in a graphics editor, such as Fireworks, and save the file so that it is accessible to your local site. 2. If necessary, convert your unordered list to standard paragraph format by selecting the entire list and deselecting the Bullet button on the Property inspector. 3. Choose Image from the Insert bar and place the bullet graphic before the first line item. Tip 154931-6 ch12.F 7/18/02 6:59 AM Page 452 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 453 Chapter 12 ✦ Creating Lists 4. Select the correct vertical alignment for the image from the Align list on the image Property inspector. Although your alignment choice may vary according to the height of your text and your image, Absolute Middle works in many situations. 5. In the Image Property inspector, select <empty> from the Alt drop-down list. Normally, you should not specify alternate text for a bullet image. Adding alternate text to a bullet typically does not enhance the understanding of your page for either those using visual or non-visual browsers. However, you should not just leave the Property inspector Alt field blank. If you do, some screen readers read the filename when they encounter the image, which slows down how quickly people using non-visual browsers can get to the real information on your page. Explicitly selecting <empty> in the Property inspector Alt field includes a blank alt attribute, which causes screen readers to ignore the bullet image. 6. If necessary, add a non-breaking space or two between the image and the list item by pressing Ctrl+Shift+spacebar (Command+Shift+spacebar). 7. Select the image and any added non-breaking spaces. 8. Ctrl+drag (Option+drag) the selection to copy it to the beginning of the next line item, as shown in Figure 12-9. 9. Repeat Step 8 for each line item. Figure 12-9: Copying your graphic bullets after you’ve set the alignment and alternate text saves you many steps later. Tip 154931-6 ch12.F 7/18/02 6:59 AM Page 453 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 454 Part II ✦ Web Design and Layout The following technique requires a basic understanding of tables in HTML in general and Dreamweaver in particular. If you’re not familiar with inserting and formatting tables, you may want to look at Chapter 10 before proceeding. If your text lines are too long, they wrap at the browser window and — here’s the unsightly part — under the graphical bullet. To avoid this wrapping problem, use the table technique, detailed in the following steps: 1. Create your bullet in your favorite graphics program. 2. If necessary, convert your unordered list to standard paragraph format by selecting the entire list and deselecting the Bullet button on the Property inspector. 3. Position your cursor above the first line item and choose the Insert Table button from the Insert bar. 4. In the Insert Table dialog box, set the Columns value to 2, and the Rows value to the number of line items you have. Turn off the borders by setting Border value to 0. Click OK when you’re done. The table is inserted in the Document window. 5. Select the first column of the table by dragging down its length. 6. In the Property inspector, set the Horiz (horizontal alignment) value to Right, and the Vert (vertical alignment) to Top. 7. Select the second column by dragging down its length. 8. In the Property inspector, set the Horiz (horizontal alignment) value to Left and the Vert (vertical alignment) to Top. 9. Select the Image button and place your bullet image in the first column, first row. 10. Select the first line item and drag it into the second column, first row. 11. Copy the bullet image from the first cell and paste it into the first column for every remaining row. 12. Repeat Step 10 for each of the remaining line items, putting each on its own row. When you’re done, the bullet images line up evenly, as do the line items, as shown in Fig- ure 12-10. You may find it necessary to adjust the vertical alignment on either the bullet or line item column to get the look you want. Cross- Reference 154931-6 ch12.F 7/18/02 6:59 AM Page 454 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 455 Chapter 12 ✦ Creating Lists Figure 12-10: Placing bullet items in a table enables you to keep equal spacing with longer, wrapping lines. Summary Lists are extremely useful to the Web site designer from the perspectives of both content and layout. Dreamweaver offers point-and-click control over the full range of list capabilities. ✦ The primary list types in HTML are unordered, ordered, and definition lists. ✦ Use unordered lists when you want to itemize your text in no particular order. Dreamweaver can apply any of the built-in styles to unordered lists, or you can cus- tomize your own list style through Cascading Style Sheets. ✦ An ordered list is a numbered list. Items are automatically numbered when added, and the entire list is renumbered when items are rearranged or deleted. Dreamweaver gives you access to different styles of numbering — including regular Arabic, Roman numer- als, and upper- or lower-case letters. 154931-6 ch12.F 7/18/02 6:59 AM Page 455 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 456 Part II ✦ Web Design and Layout ✦ Definition lists are designed to display glossaries and other documents in which terms are followed by definitions. A definition list is generally rendered without leading char- acters such as bullets or numbers; instead, the list terms are displayed flush left, and the definitions are indented. ✦ Dreamweaver gives you the power to nest your lists at the touch of a button — the Indent button on the Text Property inspector. Nested lists enable you to show different outline levels and to mix ordered and unordered lists. ✦ Menu and directory lists are also supported by Dreamweaver. Both of these special lists are rendered in a similar fashion, but they can be adapted through style sheets for extensive use. ✦ It’s easy to substitute graphic images for standard bullets in Dreamweaver. One method of doing this uses Cascading Style Sheets. You can also simply insert a bullet image in the page like any other image. Two different techniques are used — inline and table — depending on the length of the line item. In the next chapter, you learn how to create and use image maps in Dreamweaver. ✦✦✦ 154931-6 ch12.F 7/18/02 6:59 AM Page 456 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... usemap=”#navbar”> . button 154 931-6 ch12.F 7/18/02 6 :59 AM Page 450 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 451 Chapter 12 ✦ Creating Lists </li> <li>Toss in 150 cubic. get the look you want. Cross- Reference 154 931-6 ch12.F 7/18/02 6 :59 AM Page 454 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 455 Chapter 12 ✦ Creating Lists Figure 12-10:. deleted. Dreamweaver gives you access to different styles of numbering — including regular Arabic, Roman numer- als, and upper- or lower-case letters. 154 931-6 ch12.F 7/18/02 6 :59 AM Page 455 Simpo