SharePoint优选资料打造品牌网站

1、使 用 S h a r e P o i n t 2 0 1 0 发 布 网 站 实 际 打 造 品 牌SharePoint 20101（共 1）对本文的评价是有帮助- 评价此主题发布日期： 2010 年 11 月 摘要：了解一些基本概念，以帮助您在 Microsoft SharePoint Server 2010 发布网站中创建引人注目 的用户界面设计。适用范围： Microsoft SharePoint Server 2010供稿人：An drew Conn ell , Critical Path Trai ning LLC （该链接可能指向英文页面）（SharePoi nt MVP） |R

2、andy Drisgill, SharePoint911 （该链接可能指向英文页面）（SharePoint MVP）目录使用 SharePoint 2010 发布网站实际打造品牌简介收集 SharePoint 发布网站的设计要求规划 SharePoint 品牌打造任务为 SharePoint 网站设计创建实际设计组合创建 Adventure Works Travel HTML为 Adventure Works Travel 创建 .css 文件 在多个浏览器中测试 SharePoint 网页设计在 SharePoint 中创建品牌向 SharePoint 添加 .css 和图像文件使用 HTM

3、L 构建母版页为 SharePoint 网站设计制定 .css 规则创建自定义页面布局使用 SharePoint Designer 编辑页面布局打包和部署 SharePoint 品牌结论其他资源下载代码（该链接可能指向英文页面）使用 SharePoint 2010 发布网站实际打造品牌简介Microsoft SharePoint Server 2010 发布网站使用“发布功能”提供创建引人注目的 Web 内容管理 （WCM） 网站的功能。这些网站通常用作面向 Internet 的网站，它们需要使用定制的用户界面 （UI） 建立联机公司标识。创建定制UI （无论是在传统 HTML页面中还是在 M

4、icrosoft SharePoint Server2010 中）的过程称为打造网站品牌。 发布网站使用母版页、 页面布局、 Web 部件和级联样式表 （ .css 文件），从而使设计人员和开发人员可以创建品牌化的网站，这些网站的设计可以与当下许多最新 热门网站相媲美。 本文重点介绍使用发布网站为面向 Internet 的外部网站合理规划和创建设计的机 制，如图 1 所示。本文以虚构的旅行社 Adventure Works Travel 为例，该公司希望创建高度品牌化 的 SharePoint 网站。图 1. Adventure Works Travel 网站品牌收集 SharePoint 发

5、布网站的设计要求在您准备为 SharePoint 网站创建精美的设计时，首先需要花一些时间精心规划网站。在规划阶段， 要收集网站元素 （如母版页和页面布局） 的设计要求。 通过在开始编写代码之前正确理解业务目标， 可以避免在项目生命周期的后期艰难而耗时地重新编写代码。收集设计要求时，首先要召开正式的要求收集会议。无论您设计的网站是面向 10 名用户还是 100,000 名用户，都必须满足一些要求，才能将项目视为取得成功。根据网站的复杂性，调整收集 的要求的详细程度。例如，在收集要求时，大型网站（无论是具有许多页面还是面向许多用户）可 能要比小型的简单网站花费更长时间。在要求收集过程中征求关键业

6、务、市场营销和 IT 利益干系 人的意见，务必考虑他们的想法，并确保所有关键利益干系人都完全认可项目。对于品牌打造项目 来说，要求收集通常是一项非常困难的任务，有时需要委托给市场营销部门，甚至是外包给外部顾 问。尽管征求关键利益干系人的意见很重要，但还要考虑在决策制定过程中征求更多人的意见是否 会增加收集要求所需的时间以及是否会增加项目的整体复杂程度。因此，在考虑要征求哪些利益干 系人的意见时，要认真考虑谁会提供针对性最强的意见。以下几节介绍开始任何 SharePoint 品牌打造项目之前要了解的一些更重要的概念。SharePoint Server 2010 发布网站与 SharePoint

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

8、供的更可靠的格式文本编辑体验创建网页。 包含母版页，母版页面向发布网站并使用可充分利用发布功能的特定代码程序集。 更轻松地控制通过 Web UI 进行的 Web 导航，并且为设计人员提供了更多选项。 使用 Web UI 可以轻松地更改母版页，并且可以将母版页应用于当前网站下的所有子网站。 使用页面布局可在页面级别创建模板。使用文字版式可完成简单的页面布局表单。文字版式不可 配置。使用 $SPUrl 标记通过相对于网站集 （$SPUrl;sitecollection/） 或网站根目录 （$SPUrl:site/） 的 URL 确定 HTML 资产的目标。注释： 在本文中，发布网站是一个在顶级（根

9、）目录中具有网站集并且该网站集启用了发布功能的 SharePoint Server 2010 Web 应用程序。 为了简单起见， 默认发布模板 （“企业 Wiki ”和“发布门户” ） 已经启用了发布功能。本文在 Adventure Works Travel 示例中使用“企业 Wiki ”模板。 要了解有关设置 Web 应用程序和网站集的详细信息，请参阅适用于 SharePoint Server 2007 Web 内容管理网站的规范性指南 （该链接可能指向英文页面） 。面向 SharePoint 发布网站设计的浏览器和平台 开始设计网站和编写网站代码之前，请尽早确定该设计将支持的浏览器和操作系

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

11、lorer 8%Internet Explorer 6 %Firefox%Internet Explorer 7%Firefox%Chrome%Safari%Internet Explorer 8 兼容模式%Firefox%Opera%Microsoft 指明了各浏览器在 SharePoint 中的支持级别。这些级别包括：支持 支持的 Web 浏览器可以与 SharePoint Server 2010 协同工作， 并且所有特性和功能都能按预 期方式工作。支持但具有已知限制 支持但具有已知限制的 Web 浏览器可以与 SharePoint Server 2010 协同工 作，但存在一些已知限制。

12、大多数特性和功能都能正常工作，但如果存在无法正常工作或根据设计 被禁用的特性或功能，则会提供有关如何解决这些问题的文档。未测试：未测试的 Web 浏览器是指它与 SharePoint Server 2010 的兼容性未经过测试，使用这类 Web 浏览器时可能会遇到问题。有关 SharePoint 中的浏览器支持级别的详细信息， 请参阅规划浏览器支持 (Office SharePoint Server)。 注释：SharePoint 2010 不支持 Internet Explorer 。尽管您可以创建能够在 Internet Explorer 中正常显示 Web 内容的母版页，但是它与 Sha

13、rePoint 2010 的创作体验不兼容，后者需要基于新式标准的浏览 器。本文中的 Adventure Works Travel 示例重点介绍如何在 Internet Explorer 7 、 Internet Explorer 8 和 Firefox 3 中实现尽可能完美的最终用户浏览体验， 这样可以确保其他一些新式浏览器 (包括 Google Chrome 和 Apple Safari )也能够正常呈现。适用于 SharePoint 网站设计的屏幕大小 要考虑的另一问题是新设计应该面向的屏幕分辨率。多年前，显示器仅支持有限的一组分辨率，如640 x 480。随着显示器价格的降低，网站访问

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

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

16、作的相对成功程度就越容易。Adventure Works Travel 网站的设计旨在迎合喜欢个性化外观的年轻用户群。 这些用户喜欢使用顶部 和左侧导航以及 SharePoint Server 2010 搜索在网站中导航。用户访问网站的主要原因是了解探险 目的地和预订假期。该品牌适合这样的旅行社：迎合的受众希望在假期参加更具冒险性的活动，而 不是像往常一样呆在海滩上的旅馆中。规划 SharePoint 品牌打造任务实际为 SharePoint 网站的品牌打造编写代码的过程涉及若干步骤， 如创建母版页、 页面布局和级联 样式表（ .css 文件）。打造 SharePoint 品牌的规划过程也可以

17、分为若干步骤，如创建黑白框架图、 创建全彩的网站设计组合（简称组合）和创建可正常运行的主要页面的 HTML 和 .css 文件版本。 以下各节介绍这些活动，因为它们与创建品牌化的 SharePoint UI 有关。创建简单的 SharePoint 网站设计框架图 框架图通常是一组黑白框图，形象地描述网站的整体结构及其布局、导航和功能，有时甚至描述其 内容。由于 Web 设计（或者广义上的设计）的主观特性，最好以框架图的形式讨论这些主题，而 不是陷入选择颜色和照片的困境。正确完成后，框架图可以为开发人员和设计人员提供功能和布局 方面的相关指导，以便在品牌打造过程的后期阶段应用。创建框架图有许多方

18、式，从使用简单的笔和纸绘制到使用专用软件工具（如 Microsoft Visio 2010 ） 建模。创建框架图时使用专用软件工具可能非常有帮助，因为您可以利用映射到特定应用程序（如SharePoi nt）的特定功能的预建模具。您可以找到许多免费的模板和模具，可使用它们来创建SharePoint 网站的框架图。创建框架图时， 要确定品牌支持的 SharePoint 功能。 SharePoint 默认情况下显示的内容中有一些并非适合每个面向 Internet 的网站。图 2 标出了 SharePoint 界面的主要功能区域，表 2 介绍了这 些功能区域。图 2. SharePoint 界面的主要

19、功能区域表 2. SharePoint 界面的主要功能区域 图中的标签 功能区域 功能描述A服务器功能区UI 的整个顶部区域是功能区的一部分。显示的内容取决于用户的当前上下文。B网站操作用于与 SharePoint 交互的主菜单，主要由内容作者和管理员使用。C全局痕迹导航控件在 Microsoft Office SharePoint Server 2007 中首次引入的全局痕迹导航控件的新型实现。 单击时， 该 图标显示的动态 HTML 呈现网站的分层视图。使用它可从层次结构中的当前位置导航到上面各级。D “页面状态操作”按钮 该按钮用于控制页面状态，通常显示用于编辑或保存当前页面的快捷方式。

20、E 功能区上下文选项卡此类选项卡提供特定于 SharePoint 网站功能的菜单。 显示的内容会根据用户与其交互的页面对象而 异。有些选项卡并非适用于每个网站。F“欢迎”菜单 此菜单显示欢迎消息，并且允许用户查看他们的配置文件、注销和以其他用户身份登录。如果安装 了其他语言包，则此处还会提供用于更改用户语言的功能。用户未登录时， “欢迎”菜单还会显示 “登录”链接。G“开发人员仪表板”按钮 该按钮打开通常显示在屏幕底部的开发人员仪表板。开发人员仪表板包含有关页面呈现和查询的统 计信息。该图标在开发人员仪表板的显示级别设置为On Dema nd （其他选项包括 On和Off）时显示。管理员可以使

21、用Windows PowerShell 或使用 SharePoint API 设置开发人员仪表板的显示级别。H标题徽标有时称为网站图标。它通常显示 SharePoint 网站图标，但也可以显示用户定义的徽标。I痕迹导航这是特定于 母版页的痕迹导航性质的控件。 它包括“网站标题” 和标题区中的标题 的占位符 （通 常包含“页面标题” ）。“网站标题”链接到网站的顶层。J社交按钮用于“顶”某个项以及向内容添加标记和备注。K全局导航有时称为“顶部链接栏”或“顶部导航栏” ，它是网站的水平方向上的主要导航机制。L“搜索”区域 搜索框用于输入搜索字词以在网站上执行搜索。M帮助按钮帮助按钮链接到 Shar

22、ePoint 2010 帮助文档。N快速启动提供当前导航。有时称为“左侧导航” 。它是与当前位置相关的页面的辅助或垂直方面导航机制。O树视图以 Windows 资源管理器的形式显示网站。由于树视图的外观，它通常非常适合Intranet 网站。P回收站提供指向网站的 “回收站” 的链接， 回收站是用于存储已删除项的区域。 通常，这非常适合 Intranet 网站。Q所有网站内容指向“所有网站内容”页面的链接。它是 Office SharePoint Server 2007 中的“查看所有网站内容” 链接。通常，这非常适合 Intranet 网站。R 正文区域 表示主要内容占位符，其中包括特定于页

23、面的所有内容。如果要呈现页面内容，则必须使用正文区 域。为 SharePoint 网站创建框架图时，一定要考虑 SharePoint 支持的几种页面类型。 SharePoint 网站 中可以包含的页面类型包括主页、登录页面、搜索结果页面、文章和 Wiki 页面等等。图 3 显示了 Adventure Works Travel 网站的 Microsoft Visio 2010 框架图。图 3. Adventure Works Travel 网站的 Visio 2010 框架图从框架图页面中可以看出， Adventure Works Travel 网站支持一些而非全部 SharePoint 功能。

24、例如， UI 中会去掉“帮助”按钮、树视图和回收站等一些元素。通过在框架图阶段做出这些决策，开发人 员不必构建不必要的功能。为 SharePoint 网站设计创建实际设计组合尽管规划新 SharePoint 网站时创建框架图肯定会对完成重要的品牌打造工作有所帮助， 但是在开始 编写代码之前，您应该创建完整的设计组合或原型。与框架图不同，大多数 Web 设计组合旨在尽 可能真实地模拟实际网站的外观和行为，但不实际创建任何代码。组合包括静态版本的实际照片、 徽标、颜色、字体、表单元素以及页面上可能显示的其他设计或结构项目。对于 SharePoint 网站， 模拟页面内容意味着模拟 SharePoi

25、nt 用户界面的许多功能区域。尽管您可以使用任何图形应用程序（甚至使用笔和纸）创建设计组合，但是Adobe Photoshop 或Microsoft Expression Design 等应用程序可以大大简化该任务。使用这些应用程序可以为SharePoint网站创建易于维护和可重用的设计组合。注释：尽管本文并不涉及具体的 Adobe Photoshop 或 Microsoft Expression Design 功能，但是介绍了一些 常规概念和过程，这些和类似设计应用程序中可能提供了类似的功能。 以下各节介绍用于创建设计组合的应用程序常见的功能。 使用设计应用程序中的图层和图层组将各元素分开

26、使用图层和图层组可将设计元素分开放置在特定单元中。图层不会在一个“平面”文件中创建设计 元素，它的工作原理是每个新图层都位于前一图层的上面。设计人员可以隐藏、显示、操纵、移动 各个图层，还可以对各个图层应用投影和边框等效果，这些都不影响其他设计元素。使用设计工具 创建设计组合时，最好为设计中的每个元素创建一个新图层。使用设计应用程序创建可编辑的文字 使用各种字体、字号和样式创建可编辑的文字。如果没有此功能，在基本设计程序中创建的文字将 是静态的，并且必须清除才能进行各种更改。通过使用新式设计工具，您可以调整文字大小、以粗 体显示文字、设置文字颜色或更改字体等等，而不需要清除先前的状态。使用设计

27、应用程序创建可在 Web 中安全使用的图像以可在 Web 中安全使用的文件格式 （如 .jpg, .gif 和 .png ）轻松保存图像。 许多设计程序可以帮助 您以适合 Web 的小型文件创建图像，而不影响它们的质量。使用设计应用程序创建实际设计组合 创建设计组合时，人们都很乐意使用功能强大的设计工具创建极其完美或精致的设计。但请注意， 创建的设计不能太过精致， 否则浏览器可能无法在 SharePoint 页面中将其真实呈现出来。 文字就属 于此类限制。在 Adobe Photoshop 中，每段文字都可以使用不同的抗锯齿技术。抗锯齿是一种降低 图像在以较低分辨率显示时的失真程度的方法。 特

28、别是， 小型文字在 Photoshop 中的显示效果比在 浏览器中平滑得多。为了防止设定的期望值太高，最好避免对小型文字使用抗锯齿。除了文字抗锯齿， 还要考虑 SharePoint 的外观和行为。 要在设计组合中准确重现 SharePoint 功能， 请截取每项 SharePoint 功能的屏幕截图，并将它们粘贴到设计中。例如，创建 Adventure Works Travel 设计组合时，要敲定各种颜色和样式。必须获取素材照片、选 择字体并创建徽标。在单独的图层中创建每个元素，作为图层效果创建渐变和边框等效果以便日后 更改起来更轻松。捕获 SharePoint 元素(如服务器功能区或搜索框)

29、并将它们粘贴到设计工具中， 最后以引人注目的方式布置这些元素。图 4 显示最终的 Adventure Works Travel 设计组合。 图 4. Adventure Works 设计组合 创建设计组合时，要确定如何重现 SharePoint 中的概念。图 5 显示同一设计组合，并且添加了标 签以突出显示每个功能区域。表 3 介绍了这些功能区域。图 5. 设计组合中的 SharePoint 功能区域表 3. SharePoint 网站设计组合中的主要功能区域 标签 功能区域 说明A 功能区 包含所有标准功能区元素，如“网站操作”菜单和“欢迎”菜单。B 标题徽标C“搜索”区域D 全局导航E 当

30、前导航F 痕迹导航 使用 SiteMapPath 控件。G 字段控件H 字段控件IWeb 部件JWeb 部件 将设计组合转换为 HTML 和 .CSS 代码 将设计组合转换为正常运行的 HTML 页面。 对于简单的设计， 您可以跳过此步骤， 但是对于复杂的 设计，完成此步骤可使设计人员在熟悉的环境中工作。 HTML 代码稍后可用于在 Microsoft SharePoint Designer 2010 等工具中创建母版页。 通过首先创建正常运行的 HTML 版本， 您可以针对 母版页微调 HTML,而不必处理 SharePoint添加到显示内容中的代码。此步骤完成后，应该会具有 功能完备的网站

31、主要页面的 HTML 版本。基本布局的所有级联样式表代码都已完成， 所有图像都已 从设计组合中分离出来,并且已保存为单独的文件。可供设计人员用来创建 HTML 的工具集有许多,从记事本或其他用于编写简单 HTML 代码的文本 编辑器,到专业的网页开发工具 (如 Adobe Dreamweaver 或 Microsoft Expression Web ),种类繁多。 下面列出了对于设计人员来说,专业网页开发应用程序具有的一些优势：对完成 HTML 和级联样式表代码的支持WYSIWIG （所见即所得）设计视图有助于创建兼容多种浏览器的网页的工具DOCTYPES和 SharePoint创建兼容多种浏

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

33、几种：HTML Strict 允许使用所有 HTML 元素，但不允许使用已弃用的元素，如标记。HTML Transitional 允许使用所有 HTML 元素，包括已弃用的元素。XHTML Strict 与HTML Strict类似，但是所有标记都必须是格式标准的XML （例如，必须正确地结束标记） 。所有已弃用的元素都将被忽略。XHTML Transitional 与 HTML Transitional类似，但是所有标记必须是格式标准的XML。允许使用已弃用的元素（但是也必须是格式标准的XML）。因为 SharePoint 2010 在默认母版页中使用 XHMTL Strict DOCTYP

34、E 声明，所以创建要在 SharePoint 2010 中使用的 HTML 时，请使用 XHTML Strict DOCTYPE。 注释： 默认情况下，通过任何万维网联合会 （W3C） 验证检查器检查时， SharePoint 2010 网站可能都不是 完全有效的 XHTML Strict。 SharePoint 2010 中仍使用一些旧控件。尽管不会验证全部页面，但是 如果使用 XHTML Strict 编写 SharePoint HTML 代码，设计体验会更加可靠。本文中的示例使用XHTML Strict DOCTYPE。要在 HTML编辑器工具中创建 XHTML Strict文档，务必创

35、建一个将 DOCTYPE指定为 XHTML Strict 的新空白 HTML 文档。（有关 XHTML Strict DOCTYPE 的详细信息，请参阅 W3C XHTML Strict 规范。）工具创建的 HTML 页面在打开后会显示以下标记。HTMLVDOCTYPE html PUBLIC =ss样式。以前，所有HTML布局都是使用表创建的，以提供丰富的UI,但是随着浏览器的演变， 对基于级联样式表的布局的支持也有所变化。 因为 HTML 表原本用于显示 表格式信息，而不是创建布局，所以正逐渐被 Web 设计人员淘汰。您应该考虑到，默认情况下 SharePoint 2010 包含的表比以前

36、的版本要少，在 SharePoint 2010 中， 基本上只有在显示表格式数据时才使用表。 Adventure Works Travel HTML 代码不使用表，而是使用 级联样式表确定其整个布局。HTML 和未来的 Internet Explorer 与 SharePoint 的兼容性随着 Internet Explorer 新版本的发布， 浏览器呈现 HTML 的方式可能会随着时间的推移而变化。 为 了应对各种可能的变化， Microsoft 使用 X-UA-Compatible META 标记，该标记可使特定 Internet Explorer 版本成为 HTML 标记的目标浏览器。默

37、认 SharePoint 2010 母版页设置为强制 Internet Explorer的当前或未来版本在In ternet Explorer 8模式下呈现 HTML,如以下标记所示：Adventure Works Travel HTML 包含 META 标记,以帮助确保未来的 Internet Explorer 版本能够正确 显示 SharePoint HTML。有关 Internet Explorer 标准模式的详细信息,请参阅未来兼容性中的 META 标记和锁定。 将设计组合切割成 Web 图像 创建设计组合对于理解网页的外观很有用， 不仅如此， 还可以使用设计组合创建 HTML 将加载

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

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

40、） ）。 注释：本示例中的 HTML 不使用表创建布局，而是频繁地使用标记划分页面的逻辑区域。此HTML 已接受 W3C 标记验证服务（该链接可能指向英文页面）的检查，符合XHTML Strict 。为 Adventure Works Travel 创建 .css 文件由于所有布局设计都使用了 .css 代码，因此只使用 HTML 标记将无法创建有吸引力的网页。在与 本文相关联的可下载文件中，找到创建的 .css 代码，这些代码用于设置 HTML 元素的所有颜色、 字体、图像和位置（请参阅 MSDN 代码库中的 MSDN 示例 - 实际 SharePoint 品牌打造（该链接 可能指向英文页面

41、） ）。在 Adventure Works Travel HTML 文件中， 已通过 部分中的以下代码 关联此 .css 文件。HTML有关创建 .css 代码以设置 HTML 网页样式的详细信息，请参阅 MSDN CSS 参考。 在多个浏览器中测试 SharePoint 网页设计现在所有HTML、图像和.css文件都已创建完毕，您可以测试网页，以确保它看起来与设计组合尽 可能相似。图 6 显示完成的 Adventure Works Travel 网页在 Internet Explorer 中的效果。图 6. 完成的 Adventure Works Travel 网页在 Internet Ex

42、plorer 中的效果在将 HTML 设计转换为正常运行的 SharePoint 网站之前，在尽可能多的浏览器中测试设计。除了Internet Explorer 之外，通过安装 Mozilla Firefox 、 Google Chrome 和 Apple 的 Safari for Windows ， 您可以针对许多不同的浏览方案测试 Web 设计。在多个浏览器中进行测试的另一选择是使用Expression Web Super Preview（该链接可能指向英文页面）。此应用程序在 Expression Web 3中提供，也可以免费下载， 免费下载版本只能测试 Internet Explore

43、r 版本。完整版本可以测试非 Microsoft 创 建的浏览器，如 Firefox。两个版本都可以使用不同的呈现引擎并排显示页面，并且都可以对最细微 的差异进行非常精细的检查。在 SharePoint 中创建品牌 现在，我将重点介绍如何在发布网站中创建品牌。您将了解如何使用简易母版页，以及如何添加自定义 HTML 标记和 .css 代码以创建与原 Adventure Works Travel HTML 页面极其相似的母版页。 最 后，您将了解页面布局的相关信息，包括如何为 Adventure Works Travel 创建页面布局。本节将帮 助您完成 Adventure Works Trav

44、el 的 SharePoint 品牌打造。构建自定义 SharePoint 母版页打造 SharePoint 网站的品牌时，母版页是最重要的。 SharePoint 中的每个页面都使用母版页确定 SharePoint 网站包含的功能和内容的布局。 使用 SharePoint 网站创建品牌鲜明的网站的一个关键步 骤是创建设计合理的母版页。 因为您已经创建了设计组合并且在 HTML 中完成了设计， 所以您可以 使用它创建自定义母版页。在 SharePoint 中使用内容占位符除了引用和使用所有特定 SharePoint 控件之外， SharePoint 中的母版页还需要一组特定的内容占位 符。如果

45、从母版页中删除这些必需的内容占位符， 则 SharePoint 会在浏览器中显示一个错误。 许多 时候，特定网站设计中不使用必需的内容占位符；这种情况下，如果有办法隐藏必需的内容占位符 会很有帮助。通过在隐藏的 面板控件中嵌套内容占位符，可以在不导致错误的情况下将它们从呈 现的页面中删除。以下代码显示放置在隐藏面板中的内容占位符。 runat=server /有关如何在 SharePoint 默认母版页中使用内容占位符的详细信息，请参阅 Windows SharePoint Services 网站中 上的默认内容占位符。SharePoint 简易母版页因为 SharePoint 需要许多特定内

46、容占位符， 所有从头开始创建自定义母版页可能很有挑战性。 尽管 可以从任何默认母版页开始创建新自定义母版页，但是它们包含在开始之前必须删除的大量品牌打 造代码。 更好的方法是从简易母版页开始， 简易母版页是预配置的母版页框架， 仅包含在 SharePoint 中创建正常运行的页面所必需的功能。有关SharePoint Server 2010 母版页中使用的内容占位符的列表，请参阅将现有母版页升级到 SharePoint Foundation 母版页。 本文的下载内容中包含一个适用于面向 Internet 的发布网站的简易母版页， 其中包含的注释浅显易 懂。 总体来说， 这是 SharePoin

47、t 的一个传统简易母版页， 但是它使用了一些专用于发布的元素， 最 值得注意的是导航控件。该简易母版页应该适用于大多数默认SharePoint 2010 页面，包括应用程序页面（如“网站设置” ）、列表和文档。简易母版页的每个部分都包含注释， 这些注释标明了所表示的 SharePoint 功能区域。 以下各节介绍 在 SharePoint 2010 中使用母版页时需要注意的一些要点，特别是与简易母版页相关的要点。使用 SharePoint 功能区 简易母版页的布局与默认母版页非常相似，所以它的功能区同样“固定”在可视页面的顶部。启用 功能区定位系统后， SharePoint 可管理页面滚动，在

48、允许大型页面滚动的同时仍始终在浏览器窗口 的顶部显示功能区。要实现此效果，请在 .css 代码和标记中禁用页面滚动，并将正文内容（功能 区下的所有内容）放置在两个特定标记中，如下所示。HTMLSharePoint 会查找这些标记，然后仅向该区域而不是功能区添加滚动效果。由于功能区定位系统管 理滚动效果和功能区位置的方式，在使用非常复杂的 .css 布局时，可能需要禁用它并使用较为传 统的滚动方法。 要详细了解功能区定位系统如何工作， 或者如何更改它以使用较为传统的滚动方法， 请参阅 SharePoint 2010 母版页中的自定义功能区定位（该链接可能指向英文页面） 。 处理固定宽度的 Sha

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

50、果两个 .css 规则具 有相同的特征， 则后加载的 .css 规则是应用于元素的样式。 有关此概念的详细信息， 请参阅 W3C 的 分配属性值、级联和继承。Microsoft 已充分利用级联并使用它作为使用自定义样式覆盖默认样式的主要方式。在 SharePoint 中默认加载的大量 .css 样式来自 文件以及 SharePoint 2010 根据特定页面的需要即时加载的其他一些相关 .css 文件。Corev4 和其他默认.css 文件从.14TEMPLATELAYOUTS1033STYLES文件夹加载，该文件夹位于 SharePoint 根文件夹中，其中包含大多数 SharePoint

51、安装文件。有关在 SharePoint 2010 中默认加载的所有样式的列表，请参阅 SharePoint Foundation 中级联样式 表类的用法。品牌打造的一项主要任务是使用自定义 .css 覆盖默认样式， 自定义 .css 将重新设置 SharePoint 功 能的样式以符合整体网站品牌。在 SharePoint 2010 中， Microsoft 添加了 After 属性以允许自定 义 .css 始终在特定 .css 文件（如默认 文件）之后加载。以下代码显示用于加载自定义级联样式 表的 After 属性。HTML 注释： After 属性需要较完整的路径才能在其他自定义 .css

52、 文件之后加载某一 .css 文件。例如，要在自 定义 文件之后加载另一 .css 文件，请使用以下代码。简易母版页中的 CssRegistration 设置为在发布网站的样式库中的 SiteName 子文件夹下查找自定 义.css。您应该将简易母版页中引用的SiteName文件夹替换为实际网站的名称。注释：引用 Web 文件（如自定义样式表）时， SharePoint Server 2010 提供了 $SPUrl 标记以表示相对于 网站集根目录的 URL或相对于网站根目录的URL。可以将简易母版页中的样式表引用编写为使用此功能，如下所示：SharePoint:CssRegistration

53、name” ” After=” runat= ”server”/ 在将品牌部署到并非位于 Web 应用程序根目录的网站集时，使用该方法的优点便会突显出来。使 用相对于网站集的 URL 可确保样式从网站集自身的样式库加载， 而不是从根网站集的样式库加载。 使用该方法的缺点是以这种方式引用时 设计视图无法显示某些资产。 为了简单起见， 本文不在 URL 中使用 $SPURL 变量。考虑品牌对 SharePoint 对话框的影响SharePoint 2010 中一项强大的新功能是对话框框架。许多菜单页在位于主要页面内容之上的模式 对话框中加载。这会影响品牌效果，因为默认情况下所有自定义品牌（包括徽标

54、、页眉、导航和页 脚）都显示在对话框内。为了防止品牌元素显示在对话框中， SharePoint 2010 提供了一个名为 s4-notdlg 的级联样式表类。如果将此类应用于某个元素， SharePoint 2010 将自动在对话框中隐藏 该元素。在简易母版页中，我使用此类在对话框中隐藏了品牌元素。图7 显示应用于对话框的自定义品牌。图 7. 对话框中的自定义品牌处理 ActiveX 控件显示面向 Internet 的发布网站时， Internet Explorer 浏览器会在未将 SharePoint 2010 服务器添加到 受信任的网站列表时显示一条烦人的消息。此消息要求用户添加 Acti

55、veX 控件。通常， SharePoint 的匿名用户不使用此控件， 如果要求加载此控件， 则很可能会使不熟悉 SharePoint 的用户放弃使用。您可以在“管理中心”的“管理 Web 应用程序”部分的“常规设置”页上禁用 该消息。请将“对成员启用人名智能标记和联机状态显示”设置为“否” 。您可以通过向母版页添加ECMAScript (JavaScript、JScript)代码禁止显示该消息。简易母版页包含以下 JavaScript 代码，这些代码将隐藏该消息。JavaScript function ProcessImn() function ProcessImnMarkers () 有关联

56、机状态的详细信息，请参阅 SharePoint 2010 中的联机状态(该链接可能指向英文页面) 。 处理旧式浏览器 大多数情况下，由于 SharePoint 2010 不支持 Internet Explorer 6 浏览器， Microsoft 建议警告 Internet Explorer 6 用户，他们的体验可能会受影响。 Microsoft 提供了一个可在母版页中使用的 WarnOnUnsupportedBrowsers 控件，以警告用户他们的浏览器不受支持，如以下示例所示。HTML 简易母版页在靠近代码底部的位置使用 WarnOnUnsupportedBrowsers 控件；要禁用该通知，请从 母版页中删除该控件。使用 SharePoint Designer 创建母版页 在简易母版页的代码准备就绪后，将母版页添加到 SharePoint 中。 Micros