web網(wǎng)站開發(fā)實驗報告

西安理工大學實驗報告

成績第1頁（共4頁）課程：Web網(wǎng)站開發(fā)實驗日期：201*年6月11日專業(yè)班號：組別：交報告日期：201*年6月14日姓名：學號：報告退發(fā)：（訂正、重做）同組者：教師審批簽字：一、實驗性質(zhì)

設計型實驗（2學時）

二、實驗目的

通過實驗，使學生理解表單驗證及網(wǎng)頁布局設計的基本思路，掌握表單驗證及網(wǎng)頁布局設計的基本方法，通過表單驗證和網(wǎng)頁布局的聯(lián)系，進一步理解網(wǎng)站開發(fā)的基本思路，并能夠根據(jù)應用需求設計一個合理的網(wǎng)頁來解決實際問題，提高學生的動手能力以及理論與實踐相結(jié)合的能力。

三、實驗任務

1．掌握網(wǎng)頁布局的基本思路和方法。2．掌握表單驗證的基本思路和方法。

四、實驗準備

復習教材中有關網(wǎng)頁布局及表單驗證的內(nèi)容，仔細閱讀和分析教材中的例子。

五、實驗內(nèi)容

1．網(wǎng)頁布局

應用Dreamweaver程序?qū)�網(wǎng)頁進行布局。

（1）選擇“文件”|“新建”命令，在彈出的對話框中新建一個網(wǎng)頁，名為bd.html，在“文檔”工具欄中將網(wǎng)頁的標題設置為“表單應用”。（2）插入一個2行1列表格（表格1），表格寬度為“98%”，邊框為“0”。（3）在表格1的第一個單元格中輸入文字“表單應用”，設置該文字字體為“隸書”，大小為“36”像素，前后都插入圖片logo_3.jpg。

（4）將光標定位在表格1的第二個單元格中，選擇“插入”|“表單”|“表單”命令，在該單元格中插入一個表單域。

（5）在表單域中插入一個15行2列的表格（表格2）。表格寬度為500像素，邊框為“1”，間距為“0”。將該表格的左邊列所有單元格的寬度設置為“90”像素，前9行單元格高度設

置為“30”。

（6）將表格2的第一行合并為一個單元格，設置單元格水平對齊方式為“居中對齊”，背景顏色為“#DF3071”。在單元格中輸入文字“請完成以下內(nèi)容的填寫”，設置文字的大小為“18”像素，顏色為“白色”。

（7）將表格2的左邊列各單元格的水平和垂直對齊方式都設置為“居中”對齊，并分別輸入文本信息：昵稱、密碼、確認密碼、性別、籍貫、出生日期、電子郵箱、聯(lián)系電話、個人愛好、照片和備注，如下圖所示：

（8）將光標定位在第二行第二個單元格中，單擊“插入”工具欄上的“表單”類別，然后單擊“文本字段”按鈕，在彈出的對話框中單擊“確定”按鈕即在單元格中插入了一個單行文本框。設置該文本字段的字符寬度為“24”。在文本字段后輸入“*”。效果如下圖：

（9）用同樣的方式在“密碼”和“確認密碼”后插入文本框。選中文本框，在“屬性”面板中設置名稱為psw，字符寬度設置為24，最多字符數(shù)為12，類型設置為“密碼”。屬性如下圖所示:

(10)將光標定位在性別后的單元格中，單擊“插入”工具欄上的“表單”類別，然后單擊

“單選按鈕”按鈕，在輔助功能屬性窗口中的標簽文字中輸入“男”，如下圖所示。確定后則在單元格中插入了一個單選按鈕。

設置剛插入的單選按鈕的名稱為sex，選定值為1，初始狀態(tài)為“已勾選”，如圖所示：

（11）用同樣的方法在男的后面插入一個單選按鈕，在“屬性”面板中設置單選按鈕的名稱為sex，選定值為2，初始狀態(tài)為“未選中”，并在該按鈕后輸入文本“女”。最后效果如下圖所示：

（12）將光標定位在籍貫后的單元格中。單擊“列表/菜單”按鈕，則在插入點添加一個菜單，在菜單的“屬性”面板中設置名稱為”jg”，類型為“菜單”。在“列表值”對話框中添加項目如下圖所示。

設置好列表值后，在“屬性”面板中設置初始化時選定“四川”。在菜單后輸入文字“�。ㄊ校�”。最后效果如下圖所示：（13）用同樣的方法設置出生日期如下圖所示：

（14）參考昵稱后文本字段的方法設置“電子郵箱”和“聯(lián)系電話”，效果如下圖所示：

（15）將光標定位在個人愛好后的單元格中，插入復選框。將插入的復選框名稱設置為hobby，選定值設置為internet，初始狀態(tài)為“未選中”，并在復選框后輸入文本“網(wǎng)絡”。用同樣的方式插入其他復選框，名稱都設置為hobby，選定值分別為：music、travel、read、sports和draw。外觀效果如下圖所示：

（16）將光標定位在照片后的單元格中，插入“文件域”。外觀效果如下圖所示：

（17）將光標定位在備注后的單元格中，單擊“文本區(qū)域”按鈕，在插入點添加一個文本區(qū)域?qū)ο�。在“屬性”面板中設置插入文本區(qū)域的字符寬度為40，行數(shù)為5，換行為“默認”。

（18）在表格2的第13行右邊單元格中輸入以下文字：1.請?zhí)顚懮厦娴牡母黜梼?nèi)容。2.帶星號的項目為必填項。3.謝謝您提交以上重要信息。

（19）將表格2的第14行合并為一個單元格。設置單元格水平對齊方式為“居中對齊”，背景顏色為“#DF3071”。在單元格中輸入文字“填寫完成后，選擇下面的”提交“按鈕提交表單�！�，設置文字的大小為“14”像素，顏色為“白色”。（20）將表格2的最后一行合并為一個單元格，在“插入”工具欄中單擊按鈕，將插入的按鈕值設為“提交”，動作設為“提交表單”，用同樣的方法插入第二個按鈕，將該按鈕的動作設置為“重置表單”。效果如下圖：

（21）保存文件。（22）設置超鏈接

打開Frameset.html文件。在該框架文件的左邊導航列表中選中文字“表單應用”，設置

超鏈接文件為“bd.html”，目標為“mainFrame”。屬性如下圖所示：

（23）在瀏覽器中預覽效果。

2．表單驗證

對已做成的網(wǎng)頁中“昵稱”、“密碼”、“確認密碼”和“電子郵件”進行非空驗證。下面以“電子郵件”為例，對其進行非空驗證。functionfunCheck(){

if(document.form1.text4.value==""){alert("“電子郵件”不能為空。")returnfalse}else{returntrue}}

六、實驗總結(jié)

通過這次實驗，我才真正理解了“紙上得來終覺淺，絕知此事要躬行�！边@句話的真諦。在網(wǎng)頁布局部分，出現(xiàn)的問題不大，主要是將網(wǎng)頁能夠設計得美觀一些；在表單驗證部分，出現(xiàn)的問題主要是不知道將編寫好的alert程序放入代碼中的位置。為了能夠做出最終驗證的結(jié)果，我試了許多次，不斷通過Web瀏覽器進行修改。其實沒找到正確的位置主要是因為沒有注意到標記。最終，經(jīng)過自己的一番努力還是做出了非空驗證的效果。

擴展閱讀：Web網(wǎng)站開發(fā)技術實訓報告

數(shù)碼商城網(wǎng)站開發(fā)實訓報告系、班級：學號：姓名：指導老師：07級電商（1）班201*201*0109*********

201*年6月

目錄

一、網(wǎng)站建設基本流程……………………………………….1二、網(wǎng)站域名及網(wǎng)站技術規(guī)范………………………………1三、網(wǎng)站的基本功能和內(nèi)容…………………………………1四、網(wǎng)站優(yōu)化……………………………………….………2五、網(wǎng)頁模版設計……………………………………….…2六、網(wǎng)站運營維護……………………………………….…3七、補充內(nèi)容……………………………………….………37-1、網(wǎng)站規(guī)劃……………………………………….…37-2、菜單設置……………………………………….…37-3、網(wǎng)站首頁……………………………………….…37-4、網(wǎng)頁字體和美工………………………………….…4八、網(wǎng)站建設中必須克服的問題……………………….……48-1、網(wǎng)站規(guī)劃和欄目設置要合理……………………….…48-2、重要的信息要完整……………………………….…48-3、網(wǎng)頁信息量要足夠……………………………….…48-4、欄目層次要過深……………………………….……4

1、網(wǎng)站建設基本流程規(guī)范

網(wǎng)站建設包含下列基本流程：

（1）制定網(wǎng)站規(guī)劃方案：包括網(wǎng)站預期目標、行業(yè)競爭狀況分析、網(wǎng)站欄目結(jié)構(gòu)、用戶行為分析及內(nèi)容規(guī)劃、網(wǎng)頁模版設計、網(wǎng)站服務器技術選型、網(wǎng)站運營維護規(guī)范等基本內(nèi)容；

（2）網(wǎng)站技術開發(fā)、網(wǎng)頁設計；

（3）網(wǎng)站測試；（4）網(wǎng)站內(nèi)容發(fā)布；（5）網(wǎng)站維護及管理。

2、網(wǎng)站域名及網(wǎng)站技術規(guī)范

（1）采用基于XHTML的國際WEB標準（CSS+DIV）；（2）網(wǎng)站首頁為頂級域名而不是多級層次；

（3）網(wǎng)站首頁及各欄目和內(nèi)容頁面均不采用網(wǎng)址跳轉(zhuǎn)方式，不采用過渡頁/橋頁等網(wǎng)址重定向；

（4）合理應用靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁，網(wǎng)站欄目首頁和其他重要頁面采用靜態(tài)網(wǎng)頁；

（5）網(wǎng)頁內(nèi)容頁面層次不宜過多，不超過四個層次；（6）采用主流域名：.cn、.com.cn、.com等；

（7）一個網(wǎng)站對應一個主域名，現(xiàn)有多個域名需統(tǒng)一；

（8）網(wǎng)站鏈接錯誤率在一定范圍之內(nèi)，首頁等重要頁面無死鏈接；（9）網(wǎng)站設計對不同瀏覽器具有兼容性。

3、網(wǎng)站的基本功能和內(nèi)容

（1）與百度實現(xiàn)無縫鏈接；

（2）具有信息發(fā)布、產(chǎn)品發(fā)布和管理功能；（3）產(chǎn)品推薦/廣告管理功能；（4）詳細的聯(lián)系方式；

（5）合理的產(chǎn)品分類/匯總/列表；（6）詳細的產(chǎn)品介紹內(nèi)容；

（7）銷售及售后服務相關的聯(lián)系和服務信息；（8）在線服務信息；（9）持續(xù)更新的產(chǎn)品動態(tài)/產(chǎn)品信息；（10）相關網(wǎng)站鏈接管理功能；（11）規(guī)范的網(wǎng)站地圖；（12）網(wǎng)站訪問統(tǒng)計功能。

4、網(wǎng)站優(yōu)化

網(wǎng)站優(yōu)化包括三個方面：對用戶獲取信息優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站維護優(yōu)化。（1）網(wǎng)站欄目結(jié)構(gòu)合理，欄目設置不要過于復雜；

（2）網(wǎng)站導航清晰且全站統(tǒng)一，通過任何一個網(wǎng)頁可以逐級返回上一級欄目直到首頁；（3）網(wǎng)頁布局設計合理，網(wǎng)站設計符合用戶瀏覽習慣；（4）重要文字信息盡可能出現(xiàn)在網(wǎng)頁靠前位置；（5）字體清晰，CSS風格協(xié)調(diào)一致；（6）最多3次點擊可到達產(chǎn)品詳細內(nèi)容頁面；

（7）通過網(wǎng)站任何一個網(wǎng)頁不超過3次點擊可達到站內(nèi)其他任何一個網(wǎng)頁；（8）遵照搜索引擎為管理員提供的網(wǎng)站優(yōu)化指南，通過網(wǎng)站結(jié)構(gòu)和內(nèi)容等基本要素的優(yōu)化為搜索引擎檢索信息提供方便，不采用任何被搜索引擎視為垃圾信息的方法和欺騙搜索引擎的方式（如堆積關鍵詞、用戶不可見文本、頁面跳轉(zhuǎn)、復制網(wǎng)頁等等）；

（9）網(wǎng)站首頁、欄目首頁及產(chǎn)品內(nèi)容頁面均有一定的文字信息量；（10）每個網(wǎng)頁有獨立的、可概括說明該網(wǎng)頁核心內(nèi)容的網(wǎng)頁標題（而不是全站或者一個欄目共用一個網(wǎng)頁標題）；

（11）每個網(wǎng)頁有獨立的、與該網(wǎng)頁內(nèi)容相關的META標簽設計（包括description和keywords）；

（12）每個網(wǎng)頁有獨立的URL；

（13）產(chǎn)品內(nèi)容頁面URL盡可能簡短且體現(xiàn)出產(chǎn)品屬性；（14）產(chǎn)品/新聞詳細內(nèi)容頁面是獨立網(wǎng)頁不是彈出窗口；（15）對于產(chǎn)品品種多的網(wǎng)站，要有合理的產(chǎn)品分頁方式；（16）網(wǎng)站內(nèi)容保持適當?shù)母�新周期�?/p>

5、網(wǎng)頁模版設計

（1）重要信息盡可能出現(xiàn)在用戶最關注的位置；（2）網(wǎng)頁寬度定位適應當前主流屏幕分辨率模式；（3）保持整站CSS風格一致；

（4）超級鏈接有下劃線或顏色的明顯指示；

（5）整個網(wǎng)站中在新窗口打開或原窗口打開網(wǎng)頁的規(guī)則一致；（6）網(wǎng)站首頁字節(jié)數(shù)不宜過大；

（7）多語言版本網(wǎng)站內(nèi)容之間的切換方式設計合理。

6、網(wǎng)站運營維護

（1）建立網(wǎng)站內(nèi)容發(fā)布審核機制，始終保持網(wǎng)站內(nèi)容的合法性；（2）保持網(wǎng)站服務器正常工作，對網(wǎng)站訪問速度等進行日常跟蹤管理；（3）保持合理的網(wǎng)站內(nèi)容更新頻率；

（4）網(wǎng)站內(nèi)容制作符合網(wǎng)站優(yōu)化所必須具備的規(guī)范；（5）重要信息（如數(shù)據(jù)庫等、訪問日志等）的備份機制；

（6）保持網(wǎng)站重要網(wǎng)頁的持續(xù)可訪問性，不受網(wǎng)站改版等原因的影響；（7）對網(wǎng)站訪問統(tǒng)計信息定期進行跟蹤分析。

7、要求內(nèi)容補充：

由于網(wǎng)絡營銷環(huán)境和用戶行為在不斷發(fā)展變化，網(wǎng)站需要增強適應性，可通過改版、重建等方式進行網(wǎng)站升級。在網(wǎng)站建設技術標準方面，遵照國際WEB標準，不再使用過時的HLML4.01；在網(wǎng)站運營支持方面，融入目前居于領先地位的網(wǎng)站優(yōu)化思想和方法，使得遵照規(guī)范建設的網(wǎng)站全面符合主流搜索引擎的優(yōu)化指南，具有明顯的搜索引擎優(yōu)化優(yōu)勢。

1.網(wǎng)站規(guī)劃：整體規(guī)劃合理，主輔菜單要不清晰；網(wǎng)站建設導向明確，重點突出；欄目適應；各欄目統(tǒng)一規(guī)劃，整個網(wǎng)站比較清晰；網(wǎng)站的促銷功能得到明顯體現(xiàn)。

2.菜單設置：菜單采用不宜圖片形式，圖標標識明確，有文字說明，不要用戶移動鼠標進行猜測；菜單層次不宜過多，有效信息層次要少，不需要多次點擊才能找到有效信息；過多采用鼠標響應式菜單，欄目設置不合理，使得用戶難以發(fā)現(xiàn)需要的信息；欄目設置有重疊；欄目名稱意義不明確，容易造成混淆；全flash首頁和菜單，無法優(yōu)化處理，也沒有相應的文字說明，不采用。欄目清晰夠用，但重要信息完整，充分體現(xiàn)有效信息。3.網(wǎng)站首頁：少采用大型圖片，用戶關心的信息在首頁體現(xiàn)，不應多次點擊；首頁下載速度要快；首頁有效信息量豐富；首頁有標題；?提供一種以上外語鏈接頁面。主頁布局比整潔，重要信息得以重點體現(xiàn)；打開網(wǎng)頁不宜彈出多個窗口，影響正常瀏覽；不要刻意追求“創(chuàng)意”效果，以至于很難理解網(wǎng)站要表達的意思。

頁面信息：重要信息完整，如聯(lián)系方式和產(chǎn)品介紹等；頁面信息足夠，減少多次翻頁；去除與企業(yè)形象、產(chǎn)品、促銷等方面無關的信息；防止產(chǎn)品詳細介紹內(nèi)容過少；內(nèi)容頁面沒有標題，或者全部使用公司名為標題；客戶能夠方便的及時維護補充，保持其時效性；不允許有無任何內(nèi)容的欄目。

4.網(wǎng)頁字體和美工：注重美術效果，但不必大量采用圖片，影響網(wǎng)頁下載速度；注重美觀，但有些連基本信息內(nèi)容都不可用圖片格式，影響基本信息獲�。晃淖诌m中、顏色明晰、不影響正常視覺；頁面不應過于花哨。

8、網(wǎng)站建設中必須克服的問題：

（1）網(wǎng)站規(guī)劃和欄目設置要合理：主要表現(xiàn)在欄目設置不應有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發(fā)現(xiàn)需要的信息，避免欄目過于繁多和雜亂、網(wǎng)站導航系統(tǒng)混亂；

（2）重要的信息要完整：企業(yè)介紹、聯(lián)系方式、產(chǎn)品分類和詳細介紹、產(chǎn)品促銷等是企業(yè)網(wǎng)站最基本的信息，企業(yè)網(wǎng)站上這些重要信息完整；

（3）網(wǎng)頁信息量要足夠：包括兩種情況：一種頁面上的內(nèi)容，或者將本來一個網(wǎng)頁可以發(fā)布的內(nèi)容不可分為多個網(wǎng)頁，而且各網(wǎng)頁之間必須有相互鏈接，不需要再次點擊主頁；另一方面是盡管內(nèi)容總量不少，但有用的信息少，籠統(tǒng)介紹的內(nèi)容多；

（4）欄目層次要過深。重要的信息應該出現(xiàn)在最容易被用戶發(fā)現(xiàn)的位置，應盡可能縮短信息傳遞的渠道，以使企業(yè)信息更加有效地傳遞給用戶；

友情提示：本文中關于《web網(wǎng)站開發(fā)實驗報告》給出的范例僅供您參考拓展思維使用，web網(wǎng)站開發(fā)實驗報告：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《web網(wǎng)站開發(fā)實驗報告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/713216.html

• 上一篇：《Android開發(fā)基礎》學習報告
• 下一篇：空乘就業(yè)前準備的調(diào)查報告