Building a jQuery Mobile Theme With Adobe Fireworks
videos

Building a jQuery Mobile Theme With Adobe Fireworks

on Dec 22nd 2011 with 7 comments
Tutorial Details
  • Topic: jQuery Mobile, Fireworks
  • Difficulty: Beginner
  • Screencast duration: 17 mins

In this tutorial I’ll demonstrate how easy it is to create a jQuery Mobile theme in Fireworks, preview the theme, and move it into an HTML5 jQuery sample in Dreamweaver CS 5.5.

The ability to create jQuery Mobile pages in Dreamweaver CS 5.5 is a really neat addition to the line up. For a designer, though, the fact that jQuery Mobile is a code framework can make life a little difficult, especially when it comes to creating themes for mobile projects targeted to smartphones or tablets.

1: Introduction

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

2: Creating a Theme

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

3: Moving to Dreamweaver

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.creativemanner.com Ozgur Coruhlu

    I think it useless doing all that in fireworks since you can tweak the jquery mobile css file from any editor.

    • Abhijeet

      Yup i agree with Ozgur
      This tut i also found useless instead of doing in fireworks you can use this http://jquerymobile.com/themeroller/ site to tweak your jquery mobile theme in live preview .

  • Pingback: Building a jQuery Mobile Theme With Adobe Fireworks | Shadowtek | Hosting and Design Solutions

  • http://www.a1prestigeplumbing.com San Diego Plumbing

    Looks like a great tutorial to start off with—especially since having a mobile site is so important. Thanks!

  • http://www.dfwelearningaug.com Kevin Stagg

    Just another reason why I am such an Adobe Fireworks fanboi. Thanks for submitting this Tom. You and Jim Babbage rock – keep up the great work!

  • Ben F

    I didn’t know that you can do such things in Fireworks, but sorry, but your Code does look disgusting. I don’t think it’s normal to make a comma after one html-attribute, or is it? And it’s also not fine to make spaces between attribute and value.

  • Louis

    Is there any reason that you didn’t use the ThemeRoller as is suggested in the link below?

    http://jquerymobile.com/test/docs/api/themes.html

  • http://N/A manoj

    there is no mobile starter in my Dreamweaver so plz tell me what i should do to install mobile starter in my Dreamweaver.

    :|

  • Pingback:   Adobe Fireworks CS6 Features and Tutorials by Web Factory South Africa