網(wǎng)站實(shí)訓(xùn)報(bào)告

1、題目：網(wǎng)站實(shí)訓(xùn)報(bào)告學(xué)生姓名：王星學(xué)專號：1176807448業(yè)：計(jì)算機(jī)指導(dǎo)教師：張靜課程設(shè)計(jì)(論文)任務(wù)及指導(dǎo)書題目設(shè)計(jì)與實(shí)現(xiàn)購物商城網(wǎng)站前臺(tái)頁面，包括網(wǎng)站首頁、商品展示頁、具體商品詳細(xì)介紹頁、購物車頁、注冊頁、登錄頁、幫助中心客服頁。三、本題目的重點(diǎn)和難點(diǎn)以及與同組其它學(xué)生所做題目的關(guān)系重點(diǎn)：采用DIV+CSS布局。指導(dǎo)方式：集中輔導(dǎo)、個(gè)別答疑相結(jié)合。工作進(jìn)度：1天 需求分析；3-4天 詳細(xì)設(shè)計(jì)及編碼；五、與本設(shè)計(jì)題目相關(guān)的理論知識（包括新知識）提要II網(wǎng)站前臺(tái)的開發(fā)流程；DIV+CSS布局；HTMLCSS語言；開發(fā)工具UltraEdit；Dreamweaver站點(diǎn)管理；調(diào)試工具Firefo

2、x+Firebug插件。1HTMLCSS開發(fā)商業(yè)站點(diǎn)，科學(xué)技術(shù)文獻(xiàn)出版,2011年2前沿科技精通CSS+DIV網(wǎng)頁樣式布局人民郵電出版社年3徐延章美工與創(chuàng)意網(wǎng)頁設(shè)計(jì)藝, 年4王爽、徐仕猛、張晶網(wǎng)站設(shè)計(jì)網(wǎng)頁配色：經(jīng)典網(wǎng)頁設(shè)00科學(xué)出版社,2011七、答辯之前學(xué)生應(yīng)作的準(zhǔn)備工作提要1完成目標(biāo)網(wǎng)站前臺(tái)的開發(fā)2完成課程設(shè)計(jì)報(bào)告的撰寫III(論文 1 1 1 2 3 3 3 32.1.3DIV+CSS. 3 4 網(wǎng)站的總體設(shè)計(jì) 5 6 6首頁布局的實(shí)現(xiàn) 6 8 9. 9 IV V第一章引言近年來隨著 Internet的迅速崛起互聯(lián)網(wǎng)已日益成為收集提供信息的最佳最快渠道，并快速進(jìn)入傳統(tǒng)的流通領(lǐng)域?；ヂ?lián)網(wǎng)的

3、跨地域性、可交互性、全天候性使其在與傳統(tǒng)媒節(jié)省了親自去商店挑選禮品的時(shí)間，具備了省時(shí)、省事、省心等特點(diǎn)，讓顧客足不出戶可以購買到自己滿意的商品。客戶在這個(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)上。電子商城的訂購功能更強(qiáng)大，集批發(fā)、零售、團(tuán)購及在線支付等功能于一體的訂單創(chuàng)建與費(fèi)用支付。網(wǎng)更多的商家及個(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ò)營銷活動(dòng)，推廣網(wǎng)站，樹立品牌；（3）建立起良好的數(shù)據(jù)應(yīng)用集成接

4、口。1 （1）網(wǎng)站目標(biāo)受眾：電子商品需求者、商業(yè)人士。（2）通過貴美商城網(wǎng)站：（1）展示商品價(jià)格、質(zhì)量和類型；（2）傳達(dá)企業(yè)人士的設(shè)計(jì)理念；（3）加深瀏覽者對商品的認(rèn)識（3）網(wǎng)站整體設(shè)計(jì)風(fēng)格考慮網(wǎng)站的定位、主要受眾群體和設(shè)計(jì)目標(biāo)，我們采用的設(shè)計(jì)風(fēng)格是：簡潔大方，穩(wěn)重。（4）配色方案以橙色主色，以白色為輔助色，字體采用宋體設(shè)計(jì)。網(wǎng)上商城功能概述：首頁，商品展示；會(huì)員注冊、登錄，建立完整的會(huì)員資料庫；管理員發(fā)布、管理商品信息、上傳圖片等；支持商品多級分類檢索、關(guān)鍵詞模糊搜索；支持價(jià)格的管理，包括市場價(jià)、批發(fā)價(jià)等；方便快捷的購物車、網(wǎng)上支付；可編輯的訂購說明。2第二章 開發(fā)技術(shù)和工具的介紹 2.1.

5、1html使用 html描述的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)，訪問它只需要 www瀏覽器，我們所看到的網(wǎng)頁，是瀏覽器對 html文件進(jìn)行解釋的結(jié)果。Html 是由標(biāo)記和屬性組成的規(guī)則。這些規(guī)則規(guī)定了文字，表格和超鏈接在網(wǎng)頁中顯示等內(nèi)容。2.1.2CSS它是一種用來表現(xiàn) html（標(biāo)準(zhǔn)通用語言的一個(gè)應(yīng)用）或 xml（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。它是用于增強(qiáng)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。2.1.3DIV+CSSDIV+CSS是 WEB table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。提起 DIV+CSS 組合，還要從 XHT

6、ML說起。XHTML是一種在 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，目的是基于 XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求?！癉IV+CSS” XHTML+CSS DIV與Table都是 XHTML 或 HTML語言中的一個(gè)標(biāo)記，而 CSS 只是一種表現(xiàn)形式。也許其提出者本意并沒有錯(cuò)，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認(rèn)為整個(gè)頁面就應(yīng)當(dāng)是 DIV+CSS 文3件的組合。2.2Dreamweaver 介紹： Web HTML檢查、HTML格式控制、HTML 格式化選項(xiàng)、HomeSite/BBEdit 捆綁、可視化網(wǎng)頁設(shè)計(jì)、圖像 FTP Flash和Shockwa

7、ve等富媒體格式和動(dòng)態(tài)、基于團(tuán)隊(duì)的 Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。4第三章 網(wǎng)站的總體設(shè)計(jì)總體結(jié)構(gòu)圖如圖 3.1 所示：貴美商城首頁商品展示商品介紹購物車頁幫助中心圖 3.1 總體設(shè)計(jì)結(jié)構(gòu)圖5第四章 網(wǎng)站的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.1.1 首頁布局的實(shí)現(xiàn)首頁包括頭部、主體部分、和底部三大部分。首頁布局如圖 4.1 所示。圖 4.1 首頁整體布局（1）首先建立 HTML的組織結(jié)構(gòu)主頁整體布局時(shí)分為三個(gè) div main和底部 。如下：頂部div id 主體div id 底部（2）添加 CSS 樣式代碼通過為頁面添加 CSS 代碼可以控制每個(gè) div塊的大小，具體位置，

8、邊框，背景色等外觀樣式。6首先設(shè)置頂級容器的寬度為 980px，水平居中，這樣可以同時(shí)控制頭部、主體和底部三個(gè)塊的位置。然后逐一設(shè)置每個(gè)塊的具體大小，頭部，主體和底部三個(gè)塊寬度均為，就可以隨著頂級容器的大小自適應(yīng)的調(diào)整，三個(gè)塊的高度分別設(shè)置為 149px，2200px和 290px。#containermargin:0px auto; padding:0px; width:980px; #headerheight: 149px; width: 100%; margin:0px; background-color:#FFF; padding:0px;#mainwidth:100%; height

9、:2200px; margin:0px; padding:0px;#footermargin:0px; padding:0px; height:290px; width:100%;（3）效果圖如圖 4.2 所示：圖 4.2 首頁74.1.2 頂部 header的實(shí)現(xiàn)頭部又包括 、廣告條、搜索條、注冊、登錄、瀏覽記錄和導(dǎo)航條七部分。首頁頭部布局如圖 4.3 所示。圖 4.3 首頁頭部布局（1）建立 HTML的組織結(jié)構(gòu)nav o top_logotop_rightregisterlogin同樣使用左浮動(dòng)，使其在同一行顯示。logo div 廣告條div 搜索條div 右邊部分 div 導(dǎo)航條（2）

10、添加 CSS 樣式代碼.headermargin:0px; padding:0px; height:140px; width:100%;.topmargin:0px auto; padding:0px; height:90px; width:1305px;.top_logo margin:auto; padding:0px; height:83px; width:230px; float:left;.top_ad padding:0px; margin:0px 15px; float:left; width:380px; height:83px;.top_serach padding:0px;

11、 margin:0px 5px 0px 15px; float:left; width:260px; height:100px;.top_right float: left; weight: 237px; height: 80px; margin:1px 1px 1px 10px;.navmargin:0px;padding:0px;height:50px;width:100%;84.1.3 中間 main的實(shí)現(xiàn)中間又包括左側(cè)商品分類、中間的瘋狂購物區(qū)、右側(cè)的商品說明區(qū)三大部分。中間布局如圖 4.4 所示。圖 4.4 中間布局（1）建立 HTML的組織結(jié)構(gòu)中間首先分為三大塊上部分左側(cè)（mian

12、1和右側(cè)（div 商品分類div 瘋狂購物div 右邊部分 （2）添加 CSS 樣式代碼.mian1height:603px; width:189px; padding:40px 5px 0px 15px;background:url(./images/bg.gif) no-repeat;float:left;height:100%;.mian2width:525px; float:left;height:100%;.mian3height:643px;padding-left:10px;background:url(./images/bg.gif) no-repeat -737px 0px;

13、4.1.4 底部 footer的實(shí)現(xiàn)（1）建立 HTML的組織結(jié)構(gòu) 9（2）添加 CSS 樣式代碼#footerwidth:100%;padding-top:5px;clear:both;text-align:center;4.2.1 登錄頁布局的實(shí)現(xiàn)登錄頁布局如圖 4.5 所示。登錄圖 4.5 登錄頁布局（1）建立 HTML的組織結(jié)構(gòu) （2）添加 CSS 樣式代碼#regheight:400px;padding-top:80px;background:url(./images/login_bg.gif) no-repeat;10（3）效果圖如圖 4.6 所示。圖 4.6 登錄頁4.2.2 登

14、陸頁各塊的實(shí)現(xiàn)（1）左側(cè)有一列表，列表內(nèi)最上面有一圖片，然后依次排列七行內(nèi)容。（2列表，,在第五行嵌套一列，內(nèi)有兩行內(nèi)容。114.3.1 購物車頁布局的實(shí)現(xiàn)購物車頁布局如圖 4.7 所示。圖 4.7 購物車頁布局（1）建立 HTML的組織結(jié)構(gòu) (2)添加 CSS 樣式代碼#hehemargin:0px 0px 0px 0px;12（3）購物車頁效果圖如圖 4.8 所示。圖 4.8 購物車頁4.3.2 購物車頁各塊的實(shí)現(xiàn)（1）最上面有一背景圖和“全場運(yùn)費(fèi)一律 2 （2）中間有一表格分為六行 6 列；（3）最下面有一表格分為五行一列。13第五章網(wǎng)站的兼容性測（1）IE多版本使用 IE Collec

15、tion 軟件模擬；（2）Firefox 3.5（需安裝 Firebug （1）制作期間使用 Dreamweaver兼容性提示；（2）網(wǎng)頁制作完成后使用 Firefox插件進(jìn)行檢測；（3）發(fā)送到 官方網(wǎng)站進(jìn)行在線驗(yàn)證 。14第六章 結(jié)論通過學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作，我對網(wǎng)站建設(shè)有所了解，現(xiàn)在模擬建設(shè)一個(gè)購物網(wǎng)站，對網(wǎng)站建設(shè)的心得有以下：家電、日用品等。利用表格進(jìn)行排版：表格主要有三個(gè)元素表格、行和列及單元格，而且表格還可要超過 3 層，因?yàn)槿绻隳菢幼隽?，瀏覽器解析的時(shí)間會(huì)增加了，那么當(dāng)瀏覽者訪問時(shí)速度就慢了。利用層排版：層很適合形式自由的排版，現(xiàn)在 WEB標(biāo)準(zhǔn)建議排版時(shí)拋棄表格，不CSS用 CSS WEB標(biāo)準(zhǔn)感興趣，那么你就該好好的學(xué)習(xí) CSS 了！利用框架進(jìn)行排版：