SharePoint Online中創建首頁布局，一般都是首先將美工提供的效果圖，切圖成為Html + Css + Script的形式，然后，將所有資源文件傳到SharePoint Online的資源庫，在Designer中創建頁面，添加Html頁面，修改引用。

下面，讓我們一步步來演示這一過程。

一、 拿到效果圖，進行切圖

　　SharePoint Online的布局，通常由美工制作效果圖，并且切圖為Html+圖片+樣式+腳本的方式，到我們開發人員手里，就方便頁面的創建了。

　　這里，我已經由效果圖完成切圖，由于Designer 2013不支持設計視圖了，所以這里用Designer 2007進行展示了，如下圖：

二、 使用Designer在網站中創建頁面

　　然后使用Designer打開SharePoint Online站點，進入所有文件 - 頁面下，如下圖：

　　在Ribbon菜單上的新建選項中，新建一個頁面，如下圖：

　　然后，同之前介紹母版頁的操作一致，使用高級模式打開新建的Home頁面，主要在PlaceHolderMain節點中添加所有Html內容，如下圖：

三、 上傳資源文件，同時修改引用路徑

　　將Html復制到頁面中，我們可以將圖片、樣式、腳本等分別上傳SharePoint Online的素材庫，如下圖：

　　上傳完畢所有素材文件，然后替換所有圖片引用路徑、腳本引用路徑和樣式引用路徑，然后，就可以預覽我們的頁面了，如下圖：

　　當然，上圖中所有欄目的內容還都是靜態Html，我們還需要一步步，將內容的部分替換為動態發布的內容，這些我將在接下來的博客中一一介紹給大家。

　　到此，我們的首頁布局基本完成，可以開始加入動態內容了，同事，我們可以在Designer中右鍵這個頁面，然后設置成首頁；當然，我們也可以進入網站設置 – 外觀 – 歡迎頁面中設置首頁，這樣，我們通過域名訪問，即默認跳到我們的首頁中了。

四、 關于首頁布局創建的若干建議

　　樣式表、腳本文件外部引用；使用Div+Css進行布局更佳；SPO支持Html5的響應式布局；瀏覽器兼容性由布局決定；

總 結

　　首頁布局的制作，在門戶制作中比較簡單，通常美工的作用非常大，如果有一些不明確的Css定義，會給我們接下來的工作帶來很大麻煩。

　　特別要說的是，不要讓美工全局定義標簽的樣式，比如Div{margin:auto;}這樣，盡量讓自定義的樣式有獨特性，以免和SharePoint Online自帶樣式沖突。