河南科技大學(xué)網(wǎng)頁設(shè)計實驗作業(yè)

《網(wǎng)頁設(shè)計與制作實驗指導(dǎo)書》

河南科技大學(xué)管理學(xué)院

目錄

實驗規(guī)則.................................................................3

實驗報告要求.............................................................4

基本實驗方法.............................................................4

實驗環(huán)境.................................................................4

實驗一Dreamweaver8基本操作、站點管理...............................5

實驗二網(wǎng)頁的定位技術(shù)以及制作層動畫..................................7

實驗三網(wǎng)頁編輯與超鏈接................................................13

實驗四層疊樣式、模板和庫..............................................17

實驗五表單與表單域....................................................23

實驗規(guī)則

為了順利完成實驗教學(xué)任務(wù)，確保人身設(shè)備安全，培養(yǎng)嚴(yán)謹(jǐn)、踏實、實事求

是的科學(xué)作風(fēng)和愛護國家財產(chǎn)的優(yōu)良品質(zhì)，特制定以下實驗規(guī)則：

1、實驗紀(jì)律

(1)在實驗室不得做和實驗無關(guān)的事情。

(2)遵守紀(jì)律，不遲到，不曠課。

(3)不能拆卸硬件，更不能拿走實驗設(shè)備或儀器。

(4)保持實驗室安靜、整潔，愛護公物。

2、實驗過程

(1)預(yù)習(xí)實驗內(nèi)容。

(2)上機操作。記錄實驗中遇到的問題，主要是錯誤信息和錯誤原因。

(3)檢查操作結(jié)果是否正確。

(4)根據(jù)實驗過程的記錄書寫實驗報告。

實驗報告要求

1、報告用紙采用統(tǒng)一的河南科技大學(xué)實驗報告用紙，或按照指導(dǎo)老師指

定的統(tǒng)一格式打印。

2、實驗報告封面內(nèi)容

實驗名稱：（如實驗一網(wǎng)頁的定位技術(shù)）

班級名稱：（如計031班）

學(xué)生學(xué)號：

學(xué)生姓名：

實驗時間：

3、實驗報告內(nèi)容

見各具體實驗項目的要求。

基本實驗方法

本實驗要求熟悉Dreamweaver8.0的工作環(huán)境和網(wǎng)頁設(shè)計制作的相關(guān)知識。

實驗環(huán)境

Dreamweaver8.0

實驗一Dreamweaver8基本操作、站點管理

一、實驗?zāi)康暮鸵螅?/p>

1.掌握Dreamweaver8啟動和退出的方法。

2.掌握本站點的設(shè)置方法。

3.掌握創(chuàng)建、打開和保存HTML文檔的方法

二、實驗內(nèi)容：

1.網(wǎng)頁編輯器的基本操作

(1)用不同的方法啟動和退出Dreamweaver8。

(2)用快捷鍵打開和關(guān)閉【插入】面板和【屬性】面板。

(3)將【代碼】浮動面板組打開后，先移出，再移入浮動面板放置區(qū)，然后再將【設(shè)

計】浮動面板組中的【CSS樣式】組合到【代碼】浮動面板組中。察看浮動

面板組操作后的效果。

(4)用快捷鍵關(guān)閉和打開浮動面板組，用鼠標(biāo)折疊和展開各個浮動面板組，察看浮

動面板組操作后的效果。

2.建立網(wǎng)站的基本操作

(1)打開站點管理器，在本地計算機的當(dāng)前盤根文件夾中，建立名為myweb的文

件夾。

(2)把文件夾myweb設(shè)置為本地站點的根文件夾。然后建立名為image文件夾。

(3)在本地計算機的當(dāng)前盤根文件夾中，建立名為oursite的子文件夾，并切換為

本地站點的根文件夾。

3.文件管理基本操作

(1)將chl2\material文件夾中的兩個文件bg0004.gif和bg0093.gif及myrose中的

文件rose.htm,分別復(fù)制到本地站點“我們的站點”的oursite文件夾中。

(2)在文件夾中oursite中新建子文件夾image,并將oursite中的文件bg0004.gif

和bg0093.gif轉(zhuǎn)移到image文件夾中。

(3)請正確顯示rose.htm網(wǎng)頁。

4.制作簡單網(wǎng)頁

按下述要求制作網(wǎng)頁exel2-l.htm,如圖12-2所示。

(1)頁面的背景圖片為ch12\material文件夾中的圖片bgOO15.jpg。

(2)在合適的位置上插入chl2\material文件夾中的圖片文件exl.jpg。

(3)在網(wǎng)頁中輸入文字：一件好的作品，如一陣清新的風(fēng)，一曲溫婉的歌，讓人心

曠神怡。一件好的作品，如一杯香醇的茶，一瓶陳年的酒，讓人回味無窮…

(4)將網(wǎng)頁用exel2-l.htm為名保存在本地站點的文件夾oursite中。

圖12-2簡單網(wǎng)頁exel2-l.htm

三、實驗學(xué)時：3學(xué)時

實驗二網(wǎng)頁的定位技術(shù)以及制作層動畫

一、實驗?zāi)康暮鸵螅?/p>

1.掌握表格創(chuàng)建和編輯的方法

2.掌握布局表格和布局單元格的使用方法

3.掌握層的創(chuàng)建、編輯和應(yīng)用的方法

4,掌握框架網(wǎng)頁的創(chuàng)建、編輯和保存的方法

二、實驗內(nèi)容：

1.表格的創(chuàng)建、插入、刪除、復(fù)制和移動等操作

(1)創(chuàng)建一個名為exel4-l.htm的網(wǎng)頁文件，將其保存到Mysite文件中。在頁面上

輸入4行5列的表格，表格寬度為500像素，表格的邊框為1像素，在表格中輸入如表14-1

所示的內(nèi)容。并在表格上方增加標(biāo)題“信息學(xué)院各班平均成績”，標(biāo)題格式設(shè)置為方正舒體、

5號、粗體、#003366o

表14-1各班平均成績表

科目數(shù)據(jù)原理計算機組成實驗英語精讀電子商務(wù)

00級1班73857779

01級1班83798291

01級3班90808592

(2)在表格“01級3班”前插入一行。內(nèi)容為“01級2班、85、82、88、82”。在表

格中“計算機組成實驗”列插入一列。內(nèi)容為“計算機組成、69、73、75、80"。

(3)將00級1班這一行移到表格的最后一行，刪除“英語精讀”這一列。

2.單元格的拆分、合并和格式化操作

(1)是表格中的數(shù)據(jù)全部居中；是整個表格在頁面上居中。

(2)按不同年級將表格拆分成兩個表格，將01級表格的“科目”一行復(fù)制到00級表

格上方，使之成為00級表格的第一行，在00級表格上面加上1行標(biāo)題“信息學(xué)院00級平

均成績表”，并刪除00級表格的“科目”這一列。

(3)將01級表格的“計算機組成”和“計算機組成實驗”兩個單元格合并成一個單

元格，內(nèi)容改為“計算機組成和實驗”、居中、黑體、5號。

（4）01級和00級兩個表格分別套用系統(tǒng)預(yù)設(shè)的格式Simple3、Simplelo

3.導(dǎo)入外部數(shù)據(jù)和表格排序

（1）將Excel文件value.xls打開，另存為Mysite\value.csv文件，數(shù)據(jù)的分隔符是

逗號。

（2）新建名為exel4-2.htm的網(wǎng)頁文件，將其保存到Mlysite文件中。背景圖片為

Mysite\jpg\bg0015.jpgo導(dǎo)入數(shù)據(jù)文件value.csv.

（3）按表格的“合計值”列降序排序，合并表格標(biāo)題所在的單元格，并使標(biāo)題居中。

（4）表格【邊框】為3；【邊框顏色】為#FF00000

4.布局表格和布局單元格的應(yīng)用

（1）創(chuàng)建一個名為exel4-3.htm的網(wǎng)頁文件，將其保存到Mysite文件夾。網(wǎng)頁背景

圖片文件為Mysite\gif\bgOO52.gif,用600*360像素的布局表格布局，布局表格中的3行5

列布局單元格每個為120*120像素，如圖14-5所示。

圖14-5頁面布局表格示意

（2）如圖14-5所示，在布局單元個中分別設(shè)置布局單元個的顏色#CCCC99、

#FF9900o

（3）如圖?4-5所示，在布局單元格中分別插入Mysite\jpg文件夾中的名為

tul.jpg、....tu7.jpg的圖片。

（4）預(yù)覽頁面后，保存該文件。

5.層的基本操作

(1)創(chuàng)建議個名為exel4-4.htm的網(wǎng)頁文件，將其保存到Mysite文件中。設(shè)置背景

圖片Mysite\gif\bg0052.gif。

(2)在網(wǎng)頁合適的位置上，分別創(chuàng)建兩個名為source和shadow的層，層的尺寸為

550*70像素，Z-index的值分別為2和1。

(3)在層中輸入文字“書一人生的伴侶，知識的源泉”，兩個層中的文字顏色分別

為紅色和黑色，字體及大小自行定義。移動層，使兩個層略微錯開重疊，使文字帶有陰影效

果，如圖14-6所示。

圖14-6兩個層錯開重疊

(4)打開【層】浮動面板，選中【防止重疊】復(fù)選框，然后移動名為source的層，

試比較改復(fù)選項與不選的區(qū)別。

(5)分別完成激活層、選中層、改變層的大小、改變層的可見性的操作。

(6)改變這兩個層的疊放次序，使名為source的層成為shadow層的子層，觀察改

變后的結(jié)果，然后恢復(fù)原樣。

6.層與表格的綜合練習(xí)

(1)創(chuàng)建名為exel4-5.htm的網(wǎng)頁文件，將其保存到Mysite文件夾中。設(shè)置背景圖

片為Mysite\jpg\bg0006.gif。在網(wǎng)頁合適的位置上插入1行4列的表格。表格的各項參數(shù)為

【寬】為360像素、【高】為30像素、【背景顏色】為#FFFFEE、【邊框顏色】為#99CCCC、

【邊框】為2像素、【填充】為0、【間距】為0。

(2)每個單元格中的內(nèi)容分別為“現(xiàn)代生活”、“生活藝術(shù)”、“文化教育”、“科學(xué)技

術(shù)”。

(3)在網(wǎng)頁合適的位置上插上4個層，層的大小為90*90像素，在每個層中插入一

個4行1列的表格，表格的每個單元格的大小分別為90*22像素，【邊框】為1像素、【背景

顏色】為#FFFFEE,如圖14-7所示。

現(xiàn)代文學(xué)生活藝術(shù)文化教育科學(xué)技術(shù)1

紀(jì)實小說飲食旅滿督學(xué)宗故工程建筑

外國文學(xué)室內(nèi)裝潢政治法律能源環(huán)境

兒童文學(xué)美容美發(fā)社會歷史生物醫(yī)藥

詩隸散文花草魚生心理衛(wèi)生電腦技術(shù)

圖14-7由層和表格組成的下拉菜單

(4)改變這4個層的疊放次序和改變層的可見性，觀察結(jié)果后保存文件，(該文件在

實驗15中還會有用)。

7.框架和框架集的創(chuàng)建、選者和保存

(1)創(chuàng)建一個名為exel4-6.htm的網(wǎng)頁文件，將其保存到Mysite文件中。用鼠標(biāo)、

菜單兩種不同的方法創(chuàng)建【左側(cè)和嵌套的頂部框架】和【頂部和嵌套的左側(cè)框架】，試比較

兩種框架的不同之處。

(2)刪除上題中創(chuàng)建的框架，然后創(chuàng)建【頂部框架工并把【頂部框架】改為【頂部

和嵌套的左側(cè)框架工調(diào)整框架的大小。

(3)分別用鼠標(biāo)在框架面板中選中主框架(bottomFrame),選中左框架(leftFrame)

插入頂部框架，將左框架分割成上(topFrame)下(leftFrame)兩部分。

(4)在主框架(mainFrame)中插入底部框架(bottomFrame),選中左框架(leftFrame)

插入頂部框架，將左框架分割成上(topFrame)下(leftFrame)兩部分。

(5)將左框架(leftFrame)調(diào)整為與底部框架(bottomFrame)高度相同。

(6)分別在框架面板中選中topFrame、topFrame1、mainFrame>leftFrame,

bottomFrame5個框架，并給5個框架設(shè)置背景顏色#AAFFFF、#CCFFFF、#

CCFFCC、#CCFFCC、#CCFFFF。

(7)用topFrame、topFrameKmainFrame、bottomFrame、leftFrame為框架文件名

和exel4-6.htm為框架集名保存框架文件到Mysite文件中。

8.設(shè)置框架和框架集的屬性和超鏈接

(1)設(shè)置exel4-6.htm框架文件的框架集屬性。各項參數(shù)分別為：【邊框】為是、【邊

框顏色】為#00CCFF、【邊框?qū)挾取繛?像素、左邊【列】為200像素。

(2)分別設(shè)置【列】的單位，在【單位】下拉式菜單中分別選者【像素】、【百分比】、

【相對】命令，觀察不同的結(jié)果。

(3)設(shè)置exel4-6.htm框架文件的框架屬性。

.在名為topFramel的框架中，插入一個大小為120*160像素的層，層中插入4行

1列的表格，表格為120*160像素，邊框?qū)挾葹?像素。

.在表格的4個單元格里分別插入Mysite\jpg文件中4個按鈕圖片文件al.jpg、

a2.jpg、a3.jpg、a4.jpgo

.在主框架(mainFrame)中，設(shè)置框架鏈接的頁面文件為Mysite\doc文件中

的oa.htm,【滾動】的方式為自動，【邊框?qū)挾取繛?20像素，【邊框高度】為30像素。

.在頂框架(topFrame)中，插入Mysite'swf文件中的Flash文件shu.swf.

.在左框架(leftFrame)和底部框架(bottomFrame)中輸入如圖14T3所示的

文字。

(4)在【屬性】面板中分別為4個單元格里的按鈕圖片建立鏈接，被鏈接的網(wǎng)頁文

件分別是Mysite\doc文件中的literature.htm、art.htm、edu.htm、sice,htm,被鏈接

的網(wǎng)頁在主框架中顯示。

(5)預(yù)覽網(wǎng)頁后，保存網(wǎng)頁文件。

9.時間軸動畫的制作

(1)創(chuàng)建網(wǎng)頁文件exel5-6.ht,在4個層中插入Mysite\img文件夾中的圖像文件

campl.jpg>camp2.jpg,camp3.jpg、camp4.jpg,并將這4個層疊放在一起，用時間軸控制層

的顯示順序，每過半秒鐘顯示一幅層中的圖像。一個循環(huán)依次顯示這4幅圖像，循環(huán)5次后

停止，保存文件后，預(yù)覽頁面觀察效果。

(2)創(chuàng)建網(wǎng)頁文件exel5-7.ht,設(shè)置背景圖像bg0052.gif。在網(wǎng)頁合適的位置上插入

一個層，層中插入Mysite'img文件夾中的圖像文件email.gif。創(chuàng)建時間軸動畫，動畫運動

軌跡為一條水平直線，并設(shè)置每秒播放20幀，自動循環(huán)播放，動畫條長度為50幀，保存文

件后，預(yù)覽頁面觀察效果。

(3)在上述時間軸動畫條的第10、20、30、40、50幀處插入關(guān)鍵幀，然后用鼠標(biāo)拖

拽該層，改變在關(guān)鍵幀處的動畫軌跡，使動畫軌跡由原來直線軌跡改為波浪線軌跡，預(yù)覽頁

面效果后用exel5-8,htm為名保存文件。

(4)在上述時間軸動畫條的第10到20幀和第30到40幀隱藏層。在第5層幀處插入

關(guān)鍵幀，并為該幀添加行為，在響應(yīng)事件onFrame5(即動畫運行到第5幀時)時觸發(fā)播放

聲音動作，播放wav聲音Appluase.wav,預(yù)覽頁面觀察效果后用exel5-9.htm為名保存文件。

(5)打開網(wǎng)頁文件exel5-8.htm,在網(wǎng)頁的合適位置上插入一個層，層中插入鼠標(biāo)經(jīng)過

圖像，原始圖像和翻轉(zhuǎn)圖像分別為Mysite\img文件夾中的Play.jpg和Stop.jpgo網(wǎng)頁具有

下列功能：

①當(dāng)用鼠標(biāo)雙擊Play按鈕時，此按鈕翻轉(zhuǎn)成Stop按鈕，此時時間軸動畫開始沿軌跡

■動JO

②當(dāng)用鼠標(biāo)雙擊Stop按鈕時，Stop按鈕翻轉(zhuǎn)成Play按鈕，時間軸動畫停止運動。

③預(yù)覽后用exel5-10.htm為名保存文件

(6)打開網(wǎng)頁文件exel5-10.htm,在網(wǎng)頁的右邊和合適位置上插入一個層，層中插入

圖像文件bird.gif。在網(wǎng)頁上再增加一條時間軸動畫條，控制新插入圖像的運動軌跡，如圖

15-12所示，預(yù)覽后，用exel5-ll.htm為名保存文件。

三、實驗學(xué)時：6學(xué)時

實驗三網(wǎng)頁編輯與超鏈接

一、實驗?zāi)康暮鸵螅?/p>

1.掌握網(wǎng)頁文檔常用的格式化方法

2.掌握在網(wǎng)頁中插入各種對象的方法

3.掌握超鏈接的創(chuàng)建方法

二、實驗內(nèi)容：

1.網(wǎng)頁文檔的基本操作

(1)將Mysite\doc文件中的兩個word文件(oa.doc和book.doc)轉(zhuǎn)換成WordHtml

文件，分別以文件名exel3-l.htm和exel3-2.htm為名，保存在Mysite中。

(2)在Dreamweaver中，導(dǎo)入Mysite\exel3-l.htm文件。并將Mysite\doc中

book.doc文件的第2、3段文字插入到當(dāng)前文檔的最后面，并使插入的文字與原文檔

之間有空行。

(3)給頁面文檔添加標(biāo)題“辦公自動化”，并將網(wǎng)頁標(biāo)題改為“辦公自動化一說”。

將網(wǎng)頁中第2段文字刪除，然后恢復(fù)。

(4)在網(wǎng)頁第2段文字前插入一段文字：“辦公自動化的目標(biāo)是提高辦公的效率和

辦公的質(zhì)量，由于如今技術(shù)和經(jīng)濟的發(fā)展，辦公自動化早已超越了狹窄的辦公室，人

們把包括了辦公與管理范疇的工作統(tǒng)稱為辦公自動化?！?/p>

(5)將第1自然段折成兩段，使“目前，以計算機為主要辦公工具，........促

進(jìn)現(xiàn)代辦公自動化(OfficeAutomation)活動的迅速發(fā)展?！钡奈淖殖蔀榈?自然段。

(6)給第2、3段加項目符號。并將文檔中的文字“辦公自動化”替代為“OA”。

(7)按功能鍵F12預(yù)覽網(wǎng)頁后，將文檔中的文字“0A”恢復(fù)成“辦公自動化”。

(8)預(yù)覽該網(wǎng)頁，以exel3-3.htm為名將其保存到Mysite中。

2.圖片的編輯操作

(1)創(chuàng)建一個如圖13-3所示的名為exel3-5.htm的網(wǎng)頁，設(shè)置其頁面背景為

bg0027.jpg,網(wǎng)頁標(biāo)題為“圖形編輯實驗”，將其保存到Mysite中。

⑥圖形編輯實驗-傲流[laxthon]

文件9編輯⑥查看9收藏?快健蛆⑥）選項。工具9窗口世）幫助理）①?B!圓▼口

軍一雅神的報

食

V

但完畢@0?。|?*?192.1680.2000年節(jié)151M1

圖13-3exel3-5.htm網(wǎng)頁

在頁面合適的位置插入一個兩行兩列的表格,表格中每個單元格為150*150像素。

在四個單元格中分別插入Mysite'jpg文件夾中圖片文件tl.jpg、t2.jpg,t3.jpg、t4.jpg。

給每張圖片設(shè)置2個像素的邊框，分別給其中2張圖片設(shè)置替代文字”書一精

神的糧食”、“書——力量的源泉”，設(shè)置的代替文字是指在瀏覽時，但鼠標(biāo)指向圖片

時顯示的文字。

插入頁面文字”書一精神的糧食”。

啟動外部圖片編輯器Fireworks,給4張圖片加上文字“書籍”、“知識”、“力量”、

“智慧”。

（2）創(chuàng)建一個名為exel3-6.htm的網(wǎng)頁，如圖13-4所示。設(shè)置頁面背景圖片尾

bg0026.jpg,并添加頁面文字“書——知識的源泉”。

鼠標(biāo)經(jīng)過圖像實驗-傲游[Maxthon]口同區(qū)

文件9編輯②查看W)收藏⑥快捷蛆⑹選項?)工具(X)窗口國)幫助國)：1國▼BJ0▼國

鼠標(biāo)經(jīng)過圖像...

布知例的源泉

圖13-4exel3-6.htm網(wǎng)頁

在頁面合適的位置插入1行4列的表格，每個單元格為79*79像素。在四個單元

格中制作【鼠標(biāo)經(jīng)過圖像】，初始圖片為tll.jpg、t22.jpg、t33.jpg、t44.jpg,翻轉(zhuǎn)圖

片分別為t5.jpg、t6.jpg>t7.jpg、t8.jpgo單擊翻轉(zhuǎn)圖片時鏈接的頁面文件分別是Mysite

\html'中的edu.htm>art.htm>literatuer.htm,scie.htm?

預(yù)覽后，保存該文件為Mysite\exel3-6.htm.

(3)創(chuàng)建名為exel3-7.htm的網(wǎng)頁文件，如圖13-5所示。用Mysite\photo文件夾

中的tl.jpg-t8.jpg圖片創(chuàng)建網(wǎng)上圖片相冊。

網(wǎng)頁和相冊標(biāo)題為“書一知識的源泉”，背景圖片為bg0026.jpg。初始圖片文件

夾為Mysite文件夾下photo子文件夾，目標(biāo)圖片文件夾為本地根文件夾Mysite。

頁面圖片的縮略圖尺寸為100*100像素；每行列數(shù)為4歹U,縮略圖片文件格式為.jpgo

3.創(chuàng)建超鏈接

(1)打開Mysite\exel3-l.htm網(wǎng)頁，在該網(wǎng)頁文檔的底部創(chuàng)建E-mail鏈接，電

子郵件的鏈接的文本為“請與我們聯(lián)系"；E-mail地址為練習(xí)者正式注冊的電子郵件

地址。預(yù)覽后，保存文件為Mysite\exel3-8.htm。

(2)打開Mysite\html\literature.htm網(wǎng)頁文件，在該網(wǎng)頁文件的首尾兩處“中國

文學(xué)”之中，分別插入名為W1和W2的錨點。用選中文檔第1行中的文字“古老民

族”，作錨點W2的源端點，建立內(nèi)部錨點鏈接，保存該文件為Mysite\exel3-9.htm；

打開Mysite\exel3-3.htm網(wǎng)頁文檔，用標(biāo)題“辦公自動化”作錨點W1的鏈接源端點，

建立外部錨點鏈接。預(yù)覽后，保存該文件為Mysite\exel3-10.htm。

(3)打開Mysite\exel3-l.htm網(wǎng)頁，在該網(wǎng)頁文檔合適的位置添加一個跳轉(zhuǎn)菜單，

跳轉(zhuǎn)菜單的第1項標(biāo)識文字為“友情鏈接”。跳轉(zhuǎn)菜單的選項和鏈接網(wǎng)頁URL,分為：

上海熱線：http:〃

搜狐http:〃

網(wǎng)易http:〃

中文雅虎http:〃

預(yù)覽后，保存該文件為Mysite\exel3-ll.htmo

(4)打開Mysite\exel3-l.htm網(wǎng)頁，在該網(wǎng)頁文檔合適的位置添加一個導(dǎo)航條，

導(dǎo)航條上四個按鈕分別是“現(xiàn)代文學(xué)”、“生活藝術(shù)”、“文化教育”、“科學(xué)技術(shù)”，四

個按鈕對應(yīng)的圖片文件分別是Mysite\button中的文件al.gif----a4.gif>

bl.gif----b4.gif>cl.gif----c4.gif>dl.gif-----d4.gif,四個按鈕所鏈接的網(wǎng)頁分別為Mysite\

html\literature.htm>art.htm、edu.htm>scie.htmo預(yù)覽后，保存該文件為Mysite\

exel3-12.htm.

(5)創(chuàng)建名為exel3-13.htm的網(wǎng)頁文件，在網(wǎng)頁中合適的位置上插入Mysite

\jpg\netl.jpg圖片文件。用多邊形、圓形和矩形創(chuàng)建影射圖鏈接，其中多邊形、圓形和

矩形影射圖鏈接分別自選Mysit\html中的網(wǎng)頁文件，預(yù)覽后保存該文件。

三、實驗學(xué)時：3學(xué)時

實驗四層疊樣式、模板和庫

一、實驗?zāi)康暮鸵螅?/p>

1.掌握附加和編輯外部樣式表的方法

2,掌握CSS樣式的各種特殊效果的方法

3.掌握創(chuàng)建和應(yīng)用CSS樣式及CSS樣式表的方法

4.掌握模板的創(chuàng)建、編輯和應(yīng)用的方法

5.掌握對象的創(chuàng)建、編輯和應(yīng)用的方法

二、實驗內(nèi)容：

1.CSS樣式表的創(chuàng)建、編輯和應(yīng)用

(1)在網(wǎng)頁編輯窗口中，打開本地站點Mysite\html文件夾中的art.htm文件。修改文檔

的標(biāo)題為“生活和藝術(shù)”，文檔每段文符改成首行縮進(jìn)兩個字樣。

(2)在本地根文件夾Mysite中，創(chuàng)建名為docformat.css的層疊樣式表文件，以及背景色

為#99FFCC的層疊樣式docformato

(3)創(chuàng)建名為.charl的層疊樣式，并將這個樣式定義在docformat.css的層疊樣式表文件

中。將其【類型】的參數(shù)設(shè)置：【字體】為方正舒體、【大小】為36像素、【樣式】

為斜體、【顏色】#方法FF0000。樣式作用于標(biāo)題文字“生活和藝術(shù)”。

(4)將名為.charl的樣式復(fù)制成名為.char2的層疊樣式，并將其【類型】的參數(shù)設(shè)置：

【字體】為楷體、【大小】為18像素、【樣式】為正常、【顏色】為#000000。

樣式作用第1段文字。

(5)新建名為,char3的層疊樣式，并將其【類型】的參數(shù)設(shè)置：【字體】為仿宋體、【大

小】為18像素、【樣式】為正常、【顏色】為井333333。樣式作用于第2段文字，

瀏覽網(wǎng)頁觀察效果。

(6)將名為.char3的樣式修改：【字體】為方正舒體、【大小】為16像素、【樣式】為

偏斜體、【顏色】為#000099。

(7)創(chuàng)建名為borderl的樣式，選擇【邊框】類型，并將其參數(shù)設(shè)置：【樣式】為雙線、

【寬度】的【上】、【右】、【下】、【左】的值為4個像素、【顏色】為#99CC33。

(8)在新建網(wǎng)頁exel6-l.htm上的創(chuàng)建8個1行1列的表格，表格的寬度和高度是100*

30像素。分別用borderl、border2.............border8為名新建層疊樣式，選擇【邊框】

類型，并分別定義他們的【樣式】為：【虛線】、【點劃線】、【實線】、【雙線】、【槽狀】、

【脊?fàn)睢?、【凹陷】、【凸出?種風(fēng)格，并設(shè)置合適的邊框高度和顏色，作用于8個

表格，預(yù)覽網(wǎng)頁觀察其效果。然后保存樣式表文件docformat.css和網(wǎng)頁文檔

exel6-l.htm。

(9)在網(wǎng)頁編輯器窗口中，打開literature.htm文件,并鏈接外部樣式表文件docformat.csso

(10)修改名為.charl的樣式，將【顏色】值#FF0000該為#0000CC,并作用約標(biāo)題文

字“中國文學(xué)二瀏覽網(wǎng)頁文檔art.htm和literature.htm,觀察標(biāo)題文字的顏色變化。

2.CSS樣式特殊效果的應(yīng)用

(1)創(chuàng)建名exel6-2.htm的網(wǎng)頁，在網(wǎng)頁合時的位置上插入380*285像素的層，并

將Mysite\img文件夾中的圖像文件campus3.jpg插入層中，用CSS的Alpha濾鏡制作如

圖16-5所示的效果。

圖16-5Alpha濾鏡效果

(2)創(chuàng)建名為exel6-3.htm的網(wǎng)頁，在網(wǎng)頁的合適位置上插入2行2列4個布局單元格，每

個單元格為120*100像素,并在每個單元格中插入Mysite\img文件夾中的圖像文件fOLjpg,

如圖16-6所示。然后用CSS的翻轉(zhuǎn)濾鏡制作出如圖16-7所示的效果。

苧CSS1H轉(zhuǎn)濾鏡實驗-Bic...均回區(qū)

圖16?64幅相同的圖像

圖16-7CSS翻轉(zhuǎn)濾鏡效果

(3)創(chuàng)建名為exel6-4.htm的網(wǎng)頁，在網(wǎng)頁合適位置上插入1行3列3個布局單元格，每個

單元格為120*220像素，并在每個單元格中插入Mysite\img文件夾中的圖像文件

campus4.jpgo然后用CSS的波浪濾鏡制作出如圖16-8所示的效果。

左邊圖參數(shù)為Wave(Add=LFreq=2,Lightsrenth=70,Phase=50,Strength=10);

右邊圖參數(shù)為Wave(Add=0,Freq=3,Lightsrenth=10,Phase=75,Strength=10);

中間圖為原始圖。預(yù)覽后，用exel6-4.htm為名將網(wǎng)頁保存在本地站點根文件夾中。

圖16?8CSS波浪濾鏡效果

(4)創(chuàng)建一個名為exel6-5.htm的網(wǎng)頁，然后用CSS樣式的翻轉(zhuǎn)濾鏡制作出如圖16-9所示

的效果。預(yù)覽網(wǎng)頁后，用exel6-5.htm為名將網(wǎng)頁保存在本地站點根文件夾中。

圖16?9CSS翻轉(zhuǎn)濾鏡效果

(5)利用顯示濾鏡(RevealTrans)設(shè)置進(jìn)入網(wǎng)頁art.htm的切換效果為隨機效果，其參

數(shù)為Revealtrans(Transition=23,duration=3.0),選擇標(biāo)題文字與地1行文字，建立與

literature.htm和exel6-6.htm的超鏈接。

設(shè)置離開網(wǎng)頁文件literture.htm的效果代號是8號的垂直百葉窗，其參數(shù)為

Revealtrans(Transition=8,duration=2.0),選擇標(biāo)題文字與第1行文字，建立與art.htm和

exel6-6.htm的超鏈接，用原文件名保存這兩個文件。

創(chuàng)建新的網(wǎng)頁文件exel6-6.htm,在其中分別輸入“藝術(shù)”和“中國文學(xué)”，并建立art.htm

與literature.htm文件的超鏈接，再將網(wǎng)頁保存在本地站點根文件夾中。

預(yù)覽網(wǎng)頁，觀察切換效果。

(6)利用模糊濾鏡(Blur)設(shè)置網(wǎng)頁edu.htm的標(biāo)題為立體效果，作用在標(biāo)題上的模糊濾

鏡效果參數(shù)為Blur(Add=True,Direction=135,Strength=20)□預(yù)覽網(wǎng)頁后，用exel6-7.htm

名將網(wǎng)頁保存在本地站點根文件夾中。

3.模板的應(yīng)用

(1)將Mysite文件中flower.htm文檔改變成模板，將其中7幅圖像所處的區(qū)域設(shè)置為可

編輯區(qū)，可編輯區(qū)的名字為imgl.img2...............img7,如圖16-10所示,模板文件名為

flower.htm,將模板文件保存在本地網(wǎng)站的Template文件中。

圖16-10模板創(chuàng)建示意

(2)利用模板文件flower.dwt,創(chuàng)建網(wǎng)頁文檔exel6-8.htm。其中可編輯區(qū)域插入的圖像

分別是Mysite\img文件夾中tul.img,tu2.img.........tu6.img>tu7.img,預(yù)覽網(wǎng)頁后，用

exel6-8.htm保存文件。

(3)將模板文件flower.dwt改名為grid.dwt,保存后更新站點中所有基于該模板的網(wǎng)頁

文件。

(4)修改模板文件grid.dwt,將其背景圖象改為bg0021.gif,保存修改后的模板文件。用

這個模板文件更新站點中所有基于該模板的網(wǎng)頁文檔，觀察網(wǎng)頁文件flower.htm和

exel6-8.htm背景圖像格變化情況。

(5)利用【資源】面板創(chuàng)建一個名為test.dwt的模板，模板的可編輯區(qū)有文字區(qū)和圖像

區(qū)，版面構(gòu)圖自定。在模板的底部插入一個