As a writer and a trainer, I am frequently asked how to make the popular curved navigation graphic. You know the one, top banner area, side bar with an inside curve (see Figure 1). Using Fireworks you'll be amazed at how simple this can be. You'll learn how to make the curve in two different ways. One way is automated and the other is not. By learning how to do it yourself, you'll learn a technique that will allow you to make any shape, not just the inverted L.
Once you learn how to make the graphic, then what? What do you do with it? Export it from Fireworks and use it as a Web page? You could, but please don't even think of doing that. Although Fireworks can generate HTML code, it is not what Fireworks does best. Fireworks is a graphics editor, so let's use it to its full potential. Once you learn how to slice, optimize, and export the graphic, you'll then learn how to put it together in Dreamweaver.
Curved Navigation Graphic
1. Choose File>New. In the New in Document dialog box, type 700 in to the width field. In the Height field, type in 400. For the Canvas Color, click on the radio button next to White to select it. Click OK.
2. In the Tools panel select the Rectangle tool. Click on the canvas and drag on the rectangle tool to draw a rectangle, don't worry about the size.
3. In the Property inspector (below the canvas area), change the width to 700 and the height to120. Click in the Fill color box (which has a paint bucket) and use the dropper tool to select the color you'd like. You can even select a color from a graphic on your page which is a great way to get colors that are complementary to your design images.
4. Draw another rectangle and in the Property inspector, change its Width to 120 and Height to 400. I'm using green so you can better see what I'm doing.
5. Place the rectangles together to form an upside down L shape (see Figure 2).
Note: I am using two different colors so you can identify the objects more easily.
6. Shift+select both rectangles.
7. Choose Modify>Combine Paths>Union. The shape is now one shape instead of two (see Figure 3).
Note: The shape on the bottom will become the color of the new combined shape.
You've just learned how you can combine any shapes together using the Union command. With this technique you are not limited to the same size for the top and the side. You are also not limited to rectangles. The easy way to make a basic L shape with sides and top of the same thickness is to use a Smart Shape.
Smart Shape
As an alternative, you can make the basic L shape using one of the smart shapes that ships with Fireworks.
Note: In the flyout menu of the Rectangle tool, you'll see the L-Shape tool. Select it and drag it onto your canvas. Notice the yellow diamonds. If you drag on the one on the top end or the bottom center, it will make the side or top longer. To increase the width of the top and side, drag on the yellow diamond on the bottom right side of the left bar.
You can use either method of producing your navigation shape before proceeding to the next step.
Cookie Cutter
1. Select the Rectangle tool and drag a rectangle on the canvas.
2. In the Property inspector locate Roundness and type in or select a setting of 50. Set the Width to 650 and the Height to 400.
Note: I made my rounded rectangle gold so you could see it more easily; any color will work and will have no effect at all on your graphic. This graphic will be used as a cookie cutter.
3. Position the rounded rectangle into the corner of the L shape. Place it so that what you see beyond the rounded rectangle is what you want. Whatever is below this "cookie cutter" will be removed (see Figure 4).
Note: Be sure that the curve of the rounded rectangle clears the end of the top of the shape and the bottom of the side shape. Otherwise you won't get a nice straight edge. If it doesn't, make your rounded rectangle larger.
4. Shift+select the L shape and the rounded rectangle; it doesn't matter which object you select first.
5. Choose Modify>Combine Paths>Punch. You now have an L shape with a curved inside corner (see Figure 5).
6. In the Property inspector, click the plus sign next to the word Effects and select Shadow and Glow>Drop Shadow. Change the Distance to 10 and the Opacity to 50%.
7. Press Enter (Return) to activate the change.
8. Save your file. You are now ready to slice, optimize, and export the graphic for use in a Web page.
Slice, Optimize, and Export
1. Select the Slice tool and draw a slice over the top left corner. Be sure you get the entire curve (see Figure 6). You'll see a light green overlay.
Note: In the Layers panel there is a layer called Web Layer. You can see any of your slices here. This is a permanent layer and can't be removed.
2. Using the Slice tool, draw another thin slice for the top bar, making sure you get all of the shadow. Draw another thin slice across the side bar as seen in Figure 6.
3. Select the large corner slice and click the Preview tab (see Figure 7).
4. Open the Optimize panel and use these settings: Export File Format: GIF; the Index Palette: Adaptive; Colors: 16 and No Transparency (see Figure 8).
Note: For a more in-depth explanation of optimization, see my article in the October issue (MXDJ, Vol 2, issue 10).
You are using the GIF format because the image has a lot of flat color. JPEG is best for photos, GIF is best for flat colors. You don't need any transparency for this image. If you did need transparency then GIF wouldn't be the best option because of the drop shadow.
5. In the Property inspector, highlight the default slice name and rename it something useful (see Figure 9).
6. Select the top thin slice and change the optimization to 16 colors; give the slice a name as you did in step 5.
7. Repeat steps 3–5 for the side slice.
8. Shift+select all three slices (see Figure 10).
9. Right-click (Control-click) on the slice and select "Export Selected Slice." Navigate to the folder you want to export your images into. It should be a folder within your root folder for the site you are building. Don't worry about the name of the file, it won't affect the slice names you gave the slices. Notice that the Selected Slices Only option is checked.
Note: You can also access the Export dialog by choosing File>Export. I prefer the right-click method to export specific slices because the "Selected Slices Only" dialog is prechecked. Otherwise it isn't and I often forget to check it and end up with a ton of other images I didn't want. Any part of your document that isn't sliced will be exported anyway (as defined by the red lines you see after adding a slice) if you don't select "Selected Slices Only."
10. Click Save to save your file.
You are now ready to use these three images to make a stretchy or fluid table in Dreamweaver.
Stretchy Table Design
A stretchy table design allows your graphic to expand with a browse but it's not actually an image that is expanding. I get letters all the time asking me how to stretch a banner image to fit the browser window. The answer is, you don't. What stretches is either a tiled background image or a background color. Let's get started with adding your graphics to a Dreamweaver layout.
1. Open Dreamweaver and define a site for your new design. If you need help doing this then select Help>Using Dreamweaver, click on Search, and type in "Defining a local folder."
2. In the Insert panel, the Common area, click the Insert Table Icon. You can also access this by selecting Insert>Table (see Figure 11).
3. In the Table dialog box enter 2 Rows, 2 Columns, and a Table Width of 100%. Be sure to type zeros into the Cell Padding and Cell Spacing fields. Blank does not mean zero (see Figure 12).
4. Click inside the first cell on the left side of the top row.
5. In the Common panel, click the Insert Image icon (Insert>Image) and navigate to where you have the images you've saved (see Figure 13).
6. Select the Lft_banner.gif and click Open. Notice the width of the image; it's 164 pixels wide. You can see the width in the Property inspector.
7. Press the right arrow key on your keyboard to place the cursor in the cell, and off the image.
9. In the Property inspector change the Width (W) to 164 and press Enter (Return). This sets the width of the cell not the image. In this case the cell will be the same size as the image. Also click on the Vert drop down and select Top (see Figure 14).
Notice, however that the column (dotted lines) has collapsed against the image. This cell is now a fixed width, it won't get any larger. But if you add an image in the cell below it that is larger than 164, the colmun will stretch to fit the content no matter what size you set it to be. If you place a larger image in another cell below the image then you will get a gap in the top row. It's important to note that the Width setting does not force the cell to remain at that size.
10. Click inside the right top cell and in the Property inspector, in the width field (W) type in 100% (use the percent sign). This cell will stretch to fill up 100% of the available space. As the browser window expands or contracts, so will this column.(see Figure 15).
Note: If you had a third column you could set it to a fixed width; the center would still expand to fill the browser window.
11. Open the CSS Styles panel in the Design panel group. Select the + sign at the bottom of the panel (New CSS Style).
12. Select a Selector Type of "Class." Type .topbanner for the name. Click on "This Document Only". Click OK (see Figure 16).
13. Select the Background category to open it's options. Click in the Background Color well. Click the little right pointing arrow and be sure that Snap to Web Save is not checked, then sample the peach color from the document (see Figure 17).
14. Click the Browse button and navigate to the folder you have your images in and select Top_banner.gif (see Figure 18).
15. Choose repeat-x for the Repeat field and click on OK.
16. Place your cursor in the 100% cell. In the Tag Selector (bottom of your document) the <td> tag should be hightlighted. Right-click and select Set Class and click on the topbanner name to apply the style. Another way to set the style is to click on the <td> tag and in the Property inspector there is a Style drop down menu. Click it and select the desired style.
17. Place your cursor in the left cell of the second row.
18. Add another new style but this time name it .sideback. Use the Lft_side.gif file as the background image and set the repeat to repeat-y. (repeat steps 11–15).
19. Apply the style as you did in step 16.
20. The background images in the top right cell and the left cell of the second row now contain only background images. This is not considered content. You can type text and/or add images to each area. If you add nothing to either area, you'll need to add a small spacer image so that Netscape 4 browsers can see the background color.
21. You can now add a header or banner image if you'd like. Remember, the image won't stretch but the background color will fill the available space, so be sure it compliments your image. You can align a graphic in the cell to the right, left, or center by selecting each option from the Horz drop down menu in the Property inspector.
22. Save your file and preview it in a browser (F12). Make the browser window smaller and larger and see how your design expands.
Note: When you know your design needs to fill a browser window, then design an area that can stretch and still look good. A good example of this is at www.primefocus.com. The header on this page has a texture over the graphic. It's almost impossible to match an uneven texture to an image if the browser expands. The texture would have to tile. Click on any of the site's links to go to an inside page. The solution is to remove the texture, add a gray background, and feather the left edge of the graphic to fade into the background and align the image to the right. This way when the browser expands, the image always remains to the right.
