Building the header and footer

Now that you have the big pictures, you can add details to each band. You'll begin with the Blimey header, which is made up of a horizontal navigation bar and a search field.

Create the header navigation bar

The navigation bar is the object on the left side of the header.

1. In the Layers panel, unlock and select the header layer.
2. Click the New/Duplicate Layer icon.
3. A new layer appears above the header layer.

4. Rename it navigation elements.

   Note: Be sure to lock the header layer again so that you don't accidentally modify it.

5. Make sure the new layer is selected and draw another rectangle on the canvas.
6. Name this object home btn (see Figure 11).
7. Set the width to 92 and the height to 21.
8. Position it at X: 110 and Y: 17.

9. Select Solid for the fill and choose #FFFFFF as the color.

   

   Figure 11. The home button settings

10. Select Edit > Clone.
11. Set the clone's X coordinate to 210.
12. Name the new object archive btn.
13. Select Edit > Clone again.
14. Set the clone's X coordinate to 310.
15. Name the new object author btn.
16. Select Edit > Clone again.

17. Set the clone's X coordinate to 410.

    Tip: Rather than cloning and repositioning objects, you can create a Fireworks Symbol to add into the Library. You can then insert the symbol wherever you need it. To learn more about Symbols and Rich Symbols, refer to the Fireworks Help files.

18. Name the new object contact btn.
19. Select the Type tool.

20. In the Property inspector, set the following attributes (see Figure 12):

    • Font: Arial
    • Size: 10
    • Color #333333
    • Alignment: centered

    

    Figure 12. Type settings for the navigation button text

21. Using these type settings, create text in all caps for each button (see Figure 13):

    • HOME at X: 139 and Y: 21
    • ARCHIVES at X: 228
    • AUTHOR at X: 332
    • CONTACT at X: 426

Figure 13. The horizontal navigation bar

The navigation elements layer is now complete. Close it by clicking the arrow to the left of its name, and then lock the entire layer.

Create the header search field

You'll need another layer above the header layer to hold the header search objects:

1. Unlock and select the header layer.
2. Click the New/Duplicate Layer icon. A new layer appears above the header layer.

3. Rename the new layer search field elements.

   Note: Be sure to lock the header layer again so that you don't accidentally modify it.

4. Make sure the new layer is selected and draw another rectangle on the canvas.
5. Name this object search box (see Figure 14).
6. Set the width to 159 and the height to 18.
7. Position it at X: 707 and Y: 17.
8. Select Solid for the fill and choose #FFFFFF as the color.

Figure 14. Search box settings in the Property inspector

Add the Go text

To add the Go text, follow these steps:

1. Select the Type tool.

2. In the Property inspector, set the following attributes:

   • Font: Arial
   • Size: 11
   • Color: #FFFFFF
   • Alignment: left
   • Type the word Go.

3. Set the following attributes in the Property inspector:

   • X: 871
   • Y: 18

Figure 15. Go text settings in the Property inspector

Import the search icon

At his own horizontal band site, Gordon Mackay offers several free Fireworks PNGs, including form buttons. This tutorial uses another of Gordon's icons, a search magnifying glass, that is included with this tutorial's sample files. Import this icon to your canvas.

1. Select File > Import.
2. Navigate to the support_files folder.
3. Locate search_icon.png.
4. Click Open.
5. Move the loaded graphics cursor to the left of the search field and click.
6. Position the icon at X: 679 and Y: 16.
7. Name the object search icon in the Layers panel.
8. Close and lock this layer.

Figure 16. The completed search field

Now that the header is done, you can import the masthead logo.

Import the masthead logo

To import the masthead logo follow these steps:

1. Unlock the masthead layer.
2. Select File > Import.
3. Navigate to the support_files folder.
4. Locate blimey_logo.png.
5. Click Open.
6. Move the loaded graphics cursor within the gradient masthead band and click.
7. Position the logo at X: 110 and Y: 55.
8. Name the object Logo in the Layers panel.
9. Close and lock this layer.

Figure 17. The masthead logo

The next step is to create the "big foot."

Create the footer columns

To create the footer columns, follow these steps:

1. Unlock and select the footer layer.
2. Select the Rectangle tool.
3. Draw a rectangle within the footer background.

4. Set its attributes in the Property inspector (see Figure 18):

   • Width: 260
   • Height: 200
   • X: 110
   • Y: 570
   • Fill: solid #191919
   • Stroke: #B5B5B5

   

   Figure 18. The settings for the footer column

5. Clone the rectangle, changing its X coordinate to 369.
6. Clone the rectangle again, changing the X coordinate to 628.
7. Select the three rectangles.
8. Select Modify > Group.
9. Name the object footer columns.

Figure 19 shows how your composite should look at this point.

Figure 19. The layout including three footer columns

Create the content region

In Dreamweaver, you will add two new Spry widgets—the Accordion and Tabbed Panels—in the content region of the layout.

Note: A Spry widget is a page element that combines HTML, CSS, and JavaScript data to enable user interaction. The Spry framework for Ajax supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. For more information on Spry, go to Adobe Labs.

Page 3 of 8

Previous Page

Next Page