Dreamweaver In Action: Ten Fathoms Redesigns Yorkshire Crab Website Using Dreamweaver CC

We love discovering our customer’s use of Dreamweaver to create innovative sites and mobile apps in our Dreamweaver In Action series.

One of our favorite things to do is highlight the great work Adobe customers produce with our tools. Today, we get to show off a website redesign completed by Ten Fathoms for Yorkshire Crab, a sustainable seafood company. The client wanted a site that would appeal to higher end clients, reinforce the company’s sustainability messaging, and use high-end imagery to show off products. Paul Middleditch, founder of Ten Fathoms, used Dreamweaver CC to construct the main framework for the content-managed site and even created an image banner for the site using Adobe Edge Animate CC.

Dreamweaver In Action: Ten Fathoms redesigns Yorkshire Crab website using Dreamweaver CC

Dreamweaver In Action: Ten Fathoms redesigns Yorkshire Crab website using Dreamweaver CC

Like many web professionals, Paul describes himself as being midway between graphic designer and web developer. For that reason, he loves Live View and Code View because he can keep an eye on how a site looks, even as he’s coding. He was also able to eliminate the tedious toggling back and forth to a browser to test changes by entering values in CSS Designer and seeing the immediate effects within Dreamweaver CC.
In addition to working with his favorite web design and development tool, Creative Cloud also lets Paul experiment with other tools, including Adobe Muse CC, Edge Reflow CC, Lightroom, and even Adobe Premiere Pro CC! He says, “Having access to all of the Adobe creative tools through Adobe Creative Cloud opens up more avenues to create.”

Read more about the Yorkshire Crab project here http://adobe.ly/1hSqf6U

Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.

Dreamweaver In Action – Be Part of The Story!

We’re thrilled to announce the #DreamweaverInAction series. Many of our customers have shared their great work and stories, so we decided to pass it along to the community.

The primary aim of this series is to show off our customers’ exciting work, inspire further creativity by sharing ideas and cultivate a discussion about the modern Dreamweaver. It will also help our featured customers get exposure through Adobe’s social channels and website.

We kicked off the series by showing off the creative work of AltaSartoria web design agency. Claudio Caciagli, lead designer and developer, has just launched this stunning responsive website http://altasartoria.com

AltaSartoria web design agency

AltaSartoria web design agency

 

We followed that up with an inspiring example by designer Jordan Flower, who used Dreamweaver and WordPress to create a business at Keys Apparel that supports victims of human trafficking.

Keys Apparel

Dreamweaver & WordPress site.

 

Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.

 

Visualize Relationships Between HTML Elements in Live View & Applied CSS Selectors

A few months ago, we announced a new Dreamweaver CC update with several exciting new features.

One of these, the Live Highlight feature, lets you visualize the relationships between HTML elements in Live View and applied CSS selectors.

Let’s review how Live Highlight works. In the screenshot below, a user intends to make changes to the ‘Cart’ navigation link. To make changes to HTML elements, the user usually starts by selecting the CSS selector “.SiteNavLink a” and editing the associated properties. These changes could however inadvertently change other HTML elements that the user might have no intention of changing at all.

 

Live Highlight in Dreamweaver

Live Highlight in Dreamweaver

 

Using Live Highlight, users can now simply click the CSS selector in the CSS Designer panel to see the affected page elements. These elements are highlighted in blue in Live View mode. Users decide if they want to create a separate Selector that applies to ‘Cart‘ alone, thus leaving the styles for other links undisturbed.

Enjoy the video below that shows how to use the new Live Highlight feature. Also, check out this article for more info http://ref.sx/LiveHighlightDreamweaver

 

Download and get your hands on the modernized Dreamweaver CC with exciting features that make mobile and web content creation a more streamlined and productive experience.

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.