Dreamweaver MX 2004 phần 9 pdf

This page intentionally left blank 4306c29.qxd 3/18/04 8:34 PM Page 547 Checking Browser Compatibility CHAPTER 29 Browser compatibility continues to be an issue for web designers. Unless you are designing pages for a very specific audience—an office intranet where everyone is using computers with the same operating system and the same browser, for example—it’s nec- essary to design pages with browser compatibility in mind. You should also test your pages in multiple browsers before uploading them to a web server. This chapter covers the following topics: ■ Defining the target audience ■ Evaluating browsers for JavaScript, CSS, and XML support ■ Testing browser compatibility in Dreamweaver ■ Avoiding common problems ■ The future of browsers 4306c29.qxd 3/18/04 8:34 PM Page 548 548 ■ chapter 29: Checking Browser Compatibility Defining the Target Audience The vast majority of web surfers are using computers with the Windows operating system. In 2003, according to statistics from Statmarket ( www.statmarket.com), 35 per- cent of the web audience used Windows XP, and 25 percent used Windows 98. Other versions of Windows accounted for another 30 percent of web users, Mac users made up 3 to 5 percent, and the remaining 4 to 5 percent included users of all other platforms combined. Internet Explorer 6 is currently the most popular browser for web surfers. Overall, statistics at the Browser News site ( www.upsdell.com/BrowserNews/stat.htm) from four diverse sources show that 50 to 70 percent of the web audience uses Internet Explorer 6, 12 to 26 percent use Internet Explorer 5, and 3 to 20 percent use Gecko-based browsers (Netscape Navigator 6+ and Mozilla 1+). Also of interest are the stats for level 4 browsers. Currently, one percent or less of the web audience uses IE 4, and only 1–2 percent use Netscape 4.x. Keeping these statistics in mind, look at your target audience again. Which browsers are they likely to use? Do your pages include JavaScript or CSS? Do your pages include special features that require the latest browsers, such as XML or CSS absolute positioning support? Are your pages viewable by users with disabilities? You should review all of these important issues at the beginning of the site design process, and again during the testing phase. See Chapter 1, “Planning and Preparing for a Dreamweaver Project,” for more information on audience definition and site planning, and Chapter 33, “Using Dreamweaver to Make Your Site Accessible,” for details on using Dreamweaver’s accessibility features. Evaluating Browsers All browsers support basic HTML, but browser support varies widely for JavaScript, CSS, and XML. If you are using these additional features in your pages, it is very important to evaluate and test the browser support for the specific features you want to include. Table 29.1 provides general information about browser support for JavaScript, CSS, and XML. In addition to the most popular browsers (Internet Explorer and Netscape Navigator), Opera has been included. Although Opera does not have a large number of users in the United States, it is much more popular in Europe. If your site targets an international audience, it may be important to include Opera in your browser evaluation and testing. 4306c29.qxd 3/18/04 8:34 PM Page 549 evaluating browsers ■ 549 BROWSER JAVASCRIPT VERSION CSS VERSION XML Table 29.1 Apple Safari 1 1.5 ECMA 1 CSS1, partial CSS2 Yes Browser Support for JavaScript, CSS, Explorer 6 1.5 ECMA CSS1, partial CSS2 Yes and XML Explorer 5.5 1.5 ECMA CSS1, partial CSS2 Partial Explorer 5 1.3 ECMA CSS1, partial CSS2 Partial Explorer 4 1.2 ECMA CSS1 No Mozilla Firebird 0.7 1.5 ECMA CSS1, partial CSS2 Partial 2 Netscape 6, 7 1.5 ECMA CSS1, partial CSS2 Partial 2 Netscape 4.7 1.3 ECMA CSS1 No Opera 6, 7 1.4 ECMA CSS1, CSS2 Yes Opera 5 1.3 ECMA CSS1, CSS2 Yes 1 ECMA is an open standard for JavaScript 2 XML support is very different in IE and Gecko-based browsers. See a comparison at http://wp.netscape.com/ browsers/future/standards.html. Table 29.1 provides general guidelines for browser support, but for information about support of specific features, check out the following sources: • QuirksMode Compatibility Tables at www.quirksmode.org/dom/ • Safari Developer FAQ at http://developer.apple.com/internet/safari_faq.html • WebReview’s Browser Compatibility Chart at www.afactor.net/toolbox/notes/HTML/ info/browsersCompatability.html • WebReview’s CSS master grid (now posted on the Dr. Dobbs site—you’ll need to register (free) to access the article) at www.ddj.com/webreview/style/ Information regarding browser support of specific CSS, HTML, and JavaScript features is also available in Dreamweaver itself. Choose the Window menu and select Reference. A Refer- ence window displays. From this window, choose O’REILLY CSS Reference, O’REILLY HTML Reference, or O’REILLY JavaScript Reference, and then choose the specific feature you are interested in from the drop-down list. Browser information is shown to the far right of the feature name. Dreamweaver includes built-in JavaScript in Dreamweaver behaviors. (For more infor- mation on Dreamweaver behaviors, see Chapter 12, “Incorporating JavaScript Behav- iors.”) To specify one or more target browsers, choose the Show Events For item in the Action or Events menu of the Behaviors panel. The target browser determines which 4306c29.qxd 3/18/04 8:34 PM Page 550 550 ■ chapter 29: Checking Browser Compatibility events are shown in the Events menu for the chosen action. The Show Events For sub- menu includes the following target browser choices: • 3.0 and Later Browsers • IE 5.5 • 4.0 and Later Browsers •IE 6 •IE 3 • Netscape 3 •IE 4 • Netscape 4 •IE 5 • Netscape 6 Testing Browser Compatibility in Dreamweaver Dreamweaver includes two features for testing pages in browsers and determining browser compatibility: Preview in Browser and Check Target Browsers. The Target Browser Check has been expanded in Dreamweaver MX 2004 to include the Check Browser Support fea- ture in the Document toolbar. You can also modify browser profiles or create new ones to customize your browser compatibility testing. Preview in Browser The Preview In Browser feature allows you to view your pages in the browser(s) of your choice. Pages don’t have to be saved in order to use this feature, so you can test them at any time. All browser-related functions work in Preview mode, so you can test JavaScript and CSS functions as well as links, plug-ins, and ActiveX controls. Although absolute and rela- tive URLs function in preview mode, root-relative links can be viewed only if the file is on a server. To use the Preview In Browser feature, select Preview In Browser from the File menu in the page you want to preview, and then choose one of the browsers from the list. You can also add or remove browsers from the list by choosing File ➔ Preview In Browser ➔ Edit Browser List and then clicking the plus (+) button to add a browser to the list, or the minus (–) button to delete a selected browser from the list. You can also specify a primary browser and secondary browser. This enables you to use function keys to activate Preview In Browser. F12 opens the current page in the primary browser, and Control-F12 (Cmd-F12 for the Mac) opens the current page in the second- ary browser. You can include up to 20 browsers in the Browser List. You must, however, have all these browsers installed on your computer. 4306c29.qxd 3/18/04 8:34 PM Page 551 testing browser compatibility in dreamweaver ■ 551 You can also choose to preview using a temporary file by checking this option in the Preview In Browser category of the Preferences menu (Edit ➔ Preferences). The Debug In Browser feature for testing JavaScript is no longer included in Dreamweaver as of Dreamweaver MX 2004. Check Target Browsers The Check Target Browsers feature allows you to check for any elements or attributes that are not supported by the target browser. Dreamweaver uses preset browser profiles for Netscape Navigator versions 3, 4, 6, and 7; for Internet Explorer versions 3, 4, 5, 5.5, and 6; for Opera versions 2.1, 3, 3.5, 4, 5, 6, and 7; for Mozilla 1; and for Safari 1. These profiles can be modified, and new browser profiles can be created. See the “Using Browser Profiles” section later in this chapter for more information. Check Target Browsers can be used to check a document, a directory, or an entire site. Dreamweaver generates a browser compatibility report that opens in the Target Browser Check panel in the Results panel group. This report includes the following: • The name and location of the files with potential problems • The specific line where the problem occurs •Adescription of the problem If you double-click the error message, the affected code is highlighted in the Code view window. The report includes three types of problems: error May cause serious display problems in some browsers. warning Won’t display correctly in some browsers, but no serious problems. informational message Feature not supported, but has no effect on page display. Errors are marked with a wavy red underline in the Code view window. If you put the cursor over the red underline, a tooltip displays showing which browsers don’t support this item. Here are some ways to use the Check Target Browsers feature: • To check a file, save the file first. The check is done on the last saved version of the file. With the file open in Dreamweaver, choose File ➔ Check Page ➔ Check Target Browsers. The results of the check will then display in the Check Target Browser panel in the Results panel group. 4306c29.qxd 3/18/04 8:34 PM Page 552 552 ■ chapter 29: Checking Browser Compatibility You can now do this easier with the Check Browser Support feature in the Document toolbar. For more details, see the following section, “Check Browser Support.” • To check a folder or a site, open the site files in Local view in the Files panel. Select a group of files or the site folder. Open the Results panel and click on the Check Target Browser tab. Choose Site Report from the Show drop-down menu. Right-click the Site Report choice and select Check Target Browser For Selected Files/Folders in Site. Check Target Browsers checks only HTML and CSS, not scripts. Check Browser Support The Check Browser Support feature in the new Document toolbar (see Figure 29.1) enables you to specify browsers and browser versions and test your page for errors based on level of browser support for the features included in your page. By default, Dreamweaver automatically runs Check Browser Support when a docu- ment is opened. You can uncheck this option if you want, but it’s an extremely useful reminder to check browser compatibility. Dreamweaver automatically tests to make sure you are not using tags or CSS features that the target browsers do not support. You specify target browsers by selecting Settings from the pop-up menu and checking options in the Target Browser dialog box (see Figure 29.2). Using Browser Profiles Browser profiles are text files that include detailed information about the elements and attributes supported by specific browser versions. The browser profile files are contained in the Configuration/BrowserProfiles folder in the Dreamweaver application folder. Dreamweaver uses browser profiles for the Check Browser Support and Check Target Browsers features. You can edit these profiles to change how Dreamweaver validates your files in your chosen target browsers. For example, you might want to include errors or warnings when you use tags such as font or align (rather than CSS). Figure 29.1 The Check Browser Support feature in the Document toolbar 4306c29.qxd 3/18/04 8:34 PM Page 553 The following code shows an excerpt from the browser profile for Netscape Navigator 7. <!ELEMENT BLOCKQUOTE > <!ATTLIST BLOCKQUOTE cite id class lang dir title style onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup testing browser compatibility in dreamweaver ■ 553 Figure 29.2 Select minimum browser versions in the Target Browser dialog box. The browser profiles are very similar to Document Type Definitions (DTDs) and are mainly written using DTD syntax. These files specify exactly which elements and attrib- utes a particular browser supports. HTML pages can be tested (validated) against the browser profiles. In the preceding code example, the BLOCKQUOTE element is specified as a valid element in this browser. The additional lines of code specify that the BLOCKQUOTE ele- ment can contain any of the listed attributes. Browser profiles can also include warnings, error messages, and suggested substitutions for the unsupported element or attribute. Browser profiles must have a very specific structure to function correctly. The rules for this structure include the following: • You must use a unique profile name. This name appears in the Check Target Browsers list, and it must appear as the first line of the document, as shown in the first line of code in the Netscape Navigator 7 profile: Netscape Navigator 7.0 • You must use the following form for the second line, which identifies this document to Dreamweaver as a browser profile: PROFILE_TYPE=BROWSER_PROFILE 4306c29.qxd 3/18/04 8:34 PM Page 554 554 ■ chapter 29: Checking Browser Compatibility • You can use only the following elements in a browser profile: !ELEMENT HTML elements !ATTLIST Made up of HTML attributes for a specified element !Error Adds an error notice in the Check Target Browsers report !msg Messages in plain text that are added to error notices !htmlmsg Messages in HTML that are added to error notices • You cannot use HTML comments <! > in a browser profile. You can include comments by using at the beginning of a line. • You can include !Error within !ELEMENT or !ATTLIST. • You must include a space in the following locations: before the closing angle bracket ( >) in an !ELEMENT declaration, after the opening parenthesis in a list of attribute val- ues, before the closing parenthesis in a list of attribute values, and before and after each pipe ( |) in a list of attribute values. For example, the format for the BR element is shown in the following excerpt from the Netscape Navigator 7 profile: <!ELEMENT BR > <!ATTLIST BR id class title style clear The first line is an element declaration for the HTML element BR. A Name attribute is optional, but if it is included, this name ( Line break) can be used in error messages. Oth- erwise, BR will be used in error messages. The second line is an attribute list declaration. The BR following !ATTLIST specifies that this is a list of valid attributes for the BR element. These attributes include id, class, title, style, and clear. To edit a browser profile, open an existing profile in Dreamweaver or in a text editor (Notepad, SimpleText, or another text editor of your choice). If you don’t want to see an error message for a particular unsupported element or attribute, change its format. For example, to stop seeing error messages for the style ele- ment in Netscape 3, change its format from this: <!ELEMENT Style !Error > to this: <!ELEMENT Style > 4306c29.qxd 3/18/04 8:34 PM Page 555 testing browser compatibility in dreamweaver ■ 555 If you edit a browser profile, save the original profile with a new file name. This preserves the original profile in case you want to use it again. Save the new profile with the original file name so Dreamweaver uses the new profile. To add a custom error message, add either !msg or !htmlmsg after !Error. For example, you can modify the error messages for the attributes of any element that includes attrib- utes. Take a look at this code from the Netscape Navigator 3 browser profile for the UL ele- ment and its attributes: <!ELEMENT UL name=”Unordered List” > <!ATTLIST UL Type ( disc | circle | square ) Class !Error ID !Error Style !Error > This can be modified to include messages regarding errors, as shown in the following: <!ELEMENT UL name=”Unordered List” > <!ATTLIST UL Type ( disc | circle | square ) Class !Error !msg “Netscape Navigator 3 does not support the Class attribute.” ID !Error !htmlmsg “<b>Netscape Navigator 3 does not support the ID attribute.</b>” Style !Error > To create a new browser profile, follow these steps: 1. Open an existing profile in Dreamweaver or in a text editor (Notepad, SimpleText, or other text editor of your choice). 2. Replace the profile name in the first line of the browser profile file. 3. Add any new elements or attributes using the format shown above for the BR element and its attributes. 4. Delete any elements or attributes not supported by the browser. If you are creating a profile for a new browser, it is unlikely you will need to delete any elements or attributes. Dreamweaver MX 2004 adds CSS validation to browser profiles. Each browser that supports CSS has a CSS profile (XML file) in addition to a browser profile (text file). The CSS profile includes all the CSS properties and supported name and value attributes, as [...]... than CSS documents and scripts to go along with it, then Dreamweaver s FTP features will probably be all you need To FTP files from a Dreamweaver site, use the Remote Info category in the advanced tab of the Site Definition window (Site ➔ Manage Sites) If you want to use Dreamweaver for FTP without defining a Dreamweaver site, Dreamweaver MX 2004 offers the option of connecting to an FTP or RDS server... Standards Project site at www.webstandards.org and A List Apart at www.alistapart.com In addition to the usual choices, Dreamweaver MX 2004 includes Apple Safari 1 and Mozilla 1 in the Check Browser Support feature ■ 557 558 ■ chapter 29: Checking Browser Compatibility Apple Safari 1 (see Figure 29. 3), the default Mac OSX web browser, is standards-compliant and includes tabbed browsing and a built-in Google... sites See Chapter 33, “Using Dreamweaver to Make Your Site Accessible,” for more details on Dreamweaver s accessibility features As a result, it is important that your site meets these stan­ dards To run an accessibility report to make sure your site complies, follow these steps 1 Select your site from the drop-down menu in the Files tab of the Files panel group 2 From the main Dreamweaver application window,... browser, Mozilla Firebird (see Figure 29. 4) Firebird is a fast and efficient browser, because it’s only a browser It doesn’t include e-mail or newsgroups or all the features of Mozilla As long as your audience includes viewers using 4.x browsers or earlier, you will have to con­ sider browser compatibility issues carefully Figure 29. 3 Apple Safari 1 homepage Figure 29. 4 Mozilla Firebird 0.7 homepage the... upload and download files without formally set­ ting up a Dreamweaver site For additional details on FTP in Dreamweaver, see Chapter 3, “Setting Up Your Workspace and Your Site.” Working Directly with a Remote Server If you’ve defined a site and included information about the remote server (in the Remote Info category of the Site Definition window), Dreamweaver gives you the option of stay­ ing connected... from the remote folder and put files into the remote folder, check files in and out if your site is set up to do so, and refresh your files list—all while you work on one or more open files in the Dreamweaver MX 2004 workspace Though working in the Files panel is an easy way to manage your files and edit files at the same time, you can’t see what’s going on in your remote folder But you can change this... files you’re uploading) that should be preserved 6 Click the Preview button Dreamweaver will list the files to be put to the remote server Uncheck any files you don’t want put there (see Figure 30.11) 7 Click OK Dreamweaver will report Synchronization Complete when done 8 To save a record of the upload, click the Save Log button 9 Click Close Teach Them to Fish: Knowledge Transfer Once you’ve handed over... a Contribute administrator, to enable the site in Dreamweaver for using Contribute, and to supply the client with Contribute templates See Chapter 27, “Static Content Management with Contribute,” for more details Figure 30.11 Dreamweaver lists the files to be updated 576 ■ chapter 30: Going Live or Delivering the Site • By supplying the client with Dreamweaver site templates, you will make it easier... maintaining the site) or—at minimum—a clean copy of the requirements used to develop the site Dreamweaver can’t help with this! • You should also provide the client with training Again, Dreamweaver won’t help you with this • And then there’s always good old-fashioned handholding Hands On: Working Live Now it’s time to put Dreamweaver to work checking your website and sending your work onto the Web You’re going... Finding or preparing a host server ■ Going live (from staging to production) ■ Working live with Dreamweaver ■ Transferring just the right files ■ Documenting your work 562 ■ chapter 30: Going Live or Delivering the Site Quality Assurance and Final Testing I know we just got done with a lot of testing in Chapter 29, but that was validation—making sure that your code won’t break in any of your user’s browsers . to the usual choices, Dreamweaver MX 2004 includes Apple Safari 1 and Mozilla 1 in the Check Browser Support feature. 4306c 29. qxd 3/18/04 8:34 PM Page 558 558 ■ chapter 29: Checking Browser Compatibility. issues carefully. Figure 29. 3 Apple Safari 1 homepage Figure 29. 4 Mozilla Firebird 0.7 homepage 4306c 29. qxd 3/18/04 8:34 PM Page 5 59 the future of browsers ■ 5 59 Resources for Exploring. your browser evaluation and testing. 4306c 29. qxd 3/18/04 8:34 PM Page 5 49 evaluating browsers ■ 5 49 BROWSER JAVASCRIPT VERSION CSS VERSION XML Table 29. 1 Apple Safari 1 1.5 ECMA 1 CSS1, partial