結合 SharePoint 2013 與您已知的網頁技術建立您的線上品牌
英文原文已於 2013 年 2 月 25 日星期一發佈
本文介紹如何透過強大的內容管理系統 SharePoint 2013，輕鬆地使用設計管理員來搭配您最得心應手的網頁設計工具，以定義您公司的線上品牌。
透過 SharePoint 2013，您可以使用您知道的網頁技術、您喜歡的工具和您想要的裝置，為您的 SharePoint 發佈網站建立品牌，要開始成為 SharePoint 設計人員或開發人員，真是前所未有的簡單。如果您目前是 SharePoint 專業人員，別擔心。您到現在為止投注在學習 SharePoint 的成果還是非常適用，而您的 SharePoint 發佈網頁模型知識還是極為有用。
本文概述如何輕鬆使用 SharePoint 2013 設計管理員和裝置通道來搭配您最得心應手的網頁設計工具，以定義您公司的線上品牌。除了保留相同的頁面轉譯基礎結構，我們也針對您為 SharePoint 發佈網站建立品牌的方式，提供三項主要增強功能。
使用您熟知的網頁技術
SharePoint 還是在 ASP.NET 中維持其主版頁面和版面配置，但是現在您也可以在 HTML 中設計您的主版頁面和版面配置，包括使用 SharePoint 控制項的 HTML 程式碼片段。在背景中，SharePoint 建立了它想要的相對應 ASP.NET 檔案，但您可以忽略。
過去您可以使用 CSS 和 JavaScript 來設計您的網站，但現在這些功能已完全整合至您的 SharePoint 網頁開發經驗中。我們很多工作都是用 HTML 預覽來執行的，所以您可以直接設計 HTML，而不需要使用伺服器來查看。如果您要在伺服器上預覽，可以在您選擇的任何 SharePoint 頁面內容中執行此作業！
以您知道的網頁技術來工作不會在版面配置層級停止。過去需要您以 XSLT 來設計的內容查詢網頁組件仍然存在，但新的內容搜尋網頁組件是在 SharePoint 2013 中建立搜尋導向經驗時的重要建置組塊。確定設計人員有很棒的使用經驗，對我們非常重要，所以您可以用 JavaScript、HTML 和 CSS 來加以自訂。
由於我們並未假設您有任何 SharePoint 知識，所以我們有設計管理員可以幫助您逐步完成為您的發佈網站建立品牌。這個設計管理員提供類似精靈的使用經驗，除了提供 SharePoint 開發指引，同時也為您提供檢視和處理設計檔案的進入點。每一個步驟在 MSDN 上也都有自己的說明文章：
使用您喜歡的工具自訂 SharePoint
自訂網站的設計不僅僅是將 HTML 轉換成 ASP.NET 而已。為了幫助您成功建立網站，熱門預留位置已備妥，靜候您的內容。至於版面配置，我們針對您選擇的內容類型，插入了專屬的所有頁面欄位，這麼一來，建立 SharePoint 設計檔案就變成編輯和調整的工作，而不是在建立了。
利用程式碼片段庫，您就有新增 SharePoint 功能至網站的很好起點。若為熟悉舊版 SharePoint 的使用者，請把它當成一組您會從 SharePoint Designer 存取的控制項，但比這個還要多一點。程式碼片段庫提供 HTML 版 (在許多情況下，包括靜態預覽，當您在像 Dreamweaver 之類的分割檢視中編輯檔案時，可顯示您正在處理的內容) 的一組常用元件，包括網頁組件庫中的所有網頁組件。針對每個程式碼片段，您都要調整其屬性，並直接將它複製到 HTML 主版頁面或版面配置中，SharePoint 會在背景中將它轉換成所需的 ASP.NET 控制項。
圖 1. 程式碼片段庫頁面頂端是一個包含所有程式碼片段的功能區。頁面主體有程式碼片段的說明、屬性和 HTML 程式碼，以及即時預覽。每個主版頁面都有相同的程式碼片段庫，與版面配置的程式碼片段庫些微不同，而且版面配置的程式碼片段庫需視其內容類型而定 (因為頁面欄位會變更)。
在任何裝置上都能使用 SharePoint
人們不再只用桌上型電腦或膝上型電腦的滑鼠存取您的網站。這是一個多種裝置百花齊放的世界：平板電腦、手機和各種介面，噢，我的天！您要如何為您的使用者建立使用經驗，才能以最好的方式來運用他們的螢幕大小？如何為觸控式裝置進行最佳化？在 SharePoint 2013 中，無論訪客使用什麼裝置瀏覽，裝置通道都可以幫助您以最適合的方式來呈現您的網站。身為設計人員，您要思考您的網站在各種不同形式規格上應該要有什麼樣的使用經驗，依據指派給高達 10 種不同通道的使用者代理程式子字串來做區分。
每個通道都可以將目標設定在多種裝置。例如，您可以有一個通道同時用於 Windows Phone 和 iPhone，因為它們的螢幕大小差不多，另一個通道用於 iPad。您可以依通道使用不同的主版頁面和 CSS，您也可以將內容的目標設定在特定通道，而全部都是一模一樣的 URL (這對可使用性和搜尋引擎最佳化非常好)。
藉由使用裝置通道基礎結構，您會有使用裝置通道面板的機會，這是用於內容目標設定很好的資產。您放在其中一個面板中的內容，只會轉譯在您依據伺服器端邏輯指定的通道上，這樣會減少頁面載入時間，以及透過線路傳送的位元組數。將這些面板與回應性的 CSS 設計合併，可以讓使用者經驗加速且更為流暢。不同於前述範例中依據螢幕大小來使用不同的通道，您可以有一個 "iOS" 子字串通道，用以擷取 iPad、 iPhone 和 iPad mini，以及傳送依據裝置螢幕解析度來載入不同 CSS 的單一主版頁面。例如，如果您是 Windows Phone 小組，您可以將目標設定在 iOS 裝置，並建立面板來宣傳 Windows Phone。
圖 2 和圖 3。 以跨網站集合發佈功能為基礎之新聞網站的瀏覽器和行動裝置使用經驗並排設計圖樣，其使用回應性 CSS、裝置通道面板，以及依據裝置通道來變更內容搜尋網頁組件結果外觀的顯示範本
本文介紹如何使用您最得心應手的工具，以及 SharePoint 2013 強大的內容管理系統，輕鬆地定義您公司的線上品牌。若要進一步了解，請查看我們的說明文件作者在 MSDN 上為您撰寫的所有內容。建置適用於 SharePoint 2013 的網站、SharePoint 2013 中的設計管理員概觀以及在 SharePoint 2013 中開發網站設計這幾篇文章，都是很棒的入門。祝您設計愉快！
-- SharePoint 程式總監 Alyssa Levitz
這是翻譯後的部落格文章。英文原文請參閱 Create your online brand with a combination of SharePoint 2013 and the web technologies you already know