| Many of the elements that you can add to your Web pages work only in the later versions of browsers. Cascading Style Sheets (CSS) and layers, for example, are supported only in 4.0 or later browsers. Before making a site available to the public, you should test your pages so you have a chance to fix any errors and be sure that your audience can view the pages as you intend them to be seen. To develop an accessible site, you can identify target browsers and design your pages with those browsers in mind. If your pages are geared toward people who might be using hand-held devices, readers, or ways other than standard browsers to access your pages, you should test your site with those devices and software applications. In this exercise, you will use Dreamweaver to test the HTML in your pages against a browser profile and determine whether or not that browser supports the code in your page. You can run a browser check on a saved file, a folder, or the entire site. Dreamweaver only reports the errorsit does not make any changes to your files. To make your site compatible, you need to take into account the errors reported by Dreamweaver and modify the pages in your site accordingly until you come to an acceptable solution. What is acceptable might vary from site to site and depends on your intended audience. 1. | Open the check_browser.html file from the Lesson_15_Testing/Check_Browser folder.
In the following steps, you will run a target browser check on this file.
| | | 2. | Click the Check Target Browser menu on the Document toolbar and choose Show All Errors. Make sure the option Auto-check on Open is active.
Tip You can also choose File > Check Page > Check Target Browsers.  Whenever you open a document, Dreamweaver automatically scans the page, checking for browser errors. The Check Target Browser icon on the Document toolbar changes depending on whether any errors have been detected: If there are no errors but possibly warnings and informational messages, it displays a green checkmark. If errors are found, it displays a yellow warning icon.
The Target Browser Check tab of the Results panel opens.
 In the Results panel, errors are indicated by red octagons with exclamation marks in white. Warnings are represented by yellow triangles with exclamation marks in black. Errors are signals that there is something wrong with the code that will cause browser errors or other serious viewing problems. Warnings also signal potential display problems, although they are of a less-serious nature and generally do not affect the display or functionality of a page as much as an error might. You might also see informational messages appear in the Results panelthey generally alert you to code that although it might not be supported in a particular browser, it is simply ignored.
In this case, one error and two warnings were found in the check_browser.html document.
You can close the Results panel, or simply move it to the side.
| | | 3. | Choose Settings from the Check Target Browser menu on the Document toolbar and choose 3.0 from the Netscape Navigator version menu to check that browser against the page; then click OK.
 The Check Target Browser icon on the document toolbar now displays the yellow triangle, warning you that portions of the document are incompatible with one of the browsers Dreamweaver is set to check the page against.
The Results panel refreshes and displays the error(s) associated with the document.
 Tip If the Results panel does not refresh, close it and choose Show All Errors from the Check Target Browser menu on the Document toolbar. | | | 4. | Double-click the Style tag error that is displayed third from the top of the Results panel.
Tip You might have to scroll up in the Results panel to find the Style tag error, which is the third error. When you double-click an error, Dreamweaver lets you know exactly where that error occurs. The Document window switches to Split view, and the <style> tag is highlighted in the code. The problematic code is also underlined with red squiggly lines (it can be hard to see the color when the code is selected). Only errors are indicated in the code by these red lineswarnings and informational messages appear only in reports and the results panel. This option can be extremely helpful when you are trying to correct errors in your documents.
 In this case, you do not need to make any modifications because the 3.0 version of Netscape simply ignores this tag. This item is considered an error and not a warning because even though the tag will be ignored, the lack of support can potentially cause display problems, or unexpected results. When developing your Web pages, it is best to test your pages to be sure that any code or elements that are not supported in certain browsers degrade or fail gracefully. When a behavior "fails gracefully" it will not produce any errors or warning in the browser (although you might still see errors and warnings in Dreamweaver); the browsers will simply ignore those elements that they do not support. If an error does appear in the browser, you might want to modify your page accordingly, to develop an alternative that does not produce a visible error.
| 5. | Choose Settings from the Check Target Browser menu on the Document toolbar and check the Opera box to include the Opera browser in the Browser check. Click OK.
The Results panel now displays several additional errors that can be found in various versions of Opera, a popular alternative browser.
 Note Dreamweaver uses browser profiles to check your document for errors. Information on supported tags, attributes, and elementsas well as warnings, error messages, and tag substitute suggestionscan be included in browser profiles. You can create or add profiles for browsers that are not included in this list (such as WebTV and mobile phone browsers) by using a browser profile that has already been developed or by creating one yourself. You can find additional browser profiles on the Dreamweaver Exchange Website: http://www.macromedia.com/go/dreamweaver_exchange/. | | | 6. | Click the Browse Report icon on the left side of the Results dialog box. Review the information presented in the browser; then switch back to Dreamweaver.
 A detailed report is now displayed in a browser window. A list of target browsers indicates the number of errors and warnings that are found for each browser version in the list.
 The Check Target Browser feature runs when you open a document and when you manually run the test by choosing Show All Errors from the Check Target Browser menu. The icon on the Document toolbar is not continuously updated as you work.
| | | 7. | Use the Files panel to select the Check_Browser folder in Lesson_15_Testing. On the Results panel, click the Check Target Browser menu, indicated by the green arrow in the upper-left corner of the Target Browser Check tab, and choose Check Target Browsers For Selected Files/Folders In Site.
On the Macintosh, the Check Target Browser menu/button will appear to be highlighted after you select the Check Target Browsers For Selected Files/Folders In Site optionyou will need to click the button to run the check. On Windows, the check is automatically run after you make your selectionyou do not need to click it again.
Note You do not have to make a selection from the Show menu on the Results panelDreamweaver automatically switches to Site Report when you choose Check Target Browsers For Selected Files/Folders In Site.  The test runs, and a report displays in the Target Browser Check Tab of the Results dialog box.
There are differences in the way your site displays in every browser version. You might have to make trade-offs in the way the pages appear. Certain JavaScript routines, for example, produce error messages in browsers that do not support them; other JavaScript routines simply do not work, and the visitor might never know it. To reach the widest audience possible, you want to create a Website that is error-free for older browsers. It is far better for visitors to miss certain features than to have error messages appear. If your audience uses a wide variety of browsers, you might want to make sure that the navigation of your pages does not rely on features that might not be supported in older browsers (or provide alternative pages for those who are either not using the latest versions or who might be using drastically different Internet applications).
| 8. | Choose Settings from the Check Target Browser menu on the Document toolbar. Return the setting to the defaults by choosing 4.0 from the Netscape Navigator version menu, checking the Microsoft Internet Explorer box and choosing 5.0 from the menu, and unchecking the Opera box. Click OK to close the dialog box.
|
Tip You can also select Settings from the Check Target Browser menu on the Results panel.
The Check Target Browser settings are now returned to the original Dreamweaver default settings. When deciding which browsers to target, consider the latest browser trends and your target audience. After your site is available to the public, you can continue to assess what your target browsers are by using Website statistics and programs that gather and evaluate that information to find out what browsers your visitors are using the most. You might need to talk with your Web host, service provider, or system administrator for more information. Many Web designers test their pages in multiple versions of Netscape, Explorer, and other browsers. It is a good idea to have multiple versions of browsers on your computer for this reason. You can close any open files. |
