A Web Developer Looks at Adobe Dreamweaver CS5
- Enhanced CSS starter layouts
- Support for PHP-based content management systems
- Custom and site-specific code hinting
- Comprehensive CSS support
- Integration with Adobe BrowserLab
First up are the enhanced CSS starter layouts. These layouts give the user a starting point, a template which can be modified if necessary. An important change in this version is the instructions given when using the templates. In the screen shot above, I'm using 2 Column, Fixed, left sidebar, header and footer.
In the Document toolbar, select Designer view, then click on Live View. Codeview.gif The next step is to click on Code view in the Document toolbar, which shows the HTML and the comments.
To get more information, click on local.css in the Document toolbar. This shows you the CSS document and also gives you a lot of information about the selectors. This will help you learn CSS.
CSS SupportWhen HMTL is separated from CSS it becomes easier to work on the actual design. The challenge can be working with CSS, especially understanding the box model.
The new CSS inspection tools allow you to view the box model properties of a given element and make adjustments in the CSS panel by using visual cues. The screen shot above shows how this would work in actual practice.
The first thing to notice is the Document toolbar. Note that both the Design view and the Live View are enabled. Next, click on the Inspect button to activate it. As you mouse over the different elements, you'll notice that the individual elements light up in combinations of aqua, lavender and yellow. This is also reflected in the CSS Styles panel on the right of the workspace.
When you look at the screen shot, you'll see that the center column of text doesn't fit properly and also displays a yellow highlighting to the right and below the text. To fix the text, click on it to freeze it.
Next, go to the CSS Styles panel and click on the value for the margin-right property (which is set to 40px).
Doing so opens the CSS Rule Definition dialog box. In the Box category, change the right margin property to zero and click on OK.
This fixes the text flow problem.
Another way of fixing problems is to turn properties on and off, then view the changes. Making sure that the Inspect button is enabled, we go back to the text in the center column.
You'll notice that there's too much padding on the left side of the text, which is shown by the lavender highlighting. Instead of setting the value to zero, you can disable the property instead. To do so, click on the text to freeze it, then go to the CSS Styles panel and move your cursor over the individual properties. As you do so, you'll notice a gray disable icon to the left of each property.
Clicking on it will disable the property and you'll immediately see the change in Live View (as indicated by the red disabled icon).
To see what's happened in your code, right-click on the disabled property and in the pop up, choose Go to Code. Note the CSS comment. You can reactivate this property at any time if you wish. To do so, click on the red Enable CSS Property icon (as in the previous screen shot). Doing so reactivates the property and removes the comment from your CSS code.
Now I can test this out. To do so, I go to the top of the Document toolbar and click on the on Preview/Debug in Browser icon and choose Preview in Adobe Browser Lab (Ctrl+Shift+F12). You'll need to enter your Adobe username and password to continue. If you don't have one, you'll need to set that up first. Also, when you load the Browser Lab, it can take awhile to load (several minutes) if you're on a slow connection.
This is only one example, though you can see how the Browser Lab will simplify the ability test out web designs.
+Note: If you register your product before April 30, 2011, you will get 12 months of access to the Adobe CS Live service.