web網(wǎng)站開發(fā)實(shí)驗(yàn)報(bào)告
西安理工大學(xué)實(shí)驗(yàn)報(bào)告
成績(jī)第1頁(yè)(共4頁(yè))課程:Web網(wǎng)站開發(fā)實(shí)驗(yàn)日期:201*年6月11日專業(yè)班號(hào):組別:交報(bào)告日期:201*年6月14日姓名:學(xué)號(hào):報(bào)告退發(fā):(訂正、重做)同組者:教師審批簽字:一、實(shí)驗(yàn)性質(zhì)
設(shè)計(jì)型實(shí)驗(yàn)(2學(xué)時(shí))
二、實(shí)驗(yàn)?zāi)康?/p>
通過(guò)實(shí)驗(yàn),使學(xué)生理解表單驗(yàn)證及網(wǎng)頁(yè)布局設(shè)計(jì)的基本思路,掌握表單驗(yàn)證及網(wǎng)頁(yè)布局設(shè)計(jì)的基本方法,通過(guò)表單驗(yàn)證和網(wǎng)頁(yè)布局的聯(lián)系,進(jìn)一步理解網(wǎng)站開發(fā)的基本思路,并能夠根據(jù)應(yīng)用需求設(shè)計(jì)一個(gè)合理的網(wǎng)頁(yè)來(lái)解決實(shí)際問(wèn)題,提高學(xué)生的動(dòng)手能力以及理論與實(shí)踐相結(jié)合的能力。
三、實(shí)驗(yàn)任務(wù)
1.掌握網(wǎng)頁(yè)布局的基本思路和方法。2.掌握表單驗(yàn)證的基本思路和方法。
四、實(shí)驗(yàn)準(zhǔn)備
復(fù)習(xí)教材中有關(guān)網(wǎng)頁(yè)布局及表單驗(yàn)證的內(nèi)容,仔細(xì)閱讀和分析教材中的例子。
五、實(shí)驗(yàn)內(nèi)容
1.網(wǎng)頁(yè)布局
應(yīng)用Dreamweaver程序?qū)W(wǎng)頁(yè)進(jìn)行布局。
(1)選擇“文件”|“新建”命令,在彈出的對(duì)話框中新建一個(gè)網(wǎng)頁(yè),名為bd.html,在“文檔”工具欄中將網(wǎng)頁(yè)的標(biāo)題設(shè)置為“表單應(yīng)用”。(2)插入一個(gè)2行1列表格(表格1),表格寬度為“98%”,邊框?yàn)椤?”。(3)在表格1的第一個(gè)單元格中輸入文字“表單應(yīng)用”,設(shè)置該文字字體為“隸書”,大小為“36”像素,前后都插入圖片logo_3.jpg。
(4)將光標(biāo)定位在表格1的第二個(gè)單元格中,選擇“插入”|“表單”|“表單”命令,在該單元格中插入一個(gè)表單域。
(5)在表單域中插入一個(gè)15行2列的表格(表格2)。表格寬度為500像素,邊框?yàn)椤?”,間距為“0”。將該表格的左邊列所有單元格的寬度設(shè)置為“90”像素,前9行單元格高度設(shè)
置為“30”。
(6)將表格2的第一行合并為一個(gè)單元格,設(shè)置單元格水平對(duì)齊方式為“居中對(duì)齊”,背景顏色為“#DF3071”。在單元格中輸入文字“請(qǐng)完成以下內(nèi)容的填寫”,設(shè)置文字的大小為“18”像素,顏色為“白色”。
(7)將表格2的左邊列各單元格的水平和垂直對(duì)齊方式都設(shè)置為“居中”對(duì)齊,并分別輸入文本信息:昵稱、密碼、確認(rèn)密碼、性別、籍貫、出生日期、電子郵箱、聯(lián)系電話、個(gè)人愛好、照片和備注,如下圖所示:
(8)將光標(biāo)定位在第二行第二個(gè)單元格中,單擊“插入”工具欄上的“表單”類別,然后單擊“文本字段”按鈕,在彈出的對(duì)話框中單擊“確定”按鈕即在單元格中插入了一個(gè)單行文本框。設(shè)置該文本字段的字符寬度為“24”。在文本字段后輸入“*”。效果如下圖:
(9)用同樣的方式在“密碼”和“確認(rèn)密碼”后插入文本框。選中文本框,在“屬性”面板中設(shè)置名稱為psw,字符寬度設(shè)置為24,最多字符數(shù)為12,類型設(shè)置為“密碼”。屬性如下圖所示:
(10)將光標(biāo)定位在性別后的單元格中,單擊“插入”工具欄上的“表單”類別,然后單擊
“單選按鈕”按鈕,在輔助功能屬性窗口中的標(biāo)簽文字中輸入“男”,如下圖所示。確定后則在單元格中插入了一個(gè)單選按鈕。
設(shè)置剛插入的單選按鈕的名稱為sex,選定值為1,初始狀態(tài)為“已勾選”,如圖所示:
(11)用同樣的方法在男的后面插入一個(gè)單選按鈕,在“屬性”面板中設(shè)置單選按鈕的名稱為sex,選定值為2,初始狀態(tài)為“未選中”,并在該按鈕后輸入文本“女”。最后效果如下圖所示:
(12)將光標(biāo)定位在籍貫后的單元格中。單擊“列表/菜單”按鈕,則在插入點(diǎn)添加一個(gè)菜單,在菜單的“屬性”面板中設(shè)置名稱為”jg”,類型為“菜單”。在“列表值”對(duì)話框中添加項(xiàng)目如下圖所示。
設(shè)置好列表值后,在“屬性”面板中設(shè)置初始化時(shí)選定“四川”。在菜單后輸入文字“。ㄊ校。最后效果如下圖所示:(13)用同樣的方法設(shè)置出生日期如下圖所示:
(14)參考昵稱后文本字段的方法設(shè)置“電子郵箱”和“聯(lián)系電話”,效果如下圖所示:
(15)將光標(biāo)定位在個(gè)人愛好后的單元格中,插入復(fù)選框。將插入的復(fù)選框名稱設(shè)置為hobby,選定值設(shè)置為internet,初始狀態(tài)為“未選中”,并在復(fù)選框后輸入文本“網(wǎng)絡(luò)”。用同樣的方式插入其他復(fù)選框,名稱都設(shè)置為hobby,選定值分別為:music、travel、read、sports和draw。外觀效果如下圖所示:
(16)將光標(biāo)定位在照片后的單元格中,插入“文件域”。外觀效果如下圖所示:
(17)將光標(biāo)定位在備注后的單元格中,單擊“文本區(qū)域”按鈕,在插入點(diǎn)添加一個(gè)文本區(qū)域?qū)ο。在“屬性”面板中設(shè)置插入文本區(qū)域的字符寬度為40,行數(shù)為5,換行為“默認(rèn)”。
(18)在表格2的第13行右邊單元格中輸入以下文字:1.請(qǐng)?zhí)顚懮厦娴牡母黜?xiàng)內(nèi)容。2.帶星號(hào)的項(xiàng)目為必填項(xiàng)。3.謝謝您提交以上重要信息。
(19)將表格2的第14行合并為一個(gè)單元格。設(shè)置單元格水平對(duì)齊方式為“居中對(duì)齊”,背景顏色為“#DF3071”。在單元格中輸入文字“填寫完成后,選擇下面的”提交“按鈕提交表單!,設(shè)置文字的大小為“14”像素,顏色為“白色”。(20)將表格2的最后一行合并為一個(gè)單元格,在“插入”工具欄中單擊按鈕,將插入的按鈕值設(shè)為“提交”,動(dòng)作設(shè)為“提交表單”,用同樣的方法插入第二個(gè)按鈕,將該按鈕的動(dòng)作設(shè)置為“重置表單”。效果如下圖:
(21)保存文件。(22)設(shè)置超鏈接
打開Frameset.html文件。在該框架文件的左邊導(dǎo)航列表中選中文字“表單應(yīng)用”,設(shè)置
超鏈接文件為“bd.html”,目標(biāo)為“mainFrame”。屬性如下圖所示:
(23)在瀏覽器中預(yù)覽效果。
2.表單驗(yàn)證
對(duì)已做成的網(wǎng)頁(yè)中“昵稱”、“密碼”、“確認(rèn)密碼”和“電子郵件”進(jìn)行非空驗(yàn)證。下面以“電子郵件”為例,對(duì)其進(jìn)行非空驗(yàn)證。functionfunCheck(){
if(document.form1.text4.value==""){alert("“電子郵件”不能為空。")returnfalse}else{returntrue}}
六、實(shí)驗(yàn)總結(jié)
通過(guò)這次實(shí)驗(yàn),我才真正理解了“紙上得來(lái)終覺淺,絕知此事要躬行!边@句話的真諦。在網(wǎng)頁(yè)布局部分,出現(xiàn)的問(wèn)題不大,主要是將網(wǎng)頁(yè)能夠設(shè)計(jì)得美觀一些;在表單驗(yàn)證部分,出現(xiàn)的問(wèn)題主要是不知道將編寫好的alert程序放入代碼中的位置。為了能夠做出最終驗(yàn)證的結(jié)果,我試了許多次,不斷通過(guò)Web瀏覽器進(jìn)行修改。其實(shí)沒找到正確的位置主要是因?yàn)闆]有注意到標(biāo)記。最終,經(jīng)過(guò)自己的一番努力還是做出了非空驗(yàn)證的效果。
擴(kuò)展閱讀:Web網(wǎng)站開發(fā)技術(shù)實(shí)訓(xùn)報(bào)告
數(shù)碼商城網(wǎng)站開發(fā)實(shí)訓(xùn)報(bào)告系、班級(jí):學(xué)號(hào):姓名:指導(dǎo)老師:07級(jí)電商(1)班201*201*0109*********
201*年6月
目錄
一、網(wǎng)站建設(shè)基本流程……………………………………….1二、網(wǎng)站域名及網(wǎng)站技術(shù)規(guī)范………………………………1三、網(wǎng)站的基本功能和內(nèi)容…………………………………1四、網(wǎng)站優(yōu)化……………………………………….………2五、網(wǎng)頁(yè)模版設(shè)計(jì)……………………………………….…2六、網(wǎng)站運(yùn)營(yíng)維護(hù)……………………………………….…3七、補(bǔ)充內(nèi)容……………………………………….………37-1、網(wǎng)站規(guī)劃……………………………………….…37-2、菜單設(shè)置……………………………………….…37-3、網(wǎng)站首頁(yè)……………………………………….…37-4、網(wǎng)頁(yè)字體和美工………………………………….…4八、網(wǎng)站建設(shè)中必須克服的問(wèn)題……………………….……48-1、網(wǎng)站規(guī)劃和欄目設(shè)置要合理……………………….…48-2、重要的信息要完整……………………………….…48-3、網(wǎng)頁(yè)信息量要足夠……………………………….…48-4、欄目層次要過(guò)深……………………………….……4
1、網(wǎng)站建設(shè)基本流程規(guī)范
網(wǎng)站建設(shè)包含下列基本流程:
(1)制定網(wǎng)站規(guī)劃方案:包括網(wǎng)站預(yù)期目標(biāo)、行業(yè)競(jìng)爭(zhēng)狀況分析、網(wǎng)站欄目結(jié)構(gòu)、用戶行為分析及內(nèi)容規(guī)劃、網(wǎng)頁(yè)模版設(shè)計(jì)、網(wǎng)站服務(wù)器技術(shù)選型、網(wǎng)站運(yùn)營(yíng)維護(hù)規(guī)范等基本內(nèi)容;
(2)網(wǎng)站技術(shù)開發(fā)、網(wǎng)頁(yè)設(shè)計(jì);
(3)網(wǎng)站測(cè)試;(4)網(wǎng)站內(nèi)容發(fā)布;(5)網(wǎng)站維護(hù)及管理。
2、網(wǎng)站域名及網(wǎng)站技術(shù)規(guī)范
(1)采用基于XHTML的國(guó)際WEB標(biāo)準(zhǔn)(CSS+DIV);(2)網(wǎng)站首頁(yè)為頂級(jí)域名而不是多級(jí)層次;
(3)網(wǎng)站首頁(yè)及各欄目和內(nèi)容頁(yè)面均不采用網(wǎng)址跳轉(zhuǎn)方式,不采用過(guò)渡頁(yè)/橋頁(yè)等網(wǎng)址重定向;
(4)合理應(yīng)用靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè),網(wǎng)站欄目首頁(yè)和其他重要頁(yè)面采用靜態(tài)網(wǎng)頁(yè);
(5)網(wǎng)頁(yè)內(nèi)容頁(yè)面層次不宜過(guò)多,不超過(guò)四個(gè)層次;(6)采用主流域名:.cn、.com.cn、.com等;
(7)一個(gè)網(wǎng)站對(duì)應(yīng)一個(gè)主域名,現(xiàn)有多個(gè)域名需統(tǒng)一;
(8)網(wǎng)站鏈接錯(cuò)誤率在一定范圍之內(nèi),首頁(yè)等重要頁(yè)面無(wú)死鏈接;(9)網(wǎng)站設(shè)計(jì)對(duì)不同瀏覽器具有兼容性。
3、網(wǎng)站的基本功能和內(nèi)容
(1)與百度實(shí)現(xiàn)無(wú)縫鏈接;
(2)具有信息發(fā)布、產(chǎn)品發(fā)布和管理功能;(3)產(chǎn)品推薦/廣告管理功能;(4)詳細(xì)的聯(lián)系方式;
(5)合理的產(chǎn)品分類/匯總/列表;(6)詳細(xì)的產(chǎn)品介紹內(nèi)容;
(7)銷售及售后服務(wù)相關(guān)的聯(lián)系和服務(wù)信息;(8)在線服務(wù)信息;(9)持續(xù)更新的產(chǎn)品動(dòng)態(tài)/產(chǎn)品信息;(10)相關(guān)網(wǎng)站鏈接管理功能;(11)規(guī)范的網(wǎng)站地圖;(12)網(wǎng)站訪問(wèn)統(tǒng)計(jì)功能。
4、網(wǎng)站優(yōu)化
網(wǎng)站優(yōu)化包括三個(gè)方面:對(duì)用戶獲取信息優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站維護(hù)優(yōu)化。(1)網(wǎng)站欄目結(jié)構(gòu)合理,欄目設(shè)置不要過(guò)于復(fù)雜;
(2)網(wǎng)站導(dǎo)航清晰且全站統(tǒng)一,通過(guò)任何一個(gè)網(wǎng)頁(yè)可以逐級(jí)返回上一級(jí)欄目直到首頁(yè);(3)網(wǎng)頁(yè)布局設(shè)計(jì)合理,網(wǎng)站設(shè)計(jì)符合用戶瀏覽習(xí)慣;(4)重要文字信息盡可能出現(xiàn)在網(wǎng)頁(yè)靠前位置;(5)字體清晰,CSS風(fēng)格協(xié)調(diào)一致;(6)最多3次點(diǎn)擊可到達(dá)產(chǎn)品詳細(xì)內(nèi)容頁(yè)面;
(7)通過(guò)網(wǎng)站任何一個(gè)網(wǎng)頁(yè)不超過(guò)3次點(diǎn)擊可達(dá)到站內(nèi)其他任何一個(gè)網(wǎng)頁(yè);(8)遵照搜索引擎為管理員提供的網(wǎng)站優(yōu)化指南,通過(guò)網(wǎng)站結(jié)構(gòu)和內(nèi)容等基本要素的優(yōu)化為搜索引擎檢索信息提供方便,不采用任何被搜索引擎視為垃圾信息的方法和欺騙搜索引擎的方式(如堆積關(guān)鍵詞、用戶不可見文本、頁(yè)面跳轉(zhuǎn)、復(fù)制網(wǎng)頁(yè)等等);
(9)網(wǎng)站首頁(yè)、欄目首頁(yè)及產(chǎn)品內(nèi)容頁(yè)面均有一定的文字信息量;(10)每個(gè)網(wǎng)頁(yè)有獨(dú)立的、可概括說(shuō)明該網(wǎng)頁(yè)核心內(nèi)容的網(wǎng)頁(yè)標(biāo)題(而不是全站或者一個(gè)欄目共用一個(gè)網(wǎng)頁(yè)標(biāo)題);
(11)每個(gè)網(wǎng)頁(yè)有獨(dú)立的、與該網(wǎng)頁(yè)內(nèi)容相關(guān)的META標(biāo)簽設(shè)計(jì)(包括description和keywords);
(12)每個(gè)網(wǎng)頁(yè)有獨(dú)立的URL;
(13)產(chǎn)品內(nèi)容頁(yè)面URL盡可能簡(jiǎn)短且體現(xiàn)出產(chǎn)品屬性;(14)產(chǎn)品/新聞詳細(xì)內(nèi)容頁(yè)面是獨(dú)立網(wǎng)頁(yè)不是彈出窗口;(15)對(duì)于產(chǎn)品品種多的網(wǎng)站,要有合理的產(chǎn)品分頁(yè)方式;(16)網(wǎng)站內(nèi)容保持適當(dāng)?shù)母轮芷凇?/p>
5、網(wǎng)頁(yè)模版設(shè)計(jì)
(1)重要信息盡可能出現(xiàn)在用戶最關(guān)注的位置;(2)網(wǎng)頁(yè)寬度定位適應(yīng)當(dāng)前主流屏幕分辨率模式;(3)保持整站CSS風(fēng)格一致;
(4)超級(jí)鏈接有下劃線或顏色的明顯指示;
(5)整個(gè)網(wǎng)站中在新窗口打開或原窗口打開網(wǎng)頁(yè)的規(guī)則一致;(6)網(wǎng)站首頁(yè)字節(jié)數(shù)不宜過(guò)大;
(7)多語(yǔ)言版本網(wǎng)站內(nèi)容之間的切換方式設(shè)計(jì)合理。
6、網(wǎng)站運(yùn)營(yíng)維護(hù)
(1)建立網(wǎng)站內(nèi)容發(fā)布審核機(jī)制,始終保持網(wǎng)站內(nèi)容的合法性;(2)保持網(wǎng)站服務(wù)器正常工作,對(duì)網(wǎng)站訪問(wèn)速度等進(jìn)行日常跟蹤管理;(3)保持合理的網(wǎng)站內(nèi)容更新頻率;
(4)網(wǎng)站內(nèi)容制作符合網(wǎng)站優(yōu)化所必須具備的規(guī)范;(5)重要信息(如數(shù)據(jù)庫(kù)等、訪問(wèn)日志等)的備份機(jī)制;
(6)保持網(wǎng)站重要網(wǎng)頁(yè)的持續(xù)可訪問(wèn)性,不受網(wǎng)站改版等原因的影響;(7)對(duì)網(wǎng)站訪問(wèn)統(tǒng)計(jì)信息定期進(jìn)行跟蹤分析。
7、要求內(nèi)容補(bǔ)充:
由于網(wǎng)絡(luò)營(yíng)銷環(huán)境和用戶行為在不斷發(fā)展變化,網(wǎng)站需要增強(qiáng)適應(yīng)性,可通過(guò)改版、重建等方式進(jìn)行網(wǎng)站升級(jí)。在網(wǎng)站建設(shè)技術(shù)標(biāo)準(zhǔn)方面,遵照國(guó)際WEB標(biāo)準(zhǔn),不再使用過(guò)時(shí)的HLML4.01;在網(wǎng)站運(yùn)營(yíng)支持方面,融入目前居于領(lǐng)先地位的網(wǎng)站優(yōu)化思想和方法,使得遵照規(guī)范建設(shè)的網(wǎng)站全面符合主流搜索引擎的優(yōu)化指南,具有明顯的搜索引擎優(yōu)化優(yōu)勢(shì)。
1.網(wǎng)站規(guī)劃:整體規(guī)劃合理,主輔菜單要不清晰;網(wǎng)站建設(shè)導(dǎo)向明確,重點(diǎn)突出;欄目適應(yīng);各欄目統(tǒng)一規(guī)劃,整個(gè)網(wǎng)站比較清晰;網(wǎng)站的促銷功能得到明顯體現(xiàn)。
2.菜單設(shè)置:菜單采用不宜圖片形式,圖標(biāo)標(biāo)識(shí)明確,有文字說(shuō)明,不要用戶移動(dòng)鼠標(biāo)進(jìn)行猜測(cè);菜單層次不宜過(guò)多,有效信息層次要少,不需要多次點(diǎn)擊才能找到有效信息;過(guò)多采用鼠標(biāo)響應(yīng)式菜單,欄目設(shè)置不合理,使得用戶難以發(fā)現(xiàn)需要的信息;欄目設(shè)置有重疊;欄目名稱意義不明確,容易造成混淆;全flash首頁(yè)和菜單,無(wú)法優(yōu)化處理,也沒有相應(yīng)的文字說(shuō)明,不采用。欄目清晰夠用,但重要信息完整,充分體現(xiàn)有效信息。3.網(wǎng)站首頁(yè):少采用大型圖片,用戶關(guān)心的信息在首頁(yè)體現(xiàn),不應(yīng)多次點(diǎn)擊;首頁(yè)下載速度要快;首頁(yè)有效信息量豐富;首頁(yè)有標(biāo)題;?提供一種以上外語(yǔ)鏈接頁(yè)面。主頁(yè)布局比整潔,重要信息得以重點(diǎn)體現(xiàn);打開網(wǎng)頁(yè)不宜彈出多個(gè)窗口,影響正常瀏覽;不要刻意追求“創(chuàng)意”效果,以至于很難理解網(wǎng)站要表達(dá)的意思。
頁(yè)面信息:重要信息完整,如聯(lián)系方式和產(chǎn)品介紹等;頁(yè)面信息足夠,減少多次翻頁(yè);去除與企業(yè)形象、產(chǎn)品、促銷等方面無(wú)關(guān)的信息;防止產(chǎn)品詳細(xì)介紹內(nèi)容過(guò)少;內(nèi)容頁(yè)面沒有標(biāo)題,或者全部使用公司名為標(biāo)題;客戶能夠方便的及時(shí)維護(hù)補(bǔ)充,保持其時(shí)效性;不允許有無(wú)任何內(nèi)容的欄目。
4.網(wǎng)頁(yè)字體和美工:注重美術(shù)效果,但不必大量采用圖片,影響網(wǎng)頁(yè)下載速度;注重美觀,但有些連基本信息內(nèi)容都不可用圖片格式,影響基本信息獲取;文字適中、顏色明晰、不影響正常視覺;頁(yè)面不應(yīng)過(guò)于花哨。
8、網(wǎng)站建設(shè)中必須克服的問(wèn)題:
(1)網(wǎng)站規(guī)劃和欄目設(shè)置要合理:主要表現(xiàn)在欄目設(shè)置不應(yīng)有重疊、交叉、或者欄目名稱意義不明確,容易造成混淆,使得用戶難以發(fā)現(xiàn)需要的信息,避免欄目過(guò)于繁多和雜亂、網(wǎng)站導(dǎo)航系統(tǒng)混亂;
(2)重要的信息要完整:企業(yè)介紹、聯(lián)系方式、產(chǎn)品分類和詳細(xì)介紹、產(chǎn)品促銷等是企業(yè)網(wǎng)站最基本的信息,企業(yè)網(wǎng)站上這些重要信息完整;
(3)網(wǎng)頁(yè)信息量要足夠:包括兩種情況:一種頁(yè)面上的內(nèi)容,或者將本來(lái)一個(gè)網(wǎng)頁(yè)可以發(fā)布的內(nèi)容不可分為多個(gè)網(wǎng)頁(yè),而且各網(wǎng)頁(yè)之間必須有相互鏈接,不需要再次點(diǎn)擊主頁(yè);另一方面是盡管內(nèi)容總量不少,但有用的信息少,籠統(tǒng)介紹的內(nèi)容多;
(4)欄目層次要過(guò)深。重要的信息應(yīng)該出現(xiàn)在最容易被用戶發(fā)現(xiàn)的位置,應(yīng)盡可能縮短信息傳遞的渠道,以使企業(yè)信息更加有效地傳遞給用戶;
友情提示:本文中關(guān)于《web網(wǎng)站開發(fā)實(shí)驗(yàn)報(bào)告》給出的范例僅供您參考拓展思維使用,web網(wǎng)站開發(fā)實(shí)驗(yàn)報(bào)告:該篇文章建議您自主創(chuàng)作。
來(lái)源:網(wǎng)絡(luò)整理 免責(zé)聲明:本文僅限學(xué)習(xí)分享,如產(chǎn)生版權(quán)問(wèn)題,請(qǐng)聯(lián)系我們及時(shí)刪除。