SharePoint 母版頁制作 案例圖文教程

1、? 首先打開SharePoint Designer 2010，找到母版頁，復制一份V4.master，用來做我們剪裁用，不建議修改之前的母版頁，錯了的話，不容易找回來。同時新建一個頁面布局，引用自定義這個母版頁，用來看效果。引用后預覽下未修改的母版頁，如圖1所示：

2、? 編輯我們復制出來的母版頁，我們要做的就是要一個網站的Head將來放Flash，要網站的Foot放版權信息，還有中間的Main用來給頁面布局。在這里，我暫時隱掉了左側導航，頭部的其它控件等，如果有需要，可以隨時顯示出來。那么，開始我們的母版頁之旅吧。

3、? 我們經過查看，可以看到這個區域，是將來我們網站主體顯示的區域，而向上查看可以發現上面是這個區域，通過id我們可以看出來是2010特色的ribbon的區域。今天我們不需要這一區域，暫時隱藏掉，但是開發過程中，可能需要，當然，我們隨時可以顯示出來。我們在里面加上樣式隱藏。

4、? 繼續往下看是，同樣通過id我們可以看到這個是title行，這個title行主要包括兩部分，包括上面的網站信息行，還有下面的導航，我們隱藏掉上面的網站信息，留下下面的導航區域。同樣，用樣式隱藏。然后，在上面加上一個用來放我們頭部的Flash，樣式建議寫在corev4.css里面，方便我們查找。

5、? 接下來是左側導航，在PlaceHolderMain左邊找到這個區域，通過id我們知道這個是左側導航，隱藏之。同時在PlaceHolderMain下面加上Foot區域，寫上下面的版權信息吧。看看我們現在的樣子吧，如圖2。

6、? 很明顯有一點是不對的，通過IE開發工具，我們可以看到PlaceHolderMain的左邊，還有一個區域。倒要看看這個空白是什么，繼續IE開發工具找之。功夫不負有心人，終于發現這個區域里面的s4-ca里面有個margin-left:155px;，去掉之！問題解決！下面為了展示我們的頁面是不是正確的，我們把Head、Body、Foot三個區域寫上字，上個背景色，看看效果，如圖3.

7、? 看起來，跟我們要求的差不多了，把底色去掉，換成我們的圖片、Flash就OK了，為了滿足開發需要，先把Ribbon填上。剛要說結束，又發現問題了，怎么Ribbon不跟著頁面一起滾動，這樣看著也太難看了，還得繼續修改。如圖4

8、? 首先<>

總結： 經過母版頁剪裁的這個過程，感覺2010還是有提高的，div的方式是每個功能點更容易單獨使用了，但是依然沒敢刪掉不需要的節點。期間，當然也遇到各種問題，感謝之前分享文章的博主。下面就簡單列幾個自己做母版頁過程中參考的文章。