導航:首頁 > 萬維百科 > 網頁設計實驗

網頁設計實驗

發布時間:2020-07-31 15:38:48

1、製作網頁設計選擇題的實驗步驟?

最簡單的方法就是每道題目用一個獨立的網頁來表達。就是說你將題目寫死在頁面上。然後在頁面上設立一個hidden欄位來存儲這道題的正確答案。當用戶點擊這個某個答案的時候,用javascript來捕捉按鈕點擊事件,將事件觸發時得到的結果和你內部的hidden欄位裡面的值進行比較。若要統計總共答對題目的個數,我想可以通過地址後面加「?」的方法去取得,同樣存在javascripte中。

2、網頁設計與製作實驗

這個要求還是不難的,不過製作報告還是只有自己來寫的。可以自己提供素材,才能百分百原創。支持在線預覽效果。

3、高分求網頁製作實驗報告!!!

http://www.4oa.com/bggw/sort02902/sort02954/184825.html
網頁製作實驗報告

實驗一:站點設置

一、實驗目的及要求

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

二、儀器用具

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) 在彈出的對話框中進行設置,完成後單擊「確定」
後面的看我發的那個網站!

4、三個簡單的HTML實驗,麻煩高手做下!

雖然簡單,但敲的太多,
而且還是匿名,
分加了再做!

5、小型 網頁製作 作業

已發送,請查收!

6、網頁製作div+css實驗報告

DIV+CSS是網站標准(或稱「WEB標准」)中常用術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標准中,不再使用表格定位技術,而是採用DIV+CSS的方式實現各種定位。SEO是指搜索引擎優化,主要就是通過對網站的結構、標簽、排版,關鍵字等各方面的優化,使搜索引擎更容易抓取網站的內容,並且讓網站的各個網頁在等搜索引擎中獲得較高的評分,從而獲得較好的排名。DIV+CSS網頁布局對SEO有很重要的影響。具體來看到底有什麼好處呢?
DIV+CSS的網頁布局對SEO的好處一、不存在表格的嵌套問題
很多「網站如何推廣」的文章中稱,搜索引擎一般不抓取三層以上的表格嵌套,這一點一直沒有得到搜索引擎相關的官方證實。我的幾項實驗結果沒有完全出來,但根據目前掌握的情況來看,Spider爬行Table布局的頁面,遇到多層表格嵌套時,會跳過嵌套的內容或直接放棄整個頁面。
使用Table布局,為了達到一定的視覺效果,不得不套用多個表格。如果嵌套的表格中是核心內容,蜘蛛(Spider)爬行時跳過了這一段沒有抓取到頁面的核心,這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。
DIV+CSS的網頁布局對SEO的好處二、精簡的代碼
使用DIVCSS布局,頁面代碼精簡,這一點相信對XHTML有所了解的都知道。觀看更多的HTML教程內容。
代碼精簡所帶來的直接好處有兩點:一是提高蜘蛛(Spider)爬行效率,能在最短的時間內爬完整個頁面,這樣對收錄質量有一定好處;二是由於能高效的爬行,就會受到蜘蛛(Spider)歡迎,這樣對收錄數量有很大好處。

而DIV+CSS布局基本上不會存在這樣的問題,從技術角度來說,XHTML在控制樣式時也不需要過多的嵌套。
這雖然沒有得到確認,但還是建議使用Table布局的朋友們,在設計時盡可能的不要使用多層表格嵌套,SEOer(seo工作者們)們在文章中說明了這一點,相信他們也不是沒有依據。
DIV+CSS的網頁布局對SEO的好處三、對搜索引擎的排名
基於XTHML標準的DIV+CSS布局,一般在設計完成後會盡可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面,但事實證明使用XTHML架構的網站排名狀況一般都不錯。
DIV+CSS的網頁布局對SEO的好處四、提高網頁的訪問速度
DIV+CSS布局較Table布局減少了頁面代碼,載入速度得到很大的提高,這在蜘蛛(Spider)爬行時是非常有利的。過多的頁面代碼可能造成爬行超時,蜘蛛(Spider)就會認為這個頁面無法訪問,影響收錄及權重。
真正的SEOer(seo工作者們)不只是為了追求收錄、排名,快速的響應速度是提高用戶體驗度的基礎,這對整個搜索引擎優化及營銷都是非常有利的。

換一個角度拋開DIV+CSS對SEO的有利影響.單獨來講這種div+css布局也是很有益的,可以說是實下是最流行的網頁布局方式.可是加快我們網站的速度,便於管理與修改.當然div+css布局也有不完善的方面,比如說,他的css樣式表與各種瀏覽器之間的不兼容問題.當然如果你是div+css高手的話相信這個不難吧!

與網頁設計實驗相關的知識