Prototyping and Building a Website (Adobe Creative Suite 5) Part 4

Previewing web pages in a web browser

1 In the Pages panel, select the page Home. Notice the hotspot areas overlaid over the navigation bar menu buttons. To hide or show hotspots and slice areas while working on your page layout, press 2 on your keyboard or click the Hide Slices And Hotspots button or the Show Slices And Hotspots button in the Tools panel.

A.    Hide Slices and Hotspots button

B.    Show Slices and Hotspots button

2 To test the functionality of your hotspots, choose File > Preview In Browser > Preview All Pages In [Web Browser Name].

Tip: You can set up both a primary and a secondary web browser to be accessible from the Preview In Browser menu by choosing File > Preview In Browser > Set Primary Browser and File > Preview In Browser >

Set Secondary Browser.

3 In your web browser, move your pointer over the menu buttons. Notice how the pointer changes to the Hand cursor when it’s over a hotspot area. Click a menu button to jump to that page.

4  You can see which page you’re on by the position of the gradient overlay over the menu buttons and by the filename in the address bar.

5 If your links don’t work as expected, close the browser window, switch back to Fireworks, and verify that the correct links are specified for the hotspot areas on the master page. Correct any errors, save your changes, and again preview all pages in your web browser.

6 When you’ve finished testing your navigation bar, close the web browser window and return to Fireworks.

You’ve completed the mock-up design of the Home page and the navigation bar.

Next, you’ll work on the Actors page, creating slices and disjoint rollover behaviors.

Sharing layers to pages

You can share a layer across multiple pages in a document. You’ll share the background image from the Home page to the Actors page. Unlike elements on a master page, elements on a shared layer can be modified from any page.

1 In the Pages panel, select the page Home.

2 In the Layers panel, select the folder Background. From the Layers panel

Options menu, choose Share Layer To Pages. In the Share Layer To Pages dialog box, select the page Actors in the left column (Exclude Layer From Page(s)), and then click Add to add it to the right column (Include Layer To Page(s)).

3 Click OK to close the Share Layer To Pages dialog box.

4  Switch to the page Actors and in the Layers panel move the shared Background folder to the bottom of the layer list.

Detaching shared layers

The logo from the Home page should also be placed on the Actors page but should be scaled down slightly to make more room for other items. To do this, you’ll first share the folder Logo to the page Actors, and then disable the sharing of this layer, allowing you to modify the object on each page individually.

1 In the Pages panel, select the page Home.

2 In the Layers panel, select the folder Logo. From the Layers panel Options menu, choose Share Layer To Pages. In the Share Layer To Pages dialog box, select the page Actors in the left column and click Add to add it to the right column.

3 Click OK to close the Share Layer To Pages dialog box.

4 Switch to the page Actors and in the Layers panel drag the shared folder Logo between the folders Master Page Layer and Background.

5 With the shared folder Logo selected in the Layers panel, choose Detach Shared Layer from the panel Options menu.

6 Click the Pointer tool in the Tools panel and select the logo artwork on the page Actors. Position the pointer over the lower-right bounding box handle. When the pointer icon changes from filled (1¾) to hollow (¾), drag the handle upwards and to the left to reduce the size of the logo image. While dragging, hold down the Shift key to scale the artwork proportionally. Release the mouse button when the width (W) reads 380 in the Properties panel, and then release the Shift key.

7 Switch to the home page to confirm that the logo placed there didn’t change in size, and then switch back to the Actors page.

Creating disjoint rollover behaviors

In the lower-left corner of the Actors page you’ll place thumbnail images of the main actors. Moving the pointer over one of the thumbnail images should bring up some text and a large image of the actor in the space to the right of the thumbnails.

This is called a disjoint rollover behavior.

Placing the elements

1    In the Layers panel, select the folder Background. Choose New Layer from the panel Options menu. In the New Layer dialog box, type Actors Thumbnails in the Name text box, and then click OK.

2   Choose File > Import. In the Import dialog box, navigate to your Lesson05 folder, select the file Cast_Thumbnails.psd, and then click Open.

3    In the Photoshop File Import Options dialog box, leave the default settings and make sure Maintain Layer Editability Over Appearance is selected in the menu below the Comments field.

4   Your cursor changes to a graphics placement cursor (Γ). Click near the left edge of the background image to place the thumbnail images. Drag to reposition the thumbnail images as shown in the following illustration. We set a top-left position of X: l00 and Y: 444 for the group of images.

5 Select New Layer from the Layers panel Options menu. In the New Layer dialog box, type Actors Large Images in the Name text box, and then click OK.

6 Choose File > Import. In the Import dialog box, select the Photoshop file Cast_Large.psd, and then click Open. In the Photoshop File Import Options dialog box, choose Last Document State from the Layer Comp menu, choose Maintain Layer Editability Over Appearance from the menu below, activate the option Include Background Layer, disable the option Import Into New Layer, and then click OK. Your cursor changes to a graphics placement cursor (Γ).

7 Click near the center of the background image to place the large images. Drag, use the arrow keys, or enter X and Y values directly in the Properties panel to reposition the large images. We set a top left position of X: 550 and Y: 400 for the group of images.

8 Select New Layer from the panel Options menu. In the New Layer dialog box, type Actors Names in the Name text box, and then click OK.

9 Choose File > Import. In the Import dialog box, select the file Cast_Names.psd, and then click Open. In the Photoshop File Import Options dialog box, choose Last Document State from the Layer Comp menu, choose Maintain Layer Editability Over Appearance from the menu below, activate the option Include Background Layer, disable the option Import Into New Layer, and then click OK. Your cursor changes to a graphics placement cursor (Γ).

10 Place the name graphics between the thumbnails images and the large images. We set a top-left position of X: 340 and Y: 420 for the group of images. Your page should now look like the following illustration.

11 Save your work.

Using dummy text

For the purpose of a website mock-up you’ll normally use dummy text to show how text will look on the page.

1    Select New Layer from the Layers panel Options menu. In the New Layer dialog box, type Actors Text as the folder name, and then click OK.

2    Choose Commands > Text > Lorem ipsum. A text frame filled with dummy text appears on the page. With the text frame still selected, make sure the text color is white using the color picker for Fill Color in the Tools panel or the Properties panel.

3   To reposition the text box, enter the following values in the Properties panel: X: 340 and Y: 520.

4    Position your pointer over the lower-right bounding box handle. When the pointer changes from filled (\) to hollow (¾), drag the handle downwards and to the left. Release the pointer when the width (W) reads 206 and the height (H) reads l92 in the Properties panel.

Tip: You can format and style the dummy text using the controls in the Properties panel.