Fireworks 8-- Exporting CSS

I am trying to export slices as CSS layers; however, the htm
file is not being generated-- a .gif file is generated instead. The
images folder and actual images are exported correctly. Any help
would be appreciated.

Toledo15 wrote:
>
>
> >>When you export, choose CSS Layers for "export"
and Fireworks Slices for
> "Source."
>
> Thanks for the reply. I had those settings selected. I
am not sure why it is
> exporting a .gif file, though. It should be exporting a
.htm file correct? I
> was able to successfully complete this export function
previously. What else
> could be the problem? Have you ever seen this type of
problem/output before?
Only if I forget to export slices.
Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Similar Messages

Export CSS?

DW8 had File > Export > CSS Styles to export embedded
styles to an
external stylesheet. Option is not there in CS3. Where has it
moved?
Alec Fehl, MCSE, A+, ACE, ACI
Adobe Community Expert
AUTHOR:
Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
Publications)
Welcome to Web Design and HTML (Labyrinth Publications)
CO-AUTHOR:
Microsoft Office 2007: Essentials (Labyrinth Publications)
Computer Concepts and Vista (Labyrinth Publications)
Mike Meyers' A+ Guide to Managing and Troubleshooting PCs
(McGraw-Hill)
Internet Systems and Applications (EMC Paradigm)

Select the rules first.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Alec Fehl" <[email protected]> wrote in message
news:[email protected]...
> Thanks. I see it now. BUT - the MOVE CSS RULES command
is grayed out, and
> my page contains several embedded styles. Any idea why
it's grayed out?
>
> Here's my HEAD sections:
>
> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="contenttile-Type"
contenttile="text/html; charset=utf-8"
> />
> <title>Untitled Document</title>
> <style type="text/css">
> 
> </style>
> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
> </head>
>
>
> --
> Alec Fehl, MCSE, A+, ACE, ACI
> Adobe Community Expert
>
> AUTHOR:
> Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
> Publications)
> Welcome to Web Design and HTML (Labyrinth Publications)
>
> CO-AUTHOR:
> Microsoft Office 2007: Essentials (Labyrinth
Publications)
> Computer Concepts and Vista (Labyrinth Publications)
> Mike Meyers' A+ Guide to Managing and Troubleshooting
PCs (McGraw-Hill)
> Internet Systems and Applications (EMC Paradigm)

Default font size for exporting CSS styles?

People
I make the layout of websites in indesign cs3 with all text properly set to be defined by paragraph styles.
I then export to an epub file from which i can extract a css file. Problem is all sizes are in em units.
Those em's seem based on 12pt, while the default font size of most (all?) browsers is 16pt.
For example:
p.body {
     font-family: "Verdana";
     line-height: 1.64em;
     font-size: 0.92em;
     margin-bottom: 0.00em;
     margin-top: 0.77em;
     text-indent: 0.00em;
     margin-right: 0.00em;
     margin-left: 0.00em;
     text-align: left;
     font-weight: normal;
     font-style: normal;
     color: rgb(0,0,0);
The correct font size (the one set in indesign) should be 11pt. In the css file i get 0.92em. (so indesign assumed 1em = 12pt)
With a browser default size of 16pt, the text displays too big: 1em = 16pt so 0,92em = 14,72pt.
In other words: all text is displayed to big, text that should be 11pt is displayed at 14pt.
So is there a way to tell indesign when exporting css 1em = 16pt instead of 12pt?
I tried adjusting the default paragraph font size to 16pt (it is 12 pt by default) and base the body paragraph style onto this one, but the css file doesn't change.
Thanks for any help!

Well i found a workarround on another forum.
Instead of making indesign think 1em = 16pt, make the browser think 1em=12pt.
Adding this line of code to the css file makes the font sizes in indesign and website match:
body {
    font-size: 0.75em;

Exporting "CSS and images (.htm.)" from Fireworks CS4?

Is this an effective process for developing CSS based layouts? Are there any proven tricks to improve the quality of the resulting structure?

It's a starting point, but it does not exempt you from understanding
XHTML and CSS. Currently there are some limitations to what the script
will export: it ignores additional states, javascript behaviors and
won't export more than 1 page at a time. Keep in mind this is just the
"first kick" and we'll no doubt see this feature embellished.
I recommend that you download and read about the updated CSS and
Images export script, modified by Matt Stow. You can find the new
script and his article here:
http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html
The article also provides some tips on how to best plan your designs
if you plan to use the script.
HTH
Jim Babbage
NewMedia Services
http://www.newmediaservices.ca
Community MX Partner -
http://www.communitymx.com/author.cfm?cid=1036
Adobe Community Expert
http://www.adobe.com/communities/experts/members/206.html
Author - Lynda.com
http://movielibrary.lynda.com/authors/author/?aid=188
Author: Peachpit Press
http://www.peachpit.com/store/product.aspx?isbn=0321562879

Problem importing .PSD to Fireworks and Exporting to .HTM with CSS

Hi!
Ok, I've watched 3 differerent adobe tutorial videos about opening a .PSD file in Fireworks and ultimately exporting from Fireworks to an HTML file with CSS for use in Dreamweaver. It seems so easy. I have a very simple PSD. Basically a solid color header with two images on it plus some text which will eventually be a nav menu. Then I have about 500 px of blank space underneath where I will eventually place a flash SWF. Finally, I have a text footer made up of 6 individual text boxes that will also serve as nav links.
When I export, the top portion looks fine, however my text boxes at the bottom end up all over the place and one even loses the "style" formatting.
What am I doing wrong? In the videos, it appears text simply stays text during the export and stays where it was on the page. I don't know why mine is going everywhere.
Any ideas would be so much appriciated...thx!!!

I prefer to work in Photoshop. I never use Fireworks. But I know many people who prefer Fireworks. So pick your favorite graphics editor and stick with it. PSD is not a Fireworks file type thus some things may get lost in translation particularly if they reside in layers on a CMYK project file. Graphics for the web need to be saved as RGB.
More importantly, graphics editors shouldn't be used to generate quality code. Use your graphics editor to make your design comp, slice and optimize images (File > save for web). Use DW to build your HTML & CSS code. DW will do many things for you, but for best results you'll need a working knowledge of HTML and CSS otherwise you'll become very frustrated.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
Then work your way through this tutorial.
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

BUG? Fireworks to DW CSS gradients not consistent across browsers...?

Greetings -
I don't know if this is a bug or what, but after watching one of the Adobe TV roadshow videos I generated CSS gradients in Fireworks, selected ALL the browser compatible translations Fireworks provides and then copied/pasted the CSS into my web page in Dreamweaver. Looks good in DW - all seems well...until I view it with Firefox...
I'm not a Rocket Scientist, but also not a newbie.
Basically, IE, etc. all work fine EXCEPT Firefox! Firefox maintains the color, but distorts the gradient percentage and reverses the angle of gradient. E.g. if my gradient is going from dark on top to white on the bottom of a box, it all displays fine in the other browsers, but in Firefox the gradient goes left to right, dark to light...
And yes, I promise I made sure I have the Firefox CSS in addition to the IE, etc. before bothering you all.
OH! AND I am using the Fluid Grid set up in Dreamweaver...just FYI.
Am I missing something?
Do I have to manually update? (i.e., tie a rope around my waist and head on in to the looking glass - code land that is CSS gradients?
Is there something in DW that needs to be altered after the CSS from FW is added?
Many thanks for all your help and advice!
JL

JLSF45 wrote:
I don't know if this is a bug or what,
Yes, it's a bug in the code that Fireworks generates, not in the way that Firefox handles CSS gradients.
The reason for the problem is that browsers started implementing CSS gradients on an experimental basis long before the W3C standardization process got under way. For some reason, all browsers decided to calculate angles using the polar coordinate system, in which 0 degrees points right and the angles increase counterclockwise. This way of measuring angles appears to be common in geometry, but it's not the way that most people think of them.
The most common way of measuring angles is to use the compass system: 0 degrees points straight up, and angles increase in a clockwise direction. That's the way the W3C decided angles should be measured in CSS. Because 0 degrees in the polar coordinate system is 90 degrees in the standard CSS syntax, and angles increase in the opposite direction, the only angle that's the same in both systems is 45 degrees.
Unfortunately, whoever coded the Fireworks panel didn't realize that the standard syntax uses different angles, and nobody picked it up in beta testing. The problem has been reported to Adobe, and I'm told it will be fixed, but I don't know when.
Until it's fixed, you need to convert the angle in the unprefixed version of linear-gradient().
Subtract the angle generated by Fireworks from 360.
Add 90
For example, if the angle generated by Fireworks is 315deg, 360-315 = 45. 45 + 90 = 135. So change the angle in the unprefixed version to 135deg.
IE 10 also uses the standard syntax, so the conversion is necessary not only for Firefox, but it will be needed by all browsers.
This is a rare case of the value for browser-specific prefixes being completely different from the standard syntax.

Fireworks CS6 export all pages as PDF crash

I cannot for the life of me Export all pages as pdf from FW CS6 on my Mac. All software is fully up-to-date. I have many times Exported scucessfully before, but now the same file is no longer exportable. I'm going crazy. The source PNG file is a 15 MB file of 68 pages, it is filled with hotspots that should export an interactive PDF. (I deleted all of the "unused library symbols" (even though that deletes symbols that are actually in use)). My Mac is a PowerMac 8GB RAM... I can't remeber the processor setup... I can tell you later when I'm at work...
I have been using FW since late 90s. FW crashes a dozen or more times a day these days. I'm tired of fighting it. Adobe has frankly been woeful in updating FW (on the Mac at least). It is an excellent product... but at best an unfinished product. I've sent bug reports through official channels for years and every year Adobe fails to fix them. It is quite shocking really.
I hope I can get a quick answer, or else my job will become much more difficult.

Here's a partial Crash output, let me know if more would help:
Process:         Adobe Fireworks CS6 [5239]
Path:            /Applications/Adobe Fireworks CS6/Adobe Fireworks CS6.app/Contents/MacOS/Adobe Fireworks CS6
Identifier:      com.macromedia.fireworks
Version:         Adobe Fireworks CS6 version 12.0.0.236 (12.0.0)
Code Type:       X86 (Native)
Parent Process: launchd [163]
User ID:         502
Date/Time:       2013-02-05 17:33:03.564 -0500
OS Version:      Mac OS X 10.8.2 (12C60)
Report Version: 10
Interval Since Last Report:          95268 sec
Crashes Since Last Report:           72
Per-App Interval Since Last Report: 84851 sec
Per-App Crashes Since Last Report:   17
Anonymous UUID:                      EDC2114F-8AD4-DC55-0A2A-EC60302FB1F0
Crashed Thread: 0 Dispatch queue: com.apple.main-thread
Exception Type: EXC_CRASH (SIGABRT)
Exception Codes: 0x0000000000000000, 0x0000000000000000
Application Specific Information:
abort() called
Thread 0 Crashed:: Dispatch queue: com.apple.main-thread
0   libsystem_kernel.dylib                  0x9856fa6a __pthread_kill + 10
1   libsystem_c.dylib                       0x935caacf pthread_kill + 101

Fireworks file exported to PDF

Hi,
I designed a 2 page design document in Fireworks CS4 with a canvas size of 1024x78. When I exported it to a PDF, the PDF page width is very high giving rise to horizontal scroll at 100%. My question what is the correct canvas size I should use?
-Shivanand

If you don't view at 100% it won't scroll. The PDF is a printable file and larger on screen then most resolutions. Your design probably fits the page fine when printed. This just my "guess" :-)

Export css rules to an external style sheet

Hi
For some reason, when i try and right click on my selected styles to move them into a new external style sheet the option to move css rules isn't in bold so i can't perform the task. Its the same when i try and select move css rules from the format tab in my toolbar. Has anyone come across this before or know another way around it. I also seem to get different options appear on my right click depending on what view I am in, is this normal?
Thanks
Ellen

Why don't you manually move your embedded CSS code into a new CSS file (in code view)?
Then link your HTML pages to your external style sheet.
Dreamweaver, Linking HTML to External Style Sheets
Nancy O.

Exporting CSS: phantom rectangles

Fireworks seems to think that I have overlapping rectangles when I don't. In this case, I have two rows of navigation links made with HTML symbols. Each row has one rectangle behind the text links. There are no other rectangles, visible or hidden. Nevertheless, Fireworks says "Objects 'navbar_2_box' and 'home_btn' boundaries overlap, switching to absolute positioning mode."
Why does this happen? I have seen this error in other pages also, where there were definitely NOT any overlapping objects.
Thanks,
Zalel

Any chance that you have added a drop shadow or glow to the button shapes?

Newsletter creation and CSS export in Adobe Fireworks

I am a new to adobe fireworks and am currently in the trial mode of my download.
I was advised that Adobe FIreworks CS6 is the ideal program to create graphics and text to build a newsletter for my company.
Not knowing much about the program, I was able to add graphics, text and hotspots on specific images and text with an html link for customers to be able to click to sign up for the newsletter via our website.
The million dollar question I have is how in the world do I export this document and paste it into the "body" of an email to send to 5k contacts?
I do not want an attachment, I want the body fo the email to be html or css coded, but I know nothing about either of the two or how to do it.
I did find one video that walked me thru the export css process, but none of my images were shown and 90% of the text was missing.
I believe I need to understand "layers" to get this to work properly but could really use some help!
I am dangerously close to missing out on advertising to all 5k contacts before the holiday. Please help!!
BTW - the reason for doing this instead of using standard mailchimp or constant contact is because I purchased my email list and those are forbidden in both constant contact and mailchimp hence why i need to create my own opt-in newsletter to get people to opt-in via my website.
Thanks in Advance!!

Seriously, do not use Fireworks to generate the html for your webpage. It is graphics program with *some* html capabilites, but I would never use it for a live site. It is always best to create the layout in Fireworks, slice it up as for use as individual images, or uses 'pieces' for background images and write the markup (html + css) in Dreamweaver or a HTML editor of your choice.
This tutorial may help you make the transition. Naturally it helps to have at least a basic knowledge of html and css before working with Dreamweaver, it will make using DW so much easier.
TAKING FIREWORKS COMP TO DREAMWEAVER:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Creating your first website (series) (using Dreamweaver)
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS42d4a1c0291fbe4e59147ede1232ff9686c-8 000.html
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Exporting Text out of Fireworks on top of BG image

In Fireworks I have a black background with text content on top of it. I would like to export both so that the bg comes into dreamweaver as a background image and the text comes in as editable text. Right now when I slice the bg it automatically includes the text in the image. How do I export text that is on top of an image?

I forgot earlier to say that you must finally export as CSS and Images.
I'll try to give some simple advice while trying to export css from Fireworks CS4.
You can apply the blue background, by simply adding it from the CSS and Images export options. You should not draw it in your document(, it doesn't matter at all).
Draw Rectangles all over your document to finally export them as div tags.
When you need to apply a background, think of what exactly you want your background to be, solid color, or a picture?
If it's going to be a picture, you must place that picture and insert a slice to it, set as background.
If you want color, you don't put a slice. You just ...draw a rectangle. Write some text over the rectangle, and you can export it as CSS.
A slice is used to export images. Otherwise, you just draw rectangles to export the current color as a value in your exported CSS.
The black background color of your document, can be set as a color value inside your exported css, so you don't have to place a slice for that.
Watch not to overlap objects like images, rectangles and slices. It is going to be hard to achieve an excellent result in order to construct your web site with Fireworks while trying to export CSS.
Jim has already said it Fireworks won't help you that much with coding like hand coding or Dreamweaver will.

Exporting and CSS

I wonder if it´s possible to export all pages from
Fireworks at the same time and in that way recieve only one CSS
file? In the way I do it now I recieve one CSS file per page I
export. This is not the way I want it.
Looking for help!
/ Lena

Lena P wrote:
> Thank you for your answer.
>
> And then this forum might not be the right one, but is
there a way to combine
> multiple CSS files so you only have one?
>
> Or.... how do other designers export CSS files to
Dreamweaver in a correct
> manner?
>
> / Lena
>
Yes, in Dreamweaver you can use the CSS panel to move rules
from one
style sheet to another, or you can simply open the CSS files
themselves
within DW and copy/paste as needed.
That said, pay careful attention that you aren't duplicating
or
overwriting classes you need which are in the original CSS
file.
Depending on what you are doing, you may just want to stick
with one CSS
export from Fireworks, and then add any additional rules
manually within
Dreamweaver.
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
Adobe Community Expert
http://tinyurl.com/2a7dyp
.:Author:.
Lynda.com -
http://movielibrary.lynda.com/authors/author/?aid=188
Peachpit Press -
http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
Layers Magazine -
http://www.layersmagazine.com/author/jim-babbage

CSS Popup menu export problems

I have followed all the instructions to export css popup
menus from Fireworks CS3. I can see them when I preview in browser
from the launch button top right. But when I export the CSS etc.
and view the files in Dreamweaver it simply doesn't make any sense.
Nothing seems to export properly, images missing, no
behaviours nothing, what is the exact process, can someone help?!!

Don't use a code produced by a graphics program
Murray (*ACE*) usually has the answer, so I'm copying from
him. He once linked to this blog post, from the guy who worked on
the menus:
The
sordid tale of mm_menufw_menu.js
See also his post in this thread:
Good
advice from Murray

Rollover effects are lost when exported as Fireworks HTML

I created a simple graphic in Fireworks, which has a rollover
effect. The finished symbol was assigned a LINK, ALT and TARGET in
Fireworks, and exported as an .htm file. Every slice was selected
and saved in the IMAGES folder.
After I placed the htm file in Dreamweaver, I previewed it in
Safari and FireFox. It worked perfectly. After I uploaded it to the
Web Host, however, all effects were lost.
Here is the link:
http://www.jlwa.net
The effects are limited to the word "enter."
If anyone sees what I'm doing wrong, please let me know.
THANKS!

quote:
Originally posted by:
paulkirtley
Lorraine, thanks for your advice. I will do as you
recommended, and build the page in Dreamweaver. I have to tell you,
though, my experience has not been good doing the build in
Dreamweaver. Perhaps it is because I'm on a Mac...I don't
know...everytime I try that the finish result pulls apart at the
seams when viewed on a PC.
On this page, for example:
http://www.jlwa.net/projects.html,
the Accordion (when viewed on a PC) has horizontal gaps between
each of the Accordion's tabs, and all of the text, despite being
set at "left" justification, appears as if I centered it. I'm still
wrestling with this page to get it right.
Thanks again - Paul
Hmm. It looks okay in Chrome, but I see it pulls apart in IE
7. That is probably due to inconsistencies in CSS rendering between
the different browsers. Using Fireworks won't help you with that.
You're going to have to modify the CSS to account for browser
differences if you want it to address those little spaces. The CSS
for the Spry accordion element is very simple and I don't see any
hacks to get around the box model differences that I know people
use. You might ask on the Dreamweaver forum, but it certainly isn't
anything that Fireworks is going to fix for you.
Also, there are some other maintenance issues I see in your
page. Your navigation images are directly using the Fireworks
naming scheme, such as jlwa_main_r2_c2_f2.jpg. When you export your
images from Fireworks, give them good, reasonable names so that you
can maintain the code. You have a row of unnecessary spacer gifs in
your header. You should pull your CSS out into a separate file,
rather than having it embedded into each and every file. That way,
you only need to edit it in one place to have it take effect
everywhere. Give your styles meaningful names, too, descriptive of
their purpose. You have style1, style4, style5. If you want to edit
them, you don't even know what they are without digging into the
HTML code.

Fireworks 8-- Exporting CSS

Similar Messages

Maybe you are looking for