结合使用 SharePoint 2013 和已知的 Web 技术创建在线品牌
原文发布于 2013 年 2 月 25 日（星期一）
本文介绍如何轻松使用设计管理器与您非常熟悉的 Web 设计工具，通过 SharePoint 2013 这一强大的内容管理功能系统来定义公司的在线品牌。
利用 SharePoint 2013，您可以使用已知的 Web 技术、喜欢的工具和所需的设备来打造您的 SharePoint 发布网站的品牌，可以比以往任何时候更轻松地开始 SharePoint 设计师或开发者的工作生涯。当前的 SharePoint 专业人员对此不必担心。您迄今为止在学习 SharePoint 上所做的工作仍有用武之地，您掌握的有关 SharePoint 发布网页模型的知识仍然非常有用。
本文概要介绍您如何能够轻松地使用 SharePoint 2013 设计管理器和设备通道与您非常熟悉的 Web 设计工具来定义公司的在线品牌。在保留相同的页面呈现基础结构的同时，我们对打造 SharePoint 发布网站品牌的方式进行了三处重大改进。
使用您已知的 Web 技术
SharePoint 仍然保留了使用 ASP.NET 的母版页和页面布局，但您现在还可以采用 HTML 设计母版页和页面布局，包括使用 SharePoint 控件的 HTML 代码段。SharePoint 将在后台创建它需要但您会忽略的相应的 ASP.NET 文件。
过去，您可以使用 CSS 和 JavaScript 设置网站的样式，但现在它们已完全集成到 SharePoint Web 开发体验中。我们在 HTML 预览上做了大量工作，使您可以直接设置 HTML 的样式而不必使用服务器来查看它。如果您确实要在服务器上进行预览，则可以在您选择的任何 SharePoint 页面的上下文中执行此操作！
使用您熟悉的 Web 技术开展工作不仅仅局限于页面布局层面。要求您使用 XSLT 进行设计的内容查询 Web 部件仍然存在，但新的内容搜索 Web 部件是在 SharePoint 2013 中打造搜索驱动的体验的重要构建基块。确保该内容搜索 Web 部件可带来绝佳的设计人员体验对我们非常重要，因此可使用 JavaScript、HTML 和 CSS 对它进行自定义。
由于我们假定您完全不了解 SharePoint，因此我们将借助设计管理器指导您完成对发布网站的品牌打造。此设计管理器提供了类似于向导的体验，以便为您提供并行的 SharePoint 开发指导以及用于查看和处理设计文件的切入点。每个步骤在 MSDN 上还有各自的说明性文章：
使用您喜欢的工具自定义 SharePoint
自定义网站的设计不仅仅是将 HTML 转换为 ASP.NET。为了帮助您成功创建网站，我们已经为您的内容准备好了常用的占位符。对于页面布局，我们插入了特定于您选择的内容类型的所有页面字段，通过这种方式，创建 SharePoint 设计文件就变成了编辑和调整这样的工作，无需进行创建。
有了代码段库，向网站添加 SharePoint 功能就有了一个不错的开始。对于熟悉以前版本的 SharePoint 的用户，可以将代码段库视为您要从 SharePoint Designer 访问的一组控件（但意义比这个更广泛一点）。代码段库提供了一组常用组件的 HTML 版本（在很多情况下，包括当您在 Dreamweaver 拆分视图之类的地方编辑文件时用于向您显示正在处理的内容的静态预览）-包括 Web 部件库中的所有 Web 部件。对于每个代码段，您只需调整其属性并将其复制到 HTML 母版页或页面布局中，然后 SharePoint 就会在后台将其转换为其所需的 ASP.NET 控件。
图 1. 代码段库页面的顶部是所有代码段的功能区。页面的正文包含代码段的描述、属性和 HTML 代码以及实时预览。每个母版页都具有相同的代码段库，它与页面布局的代码段库稍有不同，页面布局的代码段库依赖于其内容类型（因为页面字段会更改）。
在任何设备上体验 SharePoint
用户不再只是使用鼠标在台式机或便携式计算机上访问您的网站了。现在，各种各样的设备让人眼花缭乱，如平板电脑、手机和 Surface，我的天！如何为用户打造一种体验，使他们的屏幕大小得到充分利用呢？是否可以针对触控设备进行优化？在 SharePoint 2013 中，利用设备通道，无论访问者使用什么设备进行浏览，您都能以最合适的方式向其呈现您的网站。作为设计人员，您应该考虑网站对于各种不同外形因素应带来的体验，这些外形因素由分配给最多 10 个不同通道的用户代理子字符串区分。
每个通道都能以多台设备为目标。例如，您可以让一个通道同时以 Windows Phone 和 iPhone（因为它们的屏幕大小相似）为目标，而让一个单独的通道以 iPad 为目标。您可以对每个通道使用不同的母版页和 CSS，还可以让内容将目标设置为特定通道，在这期间您可以使用完全相同的 URL（有利于可用性提高和搜索引擎优化）。
通过使用设备通道基础结构，您获得了使用设备通道面板的机会，该面板对内容目标设置是非常有用的资产。您放在这些面板中的内容仅在您根据服务器端逻辑指定的通道上呈现，这将减少页面加载时间和通过网络发送的字节数。通过将这些面板与响应性 CSS 设计结合，您可以提供更快更简化的用户体验。您可以设置基于“iOS”子字符串的通道，让它捕获 iPad、iPhone 和 iPad mini 并发送根据设备的屏幕分辨率加载不同 CSS 的单个母版页，而不用像上一个示例中那样根据屏幕大小设置不同的通道。例如，如果您是 Windows Phone 团队的成员，则可以以 iOS 设备为目标并创建为 Windows Phone 面板打广告的面板。
图 2 和图 3. 浏览器的并行设计模型和基于跨网站集发布功能的新网站的移动体验、使用响应性 CSS、设备通道面板以及根据设备通道更改内容搜索 Web 部件结果的外观的显示模板。
本文介绍了如何使用最熟悉的工具轻松定义您公司的在线品牌以及 SharePoint 2013 的强大的内容管理系统。若要了解更多信息，请查看我们的文档作者在 MSDN 上为您编写的所有内容。为 SharePoint 2013 构建网站、SharePoint 2013 中的设计管理器概述和在 SharePoint 2013 中开发网站设计是几篇不错的入门文章。尽情享受设计的乐趣吧！
--Alyssa Levitz, SharePoint 项目经理
这是一篇本地化的博客文章。请访问 Create your online brand with a combination of SharePoint 2013 and the web technologies you already know 以查看原文