Outputting Multiple Linked Web Pages

Take advantage of a hidden output feature in ImageReady that allows you to generate multiple page layouts that are automatically linked together, complete with rollovers, and ready to put on line.

1.	Open a Layered File in ImageReady Buried deep in ImageReady's Output Settings is a little-known checkbox labeled Output Multiple HTML Files. This feature works in conjunction with the Selected rollover state to create multiple linked files with rollover navigation. In this project you'll use these features to make four pages for a Web site in a single file. Each page has rollover buttons programmed with the Selected state and remote rollovers that change the content of the page. If you want to learn more about making remote rollovers, review Pointers and Remote Rollovers in previous tutorial. If you're eager to see what we have in store for you here, dig right in. TIP Automatic Palette Arrangement. ImageReady comes with some default palette arrangements. A quick way to open and arrange the palettes you'll use when you're making rollovers is to choose Window>Workspace>Inter-activity Palette Locations. This opens the Web Content palette, the Layers palette, and the Slice palette all neatly arranged on your screen. We made this file in Photoshop, including lots of layers with the artwork for four Web pages. Open the file in ImageReady. Choose View>Show>Layer Edges if you want to turn off the distracting blue box that identifies the boundaries of a selected layer's contents.
2.	Change the Slice-Naming Default You'll be using lots of slices in this project, so take a minute to make the automatic slice names shorter and more meaningful. Choose File>Output Settings>Slices. In the Default Slice Naming area of the Output Settings dialog box A, click the arrow on the first menu and choose layer name or slice no. Click the arrow on the second menu and choose none. Click the arrow on the third menu and choose none. Click OK. TIP Custom Slice Naming. If you change ImageReady's slice naming convention, you can save your changes for future use by clicking the Save button in the Output Settings dialog box and giving your custom setup a name. That name will appear in the Preset menu at the top of the dialog box the next time you choose File>Output Settings>Slices. Slice the Markers First, you'll slice the navigation markers that will tell your audience which page they're viewing. In the Layers palette, click the arrow to the left of the Markers layer set to open that layer set. Click in the Visibility field of each of the layers in the set A to make all the markers visible in the document window. Select all the marker layers by clicking on the JourneyMarker layer, holding down the Shift key, and clicking on the TreasureMarker layer B. Now choose Layer>New Layer Based Slices from the menu bar at the top of the page. This makes a slice around each marker C. Slice the Page Text Now you'll add one big slice around the area that will contain different text on each page. This area must be sliced because it will be a target of the remote rollovers you'll be creating. In the Layers palette, click the arrow to the left of the Text layer set to open that layer set. Click in the Visibility field of each layer in that layer set A to make all the text layers visible, one on top of the other. Select the Slice tool in the toolbox and draw a slice that's big enough to encompass all of the text B. Slice the Text Links Now you'll add a slice and add a rollover state to each of the text links—all in one step. In the Layers palette, click the arrow to the left of the Links layer set to open that layer set. Click on the JourneyLink layer, hold down the Shift key, and click on the TreasureLink layer to select all the layers in the layer set A. Open the Web Content palette (Window>Web Content), and click on the Create Layer-Based Rollover icon at the bottom of the Web Content palette B. The Web Content palette now lists each of the text link slices with an Over state indented beneath it C. You'll change each of the Over states to a Selected state later in this project.     Set Up the Normal State Now that you've finished slicing, you'll set up the Normal state of the document—the way it will look when it first loads in a viewer's Web browser. In the Layers palette, click in the Visibility fields A, B of each of the following layers to turn off the Eye icons and make those layers invisible in the Normal state: LegendMarker ShipMarker TreasureMarker LegendText ShipText TreasureText
7.	Set Up the Selected States Now you'll change the Over state of each text link slice to a Selected state. Double-click on the Over state of the JourneyLink slice in the Web Content palette A. In the Rollover State Options dialog box that opens, choose Selected B. Then check Use as Default Selected State C, so that the journey link is in the Selected state when the site loads in a viewer's Web browser. INSIGHT Selected State. The Selected state of a rollover link is triggered by a click. It keeps the current image in view until the viewer clicks another link that's programmed with a Selected state. The Selected state is useful for rollover buttons, where it can be applied to keep one button differentiated from the others so a viewer knows which page he is on. Repeat this step on each of the other text link slices—the LegendLink slice, the ShipLink slice, and the TreasureLink slice—except that for these three slices be sure to uncheck Use as Default Selected State in the Rollover State Options dialog box.   Complete the Journey Page Each of the four pages in the site you're building will appear on the Selected state of one of the four text links. In the following steps you'll construct each page by changing its appearance on the Selected state of the corresponding text link. There are no changes to be made to the appearance of the journey page, which loads first into a viewer's browser. However, there is one small, but important technical change to be made to the Selected state of the JourneyLink slice. Click on the Selected state of the JourneyLink slice in the Web Content palette A. Then click on the spiral icon to the left of that Selected state B and drag to the slice around the remote text in the image C. Do this again, dragging to the slice around the journey marker in the image D. This step is necessary to make the remote changes work when a viewer is on another page in the site and clicks on the journey link. Create the Legend Page Now you'll change the appearance of the legend page. Click on the Selected state of the LegendLink slice in the Web Content palette A. In the Layers palette, click in the Visibility field of the JourneyMarker layer to turn off its Eye icon. Click in the Visibility field of the LegendMarker layer to add an Eye icon B. In addition, click in the Visibility field of the JourneyText layer to turn off its Eye icon and click in the Visibility field of the LegendText layer to add an Eye icon there C. Then, in the Web Content palette, click on the spiral icon to the left of the Selected state of the LegendLink slice and drag to the remote text slice in the image D. Do this again, dragging to the slice around the Legend marker in the image E. In the image, a marker appears to the left of the legend text link and text about the legend appears in the remote slice. Create the Ship Page Next you'll change the appearance of the ship page. Click on the Selected state of the ShipLink slice in the Web Content palette A. In the Layers palette, click in the Visibility field of the JourneyMarker layer to turn off its Eye icon and click in the Visibility field of the ShipMarker layer to add an Eye icon B. Then click in the Visibility field of the JourneyText layer to turn off its Eye icon and click in the Visibility field of the ShipText layer to add an Eye icon C. In the Web Content palette, click on the spiral icon to the left of the Selected state of the ShipLink slice and drag to the remote text slice in the image D. Repeat this, dragging to the slice around the ship marker in the image E. In the image, a marker appears to the left of the ship text link and text about the ship appears in the remote slice. Create the Treasure Page Now you'll change the appearance of the treasure page on the selected state of the TreasureLink slice. Click on the Selected state of the TreasureLink slice in the Web Content palette A. In the Layers palette, click in the Visibility field of the JourneyMarker layer to turn off its Eye icon and click in the Visibility field of the TreasureMarker layer to add an Eye icon B. Then click in the Visibility field of the JourneyText layer to turn off its Eye icon and click in the Visibility field of the TreasureText layer to add an Eye icon there C. In the Web Content palette, click on the spiral icon to the left of the Selected state of the TreasureLink slice and drag to the remote text slice in the image D. Do this again, dragging to the slice around the treasure marker E. In the document window, a marker appears to the left of the treasure text link and text about the treasure appears in the remote slice. You're now finished creating the pages. Click the Preview in Browser button in the toolbox and try out each text link in the browser. Save Multiple Linked Pages This is the secret to saving multiple pages with automatically created links. Choose File>Output Settings>Saving HTML Files. In the Output Settings dialog box, check Output Multiple HTML Files A and click OK. CAUTION File Structure. The links between the HTML pages ImageReady created depend on the relative location of the HTML files and image files. You can move all the files together (for example to upload them to a server), but don't move the individual files or put them into different folders or the links will break. We optimized the image for you. So just choose File>Save Optimized As. In the Save Optimized As dialog box B, set Format/Save As Type to HTML and Images, create a new folder, and click Save. Click OK at the file name warning. The output folder on your hard drive contains four HTML pages and a folder of images. You have a whole site of linked pages ready to upload to a Web server!

In this tutorial:

1. Automation
2. Batch Processing Photo Thumbnails
3. Making the Most of Actions
4. Making Multiple Web Graphics
5. Demystifying Droplets
6. Preparing Photos for Web with Conditional Actions
7. Design Multiple Pages in a Single File
8. Linking HTML Pages from Layer Comps
9. Outputting Multiple Linked Web Pages
10. Creating Dynamic Flash Web Banners
11. Creating and Importing External Data Sets