Tag Archives: dreamweaver

Adobe Showing Some Love for HTML

It’s Valentine’s day, and here at Adobe we’re showing our love for creating great HTML experiences – Just check out what we released today!  All of these are available immediately via Adobe Creative Cloud subscriptions.


edge_reflow_mnemonicAdobe Edge Reflow (Preview)

Adobe Edge Reflow is a new responsive design tool that helps designers create and communicate responsive intent in their designs to both customers and developers.  Adobe Edge Reflow enables designers to create responsive HTML experiences in a visual workspace, and leverages web standards technologies to create designs that are accurate to the capabilities of the modern web.

Learn more about Adobe Edge Reflow at:

Or check out this introduction video from product manager Jacob Surber:


Adobe_Dreamweaver_CS6_Icon_smallUpdate for Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 provides an intuitive visual interface for making and editing HTML websites and mobile apps.  This update includes improved support for responsive design and fluid grids, integration with Adobe Edge Web Fonts for rich typography, improved HTML5 support, and much more!

Learn more about this update and Dreamweaver CS6 at:


edge_animate_mnemonicUpdate for Adobe Edge Animate

Adobe Edge Animate is new tool for creating interactive and animated web content in a visual, timeline-based environment.  This update (Edge Animate 1.5) includes support for CSS built-in filters (blurs, sepia, grayscale, etc…), support for gradients and gradient animation, and rich typography via Adobe Edge Web Fonts.

Learn more about the latest updates for Adobe Edge Animate at:

Or check out this video from product manager Sarah Hunt:


edge_code_mnemonicUpdate for Adobe Edge Code (Preview 3)

Adobe Edge Code is a new HTML/JS/CSS editor designed to enable you to create create web experiences, without getting in your way.  Updates in preview 3 include numerous UI improvements, better code hinting support, and better search support.

You can learn more about the latest for Adobe Edge Code at:

Let’s not forget that Adobe Edge Code is built on the open source Brackets project.  Brackets released the sprint 20 build today too!


Stay Informed!

For the latest news, follow us on Twitter:


As I mentioned above, all of these are available immediately via Adobe Creative Cloud subscriptions. Even better, you can get Adobe Edge Animate, Adobe Edge Reflow, and Adobe Edge Code as part of the free Creative Cloud tier. Go download them now!

Building PhoneGap Applications With Dreamweaver

Update (3/28/2012): 

Hi Everyone, I know there have been lots of questions about PhoneGap + Android SDK, and lots of headaches because Google’s Android SDK keeps changing and breaking the Dreamweaver integration. Fret not! There is an easier way — Adobe has released a plugin to integrate Dreamweaver with PhoneGap Build. With this plugin, you build your experience in Dreamweaver, then push to the PhoneGap Build service for cloud-based compilation of device-specific binaries. Read more about this plugin here: http://blogs.adobe.com/dreamweaver/2012/04/phonegap-build-extension-for-dreamweaver-cs5-5.html


Original Post:

PhoneGap apps are built with HTML and JavaScript, and can be created with any IDE or text editor. You can build them in xCode or Eclipse. Did you also know that you can build PhoneGap apps within Dreamweaver, and you can even launch and debug on the iOS Simulator and Android Emulator all from within Dreamweaver?

Here’s a video of this in action from Adobe TV. After the video, we’ll walk through this process step by step.

In order to use the iOS simulator and Android emulator, you’ll need to download and install xCode and the Android SDK.   Once you’ve downloaded those, let’s focus on setting up your project within Dreamweaver.

The first thing that you need to do is create a new “site” within Dreamweaver for your PhoneGap application.  Go to the “Site” menu, and select “New Site…”.

The site setup/details dialog will be displayed.   Go ahead and give it a name and directory to contain project files and resources.

Next, we need to create the main application file.  Within Dreamweaver, go to “File”, and select “New…”.  Then select the “Page from Sample” option, sample folder “Mobile Starters”, then select the page template for “jQuery Mobile (PhoneGap)” and click “Create”.

This will create a new HTML file for the mobile project.  Go ahead and save the file you just created.   The first time this file is saved, you will be prompted to copy dependent files.  Click “Copy” to copy the dependent files into your application “site”.

Once in Dreamweaver, you can edit the HTML and JavaScript to your heart’s content.   You can take full advantage of Dreamweaver’s code view or design view, live previews, and any other features.

Once you are ready to build and deploy to the android and iOS simulators, you’ll need to setup the mobile development configuration.   First, we’ll need to configure the application frameworks.   Within Dreamweaver, go to the “Site” menu, select “Mobile Applications”, then select “Configure Application Framework”.

The “Configure Application Framework” dialog will be displayed.   Here, you’ll need to enter the full path to your Android SDK, and the path to the iOS Developer tools (xCode).

Once you have the application frameworks configured, you’ll need to configure your application’s settings.    Go to the “Site” menu, select “Mobile Applications”, then select “Application Settings…”.

Within the “Native Application Settings” dialog, you’ll need to specify your application bundle id (the unique id for the application), an application name, the author, version, and application icons.   You can also select iOS SDK versions, and which Android emulator to use.

Once you’ve configured the application settings and application frameworks, you are ready to build your app and run in the emulators.   Just go to the “Site” menu, select “Mobile Applications”, select “Build and Emulate”, then choose a device or platform.

Once you chose a platform or device, Dreamweaver will go ahead and launch the appropriate emulator or simulator, and launch the application.

If you run into issues with the Android SDK, first make sure that you are using the latest Dreamweaver SDK following the instructions at http://blog.assortedgarbage.com/2011/05/resolving-android-sdk-failed-to-install-with-dreamweaver-cs5-5/

If you still have issues with deploying to Android and see the error message below in the build log, then you are probably using the latest Android SDK that was recently released in October.

Install file not specified.

 'ant install' now requires the build target to be specified as well.

     ant debug install
     ant release install
     ant instrument install
 This will build the given package and install it.

 Alternatively, you can use
     ant installd
     ant installr
     ant installi
     ant installt
 to only install an existing package (this will not rebuild the package.)

The latest Android SDK introduced an additional parameter that is not yet supported by the PhoneGap integration kit within Dreamweaver. You can fix this by updating the build.xml file for the application instance to override the “install” target and add the required dependencies which make this error go away.

Go to you application build director and open the “build.xml” file. This will be inside a folder named after the bundle_ID within your target directory. You can find the target directory within the “Application Settings” dialog, as shown below:

In my case, the build directory is /Users.triceam/Destkop/com.company.phonegapsample_Android

Find the “import” node below (at the end of the file):

<import file="${sdk.dir}/tools/ant/build.xml" />

Add to this line the attribute ‘as=”imported”‘ and a new “install” target that will override the existing “install” target as shown below. This build target will utilize the existing “install” target, and add necessary debug file dependencies to fix the build error shown above.

<import file="${sdk.dir}/tools/ant/build.xml" as="imported" />
<!-- Override the target to add the dependency -->
<target name="install"
   depends="-set-debug-files,imported.install"  />

Not only is Dreamweaver CS5.5 a best-of-breed solution for building web content, with PhoneGap support, Dreamweaver is now a best-of-breed solution for building cross-platform mobile applications as well. Using the PhoneGap integration within Dreamweaver allows you to use familiar tools, familiar development processes, and your current web development skills to build exciting new mobile applications. This enables you, as the developer or designer to focus on what matters – the application or content within your mobile scenarios.