SharePoint2010打造品牌网站

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

2、面） (SSharrePoointt MVVP) | RRanddy DDrissgilll，ShaarePPoinnt9111（该该链接可可能指向向英文页页面） (ShhareePoiint MVPP)目录使用 SSharrePoointt 20010 发布网网站实际际打造品品牌简介介收集 SSharrePoointt 发布布网站的的设计要要求规划 SSharrePoointt 品牌牌打造任任务为 ShhareePoiint 网站设设计创建建实际设设计组合合创建 AAdveentuure Worrks Traavell HTTML 为 Addvennturre WWorkks TTravve

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

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

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

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

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

8、意见时，要认真真考虑谁谁会提供供针对性性最强的的意见。以下几节节介绍开开始任何何 ShhareePoiint 品牌打打造项目目之前要要了解的的一些更更重要的的概念。SharrePoointt Seerveer 220100 发布布网站与与 ShhareePoiint Fouundaatioon 220100 网站站要求收集集完成后后，首先先要确定定网站是是以 MMicrrosooft ShaarePPoinnt FFounndattionn 20010 为基础础，还是是以运行行 Miicroosofft SSharrePoointt Seerveer 220100（启用用了发布布功能）的服务务

9、器为基基础。发发布网站站基于 ShaarePPoinnt FFounndattionn 构建建，使用用发布网网站构建建面向 Intternnet 的引人人注目的的网站有有许多优优势。与与使用 ShaarePPoinnt FFounndattionn 网站站相比，使用 ShaarePPoinnt SServver 发布网网站创建建品牌的的一些优优势包括括：允许内容容作者使使用比 ShaarePPoinnt FFounndattionn 网站站提供的的更可靠靠的格式式文本编编辑体验验创建网网页。包含母版版页，母母版页面面向发布布网站并并使用可可充分利利用发布布功能的的特定代代码程序序集。更轻松地地

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

11、目录中具具有网站站集并且且该网站站集启用用了发布布功能的的 ShhareePoiint Serrverr 20010 Webb 应用用程序。为了简简单起见见，默认认发布模模板（“企业 Wikki”和和“发布布门户”）已经经启用了了发布功功能。本本文在 Advventturee Woorkss Trraveel 示示例中使使用“企企业 WWikii”模板板。要了解有有关设置置 Weeb 应应用程序序和网站站集的详详细信息息，请参参阅适用用于 SSharrePoointt Seerveer 220077 Weeb 内内容管理理网站的的规范性性指南（该链接接可能指指向英文文页面）。面向 SSharr

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

13、析的的专题网网站。应应用程序序的净市市场份额额（该链链接可能能指向英英文页面面）列出出了 220100 年 6 月总市市场份额额排在前前 100 位的的 Weeb 浏浏览器，如表 1 所所示。表 1. 浏览览器版本本和总市市场份额额浏览器器版本总总市场份份额百分分比Inteerneet EExplloreer 8825.118%Inteerneet EExplloreer 6617.116%Fireefoxx 3.615.667%Inteerneet EExplloreer 7712.004%Fireefoxx 3.55.244%Chroome 4.115.166%Safaari 4.003.

14、833%Inteerneet EExplloreer 88 兼容容模式3.355%Fireefoxx 3.02.655%Operra 110.xx1.888%Micrrosooft 指明了了各浏览览器在 ShaarePPoinnt 中中的支持持级别。这些级级别包括括：支持支持持的 WWeb 浏览器器可以与与 ShhareePoiint Serrverr 20010 协同工工作，并并且所有有特性和和功能都都能按预预期方式式工作。支持但具具有已知知限制支支持但具具有已知知限制的的 Weeb 浏浏览器可可以与 ShaarePPoinnt SServver 20110 协协同工作作，但存存在一些些已知

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

16、teerneet EExplloreer 66.0。尽管您您可以创创建能够够在 IInteerneet EExplloreer 66.0 中正常常显示 Webb 内容容的母版版页，但但是它与与 ShhareePoiint 20110 的的创作体体验不兼兼容，后后者需要要基于新新式标准准的浏览览器。本文中的的 Addvennturre WWorkks TTravvel 示例重重点介绍绍如何在在 Innterrnett Exxploorerr 7、Intternnet Expplorrer 8 和和 Fiireffox 3 中中实现尽尽可能完完美的最最终用户户浏览体体验，这这样可以以确保其其他一些

17、些新式浏浏览器（包括 Goooglee Chhromme 和和 Appplee Saafarri）也也能够正正常呈现现。适用于 ShaarePPoinnt 网网站设计计的屏幕幕大小要考虑的的另一问问题是新新设计应应该面向向的屏幕幕分辨率率。多年年前，显显示器仅仅支持有有限的一一组分辨辨率，如如 6440 xx 4880。随随着显示示器价格格的降低低，网站站访问者者以 119200 x 12000 甚甚至更高高分辨率率进行浏浏览的情情况越来来越常见见。大多多数网站站设计人人员认为为 10024 x 7768 是最常常见的屏屏幕分辨辨率，紧紧接着是是 12280 x 8800。创建要要在 SSha

18、rrePoointt 网站站中显示示的设计计时，请请记住 ShaarePPoinnt 以以用户的的典型屏屏幕分辨辨率一次次呈现大大量信息息。如果果考虑到到浏览器器工具栏栏和滚动动条也占占用屏幕幕上的一一些可用用显示区区域，则则可用于于呈现内内容的空空间就更更小了。在 Addvennturre WWorkks TTravvel 示例中中，最低低屏幕分分辨率是是 10024 x 7768。设计留留出了一一些边距距以供滚滚动条使使用。因因为存在在边距，所以网网站的宽宽度不能能超过 9600 像素素。定义 SSharrePoointt 网站站设计的的访问群群体和成成功标准准为了帮助助确保成成功完成成品

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

20、众人人口统计计中销量量的增加加情况。成功标标准越容容易量化化和衡量量，确定定品牌打打造工作作的相对对成功程程度就越越容易。Adveentuure Worrks Traavell 网站站的设计计旨在迎迎合喜欢欢个性化化外观的的年轻用用户群。这些用用户喜欢欢使用顶顶部和左左侧导航航以及 ShaarePPoinnt SServver 20110 搜搜索在网网站中导导航。用用户访问问网站的的主要原原因是了了解探险险目的地地和预订订假期。该品牌牌适合这这样的旅旅行社：迎合的的受众希希望在假假期参加加更具冒冒险性的的活动，而不是是像往常常一样呆呆在海滩滩上的旅旅馆中。规划 SSharrePoointt 品

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

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

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

24、的的主要功功能区域域图中的的标签功功能区域域功能描描述A服务器功功能区UI 的的整个顶顶部区域域是功能能区的一一部分。显示的的内容取取决于用用户的当当前上下下文。B网站操作作用于与 ShaarePPoinnt 交交互的主主菜单，主要由由内容作作者和管管理员使使用。C全局痕迹迹导航控控件在 Miicroosofft OOffiice ShaarePPoinnt SServver 20007 中中首次引引入的全全局痕迹迹导航控控件的新新型实现现。单击击时，该该图标显显示的动动态 HHTMLL 呈现现网站的的分层视视图。使使用它可可从层次次结构中中的当前前位置导导航到上上面各级级。D“页面状状态操作

25、作”按钮钮该按钮用用于控制制页面状状态，通通常显示示用于编编辑或保保存当前前页面的的快捷方方式。E功能区上上下文选选项卡此类选项项卡提供供特定于于 ShhareePoiint 网站功功能的菜菜单。显显示的内内容会根根据用户户与其交交互的页页面对象象而异。有些选选项卡并并非适用用于每个个网站。F“欢迎”菜单此菜单显显示欢迎迎消息，并且允允许用户户查看他他们的配配置文件件、注销销和以其其他用户户身份登登录。如如果安装装了其他他语言包包，则此此处还会会提供用用于更改改用户语语言的功功能。用用户未登登录时，“欢迎迎”菜单单还会显显示“登登录”链链接。G“开发人人员仪表表板”按按钮该按钮打打开通常常显示

26、在在屏幕底底部的开开发人员员仪表板板。开发发人员仪仪表板包包含有关关页面呈呈现和查查询的统统计信息息。该图图标在开开发人员员仪表板板的显示示级别设设置为 OnDDemaand（其他选选项包括括 Onn 和 Offf）时时显示。管理员员可以使使用 WWinddowss PoowerrSheell 或使用用 ShhareePoiint APII 设置置开发人人员仪表表板的显显示级别别。H标题徽标标有时称为为网站图图标。它它通常显显示 SSharrePoointt 网站站图标，但也可可以显示示用户定定义的徽徽标。I痕迹导航航这是特定定于 vv4.mmastter 母版页页的痕迹迹导航性性质的控控件。

27、它它包括“网站标标题”和和标题区区中的标标题的占占位符（通常包包含“页页面标题题”）。“网站站标题”链接到到网站的的顶层。J社交按钮钮用于“顶顶”某个个项以及及向内容容添加标标记和备备注。K全局导航航有时称为为“顶部部链接栏栏”或“顶部导导航栏”，它是是网站的的水平方方向上的的主要导导航机制制。L“搜索”区域搜索框用用于输入入搜索字字词以在在网站上上执行搜搜索。M帮助按钮钮帮助按钮钮链接到到 ShhareePoiint 20110 帮帮助文档档。N快速启动动提供当前前导航。有时称称为“左左侧导航航”。它它是与当当前位置置相关的的页面的的辅助或或垂直方方面导航航机制。O树视图以 Wiindoow

28、s 资源管管理器的的形式显显示网站站。由于于树视图图的外观观，它通通常非常常适合 Inttrannet 网站。P回收站提供指向向网站的的“回收收站”的的链接，回收站站是用于于存储已已删除项项的区域域。通常常，这非非常适合合 Inntraanett 网站站。Q所有网站站内容指向“所所有网站站内容”页面的的链接。它是 Offficee ShhareePoiint Serrverr 20007 中的“查看所所有网站站内容”链接。通常，这非常常适合 Inttrannet 网站。R正文区域域表示主要要内容占占位符，其中包包括特定定于页面面的所有有内容。如果要要呈现页页面内容容，则必必须使用用正文区区域。

29、为 ShhareePoiint 网站创创建框架架图时，一定要要考虑 ShaarePPoinnt 支支持的几几种页面面类型。ShaarePPoinnt 网网站中可可以包含含的页面面类型包包括主页页、登录录页面、搜索结结果页面面、文章章和 WWikii 页面面等等。图 3 显示了了 Addvennturre WWorkks TTravvel 网站的的 Miicroosofft VVisiio 220100 框架架图。图 3. Addvennturre WWorkks TTravvel 网站的的 Viisioo 20010 框架图图从框架图图页面中中可以看看出，AAdveentuure Worrks

30、 Traavell 网站站支持一一些而非非全部 ShaarePPoinnt 功功能。例例如，UUI 中中会去掉掉“帮助助”按钮钮、树视视图和回回收站等等一些元元素。通通过在框框架图阶阶段做出出这些决决策，开开发人员员不必构构建不必必要的功功能。为 ShhareePoiint 网站设设计创建建实际设设计组合合尽管规划划新 SSharrePoointt 网站站时创建建框架图图肯定会会对完成成重要的的品牌打打造工作作有所帮帮助，但但是在开开始编写写代码之之前，您您应该创创建完整整的设计计组合或或原型。与框架架图不同同，大多多数 WWeb 设计组组合旨在在尽可能能真实地地模拟实实际网站站的外观观和行为

31、为，但不不实际创创建任何何代码。组合包包括静态态版本的的实际照照片、徽徽标、颜颜色、字字体、表表单元素素以及页页面上可可能显示示的其他他设计或或结构项项目。对对于 SSharrePoointt 网站站，模拟拟页面内内容意味味着模拟拟 ShhareePoiint 用户界界面的许许多功能能区域。尽管您可可以使用用任何图图形应用用程序（甚至使使用笔和和纸）创创建设计计组合，但是 Adoobe Phootosshopp 或 Miicroosofft EExprresssionn Deesiggn 等等应用程程序可以以大大简简化该任任务。使使用这些些应用程程序可以以为 SSharrePoointt 网站

32、站创建易易于维护护和可重重用的设设计组合合。注释释：尽管本文文并不涉涉及具体体的 AAdobbe PPhottoshhop 或 Miicroosofft EExprresssionn Deesiggn 功功能，但但是介绍绍了一些些常规概概念和过过程，这这些和类类似设计计应用程程序中可可能提供供了类似似的功能能。以下各节节介绍用用于创建建设计组组合的应应用程序序常见的的功能。使用设计计应用程程序中的的图层和和图层组组将各元元素分开开使用图层层和图层层组可将将设计元元素分开开放置在在特定单单元中。图层不不会在一一个“平平面”文文件中创创建设计计元素，它的工工作原理理是每个个新图层层都位于于前一图图

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

34、计应用程程序创建建可在 Webb 中安安全使用用的图像像以可在 Webb 中安安全使用用的文件件格式（如 .jpgg, .giff 和 .ppng）轻松保保存图像像。许多多设计程程序可以以帮助您您以适合合 Weeb 的的小型文文件创建建图像，而不影影响它们们的质量量。使用设计计应用程程序创建建实际设设计组合合创建设计计组合时时，人们们都很乐乐意使用用功能强强大的设设计工具具创建极极其完美美或精致致的设计计。但请请注意，创建的的设计不不能太过过精致，否则浏浏览器可可能无法法在 SSharrePoointt 页面面中将其其真实呈呈现出来来。文字字就属于于此类限限制。在在 Addobee Phhot

35、ooshoop 中中，每段段文字都都可以使使用不同同的抗锯锯齿技术术。抗锯锯齿是一一种降低低图像在在以较低低分辨率率显示时时的失真真程度的的方法。特别是是，小型型文字在在 Phhotooshoop 中中的显示示效果比比在浏览览器中平平滑得多多。为了了防止设设定的期期望值太太高，最最好避免免对小型型文字使使用抗锯锯齿。除了文字字抗锯齿齿，还要要考虑 ShaarePPoinnt 的的外观和和行为。要在设设计组合合中准确确重现 ShaarePPoinnt 功功能，请请截取每每项 SSharrePoointt 功能能的屏幕幕截图，并将它它们粘贴贴到设计计中。例如，创创建 AAdveentuure Wo

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

37、innt 中中的概念念。图 5 显显示同一一设计组组合，并并且添加加了标签签以突出出显示每每个功能能区域。表 33 介绍绍了这些些功能区区域。图 5. 设计计组合中中的 SSharrePoointt 功能能区域表 3. ShhareePoiint 网站设设计组合合中的主主要功能能区域标标签功能能区域说说明A功能区包含所有有标准功功能区元元素，如如“网站站操作”菜单和和“欢迎迎”菜单单。B标题徽标标C“搜索”区域D全局导航航E当前导航航F痕迹导航航使用 SSiteeMappPatth 控控件。G字段控件件H字段控件件IWeb 部件JWeb 部件将设计组组合转换换为 HHTMLL 和 .CCSS

38、代码将设计组组合转换换为正常常运行的的 HTTML 页面。对于简简单的设设计，您您可以跳跳过此步步骤，但但是对于于复杂的的设计，完成此此步骤可可使设计计人员在在熟悉的的环境中中工作。HTMML 代代码稍后后可用于于在 MMicrrosooft ShaarePPoinnt DDesiigneer 220100 等工工具中创创建母版版页。通通过首先先创建正正常运行行的 HHTMLL 版本本，您可可以针对对母版页页微调 HTMML，而而不必处处理 SSharrePoointt 添加加到显示示内容中中的代码码。此步步骤完成成后，应应该会具具有功能能完备的的网站主主要页面面的 HHTMLL 版本本。基本

39、本布局的的所有级级联样式式表代码码都已完完成，所所有图像像都已从从设计组组合中分分离出来来，并且且已保存存为单独独的文件件。可供设计计人员用用来创建建 HTTML 的工具具集有许许多，从从记事本本或其他他用于编编写简单单 HTTML 代码的的文本编编辑器，到专业业的网页页开发工工具（如如 Addobee Drreammweaaverr 或 Miicroosofft EExprresssionn Weeb），种类繁繁多。下下面列出出了对于于设计人人员来说说，专业业网页开开发应用用程序具具有的一一些优势势：对完成 HTMML 和和级联样样式表代代码的支支持 WYSSIWIIG（所所见即所所得）设设

40、计视图图有助于创创建兼容容多种浏浏览器的的网页的的工具DOCTTYPEES 和和 ShhareePoiint创建兼容容多种浏浏览器的的 HTTML 时，务务必了解解 HTTML DOCCTYPPE 声声明的工工作原理理。DOOCTYYPE 是一种种声明，指示浏浏览器或或验证程程序使用用特定语语言解释释它描述述的 HHTMLL 或 XMML 代代码。尽尽管可以以创建不不声明 DOCCTYPPE 的的 HTTML（甚至母母版页），但是是如果没没有它，浏览器器可能会会以意想想不到的的方式呈呈现 HHTMLL 代码码。例如如，如果果不声明明有效的的 DOOCTYYPE，则 IInteerneet EE

41、xplloreer 88 将在在 Quuirkks（兼兼容）模模式下呈呈现 HHTMLL 页面面（这与与 Innterrnett Exxploorerr 5.5 呈呈现页面面的方式式类似）。目前使用用的一些些 DOOCTYYPE 声明可可使浏览览器以可可预测的的方式呈呈现内容容。最常常见的 DOCCTYPPE 声声明包括括以下几几种：HTMLL 4.01 Strrictt 允许使使用所有有 HTTML 元素，但不允允许使用用已弃用用的元素素，如标标记。HTMLL 4.01 Traansiitioonall 允许使使用所有有 HTTML 元素，包括已已弃用的的元素。XHTMML 11.0 Str

42、rictt 与 HTTML 4.001 SStriict 类似，但是所所有标记记都必须须是格式式标准的的 XMML（例例如，必必须正确确地结束束标记）。所有有已弃用用的元素素都将被被忽略。XHTMML 11.0 Traansiitioonall 与 HTTML 4.001 TTrannsittionnal 类似，但是所所有标记记必须是是格式标标准的 XMLL。允许许使用已已弃用的的元素（但是也也必须是是格式标标准的 XMLL）。因为 SSharrePoointt 20010 在默认认母版页页中使用用 XHHMTLL 1.0 SStriict DOCCTYPPE 声声明，所所以创建建要在 Sha

43、arePPoinnt 220100 中使使用的 HTMML 时时，请使使用 XXHTMML 11.0 Strrictt DOOCTYYPE。注释：默认情况况下，通通过任何何万维网网联合会会 (WW3C) 验证证检查器器检查时时，ShhareePoiint 20110 网网站可能能都不是是完全有有效的 XHTTML 1.00 Sttricct。ShaarePPoinnt 220100 中仍仍使用一一些旧控控件。尽尽管不会会验证全全部页面面，但是是如果使使用 XXHTMML 11.0 Strrictt 编写写 ShhareePoiint HTMML 代代码，设设计体验验会更加加可靠。本文中中的示例

44、例使用 XHTTML 1.00 Sttricct DDOCTTYPEE。要在 HHTMLL 编辑辑器工具具中创建建 XHHTMLL 1.0 SStriict 文档，务必创创建一个个将 DDOCTTYPEE 指定定为 XXHTMML 11.0 Strrictt 的新新空白 HTMML 文文档。（有关 XHTTML 1.00 Sttricct DDOCTTYPEE 的详详细信息息，请参参阅 WW3C XHTTML 1.00 Sttricct 规规范。）工具创创建的 HTMML 页页面在打打开后会会显示以以下标记记。HTMLLUnntittledd Doocummentt 在这里，创建 HTMML

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

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

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

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

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

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

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

52、区域。此此 HTTML 已接受受 W33C 标标记验证证服务（该链接接可能指指向英文文页面）的检查查，符合合 XHHTMLL 1.0 SStriict。为 Addvennturre WWorkks TTravvel 创建 .csss 文件件由于所有有布局设设计都使使用了 .csss 代代码，因因此只使使用 HHTMLL 标记记将无法法创建有有吸引力力的网页页。在与与本文相相关联的的可下载载文件中中，找到到创建的的 .ccss 代码，这些代代码用于于设置 HTMML 元元素的所所有颜色色、字体体、图像像和位置置（请参参阅 MMSDNN 代码码库中的的 MSSDN 示例 - 实际际 Shharee

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

54、Trraveel 网网页在 Intternnet Expplorrer 中的效效果。图 6. 完成成的 AAdveentuure Worrks Traavell 网页页在 IInteerneet EExplloreer 中中的效果果在将 HHTMLL 设计计转换为为正常运运行的 ShaarePPoinnt 网网站之前前，在尽尽可能多多的浏览览器中测测试设计计。除了了 Innterrnett Exxploorerr 之外外，通过过安装 Mozzillla FFireefoxx、Goooglee Chhromme 和和 Appplee 的 Saafarri ffor Winndowws，您您可以针

55、针对许多多不同的的浏览方方案测试试 Weeb 设设计。在在多个浏浏览器中中进行测测试的另另一选择择是使用用 Exxpreessiion Webb Suuperr Prreviiew（该链接接可能指指向英文文页面）。此应应用程序序在 EExprresssionn Weeb 33 中提提供，也也可以免免费下载载，免费费下载版版本只能能测试 Intternnet Expplorrer 版本。完整版版本可以以测试非非 Miicroosofft 创创建的浏浏览器，如 FFireefoxx。两个个版本都都可以使使用不同同的呈现现引擎并并排显示示页面，并且都都可以对对最细微微的差异异进行非非常精细细的检查查

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

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

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

59、母版页页中使用用内容占占位符的的详细信信息，请请参阅 Winndowws SSharrePoointt Seerviicess 3.0 网网站中 Deffaullt.MMastter 上的默默认内容容占位符符。SharrePoointt 简易易母版页页因为 SSharrePoointt 需要要许多特特定内容容占位符符，所有有从头开开始创建建自定义义母版页页可能很很有挑战战性。尽尽管可以以从任何何默认母母版页开开始创建建新自定定义母版版页，但但是它们们包含在在开始之之前必须须删除的的大量品品牌打造造代码。更好的的方法是是从简易易母版页页开始，简易母母版页是是预配置置的母版版页框架架，仅包包含在

60、ShaarePPoinnt 中中创建正正常运行行的页面面所必需需的功能能。有关关 ShhareePoiint Serrverr 20010 母版页页中使用用的内容容占位符符的列表表，请参参阅将现现有母版版页升级级到 SSharrePoointt Foounddatiion 母版页。本文的下下载内容容中包含含一个适适用于面面向 IInteerneet 的的发布网网站的简简易母版版页，其其中包含含的注释释浅显易易懂。总总体来说说，这是是 ShhareePoiint 的一个个传统简简易母版版页，但但是它使使用了一一些专用用于发布布的元素素，最值值得注意意的是导导航控件件。该简简易母版版页应该该适用于