要求收集完成后，首先要确定网站是以 Microsoft SharePoint Foundation 2010 为基础，还是以运行 Microsoft SharePoint Server 2010（启用了发布功能）的服务器为基础。发布网站基于 SharePoint Foundation 构建，使用发布网站构建面向 Internet 的引人注目的网站有许多优势。与使用 SharePoint Foundation 网站相比，使用 SharePoint Server 发布网站创建品牌的一些优势包括：

• 允许内容作者使用比 SharePoint Foundation 网站提供的更可靠的格式文本编辑体验创建网页。

• 包含母版页，母版页面向发布网站并使用可充分利用发布功能的特定代码程序集。

• 更轻松地控制通过 Web UI 进行的 Web 导航，并且为设计人员提供了更多选项。

• 使用 Web UI 可以轻松地更改母版页，并且可以将母版页应用于当前网站下的所有子网站。

• 使用页面布局可在页面级别创建模板。使用文字版式可完成简单的页面布局表单。文字版式不可配置。

• 使用 $SPUrl 标记通过相对于网站集 ($SPUrl;~sitecollection/) 或网站根目录 ($SPUrl:~site/) 的 URL 确定 HTML 资产的目标。

注释：
在本文中，发布网站是一个在顶级（根）目录中具有网站集并且该网站集启用了发布功能的 SharePoint Server 2010 Web 应用程序。为了简单起见，默认发布模板（“企业 Wiki”和“发布门户”）已经启用了发布功能。本文在 Adventure Works Travel 示例中使用“企业 Wiki”模板。 要了解有关设置 Web 应用程序和网站集的详细信息，请参阅适用于 SharePoint Server 2007 Web 内容管理网站的规范性指南 （该链接可能指向英文页面）。

开始设计网站和编写网站代码之前，请尽早确定该设计将支持的浏览器和操作系统平台。尽管您应该努力创建尽可能在每个浏览器和每个操作系统中都能够完美呈现的网站设计，但即便是针对这一级别的浏览器兼容性对设计进行成功测试，通常也是不可能且不切实际的。通常，最好选择一组浏览器和操作系统以专门针对它们进行测试，并相应地编写代码以便在打造网站品牌时支持它们。

选择浏览器和操作系统支持级别的一种不错的做法是参考研究并提供 Web 流量分析的专题网站。应用程序的净市场份额（该链接可能指向英文页面）列出了 2010 年 6 月总市场份额排在前 10 位的 Web 浏览器，如表 1 所示。

表 1. 浏览器版本和总市场份额

Microsoft 指明了各浏览器在 SharePoint 中的支持级别。这些级别包括：

• 支持  支持的 Web 浏览器可以与 SharePoint Server 2010 协同工作，并且所有特性和功能都能按预期方式工作。
• 支持但具有已知限制  支持但具有已知限制的 Web 浏览器可以与 SharePoint Server 2010 协同工作，但存在一些已知限制。大多数特性和功能都能正常工作，但如果存在无法正常工作或根据设计被禁用的特性或功能，则会提供有关如何解决这些问题的文档。 
• 未测试：未测试的 Web 浏览器是指它与 SharePoint Server 2010 的兼容性未经过测试，使用这类 Web 浏览器时可能会遇到问题。

有关 SharePoint 中的浏览器支持级别的详细信息，请参阅规划浏览器支持 (Office SharePoint Server)。

注释：
SharePoint 2010 不支持 Internet Explorer 6.0。尽管您可以创建能够在 Internet Explorer 6.0 中正常显示 Web 内容的母版页，但是它与 SharePoint 2010 的创作体验不兼容，后者需要基于新式标准的浏览器。

本文中的 Adventure Works Travel 示例重点介绍如何在 Internet Explorer 7、Internet Explorer 8 和 Firefox 3 中实现尽可能完美的最终用户浏览体验，这样可以确保其他一些新式浏览器（包括 Google Chrome 和 Apple Safari）也能够正常呈现。

要考虑的另一问题是新设计应该面向的屏幕分辨率。多年前，显示器仅支持有限的一组分辨率，如 640 x 480。随着显示器价格的降低，网站访问者以 1920 x 1200 甚至更高分辨率进行浏览的情况越来越常见。大多数网站设计人员认为 1024 x 768 是最常见的屏幕分辨率，紧接着是 1280 x 800。创建要在 SharePoint 网站中显示的设计时，请记住 SharePoint 以用户的典型屏幕分辨率一次呈现大量信息。如果考虑到浏览器工具栏和滚动条也占用屏幕上的一些可用显示区域，则可用于呈现内容的空间就更小了。

在 Adventure Works Travel 示例中，最低屏幕分辨率是 1024 x 768。设计留出了一些边距以供滚动条使用。因为存在边距，所以网站的宽度不能超过 960 像素。

为了帮助确保成功完成品牌打造计划，请设定一些主观性较强的设计目标。哪些访问群体将使用该网站？网站的典型用户希望或需要完成哪些任务？用户希望如何在网站中导航？用户希望与形象较为传统的公司开展业务还是希望与较为现代的公司开展业务？与软件开发过程不同，设计过程对于每个业务环境来说都是主观的。在确定品牌标识之前，利息干系人之间对设计决策通常存在争议。因为品牌创意可能很难评估，所以最好同时确定新品牌的成功标准。成功标准可以非常简单，例如吸引更多访问者；也可以非常复杂，例如计算在主要受众人口统计中销量的增加情况。成功标准越容易量化和衡量，确定品牌打造工作的相对成功程度就越容易。

Adventure Works Travel 网站的设计旨在迎合喜欢个性化外观的年轻用户群。这些用户喜欢使用顶部和左侧导航以及 SharePoint Server 2010 搜索在网站中导航。用户访问网站的主要原因是了解探险目的地和预订假期。该品牌适合这样的旅行社：迎合的受众希望在假期参加更具冒险性的活动，而不是像往常一样呆在海滩上的旅馆中。

框架图通常是一组黑白框图，形象地描述网站的整体结构及其布局、导航和功能，有时甚至描述其内容。由于 Web 设计（或者广义上的设计）的主观特性，最好以框架图的形式讨论这些主题，而不是陷入选择颜色和照片的困境。正确完成后，框架图可以为开发人员和设计人员提供功能和布局方面的相关指导，以便在品牌打造过程的后期阶段应用。

创建框架图有许多方式，从使用简单的笔和纸绘制到使用专用软件工具（如 Microsoft Visio 2010）建模。创建框架图时使用专用软件工具可能非常有帮助，因为您可以利用映射到特定应用程序（如 SharePoint）的特定功能的预建模具。您可以找到许多免费的 模板和模具，可使用它们来创建 SharePoint 网站的框架图。

创建框架图时，要确定品牌支持的 SharePoint 功能。SharePoint 默认情况下显示的内容中有一些并非适合每个面向 Internet 的网站。图 2 标出了 SharePoint 界面的主要功能区域，表 2 介绍了这些功能区域。
图 2. SharePoint 界面的主要功能区域

表 2. SharePoint 界面的主要功能区域

为 SharePoint 网站创建框架图时，一定要考虑 SharePoint 支持的几种页面类型。SharePoint 网站中可以包含的页面类型包括主页、登录页面、搜索结果页面、文章和 Wiki 页面等等。

图 3 显示了 Adventure Works Travel 网站的 Microsoft Visio 2010 框架图。
图 3. Adventure Works Travel 网站的 Visio 2010 框架图

从框架图页面中可以看出，Adventure Works Travel 网站支持一些而非全部 SharePoint 功能。例如，UI 中会去掉“帮助”按钮、树视图和回收站等一些元素。通过在框架图阶段做出这些决策，开发人员不必构建不必要的功能。

使用图层和图层组可将设计元素分开放置在特定单元中。图层不会在一个“平面”文件中创建设计元素，它的工作原理是每个新图层都位于前一图层的上面。设计人员可以隐藏、显示、操纵、移动各个图层，还可以对各个图层应用投影和边框等效果，这些都不影响其他设计元素。使用设计工具创建设计组合时，最好为设计中的每个元素创建一个新图层。

使用各种字体、字号和样式创建可编辑的文字。如果没有此功能，在基本设计程序中创建的文字将是静态的，并且必须清除才能进行各种更改。通过使用新式设计工具，您可以调整文字大小、以粗体显示文字、设置文字颜色或更改字体等等，而不需要清除先前的状态。

以可在 Web 中安全使用的文件格式（如 .jpg, .gif 和 .png）轻松保存图像。许多设计程序可以帮助您以适合 Web 的小型文件创建图像，而不影响它们的质量。

创建设计组合时，人们都很乐意使用功能强大的设计工具创建极其完美或精致的设计。但请注意，创建的设计不能太过精致，否则浏览器可能无法在 SharePoint 页面中将其真实呈现出来。文字就属于此类限制。在 Adobe Photoshop 中，每段文字都可以使用不同的抗锯齿技术。抗锯齿是一种降低图像在以较低分辨率显示时的失真程度的方法。特别是，小型文字在 Photoshop 中的显示效果比在浏览器中平滑得多。为了防止设定的期望值太高，最好避免对小型文字使用抗锯齿。

除了文字抗锯齿，还要考虑 SharePoint 的外观和行为。要在设计组合中准确重现 SharePoint 功能，请截取每项 SharePoint 功能的屏幕截图，并将它们粘贴到设计中。

例如，创建 Adventure Works Travel 设计组合时，要敲定各种颜色和样式。必须获取素材照片、选择字体并创建徽标。在单独的图层中创建每个元素，作为图层效果创建渐变和边框等效果以便日后更改起来更轻松。捕获 SharePoint 元素（如服务器功能区或搜索框）并将它们粘贴到设计工具中，最后以引人注目的方式布置这些元素。图 4 显示最终的 Adventure Works Travel 设计组合。

创建设计组合时，要确定如何重现 SharePoint 中的概念。图 5 显示同一设计组合，并且添加了标签以突出显示每个功能区域。表 3 介绍了这些功能区域。
图 5. 设计组合中的 SharePoint 功能区域

表 3. SharePoint 网站设计组合中的主要功能区域

将设计组合转换为正常运行的 HTML 页面。对于简单的设计，您可以跳过此步骤，但是对于复杂的设计，完成此步骤可使设计人员在熟悉的环境中工作。HTML 代码稍后可用于在 Microsoft SharePoint Designer 2010 等工具中创建母版页。通过首先创建正常运行的 HTML 版本，您可以针对母版页微调 HTML，而不必处理 SharePoint 添加到显示内容中的代码。此步骤完成后，应该会具有功能完备的网站主要页面的 HTML 版本。基本布局的所有级联样式表代码都已完成，所有图像都已从设计组合中分离出来，并且已保存为单独的文件。

可供设计人员用来创建 HTML 的工具集有许多，从记事本或其他用于编写简单 HTML 代码的文本编辑器，到专业的网页开发工具（如 Adobe Dreamweaver 或 Microsoft Expression Web），种类繁多。下面列出了对于设计人员来说，专业网页开发应用程序具有的一些优势：

• 对完成 HTML 和级联样式表代码的支持
• WYSIWIG（所见即所得）设计视图
• 有助于创建兼容多种浏览器的网页的工具

创建兼容多种浏览器的 HTML 时，务必了解 HTML DOCTYPE 声明的工作原理。DOCTYPE 是一种声明，指示浏览器或验证程序使用特定语言解释它描述的 HTML 或 XML 代码。尽管可以创建不声明 DOCTYPE 的 HTML（甚至母版页），但是如果没有它，浏览器可能会以意想不到的方式呈现 HTML 代码。例如，如果不声明有效的 DOCTYPE，则 Internet Explorer 8 将在 Quirks（兼容）模式下呈现 HTML 页面（这与 Internet Explorer 5.5 呈现页面的方式类似）。

目前使用的一些 DOCTYPE 声明可使浏览器以可预测的方式呈现内容。最常见的 DOCTYPE 声明包括以下几种：

• HTML 4.01 Strict   允许使用所有 HTML 元素，但不允许使用已弃用的元素，如标记。
• HTML 4.01 Transitional   允许使用所有 HTML 元素，包括已弃用的元素。
• XHTML 1.0 Strict   与 HTML 4.01 Strict 类似，但是所有标记都必须是格式标准的 XML（例如，必须正确地结束标记）。所有已弃用的元素都将被忽略。 
• XHTML 1.0 Transitional   与 HTML 4.01 Transitional 类似，但是所有标记必须是格式标准的 XML。允许使用已弃用的元素（但是也必须是格式标准的 XML）。 

因为 SharePoint 2010 在默认母版页中使用 XHMTL 1.0 Strict DOCTYPE 声明，所以创建要在 SharePoint 2010 中使用的 HTML 时，请使用 XHTML 1.0 Strict DOCTYPE。

注释：
默认情况下，通过任何万维网联合会 (W3C) 验证检查器检查时，SharePoint 2010 网站可能都不是完全有效的 XHTML 1.0 Strict。SharePoint 2010 中仍使用一些旧控件。尽管不会验证全部页面，但是如果使用 XHTML 1.0 Strict 编写 SharePoint HTML 代码，设计体验会更加可靠。本文中的示例使用 XHTML 1.0 Strict DOCTYPE。

要在 HTML 编辑器工具中创建 XHTML 1.0 Strict 文档，务必创建一个将 DOCTYPE 指定为 XHTML 1.0 Strict 的新空白 HTML 文档。（有关 XHTML 1.0 Strict DOCTYPE 的详细信息，请参阅 W3C XHTML 1.0 Strict 规范。）工具创建的 HTML 页面在打开后会显示以下标记。

在这里，创建 HTML 的其余部分。务必遵循 W3C 指南以创建有效的 XHTML 1.0 Strict 代码。有关 XHTML 1.0 Strict DOCTYPE 的详细信息，请参阅 W3C XHTML 1.0 Strict 规范。本节的其余部分重点介绍为 SharePoint 设计创建 HTML 时需要了解的具体要点。有关创建 HTML 代码的详细信息，请参阅 MSDN HTML 和 DHTML 概述及教程。

另一经常存在争议的设计选择是 HTML 设计布局是否应该使用表，或者是否应该使用标记设置 .css 样式。以前，所有 HTML 布局都是使用表创建的，以提供丰富的 UI，但是随着浏览器的演变，对基于级联样式表的布局的支持也有所变化。因为 HTML 表原本用于显示表格式信息，而不是创建布局，所以正逐渐被 Web 设计人员淘汰。

您应该考虑到，默认情况下 SharePoint 2010 包含的表比以前的版本要少，在 SharePoint 2010 中，基本上只有在显示表格式数据时才使用表。Adventure Works Travel HTML 代码不使用表，而是使用级联样式表确定其整个布局。

随着 Internet Explorer 新版本的发布，浏览器呈现 HTML 的方式可能会随着时间的推移而变化。为了应对各种可能的变化，Microsoft 使用 X-UA-Compatible META 标记，该标记可使特定 Internet Explorer 版本成为 HTML 标记的目标浏览器。默认 SharePoint 2010 母版页设置为强制 Internet Explorer 的当前或未来版本在 Internet Explorer 8 模式下呈现 HTML，如以下标记所示：

<meta http-equiv="X-UA-Compatibile" content="IE=IE8" />

Adventure Works Travel HTML 包含 META 标记，以帮助确保未来的 Internet Explorer 版本能够正确显示 SharePoint HTML。

有关 Internet Explorer 标准模式的详细信息，请参阅未来兼容性中的 META 标记和锁定。

创建设计组合对于理解网页的外观很有用，不仅如此，还可以使用设计组合创建 HTML 将加载的所有单个图像。将大型图像分成单个 Web 图像的一种有效方式是使用设计应用程序（如 PhotoShop 或 Expression Blend）中的“切割”工具。

要基于设计组合创建 Web 图像，请从设计应用程序的相应菜单中打开“切割”工具。在需要转换为 Web 图像的所有区域周围创建矩形选择范围，务必隐藏最终图像中不需要的所有图层（如 SharePoint 创建的模型文字）。单击每个切块并选择相应的 Web 图像文件格式。对于不应该转换为图像的切块，可以选择不将切块与任何图像关联。通常，应该对具有许多颜色的照片使用 .jpg 文件，对于需要透明背景的艺术作品以及文字或图像，应该使用 .gif 文件或 .png 文件。.png 格式的文件能够使用渐变的透明度，而 .gif 文件只有 100% 透明的区域。

打造 SharePoint 网站的品牌时，母版页是最重要的。SharePoint 中的每个页面都使用母版页确定 SharePoint 网站包含的功能和内容的布局。使用 SharePoint 网站创建品牌鲜明的网站的一个关键步骤是创建设计合理的母版页。因为您已经创建了设计组合并且在 HTML 中完成了设计，所以您可以使用它创建自定义母版页。

在 SharePoint 中使用内容占位符

<asp:Panel visible="false" runat=server>
  <asp:ContentPlaceholder ID=PlaceHolderNavSpacer"> runat="server" />
</asp:Panel>

SharePoint 简易母版页

使用 SharePoint 功能区

<div id="s4-workspace"> 
<div id=s4-bodyContainer">
. . . 
</div>
</div>

处理固定宽度的 SharePoint 网页设计

在 SharePoint 网页设计中使用 .css 代码

在 SharePoint 中打造品牌的一个主要方面是 .css 文件中样式表的级联特性。如果两个 .css 规则具有相同的特征，则后加载的 .css 规则是应用于元素的样式。有关此概念的详细信息，请参阅 W3C 的分配属性值、级联和继承。

Microsoft 已充分利用级联并使用它作为使用自定义样式覆盖默认样式的主要方式。在 SharePoint 中默认加载的大量 .css 样式来自 Corev4.css 文件以及 SharePoint 2010 根据特定页面的需要即时加载的其他一些相关 .css 文件。Corev4 和其他默认 .css 文件从 [..]\14\TEMPLATE\LAYOUTS\1033\STYLES 文件夹加载，该文件夹位于 SharePoint 根文件夹中，其中包含大多数 SharePoint 安装文件。

有关在 SharePoint 2010 中默认加载的所有样式的列表，请参阅SharePoint Foundation 中级联样式表类的用法。

品牌打造的一项主要任务是使用自定义 .css 覆盖默认样式，自定义 .css 将重新设置 SharePoint 功能的样式以符合整体网站品牌。在 SharePoint 2010 中，Microsoft 添加了 After 属性以允许自定义 .css 始终在特定 .css 文件（如默认 CoreV4.css 文件）之后加载。以下代码显示用于加载自定义级联样式表的 After 属性。

HTML

 

<SharePoint:CssRegistration name="/Style Library/sitename/style.css" After="corev4.css" runat="server"/>

注释：
After 属性需要较完整的路径才能在其他自定义 .css 文件之后加载某一 .css 文件。例如，要在自定义 style.css 文件之后加载另一 .css 文件，请使用以下代码。 <SharePoint:CssRegistration name="/Style Library/sitename/morestyles.css" After="/Style Library/sitename/style.css" runat="server"/>

 

简易母版页中的 CssRegistration 设置为在发布网站的样式库中的 SiteName 子文件夹下查找自定义 .css。您应该将简易母版页中引用的 SiteName 文件夹替换为实际网站的名称。

注释：

引用 Web 文件（如自定义样式表）时，SharePoint Server 2010 提供了 $SPUrl 标记以表示相对于网站集根目录的 URL 或相对于网站根目录的 URL。可以将简易母版页中的样式表引用编写为使用此功能，如下所示：<SharePoint:CssRegistration name”<% $SPUrl:-sitecollection/Style Library/sitename/style.css %>” After=”corev4.css” runat=”server”/> 在将品牌部署到并非位于 Web 应用程序根目录的网站集时，使用该方法的优点便会突显出来。使用相对于网站集的 URL 可确保样式从网站集自身的样式库加载，而不是从根网站集的样式库加载。使用该方法的缺点是以这种方式引用时 设计视图无法显示某些资产。为了简单起见，本文不在 URL 中使用 $SPURL 变量。

 

考虑品牌对 SharePoint 对话框的影响

SharePoint 2010 中一项强大的新功能是对话框框架。许多菜单页在位于主要页面内容之上的模式对话框中加载。这会影响品牌效果，因为默认情况下所有自定义品牌（包括徽标、页眉、导航和页脚）都显示在对话框内。为了防止品牌元素显示在对话框中，SharePoint 2010 提供了一个名为 s4-notdlg 的级联样式表类。如果将此类应用于某个元素，SharePoint 2010 将自动在对话框中隐藏该元素。在简易母版页中，我使用此类在对话框中隐藏了品牌元素。图 7 显示应用于对话框的自定义品牌。

图 7. 对话框中的自定义品牌

处理 Name.dll ActiveX 控件

<script type="text/javascript"> 
function ProcessImn(){}
function ProcessImnMarkers () {}
</script>

处理旧式浏览器

<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>

使用 SharePoint Designer 创建母版页

应用母版页

签入并批准母版页后，下一步骤是将母版页应用于 SharePoint 网站。

将母版页应用于 SharePoint 网站

1. 依次单击“网站操作”和“网站设置”，然后在“外观”部分单击“母版页”。

2. 对于“网站母版页”和“系统母版页”，选择“AdventureWorks.master”，然后单击“重置所有子网站以继承此网站母版页设置”。

3. 确保“备用 CSS URL”设置为“使用 Microsoft SharePoint Foundation 默认样式”。单击“确定”。

通过将母版页应用于“网站母版页”和“系统母版页”，所有发布页面和应用程序页面都会使用自定义品牌设置样式。这是 SharePoint 2010 中的新功能；默认情况下，在 Office SharePoint Server 2007 中，自定义母版页不应用于应用程序页面（如“网站设置”菜单）。应用设置了丰富样式的母版页（如 Adventure Works Travel）作为“系统母版页”的一个潜在缺点是，需要进行更多测试以确保所有设置页和列表都呈现正确的自定义品牌。对“系统母版页”应用自定义母版页的决策纯粹是业务决策。

注释：
应用于应用程序页面的自定义母版页有时具有特定的用户界面需求。例如，在“网站设置”中，“用户”和“权限”菜单必须具有在自定义母版页中可见的 PlaceHolderLeftNavBar 内容占位符，以显示人员和组。此外，有时如果缺少元素（如必需的内容占位符），应用程序页面不显示错误，而是恢复为显示标准 v4.master 页。

 

应用简易母版页后，网站的外观为空，可以应用品牌。简易母版页当然不太具有吸引力，但是下面几节会解决这一问题。

图 8. 应用于发布网站的简易母版页

1. 在“网站对象”菜单中，单击“所有文件”。在主窗口中的“所有文件”列表中，单击“样式库”。

2. 在功能区上，单击“文件夹”以创建一个新文件夹，并将它命名为 AdventureWorks。

3. 单击新的“AdventureWorks”文件夹，然后拖动 MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面）文章下载内容中 HTML Branding 文件夹内的所有图像、favicon.ico 和 style.css。

4. 选择已添加到“样式库”的所有文件，右键单击，然后选择“签入”。

5. 在“签入”菜单上，单击“发布主要版本”，然后单击“确定”。因为样式库未应用任何审批工作流，所以无需审批文件。

1. Adventure Works 是面向公众的 Internet 网站，设计者决定对匿名用户隐藏功能区，改为显示简单的“User Login”（用户登录）链接。对用户进行身份验证后，“User Login”（用户登录）链接消失，完整的功能区显示在顶部。默认情况下，简易母版页中不包含代码。使用了 <asp:Loginview> 标记，以便对匿名用户和登录用户显示不同的 HTML 代码。新的自定义 <div> 标记包含这段代码。

   HTML

    

   <div class="customTopLeft"> 
   <asp:LoginView id="LoginView1" runat="server"> 
   <AnonymousTemplate>
   <div class="customLogin"<a href="/_layouts/authenticate.aspx">User Login</a></div>
   <style type="text/css" 
   body #s4-ribbonrow {
   display: none;  }
   </style>
   </AnonymousTemplate>
   <LoggedInTemplate>
   <style type="text/css"> 
   .customLogin {
   display: none;  }
   </style>
   </LoggedInTemplate>
   <asp:LoginView>
   </div>
   
   

2. 由于在 SharePoint Server 2010 中，customTop <DIV> 标记不应该显示在对话框中，因此必须添加 s4-notdlg .css 类。

   HTML

    

   <div class="customTop s4-notdlg">
   

3. 静态搜索 HTML 替换为 PlaceHolderSearchArea 占位符和 SmallSearchInputBox 委托控件。

   HTML

    

   <div class="customSearch">
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
     <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
    </asp:ContentPlaceHolder>
   </div>
   
   

4. 在 SharePoint 2010 中，customHeader <DIV> 标记不应该显示在对话框中，因此必须添加 s4-notdlg .css 类。

5. 指向主页的静态链接 (<a class="customLogo" href="#"><img src="logo.png" alt="Back to Home" title="Back to Home" /></a>) 替换为自定义徽标 (<div class="customLogo">) 标记，简易母版页中的 SharePoint 链接按钮 <SharePoint:SPLinkButton> 和 <SharePoint:SiteLogoImage> 标记移动到其中。此外，LogoImageUrl 标记从 sitename 更改为AdventureWorks。这些更改显示在以下标记中。

   HTML

    

   <div class="customLogo">
     <SharePoint:SPLinkButton runat="server"
     NavigateUrl="~sitecollection/">
     <SharePoint:SiteLogoImage LogoImageUrl="/Style Library/AdventureWorks/logo.png" AlternateText="Back to Home" ToolTip="Back to Home" runat="server"/>
     </SharePoint:SPLinkButton>
     </div>
   
   

    

6. 静态导航替换为 SharePoint 全局导航控件以及相应数据源。还可以从 <div class="menu horizontal customTopNavHolder"> 删除菜单以及水平方向的 .css 类，因为 SharePoint 现在将处理此 .css 代码。

   HTML

    

   <div class="customTopNavHolder">
   <PublishingNavigation:PortalSiteMapDataSource
     ID="topSiteMap"
     runat="server"
     EnableViewState="false"
     SiteMapProvider="GlobalNavigation"
     StartFromCurrentNode="true"
     StartingNodeOffset="0"
     ShowStartingNode="false"
     TrimNonCurrentTypes="Heading"/>
   
    <SharePoint:AspMenu
      ID="TopNavigationMenuV4"
      Runat="server"
      EnableViewState="false"
      DataSourceID="topSiteMap"
      AccessKey="<%$Resources:wss,navigation_accesskey%>"
      UseSimpleRendering="true"
      UseSeparateCss="false"
      Orientation="Horizontal"
      StaticDisplayLevels="1"
      MaximumDynamicDisplayLevels="1" 
      SkipLinkText=""
      CssClass="s4-tn">
    </SharePoint:AspMenu> 
   </div>
   
   

7. 在 customHeader 结束 </DIV> 标记和 customMain <DIV> 标记之间添加默认 SharePoint 2010 状态栏 <DIV> 标记，如以下标记所示。

   HTML

    

   </div>
   
   <div class="s4-notdlg">
    <div id="s4-statusbarcontainer">
     <div id="pageStatusBar" class="s4-status-s1"></div>
    </div>
   </div>      
   <div class="customMain">
   
   

8. 接下来将添加左侧导航。但是由于 Adventure Works 品牌具有样式独特的导航，因此最好仅在创建 Adventure Works 发布页面时显示品牌化的导航，而不是在所有应用程序页面上或其他任何位置显示。仅使用 PlaceHolderLeftNavBar 的内容占位符，删除它的任何常见内容，如 AspMenu 和数据源占位符。删除这些占位符可使 Adventure Works 页面布局使用品牌化的导航覆盖该内容占位符，需要左侧导航的任何其他页面也可以使用各自的导航覆盖该占位符。对于不包含左侧导航的页面，将占位符设置为完全隐藏左侧面板，以便界面左侧没有空白区域。另外请注意，外部的 <DIV> ID 标记和 Class 与 HTML 模型中的 customMainLeft 类合并在一起。这种合并可使默认 SharePoint .css 文件应用于左侧导航以及 Adventure Works 的任何自定义品牌。

   HTML

    

   <div id="s4-leftpanel" class="customMainLeft s4-notdlg">
    
    <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
   
     <style type="text/css"> 
      #s4-leftpanel {
       display: none;
      }
      .customMainRight {
       width: inherit;
       padding-left: 10px;
      }
     </style>
    </asp:ContentPlaceHolder>
     
   </div>
   
   

9. 在 HTML 模型中，左侧导航下面显示一个旅行计划工具。在 SharePoint 2010 中，这是适合放置 Web 部件区域的位置。您可以在页面布局中添加 Web 部件区域，但不要在母版页中添加。因此，要添加 Web 部件区域，请在 PlaceHolderLeftNavBar 内容占位符的下方添加 PlaceHolderLeftActions 内容占位符。Adventure Works 页面布局将覆盖PlaceHolderLeftActions 内容占位符，不覆盖此占位符的任何页面都不会在此母版页区域中显示任何内容。

   C#

    

   <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
   
   

10. 大部分页面内容都包含在 customMainRight <DIV> 标记中。添加 s4-ca 类以便 SharePoint 可以使用自己的级联样式表控制该区域。

    HTML

     

    <div class="s4ca customMainRight">
    

11. 接下来，将痕迹导航、页面标题和页面说明放置在各自的 <DIV> 部分并应用 s4-notdlg .css 类，以便不在对话框中显示。对于页面标题和说明来说，这与添加PlaceHolderPageTitleInTitleArea 和 PlaceHolderPageDescription 内容占位符一样简单。痕迹导航需要另外完成一些工作，因为 SharePoint 2010 的默认痕迹导航菜单是页面左上角的弹出菜单。此弹出菜单非常适合 Intranet 网站，但在面向公众的 Internet 网站上无法对匿名用户正常显示。要实现与较传统的痕迹导航相同的功能，请使用 SiteMapPath类：<asp:SiteMapPath runat="server" />。

    HTML

     

    <div class="customMainContent">
     <div class="s4-notdlg">
      <div class="customBreadcrumbs">
       <asp:SiteMapPath runat="server"/>
      </div>     
    
      <h1 class="customPageTitle"><asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /></h1>
      
      <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
     </div>
    

12. customMainContent 部分中的其余 HTML 模型内容由 PlaceHolderMain 内容占位符处理，并且最终由页面布局提供。此代码包含副标题、页面内容和“热门活动”（将成为 Web 部件）。直接删除本部分的所有内容并替换为占位符，如以下示例所示。

    HTML

     

    <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
      </div>
    
      <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
     </div>
    </div>
    
    

13. 由于在 SharePoint 2010 中 customFooter <DIV> 部分不应该出现在对话框中，请添加 s4-notdlg .css 类 <div class="customFooter s4-notdlg">。

14. 上移简易母版页代码中的开发人员仪表板代码并将这些代码放置在 customFooter 结束 </DIV> 标记的后面。

    HTML

     

    </div>
    <div id="DeveloperDashboard" class="ms-developerdashboard">
    <SharePoint:DeveloperDashboard runat="server"/>
    </div>
    
    

15. 删除位于开发人员仪表板结束 </DIV> 标记之后、三个结束 </DIV> 标记和 PlaceholderFormDigest 占位符之前的其余所有简易母版页代码。

1. 向 a:hover 样式添加颜色以确保链接悬停颜色与 SharePoint 中的其余链接相符。

   HTML

    

   a:hover {
    color: #0077b4;
    text-decoration: underline;
   
   

2. 向主要内容区域添加自动滚动效果 (overflow:auto)。

   注释：
   品牌元素将在整个 SharePoint 中使用（包括应用程序页面和列表），所以向主要内容区域添加自动滚动效果可能会有帮助。添加自动滚动效果可使非常宽的页面在品牌内滚动，而不是在品牌外和背景上显示。

    

   HTML

    

   .customMain {
    width: 100%;
    background-color: white;
    min-height: 400px;
    padding:8px 20px;
    width:937px;
    overflow:auto;
   } 
   
   

3. 调整 .customMainRight 类的宽度。.customMainRight 的宽度默认情况下为 760 像素。如果隐藏左侧导航，母版页或页面布局会调整宽度，以展开并填满整个中间区域。

   HTML

    

   .customMainRight { 
    width:760px;
    padding-bottom:15px;
    float: left;
   }
   

4. 从区域的 HTML 模型中删除若干现有样式，这些区域稍后将添加特定 SharePoint 样式，包括搜索、导航、顶部导航和左侧导航的样式。您可以删除下面的每个类以及所有相应的 .css 代码。

   HTML

    

   .menu ul
   .menu ul, .menu li
   .horizontal li
   .customSearch input
   .customSearchGo
   .customSearchGo:hover
   .customTopNavHolder li
   .customTopNavHolder li:hover
   .customTopNavHolder li a
   .customLeftNavHolder li 
   
   

5. 添加若干样式以打造搜索区域的品牌，包括隐藏默认搜索按钮、添加具有悬停效果的品牌化按钮以及为搜索框添加样式。

   HTML

    

   /* search button hider */
   .customSearch .ms-sbgo img {
    display: none;
   }
   
   /* fancy search button */
   .customSearch .ms-sbgo a {
    display: block;
    height:17px;
    width:32px;
    background:transparent url(‘but_go.gif‘) no-repeat scroll left top;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 0px; 
   }
   
   /* search button hover */
   .customSearch .ms-sbgo a:hover {
    background-image: url(‘but_go_on.gif‘);
   }
   
   /* search box style */
   .customSearch input.ms-sbplain {
    font-size:1em;
    height:15px;
    margin-right: 5px;
    background-image: none;
    color: #999999;
   }
   
   

6. 添加若干样式以处理各种顶部导航元素，包括隐藏默认箭头、项目样式和悬停状态、动态弹出项目容器以及弹出项目和悬停状态。

   HTML

    

   /* arrow for flyouts */
   .menu-horizontal a.dynamic-children span.additional-background,
   .menu-horizontal span.dynamic-children span.additional-background {
    padding-right:0px;
    background-image:none;
   }
   
   /* item style */
   .s4-tn li.static > .menu-item {
    white-space:nowrap;
    border:0px none transparent;
    padding:12px 10px 5px;
    display:inline-block;
    vertical-align:middle;
    color:white;
    font-family:arial,helvetica,sans-serif;
    font-size: 105%;
    font-weight: bold;
    background-image:url(‘dottedline.gif‘);
    background-position:right top;
    background-repeat:no-repeat;
    background-color:transparent;
   }
   
   /* item style hover */
   .s4-tn li.static > a:hover {
    color: white; 
    text-decoration: none;
    background-image:url(‘nav_hover.gif‘);
    background-position:right top;
    background-repeat: repeat-x;
   }
   
   /* flyout holder */
   .s4-tn ul.dynamic {
    background-color:#1e4b68;
    border:0px none;
   }
   
   /* flyout item */
   .s4-tn li.dynamic > .menu-item {
    display:block;
    white-space:nowrap;
    font-weight:normal;
    background-color: #1E4B68;
    background-repeat: repeat-x;
    padding:4px 8px 4px 10px;
    font-family:arial,helvetica,sans-serif;
    border-top: 0px;
    color: #ffffff;
   }
   
   /* flyout item hover */
   .s4-tn li.dynamic > a:hover {
    font-weight:normal;
    text-decoration:none;
    background-color: #b5d8ee;
    color: #222222;
   }
   
   

7. 左侧导航仅将样式应用于导航中的项目，不应用于设计。由于 Adventure Works Travel 中的左侧导航不显示弹出项目，因此没有为这些状态添加样式。

   HTML

    

   /* left nav item style */
   .customLeftNavHolder li > .menu-item {
    background-image:url(‘arrow.gif‘);
    background-position:left center;
    background-repeat:no-repeat;
    border-bottom:1px solid #ECF0EF;
    padding:4px 0 4px 14px;
   }
   
   

8. 左侧栏中的 Web 部件需要特殊的样式，以便标题包含品牌元素并减少一些空白和边距。

   HTML

    

   /* Web Part title for left column */
   .customLeftWPHolder .ms-WPTitle {
    color:inherit;
    padding:0px;
    font-family: Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0;
    text-transform: uppercase;
    background-image:url(‘ticket_bg.gif‘);
    background-position:left top;
    background-repeat:no-repeat;
    height:30px;
    line-height:34px;
    padding-left:4px;
   }
   
   /* Web Part padding for left column */
   .customLeftWPHolder .ms-wpContentDivSpace {
    padding: 0px;
   }
   
   /* Remove some white space from Web Parts in left column */
   .customLeftWPHolder .ms-WPHeader .ms-wpTdSpace {
    display:none;
   }
   
   /* remove border from bottom of Web Parts in left column */
   .customLeftWPHolder .ms-WPHeader td {
    border-bottom: none;
   }
   
   

9. 在所有 HTML 设计样式后面，添加若干特定于 SharePoint 的 .css 样式。本部分中每个样式规则的开头都是描述其特定用途的注释。前几个是以内嵌方式包含在简易母版页中的样式。

   HTML

    

   /* hide body scrolling (SharePoint will handle) */ 
   body { 
   height:100%; 
   overflow:hidden; 
   width:100%; 
   } 
   /* Pop-out breadcrumb menu needs background color for Firefox */ 
   .s4-breadcrumb-menu { 
   background:#F2F2F2; 
   } 
   /* If you want to change the left navigation width, change this and the margin-left in .s4-ca */ 
   body #s4-leftpanel { 
   padding-right:20px; 
   } 
   /* body area */ 
   .s4-ca { 
   margin-left:auto; 
   } 
   /* Fix scrolling on list pages */ 
   #s4-bodyContainer { 
   position: relative; 
   } 
   /* Fix the font on some built-in menus */ 
   .propertysheet, .ms-authoringcontrols { 
   font-family: Verdana,Arial,sans-serif;; 
   line-height: normal; 
   } 
   /* Nicer border between top bar and page */ 
   .ms-cui-topBar2 { 
   border-bottom: 1px solid #666666; 
   } 
   /* Hide the hover state for the ribbon links */ 
   #s4-ribbonrow a:hover { 
   text-decoration: none; 
   } 
   /* Fix ribbon line height */ 
   #s4-ribbonrow { 
   line-height: normal; 
   } 
   /* Make site settings links look normal */ 
   .ms-linksection-level1 ul li a { 
   font-weight:normal; 
   } 
   /* Hide the left margin when dialog is up */ 
   .ms-dialog .customCentered, .ms-dialog .customMain, .ms-dialog .customMainRight { 
   margin-left:0 !important; 
   margin-right:0 !important; 
   min-height:0 !important; 
   min-width:0 !important; 
   width:auto !important; 
   height:auto !important; 
   background-color: white !important; 
   background-image: none !important; 
   padding: 0px !important; 
   overflow:inherit; 
   } 
   /* Dialog bg */ 
   .ms-dialog body { 
   background-color: white; 
   background-image: none; 
   } 
   /* Fix dialog padding */ 
   .ms-dialog .s4-wpcell-plain { 
   padding: 4px; 
   } 
   
   

1. 在“网站操作”菜单上，单击“页面布局”。

2. 在功能区上，单击“新建页面布局”。

3. 在“新建页面布局”窗口中，执行以下操作：

   • 对于“内容类型组”，选择“页面布局内容类型”。
     
     
   • 对于“内容类型名称”，选择“欢迎页面”。
     
     
   • 对于“URL 名称”，键入 AW_Layout.aspx。
     
     
   • 对于“标题”，键入 Adventure Works Page。
     
     

4. 单击“确定”。

使用 SharePoint Designer 中的“工具箱”窗格可向页面布局添加字段控件。将要使用的字段控件直接从“工具箱”窗格拖到将包含它们的内容控件。

要向内容控件添加 Web 部件区域，请使用“设计视图”或“拆分视图”在 SharePoint Designer 中选择内容控件，然后在功能区上单击“Web 部件区域”。添加 Web 部件区域会创建一个空白 Web 部件区域，可为该区域指定描述性更强的标题以帮助内容作者在编辑页面时识别它。

通过添加控件、内嵌样式和其他元素完成 Adventure Works Travel 的页面布局。

完成 Adventure Works Travel 页面布局

这是创建 Adventure Works Travel 页面布局所需的全部代码。必须首先签入该页面布局，作为主要版本发布并批准该页面布局，然后内容作者才能基于它创建页面。

自定义页面布局完成后，您可以基于它创建新页面。这对于使用新内容填充网站当然很有用，但是仍必须完成一个步骤才能使主页看起来像初始设计组合。因为主页使用默认页面布局，所以您需要使用自定义 Adventure Works Travel 页面布局替换主页。

注释：
用于创建发布网站的网站模板确定哪些页面布局可供选择。根据创建发布网站时所用的页面布局，您可能需要首先更改可用的页面布局，然后才能选择新页面布局。要更改可用的页面布局，请单击“网站操作”，依次指向“网站设置”和“外观”，然后单击“页面布局和网站模板”。此设置页具有“页面布局”选项，可从中选择可用的页面布局。尝试一些页面布局（包括新自定义页面布局）的最简单方法是选择“此网站中的页面可以使用任何布局”，然后单击“确定”。

 

从主页切换到新页面布局

在这里，可以编辑页面以包含任何内容，包括副标题、页面内容和任何 Web 部件。在 SharePoint Server 2010 中，Web 部件不一定要添加到 Web 部件区域；它们还可以添加到发布页面和 Wiki 页中的丰富 HTML 内容区域。图 11 显示添加了 HTML 模型中的所有内容的最终页面。

完成所有更改后，只需单击功能区左上角的小“保存”图标，或者单击“页面”，然后单击“保存并关闭”。如果对页面库激活了发布工作流，则必须首先发布并批准页面，然后最终用户才能看到新内容。

要部署自定义品牌文件，第一种选择是直接使用网站集备份和还原功能。这种方式在面向 Internet 的方案中不太理想，因为所有文件仍然是自定义文件。有关 SharePoint 中自定义和非自定义文件的差异和含义的详细信息，请参阅了解并在 Windows SharePoint Services 3.0 中创建自定义和非自定义文件 （该链接可能指向英文页面）。如果将品牌文件作为自定义文件部署和管理，重新打造网站品牌的活动可能会变得非常复杂。因此，非自定义品牌打造和管理过程是不错的选择，特别是对于流量较高的网站和填充了大量内容的网站。

部署非自定义品牌文件时，发布网站实施者在确定文件的部署位置时有几种不同的选择。以下是三种最常见的选择：

• 将品牌文件部署到网站的顶级文件夹。
  
  
• 将品牌文件部署到网站的 _layouts 目录。
  
  
• 将品牌文件部署到网站集的内容数据库。
  
  

上述每种选择都有各自的优缺点，MSDN 文章在 SharePoint Server 2007 发布网站中实施品牌 （该链接可能指向英文页面）中介绍了这些优缺点。本文其余的内容假定采用最后一种选择：将品牌文件部署到网站集的内容数据库。通过将品牌文件部署到网站集的内容数据库，维护和将来可能需要的重新打造品牌活动更容易开展。所有文件都将部署到网站集的母版页样式库和“样式库”中，这两个库均位于所有 SharePoint 发布网站集的根网站中。

要将品牌文件部署到网站集的内容数据库中，必须使用 SharePoint 功能框架将文件设置到网站集的内容数据库中，具体说就是“母版页样式库”和“样式库”中。通过功能框架，可在 SharePoint 内容数据库中创建文件的自定义和非自定义实例。源文件（包括图像, .css 文件、JavaScript 库、母版页和页面布局）作为功能的一部分部署并保留在文件系统中。激活功能后，它将源文件的非自定义实例设置到指定位置。

将品牌文件部署到网站集的内容数据库的过程通常由开发人员和管理员处理，因为它涉及将文件放置在文件系统中以及创建功能和 SharePoint 解决方案包（.wsp 文件）。

本文其余部分所选择和演示的打包和部署方法使负责自己专业领域的人员可以只关注该领域。这样，为发布网站实施和部署新品牌的过程可以更加清晰、更加顺利地完成。例如，打造自定义 SharePoint 品牌的过程共分三部分，到目前为止本文已介绍了其中两个：

• 在 SharePoint 中创建品牌时将“欢迎”菜单和“网站操作”控件等考虑在内。
  
  
• 在 SharePoint 中通过以下方式实施品牌：使用母版页和页面布局、覆盖 SharePoint 默认 .css 代码、添加某些 JavaScript 代码以解决面向 Internet 的网站特有的一些问题。
  
  

具有网站和品牌设计者角色的用户负责这两部分。第三部分通常由网站开发人员角色完成，该角色创建 SharePoint 功能和 WSP，它们用于将文件部署和设置到网站集。设计人员需要将品牌化的发布网站移交给开发人员进行打包。网站开发人员从网站集中提取文件并将它们添加到新功能中，然后将该功能添加到解决方案包（.wsp 文件）中，部署 .wsp 文件并通过激活该功能测试品牌文件。如果网站设计人员和开发人员在不同的环境中工作（品牌打造外包出去时就属于这种情况），对于设计人员来说最简单的方法是使用 Windows PowerShell 备份网站集、将备份文件发送给开发人员，让开发人员将网站集还原到新 SharePoint Web 应用程序中。

注释：
本文其余部分假定读者创建了两个 Web 应用程序：http://test.adventure-works.com 和 http://test1.adventure-works.com。http://test.adventure-works.com Web 应用程序应该为空，不包含网站集。http://test1.adventure-works.com Web 应用程序应该在根目录中包含一个基于发布门户模板的网站集。

 

如果设计人员和开发人员在同一共享环境中工作，则无需备份以便将网站集从一个环境转移到另一环境。然而，如果品牌打造工作外包给外部供应商（如代理机构），则开发人员需要通过简单的方法获取所实施品牌的副本。这相当容易。

网站设计人员可以备份网站集，并将备份文件发送给开发人员。备份甚至可以通过电子邮件发送，因为网站集可能不是特别大并且未包含任何内容。使用 Windows PowerShell 备份网站，如以下示例所示。

PS C:\> $siteCollection = Get-SPSite | Where-Object {$_.Url -eq [URL USED WHEN CREATING AND TESTING THE BRAND]}
PS C:\> Backup-SPSite -Identity $siteCollection -Path "C:\AdventureWorksBranded.dat"

将 c:\AdventureWorksBranded.dat 文件交给开发人员。开发人员可以将网站还原到他们的环境中。Microsoft 建议将备份的网站集还原到不包含其他网站集的新 SharePoint Web 应用程序的根目录。以这种方式还原备份可确保不会意外引用其他网站中的文件。要将网站集还原到 http://test.adventure-works.com 网站，请再次使用 Windows PowerShell，如以下代码所示。

PS C:\> Restore-SPSite "http://test.adventure-works.com" -Path "C:\AdventureWorksBranded.dat"

Windows PowerShell 会提示您确认要还原网站。

使用备份/还原方法将网站集从一个环境移到另一环境时，大多数开发人员需要另外执行一个步骤。因为两个环境可能来自不同的域，所以网站集主管理员在还原后的环境中不再是有效的帐户。通过在“应用程序管理”页上选择“网站集管理员”链接，可在“管理中心”中快速更改这种情况。选择备份的网站还原到的网站集，并将网站集主管理员更改为用于登录网站并从中提取文件的帐户。

开发人员现在即可拥有品牌化发布网站的本地副本。

现在开发人员已经拥有品牌化发布网站的本地副本，下一步骤是创建 Visual Studio 2010 项目，该项目将包含功能并将用于创建解决方案包。在 Microsoft Visual Studio 2010 中，Microsoft 引入了可靠的 SharePoint 开发工具以简化该任务。Visual Studio 2010 中的 SharePoint 开发工具包含在安装的 Visual Studio 2010 中。

从品牌化示例发布网站集中提取品牌文件并将它们添加到 Visual Studio 项目中

添加“样式库”文件。

将发布网站的“样式库”中的文件复制到项目中。在浏览器中打开“样式库”，切换到“资源管理器”视图，将文件复制并粘贴到 Visual Studio。

将 SharePoint“样式库”中的文件添加到 Visual Studio 中

将“样式库”中的文件复制到项目中

<Module Name="StyleLibraryModule"
    Url="/Style Library/AdventureWorks"
    RootWebOnly="TRUE">

现在，将设置到“样式库”中的每个文件必须作为子 File 元素添加到 Module 元素中。每个条目都应该指定要设置的文件名称和文件 Type。两个 Type 选项是 Ghostable 和GhostableInLibrary。这两个选项都会将非自定义实例设置到网站集中，但是因为这些文件必须注册为“样式库”中的内容，所以应将类型设置为 GhostableInLibrary。此外，每个 File元素的 Url 属性必须进行更新，以便将文件放置在 Module 元素指定的位置。要更新 Url 属性，请通过将 Module 元素更新为以下标记来删除在 Url 属性中指定的子文件夹。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="StyleLibraryModule"
          Url="Style Library/AdventureWorks"
          RootWebOnly="TRUE">
    <File Path="StyleLibraryModule\bg.gif" Url="bg.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\but_go.gif" Url="but_go.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\but_go_on.gif" Url="but_go_on.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\dottedline.gif" Url="dottedline.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\favicon.ico" Url="favicon.ico" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\footer_bg.png" Url="footer_bg.png" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\glory.jpg" Url="glory.jpg" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\logo.png" Url="logo.png" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\microsoft_logo.gif" Url="microsoft_logo.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\nav_hover.gif" Url="nav_hover.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\style.css" Url="style.css" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\ticket_bg.gif" Url="ticket_bg.gif" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\wp_topactivities.jpg" Url="wp_topactivities.jpg" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\wp_tripplanner.jpg" Url="wp_tripplanner.jpg" Type="GhostableInLibrary" />
    <File Path="StyleLibraryModule\arrow.gif" Url="arrow.gif" Type="GhostableInLibrary" />
  </Module>
</Elements>

接下来，添加母版页样式库中的文件。

部署 Adventure Works Travel 自定义品牌所需的其他文件位于母版页样式库中。需要移动该库中的两个文件：

• AdventureWorks.master，它是用于实施品牌的自定义母版页。
  
  
• AW_layout.aspx，它是页面布局，基于网站主页使用的默认“欢迎页面”内容类型。
  
  

将 SharePoint 母版页样式库中的文件添加到 Visual Studio 中

现在可以从网站集检索文件，并将它们添加到 Visual Studio 项目中。

下载母版页和页面布局

此时，Visual Studio 项目已完成，并且包含应该设置到“母版页样式库”和“样式库”中的所有文件。

确认正确配置了 Microsoft Visual Studio 2010 中的 SharePoint 开发工具自动创建的功能。在 vsstudio2010short 的解决方案资源管理器中，双击 AdventureWorksBranding\Features\Feature1\Feature1.feature 文件以打开功能设计器。请注意，“范围”当前设置为“Web”。将“范围”更改为“网站”，因为此功能必须显示在“管理网站集功能”页上。另外请注意，功能中有两项是您创建的两个模块。

现在 Visual Studio 项目已完成，您可以打包、部署和测试新的品牌打造功能。通过在新 Web 应用程序的根目录下创建干净的发布门户网站集来测试品牌打造功能。创建新 Web 应用程序和发布门户网站集的原因是旨在消除任何文件引用还原的网站集中的文件（如图像或 .css 文件）的可能性。在以下测试中，使用发布门户模板创建了新 Web 应用程序http://test1.adventure-works.com，并且在 Web 应用程序的根目录下创建了新的网站集。

测试新的品牌打造功能