如何客户化定制开发SharePoint风格皮肤

zhouli

很多SharePoint项目都需要为客户定制开发风格皮肤，下面是转自MSDN的一篇文章，详细介绍了定制开发SharePoint风格皮肤的过程：

使用 SharePoint 2010 发布网站实际打造品牌


　　摘要：了解一些基本概念，以帮助您在 Microsoft SharePoint Server 2010 发布网站中创建引人注目的用户界面设计。
　　适用范围： Microsoft SharePoint Server 2010
　　供稿人：Andrew Connell，Critical Path Training LLC（该链接可能指向英文页面） (SharePoint MVP) | Randy Drisgill，SharePoint911（该链接可能指向英文页面） (SharePoint MVP)
　　目录

• 使用 SharePoint 2010 发布网站实际打造品牌简介
  
• 收集 SharePoint 发布网站的设计要求
  
• 规划 SharePoint 品牌打造任务
  
• 为 SharePoint 网站设计创建实际设计组合
  
• 创建 Adventure Works Travel HTML
  
• 为 Adventure Works Travel 创建 .css 文件
  
• 在多个浏览器中测试 SharePoint 网页设计
  
• 在 SharePoint 中创建品牌
  
• 向 SharePoint 添加 .css 和图像文件
  
• 使用 HTML 构建母版页
  
• 为 SharePoint 网站设计制定 .css 规则
  
• 创建自定义页面布局
  
• 使用 SharePoint Designer 编辑页面布局
  
• 打包和部署 SharePoint 品牌
  
• 结论
  
• 其他资源
  

下载代码（该链接可能指向英文页面）

使用 SharePoint 2010 发布网站实际打造品牌简介


　　Microsoft SharePoint Server 2010 发布网站使用“发布功能”提供创建引人注目的 Web 内容管理 (WCM) 网站的功能。这些网站通常用作面向 Internet 的网站，它们需要使用定制的用户界面 (UI) 建立联机公司标识。创建定制 UI（无论是在传统 HTML 页面中还是在 Microsoft SharePoint Server 2010 中）的过程称为打造网站品牌。发布网站使用母版页、页面布局、Web 部件和级联样式表（.css 文件），从而使设计人员和开发人员可以创建品牌化的网站，这些网站的设计可以与当下许多最新热门网站相媲美。本文重点介绍使用发布网站为面向 Internet 的外部网站合理规划和创建设计的机制，如图 1 所示。本文以虚构的旅行社 Adventure Works Travel 为例，该公司希望创建高度品牌化的 SharePoint 网站。
图 1. Adventure Works Travel 网站品牌


收集SharePoint发布网站的设计要求


　　在您准备为 SharePoint 网站创建精美的设计时，首先需要花一些时间精心规划网站。在规划阶段，要收集网站元素（如母版页和页面布局）的设计要求。通过在开始编写代码之前正确理解业务目标，可以避免在项目生命周期的后期艰难而耗时地重新编写代码。
　　收集设计要求时，首先要召开正式的要求收集会议。无论您设计的网站是面向 10 名用户还是 100,000 名用户，都必须满足一些要求，才能将项目视为取得成功。根据网站的复杂性，调整收集的要求的详细程度。例如，在收集要求时，大型网站（无论是具有许多页面还是面向许多用户）可能要比小型的简单网站花费更长时间。在要求收集过程中征求关键业务、市场营销和 IT 利益干系人的意见，务必考虑他们的想法，并确保所有关键利益干系人都完全认可项目。对于品牌打造项目来说，要求收集通常是一项非常困难的任务，有时需要委托给市场营销部门，甚至是外包给外部顾问。尽管征求关键利益干系人的意见很重要，但还要考虑在决策制定过程中征求更多人的意见是否会增加收集要求所需的时间以及是否会增加项目的整体复杂程度。因此，在考虑要征求哪些利益干系人的意见时，要认真考虑谁会提供针对性最强的意见。
　　以下几节介绍开始任何 SharePoint 品牌打造项目之前要了解的一些更重要的概念。

SharePoint Server 2010 发布网站与 SharePoint Foundation 2010 网站


　　要求收集完成后，首先要确定网站是以 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 内容管理网站的规范性指南 （该链接可能指向英文页面）。



面向 SharePoint 发布网站设计的浏览器和平台


　　开始设计网站和编写网站代码之前，请尽早确定该设计将支持的浏览器和操作系统平台。尽管您应该努力创建尽可能在每个浏览器和每个操作系统中都能够完美呈现的网站设计，但即便是针对这一级别的浏览器兼容性对设计进行成功测试，通常也是不可能且不切实际的。通常，最好选择一组浏览器和操作系统以专门针对它们进行测试，并相应地编写代码以便在打造网站品牌时支持它们。
　　选择浏览器和操作系统支持级别的一种不错的做法是参考研究并提供 Web 流量分析的专题网站。应用程序的净市场份额（该链接可能指向英文页面）列出了 2010 年 6 月总市场份额排在前 10 位的 Web 浏览器，如表 1 所示。

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

浏览器版本总市场份额百分比

　　Internet Explorer 8


　　25.18%




　　Internet Explorer 6


　　17.16%




　　Firefox 3.6


　　15.67%




　　Internet Explorer 7


　　12.04%




　　Firefox 3.5


　　5.24%




　　Chrome 4.1


　　5.16%




　　Safari 4.0


　　3.83%




　　Internet Explorer 8 兼容模式


　　3.35%




　　Firefox 3.0


　　2.65%




　　Opera 10.x


　　1.88%


　　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）也能够正常呈现。

适用于 SharePoint 网站设计的屏幕大小


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

定义 SharePoint 网站设计的访问群体和成功标准


　　为了帮助确保成功完成品牌打造计划，请设定一些主观性较强的设计目标。哪些访问群体将使用该网站？网站的典型用户希望或需要完成哪些任务？用户希望如何在网站中导航？用户希望与形象较为传统的公司开展业务还是希望与较为现代的公司开展业务？与软件开发过程不同，设计过程对于每个业务环境来说都是主观的。在确定品牌标识之前，利息干系人之间对设计决策通常存在争议。因为品牌创意可能很难评估，所以最好同时确定新品牌的成功标准。成功标准可以非常简单，例如吸引更多访问者；也可以非常复杂，例如计算在主要受众人口统计中销量的增加情况。成功标准越容易量化和衡量，确定品牌打造工作的相对成功程度就越容易。
　　Adventure Works Travel 网站的设计旨在迎合喜欢个性化外观的年轻用户群。这些用户喜欢使用顶部和左侧导航以及 SharePoint Server 2010 搜索在网站中导航。用户访问网站的主要原因是了解探险目的地和预订假期。该品牌适合这样的旅行社：迎合的受众希望在假期参加更具冒险性的活动，而不是像往常一样呆在海滩上的旅馆中。

规划 SharePoint 品牌打造任务


　　实际为 SharePoint 网站的品牌打造编写代码的过程涉及若干步骤，如创建母版页、页面布局和级联样式表（.css 文件）。打造 SharePoint 品牌的规划过程也可以分为若干步骤，如创建黑白框架图、创建全彩的网站设计组合（简称组合）和创建可正常运行的主要页面的 HTML 和 .css 文件版本。以下各节介绍这些活动，因为它们与创建品牌化的 SharePoint UI 有关。

创建简单的 SharePoint 网站设计框架图


　　框架图通常是一组黑白框图，形象地描述网站的整体结构及其布局、导航和功能，有时甚至描述其内容。由于 Web 设计（或者广义上的设计）的主观特性，最好以框架图的形式讨论这些主题，而不是陷入选择颜色和照片的困境。正确完成后，框架图可以为开发人员和设计人员提供功能和布局方面的相关指导，以便在品牌打造过程的后期阶段应用。
　　创建框架图有许多方式，从使用简单的笔和纸绘制到使用专用软件工具（如 Microsoft Visio 2010）建模。创建框架图时使用专用软件工具可能非常有帮助，因为您可以利用映射到特定应用程序（如 SharePoint）的特定功能的预建模具。您可以找到许多免费的 模板和模具，可使用它们来创建 SharePoint 网站的框架图。
　　创建框架图时，要确定品牌支持的 SharePoint 功能。SharePoint 默认情况下显示的内容中有一些并非适合每个面向 Internet 的网站。图 2 标出了 SharePoint 界面的主要功能区域，表 2 介绍了这些功能区域。
图 2. SharePoint 界面的主要功能区域


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

图中的标签功能区域功能描述

　　A


　　服务器功能区


　　UI 的整个顶部区域是功能区的一部分。显示的内容取决于用户的当前上下文。




　　B


　　网站操作


　　用于与 SharePoint 交互的主菜单，主要由内容作者和管理员使用。




　　C


　　全局痕迹导航控件


　　在 Microsoft Office SharePoint Server 2007 中首次引入的全局痕迹导航控件的新型实现。单击时，该图标显示的动态 HTML 呈现网站的分层视图。使用它可从层次结构中的当前位置导航到上面各级。




　　D


　　“页面状态操作”按钮


　　该按钮用于控制页面状态，通常显示用于编辑或保存当前页面的快捷方式。




　　E


　　功能区上下文选项卡


　　此类选项卡提供特定于 SharePoint 网站功能的菜单。显示的内容会根据用户与其交互的页面对象而异。有些选项卡并非适用于每个网站。




　　F


　　“欢迎”菜单


　　此菜单显示欢迎消息，并且允许用户查看他们的配置文件、注销和以其他用户身份登录。如果安装了其他语言包，则此处还会提供用于更改用户语言的功能。用户未登录时，“欢迎”菜单还会显示“登录”链接。




　　G


　　“开发人员仪表板”按钮


　　该按钮打开通常显示在屏幕底部的开发人员仪表板。开发人员仪表板包含有关页面呈现和查询的统计信息。该图标在开发人员仪表板的显示级别设置为OnDemand（其他选项包括 On 和 Off）时显示。管理员可以使用 Windows PowerShell 或使用 SharePoint API 设置开发人员仪表板的显示级别。




　　H


　　标题徽标


　　有时称为网站图标。它通常显示 SharePoint 网站图标，但也可以显示用户定义的徽标。




　　I


　　痕迹导航


　　这是特定于 v4.master 母版页的痕迹导航性质的控件。它包括“网站标题”和标题区中的标题 的占位符（通常包含“页面标题”）。“网站标题”链接到网站的顶层。




　　J


　　社交按钮


　　用于“顶”某个项以及向内容添加标记和备注。




　　K


　　全局导航


　　有时称为“顶部链接栏”或“顶部导航栏”，它是网站的水平方向上的主要导航机制。




　　L


　　“搜索”区域


　　搜索框用于输入搜索字词以在网站上执行搜索。




　　M


　　帮助按钮


　　帮助按钮链接到 SharePoint 2010 帮助文档。




　　N


　　快速启动


　　提供当前导航。有时称为“左侧导航”。它是与当前位置相关的页面的辅助或垂直方面导航机制。




　　O


　　树视图


　　以 Windows 资源管理器的形式显示网站。由于树视图的外观，它通常非常适合 Intranet 网站。




　　P


　　回收站


　　提供指向网站的“回收站”的链接，回收站是用于存储已删除项的区域。通常，这非常适合 Intranet 网站。




　　Q


　　所有网站内容


　　指向“所有网站内容”页面的链接。它是 Office SharePoint Server 2007 中的“查看所有网站内容”链接。通常，这非常适合 Intranet 网站。




　　R


　　正文区域


　　表示主要内容占位符，其中包括特定于页面的所有内容。如果要呈现页面内容，则必须使用正文区域。


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

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

为SharePoint网站设计创建实际设计组合


　　尽管规划新 SharePoint 网站时创建框架图肯定会对完成重要的品牌打造工作有所帮助，但是在开始编写代码之前，您应该创建完整的设计组合或原型。与框架图不同，大多数 Web 设计组合旨在尽可能真实地模拟实际网站的外观和行为，但不实际创建任何代码。组合包括静态版本的实际照片、徽标、颜色、字体、表单元素以及页面上可能显示的其他设计或结构项目。对于 SharePoint 网站，模拟页面内容意味着模拟 SharePoint 用户界面的许多功能区域。
　　尽管您可以使用任何图形应用程序（甚至使用笔和纸）创建设计组合，但是 Adobe Photoshop 或 Microsoft Expression Design 等应用程序可以大大简化该任务。使用这些应用程序可以为 SharePoint 网站创建易于维护和可重用的设计组合。



注释：

　　尽管本文并不涉及具体的 Adobe Photoshop 或 Microsoft Expression Design 功能，但是介绍了一些常规概念和过程，这些和类似设计应用程序中可能提供了类似的功能。


　　以下各节介绍用于创建设计组合的应用程序常见的功能。

使用设计应用程序中的图层和图层组将各元素分开


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

使用设计应用程序创建可编辑的文字


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

使用设计应用程序创建可在 Web 中安全使用的图像


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

使用设计应用程序创建实际设计组合


　　创建设计组合时，人们都很乐意使用功能强大的设计工具创建极其完美或精致的设计。但请注意，创建的设计不能太过精致，否则浏览器可能无法在 SharePoint 页面中将其真实呈现出来。文字就属于此类限制。在 Adobe Photoshop 中，每段文字都可以使用不同的抗锯齿技术。抗锯齿是一种降低图像在以较低分辨率显示时的失真程度的方法。特别是，小型文字在 Photoshop 中的显示效果比在浏览器中平滑得多。为了防止设定的期望值太高，最好避免对小型文字使用抗锯齿。
　　除了文字抗锯齿，还要考虑 SharePoint 的外观和行为。要在设计组合中准确重现 SharePoint 功能，请截取每项 SharePoint 功能的屏幕截图，并将它们粘贴到设计中。
　　例如，创建 Adventure Works Travel 设计组合时，要敲定各种颜色和样式。必须获取素材照片、选择字体并创建徽标。在单独的图层中创建每个元素，作为图层效果创建渐变和边框等效果以便日后更改起来更轻松。捕获 SharePoint 元素（如服务器功能区或搜索框）并将它们粘贴到设计工具中，最后以引人注目的方式布置这些元素。图 4 显示最终的 Adventure Works Travel 设计组合。


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


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

标签功能区域说明

　　A


　　功能区


　　包含所有标准功能区元素，如“网站操作”菜单和“欢迎”菜单。




　　B


　　标题徽标





　　C


　　“搜索”区域





　　D


　　全局导航





　　E


　　当前导航





　　F


　　痕迹导航


　　使用 SiteMapPath 控件。




　　G


　　字段控件





　　H


　　字段控件





　　I


　　Web 部件





　　J


　　Web 部件




将设计组合转换为 HTML 和 .CSS 代码


　　将设计组合转换为正常运行的 HTML 页面。对于简单的设计，您可以跳过此步骤，但是对于复杂的设计，完成此步骤可使设计人员在熟悉的环境中工作。HTML 代码稍后可用于在 Microsoft SharePoint Designer 2010 等工具中创建母版页。通过首先创建正常运行的 HTML 版本，您可以针对母版页微调 HTML，而不必处理 SharePoint 添加到显示内容中的代码。此步骤完成后，应该会具有功能完备的网站主要页面的 HTML 版本。基本布局的所有级联样式表代码都已完成，所有图像都已从设计组合中分离出来，并且已保存为单独的文件。
　　可供设计人员用来创建 HTML 的工具集有许多，从记事本或其他用于编写简单 HTML 代码的文本编辑器，到专业的网页开发工具（如 Adobe Dreamweaver 或 Microsoft Expression Web），种类繁多。下面列出了对于设计人员来说，专业网页开发应用程序具有的一些优势：

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

DOCTYPES 和 SharePoint


　　创建兼容多种浏览器的 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

<!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.0 Strict//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd><html
xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /><title>Untitled Document</title></head>
<body></body></html>　　在这里，创建 HTML 的其余部分。务必遵循 W3C 指南以创建有效的 XHTML 1.0 Strict 代码。有关 XHTML 1.0 Strict DOCTYPE 的详细信息，请参阅 W3C XHTML 1.0 Strict 规范。本节的其余部分重点介绍为 SharePoint 设计创建 HTML 时需要了解的具体要点。有关创建 HTML 代码的详细信息，请参阅 MSDN HTML 和 DHTML 概述及教程。

是否使用表设计 SharePoint 网站


　　另一经常存在争议的设计选择是 HTML 设计布局是否应该使用表，或者是否应该使用标记设置 .css 样式。以前，所有 HTML 布局都是使用表创建的，以提供丰富的 UI，但是随着浏览器的演变，对基于级联样式表的布局的支持也有所变化。因为 HTML 表原本用于显示表格式信息，而不是创建布局，所以正逐渐被 Web 设计人员淘汰。
　　您应该考虑到，默认情况下 SharePoint 2010 包含的表比以前的版本要少，在 SharePoint 2010 中，基本上只有在显示表格式数据时才使用表。Adventure Works Travel HTML 代码不使用表，而是使用级联样式表确定其整个布局。

HTML 和未来的 Internet Explorer 与 SharePoint 的兼容性


　　随着 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 标记和锁定。

将设计组合切割成 Web 图像


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

创建 Adventure Works Travel HTML


　　现在已经创建了所有单独的 Web 图像，下一步骤是为 Adventure Works Travel 的 HTML 和 .css 文件编写代码。我使用 Adobe Dreamweaver CS3 创建了 XHTML 1.0 Strict HTML 文件。HTML 标记的其余部分可在与本文相关联的可下载文件中找到（请参阅 MSDN 代码库中的 MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面））。



注释：

　　本示例中的 HTML 不使用表创建布局，而是频繁地使用标记划分页面的逻辑区域。此 HTML 已接受 W3C 标记验证服务（该链接可能指向英文页面）的检查，符合 XHTML 1.0 Strict。


　　
　　

为 Adventure Works Travel 创建 .css 文件


　　由于所有布局设计都使用了 .css 代码，因此只使用 HTML 标记将无法创建有吸引力的网页。在与本文相关联的可下载文件中，找到创建的 .css 代码，这些代码用于设置 HTML 元素的所有颜色、字体、图像和位置（请参阅 MSDN 代码库中的 MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面））。在 Adventure Works Travel HTML 文件中，已通过 <head> 部分中的以下代码关联此 .css 文件。






HTML








<link rel="stylesheet" href="style.css" type="text/css">

　　有关创建 .css 代码以设置 HTML 网页样式的详细信息，请参阅 MSDN CSS 参考。

在多个浏览器中测试 SharePoint 网页设计


　　现在所有 HTML、图像和 .css 文件都已创建完毕，您可以测试网页，以确保它看起来与设计组合尽可能相似。图 6 显示完成的 Adventure Works Travel 网页在 Internet Explorer 中的效果。


图 6. 完成的 Adventure Works Travel 网页在 Internet Explorer 中的效果
　　在将 HTML 设计转换为正常运行的 SharePoint 网站之前，在尽可能多的浏览器中测试设计。除了 Internet Explorer 之外，通过安装 Mozilla Firefox、Google Chrome 和 Apple 的 Safari for Windows，您可以针对许多不同的浏览方案测试 Web 设计。在多个浏览器中进行测试的另一选择是使用 Expression Web Super Preview（该链接可能指向英文页面）。此应用程序在 Expression Web 3 中提供，也可以免费下载，免费下载版本只能测试 Internet Explorer 版本。完整版本可以测试非 Microsoft 创建的浏览器，如 Firefox。两个版本都可以使用不同的呈现引擎并排显示页面，并且都可以对最细微的差异进行非常精细的检查。

在 SharePoint 中创建品牌


　　现在，我将重点介绍如何在发布网站中创建品牌。您将了解如何使用简易母版页，以及如何添加自定义 HTML 标记和 .css 代码以创建与原 Adventure Works Travel HTML 页面极其相似的母版页。最后，您将了解页面布局的相关信息，包括如何为 Adventure Works Travel 创建页面布局。本节将帮助您完成 Adventure Works Travel 的 SharePoint 品牌打造。

构建自定义 SharePoint 母版页


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

在 SharePoint 中使用内容占位符


　　除了引用和使用所有特定 SharePoint 控件之外，SharePoint 中的母版页还需要一组特定的内容占位符。如果从母版页中删除这些必需的内容占位符，则 SharePoint 会在浏览器中显示一个错误。许多时候，特定网站设计中不使用必需的内容占位符；这种情况下，如果有办法隐藏必需的内容占位符会很有帮助。通过在隐藏的 面板控件中嵌套内容占位符，可以在不导致错误的情况下将它们从呈现的页面中删除。以下代码显示放置在隐藏面板中的内容占位符。













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

　　有关如何在 SharePoint 默认母版页中使用内容占位符的详细信息，请参阅 Windows SharePoint Services 3.0 网站中 Default.Master 上的默认内容占位符。

SharePoint 简易母版页


　　因为 SharePoint 需要许多特定内容占位符，所有从头开始创建自定义母版页可能很有挑战性。尽管可以从任何默认母版页开始创建新自定义母版页，但是它们包含在开始之前必须删除的大量品牌打造代码。更好的方法是从简易母版页开始，简易母版页是预配置的母版页框架，仅包含在 SharePoint 中创建正常运行的页面所必需的功能。有关 SharePoint Server 2010 母版页中使用的内容占位符的列表，请参阅将现有母版页升级到 SharePoint Foundation 母版页。
　　本文的下载内容中包含一个适用于面向 Internet 的发布网站的简易母版页，其中包含的注释浅显易懂。总体来说，这是 SharePoint 的一个传统简易母版页，但是它使用了一些专用于发布的元素，最值得注意的是导航控件。该简易母版页应该适用于大多数默认 SharePoint 2010 页面，包括应用程序页面（如“网站设置”）、列表和文档。
　　简易母版页的每个部分都包含注释，这些注释标明了所表示的 SharePoint 功能区域。以下各节介绍在 SharePoint 2010 中使用母版页时需要注意的一些要点，特别是与简易母版页相关的要点。

使用 SharePoint 功能区


　　简易母版页的布局与默认母版页非常相似，所以它的功能区同样“固定”在可视页面的顶部。启用功能区定位系统后，SharePoint 可管理页面滚动，在允许大型页面滚动的同时仍始终在浏览器窗口的顶部显示功能区。要实现此效果，请在 .css 代码和标记中禁用页面滚动，并将正文内容（功能区下的所有内容）放置在两个特定标记中，如下所示。






HTML








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

　　SharePoint 会查找这些标记，然后仅向该区域而不是功能区添加滚动效果。由于功能区定位系统管理滚动效果和功能区位置的方式，在使用非常复杂的 .css 布局时，可能需要禁用它并使用较为传统的滚动方法。要详细了解功能区定位系统如何工作，或者如何更改它以使用较为传统的滚动方法，请参阅 SharePoint 2010 母版页中的自定义功能区定位（该链接可能指向英文页面）。

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


　　SharePoint 2010 中功能区定位系统的部分功能涉及基于浏览器窗口的大小自动设置页面宽度和高度。默认 SharePoint 品牌对其布局使用整个浏览器宽度；使用固定宽度（通常在页面中间居中）的自定义品牌必须将名为 s4-nosetwidth 的特殊 .css 类应用于 Workspace 元素。简易母版页设置为使用此 s4-nosetwidth 类实例；对于必须占满整个浏览器宽度的设计，应该删除该类。

在 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 控件


　　显示面向 Internet 的发布网站时，Internet Explorer 浏览器会在未将 SharePoint 2010 服务器添加到受信任的网站列表时显示一条烦人的消息。此消息要求用户添加 Name.dll ActiveX 控件。
　　通常，SharePoint 的匿名用户不使用此控件，如果要求加载此控件，则很可能会使不熟悉 SharePoint 的用户放弃使用。您可以在“管理中心”的“管理 Web 应用程序”部分的“常规设置”页上禁用该消息。请将“对成员启用人名智能标记和联机状态显示”设置为“否”。
　　您可以通过向母版页添加 ECMAScript（JavaScript、JScript）代码禁止显示该消息。简易母版页包含以下 JavaScript 代码，这些代码将隐藏该消息。






JavaScript








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

　　有关联机状态的详细信息，请参阅 SharePoint 2010 中的联机状态（该链接可能指向英文页面）。

处理旧式浏览器


　　大多数情况下，由于 SharePoint 2010 不支持 Internet Explorer 6 浏览器，Microsoft 建议警告 Internet Explorer 6 用户，他们的体验可能会受影响。Microsoft 提供了一个可在母版页中使用的 WarnOnUnsupportedBrowsers 控件，以警告用户他们的浏览器不受支持，如以下示例所示。






HTML








<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>

　　简易母版页在靠近代码底部的位置使用 WarnOnUnsupportedBrowsers 控件；要禁用该通知，请从母版页中删除该控件。

使用 SharePoint Designer 创建母版页


　　在简易母版页的代码准备就绪后，将母版页添加到 SharePoint 中。Microsoft SharePoint Designer 2010 非常适合执行此任务。

使用 SharePoint Designer 2010 向 SharePoint 添加简易母版页

• 　　在 Microsoft SharePoint Designer 2010 中打开 SharePoint Server 2010 发布网站。
  
  
• 　　在“网站对象”面板中，单击“母版页”。这会打开母版页样式库，所有母版页和页面布局都在这里创建。
  
  
• 　　在功能区上，单击“空白母版页”，然后将它命名为 AdventureWorks.master。
  
  
• 　　单击名为 AdventureWorks.master 的文件，然后在功能区上单击“编辑文件”。SharePoint 会打开包含默认内容的新母版页。
  
  
• 　　选择所有内容，然后按 Delete 以删除。接下来，复制“StarterPublishing.master”（随文章下载内容提供）的内容并粘贴到 AdventureWorks.master。
  
  
• 　　要保存更改，请在 SharePoint Designer 2010 中单击“保存”。
  
  
• 　　在“网站对象”菜单中，单击“母版页”，右键单击“AdventureWorks.master”，然后单击“签入”。在“签入”菜单上，选择“发布主要版本”，然后单击“确定”。
  
  
• 　　由于对母版页样式库应用了审批工作流，所以会显示一条警告：“此文档要求内容审批。是否要查看或修改其审批状态?”。单击“是”。
  
  
• 　　SharePoint Web 界面会在浏览器中打开。如果要求您进行身份验证，请使用您的用户名和密码登录。
  
  
• 　　“母版页样式库”将会打开，并显示按“审批状态”分组的视图。在“AdventureWorks.master”的右侧单击，然后单击“批准/拒绝”。
  
  
• 　　对于“审批状态”，请选择“已批准”，然后单击“确定”。
  
  
  
  注释：
  
  　　要将母版页添加到 SharePoint，请将它们作为主要版本签入，然后在除签出文件的用户以外的其他用户之前发布并批准它们，以允许用户访问应用了该母版页的网站。这同样适用于对母版页所做的所有更改：只有在作为主要版本签入、发布并批准更改后，其他用户才能看到更新。
  
  
  　　
  
  

　　在 SharePoint Designer 2010 中处理 SharePoint 文件时，请注意，SharePoint 会将它们置于自定义状态，这可能会影响网站维护。本文的最后一节介绍以非自定义状态将品牌文件部署到 SharePoint 的过程。由于会进行自定义，因此最好仅在开发环境中通过 SharePoint Designer 处理品牌文件，而不是在运行 SharePoint 的生产服务器上处理文件的最终版本。有关在 SharePoint 中创建非自定义文件的详细信息，请参阅了解并在 Windows SharePoint Services 3.0 中创建自定义和非自定义文件 （该链接可能指向英文页面）。尽管本文提到的是 SharePoint 的早期版本，但是所有概念和代码也适用于 SharePoint 2010。

应用母版页


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

将母版页应用于 SharePoint 网站

• 　　依次单击“网站操作”和“网站设置”，然后在“外观”部分单击“母版页”。
  
  
• 　　对于“网站母版页”和“系统母版页”，选择“AdventureWorks.master”，然后单击“重置所有子网站以继承此网站母版页设置”。
  
  
• 　　确保“备用 CSS URL”设置为“使用 Microsoft SharePoint Foundation 默认样式”。单击“确定”。
  
  

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



注释：

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


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


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

向 SharePoint 添加 .css 和图像文件


　　Adventure Works Travel 的品牌需要 .css 文件和图像才能正常工作。之前已经为 HTML 模型创建了这些文件和图像，它们随与 MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面）相关联的可下载代码提供。

向样式库添加品牌文件

• 　　在“网站对象”菜单中，单击“所有文件”。在主窗口中的“所有文件”列表中，单击“样式库”。
  
  
• 　　在功能区上，单击“文件夹”以创建一个新文件夹，并将它命名为 AdventureWorks。
  
  
• 　　单击新的“AdventureWorks”文件夹，然后拖动 MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面）文章下载内容中 HTML Branding 文件夹内的所有图像、favicon.ico 和 style.css。
  
  
• 　　选择已添加到“样式库”的所有文件，右键单击，然后选择“签入”。
  
  
• 　　在“签入”菜单上，单击“发布主要版本”，然后单击“确定”。因为样式库未应用任何审批工作流，所以无需审批文件。
  
  

使用 HTML 构建母版页


　　在将所有品牌文件添加到 SharePoint 网站后，下一步是开始将 HTML 设计中的代码添加到简易母版页中。添加 HTML 时，也是执行以下操作的最佳时机：开始在整体布局中四处移动简易母版页的各个区域并进行任何其他特定于网站的更改。确认 Adventure Works.master 已在 SharePoint Designer 2010 中打开，并且已签出以进行编辑。要签出文件，请单击“网站对象”菜单上的“母版页”。在主窗口中，如果 AdventureWorks.master 旁边没有绿色的复选标记，请右键单击该文件，然后单击“签出”。
　　对于 Adventure Works Travel 网站，该过程首先处理简易母版页的部分。该部分的三个区域包含的 Site Name 字样可以更改为 Adventure Works，包括PlaceHolderPageTitle、SPShortcutIcon 和 CssRegistration 占位符。






C#








<title runat="server"><asp:ContentPlaceHolder id="PlaceHolderPageTitle"
runat="server">Adventure Works</asp:ContentPlaceHolder></title>







C#








<SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/AdventureWorks/favicon.ico"/>







C#








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

　　Adventure Works 具有自己的自定义样式表，因此简易母版页的部分中包含的内嵌 .css 代码可以移动到以下路径：Style Library/AdventureWorks/style.css。



注释：

　　您可以忽略代码的整个功能区部分。除非出现特殊情况，否则大多数母版页都可以使用默认功能区代码。


　　
　　接下来，复制原 HTML 设计中 <form> 和 </form> 标记之间的所有内容并将其粘贴到母版页中的 <div id="MSO_ContentDiv" runat="server"> 标记后面。接下来的几节介绍哪些 SharePoint 功能区域将从简易母版页中较靠下的部分上移到粘贴的 HTML 代码中。



注释：

　　下面的某些信息可能很难理解，因此打开 Adventure Works 母版页的最终版本（随文章下载内容提供）并参考它来理解所述内容可能会有帮助。


　　

使用 HTML 构建母版页

• 　　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>
  
• 　　由于在 SharePoint Server 2010 中，customTop <DIV> 标记不应该显示在对话框中，因此必须添加 s4-notdlg .css 类。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  <div class="customTop s4-notdlg">
  
• 　　静态搜索 HTML 替换为 PlaceHolderSearchArea 占位符和 SmallSearchInputBox 委托控件。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  <div class="customSearch">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
  </asp:ContentPlaceHolder>
  </div>
  
• 　　在 SharePoint 2010 中，customHeader <DIV> 标记不应该显示在对话框中，因此必须添加 s4-notdlg .css 类。
  
  
• 　　指向主页的静态链接 (<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>
  
  　　
  
  
• 　　静态导航替换为 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>
  
• 　　在 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">
  
• 　　接下来将添加左侧导航。但是由于 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>
  
• 　　在 HTML 模型中，左侧导航下面显示一个旅行计划工具。在 SharePoint 2010 中，这是适合放置 Web 部件区域的位置。您可以在页面布局中添加 Web 部件区域，但不要在母版页中添加。因此，要添加 Web 部件区域，请在 PlaceHolderLeftNavBar 内容占位符的下方添加 PlaceHolderLeftActions 内容占位符。Adventure Works 页面布局将覆盖PlaceHolderLeftActions 内容占位符，不覆盖此占位符的任何页面都不会在此母版页区域中显示任何内容。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
  
• 　　大部分页面内容都包含在 customMainRight <DIV> 标记中。添加 s4-ca 类以便 SharePoint 可以使用自己的级联样式表控制该区域。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  <div class="s4ca customMainRight">
  
• 　　接下来，将痕迹导航、页面标题和页面说明放置在各自的 <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>
  
• 　　customMainContent 部分中的其余 HTML 模型内容由 PlaceHolderMain 内容占位符处理，并且最终由页面布局提供。此代码包含副标题、页面内容和“热门活动”（将成为 Web 部件）。直接删除本部分的所有内容并替换为占位符，如以下示例所示。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
  </div>
  <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
  </div>
  </div>
  
• 　　由于在 SharePoint 2010 中 customFooter <DIV> 部分不应该出现在对话框中，请添加 s4-notdlg .css 类 <div class="customFooter s4-notdlg">。
  
  
• 　　上移简易母版页代码中的开发人员仪表板代码并将这些代码放置在 customFooter 结束 </DIV> 标记的后面。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  </div>
  <div id="DeveloperDashboard" class="ms-developerdashboard">
  <SharePoint:DeveloperDashboard runat="server"/>
  </div>
  
• 　　删除位于开发人员仪表板结束 </DIV> 标记之后、三个结束 </DIV> 标记和 PlaceholderFormDigest 占位符之前的其余所有简易母版页代码。
  
  

　　此时，Adventure Works Travel 母版页已完成。您应该签入母版页、作为主要版本发布它，然后批准它，以便用户可以看到变化。尽管此时母版页已完成，但是网站看起来仍不像最终设计。网站需要向 style.css 文件添加更多自定义 .css 代码才能完成外观的设计。

为 SharePoint 网站设计制定 .css 规则


　　将所有 .css 文件和图像添加到“样式库”之后，您可以看到 style.css 文件，该文件包含确定 HTML 设计的外观的所有样式。为了使级联样式表与其他 SharePoint 功能协同工作，需要对 .css 代码进行一些更改。本节首先更改 HTML 设计区域的必须更新的 .css 代码，然后添加一大段 .css 代码，这些代码用于设置 SharePoint 功能元素的样式。



注释：

　　在 SharePoint 中处理 .css 代码可能很有挑战性，因为应用的 .css 规则数量巨大。一次使用超过 5,000 行 .css 代码时，设计人员和开发人员通常求助于工具，来帮助他们处理 SharePoint 中的 .css 文件。Internet Explorer 8 开发人员工具和 Firebug FireFox 插件就是两个这样的工具。这两个工具都可用于检查和处理应用于网页（包括 SharePoint 页面）的 .css 代码。这两个工具共有的一项重要功能是，通过指向页面区域，便可更好地了解应用于该区域的所有 .css 代码并查看 .css 级联覆盖了哪些规则。


　　

更新 SharePoint 网站设计的 .css 代码

• 　　向 a:hover 样式添加颜色以确保链接悬停颜色与 SharePoint 中的其余链接相符。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  a:hover {
  color: #0077b4;
  text-decoration: underline;
  
• 　　向主要内容区域添加自动滚动效果 (overflow:auto)。
  
  
  
  注释：
  
  　　品牌元素将在整个 SharePoint 中使用（包括应用程序页面和列表），所以向主要内容区域添加自动滚动效果可能会有帮助。添加自动滚动效果可使非常宽的页面在品牌内滚动，而不是在品牌外和背景上显示。
  
  
  　　
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  .customMain {
  width: 100%;
  background-color: white;
  min-height: 400px;
  padding:8px 20px;
  width:937px;
  overflow:auto;
  }
  
• 　　调整 .customMainRight 类的宽度。.customMainRight 的宽度默认情况下为 760 像素。如果隐藏左侧导航，母版页或页面布局会调整宽度，以展开并填满整个中间区域。
  
  
  
  
  
  
  HTML
  
  
  
  
  
  
  
  
  .customMainRight {
  width:760px;
  padding-bottom:15px;
  float: left;
  }
  
• 　　从区域的 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
  
• 　　添加若干样式以打造搜索区域的品牌，包括隐藏默认搜索按钮、添加具有悬停效果的品牌化按钮以及为搜索框添加样式。
  
  
  
  
  
  
  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;
  }
  
• 　　添加若干样式以处理各种顶部导航元素，包括隐藏默认箭头、项目样式和悬停状态、动态弹出项目容器以及弹出项目和悬停状态。
  
  
  
  
  
  
  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;
  }
  
• 　　左侧导航仅将样式应用于导航中的项目，不应用于设计。由于 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;
  }
  
• 　　左侧栏中的 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;
  }
  
• 　　在所有 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;
  }
  

　　将最后几个样式规则添加到 style.css 后，Adventure Works Travel 品牌的 .css 代码就完成了。签入 style.css 文件并将它作为主要版本发布，以便最终用户可以看到变化。图 9 显示有了很大改观的 SharePoint 品牌。


图 9. 即将完成的 SharePoint 品牌作业



注释：

　　页面的内容部分看起来仍不像设计模型。此区域将使用自定义页面布局打造品牌。


　　

创建自定义页面布局


　　通过使用页面布局作为发布网站中的一种页面模板，设计人员和开发人员可创建将在母版页设计中使用的不同类型的页面设计。除了覆盖母版页的内容占位符外，页面布局还使用字段控件、Web 部件和 Web 部件区域定义所有可编辑的页面内容区域。要了解有关字段控件与 Web 部件的差异的详细信息，请参阅了解 SharePoint Server 2007 发布网站中的字段控件和 Web 部件 （该链接可能指向英文页面）。尽管本文面向 Office SharePoint Server 2007，但概念和功能同样适用于 SharePoint 2010。
　　SharePoint 中的每个页面布局都是基于一种特定 SharePoint 内容类型创建的。内容类型定义可用于存储页面数据的所有网站栏。这些网站栏组成可在页面布局中使用的可用字段控件。为了简单起见，Adventure Works Travel 页面布局将使用现有的默认欢迎页面内容类型。此内容类型具有创建 Adventure Works Travel 页面所需的足够多的网站栏，并且现有主页布局可轻松替换为新页面布局。

创建 Adventure Works Travel 页面布局

• 　　在“网站操作”菜单上，单击“页面布局”。
  
  
• 　　在功能区上，单击“新建页面布局”。
  
  
• 　　在“新建页面布局”窗口中，执行以下操作：
  
  
  
  • 对于“内容类型组”，选择“页面布局内容类型”。
    
  • 对于“内容类型名称”，选择“欢迎页面”。
    
  • 对于“URL 名称”，键入 AW_Layout.aspx。
    
  • 对于“标题”，键入 Adventure Works Page。
    
  
  
  
• 　　单击“确定”。
  
  

　　SharePoint Designer 会打开创建了 PlaceHolderPageTitle 和 PlaceHolderMain 内容占位符的新页面布局。






C#








<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
</asp:Content>


使用 SharePoint Designer 编辑页面布局


　　接下来，将通过添加字段控件和 Web 部件区域来编辑 Adventure Works Travel 页面布局。您可以从 SharePoint Designer 中的特定任务窗格轻松添加这些元素。



注释：

　　必须使用 SharePoint Designer 2010 中的高级模式编辑页面布局。如果尝试在正常模式下编辑页面布局，所有内容都将以黄色突出显示，以指示内容不可编辑。新页面布局自动在高级模式下打开；打开现有页面布局时，在功能区上指向“编辑文件”，然后单击“在高级模式下编辑文件”。


　　

字段控件


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

Web 部件区域


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

完成 Adventure Works Travel 页面布局


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

完成 Adventure Works Travel 页面布局

• 　　添加 PlaceHolderAdditionalPageHead 内容控件和一些内嵌样式，以控制页面左侧和右侧区域的宽度。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:Content ContentPlaceholderID="PlaceHolderLeftActions" runat="server">
  <div class="customLeftWPHolder">
  <WebPartPages:WebPartZone id="LeftZone" runat="server" title="Left Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  </asp:Content>
  
• 　　向页面布局添加 PlaceHolderPageTitle 内容控件，并在 PageTitle 字段控件前面添加文本 Adventure Works -。这些操作会在页面标题前面插入该文本，并将所有文本放置在 HTML 页面标题中。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
  Adventure Works - <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
  </asp:Content>
  
• 　　添加包含 TitleField 字段控件的 PlaceHolderPageTitleInTitleArea 内容控件。这些控件会在页面内容前面添加页面标题。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
  <SharePointWebControls:TextField runat="server" id="TitleField" FieldName="Title"/>
  </asp:Content>
  
• 　　向页面添加 PlaceHolderLeftNavBar 以添加 HTML 模型中的“相关链接”标题，然后添加从简易母版页中删除的左侧导航 AspMenu 和数据源。添加这些内容会使基于此页面布局创建的页面显示品牌化的左侧导航。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server">
  <div class="customTicketTitle">
  <h1>RELATED LINKS</h1>
  </div>
  <PublishingNavigation:PortalSiteMapDataSource
  ID="SiteMapDS" runat="server" EnableViewState="false" SiteMapProvider="CurrentNavigation" StartFromCurrentNode="true"
  StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/>  
  <SharePointWebControls:AspMenu
  ID="CurrentNav" runat="server" EnableViewState="false" DataSourceID="SiteMapDS" UseSeparateCSS="false"
  UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0"
  CssClass="customLeftNavHolder" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/>
  </asp:Content>
  
• 　　PlaceHolderMain 内容占位符的以 <WebPartPages:SPProxyWebPartManager /> 控件开头，该控件是在页面布局中使用 Web 部件区域时由 SharePoint Designer 自动添加的。接下来，添加 Comments 字段控件以允许内容作者编辑页面的副标题。然后添加 PublishingPageContent 字段控件。此控件包含页面的主要发布 HTML 内容。
  
  
  
  
  
  
  C#
  
  
  
  
  
  
  
  
  <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
  <WebPartPages:SPProxyWebPartManager runat="server" id="ProxyWebPartManager"></WebPartPages:SPProxyWebPartManager>
  <div class="customSubTitle">
  <SharePointWebControls:NoteField FieldName="Comments" InputFieldLabel="SubTitle" DisplaySize="50" runat="server"></SharePointWebControls:NoteField>
  </div>
  <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" runat="server"/>
  </asp:Content>
  

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

更改页面的页面布局


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



注释：

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


　　

从主页切换到新页面布局

• 　　单击“网站操作”，然后单击“编辑网页”。
  
  
• 　　在功能区上，单击“页面”，然后单击“页面布局”。在“欢迎页面”组下的下拉列表中，选择“Adventure Works Page”。
  
  
• 　　页面将刷新，新页面布局应用于该页面，如图 10 所示。
  
  

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


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

打包和部署 SharePoint 品牌


　　此时，Adventure Works Travel 网站品牌已创建，并且已应用于现有 SharePoint 发布网站。尽管以这种方式创建和应用品牌非常适合测试演示用途，但下一步还要通过以下操作完成品牌打造工作：打包品牌文件（包括图像, .css 文件、母版页和页面布局中的 JavaScript 及标记），以便可以将品牌文件添加到其他环境中。最终生产的包将使网站设计人员可以轻松分发品牌文件。以下是完成此步骤的一些方法。

品牌部署选项


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

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

　　上述每种选择都有各自的优缺点，MSDN 文章在 SharePoint Server 2007 发布网站中实施品牌 （该链接可能指向英文页面）中介绍了这些优缺点。本文其余的内容假定采用最后一种选择：将品牌文件部署到网站集的内容数据库。通过将品牌文件部署到网站集的内容数据库，维护和将来可能需要的重新打造品牌活动更容易开展。所有文件都将部署到网站集的母版页样式库和“样式库”中，这两个库均位于所有 SharePoint 发布网站集的根网站中。
　　要将品牌文件部署到网站集的内容数据库中，必须使用 SharePoint 功能框架将文件设置到网站集的内容数据库中，具体说就是“母版页样式库”和“样式库”中。通过功能框架，可在 SharePoint 内容数据库中创建文件的自定义和非自定义实例。源文件（包括图像, .css 文件、JavaScript 库、母版页和页面布局）作为功能的一部分部署并保留在文件系统中。激活功能后，它将源文件的非自定义实例设置到指定位置。
　　将品牌文件部署到网站集的内容数据库的过程通常由开发人员和管理员处理，因为它涉及将文件放置在文件系统中以及创建功能和 SharePoint 解决方案包（.wsp 文件）。

SharePoint 品牌打包和部署过程概述


　　本文其余部分所选择和演示的打包和部署方法使负责自己专业领域的人员可以只关注该领域。这样，为发布网站实施和部署新品牌的过程可以更加清晰、更加顺利地完成。例如，打造自定义 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 备份网站，如以下示例所示。






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，如以下代码所示。






Windows PowerShell








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

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

创建 Visual Studio 项目以包含并打包品牌文件功能


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

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

• 　　在 Visual Studio 2010 中使用“空白 SharePoint 项目”模板创建新的 SharePoint 2010 项目，务必选择 .NET Framework 3.5 作为目标框架版本。
  
  
• 　　根据 Visual Studio 2010 在 SharePoint 自定义向导中的提示，传递测试项目时要使用的网站集 URL (http://test1.adventure-works.com) 并将它指定为场解决方案。
  
  
• 　　向 Visual Studio 项目中添加文件的容器。
  
  
• 　　将发布网站中的文件复制到 Visual Studio 项目。
  
  
• 　　修改项目文件，以包含所有添加的文件。
  
  
• 　　添加“样式库”文件。
  
  
• 　　添加“母版页样式库”中的文件。
  
  

　　添加“样式库”文件。

将样式库文件添加到 Visual Studio 中


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

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

• 　　为“样式库”中的文件设置 Visual Studio 项目容器或模块。右键单击项目名称，单击“添加”，然后单击“新建项”。
  
  
• 　　在“添加新项”对话框中，从“SharePoint/2010”类别中选择“模块”，并将它命名为 StyleLibraryModule。
  
  
• 　　在解决方案资源管理器中，从“StyleLibraryModule”中删除 sample.txt 文件，因为它只是占位符文件。
  
  

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

• 　　在浏览器中，打开 http://test.adventure-works.com。
  
  
• 　　在“网站操作”菜单上，单击“管理网站内容和结构”。
  
  
• 　　在左侧文件夹视图中，悬停在“样式库”上，并使用“编辑控制块(ECB)”菜单选择“在新窗口中打开链接”。
  
  
• 　　双击“样式库”中的“AdventureWorks”节点，然后在功能区的“库工具”菜单上单击“库”。在“连接和导出”组中，使用 Windows 资源管理器打开项目。
  
  
• 　　在 Windows 资源管理器中复制“AdventureWorks”节点中的所有文件并将它们粘贴到 Visual Studio 项目的“StyleLibraryModule”中。
  
  

　　






XML








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

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






XML








<?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 项目容器或模块。右键单击项目名称，单击“添加”，然后选择“新建项”。
  
  
• 　　在“添加新项”对话框中，从“SharePoint/2010”类别中选择“模块”，并将它命名为 MasterPageGalleryModule。
  
  
• 　　在解决方案资源管理器中，从“MasterPageGalleryModule”中删除 sample.txt 文件，因为它只是占位符文件。
  
  

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

下载母版页和页面布局

• 　　在浏览器中，打开 http://test.adventure-works.com。
  
  
• 　　在“网站操作”菜单上，单击“网站设置”。在“库”部分，选择“母版页和页面布局”。
  
  
• 　　下载 AdventureWorks.master 和 AW_layout.aspx 两个文件的副本。为此，请选择相应项，并在下拉菜单中指向“发送至”，然后单击“下载副本”。将两个文件保存到桌面。
  
  
• 　　使用 Windows 资源管理器，将两个文件复制到 Visual Studio 项目的 StyleLibraryModule 中。
  
  
• 　　要将三个文件都设置到母版页样式库中，请修改 MasterPageGalleryModule\Elements.xml 路径中的 Elements.xml 文件。
  
  
  
  
  
  
  XML
  
  
  
  
  
  
  
  
  <?xml version="1.0" encoding="utf-8"?>
  <Elements Id="94022f3a-580a-4745-9d9c-42c21f79fdfe" xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPageGalleryModule"
  Url="_catalogs/masterpage" RootWebOnly="TRUE">
  </Module>
  </Elements>
  
• 　　在 <Module> 开始标记后面添加以下标记，以设置母版页。
  
  
  
  注释：
  
  　　设置母版页时需要该模块指定其他字段，例如，设置时哪种内容类型要与母版页文件相关联。
  
  
  　　
  
  
  
  
  
  
  XML
  
  
  
  
  
  
  
  
  <File Url="AdventureWorks.master"
  Path="MasterPageGalleryModule\AdventureWorks.master" Type="GhostableInLibrary">
  <Property Name="ContentType"
  Value="$Resources:cmscore,contenttype_masterpage_name;" />
  <Property Name="Title"
  Value="Adventure Works Travel Custom Branding" />
  </File>
  
• 　　添加页面布局。与母版页一样，必须设置其他属性。然而，页面布局使用的内容类型与母版页不同，所以还需要使用 PublishingAssociatedContentType 属性指定与页面布局相关联的内容类型。
  
  
• 　　在母版页的 <File /> 标记后面添加以下标记。
  
  
  
  
  
  
  XML
  
  
  
  
  
  
  
  
  <File Url="AW_layout.aspx"
  Path="MasterPageGalleryModule\AW_layout.aspx" Type="GhostableInLibrary">
  <Property Name="ContentType"
  Value="$Resources:cmscore,contenttype_pagelayout_name;" />
  <Property Name="PublishingAssociatedContentType"
  Value=";#Welcome Page;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF390064DEA0F50FC8C147B0B6EA0636C4A7D4;#" />
  <Property Name="Title" Value="Adventure Works Travel Branded Welcome Page" />
  </File>
  

　　此时，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 应用程序的根目录下创建了新的网站集。

测试新的品牌打造功能

• 　　在 Visual Studio 2010 中，按 F5 编译、打包、部署并激活功能。
  
  
• 　　导航到 http://test1.adventure-works.com，依次指向“网站操作”和“网站设置”，然后单击“修改所有网站设置”。
  
  
• 　　通过在“外观”组中选择“母版页”来切换母版页，并将“网站母版页”设置为“AdventureWorks.master”。
  
  
• 　　返回网站的主页并确认使用的是新品牌。与之前一样，页面看起来有点奇怪，因为它未使用品牌打造功能部署的页面布局。
  
  
• 　　导航到“网站操作”菜单并单击“编辑页面”来更新页面，以便它使用正确的页面布局。
  
  
• 　　使用功能区切换页面布局：指向“页面”，从“页面操作”组中选择“页面布局”，然后从“欢迎页面”部分选择品牌化的 Adventure Works Travel 页面布局。
  
  
• 　　要在其他环境中部署品牌，请在 Visual Studio 项目的 \bin\debug 文件夹中查找 *.wsp 文件。这是解决方案包文件，它包含用于将所有品牌文件设置到发布网站集的功能。
  
  

结论


　　本文介绍使用自定义设计打造 Microsoft SharePoint Server 2010 发布网站的品牌的整个过程。首先，本文分步向网站设计人员介绍了为新 SharePoint 发布网站创建品牌的过程，包括分析发布网站和特定于 SharePoint 的控件所特有的问题。接下来，本文介绍了如何将原型中的设计组合转换为使用母版页、页面布局、CSS 和图像的品牌化发布网站的实际实现。最后，本文介绍了如何将品牌化的发布网站转换为功能，以便日后更轻松地维护品牌。为此，需要使用 Visual Studio 2010 中的 SharePoint 开发工具并创建一个新项目，该项目设置自定义品牌涉及的所有文件。

其他资源


　　有关详细信息，请参阅以下资源：

• MSDN 示例 - 实际 SharePoint 品牌打造（该链接可能指向英文页面）
  
• Microsoft Office Online：SharePoint Designer 2007 帮助和操作方法：修改默认母版页
  
• 了解并在 Windows SharePoint Services 3.0 中创建自定义文件和未自定义文件 （该链接可能指向英文页面）
  
• 在 SharePoint Server 2007 中创建母版页和页面布局的方法 （该链接可能指向英文页面）
  
• 在 SharePoint 2007 发布网站中实施品牌 （该链接可能指向英文页面）
  
• 了解 SharePoint Server 2007 发布网站中的字段控件和 Web 部件 （该链接可能指向英文页面）
  
• 在 SharePoint Server 2007 中向母版页和页面布局添加代码隐藏文件
  
• WROX：Professional SharePoint 2010 Branding and User Interface Design（《专业级 SharePoint 2010 品牌打造和用户界面设计》）（该链接可能指向英文页面）
  
• WROX：Professional SharePoint 2007 Web Content Management Development（《专业级 SharePoint 2007 Web 内容管理开发》）（该链接可能指向英文页面）
  
• 企业内容管理资源中心 | SharePoint 2010
  
• SharePoint 开发中心