将html转为母版页,在 SharePoint 中将 .html 文件转换为母版页

、

和 )应用样式时要谨慎。Be cautious about applying styles to general HTML tags like ,

, and . SharePoint 设计中的所有内容(包括功能区)都在 标记内。Everything within your SharePoint design, including the ribbon, is within the tag. 对于经常应用到 标记的样式，请考虑将它们应用到

，此标记是 SharePoint 用于页面正文的标记。For styles that you would usually apply to the tag, consider applying them instead to

, which is a tag that SharePoint uses for the main body of the page. 此外，SharePoint 还会使用许多图像，这些图像会受您应用到 标记的样式的影响。Also, SharePoint uses many images that are affected by whatever styles you apply to the tag.

许多设计者都会设计导航样式，方法是将类应用到

• 和
• 元素中。但是，SharePoint 使用动态导航控件，您可以在代码段库中将此控件添加到母版页中。默认情况下，SharePoint 导航控件已应用样式，您必须改写它们。Many designers style the navigation by applying classes to
  • and
  • elements. But, SharePoint uses a dynamic navigation control, which you can add to your master page from the Snippet Gallery. SharePoint navigation controls have styles applied by default that you have to override.

    请注意下面的文件命名潜在问题：Consider these potential issues about file naming:

    如果您有 Index.html 和 Index.htm，则这些文件将具有同一 .master 文件。If you have Index.html and Index.htm, those files will have the same .master file.

    如果您有 Design/Index.html 和 Design/SubDesign/Index.html，则这两个文件均可用于转换为其自己单独的 .master 文件，但它们在设计管理器的母版页列表中都显示为 Index.html。若要消除其岐义，请单击或选择各个文件的省略号按钮，查看完整路径。If you have Design/Index.html and Design/SubDesign/Index.html, both of those files are available for conversion into their own, separate .master files, but they'll both show up as Index.html in the master page list in Design Manager. To disambiguate them, click or select the ellipsis button for each file to see the full path.

    若要添加 JavaScript 小组件，请确保

    (function( …

    请勿将它们置于同一行中，如下所示。Do not put them on the same line, like this.

    对 JQuery 库的引用(外部引用)应位于 标记前面。A reference to the JQuery library (an external reference) should go before the tag.

    将 .html 文件转换为母版页Convert the .html file into a master page

    在转换 .html 文件之前，必须先上载所有设计文件，包括 .html 文件。有关详细信息，请参阅 如何：将网络驱动器映射到 SharePoint 母版页样式库。Before you convert an .html file, you first have to upload all of your design files, including your .html file. For more information, see How to: Map a network drive to the SharePoint Master Page Gallery.

    将 .html 文件转换为 .master 文件To convert the .html file into a .master file

    浏览到您的发布网站。Browse to your publishing site.

    在页面右上角，选择"设置"，然后选择"设计管理器"。In the upper-right corner of the page, choose Settings, and then choose Design Manager.

    在设计管理器的左侧导航窗格中选择"编辑母版页"。In Design Manager, in the left navigation pane, choose Edit Master Pages.

    选择“将 .html 文件转换为 SharePoint 母版页”。Choose Convert an .html file to a SharePoint master page.

    在“选择资产”对话框中，浏览并选择要转换的 .html 文件。In the Select an Asset dialog box, browse to and select the .html file that you want to convert.

    备注

    在上载设计文件时，应将与单个设计相关的所有文件保存在母版页样式库中的其自己的文件夹中。在将设计文件夹复制到映射网络驱动器中时，母版页样式库会保持您创建的文件夹结构。When you upload your design files, you should keep all files that are related to a single design in their own folder in the Master Page Gallery. When you copy your design folder into the mapped network drive, the Master Page Gallery retains whatever folder structure you created.

    选择“插入”。Choose Insert.

    此时，SharePoint 会使用相同的名称将 .html 文件转换为 .master 文件。At this point, SharePoint converts your .html file into a .master file with the same name.

    在设计管理器中，现在将显示带有“状态”列的 .html 文件，该列显示两个可能的状态之一：In Design Manager, your .html file now appears with a Status column that shows one of two possible statuses:

    警告和错误Warnings and Errors

    转换成功Conversion successful

    使用“状态”列中的链接预览文件，并查看有关母版页的任何错误或警告。Follow the link in the Status column to preview the file and to view any errors or warnings about the master page.

    预览页面是母版页的实时服务器端预览。预览顶部将显示可能必须通过在 HTML 编辑器中编辑 .html 文件来解决的任何警告或错误。你必须修复错误，预览时才能正确显示母版页。The preview page is a live server-side preview of your master page. The top of the preview displays any warnings or errors that you may have to resolve by editing the .html file in an HTML editor. Errors must be fixed before the preview will display the master page correctly.

    For more information about previewing the master page with different pages, see How to: Change the preview page in SharePoint Design Manager.

    预览页面的右上角还包含一个"代码段"链接。此链接用于打开代码段库，您可在其中开始使用动态 SharePoint 控件开始替换您的设计中的静态或模型控件。有关详细信息，请参阅 SharePoint 设计管理器代码段。The preview page also contains a Snippets link in the upper-right corner. This link opens the Snippet Gallery, where you can begin replacing static or mockup controls in your design with dynamic SharePoint controls. For more information, see SharePoint Design Manager snippets.

    若要修复任何错误，请编辑直接驻留在服务器上的 .html 文件，方法是使用 HTML 编辑器打开并编辑映射驱动器中的该 .html 文件。每次保存 .html 文件后，所有更改都会同步到关联的 .master 文件中。To fix any errors, edit the .html file that resides directly on the server by using an HTML editor to open and edit the .html file in the mapped drive. Each time you save the .html file, any changes are synced to the associated .master file.

    在母版页预览成功后，您将看到添加到 HTML 文件中的

    标记。After your master page previews successfully, you will see a

    tag that gets added to your .html file. 您可能必须滚动到页面底部才能看到

    标记。You may have to scroll to the bottom of the page to see the

    tag.

    此

    是主内容块。它驻留在名为 ContentPlaceHolderMain 的内容占位符中。在运行时，如果访问者浏览您的网站并请求某页面，此内容占位符会使用页面布局中包含匹配内容区域中的内容的相应内容进行填充。您应将此

    置于您希望页面布局在母版页上显示的位置。This

    is the main content block. It resides inside a content placeholder named ContentPlaceHolderMain. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this

    where you want your page layouts to appear on the master page.

    如果 .html 文件的页面正文中包含静态或模型内容，现在可以开始以下过程：从 .html 母版页删除该静态内容并将这些样式应用到 SharePoint 页面模型的其他元素中，例如页面布局、页字段控件、代码段和显示模板。有关示例，请参阅 如何：在 SharePoint 中创建页面布局。If your .html file contains static or mockup content in the body of the page, now you begin the process of removing that static content from the HTML master page and applying those styles to other elements of the SharePoint page model, such as page layouts, page field controls, snippets, and display templates. For an example, see How to: Create a page layout in SharePoint.

    了解转换后的 .html 文件Understanding the .html file after conversion

    在将 .html 文件转换为母版页后，.html 文件中添加了多行标记。你可以放心地忽略大多数标记，在浏览器中查看源代码时，大多数标记都不会显示在网站的最终标记位置，但此类标记对将 .html 文件转换为 SharePoint 实际使用的 .master 文件至关重要。每次保存 .html 文件的更改内容后，使用此类 SharePoint 标记，可在后台对关联的 .master 文件做出相同的更改。When you convert an .html file into a master page, many lines of markup get added to your .html file. You can safely ignore most of this markup, and most of it will not appear in the final markup of your site when you view source in the browser, but this markup is critical for converting your .html file into the .master file that SharePoint actually uses. Each time you save a change to your .html file, this SharePoint markup makes it possible for that same change to be made to the associated .master file in the background.

    添加的标记包括

    标记、代码段和内容占位符之前和之中的标记。The markup that gets added includes tags before and in the tag, snippets, and content placeholders. 大多数标记包含在注释标记内：每次保存对 .html文件所做的更改时，转换过程都会删除这些注释，以便使用其中的 ASP.NET 标记。Most of the markup is enclosed within comment tags: Whenever you save a change to the .html file, the conversion process strips out the comments to use the ASP.NET markup within.

    标记类型Types of markup

    添加到 .html 文件中的标记的类型细分如下：The following is a breakdown of the types of markup that are added to the .html file:

    文档属性 标记包含 SharePoint 元数据，其中包括有关文件本身和成功转换为 .master 文件所需的某些属性的信息。Document properties The tag contains SharePoint metadata, including information about the file itself and some properties needed for the successful conversion to the .master file.

    http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.

    0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA

    1

    True

    SharePoint 命名空间注册 标记("SharePoint 标记")用于提供注册 SharePoint 命名空间的数据行。SharePoint namespace registration The tag ("SharePoint markup") provides a line registering a SharePoint namespace.

    注释 在转换过程中将忽略 和 ("注释开始"和"注释结尾")标记。这些标记可帮助您解析标记行。Comments The and ("Comment start" and "comment end") tags are ignored during the conversion process. These tags are to help you parse the lines of markup.

    …

    …

    …

    代码段 和 ("标记开始"和"标记结尾")标记用于指示 SharePoint 控件或代码段的开始和结尾部分。代码段是将 SharePoint 功能添加到您的页面的 SharePoint 控件。您可以使用代码段库自己添加代码段。有关详细信息，请参阅 SharePoint 设计管理器代码段。Snippets The and ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet. A snippet is a SharePoint control that adds SharePoint functionality to your page. You can add snippets yourself by using the Snippet Gallery. For more information, see SharePoint Design Manager snippets.

    预览块 和 ("预览开始"和"预览结尾")标记包围着一节不能编辑的 HTML 代码，因为这节代码仅影响设计时预览。Preview blocks The and ("Preview start" and "preview end") tags surround a section of HTML code that you shouldn't edit because this section affects only the design-time preview. 这些预览部分是代码片段插入 SharePoint 控件时的快照。These preview sections are a snapshot in time of the SharePoint control that snippet is inserting. 借助预览，可以在客户端 HTML 编辑器中更有意义地处理 .html 文件。A preview makes it possible for you to work more meaningfully on the .html file in a client-side HTML editor. 不过，在预览内更改内容或样式对 SharePoint 最终使用的 .master 文件没有持久作用。But, changing the content or styling within that preview has no lasting effect on the .master file, which is what SharePoint is ultimately using. 若要设置代码片段的样式，必须使用自己的自定义 CSS 发现并重写 SharePoint 样式。To style a snippet, you have to identify and override the SharePoint styles with your own custom CSS.

    The SharePoint ribbon will be here when your file is either previewed on or applied to your site.

    SharePoint ID 在转换过程中添加到 .html 文件中的两个代码段(页眉内容代码段和 SharePoint 功能区)都有关联的 SharePoint ID 或 SID(分别为 00 和 02)。利用这些 ID，可以缩短这些代码段，使页面中的 HTML 更便于阅读。SharePoint IDs Two of the snippets added to your .html file during the conversion (the Page Head Contents snippet and the SharePoint Ribbon) have an associated SharePoint ID, or SID (00 and 02, respectively). These IDs make it possible to shorten the snippets and make the HTML in the page easier to read.

    添加的代码段Added snippets

    知道添加到 .html 文件中的两个代码段很重要。这些代码段是在转换过程中自动添加的，你不能在代码段库中添加它们。It's important to know about two of the snippets that are added to your .html file. These snippets are added automatically during the conversion, but they're not available for you to add from the Snippet Gallery.

    功能区 为使内容作者能够在 SharePoint 网站上创建页面和创作内容，您的母版页需要功能区和"套件导航"(SharePoint 的新增功能)。功能区已包含在安全修整代码段中，因此当访问者浏览您的网站时，功能区仅对通过身份验证的用户显示，而不对匿名用户显示。您可以将功能区移到页面上的其他位置或通过改写默认 CSS 类来设计其样式，但我们建议不要移动或重新排序功能区内包含的组件(例如"网站操作"菜单)。The Ribbon For content authors to be able to create pages and author content on your SharePoint site, your master page needs the ribbon and the "suite navigation" that is new to SharePoint. The ribbon is contained in a security-trimming snippet, so that when a visitor browses your site, the ribbon is displayed only to authenticated users, not anonymous users. You can move the ribbon to a different position on the page or style it by overriding the default CSS classes, but we do not recommend moving or reordering the components (such as the Site Actions menu) that are contained inside the ribbon.

    ContentPlaceHolderMain 在

    标记底部、结尾 标记前面，转换过程插入了一个名为 PlaceHolderMain 的内容占位符。此代码段内包含黑框黄色的

    ，它显示在 HTML 编辑器的设计视图中，或设计管理器的服务器端预览中。ContentPlaceHolderMain At the bottom of the

    tag, before the closing tag, the conversion process inserts a content placeholder named PlaceHolderMain. Inside this snippet is the black-bordered, yellow

    that appears in the design view of your HTML editor, or in the server-side preview in Design Manager.

    此

    代表将放入页面布局和页面指定的内容的区域。您应将 PlaceHolderMain 代码段移到母版页中将由页面布局填充的位置，即在您网站的所有页面中不相同的网站设计的区域。This

    represents the area where the content specified by your page layouts and pages will go. You should move the PlaceHolderMain snippet to the place within your master page that will be filled by your page layouts—the area of your site design that isn't the same across all pages of your site.

    This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.

    参考：添加到 .html 文件的 SharePoint 标记的示例Reference: Examples of SharePoint markup added to the .html file

    下面的示例展示了在 .html 文件转换为母版页后添加到此文件的标记。The following is an example of markup added to an .html file after it is converted to a master page.

    添加到

    标记中的标记Markup added to the tag

    添加到开始

    标记后的标记Markup added after the start tag

    功能区代码段Ribbon snippet

    The SharePoint ribbon will be here when your file is either previewed on or applied to your site.

    两个 SharePoint

    标记Two SharePoint

    tags

    添加到结束 标记和两个结尾

    标记前面的标记Markup added before the closing