1

第一章 緒論

在目前社會裡，網路已不在是收信寄信這麼簡單，也不在是線上

遊戲的天下，電腦的普及使得許多人懂得要在網路上完成許多商業行

為這也讓購物不在是實體店面的專利，許多的交易行為都已經可以在

網路上達成。而許多店家也看到了網路的便利性和人們的消費型態的

改變也紛紛架設起屬於自己的網路店家，使買賣不在侷限於當地區域

更可擴展到世界各地。也讓商家在這般的商機中不斷的研發新產品與

創新，更造就了許多的不可能。有許多人已經搭上了電子商務的這般

列車，也有許多人才準備買票，為的就是要搭上這班順風車，不讓其

它店專美於前。

在調查中發現台灣有 81%的人在使用網路，而其中 95%會使用網

路來進行購物，去年網友使用網路拍賣比例為 78%，較前年增加 9%。

而其中以女性為主，佔了五成八，其中 30 至 39 歲的女性最多，達三

成七；其次是 20 至 29 歲，也佔了兩成七左右。雖然上半年景氣較差

網路購物的金額也稍有減少但這也代表了網路購物已成為民眾消費

主要方式之一。[5]

2

1.1 研究動機

社會越益發展，人們生活腳步不斷地增快，凡事講求高效率、高

科技，我們使用的產品越來越先進，但是離「人」越來越遠，生活中

的細微感受都被過多的華麗包裝所掩蓋。

而物極必反造就了現今反璞歸真的潮流，人們開始重視人與自然

的關係，於是有機食物、天然養生、環保等意識抬頭，加上越來越多

的科學報告證實了化學物質對人類身體，以及自然環境所產生的種種

危害，因此以天然原料製成的產品便日漸受到重視，人們不只要吃的

天然、健康，使用的產品也在這樣的意識中，隨之發展。

「盥洗」是人們天天需要進行的活動，由於環境中越來越髒的空

氣、變化無常的天氣，使得盥洗時使用的清潔產品，不得不參雜著過

多的化學成份，以達到強烈的清潔功效，然而這些都會逐步累積地影

響人體，過敏體質者更是深受其害。自然是最佳的良藥，只要終止化

學成份、惡化的環境對人體如此的惡性循環，回歸自然的懷抱，便能

取得人與自然的平衡。

手工皂使用的原料皆取自天然，不再讓人體有過多的負擔，回歸

於「讓皮膚休息」的概念就是最好的一帖藥。

本研究以「澡堂。風景」手工皂為例，已商家為本次專題的實行

對象，為此商家架設一個已清新為主題的電子商務平台，讓他們能將

3

自己用創意製作出來的各種手工皂，為業界製注入一道新的活水。讓

更多人知道香皂不一定只有方的其實也可以以不同的形式呈現，打破

消費者對香皂的刻版印象。

1.2 研究目的

本小組取得到「風景。澡堂」的同意讓他們成為本小組專題製作

的對象，藉此機會讓店家能夠擁有屬於自己的網站，本次目的如下：

一.建置一個網站讓消費者可與商家最直接的溝通環境。

二.加入購物車方便消費者購物時能有最方便的結帳空間。

三.加入討論區讓使用者能互相分享使用心得，讓商家能明確掌握。

四. 增加線上曝光率。

1.3 企業簡介

1.3.1 何謂手工皂

手工皂就是所謂的手工冷製皂(Cold Press)冷製皂就是整個反

應過程都在低溫下進行，如此可以保留植物成分最完整的天然維生素

和營養成分，而市面上出售的香皂採用的是礦物油及工業熱製法製作

的，而這樣做出來的香皂是沒有護膚效果的，只能算作清洗劑而已。

手工皂使用純植物性油脂作為轉化成皂的原料。轉化的過程是將

4

植物油脂以鹼轉化成脂肪酸鈉，並利用脂肪酸根離子(脂肪酸鈉溶化

於水後形成脂肪酸根)一端親油一端親水的特性，以親油端吸附人體

肌膚汙垢，再以沖洗水拉住親水端，將依夠一同沖走以達到肌膚清潔

的效果。

市售香皂大都含有酸性添加物，嚴格來說許多市售香皂根本不能

稱為皂，只是使用後會洗去皮膚自然油脂的合成洗劑，手工皂在製造

過程中全部採低溫製成，過程中添加天然油脂，如小麥胚芽油、荷荷

芭油並保留了製程中最重要的成分，甘油，是皮膚最天然的保養品。

手工皂可以依個人喜好量身訂做添加各種天然物質，如蔬果巧克

力蜂蜜牛奶中藥材等各種對人體有益的物質。[1]

1.3.2 設計理念

Journey-澡堂風景

Journey：旅程，經常被用在文學作品中，用來形容人生是一場

旅程，或是用在一場冒險的旅程。

旅行可以是一場爛漫的出走，也可以是經過縝密計劃的行程，帶

著期待、逃避、遠離的複雜心情，到一個熟悉或者陌生的環境，離開

與歸返之間，唯一無法丟棄的就是自己本身。很多人一起旅行，有豐

富的笑聲、歡樂；兩個人的旅行，是一場剛好，恰好的陪伴、不過的

5

心得交換；一個人的旅行，看起來有一點孤單，少了對話卻有了更多

面對自己的機會。

洗澡，是人們最直接面對、接觸自己的私密時光，在這一場旅行

中，檢視自我一天以來的種種行為、沉澱白日的紛擾，一場淋浴除了

洗淨身體，也洗滌心靈上的疲憊。洗澡也可以是一場短暫的旅行，如

果你不只是將它當作日常生活中的慣性活動，一樣的充滿期待/期待

與自我赤裸的接觸；一樣的充滿選擇/氣味、療效、種類；一樣的充

滿收穫/終止役天的疲憊與奔勞。

單數，節省了一個空間，確因此而得到更多。讓洗澡不再只是必

要完成的環節，而是天天想要的旅行。[1]

1.3.3 預期表現

製作內容

一.肥皂產品

由旅行所蘊含的元素所衍生出五個系列組合，以及旅行組。

6

圖 1-1 產品元素圖

二.肥皂產品包裝

規劃肥皂的常態整體包裝，並且發產適合不同的銷售管道

的包裝。

7

1.4 商家部落格

1.4.1 痞客邦部落格

圖 1-2 部落格

8

1.4.2 痞客邦產品介紹

圖 1-3 痞客邦產品介紹

9

1.4.3 露天搜尋

圖 1-4 露天搜尋

10

1.4.4 露天產品資訊

圖 1-5 露天產品資訊

11

1.4 研究流程圖

本研究之研究流程如圖 1-6 表示

圖 1-6 研究流程圖

確立題目

研究動機與目的

文獻探討

系統建置

實作結果

結論

系統測試 是

否

12

第二章 文獻探討

2.1 領域知識

2.1.1 電子商務之定義

「電子商務(Electronic Commerce ,簡稱 EC 或 e-Commerce)」

內容範圍非常廣泛，不只包括「商業交易」，還包括政府提供的各項

電子化的服務、保險醫療的申報、遠距教學、電子銀行、跨企業共同

研發、企業之間的協同運作...等。[2]

2.1.2 電子商務帶來的好處

電子商務講求是速度、便捷和縮短時空的隔閡，經由電腦和網際

網路聯結的方式可以縮短交易時間和交易成本，進而滿足組織、商品

與消費者的需要，改善產品、服務與增加傳送速度服務的品質，並達

成提高各地的商業速度，降低訊息傳送的成本。並利用其網路搜尋與

取得資訊，可以幫助個人與公司進行決策之制定，不論是哪一種產

業，未來會涉入其中，而這也將是未來的商業模式，進一步達到整體

企業 e化的境界。[6]

2.1.3 電子商務特性

一、全年無休

13

虛擬商店的銷售時間具有全天二十四小時的服務功能。

二、全球化市場

地區距離不扮演任何角色，虛擬商店的銷售領域，將從傳

統的國內市場轉變為國際性市場，具有市場全球化特性。

三、成本較低

在網路上開設虛擬商場，相對於實際設立企業而言，不需店

面、節省人事成本，只需較低的的進入成本，因此進入電子商場

門檻極低。

四、新中間商

各種新中間商興起，例如入口網站、網路內容提供者、仲介

網站、提供交易平台等網站。雖然有人認為電子商務可以去除中

間商降低成本，但是反而有新的中間商興起。

五、多媒體資訊

透過多媒體技術，可使商品型錄、交易資訊...等，有更豐

富的內容及展現格式。

六、交易的時間

快速的交易，線上及時處理及回應，縮短整體商業交易的企

業流程及時間。[2]

14

2.1.4 電子商務網站類型

2.1.4.1 性質類型

一、公司/品牌網站

公司/品牌網站是為了提供公司或其所擁有品牌相關資訊的

網站。通常這些網站所提供的資訊包括公司歷史、經營理念與哲

學、相關新聞消息、營業狀態與經營績效等等。例如，中鋼公司

的網站(http://www.csc.com.tw/index.asp)便是一個典型的公

司品牌網站。

二、服務網站

基於自助服務的特性，因此服務網站是網際網路上發展很快

的一種網站類型。服務網站的目的是希望透過該網站來提供一種

服務的介面，以代替過去由人員提供的服務，例如聯邦快遞

(http://www.fedex.com/tw/)的顧客可以透過公司的網站來查

詢運送物件的所在位置。其他還有網路銀行所提供的查詢、轉

帳、付款、以及網路上購買基金等網上服務，例如台新網路銀行

的網站(https://netbank.taishinbanh.com.tw/)。服務網站不

全然著重於降低成本，有時是希望能藉由網站提供顧客更好的服

務品質，或更方便的服務時間。

三、銷售網站

15

銷售網站是網上的虛擬商店，他允許顧客在網上購買商品。

對於行銷廠商而言，這代表了一種新的配銷通路。典型的銷售網

站包括 PChome 線上購物(http://shopping.pchome.com.tw/)及

博客來的網路書店(http://www.books.com.tw/)。

四、資訊網站

資訊網路是以提供資訊為主的網站，資訊網站可分為免費的

網站與收費的網站。免費的網站主要是透過創造人潮來吸引廣告

主刊登懬告，以收取廣告費，例如中時電子報

(http://news.chinatimes.com/);而收費的網站則是對加入的

會員收取一定的費用，例如以「專業生活型態與消費者市場研究

顧問」為定位的東方線上(http://www.isurvey.com.tw/);當然

有些收費網站同時也接受廣告刊登，例如大中華知識銀行

(http://www.gcinfobank.com.tw/)。

在資訊網站中，有一種很重要的類型是搜尋引擎。搜尋引擎

(search engines)是協助上網的人口尋找網上資訊的網站。由於

網際網路的資料相當多，因此人們必須依賴搜尋引擎這種工具來

幫助他們尋找所需的資料。著名的搜尋引擎包括

Google(http://www.google.com/)、Yahoo!奇摩網站

(http://tw.yahoo.com/),Pchome(http://www.pchome.com.tw/)

16

等。[3]

2.1.4.2 互動類型

一、B2B

B2B主要指公司或組織針對其他工業用戶或組織而設立的網

頁或網站。例如，提供塑膠業者在網上進行塑料買賣的塑網

(http://www.ibuyqlastic.com/)。

二、B2C

B2C主要指公司或組織針對單一個人或消費者而設立的網站

或網頁。例如，提供網上購物的亞馬遜網站

（http://www.amazon.com/）。

三、C2B

C2B 主要指單一個人或消費者針對公司或組織的網站或網

頁。例如，消費者透過網站或公司或組織聯繫，以獲得所需的商

品。一些幫助消費者購買合理價位物品的網站，如：

priceline.com（http://www.priceline.com/）和 NexTag 網站

（http:/www.nextag.com/）即是 C2B 的例子。

四、C2C

C2C 主要指單一個人針對單一個人所設立的網站或網頁。例

如，個人的網頁或是個人自己將自己的物品上網登錄出售，如

17

Yahoo!奇摩拍賣網站（http://www.coolbid.com/）和 eBay 網站

（http://www.ebay.com/）。

五、B2E

各家企業運用 Internet 提升企業效率的努力從未停止，B2E

是「員工關係管理」（business to employee management）的機

制。B2E 入口網站的應用層可分成三大類：營運流程上線、人力

資源管理上線，以及員工服務上線。

（1） 在營運流程上線方面，他擁有足以取代傳真、電話、交談等傳

統溝通方式的線上互動功能，就像 B2B 與 B2C 一樣，可以為雙

方省下不少時間與成本。

（2） 在人力資源管理上線方面，舉凡請假、費用申請、個人薪資條

等傳統人事作業、資訊，都可透過 B2E 入口網站的架設，讓員

工自行連線使用、列印，不但節省紙張，也簡化了過去繁複的

作業流程。

（3） 在員工服務上線方面，強調結合員工的工作與生活。在這方面，

公司提供員工一個線上市場。線上市場是個聽來頗令玩味的名

詞，員工可以用折扣價格取得合作合作廠商的產品與服務，因

而可以省下平時上街購物所花費的時間。可口可樂、甲骨文、

昇陽、福特汽車，以及國內的聯電、台積電等知名企業，都各

18

自設有大小不一，功能各異的 B2E 入口網站，有強調前端或後

勤功能者，也有著重員工福利者。[3]

2.1.5 電子商務四流

一、商流

讓買賣雙方順利溝通以利交易完成，商品所有權完成轉移。

包括了銷售、商情蒐集、商業服務...等活動。

二、物流

實體貨物的移動，廠商如何將產品,利用運輸工具就可以抵

達目地的，最後遞送至消費者手上。除了數位化商品(如：軟體..

等)，否則廠商無法自己將實體產品送給消費者，必須透過物流

系統運送。

三、金流

重點在如何透過金融體系完成付款機制，強調完善的付款系

統與安全性。在電子商務上 B2B 很多會使用信用卡付款，消費者

將信用卡資料直接傳送給廠商，而過程中如何保證安全性的問

題。

四、資訊流

伴隨著商務交易過程中蒐集的資訊，為電子商務的核心部

分，企業應注意維繫資訊暢通，以有效控管電子商務正常運作，

19

包括商品資訊、資訊提供、促銷、行銷等。將資訊清楚的分析了

解客戶消費習慣、能力或區域等等因素，並將資料作交叉分析，

以提高銷售數量，這些都是屬於資訊流的範疇。[2]

2.1.6 網路安全

一、影響網路安全的因素

網路安全？大家都是坐在自己的電腦前，和其他人或電腦

溝通，網路哪有什麼安全不安全的？事實上「網路」本身還蠻安

全的：電話線、電纜、或是光纖的組合，「網路」本身沒有什麼

危險性。網路安不安全的問題在於用網路傳遞資料是否很容易

遺失、毀損、或是被人截取？用網路傳輸資料到彼端之後，彼端

電腦如何保管這些資料？這些安全性問題，基本上牽涉到的因素

很多軟、硬體的技術問題，以及使用者的觀念和使用方式。從

以下的表格，我們可以清楚的看出影響網路安全的幾個因素

表 2-1 影響網路安全因素分析表

技術層面 社會層面（使用者）

無心之過

軟體設計不良、

當機、病毒

忘記密碼、人為疏忽

20

惡意為之

密碼破解、病毒、 木

馬

駭客、職員故意破壞

以上所有的因素都可交錯影響，駭客會利用軟體設計不良的缺失

來破壞資料、粗心大意的員工讓病毒在公司的電腦上到處流竄以致毀

損重要資料。

二、網路安全人人有則

加密 (encryption) 是目前因應網路安全的方法之一。這種

方式具有相當之防禦性，可以保護資料、隱私，也可提供安全的

電子交易方式。但是並不是每一個國家的政府都支持這樣的技

術，因為加密技術也保護了犯罪組織。網路之跨國界性已經使恐

怖主義者、煙毒販，很自由自在地做起跨國生意。經過加密的資

訊使各國政府對犯罪之證據無從調查，幾乎束手無策。但是各國

政府也知道，不能因為犯罪組織會使用加密技術就下令杜絕此種

技術，因為沒有加密技術，網路絕對不安全，所有的資料隨時會

遭人竄改及濫用。

除了加密技術之應用，電腦資料及網路安全之維護其實落在

每一個人的身上。如何開始呢？當然首當其衝的是個人使用的電

21

腦及其作業環境。直到目前為止，所有的個人電腦和作業環境對

於安全之維護並未著力。

在公司方面，資料之防護除了密碼外，防火牆也不可少。防

火牆是一部主機，架設在公司內部網路與 Internet 間。所有連

外的網路資料，都必須經過公司所架設的防火牆，因此防火牆可

以管制所有進出的連線，並記錄所有進出的連線資料。防火牆可

防止公司網路遭到入侵、破壞、或被竊取重要資料。亦可管制員

工送出資料或不當使用網路等。

除了防火牆的設置外，公司對重要資料存取的限制應該不止

於僅有密碼之管理，在軟、硬體上對資料之保護都應有更進一步

之規劃，如只有某些人能存取資料、必須要用指紋或瞳孔辨識才

有權限、有完善的防毒措施、資料分散儲存同時也隨時備份…。

三、網路交易的安全考量

我們以「安全電子交易」(Secure Electronic Transactions，

簡稱 SET) 為例，SET 是 VISA 與 MasterCard 兩大組織所提出

的，是一種應用在網際網路上以信用卡為基礎的電子付款系統規

範，希望能確保網路上持卡交易的安全性。簡單地說，SET 規格

使用了公開金鑰 (public key) 所編成的密碼文件

(Cryptography)，以維護在任何網路上的個人、金融資訊的隱密

22

性。具有 SET 規格的軟體，儲存在持卡人的個人電腦及特約商

場的電腦網路中；此外，收單銀行的電腦也能夠以特殊的科技解

讀金融資訊密碼，以及確認 VISA 或其他認證單位所發出的數位

認證 (Digital Certificate)。

以資料加密、數位簽名 (Digital Signature) 和認證中心

(Certificate Authority) 安全認證的方式，同樣適用於網路報

稅。隨著電子化政府的腳步，其他的政府業務如公路監理、工商

登記、戶役政、地政及建築管理等，也都可上網申辦。[7]

2.2 相關研究

2.2.1 競爭者分析

陳怡安手工皂

因為本身也深受敏感肌膚困擾影響，陳怡安開始找遍國內外書

籍，完成自製的第一塊香皂，並親身體驗手工皂溫潤不刺激的觸感

後，原本沐浴後皮膚乾癢的問題也不見了。

她的品牌文化強調，純淨、天然、手工、環保，因此沒有過度的

包裝，採用原料素材也多是植物萃取提煉，她表示市面上國外進口手

工皂，雖然標榜純天然，但不盡然適合台灣的氣候環境與國人膚質，

因此在產品的調配上標榜適合台灣人的膚質。

陳怡安手工皂網站（http://store.yam.com/chencom/）她在網

23

站中放有部落格和商城的連結、購物車的功能、產品的最新消息、產

品資訊、品牌故事。

阿原肥皂

創辦人江榮源由於自身的過敏膚質。而著手自製手工肥皂，於

2005 年六月成立了阿原肥皂工作室。

阿原肥皂秉持著「愛惜人身，將心比心」的初衷，製作肥皂的一

切素材都從身邊開始，本持著天然使用。使用的藥材也是由工作是親

自栽種，老闆阿原希望天底下所有的人都能和自己一樣 ，免受於香

精、色劑、穩定劑等化學物質的傷害，讓最天然的肥皂照顧一生。

阿原肥皂網站（http://www.taiwansoap.com.tw/）他們在網站

中放有部落格和商城的連結、購物車的功能、產品的最新消息、品牌

故事。

2.2.2 SWOT 分析

一、優勢(Strength)

（１）新鮮感

國內自創手工肥皂品牌不多，引此能有別於市面上普遍

販售的香皂。符合目前消費者注重養生的消費習慣使用的成

份，為天然的原料，不會造成環境和人體的負擔。

（２）有益人體

24

原料都不含化學成份，使用純植物性油脂作為轉化成皂

的原料，屬性溫和，不會對人體造成任何刺激，適用各種膚

質。

（３）環保

因為成分天然，一塊手工皂，可用於多種清潔工作，因

此就不需要購買不同功能的清潔用品，增加瓶瓶罐罐的垃圾

累積。

（４）因為不含化學介面活性劑

製作過程完全保留植物的天然礦物質與營養成份，使用

後皮膚不會感到乾澀，且具有良好的保濕作用，敏感性肌膚

者使用，也不會感到刺激與不適。

二、弱勢(Weaknesses)

(1) 因為手工肥皂使用的原料的味道有別於人工香精，因此某些較特

殊的天然植物，可能會使手工皂的味道，比較難被大眾接受。

(2)因為非量產，製作較費時，因此價格會比一般市售肥皂來的昂貴。

三、機會點(Opportunities)

現今環境、空氣品質越來越差，對人體皮膚造成的影響與負擔，

因此日常的清潔顯得格外重要，加上國人對於養生保健的消費意識

抬頭，因此手工皂天然無負擔的特性，便可滿足現代人的精緻消費

25

需求。

四、威脅點(Threats)

市場香皂容易購買，手工皂市場尚未成熟。

26

第三章 系統建置

3.1 系統硬體需求

表３－１硬體需求

主機 AMD X4-630以上

記憶體 １Ｇ以上

硬碟 ８０ＧＢ以上

網路流量 ２０００ＭＢ

網路空間 lovein

3.2 主系統軟體簡介

3.2.1 osCommerce(2.2)

osCommerce 為 Open Source e-Commerce 的縮寫(簡稱為 OSC)，

就字面意義看，我們可以很清楚知道他是一個架構在開放原始碼的線

上購物系統。osCommerce 融入了開放原始碼解決方案(open source

solutions)，使用強大的 PHP 網頁描述語言(web scripting

language)、穩定的 Aache 網頁主機(web server)以及快速的 MySQL

資料庫主機(database server)為基礎，提供一個完全免費和開放的

購物開發平台。儘管如此，osCommerce 的運作並沒有太多限制或特

27

殊需求，它可以安裝在任何運行 PHP3、Solaris、BSD、Microsoft

Windows 等環境，並且讓擁有人以用最少的人力及最低的成本設立、

營運以及維護自己的線上購物商店。[4]

表 3-２ osCommerce 功能與特色

系統功能與特色

一般 前台 後台

1.PHP3/PHP4 相容。

2.安裝容易、可立即使

用。

3.模組化。

4.多國語系:英文、德

文、西班牙文、以及世

界各國自製的語系。

1.客戶會員功能

2.客戶通訊錄

3.訂單紀錄

4.提供暫存(未登入

時)和永久(登入時)

的購物車

5.產品及製造商搜尋

功能

6.提供客戶評論商品

7.電子郵件通知功能

8.簡潔的結帳手續

9.可以使用SSL安全機

制

10.可以顯示每一商品

目錄內的商品數量

11.最佳銷售列表

12.可以顯示其他客戶

購買商品(建議購

買清單)

1.友善的操作介面

2.可新增/編輯/移除

商品分類、商品、製

造商、客戶和商品評

論

3.多層目錄結構

4.多項商品和客戶統

計資料

5.動態商品屬性

6.提供稅區、稅別及稅

率設定

7.可遠端編輯資料庫

內之設定參數值

8.前後台可分開置於

不同主機

9.提供付款及運送模

組

10.作為跨國商店時，

可連結到 oanda.com

交換匯率

11.可自訂商品排序及

列表方式

12.提供備份工具

28

3.2.2 Appserv(2008)

Appserv 基本上是整合了幾個在 Windows 上架設網頁的軟體，

包括了 web serv 的 apache、執行網頁程式的 PHP 以及後端資料庫

的 mySQL。讓使用者只要一次安裝，就可以建立好整個網站的環境。

3.2.3 MySQL(2008)

MySQL 是一種跨平台、多使用者、多執行緒、支援 SQL 語言 (結

構化查詢語言)、執行速度快以及網際網路中大量被採用的資料庫系

統。重要的是，在一般情況下，MySQL 也是完全免費的。(MySQL 自

3.23.19 之後已改為 GPL 版權宣告)，它是由瑞典的 MySQL A.B 公司

所開發的一套開放原始碼資料庫。

大體而言，MySQL 跟 Apache 及 PHP 一樣屬於開放源碼，可以免

費使用及流通、進入門檻低、執行速度快，跨平台(WINDOWS 平台也

可以執行)、支援工具多等特性，十分適合用來開發各種系統。MySQL

並沒有連線使用者的限制，相較其他商用資料庫系統，在一定數量以

上的連線使用者數時，可是要付出相當可觀的費用。[5]

3.2.4 Photoshop（CS3）

29

PhotoShop是一套使用於 Macintosh 和 Windows 平台上的影像

處理軟體，也是目前功能最強大、使用者最多的影像編輯軟體。以電

腦影像技術的快速發展，於是你可以聰明的選取、任意的拼貼、精確

的校正調整、高效率的配色、精緻的繪製、細微的噴修、天馬行空的

特效(等於你擁有了一間攝影暗房、一整個印刷廠、與一家電視後製

工作室)，所以，不管你是彩色攝影暗房影像技術(攝影師)、平面彩

色印刷影像技術(平面美工設計人員、使用電腦來完成創作的藝術

家、電子書製作者、印刷業者、彩色輸出中心業者和電腦繪圖設計師)

或電視影像處理技術(電視後製作工程師)等， PhotoShop 都是你無

可或缺的強力助手。Photoshop 在目前市場上算是最普遍被使用的影

像處理軟體，它之所以這麼受到設計者的青睞，在於它具有完備且功

能強大的工具指令；不論是影像的編修處理、或是繪製合成，它都有

細分的各種工具及相關的數值設定面板，讓使用者可以做到最精準的

調整；而強大的濾鏡功能更是不能錯過的一項，各種濾鏡特效可以模

擬出以假亂真的影像畫面，其鬼斧神工的效果令人驚嘆。

3.2.5 Illustraor(CS3)

30

為任何專案建立獨特的向量圖稿。Adobe Illustrator CS5 軟體

廣獲全球設計專業人員採用，提供精確控制能力以及強大的精密繪圖

工具、具表現力的自然筆觸以及諸多省時妙方，而且能與 Adobe CS

Live 線上服務整合。運用 Adobe® Illustrator® 設計出開發人員喜

愛的網站、互動式體驗和原創向量圖片。建立在點陣化時仍能保持清

晰的對齊像素圖稿，並可在單一檔案中定義最多 100 個工作區域

一、適用於網頁和行動裝置的清晰圖片新增功能

在檔案的像素格點上精確建立向量物件，以提供對齊像素的圖

稿。啟動對齊像素格點功能以產生清晰、銳利的點陣圖片，並對個別

文字框使用文字消除鋸齒選項。

二、不受解析度影響的效果 新增功能

套用點陣特效，例如製作陰影、模糊和紋理，同時在各種媒體上

仍能保持一貫的外觀。

三、與 Adobe Flash Professional 整合 增强功能

將 Illustrator 檔案匯入 Flash® Professional，不但可獲得

更好的文字保留效果，還可運用元件註冊點支援。[8]

31

3.3 網站架構

圖 3-1 網站架構圖

導覽圖

首頁

商品分

類

服務台快速尋

找商品

線上人

數

購物車 暢銷商

品

商品評

論

吉利篇

酪梨滋

養皂

甜糕篇

體驗皂

退換貨

事項

隱私保

護聲明

會員權益

及需知

聯絡我

們

護唇膏

新產品篇

體驗皂

組合篇

禮盒篇

32

3.5 系統流程圖

會員登入

圖 3-2 會員登入流程圖

我的帳號

進入帳號

註冊會員

完成註冊回

登入畫面

視窗提醒

是否為會

員

資料是否

完整

填寫資料

是

否

是

否

結束

開始

33

購物車

圖 3-3 購物車流程圖

點選商品

進入購物

車結帳

是否為會

員提醒註冊

會員登入

出貨資訊

選擇付款

方式

完成訂購

確認訂單

開始

結束

34

3.4 網站比較

表 3-3 商家比較

商家

項目

阿原肥皂 陳怡安手工皂 澡堂風景

網站

部落格

品牌故事

購物車

產品資訊

最新消息

討論區

商城

35

第四章 系統實作與結果

4.1 網頁介面

4.1.1 首頁介面

圖 4-1 網站首頁

右上角我的帳號按下即可登入會員或註冊會員，按下進入討論區即可

進入討論區。

登入或註冊

討論區

36

4.1.2 網站會員登入

圖 4-2 會員登入

如果你是新客戶即可從首頁右上角點擊「我的帳號」，從新增帳號按

下「繼續」即可註冊為本站的新會員，如果是舊客戶即可按下「登入」

直接輸入帳號密碼登入網站。

新會員 舊會員

37

4.1.3 新會員註冊

圖 4-3 新會員註冊

會員註冊時將表格填寫完畢按下「繼續」系統會檢視打*的部分是否

有完整填寫，如有不完整系統會跳出小視窗提醒新會員資料未完整，

如果資料沒問題系統會寄確認信至會員的信箱中。

資料送出

資料不完整提示視窗

38

4.1.4 會員登入介面

圖 4-4 會員登入畫面

會員登入後到我的帳號即可看到自己的帳號資訊，如有下訂單也可看

到目前訂單的處理進度，在這裡也可以更改自己的個人資料。

訂單處理進度

修改資料

訂單資料

39

4.1.5 商品分類介面

圖 4-5 商品分類

在商品分類中可直接點選商品就可看到商品完整的介紹也可按下「馬

上買」將商品放入購物車。

按下直接放入購物車 按下會顯示產品資訊

顯示目前購買金額和品項

40

4.1.6 進階搜尋介面

圖 4-6 進階搜尋

會員如果有找不到的商品可在左邊選項排中找到「快速尋找商品」就

會到此介面，點擊「尋找」系統會從會員點擊的資訊中從網站裡尋找

出最符合條件的商品。

資料填寫好按下

41

4.1.7 購物車介面

圖 4-7 購物車

會員點選「購物車內容」就可看到目前的購物清單，也會看到小計讓

消費者知道目前的金額，會員也可在此取消商品或更改數量，如果還

不想結帳可按下「繼續購物」會回到購物的介面 ，如果不想繼續購

物即可直接點選「結帳」。

目前總額

繼續購物 進入結帳系統

42

4.1.8 訂單資訊

圖 4-8 訂單資訊

登入會員之後進入我的帳號從上一筆訂單中按下檢視即會跳到此畫

面，讓會員能清楚知道自己所訂購的商品已經走到哪個階段。

43

4.1.9 討論區

圖 4-9 討論區

在澡堂風景的首頁右上角會看到「進入討論區」，按下就會進入此畫

面，第一次使用者可以在右上註冊的地方註冊成會員，如果已在此註

冊過的會員可直接輸入帳號密碼進入。

註冊 舊會員

44

4.2.10 討論區註冊

圖 4-10 討論區會員註冊

按下「註冊」會跳到此視窗輸入所需資料即可成為會員在此分享使用

心得或感想。

會員註冊

45

4.2.11 討論區登入

圖 4-11 會員登入畫面

會員登入後會在右上角看到自己設的大頭貼也可從此做基本的資料

修改按下自己的名子就會到自己的個人空間。

基本資料

46

4.1.12 個人空間

圖 4-12 討論區個人空間

在個人空間裡妳可做自己的個人設定讓自己的空間更加豐富。

47

4.2 後台介面

4.2.1 我的商店

圖 4-13 我的商店

這裡可以設定商店名、擁有人、電子郵件..等等相關基本設定。

48

4.2.2 最小值設定

圖 4-14 最小值設定

這裡可以限制新會員在填寫資料時的完整性。

49

4.2.3 最大值設定

圖 4-15 最大值設定

最大值設定和最小值設定意思很相似，這裡的設定可控制前台商品顯

示最大數量…等等。

50

4.2.4 圖片

圖 4-16 圖片

從圖片可設定前台圖片顯示的大小。

51

4.2.5 客戶帳號資訊

圖 4-17 客戶帳號資訊

這裡的設定決定會員在註冊時是否需要再多填寫哪些資料，這裡的資

料也可以供商家在做顧客調查時方便統計。

52

4.2.6 商品目錄

圖 4-18 商品目錄

商品目錄可將商品以類型不同分類，在從此做細項的分類。以方便消

費者可針對自己的需求選購商品。

53

4.2.7 新增商品

圖 4-19 新增商品

從商品目錄分類進來後按下新增商品可將要上架的商品資訊、價格、

商品說明…等等。按下預覽鍵可看到新增商品的資訊是否有誤如果沒

有按下插入商品將會在前台上架。

54

4.3 E.R-Model

圖 4-20 E.R-Model

55

(1)會員基本資料(customers)

會員資料欄位：會員帳號、密碼、姓名、性別、生日、電話、

傳真、 即時通訊、郵遞區號、地址、電子信箱。

表4-1 會員基本資料表

欄位 型態 Null 預設值

customers_id int(11) 否

customers_gender char(1) 否

customers_firstname varchar(32) 否

customers_lastname varchar(32) 否

customers_dob datetime 否 0000-00-00

00:00:00

customers_eamil_address varchar(96) 否

customers_default_address_id int(11) 否

customers_telephone varchar(32) 否

customers_fax varchar(32) 是

customers_password varchar(40) 否

customers_newsletter char(1) 是

56

(2)購物車(customers_basket)

購物車商品屬性欄位：購物車商品屬性帳號、會員帳號、商品

名稱、 商品的選擇、商品的價格。

表4-2購物車資料表

欄位 型態 Null 預設值

customers_basket_id int(11) 否

customers_id int(11) 否 0

products_id tinytext 否

customers_basket_quantity int(2) 否 0

final_price decimal(15,4) 否 0.0000

customers_basket_date_adde

d

varchar(8) 是 NULL

57

(3)購物車商品屬性資料表(customers_basket_attributes)

購物車商品屬性欄位：購物車商品屬性帳號、會員帳號、商品

名稱、 商品的選擇、商品的價格。

表4-3購物車商品屬性資料表

欄位 型態 Null 預設值

customers_basket_attributes_id int(11) 否

customers_id int(11) 否 0

products_id tinytext 否

products_options_id int(11) 否 0

products_options_value_id int(11) 否 0

58

(4)商品基本資料表(products)

商品基本資料欄位：商品名稱、商品數量、商品模型、商品圖

像、商品價格、商品最後修改、商品有效日期、商品的重量。

表4-4商品基本資料表

欄位 型態 Null 預設值

products_id int(11) 否

products_quantity int(4) 否 0

products_model varchar(12) 是 NULL

products_image varchar(64) 是 NULL

products_price decimal(15,4) 否 0.0000

products_date_added datetime 否

0000-00-00

00:00:00

products_last_modified datetime 是 NULL

products_date_available datetime 是 NULL

products_weight decimal(5,2) 否 0.00

products_status tinyint(1) 否 0

products_tax_class_id int(11) 否 0

manufacturers_id int(11) 是 NULL

59

products_ordered int(11) 否 0

(5)商品評論資料表(reviews)

商品評論欄位：評論帳號、商品名稱、會員帳號、會員姓名、

評論主題、附加日期、發表評論。

表4-5商品評論資料表

欄位 型態 Null 預設值

reviews_id int(11) 否

products_id int(11) 否 0

customers_id int(11) 是 NULL

customers_name varchar(64) 否

reviews_rating int(1) 是 NULL

date_added datetime 是 NULL

last_modified datetime 是 NULL

reviews_read int(5) 否 0

60

第五章 結論與未來展望

在網路發達的今日本小組替澡堂風景建置的商務網站的目的是希

望能讓消費者可以方便的瀏覽本網站的各項商品以及提供產品的最

新資訊，消費者可以不受空間、時間、地點的限制選購自己想要的商

品，本小組也應業者的想法替澡堂風景建置一個以清新為主的網站，

讓商家能夠增加線上的曝光率，我們在網站中也加入了討論區讓大家

可以把使用後的心得可以互相交流分享，那為了方便消費者購物我們

也在網站中加入了購物車，那我們在網站首頁放上最新產品的消息讓

消費能隨時掌握商家的產品的最新資訊，也希望消費者能享受屬於自

己的消費空間。

在網站中往後也將加入許多不一樣的功能藉此讓本網站的服務

可以更完善讓使用者與消費者使用會更加便利，更可拓展許多不同的

客源讓澡堂風景手工皂坊可以永續經營下去。

61

文獻參考

中文資料

[1]澡堂風景提供 0921-571933

[2]陳湘揚 電子商務概論-輕鬆快樂的學習與開店 2007年 8月版 台

北縣汐止市:博碩文化。

[3]林建煌 行銷管理 四版 2009 年 1 月台北市:林建煌出版

[4]鄭重男osCommerce購物網站架設實戰 第二版2010年 5月出版學

貫行銷股份有限公司

網站資料

[5]YAHOO!奇摩新聞(http://tw.news.yahoo.com/)

[6]台灣商會聯合資訊(http://www.tcoc.com.tw/b%20new/ec.asp)

[7]資料來源：網路安全

(http://www.ttvs.cy.edu.tw/kcc/kcc70/law/security.html)

[8]美工設計軟體 Adobe Illustrator CS5

(http://www.adobe.com/tw/products/illustrator/)

62

附錄

附錄(一)甘特圖

----- 預期進度 實際進度

年月

工作項目

99

年

3

月

99

年

4

月

99

年

5

月

99

年

6

月

99

年

7

月

99

年

8

月

99

年

9

月

99

年

10

月

99

年

11

月

99

年

12

月

100

年

1 月

100

年

2 月

100

年

3 月

100

年

4 月

100

年

5 月

確定題目

決定網站的未

來走向

工作分配

書面資料蒐集

網站資料蒐集

書面製作

網站建置

網站測試

網站美化

63

附錄(二)報告分配

組員 報告順序分配

莊家和 第 3 章系統建置

兵欣怡 第 4 章系統實作與結果

劉沛涵 第 1 章緒論

張美麗 第 2 章文獻探討(上)

王佳文 第 2 章文獻探討(下)

陳緒翰 第 4 章 ER-Model、第 5 章結論

附錄(三)工作分配

組員 工作分配

莊家和 網站系統架構、甘特圖

兵欣怡 資料收集、網頁比較、美工

劉沛涵 緒論、研究動機、書面

張美麗 美工、資料整理、海報

王佳文 研究目的、投影片

陳緒翰 ER-Model

64

嶺東科技大學資訊網路系暨商務科技管理系專題報告／實作改進說明表 口試委員建議及改進之處 報告修改／實作改善 對照頁次

緒論 １．緒論引註格式錯誤 第一章 １．研究目的敘述不夠明確 ２．研究流程圖系統建置與

實作結果中應插入判斷

格式 ３．英文拼字錯誤 ４．打錯字 第二章 １．電子商務特性中標題沒 有適時插入編號 ２．圖表編號位置不正確 ３．標點符號標示錯誤 ４．優劣勢分析改為Ｓ.Ｗ. Ｏ.Ｔ分析 第三章 １．系統需求數值一般化描 述 文獻參考 １．應將中文書目與網站區 分開來 ２．甘特圖中的實際進度線

有錯

１．已做修正 １．已修改為更容易閱讀的敘述 ２．在流程圖中插入測試判斷迴圈使流程能更加完整 ３．已經依老師建議做修正 ４．已做修改 １．在所有未插入編號的標題中插入適當編號方便閱

讀不會混淆 ２．已將圖表的編號放置在適當的位置 ３．將多餘的符號刪除與應該加入符號的地方加入符

號 ４．已老師建議做修改 １．已老師建議做修正 １．已經將書目與網站分別區分 ２．已老師建議做修改

Ｐ．１ Ｐ．３ Ｐ．１１ Ｐ．４ Ｐ．１３ Ｐ．１３～１８

Ｐ．６～１０ Ｐ．１９ Ｐ．２３ Ｐ．２５ Ｐ．６０ Ｐ．６１

65

嶺東科技大學資訊網路系暨商務科技管理系專題報告／實作改進說明表 口試委員建議及改進之處 報告修改／實作改善 對照頁次

目錄 １． 2.4 字有錯誤 第一章 １．研究流程圖未加註是與 否說明 第二章 １．競爭者分析應加入網站 特色 第三章 １．硬體需求應加入網路空 間 ２．各軟體應加入版本 ３．流程圖應加入開始與結 束 結論 １．書寫方式錯誤 文獻參考 １．在澡堂風景提供中應加 入業者連絡方式 ２．在奇摩新聞應加入連結

１．已經做修正 １．已加入應對文字 １．已依老師建議放入 １．已經將網入空間加進需求表中 ２．將使用軟體加入版本 ３．已在流程圖頭尾加入開始與結束 １．以依老師建議重新書寫 １．已加入連絡方式 ２．已加入連結

Ｐ．Ｖ Ｐ．１１ Ｐ．２２～２３

Ｐ．２６ Ｐ．２６～３０

Ｐ．３２～３３

Ｐ．６０ Ｐ．６１ Ｐ．６１