《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告冊(cè)

1、信陽師范學(xué)院教育科學(xué)學(xué)院網(wǎng)頁設(shè)計(jì)與制作實(shí) 驗(yàn) 教 學(xué) 指 導(dǎo)盧 強(qiáng)信陽師范學(xué)院教育科學(xué)學(xué)院網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)教學(xué)大綱（2009年）課程代碼：課程性質(zhì)：專業(yè)課 課程分類：專業(yè)課程實(shí)驗(yàn)學(xué)分： 學(xué)分 實(shí)驗(yàn)學(xué)時(shí)：18學(xué)時(shí)適用專業(yè)：教育技術(shù)學(xué)專業(yè) 開課單位：教育科學(xué)學(xué)院一、實(shí)驗(yàn)教學(xué)目標(biāo) 通過本課程的實(shí)驗(yàn)學(xué)習(xí)，學(xué)生能掌握網(wǎng)頁設(shè)計(jì)與制作技術(shù)、網(wǎng)站的創(chuàng)建技術(shù)，培養(yǎng)網(wǎng)站管理維護(hù)的能力。本課程學(xué)習(xí)結(jié)束后，學(xué)生應(yīng)能自行設(shè)計(jì)網(wǎng)站的功能結(jié)構(gòu)、具體網(wǎng)頁的平面排版等技巧，較熟練地掌握網(wǎng)頁設(shè)計(jì)的基本制作方法和技巧，并最終設(shè)計(jì)、制作一個(gè)綜合性的網(wǎng)站并上傳到互聯(lián)網(wǎng)上。二、主要儀器設(shè)備名稱多媒體計(jì)算機(jī)、Web服務(wù)器三、實(shí)驗(yàn)基本要求

2、1在實(shí)驗(yàn)操作進(jìn)行前，應(yīng)掌握網(wǎng)頁設(shè)計(jì)的實(shí)驗(yàn)環(huán)境，具有一定的網(wǎng)絡(luò)知識(shí)；2掌握網(wǎng)頁的設(shè)計(jì)與制作技術(shù)、網(wǎng)站的創(chuàng)建技術(shù)以及網(wǎng)站的管理維護(hù)；3掌握Dreamweaver等常用軟件的使用；4每次實(shí)驗(yàn)操作前，應(yīng)精心準(zhǔn)備實(shí)驗(yàn)操作方案和實(shí)驗(yàn)內(nèi)容，并擬出相應(yīng)的實(shí)驗(yàn)操作步驟，明確實(shí)驗(yàn)?zāi)康暮鸵螅?在實(shí)驗(yàn)過程中，服從實(shí)驗(yàn)指導(dǎo)教師安排，遵守實(shí)驗(yàn)室的各項(xiàng)規(guī)章制度，愛護(hù)實(shí)驗(yàn)儀器設(shè)備；6實(shí)驗(yàn)操作完成后，認(rèn)真書寫實(shí)驗(yàn)報(bào)告，總結(jié)實(shí)驗(yàn)經(jīng)驗(yàn)，分析實(shí)驗(yàn)過程中出現(xiàn)的問題。四、實(shí)驗(yàn)內(nèi)容設(shè)置序號(hào)實(shí)驗(yàn)名稱內(nèi)容提要實(shí)驗(yàn)學(xué)時(shí)每組人數(shù)實(shí)驗(yàn)類型開出要求1HTML語言實(shí)驗(yàn)掌握HTML語法規(guī)范，常用標(biāo)記的語法，各種標(biāo)記的使用。21驗(yàn)證必做2CSS樣式表實(shí)驗(yàn)

3、掌握CSS樣式表的語法規(guī)范，常用的css樣式參數(shù)及其值的設(shè)置的使用。21驗(yàn)證必做3熟悉Dreamweaver的界面與站點(diǎn)管理熟悉Dreamweaver 8 操作界面及其面板、文檔的基本操作，同時(shí)掌握本地站點(diǎn)的搭建與管理。11驗(yàn)證必做4網(wǎng)站制作的初步切圖依照切圖的網(wǎng)格化、表格化、細(xì)化局部的具體步驟對(duì)具體網(wǎng)站的效果圖進(jìn)行切圖制作，從而熟練掌握切圖技巧。21驗(yàn)證必做5網(wǎng)頁文本、圖像的添加與處理掌握Dreamweaver 8中網(wǎng)頁文本的輸入與設(shè)置技巧，同時(shí)掌握?qǐng)D像的插入與設(shè)置技巧。最終，能對(duì)網(wǎng)頁中的文字與圖像進(jìn)行熟練的編輯。11驗(yàn)證必做6表格與超鏈接的使用掌握Dreamweaver 8中表格與超鏈接的

4、應(yīng)用。11驗(yàn)證必做7層、框架與CSS樣式的應(yīng)用掌握層與框架的概念，并回顧C(jī)SS樣式表的內(nèi)容，并熟練掌握利用層添加圖像變換效果、下拉菜單的效果；同時(shí)掌握利用Dreamweaver 為網(wǎng)頁添加CSS樣式的方法。 21驗(yàn)證必做8網(wǎng)站制作中表單、行為、模板與庫的應(yīng)用掌握表單、文本域、文本區(qū)域、單選框、復(fù)選框、單選按鈕、列表等表單的添加方法，及其用途；熟悉行為、模板、庫的概念，并掌握其應(yīng)用的時(shí)機(jī)與方法。21驗(yàn)證必做9小組興趣網(wǎng)站的設(shè)計(jì)與制作綜合訓(xùn)練學(xué)生的網(wǎng)站制作能力；培養(yǎng)學(xué)生的團(tuán)隊(duì)合作能力及解決實(shí)際問題的能力。44-5綜合必做10測(cè)試、上傳和維護(hù)網(wǎng)站實(shí)驗(yàn)在單機(jī)上測(cè)試好網(wǎng)站，并將網(wǎng)站通過Internet上

5、傳，按需要定期更新。11驗(yàn)證必做五、實(shí)驗(yàn)考核及作品要求根據(jù)實(shí)驗(yàn)設(shè)計(jì)作業(yè)、實(shí)驗(yàn)報(bào)告和實(shí)驗(yàn)考試等方面，給出該課程的實(shí)驗(yàn)成績，計(jì)入該課程的總成績中。實(shí)驗(yàn)成績占總成績的30%。實(shí)驗(yàn)要求及文件提交要求：檔案袋名（學(xué)號(hào)+姓名） 平時(shí)實(shí)驗(yàn)作品實(shí)驗(yàn)1作品實(shí)驗(yàn)2作品綜合網(wǎng)站設(shè)計(jì)與制作網(wǎng)站 網(wǎng)站設(shè)計(jì)圖注：檔案袋內(nèi)容決定個(gè)人平時(shí)成績與實(shí)驗(yàn)成績！檔案袋評(píng)定標(biāo)準(zhǔn)：1、以上所列檔案袋文件中要求的內(nèi)容必須齊全（10%）。2、作品設(shè)計(jì)合理、美觀（30%）。3、網(wǎng)站文件存放（20%）。4、網(wǎng)站內(nèi)容制作與測(cè)試（40%）。（1）網(wǎng)頁結(jié)構(gòu)布局（2）導(dǎo)航超鏈接（3）內(nèi)容、圖形圖片編輯等六、教材及主要教學(xué)參考書教學(xué)參考書：1. Drea

6、mweaver360全景學(xué)習(xí)手冊(cè) 人民郵電出版社2007.112.楊選輝，網(wǎng)頁設(shè)計(jì)與制作教程，清華大學(xué)出版社，2005.53.古燕瑩，網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)教程，機(jī)械工業(yè)出版社，2007.7七、實(shí)驗(yàn)內(nèi)容與計(jì)劃 TOC o 1-3 h z u HYPERLINK l _Toc245654270 HYPERLINK l _Toc245654279 實(shí)驗(yàn)一：HTML語言實(shí)驗(yàn) PAGEREF _Toc245654279 h - 1 - HYPERLINK l _Toc245654280 實(shí)驗(yàn)二：CSS樣式表實(shí)驗(yàn) PAGEREF _Toc245654280 h - 4 - HYPERLINK l _Toc2

7、45654281 實(shí)驗(yàn)三：熟悉Dreamweaver軟件的界面與站點(diǎn)管理 PAGEREF _Toc245654281 h - 5 - HYPERLINK l _Toc245654282 實(shí)驗(yàn)四：網(wǎng)站制作的初步切圖 PAGEREF _Toc245654282 h - 9 - HYPERLINK l _Toc245654283 實(shí)驗(yàn)五：網(wǎng)頁文本、圖像的添加與處理 PAGEREF _Toc245654283 h - 11 - HYPERLINK l _Toc245654284 實(shí)驗(yàn)六：表格與超鏈接的使用 PAGEREF _Toc245654284 h - 12 - HYPERLINK l _Toc2

8、45654285 實(shí)驗(yàn)七：層、框架與CSS樣式的應(yīng)用 PAGEREF _Toc245654285 h - 12 - HYPERLINK l _Toc245654286 實(shí)驗(yàn)八：網(wǎng)站制作中表單、行為、模板與庫的應(yīng)用 PAGEREF _Toc245654286 h - 17 - HYPERLINK l _Toc245654287 實(shí)驗(yàn)九：小組興趣網(wǎng)站的設(shè)計(jì)與制作 PAGEREF _Toc245654287 h - 20 - HYPERLINK l _Toc245654288 實(shí)驗(yàn)十：測(cè)試、上傳和維護(hù)網(wǎng)站 PAGEREF _Toc245654288 h - 21 -實(shí)驗(yàn)一：HTML語言實(shí)驗(yàn)1. 實(shí)驗(yàn)

9、目的：（1）了解并熟悉HTML語法規(guī)范，常用標(biāo)記的語法，各種標(biāo)記的使用；（2）掌握html語言中常用標(biāo)記的用法。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)3. 實(shí)驗(yàn)內(nèi)容：（1）用記事本和HTML標(biāo)記語言編寫一個(gè)簡單的網(wǎng)頁，標(biāo)題為“我的第一個(gè)HTML網(wǎng)頁”，且背景色為“#33FFFF”、上下左右的邊間距為0、文本的顏色為紅色、內(nèi)容具體如下：（2）用記事本和HTML語言編寫一個(gè)具有如下形式的表格：（3）用記事本和HTML語言編寫一個(gè)具有如下文本形式的網(wǎng)頁：（4）用記事本和HTML語言編寫一個(gè)具有如下文本形式的網(wǎng)頁，注意各種字符樣式標(biāo)記符：（5）用記事本和HTML語言編寫一個(gè)具有:為曹操添加超鏈接 HYPERLI

10、NK :/wiki/%E6%9B%B9%E6%93%8D :/wiki/%E6%9B%B9%E6%93%8D并添加曹操的圖像， HYPERLINK mailto:同時(shí)為圖像添加指向lugezhuang_09126 同時(shí)為圖像添加指向lugezhuang_09126 的電子郵箱鏈接；并給圖片加寬度為3的紅色邊框；具體效果如下：（圖片文件在實(shí)驗(yàn)一文件夾下）（6）用記事本和HTML語言編寫一個(gè)具有caocao.html效果的靜態(tài)網(wǎng)頁：實(shí)現(xiàn)滾動(dòng)字幕的應(yīng)用。（7）制作一下的框架頁，在其中直接加一些文字內(nèi)容：4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)二：CSS樣式表實(shí)驗(yàn)1. 實(shí)驗(yàn)?zāi)康模海?）了解并熟悉CSS樣式表的語法規(guī)范；（

11、2）掌握常用的css樣式參數(shù)及其值的設(shè)置的使用。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)3. 實(shí)驗(yàn)內(nèi)容：（1）到QQ群中間下載“.css”文件；（2）用記事本打開該.css文件，并在其中以css注釋的方式，對(duì)該文件進(jìn)行注釋。（要求較為詳盡的注釋各個(gè)CSS定義的功能、作用）4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)三：熟悉Dreamweaver軟件的界面與站點(diǎn)管理1. 實(shí)驗(yàn)?zāi)康模菏煜reamweaver 8 操作界面及其面板、文檔的基本操作，同時(shí)掌握本地站點(diǎn)的搭建與管理。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：1）打開Dreamweaver 8軟件,進(jìn)入其工作界面,熟悉相關(guān)菜單、工具欄；主

12、要熟悉文件、編輯、查看、插入、修改、文本、命令、站點(diǎn)、窗口和幫助10個(gè)菜單命令。圖4-1：Dreamweaver 8 界面熟悉以下各種插入面板中的按鈕（如下）圖4-2：常用面板圖4-3：布局面板圖4-4：表單面板圖4-5：文本面板圖4-6：屬性面板浮動(dòng)面板組css、應(yīng)用程序、標(biāo)簽檢查器和文件四個(gè)浮動(dòng)面板（如下）圖4-7：浮動(dòng)面板2）使用向?qū)?chuàng)建站點(diǎn)第一步：為站點(diǎn)起名稱，如下圖所示第二步：站點(diǎn)存放的位置第三步：是否使用遠(yuǎn)程服務(wù)技術(shù)最后一步：該網(wǎng)站的站點(diǎn)信息總結(jié)3）復(fù)制、刪除站點(diǎn)站點(diǎn)菜單站點(diǎn)管理 進(jìn)入站點(diǎn)管理對(duì)話窗：點(diǎn)擊復(fù)制按鈕就可以把first_in復(fù)制了；點(diǎn)擊刪除按鈕也可以把選中的站點(diǎn)刪除；同

13、樣可以編輯按鈕可以編輯已經(jīng)建立的站點(diǎn)的信息。4）站點(diǎn)的導(dǎo)入/出站點(diǎn)管理對(duì)話窗中有導(dǎo)入和導(dǎo)出按鈕，可以對(duì)網(wǎng)站進(jìn)行導(dǎo)入和導(dǎo)出，從而以有效的對(duì)網(wǎng)站進(jìn)行轉(zhuǎn)移。4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)四：網(wǎng)站制作的初步切圖1. 實(shí)驗(yàn)?zāi)康模毫私馇袌D技巧在網(wǎng)站制作中的作用；熟練掌握切圖的具體技巧，并能將其運(yùn)用到具體的網(wǎng)站制作中；2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：在本次實(shí)驗(yàn)文件夾下，任選一圖，按照以下方式對(duì)其進(jìn)行網(wǎng)格化。（1）對(duì)網(wǎng)站的效果圖進(jìn)行網(wǎng)格化上圖是為一個(gè)商業(yè)網(wǎng)站做一個(gè)效果圖，如進(jìn)行制作，必須先對(duì)圖進(jìn)行網(wǎng)格化分析，分析結(jié)果如下圖所示：（2）按照網(wǎng)格表格化我們可以清楚看出一共是5個(gè)

14、部分。頂部，導(dǎo)航菜單，押題圖片，正文和版權(quán)。這幾部分都是并列的，所以我們每個(gè)部分作為一個(gè)表格獨(dú)立出現(xiàn)。切記標(biāo)價(jià)好注釋。 （當(dāng)然也可以使用一個(gè)5行1列的表格對(duì)其進(jìn)行表格化）（3）細(xì)化局部現(xiàn)在就圍繞第3部分圖文進(jìn)行細(xì)化。無疑這是3組1行兩列的表格。 這樣我們就輕松把這個(gè)網(wǎng)站的效果圖切完了，用了最少的表格，并且思路較為清晰。請(qǐng)按照以上的步驟，對(duì)你選擇的效果圖進(jìn)行切圖。4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)五：網(wǎng)頁文本、圖像的添加與處理1. 實(shí)驗(yàn)?zāi)康模赫莆誅reamweaver 8中網(wǎng)頁文本的輸入與設(shè)置技巧，同時(shí)掌握?qǐng)D像的插入與設(shè)置技巧。最終，能對(duì)網(wǎng)頁中的文字與圖像進(jìn)行熟練的編輯。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有D

15、reamweaver 83. 實(shí)驗(yàn)內(nèi)容： A、為你設(shè)計(jì)的網(wǎng)站，添加相關(guān)的文本內(nèi)容和必要修飾，主要包括以下幾個(gè)方面：1）在網(wǎng)頁中添加文字內(nèi)容:2）選中文字,在屬性面板中對(duì)其屬性為其設(shè)置字體、字色、字體大小等字體樣式3）選中要設(shè)置為段落標(biāo)題的文字，在格式下拉菜單中選擇需要的選項(xiàng)。4）在適當(dāng)?shù)奈恢锰砑铀骄€、日期等 B、為你的總體網(wǎng)站添加相應(yīng)的圖片信息，主要要求：1）在網(wǎng)頁需要的地方插入合適的圖片，并對(duì)其與文字的對(duì)齊、寬高等屬性進(jìn)行設(shè)置。2）為圖像加上一些熱點(diǎn)鏈接3）做一個(gè)鼠標(biāo)經(jīng)過效果4）為你的網(wǎng)站的小板塊添加導(dǎo)航條4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)六：表格與超鏈接的使用1. 實(shí)驗(yàn)?zāi)康模赫莆誅reamweaver

16、 8中表格與超鏈接的應(yīng)用。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：1) 在小組網(wǎng)站上，插入表格，并對(duì)表格的屬性進(jìn)行相關(guān)設(shè)置。2）做一個(gè)細(xì)邊框的表格，輸入小組成員的姓名、出生日期、性別等3）使用：命令格式化表格，使你的表格更專業(yè)化。4）熟悉超鏈接的分類：內(nèi)部超鏈接、外部超鏈接、電子郵件超鏈接、局部超鏈接的應(yīng)用。5）掌握并應(yīng)用六種超鏈接插入方法，添加網(wǎng)站內(nèi)容的超鏈接。6）在小組網(wǎng)站中，插入電子郵件超鏈接。7）熟悉并掌握超鏈接管理的方法。4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)七：層、框架與CSS樣式的應(yīng)用1. 實(shí)驗(yàn)?zāi)康模赫莆諏优c框架的概念，并回顧C(jī)SS樣式表的內(nèi)容，并熟練掌握利用

17、層添加圖像變換效果、下拉菜單等效果；同時(shí)掌握利用Dreamweaver 為網(wǎng)頁添加CSS樣式的方法。 2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：（一）利用層做圖像疊層效果（1）在“插入”面板下的“布局”面板中，選擇“繪制層”按鈕，在繪制區(qū)域繪制一個(gè)層。圖7-1：“繪制層”按鈕圖7-2：層繪制的效果（2）在剛剛繪制的層中插入所要顯示的圖片，并按照?qǐng)D片的大小調(diào)整層的大小。具體效果如圖3所示：圖7-3：層中插入圖片效果圖（3）按照（1）（2）步驟再為它添加層2、層3，并在這兩個(gè)層中添加圖像。（4）為各個(gè)層添加控制行為A、選擇“l(fā)ayer1”這個(gè)層。圖7-4：為層添

18、加行為B、并在標(biāo)簽面板中的行為中添加“顯示-隱藏層”的行為。并將行為的觸發(fā)設(shè)置為onClick。C、并為layer2、layer3這兩個(gè)層設(shè)置相應(yīng)的行為和觸發(fā)事件。這樣設(shè)置之后，即可按F12進(jìn)行預(yù)覽效果了。（二）使用框架創(chuàng)建左面有導(dǎo)航欄的網(wǎng)頁（1）創(chuàng)建一個(gè)網(wǎng)頁，并為之添加如圖所示的框架，并使用屬性面板為框架的的邊框顏色、框架的大小等進(jìn)行設(shè)置。A、新建一個(gè)普通網(wǎng)頁B、使用“插入”面板中的“布局”面板中的“框架”按鈕繪制一個(gè)上下結(jié)構(gòu)的框架，并在其下面的框架中繪制一個(gè)左右結(jié)構(gòu)的框架。圖7-5：框架繪制按鈕圖7-6：網(wǎng)頁框架效果圖（2）為框架的網(wǎng)頁添加網(wǎng)頁內(nèi)容。（三）樣式的設(shè)置及應(yīng)用。A、選擇“文本”

19、菜單下的“樣式”，進(jìn)而選擇“附加樣式表”命令，附加外部的樣式表。圖7-：附加樣式表、在附加一個(gè)樣式表之后，可以為之新建相關(guān)的樣式。即選擇“文本”菜單下的“樣式”進(jìn)而選擇“新建”按鈕。進(jìn)入“新建CSS規(guī)則”對(duì)話框。圖7-8：新建CSS規(guī)則并在該對(duì)話框中，對(duì)你想新建的類進(jìn)行命名。進(jìn)而進(jìn)入“類的CSS規(guī)則定義”對(duì)話框。其中，在其內(nèi)可以定義類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展等CSS樣式所要定義的。其中：類型中設(shè)置字體、字體大小、字體顏色、行高等內(nèi)容；背景中設(shè)置背景色、背景圖片、背景顯示方式等；區(qū)塊中設(shè)置文字之間的間距和對(duì)齊方式等；方框中設(shè)置方框的尺寸、方框與內(nèi)容內(nèi)容的距離、方框與外部內(nèi)容之

20、間的距離等內(nèi)容；邊框中設(shè)置邊框線的樣式、粗細(xì)與顏色等內(nèi)容；列表中設(shè)置列表的類型、外觀等內(nèi)容；定位中設(shè)置層的位置及顯示狀態(tài)；擴(kuò)展中設(shè)置圖像、文字的濾鏡效果以及指針的樣式效果等內(nèi)容。圖7-9：.uu的CSS規(guī)則定義定義之后，即可使用相關(guān)的CSS規(guī)則了。（四）根據(jù)小組網(wǎng)站設(shè)計(jì)準(zhǔn)備情況，為小組網(wǎng)站添加需要使用框架的頁面的框架，并自行設(shè)計(jì)相對(duì)應(yīng)的CSS樣式表，使其有效的美化小組網(wǎng)站。4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)八：網(wǎng)站制作中表單、行為、模板與庫的應(yīng)用1. 實(shí)驗(yàn)?zāi)康模赫莆毡韱巍⑽谋居?、文本區(qū)域、單選框、復(fù)選框、單選按鈕、列表等表單的添加方法，及其用途；熟悉行為、模板、庫的概念，并掌握其應(yīng)用的時(shí)機(jī)與方法；。2. 實(shí)

21、驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：（一）創(chuàng)建列表/菜單（1）選擇“插入”菜單中的“表單”的“列表/菜單”插入相應(yīng)的表單。圖8-1：應(yīng)用菜單添加列表/菜單（2）設(shè)置其屬性，類型可以是菜單，也可以是列表。缺省情況下以菜單的形式出現(xiàn)。并可以通過屬性面板中的“列表值”按鈕針對(duì)其值進(jìn)行設(shè)置（圖8-3所示），同時(shí)可以選擇列表類型，列表類型中通過選擇“選定范圍”的允許多選這一菜單類選定是否可以多選，選定這一選項(xiàng)之后，則會(huì)多一個(gè)multiple=multiple屬性。圖8-2：列表/菜單屬性面板圖8-3：列表值對(duì)話框（二）文本字段的插入與設(shè)置（1）把光標(biāo)放置在要插入文本域的

22、位置，單擊“插入”面板中的“表單”面板的“文本字段”按鈕，即可插入文本域。圖8-4：插入文本字段（2）選中剛剛插入的文本域，并打開屬性面板，如下圖8-5所示，對(duì)該文本字段進(jìn)行設(shè)置。主要可以對(duì)類型設(shè)置，從而區(qū)分單行文本域、多行的還是密碼域。圖8-5：文本域的屬性面板（三）利用行為創(chuàng)建自動(dòng)跳轉(zhuǎn)頁面A、選擇“窗口”菜單中的“行為”命令，打開行為面板。圖8-6：打開行為面板B、在“行為”面板中單擊“添加行為”按鈕，在彈出的菜單上選擇“轉(zhuǎn)到URL”命令。打開“轉(zhuǎn)到URL”對(duì)話框圖8-7：“轉(zhuǎn)到URL”對(duì)話框C、在圖8-7中的URL輸入想要的轉(zhuǎn)到的地方即可，并單擊確定，即可創(chuàng)建好該行為。（四）在網(wǎng)頁中插入

23、Flash影片A、把光標(biāo)移動(dòng)到要插入flash影片的地方，選擇“插入”“媒體”“Flash”命令，打開“選擇文件”對(duì)話框。圖8-8：選擇Flash文件的對(duì)話框B、在選擇文件對(duì)話框中選擇要選擇的文件，并單擊確定按鈕，即可把要添加的Flash文件添加到相對(duì)應(yīng)的位置了。并可按F12快捷鍵預(yù)覽添加的文件的效果。4. 實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)九：小組興趣網(wǎng)站的設(shè)計(jì)與制作1. 實(shí)驗(yàn)?zāi)康模壕C合訓(xùn)練學(xué)生的網(wǎng)站制作能力；培養(yǎng)學(xué)生的團(tuán)隊(duì)合作能力及解決實(shí)際問題的能力。2. 實(shí)驗(yàn)儀器：多媒體計(jì)算機(jī)并安裝有Dreamweaver 83. 實(shí)驗(yàn)內(nèi)容：（1）確定小組網(wǎng)站的內(nèi)容結(jié)構(gòu)根據(jù)小組的計(jì)劃以及對(duì)資料的搜集情況，確定小組網(wǎng)站的內(nèi)容框架。并畫出小組網(wǎng)站內(nèi)容結(jié)構(gòu)圖。（2）準(zhǔn)備網(wǎng)站素材主要按照小組成員對(duì)本小組網(wǎng)站的設(shè)計(jì)而從文字、圖片、視頻、音頻和flash動(dòng)畫等多個(gè)方面進(jìn)行素材準(zhǔn)備。（3）創(chuàng)建本地站點(diǎn)打開Dreamweaver 8軟件，選擇其中的