第一篇：網頁制作實驗報告

網頁制作實驗報告

實驗一：站點設置

一、實驗目的及要求

本實例是通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows

xp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweaver

mx；flash

mx；fireworks

mx）等網頁設計軟件；

三、實驗原理

通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

四、實驗方法與步驟

1）執行“站點＼管理站點”命令，在彈出的“管理站點”對話框中單擊“新建”按鈕，在彈出的快捷菜單中選擇“站點”命令。

2）在彈出的“站點定義為”對話框中單擊“高級”選項卡。

3）在“站點名稱”文本框中輸入站點名稱，在“默認文件夾”文本框中選擇所創建的站點文件夾。在“默認圖象文件夾”文本框中選擇存放圖象的文件夾，完成后單擊“確定”按鈕，返回“管理站點”對話框。

4）在“管理站點”對話框中單擊“完成”按鈕，站點創建完畢。

五、實驗結果

六、討論與結論

實驗開始之前要先建立一個根文件夾，在實驗的過程中把站點存在自己建的文件夾里，這樣才能使實驗條理化，不至于在實驗后找不到自己的站點。在實驗過程中會出現一些選項，計算機一般會有默認的選擇，最后不要去更改，如果要更改要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟件是做好該實驗的關鍵。

實驗二：頁面圖像設置

一、實驗目的及要求：

本實例的目的是設置頁面的背景圖像,并創建鼠標經過圖像。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows

xp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweaver

mx；flash

mx；fireworks

mx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

設置頁面的背景圖像,并創建鼠標經過圖像。

四、實驗方法與步驟

1)

在“頁面屬性”對話框中設置頁面的背景圖像。

2)

在頁面文檔中單擊“”插入鼠標經過圖像。

五、實驗結果

六、討論與結論

實驗結束后我們可以看到頁面的背景變成了我們插入的圖像，并且要鼠標經過的時候會變成另一個圖像，這就是鼠標經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現出來。這個實驗的關鍵在于背景圖像的選擇，如果背景圖像太大不僅會影響網頁的打開速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。

實驗三：表格制作

一、實驗目的及要求：

本實例是要創建邊框為1像素的表格。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows

xp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweaver

mx；flash

mx；fireworks

mx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建邊框為1像素的表格。

四、實驗方法與步驟

1)

在文檔中，單擊表格“”按鈕，在對話框中將“單元格間距”設置為“1”。

2)

選中插入的表格，將“背景顏色”設置為“黑色”（#0000000）。

3)

在表格中選中所有的單元格，在“屬性”面版中將“背景顏色”設置為“白色”（#ffffff）。

4)

設置完畢，保存頁面，按下“f12”鍵預覽。

五、實驗結果

六、討論與結論

本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在于表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。“表格寬度”文本框右側的表格的寬度單位，包括“像素”和“百分比”兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設置錯誤就會嚴重影響實驗效果。

實驗四：創建錨點鏈接

一、實驗目的及要求：

本實例的目的是創建錨點鏈接。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows

xp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweaver

mx；flash

mx；fireworks

mx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

第二篇：網頁制作實驗報告格式

這是一篇由xiexiebang.com范文網小編整理的關于網頁制作實驗報告格式的文章，希望對尊敬的xiexiebang.com范文大全的讀者有幫助。

實驗一：站點設置

一、實驗目的及要求

本實例是通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows xp操作系統;建立iis服務器環境，支持asp。

3、安裝網頁三劍客(dreamweaver mx;flash mx;fireworks mx)等網頁設計軟件;

三、實驗原理

通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

四、實驗方法與步驟

1)執行“站點管理站點”命令，在彈出的“管理站點”對話框中單擊“新建”按鈕，在彈出的快捷菜單中選擇“站點”命令。

2)在彈出的“站點定義為”對話框中單擊“高級”選項卡。

3)在“站點名稱”文本框中輸入站點名稱，在“默認文件夾”文本框中選擇所創建的站點文件夾。在“默認圖象文件夾”文本框中選擇存放圖象的文件夾，完成后單擊“確定”按鈕，返回“管理站點”對話框。

4)在“管理站點”對話框中單擊“完成”按鈕，站點創建完畢。

五、實驗結果

六、討論與結論

實驗開始之前要先建立一個根文件夾，在實驗的過程中把站點存在自己建的文件夾里，這樣才能使實驗條理化，不至于在實驗后找不到自己的站點。在實驗過程中會出現一些選項，計算機一般會有默認的選擇，最后不要去更改，如果要更改要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟件是做好該實驗的關鍵。

實驗二：頁面圖像設置

一、實驗目的及要求：

本實例的目的是設置頁面的背景圖像,并創建鼠標經過圖像。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows xp操作系統;建立iis服務器環境，支持asp。

3、安裝網頁三劍客(dreamweaver mx;flash mx;fireworks mx)等網頁設計軟件;

4、安裝acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

設置頁面的背景圖像,并創建鼠標經過圖像。

四、實驗方法與步驟

1)在“頁面屬性”對話框中設置頁面的背景圖像。

2)在頁面文檔中單擊“”插入鼠標經過圖像。

五、實驗結果

六、討論與結論

實驗結束后我們可以看到頁面的背景變成了我們插入的圖像，并且要鼠標經過的時候會變成另一個圖像，這就是鼠標經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現出來。這個實驗的關鍵在于背景圖像的選擇，如果背景圖像太大不僅會影響網頁的打開速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。

實驗三：表格制作

一、實驗目的及要求：

本實例是要創建邊框為1像素的表格。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows xp操作系統;建立iis服務器環境，支持asp。

3、安裝網頁三劍客(dreamweaver mx;flash mx;fireworks mx)等網頁設計軟件;

4、安裝acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建邊框為1像素的表格。

四、實驗方法與步驟

1)在文檔中，單擊表格“”按鈕，在對話框中將“單元格間距”設置為“1”。

2)選中插入的表格，將“背景顏色”設置為“黑色”(#0000000)。

3)在表格中選中所有的單元格，在“屬性”面版中將“背景顏色”設置為“白色”(#ffffff)。

4)設置完畢，保存頁面，按下“f12”鍵預覽。

五、實驗結果

六、討論與結論

本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在于表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。“表格寬度”文本框右側的表格的寬度單位，包括“像素”和“百分比”兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設置錯誤就會嚴重影響實驗效果。

實驗四：創建錨點鏈接

一、實驗目的及要求：

本實例的目的是創建錨點鏈接。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows xp操作系統;建立iis服務器環境，支持asp。

3、安裝網頁三劍客(dreamweaver mx;flash mx;fireworks mx)等網頁設計軟件;

4、安裝acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建錨點鏈接。

四、實驗方法與步驟

1)在頁面中插入1行4列的表格，并在各單元格中輸入導航文字。

2)分別選中各單元格的文字，單擊“”按鈕，在彈出的“超級鏈接”對話框上的“鏈接”文本框分別輸入“#01”“#02”“#03”“#04”。

3)在文檔中輸入文字并設置錨記名稱“01”，按下“ enter”鍵換行，輸入一篇文章。

4)在文章的結尾處換行，輸入文字并設置錨記名稱“02”，按下“ enter”鍵換行，輸入一篇文章。

5)同樣的方法在頁面下文分別輸入文字和命名錨記為“03”和“04”，并輸入文章。

6)保存頁面，按下“f12”鍵預覽。

五、實驗結果

六、討論與結論

添加瞄記的作用是可以幫讀者快速找到自己想要的文章，同時也可以使頁面更加精簡。本實驗的關鍵難點在于鏈接文本框輸入的名稱和瞄記的名稱要相一致才能達到實驗的效果，同時要記得是在上一篇文章的結尾處輸入文字并設置瞄記名稱，并記得輸入對應的文章，否則瞄記可能不能用。熟練程度低在實驗中不能很好地使用各種工具，無法一次準確地尋找到適當的位置。實驗中忘記選擇“不可見元素”，幾次實驗都失敗，最后才得出正確的結論。因此在實驗前要先做好預習，否則實驗過程會比較吃力。

實驗五：設置css樣式

一、實驗目的及要求：

本實例的目的是通過設置css樣式創建表格的虛線邊框。

xiexiebang.com范文網【www.tmdps.cn】

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windows xp操作系統;建立iis服務器環境，支持asp。

3、安裝網頁三劍客(dreamweaver mx;flash mx;fireworks mx)等網頁設計軟件;

4、安裝acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

通過設置css樣式創建表格的虛線邊框。

四、實驗方法與步驟

1)在網頁中創建一個表格。

2)在“css樣式”面板中單擊“”按鈕，在彈出的對話框中進行設置，完成后單擊“確定”按鈕。

3)在彈出的對話框中進行設置，完成后單擊“確定”按鈕。

五、實驗結果

六、討論與結論

對話框中各項指標和屬性的設置存在一定的難度，如果沒熟練掌握就容易出錯使實驗失敗。對“ccs”樣式所要使用的各種按扭不夠熟悉在使用的時候覺得很生硬。這個實驗成功的關鍵在于對軟件的掌握程度以及對各種屬性的認識程度，只要充分地掌握了軟件的各種操作，對各屬性所代表的含義有充分的認識就能很好地完成這個實驗。

實驗六：創建表單

一、實驗目的及要求：

本實例的目的是創建一個募捐表單。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建一個募捐表單。

四、實驗方法與步驟

1)在網頁中插入表格，設置為居中對齊，并插入一幅圖像。

2)在表格的第二行單元格中，單擊“”按鈕，插入表單。

3)在表單域中插入表單對象和文字。

4)按下“F12”鍵，預覽效果。

五、實驗結果

六、討論與結論

這個圖像關鍵首先在于背景圖象的選擇，圖像如果過于花俏則會使表單過于雜亂，如果顏色過深則會掩蓋了表單上的字，依次最好不要用黑色。圖像也不能過大，不然會使表單太繁雜。其次是各多選框和單選按扭的設置難度比較大，對于初次做這個實驗的人來說需要多次的試驗才能達到滿意的效果。表格拆分的難度大，要多次實驗才能達到自己想要的效果。

實驗七：頁面中控制播放Flash動畫

一、實驗目的及要求：

本實例的目的是實現在頁面中控制播放Flash動畫。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

實現在頁面中控制播放Flash動畫。

四、實驗方法與步驟

1)在頁面中插入表格，并在表格中插入Flash動畫和兩個表單按鈕。

2)分別選擇兩個表單按鈕，在“行為”面板中單擊“”按鈕，在彈出的快捷菜單中選擇“控制Shockwave或Flash”命令，打開“控制Shockwave或Flash”對話框，分別設置。

3)保存頁面，按下“F12”鍵預覽。單擊“播放”按鈕時，開始播放Flash動畫;當單擊“停止”按鈕時，則停止播放Flash動畫。

五、實驗結果

六、討論與結論

“控制Shockwave或Flash”對話框，設置難度比較大，設置錯誤FLASH可能無法播放。控制按鈕的創建也是關鍵所在，控制按鈕不能使用則等于整個實驗的失敗，因此要認真做好各個按鈕并確保質量。在這次實驗中我遇到的最大問題就是設置“控制Shockwave或Flash”對話框，因為我對其各項的屬性了解不夠清楚，在選擇時很難正確地做出判斷，因此掌握好這方面的知識是做好這個實驗的前提。

實驗八：制作浮雕文字

一、實驗目的及要求：

本實例使用Flash的繪畫工具制作出的有浮雕感的文字。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

使用Flash的繪畫工具制作出的有浮雕感的文字。

四、實驗方法與步驟

1)在舞臺中輸入文本，并將文本移動到舞臺中央位置。

2)新建圖層2，并復制圖層1的第1幀到圖層2的第1幀，并改變字體顏色。

3)拖曳圖層2到圖層1的下方，分別按下鍵盤上的方向鍵的左移鍵和上移鍵各一次。

4)新建圖層3，復制圖層2的第1幀到圖層3的第1幀，并拖曳圖層3到圖層1的上方。

5)選擇圖層3的第1幀，執行“修改分離”命令兩次，將文本打散，并填充為由白色(#FFFFFF)漸變到黃色(#FFFFF00)。

6)分別按下兩次鍵盤上的方向鍵中的左移鍵和下稱鍵，拖曳圖層3到圖層1的下方，該實例制作完成。

五、實驗結果

六、討論與結論

掌握好層和楨的知識是做好這個實驗的關鍵，因為這個實驗主要涉及到楨和層的創建和移動，對層和楨不熟悉，在選擇和移動時沒法準確地把握，否則就打不到預期的實驗效果。此次實驗需要多次地移動層和楨，只有合理地移動才能達到實驗效果，因此在實驗中要保持清醒的頭腦，也需要耐心和細心，過于急噪就會影響實驗的效果和效率。

實驗九：字母位置顏色的變化效果

一、實驗目的及要求：

本實例主要表現在有字母的位置才能看到顏色的變化效果。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

表現在有字母的位置才能看到顏色的變化效果。

四、實驗方法與步驟

1)執行“文件導入導入到庫”命令，導入一個圖像文件到“庫”面板中。

2)將圖像文件拖曳到舞臺并轉換為圖形元件，然后創建移動補間動畫。

3)新建圖層2，輸入文本并設置其屬性。

4)將圖層2設置為遮罩層，完成本實例的制作。

五、實驗結果

六、討論與結論

這個實驗的前提是要學會做移動補間動畫，因為移動補間動畫是表現實驗效果的關鍵，其次要懂得遮罩層的設置，這兩項都是實驗的關鍵。背景圖像的選擇也很關鍵，如果背景圖像的顏色過于單一，則不能很好地表現實驗的效果，字體顏色的變化也會比較不明顯。因此這個實驗的技術含量比較大，因此難度也比較大，要有耐心去認真研究。

實驗十：動作補間動畫及聲音效果

一、實驗目的及要求：

本實例首先創建一個動作補間動畫，然后在對其添加聲音效果。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建一個動作補間動畫，然后在對其添加聲音效果。

四、實驗方法與步驟

1)創建圖形元件在舞臺中繪制一個卡通人物。

2)創建卡通人物越飛越遠的動作補間動畫。

3)新建一個圖層，導入一幅背景圖片，并置位于最下層。

4)執行“文件導入導入到庫命令”，導入一個聲音文件。新建一個圖層，并選擇第1幀，在幀“屬性”面板中，在“聲音”下拉列表中選擇導入的聲音文件名稱，在“同步”下拉列表中選擇“數據流”選項，其他選項為默認值。

5)保存文件，按下“Ctrl+ Enter”組合鍵輸出影片即可。

五、實驗結果

六、討論與結論

這個實驗首先要創建圖形元件，因此要求對畫圖工具有比較清楚的了解，在實驗中我遇到最大的難題就是沒法準確地使用鋼筆工具，常常畫不成自己想要的形狀，最后通過查閱相關的書籍才徹底明白它的使用方法。這個實驗涉及到動作補間動畫的制作，和以前做的移動補間動畫有一定的區別，在實驗中要認真區分。導聲音文件也是這個實驗新涉及的內容，在各項屬性的設置方面要認真把握和學習。

實驗十一：Action Script腳本程序制作

一、實驗目的及要求：

本實例模擬播放器中音頻高低顯示的效果。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

本實例模擬播放器中音頻高低顯示的效果。本例是一個完全由Action Script腳本程序制作的圖形動畫。

四、實驗方法與步驟

1)開啟Flash MX 2004，新建一個空白文檔，執行“修改文檔”命令，開啟“文檔屬性”對話框，修改屬性參數為：寬：600px;高：300px;背景顏色#000000。

2)執行“窗口開發面板動作”命令，為圖層1添加如下動作腳本。

-root.On Enter Frame= function()

{

create Empty Movie Clip(“ caidai ”, random(2))

caidai.–X= 150;

caidai.–Y=200;

for(var i =0<12:i++)

{

cai dai.begin FilL(Math.Random()*0xffffff,60)

var gaodu= Math.Random()*50+10;

var xzuobiao= [i*30,i*30+20,i*30+20, i*30]

var yzvobiao=[-gaodu,-gaodu,0,0]

caidai, moveTo(i*30,o)

for(var j=0;<5;j++)

{caidai, Line To(xzuo biao[j]，yzuobio[j]);

}

}

}

3)按下“Ctrl+ S”組合鍵保存文件，執行“控制測試影片”命令，欣賞本例完成后的效果。

五、實驗結果

六、討論與結論

這個實驗主要是操作Flash MX，雖然這個實驗整體的步驟很簡單，但是腳本程序的正確性決定著這個實驗的成敗，因此在實驗中要認真分析腳本并對其進行不斷的調試使其能正確地運行。而這方面對程序方面的知識有比較高的要求因此對于我們非計算機類的學生來說難度比較大，如果要做好這個實驗我們必須加強學習程序方面的知識。

實驗十二：創建一個特效字

一、實驗目的及要求：

本章上機實訓的目的是創建一個特效字。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建一個特效字。

四、實驗方法與步驟

1)新建一個Fireworks文檔，并輸入文字，將字體加粗，字號設置為120。

2)將文字轉化為路徑，在“屬性”面板中單擊“”按鈕，在彈出的快捷菜單中選擇“陰影和光暈投影”命令，如圖15-42所示。

3)選中文本對象，執行“編輯克隆”命令。選中克隆對象，執行“修改改變路徑擴展筆觸”命令，在彈出的“展開筆觸”對話框中設置為如圖15-43所示。特效字制作完畢。

五、實驗結果

六、討論與結論

Fireworks 軟件的打開速度比較慢，而且會影響計算機的反應速度，同時使用DREEMWAVER和FIREWORKS會使整個電腦很卡，因此這個實驗需要比較好的計算機系統的支持。對 “陰影和光暈投影”命令我還不能比較深刻地理解在實驗的時候有點迷糊，對“編輯克隆”命令和“修改改變路徑擴展筆觸”命令我也存在同樣的困惑，因此做好實驗前的準備是順利地完成實驗的關鍵。

實驗十三：繪制一個效果圖

一、實驗目的及要求：

本上機實訓的目的是繪制一個效果圖。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

繪制一個效果圖。

四、實驗方法與步驟

1)用橢圓工具和鋼筆工具分別繪制出企鵝的身體和翅膀。

2)執行“修改組合路徑聯合”命令，聯合途徑，并填充為黑色。

3)用橢圓工具繪制眼睛，并用鋼筆工具構出腳丫、嘴、圍巾、和肚皮，并填充相應的顏色。

4)將所有的部分放到相應的位置，本例制作完畢。

五、實驗結果

六、討論與結論

這個實驗很多要用到橢圓工具和鋼筆工具，因此要先熟悉地掌握他們的使用方法，多看課本并進行一些實驗操作能比較快地掌握它們的使用方法。實驗時要分別地繪制出企鵝各部分的圖形元件然后執行“修改組合路徑聯合”命令，聯合途徑，因此在實驗切記不能把整個圖象作為繪制的對象，否則就不能達到實驗效果，操作的難度也會加大。同時對 “修改組合路徑聯合”命令要深入了解才能在適當的時間和位置使用。

實驗十四：創建管道圖像

一、實驗目的及要求：

本實例是創建一個如管道圖像，并通過“優化”面板對圖像進行優化導出。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建一個如管道圖像，并通過“優化”面板對圖像進行優化導出。

四、實驗方法與步驟

1)新建一個圖像文檔，繪制一個矩形，并將其設置為線性填充。

2)用鋼筆工具繪制一個路徑，并將其設置為放射狀填充，作為管道的拐角。

3)復制所創建的拐角和線性矩形，并進行縮放和組合。

4)選擇“垂直線3”紋理“25%”設置為粗管道。

5)設置一幅背景圖像，用鋼筆工具勾畫出閃光的效果。執行“窗口優化”命令，將“優化”面板進行設置。

6)設置完成后，執行“文件導出”命令，在“導出”對話框中選擇導出的路徑，完成后單擊“保存”按鈕。

五、實驗結果

六、討論與結論

橫向的管道繪制比較簡單，效果也比較明顯，豎向和拐角的管道繪制的難度很大，經常做了對多次還不能達到理想的效果，由也反應了我們對實驗工具的熟練程度不夠，在今后的學習中要加強這方面的學習。填充設置和“垂直線3”紋理“25%”設置是達到實驗效果關鍵，因此要認真地了解它代表的意義，然后認真地進行設置。正確地選擇背景圖像，也是達到實驗效果的關鍵。

實驗十五：創建圖像熱點和切片

一、實驗目的及要求：

本實訓的主要目的是創建圖像熱點和切片。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建圖像熱點和切片。

四、實驗方法與步驟

1)打開，執行“文件打開”命令，打開一幅圖像。

2)使用矩形熱點工具在圖像的文字位置處創建熱點鏈接。

3)分別選擇矩形切片工具和多邊形切片工具，在圖像中創建切片。

4)執行“文件導出”命令，在“導出”對話框中選擇切片和HTML文檔。打開導出的HTML文件觀看。

五、實驗結果

六、討論與結論

這個實驗的操作相對比較簡單，花費的時間也比較少。在實驗中能明顯地體會到實驗的效果但是在預覽后很難看出處理后的圖像和原始圖像的區別，因此常常產生實驗失敗的錯覺，就因為這個錯覺我進行了多次的實驗，最后與其他同學討論過才發現這是實驗的正常現象，因此在實驗中多與同學交流是學習的好方法。

實驗十六：其他動畫制作及圖形處理軟件介紹

一、實驗目的及要求：

本實訓的主要目的是了解其他動畫制作及圖形處理軟件的基本使用。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝Windows Xp操作系統;建立IIS服務器環境，支持ASp。

3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟件;

4、安裝Acdsee、photoshop等圖形處理與制作軟件;

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

了解其他動畫制作及圖形處理軟件的基本使用。

四、實驗方法與步驟

根據教師所介紹的其他動畫制作及圖形處理軟件，進行相關的基本使用操作。本實驗可以與其它實驗相結合進行。

1)AcdSee圖形處理軟件

2)SWFText(Flash文字制作工具)1.2 Raindy漢化修正版軟件使用

五、實驗結果

六、討論與結論

這個軟件是一個簡單易懂的軟件，操作起來也比較方便，相對于pHOTOSHOp軟件這個軟比較達到效果，但是這個軟件的能動性比較低，我們只能被動地使用里面所包含的各項設置但是不能能動地繪制自己想要的圖片，各項屬性的設置也是只能從中選擇。因此如果只是簡單的制作可以采用這個軟件，但是如果想做自己特色的東西就要選擇更高級點的軟件。

xiexiebang.com范文大全將繼續為您提供關于網頁制作實驗報告格式的文章，請繼續關注xiexiebang.com范文網。

第三篇：網頁制作實驗報告

網頁制作實驗報告

實驗一：站點設置

一、實驗目的及要求

本實例是通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windowsxp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweavermx；flashmx；fireworksmx）等網頁設計軟件；

三、實驗原理

通過“站點定義為”對話框中的“高級”選項卡創建一個新站點。

四、實驗方法與步驟

1）執行“站點＼管理站點”命令，在彈出的“管理站點”對話框中單擊“新建”按鈕，在彈出的快捷菜單中選擇“站點”命令。

2）在彈出的“站點定義為”對話框中單擊“高級”選項卡。

3）在“站點名稱”文本框中輸入站點名稱，在“默認文件夾”文本框中選擇所創建的站點文件夾。在“默認圖象文件夾”文本框中選擇存放圖象的文件夾，完成后單擊“確定”按鈕，返回“管理站點”對話框。

4）在“管理站點”對話框中單擊“完成”按鈕，站點創建完畢。

五、實驗結果

六、討論與結論

實驗開始之前要先建立一個根文件夾，在實驗的過程中把站點存在自己建的文件夾里，這樣才能使實驗條理化，不至于在實驗后找不到自己的站點。在實驗過程中會出現一些選項，計算機一般會有默認的選擇，最后不要去更改，如果要更改要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟件是做好該實驗的關鍵。

實驗二：頁面圖像設置

一、實驗目的及要求：

本實例的目的是設置頁面的背景圖像,并創建鼠標經過圖像。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windowsxp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweavermx；flashmx；fireworksmx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

設置頁面的背景圖像,并創建鼠標經過圖像。

四、實驗方法與步驟

1)在“頁面屬性”對話框中設置頁面的背景圖像。

2)在頁面文檔中單擊“”插入鼠標經過圖像。

五、實驗結果

六、討論與結論

實驗結束后我們可以看到頁面的背景變成了我們插入的圖像，并且要鼠標經過的時候會變成另一個圖像，這就是鼠標經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現出來。這個實驗的關鍵在于背景圖像的選擇，如果背景圖像太大不僅會影響網頁的打開速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。

實驗三：表格制作

一、實驗目的及要求：

本實例是要創建邊框為1像素的表格。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windowsxp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweavermx；flashmx；fireworksmx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建邊框為1像素的表格。

四、實驗方法與步驟

1)在文檔中，單擊表格“”按鈕，在對話框中將“單元格間距”設置為“1”。

2)選中插入的表格，將“背景顏色”設置為“黑色”（#0000000）。

3)在表格中選中所有的單元格，在“屬性”面版中將“背景顏色”設置為“白色”（#ffffff）。

4)設置完畢，保存頁面，按下“f12”鍵預覽。

五、實驗結果

六、討論與結論

本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在于表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。“表格寬度”文本框右側的表格的寬度單位，包括“像素”和“百分比”兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設置錯誤就會嚴重影響實驗效果。

實驗四：創建錨點鏈接

一、實驗目的及要求：

本實例的目的是創建錨點鏈接。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windowsxp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweavermx；flashmx；fireworksmx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

創建錨點鏈接。

四、實驗方法與步驟

1)在頁面中插入1行4列的表格，并在各單元格中輸入導航文字。

2)分別選中各單元格的文字，單擊“”按鈕，在彈出的“超級鏈接”對話框上的“鏈接”文本框分別輸入“#01”“#02”“#03”“#04”。

3)在文檔中輸入文字并設置錨記名稱“01”，按下“enter”鍵換行，輸入一篇文章。

4)在文章的結尾處換行，輸入文字并設置錨記名稱“02”，按下“enter”鍵換行，輸入一篇文章。

5)同樣的方法在頁面下文分別輸入文字和命名錨記為“03”和“04”，并輸入文章。

6)保存頁面，按下“f12”鍵預覽。

五、實驗結果

六、討論與結論

添加瞄記的作用是可以幫讀者快速找到自己想要的文章，同時也可以使頁面更加精簡。本實驗的關鍵難點在于鏈接文本框輸入的名稱和瞄記的名稱要相一致才能達到實驗的效果，同時要記得是在上一篇文章的結尾處輸入文字并設置瞄記名稱，并記得輸入對應的文章，否則瞄記可能不能用。熟練程度低在實驗中不能很好地使用各種工具，無法一次準確地尋找到適當的位置。實驗中忘記選擇“不可見元素”，幾次實驗都失敗，最后才得出正確的結論。因此在實驗前要先做好預習，否則實驗過程會比較吃力。

實驗五：設置css樣式

一、實驗目的及要求：

本實例的目的是通過設置css樣式創建表格的虛線邊框。

二、儀器用具

1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯網。

2、安裝windowsxp操作系統；建立iis服務器環境，支持asp。

3、安裝網頁三劍客（dreamweavermx；flashmx；fireworksmx）等網頁設計軟件；

4、安裝acdsee、photoshop等圖形處理與制作軟件；

5、其他一些動畫與圖形處理或制作軟件。

三、實驗原理

通過設置css樣式創建表格的虛線邊框。

四、實驗方法與步驟

1)在網頁中創建一個表格。

2)在“css樣式”面板中單擊“”按鈕，在彈出的對話框中進行設置，完成后單擊“確定”按鈕。

3)在彈出的對話框中進行設置，完成后單擊“確定”按鈕。

五、實驗結果

六、討論與結論

對話框中各項指標和屬性的設置存在一定的難度，如果沒熟練掌握就容易出錯使實驗失敗。對“ccs”樣式所要使用的各種按扭不夠熟悉在使用的時候覺得很生硬。這個實驗成功的關鍵在于對軟件的掌握程度以及對各種屬性的認識程度，只要充分地掌握了軟件的各種操作，對各屬性所代表的含義有充分的認識就能很好地完成這個實驗。

實驗六：創建表單

一、實驗目的及要求：

本實例的目的是創建一個募捐表單。

第四篇：簡單網頁制作實驗報告

《大學計算機基礎》 專業名稱學號:xxxxxxxxxxx 姓名:xx 指導教師:xx 實驗報告

2011年12月24日

目 錄

第一章 網站主題設計說明.....................1

1.1 主題內容..........................1

1.2 設計思路....................1

第二章 網站內容設計.................2

1.1 鏈接1標題........................2

1.2 鏈接2標題.........................2

1.3 flash制作說明......................2

第三章 網站技術難點................3

第四章 心得體會..................................4

第一章網站主題設計說明

1.1主題內容….……................1

網站主題為“四季の花”，包括春夏秋冬四個季節的比較典型的花朵及有關花的詩句，色彩繽紛，十分艷麗奪目。

1.2設計思路………………………………………………2

大多網站都設計的關于音樂，影視，購物等非常熱門的東西，本站設計的主題是花，能讓人們在閑下來的時候看看花，品品詩歌，所以做有關花的網頁是個不錯的選擇。同時，讓人們分清楚春夏秋冬都各有什么典型的花。

第二章 網站內容設計

1.1鏈接1標題：春の花

春天是生命的季節，在這個季節里，萬物復蘇。所以就找了虞美人，桃花，牡丹，以及海棠花來作為春天的代表。同時配有與這些花有關的詩句。

1.2 鏈接2標題：夏の花

夏天充滿了激情與陽光，我找了蘭花，荷花，百合花等來代表這個季節，色彩艷麗，十分醒目奪人。

1.3 鏈接3標題：秋の花

大麗花，菊花，月季和牡丹花都競相出現在本網頁，色彩繽紛，賞心悅目。

1.4 鏈接4標題：冬の花

蝴蝶蘭，水仙，迎春花，梅花是冬季的代表，他們刻畫了一副傲立冬天的堅強的姿態。

網站技術難點

在制作網頁時，要插入很多的圖片，而為了清晰，圖片都是尺寸比較大的，所以每次插入圖片時都要進行調整圖片小這一工作，十分麻煩。同時為了觀看網頁方便，我便每頁都創建了可以連接到任意網頁的導航欄，所以此工作也是十分繁瑣麻煩的。網頁的布局同時也是一個難點，為了美觀，則要不斷調整各圖片的大小，色彩搭配以及很多背景色及字體顏色。還有，對于素材的選取也要認真篩選，否則整個網頁做完 看上去十分不協調。

心得體會

制作網頁是一個循序漸進的過程，我們要在不斷練習的過程中，學會怎樣去連接，怎么去插入圖片，怎么選擇一個合適的背景，使得整體的網頁更加和諧自然。同時，為了使所做的網頁更加充實，我們還要在內容上添加一些詩歌呀，文章等文字性的東西。色彩的搭配，文字的大小，以及所作網頁的大小，每一點都是十分重要的，所以只有在每一點都認真的考慮衡量之后，最終做出的網頁才會很賞析悅目，獨具特色，并且很好的詮釋所作網頁的主題。

所以，多方面的衡量才能做出一份好的網頁，我們一定要多練習才能提高自己的網頁制作水平。

第五篇：網頁制作實驗報告完成步驟

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

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

年級：2008級（必修）

學號：2008姓名：專業：

一、實驗題目

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

說明：

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

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

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

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

二、實驗目的和要求

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

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

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

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

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

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

三、實驗方法

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

1．確定主題和收集資料

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

2．規劃網站和新建站點

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

3．制作素材和單個網頁

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

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

4．制作首頁和建立鏈接

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

5．調試運行

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

四、實驗環境

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

五、實驗步驟

請填寫網站分析與設計的實驗步驟。

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

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

……

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

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

……

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

……

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

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

……

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

1．確定主題和收集資料

本網站的主題：……

欄目或三級目錄：……

2．規劃網站和新建站點

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

……

圖2 自制網站的樹型目錄或站點結構

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

（1）素材制作

……

（2）網頁制作

……

（3）建立數據庫

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

……

5．調試運行

調試和運行情況：……