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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> xmlns=http://www.w3.org/1999/xhtml> content="text/html; charset=utf-8" /> 

在这里，创建 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，如以下标记所示：

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 文件中，已通过  部分中的以下代码关联此 .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 会在浏览器中显示一个错误。许多时候，特定网站设计中不使用必需的内容占位符；这种情况下，如果有办法隐藏必需的内容占位符会很有帮助。通过在隐藏的 面板控件中嵌套内容占位符，可以在不导致错误的情况下将它们从呈现的页面中删除。以下代码显示放置在隐藏面板中的内容占位符。

 

 

   runat="server" />

有关如何在 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>
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 文件，请使用以下代码。

 

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

注释：
引用 Web 文件（如自定义样式表）时，SharePoint Server 2010 提供了 $SPUrl 标记以表示相对于网站集根目录的 URL 或相对于网站根目录的 URL。可以将简易母版页中的样式表引用编写为使用此功能，如下所示：” 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

 

有关联机状态的详细信息，请参阅 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 添加简易母版页

1. 在 Microsoft SharePoint Designer 2010 中打开 SharePoint Server 2010 发布网站。

2. 在“网站对象”面板中，单击“母版页”。这会打开母版页样式库，所有母版页和页面布局都在这里创建。

3. 在功能区上，单击“空白母版页”，然后将它命名为 AdventureWorks.master。

4. 单击名为 AdventureWorks.master 的文件，然后在功能区上单击“编辑文件”。SharePoint 会打开包含默认内容的新母版页。

5. 选择所有内容，然后按 Delete 以删除。接下来，复制“StarterPublishing.master”（随文章下载内容提供）的内容并粘贴到 AdventureWorks.master。

6. 要保存更改，请在 SharePoint Designer 2010 中单击“保存”。

7. 在“网站对象”菜单中，单击“母版页”，右键单击“AdventureWorks.master”，然后单击“签入”。在“签入”菜单上，选择“发布主要版本”，然后单击“确定”。

8. 由于对母版页样式库应用了审批工作流，所以会显示一条警告：“此文档要求内容审批。是否要查看或修改其审批状态?”。单击“是”。

9. SharePoint Web 界面会在浏览器中打开。如果要求您进行身份验证，请使用您的用户名和密码登录。

10. “母版页样式库”将会打开，并显示按“审批状态”分组的视图。在“AdventureWorks.master”的右侧单击，然后单击“批准/拒绝”。

11. 对于“审批状态”，请选择“已批准”，然后单击“确定”。

    注释：
    要将母版页添加到 SharePoint，请将它们作为主要版本签入，然后在除签出文件的用户以外的其他用户之前发布并批准它们，以允许用户访问应用了该母版页的网站。这同样适用于对母版页所做的所有更改：只有在作为主要版本签入、发布并批准更改后，其他用户才能看到更新。

     

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

应用母版页

签入并批准母版页后，下一步骤是将母版页应用于 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. 应用于发布网站的简易母版页

向 SharePoint 添加 .css 和图像文件

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

向样式库添加品牌文件

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

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

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

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

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

使用 HTML 构建母版页

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

对于 Adventure Works Travel 网站，该过程首先处理简易母版页的部分。该部分的三个区域包含的 Site Name 字样可以更改为 Adventure Works，包括PlaceHolderPageTitle、SPShortcutIcon 和 CssRegistration 占位符。

C#

 

C#

 

"server" IconUrl="/Style Library/AdventureWorks/favicon.ico"/>

C#

 

"/Style Library/AdventureWorks/style.css" After="corev4.css" runat="server"/>

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

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

 

接下来，复制原 HTML 设计中 

 和 

 标记之间的所有内容并将其粘贴到母版页中的 

 标记后面。接下来的几节介绍哪些 SharePoint 功能区域将从简易母版页中较靠下的部分上移到粘贴的 HTML 代码中。

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

 

使用 HTML 构建母版页

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

   标记包含这段代码。

   HTML

    

   <div class="customTopLeft"> 
   <asp:LoginView id="LoginView1" runat="server"> 
   <AnonymousTemplate>
   <div class="customLogin">User Logina>div>