第一篇：2009-2010-1網頁與Web程序設計實驗報告

武漢大學計算中心2007年5月

《網頁與Web程序設計》實驗報告

年級：2008級（必修）

學號：20080307703117姓名：郝嫚專業(yè)：金融管理與實務3班

一、實驗題目

分析或參考給定的“網站設計實例”，設計一個自選題材的網站。

說明：

1．自行設計的網站可以只包含靜態(tài)網頁（.htm），也可以包含動態(tài)網頁(.asp)。

2．站點至少要有三層結構，頁面數5頁左右；網頁要有落款、版權說明。網站大小不要超過10MB。

3．在網站制作過程中或完成后，填寫下面“

五、實驗步驟”里的省略號部分。

二、實驗目的和要求

通過以前各章的學習和實驗，同學們已經了解和初步掌握一系列的網頁與Web程序設計技術。本實驗能使大家對網站設計的全過程，有一個更加完整的概念，熟練掌握網站設計工具“網頁設計三劍客”。具體要求如下：

1．自選題材，主題內容要合法、健康、實用。網站主題突出、內容豐富。

2．自己動手獨立完成網站設計?？梢越梃b和模仿某個網站進行設計與制作，但不可以從網上下載網頁直接上交。

3．站點應當設計合理，結構分明，管理有序，無多余文件和文件夾，大小合適。文件和文件夾存放位置要正確，首頁文件名應該使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要規(guī)范，不宜使用漢字或帶有空格的名稱。

4．網站風格統(tǒng)一，設計適合于主題的LOGO（徽標），或者標題圖片及動畫。各頁面設計合理、美觀，有創(chuàng)意。不要太花哨或太孩子氣，不要只是各種元素的隨意拼湊。圖片和動畫選用要適合主題，不要在網頁中插入不相干的圖片，圖片保存格式和圖片大小要合適。要適用于各種顯示器的分辨率，不要太寬，否則在顯示器分辨率較小時會出現水平滾動條。

5．各個頁面之間的鏈接要合理有效，路徑要正確（使用相對路徑）。要合理使用css樣式，不要在各個頁面中重復定義相同的css樣式；應該將css樣式存放到css文件中，然后附加即鏈接到各頁中。代碼結構清晰，無垃圾代碼。

三、實驗方法

網站設計的一般過程或方法如下：

1．確定主題和收集資料

自行選定所要設計的網站主題和欄目，收集有關圖文、數據等資料，經過分析，初步確定網站的基本功能、結構或三級目錄。

2．規(guī)劃網站和新建站點

在需求分析的基礎上，畫出網站的樹型目錄結構圖，從網站根文件夾，子文件夾到文件名。首頁文件名如index.htm，應該放在網站根文件夾里。根據Windows的“管理工具”中是否已安裝IIS，用Dreamweaver 8，在C:Inetpubwwroot或者D:里，新建站點，即根文件夾，子文件夾或文件名。隨時在U盤上做好備份。

3．制作素材和單個網頁

用“網頁設計三劍客”自行制作或者收集網站要使用的小圖片、動畫、音頻或視頻，制作單個網頁文件及其鏈接，以及按需要建立數據庫。按照規(guī)劃，一一放在網站的相應子文件夾里。

4．制作首頁和建立鏈接

制作首頁，并且建立與下一級網頁的鏈接（若受網站大小限制且超過5頁，則可建立必要的空連接）。

5．調試運行

可以邊設計邊調試，也可以邊調試邊修改前面的設計。然后，正式運行和提交網站。

四、實驗環(huán)境

微機 + Windows操作系統(tǒng)(含IIS)+ Fireworks 8 + Flash 8 + Dreamweaver 8 + Access。

五、實驗步驟

請?zhí)顚懢W站分析與設計的實驗步驟。

（一）分析給定的“網站設計實例”

1．該網站的樹型目錄或站點結構圖（如圖1）：

……

圖1 實例網站的樹型目錄或站點結構

2．在該網站首頁上“插入”大標題圖片和動畫文件的操作步驟：

……

3．在該網站設計中，運用了哪些樣式設計技術如CSS等？舉例說明：

……

4．在該網站設計中，下一級網頁顯示的目標（位置）一般設置為：……；數據庫（.mdb）文件為：……。

5．在該網站設計中，較好地運用了如下網頁與Web程序設計技術：

……

（二）設計自選題材網站的具體步驟

1．確定主題和收集資料

本網站的主題：我的美麗家鄉(xiāng)——廣水

? 欄目或三級目錄：首頁，魅力廣水，廣水高中，廣水風光，今日廣水和廣水人

家。

2．規(guī)劃網站和新建站點

網站的樹型目錄或站點結構圖如圖2：

? 首頁

?

?

?

? 魅力廣水 廣水風光 廣水高中 今日廣水和廣水人家

創(chuàng)建本地站點：

·啟動Dreamweaver 8，選擇“站點”菜單中的“管理站點”命令，打開“管理站點”對話框。

選擇“新建”按鈕，然后選擇“站點”命令，打開“站點定義”對話框，將站點名稱設為“Mysite”，單擊下一步。

·根據提示填完有關步驟，最后單擊“完成”按鈕。

·單擊“管理站點”對話框中的“完成”按鈕，在打開“文件”面板上顯示本地站點的目錄結構。

·在站點根文件夾上單擊右鍵，從彈出的快捷菜單中選擇“新建文件夾”命令，將新建文件夾名稱設置為“image”。

·采用同樣的方法再建一個“vidao”文件夾。

3．制作素材和單個網頁（舉例說明典型的操作步驟）

（1）素材制作

1.圖片：在網上收集一些網頁背景圖片，與主題有關的一些圖片；將一些不是很合心意的圖片在“fireworks”中進行修改，制作。

2.flash動畫：在有關網頁制作的網站中下載了一些有關的flash動畫。由于網頁設計容量的限制此處沒有插入動畫，實際步驟已知。

3.下載歌曲輕音樂紅河谷作為其中風景網頁的背景音樂。

4.下載有關的資料，圖片??

…

（2）網頁制作

以魅力廣水為例

打開Fireworks 8，在Fireworks 8中制做好背景圖片并保存為JPG格式，關閉Fireworks 8。

打開Dreamweaver 8，單擊“插入”—“圖片”命令，選擇此圖片插入

（3）建立數據庫

4．制作首頁和建立鏈接（舉例說明典型的操作步驟）

制作首頁：

……1）新建頁面，選擇菜單命令“修改”—“頁面屬性”，在彈出的對話框中將網頁的標題設置為“魅力廣水”……

2)如果沒有顯示標尺，則選擇菜單命令“查看”/“標尺”/“顯示”，顯示標尺。

3）選擇菜單命令“查看”/“網格”/“顯示網格”來顯示網格，以便于

定位。

4）在插入工具欄中選擇“布局”子工具欄，單擊布局按鈕，此時會打開

一個“從布局模式開始”，單擊“確定”按鈕進入布局模式。

5）單擊“布局”插入工具欄上的“布局表格”按鈕，然后將光標放在要繪制表格的區(qū)域，按住鼠標左鍵繪制一個布局表格。

6）在“布局”插入工具欄上的“布局表格”按鈕，然后移動光標到第一

行網格的位置，繪制一個頂部單元格并選中該單元格，在打開的“屬性”面板中設置“背景顏色”為白色，并以此方法繪制剩余的單元格。

7）選擇“插入”/“圖像”命令，插入圖片，調整圖片大小使得圖片大

小恰好充滿單元格。

8）在左側單元格內輸入文字，然后加上項目符號，并插入圖片，然后

在屬性面板中設置字體為黑體，背景設為綠色。

9)選定整個布局表格，將布局表格背景設為黑色。完成首頁制作。

建立連接:

? 將所有的網頁都做完了之后再建立鏈接。（下面以“魅力廣水”為例）①選中“魅力廣水”圖片，打開“屬性”面板，選擇“鏈接”文本框右邊的文件夾，選擇文件夾中的“主頁”網頁，單擊“確定”。

②在“目標”的下拉框中選擇“鳴人的身世”

5．調試運行

調試和運行情況：

在運行的過程中，有某些圖片，音樂無法正常顯示和播放，有些是因為電腦的原因，而有些則是因為操作過程中出現的問題，經過不斷修正，網頁運行正常。

……

第二篇：Web網頁實驗報告

網頁設計實驗報告

學院：計算機

專業(yè)：網絡工程

班級：0430801

學號：08490121

姓名：姚樹秘

2011年5月10日Web

實驗一

實驗題目：編程環(huán)境的熟悉 實驗目的：

1、學會使用Macromedia Dreamweaver 軟件，了解并掌握該軟件的各種功能，為以后的網頁設計打下基礎。

2、重點學習使用“頁面創(chuàng)建”和“設置服務器信息”功能

實驗環(huán)境：

操作系統(tǒng)為Windows2000或者Windows XP，應用軟件為Macromedia Dreamweaver。

實驗步驟：

1、啟動

單擊“開始”，依次指向“程序”、“Macromedia ”，然后單擊“Macromedia Dreamweaver MX”。

2、熟悉和了解Macromedia Dreamweaver MX界面

實驗過程截圖：

心得體會：

通過這次試驗，基本熟悉和掌握了Dreamweaver軟件的功能和用法，能夠用該軟件設計簡單的網頁。

實驗二

實驗題目：熟悉ASP技術及它的內置對象 試驗目的：

1． 了解并掌握ASP初步知識 2． 熟悉ASP內置對象

試驗步驟：

1、打開軟件設計頁面

2、輸入下列代碼

3、建立一個自動監(jiān)測瀏覽時間并根據不同時段動態(tài)顯示不同頁面內容的 ASP 程序，請將以下代碼輸入到Macromedia Dreamweaver的代碼編輯區(qū) , 命名為test1.asp

4、運行結果

實驗過程截圖：

5、建立一個學生情況調查表，并將學生填寫的內容寫入數據文件student.txt中。

6、設計編譯結果

心得體會：

通過本次試驗我學會了很多，軟件的掌握和使用也更加熟練，能夠成功的打開ASP文件，更加熟悉了ASP的運用和使用技巧，以及學會怎么打開IIS服務器，設置站點信息。

實驗三

試驗題目：

實現與后臺數據庫的連接

試驗目的：

學會在ASP頁面訪問數據庫的方法，包括對后臺數據庫進行各項操作； 試驗環(huán)境：

Windows2000/Windows XP（已安裝有IIS系統(tǒng)）,Microsoft Access數據庫 實驗步驟：

1、利用 ASP 的 Database Access 組件通過 ADO 連接并操作 WEB 數據庫

2、單擊“開始”，選設置控制面板。

3、雙擊圖標“32 位 ODBC” , 將彈出一個對話框，選標簽“System DSN”

4、單擊“Add”添加一個 DSN 入口 , 選擇如“Microsoft Access Drive”并確認。

5、在“Data Source Name”欄里輸入你希望指定的 DSN, 然后單擊“Select”選擇數據庫存放位置，你可以按“Browse”來選取。

6、以上步驟完成后在 ASP 程序中指定 DSN

7、現有兩個數據庫表：students表記錄學生的一般數據，其中字段studID為學號，studName記錄學生姓名，score表記錄學生成績，其中computer字段和english字段分別記錄studID所表示的學生的計算機和英語課程成績。實驗相關代碼：

<% @ language=javascript %>