我在中軟上課的第七天，今天上課的案例知識點有六個，下面我將一一列舉。

知識點一、精靈圖布局：精靈圖其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。常用于導航欄圖標、列表項圖標等。

使用精靈圖的優點：

1、能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是精靈圖最大的優點，也是其被廣泛傳播和應用的主要原因；

2、能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。

3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。

4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

缺點：

1、在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；

2、精靈圖在制作的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；

制作精靈圖，可以使用Photoshop里面的“切片工具”。

1、利用PS軟件打開目標圖片，點擊：文件-打開-目標文件。

2、選擇PS中的切片工具，快捷鍵為K鍵。點擊一下默認為“起點”，再次點擊默認為“終點”，右擊出現的編輯框可以改變切片大小。使用該工具框選圖像進行分布，切成四片，每一片右上角都會顯示切片標簽。

溫馨提示：如果想把一個圖片平均分成幾等份時，這個操作只要右擊“切片分割”就好了，可以選擇水平和垂直，將圖片平均分割，不再需要一步步切割了。

3、切片完成，接下來要建立超級鏈接。

首先切片工具選擇切片選擇工具，然后雙擊要加入超級鏈接的切片區域或者右擊“編輯切片”。其次打開你自己想要鏈接的“網絡地址”，復制下，然后黏貼到編輯框里面就可以了

4、當切片的鏈接做好后，那就是保存圖片了。

點擊“文件”選擇“存儲為web和設備所用的格式”，然后點擊存儲，選擇圖片格式為“html和圖像”，存儲后文檔里面會出現一個網頁打開的文件和一個images的文件夾。

注意事項：（1）如果切片要均勻切割的話，那么只要直接右擊“劃分切片”就好了，這樣可以得到均等大小的切片

  （2）為了更加精確制作，建議PS操作區用坐標模式，快捷鍵：Ctrl+R