Share via

Web Slices Tutorials

  • Article

In these short lessons, you will learn how to add Web Slices to an existing Web page. You start with a Web page that contains a fictitious conference schedule, a weather report, and ticket auction for a hit Broadway musical. Initially, the page contains one simple Web Slice, but you will gradually implement additional functionality.

Web Slice with mouse cursor screenshot

Figure 1: Initial state of the example Web page.

These tutorials were originally published as hands-on labs, available to attendees of MIX'08 and TechEd Orlando 2008.

Download the Web Slice tutorial files here

Tutorials

Answers to Web Slice Tutorial Exercises

This page contains suggested answers to exercise questions.

LESSON 1: Adding Web Slices to a Web page

This tutorial explains how to add Web Slices to Web pages.

LESSON 2: Adding visible content to your Web Slice

This tutorial explains how to add Web Slice content that appears in the preview window on the Favorites bar.

LESSON 3: Setting an expiration time

This tutorial explains how to add an expiration time to a Web Slice.

LESSON 4: Setting a time-to-live (TTL) value

This tutorial explains how to limit the frequency of Web Slice updates.

LESSON 5: Getting Web Slice content from an RSS feed source

This tutorial explains how to create an alternate feed source for a Web Slice.

LESSON 6: Using a custom button to install a Web Slice

This tutorial explains how to create a customized user experience for your site.

Original Source Listing

At the beginning of Lesson 1, the source of the "My Fictional Agenda" Web page, with one simple Web Slice, appears as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Demo site for Internet Explorer 8" />
<title>My Fictitious Schedule - Web Slices HOL</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body class="main">

<div id="main">
    <div id="top"><!-- rounded corners --></div>
    <div id="mainContent">
        <div id="leftCol">
    
            <!-- Web Slice: Note class=hslice and class=entry-title -->
            <div id="schedule" class="hslice">
                <h2 class="entry-title">My Conference Agenda</h2>
                <table border="1" cellspacing="1" cellpadding="2">
                    <tr>
                        <th>Date/Time</th>
                        <th>Location</th>
                        <th>Session</th>
                    </tr>
                    <tr class="odd">
                        <td>Today, 10 AM</td>
                        <td>Room 101</td>
                        <td>Dean's Keynote</td>
                    </tr>
                    <tr class="even">
                        <td>Today, 12 pm</td>
                        <td>Cafeteria</td>
                        <td>Lunch with Mary</td>
                    </tr>
                    <tr class="odd">
                        <td>Today, 2 PM</td>
                        <td>Room 303</td>
                        <td>Jane's talk on Activities and Web Slices</td>
                    </tr>
                    <tr class="even">
                        <td>Today, 6 PM</td>
                        <td>TBD</td>
                        <td>Dinner</td>
                    </tr>
                    <tr class="odd">
                        <td>Today, 10 PM</td>
                        <td>The Venetian</td>
                        <td>Microsoft Party</td>
                    </tr>
                    <tr class="even">
                        <td>Tomorrow, 8 AM</td>
                        <td>TBD</td>
                        <td>Breakfast</td>
                    </tr>
                    <tr class="odd">
                        <td>Tomorrow, 12 PM </td>
                        <td>Room 202</td>
                        <td>Marc's Talk on Developer Tools</td>
                    </tr>
                    <tr class="even">
                        <td>Tomorrow, 3 PM</td>
                        <td>Microsoft booth</td>
                        <td>Meeting with Billg</td>
                    </tr>
                </table>

            </div><!-- hslice -->
        </div><!-- leftCol -->
        
        <div id="rightCol">

            <h2>Las Vegas Happenings</h2>
            
            <!-- Add Web Slice here... -->
            <div id="weather">
                <h3><span>Las Vegas</span>, NV (89044) Weather</h3>
                <img src="images/sunny.png" id="image" alt="Sunny" height="128" width="128" />
                <div style="font-size:2.5em;margin-top:24px;font-weight:bold;">70? F</div>
                <p style="font-weight:bold;font-size:1.5em">Sunny</p>
                <p><i>All fictional, of course!</i></p>
                <p>Current conditions as of 4:56 PM</p>
            </div>

            <!-- ...and here -->
            <div id="auction">
                <h3>Ticket Auction</h3>
                <p class="title"><span>Developers, Developers, Developers</span>: The Musical</p>
                <img src="images/Theatre.jpg" alt="Theatre" id="theatre" height="130" width="130" style="float: left; padding: 5px" />
                <p>Current Bid: <span style="font-size:26px;line-height:32px;font-weight:bold;">$60</span></p>
                <p>A Musical on a pre-Broadway release tour. Featuring the 
                up and coming actor/singer Foo Barret as the venerable Steve Ballmer. 
                Come catch the excitement!</p>
            </div>

        </div><!-- rightCol -->
    </div><!-- mainContent -->
    <div id="footer"><!-- rounded corners, clear floats --></div>
</div><!-- main -->

</body>
</html>