網頁製作實驗報告
網頁製作實驗報告
實驗一：站點設定
一、實驗目的及要求
本實例是通過「站點定義為」對話框中的「高級」選項卡建立一個新站點。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
三、實驗原理
通過「站點定義為」對話框中的「高級」選項卡建立一個新站點。
四、實驗方法與步驟
1）執行「站點＼管理站點」命令，在彈出的「管理站點」對話框中單擊「新增」按鈕，在彈出的快捷選單中選擇「站點」命令。
2）在彈出的「站點定義為」對話框中單擊「高級」選項卡。
3）在「站點名稱」文本框中輸入站點名稱，在「默認資料夾」文本框中選擇所建立的站點資料夾。在「默認圖象資料夾」文本框中選擇存放圖象的資料夾，完成後單擊「確定」按鈕，返回「管理站點」對話框。
4）在「管理站點」對話框中單擊「完成」按鈕，站點建立完畢。
五、實驗結果
六、討論與結論
實驗開始之前要先建立一個根資料夾，在實驗的過程中把站點存在自己建的資料夾裏，這樣才能使實驗條理化，不至於在實驗後找不到自己的站點。在實驗過程中會出現一些選項，電腦一般會有默認的選擇，最後不要去變更，如果要變更要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟體是做好該實驗的關鍵。
實驗二：頁面圖像設定
一、實驗目的及要求：
本實例的目的是設定頁面的背景圖像,並建立滑鼠經過圖像。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
設定頁面的背景圖像,並建立滑鼠經過圖像。
四、實驗方法與步驟
1) 在「頁面屬性」對話框中設定頁面的背景圖像。
2) 在頁面文檔中單擊「」插入滑鼠經過圖像。
五、實驗結果
六、討論與結論
實驗結束後我們可以看到頁面的背景變成了我們插入的圖像，並且要滑鼠經過的時候會變成另一個圖像，這就是滑鼠經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖裏表現出來。這個實驗的關鍵在於背景圖像的選擇，如果背景圖像太大不僅會影響網頁的開啟速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。
實驗三：表格製作
一、實驗目的及要求：
本實例是要建立框線為1像素的表格。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
建立框線為1像素的表格。
四、實驗方法與步驟
1) 在文檔中，單擊表格「」按鈕，在對話框中將「單元格間距」設定為「1」。
2) 選中插入的表格，將「背景顏色」設定為「黑色」。
3) 在表格中選中所有的單元格，在「屬性」面版中將「背景顏色」設定為「白色」。
4) 設定完畢，儲存頁面，按下「f12」鍵預覽。
五、實驗結果
六、討論與結論
本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在於表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。「表格寬度」文本框右側的表格的寬度單位，包括「像素」和「百分比」兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設定錯誤就會嚴重影響實驗效果。
實驗四：建立錨點連結
一、實驗目的及要求：
本實例的目的是建立錨點連結。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
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、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
通過設定css樣式建立表格的虛線框線。
四、實驗方法與步驟
1) 在網頁中建立一個表格。
2) 在「css樣式」面板中單擊「」按鈕，在彈出的對話框中進行設定，完成後單擊「確定」按鈕。
3) 在彈出的對話框中進行設定，完成後單擊「確定」按鈕。
五、實驗結果
六、討論與結論
對話框中各項指標和屬性的設定存在一定的難度，如果沒熟練掌握就容易出錯使實驗失敗。對「ccs」樣式所要使用的各種按扭不夠熟悉在使用的時候覺得很生硬。這個實驗成功的關鍵在於對軟體的掌握程度以及對各種屬性的認識程度，隻要充分地掌握了軟體的各種操作，對各屬性所代表的含義有充分的認識就能很好地完成這個實驗。
實驗六：建立表單
一、實驗目的及要求：
本實例的目的是建立一個募捐表單。
實驗一：站點設定
一、實驗目的及要求
本實例是通過「站點定義為」對話框中的「高級」選項卡建立一個新站點。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
三、實驗原理
通過「站點定義為」對話框中的「高級」選項卡建立一個新站點。
四、實驗方法與步驟
1）執行「站點＼管理站點」命令，在彈出的「管理站點」對話框中單擊「新增」按鈕，在彈出的快捷選單中選擇「站點」命令。
2）在彈出的「站點定義為」對話框中單擊「高級」選項卡。
3）在「站點名稱」文本框中輸入站點名稱，在「默認資料夾」文本框中選擇所建立的站點資料夾。在「默認圖象資料夾」文本框中選擇存放圖象的資料夾，完成後單擊「確定」按鈕，返回「管理站點」對話框。
4）在「管理站點」對話框中單擊「完成」按鈕，站點建立完畢。
五、實驗結果
六、討論與結論
實驗開始之前要先建立一個根資料夾，在實驗的過程中把站點存在自己建的資料夾裏，這樣才能使實驗條理化，不至於在實驗後找不到自己的站點。在實驗過程中會出現一些選項，電腦一般會有默認的選擇，最後不要去變更，如果要變更要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟體是做好該實驗的關鍵。
實驗二：頁面圖像設定
一、實驗目的及要求：
本實例的目的是設定頁面的背景圖像,並建立滑鼠經過圖像。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
設定頁面的背景圖像,並建立滑鼠經過圖像。
四、實驗方法與步驟
1) 在「頁面屬性」對話框中設定頁面的背景圖像。
2) 在頁面文檔中單擊「」插入滑鼠經過圖像。
五、實驗結果
六、討論與結論
實驗結束後我們可以看到頁面的背景變成了我們插入的圖像，並且要滑鼠經過的時候會變成另一個圖像，這就是滑鼠經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖裏表現出來。這個實驗的關鍵在於背景圖像的選擇，如果背景圖像太大不僅會影響網頁的開啟速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。
實驗三：表格製作
一、實驗目的及要求：
本實例是要建立框線為1像素的表格。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
建立框線為1像素的表格。
四、實驗方法與步驟
1) 在文檔中，單擊表格「」按鈕，在對話框中將「單元格間距」設定為「1」。
2) 選中插入的表格，將「背景顏色」設定為「黑色」。
3) 在表格中選中所有的單元格，在「屬性」面版中將「背景顏色」設定為「白色」。
4) 設定完畢，儲存頁面，按下「f12」鍵預覽。
五、實驗結果
六、討論與結論
本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在於表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。「表格寬度」文本框右側的表格的寬度單位，包括「像素」和「百分比」兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設定錯誤就會嚴重影響實驗效果。
實驗四：建立錨點連結
一、實驗目的及要求：
本實例的目的是建立錨點連結。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網路，並且接入國際網際網路。
2、安裝windows xp作業系統；建立iis伺服器環境，支持asp。
3、安裝網頁三劍客等網頁設計軟體；
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、安裝網頁三劍客等網頁設計軟體；
4、安裝acdsee、photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
通過設定css樣式建立表格的虛線框線。
四、實驗方法與步驟
1) 在網頁中建立一個表格。
2) 在「css樣式」面板中單擊「」按鈕，在彈出的對話框中進行設定，完成後單擊「確定」按鈕。
3) 在彈出的對話框中進行設定，完成後單擊「確定」按鈕。
五、實驗結果
六、討論與結論
對話框中各項指標和屬性的設定存在一定的難度，如果沒熟練掌握就容易出錯使實驗失敗。對「ccs」樣式所要使用的各種按扭不夠熟悉在使用的時候覺得很生硬。這個實驗成功的關鍵在於對軟體的掌握程度以及對各種屬性的認識程度，隻要充分地掌握了軟體的各種操作，對各屬性所代表的含義有充分的認識就能很好地完成這個實驗。
實驗六：建立表單
一、實驗目的及要求：
本實例的目的是建立一個募捐表單。