【導(dǎo)讀】隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的發(fā)展，Inter網(wǎng)絡(luò)已經(jīng)在各行各業(yè)普遍發(fā)展。本系統(tǒng)采用B/S結(jié)構(gòu)，在版本的平臺上進(jìn)行開發(fā)編程，后臺數(shù)據(jù)庫。簡單的闡述了利用Dreamweaver. 設(shè)的內(nèi)容、網(wǎng)站建設(shè)的市場分析、網(wǎng)站建設(shè)的基本要素等等。本文還簡單的介紹了網(wǎng)上。購物的作用和安全性等。本網(wǎng)站能夠?qū)崿F(xiàn)客戶的基本要求，能夠通過本網(wǎng)站實(shí)現(xiàn)對商品。的搜索，商品展示，在線購買，訂單管理，在線客服，動(dòng)態(tài)信息發(fā)布等一系列操作。設(shè)計(jì)、詳細(xì)設(shè)計(jì)。國內(nèi)電子商務(wù)主要有B2B電子商務(wù)網(wǎng)站經(jīng)營模式、B2C電子商務(wù)網(wǎng)。在B2C模式中，網(wǎng)上書店和網(wǎng)上商店在增。等面向消費(fèi)者的電子商務(wù)網(wǎng)站大量推出。導(dǎo)下進(jìn)行的研究工作及取得的成果。含我為獲得及其它教育機(jī)構(gòu)的學(xué)位或?qū)W歷而使用過的材料。明并表示了謝意。以贏利為目的前提下，學(xué)?？梢怨颊撐牡牟糠只蛉績?nèi)容。取得的研究成果。對本文的研究做出重要貢。獻(xiàn)的個(gè)人和集體，均已在文中以明確方式標(biāo)明。本人完全意識到本聲明的。法律后果由本人承擔(dān)。

　　

【正文】 工具的基本知識。 （ 1） 源文件 psd， ai， cdr 的區(qū)別 psd文件就是用 photoshop創(chuàng)建的，當(dāng)然也必須用 photoshop打開， ai 文件是 Illustrator的。他們都是 Adobe 公司的。 ai 文件同樣也可以用 photoshop 打開 ， 但打開后會(huì)載入在基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 16 同一層內(nèi)。 cdr 文件是 CorelDRAW 的。 （ 2） 關(guān)于 CMYK 和 RGB 顏色模式 CMYK 是 Cyan（青）、 Mageata（品紅）、 Yellow（黃）、 Black（黑），這是印刷上使用比較普遍的色彩模式。 R、 G、 B 就是 Red、 Green、 Blue（紅，綠，藍(lán)）三種顏色， RGB 模式就是由這三種顏色為基色進(jìn)行疊加而模擬出大自然色彩的色彩組合模式。我們?nèi)粘Ｓ玫牟噬娔X顯示器、彩色電視機(jī)等的色彩都使用這種模式。 （ 3） 矢量圖 矢量圖與位圖最大的區(qū)別是 ， 它不受分辨率的影響。因此在印刷時(shí) ， 可以任意放大或縮小圖形而不會(huì)影響出圖的清晰度 。 矢量圖：是根據(jù)幾何特性來繪制圖形，矢量可以是一個(gè)點(diǎn)或一條線，矢量圖只能靠軟件生成，文件 占用內(nèi)在空間較小，因?yàn)檫@種類型的圖像文件包含獨(dú)立的分離圖像，可以自由無限制的重新組合。它的特點(diǎn)是放大后圖像不會(huì)失真，和分辨率無關(guān)，文件占用空間較小，適用于圖形設(shè)計(jì)、文字設(shè)計(jì)和一些標(biāo)志設(shè)計(jì)、版式設(shè)計(jì)等。 （ 4） 圖片文件 jpg， gif， png， bmp 的區(qū)別 bmp：是未經(jīng)過壓縮的用點(diǎn)陣來表示的真彩圖片 ， 占用磁盤空間較大 gif， 是經(jīng)過壓縮的 ， 只能表示 256 種顏色 ， 占磁盤空間小 ， 常用來演示色彩單一的成塊的卡通圖案 ，GIF 還有一種可以表示連續(xù)的動(dòng)畫 .png， 是 fireworks 的圖片格式 jpg， 也是有損壓縮格式但是它表示的顏色較豐富 ， 一般用來顯示真彩的 照片或圖案。 （ 5） 名片的尺寸問題 名片的標(biāo)準(zhǔn)尺寸： 90mmX54mm， 但是加上出血上下左右各 2mm， 所以在設(shè)計(jì)時(shí)制作尺寸必須設(shè)定為： 94 x 58mm。 使用 Dreamweaver 制作網(wǎng)頁基本步驟 創(chuàng)建頁面 在 Dreamveaver“文件－新建－常規(guī)－基本頁－ HTML”，這樣就建好了一個(gè) 頁面，英文版的默認(rèn)的文件名為 。 中文版 的默認(rèn)的文件名為“無標(biāo)題文檔”。 htm就表示這個(gè)網(wǎng)頁文件是一個(gè)靜態(tài)的 HTML 文件。給它改名為 。 注意： 網(wǎng)站第基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 17 一頁的名字通常是 或 。其它頁面的名字可以自己取。這也就是主頁，上傳后打開網(wǎng)頁默認(rèn)連接到此頁。 設(shè)置頁面屬性 在標(biāo)題空格里輸入網(wǎng)頁名稱，點(diǎn)擊修改－頁面屬性，打開“頁面屬性”窗口。在這里可以設(shè)置網(wǎng)站的標(biāo)題、背景顏色或背景圖像，超級鏈接的顏色（一般默認(rèn)即可），其他都保持默認(rèn)即可。 選取字體 如要選取字體，則選擇字體中的最后一項(xiàng)：編輯字體列表。然后在對話框中選 加 號，接著在“可用字體”欄中選擇需要加入到字體列表中的一種字體，點(diǎn)擊中間的按鈕就可以加入了。注：在網(wǎng)頁上最常用的是宋體字。不要將特殊的字體加到列表中使用，因?yàn)閯e人電腦上未裝就看不到。如果需要用的話，要做成圖片后再使用。在網(wǎng)頁上打入空格的辦法是：把輸入法調(diào)為全角。在網(wǎng)頁上換行的辦法是： shift+Enter。只按 Enter 則為換段 。 插入標(biāo)題文字 進(jìn)入頁面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下，編輯器默認(rèn)左對齊，光標(biāo)在左上角閃爍，光標(biāo)位置就是插入點(diǎn)的位置。如果要想讓文字居中插入，點(diǎn)屬性面板居中按鈕即可。 啟動(dòng)中文輸入法輸入文字。字小不要緊，我們可以對它進(jìn)行設(shè)置。 細(xì)節(jié)設(shè)置 （ 1）設(shè)置文字 首先選中文字，在屬性面板中，單擊顏色選擇圖標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。 （ 2）插入圖像 使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對話框，選中該圖像文件，單擊確定。 （ 3）預(yù)覽網(wǎng)頁 在頁面編輯器中按 F12 預(yù)覽網(wǎng)頁效果。 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 18 第四章 購物系統(tǒng)設(shè)計(jì)和實(shí)現(xiàn) 系統(tǒng)概述 購物網(wǎng)是互聯(lián)網(wǎng)對消費(fèi)者的電子商務(wù)模式。這種形式的電子商務(wù)一般以網(wǎng)絡(luò)零售業(yè)為主，主 要借助于 Inter 開展在線銷售活 動(dòng)。 一般是商家與顧客之間的商務(wù)活動(dòng)，也就是通常所說的 “ 網(wǎng)上購物網(wǎng)站 ” 。企業(yè)、商家可充分利用電子商城提供的網(wǎng)絡(luò)基礎(chǔ)設(shè)施、支付平臺、安全平臺、管理平臺等共享資源有效地、低成本地開展自己的商業(yè)活動(dòng)。它是 電子商務(wù) 按交易對象分類中的一種，即表示商業(yè)機(jī)構(gòu)對 消費(fèi)者 的電子商務(wù)。 本網(wǎng)站 具有的具體最基本模塊有用戶模塊、商品模塊，廣告模塊，購物車模塊、訂單管理模、用戶評價(jià)模塊等等。 每一種圖之間的區(qū)別以及定義： 用戶流程圖：需求人員根據(jù)用戶需求整理出來的 use case ，用來描述用戶需求的操作流程 。 功能模 塊圖：用來描述系統(tǒng)的功能組成，是產(chǎn)品方面應(yīng)該給出的，提供給售前或銷售的 。 系統(tǒng)架構(gòu)圖是系統(tǒng)的總體表示，主要描述清楚系統(tǒng)的組成部分，邏輯結(jié)構(gòu)；是研發(fā)層面的，是系統(tǒng)架構(gòu)師根據(jù)用戶流程圖和功能模塊圖做出來的，可以作為詳細(xì)設(shè)計(jì)的依據(jù)或直接給研發(fā)人員做下一步開發(fā)。 系統(tǒng)模塊程序流圖 本系統(tǒng)模塊的設(shè)計(jì) ， 其主要功能的程序流圖，如圖 41 所示： 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 19 圖 41系統(tǒng)模塊的程序流圖 系統(tǒng)模塊需求分析 網(wǎng)上商店的需求，由用戶、管理人員兩方面。電子商務(wù)網(wǎng)站可簡單的劃分為 2 個(gè)部分。 搜索商品 登錄 開始 合法用戶 ? 用戶注冊 ? 注冊 購買商品 修改訂單 ? 修改訂單 付款 結(jié)束 Y N Y Y N N Y 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 20 如圖 42 所示： 圖 42 系統(tǒng)模塊分析圖 管理 員 功能 ： 商店管理人員功能的信息量大，數(shù)據(jù)安全性和保密性要求最高。本功能實(shí)現(xiàn)對商店信息、購買者信息管理和統(tǒng)計(jì)查看及維護(hù)。商店管理員可以瀏覽、查詢、添加、刪除、修改、統(tǒng)計(jì)商品的基本信息。如圖 43 所示： 圖 43 管理人員的管理模塊 用戶功能 ： 用戶 的需求是查詢商店所存的商品、個(gè)人購買情況及個(gè)人信息的修改。 用戶可以在系統(tǒng)中實(shí)現(xiàn)注冊、瀏覽商品、搜索查詢商品、下定單、處理定單等功能。用戶的管理功能劃分 。 管理 人員 用 戶 注 冊 用 戶 登錄 用 戶 注銷 購物車 商品更新 用 戶 管理 主頁 管理員 用戶 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 21 如圖 44 所示： 圖 44 用戶功能 主界面設(shè)計(jì) HTML 是用來描述網(wǎng)頁的一種語言，是超文本標(biāo)記語言 (Hyper Text Markup Language)，不是一種編程語言，而是一種 標(biāo)記語言 (markup language)。標(biāo)記語言是一套 標(biāo)記標(biāo)簽 (markup tag)， HTML 使用 標(biāo)記標(biāo)簽 來描述網(wǎng)頁。 主界面 做界面的一些經(jīng)驗(yàn)的介紹： （ 1） 所有的 table， td 的 width 要寫成百分?jǐn)?shù)，而不能寫成絕對的像素值，因?yàn)榭蛻舳说臋C(jī)器的分辨率我們是不知道的，不能按照 1024*768 的假設(shè)去寫 HTML 頁 面 。 （ 2） Portal 界面中每個(gè)部分都是一個(gè)矩形框，矩形框的上部是一個(gè)三個(gè) td 的 tr，每個(gè) td 都有一個(gè)獨(dú)特的 background 圖片，組成了一個(gè)帶弧形的條 帶外觀。這里要注意的是，在使用 background 圖片的時(shí)候，如果不指定 td 的 width 和 height， IE/Firefox 會(huì)根據(jù)他們的邏輯來擴(kuò)大 /縮小 TD 的寬度，這樣就會(huì)導(dǎo)致背景圖片被拉伸或縮小。所以，一定要定死 td 的 width。這里我是這樣做的： （ 3） 兩個(gè)兩端的 td， background 是帶左右弧形的圖片，這兩個(gè) td 的 width 定成絕對的像素值（根據(jù)圖片的 width 來定） 。 用戶功能 個(gè)人資料 收貨資料 修改密碼 購物資料 訂單資料 積分查詢 統(tǒng)計(jì)信息 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 22 （ 4）中間的 td 由于 width 事先不知道（用百分?jǐn)?shù)定的整個(gè)表格的寬度），所以 width寫成 100% 。 （ 5）如果只做了上面兩步，就會(huì)發(fā)現(xiàn)兩端的 td 被中間的 td 擠 沒了，因?yàn)橹虚g td的 width 是 100%，所以 這里 NOWRAP 閃亮登場。這個(gè) HTML 關(guān)鍵字表示不要截?cái)?td中的內(nèi)容。于是，給這三個(gè) td 都套上 NOWRAP 這個(gè)關(guān)鍵字，三個(gè) td 就顯示正常了，而且中間的 td 會(huì)自動(dòng)撐大到最大！ 用戶登錄 用戶登錄系統(tǒng)是一般網(wǎng)站都有的子系統(tǒng) ， 其作用是限制該網(wǎng)站某些資源的使用 ， 只有通過身份確認(rèn)后的用戶才可以訪問系統(tǒng)為其設(shè)置的使用功能 ， 從而為用戶提供了安全的訪問和數(shù)據(jù)操作 ， 防止非法用戶進(jìn)入系統(tǒng)。有了登錄自然要有注冊 ， 其實(shí)應(yīng)該是相反的 ， 先有注冊才有登錄。只不過注冊通常是在登錄模塊的“登錄”窗體下面加一個(gè)注冊鏈接。 用戶登錄系統(tǒng)的基本功能如下 ： (1) 用戶登錄。普通用戶輸入正確的用戶名和密碼后進(jìn)入系統(tǒng) ， 并可以瀏覽到所有注冊用戶列表 ， 但不可以進(jìn)行 修改和刪除的操作。 (2) 用戶注冊。用戶填寫所需要的信息并提交 ， 系統(tǒng)提示注冊成功與否。 (3) 當(dāng)管理員登錄后 ， 將進(jìn)入用戶管理頁。在這里通過單擊不同的鏈接 ， 將可以修改和刪除用戶的信息。 一般管理信息系統(tǒng)使用時(shí)都需要用戶登錄，用戶通過登錄界面選擇操作員代碼，并輸入操作密碼。如果操作員代碼及操作密碼與數(shù)據(jù)庫的密碼表內(nèi)事先保存的某條記錄相匹配，則登錄成功，這時(shí)用戶可以對系統(tǒng)進(jìn)行相應(yīng)的操作；否則登錄失敗，退出系統(tǒng)。 用戶登錄核心代碼如下： !DOCTYPE HTML PUBLIC //W3C//DTD HTML Transitional//EN HTML HEAD TITLE登錄 /TITLE META NAME=Generator CONTENT=EditPlus META NAME=Author CONTENT= META NAME=Keywords CONTENT= META NAME=Description CONTENT= style type=text/css 基于 Dreamweaver的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 23 .login_top{ backgroundimage:url()。 backgroundrepeat: norepeat。 height:8px。 width:280px。 overflow: hidden。} login_middle{borderleft:1px solid。 width:279px。 height:279px。 borderright:1px solid。 bordercolor:666666。 overflow:hidden。} .login_bottom{ backgroundimage:url()。 backgroundrepeat: norepeat。 height: 8px。 width: 280px。 overflow: hidden。} /style /HEAD BODY center div class=login_top/div div class=login_middle centerfont size=4 color=redb用戶登錄 /b/center hr width=250 style=border:1px dashed 666666。 height:1px centerfont color=black用戶名： input name=text1 type=text/center centerfont color=black 密 amp。nbspamp。nbsp 碼： input name=password type=password/center centerinput name=submit type=submit value=登錄 /center p/p hr width=250 style=border:1px dashed 666666。 height:1px centerb您還不是用戶？ /b/center div id=1 style=position:absolute。 right:5px。 bottom:5px。 width=250a href=注冊 .h