Learn Dreamweaver Tutorials: What's New in Dreamweaver CS5 & CS5.5?

Dreamweaver CS5 book
Dreamweaver's features evolve as the web evolves. In this lesson, you'll take a tour of Dreamweaver's new features.
What you'll learn in this lesson:
  • CMS support
  • CSS Inspection tool
  • CSS Enable.Disable
  • Adobe BrowserLab
  • PHP Code Hinting

Creating styles for navigation and a single column layout

Creating easy-to-use mobile navigation is very important because you want users to read your content and not be frustrated by content that’s difficult to access. The hit target for mobile navigation should be large enough for touchscreens and easy to read. You’ll add these styles now.

1 Click the phone.css button in the Related Files toolbar. In the CSS Styles panel, click the New CSS Rule button, and then in the Selector Type menu, choose ID. In the Selector name box, type #navigation and click OK.

In the next dialog box, and within the Type category, click the menu to the right of the Font-size field. Choose the keyword medium to override the 36 pixel value set in the original style sheet and use the browser’s sizing. This action prevents issues when there are differences between device screen resolutions.

2 Click the Positioning category, click the Height menu, and choose Auto to override the fixed height of 36 pixels from the original style sheet. Click OK to create these styles.

You will need to do more work to make the navigation look better. There are often several different rules for CSS navigation menus, so you also need to modify these.

3 In the CSS Styles panel, click the New CSS Rule button, and then in the Selector Type menu, choose Compound. In the Selector name box, type #navigation ul li. This targets the style of the list items.

compound selector in Dreamweaver

Create a compound selector to make a style for the navigation list items.

Click OK. In the CSS rule definition window, click the Box category, click the Float menu, and choose none. This overrides the float:left rule set in your original style sheet. Click OK.

4 Click the Source Code button to switch to your HTML page, and then click the Multiscreen button. Notice that by setting the float property of the list items to none, the list reverts to its default positioning, which is vertical.

changing the float value

Changing the float value of list items to none creates a vertical navigation instead of a horizontal one.

Your page is starting to improve: the navigation is now a single column. Place your cursor over the links and notice that the original hover styles are still present. One of the benefits of CSS3 Media Queries is that the original styles that have no overrides are still used.

Scroll down and notice you still need to improve other areas: the main content and the sidebar still appear broken, but this is relatively easy to fix.

5 Close the Multiscreen Preview window, and then click the phone.css button in the Related Files toolbar.

6 In the CSS Styles panel, click the New CSS Rule button, and then in the Selector Type menu, choose ID. In the Selector name box, type #main. This targets the style of the list items.

Click OK. In the CSS rule definition window, click the Box category, click the Float menu, and choose none. This overrides the float:left property and value set in your original style sheet.

7 Click the Width property menu and choose auto.

Setting the float value

Set the float value of the main column to none and the width to auto.

8 Click OK and repeat steps 6 and 7 and use the Selector name #sidebar.

9 Choose File > Save All Related Files, click the Source Code button, and click the Multiscreen button. Scroll down your page and notice that your content section and sidebar now fill the screen from edge to edge. Also notice that by removing the floats, your sidebar is now located below the main content.

10 Close the Multiscreen Preview menu window. You can test your page in Dreamweaver’s Live View. First, click the Design button to switch to this view. Then click the Live View button. Live View uses the WebKit rendering engine, which is the same as Apple Safari and Google Chrome browser. In Dreamweaver, you can see the exact dimensions of the window size at the bottom of your document window.

11 Grab the bottom right corner of your document and reduce the width. Watch the Window Size dimensions: when the first value reaches 320 pixels or less, your layout should change and use the phone.css styles.

Live View in Dreamweaver CS5.5

In Live View, you can see the values of your Window Width; when the
width is less than 321, the layout switches to the phones.css styles.

You can also preview your page in the browser and reduce the width of the window. Note that some browsers will not let you make the window that small. The phone.css is designed for phone browsers, not desktop browsers.

You can create and add other styles to the phone style sheet. You now have the foundations of how to create different layouts using media queries in Dreamweaver CS5.5, and apply this foundation to the table style sheet.

Additional New Features in Dreamweaver CS5.5

The Multiscreen Preview option and the related CSS3 Media Queries are perhaps the biggest change in Dreamweaver CS5.5, but there are several other new additions, many of which are related to mobile design and development.

CSS3 and HTML5 authoring support

Dreamweaver CS5.5 has added to its internal library of code many of the new HTML5 elements and CSS3 styles. Examples of HTML5 elements now available include <header>, <nav>, <aside>, and others. In previous versions of Dreamweaver, there was no code that indicated the use of these elements.

Users could still add the elements, but they were not readily available in Dreamweaver’s code-hinting interface.

Creating HTML5 pages with code-hinting

You can easily create HTML5 pages in Dreamweaver with
code-hinting support for the new HTML5 elements.

Similarly, CSS3 includes several new styles to help you enhance your pages, including features such as rounded corners, gradients, border images, and more. These CSS3 properties are now readily available in Dreamweaver’s code-hinting library. (This library also includes the vendor-specific prefixes needed to ensure that styles are visible on specific browsers, such as Firefox, Chrome, Safari, and Internet Explorer.)

Add CSS3 styling

You can easily add CSS3 styling in Dreamweaver with
code-hinting support for the new CSS3 styles.

jQuery Mobile integration

Designers and developers who need to create web pages and user interfaces optimized for mobile devices can create Dreamweaver projects using the jQuery Mobile Framework. jQuery is generally used for desktop applications to enhance websites with the reliable JavaScript code included in this open-source JavaScript library. The jQuery Mobile Framework is a relatively new addition that lets you add features such as animations and components for touchscreen interfaces, form field validation and pattern matching, and more.

You can create a site optimized for mobile by choosing File > New Page From Sample > jQuery Mobile to open a layout that has placeholder content and several built-in user interface features. Some examples of these built-in interface features are a multi-page design with styles formatted for mobile, animated pages and collapsible panels, and buttons designed for the touch-sensitive capabilities of smartphones, tablets, and other touch-enabled screens.

default layout for jQuery Mobile

The default layout for a jQuery Mobile project includes page elements targeted for touchscreen interfaces.

Support for building native mobile apps for iOS and Android with PhoneGap

In addition to the jQuery Mobile support, designers and developers can now use Dreamweaver to build native applications for iOS and Android applications with help from the PhoneGap framework. This framework packages HTML, CSS, and JavaScript files into native applications to let designers and developers with limited or no programming knowledge build native apps.

You can build an entire site as a native application by choosing Site > Mobile Applications > Build. For the Android operating system, Dreamweaver helps install the necessary SDKs on your system using the Easy Install option. For iOS, you need to install Apple’s Xcode or the Apple iOS SDK manually to compile the applications from Dreamweaver.

  • Note
    You can create native applications for Android or iOS with Dreamweaver CS5.5 and support from the PhoneGap framework.

W3C Validation

Designers and developers have long used the World Wide Web Consortium (W3C) as a resource to help them troubleshoot problems. The W3C provides a free service that will check your HTML, XHMTL, and CSS documents for syntax errors. In the past, you would have had to go to the W3C website and either upload your file or copy and paste your code into their web interface. Dreamweaver CS5.5 now allows you to send your file directly by clicking the W3C button at the top of your document window. The results then appear within a W3C Validation window in Dreamweaver.

Previous | 1 2 3


Dreamweaver Tutorial

Learn Dreamweaver with this Adobe Dreamweaver Tutorial based on the book written by AGI's Adobe Certified Instructors and used in AGI's Adobe Dreamweaver training classes. This Dreamweaver tutorial is provided free of charge for you to learn Dreamweaver on your own and to see the quality of the Dreamweaver book, Dreamweaver training, and Dreamweaver tutorials created by AGI. To learn Dreamweaver with the help of one of our expert instructors please visit AGI's training website. If you are interested in buying this Dreamweaver training book you can buy it on-line at Amazon.com or at your favorite local book store. The team at AGI hopes that you find this Adobe Dreamweaver tutorial a useful way to learn Dreamweaver.