SharePoint2010打造品牌网站

1、使用 SharePoint 2010 发布网站实际打造品牌 SharePoint 2010 1（共 1）对本文的评价是有帮助 - 评价此主题 发布日期： 20010 年 111 月 摘要：了解解一些基基本概念念，以帮帮助您在在 Miicroosofft SSharrePoointt Seerveer 220100 发布布网站中中创建引引人注目目的用户户界面设设计。适用范围： Miicroosofft SSharrePoointt Seerveer 220100 供稿人：AAndrrew Connnelll，Criiticcal Patth TTraiininng LLLC（该该链接可可能指向向

2、英文页页面） (ShhareePoiint MVPP) | Raandyy Drrisggilll，ShaarePPoinnt9111（该该链接可可能指向向英文页页面） (ShhareePoiint MVPP)目录 使用 ShhareePoiint 20110 发发布网站站实际打打造品牌牌简介 收集 ShhareePoiint 发布网网站的设设计要求求 规划 ShhareePoiint 品牌打打造任务务 为 ShaarePPoinnt 网网站设计计创建实实际设计计组合 创建 Addvennturre WWorkks TTravvel HTMML 为 Advventturee Woorkss T

3、rraveel 创创建 .csss 文件件 在多个浏览览器中测测试 SSharrePoointt 网页页设计 在 ShaarePPoinnt 中中创建品品牌 向 ShaarePPoinnt 添添加 .csss 和图图像文件件 使用 HTTML 构建母母版页 为 ShaarePPoinnt 网网站设计计制定 .csss 规规则 创建自定义义页面布布局 使用 ShhareePoiint Dessignner 编辑页页面布局局 打包和部署署 ShhareePoiint 品牌 结论 其他资源 下载代码码（该链链接可能能指向英英文页面面） 使用 ShhareePoiint 20110 发发布网站站实际打

4、打造品牌牌简介 Micrrosooft ShaarePPoinnt SServver 20110 发发布网站站使用“发发布功能能”提供供创建引引人注目目的 WWeb 内容管管理 (WCMM) 网网站的功功能。这这些网站站通常用用作面向向 Innterrnett 的网网站，它它们需要要使用定定制的用用户界面面 (UUI) 建立联联机公司司标识。创创建定制制 UII（无论论是在传传统 HHTMLL 页面面中还是是在 MMicrrosooft ShaarePPoinnt SServver 20110 中中）的过过程称为为打造网网站品牌牌。发布布网站使使用母版版页、页页面布局局、Weeb 部部件和级级

5、联样式式表（.csss 文件件），从从而使设设计人员员和开发发人员可可以创建建品牌化化的网站站，这些些网站的的设计可可以与当当下许多多最新热热门网站站相媲美美。本文文重点介介绍使用用发布网网站为面面向 IInteerneet 的的外部网网站合理理规划和和创建设设计的机机制，如如图 11 所示示。本文文以虚构构的旅行行社 AAdveentuure Worrks Traavell 为例例，该公公司希望望创建高高度品牌牌化的 ShaarePPoinnt 网网站。 图 1. Advventturee Woorkss Trraveel 网网站品牌牌 收集 ShhareePoiint 发布网网站的设设计要

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

7、要求时，大大型网站站（无论论是具有有许多页页面还是是面向许许多用户户）可能能要比小小型的简简单网站站花费更更长时间间。在要要求收集集过程中中征求关关键业务务、市场场营销和和 ITT 利益益干系人人的意见见，务必必考虑他他们的想想法，并并确保所所有关键键利益干干系人都都完全认认可项目目。对于于品牌打打造项目目来说，要要求收集集通常是是一项非非常困难难的任务务，有时时需要委委托给市市场营销销部门，甚甚至是外外包给外外部顾问问。尽管管征求关关键利益益干系人人的意见见很重要要，但还还要考虑虑在决策策制定过过程中征征求更多多人的意意见是否否会增加加收集要要求所需需的时间间以及是是否会增增加项目目的整体体

8、复杂程程度。因因此，在在考虑要要征求哪哪些利益益干系人人的意见见时，要要认真考考虑谁会会提供针针对性最最强的意意见。以下几节介介绍开始始任何 ShaarePPoinnt 品品牌打造造项目之之前要了了解的一一些更重重要的概概念。 ShareePoiint Serrverr 20010 发布网网站与 ShaarePPoinnt FFounndattionn 20010 网站 要求收集完完成后，首首先要确确定网站站是以 Miccrossoftt ShhareePoiint Fouundaatioon 220100 为基基础，还还是以运运行 MMicrrosooft ShaarePPoinnt SSe

9、rvver 20110（启启用了发发布功能能）的服服务器为为基础。发发布网站站基于 ShaarePPoinnt FFounndattionn 构建建，使用用发布网网站构建建面向 Intternnet 的引人人注目的的网站有有许多优优势。与与使用 ShaarePPoinnt FFounndattionn 网站站相比，使使用 SSharrePoointt Seerveer 发发布网站站创建品品牌的一一些优势势包括： 允许内容容作者使使用比 ShaarePPoinnt FFounndattionn 网站站提供的的更可靠靠的格式式文本编编辑体验验创建网网页。 包含母版版页，母母版页面面向发布布网站并并

10、使用可可充分利利用发布布功能的的特定代代码程序序集。 更轻松地地控制通通过 WWeb UI 进行的的 Weeb 导导航，并并且为设设计人员员提供了了更多选选项。 使用 WWeb UI 可以轻轻松地更更改母版版页，并并且可以以将母版版页应用用于当前前网站下下的所有有子网站站。 使用页面面布局可可在页面面级别创创建模板板。使用用文字版版式可完完成简单单的页面面布局表表单。文文字版式式不可配配置。 使用 $SPUUrl 标记通通过相对对于网站站集 ($SPPUrll;ssiteecolllecctioon/) 或网网站根目目录 ($SPPUrll:ssitee/) 的 URRL 确确定 HHTMLL

11、 资产产的目标标。注释：在本文中，发发布网站站是一个个在顶级级（根）目目录中具具有网站站集并且且该网站站集启用用了发布布功能的的 ShhareePoiint Serrverr 20010 Webb 应用用程序。为为了简单单起见，默默认发布布模板（“企企业 WWikii”和“发发布门户户”）已已经启用用了发布布功能。本本文在 Advventturee Woorkss Trraveel 示示例中使使用“企企业 WWikii”模板板。 要了解有关关设置 Webb 应用用程序和和网站集集的详细细信息，请请参阅适适用于 ShaarePPoinnt SServver 20007 WWeb 内容管管理网站站

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

13、统支支持级别别的一种种不错的的做法是是参考研研究并提提供 WWeb 流量分分析的专专题网站站。应用用程序的的净市场场份额（该该链接可可能指向向英文页页面）列列出了 20110 年年 6 月总市市场份额额排在前前 100 位的的 Weeb 浏浏览器，如如表 11 所示示。表 1. 浏览器器版本和和总市场场份额 浏览览器版本本 总市场场份额百百分比 Interrnett Exxploorerr 825.188%Interrnett Exxploorerr 617.166%Fireffox 3.6615.677%Interrnett Exxploorerr 712.044%Fireffox 3.55

14、5.24%Chromme 44.15.16%Safarri 44.03.83%Interrnett Exxploorerr 8 兼容模模式3.35%Fireffox 3.002.65%Operaa 100.x1.88%Microosofft 指指明了各各浏览器器在 SSharrePoointt 中的的支持级级别。这这些级别别包括： 支持 支支持的 Webb 浏览览器可以以与 SSharrePoointt Seerveer 220100 协同同工作，并并且所有有特性和和功能都都能按预预期方式式工作。支持但具有有已知限限制 支持但但具有已已知限制制的 WWeb 浏览器器可以与与 ShhareePo

15、iint Serrverr 20010 协同工工作，但但存在一一些已知知限制。大大多数特特性和功功能都能能正常工工作，但但如果存存在无法法正常工工作或根根据设计计被禁用用的特性性或功能能，则会会提供有有关如何何解决这这些问题题的文档档。 未测试：未未测试的的 Weeb 浏浏览器是是指它与与 ShhareePoiint Serrverr 20010 的兼容容性未经经过测试试，使用用这类 Webb 浏览览器时可可能会遇遇到问题题。有关 ShhareePoiint 中的浏浏览器支支持级别别的详细细信息，请请参阅规规划浏览览器支持持 (OOffiice ShaarePPoinnt SServver)。

16、 注释： SharrePoointt 20010 不支持持 Innterrnett Exxploorerr 6.0。尽尽管您可可以创建建能够在在 Innterrnett Exxploorerr 6.0 中中正常显显示 WWeb 内容的的母版页页，但是是它与 ShaarePPoinnt 220100 的创创作体验验不兼容容，后者者需要基基于新式式标准的的浏览器器。 本文中的 Advventturee Woorkss Trraveel 示示例重点点介绍如如何在 Intternnet Expplorrer 7、Intternnet Expplorrer 8 和和 Fiireffox 3 中中实现尽尽

17、可能完完美的最最终用户户浏览体体验，这这样可以以确保其其他一些些新式浏浏览器（包包括 GGooggle Chrromee 和 Appplee Saafarri）也也能够正正常呈现现。 适用于 SSharrePoointt 网站站设计的的屏幕大大小要考虑的另另一问题题是新设设计应该该面向的的屏幕分分辨率。多多年前，显显示器仅仅支持有有限的一一组分辨辨率，如如 6440 xx 4880。随随着显示示器价格格的降低低，网站站访问者者以 119200 x 12000 甚甚至更高高分辨率率进行浏浏览的情情况越来来越常见见。大多多数网站站设计人人员认为为 10024 x 7768 是最常常见的屏屏幕分辨辨

18、率，紧紧接着是是 12280 x 8800。创创建要在在 ShhareePoiint 网站中中显示的的设计时时，请记记住 SSharrePoointt 以用用户的典典型屏幕幕分辨率率一次呈呈现大量量信息。如如果考虑虑到浏览览器工具具栏和滚滚动条也也占用屏屏幕上的的一些可可用显示示区域，则则可用于于呈现内内容的空空间就更更小了。 在 Advventturee Woorkss Trraveel 示示例中，最最低屏幕幕分辨率率是 110244 x 7688。设计计留出了了一些边边距以供供滚动条条使用。因因为存在在边距，所所以网站站的宽度度不能超超过 9960 像素。定义 ShhareePoiint

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

20、如吸引引更多访访问者；也可以以非常复复杂，例例如计算算在主要要受众人人口统计计中销量量的增加加情况。成成功标准准越容易易量化和和衡量，确确定品牌牌打造工工作的相相对成功功程度就就越容易易。 Advennturre WWorkks TTravvel 网站的的设计旨旨在迎合合喜欢个个性化外外观的年年轻用户户群。这这些用户户喜欢使使用顶部部和左侧侧导航以以及 SSharrePoointt Seerveer 220100 搜索索在网站站中导航航。用户户访问网网站的主主要原因因是了解解探险目目的地和和预订假假期。该该品牌适适合这样样的旅行行社：迎迎合的受受众希望望在假期期参加更更具冒险险性的活活动，而而

21、不是像像往常一一样呆在在海滩上上的旅馆馆中。规划 ShhareePoiint 品牌打打造任务务实际为 SSharrePoointt 网站站的品牌牌打造编编写代码码的过程程涉及若若干步骤骤，如创创建母版版页、页页面布局局和级联联样式表表（.ccss 文件）。打打造 SSharrePoointt 品牌牌的规划划过程也也可以分分为若干干步骤，如如创建黑黑白框架架图、创创建全彩彩的网站站设计组组合（简简称组合合）和创创建可正正常运行行的主要要页面的的 HTTML 和 .ccss 文件版版本。以以下各节节介绍这这些活动动，因为为它们与与创建品品牌化的的 ShhareePoiint UI 有关。创建简单的

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

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

24、图 2. ShaarePPoinnt 界界面的主主要功能能区域 表 2. ShaarePPoinnt 界界面的主主要功能能区域 图中的的标签 功能区区域 功能描描述 A 服务器功功能区 UI 的整整个顶部部区域是是功能区区的一部部分。显显示的内内容取决决于用户户的当前前上下文文。 B网站操作 用于与 ShaarePPoinnt 交交互的主主菜单，主主要由内内容作者者和管理理员使用用。 C全局痕迹导导航控件件在 Miccrossoftt Offficce SSharrePoointt Seerveer 220077 中首首次引入入的全局局痕迹导导航控件件的新型型实现。单单击时，该该图标显显示的动

25、动态 HHTMLL 呈现现网站的的分层视视图。使使用它可可从层次次结构中中的当前前位置导导航到上上面各级级。 D“页面状态态操作”按按钮该按钮用于于控制页页面状态态，通常常显示用用于编辑辑或保存存当前页页面的快快捷方式式。 E功能区上下下文选项项卡此类选项卡卡提供特特定于 ShaarePPoinnt 网网站功能能的菜单单。显示示的内容容会根据据用户与与其交互互的页面面对象而而异。有有些选项项卡并非非适用于于每个网网站。F“欢迎”菜菜单此菜单显示示欢迎消消息，并并且允许许用户查查看他们们的配置置文件、注注销和以以其他用用户身份份登录。如如果安装装了其他他语言包包，则此此处还会会提供用用于更改改用

26、户语语言的功功能。用用户未登登录时，“欢欢迎”菜菜单还会会显示“登登录”链链接。 G“开发人员员仪表板板”按钮钮该按钮打开开通常显显示在屏屏幕底部部的开发发人员仪仪表板。开开发人员员仪表板板包含有有关页面面呈现和和查询的的统计信信息。该该图标在在开发人人员仪表表板的显显示级别别设置为为 OnnDemmandd（其他他选项包包括 OOn 和和 Offf）时时显示。管管理员可可以使用用 Wiindoows PowwerSShelll 或或使用 ShaarePPoinnt AAPI 设置开开发人员员仪表板板的显示示级别。 H标题徽标有时称为网网站图标标。它通通常显示示 ShhareePoiint 网

27、站图图标，但但也可以以显示用用户定义义的徽标标。 I痕迹导航这是特定于于 v44.maasteer 母母版页的的痕迹导导航性质质的控件件。它包包括“网网站标题题”和标标题区中中的标题题 的占位位符（通通常包含含“页面面标题”）。“网网站标题题”链接接到网站站的顶层层。 J社交按钮用于“顶”某某个项以以及向内内容添加加标记和和备注。 K全局导航有时称为“顶顶部链接接栏”或或“顶部部导航栏栏”，它它是网站站的水平平方向上上的主要要导航机机制。 L“搜索”区区域搜索框用于于输入搜搜索字词词以在网网站上执执行搜索索。 M帮助按钮帮助按钮链链接到 ShaarePPoinnt 220100 帮助助文档。N

28、快速启动 提供当前导导航。有有时称为为“左侧侧导航”。它它是与当当前位置置相关的的页面的的辅助或或垂直方方面导航航机制。 O树视图以 Winndowws 资资源管理理器的形形式显示示网站。由由于树视视图的外外观，它它通常非非常适合合 Inntraanett 网站站。 P回收站 提供指向网网站的“回回收站”的的链接，回回收站是是用于存存储已删删除项的的区域。通通常，这这非常适适合 IIntrraneet 网网站。 Q所有网站内内容 指向“所有有网站内内容”页页面的链链接。它它是 OOffiice ShaarePPoinnt SServver 20007 中中的“查查看所有有网站内内容”链链接。通

29、通常，这这非常适适合 IIntrraneet 网网站。 R正文区域表示主要内内容占位位符，其其中包括括特定于于页面的的所有内内容。如如果要呈呈现页面面内容，则则必须使使用正文文区域。 为 ShaarePPoinnt 网网站创建建框架图图时，一一定要考考虑 SSharrePoointt 支持持的几种种页面类类型。SSharrePoointt 网站站中可以以包含的的页面类类型包括括主页、登登录页面面、搜索索结果页页面、文文章和 Wikki 页页面等等等。 图 3 显显示了 Advventturee Woorkss Trraveel 网网站的 Miccrossoftt Viisioo 20010 框

30、架图图。 图 3. Advventturee Woorkss Trraveel 网网站的 Vissio 20110 框框架图 从框架图页页面中可可以看出出，Addvennturre WWorkks TTravvel 网站支支持一些些而非全全部 SSharrePoointt 功能能。例如如，UII 中会会去掉“帮帮助”按按钮、树树视图和和回收站站等一些些元素。通通过在框框架图阶阶段做出出这些决决策，开开发人员员不必构构建不必必要的功功能。 为 ShaarePPoinnt 网网站设计计创建实实际设计计组合尽管规划新新 ShhareePoiint 网站时时创建框框架图肯肯定会对对完成重重要的品品牌打

31、造造工作有有所帮助助，但是是在开始始编写代代码之前前，您应应该创建建完整的的设计组组合或原原型。与与框架图图不同，大大多数 Webb 设计计组合旨旨在尽可可能真实实地模拟拟实际网网站的外外观和行行为，但但不实际际创建任任何代码码。组合合包括静静态版本本的实际际照片、徽徽标、颜颜色、字字体、表表单元素素以及页页面上可可能显示示的其他他设计或或结构项项目。对对于 SSharrePoointt 网站站，模拟拟页面内内容意味味着模拟拟 ShhareePoiint 用户界界面的许许多功能能区域。 尽管您可以以使用任任何图形形应用程程序（甚甚至使用用笔和纸纸）创建建设计组组合，但但是 AAdobbe PP

32、hottoshhop 或 Miicroosofft EExprresssionn Deesiggn 等等应用程程序可以以大大简简化该任任务。使使用这些些应用程程序可以以为 SSharrePoointt 网站站创建易易于维护护和可重重用的设设计组合合。注释释：尽管本文并并不涉及及具体的的 Addobee Phhotooshoop 或或 Miicroosofft EExprresssionn Deesiggn 功功能，但但是介绍绍了一些些常规概概念和过过程，这这些和类类似设计计应用程程序中可可能提供供了类似似的功能能。 以下各节介介绍用于于创建设设计组合合的应用用程序常常见的功功能。使用设计应应用

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

34、文字字将是静静态的，并并且必须须清除才才能进行行各种更更改。通通过使用用新式设设计工具具，您可可以调整整文字大大小、以以粗体显显示文字字、设置置文字颜颜色或更更改字体体等等，而而不需要要清除先先前的状状态。 使用设计应应用程序序创建可可在 WWeb 中安全全使用的的图像以可在 WWeb 中安全全使用的的文件格格式（如如 .jjpg, .ggif 和 .ppng）轻轻松保存存图像。许许多设计计程序可可以帮助助您以适适合 WWeb 的小型型文件创创建图像像，而不不影响它它们的质质量。 使用设计应应用程序序创建实实际设计计组合 创建设计组组合时，人人们都很很乐意使使用功能能强大的的设计工工具创建建极

35、其完完美或精精致的设设计。但但请注意意，创建建的设计计不能太太过精致致，否则则浏览器器可能无无法在 ShaarePPoinnt 页页面中将将其真实实呈现出出来。文文字就属属于此类类限制。在在 Addobee Phhotooshoop 中中，每段段文字都都可以使使用不同同的抗锯锯齿技术术。抗锯锯齿是一一种降低低图像在在以较低低分辨率率显示时时的失真真程度的的方法。特特别是，小小型文字字在 PPhottoshhop 中的显显示效果果比在浏浏览器中中平滑得得多。为为了防止止设定的的期望值值太高，最最好避免免对小型型文字使使用抗锯锯齿。 除了文字抗抗锯齿，还还要考虑虑 ShhareePoiint 的外

36、观观和行为为。要在在设计组组合中准准确重现现 ShhareePoiint 功能，请请截取每每项 SSharrePoointt 功能能的屏幕幕截图，并并将它们们粘贴到到设计中中。 例如，创建建 Addvennturre WWorkks TTravvel 设计组组合时，要要敲定各各种颜色色和样式式。必须须获取素素材照片片、选择择字体并并创建徽徽标。在在单独的的图层中中创建每每个元素素，作为为图层效效果创建建渐变和和边框等等效果以以便日后后更改起起来更轻轻松。捕捕获 SSharrePoointt 元素素（如服服务器功功能区或或搜索框框）并将将它们粘粘贴到设设计工具具中，最最后以引引人注目目的方式式布

37、置这这些元素素。图 4 显显示最终终的 AAdveentuure Worrks Traavell 设计计组合。图 4. Advventturee Woorkss 设计计组合 创建设计组组合时，要要确定如如何重现现 ShhareePoiint 中的概概念。图图 5 显示同同一设计计组合，并并且添加加了标签签以突出出显示每每个功能能区域。表表 3 介绍了了这些功功能区域域。图 5. 设计组组合中的的 ShhareePoiint 功能区区域 表 3. ShaarePPoinnt 网网站设计计组合中中的主要要功能区区域 标签 功能区区域 说明 A功能区 包含所有标标准功能能区元素素，如“网网站操作作”

38、菜单单和“欢欢迎”菜菜单。B标题徽标 C“搜索”区区域 D全局导航 E当前导航 F痕迹导航 使用 SiiteMMapPPathh 控件件。G字段控件 H字段控件IWeb 部部件JWeb 部部件将设计组合合转换为为 HTTML 和 .CCSS 代码将设计组合合转换为为正常运运行的 HTMML 页页面。对对于简单单的设计计，您可可以跳过过此步骤骤，但是是对于复复杂的设设计，完完成此步步骤可使使设计人人员在熟熟悉的环环境中工工作。HHTMLL 代码码稍后可可用于在在 Miicroosofft SSharrePoointt Deesiggnerr 20010 等工具具中创建建母版页页。通过过首先创创建

39、正常常运行的的 HTTML 版本，您您可以针针对母版版页微调调 HTTML，而而不必处处理 SSharrePoointt 添加加到显示示内容中中的代码码。此步步骤完成成后，应应该会具具有功能能完备的的网站主主要页面面的 HHTMLL 版本本。基本本布局的的所有级级联样式式表代码码都已完完成，所所有图像像都已从从设计组组合中分分离出来来，并且且已保存存为单独独的文件件。 可供设计人人员用来来创建 HTMML 的的工具集集有许多多，从记记事本或或其他用用于编写写简单 HTMML 代代码的文文本编辑辑器，到到专业的的网页开开发工具具（如 Adoobe Dreeamwweavver 或 Miicroo

40、sofft EExprresssionn Weeb），种种类繁多多。下面面列出了了对于设设计人员员来说，专专业网页页开发应应用程序序具有的的一些优优势： 对完成 HTMML 和和级联样样式表代代码的支支持 WYSIIWIGG（所见见即所得得）设计计视图 有助于创创建兼容容多种浏浏览器的的网页的的工具DOCTYYPESS 和 ShhareePoiint创建兼容多多种浏览览器的 HTMML 时时，务必必了解 HTMML DDOCTTYPEE 声明明的工作作原理。DOCTYPE 是一种声明，指示浏览器或验证程序使用特定语言解释它描述的 HTML 或 XML 代码。尽管可以创建不声明 DOCTYPE

41、的 HTML（甚至母版页），但是如果没有它，浏览器可能会以意想不到的方式呈现 HTML 代码。例如，如果不声明有效的 DOCTYPE，则 Internet Explorer 8 将在 Quirks（兼容）模式下呈现 HTML 页面（这与 Internet Explorer 5.5 呈现页面的方式类似）。 目前使用的的一些 DOCCTYPPE 声声明可使使浏览器器以可预预测的方方式呈现现内容。最最常见的的 DOOCTYYPE 声明包包括以下下几种： HTML 4.001 SStriict 允允许使用用所有 HTMML 元元素，但但不允许许使用已已弃用的的元素，如如标记。HTML 4.001 TT

42、rannsittionnal 允允许使用用所有 HTMML 元元素，包包括已弃弃用的元元素。XHTMLL 1.0 SStriict 与与 HTTML 4.001 SStriict 类似，但但是所有有标记都都必须是是格式标标准的 XMLL（例如如，必须须正确地地结束标标记）。所所有已弃弃用的元元素都将将被忽略略。 XHTMLL 1.0 TTrannsittionnal 与与 HTTML 4.001 TTrannsittionnal 类似，但但是所有有标记必必须是格格式标准准的 XXML。允允许使用用已弃用用的元素素（但是是也必须须是格式式标准的的 XMML）。 因为 ShhareePoiint

43、20110 在在默认母母版页中中使用 XHMMTL 1.00 Sttricct DDOCTTYPEE 声明明，所以以创建要要在 SSharrePoointt 20010 中使用用的 HHTMLL 时，请请使用 XHTTML 1.00 Sttricct DDOCTTYPEE。 注释：默认情况下下，通过过任何万万维网联联合会 (W33C) 验证检检查器检检查时，SharePoint 2010 网站可能都不是完全有效的 XHTML 1.0 Strict。SharePoint 2010 中仍使用一些旧控件。尽管不会验证全部页面，但是如果使用 XHTML 1.0 Strict 编写 SharePoint

44、 HTML 代码，设计体验会更加可靠。本文中的示例使用 XHTML 1.0 Strict DOCTYPE。要在 HTTML 编辑器器工具中中创建 XHTTML 1.00 Sttricct 文文档，务务必创建建一个将将 DOOCTYYPE 指定为为 XHHTMLL 1.0 SStriict 的新空空白 HHTMLL 文档档。（有有关 XXHTMML 11.0 Strrictt DOOCTYYPE 的详细细信息，请请参阅 W3CC XHHTMLL 1.0 SStriict 规范。）工工具创建建的 HHTMLL 页面面在打开开后会显显示以下下标记。HTMLUnttitlled Doccumeent

45、在这里，创创建 HHTMLL 的其其余部分分。务必必遵循 W3CC 指南南以创建建有效的的 XHHTMLL 1.0 SStriict 代码。有有关 XXHTMML 11.0 Strrictt DOOCTYYPE 的详细细信息，请请参阅 W3CC XHHTMLL 1.0 SStriict 规范。本本节的其其余部分分重点介介绍为 ShaarePPoinnt 设设计创建建 HTTML 时需要要了解的的具体要要点。有有关创建建 HTTML 代码的的详细信信息，请请参阅 MSDDN HHTMLL 和 DHHTMLL 概述述及教程程。是否使用表表设计 ShaarePPoinnt 网网站 另一经常存存在争议

46、议的设计计选择是是 HTTML 设计布布局是否否应该使使用表，或或者是否否应该使使用标记记设置 .csss 样样式。以以前，所所有 HHTMLL 布局局都是使使用表创创建的，以以提供丰丰富的 UI，但但是随着着浏览器器的演变变，对基基于级联联样式表表的布局局的支持持也有所所变化。因因为 HHTMLL 表原原本用于于显示表表格式信信息，而而不是创创建布局局，所以以正逐渐渐被 WWeb 设计人人员淘汰汰。您应该考虑虑到，默默认情况况下 SSharrePoointt 20010 包含的的表比以以前的版版本要少少，在 ShaarePPoinnt 220100 中，基基本上只只有在显显示表格格式数据据时

47、才使使用表。Adventure Works Travel HTML 代码不使用表，而是使用级联样式表确定其整个布局。HTML 和未来来的 IInteerneet EExplloreer 与与 ShhareePoiint 的兼容容性随着 Innterrnett Exxploorerr 新版版本的发发布，浏浏览器呈呈现 HHTMLL 的方方式可能能会随着着时间的的推移而而变化。为为了应对对各种可可能的变变化，MMicrrosooft 使用 XX-UAA-Coompaatibble METTA 标标记，该该标记可可使特定定 Innterrnett Exxploorerr 版本本成为 HTMML 标标

48、记的目目标浏览览器。默默认 SSharrePoointt 20010 母版页页设置为为强制 Intternnet Expplorrer 的当前前或未来来版本在在 Innterrnett Exxploorerr 8 模式下下呈现 HTMML，如如以下标标记所示示： Advennturre WWorkks TTravvel HTMML 包包含 MMETAA 标记记，以帮帮助确保保未来的的 Innterrnett Exxploorerr 版本本能够正正确显示示 ShhareePoiint HTMML。 有关 Innterrnett Exxploorerr 标准准模式的的详细信信息，请请参阅未未来兼容

49、容性中的的 MEETA 标记和和锁定。将设计组合合切割成成 Weeb 图图像创建设计组组合对于于理解网网页的外外观很有有用，不不仅如此此，还可可以使用用设计组组合创建建 HTTML 将加载载的所有有单个图图像。将将大型图图像分成成单个 Webb 图像像的一种种有效方方式是使使用设计计应用程程序（如如 PhhotooShoop 或或 Exxpreessiion Bleend）中中的“切切割”工工具。要基于设计计组合创创建 WWeb 图像，请请从设计计应用程程序的相相应菜单单中打开开“切割割”工具具。在需需要转换换为 WWeb 图像的的所有区区域周围围创建矩矩形选择择范围，务务必隐藏藏最终图图像中

50、不不需要的的所有图图层（如如 ShhareePoiint 创建的的模型文文字）。单单击每个个切块并并选择相相应的 Webb 图像像文件格格式。对对于不应应该转换换为图像像的切块块，可以以选择不不将切块块与任何何图像关关联。通通常，应应该对具具有许多多颜色的的照片使使用 .jpgg 文件件，对于于需要透透明背景景的艺术术作品以以及文字字或图像像，应该该使用 .giif 文文件或 .pnng 文文件。.pngg 格式式的文件件能够使使用渐变变的透明明度，而而 .ggif 文件只只有 1100% 透明明的区域域。 创建 Addvennturre WWorkks TTravvel HTMML现在已经创

51、创建了所所有单独独的 WWeb 图像，下下一步骤骤是为 Advventturee Woorkss Trraveel 的的 HTTML 和 .ccss 文件编编写代码码。我使使用 AAdobbe DDreaamweeaveer CCS3 创建了了 XHHTMLL 1.0 SStriict HTMML 文文件。HHTMLL 标记记的其余余部分可可在与本本文相关关联的可可下载文文件中找找到（请请参阅 MSDDN 代代码库中中的 MMSDNN 示例例 - 实际 SSharrePoointt 品牌牌打造（该该链接可可能指向向英文页页面）。 注释：本示例中的的 HTTML 不使用用表创建建布局，而而是频繁

52、繁地使用用标记划划分页面面的逻辑辑区域。此此 HTTML 已接受受 W33C 标标记验证证服务（该该链接可可能指向向英文页页面）的的检查，符符合 XXHTMML 11.0 Strrictt。为 Advventturee Woorkss Trraveel 创创建 .csss 文件件由于所有布布局设计计都使用用了 .csss 代码码，因此此只使用用 HTTML 标记将将无法创创建有吸吸引力的的网页。在在与本文文相关联联的可下下载文件件中，找找到创建建的 .csss 代码码，这些些代码用用于设置置 HTTML 元素的的所有颜颜色、字字体、图图像和位位置（请请参阅 MSDDN 代代码库中中的 MMSD

53、NN 示例例 - 实际 SSharrePoointt 品牌牌打造（该该链接可可能指向向英文页页面）。在在 Addvennturre WWorkks TTravvel HTMML 文文件中，已已通过 部分分中的以以下代码码关联此此 .ccss 文件。HTML有关创建 .csss 代代码以设设置 HHTMLL 网页页样式的的详细信信息，请请参阅 MSDDN CCSS 参考。 在多个浏览览器中测测试 SSharrePoointt 网页页设计现在所有 HTMML、图图像和 .csss 文文件都已已创建完完毕，您您可以测测试网页页，以确确保它看看起来与与设计组组合尽可可能相似似。图 6 显显示完成成的

54、AAdveentuure Worrks Traavell 网页页在 IInteerneet EExplloreer 中中的效果果。图 6. 完成的的 Addvennturre WWorkks TTravvel 网页在在 Innterrnett Exxploorerr 中的的效果 在将 HTTML 设计转转换为正正常运行行的 SSharrePoointt 网站站之前，在在尽可能能多的浏浏览器中中测试设设计。除除了 IInteerneet EExplloreer 之之外，通通过安装装 Moozillla Firrefoox、Goooglee Chhromme 和和 Appplee 的 Saafar

55、ri ffor Winndowws，您您可以针针对许多多不同的的浏览方方案测试试 Weeb 设设计。在在多个浏浏览器中中进行测测试的另另一选择择是使用用 Exxpreessiion Webb Suuperr Prreviiew（该该链接可可能指向向英文页页面）。此此应用程程序在 Exppresssioon WWeb 3 中中提供，也也可以免免费下载载，免费费下载版版本只能能测试 Intternnet Expplorrer 版本。完完整版本本可以测测试非 Miccrossoftt 创建建的浏览览器，如如 Fiireffox。两两个版本本都可以以使用不不同的呈呈现引擎擎并排显显示页面面，并且且都可

56、以以对最细细微的差差异进行行非常精精细的检检查。 在 ShaarePPoinnt 中中创建品品牌现在，我将将重点介介绍如何何在发布布网站中中创建品品牌。您您将了解解如何使使用简易易母版页页，以及及如何添添加自定定义 HHTMLL 标记记和 .csss 代码码以创建建与原 Advventturee Woorkss Trraveel HHTMLL 页面面极其相相似的母母版页。最最后，您您将了解解页面布布局的相相关信息息，包括括如何为为 Addvennturre WWorkks TTravvel 创建页页面布局局。本节节将帮助助您完成成 Addvennturre WWorkks TTravvel 的

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

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

59、 /有关如何在在 ShhareePoiint 默认母母版页中中使用内内容占位位符的详详细信息息，请参参阅 WWinddowss ShhareePoiint Serrvicces 3.00 网站站中 DDefaaultt.Maasteer 上上的默认认内容占占位符。ShareePoiint 简易母母版页因为 ShhareePoiint 需要许许多特定定内容占占位符，所所有从头头开始创创建自定定义母版版页可能能很有挑挑战性。尽尽管可以以从任何何默认母母版页开开始创建建新自定定义母版版页，但但是它们们包含在在开始之之前必须须删除的的大量品品牌打造造代码。更更好的方方法是从从简易母母版页开开始，简简易

60、母版版页是预预配置的的母版页页框架，仅仅包含在在 ShhareePoiint 中创建建正常运运行的页页面所必必需的功功能。有有关 SSharrePoointt Seerveer 220100 母版版页中使使用的内内容占位位符的列列表，请请参阅将将现有母母版页升升级到 ShaarePPoinnt FFounndattionn 母版页。本文的下载载内容中中包含一一个适用用于面向向 Innterrnett 的发发布网站站的简易易母版页页，其中中包含的的注释浅浅显易懂懂。总体体来说，这这是 SSharrePoointt 的一一个传统统简易母母版页，但但是它使使用了一一些专用用于发布布的元素素，最值值得