FW->DW->CSS-P

I want one that will show how to bring do layout with Fireworks and Dreamweaver
that will result in CSS-P. Is that not possible? Where can I get info on how to
use Cascading Style Sheets for page layout that is derived from comps made with
Fireworks? It used to be you could slice a FW .png, create hot spots, and
export to HTML tables and images. But now that CSS-P is preferred to HTML
tables for layout, is there a way to go from FW to CSS-P? Thanks.

KKreps wrote:

I want one that will show how to bring do layout with Fireworks and Dreamweaver
that will result in CSS-P. Is that not possible? Where can I get info on how to
use Cascading Style Sheets for page layout that is derived from comps made with
Fireworks? It used to be you could slice a FW .png, create hot spots, and
export to HTML tables and images. But now that CSS-P is preferred to HTML
tables for layout, is there a way to go from FW to CSS-P? Thanks.

Sorry, the answer to that one is a resounding, no.

CSS is not like tables, when you export html from FW you export a block
of code that results in something close to a table. CSS is very
different, it needs to be told what to do from an external file, each
element within that file carries its own sets of properties and values.

If you want to design with CSS then their are no quick fixes. It means
you *will* have to learn the syntax and you will need to have a good
understanding of how elements interact with each other on your page as a
result of the properties and values with your style sheet.

Having said that, once you have got to grips with that and you do
understand the basics then the benefits are many.

Some stuff that may help.

A free design that you can download from the bottom of the linked page.
Open the CSS file and study the comments.
http://www.communitymx.com/content/article.cfm?cid=D6D77

A discussion type article on the structure of the above design
http://www.communitymx.com/content/article.cfm?cid=33662

A tutorial that will teach you the very basics of positioning elements
with CSS
http://www.communitymx.com/content/article.cfm?cid=3B56F

And a series of tutorials that I did for Macromedia. Fianl part is out
on Tuesday.
http://www.macromedia.com/devnet/mx/dreamweaver/css.html?promoid=home_dev_css_082403

--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver MX
http://www.webade.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

:frown; Thanks for responding to my question, jojo. Frankly, I hated to read
your ?resounding, no? answer. I have already read many of the links you
provided and will continue to study up on CSS-P concepts and rules. But it
leaves me with a couple of questions: Using CSS-P, is it still useful practice
and/or relevant to prepare page layout comps for clients using a graphic
program such as Fireworks or Photoshop? If not, how should designers present
design plans for CSS-P to clients? In ?Macromedia MX Training from the Source?
by Shaoewn Bardzell and Jeffrey Bardzell, in Lesson 5 (page 136 of my 2004
edition from Macromedia Press) it shows that you can apply a .content_right
class or a .content_left class to a <td> tag. To me, this seems like a way to
have the best of both worlds. What is wrong with applying CSS classes to table
elements and keeping the table elements? Thanks for clarifying. KK

"KKreps" <webforumsuser (AT) macromedia (DOT) com> wrote

:frown; Thanks for responding to my question, jojo. Frankly, I hated
to read
your ?resounding, no? answer. I have already read many of the links
you
provided and will continue to study up on CSS-P concepts and rules.
But it
leaves me with a couple of questions: Using CSS-P, is it still useful
practice
and/or relevant to prepare page layout comps for clients using a
graphic
program such as Fireworks or Photoshop? If not, how should designers
present
design plans for CSS-P to clients?

You can make comps in an image editor once you understand what is
possible with CSS. If you put blinders on and "draw" a layout in
Fireworks, without first understanding CSS sufficiently, you will very
likely paint yourself into a corner.

As you are learning CSS, it might be best to comp your layout in
Dreamweaver, using placeholder images, and once you are confident you've
built a stable layout, then (and only then) go into Fireworks and create
your images. As for comping, I would comp in Dreamweaver, and as the
client suggests color changes, simply edit my CSS.

In ?Macromedia MX Training from the Source?
by Shaoewn Bardzell and Jeffrey Bardzell, in Lesson 5 (page 136 of my
2004
edition from Macromedia Press) it shows that you can apply a
.content_right
class or a .content_left class to a <td> tag. To me, this seems like a
way to
have the best of both worlds. What is wrong with applying CSS classes
to table
elements and keeping the table elements?

Most tables created in Fireworks are terrible messes. There are lots of
books out there that are outdated before thay are released. That's one
reason I stopped writing Dreamweaver books.

For a transitional table layout, styled with CSS, you might want to read
this tutorial:
http://www.projectseven.com/tutorials/css/css_td/index.htm

Or browse our entire CSS Lab:
http://www.projectseven.com/tutorials/css/index.htm

We don't have as many tutorials as some sites, but we subscribe to
quality and never to quantity - and try to keep our tutorials very
up-to-date.


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".

"Al Sparber- PVII" <adCUTmin (AT) projectCUTseven (DOT) com> wrote

We don't have as many tutorials as some sites, but we subscribe to
quality and never to quantity - and try to keep our tutorials very
up-to-date.

By the way, I was referring to the plethora of outdated CSS tutorials on
Macromedia's site - and not the specific ones that JoJo referenced. JoJo
is pretty sharp all things considered :-)

If you are using Photoshop, and you want to go to a design separated
out nicely into XHTML 1.1 and CSS, then look at the SiteGrinder(*)
plug-in.
http://www.medialab.com/sitegrinder

It doesn't slice, it outputs very nice XHTML 1.1 without a bunch of
<img> tags littering the code.
It supports multi-page output, direct conversion of styled Photoshop
text layers to styled HTML/CSS, buttons, menus, and more. It also has
great support for layersets and layercomps.

Chris Perkins
Media lab, Inc.
*DISCLOSURE: I helped write SiteGrinder, so I may be biased. Best
check it out and see for yourself.

I hope I'm not trying to beat a dead horse, but... Is it possible to use
Fireworks to slice up a layout, export the images (without HTML) and then
insert the .jpg and .gif files as backgrounds in div selectors in a CSS-P
design? Is this a valid approach? See an example where this was done:
http://savannahmedicalclinic.com/. I'd like to find some tutorial s that
gives the details on how to do something like this, especially in a 3-column
layout. Thanks. KK

Hi

The trap you are falling in to is the design with absolute positioning
trap. position: absolute; obviously has it's uses, but you really need
to understand where those uses lie.

Position absolute does pretty much what it says on the tin. It places
the element on the page and there it stays, come hell or high water.
Once positioned in this manner then the element is taken out of the
document flow, when in this state the element is totally unaware of it's
surrounding elements and on - for instance text resize - your individual
content containers begin to over lap each other, which looks a mess.

Design in Fireworks, export the images and build your divs, this is
great, this is how I work too. However, to design with CSS you need to
get to grips with the way elements react with each other. It is not even
necessary - on many occasions - to position your page elements at all.
You can simply allow the elements to stack and flow.

Before beginning to design with CSS you should do a few things.

1. Forget where the draw layer tool is, wire it up to a 200 volt
electric current, just in case you should be tempted to use it.

2. Understand how a page can flow, learn what is out of the document
flow, and what is in the document flow and how the two affect the layout
of your site.

3. Get to grips with the positional values and how they interact with
their surrounding elements.

This tutorial teaches the basics of the positioning values.
http://www.macromedia.com/devnet/mx/dreamweaver/articles/intro_cssp.html
I think it is worth a read - probably because I wrote it - the demo
pages are uncluttered and - I think - the tutorial clearly explains and
shows you how the surrounding elements are affected by the different values.

--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver MX
http://www.webade.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

KKreps wrote:

I hope I'm not trying to beat a dead horse, but... Is it possible to use
Fireworks to slice up a layout, export the images (without HTML) and then
insert the .jpg and .gif files as backgrounds in div selectors in a CSS-P
design? Is this a valid approach? See an example where this was done:
http://savannahmedicalclinic.com/. I'd like to find some tutorial s that
gives the details on how to do something like this, especially in a 3-column
layout. Thanks. KK

That page also needs a background defined in he content div--but you

probably already knew that!

--
Bonnie in Alameda
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa

Bonnie, Thanks for the suggestion. No, I actually was unaware that the content
div needed a background specified. I added a white background, but I don't see
any difference. Would you please let me know what browser you are using where
this problem had been obvious? Or please explain why a background is always
needed for this situation? Thanks. I'm eager to learn. KK