版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
網(wǎng)站設計實訓報告題目:購物商城網(wǎng)站前臺的設計與實現(xiàn)學生姓名:楊宇飛學 號:1176807432專業(yè):計算機4班指導教師:張靜
課程設計(論文)任務及指導書題 目購物商城網(wǎng)站前臺的設計與實現(xiàn)題目來源□實際工程項目□科研課題■教學模擬題目□其它題目類型□工程設計型□科學研究型□調(diào)研綜述型■其它類型一、 課程設計(論文)任務(包括對工程圖紙的具體要求)及設計參數(shù)1問題定義、可行性研究2需求分析。3總體設計。4詳細設計及實現(xiàn)。5測試及調(diào)試。二、 專題部分要求頁、購物設計與實現(xiàn)購物商城網(wǎng)站前臺頁面,包括網(wǎng)站首頁、商品展示頁、具體商品詳細介紹車頁、注冊頁、登錄頁、幫助中心客服頁。頁、購物三、 本題目的重點和難點以及與同組其它學生所做題目的關系重點:采用3IV+CSS布局。難點:編碼符合3C標準,無冗余代碼。選題分組方式:三人一組,分工合作完成。四、 指導方式和工作進度要求指導方式:集中輔導、個別答疑相結合。工作進度:1天需求分析;2天總體設計;3-4天詳細設計及編碼;5天測試及調(diào)試。五、 與本設計題目相關的理論知識(包括新知識)提要網(wǎng)站前臺的開發(fā)流程;W3C和Web2.0標準;DIV+CSS布局;HTML.CSS語言;開發(fā)工具UltraEditDreamweave]站點管理;調(diào)試工具Firefox+Firebu插件。六、 建議參考資料及使用方法1北京阿博泰克北大青使用HTML語言和CSS開發(fā)商業(yè)站點,科學技術文獻出版2社11年2前沿科技精通CSS+DIV網(wǎng)頁樣式布局人民郵電出版社2007年3徐延章美工與創(chuàng)意——網(wǎng)頁設計藝科學出版社2012年4王爽、徐仕猛、張翩站設計網(wǎng)頁配色:經(jīng)典網(wǎng)頁設計0例,科學出版社2011七、 答辯之前學生應作的準備工作提要1完成目標網(wǎng)站前臺的開發(fā)2完成課程設計報告的撰寫目錄TOC\o"1-5"\h\z\o"CurrentDocument"課程設計(論文)任務及指導書 2\o"CurrentDocument"第一章引言 4\o"CurrentDocument"1.1網(wǎng)站開發(fā)的背景 4\o"CurrentDocument"1.2網(wǎng)站開發(fā)的目的和意義 4\o"CurrentDocument"1.3網(wǎng)站開發(fā)的需求分析 4\o"CurrentDocument"第二章開發(fā)技術和工具的介紹 6\o"CurrentDocument"2.1開發(fā)技術 6\o"CurrentDocument"html 6\o"CurrentDocument"CSS 6\o"CurrentDocument"Div+CSS 6\o"CurrentDocument"2.2開發(fā)工具 6\o"CurrentDocument"第三章網(wǎng)站的總體設計 7\o"CurrentDocument"第四章網(wǎng)站的詳細設計與實現(xiàn) 8\o"CurrentDocument"4.1首頁 8\o"CurrentDocument"4.1.1首頁布局的實現(xiàn) 8\o"CurrentDocument"頂部header的實現(xiàn) 9\o"CurrentDocument"主體main的實現(xiàn) 10\o"CurrentDocument"底部footer的實現(xiàn) 12\o"CurrentDocument"4.2登陸頁 13\o"CurrentDocument"4.1.1登陸布局的實現(xiàn) 13\o"CurrentDocument"4.1.2登陸頁主體布局的實現(xiàn) 13\o"CurrentDocument"4.2購物車頁 14\o"CurrentDocument"4.2.1購物車頁布局的實現(xiàn) 14\o"CurrentDocument"4.2.2購物車頁主體布局的實現(xiàn) 14\o"CurrentDocument"第五章網(wǎng)站的兼容性測 16\o"CurrentDocument"5.1瀏覽器之間的兼容性測試方法 16\o"CurrentDocument"5.2驗證是否符合W3C標準的方法 16\o"CurrentDocument"第六章結論 17\o"CurrentDocument"參考文獻 18第一章引言1.1網(wǎng)站開發(fā)的背景近年來,隨著Internet的迅速崛起,互聯(lián)網(wǎng)已日益成為收集提供信息的最佳最快渠道,并快速進入傳統(tǒng)的流通領域?;ヂ?lián)網(wǎng)的跨地域性、可交互性、全天候性使其在與傳統(tǒng)媒體行業(yè)和傳統(tǒng)貿(mào)易行業(yè)的競爭中具不可抗拒的優(yōu)勢,因而發(fā)展十分迅速。在電子商務在中國逐步興起的大環(huán)境下,越來越多的人們開始選擇在網(wǎng)上購物,這其中包括所有日常生活用品及食品、服裝等。通過在網(wǎng)上訂購商品,可以由商家直接將商品運送給收貨人,節(jié)省了親自去商店挑選禮品的時間,具備了省時、省事、省心等特點,讓顧客足不出戶可以購買到自己滿意的商品。1.2網(wǎng)站開發(fā)的目的和意義我們的網(wǎng)上商城建設在為瀏覽者與網(wǎng)站所有人搭建起一個網(wǎng)絡平臺,瀏覽者或潛在客戶在這個平臺上可以進行整個交易、交流過程,與商務型網(wǎng)站相比,商城網(wǎng)站建設的業(yè)務更依賴于互聯(lián)網(wǎng),基于互聯(lián)網(wǎng)絡銷售,消費者基本都來源于網(wǎng)上。電子商城的訂購功能更強大,集批發(fā)、零售、團購及在線支付等功能于一體的訂單創(chuàng)建與費用支付。網(wǎng)上商城方案結合網(wǎng)站建設電子商務應用與開發(fā)的成功經(jīng)驗和技術積累,以實惠的價格向更多的商家及個人提供先進、穩(wěn)定的網(wǎng)上商城平臺開發(fā)服務。(1) 以獨立域名在互聯(lián)網(wǎng)上開設網(wǎng)上商城,集銷售、服務、資訊一體化的電子商務平臺;(2) 依托此商城開展綜合性的網(wǎng)絡營銷活動,推廣網(wǎng)站,樹立品牌;(3) 建立起良好的數(shù)據(jù)/應用集成接口。1.3網(wǎng)站開發(fā)的需求分析網(wǎng)站目標受眾:電子商品需求者、商業(yè)人士。通過貴美商城網(wǎng)站:展示商品價格、質(zhì)量和類型;傳達企業(yè)人士的設計理念;加深瀏覽者對商品的認識網(wǎng)站整體設計風格考慮網(wǎng)站的定位、主要受眾群體和設計目標,我們采用的設計風格簡潔大方,穩(wěn)重配色方案以橙色主色,以白色為輔助色,字體采用宋體設計。網(wǎng)上商城功能概述:首頁,商品展示;會員注冊、登錄,建立完整的會員資料庫;管理員發(fā)布、管理商品信息、上傳圖片等;支持商品多級分類檢索、關鍵詞模糊搜索;支持價格的管理,包括市場價、批發(fā)價等;方便快捷的購物車、網(wǎng)上支付;可編輯的訂購說明。第二章開發(fā)技術和工具的介紹2.1開發(fā)技術2.1.1html使用html描述的文件,能獨立于各種操作系統(tǒng)平臺,訪問它只需要www瀏覽器,我們所看到的網(wǎng)頁,是瀏覽器對html文件進行解釋的結果。Html是由標記和屬性組成的規(guī)則。這些規(guī)則規(guī)定了文字,表格和超鏈接在網(wǎng)頁中顯示等內(nèi)容。CSS它是一種用來表現(xiàn)html(標準通用語言的一個應用)或xml(標準通用標記語言的一個子集)等文件樣式的計算機語言。它是用于增強控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。Div+CSSDIV+CSS是WEB設計標準,它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格(table)布局定位的方式不同,它可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。提起DIV+CSS組合,還要從XHTML說起。XHTML是一種在HTML(標準通用標記語言的子集)基礎上優(yōu)化和改進的新語言,目的是基于XML應用與強大的數(shù)據(jù)轉換能力,適應未來網(wǎng)絡應用更多的需求?!癉IV+CSS”其實是錯誤的叫法,而標準的叫法應是XHTML+CSS。因為DIV與Table都是XHTML或HTML語言中的一個標記,而CSS只是一種表現(xiàn)形式。也許其提出者本意并沒有錯,但是跟風者從表現(xiàn)曲解了其意思,認為整個頁面就應當是DIV+CSS文件的組合。2.2開發(fā)工具Dreamweaver介紹:一個可視化的網(wǎng)頁設計和網(wǎng)站管理工具,支持最新的Web技術,包含HTML檢查、HTML格式控制、HTML格式化選項、HomeSite/BBEdit捆綁、可視化網(wǎng)頁設計、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等富媒體格式和動態(tài)HTML、基于團隊的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。第三章網(wǎng)站的總體設計貴美商城的總體設計結構圖如圖3.1所示。貴美商城登錄頁幫助中心頁注冊頁購物車頁商品展示頁商品介紹頁圖3.1貴美商城總體設計結構圖第四章網(wǎng)站的詳細設計與實現(xiàn)4?1首頁4.1.1首頁布局的實現(xiàn)首頁包括頭部、主體部分、和底部三大部分。首頁布局如圖4.1所示。4.1首頁整體布局首先建立HTML的組織結構主頁整體布局時分為三個div塊,即頭部header,中間主體部分main和底部footer。頂部和底部使用iform引用“頂部.html"和“底部.html”。首頁的整體布局結構代碼如下:<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.首頁效果圖如圖4.2所示科咆孵蒔幫助申心拳知認收嵬?畛輙歸」帥貴美苗城歡迎曠!昔頁 冢加fe器手機劉礎且用戸負 書轄 須》1中心免費卄空 亍減窖詢家用電器立琢電洗衣也平偵電理電處水吾眾底音哨加語空贓栢imj電嗽件33&TS憲電1晞畋煲敝機家用電器立琢電洗衣也平偵電理電處水吾眾底音哨加語空贓栢imj電嗽件33&TS憲電1晞畋煲敝機蘇機羽板電極電勵吾頻曙空:酣宿冷柜:IT電鋼聞件羸下M麟機手機地們洗衣扳平板電迪電拔水吾VW電跚件電股汽眾電下鄉(xiāng)眾電用舟電戯mui.EI用百費洗衣機平板電駅電昭水證悲邑晌空朗儺冷柜EYD電暮甜件卑豈質(zhì)勞電磁會觸蘆做丈字■妄#&師開網(wǎng)店安金錘阿上犬熱^商穴競我阿購惑間煩阿上開十昶奶SKGooclti:大學更求豈帀奔冋住黒陰圄推美白嚇諄雅戌君寶 曲昶|當當京桶脇迅畫寂|砸|堆巫知樸開心陰|祁鋼|閾電岡mena-SHT*2033-2010北京帛密美商樣覘埜司allbighthkebvid
把無S;40Q-€6-150&0ZiiliL.s?rvi>:e£prd.conDCF::-OlEr&0510211C4-^圖4.2首頁效果圖4.1.2頂部header的實現(xiàn)整體布局如圖4.3所示圖4.3頂部header整體布局建立HTML的組織結構頂部整體布局時分為四個div塊,即logo,menu,hello,和nav。頂部的整體布局結構代碼如下:<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; }首頁頭部效果圖如圖4.3所示CuiM&iShoppingCuiM&iShopping=7圖4.5=7圖4.5主體main整體布局B頁涼弟電屈手機魏碼日用百故書貓樂曲甲心免時店全球番詢圖4.4首頁頭部效果圖4.1.3主體main的實現(xiàn)主體main整體布局如圖4.5所示建立HTML的組織結構頂部整體布局時分為三個div塊,即zuo,zhong,和you。頂部的整體布局結構代碼如<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;}首頁主體效果圖如圖4.6所示家用電國--;;!. f.m-|e<:--.<^■0.計:= :,:師閑件止*二 at記F::旳II..'卅1 ±1-111 :北譏用電站木吾mF家用電國--;;!. f.m-|e<:--.<^■0.計:= :,:師閑件止*二 at記F::旳II..'卅1 ±1-111 :北譏用電站木吾mFI0U電衩酣件:淪■?-電坂費:羽ir.手機數(shù)碼大玉電Fr.IR-T;i-n■■'JSmu電衩fill*瞇r春電T蟲片:氏:旳II.日用百貨丸蘇電〕r.in二丹戸?iM-n冷柜10411"嚴電飯15孵機M器D¥I4B6豆折陽彌人語音導戰(zhàn)手機fiftUfilSiftas咅剽三星妄QSS濮M-IIIS國雌壞禮ifiifittfflltlJS昔商君移訕GI用繭寸筑記XJ""亡IJJI■:■■/.'■■■if.■-■...弋亞馬酬時尉濮,加時記S-時出晟隹選桂?弓桂鮭LTI移訕皿標丁汕元--Mill:If*如Mfit新上網(wǎng)本1#-6-P.B圖4.6首頁主體效果圖4.1.4底部footer的實現(xiàn)整體布局只有一個div塊建立HTML的組織結構<divid="footer"></div>添加css樣式代碼#footer{width:980px; height:150px; text-align:center;line-height:20px;margin-left:160px;}首頁頭部效果圖如圖所示;羽汽: ^:¥.|?:殆|A.T|運;?可":”rnPElIGHTO2Da>3a]D寸伸冷雷:M商艱司ILL1IGHTRJSERklDJAijEi j3X4)£r>dlt世pr<LaiiItFsPrcPfi415a2l10^號圖4.7首頁底部效果圖4.2登陸頁4?1?1登陸布局的實現(xiàn)登陸頁和主頁為同一網(wǎng)站的不同頁面,整體布局一樣,故略。4?1?2登陸頁主體布局的實現(xiàn)登陸頁整體布局如圖4.8所示圖4.8登陸頁整體布局建立HTML的組織結構<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;}登陸頁主體效果圖如圖4.9所示
=.j::::■<-.2.L=■-;-#荻我=.j::::■<-.2.L=■-;-吒ftSfffi也陀曬枚■■?諏世黒:士三二厠在祀按— ?>;:<±^=■■?:;"■曲誼:2匚遼出:4.9登陸頁主體效果圖4.2購物車頁4.2.1購物車頁布局的實現(xiàn)購物車頁和主頁為同一網(wǎng)站的不同頁面,整體布局一樣,故略。4.2.2購物車頁主體布局的實現(xiàn)購物車主體整體布局如圖4.10所示4.10購物車主體整體布局建立HTML的組織結構<divid二"divg"><div></div><table><table〉<table><table〉</div>添加css樣式代碼#divg{margin:OpxOpxOpx187px;font-size:15px;}購物車主體效果圖如圖4.11所示Nt認話曷怖格夕交易茶件*商品名ss±■險g建捶背豐墊按爭器個色〕匸:;|.■m.L-15-Q折|1于|壽坤祥吉丄:1色類國口語」.::il■:'■ -IP3h于|壽M 'Vll 17¥138.00¥1.:;-?;h球.i¥527.40你扶節(jié)省:¥34B.60補充更的郵件地址和匪希人基本信息■W二'程的購徇車牛插侯鵝一神債兒簡甜計尊器'■F.1:J..::\1iF-4.11購物車主
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 《眾人行管理咨詢網(wǎng)》課件
- 運動器材銷售工作總結
- 2013年高考語文試卷(湖北)(空白卷)
- 租車服務員工作總結
- 2006年江西高考語文真題及答案
- 驅(qū)動未來新型汽車
- 2023年-2024年項目管理人員安全培訓考試題附解析答案可打印
- 2023年-2024年項目部管理人員安全教育培訓試題及參考答案【A卷】
- 2023-2024安全培訓考試題及答案【名校卷】
- 2023年-2024年項目部安全培訓考試題答案完美
- 2024秋期國家開放大學本科《納稅籌劃》一平臺在線形考(形考任務一至五)試題及答案
- 紙巾合同范本
- 四川省德陽市2025屆數(shù)學三年級第一學期期末聯(lián)考模擬試題含解析
- 2024年平面設計師技能及理論知識考試題庫(附含答案)
- 2024年高考真題-英語(新高考Ⅰ卷) 含解析
- 2023-2024年6月廣東省普通高中學業(yè)水平生物考試及答案
- 鐵路技術管理規(guī)程-20220507141239
- 植物學智慧樹知到答案2024年浙江大學
- 礦山開采與生產(chǎn)管理
- 大學體育與健康智慧樹知到期末考試答案章節(jié)答案2024年齊魯師范學院
- 化學實驗操作評分細則表
評論
0/150
提交評論