Dreamweaver MX 2004 Bible phần 6 doc

572 Part III ✦ Advanced Design Tools and Techniques Editing ordered lists The HTML code for an ordered list is <ol>. Both <ol> and <ul> use the list item tag, <li>, to mark individual entries, and Dreamweaver handles the formatting identically: <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.</li> <li>Toss in 150 cubic yards of fog.</li> <li></li> </ol> The empty list item pair, <li> </li>, is displayed on the page as the next number in sequence. Modifications to an ordered list are handled in the same manner as those to an unordered list. The results are far more dramatic, however. ✦ To continue adding to the sequence of numbers, position your cursor at the end of what is currently the last item and press Enter (Return). The next number in sequence is generated, and any styles in use (such as font size or name) are carried over. ✦ To insert a new item within the list, put your cursor at the end of the item you want to precede the new item, and press Enter (Return). Dreamweaver inserts a new number in sequence and automatically renumbers the following numbers. ✦ To rearrange a numbered list, highlight the entire list item you want to move. Using the drag-and-drop method, release the mouse when your cursor is in front of the item immediately below the new location for the item you are moving. ✦ To end an item in a numbered list, press Enter (Return) twice, or press Enter (Return) and deselect the Ordered List button on the Text Property inspector. Using other numbering styles You can apply these different numbering styles to your numbered lists: ✦ Arabic Numerals: 1, 2, 3, and so forth (this is the default style) ✦ Roman Small: i, ii, iii, and so forth ✦ Roman Large: I, II, III, and so forth ✦ Alphabet Small: a, b, c, and so forth ✦ Alphabet Large: A, B, C, and so forth You can restyle your entire list all at once, or you can just change a single list item. To change the style of the entire ordered list, follow these steps: 1. Position your cursor anywhere in an existing list. 2. If necessary, click the expander arrow on the Text Property inspector to display the additional options. Select the List Item button. The List Properties dialog box opens with Numbered List displayed as the List Type, as shown in Figure 15-5. 543504 ch15.qxd 12/10/03 10:31 PM Page 572 573 Chapter 15 ✦ Creating Lists Figure 15-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. Dreamweaver Technique: Creating Navigation Buttons from Lists CSS has made many innovations possible in Web design. One of those innovations is styled navigation buttons that look and act like sliced-bitmapped graphics with JavaScript rollover capability. CSS navigation bars, however, take up much less bandwidth, are instantly accessi- ble, and are far easier to modify than bitmapped graphics. Although the same technique dis- cussed in this section could be applied to a series of paragraph tags, the unordered list is a more natural fit. Of course, you don’t want the bulleted list to look like a bulleted list, and CSS makes such a transformation possible with ease. Here’s an overview of the process: 1. Create background graphics for both the standard and mouse-over views. 2. Put a list of links in a <div> tag. Each link serves as a separate button. Caution 543504 ch15.qxd 12/10/03 10:31 PM Page 573 574 Part III ✦ Advanced Design Tools and Techniques 3. Build up the CSS file that combines the background graphics and the links. 4. Apply the appropriate CSS ID to the <div> tag — and let CSS do the rest. In addition to standard rollover behavior, this technique makes it possible to style an individ- ual list item as the current page indicator, as shown in Figure 15-6. Figure 15-6: Turn a bulleted list into a navbar with CSS and just two low- bandwidth images. Step 1: Preparing background graphics A little bit of prep work is needed before you can begin applying CSS to your list. The first step is to use a graphics program, such as Fireworks MX 2004, to make the button images. Two separate but similar images are needed: one for the initial button look and another for the rollover view. Here’s the process I used to create my graphic images with Fireworks: 1. In Fireworks, create a new document larger than you expect your button to be. My initial document was 300 × 200. You can, of course, create a document the same size as your button image, but Fireworks’s Fit Canvas feature makes trimming the excess canvas area a one-click operation. 2. Using the Rectangle tool, draw an object slightly larger than the expected width and height of a single button; my image is 150 pixels wide × 50 pixels high. The image is to be used in the background of your navigation element and should be large enough so that it does not tile. 3. Style your rectangle however you choose. I used an orange solid fill (#FF9900) and applied a Vein texture at 80%. It’s a good idea to create your graphics with the dual states in mind. I’ll be able to create a darker version of my image for the rollover just by altering the texture percentage. 4. Choose Fit to Canvas to trim the excess canvas from your background image. 5. Export in either JPG or GIF format. This serves as the background for my initial button (also referred to as mouse-out), so I’ve named this image listnav_out.jpg and stored it in my Dreamweaver site. 543504 ch15.qxd 12/10/03 10:31 PM Page 574 575 Chapter 15 ✦ Creating Lists 6. Alter the graphic to represent the rollover state. I simply lowered the Vein texture set- ting to 60%, which darkens the image significantly. Figure 15-7 shows a comparison between the two figures. Figure 15-7: These two images were exported from the same source file; the only difference is the texture setting. 7. Export the image with an appropriate name; my second image is called listnav_over.jpg. Be sure to save your source file so that you can easily make alterations as needed. With your images created, you’re ready to move into Dreamweaver to create the list and encompassing <div> tag. Step 2: Creating the list and containing <div> Next, you create the basic HTML and text elements for the CSS navigation bar. Because one of the elements you need is an absolutely positioned <div> tag, you can set up your CSS file and enter the first of the CSS definitions. It’s not absolutely necessary for you to create the CSS before you insert the tags, but because Dreamweaver renders each new style as it is applied, this approach gives you a better sense of what the CSS styles are doing. To set up the CSS file with the first of the CSS definitions, follow these steps: 1. Create a new CSS file by choosing File➪ New and then selecting CSS from the General category. I named my file navlist.css. 2. Open the HTML or dynamic page to which you want to add the navigation. 3. From the CSS Styles panel, select Attach Style Sheet; when the dialog opens, import your previously created style sheet. Click OK to close the dialog when you’re done. Next, you define the first of your CSS, which positions and gives the basic shape to the navigation bar. 4. From the CSS Styles panel, select New CSS Style. Tip 543504 ch15.qxd 12/10/03 10:31 PM Page 575 576 Part III ✦ Advanced Design Tools and Techniques 5. In the New CSS Style dialog box, select Advanced and enter the ID for the element to contain the list navigation. I called mine #listnav. You’ll recall that the opening hash mark designates an ID selector in CSS. 6. Click OK to open the CSS Style Definition dialog and switch to the Position category. 7. Set these values in the Positioning category, as shown in Figure 15-8: • Type: Absolute • Width: 125 pixels • Top: 50 pixels • Left: 25 pixels Figure 15-8: Determine where the navigation element is to appear by setting values in the Positioning category. 8. When you’re finished, click OK to close the CSS Style definition dialog. The next step combines two actions into one: inserting a <div> tag and assigning the CSS style you just created. 9. From the Layout category of the Insert bar, select Insert Div Tag. 10. In the dialog box, choose the just-defined CSS style from the ID list. When you click OK to close, your <div> is added to the page with some placeholder text. Now you’re ready to add your list items. 11. Delete the placeholder text in the <div> and, from the Property inspector, select Unordered List. 12. Enter the text for your button labels, one button per bullet. I’ve got four list items: • Home • Products 543504 ch15.qxd 12/10/03 10:31 PM Page 576 577 Chapter 15 ✦ Creating Lists • Services • About 13. Be sure to avoid placing any unnecessary paragraph returns following the list. Only the list items you want to appear as buttons should be in the <div> tag. 14. Add a link to each list item by selecting the text and entering a filename in the Link field of the Property inspector. Alternatively, you can select the folder icon and then select a file from the Select File dialog. At this point, you should have a plain bullet list of links in an absolutely positioned <div> tag on your page, as shown in Figure 15-9. Now you’re ready to start styling! Step 3: Building the CSS styles The definition of the CSS styles is at the heart of this technique. In all, six different styles are needed: ✦ #listnav ul: Defines the font face and size for all the list items as well as removing the standard bullet and clearing the margin and padding. ✦ #listnav li: Ensures a bottom margin is present to separate each list item. ✦ #listnav a: Extends the active area of the link to the block-level and adds a back- ground image, width, and border. ✦ #listnav a:link, #listnav a:visited: Defines the look of the text when the but- tons are in their standard state, giving a specific color and removing the underline from the link. ✦ #listnav a:hover: Swaps the background image and alters the text color in the rollover state. ✦ #sellistnav a:link, #sellistnav a:visited, #sellist a:hover: Sets the look and feel of the selected button, indicating the current page in a navigation bar. Because I’ve already laid the foundation with a list of links inside a <div> with a defined CSS ID, the changes are immediately evident. The process is the same for defining each CSS rule. Each rule is named with the Advanced selector type chosen in the New CSS Style dialog box, which allows the user to enter any type of selector. To get started with #listnav ul, follow these steps: 1. From the CSS Styles panel, select New CSS Style. 2. In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav ul in the Selector field and click OK to open the CSS Style Definition dialog. 3. Set these values in the Type category: • Font: Verdana, Ariel, Helvetica, sans serif • Size: 14 pixels • Weight: Bold 543504 ch15.qxd 12/10/03 10:31 PM Page 577 578 Part III ✦ Advanced Design Tools and Techniques 4. Set this value in the Box category: • Margin: 0 pixels (for all) • Padding: 0 pixels (for all) 5. Set these values in the Border category: • Style: Solid (for all) • Width: 1 pixel (for all) • Color: #990000 (for all) 6. Set this value in the List category: • Type: None 7. When you’re finished, click OK to close the CSS Style definition dialog. You should notice an immediate difference in Dreamweaver. The bulleted list is already start- ing to look much more button-like (see Figure 15-10). Figure 15-9: Making each list item a link is a major step toward converting them into CSS buttons. 543504 ch15.qxd 12/10/03 10:31 PM Page 578 579 Chapter 15 ✦ Creating Lists Figure 15-10: After you define the #listnav ul style, the bullets disappear from the unordered list. The next style, #listnav li, affects each list item individually. Follow these steps: 1. From the CSS Styles panel, select New CSS Style. 2. In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav li in the Selector field and click OK to open the CSS Style Definition dialog. 3. Set this value in the Box category: • Margin-Bottom: 2 pixels The Margin-Bottom value determines the distance between each of the navigation but- tons; increase the value to make the buttons farther apart. 4. When you’re finished, click OK to close the CSS Style definition dialog. Now, to build up the #listnav a style, follow these steps: 1. From the CSS Styles panel, select New CSS Style. 2. In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav a in the Selector field and click OK to open the CSS Style Definition dialog. 3. In the Background category, click Browse and choose the exported image to represent the mouse-out. For my navigation bar, the file is listnav_out.jpg. 543504 ch15.qxd 12/10/03 10:31 PM Page 579 580 Part III ✦ Advanced Design Tools and Techniques 4. Set this value in the Block category: • Display: Block 5. Set these values in the Box category: • Width: 140 pixels • Padding-Top: 2 pixels • Padding-Right: 2 pixels • Padding-Bottom: 2 pixels • Padding-Left: 5 pixels These values determine the width of the block and set the position of the text within it. 6. Set these values in the Border category: • Style: Solid (for all) • Width: 1 pixel (for all) • Color: #CC9900 (for all) 7. When you’re finished, click OK to close the CSS Style definition dialog. With the background image in place, the buttons are really beginning to take shape (see Figure 15-11). Figure 15-11: Alter the Padding-Left setting to move the text away from the left edge of the background image. 543504 ch15.qxd 12/10/03 10:31 PM Page 580 [...]... usemap=”#navbar”> The same definitions for a server-side image map are laid out as follows: rect home.html 1,1 30,33 circle contacts.html 65 ,64 62 default index.html As you can see, the server-side image map file is much more compact... of the image, as described below 6 Using the Layers panel, select the next layer and then choose the image 7 In the Map Name field, enter the same name as previously assigned This ensures that all the layers use the same image map; if you do not perform this step, the off and over images appear to flicker 8 Repeat Steps 6 and 7 for each of the remaining layers 60 1 60 2 Part III ✦ Advanced Design Tools... the left and top attributes using the Layer Property inspector Figure 16- 5 shows how the screen looks with both layers in place and the visibility properties set correctly Figure 16- 5: Two image maps are placed on top of each other in layers, and the top layer is hidden Chapter 16 ✦ Making Client-Side Image Maps Aligning Layers In Dreamweaver, you can use layer alignment commands to easily line up the... Figure 16- 8 Note When you preview your work in a browser, make sure that visibility is set correctly for each layer Chapter 16 ✦ Making Client-Side Image Maps Figure 16- 8: The completed image map rollover technique in action Summary Image maps provide a much-needed capability in Web page design Without them, you wouldn’t be able to link irregularly shaped graphics or to group links all in one image Dreamweaver s... Design Tools and Techniques You can make an image map from any graphic format supported by Dreamweaver: GIF, JPEG, or PNG Dreamweaver provides all the tools you need in an area on the Image Property inspector Collectively, these tools are known as the Image Map Editor Follow these steps to create hotspots on an image in Dreamweaver: 1 Select your image and, if necessary, open the Image Property inspector... rectangle, circle, or polygon Outline one hotspot, as described in the section “Using the drawing tools,” later in this chapter After you complete the hotspot, Dreamweaver displays the Hotspot Property inspector, shown in Figure 16- 2 Figure 16- 2: Enter image map attributes through the Hotspot Property inspector 4 Enter the URL for this image map in the Link text box, or click the folder icon and browse... through 6 to add additional hotspots to the graphic Chapter 16 ✦ Making Client-Side Image Maps Using the drawing tools You’ll find the hotspot drawing tools to be straightforward and easy to use Each one produces a series of coordinates that are incorporated into the HTML code To use the Rectangular Hotspot drawing tool to outline a hotspot as a rectangle, follow these steps: 1 Click the image in the Document... hyperlinked, you need an image map Dreamweaver puts its image map tools front and center so that you can draw and manage hotspots right on your graphics in the Document window The onscreen image map tools make it much easier to manipulate your hotspots, but they have another major advantage: You can attach behaviors to hotspots very easily This chapter introduces you to Dreamweaver s hotspot tools and . coords=” 166 ,131, 165 ,131, 160 ,143, 164 ,179, Æ 127,180,143,200,1 56, 203,118,229,119,2 36, 158,229,177,217,199, Æ 238,212,247,220,242,1 96, 203,232,190,241,189,241,182,223,177, Æ 185,182,175,134, 166 ,132”. performs. 16 16 CHAPTER ✦✦✦✦ In This Chapter Introducing image maps Using the Image Map Editor Making a server-side image map Dreamweaver Technique: Creating image map rollovers ✦✦✦✦ 543504 ch 16. qxd. Fireworks: 1. In Fireworks, create a new document larger than you expect your button to be. My initial document was 300 × 200. You can, of course, create a document the same size as your button