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

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

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

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

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

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

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

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

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

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

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

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

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

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