LESSON 1: Adding Web Slices to a Web page

  • Article

LESSON 1: Adding Web Slices to a Web page New for Windows Internet Explorer 8

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

In order to create a Web Slice, you must add two attributes to your Web site:

  • class="hslice" - This class declares the Web Slice. The tag must have an id value which is unique on that page.
  • class="entry-title" - This class defines the name of the Web Slice. This is the title that the Web Slice will have on the Favorites bar.

Important   You can update the title of a Web Slice after the user subscribes, but the id value must not change or Internet Explorer will no longer be able to identify the Web Slice.

  1. Using Microsoft® Visual Web Developer™ 2008 Express Edition, open the Web site at https://localhost on the lab computer.
  2. Open the file "webslice.html" in the Web Slice folder.
  3. At line 19, find the start of the Web Slice for the conference schedule.
<div id="schedule" class="hslice">
    <h2 class="entry-title">My Conference Agenda</h2>

Exercise #1:

Your task is to add two additional Web Slices to the page, one for Las Vegas weather and the other to cover the ticket auction. To get started, just add entry titles for these Web Slices.

Advanced: When creating a title for your Web Slice, you can concatenate multiple text spans to create one title. If you add multiple entry-title attributes within a Web Slice, they are concatenated into a single title. Try to create the title "Las Vegas 70° F Sunny" for the weather Web Slice.

A few things to remember:

  • Web Slice icons only appear when the page is served from a Web server. Copy the file to the "inetpub\wwwroot" folder for testing.
  • The placement of the hslice element will determine where the Web Slice icon appears when you hover over that part of the page.

Quick Review

  • The element which contains the hslice class must contain a single-word unique identifier.
  • Each Web Slice must contain at least one entry-title class.
  • Multiple entry-title classes can be concatenated together to create a single title (optional).

Check your work

  • When you hover over the Web Slices, do you see the Web Slice icon?
  • When you click the Web Slice icon in the Internet Explorer chrome, do you see the names of all your Web Slices in that menu?
  • Can you successfully subscribe to all three Web Slices on your page?

At this point you should have three Web Slices on your Web page, each with a title. If that's not what you have, then review the example implementation at Source Listing #1.

More Lessons

Go forward to LESSON 2: Adding visible content to your Web Slice