I'd like to have my webpages display with a background color and the page be white.
I'd like my white pages to have a shadow effect to set it off from the background.
Does anyone know how to do this?

Hi Dawn,

I saw your question regarding creating shadows with Dreamweaver and I have been struggling with the same thing the last 24 hours. I was wondering if you found a solution? I have a few emails out to some Dreamweaver people but have not heard back yet. If you have any info I would be most appreciative of what you've learned. And if I find anything out as well I will be happy to share it with you. Thanks so much and good luck!

Cynthia Bancale

Cynthia,

I did figure out a way. I'm not sure it's the best but it works.
I use Fireworks. In Fireworks I made the canvas size 1900px wide 20px high.
I filled it with the color I wanted for my background. Then I drew out a rectangle that was as wide as my webpage (800px) and 30 pix high and colored it white, the color of my webpages. Then I I went to Window > align. I selected center vertically and horizontally. This centered my rectangle on the canvas. Since the height of the rectangle is taller then the canvas it appears with the top and bottom of the rectangle "cut off". With the rectangle selected, click on the Add Effects button [+] in the PI (in FW 8, the Live Filters button).
Choose Shadow & Glow > Glow.
Set the Glow color to #333333, the Opacity to 40%, the softness to 9.
Press Enter to close the Glow editor.

To use the tile on your page, set the margins to zero, set the background tile to repeat on the Y axis, and center it. Your style should look like this:

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #B8AF8D;
background-image: url(shadowT.jpg);
background-repeat: repeat-y;
background-position: center;
}
-->
</style>

When I applied it to my webpage template I had to go into the html and add the repeat-y and center.
Once it was in there it worked perfectly.

HI
I'm sure I saw a css only way of doing this, I seem to recall it was something to do with having a background image and an offset div - if you search for 'css drop shadow' you'll come up with the goods

I'm sure that was where I got the info. I looked all over the Internet and I think that was the ONLY tutorial on the subject.

I did leave out the part where while in Fireworks you need to export the image to your Images folder for your site.
Then you use the image as your background image.

Drop shadows in web pages are simply graphics that give the appearance of a shadow. Here's the easiest way to create a shadow effect on a page. Assuming your background is white and your page color is white, simply create a new document about 50 pixels wider than your page width (if you page is 770 pixels, create a new document that is 820 pixels x 20 pixels high). In Fireworks, draw a vector box that is exactly 770 pixels wide and as tall as your document (20px). Center the box in your page (25 pixels on each side to edge of window). Select the box (make it white), apply a "glow" filter to the box using grey, use 10-15px blur (you can adjust the darkness to your liking). Now export the entire image as a jpg or 24 bit png out of Fireworks (gif will cause banding in the shadow). Go into your page CSS and select the "BODY" tag. Add the image you just exported as a vertically repeating image. You will now have a drop shadow look from the top to bottom of your page.

There are many other ways to do it, such as nested divs, but this is the most basic.

Thanks Ryan. That is simple. I swear I looked the Internet over for a simple explanation like yours.

Thanks again.