《WEB基礎(chǔ)綜合課程設(shè)計》課程設(shè)計報告

1、寧波大紅鷹學(xué)院信息工程學(xué)院課程設(shè)計報告課程名稱：電子商務(wù)網(wǎng)站項目名稱：項目組長：黃政杰項目成員： 鄭建樓（美工設(shè)計）吳威杰（交互設(shè)計）班級名稱：10計科4 （本）專業(yè)名稱：計算機科學(xué)與技術(shù)完成時間：2011-11-20信息工程學(xué)院制一、項目需求和背景（一號標(biāo)題，黑體四號,段前段后0.5行，表和圖要加題注）（正文部分要求宋體，小四，固定行距20磅，首行縮進2個漢字）介紹項目的開發(fā)背景，可以從市場、客戶群、目標(biāo)、定位等介紹，項目需求 主要包括功能、技術(shù)、性能等需求。（至少400字）二、網(wǎng)站規(guī)劃設(shè)計說明（網(wǎng)站規(guī)劃設(shè)計說明，包括 LOGOH十、結(jié)構(gòu)設(shè)計、技術(shù)方案、內(nèi)容規(guī)劃等。）1、網(wǎng)站規(guī)劃（二號標(biāo)題，

2、黑體小四號，至少500字，包括主頁和各內(nèi)容頁）網(wǎng)站名稱：AC商鋪網(wǎng)站主題：通過網(wǎng)站宣傳，樹立商鋪形象，提高商鋪知名度輸入法網(wǎng)站語言：簡體中文網(wǎng)站風(fēng)格：以暖色調(diào)為主，給人以家的感覺，主題鮮明突出（顧客之上，服 務(wù)到家），要點明確，以簡單明確的語言和畫面體現(xiàn)站點的主題，表現(xiàn)網(wǎng)站的個 性和情趣，辦出網(wǎng)站的特點。建站內(nèi)容及特性“海外海賓館”，作為一個宣傳性的企業(yè)網(wǎng)站主要是突出它的中心標(biāo)志性形 象，運用現(xiàn)代流行理念和元素，體現(xiàn)出今日海外海網(wǎng)現(xiàn)代不失傳統(tǒng)、 莊重不失輕 松、大眾不失前衛(wèi)的特點。并做好各個欄目的導(dǎo)航，突出網(wǎng)站的重要職能和重要 內(nèi)容，使得網(wǎng)站能夠同今日高科技與服務(wù)行業(yè)完美結(jié)合，建成國內(nèi)一流的宣

3、傳型商務(wù)網(wǎng)站。（1）首頁設(shè)計頁頭：準(zhǔn)確無誤的標(biāo)識海外海集團站點和它的企業(yè)標(biāo)志。頁面：應(yīng)是各大欄目導(dǎo)航，最新產(chǎn)品展示，最新供應(yīng)、求購、代理、合作信 息，最新加入會員企業(yè)，最新行業(yè)資訊，最新展會信息。（2）導(dǎo)航設(shè)計導(dǎo)航系統(tǒng)是有效連接網(wǎng)站各處的工具，它有效的分類網(wǎng)站內(nèi)容并指向它所代 表的內(nèi)容。是通過超文本鏈接或圖片鏈接，使瀏覽者能夠在網(wǎng)站上自由前進或后 退，而不會讓瀏覽者使用瀏覽器上的前進或后退。海外海網(wǎng)站導(dǎo)航項目：。集團概況公司簡介發(fā)展歷程1、海外海榮譽2、海外海規(guī)模3、董司長寄語4、聯(lián)系方法。新聞中心主要寫集團記事為一個大類進行企業(yè)展示，對感興趣的人可是跟企業(yè)進行聯(lián)系，發(fā)送信。人力資源主要公布企

4、業(yè)現(xiàn)今的人力規(guī)模和最新要招聘的對象。下屬企業(yè)主要是對海外海企業(yè)下屬的H一個企業(yè)進行介紹。企業(yè)信息化主要以集團今日公告、客戶留言反饋、友情鏈接這三個欄目組成。2、結(jié)構(gòu)設(shè)計(至少200字，二號標(biāo)題，宋體小四號，段前段后0.5行，內(nèi)容宋小四, 單倍行距)網(wǎng)頁布局圖(主要給出不同版式頁面的布局圖)(1)首頁+ rtf由直耦嘴 ：n-，正生任"冤山州不1力打飛 ftM® c：i 章!京口WilcAWA卻加R段呻訊 m j圖1首頁布局圖(2)注冊頁.圖2注冊頁布局圖(3)登錄頁,.圖3登錄頁布局圖(4)結(jié)算頁圖4結(jié)算頁布局圖(5)留言頁圖5留言頁面布局? 網(wǎng)站結(jié)構(gòu)圖圖4網(wǎng)站結(jié)構(gòu)圖3、C

5、I形象設(shè)計網(wǎng)站的LOGO ACO大寫的AC與相對應(yīng)的英文解釋，很容易知道這是一個賣電腦配 件的網(wǎng)站。4、網(wǎng)站色彩(說明：包括網(wǎng)頁主色調(diào)、鏈接色、導(dǎo)航色等，要求通過表格列出頁面中需要的顏色表)(1)網(wǎng)站主色調(diào)配以棕黃色和少量的白色，文字為黑色和該網(wǎng)站的主色彩是藍色和淺藍色, 白色，如下圖所示：白色文本圖5配色采集綠色是一種非常具有親和力的顏色，它代表的是自然、生命、活力與健康， 是使用比較廣泛的顏色之一。黃綠色和橙色的使用，則使整個網(wǎng)站顯示朝氣蓬勃。（2）網(wǎng)頁鏈接色表1普通文字鏈接配色表采訪制過的曾接（回£）十鼠標(biāo)整停，hover >當(dāng)前徼活骷接< active '

6、）:打1%百Mh尤卜螭避就就做誣下則錢卜FWL帶同1鯉無觸又（3）導(dǎo)航鏈接色（畫表格說明）5、技術(shù)方案（說明：用到了哪些技術(shù)及軟件，至少 250字）表2技術(shù)方案表序號網(wǎng)站組成使用技術(shù)效果說明11、網(wǎng)站所后文 字頁面2、靜態(tài)圖片3、表格HTML1、出版在線的文檔，其中包含了標(biāo)題、文本、表 格、等內(nèi)容。2、通過超鏈接檢索在線的信息。3、為獲取遠(yuǎn)程服務(wù)而設(shè)計表單，用于檢索信息、 定購產(chǎn)品等。21、網(wǎng)站動念菜 單2、動態(tài)圖標(biāo)JavaScript1、實現(xiàn)在一個 Web頁面中鏈接多個對象2、與Web客戶交互作用，而可以開發(fā)客戶端的應(yīng) 用程序等。31、輕常更新的 網(wǎng)頁2、動態(tài)數(shù)據(jù) 如商口口展小,用 戶信息A

7、SP1、是一種在WEB1艮務(wù)器端運行的腳本語言，程序 代碼安全保密2、此可以使用ActiveX控件繼續(xù)擴充其功能3、可以輕松的存取各種數(shù)據(jù)庫適用與各種瀏覽器4網(wǎng)站內(nèi)的動態(tài) 按鈕CSS使用CSS的技術(shù)，網(wǎng)頁便會給人一種賞心悅目、 工工整整的感覺，同時字體的色彩變化也使主 貞艾得更加生動活潑。51、用戶資料2、產(chǎn)品資料3、產(chǎn)品查詢4、留言信息數(shù)據(jù)庫1、完善的客戶數(shù)據(jù)資料處理2、快速的資料查詢能力3、未來電子商務(wù)的基礎(chǔ)三、HTMIM面結(jié)構(gòu)圖（包括主頁、內(nèi)容頁等，不同風(fēng)IO勺版面都要給出結(jié)構(gòu)圖）#main#logo#box#text#ver圖6 HTML頁面結(jié)構(gòu)圖四、頁面DIV結(jié)構(gòu)代碼（包括主頁和各內(nèi)

8、容頁，注意三與四是一一對應(yīng)的關(guān)系）<div id="main"><div id="logo"></div><div id="box"><div id="text"></div><div id="ver"></div></div></div>五、代碼及注釋(要求：包括主頁和不同風(fēng)格內(nèi)容頁CSS代碼及JS代碼，字體：Times New Roman,字號:五號,行品巨：1.25倍，)

9、* 通配符的設(shè)置，保證頁面效果一致margin: 0;padding: 0;border: 0;font-family:" 宋體", sans-serif;font-size: 12px;color: #000;body /設(shè)置整個頁面的背景色及文本的位置background: #CCC;padding-top: 20px;text-align: center;#main 設(shè)置最大DIV的背景圖像、背景顏色及寬高background: #060 url(site/img/home_main_bg.gif) repeat-x;border: 1px solid #060;ma

10、rgin: 0 auto;height: 500px;width: 770px;六、網(wǎng)站測試結(jié)果（要求：頁面在 FF及IE（7.0以上一種版本）下測試結(jié)果，貼圖完成，要求測試主頁和各內(nèi) 容頁，貼圖要有各瀏覽器的標(biāo)識）1、IE7.0下測試結(jié)果B0®式件多 (TfflrE) 壽U m 收福g ZAI. Sffc: (Hl。同. g> 向圖靠1尸m #<KKA <J用到上止:回工tolt ?hn 3fcl - Sit tVidcn kttil出租更$勵7詞玷+文平KITWW 理而療匯百曲力武為史7君士啪刃出啊士 號觸,北kJE好的盛臾 FE國律粉外的不W"L匕兒

11、”"師，：irrii3pr«ff IdrAHr i e-程門黑節(jié)月£1巨關(guān)無安陰，吊后沖聲. 孌白:mr餐F1串回新,求.稀評辰帝叫運戊付費憶”圖7 IE7.0測試結(jié)果2、IE8.0下測試結(jié)果圖8 IE8.0測試結(jié)果3、FF下測試結(jié)果圖9 FF測試結(jié)果七、項目計劃及分工1、項目計劃表電子商務(wù)網(wǎng)站設(shè)計項目計劃表項目組長：班級：日期:進程第1次課(11.11.)第2次課(11.13.)第3次課(11.19.)第4次課(11.19.)第5次課(11.19.)第6次課(11.19.)負(fù)責(zé)人項目計劃1息體方案1效果圖11設(shè)計報告系統(tǒng)測試1答辯2、分工完成情況（標(biāo)注具體工作或

12、書寫工作創(chuàng)新的地方）X1 :X2:X3:八、總結(jié)（要求：必須要有內(nèi)容，可以是學(xué)習(xí)總結(jié)，可以是體會，可以是技術(shù)知識總結(jié)，也可以 是經(jīng)驗總結(jié)等，不能少于600字）了解關(guān)于 翻譯服務(wù)”的相關(guān)內(nèi)容">翻譯服務(wù)</a></li>"網(wǎng)站建設(shè)服務(wù)”的相關(guān)內(nèi)容">網(wǎng)站建設(shè)</a></li>了解取得我們服務(wù)的方法和流程">服務(wù)流程</a></li>了解如何支付費用”> 付費</a></li>附頁（源代碼附加注釋）（包括xhtml代碼、JS代碼等核心代碼，只需要附錄在電子稿中，不需要打印，注意排版,Times New Roman ,五號，單倍行距）<div id="menu"><ul><li><a href="cn_s1.html" t