Dreamweaver MX 2004 phần 10 pps

4306c32.qxd 3/22/04 11:47 PM Page 618 618 ■ chapter 32: Customizing and Extending Dreamweaver Hands On 1: Using the Advanced Random Images Extension There are a wide variety of extensions available, but one of the most useful is the Advanced Random Images extension. Not only is this extension one of the most useable, but it is also one of the most popular. This extension allows you to display a random image, a daily image, or even a set of sequential images on your website. This is a great tool if you wish to create a series of rotating banners for advertising, or even if you want to easily change the appearance of your website for daily visitors. The Advanced Random Images extension is available on the companion CD. To install and use this extension, follow these steps. 1. Open the Chapter 32 folder on the CD and double-click the Advanced Random Image extension file ( advRandImage3.mxp). 2. The Extension Manager dialog box should display automatically. If it doesn’t, you can also use one of these: • Select Start ➔ Programs ➔ Macromedia ➔ Macromedia Extension Manager from your Windows desktop. • Double-click the Extension Manager application in your Finder window on your Macintosh. 3. In the Extension Manager window, select File ➔ Install Extension. This will open the Select Extension To Install dialog box shown in Figure 32.14. This dialog box will automatically open to the location where extensions were last installed. Click Install to start the installation procedure. 4. Click Accept to agree to the terms of the licensing agreement for the extension. The rest of the installation should complete, and you should be returned to the Extension Manager with the Advanced Random Image extension selected and checked. 5. Open Dreamweaver and the document to which you wish to add the random images. This document must be saved into your current site for the extension to work properly. 6. Select Commands ➔ Kaosweaver.com ➔ Advanced Random Images to open the Ran- dom Images dialog box shown in Figure 32.15. 4306c32.qxd 3/22/04 11:47 PM Page 619 hands on 1: using the advanced random images extension ■ 619 7. In the Random Images dialog box, select the type of display you wish to create from the Actions drop-down menu. Your options include the following: Random Image Images in the list are displayed randomly. Daily Image One image is displayed to all visitors each day. Random Slideshow Images are displayed randomly in a slideshow format. Sequential Slideshow Images are displayed in their listed order in a slideshow format. 8. Use the + (Plus) button and Folder icon to add images to your Image List. If you wish to delete some, select them and click the - (Minus) button. 9. In the Subdomain field enter the trailing part of the URL if your site is not at the root for your web server. 10. Set the following properties for each image in your list. Auto Automatically set width and height of the images. Width Controls the width, in pixels, of the image. Height Controls the height, in pixels, of the image. Align Sets the image alignment. Title & Alt Sets the alternate text for the image. Border Controls the width of the images border. Link Specifies the document to open when that image Figure 32.14 The Select Extension To Install dialog box with the Advanced Random Images extension selected is clicked. Target Specifies the target of the link. 11. The properties affect only the currently selected image in the image list. 12. Click OK when you are done. The code created by this extension is visible only when you have View Invisible Elements turned on, so don’t worry if you don’t see any results on your Design view screen. You can see them in Code view. Figure 32.15 The Random Images dialog box, which allows you to configure the Advanced Random Images extension 4306c32.qxd 3/22/04 11:47 PM Page 620 620 ■ chapter 32: Customizing and Extending Dreamweaver When you view this page in your browser, you will see that the images appear in the order, and sizes that you configured in the dialog box. Hands On 2: Add Custom Characters to an Insert Bar The steps outlined in this tutorial allow you to create your own custom characters and add them to the Character menu of the Text Insert bar. 1. Open one of the HTML files in your /Macromedia/Dreamweaver MX 2004/Configuration/ Objects/Characters directory in Dreamweaver. For instance, you can use the Trademark .htm file shown in this example. 2. Change to Code view, by selecting View ➔ Code. This opens the Trademark.html file shown below. <! MENU-LOCATION=NONE > <HTML> <HEAD> <! Copyright 2000, 2001, 2002, 2003 Macromedia, Inc. All rights reserved. > <title><MMString:LoadString id=”insertbar/trademark” /></TITLE> <SCRIPT SRC=”characters.js”></SCRIPT> <SCRIPT LANGUAGE=”javascript”> function isDOMRequired() { // Return false, indicating that this object is available in code view. return false; } function objectTag() { checkEncoding(); // Return the html tag that should be inserted // <!ENTITY trade CDATA “™” trade mark sign, U+2122 ISOnum > return “™”; // Supported starting in 4.0 browsers, valid HTML //return “™”; // Supported starting in 5.0 browsers, valid HTML //return “”; // Generally supported, but not valid HTML (refers to windows specific character) } </SCRIPT> </HEAD> <BODY BGCOLOR=”#FFFFFF”> </BODY> </HTML> 4306c32.qxd 3/22/04 11:47 PM Page 621 hands on 2: add custom characters to an insert bar ■ 621 In this file, there are two JavaScript functions that insert a named entity—such as ¡, which inserts an inverted exclamation point—into your document. This entity is also referred to numerically by ¡. 3. Modify the Trademark.htm file so that it inserts your entity item, ¡. This is done by replacing the existing entity string on line 19 (you can view the line numbers in your document by selecting View ➔ Code View Options ➔ Line Numbers) with either the ¡ or the ¡ numerical entity. The named entity ¡ is only supported by 4.0 and newer browsers such as Internet Explorer 4+, Netscape Navigator 4+, and Opera 4+. For users of your site using other browsers or devices, you might want to consider using the numerical entity ¡ because it has more global support. When you have finished, and as long as you are using the ¡ character, your document will appear as follows: <! MENU-LOCATION=NONE > <HTML> <HEAD> <! Copyright 2000, 2001, 2002, 2003 Macromedia, Inc. All rights reserved. > <title><MMString:LoadString id=”insertbar/trademark” /></TITLE> <SCRIPT SRC=”characters.js”></SCRIPT> <SCRIPT LANGUAGE=”javascript”> function isDOMRequired() { // Return false, indicating that this object is available in code view. return false; } function objectTag() { checkEncoding(); // Return the html tag that should be inserted return “¡”; // Supported starting in 4.0 browsers, valid HTML } </SCRIPT> </HEAD> <BODY BGCOLOR=”#FFFFFF”> </BODY> </HTML> 4306c32.qxd 3/22/04 11:47 PM Page 622 622 ■ chapter 32: Customizing and Extending Dreamweaver 4. Select File ➔ Save As and save your new character description in the /Macromedia/ Dreamweaver MX 2004/Configuration/Objects/Characters directory. Name the file iexcl.html. 5. Using your favorite graphics program, create an 18- × 18-pixel GIF image that contains the image you wish to serve as the button that will represent your new character in the Character category on the Text Insert bar. This graphic file also needs to be saved in your /Macromedia/Dreamweaver MX 2004/Configuration/Objects/Characters directory. 6. Restart Dreamweaver. When you restart Dreamweaver, your new icon will appear as the last icon in the Character category view of the Text Insert bar. You can add as many characters to your panel in this fashion as you want. Be careful to use only valid named entities within your modified configuration files. If these entities are invalid, you will insert non-supported information into your document, which might be displayed incorrectly or not at all by web browsers. Hands On 3: Using an Extension to Create a Bookmark to Your Web Page In this tutorial we’ll walk through installing an extension to create a Universal Bookmarks link on your web page. This extension adds a script to your page that provides a browser- specific link so that a user can add your URL to Netscape Bookmarks, Internet Explorer Favorites, or Opera’s Hotlist. 1. Open the Chapter 32 folder on the CD and double-click the Universal Bookmarks extension file ( Universal_Bookmarks.mxp). 2. The Extension Manager dialog box should display automatically. If not, you can also: • Select Start ➔ Programs ➔ Macromedia ➔ Macromedia Extension Manager from your Windows desktop. • Double-click the Extension Manager application in your Finder window on your Macintosh. 3. In the Extension Manager window, select File ➔ Install Extension. This will open the Select Extension To Install dialog box. This dialog box will automatically open to the location where extensions were last installed. Click Install to start the installation procedure. 4. Click Accept to agree to the terms of the licensing agreement for the extension. The rest of the installation should complete, and you should be returned to the Extension Manager with the Universal Bookmark extension selected and checked. 4306c32.qxd 3/22/04 11:47 PM Page 623 hands on 3: using an extension to create a bookmark to your web page ■ 623 5. Create a new HTML file by selecting File ➔ New. 6. From the General Tab select Basic under Category and HTML from the Basic page type list. 7. From the File menu, select Save As and type a name of your choice. 8. Choose either Design view or Split view (with the cursor in the Design view window). 9. Choose Commands ➔ Dazdezines ➔ Universal Bookmarks. 10. The Universal Bookmarks Dialog box displays. In the Basic tab (see Figure 32.16), type the URL that you want the user to bookmark. This is the only field you need to fill out for the extension to work. Don’t include http://; that will be automatically added by the script. 11. The Advanced tab, shown in Figure 34.17, displays the link text for different browsers. You can customize this text, but Dazdezines recommends reading the Help page before you do this. To display the Help page, click the Help button on the right side of the dialog box. You can also customize the display of the link by adding a style sheet. For additional information on this extension, see the Universal Bookmarks page at www.dazdezines.com/mme/extensions/unversal_bookmarks.htm. 12. Click the Add button. 13. Be sure your page has a title; otherwise the bookmark will be saved as Untitled Docu- ment. Save the file. 14. You can view the script in the Code view window, but you won’t see any changes in Design view. Preview the file in different browsers to view the link. Figure 32.16 Figure 32.17 The Basic tab of the Universal Bookmarks dialog box. You can change the link text in the Advanced tab of the Universal Bookmarks dialog box. 4306c32.qxd 3/22/04 11:47 PM Page 624 624 ■ chapter 32: Customizing and Extending Dreamweaver Ready, Set, Go! Dreamweaver’s customization and extension features are among the outstanding features of Dreamweaver and make it possible to totally customize your use of Dreamweaver. But before you head out into the fast-paced world of web application development, you’ll need one more item for your web development tool kit: a good understanding of Dream- weaver’s accessibility features. In the next chapter, you’ll learn how Dreamweaver can help you quickly and easily implement accessibility on all your pages and sites. 4306c33.qxd 3/18/04 8:35 PM Page 625 CHAPTER 33 Using Dreamweaver to Make Your Site Accessible Accessible design enables users with disabilities—whether visual, auditory, or other forms of disability—to access, navigate, and use the Web. Accessibility is a part of web standards, is required for U.S. government sites (under the law known as “Section 508”), and should certainly be a consideration for today’s designers and developers. Many other government, educational, and corporate organizations around the world now require compliance with accessibility guidelines. Dreamweaver MX 2004 makes it easier than ever to create pages and sites that are accessible to Web users with disabilities. You can configure your Dreamweaver workspace so that the program prompts you to use accessibility features when you insert page elements, and you can also run an accessibility report to test a page or site’s compliance with accessibility guidelines. Dreamweaver includes several features for Dreamweaver users with disabilities, includ- ing support for using screen readers and keyboard navigation. The following topics will be discussed in this chapter: ■ Setting Accessibility Preferences in Dreamweaver ■ Detailing the Section 508 guidelines ■ Using Dreamweaver’s Sample Accessible Pages ■ Generating an Accessibility Report ■ Support for Dreamweaver users with disabilities 4306c33.qxd 3/18/04 8:35 PM Page 626 626 ■ chapter 33: Using Dreamweaver to Make Your Site Accessible Using Dreamweaver’s Accessibility Preferences Dreamweaver includes a multitude of accessibility features but, as always, leaves it up to you to choose which features you want to include in your workspace. You can set these preferences in the Accessibility category of the Preferences dialog box (Edit ➔ Preferences ➔ Accessibility), as shown in Figure 33.1. Four categories of page elements are included: form objects, frames, media, and images. If you check the box in front of a category, dialog boxes with accessibility tags and attributes will automatically display when you insert these page elements. In the next section, we’ll review Section 508 guidelines and show how Dreamweaver’s accessibility dialog boxes help you stay in compliance with the Section 508 law. The Accessibility preferences settings also include an Offscreen Rendering check box for screen reader users. This is checked by default, but you can uncheck it if you are hav- ing any problems with your screen reader. Section 508 Guidelines Section 508 includes 16 guidelines for Internet information; reviewing these guidelines is a good introduction to web accessibility issues in general. You can download a zip file with Section 508 Web Development Guidelines from Macro- media at www.macromedia.com/macromedia/accessibility/508_guidelines.html. Figure 33.1 Accessibility Preferences 4306c33.qxd 3/18/04 8:35 PM Page 627 section 508 guidelines ■ 627 These 16 guidelines are taken directly from the Section 508 Law, technical standard 1194.22 (web-based intranet and internet information and applications). To see the complete text of technical standard 1194.22, visit www.access-board.gov/sec508/guide/1194.22.htm. A text equivalent for every non-text element shall be provided. The alt attribute of the img tag is used to provide alternate text for viewers with visual disabilities who use screen readers and viewers who turn off image display in browsers. You can use up to 256 characters in an alt attribute. You can also add a longdesc attribute to provide a longer text description. A longdesc attribute is a link to another page that contains only the text description. Screen readers open and read the longdesc page, but standard browsers ignore it. If you check Images in the Accessibility preferences, then when you insert an image in a Dreamweaver page, the Image Tag Accessibility Attributes dialog box (see Figure 33.2) automatically displays. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. You can add captions for screen readers or alternative auditory content for multimedia presentations, and synchronize these with the visual presentation. See the “Introduction to Screen Readers” movie at www.doit.wisc.edu/accessibility/ video/intro.asp for more details on captioning. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Make sure that your page design does not rely on color alone to convey information. Documents shall be organized so they are readable without requiring an associated style sheet. Your page should still be readable without an associated style sheet. For best results, if you use styles, use an external CSS stylesheet with your page, and make sure there is no presentational markup in your page code (for example, <b> tags or align attributes). Redundant text links shall be provided for each active region of a server-side image map. Dreamweaver creates client-side image maps, not server-side, but the same principle can be used for client-side image maps—include text links for each image map link. Client-side image maps shall be provided instead of server- side image maps except where the regions cannot be defined with an available geometric shape. The available shapes are rectangle, polygon, and oval. Server-side image maps are rarely used. Figure 33.2 Image Tag Accessibility Attrib- utes dialog box [...]... Shift-F1 Shift-F1 Databases Ctrl-Shift-F10 Command-Shift-F10 Bindings Ctrl-F10 Command-F10 Server behaviors Ctrl-F9 Command-F9 Components Ctrl-F7 Command-F7 Files F8 F8 Assets F11 F11 Results F7 F7 Code inspector F10 F10 Frames Shift-F2 Shift-F2 History Shift-F10 Shift-F10 Layers F2 F2 Show/hide panels F4 F4 APPENDIX C New Features in Dreamweaver MX 2004 Dreamweaver MX 2004 features a diversity of new and... points for finding out about Dreamweaver online These sites are Macromedia resources: Dreamweaver Developer Center (www.macromedia.com/devnet /mx /dreamweaver/ ) The Dreamweaver Developer Center features links to articles, tutorials, and sample files for Dreamweaver MX 2004 as well as Dreamweaver MX It also includes information on Contribute and on server technologies supported in Dreamweaver For links to... MX 2004 Dreamweaver Support Center (www.macromedia.com/support /dreamweaver) Any problems with Dreamweaver are reported here You’ll also find patches, how-tos, and tips Dreamweaver Documentation (www.macromedia.com/support/documentation/en/ dreamweaver/ ) Download Dreamweaver product manuals and release notes Dreamweaver Templates (www.macromedia.com/devnet /mx /dreamweaver/ templates.html) The Dreamweaver. .. on Dreamweaver MX 2004, see www.macromedia.com/devnet /mx /dreamweaver/ dw _mx2 004.html Macromedia On Demand Seminars (www.macromedia.com/macromedia/events/online/ondemand/index.html) On Demand seminars are free multimedia presentations and demon strations of Macromedia products that can be viewed at any time over a broadband connection Several presentations are already available for Dreamweaver MX 2004. .. at www.w3.org/ TR/WCAG10-HTML-TECHS/ Ready, Set, Go! You’re now ready to enter the fast-paced world of rapid website and web application development with Dreamweaver MX 2004 See the appendices that follow for information on online resources (Appendix A), key board shortcuts (Appendix B), and an overview of new features in Dreamweaver MX 2004 (Appendix C) PART VI Appendices Dreamweaver inspires loyalty... options for both Code and Design view Dreamweaver MX 2004 automatically checks your files for cross-browser compatibility when ever you open a file You choose target browsers, and Dreamweaver creates a report listing errors, warnings, or other information about cross-browser issues 646 ■ appendix c: New Features in Dreamweaver MX 2004 Start page When you open Dreamweaver (or anytime that no documents... shortcuts helpful and informative The third appendix is a summary of all the new features in Dreamweaver MX 2004 APPENDIX A ■ Online Resources APPENDIX B ■ Keyboard Shortcuts APPENDIX C ■ New Features in Dreamweaver MX 2004 This page intentionally left blank APPENDIX A Online Resources There are so many websites related to Dreamweaver that it can be helpful to begin with sites that collect links to other resources... added to make Dreamweaver an even more effective and easy to use web production and development tool If you have used previous versions of the program, you’ll notice the change as soon as you open it, but even if you’re a new Dreamweaver user you’ll appreciate all the new fea tures And wherever this book discusses a new feature, you’ll see the MX 2004 icon Useability Dreamweaver MX 2004 offers a trimmed-down... development with Macromedia software Macromedia XML News Aggregator, Dreamweaver section (www.markme.com/mxna/ index.cfm?category =Dreamweaver) This blog includes a selection of Dreamweaver news and tips from 208 news feeds fullasagoog (www.fullasagoog.com/index.cfm?blogcat=DreamweaverMX) This section of the fullasagoog blog includes updates from Dreamweaver news feeds APPENDIX B Keyboard Shortcuts This appendix... often use and a Flash elements insert bar Flash ele ments, also new in Dreamweaver MX 2004, are prebuilt Flash components that can be inserted in your Dreamweaver pages to create RIAs (Rich Internet Applications) See Chapter 11, “Getting into Flash,” for more information on Flash and RIA Improved table editing Dreamweaver MX 2004 includes three modes for creating and editing tables: Standard mode, . for Dreamweaver MX 2004 as well as Dreamweaver MX. It also includes information on Contribute and on server technologies supported in Dreamweaver. For links to additional articles on Dreamweaver. for Dreamweaver MX 2004. Dreamweaver Support Center (www.macromedia.com/support /dreamweaver) Any problems with Dreamweaver are reported here. You’ll also find patches, how-tos, and tips. Dreamweaver. in Dreamweaver. For links to additional articles on Dreamweaver MX 2004, see www.macromedia.com/devnet /mx /dreamweaver/ dw _mx2 004.html. Macromedia On Demand Seminars (www.macromedia.com/macromedia/events/online/ondemand/index.html)