網(wǎng)站(網(wǎng)頁(yè))設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書(shū)

1、網(wǎng)站（網(wǎng)頁(yè)）設(shè)計(jì)編撰閩江學(xué)院計(jì)算機(jī)實(shí)驗(yàn)教學(xué)中心印制16目 錄實(shí)驗(yàn)一 html語(yǔ)言的認(rèn)識(shí)與使用 1實(shí)驗(yàn)二 使用html語(yǔ)言制作網(wǎng)頁(yè) 4實(shí)驗(yàn)三 dreamweaver 8入門(mén)與應(yīng)用 7實(shí)驗(yàn)四 dreamweaver 8強(qiáng)化訓(xùn)練 10實(shí)驗(yàn)五 網(wǎng)站的發(fā)布與維護(hù) 11實(shí)驗(yàn)六 dreamweaver結(jié)合photoshop制作網(wǎng)站 12實(shí)驗(yàn)七 flash8制作網(wǎng)站 13實(shí)驗(yàn)八 動(dòng)態(tài)服務(wù)器的網(wǎng)站制作 14實(shí)驗(yàn)一 html語(yǔ)言的認(rèn)識(shí)與使用 實(shí)驗(yàn)?zāi)康模?）熟悉html的基本結(jié)構(gòu)；（2）學(xué)會(huì)創(chuàng)建html文檔；（3）熟練掌握html基本標(biāo)志，包括文本、表格、圖像、超級(jí)鏈接等標(biāo)志；實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)

2、驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： 記事本 internet explorer實(shí)驗(yàn)內(nèi)容 1使用記事本編寫(xiě)html代碼，制作第一份網(wǎng)頁(yè)。步驟一：打開(kāi)記事本創(chuàng)建文件(文件名e1.txt)。步驟二：把如下代碼寫(xiě)入e1.txt文件：標(biāo)題格式標(biāo)記示例這是一行普通文字一級(jí)標(biāo)題歡迎光臨有下劃線步驟三：把e1.txt文件另存為e1.html.步驟四：使用internet explorer瀏覽e1.html.（把實(shí)現(xiàn)的頁(yè)面效果寫(xiě)入實(shí)驗(yàn)報(bào)告）2編寫(xiě)html代碼實(shí)現(xiàn)如圖1-1所示網(wǎng)頁(yè)的設(shè)計(jì)： 圖1-1 步驟一：遵循題1的步驟創(chuàng)建html文檔（文件名e2.html）。步驟二：使

3、用標(biāo)記制作有序列表，起始序列為3。步驟三：使用標(biāo)記制作無(wú)序列表。（把實(shí)現(xiàn)的代碼寫(xiě)入實(shí)驗(yàn)報(bào)告）3html綜合實(shí)例設(shè)計(jì) 圖1-2 綜合實(shí)例創(chuàng)建html文檔（文件名e3.html），完成圖1-2的頁(yè)面效果的設(shè)計(jì)。步驟一：制作一行兩列表格，邊框值border=3。步驟二：添加文字“唐詩(shī)、七言樂(lè)府”字體為隸書(shū)、字號(hào)值5、加粗。 添加文字金縷衣，字體為華文新魏、字號(hào)值4。以及增加其他詩(shī)句。步驟三：添加圖片。并給圖片做超級(jí)鏈接，鏈接地址為e2.html。步驟四：制作左右滾動(dòng)文字“唐詩(shī)欣賞（滾動(dòng)字幕制作）”。步驟五：插入水平線。（把實(shí)現(xiàn)的代碼寫(xiě)入實(shí)驗(yàn)報(bào)告）思考題（1）常用的列表標(biāo)記有哪些？（2）什么是文字滾動(dòng)

4、標(biāo)記，該標(biāo)記的屬性有哪些？相關(guān)知識(shí)internet和www的知識(shí)，html相關(guān)知識(shí)。實(shí)驗(yàn)二 使用html語(yǔ)言制作網(wǎng)頁(yè) 實(shí)驗(yàn)?zāi)康模?）熟悉html的基本結(jié)構(gòu)；（2）熟練掌握html基本標(biāo)志，包括文本、表格、圖像、超級(jí)鏈接、表單等標(biāo)志；（3）使用html制作內(nèi)容豐富的網(wǎng)頁(yè)。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： 記事本 internet explorer實(shí)驗(yàn)內(nèi)容1編寫(xiě)如圖2-1所示的表格html代碼。 圖2-12編寫(xiě)html代碼實(shí)現(xiàn)如圖2-2所示網(wǎng)頁(yè)的設(shè)計(jì)： 圖2-2 步驟一：創(chuàng)建html文檔（文件名e2.html）。步驟二

5、：使用修改網(wǎng)頁(yè)背景顏色。步驟三：使用表格標(biāo)志創(chuàng)建如圖所示七行一列表格。步驟四：添加相關(guān)文字與表單元素。（把實(shí)現(xiàn)的代碼寫(xiě)入實(shí)驗(yàn)報(bào)告）3html綜合實(shí)例設(shè)計(jì) 圖2-3 綜合實(shí)例步驟一：學(xué)習(xí)教材p95頁(yè)例3-25中所應(yīng)用的相關(guān)知識(shí)。步驟二：創(chuàng)建html文檔（文件名e3.html），完成圖2-3的頁(yè)面效果的設(shè)計(jì)?；卮鹑缦聠?wèn)題：1） 插入圖片使用什么標(biāo)記，如何理解絕對(duì)路徑和相對(duì)路徑？2） 超級(jí)鏈接的屬性有哪些，各是什么功能。 3）是什么標(biāo)記，如何使用？ （把問(wèn)題的答案寫(xiě)入實(shí)驗(yàn)報(bào)告）思考題（1）常用的多媒體標(biāo)記有哪些？（2）什么是框架，框架的作用有哪些，與表格有什么區(qū)別？（3）什么是css？它的實(shí)現(xiàn)方式有

6、哪些？相關(guān)知識(shí)internet和www的知識(shí)，html相關(guān)知識(shí)。實(shí)驗(yàn)三 dreamweaver 8入門(mén)與應(yīng)用 實(shí)驗(yàn)?zāi)康模?）掌握使用dreamweaver8創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)；（2）學(xué)會(huì)使用超級(jí)鏈接，表格，框架；（3）熟練掌握簡(jiǎn)單網(wǎng)頁(yè)的設(shè)計(jì)方法。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： dreamweaver 8 internet explorer實(shí)驗(yàn)內(nèi)容 1使用dreamweaver8工具創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)。步驟一：在實(shí)驗(yàn)文件目錄下創(chuàng)建文件夾web-site，打開(kāi)dreamweaver8創(chuàng)建站點(diǎn)(站點(diǎn)名web-site，對(duì)應(yīng)本地

7、根文件夾web-site)。步驟二：在站點(diǎn)內(nèi)創(chuàng)建文件夾images，網(wǎng)頁(yè)文件index.html。 效果如圖3-1所示。圖3-1 web-site站點(diǎn)（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）2使用表格布局網(wǎng)頁(yè)，效果如圖3-2所示： 圖3-2 步驟一：打開(kāi)3-2文件夾，瀏覽網(wǎng)頁(yè)index.html。步驟二：修改web-site站點(diǎn)下的index.html文件，使其效果如圖3-2所示。（把實(shí)現(xiàn)的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告） 3使用框架設(shè)計(jì)網(wǎng)頁(yè)，效果如圖3-3所示： 圖3-3 框架網(wǎng)頁(yè)步驟一：打開(kāi)3-3文件夾，瀏覽網(wǎng)頁(yè)index-end.html。步驟二：使用框架設(shè)計(jì)如圖所示的網(wǎng)頁(yè)效果。（把實(shí)現(xiàn)的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）思考題

8、（1）“鼠標(biāo)經(jīng)過(guò)圖像”功能有什么作用，試著用它做一個(gè)例子。（2）什么是錨記？如何創(chuàng)建錨記鏈接？（3）dreamweaver 8中提供了幾種可供插入的表單元素？舉例說(shuō)明。相關(guān)知識(shí)internet和www的知識(shí)，html相關(guān)知識(shí)，dreamweaver 8相關(guān)應(yīng)用。實(shí)驗(yàn)四 dreamweaver 8強(qiáng)化訓(xùn)練 實(shí)驗(yàn)?zāi)康模?）掌握使用dreamweaver制作菜單；（2）學(xué)會(huì)使用表單，層，行為動(dòng)作；（3）熟練掌握多功能網(wǎng)頁(yè)的設(shè)計(jì)方法。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： dreamweaver 8 internet explo

9、rer實(shí)驗(yàn)內(nèi)容1使用層制作下拉菜單，及行為動(dòng)作設(shè)計(jì)。步驟一：打開(kāi)4-1文件夾，瀏覽網(wǎng)頁(yè)，制作如圖4-1所示效果。步驟二：增加行為動(dòng)作，顯示和隱藏層。 圖4-1 下拉菜單（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）2使用表單制作網(wǎng)頁(yè)，效果如圖4-2所示： 圖4-2 步驟一：打開(kāi)4-2文件夾，瀏覽網(wǎng)頁(yè)form.html。步驟二：制作類(lèi)似的表單網(wǎng)頁(yè)。（把實(shí)現(xiàn)的代碼寫(xiě)入實(shí)驗(yàn)報(bào)告） 3網(wǎng)頁(yè)實(shí)例設(shè)計(jì)“蝴蝶的天空” 圖4-3 綜合實(shí)例步驟一：學(xué)習(xí)教材p232頁(yè)5.13中的相關(guān)知識(shí)。步驟二：創(chuàng)建html文檔（文件名e3.html），完成圖4-3的頁(yè)面效果的設(shè)計(jì)。回答如下問(wèn)題：1) 文字上下滾動(dòng)如何實(shí)現(xiàn)？2）增加鼠標(biāo)經(jīng)過(guò)圖片交

10、換的功能，如何實(shí)現(xiàn)。（把問(wèn)題的答案寫(xiě)入實(shí)驗(yàn)報(bào)告）思考題（1） 如何使用css來(lái)修飾頁(yè)面？（2） 試著利用dreamweaver 8的行為功能為頁(yè)面增加一些動(dòng)態(tài)效果。（3） 什么是模板？試著使用模板來(lái)快速建立一些頁(yè)面。相關(guān)知識(shí)internet和www的知識(shí)，html相關(guān)知識(shí)，dreamweaver 8相關(guān)應(yīng)用。實(shí)驗(yàn)五 網(wǎng)站的發(fā)布與維護(hù) 實(shí)驗(yàn)?zāi)康模?）域名和網(wǎng)頁(yè)空間的申請(qǐng)；（2）網(wǎng)站的測(cè)試；（3）網(wǎng)站發(fā)布及管理。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： dreamweaver 8 internet explorer實(shí)驗(yàn)內(nèi)容1域

11、名和網(wǎng)頁(yè)空間的申請(qǐng)。步驟一：去網(wǎng)站注冊(cè) 步驟二： 申請(qǐng)域名及空間（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）2測(cè)試網(wǎng)站：步驟一：建立站點(diǎn)web-site，拷貝實(shí)驗(yàn)四-3（蝴蝶的天空）網(wǎng)頁(yè)到該站點(diǎn)下步驟二：測(cè)試站點(diǎn)（把測(cè)試結(jié)果寫(xiě)入實(shí)驗(yàn)報(bào)告）3網(wǎng)站發(fā)布及管理步驟一：發(fā)布站點(diǎn)web-site。步驟二：在本地建立新html文檔（文件名e3.html），更新空間內(nèi)容。（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）思考題（1）網(wǎng)站的測(cè)試工作包括哪些？（2）ftp上傳的方式有哪幾種？ftp上傳工具有哪些？實(shí)驗(yàn)六 dreamweaver結(jié)合photoshop制作網(wǎng)站 實(shí)驗(yàn)?zāi)康模?）掌握使用photoshop cs 2的切片工具的使用；（2）掌

12、握dreamweaver 8編輯和修改網(wǎng)頁(yè)。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： photoshop cs 2 dreamweaver 8實(shí)驗(yàn)內(nèi)容1使用photoshop“切片工具”處理圖片（圖6-1）。 圖6-1（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）2用dreamweaver編輯html文件， 處理效果如圖6-2所示。 圖6-2打開(kāi)參照目錄下的index.html文件查看效果，并仿照實(shí)現(xiàn)。（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）相關(guān)知識(shí)photoshop cs 2相關(guān)知識(shí)，dreamweaver 8相關(guān)應(yīng)用。實(shí)驗(yàn)七 flash8制作網(wǎng)站

13、實(shí)驗(yàn)?zāi)康模?）掌握使用flash制作動(dòng)畫(huà)；（2）掌握使用flash制作網(wǎng)站。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： flash 8 dreamweaver 8實(shí)驗(yàn)內(nèi)容1制作網(wǎng)站，效果如圖所示。圖7-1 步驟一：制作背景動(dòng)畫(huà)步驟二：制作按鈕并置于場(chǎng)景1中步驟三：制作場(chǎng)景2中的遮罩動(dòng)畫(huà)步驟四：制作場(chǎng)景3中的組建動(dòng)畫(huà)步驟五：制作場(chǎng)景4中的音樂(lè)播放控制動(dòng)畫(huà)步驟六：為按鈕添加場(chǎng)景交互代碼打開(kāi)參照目錄下的html文件查看效果，并仿照實(shí)現(xiàn)。（把操作的步驟寫(xiě)入實(shí)驗(yàn)報(bào)告）相關(guān)知識(shí)flash 8相關(guān)知識(shí)，dreamweaver 8相關(guān)應(yīng)用。實(shí)驗(yàn)八 動(dòng)態(tài)服務(wù)器的網(wǎng)站制作 實(shí)驗(yàn)?zāi)康模?）掌握配置動(dòng)態(tài)服務(wù)器iis；（2）熟悉asp內(nèi)置對(duì)象的調(diào)用及其應(yīng)用；（2）掌握使用asp技術(shù)設(shè)計(jì)在線聊天室。實(shí)驗(yàn)環(huán)境（1）1人1臺(tái)計(jì)算機(jī)獨(dú)立完成實(shí)驗(yàn)。（2）安裝了windows 系列操作系統(tǒng)的計(jì)算機(jī)，并配有如下應(yīng)用軟件： iis dreamweaver 8實(shí)驗(yàn)內(nèi)容1 制作動(dòng)態(tài)服務(wù)器網(wǎng)站，效果如圖8-1所示 圖8-1 步驟一：制作簡(jiǎn)易