Exemplarische Vorgehensweise: Importieren einer benutzerdefinierten Gestaltungsvorlage und einer Websiteseite mit Bild

  • Artikel

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie eine benutzerdefinierte SharePoint-Gestaltungsvorlage und eine Websiteseite mit einem Bild in ein Visual Studio-SharePoint-Projekt importiert werden.

In dieser exemplarischen Vorgehensweise wird erläutert, wie die folgenden Aufgaben ausgeführt werden:

  • Erstellen einer benutzerdefinierten Gestaltungsvorlage und einer Websiteseite mit einem Bild in SharePoint Designer.

  • Exportieren einer benutzerdefinierten Gestaltungsvorlage, eines Bilds und einer Websiteseite in eine SharePoint-Lösungsdatei (WSP-Datei).

  • Importieren und Bereitstellen der WSP-Datei in einem Visual Studio-SharePoint-Projekt mit dem Projekt "SharePoint-Lösungspaket importieren".

Tipp

Ihr Computer zeigt möglicherweise für einige der Elemente der Visual Studio-Benutzeroberfläche in der folgenden Anleitung andere Namen oder Standorte an. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise sind folgende Komponenten erforderlich:

Erstellen von Elementen in SharePoint Designer

In diesem Beispiel wird gezeigt, wie drei Elemente in SharePoint Designer für den Export erstellt werden: eine benutzerdefinierte Gestaltungsvorlage, eine Websiteseite, die auf die benutzerdefinierte Gestaltungsvorlage verweist, und eine Bilddatei, die auf der Websiteseite angezeigt wird. Das Bild wird dem Ordner "/images/" in SharePoint hinzugefügt.

So erstellen Sie eine benutzerdefinierte Gestaltungsvorlage in SharePoint Designer

  1. Klicken Sie in SharePoint Designer im Navigationsbereich auf Gestaltungsvorlagen.

  2. Klicken Sie im Menüband auf Leere Gestaltungsvorlage.

  3. Klicken Sie unten in SharePoint Designer auf die Registerkarte Code.

  4. Ersetzen Sie das vorhandene Markup durch folgendes Markup:

    <%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SharePoint:RobotsMetaTag runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl00' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"></SharePoint:RobotsMetaTag>
<title>Web Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolderMain" 
        runat="server">
      </asp:ContentPlaceHolder>
</form>
</body>
</html>

  5. Speichern Sie die Seite als mybasic1.master.

Hinzufügen eines Bilds zur Inhaltsdatenbank in SharePoint Designer

Jetzt können Sie ein Bild hinzufügen, das auf der Websiteseite angezeigt werden soll. Das Bild wird in der SharePoint-Inhaltsdatenbank bereitgestellt.

So fügen Sie ein Bild zur Inhaltsdatenbank in SharePoint Designer hinzu

  1. Klicken Sie im Menüband auf Alle Dateien, und wählen Sie dann in der Strukturansicht Bilder aus.

  2. Klicken Sie im Menüband auf Dateien importieren, wählen Sie eine Datei aus, und klicken Sie dann auf OK. In diesem Beispiel wird die Datei myimg1.png genannt.

    Optional können Sie einen Unterordner erstellen, um die Bilder besser zu organisieren.

  3. Schließen Sie das Dialogfeld Importieren.

Erstellen einer Websiteseite

Diese grundlegende Websiteseite verwendet die benutzerdefinierte Gestaltungsvorlage und zeigt das Bild an, das Sie im vorherigen Schritt hinzugefügt haben.

So erstellen Sie eine Websiteseite

  1. Klicken Sie im Navigationsbereich auf Websiteseiten.

  2. Klicken Sie im Menüband auf die Schaltfläche Seite, und klicken Sie dann auf ASPX. Nennen Sie die neue Datei mycontentpage1.aspx.

    Optional können Sie einen Unterordner erstellen, um die Websiteseiten besser zu organisieren.

  3. Klicken Sie in der Liste auf MyContentPage1.aspx, um die Eigenschaftenseite zu öffnen, und klicken Sie dann am unteren Rand der Seite auf den Link Bearbeiten.

  4. Klicken Sie am unteren Rand der Seite auf die Schaltfläche Code.

  5. Ersetzen Sie das vorhandene Markup durch folgendes Markup:

    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" MasterPageFile="../_catalogs/masterpage/mybasic1.master" meta:progid="SharePoint.WebPartPage.Document" %>

<asp:Content ID="Main" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
<img alt="My Image" longdesc="My image from images folder" src="../images/myimg1.png" />
</asp:Content>

  6. Speichern Sie die aktualisierte Websiteseite.

Exportieren der Elemente aus SharePoint

Exportieren Sie die Elemente aus SharePoint in eine SharePoint-Lösungsdatei (WSP-Datei).

So exportieren Sie Elemente aus SharePoint Designer

  1. Klicken Sie in SharePoint Designer auf der Navigationsleiste auf Teamwebsite und dann im Menüband auf Als Vorlage speichern.

  2. Geben Sie im Dialogfeld Als Vorlage speichern einen Dateinamen und einen Vorlagennamen ein, aktivieren Sie das Kontrollkästchen Inhalte einschließen, und klicken Sie dann auf Fertig stellen.

    Dies speichert den Inhalt der Website in der WSP-Datei.

  3. Klicken Sie nach den Projektmappenexporten auf den Link Lösungskatalog, um die Liste der verfügbaren Projektmappendateien anzuzeigen.

  4. Klicken Sie auf die neue WSP-Datei, und speichern Sie sie im System.

Importieren der Elemente in Visual Studio

Importieren Sie die WSP-Datei in Visual Studio. Nachdem der Inhalt importiert wurde, können Sie ihn anpassen, weitere Elemente hinzufügen und den Inhalt dann bereitstellen.

So importieren Sie Elemente aus der WSP-Datei in Visual Studio

  1. Erstellen Sie in Visual Studio ein Projekt SharePoint-Lösungspaket importieren.

  2. Wählen Sie auf der Seite Zu importierende Elemente auswählen unter Modul in der Spalte Typ nur die Dateien in der folgenden Tabelle für den Import aus.

    Dateiname

    Beschreibung

    _catalogsmasterpage_

    Die benutzerdefinierte Gestaltungsvorlage.

    images_

    Die Bilddatei im SharePoint-Dateisystem.

    SitePages_

    Die Websiteseite.

  3. Klicken Sie auf Fertig stellen, um die ausgewählten Elemente zu importieren.

  4. Klicken Sie im Projektmappen-Explorer auf die benutzerdefinierte Gestaltungsvorlage, und legen Sie die Eigenschaft Bereitstellungskonfliktlösung auf Automatisch fest.

    Damit wird sichergestellt, dass alle Bereitstellungskonflikte automatisch gelöst werden.

  5. Wenn die neue Gestaltungsvorlage den gleichen Namen wie eine vorhandene Seite hat, stellen Sie sicher, dass die vorhandene Seite in SharePoint Designer nicht als Standardgestaltungsvorlage oder benutzerdefinierte Gestaltungsvorlage gekennzeichnet ist.

    Wenn eine vorhandene Gestaltungsvorlage als Standardgestaltungsvorlage oder benutzerdefinierte Gestaltungsvorlage gekennzeichnet ist, wird ein Bereitstellungsfehler mit dem Hinweis ausgegeben, dass die Gestaltungsvorlage nicht gelöscht werden kann. Um dieses Problem zu vermeiden, gehen Sie wie folgt vor:

    • Wenn die vorhandene Gestaltungsvorlage als Standardgestaltungsvorlage festgelegt ist, legen Sie vorübergehend eine andere Gestaltungsvorlage als Standardgestaltungsvorlage fest. Nachdem Sie die Dateien auf SharePoint bereitgestellt haben, legen Sie die neue Gestaltungsvorlage als Standardgestaltungsvorlage fest.

    • Wenn die vorhandene Gestaltungsvorlage als benutzerdefinierte Gestaltungsvorlage festgelegt ist, legen Sie vorübergehend eine andere Gestaltungsvorlage als benutzerdefinierte Gestaltungsvorlage fest. Nachdem Sie die Dateien auf SharePoint bereitgestellt haben, legen Sie die neue Gestaltungsvorlage als benutzerdefinierte Gestaltungsvorlage fest.

  6. Klicken Sie im Menü Erstellen auf Projektmappe bereitstellen.

  7. Öffnen Sie die SharePoint-Website, um die bereitgestellten Elemente anzuzeigen.

Eine alternative Art, Dateien in Visual Studio zu importieren und sie auf SharePoint bereitzustellen, besteht darin, die Dateien in Module in Visual Studio hinzuzufügen. Weitere Informationen finden Sie unter Gewusst wie: Erstellen einer Masterseite oder eines Designs und Verwenden von Modulen zum Einfügen von Dateien in die Projektmappe.

Siehe auch

Konzepte

Importieren von Elementen aus einer vorhandenen SharePoint-Website

Weitere Ressourcen

Entwickeln von SharePoint-Lösungen

Erstellen von wiederverwendbaren Steuerelementen für Webparts oder Anwendungsseiten