階段 6: 上傳並將新的主版頁面套用到 in SharePoint Server 發佈網站Stage 6: Upload and apply a new master page to a publishing site in SharePoint Server

摘要:了解如何將上傳並將新的主版頁面套用至 SharePoint Server 2016 的發佈網站。Summary: Learn how to upload and apply a new master page to a publishing site in SharePoint Server 2016.

注意

大部分的這一系列中所述的功能是僅適用於 SharePoint Online 中的私人每個網站集合。Most of the features described in this series are available only for private sites collections in SharePoint Online.

快速概觀Quick overview

中所述階段 5: 將您的發佈網站連線至 SharePoint Server 中目錄,我們已發佈網站連線至我們目錄。SharePoint Server 2016 我們連線時,自動建立,某些頁面,哪些一些搜尋結果顯示位置。所有這些頁面具有標準的 SharePoint 外觀。因此,現在該是時候來授與 Contoso 的外觀。As described in Stage 5: Connect your publishing site to a catalog in SharePoint Server, we connected the publishing site to our catalog. When we connected, SharePoint Server 2016 automatically created some pages for us, on which some search results where shown. These pages all have the standard SharePoint look. So, now it is time to give them a Contoso look.

在這個階段,您將了解:In this stage, you'll learn:

注意

此文章並不 ' t涵蓋如何建立主版頁面。它只會涵蓋如何上傳並套用已完成的主版頁面檔案和儲存在本機電腦的其他設計檔案。這些檔案不提供下載。This article doesn' t cover how to create a master page. It will only cover how to upload and apply an already completed master page file and other design files that are stored locally on your computer. These files are not available for download.

如需如何建立主版頁面,請參閱:For information about how to create a master page, see:

啟動階段 6Start stage 6

關於主版頁面About the master page

當訪客瀏覽我們的 Contoso 網站時,其會不同頁面上看到不同的內容。顯示的內容皆為主版頁面與版面配置的組合。When visitors browse our Contoso site, they'll see different content on different pages. The displayed content is a combination of a master page and page layouts.

主版頁面定義通用版面配置和您看到上所有的網頁,例如標誌、 標題及瀏覽] 功能表的介面。A master page defines the common layout and interface that you see on all webpages, such as logo, title and navigation menu.

版面配置所處理版面配置與個別的頁面,例如 [首頁] 頁面上,或顯示音訊產品] 頁面的介面。我們將提供關於這些稍後的這一系列的詳細資訊。Layout and interface for the individual pages, such as the home page, or the page that displays Audio products, are handled by page layouts. We'll provide more information about them later in this series.

主版頁面頁面配置

在舊版的 SharePoint 中,您有設計的 ASP.NET 主版頁面。這些主版頁面也都包含 SharePoint 特定標記,如控制項及內容的版面配置區。In earlier versions of SharePoint, you had to design master pages in ASP.NET. These master pages also had to include SharePoint specific markup, such as controls and content placeholders.

在 SharePoint Server 2016,您可以建立主版頁面以 HTML 格式和 SharePoint Server 2016 會轉換為的 ASP.NET 頁面您。這表示當您設計您的主版頁面,您可以使用最愛的 HTML 編輯器,著重在 HTML、 CSS、 和 JavaScript。您不需要擔心 ASP.NET 或 SharePoint 特定標記。In SharePoint Server 2016, you can create a master page in HTML format, and SharePoint Server 2016 will convert it to an ASP.NET page for you. This means that when you design your master page, you can use your favorite HTML editor, focus on HTML, CSS, and JavaScript. You don't have to worry about ASP.NET or SharePoint specific markup.

當您將 HTML 主版頁面新增至 SharePoint Server 2016 時,會自動建立關聯的 ASP.NET 主版頁面。因為這兩個檔案有相關聯,HTML 主版頁面檔案所做的任何變更都會執行自動以相關聯的 ASP.NET 主版頁面檔案。When you add an HTML master page to SharePoint Server 2016, an associated ASP.NET master page is automatically created. Because the two files are associated, any changes that you make to the HTML master page file will be carried over automatically to the associated ASP.NET master page file.

如需詳細資訊,請參閱 < SharePoint 2013 頁面模型概觀For more information, see Overview of the SharePoint 2013 page model.

在我們的案例中,我們有 HTML 主版頁面與 CSS 檔案及圖像,我們想要上傳並套用到 Contoso 網站等一些設計資產。所有這些檔案都會儲存在本機電腦上。In our scenario, we have an HTML master page and some design assets, such as a CSS file and images, that we want to upload and apply to our Contoso site. All these files are stored on your local computer.

SharePoint 會預期在主版頁面圖庫中尋找設計檔案。所以這是我們將應上傳檔案。若要取得到主版頁面圖庫中,移至 [網站設定 --> 主版頁面與版面配置SharePoint expects to find design files in the Master Page Gallery. So this is where we should upload the files. To get to the Master Page Gallery, go to Site Settings --> Master pages and page layouts.

主版頁面圖庫

您可以使用 [上傳文件] 按鈕來將單一檔案上傳至主版頁面圖庫。您想要新增文件會比較麻煩每次但是,使用此按鈕。若要方便 life 您,您可以將您的網路磁碟機對應。這將可讓您拖放檔案到主版頁面圖庫與 Windows 檔案總管]。You can use the Upload Document button to upload a single file to the Master Page Gallery. But, using this button every time that you want to add a document can be somewhat cumbersome. To make life easy for yourself, you can map your network drive. This will enable you to drag-and-drop files into the Master Page Gallery with Windows Explorer.

如何將對應網路磁碟機How to map your network drive

  1. 從 [設定] 功能表選取 [設計管理員]。From Settings menu, select Design Manager.

    設計管理員

  2. 在 [設計管理員歡迎使用] 頁面上,按一下 [ 3。上傳設計檔案。On the Design Manager Welcome page, click 3. Upload Design Files.

    上傳設計檔案

  3. 在 [上傳設計檔案] 頁面上將複製到您設計檔案的 URL。On the Upload Design Files page, copy the URL to your design files.

    連結設計檔案

    注意

    根據您的電腦作業系統的下一個步驟會改變。此範例會示範如何在執行 Windows 的電腦上的網路磁碟機對應 8.x。The next steps will vary, depending on your computer's operating system. This example shows how to map a network drive on a computer that is running Windows 8.x.

  4. 開啟 [Windows 檔案總管]。以滑鼠右鍵按一下 [網路],然後選取 [網路磁碟機對應Open Windows Explorer. Right-click Network, and then select Map network drive.

    連線網路磁碟機

  5. 在 [資料夾] 欄位中,貼上您在步驟 3 中,複製的 URL] 和 [完成時間In the Folder field, paste the URL that you copied in step 3, and then click Finish.

    貼上 URL

  6. 主版頁面圖庫內容瀏覽器視窗隨即開啟。An explorer window with your Master Page Gallery content opens.

    探索主版頁面圖庫

在我們的案例中,我們會*使用 SharePoint 工作流程進行核准。將檔案已經過核准。讓我們上傳新的主版頁面之前,我們想要關閉主版頁面圖庫的版本設定。In our scenario, we are *not using SharePoint workflows for approval. The files have already been approved. So before we upload a new master page, we want to turn off versioning for the Master Page Gallery.

若要關閉主版頁面圖庫的版本設定:To turn off versioning for the Master Page Gallery:

  1. 在 [文件庫] 索引標籤上按一下 [文件庫設定]。On the LIBRARY tab, click Library Settings.

  2. 在 [設定] 頁面上按一下 [版本設定]。On the Settings page, click Versioning settings.

  3. 在 [版本設定] 頁面上 [內容核准] 區段中的需要核准內容的送出的項目,請選取 [On the Versioning Settings page, in the Content Approval section, for Require content approval for submitted items, select No.

  4. [文件版本歷程記錄] 區段中的建立每當您編輯此文件庫中的檔案版本、 選取 [無版本設定]。In the Document Version History section, for Create a version each time you edit a file in this document library, select No versioning.

  5. 要求取出] 區段中的要求之前可加以編輯已取出的文件,請選取 [In the Require Check Out section, for Require documents to be checked out before they can be edited, select No.

    版本設定

現在我們已經準備好要上傳新的主版頁面。Now we're ready to upload a new master page.

如何上傳新的主版頁面How to upload a new master page

因為我們對應至我們網路磁碟機上, 傳新的主版頁面,變得很容易。只要-拖到您的主版頁面圖庫的檔案。Because we have mapped our network drive, uploading a new master page becomes very easy. Simply drag-and-drop the file into your Master Page Gallery.

拖放

如果您有任何關聯的設計檔案,例如 CSS 檔案或圖像您拖放到主版頁面圖庫這些也可以。If you have any associated design files, such as CSS files or images, you can drag-and-drop these into the Master Page Gallery also.

SharePoint 中重新整理以查看已新增新的 HTML 主版頁面的 [主版頁面圖庫] 頁面。但是請注意尚未建立關聯的 ASP.NET 主版頁面。In SharePoint, refresh the Master Page Gallery page to see that the new HTML master page is added. But, notice that an associated ASP.NET master page has not yet been created.

已新增 MPG 主版頁面

因為我們拖曳到主版頁面強大捨棄 HTML 主版頁面、 內容類型相關聯的檔案是設計檔案。針對 SharePoint Server 2016 建立關聯的 ASP.NET 主版頁面,我們必須變更上傳新的 HTML 主檔案的內容類型。執行此作業變更檔案屬性。Because we dragged and dropped the HTML master page into the Master Page Galley, the content type associated with the file is Design File. For SharePoint Server 2016 to create an associated ASP.NET master page, we have to change the content type for the newly uploaded HTML master file. This is performed by changing the file properties.

若要變更的檔案屬性:To change the file properties:

  1. 主版頁面圖庫] 頁面上選取 [上傳新的主版頁面,並再按一下 [編輯屬性On the Master Page Gallery page, select the newly uploaded master page, and then click Edit Properties.

    編輯屬性

  2. 在 [內容類型] 區段中選取 [ HTML 主版頁面In the Content Type section, select HTML Master Page.

  3. 在 [相容的使用者介面版本] 區段中,選取 [ 15In the Compatible UI Version(s) section, select 15.

    變更檔案屬性

在 [主版頁面圖庫] 頁面中,我們可以看到會建立關聯的 ASP.NET 主版頁面。On the Master Page Gallery page, we can see that an associated ASP.NET master page is created.

 ![MPG Associated Created](../media/OTCSP_MPGAssociatedCreated.png)

我們現在可以開始將我們新的主版頁面套用。We are now ready to apply our new master page.

如何套用新的主版頁面How to apply a new master page

若要套用新的主版頁面:To apply a new master page:

  1. 從 [網站設定] 頁面上,按一下 [(在 [外觀與風格) 下的 [主版頁面]。From the Site Settings page, click Master page (under Look and Feel ).

  2. 網站主版頁面] 區段中,從指定要使用此網站與可繼承的所有網站的主版頁面中,選取 [上傳新的主版頁面。在我們的案例中,這是ContosoElectronicsMasterFrom the Site Master Page section, from the Specify a master page to be used by this site and all sites that inherit from it, select the newly uploaded master page. In our scenario, this is ContosoElectronicsMaster.

    套用主版頁面

按一下 [音訊] 頁面上,我們確認現在使用我們新的主版頁面。By clicking the Audio page, we verify that our new master page is now being used.

 ![New Master Page Applied](../media/OTCSP_NewMasterPageApplied.png)

下一步是以啟動版面配置上。The next step is to start to work on the page layouts.

本系列中的下一篇文章Next article in this series

階段 7: 上傳版面配置與 SharePoint server 發佈網站中建立新頁面Stage 7: Upload page layouts and create new pages in a publishing site in SharePoint Server

另請參閱See also

其他資源Other Resources

SharePoint 2013 頁面模型概觀Overview of the SharePoint 2013 page model

操作方法: 將網路磁碟機對應至 SharePoint 2013 主版頁面圖庫How to: Map a network drive to the SharePoint 2013 Master Page Gallery

SharePoint 2013 中的設計管理員概觀Overview of Design Manager in SharePoint 2013

操作方法: 將 HTML 檔案轉換成 SharePoint Server 2013 中的主版頁面How to: Convert an HTML file into a master page in SharePoint Server 2013

操作方法: 將主版頁面套用到 SharePoint Server 2013 中的網站How to: Apply a master page to a site in SharePoint Server 2013