Microsoft.com
Willkommen Anmelden
Internet Explorer Developer Center
Per Mausklick bewerten und Feedback geben
MSDN
MSDN Library
Web Entwicklung
Internet Explorer
Web Slices
 Antworten zu Web Slice-Lernprogramm...
Antworten zu Web Slice-Lernprogrammübungen
Neu für Windows Internet Explorer 8

Diese Seite enthält vorgeschlagene Antworten, um Fragen zu üben. Überprüfen Sie die Arbeit anhand der HTML- und XML-Quellcodeauflistungen auf dieser Seite, während Sie die Web Slices-Lernprogramme durchführen.

Quellcodeauflistung 1

Antwort zu LEKTION 1: Hinzufügen von Web Slices zu einer Webseite

Um Web Slices für die Wetter- und Auktionselemente zu erstellen, fügen Sie dem Containerelement die hslice-Klasse hinzu, und fügen Sie jedem Teil des Titeltexts Container der Klasse entry-title hinzu. Der Wetterslice kombiniert mithilfe von drei entry-title-Elementen "Las Vegas" und "70° F" und "Sonnig" in eine Zeichenfolge. 

<!-- Add Web Slice here... -->
<div id="weather" class="hslice">
    <h3><span class="entry-title">Las Vegas</span>, NV (89044) Weather</h3>
    <img src="images/sunny.png" id="image" alt="Sunny" height="128" width="128" />
    <div class="entry-title" style="font-size:2.5em;margin-top:24px;font-weight:bold;">70&deg; F</div>
    <p class="entry-title" 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" class="hslice">
    <h3>Ticket Auction</h3>
    <p class="title"><span class="entry-title">Developers, Developers, Developers</span>: The Musical</p>
    <img src="images/Theatre.jpg" alt="Theatre" id="theatre" height="130" width="130" />
    <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>

Quellcodeauflistung 2

Antwort zu LEKTION 2: Hinzufügen sichtbarer Inhalte zum Web Slice

Kein Web Slice ist wirklich vollständig ohne eine entry-content-Eigenschaft. Sie können diese Klasse jedem vorhandenen Container hinzufügen oder mit einer beliebigen anderen Web Slice-Eigenschaft kombinieren, z. B. hslice. Beachten Sie, wie der Zeitplan-Web Slice das Tabellenelement für die Web Slice-Vorschau exportiert. 

<div id="schedule" class="hslice">
    <h2 class="entry-title">My Conference Agenda</h2>
    <table class="entry-content" border="1" cellspacing="1" cellpadding="2">
        <!-- Table contents ... -->
    </table>
</div><!-- hslice -->

<!-- Add Web Slice here... -->
<div id="weather" class="hslice entry-content">
    <!-- Weather slice content ... -->
</div>

<!-- ...and here -->
<div id="auction" class="hslice entry-content">
    <!-- Auction slice content ... -->
</div>

Quellcodeauflistung 3

Antwort zu LEKTION 3: Festlegen einer Ablaufzeit

Der Auktions-Web Slice kann ein Ablaufdatum und eine Ablaufzeit angeben, indem er innerhalb des hslice-Elements eine endtime-Eigenschaft definiert. Der endtime-Wert wird im Titelattribut eines abbr-Elements angegeben und ermöglicht Text innerhalb des Elements, um eine lesbare Zeitdarstellung bereitzustellen. 

<div id="auction" class="hslice entry-content">
    <!-- Auction slice content ... -->
    <abbr class="endtime" title="2008-04-29T17:50:00-08:00"></abbr>
</div>

Quellcodeauflistung 4

Antwort zu LEKTION 4: Festlegen eines Gültigkeitsdauerwerts (TTL)

Um den Wetter-Web Slice stündlich zu aktualisieren, geben Sie einen Gültigkeitsdauerwert (TTL) innerhalb einer ttl-Eigenschaft an, indem Sie eine Spanne oder das "abbr-design-pattern" wie oben in Quellcodeauflistung 3 gezeigt verwenden. In diesem Beispiel wird durch die ttl-Eigenschaft Text umbrochen, der für den Benutzer sichtbar ist. 

<div id="weather" class="hslice">
    <div class="entry-content">
    <!-- Weather slice content ... -->
    <p style="font-size:xx-small">Updated every <span class="ttl">60</span> minutes.</p>
    </div>
</div>

Quellcodeauflistung 5

Antwort zu LEKTION 5: Abrufen von Web Slice-Inhalt aus einer RSS-Feedquelle

Eine alternative Updatequelle kann innerhalb des hslice-Elements angegeben werden. In diesem Beispiel wird es außerhalb von entry-content platziert. Für höchste Kundenzufriedenheit empfehlen wir das Ausblenden des Ankers mithilfe von display:none. Weitere Informationen zu alternativen Updatequellen finden Sie unter Abonnieren von Inhalt mit Web Slices. 

<div id="weather" class="hslice">
    <div class="entry-content">
    <!-- Weather slice content ... -->
    </div>
    <a rel="feedurl" href="http://localhost/webslice/weather.xml" style="display:none;"></a>
</div>

Quellcodeauflistung 6

Antwort zu LEKTION 6: Verwenden einer benutzerdefinierten Schaltfläche für die Installation eines Web Slice

Eine Schaltfläche, die einen Web Slice abonniert, kann an einer beliebigen Stelle auf der Seite angezeigt werden. In diesem Beispiel wurde sie innerhalb der rechten Spalte der Webseite platziert. Weitere Informationen zu dieser Funktion finden Sie unter AddToFavoritesBar.

Im Folgenden finden Sie den fertigen Quellcode, nachdem alle Übungen durchgeführt wurden: 

<!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 class="entry-content" 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" class="hslice">
                <div class="entry-content">
                <h3><span class="entry-title">Las Vegas</span>, NV (89044) Weather</h3>
                <img src="images/sunny.png" id="image" style="padding:5px;float:left;" alt="Sunny" height="128" width="128" />
                <div class="entry-title" style="font-size:2.5em;margin-top:24px;font-weight:bold;">70&deg; F</div>
                <p class="entry-title" 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>
                <p style="font-size:xx-small">Updated every <span class="ttl">60</span> minutes.</p>
                </div>
                <a rel="feedurl" href="http://localhost/webslice/weather.xml"></a>
            </div>

            <!-- ...and here -->
            <div id="auction" class="hslice entry-content">
                <h3>Ticket Auction</h3>
                <p class="title"><span class="entry-title">Developers, Developers, Developers</span>: The Musical</p>
                <img src="images/Theatre.jpg" alt="Theatre" id="theatre" height="130" width="130" />
                <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>
                <abbr class="endtime" title="2008-04-29T17:50:00-08:00"></abbr>
            </div>
            
            <!-- Add button anywhere inside the right column container -->
            <input type="button" value="Add Ticket Auction Web Slice" class="addButton"
                    onclick='window.external.AddToFavoritesBar(
                            "http://localhost/webslice/webslice.html#auction",
                            "Developers, Developers, Developers", "slice");' />
        </div><!-- rightCol -->

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

</body>
</html>

Verwandte Themen

Communityinhalt   Was ist Community Content?
Neuen Inhalt hinzufügen RSS  Anmerkungen
© 2012 Microsoft. Alle Rechte vorbehalten. Nutzungsbedingungen | Markenzeichen | Informationen zur Datensicherheit
Page view tracker