打造品牌网站完整版.docx
《打造品牌网站完整版.docx》由会员分享，可在线阅读，更多相关《打造品牌网站完整版.docx（44页珍藏版）》请在冰豆网上搜索。
打造品牌网站完整版
HENsystemofficeroom【HEN16H-HENS2AHENS8Q8-HENH1688】
打造品牌网站
使用SharePoint2010发布网站实际打造品牌
SharePoint2010
1（共1）对本文的评价是有帮助-评价此主题
发布日期：
2010年11月
摘要：
了解一些基本概念，以帮助您在MicrosoftSharePointServer2010发布网站中创建引人注目的用户界面设计。
适用范围：
MicrosoftSharePointServer2010
供稿人：
AndrewConnell，CriticalPathTrainingLLC（该链接可能指向英文页面）（SharePointMVP）|RandyDrisgill，SharePoint911（该链接可能指向英文页面）（SharePointMVP）
使用SharePoint2010发布网站实际打造品牌简介
收集SharePoint发布网站的设计要求
规划SharePoint品牌打造任务
为SharePoint网站设计创建实际设计组合
创建AdventureWorksTravelHTML
为AdventureWorksTravel创建.css文件
在多个浏览器中测试SharePoint网页设计
在SharePoint中创建品牌
向SharePoint添加.css和图像文件
使用HTML构建母版页
为SharePoint网站设计制定.css规则
创建自定义页面布局
使用SharePointDesigner编辑页面布局
打包和部署SharePoint品牌
结论
其他资源
下载代码（该链接可能指向英文页面）
使用SharePoint2010发布网站实际打造品牌简介
MicrosoftSharePointServer2010发布网站使用“发布功能”提供创建引人注目的Web内容管理（WCM）网站的功能。
这些网站通常用作面向Internet的网站，它们需要使用定制的用户界面（UI）建立联机公司标识。
创建定制UI（无论是在传统HTML页面中还是在MicrosoftSharePointServer2010中）的过程称为打造网站品牌。
发布网站使用母版页、页面布局、Web部件和级联样式表（.css文件），从而使设计人员和开发人员可以创建品牌化的网站，这些网站的设计可以与当下许多最新热门网站相媲美。
本文重点介绍使用发布网站为面向Internet的外部网站合理规划和创建设计的机制，如图1所示。
本文以虚构的旅行社AdventureWorksTravel为例，该公司希望创建高度品牌化的SharePoint网站。
图1.AdventureWorksTravel网站品牌
收集SharePoint发布网站的设计要求
在您准备为SharePoint网站创建精美的设计时，首先需要花一些时间精心规划网站。
在规划阶段，要收集网站元素（如母版页和页面布局）的设计要求。
通过在开始编写代码之前正确理解业务目标，可以避免在项目生命周期的后期艰难而耗时地重新编写代码。
收集设计要求时，首先要召开正式的要求收集会议。
无论您设计的网站是面向10名用户还是100,000名用户，都必须满足一些要求，才能将项目视为取得成功。
根据网站的复杂性，调整收集的要求的详细程度。
例如，在收集要求时，大型网站（无论是具有许多页面还是面向许多用户）可能要比小型的简单网站花费更长时间。
在要求收集过程中征求关键业务、市场营销和IT利益干系人的意见，务必考虑他们的想法，并确保所有关键利益干系人都完全认可项目。
对于品牌打造项目来说，要求收集通常是一项非常困难的任务，有时需要委托给市场营销部门，甚至是外包给外部顾问。
尽管征求关键利益干系人的意见很重要，但还要考虑在决策制定过程中征求更多人的意见是否会增加收集要求所需的时间以及是否会增加项目的整体复杂程度。
因此，在考虑要征求哪些利益干系人的意见时，要认真考虑谁会提供针对性最强的意见。
以下几节介绍开始任何SharePoint品牌打造项目之前要了解的一些更重要的概念。
SharePointServer2010发布网站与SharePointFoundation2010网站
要求收集完成后，首先要确定网站是以MicrosoftSharePointFoundation2010为基础，还是以运行MicrosoftSharePointServer2010（启用了发布功能）的服务器为基础。
发布网站基于SharePointFoundation构建，使用发布网站构建面向Internet的引人注目的网站有许多优势。
与使用SharePointFoundation网站相比，使用SharePointServer发布网站创建品牌的一些优势包括：
允许内容作者使用比SharePointFoundation网站提供的更可靠的格式文本编辑体验创建网页。
包含母版页，母版页面向发布网站并使用可充分利用发布功能的特定代码程序集。
更轻松地控制通过WebUI进行的Web导航，并且为设计人员提供了更多选项。
使用WebUI可以轻松地更改母版页，并且可以将母版页应用于当前网站下的所有子网站。
使用页面布局可在页面级别创建模板。
使用文字版式可完成简单的页面布局表单。
文字版式不可配置。
使用$SPUrl标记通过相对于网站集（$SPUrl;~sitecollection/）或网站根目录（$SPUrl:
~site/）的URL确定HTML资产的目标。
注释：
在本文中，发布网站是一个在顶级（根）目录中具有网站集并且该网站集启用了发布功能的SharePointServer2010Web应用程序。
为了简单起见，默认发布模板（“企业Wiki”和“发布门户”）已经启用了发布功能。
本文在AdventureWorksTravel示例中使用“企业Wiki”模板。
要了解有关设置Web应用程序和网站集的详细信息，请参阅适用于SharePointServer2007Web内容管理网站的规范性指南（该链接可能指向英文页面）。
面向SharePoint发布网站设计的浏览器和平台
开始设计网站和编写网站代码之前，请尽早确定该设计将支持的浏览器和操作系统平台。
尽管您应该努力创建尽可能在每个浏览器和每个操作系统中都能够完美呈现的网站设计，但即便是针对这一级别的浏览器兼容性对设计进行成功测试，通常也是不可能且不切实际的。
通常，最好选择一组浏览器和操作系统以专门针对它们进行测试，并相应地编写代码以便在打造网站品牌时支持它们。
选择浏览器和操作系统支持级别的一种不错的做法是参考研究并提供Web流量分析的专题网站。
应用程序的净市场份额（该链接可能指向英文页面）列出了2010年6月总市场份额排在前10位的Web浏览器，如表1所示。
表1.浏览器版本和总市场份额浏览器版本总市场份额百分比
InternetExplorer8
%
InternetExplorer6
%
Firefox
%
InternetExplorer7
%
Firefox
%
Chrome
%
Safari
%
InternetExplorer8兼容模式
%
Firefox
%
Opera
%
Microsoft指明了各浏览器在SharePoint中的支持级别。
这些级别包括：
支持支持的Web浏览器可以与SharePointServer2010协同工作，并且所有特性和功能都能按预期方式工作。
支持但具有已知限制支持但具有已知限制的Web浏览器可以与SharePointServer2010协同工作，但存在一些已知限制。
大多数特性和功能都能正常工作，但如果存在无法正常工作或根据设计被禁用的特性或功能，则会提供有关如何解决这些问题的文档。
未测试：
未测试的Web浏览器是指它与SharePointServer2010的兼容性未经过测试，使用这类Web浏览器时可能会遇到问题。
有关SharePoint中的浏览器支持级别的详细信息，请参阅规划浏览器支持（OfficeSharePointServer）。
注释：
SharePoint2010不支持InternetExplorer。
尽管您可以创建能够在InternetExplorer中正常显示Web内容的母版页，但是它与SharePoint2010的创作体验不兼容，后者需要基于新式标准的浏览器。
本文中的AdventureWorksTravel示例重点介绍如何在InternetExplorer7、InternetExplorer8和Firefox3中实现尽可能完美的最终用户浏览体验，这样可以确保其他一些新式浏览器（包括GoogleChrome和AppleSafari）也能够正常呈现。
适用于SharePoint网站设计的屏幕大小
要考虑的另一问题是新设计应该面向的屏幕分辨率。
多年前，显示器仅支持有限的一组分辨率，如640x480。
随着显示器价格的降低，网站访问者以1920x1200甚至更高分辨率进行浏览的情况越来越常见。
大多数网站设计人员认为1024x768是最常见的屏幕分辨率，紧接着是1280x800。
创建要在SharePoint网站中显示的设计时，请记住SharePoint以用户的典型屏幕分辨率一次呈现大量信息。
如果考虑到浏览器工具栏和滚动条也占用屏幕上的一些可用显示区域，则可用于呈现内容的空间就更小了。
在AdventureWorksTravel示例中，最低屏幕分辨率是1024x768。
设计留出了一些边距以供滚动条使用。
因为存在边距，所以网站的宽度不能超过960像素。
定义SharePoint网站设计的访问群体和成功标准
为了帮助确保成功完成品牌打造计划，请设定一些主观性较强的设计目标。
哪些访问群体将使用该网站？
网站的典型用户希望或需要完成哪些任务？
用户希望如何在网站中导航？
用户希望与形象较为传统的公司开展业务还是希望与较为现代的公司开展业务？
与软件开发过程不同，设计过程对于每个业务环境来说都是主观的。
在确定品牌标识之前，利息干系人之间对设计决策通常存在争议。
因为品牌创意可能很难评估，所以最好同时确定新品牌的成功标准。
成功标准可以非常简单，例如吸引更多访问者；也可以非常复杂，例如计算在主要受众人口统计中销量的增加情况。
成功标准越容易量化和衡量，确定品牌打造工作的相对成功程度就越容易。
AdventureWorksTravel网站的设计旨在迎合喜欢个性化外观的年轻用户群。
这些用户喜欢使用顶部和左侧导航以及SharePointServer2010搜索在网站中导航。
用户访问网站的主要原因是了解探险目的地和预订假期。
该品牌适合这样的旅行社：
迎合的受众希望在假期参加更具冒险性的活动，而不是像往常一样呆在海滩上的旅馆中。
规划SharePoint品牌打造任务
实际为SharePoint网站的品牌打造编写代码的过程涉及若干步骤，如创建母版页、页面布局和级联样式表（.css文件）。
打造SharePoint品牌的规划过程也可以分为若干步骤，如创建黑白框架图、创建全彩的网站设计组合（简称组合）和创建可正常运行的主要页面的HTML和.css文件版本。
以下各节介绍这些活动，因为它们与创建品牌化的SharePointUI有关。
创建简单的SharePoint网站设计框架图
框架图通常是一组黑白框图，形象地描述网站的整体结构及其布局、导航和功能，有时甚至描述其内容。
由于Web设计（或者广义上的设计）的主观特性，最好以框架图的形式讨论这些主题，而不是陷入选择颜色和照片的困境。
正确完成后，框架图可以为开发人员和设计人员提供功能和布局方面的相关指导，以便在品牌打造过程的后期阶段应用。
创建框架图有许多方式，从使用简单的笔和纸绘制到使用专用软件工具（如MicrosoftVisio2010）建模。
创建框架图时使用专用软件工具可能非常有帮助，因为您可以利用映射到特定应用程序（如SharePoint）的特定功能的预建模具。
您可以找到许多免费的模板和模具，可使用它们来创建SharePoint网站的框架图。
创建框架图时，要确定品牌支持的SharePoint功能。
SharePoint默认情况下显示的内容中有一些并非适合每个面向Internet的网站。
图2标出了SharePoint界面的主要功能区域，表2介绍了这些功能区域。
图2.SharePoint界面的主要功能区域
表2.SharePoint界面的主要功能区域图中的标签功能区域功能描述
A
服务器功能区
UI的整个顶部区域是功能区的一部分。
显示的内容取决于用户的当前上下文。
B
网站操作
用于与SharePoint交互的主菜单，主要由内容作者和管理员使用。
C
全局痕迹导航控件
在MicrosoftOfficeSharePointServer2007中首次引入的全局痕迹导航控件的新型实现。
单击时，该图标显示的动态HTML呈现网站的分层视图。
使用它可从层次结构中的当前位置导航到上面各级。
D
“页面状态操作”按钮
该按钮用于控制页面状态，通常显示用于编辑或保存当前页面的快捷方式。
E
功能区上下文选项卡
此类选项卡提供特定于SharePoint网站功能的菜单。
显示的内容会根据用户与其交互的页面对象而异。
有些选项卡并非适用于每个网站。
F
“欢迎”菜单
此菜单显示欢迎消息，并且允许用户查看他们的配置文件、注销和以其他用户身份登录。
如果安装了其他语言包，则此处还会提供用于更改用户语言的功能。
用户未登录时，“欢迎”菜单还会显示“登录”链接。
G
“开发人员仪表板”按钮
该按钮打开通常显示在屏幕底部的开发人员仪表板。
开发人员仪表板包含有关页面呈现和查询的统计信息。
该图标在开发人员仪表板的显示级别设置为OnDemand（其他选项包括On和Off）时显示。
管理员可以使用WindowsPowerShell或使用SharePointAPI设置开发人员仪表板的显示级别。
H
标题徽标
有时称为网站图标。
它通常显示SharePoint网站图标，但也可以显示用户定义的徽标。
I
痕迹导航
这是特定于母版页的痕迹导航性质的控件。
它包括“网站标题”和标题区中的标题的占位符（通常包含“页面标题”）。
“网站标题”链接到网站的顶层。
J
社交按钮
用于“顶”某个项以及向内容添加标记和备注。
K
全局导航
有时称为“顶部链接栏”或“顶部导航栏”，它是网站的水平方向上的主要导航机制。
L
“搜索”区域
搜索框用于输入搜索字词以在网站上执行搜索。
M
帮助按钮
帮助按钮链接到SharePoint2010帮助文档。
N
快速启动
提供当前导航。
有时称为“左侧导航”。
它是与当前位置相关的页面的辅助或垂直方面导航机制。
O
树视图
以Windows资源管理器的形式显示网站。
由于树视图的外观，它通常非常适合Intranet网站。
P
回收站
提供指向网站的“回收站”的链接，回收站是用于存储已删除项的区域。
通常，这非常适合Intranet网站。
Q
所有网站内容
指向“所有网站内容”页面的链接。
它是OfficeSharePointServer2007中的“查看所有网站内容”链接。
通常，这非常适合Intranet网站。
R
正文区域
表示主要内容占位符，其中包括特定于页面的所有内容。
如果要呈现页面内容，则必须使用正文区域。
为SharePoint网站创建框架图时，一定要考虑SharePoint支持的几种页面类型。
SharePoint网站中可以包含的页面类型包括主页、登录页面、搜索结果页面、文章和Wiki页面等等。
图3显示了AdventureWorksTravel网站的MicrosoftVisio2010框架图。
图3.AdventureWorksTravel网站的Visio2010框架图
从框架图页面中可以看出，AdventureWorksTravel网站支持一些而非全部SharePoint功能。
例如，UI中会去掉“帮助”按钮、树视图和回收站等一些元素。
通过在框架图阶段做出这些决策，开发人员不必构建不必要的功能。
为SharePoint网站设计创建实际设计组合
尽管规划新SharePoint网站时创建框架图肯定会对完成重要的品牌打造工作有所帮助，但是在开始编写代码之前，您应该创建完整的设计组合或原型。
与框架图不同，大多数Web设计组合旨在尽可能真实地模拟实际网站的外观和行为，但不实际创建任何代码。
组合包括静态版本的实际照片、徽标、颜色、字体、表单元素以及页面上可能显示的其他设计或结构项目。
对于SharePoint网站，模拟页面内容意味着模拟SharePoint用户界面的许多功能区域。
尽管您可以使用任何图形应用程序（甚至使用笔和纸）创建设计组合，但是AdobePhotoshop或MicrosoftExpressionDesign等应用程序可以大大简化该任务。
使用这些应用程序可以为SharePoint网站创建易于维护和可重用的设计组合。
注释：
尽管本文并不涉及具体的AdobePhotoshop或MicrosoftExpressionDesign功能，但是介绍了一些常规概念和过程，这些和类似设计应用程序中可能提供了类似的功能。
以下各节介绍用于创建设计组合的应用程序常见的功能。
使用设计应用程序中的图层和图层组将各元素分开
使用图层和图层组可将设计元素分开放置在特定单元中。
图层不会在一个“平面”文件中创建设计元素，它的工作原理是每个新图层都位于前一图层的上面。
设计人员可以隐藏、显示、操纵、移动各个图层，还可以对各个图层应用投影和边框等效果，这些都不影响其他设计元素。
使用设计工具创建设计组合时，最好为设计中的每个元素创建一个新图层。
使用设计应用程序创建可编辑的文字
使用各种字体、字号和样式创建可编辑的文字。
如果没有此功能，在基本设计程序中创建的文字将是静态的，并且必须清除才能进行各种更改。
通过使用新式设计工具，您可以调整文字大小、以粗体显示文字、设置文字颜色或更改字体等等，而不需要清除先前的状态。
使用设计应用程序创建可在Web中安全使用的图像
以可在Web中安全使用的文件格式（如.jpg,.gif和.png）轻松保存图像。
许多设计程序可以帮助您以适合Web的小型文件创建图像，而不影响它们的质量。
使用设计应用程序创建实际设计组合
创建设计组合时，人们都很乐意使用功能强大的设计工具创建极其完美或精致的设计。
但请注意，创建的设计不能太过精致，否则浏览器可能无法在SharePoint页面中将其真实呈现出来。
文字就属于此类限制。
在AdobePhotoshop中，每段文字都可以使用不同的抗锯齿技术。
抗锯齿是一种降低图像在以较低分辨率显示时的失真程度的方法。
特别是，小型文字在Photoshop中的显示效果比在浏览器中平滑得多。
为了防止设定的期望值太高，最好避免对小型文字使用抗锯齿。
除了文字抗锯齿，还要考虑SharePoint的外观和行为。
要在设计组合中准确重现SharePoint功能，请截取每项SharePoint功能的屏幕截图，并将它们粘贴到设计中。
例如，创建AdventureWorksTravel设计组合时，要敲定各种颜色和样式。
必须获取素材照片、选择字体并创建徽标。
在单独的图层中创建每个元素，作为图层效果创建渐变和边框等效果以便日后更改起来更轻松。
捕获SharePoint元素（如服务器功能区或搜索框）并将它们粘贴到设计工具中，最后以引人注目的方式布置这些元素。
图4显示最终的AdventureWorksTravel设计组合。
图4.AdventureWorks设计组合
创建设计组合时，要确定如何重现SharePoint中的概念。
图5显示同一设计组合，并且添加了标签以突出显示每个功能区域。
表3介绍了这些功能区域。
图5.设计组合中的SharePoint功能区域
表3.SharePoint网站设计组合中的主要功能区域标签功能区域说明
A
功能区
包含所有标准功能区元素，如“网站操作”菜单和“欢迎”菜单。
B
标题徽标
C
“搜索”区域
D
全局导航
E
当前导航
F
痕迹导航
使用SiteMapPath控件。
G
字段控件
H
字段控件
I
Web部件
J
Web部件
将设计组合转换为HTML和.CSS代码
将设计组合转换为正常运行的HTML页面。
对于简单的设计，您可以跳过此步骤，但是对于复杂的设计，完成此步骤可使设计人员在熟悉的环境中工作。
HTML代码稍后可用于在MicrosoftSharePointDesigner2010等工具中创建母版页。
通过首先创建正常运行的HTML版本，您可以针对母版页微调HTML，而不必处理SharePoint添加到显示内容中的代码。
此步骤完成后，应该会具有功能完备的网站主要页面的HTML版本。
基本布局的所有级联样式表代码都已完成，所有图像都已从设计组合中分离出来，并且已保存为单独的文件。
可供设计人员用来创建HTML的工具集有许多，从记事本或其他用于编写简单HTML代码的文本编辑器，到专业的网页开发工具（如AdobeDreamweaver或MicrosoftExpressionWeb），种类繁多。
下面列出了对于设计人员来说，专业网页开发应用程序具有的一些优势：
对完成HTML和级联样式表代码的支持
WYSIWIG（所见即所得）设计视图
有助于创建兼容多种浏览器的网页的工具
DOCTYPES和SharePoint
创建兼容多种浏览器的HTML时，务必了解HTMLDOCTYPE声明的工作原理。
DOCTYPE是一种声明，指示浏览器或验证程序使用特定语言解释它描述的HTML或XML代码。
尽管可以创建不声明DOCTYPE的HTML（甚至母版页），但是如果没有它，浏览器可能会以意想不到的方式呈现HTML代码。
例如，如果不声明有效的DOCTYPE，则InternetExplorer8将在Quirks（兼容）模式下呈现HTML页面（这与InternetExplorer呈现页面的方式类似）。
目前使用的一些DOCTY
升级会员 