Multiple Layers Webpage with GoLive

CATEGORIES: GoLive, Tutorials | Chris Converse | July 07, 2006

Show/Hide Layers

In a typical website, clicking links in the main navigation takes you to different HTML pages. It’s possible to make the user experience a little more dynamic by having only a portion of the page update when clicking a link. This way, the entire page doesn’t have to refresh in order to change the content. This tutorial will show how to set up multiple layers in your webpage and turn on and off the visibility to create a more dynamic viewing experience for visitors.

Note: Due to changes in Microsoft’s Internet Explorer Web browser, you may get a security warning that the page’s content is restricted. You must Allow Blocked Content before you can interact with this dynamic page. In addition to JavaScript (used in this tutorial), this security change also affects Flash, QuickTime, RealPlayer, and other third-party (plug-in dependent) technologies embedded in webpages. Learn more at Adobe’s Content Development Center (www.adobe.com/devnet/activecontent).

STEP 1 Download Assets
To follow along, download the assets for this tutorial from the Layers website at www.layersmagazine.com/magazine/downloads. To preview the final desired result, open the file named “working.html” in your Web browser.

For the adventurous, you can combine this tutorial with the “Animating Layers” tutorial, and create animated dynamic content for your viewers. Click here to view additional GoLive tutorials.

STEP 2 Drag Out a Layer Object; Select the Layer
Open the site file Show_Hide_Layers.site and double-click the index.html file in the Site window to open it. We’re going to start by creating a layer using GoLive’s Layer object and dragging it into the page. It doesn’t really matter where you drop the object right now, so we’ll drop it in the center of the content area. Select the layer and open the Inspector palette. You’ll see the default values assigned to the new layer.

STEP 3 Set the Layer Properties
In the Inspector palette, set Name to “welcome,” the Width to 450 pixels, and the Height to 200 pixels. Open the content.html file and copy (Command-C [PC: Control-C]) the Welcome headline and text from this file to the clipboard.

Note: We styled this copy in the “Conquering Cascading Style Sheets, Part 1” tutorial available online at www.layersmagazine.com/design/go-index.php.

STEP 4 Set the Content for the Layer
Click inside the “welcome” layer of the index.html file with the Standard Editing tool, and then press Command-V (PC: Control-V) to paste the copied headline and text. You may notice the layer is a slight bit lower and to the right than we want. Let’s bring up the Inspector palette.

STEP 5 Position the Layer with Precision
Select the “welcome” layer with the Object Selection tool, and then in the Inspector palette tweak the absolute positioning of the layer. Set the Top value to 212 pixels and the Left to 175 pixels. This will place the layer at a position that aligns with our page design.

STEP 6 Set Paragraph Format to None
Select a few characters of the Welcome headline with the Standard Editing tool and choose None from the Set Paragraph Format drop-down menu in the Options palette (or choose Type>Paragraph Format>None from the main menu). This will remove the default

tags around the heading and make the text flush to the top of the layer.

STEP 7 Make Another Layer
Drag another layer from the Objects palette into the page. (Note: Don’t drop your new layer directly on top of the “welcome” layer.) You’ll see another small yellow box appear near the first one (this represents where the code exists in the page instead of the position of its content defined by CSS settings in the Inspector palette). Select the new layer, open the Inspector palette, name the layer “about,” and enter the same positioning settings as the “welcome” layer.

STEP 8 Open the Layers Palette
Now, in the Inspector palette, click the Layer Palette button. The Layers palette works as expected, allowing you to display or hide layers. Let’s hide the “welcome” layer (click its Eye icon in the Layers palette so it disappears) so we can work with the “about” layer.

STEP 9 Copy-and-Paste Content; Make More Layers
Paste in some content as we did in Step 3. Don’t forget to change the Set Paragraph Format pop-up menu to None, as we did in Step 6. Repeat this process to create a “products” and “services” layer.

STEP 10 Show the Main Page; Hide the Rest
Now that we have all of our layers created, we need to set the “initial state” of the page. We want the “welcome” layer to be what viewers see when they first visit the site, and we want the other layers to be hidden. Select each layer in the Layers palette and turn off the Visible checkbox in the Inspector palette. Do this for all the layers except the “welcome” layer.

Note: If the Visible option is grayed out, switch to Source mode then back to Layout view; this forces GoLive to update the interface options based on the new underlying code.

STEP 11 Create Mouse Click Action
Once only the “welcome” layer is showing, select some text in the About Us navigation link and open the Actions palette (Window>Actions). (Tip: You don’t have to select all letters in the link.) Now select the Mouse Click option on the left, then click the Create New Action icon under the Actions panel.

STEP 12 Assign an Action
From the Action pull-down menu, select Multimedia>ShowHide.

Note: This ShowHide differs from the Layers palette in that this controls the visibility instructions given to the Web browser. The Layers palette is for you to show/hide layers while authoring the page.

STEP 13 Set the Instructions
You’ll now see two pull-down menus: one for the Layer and one for the Mode of that layer. Set the Layer to “welcome” and the Mode to Hide. Add another action to the same About Us navigation link (you can copy-and-paste the previous one). Select “about” from the Layer pull-down menu, then set the Mode to Show. Set two more actions: one hiding the “products” layer and the other hiding the “services” layer.

STEP 14 Test the Experience
Repeat Steps 11, 12, and 13 for the Products and Services links in the left nav. Make sure the Product link shows the “products” layer and hides the other three, and so on. Preview the experience in the browser. When opening, each layer will hide itself (set in the Inspector palette) and only the “welcome” layer will be visible. Then, each link will show its corresponding layer and hide the others when clicked (via the Mouse Click action).

Share This

No Comments »

No comments yet.

Leave us a comment

Featured Partner

From our Partners