Checking Your Page Code

     

Some developers view Web design as a race to get a site from the drawing board through the development process to the finish line ”the live server. In actuality, there are many steps between developing the site's pages and putting out the virtual " Open " sign. The difference between a mediocre site and a great site is often the attention paid to these interim details.

By the time you've designed a table layout, added navigation, inserted images and text, and linked everything to the Web at large, you might be rather sick of looking at your site. It's worth resigning yourself, however, to a last look or two to ensure that everything's in place.

Cleaning Up Your HTML

As you well know, even the best Web developers sometimes have errors in their markup. Dreamweaver writes fairly tight markup, but when creating complex pages, it can sometimes leave behind extraneous or redundant nested tags. One method of fixing these mistakes is using the Find and Replace commands in a well-planned pattern to hunt down common problems. Dreamweaver offers a better solution, however. The Clean Up HTML/XHTML command has the following options:

  • Empty Container Tags ” Removes tags that don't have content between the opening and end tags (for example, <i></i> ).

  • Redundant Nested Tags ” Removes tags that are nested redundantly within the exact same tag (for example, <b>Most chefs <b>use </b>three basic knives.</b> ).

  • Non-Dreamweaver HTML Comments ” Removes comments inserted by developers. This command does not remove comment tags inserted by Dreamweaver to mark templates or library items, (for example, <!--insert image of wildlife here when graphics are complete--> ).

    graphics/troubleshooting_icon.jpg

    Do you prefer comments to Design notes? See "HTML Comments and Design Notes" in the "Troubleshooting" section at the end of this chapter to determine which is best for you.


  • Dreamweaver Special Markup ” Removes comments inserted by Dreamweaver to identify templates and library items. For example, <!--TemplateBeginRepeat name ="..." --> is markup inserted by Dreamweaver to define a repeatable region in a template.

  • Specific Tag(s) ” Allows you to specify a tag or tags to remove. Any content that appears within that tag is preserved. Multiple tags can be separated with commas in the tag field. So, if you type b, i into the tag field, all instances of the <b> and <i> tags will be removed from the document.

  • Combine Nested <font> Tags when Possible ” Combines multiple <font> tags if they surround the same block of text. For example, <font color ="FFFFFF"><font size ="3">assisting wildlife</font></font> would be combined into <font color="FFFFFF" size="3">assisting wildlife</font> .

    NOTE

    This command does not combine redundant attributes from <font> tags that control only a subset of the text block, so the <font color="FFFFFF" size="3">The <font color="00FF00" size="3">Green</font> Department thrives on assisting wildlife</font> would not be combined.


  • Show Log on Completion ” Displays a report showing how many changes were made.

To use the Clean Up HTML command, do the following:

  1. Open the document you want to clean up.

  2. Select Commands, Clean Up HTML. If you're developing in XHTML, the Commands menu automatically changes this option to Clean Up XHTML.

  3. Select the options for Dreamweaver to find and repair (see Figure 7.11).

    Figure 7.11. The Clean Up HTML/XHTML dialog box lists the many options of this command.

    graphics/07fig11.jpg


  4. Click OK.

If you select the Show Log on Completion option, Dreamweaver displays a report listing how many items were fixed or removed after the command is executed (see Figure 7.12). If you ran the Clean Up XHTML command, this report also states the number of img tags that don't have alt text attributes.

Figure 7.12. This alert box details the number of changes made to the document after the Clean Up XHTML command is executed.

graphics/07fig12.jpg


TIP

If the Clean Up XHTML command reports missing alt tags, it's a simple matter to use the Find command to search for img tags to find those without alt attributes.


Estimating Download Speed

Even with the advent of broadband, download speed is still an issue for many Web surfers. If anything, faster Internet access has made visitors even more impatient for sites to load. You can estimate the speed at which a page will download by looking at the Download indicator at the bottom of the Document window (see Figure 7.13).

Figure 7.13. The Download indicator displays the file size of the page and all its components and approximates the download time at a preselected connection speed.

graphics/07fig13.jpg


The Download indicator settings are controlled by the Status Bar category of the Preferences dialog box (accessed by selecting Edit, Preferences, and then clicking the Status Bar category). As you work, set this option to match that of the expected average visitor of your site. When your page is complete, you should set this preference at various connection speeds to get an estimate of the download times on both extremely fast and very slow connections.

If the download time appears significant, use the Clean Up HTML/XHTML command to remove any extraneous tags and comments. Be sure you've optimized all your images to their fullest without sacrificing too much quality.

NOTE

Remember, the Download indicator provides only an approximation of download speed. Dreamweaver can't assess factors such as traffic and server speed.


Spell Checking

There are very few truly great spellers on the planet, and even the best spellers make mistakes. Dreamweaver's spell-check feature helps both the best and the worst spellers hide their flaws from public view. To run the spell-checker, do the following:

  1. Select Text, Check Spelling from the Document window menu.

  2. The spell-checker stops at the first word in the document that isn't in its dictionary. The word is highlighted in the document and is also displayed in the Check Spelling dialog box (see Figure 7.14).

    Figure 7.14. The spell-check highlights the misspelled word so you can see it in context. The dialog box makes suggestions as to the proper spelling or allows you to manually type the correct word.

    graphics/07fig14.jpg


  3. If you know the word is spelled correctly, click the Add to Personal button to add the word to your dictionary.

    graphics/troubleshooting_icon.jpg

    Work for a specific industry or profession that uses many words not in a standard dictionary? No problem! See "Adding Dictionary Terms" in the "Troubleshooting" section at the end of this chapter.


  4. If the word is spelled correctly, but you don't want to add it to your personal dictionary ”such as when you're using an intentional misspelling to make a point within the context of your site ”click the Ignore button. To ignore all instances of this spelling, click the Ignore All button.

  5. If the word is indeed misspelled, either manually type the correct spelling in the Change To field or select one of the words in the Suggestions list. Click Change to replace the misspelled word with the new spelling. Or, click Change All to replace all instances of the same misspelled word.

  6. When the Spelling Check Completed alert appears, click OK to end the spell-check.

NOTE

As with all spell-checkers, Dreamweaver won't catch misuse of homonyms (by, bye) or commonly misused words (affect, effect).


Checking for Cross-Browser Compatibility

One of the biggest pitfalls Web developers become subject to is forgetting to check their sites for cross-browser compatibility. There's nothing worse than rolling out a great Web application and then having someone ask you why the pages don't load properly, the tables are out of alignment, or elements of the application don't function properly. By checking to be sure that your application works in both Internet Explorer and Netscape throughout the process, you'll save yourself the hassle of having to fix problems after the site is released to the public.

NOTE

Checking for cross-browser compatibility means more than just opening the pages in IE and Netscape. If you really want to ensure that most visitors will be able to use your site, check the site in IE 4.0 and 6.0 (or later) and also check your site in Netscape Navigator 4.0 and 7.0 (or later). The combination of these four browsers will cover the vast majority of users out there.


To help you in creating pages that are cross-browser compatible, Dreamweaver has a couple of tools that make the process easier.

Dynamic Cross-Browser Compatibility

During the page development process, you can check any page for browser errors by clicking the Dynamic Cross-Browser Compatibility button (see Figure 7.15) on the Document toolbar.

Figure 7.15. The Cross-Browser Compatibility button enables you to see any errors that your pages might encounter in specific browsers.
graphics/07fig15.jpg

To check any page for errors, do the following:

  1. Click the Cross-Browser Compatibility button on the Document toolbar.

  2. From the dropdown menu, choose Check Browser Support. After the check is completed, Dreamweaver displays a tool tip with an error count (see Figure 7.16).

    Figure 7.16. After the compatibility check is completed, a tool tip displays the error count.
    graphics/07fig16.jpg

  3. To view the code that is generating the error, click the Cross-Browser Compatibility button again and choose Next Error. Dreamweaver opens the Split view (see Figure 7.17) and highlights the first error. You can continue through the list by using the Next error menu option.

    Figure 7.17. Using the Cross-Browser Compatibility tool, you can view the code that could potentially generate the error.
    graphics/07fig17.jpg

  4. To see a complete list of the errors generated and the browsers that would potentially encounter the error, click Show All Errors from the menu.

Check Target Browsers

Another handy tool that helps you ensure your pages will function optimally in the various browsers is the Check Target Browser command. By choosing File, Check Page, Check Target Browser from the menu bar, you can run a report that displays each of the browser errors that the page would generate (see Figure 7.18).

Figure 7.18. The Target Browser Check displays each error that might be encountered and the browser that would cause the error.
graphics/07fig18.jpg

TIP

You can edit the browsers that are included in the target browser check by clicking the Target Browser Check menu dropdown in the Results panel. From the menu, choose Settings and select the minimum browser levels you want included in the report.


A Final Manual Review

The Dreamweaver tools mentioned previously in this chapter all help you prepare your site for its final journey to the remote server. Nothing, however, beats a good eye. After you've cleaned up your HTML, spell-checked the site, and ensured that everything is optimized, it's worth taking one last look at each and every page of the site. Be especially on the alert for

  • Table layouts that have gone awry as you inserted images and text

  • Missing page titles, descriptions, and keywords

  • Commonly misused words that wouldn't be picked up by the spell-checker

  • Images that don't suit the final content

  • Placeholder images that weren't replaced with final graphics

  • Cross-browser compatibility and design integrity



Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net