透過 SharePoint 2013 使用 Dreamweaver 和 Design Manager

Article
09/20/2012

英文原文已於 2012 年 6 月 28 日星期六發佈

SharePoint 2013 包含數種功能，相較於之前更容易上手，讓您輕鬆打造網站風格和發佈網站。其中一項功能即為 Design Manager，它可讓您進行像是建立不同的內容通道 – 例如分別針對行動裝置、平板電腦等全尺寸瀏覽器的一組頁面。您可以將不同的主版頁面和每個通道產生關聯。而其中一個非常有趣的功能則是您可以在任何標準的 HTML 編輯工具 (如：Dreamweaver) 中建立頁面，而且可以將此頁面上傳至 SharePoint 並以之作為主版頁面。SharePoint 會自動建立一個 aspx 頁面，與您的 .html 檔案保持同步處理。檔案轉換後，您就不必費勁返回某些其他工具才能進行編輯，您可以繼續在所偏好的編輯工具中編輯 .html 檔案，每一次儲存，SharePoint 都會同步處理，以 .aspx 檔案轉譯您的主版頁面。

此外，我們還提供一種稱為 [程式碼片段] 的功能，可讓您取用 SharePoint 的好物並將其插入您的主版頁面。只要選取您想要的片段類型 – 可能是搜尋方塊或快速導覽等等 – 然後複製自動產生的程式碼，並將此貼至您的主版頁面。當然，只有這些是不夠的 – 仍有些許需要進一步了解的 SharePoint 使用技巧，才能夠將您的標準 .html 頁面完全轉換為 SharePoint 主版頁面。

本文要做的就是引導您如何在 Dreamweaver 教學課程建立網站頁面 (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html (可能為英文網頁)) 並將網站頁面轉換為網站的 SharePoint 主版頁面和首頁。那麼，首先，Dreamweaver 網站完成時看起來像這樣：

在這個頁面中，您將會看到我們發表的有關 SharePoint 之具體項目：

標題、主要檢視頁面背景和個別文章所使用的圖像
主要頁面和正文三個區域的內容
我們可能想要新增的 SharePoint 其他功能。其中可能包含搜尋方塊和一些導覽。

首先，讓我們從內容的角度來想一想吧。在現有內容類型之外可以提出主要內容，但在頁面底端的三段正文片段需要進行一些自訂說明。我們將從這裡開始，建立新的內容類型以提供支援。因為圖像本身會連結至內容，我們將新增圖像的網站欄以及其文字的網站欄。「歡迎頁面」內容類型對這種頁面而言，可能是很好的基礎類別，所以我會建立以「歡迎頁面」為基礎的全新內容類型，並將其命名為「DW 版面配置」。我新增了下列各欄以支援我的版面配置：

正文左側圖像
正文左側文字
正文中心圖像
正文中心文字
正文右側圖像
正文右側文字

所有圖像欄都已定義為「圖像格式設定和發佈限制」，同時，文字欄定義為「完整的 HTML 內容格式設定和發佈限制」。

現在，我們已經準備好著手進行第一階段測試，我們會將 Dreamweaver HTML 頁面、樣式表上傳至 Design Manager，並將其轉換為主版頁面。

現在，請從已安裝 Dreamweaver (或您喜愛的 HTML 編輯工具) 的主機開啟您的瀏覽器，並導覽至您的 SharePoint 網站。在 [網站動作] 功能表上按一下，然後選取 Design Manager。在工作清單左側按一下 #3 - [上傳 Design 檔案]。按一下可將本機磁碟對應至 SharePoint 資料夾的連結 (主版頁面和樣式表儲存所在的 SharePoint 資料夾)。此時會開啟 SharePoint 網站檔案總管檢視，您就可以直接從 SharePoint 將檔案拖放至 Dreamweaver。如果因為某些原因而無法運作，可以隨時導覽至主版頁面庫並於檔案總管檢視中開啟頁面庫。

接下來，將本機磁碟中的 index.html 主版頁面複製到開啟於檔案總管檢視中的 SharePoint 文件庫。Dreamweaver 教學課程假設樣式表位於稱為樣式的子資料夾中，所以請建立資料夾並將樣式表複製至此。

現在，在瀏覽器按一下 #4 - [在 Design Manager 編輯主版頁面] 工作清單。按一下 [轉換 HTML 檔案至 SharePoint ] 主版頁面連結。此時會開啟一個 SharePoint 檔案瀏覽器樣式對話方塊，您會看到 index.html 檔案已經複製於主版頁面圖庫。按一下檔案以進行選取，然後按一下 [插入] 按鈕。轉換完成後，Design Manager 頁面將於主版頁面清單中顯示該檔案，並附帶訊息說明成功轉換檔案。這個時候，如果您重新整理主版頁面庫的檔案總管檢視，必然會看到一個新的檔案，檔名為 index.master。這是您上傳至網站之 index.html 檔案的「配對」。SharePoint 將會從此時開始更新這個主檔案 – 您只需要在 HTML 檔案上處理內容即可。

新的主版頁面可能值得檢視，這樣您就可以查看需要處理的作業內容。若要進行此動作，您可以按一下 Design Manager 中的 index.html 連結。系統會以預覽模式開啟連結，所以您可以看見主版頁面的樣子。閘道外非常有意思 – 這裡可以看見第一次進行轉換時的樣子：

特別說明：

會顯示可供作業的樣式表 – 我們可從中得到預期的字型和格式設定
圖像並未顯示，所以我們必須修正。但是，有些圖像為內容、有些則是實際主版頁面的一部分，因此要繼續修改主版頁面時，我們會進行說明。
顯示的文字不能作為主版頁面的一部分，我們將從中移除然後加至我們的首頁當作內容。

首先，看看所須的修正。需要先上傳正文區段背景所要使用的圖像以及校正主版頁面中的圖像連結。但是需要刪除所有在頁面底端的其他圖像。除此之外，也要刪除頁面上的所有文字，因為這些所有內容都會與單一頁面有關，而非主版頁面。若要執行此動作，從 SharePoint 主版頁面圖庫的檔案總管檢視將 HTML 和 CSS 檔案拖回並放至 Dreamweaver 中。您會看到 HTML 頁面出現更多 SharePoint「附屬品」。請習慣 – 即使您現在不能使用自己的 HTML 編輯程式，仍需使用 SharePoint 控制項和標記所帶來的所有「附屬品」。

捲動 HTML 頁面進行瀏覽的時候，可以找到應該在主版頁面但是卻遺漏的圖像。這些圖像檔名為 banner.gif (來自 HTML) 以及 main.jpg (來自設定 main_image DIV 背景的樣式表)，我們會先修正這個部分。

返回至瀏覽器，按一下 [網站] 動作功能表，然後按一下 [檢視網站內容] 功能表。按一下 [網站集合圖像] 連結以開啟文件庫。現在，上傳兩個圖像至文件庫。文件庫 Url 為 /sitecollectionimages，若使用 Dreamweaver，可以變更這兩個圖像的路徑，直接指向文件庫。如果重新整理預覽頁面，可以看到執行的進展：

您可能會注意到，在頁面底端看不見原先的黃色 DIV 圖片。它其實還存在，只是瀏覽器大小調整過大，以至於您無法看到。現在，關於這個黃色 DIV 圖片的重點是，在轉換過程進行時，SharePoint 將此 DIV 圖片插入頁面，其中包含主版頁面的預留位置。所以下一步要做的是，取出內容頁的內容，而非主版頁面的內容。移除主要區段中的文字，並刪除未轉譯的圖像以及其下方的文字。同時，將預留位置 DIV (扣掉黃色區域) 移至頁面的主要區段。此外並新增圖像、文字所在三個區域的預留位置控制項。我們會在製作版面配置頁面時將這些元素結合在一起。

產生的 HTML 會有註解組合、特別的 SharePoint 處理標記，以及內容的預留位置。這裡是每個區段顯示的樣子：

正文主體：

左側欄：

中間欄：

右側欄：

頁面看起來有些空白，但是沒關係 – 這是我們要的主版頁面：

進行到現在，距離完成主版頁面又更近一步了。我們仍要新增一些功能表和搜尋方塊，但稍後再回來進行這個部分即可。下一步要做的是建立版面配置頁。版面配置頁是「連接」資料欄位和頁面上資料欄版面配置的地方。若要執行此項目，前往 [網站設定] 之主版頁面和頁面配置。按一下功能區中的 [新增] 按鈕並選取 [頁面配置]。當 [新增頁面配置] 畫面出現時，選取此頁面配置想要產生關聯的內容類型。您可能會回想起在本文稍早曾說明建立自訂內容類型並稱之為 DW 版面配置的這段描述。所以在 [關聯的內容類型] 欄位中，只要選取 [DW 版面配置] 內容類型。請指定「Url」、「標題」和「說明」，即可以建立版面配置頁。在此情況下，我指定 DWLayoutPage.aspx 頁面的「Url」，「標題」為「Dreamweaver 版面配置頁」，並新增「以 Dreamweaver 教學課程網站為基礎的版面配置頁」此說明文字。

現在，已經成功建立版面配置頁，但還不具任何控制項。需要在頁面上新增控制項，並將它們連接至前面所述及內容類型中的自訂欄位：LeftStoryImage、LeftStoryText 等等。此外，也必須新增 ASP.NET 預留位置控制項，和新增至主版頁面的預留位置容器產生對應。如此，每個欄位的資料會與其各容器密切相關，而該容器會輸出至主版頁面上對應的主版頁面容器預留位置 – 這就是資料能夠在主版頁面中的正確位置進行轉譯的原因。

如果您檢視主版頁面上方的詳細資料，會看見新增的四個內容預留位置：PlaceHolderMain、PlaceHolderLeft、PlaceHolderCenter 及 PlaceHolderRight。需要將那些預留位置新增至版面配置頁，然後在每個預留位置加入適當的內容類型欄位。若要執行此動作，再次將新的 DWLayoutPage.aspx 版面配置頁拖曳至主版頁面圖庫，並將其放置於 Dreamweaver 上。因為版面配置頁已經有一個預設的 PlaceHolderMain 預留位置控制項，所以不需要再新增。但我使用標準的 ASP.NET 控制項標記新增其他控制項，如下：

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

您可以看見我剛新增的 PlaceHolderLeft ID，和後來新增的 PlaceHolderCenter、PlaceHolderRight 兩個 ID。

就版面配置頁實際需要的欄位來說，其實並不多。有和自訂內容類型所繼承的基礎類別同時出現的主要內容欄位。此欄位稱為 PublishingPageContent。因為它會出現在頁面的正文主體中，所以需在 PlaceHolderMain 區段新增 PublishingPageContent 發佈控制項，該區段目前看起來如下：

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

其他三個預留位置都需要兩個欄位 – 一個圖像欄位以及一個 RTF 文字欄位。新增這兩個欄位，並再次使用標記 FieldName 屬性中的內容類型欄位名稱。這裡是 PlaceHolderLeft 控制項看起來的樣子，「中間」和「右側」非常相似：

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

此時，就主版頁面和版面配置頁來看似乎已設定妥當 (除了上述的功能表和搜尋方塊)。現在，來建立一個以新頁面配置為基礎的新頁面。

如要執行此動作，前往 [頁面] (Pages) 文件庫。在功能區上按一下 [新增] (New) 並選取 [DW 版面配置] (DW Layout)，會出現新功能表，這是從 [歡迎頁面] 內容類型繼承的內容類型：

完整填入需要的內容，像這樣：

好的 – 現在我們可以開始試試看了！首先，返回主版頁面圖庫並發佈主版頁面 (index.html)。在此之前，尚無法將其選為網站的主版頁面。下一步要做的是回到 [網站設定]，前往主版頁面設定並選取我的主版頁面做為 [網站主版頁面] 的主版頁面。一開始未將其設定為 [系統主版頁面] 的主版頁面是為了確保所有操作可以順利進行。如果主版頁面設定失敗，又將它指派至 [系統主版頁面]，那麼您會在試圖將一切還原時忙得焦頭爛額。

完成後，可以返回 [頁面] 文件庫並按一下剛剛建立的 dwhome.aspx 頁面。瀏覽器顯示該頁面後就可以進行編輯。如您所見，所有元素很順利地結合並呈現於頁面上：

現在，繼續從原始 Dreamweaver 網站加入資料。因為所有文字欄位皆為 Rich HTML，直接從 Dreamweaver 頁面複製原始 HTML 並貼至 HTML 模式中的欄位即可。

圖片就更有趣了。首先，從本機磁碟上傳圖片至 SharePoint 中的 [圖像] 資料夾。圖片上傳至資料夾後，就可以利用 SharePoint 2013 另一項稱為「圖像轉譯」的新發佈功能。這可以讓您為需要轉譯的圖像建立自訂大小。在此情況下，Dreamweaver 教學程式網站中的圖像大小皆相同 (寬高為 316 x 130 像素)。若要執行此動作，前往 [網站設定] 的 [圖像轉譯] (在 [外觀] 和 [風格] 區段下方)。您會看見三個可用的轉譯項目，只要按一下連結增加新的項目並以本文所描述的維度建立轉譯，將此命名為「欄圖像」。將圖像新增至網頁後，就可以選取要顯示於頁面之圖像的圖像轉譯，挑選「欄圖像」轉譯，就如同在 Dreamweaver 網站中一樣，那是用來進行整列的所需元素。

完成以上動作後，便可以結束，目前與我的原始 Dreamweaver 網站頗為類似，上圖為原始 Dreamweaver 網站，下圖為 SharePoint 版本：

Dreamweaver 網站：

SharePoint 網站：

看起來很不錯，最明顯的差別在於內建標記的色彩和字型，例如 H2 和 H3 標記。目前只要藉由調整這些區域樣式表中的內容，就可以進行修正，您可以決定要一次性處理還是僅修改 H2、H3 等所有標記。

將這些 CSS 稍做調整之後，現在已經有一個和原始 Dreamweaver 網站相差無幾的頁面。這個時候，在 dwhome.aspx 頁面按一下並將其作為網站首頁。最後要做的是將一些 SharePoint 功能新增至前面提到的主版頁面 – 上方導覽和搜尋方塊。

若要開始，將主版頁面從檔案總管檢視拖回 Dreamweaver。在瀏覽器中，前往 [網站] 動作功能表並選取 Design Manager。按一下選項 #4 - [編輯主版頁面]，然後再按一下此次練習的主版頁面 index.html。再次獲得預覽頁面，然後按一下右上角的 [程式碼片段] 功能表。如此，可以利用這個很棒的新功能，從不同的標準 SharePoint 網頁元素選擇，像是上方導覽和垂直導覽、網站標題和標誌、搜尋方塊、網頁組件等等。為了增加此案例視覺上的「樂趣」，我在網站上新增了名為「產品」和「生涯」的兩個新頁面，並建立其導覽連結。

返回主版頁面，並僅新增導覽和搜尋方塊所在位置的 DIV 項目。然後前往「程式碼片段」頁面並複製「上方導覽」和「搜尋方塊」的字碼，再將其貼至適當的 DIV 中。現在，主版頁面看起來會像這樣 (程式碼片段的程式碼會暫時移除，只要從程式碼片段頁面複製和貼上即可找回您的程式碼)：

<div>

</div>

<div>

</div>

這是完成品，SharePoint 功能表和搜尋方塊使網站更顯得完整：

現在我們已經完成了，有兩個重點值得提出。首先，這真是一個糟糕的主版頁面範例。為什麼呢？因為在首頁版面配置執行得很好，但是整個內容頁在使用上不夠具有彈性。但本文的重點為採用 Dreamweaver 世界中眾所周知的例子，並藉由使用 SharePoint 2013 中的 Dreamweaver 工具和 Design Manager 新功能將此例在 SharePoint 2013 世界中執行。僅以此點來看，我想我們已經做了一個很好的練習。在理想的狀況下我們可能會馬上將主版頁面中更多的元素加入版面配置頁。舉例來說，若您將此主版頁面當做「系統主版頁面」，可能會不太開心，這裡僅是您的格式和設定頁面可能樣子的創思而已 (此為「網站設定」頁面)：

噢！在此情況下幾乎無法從 UI 修復主版頁面。幸運的是，您可以執行此一小段的 PowerShell 程式碼片段將其重設回原始的主版頁面：

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

第二點，我要實際切換裝置並切換至一個不同的主版頁面。來看看我的 Contoso 主版頁面範例吧：

看起來很不錯了，是吧？雖然不夠花俏，但已經具備一個網站該有的基本元素。不過還是來製作「系統主版頁面」，然後繼續進行清單或文件庫設定：

有發現到什麼不見了嗎？正常來說，您應該會看到 [清單資訊] 區段上方的階層連結，可以按一下它返回清單內容，但是現在卻不見了。這就是為什麼要指出這點 – 如果前往 [程式碼片段] 頁面，會找不到可以使用的階層連結程式碼。[程式碼片段] 頁面有很多好用的程式碼，但是並不表示涵蓋每個單一情況的各個單一控制項。所以，我們該如何修正？好的，當您無法在 [程式碼片段] 頁面中找到需要的程式碼，需要打開 v15.master 檔案並找到不見的程式碼片段。這是 v15.master 檔案中負責此階層連結之程式碼的外觀：

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

現在，如果就這樣嘗試將程式碼複製並貼至 HTML 主版頁面，將無法執行，因為這包含 ASP.NET 標記，而且我們正在使用 HTML 網頁。SharePoint 2013 使用特殊標記，讓您可以「包裝」加入 ASP.NET 標記，這樣系統會知道如何更新所建立與 HTML 網頁「配對的」.master 頁面。若要執行此動作，將 ASP.NET 標記放入註解標記及以 “MS:” 為開頭的標記和結尾的“ME:” 標記。下列為其周圍具有包裝函式的相同程式碼的外觀，也是將貼至 HTML 主版頁面的部分：

</span>

</PATHSEPARATORTEMPLATE>

現在，已經將以上程式碼貼至主版頁面，我們可以看到階層連結回到了清單設定頁面：

接下來，我將彙整此篇冗長的文章內容。您有機會可以了解 SharePoint 2013 的新 Design Manager 功能，如何讓您使用喜愛的 HTML 編輯程式進行每日內容管理工作。我們能夠在 SharePoint 2013 中使用 Dreamweaver 重建 Dreamweaver 教學課程網站，相較於先前版本的 SharePoint，此項功能可說是向前躍進了一大步。本文也展示如何使用功能，像是透過 [程式碼片段] 圖庫新增 SharePoint 功能至主版頁面，以及當需要一項功能，但無法在 [程式碼片段] 中找到的時候，應該怎麼做。此外，您以可以喜好的 HTML 編輯程式使用方法同樣地用於 SharePoint 2013 另一項稱為顯示範本的重要功能。顯示範本大多用於搜尋結果，但此版本將搜尋功能做很好的整合，您將發現它帶來的許多功用。使用查詢規則和結果類型建立解決方案，全方位瀏覽此部落格網站，可以獲得較完整的概念。

此篇文章的附件包含本文的 Word 美觀版本，以及建立 Dreamweaver 教學課程網站之 SharePoint 最終版本所使用的素材。

這是翻譯後的部落格文章。英文原文請參閱 Using Dreamweaver and Design Manager with SharePoint 2013

Partager via

透過 SharePoint 2013 使用 Dreamweaver 和 Design Manager

Ressources supplémentaires