前 言
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自帶樣式沖突。
好了，首頁布局的介紹就到這里，下一篇文章我們將單獨介紹導航的應用。