by Michael Dominic

Created

February 2, 2012

In earlier posts, we learnt how to export all swatches and sprites, and export individual swatches/sprites. In this post, we’ll link an entire jQuery CSS along with sprites and link individual swatches to a mobile website.

 Let’s first look at how we can create a jQuery Mobile webpage using Dreamweaver.

  1. Launch Dreamweaver CS5.5.
  2. Create a new HTML page using File >New. In the “New Document” dialog, select HTML as page type in the Blank Page option.
  3. After the blank page is created, choose Insert > jQuery Mobile > Page to insert a jQuery Mobile page. In the jQuery Mobile Files dialog box that appears, retain the default settings and click OK.
  4. Save the file to the desired location using the File>Save option.

Using all the exported assets

Now, let’s look at how to link the exported jQuery CSS and Sprites. Follow the steps mentioned below to update the generated CSS and Sprites in a jQuery Mobile web page:

  • Launch Dreamweaver CS5.5.
  • Open an existing site or create a new jQuery mobile Page by following the instructions present at the beginning of this blog (link that moves to the beginning of the blog where the instructions are present).
  • In the HTML page, the tag linking the default jQuery CSS to the HTML page is shown below:

<link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css” />

< include before screenshot>

The href attribute points to the location of the default CSS file. To point to the CSS file exported from Fireworks, point the “href” attribute to the location of the exported CSS file.

  • After including the CSS file, apply the CSS to the desired page/elements in the page.

To set the theme for an entire page, include the data-theme attribute and the desired swatch name for the div containing the attribute data-role with the value page. For instance, to apply swatch ‘a’ to an entire page include data-theme=”a” as shown below:

<div data-role=”page” id=”page” data-theme=”a”>

All the assets inside this div will use this data theme which can be overridden by including theme name for individual tags.

You can modify theme of a single element in the page by including the data-theme attribute for the tag containing the element to be modified.

  • After making the necessary changes, click on the Live View button to review the updated theme that appears within the Dreamweaver workspace

<screenshot>

 

Using a single swatch

Let’s link the exported jQuery CSS containing a single swatch. Follow the steps mentioned below to include an additional swatch in the jQuery web page:

  • Launch Dreamweaver CS5.5.
  • Open an existing site or create a new jQuery mobile Page by following the instructions present at the beginning of this blog.
  • In the HTML page, include a tag to link the CSS containing the additional swatch as shown below:

<link href=”jquery-mobile/gSwatch. css” rel=”stylesheet” type=”text/css” />

The href attribute points to the location where the CSS file is located. Modify the href attribute to point to the location where the CSS file for the individual swatch that is exported from Fireworks is present.

  • After including the CSS file, apply CSS to the desired page/specific elements in the page. To set the theme for an entire page, include data-theme attribute with the desired swatch name for the div containing the attribute data-role with the value page. For instance, to apply swatch ‘g’ to an entire page include data-theme=”g” as shown below:

<div data-role=”page” id=”page” data-theme=”g”>

All the assets inside this div will have this data theme which can be overridden by including theme name for individual tags. To modify theme of a single element in the page by including the data-theme attribute for the tag containing the element to be modified.

  • After making the necessary changes, click the Live View button to review the updated theme that appears within the Dreamweaver workspace.

Sample jQuery Mobile pages with default swatches and modified swatches can be downloaded here(gotham_project_default and gotham_project_revised). You can see the screenshots of the webpages using default swatches and modified swatches below.  Of the two screenshots, the first one shows the sample jQuery web page with the default swatches applied to it and the adjacent screenshot shows the same webpage that uses the two swatches-a ,g, created in this blog series.

 

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

Share on Facebook

COMMENTS

  • By Chris Griffith - 12:05 PM on March 7, 2012  

    Note: This reference in the article is out of date:

    it should be:

    But always check the jquery mobile site for the latest stable release.

    • By Nic Cohen - 2:35 AM on July 30, 2012  

      Well noted Chris!

  • By Chris Griffith - 12:07 PM on March 7, 2012  

    Opps, the item in question was stripped out.

    link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css”

    should be

    link href=”jquery-mobile/jquery.mobile-1.0.1.min.css” rel=”stylesheet” type=”text/css”

  • By Sam Logan - 3:37 AM on July 31, 2012  

    Thanks for putting this together Michael

  • By Lee Marshall - 6:38 AM on September 5, 2012  

    A well written concise article that I can reproduce, thanks for this.

  • By ali - 8:13 AM on September 7, 2012  

    I spent ages trying to do this. After almost giving up I found this post and it worked in an instant. Good stuff!

  • By tina vive - 11:35 AM on September 12, 2012  

    Intersting article, still finding an issue with adding multiple swatch,

  • By Fireworks - 8:51 AM on January 11, 2013  

    Michael – this is a great help to us. Thanks a lot.

  • By Sydney - 2:57 PM on February 15, 2013  

    Thanks Michael you have no idea how much time you have saved me! Genius!

  • By Sanmi Lajuwomi - 1:51 AM on March 4, 2013  

    Thank you very much for this. It’s been very helpful. Could someone point me to an article or video on multiple swatch?

  • By Electric Tobacconist - 5:09 AM on July 30, 2013  

    Great stuff Michael – I could do with an article on multiple swatch as well if anyone has one?