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