Dreamweaver Article

Working with Background Images and CSS – Part 3: Altering the Appearance of Your Pages with Drop Shadows

Creating the Design in Fireworks 8

I start all my work in Fireworks, no matter what the job entails or how big or small the job is. My first step is always to open Fireworks and create a blank canvas. I would love to be able to say I'm a gifted graphic designer, but alas, I'm not. Fortunately Fireworks provides a good test bed for my ideas. It makes it easy and quick for me to produce layouts, and it gives me a visual feel for the ideas that I have.

Note: If you haven't defined a site in Dreamweaver yet, do so now. If you need help defining a site, see "How to Define a Site in Dreamweaver" (TechNote 14028).

In this tutorial, you will create a fixed-width design of 770 pixels so that your 800 x 600 resolution users can expand their browsers and view the design without horizontal scrollbars. Users with a higher resolution will see your body background image positioned evenly to the left and right of the main content area. I find this is a good way to set up pages that are pleasing to the eye on a wide range of systems.

I tend not to support resolutions below 800 x 600, and I don't support Netscape 4.x and lower. The techniques in this tutorial will work in all modern browsers. When I say modern browsers, I am referring to browsers that are 5th generation and later. So anything through from Internet Explorer 5.x to the latest Firefox release will be fine.

I'm sure you have seen many pages on the Internet that have used a drop shadow on the content area; it seems to be very much in vogue at the moment. That said, the technique produces a nice effect and it is not very hard to create the images and implement them in your design through CSS. Without further delay, open Fireworks and create a blank canvas by completing the following steps.

Note: To keep things organized, I like to create a special folder for my PNG files within my local site definition. I create this folder in the local site root and call it pngs. I also FTP them to a secure location on my remote server, thus ensuring I always have a backup of my Fireworks graphics.

1. Select File > New or press Ctrl+N to open the New Document dialog box.
2. In the Width text box type 770.
3. In the Height text box type 530.
4. Ensure Pixels is selected as the units in both cases.
5. In the Resolution text box type 72, and ensure the selected setting is Pixels/Inch (see Figure 1).
6. Select the Canvas color option that indicates white.
7. Click the OK button. Your new blank canvas opens in Fireworks.
8. Save the file with a name of drawing.

Figure 1.The settings for your blank canvas

A Little Bit of Design Work

Next you build your design on the canvas. To do this you use the Rectangle tool and a couple of Fireworks effects. The following Captivate demo and steps demonstrate how to accomplish this task:

• View the movie: Creating the drop shadow image

Follow these steps:

1. Select the rectangle tool.
2. Give the fill color a value of #cfdbe9.
3. Draw out your rectangle.
4. Set the x and y values to 0.
5. From the textures list box, select line-diag 1.
6. Set the value to 100.
7. Deselect the rectangle you have just drawn.
8. Select the fill color and set it to white, #ffffff.
9. Draw your second rectangle so it fills the height of the canvas.
10. Give it a width of 720.
11. Give it an x value of 25.
12. Keep this rectangle selected.
13. Click the Effects Plus (+) button in the Property inspector.
14. Select the Shadow and Glow option.
15. Select Glow from the menu.
16. Set the fill color to #666666.
17. Set the Halo Offset to 3.
18. Set the Softness to 19.
19. Press Enter.
20. Open the Layers panel (press F2).
21. Double-click the white rectangle in the Layers panel.
22. Name it base_page.
23. Press Enter.
24. Double-click the text next to the blue rectangle in the Layers panel and rename it background.
25. Press Enter.
26. Save your work.

Page 2 of 4

Previous Page

Next Page