7 Useful Adobe Dreamweaver Webinars

Dreamweaver-ers! Earlier this year we launched a webinar series to provide an overview of the core Dreamweaver CC features, as well as featuring key extensions and our ongoing modernization efforts.

We have found these webinars to be a good communication channel between the team and the community to communicate feature enhancements, issues, future plans, etc. Please review the table below and check out anything that strikes your interest!

 

Webinar Title Recording Link
What’s New In Dreamweaver CC http://bit.ly/10Wo08P
CSS Designer in Dreamweaver CC http://bit.ly/1aqCgty
Faster Theming of Dynamic, CMS based Sites in Dreamweaver CC http://bit.ly/1aqCpwY
Building Mobile Apps Using Dreamweaver CC http://bit.ly/19kPZUw
Building Responsive Design in Dreamweaver CC http://bit.ly/15k53PQ
Dreamweaver Extensions: Fluid Grid Layout & Bootstrap Extension http://bit.ly/18UDLNc
Dreamweaver CC Update http://bit.ly/1eEaHj1

 

We hope you enjoy these sessions and find them useful. Sign up for a Creative Cloud membership and gain access to rich learning content and tutorials for all Adobe products – including Dreamweaver CC.

 

Best,
Tareq Aljaber
Product Marketing Manager

 

 

Dreamweaver CC Gets New Live Highlight, Modernized Live View, Enhanced CSS Designer, and More.

A few months ago we announced the release of Dreamweaver CC, with several exciting new features (CSS Designer, Creative Cloud Sync, and more). Today, we are happy to announce the release of our first CC update, with some new features, user experience improvements, and bug fixes.

Note from the editor: You may have noticed the small gap in time between the main Creative Cloud release and this update. A shorter development cycle is one of the benefits you receive when you become part of creative cloud. 

Do you find yourself leaving Dreamweaver CC to test your content in the browser to make sure it’s accurate and looks good? With the new Modernized Live View in Dreamweaver CC we have integrated a brand new rendering engine, which displays web content with the same performance and HTML5 technology support available in Google Chrome™. Now you can spend more time in Dreamweaver CC and less time switching in and out of the browser to test your content.

Rendering Engine

Brand new rendering engine, which displays web content with the same performance and HTML5 technology support available in Google Chrome™.

The new Live Highlight feature enables you to visualize the relationships between the HTML elements in Live View and applied CSS selectors. Inspect and highlight elements in Live View in real time while you interact with the CSS Designer. Simply hover and click Selectors in the CSS Designer to see Live Highlight in action.

Live Highlight

Inspect and highlight elements in Live View in real time while you interact with the CSS Designer.

After carefully customizing workspaces, keyboard shortcuts, site settings, and preferences on one workstation, it can be tedious to do the same from scratch on a second workstation. With Creative Cloud and Sync Settings in Dreamweaver CC, you can now sync your workspaces, keyboard shortcuts, etc. in seconds with the click of a button.

 

Sync Settings

Customize your workflow once, and take it with you wherever you go – all through the Creative Cloud.

The new CSS Designer in Dreamweaver CC was released early June and we are continuing to listen to your feedback and improve the feature based on that. We’ve introduced a number of usability enhancements and a new color picker to improve productivity by speeding up visual CSS editing workflows.

In addition, we have improved our Code View by adding line number highlighting and highlighting of matching tags, as well as CSS selector code hints including Preferences support for color customization. We’ve also added support for PHP 5.4 to enable you to develop dynamic pages with ease and confidence, and updated our jQuery Mobile library to version 1.8.3.

We hope that you are as excited about these new features in Dreamweaver as we are, and look forward to your feedback on this release and suggestions for future enhancements. Visit creative.adobe.com to download the new version of Dreamweaver CC.

Best,
Tareq Aljaber
Product Marketing Manager

A Look at the Modernized Dreamweaver CC

When the first version of Dreamweaver launched, the web had only begun to emerge as a viable platform, and its capabilities were a fraction of what they are today. Since then, the web platform has changed dramatically, and continues to evolve at a rapid pace.

Designing for an evolving platform means that the tools one uses must also evolve. To best serve our customers, we are modernizing Dreamweaver to provide an all-in-one visual tooling environment for creating websites and mobile content. To do so we are streamlining the user interface, introducing new ways to tackle key areas of the web design process, and removing support for technologies that are not widely used by our customers.

Our first task has been to streamline the User Interface, which we have begun by consolidating several workflows (such as font management) and simplifying parts of the application (such as the Document Tool Bar and the Insert Panel). In addition, we have begun to identify and remove parts of the application that are redundant. We have already removed 10 panels, 14 dialog boxes, and 62 menu items. A simpler UI means fewer steps to accomplish your tasks, and fewer interruptions to your workflow.

The modernization efforts also include the introduction of the new CSS Designer panel in Dreamweaver CC. In future updates to Dreamweaver we intend to improve the HTML & CSS preview/inspect/edit workflow, streamline file and site management, enhance our support for responsive web design, as well as continue to focus on improving performance and responding to customer feedback. Dreamweaver will also continue to receive regular updates that expose the evolving capabilities of the web and further integrate tools and services that improve productivity.

As we remove older features from Dreamweaver, we recognize that some customers may still depend on existing workflows/technologies. Therefore, in addition to making Dreamweaver CS6 available through Creative Cloud, we are also providing some alternatives. The table below covers some of the features we have removed, and the list of the extensions or workarounds that will enable affected customers to continue using Dreamweaver CC as part of their existing workflows.

Removed feature / functionality

Extension/Workaround

Additional information

Server Behavior, Bindings and Components Panels and Database feature There is a single extension to restore these features. To install, please follow these steps: 1. Launch Dreamweaver CC
2. Update both Dreamweaver CC and Extension Manager (if the update is available) to the latest versions
3. Go to Windows > Extensions > Adobe Exchange
4. Search for Server Behavior extension
5. Install by clicking Free button
6. Follow the onscreen instruction

 

ASP, ASPNET, JSP Support There is a single extension to restore these features. Extension is available at:* Vista/Windows 7: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CC\Configuration\DisabledFeatures* Mac OS X: /Applications/Adobe Dreamweaver CC/Configuration/DisabledFeatures These extensions are in MXP format. To convert them to the correct format, please follow the instructions in this video: http://youtu.be/8bzlrjHGsQcTo install, follow instructions in the video

http://www.youtube.com/watch?v=cB2vmNfcq7A

 

 

Spry There is an extension to replace Spry datasets with jQuery datasets. It is available for free on Adobe Exchange. More info here:HTML5 Data BindingsBootstrap Extension  Replacement provided via deep integration with JQuery UI & JQuery effects. You can still download Spry from Adobe GitHub.
ColdFusion Support ColdFusion has a dedicated IDE (ColdFusion Builder) that serves the development needs of the ColdFusion developers & community. Download ColdFusion Builder 2. Note: You can also open ColdFusion documents from within the files panel in Dreamweaver. Please click here for step-by-step instructions.

 

While Adobe has tested the extensions listed above with Dreamweaver CC, we do not provide support for functionality provided through extensions.

In addition to the extensions we’ve provided, we are particularly excited about two new extensions for Dreamweaver developed by DMXzone. They provide modernized replacements for two Spry workflows featured in previous versions of Dreamweaver. More information is available at:

HTML5 Data Bindings
Bootstrap Extension

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.

Best Regards,

Tareq Aljaber

Product Marketing Manager

Dreamweaver CC: Your all-in-one tool for creating, publishing, and managing websites and mobile content

We are pleased to announce the release of a modernized and streamlined Dreamweaver. Dreamweaver CC is the all-in-one visual tool to efficiently and intuitively create, publish and manage websites and mobile content.

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

Responsive Design in Dreamweaver CC

By removing under-utilized features in Dreamweaver, we are clearing the way to provide optimized workflows for the latest and most relevant front-end web technologies and standards. Over time we plan to evolve the Dreamweaver feature set to include relevant middle-layer and server side technologies as well. 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

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.

Publish, Monetize, Promote and Track using the new Adobe Exchange and Dreamweaver CC

Adobe Exchange panel in Dreamweaver CC and Dreamweaver CS6

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 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.

It’s Not Your Father’s Dreamweaver – It’s The New Modernized Dreamweaver

We are pleased to announce that Dreamweaver CC will be available to our customers to download very soon. With many new features and enhancements, the new Dreamweaver CC is modernized, lighter, smoother and easier to use than ever. Dreamweaver CC is THE all-in-one visual tool for building and creating mobile and web content.

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.

An Early View Into the Next Generation Of Dreamweaver

Over the past 12 months we have been hard at work on the next version of Dreamweaver and today we’re excited to give you a first look. One particular feature we want to share is the new CSS Designer. The CSS Designer provides a visual interface that lets you quickly and intuitively work with CSS properties such as gradients, box shadows, and more. It also gives you the ability to visually create and apply different media queries for web content to be presented in different screen sizes.

CSS Designer Tools

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.

5 Myths about Adobe Creative Cloud

Because of the recent changes to the Creative Cloud policy, I am redirecting this page to the official Adobe post

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.

Updated Fluid Grids in Dreamweaver

With Adobe Dreamweaver 12.2 CCM release, Dreamweaver’s Fluid Grid Layouts tool has the following improvements which helps users create responsive web pages more efficiently.

  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.

Edge Web Fonts integration with Adobe Dreamweaver

With Adobe Dreamweaver 12.2 CCM release, the choice of fonts has become wider and better! 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, for free.  What’s more? Designer or the end user need not necessarily have these fonts installed on their systems — the web browsers render the text with the fonts at run-time.

Here are the quick steps to use Edge Web Fonts: