官术网_书友最值得收藏!

2.8 應(yīng)用案例——為頁面添加CSS樣式

使用CSS可以減輕網(wǎng)頁設(shè)計者的工作負(fù)擔(dān),CSS能夠在恰當(dāng)?shù)牡胤郊幸慌睿詫崿F(xiàn)某種可視效果,而不是將它們分散在整個文檔中。下面通過一個網(wǎng)站頁面的設(shè)計制作過程,向讀者介紹CSS樣式在網(wǎng)頁設(shè)計中的應(yīng)用方法和技巧,頁面的最終效果如圖2-19所示。

圖2-19 頁面的最終效果

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

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

2.8.1 設(shè)計分析

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

2.8.2 制作步驟

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

圖2-20 新建文檔

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

技巧

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

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

圖2-21 鏈接外部樣式表文件

(4)將頁面切換到css.css文件,創(chuàng)建一個名為*的CSS規(guī)則,如圖2-22所示。再創(chuàng)建一個名為body的CSS規(guī)則,如圖2-23所示。

圖2-22 名為*的CSS規(guī)則代碼

圖2-23 名為body的CSS規(guī)則代碼

提示

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

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

圖2-24 “插入Div”對話框

圖2-25 插入名為box的Div

(6)將頁面切換到div.css文件,創(chuàng)建一個名為#box的CSS規(guī)則,如圖2-26所示,頁面效果如圖2-27所示。

圖2-26 CSS規(guī)則代碼

圖2-27 頁面效果

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

圖2-28 “插入Div”對話框

圖2-29 插入名為top的Div

提示

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

· 在插入點:將Div插入在光標(biāo)所在的位置。

· 在標(biāo)簽之前:將Div插入在所選標(biāo)簽的前面。

· 在開始標(biāo)簽之后:將Div插入在所選標(biāo)簽的開始標(biāo)簽之后。

· 在開始標(biāo)簽之前:將Div插入在所選標(biāo)簽的結(jié)束標(biāo)簽之前。

· 在標(biāo)簽之后:將Div插入在所選標(biāo)簽的后面。

(8)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top的CSS規(guī)則,如圖2-30所示,頁面效果如圖2-31所示。

圖2-30 CSS規(guī)則代碼

圖2-31 頁面效果

(9)將光標(biāo)移至名為top的Div中,將多余的文本內(nèi)容刪除,輸入相應(yīng)文本,如圖2-32所示,選中剛剛輸入的文字,將頁面切換到代碼視圖,添加列表代碼,如圖2-33所示。

圖2-32 輸入文字

圖2-33 添加列表代碼

(10)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top li的CSS規(guī)則,如圖2-34所示,頁面效果如圖2-35所示。

圖2-34 CSS規(guī)則代碼

圖2-35 頁面效果

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

圖2-36 “插入div”對話框

圖2-37 插入名為top2的Div

(12)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top2的CSS規(guī)則,如圖2-38所示,頁面效果如圖2-39所示。

圖2-38 CSS規(guī)則代碼

圖2-39 頁面效果

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

圖2-40 插入圖像

圖2-41 輸入文本內(nèi)容

提示

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

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

圖2-42 CSS規(guī)則代碼

圖2-43 頁面效果

(15)將光標(biāo)移至名為main的Div中,將多余的文本內(nèi)容刪除,單擊“插入”面板上的“Div”按鈕,在名為main的Div中插入名為main-left的Div,將頁面切換到div.css文件,創(chuàng)建一個名稱為#main-left的CSS規(guī)則,如圖2-44所示,頁面效果如圖2-45所示。

圖2-44 CSS規(guī)則代碼

圖2-45 頁面效果

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

圖2-46 插入圖像

圖2-47 頁面效果

提示

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

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

圖2-48 CSS規(guī)則代碼

圖2-49 頁面效果

提示

此處的CSS規(guī)則代碼的意思為:字體大小為15px;字體為微軟雅黑;行高為30px;字體顏色為#89b601。

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

圖2-50 CSS規(guī)則代碼

圖2-51 頁面效果

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

圖2-52 CSS規(guī)則代碼

圖2-53 頁面效果

(20)將光標(biāo)移至名為bottom的Div中,將多余的文本內(nèi)容刪除,輸入文本內(nèi)容,如圖2-54所示,將頁面切換到代碼視圖,添加<span>標(biāo)簽,如圖2-55所示。

圖2-54 輸入文字

圖2-55 添加<span>標(biāo)簽

(21)將頁面切換到div.css文件,創(chuàng)建一個名稱為#bottom span的CSS規(guī)則,如圖2-56所示,頁面效果如圖2-57所示。

圖2-56 CSS規(guī)則代碼

圖2-57 頁面效果

(22)完成頁面的制作,執(zhí)行“文件”→“保存”命令,保存頁面。單擊頁面右下角的“預(yù)覽”按鈕,頁面效果如圖2-58所示。

圖2-58 頁面效果

2.8.3 案例總結(jié)

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

主站蜘蛛池模板: 钦州市| 泸定县| 山阴县| 衡东县| 吉林省| 扎赉特旗| 新昌县| 五大连池市| 桂林市| 龙川县| 确山县| 广宗县| 盐山县| 天气| 玉屏| 峨眉山市| 赤峰市| 永善县| 潜山县| 达日县| 巴青县| 垦利县| 延长县| 永嘉县| 江永县| 泽普县| 延寿县| 仙居县| 蒲江县| 三都| 高台县| 淳化县| 游戏| 阳城县| 潞城市| 长武县| 喀什市| 平乡县| 淳化县| 洪江市| 安徽省|