Re: Fireworks CSS causing a headache
am 24.08.2007 07:59:37 von laptopia
On Aug 23, 6:41 pm, Martin Jay wrote:
> On Thu, 23 Aug 2007 14:22:52 -0700, lapto...@gmail.com wrote:
> >When I export a page from fireworks it creates a table based layout
> >and it creates a single CSS tag without which all the images in the
> >table cells will have unnecessary space around them.
>
> Ouch! The words 'table,' 'based' and 'layout' really shouldn't be
> used in such close proximity to each other. :)
>
> Some browsers add space to the bottom of images, which is equivalent
> to that taken up by the under-hanging parts of letters such as g, p, j
> and y.
>
> >I want to get rid of this tag, because its causing problems with a
> >great PHP gallery that I like to use on my sites.
>
> >here is the tag:
> >td img { display: block; }
>
> >without this tag I will get spaces all the images contained in the
> >cells..
>
> There are a few ways around this. Perhaps the easiest is to give the
> table created by Fireworks a class, and then only apply the CSS to the
> td img elements in that class.
>
> So, in the HTML add style="fireworks" to the table element created by
> Fireworks.
>
> So:
>
> becomes:
>
> And then modify the CSS from:
>
> td img { display: block; }
>
> to:
>
> .fireworks td img { display: block; }
> --
> Martin Jay
Thanks Martin, I should kick my self for not noticing the obvious, but
I think that comes with the job we're doing. Most of the time the
problems that take up the most time are because I fail to see the more
obvious of the solutions. Maybe they just seem obvious when you figure
it all out..
I had to wrap the gallery with another table and set its (td img)
property to inline and it worked.
Cheers,
Igor Terzic
Creative Director
www.stikimedia.com
Re: Fireworks CSS causing a headache
am 24.08.2007 08:42:47 von Bernhard Sturm
dorayme wrote:
> In article ,
> Bernhard Sturm wrote:
>
>> I am using FW on a daily base,
>> and I would never use it to spit out complete HTML-pages. I suggest you
>> use it as your image manipulation and slicing tool
>
> Why are you slicing things these days?
because it's the most efficient workflow these days for a webdesigner.
When I design I usually prepare a mood or mockup of a typical page of
the site to demonstrate the navigational design and the look and feel
for the customer. I design those mockups with FW. I can then simply use
those mockups as the source for the sliced images, and because there are
still design cycles involved after having finished the real template of
the site, it is much convenient to have a sliced FW source. BTW: I am
currently doing a screendesign for a big web based GIS application.
There are over 80 toolbar buttons in 3 states to be designed. Imagine
this job without FW? (I use _a lot_ the color search and replace
function in FW :-)
>
> [btw, there is a little ? I want to ask you in case you know, it
> is rare to catch a FW user: is there a way to set as default the
> type of file you want to prepare for the web when the "Export
> Preview" Window is fired up? Mine is to gif but I prepare jpgs
> far more often. Be nice to have it so default. I am using a Mac
> and FF Version 7 2004. This is a little something I have never
> quite figured.]
I am using FW CS3, and I couldn't find something to set the default
export type... I never noticed this as the export heavily depends on
your images content. So I always switch between the various export types
(GIF, JPG, PNG) depending on the image.
cheers
bernhard
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 08:49:26 von laptopia
On Aug 24, 1:42 am, Bernhard Sturm wrote:
> dorayme wrote:
> > In article ,
> > Bernhard Sturm wrote:
>
> >> I am using FW on a daily base,
> >> and I would never use it to spit out complete HTML-pages. I suggest you
> >> use it as your image manipulation and slicing tool
>
> > Why are you slicing things these days?
>
> because it's the most efficient workflow these days for a webdesigner.
> When I design I usually prepare a mood or mockup of a typical page of
> the site to demonstrate the navigational design and the look and feel
> for the customer. I design those mockups with FW. I can then simply use
> those mockups as the source for the sliced images, and because there are
> still design cycles involved after having finished the real template of
> the site, it is much convenient to have a sliced FW source. BTW: I am
> currently doing a screendesign for a big web based GIS application.
> There are over 80 toolbar buttons in 3 states to be designed. Imagine
> this job without FW? (I use _a lot_ the color search and replace
> function in FW :-)
>
>
>
> > [btw, there is a little ? I want to ask you in case you know, it
> > is rare to catch a FW user: is there a way to set as default the
> > type of file you want to prepare for the web when the "Export
> > Preview" Window is fired up? Mine is to gif but I prepare jpgs
> > far more often. Be nice to have it so default. I am using a Mac
> > and FF Version 7 2004. This is a little something I have never
> > quite figured.]
>
> I am using FW CS3, and I couldn't find something to set the default
> export type... I never noticed this as the export heavily depends on
> your images content. So I always switch between the various export types
> (GIF, JPG, PNG) depending on the image.
>
> cheers
> bernhard
>
> --www.daszeichen.ch
> remove nixspam to reply
Bernhard,
What do you mean color search and replace? can you actually search for
#000000 and replace it with #cccccc? if so, how?
Igor Terzic
Creative Director
www.stikimedia.com
Re: Fireworks CSS causing a headache (OT)
am 24.08.2007 09:06:02 von Bernhard Sturm
Changed the subject to OT
stiki wrote:
>
> Bernhard,
>
> What do you mean color search and replace? can you actually search for
> #000000 and replace it with #cccccc? if so, how?
>
Yes you can (and even more): Press [Ctrl] + [F], and then select in the
first dropdown where to search (I usually have 'entire document') in the
second dropdown you have to pick 'Color search') then two color select
boxes appear: one for the color to be replaced, and the other with the
new color. In the last dropdown you can define on what the new color
shall be applied: you can apply it to everything from brushes to
fillings and effects.
cheers
bernhard
BTW: learn to quote. Quote only the relevant parts.
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 09:51:50 von dorayme
In article ,
Bernhard Sturm wrote:
> dorayme wrote:
> > In article ,
> > Bernhard Sturm wrote:
> >
> >> I am using FW on a daily base,
> >> and I would never use it to spit out complete HTML-pages. I suggest you
> >> use it as your image manipulation and slicing tool
> >
> > Why are you slicing things these days?
>
> because it's the most efficient workflow these days for a webdesigner.
> When I design I usually prepare a mood or mockup of a typical page of
> the site to demonstrate the navigational design and the look and feel
> for the customer. I design those mockups with FW. I can then simply use
> those mockups as the source for the sliced images, and because there are
> still design cycles involved after having finished the real template of
> the site, it is much convenient to have a sliced FW source. BTW: I am
> currently doing a screendesign for a big web based GIS application.
> There are over 80 toolbar buttons in 3 states to be designed. Imagine
> this job without FW? (I use _a lot_ the color search and replace
> function in FW :-)
>
Well, good for you. I left slicing way behind after my first
attempt at a website. I made a home page that was one of the best
looking I have ever made. But it was a nightmare to work with and
that was it, bye bye. I still have a remnant for a couple of
pages, they too look nice and I keep putting off redesigning
them. The JS and table layout that holds it together so amazingly
would be sure to get me killed here.
But your use sounds very much more sophisticated than anything I
did.
> > [btw, there is a little ? I want to ask you in case you know, it
> > is rare to catch a FW user: is there a way to set as default the
> > type of file you want to prepare for the web when the "Export
> > Preview" Window is fired up? Mine is to gif but I prepare jpgs
> > far more often. Be nice to have it so default. I am using a Mac
> > and FF Version 7 2004. This is a little something I have never
> > quite figured.]
>
> I am using FW CS3, and I couldn't find something to set the default
> export type... I never noticed this as the export heavily depends on
> your images content. So I always switch between the various export types
> (GIF, JPG, PNG) depending on the image.
>
Well, that seems to be the same experience as mine. Pity. Would
have thought that by CS3 time they would have included a little
sophistication on this score.
--
dorayme
Re: Fireworks CSS causing a headache
am 24.08.2007 10:04:15 von Bernhard Sturm
dorayme wrote:
> In article ,
> Bernhard Sturm wrote:
>> I am using FW CS3, and I couldn't find something to set the default
>> export type... I never noticed this as the export heavily depends on
>> your images content. So I always switch between the various export types
>> (GIF, JPG, PNG) depending on the image.
>>
>
> Well, that seems to be the same experience as mine. Pity. Would
> have thought that by CS3 time they would have included a little
> sophistication on this score.
>
amasingly Adobe did not a lot to update FW. It is now better integrated
into PS (you can still use all installed PS-filters), and FW has now
multilevel layers, and the best thing for protoyping: you can now use
multiple pages in a single document. This makes life easier while
developing a design and going back and forth between the different
versions of the layout.
cheers
bernhard
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 11:40:34 von Andy Dingley
On 23 Aug, 23:36, Bernhard Sturm wrote:
> I suggest you use it as your image manipulation and slicing tool.
What's "image slicing", and what does that have to do with web design,
any time this century?
Re: Fireworks CSS causing a headache
am 24.08.2007 12:12:47 von Bernhard Sturm
Andy Dingley wrote:
> On 23 Aug, 23:36, Bernhard Sturm wrote:
>
>> I suggest you use it as your image manipulation and slicing tool.
>
> What's "image slicing", and what does that have to do with web design,
> any time this century?
>
just out of curiosity: how do you do webdesign in this century?
bernhard
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 14:44:03 von Andy Dingley
On 24 Aug, 11:12, Bernhard Sturm wrote:
> > What's "image slicing", and what does that have to do with web design,
> > any time this century?
>
> just out of curiosity: how do you do webdesign in this century?
By designing for the web, not for paper.
Web pages aren't magazine pages.
Re: Fireworks CSS causing a headache
am 24.08.2007 15:06:35 von Bernhard Sturm
Andy Dingley wrote:
> On 24 Aug, 11:12, Bernhard Sturm wrote:
>
>>> What's "image slicing", and what does that have to do with web design,
>>> any time this century?
>> just out of curiosity: how do you do webdesign in this century?
>
> By designing for the web, not for paper.
> Web pages aren't magazine pages.
>
Are we talking about the same? This thread is about Adobe FW
(Fireworks). You might probably not know this product. Check this URL:
http://www.adobe.com/products/fireworks/ and read the description
carefully. FW is the worst application for print related design. And
slicing doesn't literally mean 'to slice a piece of paper' in this
particular context. It's a way of cutting out images out of a bigger
image (e.g. a layout with a logo, and you are slicing out the logo
only). Sliced images are then exported into your /images/ folder, and
incorporated into CSS classes as backgroun-image for instance. This has
nothing to do with print.
HTH
bernhard
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 15:13:45 von rf
"Andy Dingley" wrote in message
news:1187959443.425140.108330@i13g2000prf.googlegroups.com.. .
> On 24 Aug, 11:12, Bernhard Sturm wrote:
>
>> > What's "image slicing", and what does that have to do with web design,
>> > any time this century?
>>
>> just out of curiosity: how do you do webdesign in this century?
>
> By designing for the web, not for paper.
> Web pages aren't magazine pages.
Andy, You must check Bernhard's portfolio (from his sig). Image slicing is
definately the order of the day.
--
Richard.
Re: Fireworks CSS causing a headache
am 24.08.2007 15:22:06 von Sherm Pendley
Bernhard Sturm writes:
> Andy Dingley wrote:
>> On 24 Aug, 11:12, Bernhard Sturm wrote:
>>
>>>> What's "image slicing", and what does that have to do with web design,
>>>> any time this century?
>>> just out of curiosity: how do you do webdesign in this century?
>>
>> By designing for the web, not for paper.
>> Web pages aren't magazine pages.
>>
> Are we talking about the same? This thread is about Adobe FW
> (Fireworks). You might probably not know this product. Check this URL:
> http://www.adobe.com/products/fireworks/ and read the description
> carefully. FW is the worst application for print related design. And
> slicing doesn't literally mean 'to slice a piece of paper' in this
> particular context. It's a way of cutting out images out of a bigger
> image (e.g. a layout with a logo, and you are slicing out the logo
> only). Sliced images are then exported into your /images/ folder, and
> incorporated into CSS classes as backgroun-image for instance. This
> has nothing to do with print.
The problem here is context. The slicing you're referring to was a very
popular method of constructing fixed-width pages that use tables generated
by ImageReady nested eight levels deep to "control" layout.
The word "slicing" has gotten such a bad name here as a result that a lot
of folks have developed a knee-jerk reaction to it, and equate it with
non-liquid layouts and horrible HTML markup.
It's unfortunate, because slicing doesn't have to mean fixed-width layout,
and markup quality is an entirely separate question. A designer who's aware
of the need for a page to "stretch" when resized can take that need into
account, creating slices in the master image to accomodate that need. Too
many folks blame the tools though, when in fact it's the way those tools
tend to be (ab)used that is the real problem.
sherm--
--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Re: Fireworks CSS causing a headache
am 24.08.2007 15:35:41 von Bernhard Sturm
Sherm Pendley wrote:
>
> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
> and markup quality is an entirely separate question. A designer who's aware
> of the need for a page to "stretch" when resized can take that need into
> account, creating slices in the master image to accomodate that need. Too
> many folks blame the tools though, when in fact it's the way those tools
> tend to be (ab)used that is the real problem.
>
oh cheers! I wasn't aware of this misunderstanding. Strange as I never
used the option of exporting entire HTML-pages with FW therefore I
couldn't understand Andy's reactions.
thanks
bernhard
--
www.daszeichen.ch
remove nixspam to reply
Re: Fireworks CSS causing a headache
am 24.08.2007 16:12:55 von laptopia
> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
> and markup quality is an entirely separate question. A designer who's aware
> of the need for a page to "stretch" when resized can take that need into
> account, creating slices in the master image to accommodate that need.
This is an interesting point I was not aware of. How can I create
create and export to HTML the sites that need to "stretch" using FW?
Up this only recently I did all my layout design in Photoshop, and
then used typed all my HTML manually using the free ASP developing
tool. What made me switch is that I met a few designers who had an
amazingly profitable business and they used every tool available to
make their work more efficient and that's when I started to use FW.
I'm not a fan of its HTML but I can't deny its ability to speed up my
work flow. Its extremely usefull when a penny pinching client wants
something for nothing.
Thanks,
Igor Terzic
Creative Director
www.stikimedia.com
Re: Fireworks CSS causing a headache
am 24.08.2007 16:38:09 von Sherm Pendley
stiki writes:
>> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
>> and markup quality is an entirely separate question. A designer who's aware
>> of the need for a page to "stretch" when resized can take that need into
>> account, creating slices in the master image to accommodate that need.
>
> This is an interesting point I was not aware of. How can I create
> create and export to HTML the sites that need to "stretch" using FW?
Simple, just use FW (or ImageReady) for what they're good for, creating and
exporting your images. Then write your own HTML.
For example, take a look at the CamelBones site in my .sig, using a browser
such as FireFox that allows you to choose one of the alternate stylesheets.
Choose the "Black" style. I created the rounded corners and drop shadows in
ImageReady, then sliced out the corners and tiny repeatable slices for the
drop shadows.
All it really takes is a little bit of planning ahead. When you create your
layout, you need to be looking to see what visual elements can "stretch",
and create a small repeatable slice to use in those areas.
sherm--
--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Re: Fireworks CSS causing a headache
am 24.08.2007 21:57:26 von Bernhard Sturm
Sherm Pendley wrote:
> stiki writes:
>
>>> It's unfortunate, because slicing doesn't have to mean fixed-width layout,
>>> and markup quality is an entirely separate question. A designer who's aware
>>> of the need for a page to "stretch" when resized can take that need into
>>> account, creating slices in the master image to accommodate that need.
>> This is an interesting point I was not aware of. How can I create
>> create and export to HTML the sites that need to "stretch" using FW?
[snipped a bit]
>
> All it really takes is a little bit of planning ahead. When you create your
> layout, you need to be looking to see what visual elements can "stretch",
> and create a small repeatable slice to use in those areas.
>
That's exactly how one should do it. As Sherm put it: planning is
essential when working with FW.
bernhard
--
www.daszeichen.ch
remove nixspam to reply