項(xiàng)目5使用CSS控制網(wǎng)元素

1、 . 任務(wù)任務(wù)4 使用使用CSS濾鏡產(chǎn)生絢麗效果濾鏡產(chǎn)生絢麗效果任務(wù)任務(wù)3 使用使用CSS設(shè)置超鏈接屬性設(shè)置超鏈接屬性任務(wù)任務(wù)2 使用使用CSS控制表格元素的外觀控制表格元素的外觀任務(wù)任務(wù)1 使用使用CSS控制頁面、段落、文本的布局控制頁面、段落、文本的布局項(xiàng)目項(xiàng)目5 使用使用CSS控制控制網(wǎng)頁元素網(wǎng)頁元素 在項(xiàng)目4中制作網(wǎng)頁時(shí)，我們通過“屬性”面板為頁面中的部分文本設(shè)置了大小和顏色等屬性值。在瀏覽時(shí)，網(wǎng)頁內(nèi)的文本才會(huì)顯得比較協(xié)調(diào)。這時(shí)我們已經(jīng)在不知不覺中使用了CSS樣式。 CSS（Cascading Style Sheet，層疊樣式表），層疊樣式表）是一組格式設(shè)置規(guī)則，用于控制是一組格式設(shè)置

2、規(guī)則，用于控制Web頁面的外觀。通過頁面的外觀。通過使用使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在形式分離。頁面內(nèi)容存放在HTML文檔中，而用于定義文檔中，而用于定義表現(xiàn)形式的表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或網(wǎng)頁文檔規(guī)則則存放在另一個(gè)文件中或網(wǎng)頁文檔的某一部分，通常為文件頭部分。的某一部分，通常為文件頭部分。通過通過CSS層疊樣式表可以使網(wǎng)站保持同樣的風(fēng)格。層疊樣式表可以使網(wǎng)站保持同樣的風(fēng)格。如果要更換網(wǎng)頁中的某種格式，只需修改如果要更換網(wǎng)頁中的某種格式，只需修改CSS層層疊樣式表即可，為網(wǎng)頁和站點(diǎn)的編輯節(jié)省大量

3、時(shí)間。疊樣式表即可，為網(wǎng)頁和站點(diǎn)的編輯節(jié)省大量時(shí)間。一一1嵌入式樣式表嵌入式樣式表如果樣式只在當(dāng)前網(wǎng)頁中使用，可以使用嵌入式如果樣式只在當(dāng)前網(wǎng)頁中使用，可以使用嵌入式樣式表。嵌入式樣式表一般放在網(wǎng)頁頭部的一個(gè)樣式表。嵌入式樣式表一般放在網(wǎng)頁頭部的一個(gè)和和標(biāo)簽之間。如：標(biāo)簽之間。如： .p font-family: 宋體宋體;font-size: 12px; CSS可以通常使用兩種方法將可以通常使用兩種方法將指定的樣式加載到網(wǎng)頁元素上：指定的樣式加載到網(wǎng)頁元素上：嵌入式樣式表和外部樣式表。嵌入式樣式表和外部樣式表。2外部樣式表外部樣式表如果樣式要在多個(gè)網(wǎng)頁中使用，可以使用外部樣如果樣式要在多個(gè)網(wǎng)

4、頁中使用，可以使用外部樣式表，外部樣式表是一個(gè)以式表，外部樣式表是一個(gè)以.CSS為后綴的外部文為后綴的外部文件。網(wǎng)頁要使用外部樣式表來統(tǒng)一風(fēng)格只需在件。網(wǎng)頁要使用外部樣式表來統(tǒng)一風(fēng)格只需在中用中用標(biāo)簽將外部樣式表鏈接起標(biāo)簽將外部樣式表鏈接起來即可。來即可。例如，在當(dāng)前網(wǎng)頁中使用外部樣式表例如，在當(dāng)前網(wǎng)頁中使用外部樣式表mycss.css中的格式：中的格式：CSS可以通常使用兩種方法將可以通常使用兩種方法將指定的樣式加載到網(wǎng)頁元素上：指定的樣式加載到網(wǎng)頁元素上：嵌入式樣式表和外部樣式表。嵌入式樣式表和外部樣式表。 單擊單擊“CSS”面板中的面板中的“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，可打開，可

5、打開“新建新建CSS規(guī)則規(guī)則” 對(duì)話框。如圖所示。對(duì)話框。如圖所示。選擇器類型的含義如下：選擇器類型的含義如下： 高級(jí)（高級(jí)（ID、偽類選擇器等）：為特定的組合標(biāo)簽、偽類選擇器等）：為特定的組合標(biāo)簽 定義層疊樣式表，可以使用定義層疊樣式表，可以使用ID作為屬性，以保證作為屬性，以保證 文檔具有唯一可用的值。文檔具有唯一可用的值。類（可應(yīng)用于任何標(biāo)簽）：可以在文檔窗口的類（可應(yīng)用于任何標(biāo)簽）：可以在文檔窗口的任何區(qū)域或文本中應(yīng)用類樣式。任何區(qū)域或文本中應(yīng)用類樣式。 標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義 HTML標(biāo)記的的默認(rèn)格式。標(biāo)記的的默認(rèn)格式。1“類

6、型類型”選項(xiàng)選項(xiàng)用于設(shè)置用于設(shè)置CSS樣式的文本格式。樣式的文本格式。字體：可以選擇相應(yīng)的字體。字體：可以選擇相應(yīng)的字體。 大小：大小就是字號(hào)，可以直接填入數(shù)字，然后選擇單位。大?。捍笮【褪亲痔?hào)，可以直接填入數(shù)字，然后選擇單位。 樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。 行高：設(shè)置行高，可以選擇行高：設(shè)置行高，可以選擇“正常正?！保層?jì)算機(jī)自動(dòng)調(diào)整，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。顏色：設(shè)置文字的色彩。顏色：設(shè)置文字的色彩。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框

7、后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：2“背景背景”選項(xiàng)選項(xiàng)用于設(shè)置用于設(shè)置CSS樣式的背景格式。樣式的背景格式。背景顏色：選擇固定色作為背景。背景顏色：選擇固定色作為背景。背景圖像：選擇圖像作為背景。背景圖像：選擇圖像作為背景。重復(fù)：在使用圖像作為背景的時(shí)，可以使用此項(xiàng)設(shè)置背景重復(fù)：在使用圖像作為背景的時(shí)，可以使用此項(xiàng)設(shè)置背景圖像的重復(fù)方式。圖像的重復(fù)方式。附件：選擇圖像做背景的時(shí)候，可以設(shè)置圖像是否跟隨網(wǎng)附件：選擇圖像做背景的時(shí)候，可以設(shè)置圖像是否跟隨網(wǎng)頁一同滾動(dòng)。頁一同滾動(dòng)。水平位置：設(shè)置圖像水平方向的位置。水平位置：設(shè)置圖像水平方向的位置。垂直位置：設(shè)置圖像垂直方向的位置。垂直位置：

8、設(shè)置圖像垂直方向的位置。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：3“區(qū)塊區(qū)塊”選項(xiàng)選項(xiàng)用于設(shè)置用于設(shè)置CSS樣式的區(qū)塊格式。樣式的區(qū)塊格式。單詞間距：英文單詞之間的距離，一般使用默認(rèn)設(shè)置。單詞間距：英文單詞之間的距離，一般使用默認(rèn)設(shè)置。字母間距：設(shè)置英文字母間距，使用正值為增加字母字母間距：設(shè)置英文字母間距，使用正值為增加字母間距，使用負(fù)值為減小字母間距。間距，使用負(fù)值為減小字母間距。垂直對(duì)齊：設(shè)置對(duì)象的垂直對(duì)齊方式。垂直對(duì)齊：設(shè)置對(duì)象的垂直對(duì)齊方式。文本對(duì)齊：設(shè)置文本的水平對(duì)齊方式。文本對(duì)齊：設(shè)置文本的水平對(duì)齊方式。文字縮進(jìn)：可以設(shè)置首行縮進(jìn)。文字

9、縮進(jìn)：可以設(shè)置首行縮進(jìn)。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：4“方框方框”選項(xiàng)選項(xiàng)用于設(shè)置用于設(shè)置CSS樣式的方框格式。樣式的方框格式。寬：設(shè)置對(duì)象的寬度。寬：設(shè)置對(duì)象的寬度。高：設(shè)置對(duì)象的高度。高：設(shè)置對(duì)象的高度。浮動(dòng)：可以設(shè)置文字等對(duì)象的環(huán)繞效果。浮動(dòng)：可以設(shè)置文字等對(duì)象的環(huán)繞效果。填充：指邊框和其中內(nèi)容之間的空白區(qū)域。填充：指邊框和其中內(nèi)容之間的空白區(qū)域。邊界：是指邊框外側(cè)的空白區(qū)域。邊界：是指邊框外側(cè)的空白區(qū)域。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：5“邊框邊框”選項(xiàng)選項(xiàng)可以給對(duì)象添加邊框，設(shè)

10、置邊框的顏色、粗細(xì)、樣式?？梢越o對(duì)象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。樣式：設(shè)置邊框的樣式。樣式：設(shè)置邊框的樣式。寬度：設(shè)置寬度：設(shè)置4個(gè)方向邊框的寬度。個(gè)方向邊框的寬度。顏色：設(shè)置顏色：設(shè)置4個(gè)方向邊框?qū)?yīng)的顏色。個(gè)方向邊框?qū)?yīng)的顏色。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：6“列表列表”選項(xiàng)選項(xiàng)設(shè)置設(shè)置CSS樣式的列表格式。樣式的列表格式。類型：設(shè)置引導(dǎo)列表項(xiàng)目的符號(hào)類型。類型：設(shè)置引導(dǎo)列表項(xiàng)目的符號(hào)類型。項(xiàng)目符號(hào)圖像：可以選擇圖像作為項(xiàng)目的引導(dǎo)符號(hào)。項(xiàng)目符號(hào)圖像：可以選擇圖像作為項(xiàng)目的引導(dǎo)符號(hào)。 位置：決定列表項(xiàng)目縮進(jìn)的程度。位置：決定列表

11、項(xiàng)目縮進(jìn)的程度。進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下：7“擴(kuò)展擴(kuò)展”選項(xiàng)選項(xiàng)利用利用CSS實(shí)現(xiàn)一些擴(kuò)展功能。實(shí)現(xiàn)一些擴(kuò)展功能。分頁：通過樣式來為網(wǎng)頁添加分頁符號(hào)。分頁：通過樣式來為網(wǎng)頁添加分頁符號(hào)。光標(biāo)：通過樣式改變鼠標(biāo)形狀。光標(biāo)：通過樣式改變鼠標(biāo)形狀。 過濾器：使用過濾器：使用CSS語言實(shí)現(xiàn)過濾器（濾鏡）效果。語言實(shí)現(xiàn)過濾器（濾鏡）效果。 進(jìn)入進(jìn)入“規(guī)則定義規(guī)則定義”對(duì)話框后，對(duì)話框后，各選項(xiàng)的含義如下：各選項(xiàng)的含義如下： 1打開站點(diǎn)打開站點(diǎn)example中的中的company.html文件。文件。2在在CSS樣式面板中單擊樣式面板中單擊“全部全

12、部”按鈕按鈕 ，可以看到，可以看到此網(wǎng)頁文件中已經(jīng)包含了一些此網(wǎng)頁文件中已經(jīng)包含了一些CSS樣式。如右圖所示。樣式。如右圖所示。由于之前我們?cè)谥谱骶W(wǎng)頁時(shí)設(shè)置過一些文本的字體、由于之前我們?cè)谥谱骶W(wǎng)頁時(shí)設(shè)置過一些文本的字體、大小等樣式，面板中這四個(gè)樣式就是在我們操作時(shí)由大小等樣式，面板中這四個(gè)樣式就是在我們操作時(shí)由Dreameaver自動(dòng)生成的樣式。自動(dòng)生成的樣式。一設(shè)置頁面樣式一設(shè)置頁面樣式 3選中此面板中的選中此面板中的“樣式樣式”所在行所在行 ，再單擊此面板，再單擊此面板右下角的右下角的“刪除樣式表刪除樣式表”按鈕按鈕 ，刪除這些樣式。，刪除這些樣式。4.逐一選中頁面中曾經(jīng)使用過樣式的文本塊

13、、單元格等逐一選中頁面中曾經(jīng)使用過樣式的文本塊、單元格等對(duì)象，通過對(duì)象，通過“屬性屬性”面板將其樣式設(shè)置為面板將其樣式設(shè)置為“無無”。一設(shè)置頁面樣式一設(shè)置頁面樣式 5單擊單擊“屬性屬性”面板中的面板中的“頁面屬性頁面屬性”按鈕按鈕 ，打開，打開“頁面屬性頁面屬性”對(duì)話對(duì)話框，設(shè)置頁面屬性如右圖所示?？颍O(shè)置頁面屬性如右圖所示。6單擊單擊“確定確定”，這些樣式就被建立，這些樣式就被建立到當(dāng)前網(wǎng)頁文件中了。網(wǎng)頁中有了到當(dāng)前網(wǎng)頁文件中了。網(wǎng)頁中有了背景圖片，且文字也設(shè)置成了宋體、背景圖片，且文字也設(shè)置成了宋體、12像素，頁面的四個(gè)邊距均為像素，頁面的四個(gè)邊距均為2像素。像素。一設(shè)置頁面樣式一設(shè)置頁面

14、樣式 1在在CSS樣式面板中單擊右下方的樣式面板中單擊右下方的 “新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，打開，打開“新建新建 CSS規(guī)則規(guī)則”對(duì)話框。對(duì)話框。二設(shè)置段落樣式二設(shè)置段落樣式在在“選擇器類型選擇器類型”選項(xiàng)中選擇選項(xiàng)中選擇“標(biāo)簽標(biāo)簽”，在在“標(biāo)簽標(biāo)簽”下拉列表中選擇下拉列表中選擇“p”，在，在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。如右圖所示。設(shè)置完畢后，單擊如右圖所示。設(shè)置完畢后，單擊“確定確定”按鈕。按鈕。 2在在“p的的CSS規(guī)則定義規(guī)則定義”對(duì)話框中選擇對(duì)話框中選擇 “類型類型”選項(xiàng)，設(shè)置字體為選項(xiàng)，設(shè)置字體為“宋體宋體”，大小為，大小為 “12像素像素

15、”，行高為，行高為“1.5倍行高倍行高”。如右圖。如右圖 所示。所示。二設(shè)置段落樣式二設(shè)置段落樣式 3再選擇再選擇“方框方框”選項(xiàng)，設(shè)置邊界值：選項(xiàng)，設(shè)置邊界值：上、下均為上、下均為0像素，左右均為像素，左右均為8像素。像素。如右圖所示。如右圖所示。二設(shè)置段落樣式二設(shè)置段落樣式 4單擊單擊“確定確定”按鈕完成段落的按鈕完成段落的CSS設(shè)置。設(shè)置。二設(shè)置段落樣式二設(shè)置段落樣式由于是對(duì)由于是對(duì)p標(biāo)簽（段落標(biāo)記）設(shè)置的樣式，所標(biāo)簽（段落標(biāo)記）設(shè)置的樣式，所以此時(shí)網(wǎng)頁中所有的段落都會(huì)使用這個(gè)樣式表以此時(shí)網(wǎng)頁中所有的段落都會(huì)使用這個(gè)樣式表的屬性設(shè)置。的屬性設(shè)置。 1在在CSS樣式面板中單擊樣式面板中單擊

16、“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，在打開的，在打開的“新建新建CSS規(guī)則規(guī)則”對(duì)話框中，設(shè)置對(duì)話框中，設(shè)置“選擇器類型選擇器類型”為為“類類”，在，在“標(biāo)簽標(biāo)簽”中輸入中輸入“.text”，在，在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。單擊。單擊“確定確定”按鈕。按鈕。三設(shè)置文本樣式三設(shè)置文本樣式 2在在“.text的的CSS規(guī)則定義規(guī)則定義”對(duì)話框中選對(duì)話框中選擇擇“類型類型”選項(xiàng)，設(shè)置粗細(xì)為選項(xiàng)，設(shè)置粗細(xì)為“粗體粗體”，顏色，顏色為為“#FFFFFF”（白色）。如右圖所示。（白色）。如右圖所示。三設(shè)置文本樣式三設(shè)置文本樣式 3通過通過“標(biāo)簽選擇器標(biāo)簽選擇器”選中導(dǎo)

17、航菜單所在的選中導(dǎo)航菜單所在的表格，在表格，在“屬性屬性”面板中設(shè)置樣式為面板中設(shè)置樣式為“text”。如右圖所示。如右圖所示。三設(shè)置文本樣式三設(shè)置文本樣式 用同樣的方法再建立一個(gè)用同樣的方法再建立一個(gè)“.bottom”樣式，如下：樣式，如下： 1新建新建“.bottom”類。如下圖所示。類。如下圖所示。 2樣式中的屬性值分別是：字體為樣式中的屬性值分別是：字體為“宋體宋體”；字號(hào)為；字號(hào)為“12像素像素”，行高，行高 為為“1.5倍行高倍行高”；顏色為；顏色為“#FFFFFF”。 3通過通過“標(biāo)簽選擇器標(biāo)簽選擇器”選中網(wǎng)頁底部的單元格，將其樣式設(shè)置成選中網(wǎng)頁底部的單元格，將其樣式設(shè)置成.bo

18、ttom。三設(shè)置文本樣式三設(shè)置文本樣式 1在在CSS樣式面板中單擊樣式面板中單擊“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，在打開的，在打開的“新建新建CSS規(guī)則規(guī)則”對(duì)話框中，設(shè)置對(duì)話框中，設(shè)置“選擇器類型選擇器類型”為為“類類”；在；在“標(biāo)簽標(biāo)簽”中輸入中輸入“.list”；在；在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。單擊。單擊“確定確定”按鈕。按鈕。四設(shè)置列表樣式四設(shè)置列表樣式2在在“.list的的CSS規(guī)則定義規(guī)則定義”對(duì)話框中選擇對(duì)話框中選擇“類型類型”選項(xiàng)，設(shè)置字體選項(xiàng)，設(shè)置字體為為“宋體宋體”，大小為，大小為“12像素像素”，行高為，行高為“2倍行高倍行高”。

19、3選擇選擇“區(qū)塊區(qū)塊”選項(xiàng)，設(shè)置文字縮進(jìn)為選項(xiàng)，設(shè)置文字縮進(jìn)為“30像素像素”。如右圖所示。如右圖所示。四設(shè)置列表樣式四設(shè)置列表樣式 4選擇選擇“列表列表”選項(xiàng)，設(shè)置項(xiàng)目符號(hào)圖像選項(xiàng)，設(shè)置項(xiàng)目符號(hào)圖像為為“images/dot.gif”，位置為，位置為“外外”。如右圖所示。如右圖所示。四設(shè)置列表樣式四設(shè)置列表樣式 5單擊單擊“確定確定”按鈕完成段落的按鈕完成段落的CSS設(shè)置。設(shè)置。四設(shè)置列表樣式四設(shè)置列表樣式6選中網(wǎng)頁選中網(wǎng)頁“欄目導(dǎo)航欄目導(dǎo)航”中的列表（在中的列表（在“標(biāo)簽選擇器標(biāo)簽選擇器”中單擊中單擊標(biāo)記），標(biāo)記），在在“屬性屬性”面板中設(shè)置其樣式為面板中設(shè)置其樣式為“.list”。列表樣

20、式應(yīng)用前后的效果是列表樣式應(yīng)用前后的效果是明顯不同的，如下圖所示。明顯不同的，如下圖所示。返回沒有使用.list樣式的效果 使用.list樣式后的效果 本任務(wù)我們將使用CSS對(duì)“欄目導(dǎo)航”和“聯(lián)系方式”兩個(gè)區(qū)域進(jìn)一步進(jìn)行美化。設(shè)置文本顏色為“白色”，對(duì)這行標(biāo)題使用列表樣式，并且用“imagestitle01.jpg”圖片作單元格的背景。 1打開站點(diǎn)打開站點(diǎn)example中的中的company.html文件。文件。2在在CSS樣式面板中單擊樣式面板中單擊“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，在打開的，在打開的“新建新建CSS規(guī)則規(guī)則”對(duì)話框中，設(shè)置對(duì)話框中，設(shè)置“選擇器類型選擇器類型”為為“類類

21、”；在；在“標(biāo)簽標(biāo)簽”中輸入中輸入“.tab_title”；在；在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。單擊。單擊“確定確定”按鈕。按鈕。3選擇選擇“類型類型”選項(xiàng)，設(shè)置文本字體為選項(xiàng)，設(shè)置文本字體為“宋體宋體”，大小為，大小為“12像素像素”，行高，行高為為“1.5倍行高倍行高”，粗細(xì)為，粗細(xì)為“粗體粗體”，顏色為，顏色為“#FFFFFF”。1打開站點(diǎn)打開站點(diǎn)example中的中的company.html文件。文件。2在在CSS樣式面板中單擊樣式面板中單擊“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，在打開的，在打開的“新建新建CSS規(guī)則規(guī)則”對(duì)話框中，設(shè)置對(duì)話框中，設(shè)置“選

22、擇器類型選擇器類型”為為“類類”；在；在“標(biāo)簽標(biāo)簽”中輸入中輸入“.tab_title”；在；在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。單擊。單擊“確定確定”按鈕。按鈕。 4選擇選擇“類型類型”選項(xiàng)，設(shè)置背景圖像為選項(xiàng)，設(shè)置背景圖像為“images/title01.jpg”，如右圖所示。，如右圖所示。 5選擇選擇“列表列表”選項(xiàng)，設(shè)置背景圖像為選項(xiàng)，設(shè)置背景圖像為“images/dot1.jpg”，位置為，位置為“外外”，如右圖所示。如右圖所示。 6通過通過“標(biāo)簽選擇器標(biāo)簽選擇器”選中選中“欄目導(dǎo)航欄目導(dǎo)航”所在的單元格，在所在的單元格，在“屬性屬性”面板中面板中設(shè)置樣式

23、為設(shè)置樣式為“tab_title”。7同樣的方法設(shè)置同樣的方法設(shè)置“聯(lián)系方式聯(lián)系方式”單元格樣式。單元格樣式。 網(wǎng)頁的瀏覽效果網(wǎng)頁的瀏覽效果 返回 本任務(wù)要為company.html網(wǎng)頁的導(dǎo)航菜單及各板塊建立超鏈接。并為超鏈接設(shè)置美觀的CSS樣式，存儲(chǔ)為外部樣式表，不僅可將樣式作用于當(dāng)前網(wǎng)頁，也可供其他網(wǎng)頁所調(diào)用。在“新建CSS規(guī)則”對(duì)話框中選擇“高級(jí)”，則在選擇器的下拉列表中可以看到這四種超鏈接樣式規(guī)則。 如右圖所示。 超鏈接有四種顯示狀態(tài)，含義如下：超鏈接有四種顯示狀態(tài)，含義如下： a:link超鏈接默認(rèn)狀態(tài)；超鏈接默認(rèn)狀態(tài)； a:visited已訪問過的超鏈接狀態(tài)；已訪問過的超鏈接狀態(tài)；

24、 a:hover鼠標(biāo)指向的超鏈接狀態(tài)；鼠標(biāo)指向的超鏈接狀態(tài)； a:active鼠標(biāo)正在點(diǎn)擊的超鏈接狀態(tài)。鼠標(biāo)正在點(diǎn)擊的超鏈接狀態(tài)。 如果網(wǎng)頁不同區(qū)塊的內(nèi)容超鏈接樣式要求不同，則可以在如果網(wǎng)頁不同區(qū)塊的內(nèi)容超鏈接樣式要求不同，則可以在“新建新建CSS規(guī)則規(guī)則”對(duì)話框中將超鏈接樣式名前加上該區(qū)塊元素的對(duì)話框中將超鏈接樣式名前加上該區(qū)塊元素的ID名或者名或者類名，即可設(shè)置出專門針對(duì)某些區(qū)塊或某些標(biāo)記的超鏈接樣式。這類名，即可設(shè)置出專門針對(duì)某些區(qū)塊或某些標(biāo)記的超鏈接樣式。這樣就能在同一個(gè)網(wǎng)頁中制作出不同的超鏈接樣式。樣就能在同一個(gè)網(wǎng)頁中制作出不同的超鏈接樣式。1打開站點(diǎn)打開站點(diǎn)example中的中的c

25、ompany.html文件。文件。2在在CSS樣式面板中單擊樣式面板中單擊“新建新建CSS規(guī)則按鈕規(guī)則按鈕” ，打開，打開“新建新建CSS規(guī)則規(guī)則”對(duì)話框。在對(duì)話框。在“選擇器類型選擇器類型”選項(xiàng)中選擇選項(xiàng)中選擇“高級(jí)高級(jí)”，在，在“選擇器選擇器”選項(xiàng)中選項(xiàng)中選擇選擇“a:link”，在，在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“”。設(shè)置。設(shè)置完畢后，單擊完畢后，單擊“確定確定”按鈕。按鈕。3彈出彈出“保存樣式表文件為保存樣式表文件為”對(duì)話框。對(duì)話框。如右圖所示。輸入樣式表文件名為如右圖所示。輸入樣式表文件名為“a_css.css”，保存位置是站點(diǎn)，保存位置是站點(diǎn)文件夾文件夾mwmw中的中的cs

26、s文件夾。文件夾。單擊單擊“保存保存”按鈕。按鈕。4在彈出的在彈出的“a:link的的CSS規(guī)則定義規(guī)則定義”對(duì)話框中，選擇對(duì)話框中，選擇“類型類型”，設(shè)置字體為，設(shè)置字體為“宋體宋體”，大小為，大小為“12像素像素”，顏色為，顏色為“黃色（黃色（#FFFF00）”，修飾為，修飾為“無無”。如右圖所示。如右圖所示。5同樣的方法建立同樣的方法建立“a:visited”樣式。屬性設(shè)置與樣式。屬性設(shè)置與“a:link”樣式相同。樣式相同。6再建立再建立“a:hover”樣式。屬性設(shè)置中除顏色為樣式。屬性設(shè)置中除顏色為“#FFFFFF”外，外，其他屬性與其他屬性與“a:link”樣式相同。樣式相同。7

27、再建立再建立“a:active”樣式。屬性設(shè)置中除顏色為樣式。屬性設(shè)置中除顏色為“#66FF66”外，外，其他屬性與其他屬性與“a:link”樣式相同。樣式相同。8選中導(dǎo)航菜單中的選中導(dǎo)航菜單中的“網(wǎng)站首頁網(wǎng)站首頁”四個(gè)字，在四個(gè)字，在“屬性屬性”面板的面板的“鏈接鏈接”中中選擇選擇home.html文件。如下圖所示。文件。如下圖所示。9按按F12瀏覽網(wǎng)頁。瀏覽網(wǎng)頁。Dreamweaver會(huì)彈出一個(gè)提示對(duì)話框，會(huì)彈出一個(gè)提示對(duì)話框，單擊單擊“是是”，保存，保存a_css.css樣式表文件，并進(jìn)行瀏覽。如下圖所示。樣式表文件，并進(jìn)行瀏覽。如下圖所示。10觀察鼠標(biāo)操作超鏈接時(shí)，文字是否按我們?cè)O(shè)置的

28、樣式進(jìn)行變化。觀察鼠標(biāo)操作超鏈接時(shí)，文字是否按我們?cè)O(shè)置的樣式進(jìn)行變化。導(dǎo)航菜單中的每一項(xiàng)目都對(duì)應(yīng)著一個(gè)網(wǎng)頁，雖然目前還沒有創(chuàng)建這些導(dǎo)航菜單中的每一項(xiàng)目都對(duì)應(yīng)著一個(gè)網(wǎng)頁，雖然目前還沒有創(chuàng)建這些網(wǎng)頁，為了學(xué)習(xí)的方便，我們?cè)诖讼葹檫@些項(xiàng)目創(chuàng)建超鏈接。如下表網(wǎng)頁，為了學(xué)習(xí)的方便，我們?cè)诖讼葹檫@些項(xiàng)目創(chuàng)建超鏈接。如下表所示。為以后的學(xué)習(xí)任務(wù)做好準(zhǔn)備。所示。為以后的學(xué)習(xí)任務(wù)做好準(zhǔn)備。1打開打開home.html文件。文件。2在在“CSS樣式樣式”面板中單擊右下方的面板中單擊右下方的“附加附加樣式表樣式表”按鈕按鈕 ，打開，打開“鏈接外部樣式表鏈接外部樣式表”對(duì)話框，如右圖所示。定位到對(duì)話框，如右圖所示。定

29、位到css文件夾中的文件夾中的a_css.css，“添加為添加為”使用使用“鏈接鏈接”方式，方式，單擊單擊“確定確定”即可。即可。3參照參照company.html中的超鏈接設(shè)置，為當(dāng)前網(wǎng)頁中的超鏈接設(shè)置，為當(dāng)前網(wǎng)頁的導(dǎo)航菜單設(shè)置超鏈接。的導(dǎo)航菜單設(shè)置超鏈接。 4為網(wǎng)頁各區(qū)塊右上方的為網(wǎng)頁各區(qū)塊右上方的“更多更多”設(shè)置相應(yīng)的超鏈接，如下：設(shè)置相應(yīng)的超鏈接，如下： “酒店簡介酒店簡介”右側(cè)的右側(cè)的“更多更多”company.html； “今日推介今日推介”右側(cè)的右側(cè)的“更多更多”product.html； “餐館環(huán)境餐館環(huán)境”右側(cè)的右側(cè)的“更多更多”environment.html； “行業(yè)動(dòng)態(tài)

30、行業(yè)動(dòng)態(tài)”右側(cè)的右側(cè)的“更多更多”news.html。5為網(wǎng)頁右下方的各圖像逐一設(shè)置超鏈接，均為為網(wǎng)頁右下方的各圖像逐一設(shè)置超鏈接，均為product.html。如下圖所示。如下圖所示。 在在home.html網(wǎng)頁的左下方網(wǎng)頁的左下方“行業(yè)動(dòng)態(tài)行業(yè)動(dòng)態(tài)”中有中有5行新聞標(biāo)題，行新聞標(biāo)題，現(xiàn)在我們?yōu)槠湓O(shè)置超鏈接目標(biāo)為現(xiàn)在我們?yōu)槠湓O(shè)置超鏈接目標(biāo)為“article/read1.html”。并。并將這塊超鏈接的使用不同的樣式。將這塊超鏈接的使用不同的樣式。 1將光標(biāo)定位在新聞行中。再單擊將光標(biāo)定位在新聞行中。再單擊“CSS面板面板”右下方的右下方的“新建新建CSS規(guī)則規(guī)則”按鈕按鈕 ，打開，打開“新建

31、新建CSS規(guī)則規(guī)則”對(duì)話框。在對(duì)話框。在“選擇器類型選擇器類型”選項(xiàng)中選擇選項(xiàng)中選擇“高級(jí)高級(jí)”，在在“選擇器選擇器”中輸入中輸入“.list a:link”，在，在“定義在定義在”選項(xiàng)中選擇選項(xiàng)中選擇“僅對(duì)該文檔僅對(duì)該文檔”。如。如下圖所示。單擊下圖所示。單擊“確定確定”按鈕。按鈕。 2在彈出的在彈出的“.list a:link的的CSS規(guī)則定義規(guī)則定義”對(duì)話框中，選擇對(duì)話框中，選擇“類型類型”，設(shè)置，設(shè)置 字體為字體為“宋體宋體”，大小為，大小為“12像素像素”，顏色為，顏色為“黑色（黑色（#000000）”，修飾為，修飾為 “無無”。3同樣的方法建立同樣的方法建立“.list a:vis

32、ited”樣式，設(shè)置字體為樣式，設(shè)置字體為“宋體宋體”，大小為，大小為“12像素像素”，顏色為，顏色為“黑色（黑色（#000000）”，修飾為，修飾為“無無”。4同樣的方法建立同樣的方法建立“.list a:hover”樣式，設(shè)置字體為樣式，設(shè)置字體為“宋體宋體”，大小為，大小為“12像素像素”，顏色為，顏色為“#0000CC”，修飾為，修飾為“無無”。5同樣的方法建立同樣的方法建立“.list a:active”樣式，設(shè)置字體為樣式，設(shè)置字體為“宋體宋體”，大小為，大小為“12像素像素”，顏色為，顏色為“#000099”，修飾為，修飾為“無無”。6保存，瀏覽網(wǎng)頁。保存，瀏覽網(wǎng)頁。返回 本任務(wù)

33、使用CSS的Alpha濾鏡來設(shè)置company.html中的圖像顯示效果和home.html中的文本顯示效果。 CSS濾鏡主要應(yīng)用于濾鏡主要應(yīng)用于IE瀏覽器，可以給網(wǎng)頁中的文字、圖像等瀏覽器，可以給網(wǎng)頁中的文字、圖像等 元素添加特殊效果。比如設(shè)置透明度、發(fā)光、翻轉(zhuǎn)、陰影等。元素添加特殊效果。比如設(shè)置透明度、發(fā)光、翻轉(zhuǎn)、陰影等。 濾鏡在濾鏡在HTML中的語法是：中的語法是： filter：fiitername(parameters) 1Alpha濾鏡：濾鏡： 制作透明效果，其語法是：制作透明效果，其語法是： filter：Alpha(opacity=?，finishopacity=?，style

34、=?， startx=?，starty=?，finishx=?，finishy=?) 2Blur濾鏡濾鏡制作模糊效果，其語法是：制作模糊效果，其語法是：filter：Blur(add=?，direction=?，strength=?) 3Chroma 把指定的顏色設(shè)置為透明，其語法是：把指定的顏色設(shè)置為透明，其語法是： filter：Chroma(color=?)4.DropShadow制作投射陰影效果，可以指定陰影的偏移量制作投射陰影效果，可以指定陰影的偏移量filter：DropShadow(color=?，offx=?，offy=?,positive=?) 5FlipH濾鏡濾鏡 制作水平

35、翻轉(zhuǎn)效果，其語法是：制作水平翻轉(zhuǎn)效果，其語法是： filter：FlipH 6FlipV濾鏡濾鏡 制作垂直翻轉(zhuǎn)效果，其語法是：制作垂直翻轉(zhuǎn)效果，其語法是：filter：F1ipV 7Glow濾鏡濾鏡 制作發(fā)光效果，其語法是：制作發(fā)光效果，其語法是： Filter：Glow(color=?，strength=?) 8Gray將彩色圖片轉(zhuǎn)為灰度顯示，其語法是：將彩色圖片轉(zhuǎn)為灰度顯示，其語法是：Filter：Gray 9Invert濾鏡濾鏡將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果，將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果，其語法是：其語法是：Filter：Invert 10Mask濾鏡濾鏡 設(shè)置遮罩效果，其語法是：設(shè)置遮罩效果，其語法是： Filter：Mask(Color=?) 11.Shadow濾鏡濾鏡 制作陰影效果，可以指定陰影的方向，其語法是：制作陰影效果，可以指定陰影的方向，其語法是： filter：shadow(color=?，direction=?) 12Wave濾鏡濾鏡制作波紋效果，其語法是：制作波紋效果，其語法是：filter：Wave(add=?，freq=?，lightstrength=?，phase=?，strength=?) 13Xray 設(shè)置設(shè)置X光照效果，其語法是：光照效果，其語法是：filter：Xray1打開站點(diǎn)打開站點(diǎn)e