演练：导入带有图像的自定义母版页和网站页

  • 项目

本演练演示如何将 SharePoint 自定义母版页和包含图像的网站页面导入 Visual Studio SharePoint 项目中。

本演练演示如何完成以下任务：

  • 在 SharePoint Designer 中使用图像创建自定义母版页和网站页面。

  • 将自定义母版页、图像和网站页面导出为 SharePoint 解决方案 (.wsp) 文件。

  • 使用“导入 SharePoint 解决方案包”项目将 .wsp 文件导入和部署到 Visual Studio SharePoint 项目中。

提示

对于在以下说明中使用的某些 Visual Studio 用户界面元素，您的计算机可能会显示不同的名称或位置。这些元素取决于您所使用的 Visual Studio 版本和您所使用的设置。有关更多信息，请参见 Visual Studio 设置。

系统必备

若要完成本演练，您必须具有以下组件：

在 SharePoint Designer 中创建项

此示例演示如何在 SharePoint Designer 中创建要导出的三个项：一个自定义母版页、一个引用自定义母版页的网站页面和一个要在网站页面上显示的图像文件。 该图像会添加到 SharePoint 中的 /images/ 文件夹。

在 SharePoint Designer 中创建一个自定义母版页

  1. 在 SharePoint Designer 中的导航窗格中，单击**“母版页”**。

  2. 在功能区上，单击**“空白母版页”**。

  3. 在 SharePoint Designer 的底部，单击**“代码”**选项卡。

  4. 将现有标记替换为以下标记。

    <%@ 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. 将该页另存为 mybasic1.master。

将图像添加到 SharePoint Designer 中的内容数据库

此时可添加一个图像以在网站页面上显示。 该图像将部署到 SharePoint 内容数据库。

将一个图像添加到 SharePoint Designer 中的内容数据库

  1. 在功能区上，单击**“所有文件”，然后在树视图中，选择“图像”**。

  2. 在功能区上单击**“导入文件”，选择所需文件，然后单击“确定”**。 在此示例中，该文件名为 myimg1.png。

    （可选）您可以创建子文件夹以帮助组织图像。

  3. 关闭**“导入”**对话框。

创建网站页面

此基本网站页面使用自定义母版页，并显示您在上一步中添加的图像。

创建网站页面

  1. 在导航窗格中，单击**“网站页面”**。

  2. 在功能区上，单击**“页面”按钮，然后单击“ASPX”**。 将该新文件命名为 mycontentpage1.aspx。

    （可选）您可以创建子文件夹以帮助组织网站页面。

  3. 在列表中，单击**“MyContentPage1.aspx”打开其属性页，然后单击该页底部的“编辑”**链接。

  4. 在该页底部，单击**“代码”**按钮。

  5. 将现有标记替换为以下标记。

    <%@ 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. 保存更新的网站页面。

从 SharePoint 导出项

将 SharePoint 中的项导出为 SharePoint 解决方案 (.wsp) 文件。

从 SharePoint Designer 中导出项

  1. 在 SharePoint Designer 中的导航栏上，单击**“团队网站”，然后在功能区上单击“另存为模板”**。

  2. 在**“另存为模板”对话框中，键入文件名和模板名，选中“包含内容”复选框，然后单击“完成”**。

    这会将网站内容保存到 .wsp 文件中。

  3. 在导出解决方案后，单击**“解决方案库”**链接以显示可用解决方案文件的列表。

  4. 单击新 .wsp 文件，然后将其保存到系统中。

将项导入 Visual Studio 中

将 .wsp 文件导入 Visual Studio 中。导入内容后，可以对它进行自定义，添加更多项，然后部署它。

将 .wsp 文件中的项导入 Visual Studio 中

  1. 在 Visual Studio 中，创建一个**“导入 SharePoint 解决方案包”**项目。

  2. 在**“选择要导入的项”页上“模块”下的“类型”**列中，仅选择下表中的文件以进行导入。

    文件名

    说明

    _catalogsmasterpage_

    自定义母版页。

    images_

    SharePoint 文件系统中的图像文件。

    SitePages_

    网站页面。

  3. 单击**“完成”**导入所选项。

  4. 在**“解决方案资源管理器”中，单击自定义母版页，然后将其“部署冲突解决方法”属性设置为“自动”**。

    这有助于确保自动解决任何部署冲突。

  5. 如果新母版页的名称与现有页的名称相同，请确保现有页在 SharePoint Designer 中未标记为默认母版页或自定义母版页。

    如果现有母版页标记为默认母版页或自定义母版页，则您会收到一条部署错误，表明无法删除母版页。 若要避免此问题，请执行下列操作：

    • 如果现有母版页设置为默认母版页，则暂时将其他母版页设置为默认母版页。 在将这些文件部署到 SharePoint 后，请将新母版页设置为默认母版页。

    • 如果现有母版页设置为自定义母版页，则暂时将其他母版页设置为自定义母版页。 在将这些文件部署到 SharePoint 后，请将新母版页设置为自定义母版页。

  6. 在**“生成”菜单上单击“部署解决方案”**。

  7. 打开 SharePoint 网站以查看部署项。

也可以通过另一种方式将这些文件导入 Visual Studio 中，并将它们部署到 SharePoint，即将这些文件添加到 Visual Studio 中的模块中。 有关更多信息，请参见如何：导入母版页或主题和使用模块包括解决方案中的文件。

请参见

概念

从现有的 SharePoint 网站导入项

其他资源

开发 SharePoint 解决方案

为 Web 部件或应用程序页创建可重用控件