購(gòu)物商城網(wǎng)站前臺(tái)的設(shè)計(jì)與實(shí)現(xiàn).doc

網(wǎng)站設(shè)計(jì)實(shí)訓(xùn)報(bào)告題 目：購(gòu)物商城網(wǎng)站前臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)學(xué)生姓名：楊宇飛學(xué) 號(hào)：1176807432專 業(yè)：計(jì)算機(jī)4班指導(dǎo)教師：張靜課程設(shè)計(jì)(論文)任務(wù)及指導(dǎo)書題 目購(gòu)物商城網(wǎng)站前臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)題 目 來 源實(shí)際工程項(xiàng)目 科研課題 教學(xué)模擬題目 其它題 目 類 型工程設(shè)計(jì)型 科學(xué)研究型 調(diào)研綜述型 其它類型一、課程設(shè)計(jì)（論文）任務(wù)（包括對(duì)工程圖紙的具體要求）及設(shè)計(jì)參數(shù)1問題定義、可行性研究2需求分析。3總體設(shè)計(jì)。4詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)。5測(cè)試及調(diào)試。二、專題部分要求設(shè)計(jì)與實(shí)現(xiàn)購(gòu)物商城網(wǎng)站前臺(tái)頁(yè)面，包括網(wǎng)站首頁(yè)、商品展示頁(yè)、具體商品詳細(xì)介紹頁(yè)、購(gòu)物車頁(yè)、注冊(cè)頁(yè)、登錄頁(yè)、幫助中心客服頁(yè)。三、本題目的重點(diǎn)和難點(diǎn)以及與同組其它學(xué)生所做題目的關(guān)系重點(diǎn)：采用DIV+CSS布局。難點(diǎn)：編碼符合W3C標(biāo)準(zhǔn)，無冗余代碼。選題分組方式：三人一組，分工合作完成。四、指導(dǎo)方式和工作進(jìn)度要求指導(dǎo)方式：集中輔導(dǎo)、個(gè)別答疑相結(jié)合。 工作進(jìn)度：1天 需求分析；2天 總體設(shè)計(jì)；3-4天 詳細(xì)設(shè)計(jì)及編碼；5天 測(cè)試及調(diào)試。五、與本設(shè)計(jì)題目相關(guān)的理論知識(shí)（包括新知識(shí)）提要網(wǎng)站前臺(tái)的開發(fā)流程；W3C和Web2.0標(biāo)準(zhǔn)；DIV+CSS布局；HTML、CSS語(yǔ)言；開發(fā)工具UltraEdit；Dreamweaver站點(diǎn)管理；調(diào)試工具Firefox+Firebug插件。六、建議參考資料及使用方法1 北京阿博泰克北大青鳥.使用HTML語(yǔ)言和CSS開發(fā)商業(yè)站點(diǎn)，科學(xué)技術(shù)文獻(xiàn)出版社,2011年2 前沿科技.精通CSS+DIV網(wǎng)頁(yè)樣式布局,人民郵電出版社,2007年3 徐延章.美工與創(chuàng)意網(wǎng)頁(yè)設(shè)計(jì)藝術(shù),科學(xué)出版社, 2012年4 王爽、徐仕猛、張晶.網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)配色：經(jīng)典網(wǎng)頁(yè)設(shè)計(jì)800例,科學(xué)出版社,2011七、答辯之前學(xué)生應(yīng)作的準(zhǔn)備工作提要1 完成目標(biāo)網(wǎng)站前臺(tái)的開發(fā)2 完成課程設(shè)計(jì)報(bào)告的撰寫目錄課程設(shè)計(jì)(論文)任務(wù)及指導(dǎo)書2第一章引言41.1網(wǎng)站開發(fā)的背景41.2 網(wǎng)站開發(fā)的目的和意義41.3 網(wǎng)站開發(fā)的需求分析4第二章 開發(fā)技術(shù)和工具的介紹62.1 開發(fā)技術(shù)62.1.1 html62.1.2 CSS62.1.3 Div+CSS62.2開發(fā)工具6第三章 網(wǎng)站的總體設(shè)計(jì)7第四章 網(wǎng)站的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)84.1首頁(yè)84.1.1首頁(yè)布局的實(shí)現(xiàn)84.1.2 頂部header的實(shí)現(xiàn)94.1.3 主體main的實(shí)現(xiàn)104.1.4 底部footer的實(shí)現(xiàn)124.2 登陸頁(yè)134.1.1登陸布局的實(shí)現(xiàn)134.1.2登陸頁(yè)主體布局的實(shí)現(xiàn)134.2 購(gòu)物車頁(yè)144.2.1購(gòu)物車頁(yè)布局的實(shí)現(xiàn)144.2.2購(gòu)物車頁(yè)主體布局的實(shí)現(xiàn)14第五章網(wǎng)站的兼容性測(cè)165.1瀏覽器之間的兼容性測(cè)試方法165.2驗(yàn)證是否符合W3C標(biāo)準(zhǔn)的方法16第六章 結(jié)論17參考文獻(xiàn)18第一章引言1.1網(wǎng)站開發(fā)的背景近年來,隨著Internet的迅速崛起,互聯(lián)網(wǎng)已日益成為收集提供信息的最佳最快渠道，并快速進(jìn)入傳統(tǒng)的流通領(lǐng)域。互聯(lián)網(wǎng)的跨地域性、可交互性、全天候性使其在與傳統(tǒng)媒體行業(yè)和傳統(tǒng)貿(mào)易行業(yè)的競(jìng)爭(zhēng)中具不可抗拒的優(yōu)勢(shì)，因而發(fā)展十分迅速。在電子商務(wù)在中國(guó)逐步興起的大環(huán)境下，越來越多的人們開始選擇在網(wǎng)上購(gòu)物，這其中包括所有日常生活用品及食品、服裝等。通過在網(wǎng)上訂購(gòu)商品，可以由商家直接將商品運(yùn)送給收貨人，節(jié)省了親自去商店挑選禮品的時(shí)間，具備了省時(shí)、省事、省心等特點(diǎn)，讓顧客足不出戶可以購(gòu)買到自己滿意的商品。1.2 網(wǎng)站開發(fā)的目的和意義我們的網(wǎng)上商城建設(shè)在為瀏覽者與網(wǎng)站所有人搭建起一個(gè)網(wǎng)絡(luò)平臺(tái)，瀏覽者或潛在客戶在這個(gè)平臺(tái)上可以進(jìn)行整個(gè)交易、交流過程，與商務(wù)型網(wǎng)站相比，商城網(wǎng)站建設(shè)的業(yè)務(wù)更依賴于互聯(lián)網(wǎng)，基于互聯(lián)網(wǎng)絡(luò)銷售，消費(fèi)者基本都來源于網(wǎng)上。電子商城的訂購(gòu)功能更強(qiáng)大，集批發(fā)、零售、團(tuán)購(gòu)及在線支付等功能于一體的訂單創(chuàng)建與費(fèi)用支付。網(wǎng)上商城方案結(jié)合網(wǎng)站建設(shè)電子商務(wù)應(yīng)用與開發(fā)的成功經(jīng)驗(yàn)和技術(shù)積累，以實(shí)惠的價(jià)格向更多的商家及個(gè)人提供先進(jìn)、穩(wěn)定的網(wǎng)上商城平臺(tái)開發(fā)服務(wù)。（1）以獨(dú)立域名在互聯(lián)網(wǎng)上開設(shè)網(wǎng)上商城，集銷售、服務(wù)、資訊一體化的電子商務(wù)平臺(tái)；（2）依托此商城開展綜合性的網(wǎng)絡(luò)營(yíng)銷活動(dòng)，推廣網(wǎng)站，樹立品牌；（3）建立起良好的數(shù)據(jù)/應(yīng)用集成接口。1.3 網(wǎng)站開發(fā)的需求分析 1.網(wǎng)站目標(biāo)受眾：電子商品需求者、商業(yè)人士。2.通過貴美商城網(wǎng)站：(1)展示商品價(jià)格、質(zhì)量和類型；(2)傳達(dá)企業(yè)人士的設(shè)計(jì)理念；(3)加深瀏覽者對(duì)商品的認(rèn)識(shí)3.網(wǎng)站整體設(shè)計(jì)風(fēng)格考慮網(wǎng)站的定位、主要受眾群體和設(shè)計(jì)目標(biāo)，我們采用的設(shè)計(jì)風(fēng)格簡(jiǎn)潔大方，穩(wěn)重。4.配色方案以橙色主色，以白色為輔助色，字體采用宋體設(shè)計(jì)。5.網(wǎng)上商城功能概述：(1)首頁(yè)，商品展示；(2)會(huì)員注冊(cè)、登錄，建立完整的會(huì)員資料庫(kù)；(3)管理員發(fā)布、管理商品信息、上傳圖片等；(4)支持商品多級(jí)分類檢索、關(guān)鍵詞模糊搜索；(5)支持價(jià)格的管理，包括市場(chǎng)價(jià)、批發(fā)價(jià)等；(6)方便快捷的購(gòu)物車、網(wǎng)上支付；(7)可編輯的訂購(gòu)說明。 第二章 開發(fā)技術(shù)和工具的介紹2.1 開發(fā)技術(shù)2.1.1 html使用html描述的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)，訪問它只需要www瀏覽器，我們所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)html文件進(jìn)行解釋的結(jié)果。Html是由標(biāo)記和屬性組成的規(guī)則。這些規(guī)則規(guī)定了文字，表格和超鏈接在網(wǎng)頁(yè)中顯示等內(nèi)容。2.1.2 CSS它是一種用來表現(xiàn)html（標(biāo)準(zhǔn)通用語(yǔ)言的一個(gè)應(yīng)用）或xml（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。它是用于增強(qiáng)控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。2.1.3 Div+CSSDIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁(yè)的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容與表現(xiàn)相分離。提起DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）基礎(chǔ)上優(yōu)化和改進(jìn)的新語(yǔ)言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求?！癉IV+CSS”其實(shí)是錯(cuò)誤的叫法，而標(biāo)準(zhǔn)的叫法應(yīng)是XHTML+CSS。因?yàn)镈IV與Table都是XHTML或HTML語(yǔ)言中的一個(gè)標(biāo)記，而CSS只是一種表現(xiàn)形式。也許其提出者本意并沒有錯(cuò)，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認(rèn)為整個(gè)頁(yè)面就應(yīng)當(dāng)是DIV+CSS文件的組合。2.2開發(fā)工具Dreamweaver 介紹： 一個(gè)可視化的網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化網(wǎng)頁(yè)設(shè)計(jì)、圖像編輯、全局查找替換、全FTP 功能、處理Flash和Shockwave等富媒體格式和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。第三章 網(wǎng)站的總體設(shè)計(jì)貴美商城的總體設(shè)計(jì)結(jié)構(gòu)圖如圖3.1所示。貴美商城首頁(yè)注冊(cè)頁(yè)幫助中心頁(yè)登錄頁(yè)購(gòu)物車頁(yè)商品介紹頁(yè)商品展示頁(yè)圖3.1貴美商城總體設(shè)計(jì)結(jié)構(gòu)圖第四章 網(wǎng)站的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 4.1首頁(yè)4.1.1首頁(yè)布局的實(shí)現(xiàn)1.首頁(yè)包括頭部、主體部分、和底部三大部分。首頁(yè)布局如圖4.1所示。頂部（header） 主體部分（main） 底部（footer）4.1首頁(yè)整體布局 2.首先建立HTML的組織結(jié)構(gòu)主頁(yè)整體布局時(shí)分為三個(gè)div塊，即頭部header，中間主體部分main和底部footer。頂部和底部使用iform引用“頂部.html”和“底部.html”。首頁(yè)的整體布局結(jié)構(gòu)代碼如下： 頂部主體底部3.添加CSS樣式代碼：#headerwidth:100%;height:150px;background:url(images/h_bg.jpg); background-repeat:no-repeat; background-position:center; #mainwidth:100%; height:500px; margin-top:20px; #footerwidth:980px;height:150px;text-align:center;line-height:20px; margin-left:160px;4.首頁(yè)效果圖如圖4.2所示圖4.2首頁(yè)效果圖4.1.2 頂部header的實(shí)現(xiàn) 1.整體布局如圖4.3所示圖4.3頂部header整體布局2.建立HTML的組織結(jié)構(gòu)頂部整體布局時(shí)分為四個(gè)div塊，即logo，menu，hello，和nav。頂部的整體布局結(jié)構(gòu)代碼如下： 3.添加css樣式代碼.menu width:45%;height:28px;float:right; margin:-5px 50px 0px 0px;.hello float:right; margin:35px 500px 0px 0px; color:#636362;.navwidth:800px;clear:both; margin-left:130px; padding-top:8px; 4.首頁(yè)頭部效果圖如圖4.3所示圖4.4 首頁(yè)頭部效果圖4.1.3 主體main的實(shí)現(xiàn) 1.主體main整體布局如圖4.5所示youzhongzuo 圖4.5 主體main整體布局2.建立HTML的組織結(jié)構(gòu)頂部整體布局時(shí)分為三個(gè)div塊，即zuo， zhong，和you。頂部的整體布局結(jié)構(gòu)代碼如下： 3.添加css樣式代碼#mainwidth:100%; height:500px; margin-top:20px; #divzuowidth:200px;height:680px;float:left;background-image:url(images/bg%201.gif); background-repeat:no-repeat; margin-left:178px; #divzhongwidth:524px; height:650px; float:left; margin:8px 0px 0px 8px;.shangheight:203px;background-image:url(images/ad-01.jpg); background-repeat:no-repeat;#xiabackground-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-213px -200px; width:524px; height:450px; margin-top:-10px;#divyouwidth:240px;height:680px;float:left;background-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-740px 0px; margin-left:8px;4.首頁(yè)主體效果圖如圖4.6所示圖4.6 首頁(yè)主體效果圖4.1.4 底部footer的實(shí)現(xiàn) 1.整體布局只有一個(gè)div塊2.建立HTML的組織結(jié)構(gòu)3.添加css樣式代碼#footerwidth:980px; height:150px; text-align:center;line-height:20px; margin-left:160px;4.首頁(yè)頭部效果圖如圖所示圖4.7 首頁(yè)底部效果圖4.2 登陸頁(yè)4.1.1登陸布局的實(shí)現(xiàn)登陸頁(yè)和主頁(yè)為同一網(wǎng)站的不同頁(yè)面，整體布局一樣，故略。4.1.2登陸頁(yè)主體布局的實(shí)現(xiàn)1.登陸頁(yè)整體布局如圖4.8所示 youzuo圖4.8 登陸頁(yè)整體布局2.建立HTML的組織結(jié)構(gòu) 3.添加css樣式代碼.denglupadding:50px0px;width:100%;height:400px;background:url(images/login_bg.gif)no-repeat;line-height:40px;background-position:center; background-position:top; font-size:10px; letter-spacing:1px;.zuowidth:40%;height:500px;float:left; margin:10px 0px 0px 186px; list-style:none; border-right:1px #ccc solid; .youwidth:27%;height:500px;float:left;margin:10px0px;list-style:none;4.登陸頁(yè)主體效果圖如圖4.9所示4.9 登陸頁(yè)主體效果圖4.2 購(gòu)物車頁(yè)4.2.1購(gòu)物車頁(yè)布局的實(shí)現(xiàn)購(gòu)物車頁(yè)和主頁(yè)為同一網(wǎng)站的不同頁(yè)面，整體布局一樣，故略。4.2.2購(gòu)物車頁(yè)主體布局的實(shí)現(xiàn)1.購(gòu)物車主體整體布局如圖4.10所示上部中部下部4.10 購(gòu)物車主體整體布局2.建立HTML的組織結(jié)構(gòu) 3.添加css樣式代碼#divgmargin:0px 0px 0px 187px; font-size:15px;4.購(gòu)物車主體效果圖如圖4.11所示4.11 購(gòu)物車主體效果圖第五章網(wǎng)站的兼容性測(cè)5.1瀏覽器之間的兼容性測(cè)試方法1.IE多版本使用IE Collection 軟件模擬2.Firefox 3.5（需安裝Firebug插件）5.2驗(yàn)證是否符合W3C標(biāo)準(zhǔn)的方法1.制作期間使用Dreamweaver兼容性提示2.網(wǎng)頁(yè)制作完成后使用Firefox插件進(jìn)行檢測(cè) 3.發(fā)送到官方網(wǎng)站進(jìn)行在線驗(yàn)證 第六章 結(jié)論通過學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作，我對(duì)網(wǎng)站建設(shè)有所了解，現(xiàn)在模擬建設(shè)一個(gè)購(gòu)物網(wǎng)站，對(duì)網(wǎng)站建設(shè)的心得有以下：網(wǎng)站主題：購(gòu)物網(wǎng)站主要是關(guān)于網(wǎng)上購(gòu)物的網(wǎng)站，網(wǎng)站的主要購(gòu)物類