WDV 331 Dreamweaver Applications

1. WDV 331 Dreamweaver Applications Testing your site Dreamweaver CS6 Chapter 16

2. Site Launch Checklist • Don’t wait until you finish your site before you develop a thorough strategy for regular testing. • If you do, serious design errors may have so completely infested your pages that you have to start over, or at least spend many hours fixing problems you could have prevented early on. • These guidelines help you avoid that predicament:

3. Preview • Preview early and often. • The single best way to make sure a page looks and functions the way you want it to is to preview it in as many browsers as possible. • For a quick test, click the Live View button in Dreamweaver’s Document toolbar • This is a great way to quickly check JavaScript components and view the way a browser displays pages with complex CSS. • Dreamweaver’s built-in browser is WebKit you find in Google’s Chrome, Apple’s Safari browser, and the web browser in many mobile phones

4. Live view • Live view doesn’t necessarily show you how your page will look in other popular browsers, like Internet Explorer, Firefox, or Opera. • Use Dreamweaver’s Preview command (File → Preview in Browser) to test your pages in every browser you can get your hands on. • Thorough evaluation, however, you should preview your pages using every combination of browser and operating system you think your site’s visitors may use. At the very least, try to test your pages using Internet Explorer 7, 8, and 9 on Windows; Chrome on Window PCs and Macs; Firefox on Windows and Macs; and Safari on the Mac.

5. Browser Compatibility • According to the Market Share website ( http:// bit.ly/ q7UEdA ), Internet Explorer 8 for Windows is still the most popular web browser, followed by Internet Explorer 9, Chrome, and Firefox. Including all versions, Internet Explorer claims over 53 percent of the worldwide market for browsers (as of January 2012). • Dreamweaver Browser Compatibility • File → Check Page→ Browser Compatibility

6. Validate your pages • HTML and CSS errors can easily slip into your code if you edit your files with a text editor or work on pages someone else created. These errors, called validation errors, are often the source of cross-browser display problems, messed-up layouts, and incorrect formatting. • CS6 use the industry-standard W3C validator. The W3C, or World Wide Web Consortium, develops most of the technologies web designers rely on, like HTML and CSS, and they’ve always provided a very good validator. The validator resides online, but Dreamweaver CS6 makes the testing process simple by incorporating it File → Validate → Validate Current Document (W3C).

7. Check the spelling • Check the spelling on your pages. Amazingly, people often overlook this simple step. As a result, you can easily find otherwise professional-looking pages undermined by sloppy spelling. • Highlight the text you want to check (which can even be a single word). • Commands → Check Spelling (or press Shift +F7). File → Check Page→ Spelling

8. Check your links • Dreamweaver’s Check Links Sitewide command scans an entire site’s worth of files, and reports all the links and paths that don’t lead to a file. (It’s one of Dreamweaver’s site management features, meaning that you have to set up a local site before you can use this command. • Dreamweaver checks only links and paths within the local site folder; it doesn’t check links that lead to other people’s sites • If your local site contains a lot of pages, you can exclude files from the Check Links Sitewide operation using the Cloaking feature described on Cloaking Files . Makes the link-checking operation go faster. • File → Check PageLinks

9. Run Site Reports • It’s always the little things. When you build a website, small errors inevitably creep into your pages. While not necessarily life-threatening, forgetting to title a page or add an Alt property to an image does diminish the quality and professionalism of a site. Use Dreamweaver’s site-reporting feature to quickly identify these problems • Choose Site →Reports.

10. Site Reports

11. Run Site Reports • Click Run. • Dreamweaver analyzes the pages you specified and produces a report listing pages that match your settings. • Each line in the Results window displays the name of the file, the line number where the error occurs, and a description of the error. • In the Results panel below the document window, double-click the file to open it. • Dreamweaver opens the file and highlights the offending code.

12. Run Site Reports • Fix the problem according to its type. • For a page containing Combinable Nested Font Tags, use Dreamweaver’s powerful “Find and Replace” command to fix many missing ALT • Continue opening files from the Results window and fixing them until you correct each mistake. • you must open and fix each page individually. • To save the results of your report, click the Save Report button. • Dreamweaver opens a Save As dialog box, and lets you save the report as an XML file

13. Cleaning Up HTML (and XHTML) • Dreamweaver adds the correct tags in the correct order. But there are exceptions to every rule. In the process of formatting text, deleting elements, and — in general — building a web page, it’s quite possible to end up with less-than-optimal HTML. While Dreamweaver usually catches potentially sloppy code, you may nonetheless run across instances of empty tags, redundant tags, and nested tags in your Dreamweaver pages. • It’s best to first use the Site Reports feature (see Site Reporting ) to identify problem pages. • Open a web page you want to clean up. • Choose Commands → Clean Up HTML (or Clean Up XHTML).