Subtitles of the Movie

Continuing my review of new features in Dreamweaver CS3 that I started in the previous movie. Dreamweaver CS3 includes enhanced integration with Photoshop CS3. Now designers can simply select any portion of a design in Photoshop even those across multiple layers and paste them directly into a Dreamweaver page. Dreamweaver will present a dialog box where you can specify the optimization options for the image. Let me demonstrate that by deleting this Photoshop image and let's insert a new one by choosing insert image. And I'm going to browse to the location of a PSD file right there. That's a Photoshop file and click OK. Here is the image preview dialog where I can set my optimization feature such as my file type, JPG, or GIF and the amount of compression. And for GIF images I can also set animation parameters. click OK. Save this file, this JPG file to my local root folder. And Dreamweaver places it right there in my page. Should I ever need to edit this image I can simply double click on the image and it will open the original layer PSD file that is what will open in Photoshop for editing. The new browser compatibility check feature accessible via the main menu from file, check page, browser compatibility, generates reports that identify CSS related rendering issues in a variety of browsers. This check found one error in an external CSS file and then gave me details over here to the right. In addition it identifies problems in code view by underlining them in green. Notice that there is an error on line seven. So if we go up to line seven sure enough there's a green underlined section that identifies the problem so you can then quickly fix it if you know the solution or if you need more information you can visit the Adobe CSS advisor website. There's a link right here on the results page in the lower right hand corner. It's kind of hidden in my dialog there but you can click on that link and that'll open up the Adobe CSS advisor web page. Notice that at the time of this recording, this was in beta. This is a websit containing information on the latest CSS issues. It's more than a form of wiki page or a discussion group. The CSS advisor makes it easy for you to comment with suggestions and improvements to existing content or to add new issues for the benefit of the entire CSS community. Dreamweaver now offers a set of pre-designed CSS layouts that gets your page up and running quickly and help you learn about CSS page layout, user accessible when you open up a new document from the new document dialog. Notice that the layout column here has a variety of different layouts. These are the CSS layouts that you can use. Note site designs on the web can be categorized as one, two or three column layouts and notice that I have representations of each of these types. My one-column layouts are at the top followed by the two column layouts and then the three column layouts on the bottom. Each of these layouts then have a number of additional elements such as headers and footers so that Dreamweaver now offers a more comprehensive list of essential layout designs that you can customize to fit your needs, which is what I've done here on this page right here. Three call left NAV CSS is a cascading style sheet document that I got from one of the templates, and I based this page on that CSS layout design. I modified it for my needs but that's basically a CSS layout that I got from Dreamweaver CS3. The various CSS management features that are new in CS3 located in code view and also in the CSS window make it easier for you to perform a variety of functions with your CSS rules including moving rules from document to document or from th head of a document to an external style sheet or between different external CSS files. You can also more easily convert inline CSS to CSS rules and place them anywhere on the page that you need them just by dragging and dropping them. One more new feature is Adobe Device Central. This is integrated with Dreamweaver as well as throughout the family of Creative Suite 3 software. Adobe Device Central simplifies the creation of mobile content by giving you the ability to quickly assess essential technical specifications for each device and then shrink the text and images of your HTML pages to show accurate rendering, as it would appear on that device. And that will conclude this quick review of the top features in Adobe Dreamweaver CS3.