Vorgehensweise: Anpassen von Formaten

Letzte Änderung: Sonntag, 4. April 2010

Gilt für: SharePoint Server 2010

In vielen Fällen möchte der Designer das Erscheinungsbild einer Webseite beibehalten und wendet dazu benutzerdefinierte Formate auf den Seiteninhalt an. Dadurch wird es möglich, die Definition von Stylesheets zu ändern, um das Erscheinungsbild der Seite jetzt zu ändern, ohne dass sich dies in Zukunft auf Seiteninhalte auswirkt. Im HTML-Editor von Microsoft SharePoint Server 2010 kann der Seitenautor benutzerdefinierte Formate mithilfe einer vom Designer bereitgestellten vordefinierten Liste von Formaten auf den Inhalt anwenden.

Im HTML-Editor werden standardmäßig die Standardformatsätze angezeigt, ein Seitenlayoutdesigner kann den Standardsatz jedoch ersetzen, indem er im Seitenlayout Verweise auf Stylesheets hinzufügt. Wenn vom HTML-Editor neue CSS-Klassen (Cascading Stylesheet) erkannt werden, deren Namen das Präfix ms-rteCustom-XXXX enthalten, wobei XXXX der für die Seite eindeutige Anzeigename der Klassen ist, wird anstatt des Standardsatzes der neue benutzerdefinierte Formatsatz angezeigt.

Vom HTML-Editor werden spezifische Klassen für bestimmte Tags erkannt und dem Benutzer nur angezeigt, wenn der angegebene Inhalt ausgewählt wird. Im Dropdownmenü werden immer Formate angezeigt, die für ein bestimmtes Tag nicht definiert sind. Beispielsweise möchte ein Seitenlayoutdesigner das folgende benutzerdefinierte Format für den Seitenautor verfügbar machen, indem er eine im Seitenlayout enthaltene CSS-Datei verwendet. Der Seitenautor kann beim Bearbeiten einer anhand des Layouts erstellten Seite die Schaltfläche Auswählen auf der Symbolleiste des HTML-Editors verwenden, um eine Liste auf der Seite hervorzuheben, auf die Schaltfläche Format klicken und das im Codeausschnitt gezeigte Listenformat auswählen, um dieses auf die ausgewählte Liste anzuwenden.

Ol.ms-rteCustom-RomanNumberList {
    font-family:Times New Roman; font-size:10pt; color:#000000; 
    text-indent:0; text-align:left; list-  style-type:upper-roman; 
    margin-left:30; margin-right:10; padding-left:10px; margin-top:1; 
    text-transform:capitalize

Sie können ein eindeutiges Präfix für den CSS-Klassennamen der einzelnen HTML-Feldsteuerelemente für die Veröffentlichung angeben, damit Sie für die verschiedenen Abschnitte der Seite verschiedene benutzerdefinierte Formate anzeigen können.

Sie können in dem Seitenlayout, in dem das RichHTMLField-Steuerelement angegeben ist, die PrefixStyleSheet-Eigenschaft außer Kraft setzen. Wenn Sie beispielsweise den folgenden Code angeben, wird vom HTML-Editor nach CSS-Klassen mit dem Präfix PageContentStyleCustom in der zugehörigen CSS-Syntax gesucht:

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>

Wenn vom HTML-Editor benutzerdefinierte Formate gefunden werden, die dieses Präfix enthalten, werden in der Dropdownliste Formate die Formate für die aktuelle Auswahl angezeigt.

Anpassen von Formaten für Webparts für Hyperlinkübersichten, Inhaltsverzeichnisse und Inhaltsabfragen

Mit dem Hyperlinkübersicht-Feldsteuerelement und dem Webpart für Inhaltsabfragen (Content Query Web Part, CQWP) werden erstellte Hyperlinks auf der Seite angezeigt. Sie können als Basis für diese Hyperlinks einen für die Website verfügbaren Formatsatz verwenden.

Mit dem Inhaltsverzeichnis-Webpart und dem CQWP werden datengesteuerte Navigationsansichten angezeigt. Mit beiden Webparts können Abfragen für Websiteinhalte angezeigt werden. Außerdem können Sie Formate auf die Elemente und Gruppenüberschriften in diesen Webparts anwenden, damit zum Rendern ein verfügbarer Formatsatz verwendet wird.

In SharePoint Server 2010 werden für die Anzeige dieser Webparts XSL-Stylesheets verwendet. Sie können Formate anpassen und erweitern, damit diese den Farben und dem Branding der Website entsprechen.

In Tabelle 1 wird die Zuordnung von XSL-Stylesheetdateien und den entsprechenden Webparts gezeigt.

Tabelle 1. Zuordnung von XSL-Stylesheetdateien und entsprechenden Webparts

Verfahren

So suchen und ändern Sie Hyperlinkübersichtsformate

1. Navigieren Sie zur Homepage der Website, und klicken Sie dann auf Alle Websiteinhalte einblenden.

2. Klicken Sie auf Formatbibliothek.

3. Klicken Sie auf XSL-Stylesheets, um die Liste der in der Formatbibliothek verfügbaren XSL-Dateien für alle drei Webparttypen anzuzeigen.

4. Wenn Sie ein Beispiel sehen möchten, öffnen Sie die Datei ItemStyle.xsl zum Bearbeiten. Mit ItemStyle.xsl wird die Anzeige von Elementen in Elementen des Hyperlinkübersicht-Webparts und des CQWP gesteuert. Betrachten Sie dann die Struktur und den Inhalt der Datei:

   • Die XSL-Vorlage ist einfach HTML-Code mit einigen Variablen (@ImageURL, @LinkURL, @Description usw.).

   • Sie können das Hyperlinkübersicht-Webpart ein- oder ausblenden, indem Sie diese Variablen hinzufügen oder entfernen.

   • Außerdem können Sie ändern, wie diese Variablen vom umgebenden HTML-Code dargestellt werden.

   • Jede XSL-Vorlage ist einem Format zugeordnet, das ein Autor auswählen kann.

   • Der erste Abschnitt des Codebeispiels enthält XSL-Vorlagen, die von SharePoint Server 2010 aufgerufen werden, an die Daten übergeben werden und aus denen geänderte Versionen der Daten abgerufen werden.

   • Dieser Abschnitt enthält gerenderten HTML-Code mit dem Ergebnis der Funktionen:

   <xsl:template name="Default" match="*" mode="itemstyle">
   // This section includes a set of functions, or xsl templates, which SharePoint Server 2010 calls, passes data into, and gets modified versions of the data from.  The product does this primarily to improve security.
       <xsl:variable name="SafeLinkUrl">
           <xsl:call-template name="OuterTemplate.GetSafeLink">
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="SafeImageUrl">
           <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
               <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="DisplayTitle">
           <xsl:call-template name="OuterTemplate.GetTitle">
               <xsl:with-param name="Title" select="@Title"/>
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="LinkTarget">
           <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
       </xsl:variable>
   // Includes the rendered HTML with the results of the functions.
       <div id="linkitem" class="item">
           <xsl:if test="string-length($SafeImageUrl) != 0">
               <div class="image-area-left"> 
                   <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                       <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                   </a>
               </div>
           </xsl:if>
           <div class="link-item">
               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                   <xsl:value-of select="$DisplayTitle"/>
               </a>
               <div class="description">
                   <xsl:value-of select="@Description" />
               </div>
           </div>
       </div>
   </xsl:template>
   

So erstellen Sie ein neues Format

1. Wiederholen Sie die Schritte 1 bis 4 des vorherigen Verfahrens, um zur Datei ItemStyle.xsl zu navigieren.

2. Öffnen Sie die Datei ItemStyle.xsl, und fügen Sie den folgenden Code hinzu.

   <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
   </xsl:template>
   

3. Fügen Sie zwischen den öffnenden und schließenden Tags in der Datei ItemStyle.xsl nach Bedarf den Vorlagennamen, Variablen, Parameterinformationen und weitere Details hinzu..

4. Fügen Sie HTML-Code und die entsprechenden XSL-Anweisungen hinzu, um die Variablen richtig im Webpart anzuzeigen.

Siehe auch

Konzepte

Gewusst wie: Anpassen des HTML-Editor-Feldsteuerelements