網頁制作實驗報告范本

　　實驗一：站點設置

　　一、實驗目的及要求

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

　　二、儀器用具

　　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樣式創建表格的虛線邊框。

　　二、儀器用具

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

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

　　3、安裝網頁三劍客（dreamweaver mx；flash mx；fireworks mx）等網頁設計軟件；

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

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

　　三、實驗原理

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

　　四、實驗方法與步驟

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

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

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

　　五、實驗結果

　　六、討論與結論

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