《網(wǎng)絡(luò)設(shè)計與開發(fā)》實驗指導(dǎo)書

1、網(wǎng)絡(luò)設(shè)計與開發(fā)實驗指導(dǎo)書 東北大學(xué)秦皇島分校經(jīng)濟管理系二零零三年八月目 錄實驗一 搜索引擎的使用實驗二 使用記事本編寫一個簡單的HTML文檔實驗三 使用Frontpage和Dreamwaver等工具軟件制作網(wǎng)站實驗四 利用Photoshop處理圖像實驗五 網(wǎng)站建設(shè)綜合實驗實驗一搜索引擎的使用實驗?zāi)康耐ㄟ^使用瀏覽器提高同學(xué)們對目前廣為應(yīng)用的幾種搜索引擎的使用，使同學(xué)們掌握如何從網(wǎng)絡(luò)中查找自己所需資料的能力。實驗設(shè)備與軟件需求可上互聯(lián)網(wǎng)PC機一臺，安裝有Windows操作系統(tǒng)，使用IE瀏覽器。實驗內(nèi)容及步驟打開計算機使用IE上網(wǎng)。在地址欄當(dāng)中鍵入搜索引擎的地址，如 HYPERLINK ，見圖1-1

2、。在搜索欄中鍵入“網(wǎng)頁制作”后按google搜索，搜索結(jié)果會如圖1-2。圖1-1 HYPERLINK 的頁面大家發(fā)現(xiàn)滿足條件的網(wǎng)頁可能太多，我們可以使用高級搜索來進行更加細(xì)化的搜索。圖1-2搜索“網(wǎng)頁制作”圖1-3使用高級搜索5、在高級搜索中鍵入HTML，我們將可以搜索到一些與網(wǎng)頁設(shè)計中HTML文檔制作相關(guān)的一些網(wǎng)站。注意事項1、高級搜索的正確使用。2、如何判斷是否為所要查找的網(wǎng)頁制作的相關(guān)資料。預(yù)習(xí)要求熟練使用瀏覽器。選擇幾個搜索引擎。實驗二 HYPERLINK /department/xxx/syzds/SYZDS_WY2.HTM 使用記事本編寫一個HTML文檔實驗?zāi)康耐ㄟ^使用記事本編寫一

3、個簡單的HTML文檔使同學(xué)們對HTML文檔有一個初步的了解，初步掌握一個最簡單的HTML文檔所應(yīng)該包含的內(nèi)容。實驗設(shè)備與軟件需求PC機一臺，安裝有Windows操作系統(tǒng)，使用IE瀏覽器。實驗內(nèi)容文檔使用Windows操作系統(tǒng)自帶的記事本程序編寫。要求窗體標(biāo)題為“Welcome to NCWRC” 使用*HTML文檔由head和body兩部分組成 使用*和* 用瀏覽器閱讀時要看見4段文字，每段文字的size分別是8、6、4、2 使用* 其中要求每段文字的顏色不同，分別為#00ffff、#882299、#ff0088、#55ccaa 使用* 每段文字要求居中排列 使用*編寫完成后用HTML為文件擴

4、展名存盤，存在桌面上就可。使用瀏覽器瀏覽我們用記事本編寫的HTML文檔結(jié)果應(yīng)該如圖2-1。注意事項HTML文檔應(yīng)該以開頭，以結(jié)尾。記事本存盤時應(yīng)注意存盤的方式。預(yù)習(xí)要求對HTML文檔的基本構(gòu)成要有一個全面的了解?？砷喿x簡單的HTML文檔。圖2-1瀏覽html文檔實驗三 HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM 使用Frontpage和Dreamwaver等軟件制作網(wǎng)站實驗?zāi)康氖褂?HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM Frontpage和Dreamwaver等工具軟件制作網(wǎng)站，練習(xí)工具軟件的

5、使用。熟練掌握網(wǎng)頁制作的一個工具來制作網(wǎng)站。實驗設(shè)備與軟件需求PC機一臺，安裝有Windows操作系統(tǒng)， HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM Frontpage和Dreamwaver等工具軟件。實驗內(nèi)容自己設(shè)計一個的網(wǎng)站，畫出系統(tǒng)結(jié)構(gòu)圖及流程圖。根據(jù)自己設(shè)計的網(wǎng)站，使用Frontpage和Dreamwaver等工具軟件，來完成。瀏覽、測試并發(fā)布自己制作的網(wǎng)站。注意事項一定要注意網(wǎng)頁的名稱，不要使用漢字。發(fā)布出現(xiàn)問題，要自習(xí)檢查。預(yù)習(xí)要求設(shè)計出自己的網(wǎng)站。參考相關(guān)的網(wǎng)頁制作工具書。實驗四 HYPERLINK /department/xxx/

6、syzds/SYZDS_WY0.HTM 利用Photoshop處理圖像實驗?zāi)康耐ㄟ^ HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM 利用Photoshop來處理圖像，了解圖形圖像處理的一般過程，并會簡單的圖形圖像處理。實驗設(shè)備與軟件需求PC機一臺，安裝有Windows操作系統(tǒng)和 HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM Photoshop圖像處理軟件。實驗內(nèi)容搜集一些圖片，也可以 HYPERLINK /department/xxx/syzds/SYZDS_WY0.HTM Photoshop的相關(guān)實例中

7、獲得。啟動Photoshop 6.0，單擊，指向程序，指向Adobe，然后再單擊Photoshopshop6.0就啟動Photoshopshop6.0了。Photoshop6.0的桌面環(huán)境打開后的Photoshop6.0的界面環(huán)境如圖4-1所示。圖4-1 Photoshop6.0的界面環(huán)境文件的建立和存取。單擊，單擊，彈出如圖4-2所示對話框。輸入文件名，Photoshop6.0的缺省文件名是Untitled-1，也可以再保存文件時再鍵入文件名。設(shè)置文件的寬度、高度，單位可以為象素、厘米、英寸、點、派卡。文件的分辨率。分辨率越搞，圖像越精細(xì)，同時文件也越大。圖4-2 新建文件設(shè)置色彩模式。單擊

8、右邊的下拉黑三角符號，出現(xiàn)列表如圖4-3所示RGB、CMYK、Lab、灰度、位圖模式可以選擇。文檔背景區(qū)域有三個選項，可以選擇白色、背景色、透明色。單擊按鈕，完成新文件的創(chuàng)建。圖4-3設(shè)置色彩模式打開圖像。單擊，單擊，彈出如圖4-4所示對話框。單擊搜尋列表，找到文件所在磁盤和文件目錄。單擊要打開的文件名，或者在輸入文件名。單擊，即可打開所需的文件。也可在第三步直接雙擊也能打開文件。圖4-4 打開圖像對話框當(dāng)處理完一幅圖像，如何保存起來呢？就像保存任何文件一樣，只需將圖像改為你想要當(dāng)格式即可。單擊，單擊，如果文件已經(jīng)命名或是編輯原有的文件，則系統(tǒng)直接保存。否則彈出如圖4-5所示對話框。圖4-5

9、保存圖像在下的列表中找到對應(yīng)的文件夾，在鍵入文件名。在下拉列表中找到相應(yīng)的圖像格式。單擊，圖像即被保存在相應(yīng)的目錄下。 具體的可參考相關(guān)的Photoshop書籍和資料，自己學(xué)習(xí)和練習(xí)，掌握Photoshop圖像處理的基礎(chǔ)知識。預(yù)習(xí)要求參考Photoshop6.0的圖書。注意隨時存盤。實驗五 網(wǎng)站建設(shè)綜合實驗實驗?zāi)康耐ㄟ^本次實驗，學(xué)生應(yīng)具有規(guī)劃、設(shè)計電子商務(wù)網(wǎng)站的能力；掌握至少一門開發(fā)網(wǎng)站的技術(shù)；掌握學(xué)習(xí)工具軟件的方法。實驗設(shè)備與軟件需求PC機一臺，安裝有Windows操作系統(tǒng)，IIS，JSP的開發(fā)和發(fā)布的環(huán)境（J2DK,TOMCAT），網(wǎng)頁制作工具Dreamweaver、Frontpage。實驗內(nèi)容自己選擇一個網(wǎng)站題目，規(guī)劃出系統(tǒng)開發(fā)報告，寫出詳細(xì)的設(shè)計文檔。根據(jù)自己的設(shè)計方案，進行開發(fā)網(wǎng)站，開發(fā)出前臺，設(shè)計后臺數(shù)據(jù)庫、表，開發(fā)出的網(wǎng)站具有交互式的功能，例如注冊系統(tǒng)、聊天室、BBS論壇等等。開