Now that we have our first page done. Let's create a second page, which will be the introduction of our image gallery. We'll be using some of the tools we used for our first page plus some new ones. Let's start by setting up our page.

Setup

1. Open a new web page. File > New > Web Page
2. Set the properties as follows:

Title: My Gallery. Generate Background: checked Color: checked, set to #66B3FF Page Size:standard (755 x 550)

3. Click on the Details button and then the Image File tab.
4. Uncheck "Copy Linked Files To Subfolder"
5. Click OK twice.
6. From the Web menu, choose Link Object > File
7. Browse to the "images" folder in your My Site folder
8. Choose mysite_1.jpg and click Open.
9. On the Pick tools attribute bar, align the file up and horizontal.
10. Repeat steps 6 and 7
11. Choose mysite_27.jpg and click Open.
12. Align this file to bottom and horizontal.
13. Save this page as a .ufo file to the My Site Files folder you created earlier and name it gallery.

Creating A Menu

1. Open the Component Designer
2. Browse to the Banners > Realistic, and choose the filmstrip (fourth down, first column). If you don't have this in your Component Designer, use the filmstrip.ufo that came with the Zip file. It should be in the My Site Files folder. Skip to step 6.
3. Click on Title and change the text to My Image Gallery, leave settings the same
4. Click on Banner and change the size to 65%. You can either type in the size or use the slider bar.
5. Export as Individual Objects.
6. With the new banner image active (or the one from the zip file), select all objects and group.
7. Copy the group and paste into your page.
8. Select the Path tool > Shape and draw a rounded rectangle: width= 100, height= 200, color= black
9. Select the edit icon and reshape the rectangle as shown below. Don't worry about it being perfectly straight as the top end will be hidden.

10. Move the rectangle to the bottom layer and position it and the filmstrip as show below.

11. Select the filmstrip and the rectangle and merge as a single object.
12. Create a bottom right drop shadow on the object: Y= 2, X= 2, color= black. Leave other settings as is. Your image should look like the one below.

The next thing we need to do for this page is create a placeholder image that we will need to set up our slicing layout later. This will be a simple square which will be placed on the page and will represent where the effect for this page will take place.

1. Using the Shape tool, draw a square and size it to width: 214, height: 214.
2. Change the color to #66B3FF.
3. Position the sqaure to the center right side of our page.

Save your project in .ufo format. Now to add some text to this page.

Adding Text to Our Page

---