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.

In this post let’s generate the jQuery CSS and sprites from the skinned jQuery templates. There are two options available to export the required assets.

• Export both CSS and sprites at one go.
• Export Sprites or individual swatch CSS.

Export both the CSS and sprites

Select Commands > jQuery Mobile > Export Theme to generate the swatches for all the pages along with the sprites. The CSS file with all the swatches along with the Sprites is exported to the desired location.

Export a specific swatch or sprite individually

Select Export Current Swatch in the jQuery Mobile Theme Preview panel.

The CSS exported for an individual swatch consists of classes related only to a single swatch page. A jQuery page can consist of as many swatches as required. This command is particularly helpful in cases where you already have the webpage built using default jQuery Mobile swatches and you are interested in including few additional swatches (x,y,z,etc.,) for special cases.

Modify and export sprite images

• Select the “Export Sprites” option to export the sprites to a specific location.

This option can be used when you want to modify and export only the sprite images. In the example provided, I wanted 2 back buttons-a yellow and a red. So, I deleted one of the sprite images that wasn’t in use and replaced it with another red back button.

Download CSS3 Mobile pack from here.

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

Preview your design in a browser before finalizing a design. Individual themes can be previewed in the jQuery mobile theme preview panel. All the swatches created in the template can be previewed at one go using the option to preview in a browser.

In the earlier blog, we learnt how to modify swatches and include additional swatches. You can download a copy of the template with modified assets here. The steps to preview the revised jQuery template are:

• Open the jQuery template “gotham_project” in Fireworks and browse to the swatch page “g” in the Pages panel.

• Select Windows > Extensions > jQuery Mobile Theme Preview, to preview a single theme inside the Fireworks workspace.

• The Preview panel appears and displays a sample webpage with the current swatch applied to it.

• To preview all the swatches along with the sprites inside a browser, select Commands > jQuery Mobile > Preview Theme. The following screenshot shows swatch “a” that was modified in the first blog.

Click the tabs to preview the respective themes.

Download CSS3 Mobile pack from here.

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

The jQuery Mobile theme Skinning feature in Fireworks includes a template with default sprite images and a set of swatches. This extension lets you modify default sprites and swatches in the template. You can create additional swatches by duplicating an existing page and customizing it. The swatch name is inherited from the page name in the exported CSS.

Let’s jump in and create a new jQuery Mobile Theme in Fireworks (CS5 and later versions).

• Download and install the CSS3 Mobile Pack.
• Select Commands > jQuery Mobile > Create New Theme

This command creates a jQuery template consisting of five default swatch pages (a,b,c,d and e), a global styles/assets page and an instruction page.

You can modify the default theme by making the necessary changes to the default swatch pages and the sprites page according to design/branding requirements. To create additional swatches, duplicate an existing swatch page.

• To duplicate a swatch page, open the Pages panel, right-click the swatch page, and select the “Duplicate Page” option.
• After duplicating the page, rename the page to the swatch name that will be used in the exported CSS. jQuery suggests that you use one of the 26 alphabets(a-z).

Modifying and updating existing templates

 Let’s look at an example where we’ll be modifying one of the default swatches in the template and including an additional swatch.

• Create a jQuery template in Fireworks by selecting Commands > jQuery Mobile > Create New Theme. You’ll see a new jQuery template created in Fireworks as shown in the following screenshot:

• Open the Pages panel. Observer that the first page named “Global Assets and Styles” is followed by 5 pages named a-e. Page “Global Assets and Styles” includes the default sprites and other global styles such as roundness, active button color, icon background, etc., which are used across all the swatches. Pages a-e are the default swatches provided in the template.

• Let’s modify swatch ‘a” Click on the swatch page ‘a’ and modify the assets present on the canvas. You can modify the colors, change text styles, apply gradient, add roundness, apply effects such as drop shadows, or make other modifications as desired. You can see the modified swatch page “a” in the screenshot shown below:

• Let’s add additional swatch pages. To do this you duplicate an existing swatch page. Right-click the swatch page and select the duplicate page  option as shown in the following screenshot:

• The swatch name is inherited from the page name. To rename the page, right-click the duplicate page and select Rename Page. Since jQuery recommends that we use one of the alphabets, let’s rename our swatch page to “g”.

• We’ll now modify the swatch page as we did for the swatch “a”. The following screenshot shows the modified swatch page “g”.

• Let’s modify jQuery sprites that we’ll be using in our jQuery webpage. Browse to the page “Global Assets and Styles” in the Pages panel and change the color of the sprites. Global styles such as roundness, background color for the icons,etc., have also been modified. In the following screenshot, you can see the modified sprites and global styles present in the template. Global styles such as roundness, links, etc., are used across all the swatches.

• You can now save a copy of the file at your desired location by clicking on File>Save option.

Download CSS3 Mobile pack from here.

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

This blog is the first in series of five blogs dedicated to “jQuery Mobile Theme Skinning”, a new feature in Fireworks CS5 that is part of the CSS3 Mobile Pack extension.

1. Introduction to jQuery Mobile Theme Skinning extension and jQuery Mobile framework
2. Creating a new jQuery template
3. Previewing the jQuery Mobile design
4. Exporting the design to CSS
5. Creating a jQuery Mobile webpage in Dreamweaver and using the exported CSS file in the new web page

jQuery Mobile Theme Skinning

The jQuery mobile theme skinning is part of the CSS3 Mobile Pack extension for Fireworks. This extension enables you to create or update the theme of a jQuery Mobile website using Fireworks.

In Fireworks, a template with all the modifiable design aspects for jQuery Mobile is provided. After modifying the themes present in the template, you can preview the look and feel of the themes using an in-app preview or a browser, and export the corresponding CSS code along with the sprite assets.

jQuery Mobile Framework

The jQuery Mobile Framework is a JavaScript framework that allows you to quickly build websites for mobile devices. It is a touch-optimized web framework designed for smartphones and tablets.

jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. The jQuery Mobile Framework is easy to use and includes web-specific controls such as buttons, sliders, list elements, and many more.

When you build mobile websites with the jQuery Mobile Framework, you can leverage the default theme set provided with the framework. To learn more about how the default theme works, read the jQuery Mobile Framework Theme Documentation.

Themes and Swatches

jQuery mobile pages consist of a set of design objects that can be modified before they are used in a web page. For example, bars, buttons and body are design objects whose styles can be modified. Styles for design objects such as lists, slider, select menus are derived from one of these design objects.

A theme includes a collection of swatches. Each swatch consists of styles for a bar, content block and various button/list interaction states. You can mix and match the bars, blocks, and buttons among the swatches on a page for more combinations. By default, design objects in a jQuery mobile page use different styles for different objects. For example, the body is uses swatch “c” and button uses swatch “a”.

Note: jQuery recommends that you limit the number of swatches to 26 (a-z).

Benefits of the jQuery Mobile framework

• jQuery Mobile uses CSS3 properties to create rounded corners, box and text shadows, and gradients. Using CSS3 properties instead of images is advantageous because it reduces the size of the theme file and the number of server requests.
• Themes include multiple color swatches, each consisting of a header bar, content body, and button states that you can freely mix and match. These swatches enable you to create visual textures and richer designs.
• Open-ended themes support up to 26 unique swatches per theme. This makes it possible to add almost unlimited variety to your designs.
• All backgrounds now use CSS3 gradients to dramatically reduce the file size and number of server requests to improve performance.
• To reduce image size, a simplified icon set includes elements most commonly used for mobile in a sprite.

Resources

• To view the ADC article regarding creation of jQuery themes using the CSS3 Mobile Pack, see http://www.adobe.com/devnet/fireworks/articles/css3-mobile-pack-jquery.html
• To view websites created with jQuery Mobile, see http://www.jqmgallery.com
• For an understanding of CSS3 Mobile pack that contains CSS properties and jQuery Mobile theme skinning, see http://www.peachpit.com/store/product.aspx?isbn=0132979780
• For resources (books, themes, tutorials, and so on) on jQuery Mobile Framework, see http://jquerymobile.com/resources/

At AdobeMAX 2011 Keynote, Fireworks CSS3 Mobile Pack is announced.

This mobile pack contains following feature.

• CSS Properties panel
  - Extract your design comp to CSS code
•  jQuery Mobile theme skinnig feature
  - Creative your owm jQuey swatch, include custom icons, or modify default theme

Video: Using CSS3 Mobile Pack

You can download this extension from Adobe Labs

Enjoy!

Fireworks 11.0.1 Dot Release for Fireworks CS5.0 customer is out!

More Bug fixes and stabilize application. Use AAM(Adobe Application Manager) or download from here.

http://www.adobe.com/support/fireworks/downloads_updaters.html

You can find the detail of bug fixes on the older post.

http://blogs.adobe.com/fireworks/2011/04/fireworks-cs5-1-in-creative-suite-cs5-5.html

Enjoy,

Fireworks Team

Math Resize Extension : Matt Stow

http://www.mattstow.com/

Matt Stow is a web and user interface designer who specialises in designing and developing accessible, standards-compliant websites. From conception to completion, Fireworks and Dreamweaver are his most important companions. Matt is a Fireworks evangelist and can often be found championing its abilities.

His recent invention is Math resize extension.

This extension allow user to resize an object as mathematically. I’s really useful to resize an object exact value without distortion. For example if you create rounded corner rectangle resize object via scale tool, the corner will be distorted. You need to use 9-slice scale tool to avoid problem or simply type exact value in PI W, H field. However, using this extension, it will help you to simple calculation to resize object.

Give it a try!

Create Multiple Animated AD-Banners In A Breeze

http://www.vart.io/

Mikko Vartio is web designer / web developer and one of the top Fireworks user. His web site provide great tips and techniques for Fireworks. GIF banner Ads is commonly used and could increase usage since iOS does not support one of Adobe’s technology.

By the way,  Fireworks rename Frame palette to States Panel in order to align same concept with Flex platform. However, you can still use State panel as exactly same way to create animated GIF. We can learn efficient way to create multiple size of Ad-banner from this tutorial.

Thanks nakis-s.info for sharing information

Some customer suffer from “Could not Launch” problem with “An internal error occurred.” on Fireworks CS4 on Window.

Please delete “Fireworks CS4 Panel Prefs.xml” and re-launch application. This could solve the problem.

The file location is:

Windows XP:
[Drive C:]\Documents and Settings\[username]\Application Data\Adobe\Fireworks CS4\[language]\Fireworks CS4 Panel Prefs.xml

Windows Vista or Windows 7:
[Drive, C:]\Users\[username]\AppData\Roaming\Adobe\Fireworks CS4\[language]\Fireworks CS4 Panel Prefs.xml