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

網(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)書(shū)題 目購(gòu)物商城網(wǎng)站前臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)題目來(lái)源□實(shí)際工程項(xiàng)目□科研課題■教學(xué)模擬題目□其它題目類型□工程設(shè)計(jì)型□科學(xué)研究型□調(diào)研綜述型■其它類型一、 課程設(shè)計(jì)（論文）任務(wù)（包括對(duì)工程圖紙的具體要求）及設(shè)計(jì)參數(shù)1問(wèn)題定義、可行性研究2需求分析。3總體設(shè)計(jì)。4詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)。5測(cè)試及調(diào)試。二、 專題部分要求頁(yè)、購(gòu)物設(shè)計(jì)與實(shí)現(xiàn)購(gòu)物商城網(wǎng)站前臺(tái)頁(yè)面，包括網(wǎng)站首頁(yè)、商品展示頁(yè)、具體商品詳細(xì)介紹車(chē)頁(yè)、注冊(cè)頁(yè)、登錄頁(yè)、幫助中心客服頁(yè)。頁(yè)、購(gòu)物三、 本題目的重點(diǎn)和難點(diǎn)以及與同組其它學(xué)生所做題目的關(guān)系重點(diǎn)：采用3IV+CSS布局。難點(diǎn)：編碼符合3C標(biāo)準(zhǔn)，無(wú)冗余代碼。選題分組方式：三人一組，分工合作完成。四、 指導(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)的開(kāi)發(fā)流程；W3C和Web2.0標(biāo)準(zhǔn)；DIV+CSS布局；HTML.CSS語(yǔ)言；開(kāi)發(fā)工具UltraEditDreamweave］站點(diǎn)管理；調(diào)試工具Firefox+Firebu插件。六、 建議參考資料及使用方法1北京阿博泰克北大青使用HTML語(yǔ)言和CSS開(kāi)發(fā)商業(yè)站點(diǎn)，科學(xué)技術(shù)文獻(xiàn)出版2社11年2前沿科技精通CSS+DIV網(wǎng)頁(yè)樣式布局人民郵電出版社2007年3徐延章美工與創(chuàng)意——網(wǎng)頁(yè)設(shè)計(jì)藝科學(xué)出版社2012年4王爽、徐仕猛、張翩站設(shè)計(jì)網(wǎng)頁(yè)配色：經(jīng)典網(wǎng)頁(yè)設(shè)計(jì)0例，科學(xué)出版社2011七、 答辯之前學(xué)生應(yīng)作的準(zhǔn)備工作提要1完成目標(biāo)網(wǎng)站前臺(tái)的開(kāi)發(fā)2完成課程設(shè)計(jì)報(bào)告的撰寫(xiě)目錄TOC\o"1-5"\h\z\o"CurrentDocument"課程設(shè)計(jì)（論文）任務(wù)及指導(dǎo)書(shū) 2\o"CurrentDocument"第一章引言 4\o"CurrentDocument"1.1網(wǎng)站開(kāi)發(fā)的背景 4\o"CurrentDocument"1.2網(wǎng)站開(kāi)發(fā)的目的和意義 4\o"CurrentDocument"1.3網(wǎng)站開(kāi)發(fā)的需求分析 4\o"CurrentDocument"第二章開(kāi)發(fā)技術(shù)和工具的介紹 6\o"CurrentDocument"2.1開(kāi)發(fā)技術(shù) 6\o"CurrentDocument"html 6\o"CurrentDocument"CSS 6\o"CurrentDocument"Div+CSS 6\o"CurrentDocument"2.2開(kāi)發(fā)工具 6\o"CurrentDocument"第三章網(wǎng)站的總體設(shè)計(jì) 7\o"CurrentDocument"第四章網(wǎng)站的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 8\o"CurrentDocument"4.1首頁(yè) 8\o"CurrentDocument"4.1.1首頁(yè)布局的實(shí)現(xiàn) 8\o"CurrentDocument"頂部header的實(shí)現(xiàn) 9\o"CurrentDocument"主體main的實(shí)現(xiàn) 10\o"CurrentDocument"底部footer的實(shí)現(xiàn) 12\o"CurrentDocument"4.2登陸頁(yè) 13\o"CurrentDocument"4.1.1登陸布局的實(shí)現(xiàn) 13\o"CurrentDocument"4.1.2登陸頁(yè)主體布局的實(shí)現(xiàn) 13\o"CurrentDocument"4.2購(gòu)物車(chē)頁(yè) 14\o"CurrentDocument"4.2.1購(gòu)物車(chē)頁(yè)布局的實(shí)現(xiàn) 14\o"CurrentDocument"4.2.2購(gòu)物車(chē)頁(yè)主體布局的實(shí)現(xiàn) 14\o"CurrentDocument"第五章網(wǎng)站的兼容性測(cè) 16\o"CurrentDocument"5.1瀏覽器之間的兼容性測(cè)試方法 16\o"CurrentDocument"5.2驗(yàn)證是否符合W3C標(biāo)準(zhǔn)的方法 16\o"CurrentDocument"第六章結(jié)論 17\o"CurrentDocument"參考文獻(xiàn) 18第一章引言1.1網(wǎng)站開(kāi)發(fā)的背景近年來(lái),隨著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)境下，越來(lái)越多的人們開(kāi)始選擇在網(wǎng)上購(gòu)物，這其中包括所有日常生活用品及食品、服裝等。通過(guò)在網(wǎng)上訂購(gòu)商品，可以由商家直接將商品運(yùn)送給收貨人，節(jié)省了親自去商店挑選禮品的時(shí)間，具備了省時(shí)、省事、省心等特點(diǎn)，讓顧客足不出戶可以購(gòu)買(mǎi)到自己滿意的商品。1.2網(wǎng)站開(kāi)發(fā)的目的和意義我們的網(wǎng)上商城建設(shè)在為瀏覽者與網(wǎng)站所有人搭建起一個(gè)網(wǎng)絡(luò)平臺(tái)，瀏覽者或潛在客戶在這個(gè)平臺(tái)上可以進(jìn)行整個(gè)交易、交流過(guò)程，與商務(wù)型網(wǎng)站相比，商城網(wǎng)站建設(shè)的業(yè)務(wù)更依賴于互聯(lián)網(wǎng)，基于互聯(lián)網(wǎng)絡(luò)銷(xiāo)售，消費(fèi)者基本都來(lá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)用與開(kāi)發(fā)的成功經(jīng)驗(yàn)和技術(shù)積累，以實(shí)惠的價(jià)格向更多的商家及個(gè)人提供先進(jìn)、穩(wěn)定的網(wǎng)上商城平臺(tái)開(kāi)發(fā)服務(wù)。（1） 以獨(dú)立域名在互聯(lián)網(wǎng)上開(kāi)設(shè)網(wǎng)上商城，集銷(xiāo)售、服務(wù)、資訊一體化的電子商務(wù)平臺(tái)；（2） 依托此商城開(kāi)展綜合性的網(wǎng)絡(luò)營(yíng)銷(xiāo)活動(dòng)，推廣網(wǎng)站，樹(shù)立品牌；（3） 建立起良好的數(shù)據(jù)/應(yīng)用集成接口。1.3網(wǎng)站開(kāi)發(fā)的需求分析網(wǎng)站目標(biāo)受眾：電子商品需求者、商業(yè)人士。通過(guò)貴美商城網(wǎng)站：展示商品價(jià)格、質(zhì)量和類型；傳達(dá)企業(yè)人士的設(shè)計(jì)理念；加深瀏覽者對(duì)商品的認(rèn)識(shí)網(wǎng)站整體設(shè)計(jì)風(fēng)格考慮網(wǎng)站的定位、主要受眾群體和設(shè)計(jì)目標(biāo)，我們采用的設(shè)計(jì)風(fēng)格簡(jiǎn)潔大方，穩(wěn)重配色方案以橙色主色，以白色為輔助色，字體采用宋體設(shè)計(jì)。網(wǎng)上商城功能概述：首頁(yè)，商品展示；會(huì)員注冊(cè)、登錄，建立完整的會(huì)員資料庫(kù)；管理員發(fā)布、管理商品信息、上傳圖片等；支持商品多級(jí)分類檢索、關(guān)鍵詞模糊搜索；支持價(jià)格的管理，包括市場(chǎng)價(jià)、批發(fā)價(jià)等；方便快捷的購(gòu)物車(chē)、網(wǎng)上支付；可編輯的訂購(gòu)說(shuō)明。第二章開(kāi)發(fā)技術(shù)和工具的介紹2.1開(kāi)發(fā)技術(shù)2.1.1html使用html描述的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)，訪問(wèn)它只需要www瀏覽器，我們所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)html文件進(jìn)行解釋的結(jié)果。Html是由標(biāo)記和屬性組成的規(guī)則。這些規(guī)則規(guī)定了文字，表格和超鏈接在網(wǎng)頁(yè)中顯示等內(nèi)容。CSS它是一種用來(lái)表現(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ǔ)言。Div+CSSDIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁(yè)的布局方法。與傳統(tǒng)中通過(guò)表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容與表現(xiàn)相分離。提起DIV+CSS組合，還要從XHTML說(shuō)起。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)未來(lái)網(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)形式。也許其提出者本意并沒(méi)有錯(cuò)，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認(rèn)為整個(gè)頁(yè)面就應(yīng)當(dāng)是DIV+CSS文件的組合。2.2開(kāi)發(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è)幫助中心頁(yè)注冊(cè)頁(yè)購(gòu)物車(chē)頁(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)首頁(yè)包括頭部、主體部分、和底部三大部分。首頁(yè)布局如圖4.1所示。4.1首頁(yè)整體布局首先建立HTML的組織結(jié)構(gòu)主頁(yè)整體布局時(shí)分為三個(gè)div塊，即頭部header，中間主體部分main和底部footer。頂部和底部使用iform引用“頂部.html"和“底部.html”。首頁(yè)的整體布局結(jié)構(gòu)代碼如下:<divid二"header"〉〈iframesrc="頂部.html"></iframe>頂部</div><divid二"main">主體</div><divid二"footer"><iframesrc="底部.html"></iframe>底部</div>3?添加CSS樣式代碼：#header{width:100%;height:150px;background:url(images/h_bg.jpg);background-repeat:no-repeat;background-position:center;}#main{width:100%;height:500px;margin-top:20px;}#footer{width:980px;height:150px;text-align:center;line-height:20px;margin-left:160px;}4.首頁(yè)效果圖如圖4.2所示科咆孵蒔幫助申心拳知認(rèn)收嵬?畛輙歸」帥貴美苗城歡迎曠！昔頁(yè) 冢加fe器手機(jī)劉礎(chǔ)且用戸負(fù) 書(shū)轄 須》1中心免費(fèi)卄空 亍減窖詢家用電器立琢電洗衣也平偵電理電處水吾眾底音哨加語(yǔ)空贓栢imj電嗽件33&TS憲電1晞?lì)膘冶謾C(jī)家用電器立琢電洗衣也平偵電理電處水吾眾底音哨加語(yǔ)空贓栢imj電嗽件33&TS憲電1晞?lì)膘冶謾C(jī)蘇機(jī)羽板電極電勵(lì)吾頻曙空:酣宿冷柜：IT電鋼聞件羸下M麟機(jī)手機(jī)地們洗衣扳平板電迪電拔水吾VW電跚件電股汽眾電下鄉(xiāng)眾電用舟電戯mui.EI用百費(fèi)洗衣機(jī)平板電駅電昭水證悲邑晌空朗儺冷柜EYD電暮甜件卑豈質(zhì)勞電磁會(huì)觸蘆做丈字■妄#&師開(kāi)網(wǎng)店安金錘阿上犬熱^商穴競(jìng)我阿購(gòu)惑間煩阿上開(kāi)十昶奶SKGooclti：大學(xué)更求豈帀奔冋住黒陰圄推美白嚇諄雅戌君寶 曲昶|當(dāng)當(dāng)京桶脇迅畫(huà)寂|砸|堆巫知樸開(kāi)心陰|祁鋼|閾電岡mena-SHT*2033-2010北京帛密美商樣覘埜司allbighthkebvid

把無(wú)S;40Q-€6-150&0ZiiliL.s?rvi>:e￡prd.conDCF：：-OlEr&0510211C4-^圖4.2首頁(yè)效果圖4.1.2頂部header的實(shí)現(xiàn)整體布局如圖4.3所示圖4.3頂部header整體布局建立HTML的組織結(jié)構(gòu)頂部整體布局時(shí)分為四個(gè)div塊，即logo,menu,hello，和nav。頂部的整體布局結(jié)構(gòu)代碼如下：<divid二"header"〉<divid="logo"></div><divclass二"menu"></div><divclass二"hello"></div><divclass二"nav"></div></div>添加css樣式代碼.menu{width:45%;height:28px;float:right;margin：-5px50pxOpxOpx;}.hello{float:right;margin:35px500px0px0px;color:#636362;}.nav{width:800px;clear:both;margin-left:130px;padding-top:8px; }首頁(yè)頭部效果圖如圖4.3所示CuiM&iShoppingCuiM&iShopping=7圖4.5=7圖4.5主體main整體布局B頁(yè)涼弟電屈手機(jī)魏碼日用百故書(shū)貓樂(lè)曲甲心免時(shí)店全球番詢圖4.4首頁(yè)頭部效果圖4.1.3主體main的實(shí)現(xiàn)主體main整體布局如圖4.5所示建立HTML的組織結(jié)構(gòu)頂部整體布局時(shí)分為三個(gè)div塊，即zuo,zhong,和you。頂部的整體布局結(jié)構(gòu)代碼如<divid="main"><divid="divzuo"><divid="divzhong"><divclass="shang"></div><divid="xia"></div><divid="divyou"></div>添加css樣式代碼#main{width:100%;height:500px;margin-top:20px;}#divzuo{width:200px;height:680px;float:left;background-image:url(images/bg%201.gif);background-repeat:no-repeat;margin-left:178px;}#divzhong{width:524px;height:650px;float:left;margin:8px0px0px8px;}.shang{height:203px;background-image:url(images/ad-01.jpg);background-repeat:no-repeat;}#xia{background-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-213px-200px;width:524px;height:450px;margin-top:-10px;}#divyou{width:240px;height:680px;float:left;background-image:url(images/bg%201.gif);background-repeat:no-repeat;background-position:-740px0px;margin-left:8px;}首頁(yè)主體效果圖如圖4.6所示家用電國(guó)--；；!. f.m-|e<：--.<^■0.計(jì)：= :,:師閑件止*二 at記F：:旳II..'卅1 ±1-111 :北譏用電站木吾mF家用電國(guó)--；；!. f.m-|e<：--.<^■0.計(jì)：= :,:師閑件止*二 at記F：:旳II..'卅1 ±1-111 :北譏用電站木吾mFI0U電衩酣件:淪■?-電坂費(fèi):羽ir.手機(jī)數(shù)碼大玉電Fr.IR-T；i-n■■'JSmu電衩fill*瞇r春電T蟲(chóng)片：氏:旳II.日用百貨丸蘇電〕r.in二丹戸?iM-n冷柜10411"嚴(yán)電飯15孵機(jī)M器D￥I4B6豆折陽(yáng)彌人語(yǔ)音導(dǎo)戰(zhàn)手機(jī)fiftUfilSiftas咅剽三星妄QSS濮M-IIIS國(guó)雌壞禮ifiifittfflltlJS昔商君移訕GI用繭寸筑記XJ""亡IJJI■:■■/.'■■■if.■-■...弋亞馬酬時(shí)尉濮，加時(shí)記S-時(shí)出晟隹選桂？弓桂鮭LTI移訕皿標(biāo)丁汕元--Mill:If*如Mfit新上網(wǎng)本1#-6-P.B圖4.6首頁(yè)主體效果圖4.1.4底部footer的實(shí)現(xiàn)整體布局只有一個(gè)div塊建立HTML的組織結(jié)構(gòu)<divid="footer"></div>添加css樣式代碼#footer{width:980px; height:150px; text-align:center;line-height:20px;margin-left:160px;}首頁(yè)頭部效果圖如圖所示；羽汽： ^：￥.|?:殆|A.T|運(yùn)；?可"：”rnPElIGHTO2Da>3a]D寸伸冷雷:M商艱司ILL1IGHTRJSERklDJAijEi j3X4)￡r>dlt世pr<LaiiItFsPrcPfi415a2l10^號(hào)圖4.7首頁(yè)底部效果圖4.2登陸頁(yè)4?1?1登陸布局的實(shí)現(xiàn)登陸頁(yè)和主頁(yè)為同一網(wǎng)站的不同頁(yè)面，整體布局一樣，故略。4?1?2登陸頁(yè)主體布局的實(shí)現(xiàn)登陸頁(yè)整體布局如圖4.8所示圖4.8登陸頁(yè)整體布局建立HTML的組織結(jié)構(gòu)<divclass="denglu"><ulclass="zuo"></ul><ulclass="you"></ul></div>添加css樣式代碼.denglu{padding: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;}.zuo{width:40%;height:500px;float:left;margin:10px0px0px186px;list-style:none;border-right:1px#cccsolid;}.you{width:27%;height:500px;float:left;margin:10px0px;list-style:none;}登陸頁(yè)主體效果圖如圖4.9所示

=.j:：：：■<-.2.L=■-；-#荻我=.j:：：：■<-.2.L=■-；-吒ftSfffi也陀曬枚■■?諏世黒：士三二厠在祀按— ?＞；：＜±^=■■?：；"■曲誼:2匚遼出：4.9登陸頁(yè)主體效果圖4.2購(gòu)物車(chē)頁(yè)4.2.1購(gòu)物車(chē)頁(yè)布局的實(shí)現(xiàn)購(gòu)物車(chē)頁(yè)和主頁(yè)為同一網(wǎng)站的不同頁(yè)面，整體布局一樣，故略。4.2.2購(gòu)物車(chē)頁(yè)主體布局的實(shí)現(xiàn)購(gòu)物車(chē)主體整體布局如圖4.10所示4.10購(gòu)物車(chē)主體整體布局建立HTML的組織結(jié)構(gòu)<divid二"divg"><div></div><table><table〉<table><table〉</div>添加css樣式代碼#divg{margin:OpxOpxOpx187px;font-size:15px;}購(gòu)物車(chē)主體效果圖如圖4.11所示Nt認(rèn)話曷怖格夕交易茶件*商品名ss±■險(xiǎn)g建捶背豐墊按爭(zhēng)器個(gè)色〕匸：;|.■m.L-15-Q折|1于|壽坤祥吉丄：1色類國(guó)口語(yǔ)」.：：il■：'■ -IP3h于|壽M 'Vll 17￥138.00￥1.：;-?;h球.i￥527.40你扶節(jié)省:￥34B.60補(bǔ)充更的郵件地址和匪希人基本信息■W二'程的購(gòu)徇車(chē)牛插侯鵝一神債兒簡(jiǎn)甜計(jì)尊器'■F.1:J..::\1iF-4.11購(gòu)物車(chē)主