網(wǎng)站建設(shè)設(shè)計(jì)說明書.doc

網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)課程卷二實(shí)踐考核網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)設(shè)計(jì)說明書設(shè)計(jì)題目：Smile家居網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)姓 名： 學(xué) 號(hào)： 20080530230 班 級(jí)： 08信管2班 指導(dǎo)教師： 孫俊國(guó) 完成日期： 2010-12-19 Smile家居網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)一、概述我的網(wǎng)站主題是關(guān)于家居裝修設(shè)計(jì)，我個(gè)人認(rèn)為，家是一個(gè)讓人放松的地方，而一個(gè)舒適的家居環(huán)境能讓我們釋放學(xué)習(xí)及工作的壓力，但現(xiàn)實(shí)中很多人對(duì)于家居的設(shè)計(jì)知識(shí)及裝修常識(shí)了解的不是很多。Smile家居網(wǎng)站的設(shè)計(jì)的目的不僅為了宣傳Smile家居公司，樹立企也公司高的知名度，宣傳企業(yè)的文化，吸引更多的公司和個(gè)人來我公司做業(yè)務(wù)，也是為了給需要了解家居知識(shí)，了解家居潮流，設(shè)計(jì)自己的舒適家居環(huán)境而設(shè)計(jì)的，更好的為顧客服務(wù)。本網(wǎng)站主要使用Dreamweaver、firework、flash、ASP VBscript、IIS和Access等主要工具。網(wǎng)站中主要是ASP動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)，ASP動(dòng)態(tài)網(wǎng)站實(shí)現(xiàn)的用戶與服務(wù)器交互的功能，實(shí)現(xiàn)了通過網(wǎng)頁訪問后臺(tái)數(shù)據(jù)庫的功能，更加方便的管理與更新網(wǎng)站。在實(shí)現(xiàn)自己網(wǎng)站之前，做了大量的準(zhǔn)備工作。上網(wǎng)搜索素材，包括圖片、視頻、家居裝修的常識(shí)和方法，參考其他家居網(wǎng)站設(shè)計(jì)方案及模塊實(shí)現(xiàn)，如：新浪家居、宜家家居等；借閱相關(guān)書籍，參考各種功能實(shí)現(xiàn)所需掌握的知識(shí)及方法；同時(shí)，向老師了解網(wǎng)站建設(shè)的設(shè)計(jì)思想及具體實(shí)現(xiàn)過程。網(wǎng)頁制作，首先是通過表格、框架、CSS、模板等實(shí)現(xiàn)主頁的簡(jiǎn)單設(shè)計(jì)，而后學(xué)習(xí)了ASP動(dòng)態(tài)網(wǎng)站建設(shè)的相關(guān)知識(shí)，通過安裝IIS，建立使用服務(wù)器的站點(diǎn)，連接數(shù)據(jù)庫，實(shí)現(xiàn)了用戶登錄，商品瀏覽、查看、修改、搜索的功能。這些功能的實(shí)現(xiàn)更加方便用戶購(gòu)買商品，讓公司對(duì)網(wǎng)站的管理更加方便。二、項(xiàng)目需求分析家居網(wǎng)站所面向的群體主要是需要裝修的群體、家居裝修設(shè)計(jì)師、想了解家居裝修知識(shí)及想與之進(jìn)行業(yè)務(wù)合作的群體等。需要裝修的群體又會(huì)有不同的要求。有人喜歡簡(jiǎn)單淡雅的風(fēng)格，有人喜歡高貴典雅的風(fēng)格，也有人喜歡時(shí)尚非主流的風(fēng)格；還有的人消費(fèi)水平較低，希望商品實(shí)用便宜，有的人消費(fèi)水平較高，想要設(shè)計(jì)質(zhì)量各方面比較突出的產(chǎn)品；同時(shí)還有針對(duì)不同年齡段的人群也有不同的要求。網(wǎng)站的建設(shè)根據(jù)不同用戶的需求，設(shè)計(jì)了不同的版塊。三、項(xiàng)目總體設(shè)計(jì)1、整體架構(gòu)及布局設(shè)計(jì)網(wǎng)站的整體色彩以白色和綠色為主，配有點(diǎn)淡粉紅色，字體設(shè)置為10pt，色彩的搭配符合家給人帶來舒適的感覺，更容易讓不同風(fēng)格的顧客接受。主頁中的各個(gè)模塊的布局主要是使用CSS實(shí)現(xiàn)的。主頁設(shè)計(jì)主要采用頂部導(dǎo)航、內(nèi)容左右分的布局。內(nèi)容的左側(cè)大致為具體的鏈接及提示信息等，右側(cè)主要是詳細(xì)的內(nèi)容介紹，包括新聞資訊、商品展示等。3、網(wǎng)站的欄目設(shè)計(jì)主頁中的欄目主要包括導(dǎo)航、用戶登錄、最新公告、最新資訊、收藏本店、寶貝分類、友情鏈接等詳細(xì)分類。導(dǎo)航包括首頁、案例展示、流行飾品、新品上架、視頻賞析和聯(lián)系我們七部分2、數(shù)據(jù)庫設(shè)計(jì)網(wǎng)站中的數(shù)據(jù)庫采用Access設(shè)計(jì)，數(shù)據(jù)庫名為data.mdb,包括下面圖中的6個(gè)表及其對(duì)應(yīng)關(guān)系：四、項(xiàng)目詳細(xì)設(shè)計(jì)1、前臺(tái)功能設(shè)計(jì)(1) 導(dǎo)航是一個(gè)一行六列的表格，綠色的背景搭配白色的字體?！鞍咐故尽辨溄犹D(zhuǎn)到anli.asp頁面，此頁面是下載的代碼，通過添加圖片，實(shí)現(xiàn)自己網(wǎng)站家居裝修案例的展示；“流行飾品” 是頁面內(nèi)的跳轉(zhuǎn)，通過命名錨記實(shí)現(xiàn)；“新品上架”鏈接跳轉(zhuǎn)到newproduct.asp,此頁面是通過添加商品信息表的記錄集和服務(wù)器行為實(shí)現(xiàn)數(shù)據(jù)庫中商品的展示；“聯(lián)系我們”是電子郵件鏈接，用戶可以給我們發(fā)郵件實(shí)現(xiàn)交流，進(jìn)行業(yè)務(wù)的聯(lián)系。 (2) 用戶登錄是通過表單、添加記錄集“用戶信息表account”和服務(wù)器行為“用戶登錄”實(shí)現(xiàn)的。其中用戶有兩個(gè)級(jí)別限制(這是對(duì)數(shù)據(jù)庫中數(shù)據(jù)安全性的設(shè)計(jì))，包括顧客“user”和管理員“admin”，顧客登錄后可以查看數(shù)據(jù)庫中商品、搜索商品和查看購(gòu)物車，管理員在顧客實(shí)現(xiàn)的功能的基礎(chǔ)上還有修改商品信息。實(shí)現(xiàn)了前臺(tái)向后臺(tái)的跳轉(zhuǎn)。設(shè)置用戶注冊(cè)的按鈕，方便顧客注冊(cè)成為網(wǎng)站的會(huì)員，使顧客能夠更多更方便的光臨本網(wǎng)站，查看自己的信息和最新的商品信息。(3) 最新公告欄目是向顧客展示最近網(wǎng)站的活動(dòng)及注意事項(xiàng)。本欄目也是通過添加記錄集“news表”、服務(wù)器行為重復(fù)記錄來實(shí)現(xiàn)多條公告的顯示，同時(shí)，添加了行為，實(shí)現(xiàn)了公告的自下向上的滾動(dòng)，吸引顧客的注意。(4) 最新資訊欄目是向顧客介紹有關(guān)家居裝修的知識(shí)及裝修的最新動(dòng)向、流行趨勢(shì)等等。本欄目功能的實(shí)現(xiàn)同樣是添加記錄集“zixun表”，添加服務(wù)器行為“重復(fù)區(qū)域”實(shí)現(xiàn)多條顯示。此欄目背景圖片是綠色的葉子和木板的顏色，比較貼切自然，和整個(gè)網(wǎng)站的顏色布局和符合。(5) 收藏本店欄目是方便用戶將本網(wǎng)站添加到收藏夾，能夠讓顧客記住網(wǎng)站，以便用戶下次直接訪問，從而增加忠實(shí)顧客，做到宣傳網(wǎng)站的目的，是通過添加代碼(6)友情鏈接欄目是增添了幾個(gè)相關(guān)家居網(wǎng)站的鏈接，是網(wǎng)站人性化設(shè)計(jì)的一部分。 2、后臺(tái)功能及設(shè)計(jì)此模塊主要是對(duì)數(shù)據(jù)庫中數(shù)據(jù)的處理與操作，具體的實(shí)現(xiàn)是通過數(shù)據(jù)庫創(chuàng)建鏈接、服務(wù)器行為、記錄集的綁定、來實(shí)現(xiàn)的。后臺(tái)管理頁面主要使用框架來實(shí)現(xiàn)，通過右邊的導(dǎo)航超鏈接實(shí)現(xiàn)在main中的跳轉(zhuǎn)。此頁面也是白色和綠色為主色調(diào)，與前臺(tái)的色調(diào)基本一致。用戶通過前臺(tái)中的用戶登錄就可跳轉(zhuǎn)到此頁面，輸入、修改、瀏覽、搜索商品信息，查看購(gòu)物車，下訂單的功能。輸入商品信息：通過此鏈接實(shí)現(xiàn)向數(shù)據(jù)庫中插入商品信息；修改商品信息：實(shí)現(xiàn)對(duì)數(shù)據(jù)庫中商品內(nèi)容的修改，而且只有管理員才有權(quán)限實(shí)現(xiàn)對(duì)商品信息的修改；瀏覽商品信息：此鏈接實(shí)現(xiàn)對(duì)數(shù)據(jù)庫中商品的瀏覽查看；搜索商品：此鏈接實(shí)現(xiàn)通過關(guān)鍵字和商品類型來搜索數(shù)據(jù)庫中的商品；查看購(gòu)物車：用戶登錄后可以通過此鏈接來瀏覽購(gòu)物車?yán)锏纳唐贰⑿薷囊?gòu)買的商品的數(shù)量、清空購(gòu)物車、下訂單，同時(shí)下了訂單后，用戶購(gòu)物車中就沒有選購(gòu)的商品了；查看訂單：用戶通過購(gòu)物車下了訂單，查看要支付的訂單，來購(gòu)買商品；留言板：用戶通過留言板給我們提建議，對(duì)我們的商品進(jìn)行評(píng)價(jià)。五、重點(diǎn)難點(diǎn)分析(1) IIS的安裝及建立虛擬目錄是重點(diǎn)。IIS意味著能發(fā)布網(wǎng)頁，實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的瀏覽。 (2) 站點(diǎn)的建立也是重點(diǎn)。站點(diǎn)的建立好了才能成功的實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的瀏覽及設(shè)計(jì)制作。(3) 網(wǎng)站主頁是設(shè)計(jì)、布局和色彩搭配。這是一個(gè)網(wǎng)站的門臉，如果給顧客留下較好的印象，顧客還會(huì)再次光顧，增加網(wǎng)站的流量，從而增加業(yè)務(wù)量。(4) 數(shù)據(jù)庫的建立及連接和表的設(shè)計(jì)。建立數(shù)據(jù)庫并連接才能實(shí)現(xiàn)用戶登錄、有關(guān)商品操作的功能；表的建立、設(shè)置主鍵、字段的格式類型和各個(gè)表之間建立的關(guān)系，只有成功建立數(shù)據(jù)庫和表才能實(shí)現(xiàn)在網(wǎng)頁中對(duì)數(shù)據(jù)庫信息的操作。(5) 框架的保存。保存好框架實(shí)現(xiàn)較好的頁面跳轉(zhuǎn)。(6) 添加記錄集、服務(wù)器行為及修改代碼。記錄集的添加要注意表關(guān)鍵字段的類型和兩個(gè)表之間的關(guān)聯(lián)，寫命令的時(shí)候要細(xì)心。添加服務(wù)器行為也要仔細(xì)謹(jǐn)慎。修改代碼頁是件細(xì)心的事，要注意代碼的格式及插入代碼的位置，只有準(zhǔn)確的代碼才能實(shí)現(xiàn)準(zhǔn)確的功能。(7) 在購(gòu)物車中查看購(gòu)買的商品，要實(shí)現(xiàn)下訂單的功能，在代碼中，實(shí)現(xiàn)向數(shù)據(jù)庫中插入數(shù)據(jù)，insert語句中插入記錄的字段的順序要和數(shù)據(jù)庫表中的字段的順序一致才能保證順利的插入。六、結(jié)論我是網(wǎng)頁設(shè)計(jì)的初學(xué)者，我也挺喜歡這門課程。我平時(shí)也在用心去學(xué)，但是到實(shí)際應(yīng)用中還是會(huì)碰到這樣那樣的問題，有的能夠解決，有的不能解決就上網(wǎng)去查出錯(cuò)的原因或是請(qǐng)教同學(xué)老師。通過本學(xué)期的學(xué)習(xí)實(shí)踐和期末的課程設(shè)計(jì)，我明白了做網(wǎng)頁不一定要復(fù)雜，但留白的地方不能太多，網(wǎng)頁要看著有層次舒服，字體一般是10pt，圖片和文字都要有，還可以加些特效，有些特效雖然不會(huì)，但也可以通過網(wǎng)絡(luò)來下載代碼實(shí)現(xiàn)。所以，獨(dú)立完成一個(gè)完整的網(wǎng)頁，并不只使用我們的書本知識(shí)，我們還要拓展學(xué)習(xí)范圍，就像因?yàn)榫W(wǎng)頁中需要圖片，而我們下載的圖片不一定就合適，我們可以通過firework來處理圖片。這樣通過網(wǎng)頁設(shè)計(jì)的考試形式，也培養(yǎng)了我們獨(dú)立思考的能力，增強(qiáng)了同學(xué)之間的團(tuán)結(jié)互助的友誼。最后感謝孫老師這學(xué)期對(duì)我的耐心教導(dǎo)！老師辛苦了信息工程學(xué)院網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)踐環(huán)節(jié)考核報(bào)告單2010-2011學(xué)年度第一學(xué)期期末排課編號(hào)：(2010-2011-1)-2010501-00425-1 批閱日期： 年 月 日姓名張廷廷班級(jí)08信管2班學(xué)號(hào)20080530230評(píng)分標(biāo)準(zhǔn)及得分評(píng)分標(biāo)準(zhǔn)分值得分界面設(shè)計(jì)顏色搭配合理，網(wǎng)頁布局好