Inserting and Configuring Layers

Layers are inserted and formatted in FrontPage using the Layers task pane. There are other ways to insert a layer, but the Layers task pane is the most efficient way because it is also used to format and arrange layers. To insert a layer in to your Web page, simply select Format, Layers to display the Layers task pane seen in Figure 25.1. From the Layers task pane, you can click the Insert Layer button or the Draw Layer button to insert a new layer into the page. In addition to using the Layers task pane, you can also select Insert, Layer to insert a new layer.

Figure 25.1. The Layers task pane is where you insert and configure your layers.

graphics/25fig01.gif

graphics/troubleshooting_icon.jpg

If the controls inside of the Layers task pane are grayed out and unavailable, see "Layers Task Pane Is Disabled" in the "Troubleshooting" section of this chapter.


In addition to the Insert Layer and Draw Layer buttons, the Layers task pane is made up of three columns. The leftmost column, the Layer Visibility column, allows you to control whether a particular layer is visible and to see at a glance which layers are visible and which ones are not. The second column, the Layer Z-Index column, provides for a quick reference to the z-index for each layer. The rightmost column, the Layer ID column, displays the ID for each layer.

TIP

Choose the ID for each layer carefully and try to choose an ID that describes the layer's purpose. You will use the ID of the layer to refer to the layer in Behavior dialogs and if you are writing client-side code. By naming your layers with descriptive names such as mainContent and navButtons, you will be less likely to confuse them later.


Adding Content to a Layer

Let's begin creating the Web page you'll use throughout this chapter to learn about layers in FrontPage.

  1. Create a new blank page.

  2. Select Format, Layers to display the Layers task pane.

  3. Click the Draw Layer button and draw a layer the same width as your page and half the height of the page by clicking in the upper left corner of the page and dragging the mouse to draw the layer.

  4. Click inside the layer to place the insertion point in it.

  5. Select Insert, Interactive Button to insert an Interactive Button.

  6. Choose the Border Bottom 1 button.

  7. Enter Home for the text of the button and click OK.

  8. Continue this process by repeating steps 6 and 7 to create button for Products, Support, and Contact Us. Your page should look like the one shown in Figure 25.2.

    Figure 25.2. The page with one layer and Interactive Buttons to use for navigation.

    graphics/25fig02.gif

  9. Double-click the layer to display the Layers task pane if it's not already displayed.

  10. Right-click layer1 and select Modify ID to rename the layer.

  11. Change the layer name to mainMenu.

  12. Right-click on the mainMenu layer and select Modify Z-Index.

  13. Change the Z-index for the mainMenu layer to 3.

Resizing a Layer

The layer you have just inserted needs to be resized so that it is the same size as the four Interactive Buttons inside it. Change the width and height of the layer to match the height of the size of the Interactive Buttons. To do that, follow these steps:

  1. Move the mouse over the blue border on the layer until the mouse pointer changes to a four-way arrow.

  2. Single-click on the border to activate the sizing handles. The sizing handles appear as small blue squares at each corner and in the middle of each side of the layer.

  3. Move the mouse pointer over a sizing handle until the mouse pointer changes to a two-way arrow.

  4. Click and hold the left mouse button while you drag the sizing handle to change the width or height of the layer.

Resize the mainMenu layer until it matches the width and height of the Interactive Buttons. You should now have a new layer containing four Interactive Buttons, as shown in Figure 25.3. The buttons represent the top-level menu. You will create submenus that will display when a user hovers over the Products or Support menu buttons.

Figure 25.3. These Interactive Buttons will be the top-level menu for your dynamic menu built using layers.

graphics/25fig03.gif

Creating and Working with Child Layers

You now need to create a layer to hold each submenu. You will then control the visibility of the layer based on the position of the mouse. To do that, you'll use Behaviors and the Layers task pane.

One of the great things about layers is that because they are absolutely positioned, you can design them anywhere on the page and then simply drag and drop them where you want them to appear when your page is complete. In the case of your menu, you will be creating three separate layers. As you'll soon see, being able to design these layers and then place them in their final positions makes the development of menus much more convenient.

The mainMenu layer is the parent layer for all the other layers in the menu system. By making the mainMenu layer the parent layer, all the layers that make up your menu will be attached to the mainMenu layer. If you move the mainMenu layer, it will move the entire menu system and keep all of your layers in place.

You now need to create the first child layer for the mainMenu layer. To do that, follow these steps:

  1. Select Format, Layers to display the Layers task pane if it's not already visible.

  2. Select the mainMenu layer so that the new layer will be inserted as a child layer.

  3. Click the Insert Layer button to insert a new layer.

  4. Because the new layer is inserted directly on top of the existing layer, select the layer and drag it below the mainMenu layer as shown in Figure 25.4.

    Figure 25.4. The new layer is positioned right under the mainMenu layer.

    graphics/25fig04.gif

  5. Insert an Interactive Button in to the layer by selecting Insert, Interactive Button.

  6. Choose the Border Left 1 button.

  7. Enter Software for the text of the button and click OK.

  8. Press Shift+Enter to insert a line break.

  9. Insert another Border Left 1 Interactive Button immediately below the first button.

  10. Enter Hardware for the text of the button and click OK.

The mainMenu layer now has a child layer called layer1, and that layer contains two Interactive Buttons. Resize the layer so that its height and width matches the height and width of the Interactive Buttons.

You should now rename the layer and give it a more descriptive ID. Right-click the layer1 layer in the Layers task pane and select Modify ID. Type ProdSubmenu for the layer ID. Your page should now resemble the page in Figure 25.5. Note that the ProdSubmenu layer appears slightly indented below the mainMenu layer in the Layers task pane, and there is minus sign next to the mainMenu layer. This indicates that the ProdSubmenu layer is a child layer.

Figure 25.5. The ProdSubmenu layer is a child layer of the mainMenu layer.

graphics/25fig05.gif

The layer is still not in its final position. When you've finished this page, the ProdSubmenu layer will appear just below the Products menu button. However, it's easiest to design your layers first and then move them into their correct positions later. Because the ProdSubmenu layer is a child layer to the mainMenu layer, it will always move with the mainMenu layer. Therefore, when you place it into its final position, you'll never have to worry about it losing its position relative to the mainMenu layer.

NOTE

When you insert a child layer, FrontPage simply inserts the <DIV> tag for the layer nested within the parent <DIV> tag.


The final popup menu you need to create is the Support menu. Copy the ProdSubmenu layer and paste it as a new layer. Rename the new layer SupportSubmenu. This layer also needs to be a child of the mainMenu layer. To make it a child layer, click the SupportSubmenu layer in the Layers task pane and drag and drop it on top of the mainMenu layer in the Layers task pane. They layer is now a child layer at the same level as the ProdSubmenu layer.

You now need to change the Interactive Buttons in the new SupportSubmenu layer. Double-click the first button and change its text to FAQ. Double-click the second button and change its text to Ask Us. You now have all the layers complete for your interactive menu, and your page should look like the one seen in Figure 25.6.

Figure 25.6. The layers have all been inserted for your dynamic menu.

graphics/25fig06.gif

NOTE

When using Interactive Buttons in a real application, you would also configure the button to link to another page. In the example you're building in this chapter, you don't configure a hyperlink because you're only designing one page to illustrate the use of layers.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net