New in Dreamweaver CC:
Create immersive web experiences with the new CSS Designer and visually apply CSS properties such as gradients, box shadows, and more. Dreamweaver CC is committed to producing clean, web-standards code, enabling you to design without the need to hand-code.

Dreamweaver CC also includes enhancements to its responsive design framework, Fluid Grid Layouts. We’ve addressed key usability issues to improve the design workflow, and to help you visually construct and build responsive websites that render properly on multiple screen sizes and devices.

Responsive Design in Dreamweaver CC

By removing deprecated features and technologies, we are clearing the way to provide optimized features that support the latest and most relevant web technologies and standards. Our aim is to provide the ultimate user experience – a collection of productive and modern visual development features in a single tooling environment.

We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans. More details will follow on what the modernization effort entails in Dreamweaver CC, and we eagerly await your feedback.

Over the past 12 months, we have been expanded Dreamweaver’s integration with many Creative Cloud services and tools. One of the many benefits to being part of the Creative Cloud is that you can access the vast and ever-growing Adobe Edge Web Fonts library. Also, with web technologies evolving rapidly, Dreamweaver CC helps you keep up by implementing features and addressing issues quickly. Creative Cloud members will receive regular updates to Dreamweaver.

Adobe Edge Web Fonts

Another benefit of integration with Creative Cloud is Sync: Dreamweaver CC lets you sync both site settings and preferences, streamlining your creation workflow. Sync in seconds and start creating without the need to recreate or manually copy and paste files. With Dreamweaver CC & Creative Cloud, the creative world is at your fingertips.

Adobe Exchange panel in Dreamweaver CC and Dreamweaver CS6

We’re very happy to announce that we will be integrating Adobe Exchange into Dreamweaver CC. The new Adobe Exchange is a commercial marketplace for Creative Suite 6 and Creative Cloud applications enabling distribution of resources and software that enriches a member’s experience and enhances their favorite tools.

You might be asking yourself, why should I be excited about the new Adobe Exchange integration with Dreamweaver CC? Adobe Exchange provides a number of tools and services that let producers/developers share their products publicly or privately, as well as sell, promote and measure them (we provide tracking and analytics).  Here are a few benefits of building products for the new Adobe Exchange:

• Get your products in front of Dreamweaver users from within Dreamweaver CC
• Easily sell your products
• Products shown on the Creative Cloud website (coming soon)
• No exclusivity required – You can still distribute your products on other sites including your own website, we just ask that you do not link directly to any store or checkout Web pages
• Provide a great install and update experience for users
• Get metrics on your product to chart its success

The Adobe Exchange Panel can be found under Window > Extensions > Adobe Exchange and will let you search, discover, install and update new content and capabilities for various Adobe products, like Dreamweaver.

In the previous version of Adobe Exchange – Adobe Exchange Classic – developers were able to publish different extensions, but were not able to easily promote, monetize and track in one place. Below is a comparison of Photoshop Marketplace, Adobe Exchange Classic and the new Adobe Exchange:

Adobe Exchange Capabilities

Adobe Exchange also introduces the Adobe Exchange Packager that let you package your content into a single ZXP file and create certificates without writing any code as well as developer tools like Extension Builder to create your own panels and other content. To get started just follow the steps in this one page PDF and sign up for an account with an Adobe ID here:

http://www.adobeexchange.com/producer

At the recent MAX conference in Los Angeles the Adobe Exchange team provided an overview and demos of Exchange, the tools available as well as a sneak peek at the future. The session is now on Adobe TV:

Please check out our FAQ page for more information:

www.adobeexchange.com/resources/

Click here to learn how to download and install extensions.

We look forward to seeing all the great new extensions you are going to build and excited about the opportunity that the new Adobe Exchange is going to bring for all of you.

The new CSS Designer in Dreamweaver CC provides a visual interface to let you quickly and intuitively work with CSS properties such as gradients, box shadows; CSS Designer helps you get your work done quickly and efficiently.

In addition, Dreamweaver CC comes with a streamlined workspace; a modernized UI and smoother workflows help you work more efficiently and intuitively. We have been focusing all of our energy and resources on making sure Dreamweaver supports the latest and greatest web and mobile technologies such as HTML5 and HTML5 forms, jQuery mobile support, CSS3, SASS / Less and more.

Constructing and building responsive layouts can be challenging for web designers, and requires learning new skills, but Dreamweaver CC is here to help. By using the enhanced Fluid Grid Layout feature in Dreamweaver CC, users can visually design & lay out their websites to display nicely on different screen sizes for desktop and devices.

Dreamweaver CC brings typography to the party and gives you access to the vast and ever-growing Adobe Edge Web Fonts library. You can use any of Adobe Edge fonts in a few clicks.

Building native mobile apps for Android, iOS, Blackberry, and Windows Phones never been easier with the tight integration between Dreamweaver CC and PhoneGap Build. You can now publish and package your web content as native mobile apps in moments.

Dreamweaver CC, as part of Creative Cloud, boasts tight integration with many CC services and tools, and you can now easily sync your website settings and preferences from anywhere. Anything you need, whenever you need it, is at your fingertips with Adobe Creative Cloud. Watch our video to learn more about what’s new In Dreamweaver CC

Make sure you sign up for Adobe Creative Cloud. We look forward to seeing all the exciting work and experiences you will build with Dreamweaver CC. Buckle up and enjoy the ride on Adobe Creative Cloud.

CSS Designer Tools

Check out this video from our product manager Alejandro Gutierrez to see it in action:

As we have added new features, we have also begun reviewing the features that were integrated during the 15 years since Dreamweaver was released. What we found was that some of the features support web technologies that are no longer relevant for most Dreamweaver customers. We have decided to focus on modernizing Dreamweaver and streamlining the user interface by removing these older features. We have removed the Bindings, Server Behaviors, Components, and Databases panel, as well as Spry, Browser Compatibility Check, and a few others. Some of these items will be available as extensions for customers who still rely on these features. As we move forward we will continue to focus Dreamweaver on modern web standards and technologies including HTML5, jQuery, and more.

Make sure you check out Adobe MAX, where you can learn more about what’s coming next for Dreamweaver and for the rest of Adobe’s creative tools.

http://terrywhite.com/5-myths-about-adobe-creative-cloud/

This will help keep the post current and in sync with the latest announcements at Adobe. If you have visited this post in the week later to March 06, please read the updated blog post from Terry White. Apologize for any confusion.

1. Support for HTML5 Structural elements(Header,Footer,Section,Article etc), H1 to H6 and p tags can also be tweaked visually on the design surface.
2. Nested elements can be manipulated visually, this was a drawback in the previous versions where nested elements could not be tweaked using the fluid grid layout handles.Users can use the left and right arrow to traverse through the nested and parent elements on the design surface(Live/Design View).
3. Support for Classes along with ids – In the previous version only id’s could be inserted and used to make tweaks on the design surface , we now have support for classes where similar layout elements could use a class instead of an id. User also has the ability to insert an element without an id or class for example for a header element you might not need specific fluid classes.
4. Smart HUD options – User can now duplicate elements,delete elements,hide elements,make an element absolutely positioned from within the design surface.
5. Support for Absolutely positioned elements – Elements can be converted to Absolute Position and manipulated on the Design Surface.

Please watch the Demo video which showcases these improvements.

Here are the quick steps to use Edge Web Fonts:

1. Select the required Edge Web Font using the Manage Fonts dialog box in Dreamweaver. Once you select the fonts, they will be available for use in all the font lists in Dreamweaver across projects/sites.
2. Apply the web font to the required elements in your web page.
3. Preview the web page with the font and make changes as necessary.

Continue reading for detailed instructions on these steps or watch this short video:

Selecting Edge Web Fonts

Select Modify > Manage Web Fonts, and in the Adobe Edge Web Fonts tab. Click the fonts you want to use.

Manage Fonts dialog box

The Manage Fonts dialog box shows a preview of all the available Edge Web Fonts. You can narrow down your search by filtering:

A. By the name of the font. For example, you can type “dam” to search for fonts that have “dam” as part of their name.

B. By the recommended fonts for paragraphs or headings.

C. By the type of font. For example, you can search for all “serif” fonts by clicking .

D. By the list of fonts that are previously imported into Dreamweaver.

Further, you can combine two or more of the above search criteria to get more specific/accurate results.

When you click Done, the chosen fonts will be available for you to use through the font lists in Dreamweaver.

Using Edge Web Fonts in your web page

You can apply the Edge Web Fonts just like any other font in Dreamweaver. The following screenshot shows the font ‘abel’ used in a web page:

When you apply the font, a JavaScript tag is automatically inserted. This script identifies the user agent and fetches the font from the Creative Cloud server onto the browser’s cache. Then, the browser downloads the actual font onto the user’s system when the page is being rendered.

For ‘abel regular’, the script tag will be:

<script src=“http://webfonts.creativecloud.com/abel:n4:default.js“ type=“text/javascript”></script>

In the “src” attribute, the “http://webfonts.creativecloud.com” and “default.js” remain the same for any Edge web font you use.

• “abel” — internal name (slug-name) of the font used by the backend to uniquely identify the font.
• “n4” — indicates that the variant required to be downloaded is “normal” style and of weight “400“.  Similarly, “italic” style with a weight of “700” would have the pattern “i7”

Fonts that are subsequently used get appended to this same tag delimited by a semi-colon.  For example,  if you use both “abel” and “actor” fonts:

<script src=“http://webfonts.creativecloud.com/abel:n4:default;actor:n4:default.js” type=“text/javascript”></script>

Tip: In case you find that the script tag is not inserted into the code or is not working as expected, select Commands > Clean Up Web Fonts Script Tag (Current Page). Dreamweaver automatically updates the script tag.

The Property Inspector (PI) adapts to the behavior of Edge Web Fonts.  The “Bold” and “Italic” buttons in the PI are replaced with dropdown combo boxes for “Style” and “Weight” of the font respectively.  When a web safe font (already installed on the system) such as “Verdana” or “Arial” is selected, the drop-down lists provide all possible variants for the fonts.  When the selected font is an Edge web font, the drop-down lists provide only the variants supported by the Edge web font.

Preview your web page

Edge Web Fonts are not rendered in Design view. Switch to Live view to see how the text is rendered with the web font.

Improvements to Fluid Grids: Dreamweaver’s Fluid Grid Layouts tool has undergone major improvements. Create responsive websites more efficiently using simplified workflows with support for both classes and IDs and support for additional HTML5 elements.

Bring print-quality typography to the web with Edge Web Fonts: Integration of Edge Web Fonts with Dreamweaver gives you access to a vast web font library made possible by contributions from Adobe, Google, and foundries around the world. Dreamweaver’s re-designed Font Manager dramatically improves font management in Dreamweaver.

Custom settings retained after upgrade: Custom settings such as Favorites, Extensions enable/disable state, custom menu items are retained after you upgrade to this release.

Expanded table view is back! We heard your requests for getting back Expanded Table View, and on popular demand, the feature has been reinstated in this release.

HTML5 support:

• With increased HTML5 adoption by browsers, the default Doc Type is changed to HTML5.
• Addition of new form elements and form attributes
• H1, H2 … H6 and P tags under Structure category in Insert Menu

Critical bug fixes

• Multiple critical bug fixes and improved error messages when working rebuilding application workflows using PhoneGap.
• You can now import Edge Animate files with double byte characters in the filename into Dreamweaver. In addition, there are improvements to the Properties Inspector.
• Resolved issues related to the Files panel.

For more details on this release, please read the Release Notes and What’s New document.

We want to thank all our customers – in particular those who reported issues/crashes and helped us resolve them.

The patch had a side effect where Business Catalyst and BrowserLab panel will stop functioning for some users. If you are a 12.0.2 user, you will not run into such an issue. You can resolve this issue by downloading the zip from here and following the steps below:

Steps to be followed:

1. Download and unzip the attached folder onto your system.
2. Open the extracted folder.
3. Right click on “BLBC_Extension_Update.bat” file that is present, to get context menu.
   1. If you are on Win Vista, Win7 or Win8 platform, choose “Run as administrator” option in the context menu. (**this step is very important as not running the batch script as an administrator, will not allow the script to copy files into system\program files\ folder)
   2. If you are on Win XP, just double click on the batch file to run.
   3. Follow the instructions shown in console and once copy of files is complete, launch Dreamweaver CS6 to check if BrowserLab extension is working or not.

The zip file contains required BL & BC files along with a batch script, that will copy files into corresponding extensions folder on the system. The zip file contains HTML, CSS & JS files and no executables.

Happy New Year to you all! Sincerely hoping your holidays were wonderful and relaxing, and full of friends and family.

As recently announced on the Creative Cloud team blog, Adobe has decided to refocus our touch app development efforts – as part of this we are no longer making Adobe Proto available.

If you already have Proto then you can of course continue using the app – Dreamweaver CS6 (version 12.0.1 and later) includes the ability to open files created with Proto and will continue to do so for the foreseeable future. If you are using Dreamweaver CS5 or CS5.5 then you need the Proto extension for Dreamweaver, which until recently was hosted on Adobe Labs – this was removed at the time of making the announcement, but we have re-instated the download – available here.

Support for Proto continues to be available through our forums.

While the decision to no longer offer Proto was hard to make, we are committed to creating new and better tools to support web designers and developers – more information will be shared here and on the Creative Cloud blog in the future.