2.8 應用案例——為頁面添加CSS樣式

使用CSS可以減輕網頁設計者的工作負擔，CSS能夠在恰當的地方集中一批命令，以實現某種可視效果，而不是將它們分散在整個文檔中。下面通過一個網站頁面的設計制作過程，向讀者介紹CSS樣式在網頁設計中的應用方法和技巧，頁面的最終效果如圖2-19所示。

源文件位置：源文件\第2章\2-8.html

視頻位置：視頻\第2章\2-8.mp4

2.8.1 設計分析

本案例設計制作了一個工作室網站頁面，頁面布局新穎，運用的色彩艷麗，頁面中的背景以及圖片的布局給瀏覽者一種神秘的感覺，不會因過于簡單而不夠美觀。設計頁面時結合了相應的配色原理，使頁面具有獨特的設計風格。

2.8.2 制作步驟

（1）執行“文件”→“新建”命令，彈出“新建文檔”對話框，新建一個HTML文檔，如圖2-20所示。執行“文件”→“保存”命令，將頁面保存為“源文件\第2章\2-6.html”。

（2）用相同的方法，新建兩個CSS文件，并分別保存為“源文件\第2章\style\div.css”和“源文件\第2章\style\css.css”。

技巧

按“Ctrl+N”組合鍵，可以直接彈出“新建文檔”對話框，從中進行新建頁面的操作。

（3）執行“窗口”→“CSS設計器”命令，打開“CSS設計器”面板，單擊面板上的“添加CSS源”按鈕，在彈出的下拉列表中選擇“附加現有的CSS文件”選項，繼續彈出“使用現有的CSS文件”對話框，將剛剛新建的外部樣式表文件div.css和css.css鏈接到頁面中，如圖2-21所示。

（4）將頁面切換到css.css文件，創建一個名為*的CSS規則，如圖2-22所示。再創建一個名為body的CSS規則，如圖2-23所示。

提示

這里的*為通配選擇符。*的使用表示所有對象，包括所有不同id、不同class的HTML的所有標簽。

（5）將光標置于頁面視圖中，單擊“插入”面板上的“Div”按鈕，彈出“插入Div”對話框，在ID下拉列表框中輸入“box”，如圖2-24所示，單擊“確定”按鈕，在頁面中插入名為box的Div，頁面效果如圖2-25所示。

（6）將頁面切換到div.css文件，創建一個名為#box的CSS規則，如圖2-26所示，頁面效果如圖2-27所示。

（7）將光標移至名為box的Div中，將多余的文本內容刪除，單擊“插入”面板上的“Div”按鈕，彈出“插入Div”對話框，在ID下拉列表框中輸入“top”，如圖2-28所示，單擊“確定”按鈕，在名為box的Div中插入名為top的Div，頁面效果如圖2-29所示。

提示

在“插入Div”對話框中，通過“插入”選項，可以指定插入的Div位置。

· 在插入點：將Div插入在光標所在的位置。

· 在標簽之前：將Div插入在所選標簽的前面。

· 在開始標簽之后：將Div插入在所選標簽的開始標簽之后。

· 在開始標簽之前：將Div插入在所選標簽的結束標簽之前。

· 在標簽之后：將Div插入在所選標簽的后面。

（8）將頁面切換到div.css文件，創建一個名稱為#top的CSS規則，如圖2-30所示，頁面效果如圖2-31所示。

（9）將光標移至名為top的Div中，將多余的文本內容刪除，輸入相應文本，如圖2-32所示，選中剛剛輸入的文字，將頁面切換到代碼視圖，添加列表代碼，如圖2-33所示。

（10）將頁面切換到div.css文件，創建一個名稱為#top li的CSS規則，如圖2-34所示，頁面效果如圖2-35所示。

（11）單擊“插入”面板上的“Div”按鈕，彈出“插入Div”對話框，在ID下拉列表框中輸入“top2”，如圖2-36所示，單擊“確定”按鈕，在名為top的Div后插入名為top2的Div，如圖2-37所示。

（12）將頁面切換到div.css文件，創建一個名稱為#top2的CSS規則，如圖2-38所示，頁面效果如圖2-39所示。

（13）將光標移至名為top2的Div中，將多余的文本內容刪除，單擊“插入”面板上的“Image”按鈕，將圖像“源文件\第2章\images\2402.png”插入頁面，如圖2-40所示，再將光標移至圖像后，按“Shift+Enter”組合鍵插入換行符，輸入文本內容，如圖2-41所示。

提示

在網頁中插入的透底圖片多以gif格式為主，但是由于gif格式的圖片顏色信息較少，會使一些色彩較多的圖片失真，這時就需要使用png格式來保存透底圖片。但需要注意的是，IE7以下版本的IE瀏覽器不支持png格式。

（14）單擊“插入”面板上的“Div”按鈕，在名為top2的Div后插入名為main的Div，將頁面切換到div.css文件，創建一個名稱為#main的CSS規則，如圖2-42所示，頁面效果如圖2-43所示。

（15）將光標移至名為main的Div中，將多余的文本內容刪除，單擊“插入”面板上的“Div”按鈕，在名為main的Div中插入名為main-left的Div，將頁面切換到div.css文件，創建一個名稱為#main-left的CSS規則，如圖2-44所示，頁面效果如圖2-45所示。

（16）單擊“插入”面板上的“Image”按鈕，將圖像“源文件\第2章\images\2403.png”插入頁面，如圖2-46所示，將光標移至圖像后，按“Shift+Enter”組合鍵插入換行符，輸入文本內容，如圖2-47所示。

提示

換行符在代碼視圖中顯示為
。按“Enter”鍵可以插入段落符，在代碼視圖中顯示為<p></p>。

（17）將頁面切換到css.css文件，創建一個名稱為.font01的CSS規則，如圖2-48所示。選中“LimeWire下載”文字，應用剛剛新建的樣式，頁面效果如圖2-49所示。

提示

此處的CSS規則代碼的意思為：字體大小為15px；字體為微軟雅黑；行高為30px；字體顏色為#89b601。

（18）用相同的方法，插入名為main-main的Div和名為main-right的Div。其CSS規則代碼如圖2-50所示，頁面效果如圖2-51所示。

（19）單擊“插入”面板上的Div按鈕，在名為main的Div后插入名為bottom的Div。將頁面切換到div.css文件，創建一個名稱為#bottom的CSS規則，如圖2-52所示，頁面效果如圖2-53所示。

（20）將光標移至名為bottom的Div中，將多余的文本內容刪除，輸入文本內容，如圖2-54所示，將頁面切換到代碼視圖，添加<span>標簽，如圖2-55所示。

（21）將頁面切換到div.css文件，創建一個名稱為#bottom span的CSS規則，如圖2-56所示，頁面效果如圖2-57所示。

（22）完成頁面的制作，執行“文件”→“保存”命令，保存頁面。單擊頁面右下角的“預覽”按鈕，頁面效果如圖2-58所示。

2.8.3 案例總結

本案例通過設計制作一個工作室網站頁面，講解了在頁面中添加CSS樣式及控制頁面元素的方法，讀者在完成了本案例的制作后，需要能夠掌握基本的CSS樣式應用方法，并能應用到實際的工作中。