Expression Web 2 provides a visual interface for performing complicated dynamic HTML (DHTML) tasks. These tasks are accomplished by using the Expression Web 2 Layers and Behaviors task panes. In the next exercise, you will examine these capabilities and insert a DHTML-driven "viewer" into one of your pages. This viewer allows you to show information to a visitor in several ways without requiring navigation to different pages.
In this exercise, you will use the Interactive Buttons feature and the Layers and Behaviors panes to create a multimedia display area in your page.
Note
USE the CH8 site you modified in the previous exercise.
BE SURE TO turn on Visual Aids, Block Selection, and Empty Containers if they’re not on already.
OPEN the CH8 site if it isn’t already open, and display the default.htm page.
In the Design pane, delete Headline 2, and then type Dynamic Presentation. Click within the paragraph below, click <p> on the quick tag selector bar, and then press
. On the Insert menu, point to HTML, and then click <div>.A new DIV element is placed in the page.
Save your page, and then click <div> on the quick tag selector bar for the DIV element that you just placed in the page. In the Apply Styles task pane, click New Style.
The New Style dialog box opens.
In the New Style dialog box, change the Selector box to #controls, select the Apply new style to document selection check box, click Existing style sheet in the Define in list, and then click styles/style3.css (the document’s current style sheet) in the URL list.
In the Category list, click Background. Click the background-color arrow, and then click More Colors.
In the More Colors dialog box that opens, click Select, use the eyedropper to select the background color of the main navigation bar (Hex={99,88,66}), and then click OK.
In the Category list, click Position, type 300px in the width box, and then type 270px in the height box. Click OK to set your changes and close the New Style dialog box.
In the Design pane, click inside this newly styled DIV element. On the Insert menu, click Interactive Button to open the Interactive Buttons dialog box.
In the Buttons list of the Interactive Buttons dialog box, click Embossed Tab 6. In the Text box, type Text, and leave the Link box empty.
Click OK to insert the button into the page.
Repeat steps 8 and 9 twice more, using Flash and Windows Media for the button text and leaving the Link box empty.
A row of three buttons is created, with no spaces between the buttons.
On the Insert menu, click HTML, and then click <div>.
A new DIV element is inserted into the page.
In the Design pane, set the mouse pointer inside this DIV element, and then, on the quick tag selector bar, click its representation to select the entire tag. In the Manage Styles pane, click New Style to open the New Style dialog box.
In the Selector box of the New Style dialog box, type #presentation, and select the Apply new style to document selection check box. In the Define in list, click Existing style sheet, and then click style3.css in the URL list. In the Category list, click Box, and then type 30px in the padding box below padding. In the Category list, click Position, type 180px in the height box, and then type 240px in the width box. Click OK to close the dialog box.
Click inside the new DIV element, and then, on the Format menu, click Layers. In the Layers task pane, click the Insert Layer button.
Expression Web 2 inserts a layer below your row of buttons.
In the Layers task pane, right-click layer1, and then click Modify ID. Change the ID to player. Right-click player, and then click Borders and Shading. On the Shading tab, change the Background color to white, and then click OK. Right-click player again, and then click Positioning. Type 240px in the width box, type 180px in the height box, and then click OK.
Click inside this newly styled DIV element, and type Please select a viewing option by clicking one of the buttons above. Save your page, and then click OK in the Save Embedded Files dialog box.
In the Folder List, open the text-code.txt file from the media folder. Select the code, and copy it to the Clipboard. Close the file, and switch to default.htm. In the Design pane, click the Text interactive button, and then, on the Format menu, click Behaviors to display the Behaviors task pane. In the Behaviors task pane, click Insert, point to Set Text, and then click Set Text of Layer.
In the Set Text of Layer dialog box that opens, paste the code from the Clipboard into the New HTML box.
Click OK to set your changes.
In the Folder List, open the Flash-example.htm file. Click the Flash object in the Design pane of your page, and then right-click its highlighted code in the Code pane, and copy it to the clipboard. Close the file, and switch to default.htm. In the Design pane, click the Flash interactive button. In the Behaviors task pane, click Insert, point to Set Text, and then click Set Text of Layer. Paste the code from the Clipboard into the New HTML box, and then click OK to set your changes.
In the Folder List, open the WindowsMedia-example.htm file. Click the Windows Media object in the Design pane of your page, and then right click its highlighted code in the Code pane and copy it to the clipboard. Close the file, and switch to default.htm. In the Design pane, click the Windows Media interactive button. In the Behaviors task pane, click Insert, point to Set Text, and then click Set Text of Layer. Paste the code from the Clipboard into the New HTML box, and then click OK to set your changes.
Save your page and preview it in a browser. Explore your creation in the browser by clicking the buttons to check each delivery method.
Note
BE SURE TO leave the CH8 site open for use in the next exercise.
CLOSE any open pages in Expression Web 2.
Although the video and audio files were provided for this exercise, consider the outcome: using only the user interface in Expression Web 2, you were able to set up a nice three-button rollover bar, and to set up the capability to deliver content to a visitor in three different ways. Consider also that by using the Set Text Of Layer function, no extra files will be downloaded unless the site visitor clicks one of the buttons. This way, the visitor can receive your page quickly, and can then click for "heavy" content such as video or audio. It’s a much better user experience than if the running media content were placed on the surface of the page.