Subtitles of the Movie

Let me now review the top new features of the CS4 version of Dreamweaver starting with the new user interface. As you can see, those of you that have used Dreamweaver CS3 this interface is not significantly different from the last version of Dreamweaver although it's just as customizable, for example I can bring out these palettes and I can dock the palettes to the edge of my interface I can also dock these palettes together that is that I have my CSS styles and my Insert palette together, let's go ahead and close that. Now there is one main difference with this interface and that is this Insert palette, this used to be an Insert Bar along the top of the interface, now it's a palette just like all the other palettes and windows accessible via the Window menu you notice that I can dock the Insert palette, I can minimize it and maximize it, I can undock it, so you still have a lot of the customizable features that you had in the previous versions of Dreamweaver, this is the Windows version so the docking looks like this in Windows, let's go ahead and close this. One of the most anticipated features of Dreamweaver CS4 is Live View, this is a preview environment that renders the webpage as if it were in Safari, Camino, OmniWeb, one of the many other web browsers that use the WebKit engine. It does all this while still retaining access to the code, I have a good example here to demonstrate Live View, I'm currently in Design View, this is the Whizzywhig environment and this doesn't use WebKit but the same rendering engine as the last Dreamweaver so as a result Live View is given a separate preview status right here in this tab and by clicking on it notice that I render this page out so that I can see it as the browser would see it, turning Live View off, I have an eye frame here, another HTML page is being inserted in the middle here and unless I go to Live View I can't see that so this eliminates the need, in the past you had to go to File, Preview, and Browser to really see what the page would look like in the browser so you no longer need to do that you have a very handy Live View right here in the workspace. CSS is becoming an evermore important tool for the web designer and the new Property Inspector has a new CSS tab that shows styles the current collections for everything as well as all the applicable CSS rules. Let me go ahead and move out of Live View and open up the Property Inspector by clicking on the gray bar down at the bottom, notice that there's a CSS tab right here, the default is HTML which looks like the standard old fashioned Property Inspector that you might may be familiar with in Dreamweaver 8 or CS3, there's a new CSS tab right here, notice that is there's a new edit Rule button that will bring up the CSS rule definition dialogue right from here instead of having to access this from the CSS window. There's also a CSS panel that will bring up the CSS window or panel right there for you instead of having to go to the Window menu and then choose CSS Styles. Another really nice feature is that you can hover over any of these rules and it gives you a nice English explanation of what that rule is, this one is the articles, it's an advanced ID, that's what the pound sign is, more about the selectors that indicate the names here, later in this tutorial but this is an advanced ID and it's defined in the 3 call left nav external style documents so this is a new, a new tip tool to give you jargon free English explanations of CSS principals so to summarize new CSS rules can be created and applied directly here in the Property Inspector panel and stored in the same document or in an external style sheet as well as you have direct access now to the CSS panel right from the Property Inspector. Another new feature up here at the top of the document window, the new Related Files feature displays all the documents associated with your current page where there's CSS, Javascript, PHP, or XML, notice that this document here has files associated with it, three call left nav which is an external style sheet, another one here from the Spry menu and then I have a Spry menu Javascript file, all three of these files must be associated with this file in order for all of its features to work properly, this is a nice feature that reminds you would need for example to upload all three of these files to your host together with this clients.html file for everything to work properly. Another new feature in Dreamweaver CS4 is the code navigator window on the Windows platform, just hold down the Alt button and then click on any element on the page, that will bring up this code navigator popup window which will show you all the code sources of the item you clicked, if you're on the Macintosh operating system you'll want to hold down the command and the option keys and then click on any element. To remove the code navigator window simply click anywhere without holding down the Alt key or the Command Option keys if you're on the Mac, notice that in this case I have the File name, the iFrame source, the template that I'm using, the external style document and all the rules, the style rules that I'm applying in this iFrame document, the code navigator will also show server side includes, external Javascript functions and much much more. You also have now in Dreamweaver CS4 Code Hinting for Ajax and Javascripts Frameworks, this allows you to write Javascript more quickly and accurately with improved support for Javascript core objects and primitive data types, you can now work with pocket or Javascript Frameworks including jQuery, Prototype, and Spry, let me continue my review of all the new features in Adobe Dreamweaver CS4 in the next movie.