Adobe Fireworks CS6 -Improved CSS support
Primary Language: English
Review the latest support features for CSS and CSS3 including CSS code extraction, Internet Explorer 10 support, CSS Sprites Export, and the ability to modify and export jQuery Mobile Themes.
My Recent Work
You did not do any work on this video
Information Tags
Timing Category Subcategory Tag
No Information Tags Available for this video
Subtitles in: English
Start End Subtitles
00:00:08 00:00:12 Fireworks CS6 has tremendously improved CSS support.
00:00:12 00:00:16 Previous versions of Fireworks have allowed for the export of
00:00:16 00:00:21 HTML and some CSS, but in CS6, they've really gone a long way
00:00:21 00:00:25 towards optimizing the work taking advantage of all the potential
00:00:25 00:00:30 in CSS3 or Cascading Style Sheets Level 3 support. It now supports
00:00:31 00:00:35 CSS extraction, meaning if you have created a graphic that can
00:00:35 00:00:40 be rendered on screen using CSS3 rather than actually creating
00:00:40 00:00:44 the graphic, the CSS properties window allows you to
00:00:46 00:00:50 grab all of this code and render this rounded corner box graphic
00:00:50 00:00:53 on screen without actually having to download a graphic, which
00:00:53 00:00:55 is a huge savings in terms of bandwidth and especially if you
00:00:55 00:00:59 are dealing with mobile devices or multiple platforms. It also
00:00:59 00:01:02 includes support now for Internet Explorer 10, which is really
00:01:02 00:01:06 a big deal. That's a huge leap in Microsoft's technologies and
00:01:06 00:01:09 it is probably the version of Internet Explorer that most Web
00:01:09 00:01:11 developers are really looking forward to because it should support
00:01:11 00:01:16 a lot of standards across the board. Fireworks CS6 also now allows
00:01:16 00:01:20 support for CSS Sprites, which it's a technique wherein you create
00:01:20 00:01:24 a graphic with three versions of, say, a button, like the one
00:01:24 00:01:26 we're looking at here, and instead of exporting these as three
00:01:26 00:01:29 individual graphics and controlling them on your Web page using
00:01:29 00:01:33 Java Script or some other code, it allows you to create one graphic,
00:01:33 00:01:38 which reduces server load and download time, and then you use
00:01:38 00:01:41 CSS to display one version of this graphic at a time, one section
00:01:41 00:01:46 of this graphic, one button through a sort of CSS window or a
00:01:46 00:01:50 div on screen. And Fireworks CS6 now supports the extraction
00:01:51 00:01:55 of Sprites through the Export menu.
00:01:56 00:01:58 From the Export menu, you choose CSS Sprites and it gives you
00:01:58 00:02:03 the option to control CSS selectors, classes, or IDs, any other
00:02:03 00:02:06 code that you need to do as well as override the optimization
00:02:06 00:02:07 on the Sprites.
00:02:08 00:02:13 The other big CSS feature in Fireworks CS6 is the ability to
00:02:13 00:02:18 export and modify themes for jQuery mobile, which is a mobile
00:02:18 00:02:20 development framework that allows you to create mobile optimized
00:02:20 00:02:23 websites that work across platforms so you don't have to
00:02:23 00:02:28 write codes specifically for iPhones or Windows Phone 7 or Android
00:02:28 00:02:32 platforms. By using the jQuery mobile framework, you create one
00:02:32 00:02:38 mobile website and you can display it across or deliver it across
00:02:38 00:02:41 all those different phone platforms. And to do that, we go into
00:02:42 00:02:45 jQuery mobile theme. You can create a new theme. You export the
00:02:45 00:02:50 theme. You can preview in a browser. The support for CSS3 and
00:02:50 00:02:53 CSS across the board in Fireworks is hugely, hugely improved
00:02:53 00:02:55 and it's a tremendous new feature.
Copy and paste the embed code above
Copy and paste the embed code above