Integrating Adobe Edge with Dreamweaver

Have you been testing Adobe Edge lately? I did and I like what I saw. As a pre-release v.1 software, it is very promising in terms of functionalities and user interface. Given that it can generate nice HTML5 animation and interactions, I see it as a great tool for creating web banners and the likes, potentially replacing Flash in those situations.

So the question then is how do we integrate Edge content into a Dreamweaver CS5.5 web page. There is no Edge object to speak of in DW. The output from Edge is an html file, together with a bunch of related js and assets. A simple way to use Edge is simply open the html page and start work from there with Dreamweaver. Alternatively you can also put Edge content into a DW webpage by loading the Edge html page as external html content into the web page.

Below is the list of files in a typical Edge output:

edgeContent.html
edgeContent_edge.css
edgeContent_edge.js
edgeContent_edgeActions.js
edgeContent_edgePreload.js
images (folder)
edge_includes (folder)

Assuming the DW webpage is in the same folder as the edgeContent.html, then one way to load the edgeContent.html into a DW webpage is use jQuery which is fully supported by Dreamweaver. Below is an example code to load the edgeContent.html into a <div> tag on the DW webpage:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>Demo</title>
<script src=”jquery-1.5.min.js”></script>
<script src=”rahko_ramen_edgePreload.js”></script>
<script> $(document).ready(function(e) {     $(‘#myBanner’).load(‘rahko_ramen.html’); });
</script>
</head>

<body>
<div id=”myBanner”></div>
</body>
</html>

As shown above, you would need to import the jQuery library.  (You can download the jQuery library from jquery.com). Then add in the Edge Preload js file. Finally use the jQuery load() method to load the Edge content into the div. That’s about it. Pretty simple.

Enjoy!

Advertisements

~ by brianchau on February 15, 2012.

6 Responses to “Integrating Adobe Edge with Dreamweaver”

  1. This content is thought invoking. work effectively accomplished i must say.

  2. Why not put the edge html in a ??

  3. thank you soooo much

  4. This piece of writing is truly a good one it assists new the web people, who are wishing for blogging.

  5. Please fix your link to jquery.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: