一步步學習SPD2010--第十章節--SP網站品牌化（6）--建立樣式

一步步學習SPD2010--第十章節--SP網站品牌化（6）--建立樣式        

        在以前的部分我向你展現瞭如何使用CSS樣式規則和聲明辨識內容。爲了給樣式規則和聲明作些改變，你可使用SPD提供的視覺工具，或者直接編輯樣式。兩個方法產生一樣的結果。若是你還不瞭解CSS，學習如何處理樣式表是個新手，就使用PSD的工具並檢查代碼視圖來看SPD產生的CSS。這將幫助你學習樣式聲明。從簡單頁面開始，並隨着你理解的加深，你能夠轉向更加複雜的頁面。

        小貼士：記得使用預覽功能，時刻在不一樣瀏覽器、不一樣大小屏幕檢查你的設計。若是不滿意能夠按CTRL+Z取消操做。

        一些CSS設計者按照樣式位於網頁的位置分組樣式表的樣式；另一些按照建立的順序。若是你要建立一個樣式表，之後供其餘用戶維護，你可能須要遵循他們的標準。微軟在SharePoint使用的樣式有本身的命名標準。例如，大多數SharePoint類以.ms-開頭，若是樣式應用到與Web部件有關的元素時，要在名稱中包含WP。

        小貼士：使用相同聲明的選擇器能夠分組到一個速記的格式。這減小了樣式表大小，以及給每一個選擇器添加聲明的須要。

        本練習中，你將建立兩個緊挨的摺疊區域。

        準備：使用SPD打開MyPage.aspx，進入拆分視圖。

1. 點擊樣式選項卡中的建立新樣式。

2. 選擇器中刪除.newStyle1，輸入#page_content。定義位置選擇現有樣式表。

3. 瀏覽找到MyStyle.css文件。點擊打開。

        故障分析：若是MyStyle.css沒有出如今對話框中，點擊左上角的SPD，導航到樣式表。

4. 在類別下點擊「方框」。清除margin右邊的複選框，right中輸入200。

5. 點擊肯定。

6. 一樣新建樣式。

7. 選擇器輸入#right_col。

8. 選中現有樣式表，URL選擇MyStyle.css。

9. 類別中選擇定位。點擊absolute。width輸入200，top輸入0，right輸入0.

10. 點擊肯定。

11. 一樣建立新樣式#container，定位relative，width爲100%。

        這樣div#container包含了div#page_content和div#right_col，在一行緊挨着。代碼視圖中，沒有什麼變化。

12. 點擊MyStyle.css，CSS聲明已經被建立了。