adobe dreamweaver cs5 on demand part 75 ppt

ptg 462 Chapter 19 Not all HTML documents are created equal. Some HTML documents contain problems with the overall coding; empty tags, individual font tags, improperly implemented tables… the list goes on and on. The good news is that Dreamweaver can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code, and more. The question to ask is where did this sloppy code come from? Did Dreamweaver generate code that subse- quently must be cleaned up? The answer to that question is no. However, not all the code associated with a particular Web page is generated by Dreamweaver. For example, you might switch from Design view to Code view, and enter your own code, or (and this is more likely), you might want to insert an HTML page into your Dreamweaver site that was written by another designer, or generated by another application. If that's the case, Dreamweaver can help you straighten out the code with a click of a button. It's really that simple. Cleaning Up HTML Clean Up HTML or XHTML Open the Web page you want to clean up. Click the Commands menu, and then click Clean Up HTML or Clean Up XHTML. Select the Remove check boxes you want from the following options: ◆ Empty Container Tags. Removes tags that have no content. ◆ Redundant Nested Tags. Removes all redundant instances of a tag. ◆ Non-Dreamweaver HTML Comments. Removes all comments not inserted by Dreamweaver. ◆ Dreamweaver Special Markup. Removes comments related to Dreamweaver code for automatically updating templates and library-based documents. ◆ Specific Tags. Removes custom tags specified in the Adjacent text box. 3 2 1 1 2 From the Library of Wow! eBook ptg Chapter 19 Testing a Web Site 463 Select the Options check boxes you want from the following options: ◆ Combine Nested <font> Tags When Possible. Combines two or more font tags when they control the same range of text. ◆ Show Log On Completion. Displays an alert with details about the changes made to the document when the cleanup is complete. A pop-up window will appear listing what actions were performed in cleaning up the document. Click OK to clean up the active document. Review the clean up summary results, and then click OK. 6 5 4 5 3 4 6 From the Library of Wow! eBook ptg 464 Chapter 19 If you have a Microsoft Word document saved as an HTML file, you can open it in Dreamweaver, and then use the Clean Up Word HTML command to convert the file into HTML compliant Web pages. The Clean Up Word HTML command removes unnecessary HTML code generated by Word. Before you convert a Word HTML file to a compliant Web page in Dreamweaver, it’s a good idea to create a backup of the original Word (.doc and .htm) files, because you may not be able to reopen the HTML document in Word once you've applied the Clean Up Word HTML command. Cleaning Up Word HTML Clean Up Word HTML Open the HTML file created in Microsoft Word 97 or later you want to use in Dreamweaver. Click the Commands menu, and then click Clean Up Word HTML. Click the Clean Up HTML From list arrow, and then select the Word version you want to use. Select from the following Basic options: ◆ Remove All Word Specific Markup. Removes Word- specific HTML code. You can select the options you want on the Details tab. ◆ Clean Up CSS. Removes Word- specific CSS. ◆ Clean Up <font> Tags. Removes HTML tags, converting the default body text to size 2 HTML text. ◆ Fix Invalidly Nested Tags. Removes the font markup tags generated by Word. ◆ Apply Source Formatting. Uses source formatting in the HTML Format Preferences dialog box. 4 3 2 1 1 2 From the Library of Wow! eBook ptg Chapter 19 Testing a Web Site 465 ◆ Show Log On Completion. Displays an alert with details about the changes made to the document when the cleanup is complete. A pop-up window will appear listing what actions were performed in cleaning up the document. Click the Detailed tab. Select from the following Advanced options: ◆ Remove Word Specific Markup. Select to enable the options. ◆ XML from <html> tag ◆ Word meta and link tags from <head> ◆ Word XML markup ◆ Conditional tags and their contents ◆ Remove empty paragraphs and margins from styles ◆ Clean Up CSS. Select to enable the options. ◆ Remove inline CSS styles when possible ◆ Remove any style property that starts with "mso" ◆ Remove any non-CSS style declaration ◆ Remove all CSS styles from table rows and cells Click OK to perform the conversion. Review the clean up summary results, and then click OK. 8 7 6 5 3 4 5 7 6 8 From the Library of Wow! eBook ptg 466 Chapter 19 When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users. Web accessibility means that people with disabilities can use the Web. In addition, older people with chang- ing abilities due to aging have better access to the Web. Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. Dreamweaver understands the importance of Web accessibility and gives you the means to make your pages more accessible to the handicapped. As a matter of fact, Dreamweaver offers screen reader support, keyboard navigation, and operating system accessibility support. A screen reader speaks the text that appears on the com- puter screen. In addition, it reads non-textual information, such as button labels or image descriptions in the application. Dreamweaver supports JAWS for Windows from Freedom Scientific, and Window- Eyes screen readers from GW Micro. When designing pages to be compliant with screen readers, understand that the screen reader starts reading in the upper-left corner of the Document window. In addition, since the policy on accessibility standards changes every year, Dreamweaver gives you the ability to check your pages against the current standards. Whenever you create a new Form object, Frame, Media or Images item, a dialog box appears with accessibility options. Adding Accessibility Set Accessibility Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the Accessibility category. Select the items you want to display accessibility options for: ◆ Form Objects ◆ Frames ◆ Media ◆ Images Click OK. 4 3 2 1 4 2 3 From the Library of Wow! eBook ptg Chapter 19 Testing a Web Site 467 Add Accessibility Open the Web page with the accessibility you want to add. Add a specific item to the Web page (in this example, an image was added). Select from the following options in the Image Tag Accessibility Attributes dialog box: ◆ Alternate Text. Reader programs use the text to describe the item to the visually impaired. For example, if it were a Home button, you might add the text, Home Page. In addition, the text pops up in a small window, when the visitor's mouse hovers over it. ◆ Long Description. Displays a file that contains a longer textual description of the object. For example, you might have an image of a sunset, and you want to give visually impaired readers a more in depth description. Enter the URL to the file, or click the folder icon to browse for it. Click OK. 4 3 2 1 3 For an image 4 4 For spry validation element 3 Did You Know? You can add accessibility to an element. If you want to add or modify accessibility options to an existing element, click the object, add the Alt tag information using the Properties panel, or right-click the object, and then click Edit Tag. You can create an accessibility report. Click the File menu, point to Check Page, and then click Accessibility. From the Library of Wow! eBook . navigation, and operating system accessibility support. A screen reader speaks the text that appears on the com- puter screen. In addition, it reads non-textual information, such as button labels. want from the following options: ◆ Empty Container Tags. Removes tags that have no content. ◆ Redundant Nested Tags. Removes all redundant instances of a tag. ◆ Non -Dreamweaver HTML Comments Site 463 Select the Options check boxes you want from the following options: ◆ Combine Nested <font> Tags When Possible. Combines two or more font tags when they control the same range