逐步解說:匯入自訂主版頁面及包含影像的網站頁面
本逐步解說示範如何將 SharePoint 自訂主版頁面及擁有影像的網站頁面匯入 Visual Studio SharePoint 專案中。
此逐步解說示範如何完成下列工作:
在 SharePoint Designer 中使用影像來建立自訂主版頁面和網站頁面。
將自訂主版頁面、影像和網站頁面匯入 SharePoint 方案 (.wsp) 檔。
使用 [匯入 SharePoint 方案套件] 專案,將 .wsp 檔匯入及部署到 Visual Studio SharePoint 專案。
注意事項 |
---|
您的電腦可能會在下列說明中,以不同名稱或位置顯示某些 Visual Studio 使用者介面項目。 您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。 如需詳細資訊,請參閱 Visual Studio 設定。 |
必要條件
若要完成這個逐步解說,您必須擁有以下元件:
支援的 Microsoft Windows 和 SharePoint 版本。 如需詳細資訊,請參閱 開發 SharePoint 方案的要求。
Visual Studio 2010。
SharePoint Designer 2010。
在 SharePoint Designer 中建立項目
此範例示範如何在 SharePoint Designer 中建立三個匯出的項目:自訂主版頁面、參考自訂主版頁面的網站頁面,以及出現在網站頁面上的影像檔。 此影像會加入至 SharePoint 中的 /images/ 資料夾。
若要在 SharePoint Designer 中建立自訂主版頁面
在 SharePoint Designer 的巡覽窗格中,按一下 [主版頁面]。
在功能區上,按一下 [空白主版頁面]。
在 SharePoint Designer 的底部,按一下 [程式碼] 索引標籤。
以下列標記取代現有的標記。
<%@ 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="<P N='InDesign' T='False' /><P N='ID' T='ctl00' /><P N='Page' ID='1' /><P N='TemplateControl' ID='2' /><P N='AppRelativeTemplateSourceDirectory' R='-1' />"></SharePoint:RobotsMetaTag> <title>Web Page</title> </head> <body> <form id="form1" runat="server"> <asp:ContentPlaceHolder id="ContentPlaceHolderMain" runat="server"> </asp:ContentPlaceHolder> </form> </body> </html>
將頁面儲存為 mybasic1.master。
在 SharePoint Designer 中將影像加入至內容資料庫
現在您可以加入影像,使其顯示在網站頁面上。 此影像會部署到 SharePoint 內容資料庫。
若要在 SharePoint Designer 中將影像加入至內容資料庫
在功能區上,按一下 [所有檔案],然後在樹狀檢視中選取 [影像]。
在功能區上,按一下 [匯入檔案],並選取您所要的檔案,然後按一下 [確定]。 在此範例中,檔案名為 myimg1.png。
您也可以選擇建立子資料夾來組織影像。
關閉 [匯入] 對話方塊。
建立網站頁面
這個基本網站頁面會使用自訂主版頁面,並顯示您在上一個步驟所加入的影像。
若要建立網站頁面
按一下巡覽窗格中的 [網站頁面]。
在功能區上,按一下 [頁面] 按鈕,然後按一下 [ASPX]。 將新檔案命名為 mycontentpage1.aspx。
您也可以選擇建立子資料夾來組織網站頁面。
在此清單中,按一下 [MyContentPage1.aspx] 開啟其屬性頁,然後在頁面底部按一下 [編輯] 連結。
在頁面底部按一下 [程式碼] 按鈕。
以下列標記取代現有的標記。
<%@ 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>
儲存更新的網站頁面。
從 SharePoint 匯出項目
將 SharePoint 中的項目匯出到 SharePoint 方案 (.wsp) 檔。
若要從 SharePoint Designer 匯出項目
在 SharePoint Designer 的巡覽列上,按一下 [小組網站],然後按一下功能區上的 [另存範本]。
在 [另存範本] 對話方塊中,輸入檔案名稱和範本名稱,再選取 [包括內容] 核取方塊,然後按一下 [完成]。
這樣會將網站的內容儲存在 .wsp 檔中。
在方案匯出之後,請按一下 [方案庫] 連結,顯示可用方案檔的清單。
按一下新的 .wsp 檔,並將它儲存到系統上。
將項目匯入 Visual Studio
將 .wsp 檔匯入 Visual Studio。在匯入內容之後,您可以加以自訂、加入其他項目,然後進行部署。
若要將 .wsp 檔中的項目匯入 Visual Studio
在 Visual Studio 中,建立 [匯入 SharePoint 方案套件] 專案。
在 [選取要匯入的項目] 頁面上 [模組] 底下的 [類型] 欄中,只選取下表中要匯入的檔案。
檔案名稱
描述
_catalogsmasterpage_
自訂主版頁面。
images_
SharePoint 檔案系統中的影像檔。
SitePages_
網站頁面。
按一下 [完成] 匯入選取的項目。
在 [方案總管] 中按一下自訂主版頁面,並將它的 [部署衝突解決] 屬性設定為 [自動]。
如此可確保任何部署衝突都可自動解決。
如果新的主版頁面與現有的頁面同名,請確定現有的頁面並未在 SharePoint Designer 中標示為「預設主版頁面」或「自訂主版頁面」。
如果現有主版頁面標示為「預設主版頁面」或「自訂主版頁面」,您將會收到部署錯誤,表示無法刪除主版頁面。 若要避免這個問題,請執行下列作業:
如果現有的主版頁面設定為「預設主版頁面」,請暫時將另一個主版頁面設定為「預設主版頁面」。 在您將檔案部署到 SharePoint 之後,請將新的主版頁面設定為「預設主版頁面」。
如果現有的主版頁面設定為「自訂主版頁面」,請暫時將另一個主版頁面設定為「自訂主版頁面」。 在您將檔案部署到 SharePoint 之後,請將新的主版頁面設定為「自訂主版頁面」。
在 [建置] 功能表上,按一下 [部署方案]。
開啟 SharePoint 網站,檢視部署的項目。
將檔案匯入 Visual Studio 並部署到 SharePoint 的替代方法就是在 Visual Studio 中將檔案加入至模組內。 如需詳細資訊,請參閱HOW TO:匯入主版頁面或佈景主題和使用模組來包含方案中的檔案。