網(wǎng)絡(luò)廣告設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書(shū)(共34頁(yè)).doc

1、目錄實(shí)驗(yàn)大綱1實(shí)驗(yàn)一 簡(jiǎn)單網(wǎng)頁(yè)制作3實(shí)驗(yàn)二 在網(wǎng)頁(yè)中插入基本元素7實(shí)驗(yàn)三 表格的創(chuàng)建與編輯13實(shí)驗(yàn)四表格布局（一）18實(shí)驗(yàn)五表格布局（二）23實(shí)驗(yàn)六 框架與表單27實(shí)驗(yàn)七 CSS31實(shí)驗(yàn)八 網(wǎng)頁(yè)制作綜合練習(xí)36實(shí)驗(yàn)大綱課程名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作英文名稱：Design and Making of WebPages設(shè)置形式：非獨(dú)立設(shè)課課程模塊：專業(yè)方向課實(shí)驗(yàn)課性質(zhì)：專業(yè)實(shí)驗(yàn)課程編號(hào)：601822課程負(fù)責(zé)人：王麗萍大綱主撰人：王麗萍大綱審核人：李煥勤一、學(xué)時(shí)、學(xué)分課程總學(xué)時(shí)：48實(shí)驗(yàn)學(xué)時(shí)：16課程學(xué)分：2二、適用專業(yè)及年級(jí) 教育技術(shù)學(xué) 二年級(jí)三、課程目標(biāo)與基本要求課程的目標(biāo)：課程全面介紹網(wǎng)頁(yè)設(shè)計(jì)與制作

2、的相關(guān)知識(shí)，包括網(wǎng)頁(yè)制作工具Dreamweaver的使用方法、HTML語(yǔ)言、CSS技術(shù)及網(wǎng)站的發(fā)布與維護(hù)等，目標(biāo)是使學(xué)生具備網(wǎng)頁(yè)設(shè)計(jì)與制作的基本知識(shí)和基本技能，能夠獨(dú)立完成中、小型網(wǎng)站的設(shè)計(jì)與制作，為將來(lái)制作網(wǎng)絡(luò)教學(xué)軟件和教育專題網(wǎng)站打下基礎(chǔ)?；疽螅?掌握利用Dreamweaver創(chuàng)建網(wǎng)站、制作網(wǎng)頁(yè)、管理站點(diǎn)等。2熟練掌握文字的各種編排方法。3熟練掌握?qǐng)D形的獲取、各種修飾方法。4熟練掌握超鏈接技術(shù)。5熟練掌握音頻、視頻等多媒體信息的嵌入、鏈接方法;6熟練掌握表格的使用方法，會(huì)用表格設(shè)計(jì)網(wǎng)頁(yè)；7掌握框架制作網(wǎng)頁(yè)的方法，會(huì)使用框架設(shè)計(jì)網(wǎng)頁(yè)；8掌握制作表單的方法，會(huì)利用表單建立交互式頁(yè)面；9掌握

3、HTML的語(yǔ)法結(jié)構(gòu)及各種標(biāo)記的使用方法；10掌握在網(wǎng)頁(yè)中添加CSS的方法，會(huì)使用CSS設(shè)置網(wǎng)頁(yè)格式和網(wǎng)頁(yè)布局；11掌握站點(diǎn)管理及發(fā)布。四、主要儀器設(shè)備 多媒體計(jì)算機(jī)，安裝Dreamweaver、Fireworks、Flash、PhotoShop、CuteFTP等軟件。五、實(shí)驗(yàn)項(xiàng)目及教學(xué)安排序號(hào)實(shí)驗(yàn)項(xiàng)目名稱實(shí)驗(yàn)基本方法和內(nèi)容項(xiàng)目 學(xué)時(shí)項(xiàng)目類型每組人數(shù)教學(xué) 要求1簡(jiǎn)單網(wǎng)頁(yè)制作Dreamweaver軟件的操作界面的認(rèn)識(shí)；建立站點(diǎn)；制作簡(jiǎn)單網(wǎng)頁(yè)2基礎(chǔ)1必修2在網(wǎng)頁(yè)中插入基本元素文本的插入及屬性設(shè)置；圖像的插入及屬性設(shè)置；各種媒體的插入及相關(guān)參數(shù)的設(shè)置；建立超鏈接2基礎(chǔ)1必修3表格的創(chuàng)建與編輯創(chuàng)建表格；

4、設(shè)置表格的屬性；設(shè)置單元格的屬性；制作特殊表格2基礎(chǔ)1必修4表格布局（一）利用表格進(jìn)行網(wǎng)頁(yè)布局2基礎(chǔ)1必修5表格布局（二）利用表格進(jìn)行網(wǎng)頁(yè)布局2綜合1必修6框架與表單創(chuàng)建框架；設(shè)置框架集的屬性；設(shè)置框架的屬性；使用框架面板管理框架；利用框架進(jìn)行網(wǎng)頁(yè)布局；插入表單及表單對(duì)象；設(shè)置表單元素屬性2基礎(chǔ)1必修7CSS創(chuàng)建CSS樣式；使用CSS樣式控制網(wǎng)頁(yè)外觀；編輯CSS樣式2基礎(chǔ)1必修8網(wǎng)頁(yè)制作綜合練習(xí)定位網(wǎng)站的主題和名稱；確定網(wǎng)站的欄目；確定網(wǎng)站的目錄結(jié)構(gòu)；確定網(wǎng)站的鏈接結(jié)構(gòu)；設(shè)計(jì)網(wǎng)站的整體風(fēng)格；繪制網(wǎng)頁(yè)布局；收集制作素材；網(wǎng)站制作；網(wǎng)站上傳。2設(shè)計(jì)綜合1必修9自擬主題網(wǎng)站制作定位網(wǎng)站的主題和名稱；

5、確定網(wǎng)站的欄目；確定網(wǎng)站的目錄結(jié)構(gòu)；確定網(wǎng)站的鏈接結(jié)構(gòu)；設(shè)計(jì)網(wǎng)站的整體風(fēng)格；繪制網(wǎng)頁(yè)布局；網(wǎng)站制作8設(shè)計(jì)綜合1選修10動(dòng)態(tài)網(wǎng)站制作使用Javascript、Asp、數(shù)據(jù)庫(kù)等技術(shù)制作小型動(dòng)態(tài)網(wǎng)站10設(shè)計(jì)綜合1選修六、考核方式及成績(jī)?cè)u(píng)定考核方式：1、實(shí)驗(yàn)平時(shí)成績(jī)：（1）實(shí)驗(yàn)考勤：每次考勤分出勤（2分）；請(qǐng)假、遲到、早退（1分）；曠課（0分）記分。（2）預(yù)習(xí)報(bào)告：要求寫(xiě)明實(shí)驗(yàn)?zāi)康?、主要?shí)驗(yàn)設(shè)備名稱、實(shí)驗(yàn)原理和內(nèi)容。分優(yōu)秀（4分）、良好（3分）、中等（2分）、及格（1分）和不及格（0分）記分。（3）實(shí)驗(yàn)報(bào)告：要求寫(xiě)明實(shí)驗(yàn)設(shè)備名稱和型號(hào)、實(shí)驗(yàn)步驟、實(shí)驗(yàn)分析及注意事項(xiàng)。分優(yōu)秀（4分）、良好（3分）、中等（

6、2分）、及格（1分）和不及格（0分）記分。實(shí)驗(yàn)平時(shí)成績(jī)最后折算成100分。2、平時(shí)作業(yè)：根據(jù)作品評(píng)定成績(jī)，滿分為100分3、實(shí)驗(yàn)考試：上機(jī)考試，滿分為100分。成績(jī)?cè)u(píng)定：總實(shí)驗(yàn)成績(jī)占本課程成績(jī)的30%?？倢?shí)驗(yàn)成績(jī)=實(shí)驗(yàn)平時(shí)成績(jī)×20%+平時(shí)上機(jī)作業(yè)×30%+實(shí)驗(yàn)考試成績(jī)×50%。 七、實(shí)驗(yàn)教科書(shū)、參考書(shū)1實(shí)驗(yàn)教科書(shū)網(wǎng)頁(yè)設(shè)計(jì)與制作（講義），王麗萍，20052實(shí)驗(yàn)參考書(shū)Dreamweaver MX 2004 完美網(wǎng)頁(yè)設(shè)計(jì)與制作，姜楠，中國(guó)青年出版社，2004年 實(shí)驗(yàn)一 “滿立減”網(wǎng)絡(luò)廣告的制作一、實(shí)驗(yàn)?zāi)康?熟悉PHOTOSHOP軟件的操作。2掌握網(wǎng)絡(luò)廣告的構(gòu)成要素。4

7、按要求完成一則網(wǎng)絡(luò)廣告的設(shè)計(jì)。二、實(shí)驗(yàn)內(nèi)容設(shè)計(jì)一則圖片廣告，要求顯示店鋪的活動(dòng)：?jiǎn)喂P訂單滿 100 元 減 5 元 ，送5元店鋪優(yōu)惠券 。 單筆訂單滿 180 元 減 10 元 ，送10元店鋪優(yōu)惠券 。 單筆訂單滿 300 元 減 20 元 ，送10元店鋪優(yōu)惠券 。 單筆訂單滿 500 元 減 30 元 ，送20元店鋪優(yōu)惠券 。全場(chǎng)包郵支持淘金幣抵價(jià) 100金幣抵價(jià)1元，最高可抵貨價(jià)的5% 三、操作步驟1設(shè)置背景顏色2創(chuàng)建寬為950像素，高度在300-450像素之間3構(gòu)造廣告的頁(yè)面，要求有新奇的創(chuàng)意，并能體現(xiàn)出網(wǎng)絡(luò)廣告的主要內(nèi)容4提交設(shè)計(jì)的網(wǎng)絡(luò)廣告效果圖5撰寫(xiě)實(shí)驗(yàn)報(bào)告四、實(shí)驗(yàn)要求1給出你設(shè)計(jì)的

8、網(wǎng)絡(luò)廣告的主要構(gòu)成要素？2給出此次實(shí)驗(yàn)中你設(shè)計(jì)的網(wǎng)絡(luò)廣告的主要目標(biāo)？3闡述你設(shè)計(jì)的網(wǎng)絡(luò)廣告的創(chuàng)意。實(shí)驗(yàn)二 在網(wǎng)頁(yè)中插入基本元素一、實(shí)驗(yàn)?zāi)康?掌握文本的插入方法及屬性設(shè)置方法。2掌握?qǐng)D像的插入方法及屬性設(shè)置方法。3掌握各種媒體的插入方法及相關(guān)參數(shù)的設(shè)置。二、實(shí)驗(yàn)內(nèi)容1制作“何所思”網(wǎng)頁(yè)。2制作“動(dòng)畫(huà)廚房” 網(wǎng)頁(yè)。3制作“我愛(ài)北京”網(wǎng)絡(luò)站冊(cè)。4創(chuàng)建“多媒體”站點(diǎn)，并制作以下網(wǎng)頁(yè)：（1）插入flash動(dòng)畫(huà)的網(wǎng)頁(yè)（2）插入RealPlayer播放器的網(wǎng)頁(yè)（3）插入Media Player播放器的網(wǎng)頁(yè)（4）插入背景音樂(lè)的網(wǎng)頁(yè)三、操作步驟1制作“何所思”網(wǎng)頁(yè)。（1）在硬盤(pán)根目錄下新建文件夾，命名為thin

9、king。（2）打開(kāi)thinging文件夾，在其中建立子文件夾，命名為images。（3）將所有圖片素材復(fù)制到images文件夾中。（4）啟動(dòng)Dreamweaver，使用“站點(diǎn)管理站點(diǎn)新建站點(diǎn)”命令新建“何所思”站點(diǎn)。（5）新建網(wǎng)頁(yè)，保存為index.htm。（6）在網(wǎng)頁(yè)中插入文字，設(shè)置標(biāo)題文字，在文字中插入空格，分段，換行。（7）在網(wǎng)頁(yè)中插入圖片，設(shè)置圖片的對(duì)齊方式為“右對(duì)齊”。（8）保存網(wǎng)頁(yè)，預(yù)覽。2制作“動(dòng)畫(huà)廚房”網(wǎng)頁(yè)（1）在硬盤(pán)根目錄下新建文件夾，命名為donghua。（2）打開(kāi)donghua文件夾，將圖片donghua.jpg復(fù)制到該文件夾中。（3）啟動(dòng)Fireworks，打開(kāi)don

10、ghua.jpg圖片，使用切片工具進(jìn)行切片。（4）使用“文件導(dǎo)出”命令，導(dǎo)出切片和網(wǎng)頁(yè)，設(shè)置如圖所示。（5）啟動(dòng)Dreamweaver，打開(kāi)donghua.htm網(wǎng)頁(yè)，使用“修改頁(yè)面屬性”命令，設(shè)置網(wǎng)頁(yè)背景色為黑色，上邊距為0像素。3制作“我愛(ài)北京”網(wǎng)站相冊(cè)。（1）將所有圖片素材保存在photo文件夾中。（2）在硬盤(pán)根目錄下新建文件夾，命名為beijing。（3）啟動(dòng)Dreamweaver，使用“站點(diǎn)管理站點(diǎn)新建站點(diǎn)”命令新建“北京”站點(diǎn)，并指定beijing文件夾為“北京”站點(diǎn)的本地根文件夾。（4）新建網(wǎng)頁(yè)，使用“命令創(chuàng)建網(wǎng)站相冊(cè)”命令創(chuàng)建相冊(cè)，設(shè)置如圖所示。（5）單擊確定按鈕，相冊(cè)創(chuàng)建完成

11、。（6）按F12，預(yù)覽網(wǎng)頁(yè)。（7）打開(kāi)硬盤(pán)上的beijing文件夾，查看文件，其中imgaes文件夾保存的是原圖片，thumbnails文件夾保存的是縮略圖，pages文件夾保存的是相冊(cè)分頁(yè)，index.htm是網(wǎng)站相冊(cè)首頁(yè)。4創(chuàng)建“多媒體”站點(diǎn)，并制作網(wǎng)頁(yè)。（1）在硬盤(pán)根目錄下新建文件夾，命名為site。（2）打開(kāi)site文件夾，在其中建立子文件夾，命名為Media。（3）將所有多媒體素材復(fù)制到Media文件夾中。（4）啟動(dòng)Dreamweaver，使用“站點(diǎn)管理站點(diǎn)新建站點(diǎn)”命令新建“多媒體”站點(diǎn)，并指定site文件夾為“多媒體”站點(diǎn)的本地根文件夾。設(shè)置完畢后，文件面板如圖所示。（5）在網(wǎng)頁(yè)

12、中插入flash動(dòng)畫(huà)新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為001.htm。在網(wǎng)頁(yè)中插入flash動(dòng)畫(huà)yueding.swf，設(shè)置flash動(dòng)畫(huà)背景透明。（6）在網(wǎng)頁(yè)中插入RealPlayer播放器新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為002.htm。在網(wǎng)頁(yè)中插入ActiveX，在屬性面板上設(shè)置ClassID為CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA，寬320像素，高280像素，參數(shù)設(shè)置如圖所示。（7）在網(wǎng)頁(yè)中插入Media Player播放器1新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為003.htm。在網(wǎng)頁(yè)中插入ActiveX，在屬性面板上設(shè)置ClassID為CLSID:22D6F312-B0F6-11D0

13、-94AB-0080C74C7E95，寬320像素，高280像素，參數(shù)設(shè)置如圖所示。（8）在網(wǎng)頁(yè)中插入Media Player播放器2新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為004.htm。在網(wǎng)頁(yè)中插入ActiveX，在屬性面板上設(shè)置ClassID為CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6，寬320像素，高280像素，參數(shù)設(shè)置如圖所示。（9）在網(wǎng)頁(yè)中插入背景音樂(lè)新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為005.htm。在網(wǎng)頁(yè)中插入，在彈出的選擇文件對(duì)話框中選擇bgmusic.mid。插件的參數(shù)設(shè)置如圖所示。四、思考題1文本分行和分段落的區(qū)別。2在網(wǎng)頁(yè)中插入特殊符號(hào)的方法。3在網(wǎng)頁(yè)中插入列表、

14、日期、水平線的方法。4實(shí)現(xiàn)圖文混排的方法。5在網(wǎng)頁(yè)中插入視頻的方法。6在網(wǎng)頁(yè)中插入音頻的方法。實(shí)驗(yàn)三 表格的創(chuàng)建與編輯一、實(shí)驗(yàn)?zāi)康?掌握表格的插入方法。2掌握表格屬性、單元格屬性的設(shè)置方法。3深入理解表格背景顏色、填充、間距、邊框、單元格背景顏色等屬性對(duì)網(wǎng)頁(yè)外觀的影響。4掌握各種特殊表格的制作方法。二、實(shí)驗(yàn)內(nèi)容1插入、編輯表格。2在網(wǎng)頁(yè)中制作水平細(xì)線和垂直細(xì)線。3在網(wǎng)頁(yè)中制作細(xì)線表格。4在網(wǎng)頁(yè)中制作雙線邊框表格。5在網(wǎng)頁(yè)中制作圓角表格。三、操作步驟1建立站點(diǎn)（1）在硬盤(pán)根目錄下新建文件夾，命名為table。（2）在table文件夾中新建子文件夾，命名為images。將所有圖片素材保存在imag

15、es文件夾中。（3）啟動(dòng)Dreamweaver，使用“站點(diǎn)管理站點(diǎn)新建站點(diǎn)”命令新建“表格練習(xí)”站點(diǎn)，并指定table文件夾為“表格練習(xí)”站點(diǎn)的本地根文件夾。2插入、編輯表格（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為001.htm。（2）插入一個(gè)3行3列的表格，表格寬度為300像素，邊框粗細(xì)為1，單元格邊距為0，單元格間距為0。（3）選中表格，設(shè)置表格的填充為5，間距6，邊框?yàn)?。（4）選中表格，設(shè)置表格的背景圖像為girl.gif。（5）選中表格，用鼠標(biāo)拖動(dòng)表格右下角的尺寸手柄，將表格加大，觀察背景圖像在表格中的“平鋪”情況。（6）選中第一行所有單元格，將它們合并。（7）選中第二行第一個(gè)單元格，將它拆分成兩

16、列。（8）選中所有單元格，設(shè)置單元格的背景顏色為綠色。3在網(wǎng)頁(yè)中制作紅色水平細(xì)線（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為002.htm。（2）插入一個(gè)1行1列的表格，表格寬度為500像素，邊框粗細(xì)、單元格邊距、單元格間距均為“0”。（3）選中表格，設(shè)置表格的背景顏色為紅色。（4）設(shè)置表格的高度為“1”像素。（5）切換至“代碼”視圖，刪除單元格中的“ ”代碼。（6）保存網(wǎng)頁(yè)，按F12預(yù)覽。4在網(wǎng)頁(yè)中制作綠色垂直細(xì)線（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為003.htm。（2）插入一個(gè)1行1列的表格，表格寬度為1像素，邊框粗細(xì)、單元格邊距、單元格間距均為“0”。（3）選中表格，設(shè)置表格的背景顏色為綠色。（4

17、）設(shè)置表格的高度為“400”像素。（5）切換至“代碼”視圖，刪除單元格中的“ ”代碼。（6）保存網(wǎng)頁(yè)，按F12預(yù)覽。5在網(wǎng)頁(yè)中制作黑色細(xì)線表格（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為004.htm。（2）插入一個(gè)3行3列的表格，表格寬度為300像素，邊框粗細(xì)為0，單元格邊距為5，單元格間距為1。（3）選中表格，設(shè)置表格的背景顏色為黑色。（4）選中所有單元格，設(shè)置單元格的背景顏色為白色。（6）保存網(wǎng)頁(yè)，按F12預(yù)覽。6在網(wǎng)頁(yè)中制作雙細(xì)線表格（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為005.htm。（2）在網(wǎng)頁(yè)中制作細(xì)線表格，表格寬度300像素，如圖所示。（3）接下來(lái)繪制另一個(gè)表格，1行1列，寬度300像素，

18、單元格邊距為2、單元格間距為1。表格背景顏色為#003366，單元格背景顏色為白色。如圖所示。（4）將前面制作的表格復(fù)制到該表格中。如圖所示。（5）保存網(wǎng)頁(yè)，按F12預(yù)覽。7在網(wǎng)頁(yè)中制作圓角表格（1）新建網(wǎng)頁(yè)，保存網(wǎng)頁(yè)為006.htm。（2）在網(wǎng)頁(yè)中插入一個(gè)1行3列的表格，表格寬度為300像素，邊框粗細(xì)、單元格邊距、單元格間距均為“0”。設(shè)置第一個(gè)單元格寬度9像素，高度9像素，在其中插入圖片corner_tl.gif。設(shè)置第二個(gè)單元格高度為9像素，在其中插入圖片topline.gif，設(shè)置圖片寬度為282像素。設(shè)置第三個(gè)單元格寬度9像素，高度9像素，在其中插入圖片corner_tr.gif。如

19、圖所示。（3）將光標(biāo)停在第一個(gè)表格后，插入一個(gè)1行3列的表格，表格寬度為300像素，邊框粗細(xì)、單元格邊距、單元格間距均為“0”。設(shè)置表格高度為100像素。設(shè)置第一個(gè)單元格寬度1像素，背景顏色為#FF6600, 切換至“代碼”視圖，刪除其中的“ ”代碼。設(shè)置第二個(gè)單元格寬度為298像素。設(shè)置第三個(gè)單元格寬度1像素，背景顏色為#FF6600, 切換至“代碼”視圖，刪除其中的“ ”代碼。（4）將光標(biāo)停在第二個(gè)表格后，插入一個(gè)1行3列的表格，表格寬度為300像素，邊框粗細(xì)、單元格邊距、單元格間距均為“0”。設(shè)置第一個(gè)單元格寬度9像素，高度9像素，在其中插入圖片cor

20、ner_bl.gif。設(shè)置第二個(gè)單元格高度為9像素，在其中插入圖片bottomline.gif，設(shè)置圖片寬度為282像素。設(shè)置第三個(gè)單元格寬度9像素，高度9像素，在其中插入圖片corner_br.gif。（5）保存網(wǎng)頁(yè)，按F12預(yù)覽。四、思考題1圖像插入到單元格中與圖像作單元格背景有什么區(qū)別？2水平細(xì)線的制作方法。3細(xì)線表格的制作方法。實(shí)驗(yàn)四表格布局（一）一、實(shí)驗(yàn)?zāi)康?掌握利用表格進(jìn)行網(wǎng)頁(yè)布局的方法。2深入理解表格背景顏色、填充、間距、邊框、單元格背景顏色等屬性對(duì)網(wǎng)頁(yè)外觀的影響。二、實(shí)驗(yàn)內(nèi)容1制作“網(wǎng)達(dá)新聞”網(wǎng)頁(yè)。2制作“心靈之間信”網(wǎng)頁(yè)。三、操作步驟1制作“網(wǎng)達(dá)新聞”網(wǎng)頁(yè)。（1）在D盤(pán)上新建

21、文件夾，命名為“wangda”。將images文件夾拷貝到該文件夾下。啟動(dòng)Dreamweaver，定義該文件夾為站點(diǎn)。（2）設(shè)置頁(yè)屬性字號(hào)：9pt網(wǎng)頁(yè)背景圖片：bk.jpg左、上邊距：0、0網(wǎng)頁(yè)標(biāo)題：網(wǎng)達(dá)新聞（3）插入table1表格寬度778px1行2列表格背景圖片：image_04.jpg寬4px高48px插入圖片：image_02.jpg image_06.jpg（4）插入table2表格寬度778px1行1列插入flash（5）插入table3表格寬度778px1行1列插入圖片：seek_01.jpgseek_08.jpg（6）插入table4表格寬度778px1行5列表格背景顏色：白

22、色各列寬度：19913721205778中間列單元格的背景圖片：image_19.jpg（7）插入table5表格寬度778px1行1列表格背景圖片：image_31.jpg（8）插入table6表格寬度778px1行1列表格背景圖片：image_35.jpg（9）制作其它內(nèi)容（10）保存網(wǎng)頁(yè)，按F12預(yù)覽，如圖所示。2制作“心靈之間信”網(wǎng)頁(yè)。（1）在D盤(pán)上新建文件夾，命名為“xinling”。將images文件夾拷貝到該文件夾下。啟動(dòng)Dreamweaver，定義該文件夾為站點(diǎn)。（2）設(shè)置頁(yè)面屬性網(wǎng)頁(yè)標(biāo)題：心靈之間（3）制作網(wǎng)頁(yè)網(wǎng)頁(yè)布局：寬度700像素，在瀏覽器窗口中“居中”圖片一：image

23、s img_2.gif 寬度229像素 高度281像素 圖片二：imagestop_text.gif圖片三：imagesxin_xiao.gif圖片四：images img_bottom.gif 寬度224像素 高度62像素網(wǎng)頁(yè)導(dǎo)航：表格寬度125像素 單元格寬度25像素文字上制作空鏈接 （4）設(shè)置網(wǎng)頁(yè)CSS樣式字號(hào) 9pt行高 150%A:link COLOR: #5c6c81 TEXT-DECORATION: noneA:hover COLOR: #000000 TEXT-DECORATION: underlineA:active COLOR: #000000 TEXT-DECORATIO

24、N: underlineA:visited COLOR: #5c6c81 TEXT-DECORATION: none（5）保存網(wǎng)頁(yè)，按F12預(yù)覽，如圖所示。四、思考題1表格寬度的單位有哪些。2一般情況下，如何設(shè)置布局表格的邊框、單元格邊距和單元格間距。 3一般情況下，如何設(shè)置布局表格的高度。實(shí)驗(yàn)五表格布局（二）一、實(shí)驗(yàn)?zāi)康氖炀氄莆绽帽砀襁M(jìn)行網(wǎng)頁(yè)布局的方法。二、實(shí)驗(yàn)內(nèi)容制作“我的設(shè)計(jì)”網(wǎng)站中的“三維作品”欄目。三、操作步驟1建立站點(diǎn)在D盤(pán)根目錄下新建文件夾，命名為design。將兩個(gè)素材文件夾3dimg和images復(fù)制到design文件夾中。啟動(dòng)Dreamweaver，將design文件夾定

25、義為“我的設(shè)計(jì)”站點(diǎn)。2制作“三維作品”頁(yè)面（1）新建網(wǎng)頁(yè)，保存為3d_001.htm。（2）設(shè)置頁(yè)面屬性，如圖所示。（3）插入黑色細(xì)線表格。表格大小設(shè)置如圖所示。在屬性面板上設(shè)置表格背景色為黑色，單元格背景色為#CCCCB8，如圖所示。（4）將光標(biāo)置于細(xì)線表格中，繼續(xù)插入表格。表格1行3列，寬度900像素，邊框、邊距、間距均為0，高度120像素，背景顏色#9E9E7E。各列寬度為30像素，350像素，520像素。插入圖像后，如圖所示。（5）將光標(biāo)置于上一表格后，繼續(xù)插入表格。表格1行1列，寬度900像素，邊框、邊距、間距均為0，高度20像素，背景圖像為index_004.gif。（6）將光標(biāo)

26、置于于上一表格后，繼續(xù)插入表格。表格1行3列，寬度900像素，邊框、邊距、間距均為0。各列寬度為200像素，50像素，650像素。在左列單元格中插入表格及網(wǎng)頁(yè)內(nèi)容，如圖所示。（7）在右列單元格中插入表格及導(dǎo)航圖片，如圖所示。（8）繼續(xù)插入表格。表格2行1列，寬度600像素，邊框、邊距、間距均為0。第一行單元格高度為10像素。在第二行單元格中插入表格，表格1行3列，寬度600像素，邊框、邊距為0，間距為10，背景顏色為#B7B7A5。各列寬度為100像素，100像素，360像素，如圖所示。（9）選中上面表格并復(fù)制，然后粘帖五次，如圖所示。（10）在表格中插入圖片及內(nèi)容，如圖所示。3制作3d作品的

27、其它頁(yè)面四、思考題1多層表格嵌套時(shí)，選擇表格的技巧。2單元格間距和單元格邊距對(duì)表格布局的影響。3單元格對(duì)齊屬性對(duì)表格布局的影響。實(shí)驗(yàn)六 框架與表單一、實(shí)驗(yàn)?zāi)康?掌握框架的創(chuàng)建方法。2掌握框架集和框架的屬性設(shè)置方法。3掌握框架布局的方法。4掌握插入表單對(duì)象的方法。5掌握表單對(duì)象的屬性設(shè)置方法二、實(shí)驗(yàn)內(nèi)容1制作“跳舞的樹(shù)”網(wǎng)頁(yè)。2制作“用戶注冊(cè)”網(wǎng)頁(yè)。三、操作步驟（一）制作“跳舞的樹(shù)”網(wǎng)頁(yè)。1創(chuàng)建框架網(wǎng)頁(yè)（1）定義站點(diǎn)，新建網(wǎng)頁(yè)。（2）勾選“查看/可視化助理/框架邊框”選項(xiàng)，顯示“框架邊框”。（3）用鼠標(biāo)拖動(dòng)“設(shè)計(jì)”視圖四周顯示的框架邊框線，創(chuàng)建框架。2設(shè)置框架集和框架屬性（1）打開(kāi)“框架面板”。

28、（2）選擇框架集，設(shè)置框架集屬性。（3）選擇左框架，設(shè)置框架屬性。（3）選擇中間框架，設(shè)置框架屬性。（3）選擇右框架，設(shè)置框架屬性。3保存框架集和框架選擇主菜單“文件保存全部”命令。4在框架中創(chuàng)建超鏈接選中“首頁(yè)”，創(chuàng)建到middle.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。選中“首頁(yè)”，創(chuàng)建到middle.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。選中“有樹(shù)如我”，創(chuàng)建到liketree.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。選中“流年”，創(chuàng)建到liketree.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。選中“伙伴

29、”，創(chuàng)建到company.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。選中“翻箱倒框”，創(chuàng)建到favo.htm文件的超鏈接，并為鏈接指定目標(biāo)框架窗口為middle。5保存網(wǎng)頁(yè)，預(yù)覽。（二）制作“用戶注冊(cè)”網(wǎng)頁(yè)。1插入表單。2插入表單對(duì)象。3設(shè)置表單對(duì)象屬性。四、思考題1框架結(jié)構(gòu)的組成。 2框架結(jié)構(gòu)的網(wǎng)頁(yè)，網(wǎng)頁(yè)標(biāo)題如何設(shè)置設(shè)置。3單選按鈕和復(fù)選框?qū)ο蟮膶傩栽O(shè)置有何不同。實(shí)驗(yàn)七 CSS網(wǎng)頁(yè)布局一、實(shí)驗(yàn)?zāi)康?掌握在網(wǎng)頁(yè)中應(yīng)用CSS的方法。2掌握CSS基本語(yǔ)法。3熟悉CSS屬性。4掌握使用CSS布局網(wǎng)頁(yè)的方法。二、實(shí)驗(yàn)內(nèi)容1為“網(wǎng)達(dá)公司”網(wǎng)頁(yè)添加CSS樣式。2為“心靈之間”網(wǎng)頁(yè)添加CSS樣式。3使用CSS實(shí)現(xiàn)“webquest”網(wǎng)頁(yè)布局。4使用CSS實(shí)現(xiàn)“固定寬度兩欄”網(wǎng)頁(yè)布局。5使用CSS實(shí)現(xiàn)“滿屏三欄”網(wǎng)頁(yè)布局。三、操作步驟1為“網(wǎng)達(dá)公司”網(wǎng)頁(yè)添加CSS樣式。（1）新建樣式，重新定義body標(biāo)簽，將樣式保存在外部文件style.css中。body標(biāo)簽的樣式定義為：文字9pt，行高150%。（2）新建樣式，重新定義td標(biāo)簽。td標(biāo)簽的樣式定義為：文字9pt，行高150%。（3）新建樣式，重新定義超鏈接樣式。（4）新建樣式，自定義一個(gè)類，用于設(shè)置文字為白色。2為“心靈之間”網(wǎng)頁(yè)添加CSS樣式。復(fù)制style.css文件至“心靈之間”文件夾。打開(kāi)index.htm，并