What’s new in Dreamweaver CS5?

CS5 introduces many innovative design and coding features as well as improvements to Dreamweaver’s flagship features. Perhaps the most significant change in Dreamweaver is its new support of Content Management Systems (CMS) and blogging platforms such as Wordpress, Joomla, Drupal and others. This change is most important for users who had frustrations previewing and testing their CMS sites in previous versions of Dreamweaver. The Live View feature introduced in Dreamweaver CS4 now has grown up and is a true native web browser that largely eliminates the need to make constant round trips to a browser for testing, even for dynamic scripting languages such as PHP and Coldfusion.

New support for Content Management Systems

Enjoy authoring and testing support for content management system frameworks like WordPress, Joomla!, and Drupal. Dreamweaver CS5 offers an easy way for designers to build sites in the Design view in a way that was not previously possible. A CMS/blog software like Wordpress provides users an easy way to publish content online and provides features such as automatic archiving and database integration. In the past, designers have been frustrated creating the page designs for a CMS in Dreamweaver because these systems generally rely on a relatively complex combination of dynamic pages (often php) that could not be previewed in Dreamweaver. For designers or users who are not code-savvy, the complexity of these files can be daunting. Dreamweaver can now help you discover the related files needed to put together the pages in your CMS framework.

Dreamweaver will now preview the files of a CMS framework in the Design view (as long as you have a testing server defined) using the built-in Live View option. With this feature Dreamweaver CS5 also lets you interact directly with a database which means you can now test online forms, insert and modify database records and more.

CSS inspection

As CSS continues to grow in acceptance and use among designers and developers, web browsers have added features and plugins based on the users need to look at the code behind their pages. An excellent example of this would be the Firebug plugin for Mozilla’s Firefox browser. This tool allows users to peek at the visual model and structure of a page. Dreamweaver now has a similar capability with the CSS Inspect tool. Clicking on this tool allows you to see the relationships between the elements on your page, most significantly margins and padding. With these tools on hand, the author of a web page can quickly diagnose the layout of a page simply by hovering over a page, and then if interested, can click on an item to reveal the code.

CSS Enable/Disable

On par with the CSS Inspect feature is the new CSS Enable/Disable feature. This feature allows you to isolate one or more CSS rules and then temporarily disable them. Disabling a property is as easy as clicking a property in the CSS Styles panel and then pressing the CSS Enable/Disable button. Clicking the button again turns the property back on. You can think of this feature as a tool to help you understand how any particular property (or properties) are affecting elements on your page. Whether it be testing column layout or experimenting with CSS font properties, the CSS Enable/Disable feature is a handy tool in the designer’s toolbox.

Preview pages using Adobe Browserlab

Adobe BrowserLab is a useful tool for testing page layout across multiple platforms and for different browsers. Traditionally, users on the Mac platform would need a Windows machine in order to test their pages on Windows web browsers and by extension, users on Windows would need a Mac OS machine to do the same. This workflow is not particularly efficient, and diagnosing browser differences is not made easy. BrowserLab is part of Adobe’s CS Live service, an integrated set of web-based utilities. After setting up an account on CS Live, you can use BrowserLab to preview both local files as well as live pages online. Once logged into BrowserLab you can test and compare your pages using different browser versions and platforms.

Site setup and support for multiple servers

Gaining access to the new CMS capabilities of Dreamweaver has been made a bit easier with the new Site Setup window. Users who are not working with a site that uses a scripting language will have an easier and quicker time creating a new site to get up and running. For more advanced users, there is now the ability to define multiple servers as part of the site setup. A common use for this would be to have two servers set up: the currently live site (1) and the testing server (2). This capability makes it easier for the experimenting and testing of a site to take place without a lot of downtime.

PHP Code hinting

More advanced users who use the scripting language PHP more often will be happy to learn that Dreamweaver CS5 now has much improved support for PHP syntax, this includes code completion and syntax checking as well as full support for all core functions, constants, and classes. PHP code hints have also been improved substantially.

Other new features

Business Catalyst Integration

Adobe’s Business Catalyst is an online service that provides a variety of features such as online store/shopping cart capabilities, email marketing, web form functionality, analytics extension and more. With the Business Catalyst extension in Dreamweaver you can login to Business Catalyst and synchronize multiple sites at once. Dreamweaver can be used to access and edit the style module used on your Business Catalyst connected sites.

Subversion

Dreamweaver now has improved support for Subversion, a version control system similar to CVS and Visual Sourcesafe (VSS). Subversion is typically used by companies to maintain a team environment on larger projects that require changes to be logged, and versions to be controlled. Without Subversion, if you wanted to maintain versions, you would have to do the work yourself—maintaining folders and copies of previous versions. With Subversion, all files are kept on the Subversion server. Changes are tracked so that you can restore your project to any previous state.

CSS Starter Pages

CSS Starter pages have been around Dreamweaver for a few versions now, they allow you to get a jumpstart on building CSS layouts by choosing from a variety of pre-built page layouts which you then modify. In Dreamweaver CS5 the code for these starter pages is new and improved for modern web browsers with plenty of code commenting behind the scenes to help you start modifying your pages quickly.

What’s new in Dreamweaver CS5.5?

Dreamweaver CS5.5 includes additions to help you easily design for mobile devices and different screen sizes. The web technologies CSS3 and HTML5 are a large part of the evolving landscape of devices such as smartphones and tablets, and Dreamweaver remains current with these advances.

Using the Multiscreen feature

Dreamweaver CS5.5 has a new feature that helps you preview your pages in different screen sizes. Specifically, this preview shows you your design in three different views by default: one of them for desktop and the other two for the smaller screens found in smartphone and tablet devices. Because even mobile device screens come in different sizes, you can also customize these views to any resolution you want. Additionally, Dreamweaver takes advantage of CSS3 Media Queries to let you build individual style sheets customized for each view. To understand how Media Queries work, you will build styles using them in this exercise.

1 In the Files panel, double-click 16_index.html; choose File > Save As, and rename this file to 16_indexwork.html.

2 Choose File > Preview in Browser, and select a browser. This page has a fixed-width size of 960 pixels and works well on most desktop monitor resolutions.

To preview this page as it would appear on a mobile device such as a smartphone or tablet device, you can use Dreamweaver CS5.5’s new Multiscreen option.

3 Return to Dreamweaver and click the Multiscreen button at the top right side of your document window; the Multiscreen Preview window appears. This window is divided into three different screen resolutions: Phone (320 x 300), Tablet (768 x 300), and Desktop. Note that the height of the desktop view varies depending on your monitor resolution because the Multiscreen Preview window scales to fit your screen.

As you can see from the preview, the Phone view and the Tablet view crop your page. This is somewhat deceptive because most smartphones automatically scale the entire page to fit in the browser window. This zooming feature is better than cropping the page, but it’s not helpful when pages become too small to read or navigate. In such cases, the user needs to zoom into sections of the page to read them.

An increasingly popular way to optimize web layouts for different screens is to use CSS3 Media Queries. This technique lets you build two or more layouts based on the capabilities of a user’s screen. Dreamweaver’s default presets assume you want a standard desktop layout for most users, a slightly narrower layout for tablets, and a dramatically narrower layout for smartphone users with a screen width of 320 pixels. These default presets are just suggestions; you can create multiple layouts for any size screen you want.

4 Keep the Multiscreen Preview window open; you will use it in the next exercise.

The role of CSS3 Media queries

A CSS3 media query is HTML and CSS syntax that examines the capability of a user agent, typically a browser, and lets you send it styles based on certain values. The most common capability that is queried is the width of a screen or a mobile device, but other capabilities, such as the device orientation (landscape or portrait), can also be detected. Since media queries detect the capabilities of a user’s screen and serve styles suited for that screen, they are well suited for today’s web environment with its different monitor resolutions.

Here is a more concrete example: suppose a user has a smartphone with a screen resolution of 600 pixels wide by 900 high, and the phone is in portrait mode (vertical). This user visits a website that uses media queries. When the user visits the site, the media queries in the style sheet detect the capabilities of the phone and serve it a default style sheet. Assume this style sheet uses a single column layout due to the narrow width of the vertical screen. When the user rotates the phone into landscape position, this gives them an effective resolution of 900 pixels for the width, and the layout adapts by adding a second column.

To learn more about CSS Media Queries, visit: http://www.w3.org/TR/css3-mediaqueries/

1 2 3 | Next