SharePoint 2013 与 Dreamweaver 和设计管理器的完美混搭

Article
09/20/2012

原文发布于 2012 年 7 月 28 日（星期六）

SharePoint 2013 中包含的很多新功能让设计和发布网站变得前所未有的简单。设计管理器就是其中的一项；您可以利用它完成许多任务，如为您的内容创建不同的通道 – 例如，一组页面针对全尺寸浏览器，一组针对移动设备，还有一组针对平板电脑等等。每个通道可关联不同的母版页。真正有趣的功能之一是，您可以使用任意的标准 HTML 编辑工具，如 Dreamweaver 来创建页面，并将其上载到 SharePoint 用作母版页。SharePoint 负责自动创建 .aspx 页面，并与您的 .html 文件保持同步。完成这一转换之后，您就不用再返回到其他的工具进行编辑；而是可以继续使用喜欢的编辑工具编辑 .html 文件，每次保存后， SharePoint 都会同步用以呈现母版页的 .aspx 文件。

另外，我们还提供一些代码段，让您可以使用大量的 SharePoint 附带功能并插入母版页。您只需选择需要的代码段类型 – 如搜索框或快速导航等 – 然后将自动生成的功能代码复制并粘贴到您的母版页。但这并不像公园散步那么简单 – 为了将标准 .html 文件完全转换为 SharePoint 母版页，您还是需要了解一些 SharePoint 理论。

在这篇文章里，我会利用您根据 Dreamweaver 教程 (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html（该链接可能指向英文页面）) 创建的网站页面，将其转换为我的网站的 SharePoint 母版页和主页。首先，完成后的 Dreamweaver 网站外观如下：

查看页面时您会发现，我们需要解决一些 SharePoint 特定问题：

标题使用的图像、页面主视图背景和各个故事的图像
页面主体部分及三个故事区的内容
或许要添加的其他 SharePoint 功能。包括一个搜索框和一些导航。

首先我们从内容的角度想一想。现成的内容类型可以解决主体内容部分，但我们需要一些定制内容来处理页面底部的三个故事代码段。我们就从这里开始，创建一个支持它的全新内容类型。既然这些图像实际上是链接到内容的，我们要为它们添加网站栏，并为文本本身添加网站栏。欢迎页内容类型或许是适用于这类页面的非常好的基类，因此我根据欢迎页创建了一个新的内容类型并称之为 DW Layout。为支持该布局，添加以下各栏：

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

图像栏全部定义为包含格式和约束的发布图像，文本栏则定义为包含格式和约束的完整发布 HTML 内容。

这时，我们就准备好要用设计管理器开始第一阶段了。我们要上载的 Dreamweaver HTML 页面和样式表，并将其转换为母版页。

现在，从安装 Dreamweaver（或您喜欢的 HTML 编辑工具）的计算机打开浏览器，然后导航至您的 SharePoint 网站。单击“网站操作”(Site Actions) 菜单并选择“设计管理器”(Design Manager)。单击左侧任务列表中的第三项“上载设计文件”(Upload Design Files)。单击链接，将本地驱动器映射至要存储母版页和模式表的 SharePoint 文件夹。它会打开 SharePoint 网站的资源管理器视图，您可以将文件直接从 SharePoint 拖放至 Dreamweaver。如果出于某种原因无法完成这一操作，您可随时导航到母版页库，只需在资源管理器视图中打开库即可。

接下来，将 index.html 母版页从您的本地驱动器复制到以资源管理器视图打开的 SharePoint 库。Dreamweaver 教程中假定模式表位于一个名为 styles 的子文件夹中，因此，请创建该文件夹并将模式表复制进去。

现在，在浏览器中单击设计管理器任务列表的第四项“编辑母版页”(Edit Master Pages)。单击名为“将 HTML 文件转换为 SharePoint 母版页”(Convert an HTML file to a SharePoint master page) 的链接。将会打开一个 SharePoint 文件浏览器样式对话框，您会看到，index.html 文件已经复制到母版页样式库。单击以选中，然后单击“插入”(Insert) 按钮。转换过程完成后，设计管理器页面的母版页列表中会显示该文件，同时出现一条消息提示转换成功。这时，如果您刷新母版页库的资源管理器视图，则会看到名为 index.master 的新文件。这是您上载到网站的 index.html 文件的“配对”文件。从此以后，SharePoint 将负责更新这个 master 文件 – 您只需处理 HTML 文件即可。

现在，也许应该看一下您的新母版页了，这样您才能知道还要做什么。为此，您可以单击设计管理器中的 index.html 链接。该操作会以预览模式打开页面，这样您就能看到母版页目前的情况。刚开始时是非常有趣的 – 首次完成转换后的外观如下：

需要指出的几点：

样式表表现为工作 – 我们获得了期望的字体和格式
并未显示图像，所以我们需要解决这一问题。然而，有些图像是内容，有些又是实际的母版页，因此在继续修改母版页时必须考虑到这一点。
显示的文本不应属于母版页，因此要将其删除，然后再作为内容插入到主页中。

首先看一下我们需要进行哪些修复。我们需要上载用作主体部分背景的图像，并更正母版页中指向它的链接。但是我们需要删除页面底部所有其他的图像。此外还需要删除页面上的所有文本，因为这些内容应该与单一页面关联，而非母版。要开始这项工作，请将 HTML 和 CSS 文件从 SharePoint 母版页样式库的资源管理器视图拖放至 Dreamweaver。您马上会注意到，HTML 页面中多了很多 SharePoint“附带”功能。适应一下 – 即使现在可以使用自己的 HTML 编辑器，您还是需要使用 SharePoint 控件和标签，它们能让一切更加生动。

在 HTML 中滚动时我们会发现，缺少的图像应该属于母版页。它们分别是 banner.gif（来自 HTML）和 main.jpg（来自设置 main_image DIV 背景的模式表）；我们首先解决这些问题。

回到浏览器中，单击“网站操作”(Site actions) 菜单，然后单击“查看网站内容”(View Site Contents) 菜单。单击“网站集图像”(Site Collection Images) 链接，打开文档库。现在我们要将这两张图像上载到库中。库 URL 为 /sitecollectionimages，因此我们要使用 Dreamweaver 更改两张图像的路径以指向该库。如果刷新预览页，您会发现我们已经取得了一些进展：

您可能会注意到，前面的图片中并没有沿着页面底部的黄色 DIV。实际上，第一张图片里已经有了，但浏览器尺寸太大导致无法看到。现在，关于黄色 DIV 比较重要的一点是，SharePoint 在转换过程中将它放了进来，其中包含了页面主要内容的占位符。因此接下来要做的是，取出应属于内容页而非母版页的内容。所以，我们要删除主体部分的文本，以及没有呈现的图像及其下方的文本。还要将占位符 DIV（除去黄色部分）移到页面的主体部分。此外，还要为三个显示图像和文本的区域添加占位符控件。处理布局页时要将它们绑定在一起。

生成的 HTML 中包括注释、SharePoint 特殊处理标签以及确定显示内容位置的占位符。下面是各个部分的样子：

主体：

左列：

中间列：

右列：

页面现在看起来有点空，不过没关系 – 母版页就应该这样：

到了这一步，我们很快就要完成母版页的设计了。我们仍然想要添加一些菜单和搜索框，但我们要稍后再回到这一点。接下来的任务是创建布局页。布局页是用来“连接”数据字段和它在页面上的布局的页面。为此，我们要进入“网站设置”(Site Settings) … 母版页和页面布局。单击功能区的“新建”(New) 按钮，然后选择“页面布局”(Page Layout)。“新建页面布局”(New Page Layout) 屏幕出现时，就可以选择想要与该页面布局关联的内容类型了。您可能还记得在前面的文章中我介绍过如何创建自定义内容类型并称之为 DW Layout。因此，在“关联内容类型”(Associated Content Type) 字段，选择 DW Layout 内容类型。只需为其指定 URL、“标题”(Title) 和“说明”(Description) – 布局页的创建就完成了。此例中，我将 URL 设置为 DWLayoutPage.aspx 页面的 URL，标题为 Dreamweaver Layout Page，添加的说明是 Layout page based on Dreamweaver tutorial site。

现在，布局页就创建好了，但其中还没有任何控件。我们需要向页面上添加一些控件，并将其绑定至在前面介绍的内容类型中的自定义字段：LeftStoryImage、LeftStoryText 等。此外，还需要添加 ASP.NET 占位符控件，这些控件与添加到母版页中的占位符容器相对应。这样一来，每个字段里的数据就与一个容器关联，该容器又输出到母版页上对应的容器占位符中 – 就这样，我们的数据将会呈现在母版页的正确位置上。

认真看一下上面母版页的各项细节，您会发现一共添加了四个内容占位符：PlaceHolderMain、PlaceHolderLeft、PlaceHolderCenter 和 PlaceHolderRight。我需要将这些占位符添加到布局页，然后分别放入合适的内容类型字段。为此，我要再次将新布局页 DWLayoutPage.aspx 从母版页样式库的资源管理器视图拖放至 Dreamweaver。默认情况下，布局页中已经有一个名为 PlaceHolderMain 的占位符控件，所以不需要添加它。但要使用标准 ASP.NET 控件标记添加其他的控件：

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

如您所见，只是指定了 PlaceHolderLeft 的 ID，然后添加 PlaceHolderCenter 和 PlaceHolderRight 的 ID。

就布局页实际需要的字段而言，并不是太多。主内容字段随着基类而生，我们的自定义内容类型就继承自基类。该字段称为 PublishingPageContent。因为它出现在页面的主体部分，我又在 PlaceHolderMain 部分为它添加了一个发布控件，这样一来，这一部分显示如下：

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

其他三个占位符分别需要两个字段 – 一个图像字段和一个富文本字段。因此，我将它们添加进来，然后在标记的 FieldName 属性中再次使用内容类型字段名称。以下示例说明了 PlaceHolderLeft 控件的形式；当然，PlaceHolderCenter 和 PlaceHolderRight 也非常类似：

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

此时，从母版页和布局页的角度来看，设置基本上完成了（除了上面提到的菜单和搜索框）。所以，现在我想要新建一个页面，让它使用我们的新页面布局。

为此，我们进入页面库。单击功能区的“新建”(New) 并选择 "DW Layout"；因为是以从欢迎页面内容类型继承的内容类型为基础，它显示在新的菜单上：

填入必填属性后，应该是这样的：

很好 – 现在我们可以试试看了！首先，返回母版页样式库并发布我的母版页 (index.html)。否则将无法选择它作为网站的母版页。然后返回“网站设置”(Site Settings)，进入母版页设置并选择我的母版页做为网站母版页的母版。一开始决不能将它设为系统母版页，以确保一切正常。如果您的母版页有问题而又将其指定为系统母版页，要恢复之前的内容就会相当麻烦。

完成这些工作后，即可以返回我的页面库，单击刚刚创建的 dwhome.aspx 页面。该操作会使其在浏览器显示，然后可以进行编辑。如您所见，各个部分现在已经协作得很好了：

然后继续，我们要插入 Dreamweaver 原始网站中的数据。既然所有的文本字段都是富 HTML，只需将 Dreamweaver 页面中的原始 HTML 复制并粘贴到 HTML 模式下的字段中即可。

图片就更有趣一些。首先，将其从本地驱动器上载到 SharePoint 中的 Images 文件夹中。一旦它们出现在该文件夹中，我就可以利用 SharePoint 2013 中的另一个名为“图像呈现形式”(Image Renditions) 的全新发布功能。使用该功能，您可以创建一个呈现图像的自定义尺寸。在此例中，Dreamweaver 教程网站上的所有图像大小相同 – 316 像素宽 x 130 像素高。为模仿这一行为，我进入到网站设置 … 图像呈现形式（在“外观”(Look and Feel) 部分下）。您会看到三个现成的图像呈现形式，单击链接即可添加新项目，以自己描述的尺寸创建一个图像呈现形式，并命名为 Column Image。向页面添加图像时，我可以选择使用哪种图像呈现形式来显示页面上的图像；选择 Column Image呈现形式，只需要这样就可以安排好所有一切，如同在 Dreamweaver 网站中一样。

完成后就是这样了，看起来与原始的 Dreamweaver 网站非常相似；下图分别为原始的 Dreamweaver 网站和 SharePoint 版本的网站：

Dreamweaver 网站：

SharePoint 网站：

看起来确实不错；主要区别是一些内置标签，如 H2 和 H3的颜色和字体。现在，只要调整样式表中针对那些区域的内容就可以解决这一问题；您可以决定是一次性处理，还是分别对 H2、H3 等各种标签进行更改。

完成这些细微的 CSS 调整之后，我就有了一个非常酷似 Dreamweaver 原始网站的页面。然后我会继续，选择 dwhome.aspx 页面作为网站主页。最后一项任务是，向母版页添加早先提到的 SharePoint 功能 – 顶部导航和搜索框。

首先，将母版页从资源管理器视图拖回到 Dreamweaver。在浏览器中，转至“网站操作”(Site actions) 菜单并选择“设计管理器”(Design Manager)。单击第四项“编辑母版页”(Edit Master Pages)，然后单击 index.html，这是我们本次练习中的母版页。再次进行预览，现在要单击右上角的“代码段”(Snippets) 菜单。这一超酷的新功能可让我选择不同的 SharePoint 标准页面元素，如顶部和垂直导航、网站标题和徽标、搜索栏、Web 部件等等。在此方案中，为了让一切看起来稍微更“有趣”一点，我向网站中添加了两个名为 Products 和招聘 Careers 的新页面，并为它们创建了导航链接。

回到母版页中，我刚刚在希望显示导航和搜索框的地方添加了新的 DIV 元素。然后进入代码段页，复制顶部导航和搜索框的代码并粘贴到合适的 DIV 中。现在的母版页是这样的（为简洁起见删除了代码段；您只要从代码段页复制粘贴即可获得）：

<div>

</div>

<div>

</div>

我们完成的作品就是这样的，带有 SharePoint 菜单和搜索框：

完成后，我们需要指出有几个问题。首先，对于母版页来说，这并不是一个很好的示例。为什么？因为布局对于主页非常重要，但对于大多数的内容页面来说，使用起来则不够灵活。这整篇文章的关键，实际上是采用在 Dreamweaver 中众所周知的例子，通过 Dreamweaver 工具和 SharePoint 2013 中新的设计管理器功能，使其在 SharePoint 中正常工作。在这方面，我认为我们已经解释得非常清楚了。理想情况下，我们会将目前母版页中的更多内容放在布局页中。例如，如果您将此母版页用作系统母版面，您可能会很不满意；要是这样做，您的窗体和设置页面会是怎样呢（这是网站设置页面的设置范围）：

糟糕！这时要在 UI 中将母版页修复回来几乎是不可能的事情。还好您可以运行这个 PowerShell 小代码段将其设置回最开始的母版页：

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

要说明第二点，我要切换到另一个母版页。一起来看一下我的示例 Contoso 母版页：

看起来不错，是吗？不是特别精致，但网站的基本元素都有了。但如果我们把它设置为系统母版页，然后进行列表或库的设置：

有没有注意到少了什么？通常位于列表信息部分的顶部，让您单击以返回列表内容的痕迹导航没有了。这就是我指出这一点的原因 – 如果进入代码段页面，用于完成这一操作的痕迹导航代码就找不到了。代码段页中有很多不错的代码，但这并不表示它涵盖了用于所有情形的所有控件。那么要如何修复呢？如果在代码段页中找不到需要的内容，您就需要打开 v15.master 文件，在这里找出您的代码段。以下就是 v15.master 中负责此痕迹导航的代码：

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

现在，如果您只是尝试将其复制并粘贴到您的 HTML 母版页，它是不起作用的；因为其中包含了 ASP.NET 标记，而我们使用的是 HTML 页面。SharePoint 2013 使用特别的标签，可让您“包装” ASP.NET 标记，以便让其知道如何更新所创建的与您的 HTML 页面“配对”的 .master 页面。为此，请将您的 ASP.NET 标记放入注释标签；起始标签以 "MS:" 开头，结束标签则以 "ME:" 开头。下面是这同一代码加上这些包装后的样子，这才是要粘贴到 HTML 母版页的内容：

</span>

</PATHSEPARATORTEMPLATE>

将其粘贴到母版后，我们会发现，痕迹导航回到了列表设置页面：

至此，我的长篇大论就要结束了。在这里，您可以了解到 SharePoint 2013 中新的设计管理器功能如何让您使用喜欢的 HTML 编辑器来完成日常的内容管理任务。我们可以使用 Dreamweaver，在 SharePoint 2013 中重建 Dreamweaver 教程网站，对于之前版本的 SharePoint，这是一个伟大的进步。我还介绍了如何使用代码段样式库等功能来向您的母版页添加 SharePoint 功能，以及当您需要一个无法在代码段中找到的功能时应该怎么办。此外，使用您喜爱的 HTML 编辑器的方法同样适用于 SharePoint 2013 中另一项名为“显示模板”的重要功能。这些功能经常用于搜索结果，但搜索在这一版的 SharePoint 中得到了很好的整合，您会发现它们的很多用处。欢迎您经常访问我们的博客网站，全面了解使用查询原则和结果类型创建解决方案的具体方法。

文章附件中包含格式精美的 Word 版文件（内容与本文相同），以及用于创建 Dreamweaver 教程网站最终 SharePoint 版本的源元素。

这是一篇本地化的博客文章。请访问 Using Dreamweaver and Design Manager with SharePoint 2013 以查看原文

Share via

SharePoint 2013 与 Dreamweaver 和设计管理器的完美混搭

Additional resources