南京高等職業(yè)技術(shù)學(xué)校 畢業(yè)設(shè)計（論文）說明書 系部 計算機管理系 專業(yè) 電子商務(wù) 作者 學(xué)號 題 目： 基于 然美鉆電子商務(wù)網(wǎng)站設(shè)計 指導(dǎo)教師 評閱教師 完成時間： 2012 年 5 月 18 日 2 畢業(yè)設(shè)計（論文）摘要 基于 然美鉆電子商務(wù)網(wǎng)站 設(shè)計 摘要 ： 隨著社會的日益發(fā)展和進步，人們的生活有著翻天覆地的變化，網(wǎng)購逐漸流行起來，人們可以足不出戶的直接在網(wǎng)上購買到自己想要的物品，尤其現(xiàn)代白領(lǐng)工作繁忙等一系列因素，舍去逛街時間，卻可以在網(wǎng)上滿足她們的需求。本網(wǎng)站針對此類人群提供了一個飾品的購物平臺，極大的提高了人們的生活效率。 本組 設(shè)計的 是一個飾品網(wǎng)站，以清新自然的風(fēng)格為主。大方、簡潔、時尚。 在頁面設(shè)計中以藍色為主要風(fēng)格，藍色代表靜謐深邃，也給人舒服平靜的感覺。 眾多的挑選模式，給人們耳目一新的感覺。 在技術(shù)上，本網(wǎng)站只要采用 行設(shè) 計， 件進行頁面美工等。網(wǎng)站有用戶登錄、注冊、留言板、購物車、評價、搜索商品等功能。滿足客戶的需求。 關(guān)鍵詞 ： 電子商務(wù)、 頁面設(shè)計 、 飾品網(wǎng)站 3 目錄 第一章 引言 . 4 第二章 自然美鉆網(wǎng)站系統(tǒng)簡要說明 . 4 2 1 網(wǎng)站開發(fā)所需語言 . 4 2 1 1 言 . 4 2 1 2 言 . 4 2 1 3 術(shù) . 4 2 2 網(wǎng)站開發(fā)運用的軟件 . 5 2 3 配置 . 5 第三章 網(wǎng)站 總體框架 . 7 3 1 結(jié)構(gòu)設(shè)計 . 7 3 2 網(wǎng)站的功能介紹 . 8 3 3 數(shù)據(jù)庫的建立 . 8 第四章 網(wǎng)站的頁面設(shè)計與風(fēng)格 . 9 4 1 主體 風(fēng)格 . 9 4 2 界面設(shè)計 . 9 頁 . 9 站子頁面的展示 . 13 像及字體的設(shè)計 . 18 站按鈕的制圖介紹 . 19 第五章 前臺模塊的設(shè)計 . 20 頁模塊的功能介紹 . 20 頁面模塊功能介紹 . 20 結(jié)論 . 20 致謝 . 21 參考文獻 . 21 4 第一章 引言 近年來，隨著 快速發(fā)展 ， 越來越多的 行 業(yè)組織開始在互聯(lián)網(wǎng)上建設(shè)網(wǎng)站 。 并以網(wǎng)頁作為 各個行 業(yè)向外界展示形象、發(fā)布信息的窗口。 從而一個新興的行業(yè)誕生 電子商務(wù)。許多商家在互聯(lián)網(wǎng)上建立起在線商店，不限時間、地點、空間的向消費者展示出一種新穎的購物模式。 網(wǎng)購一個時髦的購物方式，它的好處在于： 1、不受時間、地點的限制，只要有互聯(lián)網(wǎng)，隨時隨地可以購物； 2、 從訂貨、買貨到貨物上門無需親臨現(xiàn)場，既省時又省力； 3、 購物地點選擇多，網(wǎng)絡(luò)購物可以買到任何地方的商品，包括省外、國外的商品也可以購買到 ； 4、 網(wǎng) 上商品價格相對較低。相對于實體店， 網(wǎng)店 省去了店租、人力費用等可以適當(dāng)?shù)慕档蜕唐返膬r格。 綜上所述，電子商務(wù)發(fā)展如此之迅速，中國網(wǎng)購人數(shù)的越來越普及，人們對網(wǎng)上購物有了更深刻的掌握。真正從電子商務(wù)的平臺達到網(wǎng)絡(luò)營銷的效果，網(wǎng)上購物必然形成一種趨勢，持續(xù)不斷發(fā)展下去。無疑成為當(dāng)下流行、極具前景和創(chuàng)新活動的商業(yè)模式。 第二章 自然美鉆網(wǎng)站系統(tǒng)簡要說明 2 1 網(wǎng)站開發(fā)所需語言 2 1 1 言 文本標記語言）的縮寫，它是構(gòu)成 面（ 主要工具，是用來表示網(wǎng)上信息的符號標記語言。 2 1 2 言 一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，有了使網(wǎng)頁變得生動。 2 1 3 術(shù) 簡稱，是服務(wù)器端腳本編寫環(huán)境，使用它可以創(chuàng)建和運行動態(tài)、交互的 務(wù)器應(yīng)用程序。 5 2 2 網(wǎng)站 開發(fā) 運用的軟件 本系統(tǒng)基于 術(shù)設(shè)計，主要使用 據(jù)庫的開發(fā)運用了 2 3 配置 以 例，下面介紹 安裝及其配置： 雙擊 一鍵安裝程序。 如下圖所示： 2 2 系統(tǒng)會自動安裝，安裝完成后對話框自行關(guān)閉。 安裝完成后在桌面選擇鼠標右鍵我的電腦中的管理，選中左側(cè)的服務(wù)和應(yīng)用程序中的 務(wù)器下的網(wǎng)站默認網(wǎng)站。 如下圖所示： 2 2 選擇鼠標右鍵菜單中的“屬性”選項， 彈出默認網(wǎng)站屬性對話框。 可以對當(dāng)前 點進行進一步的管理配置。如下圖所示： 26 圖 2 在“ 默認 網(wǎng)站屬性” 的對話框中， 在“主目錄”屬性頁面可以設(shè)置 且可以進行訪問權(quán)限的設(shè)置，如“讀取”、“寫入”、“目錄瀏覽”、“記錄訪問”、“腳本資源訪問”和“索 引資源”。這里要把路徑設(shè)成網(wǎng)站所在的位置。如下圖所示： 2 2 在“文檔”屬性對話框中，需要添加“ 默認文檔，并需要放置在最上面。如圖所示： 27 圖 2置好后可以直接使用于瀏覽網(wǎng)頁。 第三章 網(wǎng)站總體框架 3 1 結(jié)構(gòu)設(shè)計 如下圖所示： 3 然 美 鉆注 冊 / 登 錄最 新 商 品商 品 分 類商 品 活 動版 權(quán) 所 有首 頁 廣 告熱 門 商 品 促 銷 商 品商 品 分 類商 品 問 答 商 品 評 價商 品 列 表 商 品 內(nèi) 容加 入 收 藏 直 接 購 買加 入 購 物 車商 品 結(jié) 算確 認 訂 單我 的 商 城服 務(wù) 與 評 價 訂 單 我 的 收 藏產(chǎn) 品 展 示 新 聞 發(fā) 布 留 言 板后 臺流 量 統(tǒng) 計關(guān) 于 我 們 支 付 方 式客 戶 服 務(wù)售 后 服 務(wù) 8 圖 3 2 網(wǎng)站的功能介紹 網(wǎng)站的功能主要包括有 ： 用戶的注冊與登陸以及個人信息的修改 商品的搜索以及購買 用戶對商品的評論以及提問 購物車的更新與清空 新聞的瀏覽以及后臺的添加 3 3 數(shù)據(jù)庫的建立 具體數(shù)據(jù)庫內(nèi)容： 作為一個動態(tài)的網(wǎng)站，數(shù)據(jù)庫的連接是很重要的，本系統(tǒng)數(shù)據(jù)庫采用003 數(shù)據(jù)庫，系統(tǒng)數(shù)據(jù)庫名稱為 包含 10 張表 。如圖 3-2 購物車列表。 用戶對商品的評論列表。 登陸后臺是的列表。 新聞管理頁的列表。 用戶購買的商品信息的列表。 商品信息的列表。 對商品的分類列表。 用戶對商品提問的列表。 量子統(tǒng)計訪問網(wǎng)站的信息列表。 記錄用戶注冊信息的列表。 9 圖 3四章 網(wǎng)站的頁面設(shè)計與風(fēng)格 4 1 主體 風(fēng)格 畢業(yè)設(shè)計 做的是一個 鉆石 飾品的網(wǎng)站， 該網(wǎng)站以簡約、大方為主要風(fēng)格，藍色為主色調(diào)。 4 2 界面設(shè)計 頁面分為 6 個板塊，有 、廣告板塊、用戶的登陸與注冊板塊、產(chǎn)品類別板塊、產(chǎn)品展示板塊、最新活動板塊。 頁 首頁寬度為 900 像素。在最頂上是 ； 的左下方是用戶的登陸與注冊板塊； 的右下方是一個 廣告；在用戶登陸與注冊的板塊下面是商品的分類與最新商品的板塊； 告下面是展品的展示區(qū)域。由這六個板塊組成網(wǎng)站首頁。如圖： 410 圖 4 站采用的是圖文并茂的 體顏色為淡藍色。左側(cè)是一個花形鉆石，右側(cè)是 “ 自然美鉆 ” 四個字，在下面還有 倒影。如圖 4圖 411 ： 的底紋是由深藍到淺藍組成，配合網(wǎng)站整體顏色，由于 顏色沒有層次感，上面又加少許變了透明度的圓圈。在 指、耳釘?shù)茸鰹橹鲌D。 的底部則是導(dǎo)航條，為了突出導(dǎo)航條，如圖導(dǎo)航條 的文字用 較深的藍色。 的整體顏色偏暗，所以加上一些白色的星星作為點綴。使整體看起來簡約而又不失其精細。如圖4示 圖 4 用戶登錄 、 注冊板塊：此板塊底紋與 顏色相呼應(yīng)，整體也做了陰影，這樣看起來更為立體，同時還多了一個埃菲爾鐵塔圖像，這與鉆石的氣質(zhì)非常貼切。頂上的“歡迎來到自然美鉆”用的是相對藍色而言較為突出的醬紅色，醬紅色不失整體的大氣而又醒目。而下面的“登錄、注冊、我的商城、我的購物車”字樣則用的是深藍色，與整體顏色較為協(xié)調(diào)。如圖 4示 圖 4 廣告板塊：廣告采用 術(shù)制作了一個動態(tài)的廣告，當(dāng)鼠標移動到某一圖片上時，圖片會自動展開。移動到另一圖片上時，則另一張圖片自動打開。由于廣告背景較為單調(diào)，所以這里設(shè)計改變透明度的圓圈作為底紋，正 好與上面的 相呼應(yīng)。如圖 4示 12 圖 4 產(chǎn)品展示與最新活動板塊：這兩個板塊的底紋用了漸變的效果，并且都采用的陰影，使其看起來更為立體，在板塊頂部用了深藍色的底紋，底紋上面則是所屬板塊的名稱，名稱采用了投影的效果。板塊整體協(xié)調(diào)。適合該網(wǎng)站。如圖 4示 圖 4 產(chǎn)品排列展示板塊：由于整個網(wǎng)站顏色整體偏暗，此板塊在顏色上沒有要求，產(chǎn)品為一排三個共兩排展示給顧客，所展示的商品圖片清晰，介紹完整，價格用醒目的紅色標注。如圖 4示 13 圖 4 網(wǎng)站子頁面的展示 商品列表： 商品列表布局與首頁相同，唯一不同的是商品圖片加上邊框，規(guī)整的呈現(xiàn)在用戶面前。并且商品的價格用了與頁面相呼應(yīng)的顏色，使整個頁面看起來清爽、大氣。如圖 4示 14 圖 4 新聞：新聞頁面布局也與首頁保持了相同的樣式，陳列新聞的標題用了12 號的字體，并且字體顏色也采用了深藍色。每個新聞標題前面都加上方形的項目符號，使整體看上去協(xié)調(diào)。如圖 4示 15 圖 4 銀飾保養(yǎng)頁面：銀飾保養(yǎng)頁面去除廣告模塊，字體則用偏土黃色的顏色，使整個頁面看上去清爽、整齊。有利于用戶閱讀。如圖 4示 16 圖 4 商品詳細 頁：商品詳細頁利用一個九行三列的表格把各個商品對應(yīng)的價格等相關(guān)信息展示給顧客，同時在表格下方添加了商品簡介、商品評價、商品問答板塊。有利于顧客更加詳細的了解該商品。如圖 4示 17 圖 4 我的購物車：我的購物車頁面是由一個六行五列的表格組成，第一行是標題“在線購物”底紋用的是深藍色，下面五行則是用戶購買商品顯示的有關(guān) 18 信息。如圖 4示 圖 4像及字體的設(shè)計 網(wǎng)站設(shè)計要注意的兩個要點：整體風(fēng)格和色彩搭配。 該網(wǎng)站因為是賣鉆石、水晶類電子商務(wù)型網(wǎng)站，所以風(fēng)格大方、清新，沒有過多的 裝飾。給顧客一種大氣的感覺。網(wǎng)站的 在最突出的位置，以便于顧客記住該網(wǎng)站的名字。在頁面設(shè)計中以藍色為主要風(fēng)格， 用一種色彩。然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。 該網(wǎng)站就是用基色 藍色。使其透明度與飽和度的不同。藍色代表靜謐深邃，也給人舒服平靜的感覺。配上深藍色的邊框和文字，有層次感的搭配。網(wǎng)站賣的是鉆 19 石、水晶等一些飾品，配上藍色又給顧客一種透亮的感覺。 網(wǎng)站字體， 一般網(wǎng)頁默認的字體是宋體。為了體現(xiàn)站點的 “ 與眾不同 ” 和特有風(fēng)格，可以根據(jù)需要選擇一些特別字體。制作者可以根據(jù)自己 網(wǎng)站所表達的內(nèi)涵，選擇更貼切的字體。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的計算機里沒有安裝特別字體，那么辛苦設(shè)計制作便可能付之東流了。 該網(wǎng)站主要采用的是宋體 12 號字體。主要顏色有與整體相呼應(yīng)的藍色等一系列顏色。 站按鈕的制圖介紹 首先介紹的是登錄與確認按鈕。這兩個按鈕設(shè)計思路相同，呈 一個圓角矩形狀，并且填充上與網(wǎng)站整體相應(yīng)的漸變色，再對其添加描邊的效果，如圖 4在圓角矩形上添加漢字與英文翻譯，中間用線條隔開，這樣整個按鈕看上去較為舒適。如圖 44示 。 圖 4 圖 4 圖 4次介紹的是加入購物車、加入收藏夾按鈕。這兩個按鈕用了投影的效果，在顏色上用了圖層疊加的方法，在最底層的漸變色上又疊加一層深藍色，文字則用的是白色。如圖 4示。最后做了倒影，這樣使按鈕看上去更為生動些。如圖 4示。 圖 4 圖 4后介紹的是前去結(jié)賬按鈕。前去結(jié)賬按鈕的 外觀是一個箭頭樣，然后加上投影和斜面浮雕的效果，立體感立即出現(xiàn)。最后在圖層上添加文字，文字右側(cè)則是一個象征性的小手。用來引導(dǎo)顧客購買商品。如圖 4示。 圖 420 第五章 前臺模塊的 設(shè)計 頁 模塊的功能介紹 登錄、注冊功能：用戶可以登錄或注冊成本網(wǎng)站會員，注冊成功后且可以修改自己的資料。 商品搜索功能：為了提高用戶對網(wǎng)站的使用效率，此功能可以直接輸入用戶想要買的商品，從而節(jié)約時間找商品。 產(chǎn)品分類功能：此功能將所有產(chǎn)品進行分類，從而可以節(jié)約用戶更多的時間直接找到自己所想買的產(chǎn)品。 廣告功能： 廣告采用 術(shù)做成，用戶用鼠標點擊到一則廣告可自動展開，生動形象的將產(chǎn)品展現(xiàn)在顧客眼前。 頁面模塊功能介紹 加入購物車功能：用戶選擇好商品后點擊加入購物車按鈕后，可以選擇繼續(xù)購物或修改當(dāng)前商品的購買數(shù)量及清空購物車，購買商品可以填寫自己的送貨地址、方式等相應(yīng)信息。從而購買商品成功。 商品評價功能：當(dāng)用戶購買商品成功后可以評價此商品，評價留在此商品信息的下面，任何用戶訪問該商品時都可以看見評價。 商品問答功能：此功能無需購買商品，但必須要用戶登錄方可對商品進行提問，所提問題任何用戶訪問該商品時 都可以看見提問。 結(jié)論 時間飛逝， 大專四年 在這最后 的畢業(yè)設(shè)計總結(jié) 中 劃上一個圓滿的句號 。 四年中學(xué)習(xí)了很多的軟件，包括 ，在這次的畢業(yè)設(shè)計中 ，本組將所學(xué)的所有軟件都運用起來，利用 行前臺靜態(tài)頁面的設(shè)計，數(shù)據(jù)庫用 行設(shè)計，動態(tài)頁面用了版設(shè)計等。 本小組設(shè)計的是一個飾品網(wǎng)站， 在整個設(shè)計過程中我們遇到很多問題和錯 21 誤 。在老師的 指導(dǎo) 與 幫助 下，我們一步一步的改正成為現(xiàn)在運行良好的網(wǎng)站。在本 次的畢業(yè)設(shè)計中，融合了所有四年所學(xué)的專業(yè)知識，這不僅為我鞏固了以前的知識，也為將來打好了結(jié)實的基礎(chǔ)。 通過本次畢業(yè)設(shè)計讓我明白了學(xué)習(xí)的重要性，學(xué)習(xí)是一個長期積累的事情，所以我們要活到老學(xué)到老。同時還明白了團隊中成員合作的重要性，憑自己單獨的力