Wile Adobe dreamweaver CS5 Bible phần 9 pps

1043 Maximizing Cross-Browser Compatibility IN THIS CHAPTER Maintaining different versions of Web pages Validating your XML code Testing your page against specific browsers Handling cross-browser compatibility E ach new release of a browser is a double-edged sword. On one hand, an exciting array of new features becomes possible. On the other, Web designers have to cope with yet another browser-compatibility issue. In today’s market, you find the following in use: A fair number of current browsers, although reasonably L standards-compliant, which are still different from one another in implementation A vast array of mobile browsers occupying a very fluid space that L ranges from the Apple iPhone, with its faithful but Flash-less (as of this writing) Web page rendering, to tiny cell phone screens that display text and links only Browser compatibility is one of a Web designer’s primary concerns (not to mention the source of major headaches), and many strategies are evolving to deal with the issue. Dreamweaver is at the forefront of cross-browser Web page design, both in terms of the type of code it routinely outputs and in its specialty functions. This chapter examines the browser-targeting techniques available in Dreamweaver. From multi-browser code to XML validation capabilities, Dreamweaver helps you get your Web pages out with the most features to the widest audience. 1044 Part VI: Enhancing Productivity and Web Site Management Converting Pages in Dreamweaver Web sites are constantly upgraded and modified. You’ll eventually need to enhance a more tradi- tional site with new features, such as AP elements. Some of the older sites used elaborately nested tables on their pages to create a semblance of absolute positioning; normally, upgrading these Web pages takes hours and hours of tedious cutting and pasting. Dreamweaver can bring these older pages up-to-speed with the Convert Tables to AP Divs command, which you reach via Modify Convert ➪ Tables to AP Divs. Dreamweaver also includes a command to convert tables to AP elements, preserving their location but enabling greater design flexibility and dynamic control. A Webmaster’s life just got a tad easier. The Convert Tables to AP Divs command can also be used to convert a page created by another Web authoring program that uses nested tables for positioning. After tables have been transformed into AP elements, the layout of the entire page is much easier to modify. It’s even possible to make the switch to more modern capabilities, modify your page, and then, with the Convert AP Divs to Tables command, re-create your older page in a newer format. The name of the Convert Tables to AP Divs command is a little misleading. After you issue this command, every HTML element in the new page — not just the tables — is placed in an AP element. Moreover, every cell with content in every table is converted into its own AP element. In other words, if you are working with a 3 × 3 table in which one cell is left empty, Dreamweaver creates eight different AP elements just for the table. Note If you want to convert an older page to a page with AP elements, but the page has no tables, Dreamweaver places all the content in one AP element, as if the <body> tag were one big single-cell table. n To convert an older Web page with (or without) tables to a more modern standards-compliant Web page with AP elements, follow these steps: 1. Choose Modify ➪ Convert ➪ Tables to AP Divs. 2. Select the desired options from the Convert Tables to AP Divs dialog box that opens (see Figure 30-1): Prevent Overlaps: L Isolates all AP elements from one another. AP elements need to remain separate if the opposite process (Convert AP Divs to Tables) is invoked. Show AP Elements Panel: L Displays the AP elements panel for easy selection and renaming of the newly created AP elements. Show Grid: L Reveals the standard grid, useful for aligning AP elements. Snap to Grid: L Every new AP element created is positioned to the closed grid point. Exercise caution when choosing this option because your table layout is likely to be highly revised. 3. When you’re done, click OK to close the dialog. 1045 Chapter 30: Maximizing Cross-Browser Compatibility Dreamweaver converts the page immediately. If you need to return to a table-based layout, choose File ➪ Convert ➪ AP Divs to Tables. Cross-Reference To learn how to use Dreamweaver’s AP Divs to Tables roundtrip features, see Chapter 10. n Figure30-1 The Convert Tables to AP Divs dialog box Validating Your Code Most browsers are very forgiving. They can take a document riddled with HTML infractions and, through “intelligent” interpretation, manage to display the page beautifully, with no indica- tion that anything is awry with the underlying code. As a responsible Web author, however, you should never rely on the kindness of your users’ browsers! It’s far safer to take the extra time to validate the correctness of your code’s syntax rather than risk having a browser that’s less forgiving than you had hoped. Note To validate your HTML page, most Web professionals find that the W3C service is the most complete service. Validate your HTML (http://validator.w3.org) or CSS (http://jigsaw.w3.org/css-validator) by inserting the URL of your published page or uploading the file directly. n Fortunately, Dreamweaver can help. You can use its built-in Validator to check a document’s code for tag or syntax errors. The Validator supports a wide range of tag-based languages, including XHTML, XML, CFML (ColdFusion Markup Language), SMIL 1.0 (Synchronized Multimedia Integrated Language), and WML (Wireless Markup Language). And you can customize how the Validator works, as discussed in the next section, “Setting Validator preferences.” To validate your code, follow these steps: 1. Open the document you want to validate. 2. If it is an XML or XHTML file, choose File ➪ Validate ➪ As XML. For ColdFusion, choose File ➪ Validate ➪ ColdFusion; for other files, press Shift+F6. After the Validator runs, the results — filenames, line numbers, and error descriptions — are listed in the Validation panel, as shown in Figure 30-2. 1046 Part VI: Enhancing Productivity and Web Site Management Figure30-2 It’s up to you to decide how to handle errors flagged by Dreamweaver’s Validator. 3. Double-click an error in the list to display the offending code in the document. 4. To display the error report in your primary browser, click the Browse Report button. To keep a record of the report, print the browser page or click the Save Report button to generate an XML report file. Tip Right-click (Control+click) in the Validation panel to bring up a context menu that lets you browse the error report, save the report, and more. n 1047 Chapter 30: Maximizing Cross-Browser Compatibility Setting Validator preferences You can customize how the Validator works by changing its preferences. For example, you can specify which languages the Validator should check against and which types of errors the Validator should hunt down. To set your Validator preferences: 1. Choose Edit ➪ Preferences (Dreamweaver ➪ Preferences) to open the Preferences dialog box and then click the Validator category to display the Validator options (see Figure 30-3). 2. Select the languages you want the Validator to check against. Figure30-3 You can use the options in the Validator category of the Preferences dialog box to customize the workings of your Dreamweaver Validator. Note If you validate CFML (ColdFusion) and HTML in the same document, the Validator won’t be able to assess the number sign (#) correctly. Why not? Because, in CFML, # is an error and ## is correct, but in HTML, the con- verse is true: ## is an error and # is correct. n 3. Click Options to open the Validator Options dialog box (see Figure 30-4). 1048 Part VI: Enhancing Productivity and Web Site Management Figure30-4 Use the Validator Options dialog box to exercise further control over your Validator’s range. 4. Under Display, select the error types you want the Validator report to display. Under Check For, select the items you want the Validator to look for. 5. Click OK to close the Validator Options dialog box; then click OK to close the Preferences dialog box. Checking Your Page for Compatibility Testing is an absolute must when you’re building a Web site. It’s critical that you view your pages on as many browsers/versions and platforms as possible — especially in the age of CSS design. Variations in layout, color, gamma, page offset, and capabilities must be observed before they can be adjusted. A more basic, preliminary type of testing can also be done right from within Dreamweaver. Dreamweaver’s Browser Compatibility Check feature (File ➪ Check Page ➪ Browser Compatibility) enables you to check a Web page — or an entire Web site — against any number of browser profiles for known CSS issues. Currently, Dreamweaver comes with profiles for the following browsers: Firefox 1.0 Internet Explorer 5.5 Opera 7.0 Firefox 1.5 Internet Explorer 6.0 Opera 8.0 Firefox 2.0 Internet Explorer 7.0 Opera 9.0 Firefox 3.0 Internet Explorer 8.0 Safari 1.0 Internet Explorer 5.0 Netscape 7.0 Safari 2.0 Internet Explorer 5.2, Macintosh Netscape 8.0 Safari 3.0 1049 Chapter 30: Maximizing Cross-Browser Compatibility You can choose to check your page or site against a single browser profile, all of them, or anything in between. Although not a substitute for real-world testing, the Browser Compatibility Check feature can help you pinpoint potential issues and problematic code at design time. Dreamweaver checks for common CSS errors across the full range of browsers. When the error is detected, a brief description appears in the Browser Compatibility Check category of the Results panel. In addition, a link to a more in-depth discussion of the error, complete with possible solutions, on the Adobe-hosted CSS Advisor mini-site is made available. The errors and a brief description are listed in Table 30-1. Table30-1 Browser Compatibility Errors CSS Error Description Browsers Affected Positioned Tables/ AP Elements Bug A positioned table is not considered a container for absolutely positioned elements. The AP elements are positioned relative to the browser window instead. Firefox 1.0, Firefox 1.5, Firefox 2.0, Netscape 7.0, Netscape 8.0 Border Chaos Bug When the second of two consecutive block-level boxes has a negative top margin and that same box or one of its ancestors has a border, the borders will not render correctly. Internet Explorer 6.0 Col and Colgroup/ Caption Conflict If the caption tag is placed directly after the opening table tag as required by the HTML 4.01 specification, any styles applied to col and colgroup tags in the same table are ignored. Safari 2.0 The Disappearing List Background Bug When list items have background colors or images, and the list is placed within a floated, relatively positioned container, the backgrounds may not render as specified. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Disappearing Button Background Bug A floated button will lose its background and borders when floated, leaving only the button text. Opera 7.0, Opera 8.0 Disappearing Dropdown in Floated List Bug A drop-down menu (select) inside a floated list (ul, ol, dl) with overflow: auto will disappear when the user changes the menu’s value. Firefox 1.0 Disappearing Dropdown in Floated List Bug A drop-down menu (select) inside a floated list (ul, ol, dl) with overflow: auto will not be visible unless the menu is inside a form tag. Internet Explorer for Macintosh 5.2 continued 1050 Part VI: Enhancing Productivity and Web Site Management CSS Error Description Browsers Affected Disappearing Label/ Input Bug If a group of floated <label>foo</label> <input /> pairs is separated by br tags and placed inside any container (including the body) on which the letter-spacing property is set, one of the following problems occurs, depending on whether line breaks or other whitespace occurs between the tags: (1) every other pair disappears; (2) only the first label and input appear; (3) all inputs appear, but all labels except the first disappear. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0 Doubled Float Margin Bug When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug affects only the first float in a row of one or more floats. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Duplicate Indent Bug When a margin is applied to a floated box on the opposite side as the direction of the float, and the floated box is directly followed by inline content, the first line of inline content will be indented by the same amount as the margin. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Escaping Floats Bug If a series of floats followed by a clearing div is placed inside a container with no specified width or height, and the floats’ width exceeds the natural width of the container, the container will not expand vertically to fit the floats — and the floats will extend outside the container. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0 Expanding Box Problem Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Extra Whitespace in List Links Bug If a link with display: block and no explicit dimensions is inside a list item, any spaces or line breaks that follow the list item in the code will cause extra whitespace to appear in the browser. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 First Line/Text Transform Bug text-transform: uppercase is ignored when applied to the :first-line pseudoelement. Safari 2.0 Float Drop Problem If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0 continued Table30-1 (continued) 1051 Chapter 30: Maximizing Cross-Browser Compatibility CSS Error Description Browsers Affected Floating Non-Float Bug If a non-floated element with a specified width directly follows a left-floated element with a specified width, the non-floated container will appear to the right of the floated element instead of allowing the floated element to overlap it. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0, Internet Explorer for Macintosh 5.2 Overlapping Floats and Headers Bug If the second or any subsequent float in a document is directly preceded by a header, the first line of text after the float will overlap the float rather than wrapping around it. Firefox 1.0 Font Variant/Text Transform Conflict text-transform: uppercase and text- transform: lowercase are ignored when combined with font-variant: small-caps. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0, Internet Explorer for Macintosh 5.2 Full Height Flash Bug A Flash movie with a height of 100% will not fill the browser window unless height: 100% is specified for the movie’s container. Firefox 1.0, Firefox 1.5, Firefox 2.0, Netscape 7.0, Netscape 8.0 Guillotine Bug If an element contains both a float that is not cleared and links that use an a:hover rule to change certain properties in non-floated content after the float, hovering over the links could cause the bottom of the floated content to be chopped off. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Half Line-Height Bug If line-height is defined for a block, it will collapse by half for any line that contains an inline replaced element (img, input, textarea, select, or object). Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Magik Creeping Text Bug Text inside a block element will creep to the left if the block is nested inside another block element that has border-left, padding-bottom, and no specified width or height. Internet Explorer 5.5, Internet Explorer 6.0 Missing First Letter Bug When a text-containing block element with position: relative and letter-spacing but no specified width or height is inside another block element that has no specified width, height, padding-top, or border-top, the first letter of the text in the inner element might disappear. Internet Explorer 5.5 continued Table30-1 (continued) 1052 Part VI: Enhancing Productivity and Web Site Management CSS Error Description Browsers Affected Three Pixel Text Jog When anonymous line boxes (boxes that contain inline content) are adjacent to a float, a 3-pixel gap appears between the line box and the edge of the float. This gap disappears when the content clears the float, causing the content to “jog” 3 pixels in the direction of the float. Note that the gap may be difficult to see when left-aligned text is adjacent to a right float, but it does exist — and it can lead to “float drop” in tight layouts. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Unscrollable Content Bug If one or more absolutely positioned elements are placed within a relatively positioned element with no assigned dimensions, either no scrollbar will appear at all, or it will not extend far enough to view all of the content. (Note: This bug will not affect your page if the content in the AP element does not extend beyond the height of the viewport.) Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Z-Index Bug Positioned containers define a new stacking order, even when the computed z-index of the container is auto. This can cause positioned children of the container to appear above other positioned elements on the page when they should not. Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0 Checking your pages Given the vast array of browsers — and their widely varying capabilities — many designers find that keeping a page problem-free is a significant challenge. Dreamweaver can help you stay on your chosen path, alerting you to errors on demand. The Check Browser Compatibility command is found under the Document toolbar’s Check Page menu button. When selected, Dreamweaver tests the page when it is opened against the browsers selected in the Target Browsers dialog box, as shown in Figure 30-5. To modify the current settings, follow these steps: 1. Choose Settings from the Browser Compatibility Check menu. 2. In the displayed Target Browsers dialog box, select the browsers you want to verify your pages against. 3. For each selected browser, choose the minimum version for testing from the dropdown list. 4. When you’re finished, click OK. Table30-1 (continued) [...]... version control system Another member of the Adobe software family, Contribute, is tightly integrated with Dreamweaver Contribute-enabled sites can be administered directly from within Dreamweaver with full access to the latest version of Contribute administrative controls In addition to providing links to industry-standard protocols used in team development, Dreamweaver also includes a more accessible... elements Dreamweaver reports give the Webmaster and team members a new tool for efficiently building Web sites The information from a Dreamweaver report can be instantly used ouble—d clicking any report detail opens the referenced file r stored as an XML file for later output —o Dreamweaver includes seven standard reports that may be generated individually or combined into one As with many Dreamweaver. .. backward compatibility you’re trying to achieve, Dreamweaver has features and techniques in place to help you get your Web pages viewed by the maximum number of users When addressing browser-compatibility issues, keep these points in mind: L 1058 Dreamweaver can take a Web page created with AP elements and create another Web page that uses tables instead Tools in Dreamweaver, such as Convert AP Divs to Tables,... browsers L You can use Dreamweaver s built-in, customizable Validator to check your code for tag or syntax errors on XML, XHTML, and ColdFusion pages L Dreamweaver enables you to check your Web page, selected pages, or an entire Web site against a browser profile to look for CSS implementations that cause a known problem in one or more browsers In the next chapter, you learn how to use Dreamweaver for building... working on the same page will attest Dreamweaver includes a number of features that make it easy for teams to work together In addition to the existing Check In/Check Out facility, version control and collaborative authoring have been enabled in Dreamweaver through the connectivity to the WebDAV (Web Distributed Authoring and Versioning) standard Of special note is Dreamweaver s robust support for Subversion,... indicates how sure Dreamweaver is that the highlighted selection is affected by the indicated issue There are four relevancy rating symbols ranging from a quarter-filled to a completely filled circle he more filled the circle, the more sure —t Dreamweaver is of its assessment For more detailed information, click the View Solutions link to visit a related page in the CSS Advisor section of Adobe. com See... category in Preferences, your file is automatically saved; otherwise, Dreamweaver asks if you want to store the file before transferring it 3 If Prompt On Put/Check In is enabled, Dreamweaver asks if you want to transfer the dependent files as well If any changes have been made to the dependent files, click Yes After the files are transferred, Dreamweaver removes the checkmarks from the files and makes the... program other than Dreamweaver lick the Clean Up —c button Dreamweaver gives you an opportunity to confirm the delete operation 7 Click Save to close the Site Setup dialog box, and then click Done to close the Manage Sites dialog box Figure 31-5 Design Notes play an important role in cross-product integration when working with Photoshop, Fireworks, Flash, and Contribute 10 69 Part VI: Enhancing... among team members However, Design Notes are also used by Dreamweaver and other Adobe products, including Fireworks, to pass data between programs and program commands For example, Fireworks uses Design Notes to store the location of a Fireworks source file that is displayed in the Image Property inspector when you select the exported graphic in Dreamweaver Keep in mind the dual nature of Design Notes... This Site option Selecting this option causes Dreamweaver to create a file called dwSiteColumnsAll.xml within the _notes folder on the remote site When another member of your team connects to the site, Dreamweaver reads this file and incorporates it into that person’s Site Setup This enables any other user to see the same column set up on his or her system 9 Use the up and down arrows to reposition the . Advisor mini-site on Adobe. com ( www .adobe. com/go/ cssadvisor ) takes a community-based approach to help Web developers find their way out of the CSS jungle. Each time you run Dreamweaver s Browser. system. Another member of the Adobe software family, Contribute, is tightly integrated with Dreamweaver. Contribute-enabled sites can be administered directly from within Dreamweaver with full access. left empty, Dreamweaver creates eight different AP elements just for the table. Note If you want to convert an older page to a page with AP elements, but the page has no tables, Dreamweaver