1 person found this helpful
I'd probably do something like this (resized screen capture):
I put slices over your content areas just to show you where I'd probably put the boundaries, even though these won't be images.
It looks like all your shadows are the same, so I've shown slices for the top, right, bottom, and left shadows. (Oh...oops. I forgot the corners.) If you set up your navigation and content areas in tables, the it's easy to use the the shadow images as tiling backgrounds in table cells. I'm not sure how one does a four-sided drop shadow using CSS. Oh...a div at the top with the full-width upper shadow, and then you have the side shadows as a full-width background image to your content div, then a div at the bottom with your full-width lower shadow.
For alignment, either your main content area is a pixel too wide on the left side or your "catchy phrase area" (didn't know what else to call it) is over one pixel to the right.
The text at the bottom, is, of course, not an image, so I didn't slice it.
I'm still not quite sure what you would do in the content areas?
Maybe these are what you need?
The structure in the tutorial is even similar to your structure.
The glows on the left and right side of the content box are what throw me off, Could you show how you would slice that area?
Thank you for your help,
Download the sliced .png file and see slices shadow-top, shadow-right, shadow-bottom, and shadow-left, although I forgot the corners. The shadow slices have a 5-pixel dimension so they're visible, but they only need to be 1 pixel in the appropriate dimension to tile. You'll need to also make slices for the corners. This slicing method is approprate if you make tables.
Alternatively, as I also said, if your content areas are fixed-width, slice off the entire top shadow, set that as the background or content for one div, make a horizontal slice across each content area (background), including glows and use that as a vertically tiling background for the content div, and slice off the entire bottom shadow and place in a div. Each content area would probably need to go into its own div for positioning. You would probably need to structure each section something like this:
[div content wrapper]
[div top shadow]
[/div top shadow]
[div content window and shadow]
[/div content window and shadow]
[div bottom shadow]
[/div bottom shadow]
[/div content wrapper]
1 person found this helpful
As for the boxes with the shadows, you can use this technique:
After you draw your box, click fit canvas and at the top and down edges place two slices named foreground image.
Then place another one at the center and set it as background image. That's it.
This way fireworks will use images to create a box in a reasonable way, considering web design techniques.
Also watch for the text highlight not to overlap other objects. And of course text fill and stroke effects will not be exported.
Is the fit canvas required?
If so, I slics the whole box in the original and replace it with what was created with the fit canvas?
It's not required, i suggested that so that you can be sure of slicing the whole shadow effect. You don't have to open another document. Right click your rectangle and add a rectangle slice on it to be sure where its edges are.
I think yes. Remove the background though because it will ruin your page. When you export it, you can add a background from the options menu.
Oh. I just noticed your gradient. It's very subtle, nice work. However, it's the gradient backgound that's the problem. When you slice in one area, the color won't match in another.
In order to get the look you have, you'll have to use transparent .pngs, and they're problematic. (With your monochrome palette, however, you might try a PNG8. See http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/)
Alternatively, is there any way you can modify the design so that you only have gradient, say, in the logo area?
The images at the corners are this way because they are not transparent. Edit those images and try to apply a background to them, similar to the one you've got on your page so that they look perfect.
What do you mean apply a background to them? The drop shadows?
Well, these images look like white boxes with shadows that are placed on a white background, right? That's because you exported them that way.
You must make it that those images background and your pages background match.
You need to replace them with images that have either transparency, so they let your page background to be seen, or draw these images again but this time not with white background but with the same gradient effect of your page background.
In order for your transparent shadows to look the way you want, you'll need to use fully transparent .pngs: PNG32. These, in turn require special coding in order to work properly in IE6. If this browser doesn't matter to you, then...you'll be okay. You may possibly get away with a PNG8, as described here, although IE 6 browsers and earlier will not show the shadow: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
If the drop shadow is important to your design, you should modify your design so that you do not have a gradient effect behind the purple slice. (The transparent drop shadow plus the background gradient produces an overall gradient effect.)
In your original graphic, the background (behind the logo and all the content boxes) is a gradient from a medium grey to almost white. You have drop shadows behind all your content boxes. The drop shadows are partially transparent. Because the shadows are transparent, the background gradient will show through it. The color of the background and the shadow will blend and be darker at the top of the each box than at the bottom.
I don't understand why your corners are darker in your screen captures, that does not make sense from what your image looks like. Unless you have transparent slices and placed the slice shown in purple behind the top and bottom slices as well? If so, the top and bottom slices are full width and do not need the additional background. For each box, you should have:
[div with top slice background, untiled] [end div]
[div for content wtih purple slice background, tiled vertically] [end div]
[div with bottom slice background, untiled] [end div]
1) If you want to have a transparent shadow over a full-page gradient, you need to either use PNG32 and probably learn how to code that for IE 6 or use PNG8 and not worry about IE 6. (IE 6 does not show semi-transparent pixels in PNG32 wtihout special coding, so your shadow won't be visible unless you make an effort.)
2) If you don't want to go to all that hassle, and you want to have a nice-looking drop shadow, then you need to revise your design so that the page area behind the content regions is a solid color. Then, you merely export an image where the shadow color is flattened against the background color. Then, you could use PNG24 or JPG.
About the images problem, why don't you just try to edit those pictures and repair them.
About the other issue, do not expect to use buttons and sliced objects as navigation in your site. Buttons and other slice behaviors will work only when you export like 'html and images'. When you export like 'css and images' you cannot export multiple pages or states. So, no buttons or slice bahaviors.
Use/edit your exported css to create your navigation.
How is messed up in DW?