Subtitles of the Movie

Dreamweaver CS3's new Browser Compatibility Check Feature, abbreviated BCC in the Dreamweaver documentation helps you locate combinations of HTML and CSS that have problems in certain browsers when you run a Browser Compatibility Check on an open file. Dreamweaver scans the file and then imports any potential CSS rendering issues in a results panel. Here I can access this command on this open document by choosing File, Check Page and I want to choose Browser Compatibility and here is the Results Pane over on the left and then the browser support issue detailed over on the right. Notice that for these bugs that it found, Dreamweaver provides a confidence rating indicated by a quarter, half, three-quarter or completely filled circle. This indicates the likelihood of a bug's appearance. A quarter-filled circle indicating a possible occurrence and completely-filled circle indicating a very likely occurrence for each potential bug that it finds. Dreamweaver also provides a direct link to documentation about the bug on the Adobe CSS Advisor. This is a web page that details commonly-known browser rendering bugs and offers solutions for fixing them. I can access this right here. You can't see this very well but there's a link here to Adobe's website and clicking on the link will get you to this page here. This is the Adobe CSS Advisor providing additional information about this bug. This one's the Expanding Box Problem; states the problem and provides solutions as well as detailed descriptions of those solutions. Now, by default this Dreamweaver Browser Compatibility Check Feature checks against the following browsers: Firefox 1.5, Internet Explorer Windows 6.0 and 7.0, Internet Explorer Macintosh 5.2, Netscape Navigator 8.0, Opera 8.0 and 9.0 and Safari 2.0 were the browsers that were supported at the time of this recording. This Browser Compatibility Check Feature replaces the older Target Browser Check Feature but retains the CSS functionality by testing the code in your documents to see if any of the CSS properties or values are unsupported by your target browsers. Three levels of potential support problems may arise in the Results Pane over here in the check. An error, like you see here with the red exclamation point indicates that CSS code might cause a serious visible problem in a particular browser, such as causing parts of a page to disappear. Error in the default designation for browser support problems, so in some cases, code with an unknown effect is also marked as an error. I have also the second level of support and that's a warning here in this file here. So we'll do a File, Check Page, Browser Compatibility. Here you'll see a warning in yellow, unsupported value middle. A warning indicates a piece of CSS code that isn't supported in a particular browser, but that won't cause any serious display problems. In this case I have an unsupported value here that will affect Internet Explorer for Macintosh 5.2. The third level of support includes just informational messages indicating that code isn't supported in a particular browser, but that has no visible affect in the browser. These Browser Compatibility Checks will not alter your documents in any way, so go ahead and feel safe to run them. It's a good idea also to run them early in your CSS formatting phase to make sure that you're not going to run into any problems later and also you don't want to wait to run these so that you get quite a few warnings or errors. You'll notice that most of these documents here are fairly early in the stage of composing them so there's few errors that I need to really deal with or warnings. So that will wrap up this section of the tutorial on some sample projects that allowed us to put everything together that we've learned in the tutorial and to some demonstrated practices. It also gave me a chance to go into more details, some of the more tricky aspects of using CSS in Dreamweaver. In this section I was able to demonstrate two different ways of getting started with CSS in Dreamweaver. One is to use the numerous Dreamweaver templates that ship with Dreamweaver and then modify them to get your designs and page layouts the way you need them. The other way was to start creating CSS pages from scratch, creating your styles from scratch and then adding your DIV Tags using the AP DIV Draw Tool. I also gave you some tips for creating and applying your styles and also here I covered a very important tool for you and that's checking for cross-browser problems with CSS using Dreamweaver's Browser Compatibility Check Feature. Let me now move on and wrap up this course and also give you some tips and some suggestions and resources for where you can learn more about CSS.