Our page is almost finished! It looks a bit basic right now, so let's add a little color and splash to make it visibly appealing.

Step 1: Bottom Border

1. Open the Easy Pallet
2. Browse to the Shape Library > Symbols
3. Select Horizontal Lines and drag it onto your page.
4. Choose the transform tool and in the attribute bar, change the width to 755 and the height to 30
5. Choose the pick tool and using the align icons on the attribute bar, align your object vertically and bottom.
6. Choose the Path tool > Shape, and change the color of the object to a dark blue. I used the hex # 002CAA5 in the Ulead color picker.
7. With the path tool still active, add a shadow to your object using the following settings:

color: #002CAA5 type: border (fifth icon) transparency: 50 % size: 100 % soft edge: 10

8. Deselect the all objects.

Step 2: Adding a Top Border

9. Keeping the path tool active, draw a rectangle.
10. The color should still be the same that we used with the horizontal line object. If not, change it now.
11. On the attribute bar, change the size to width: 755, height: 10
12. You should have a blue shadow on this object so leave it as is.
13. Choose the pick tool and select both the new object and your banner.
14. On the Object menu, choose Align > Center Both
15. With both objects still selected, right click and choose Group.
16. Align this group (on the attribute bar) to center vertically and top.

Step 3: Background

1. From the Web menu, choose Web Properties.
2. On the Background tab, click in the color box and enter #66B3FF in the hex box.
3. Click OK twice.

Step 4: Layout

The last step is to layout our elements. If any of our elements overlap each other, PI will not be able to slice the page properly and you will get an error message when saving your page as HTML. There is a great tool we can use here which will outline each element so we can visually see if our objects are overlapping.

1. From the View menu, choose "Show box around objects"
2. With the pick tool, select all four buttons.
3. From the Object menu choose Align > Space Evenly
4. In the dialog box that pops up, click on Vertically
5. Click the Test button to see the results.
6. Click OK
7. With the buttons still selected, right click and group.
8. On the attribute bar, click the "to left" icon.
9. Select your linked image and nudge it over a few pixels (use your left / right arrow keys) so that the box does not overlap with the text box.
10. Hold down the shift key and select the text box so both the text and image are selected.
11. Right click and group.
12. Click on the "Align vertically" icon on the attribute bar
13. Use your arrow key to nudge the grouped objects to the right.

Your page should look similar to the one below, with the boxes around each object.

Creation and Design: Saving Our Page

---