第一章 WWW V.S. HTML
在本書的第一章，我們將介紹幾個最常聽到的專有名詞，例 如：『Internet』、『WWW』、『HTML』等等，對於初學網 頁設計的讀者而言，詳讀本章對於一些重要網路觀念的建立，
有非常大的助益。
除此之外，我們也將介紹幾個建立HTML網頁的工具，這些工 具都是垂手可得的工具，建議初學者閱讀本章之後，按照習題
安裝TWE-COMMERCE
•
http://www.twecommerce.org/twe/B.htm
• 當您取得程式，您必須先設想好是要在本機做測試，或是您 已經有一個網頁空間或是您的電腦本身有架設網站伺服器，
• 程式本身並不限定您一定要在WINDOWS伺服器或是LINUX 伺服器平台運作，但是最基本要您的SERVER能支援PHP
（PHP的版本必須在4.1.2以上）與MYSQL，並且有
GD_LIB 2.0模組的支援，而GD模組必須有支援.gif檔案格 式，方能使用｢合併圖片｣的功能。
• 在安裝的方式上，列舉兩種較常使用的方式做解說。
– 第一種是在本機（localhost）WINDOWS作業系統上安裝。如果以
（localhost）的方式安裝，是假設目前商店不打算對外營業，可能 只是做程式系統測試。
– 第二種是在網頁空間上安裝（虛擬主機）。
本機（localhost）WINDOWS作 業系統安裝
• 將twecommerec.zip解壓縮至（c:\AppServ\www\）下，
TWE-Commerce程式的架構如下（圖3-1）：
• twecommerce是主資料夾，下面放置了所有必須的檔案，在 安裝前必須先將下列檔案做權限的調整。
• wecommerce/cache 取消唯讀。
• twecommerce/templates_c 取消唯讀。
• twecommerce/admin/includes/configure.php取消唯讀。
• twecommerce/admin/includes/configure.org.php取消唯讀。
• twecommerce/includes/configure.php取消唯讀。
• twecommerce/includes/configure.org.php取消唯讀。
• Cache資料夾是當我們設定使用快取時需讓系統程式有寫入 權限。
• templates_c資料夾是smarty使用的暫存資料夾。必需讓程式 有寫入權限。
• configure.php檔案是定義一些網站常數，在安裝的同時系統 會自動寫入網站所需的常數，必需讓系統有寫入權限。
• configure.org.php是configure.php的備份檔案，也是在安裝 時系統會寫入網站常數，內容與configure.php一模一樣。
• 這是在防止以後萬一修改configure.php檔時網站發生問題，
讓您可以有一個原始依據。屆時您可以覆蓋或參照修改來解
取消唯讀
• 取消唯讀的方式很簡單，只要開啟檔案總管，找到需取消唯 讀的檔案或是資料夾，按下滑鼠右鍵，選擇（內容）
• 將屬性：（唯讀）取消勾選即可。當我們將權限設定好之後 就可以開始安裝系統。
第一步：選擇使用語言
• 在此接續本機（localhost）
Windows Server安裝完之後的 平台安裝方法，首先開啟瀏覽 器：在網址部分輸入
入安裝首頁（圖3-3）：
• PS：如果您沒有修改AppServ
（httpd.conf）裡的網站跟目錄 路徑，那就必須在網址列輸入 http://localhost/twecommerce/
• 如果檔案權限設定無誤，在畫面中央會呈現各項檢查都OK的 提示。
• 系統此時除了檢查您的檔案與資料夾權限正確與否，並且也 檢查您的SERVER PHP版本、是否安裝了GD LIB與GD的版 本、是否支援GIF圖片檔案格式，GD LIB需要包括2.0與以後 的版本，如果GD不支援GIF檔案格式，商店將無法使用GIF 圖片檔案為商品圖片與商品圖片合成功能。
第二步：資料庫與網站伺服器設定
• 如果是檔案權限設定有誤，
則會出現警告訊息，告知哪 一個檔案權限設定有誤，這 時將無法繼續下一步安裝，
直到解決檔案權限問題後，
continue按鈕才會出現。
• 請選擇您使用的語言（這裡 只針對安裝時的頁面語
系）。點選Tchinese按下 continue按鈕進行下一步安
第二步：資料庫與網站伺服器設 定
• 第一次安裝，必須將
（寫入TWE-
Commerce資料與自 動設定）與（寫入 Configure.php檔 案）這兩樣通通勾 選。
資料庫設定
• 資料庫伺服器：（資料庫的主機名稱或IP位址(localhost)資料 庫主機格式， 可以是主機名稱，如 www.myserver.com, 或 是IP位址，如127.0.0.1，一般使用 localhost 即可）。
• 使用者名稱：（連接資料庫主機的使用者名稱，例如使用者 為root）注意：這個使用者必須有新增(Create)及刪除(Drop) 資料表的權限。留白即可
• 密碼：（資料庫使用者帳號的密碼，通常與使用者名稱為一 組）。留白即可
• 資料庫名稱：（儲存資料的資料庫名稱，如 twecommerce）。
網站伺服器設定
• 在這個步驟中欄位裡會自動顯示你系統安裝的路徑，一般並不需更改。
• 網站伺服器實際路徑（線上商店在網頁的絕對路徑，線上商店的網頁位址，
LINUX例如 /home/myname/public_html/twecommerce/。WINDOWS例如 c:\AppServ\www\twecommerce
• TWE-Commerce商店目錄（線上商店的根目錄，twecommerce 安裝在主機 的目錄，LINUX例如 /twecommerce/。
• 管理目錄（線上商店管理程式的根目錄twecommerce管理程式安裝在主機 的目錄，如 /twecommerce/admin/.
• 商店資料夾目錄（線上商店的相對路徑twecommerce 安裝在主機的目錄，
如 /tweommerce/.
• 商店管理資料夾（線上商店管理程式的相對路徑twecommerce管理程式安 裝在主機的目錄，如/twecommerce/admin
• 分組作業目錄請依「年度學期組別班別」小寫命名，例如twe9911b
測試聯結資料庫
• 填寫完畢請按continue按鈕繼續下一步。如果資料庫資訊填 寫有誤當按下continue按鈕會出現（測試聯結資料庫失敗）
的訊息頁面：
• 這表示在資料庫的連結 資訊填寫有誤，安裝伺 服器時如果有設定資料 庫MYSQL的帳號密碼，
則必須填入正確的帳 號、密碼，如果填寫正 確，系統將依照你填入 的資訊開始建立資料庫 並建立資料表。按
continue按鈕進行資料庫 建立動作：
• 資料庫寫入需要一點時間，
在進行寫入動作執行時請勿 中斷操作，當資料庫完成寫 入動作之後將會顯示資料寫 入資料庫完成的訊息。
• 請按continue按鈕繼續下一 步
檢查您的網站伺服器資訊(1/4)
• 這個步驟主要有三處需要讓你選擇勾選，其 餘一般按照系統顯示的預設值即可，這三項 分別是：
– （1）是否開啟 SSL 連結 (HTTPS) SERVER 必須有支援SSL，否則請勿勾選。
– （2）是否開啟資料庫持續連結。
– （3）Sessions：Sessions資料儲存位置，寫 入資料庫（建議勾選項目）。
• HTTP Server：
– 線上商店的網頁位址，如
http://www.myserver.com, 或 IP 位址為 http://192.168.0.1
• HTTPS Server：
– 線上商店的加密網頁網址，如
https://www.myserver.com, 或 IP 位址為 https://192.168.0.1
• HTTP Cookie 網域：
– 儲存cookie的網域範圍，完整或最上層網域以 儲存cookies，如 www.myserver.com。（不
檢查您的網站
伺服器資訊(2/4)
• 加密 Cookie 網域：
– 儲存cookie的加密網域範圍，完整或最上層加密 網域以儲存cookies，如 www.myserver.com
• 加密 Cookie 路徑：
– 儲存 cookies 的加密路徑，限制cookies在加密 主機上網頁的範圍，如 /twecommerce/
• 開啟 SSL 連結：
– 是否開啟 SSL 連結 (HTTPS)，勾選此項目時，
必須您的伺服器有支援SSL。
• 網站伺服器實際路徑：
– 線上商店在網頁的絕對路徑，線上商店的網頁位 址，LINUX如
/home/myname/public_html/twecommerce/，
WINDOWS如c:/appserv/www/twecommerce。
• TWE-Commerce"商店目錄：
– 線上商店的根目錄，tweCommerce 安裝在主機 的目錄，LINUX如 /twecommerce/。
• 管理目錄：
– 線上商店管理程式的根目錄，tweCommerce管 理程式安裝在主機的目錄，LINUX如
/twecommerce/admin/.。
檢查您的網站
伺服器資訊(3/4)
• 商店資料夾目錄：
– 線上商店的相對路徑，tweCommerce 安裝在主機的目錄，如 /tweommerce/.
• 商店管理資料夾：
– 線上商店管理程式的相對路徑，
tweCommerce管理程式安裝在主機的目 錄，如/twecommerce/admin/
• 資料庫伺服器：
– 資料庫的主機名稱或IP位址(localhost) 資料庫主機格式， 可以是主機名稱，如 db1.myserver.com, 或是IP位址，如 127.0.0.1，一般使用 localhost 即可。
• 使用者名稱：
– 資料庫使用者名稱，連接資料庫主機的 使用者名稱，例如使用者為 root，請注 意： 在這裡安裝時，這個使用者必須有 新增(Create)及刪除(Drop)資料表的權
檢查您的網站
伺服器資訊(4/4)
• 資料庫名稱：
– 資料庫名稱，儲存資料的 資料庫名稱，如
twe9911b。
• 開啟資料庫持續連結：
– 啟動保持連接（注意：租 用或共用主機最好關閉這 個選項）。
• Sessions 寫入檔案：
– sessions資料儲存位置，
（如果選擇寫入檔案），
必須在電腦硬碟裡增加一 個名為tmp的資料夾。
• Sessions寫入資料庫：
– sessions資料寫入資料庫
（建議勾選項目）
4個重要的組態檔案
• 以上的資訊系統將會分別建立 4個檔案
• includes/configure.php
• includes/configure.org.php
• admin/includes/configure.php
• admin/includes/configure.org.
php
• 勾選完，請按continue按鈕繼 續下一步。右圖為完成資料寫 入頁面。請再按下continue按
管理員設定、商店設定
• 這裡需填入商店管理者 的基本資訊（圖3-
11），以利系統將管理 員資訊寫入資料庫，稍 後方便管理員進入後台 做基礎設定。（這裡所 填入的值在商店安裝完 成後都可以隨時更
改）。
管理員設定
• 中文姓名：填入管理員姓名。
• 暱稱：填入管理員暱稱。
• 電子郵件：填入管理員郵件地址。
• 地址：填入管理員居住地址。
• 郵遞區號：填入管理員居住地郵遞區號。
• 鄉鎮村區：填入管理員居住地鄉/鎮/村/區。
• 縣市：填入管理員居住地縣市名稱。
• 國家：填入管理員居住地名稱。
• 電話號碼：填入管理員電話號碼
• 密碼：填入管理員密碼
商店設定
• 商店名稱：填入商店名稱
• 商店擁有人：填入商店擁有人姓名
• 寄件人：填入商店寄件人郵件地址 (這個郵件地址用於商店傳 送電子郵件的寄件人)
• （所有欄位必填）。按continue按鈕繼續下一步。
訪客與會員群組設定
• 這是設定訪客與會員的一些折扣設 定，您可以不用在此設定
(twecommerce3.0已不在此設定)，
屆時安裝完成後也可以在後台管理做 設定。
• TIPS
由於這裡的設定關係到商店商品、群 組、價格相當多的設定，在您尚未了 解其架構前，建議您先以預設值直接 安裝，待了解系統會員群組架構後，
再由商店管理後台來做設定的更改。
• 按下continue按鈕繼續下一步，完成
twecommerce安裝完成
• 接下來按下catalog按鈕，就可以進入商店前台（圖3-14）。
進入商店前台
• 在頁首最上方的部分有兩行提示您的警告訊息。
去除警告訊息
• 警告： 安裝目錄仍然存在：
c:/appserv/www/twecommerce/twe_installer. 基於安全的理 由，請將這個目錄刪除
• 警告： 設定檔允許被寫入：
c:/appserv/www/twecommerce/includes/configure.php. 這將 具有潛在的系統安全風險 - 請將檔案設定為正確的使用權限
• 針對第一個訊息，如果你只在本機測試，暫不想刪除檔案，
你可以將twe_installer資料夾改名例如改成 twe_installer_bak，如此即可。
• 針對第二個訊息，打開檔案總管，找到
c:/appserv/www/twecommerce/includes/configure.php
• 按下滑鼠右鍵（圖3-15）：
組態檔設為唯讀
• 選取最下方（內容）
組態檔設為唯讀
• 將｢唯讀(R)｣項目選取後按下｢套用｣－｢確定｣按鈕即可。如果 頁面上方半圓邊框呈現缺角，那是因為您安裝在本機有包含 資料夾的路徑：
Twecommerce2.x版本
• 請打開（商店資料夾
/templates/twe/stylesheet.css）找出下列 二行：
• （1）.tt12bkg{background:url(/templates/t we/img/tt12_m.gif) repeat-
x;height:12px;width:100%}
• （2）.tb12bkg{background:url(/templates/
twe/img/tb12_m.gif) repeat- x;height:12px;width:100%}
• 改成：
• （1）.tt12bkg{background:url(/資料夾名稱 /templates/twe/img/tt12_m.gif) repeat-
x;height:12px;width:100%}
• （2）.tb12bkg{background:url(/資料夾名
正常的商店頁面
• 再到瀏覽器按｢重新整理｣後所出現即是正常的商店頁面
網頁空間（虛擬主機）安裝的方式
• 既然是網頁空間或是一台專職的SERVER，那就表示程式並非放在自己的 電腦裡，這時就需要使用FTP將TWE-COMMERCE網站程式上傳至你的 網站空間或是SERVER，在往後的檔案修改也都必須依靠FTP將修改好的 檔案上傳至網頁空間覆蓋原有檔案，以達到程式修改的目的，如此在自己 的電腦裡也會有一份與網頁空間或是SERVER相同的一份TWE-
COMMERCE檔案，也可以經常讓兩個資料夾隨時保持同步，當成是另一 種檔案備份。
• FTP的軟體有很多，最好是有能夠變更檔案權限的FTP軟體，例如
（CuteFTP），另一方面為了設計自己的商店風格，最好也準備一個可以 所見即所得的網頁編輯器，本書將以CuteFTP為例做解說，如何利用
CuteFTP來達成上傳TWE-COMMERCE檔案至SERVER的需求。
步驟一 解壓縮檔案到你的本機硬 碟中
• 將書中所附贈的光碟放置入光碟機中，開啟｢檔案總管｣指向 光碟機路徑，找到（twecommerce.zip），解壓縮檔案
twecommerce.zip到你的本機硬碟中，你可以先在本機硬碟 中新增一個localhost資料夾，可以是C槽或D槽或．．．．都 行，或是解壓縮時新增一個資料夾來放置檔案，在此我們假 設是新增在硬碟C槽。然後將檔案解壓縮在localhost資料夾 下。
步驟二 上傳檔案 (1/3)
• 當您申請了網頁空間之後，主機商會在主機的磁碟空間中增 加一個使用者資料夾，以LINUX系統主機而言資料夾位置，
例如（/var/home1/dapo/）其中（dapo）是您當初申請空間 時的使用者名稱，而（dapo）就是提供放置網站程式的資料 夾，當使用申請時的帳號密碼用FTP登入主機時，將會來到
（/var/home1/dapo/）。一般主機商都會要求您將商店的網 址，指向主機商所指定的IP位置（如果商店尚未申請網址可 請主機商代為申請，目前的主機商都有提供這項服務，如果 是主機商代為申請，則主機商將會幫商店申請的網址指向主 機商的IP）。並且主機商會在主機的網站伺服器與DNS裡設 定，將您商店首頁對應到（/var/home1/dapo/）或是
（/var/home1/dapo/public_html/）。
步驟二 上傳檔案 (2/3)
• 假設今天商店網址是（www.my-shop.com.tw），所以當在瀏覽器輸入
（www.my-shop.com.tw）時，將會開啟（/var/home1/dapo/index.html或 是index.php）為首頁。
• 問題來了，如果打算上傳程式時是包括twecommerce資料夾，那您在主 機的資料夾情況會是（/var/home1/dapo/twecommerce/），這時如果輸 入（www.my-shop.com.tw）將會找不到網頁，因為商店首頁是在
（/var/home1/dapo/twecommerce/index.php），這時候您可能需要在
（dapo）資料夾下製作一個splash入口頁index.html，製作連結或是使用
<MEAT>標籤的refresh功能，將首頁導向
（/var/home1/dapo/twecommerce/index.php）商店首頁，但此時轉進入 商店之後瀏覽器呈現的網址位置會是（http://www.my-
shop.com.tw/twecommerce/index.php）會多了一個twecommerce的資料 夾，要避免這種狀況有兩個方式，第一種是（twecommerce）資料夾上 傳後告知主機商，請主機商更改伺服器設定將商店首頁對應到
（/var/home1/dapo/twecommerce/），第二種是只上傳
（twecommerce）裡面的檔案，就是不包括（twecommerce）資料夾。
步驟二 上傳檔案 (3/3)
• 如果今天租用的主機空間仍有其他網站例如xoops或是
nuke，那還是建議將（twecommerce）資料夾整個上傳，才 不會一團混亂。當然每家主機商指定使用者跟目錄的規格不 同，但是道理是一樣的。
• 接著就來示範如何使用（CuteFTP）將檔案上傳至伺服器，
這裡的示範是將twecommerce包含資料夾整個上傳，首先請 先開啟（CuteFTP），在上方工具列找到（檔案＞新增＞
FTP站台）（圖3-19）：
CuteFTP Pro 3.3
• 出現（站台內容）對話盒，在下列欄位填入相關資訊：
• 符號標籤：填入站台名稱
（這個名稱只是出現在
CuteFTP Pro，方便分類）
• 主機位置：填入主機商提供 之IP。
• 帳號：填入當初申請時的帳 號或使用者名稱。
• 密碼：填入當初申請時的密 碼。
• 按下｢連線｣按鈕：
• 連線之後，畫面左方是本機資料 夾，請在本機資料夾中找出
localhost資料夾。畫面中央空白 的地方就是處在主機磁碟
（/var/home1/dapo/）資料夾。
• 要上傳檔案很簡單，只要使用拖 曳的方式將左邊localhost下的 twecommerce資料夾整個拖曳到 中央空白位置（圖3-22）。上傳 過程可能需要一段時間，請耐心 等候。
• 上傳完畢之後在安裝之前，必須做檔案權限修改，您或許會奇怪為何在Windows 本機安裝時沒有這麼多的檔案需要做權限修改，那是因為一般在Windows本機安 裝時，如果您沒去刻意設定資料夾權限，一般檔案是沒有設定唯讀的。但是一般 虛擬主機的資料夾設定一開始是除了檔案擁有者以外其餘通通不允許寫入的，所 以在這裡將系統檔案所需要的檔案權限一次將其設定完成，免的來回奔波修改。
• twecommerce/cache 777。
• twecommerce/templates_c 777。
• twecommerce/admin/includes/configure.php 777。
• twecommerce/admin/includes/configure.org.php 777。
• twecommerce/includes/configure.php 777。
• twecommerce/includes/configure.org.php 777。
• twecommerce/images 包括以下所有資料夾777。
• twecommerce/media 包括以下所有資料夾777。
• twecommerce/admin/backups 777。
• twecommerce/admin/images/graphs 777。
• 進入資料夾中，找出欲更改權限檔案，按下滑鼠右鍵，選擇 最下方（屬性/CHMOD）（圖3-23）：
• 在｢權限｣欄位中將原本（755）更改成（777），或是將下方
｢群組｣與｢公有｣的（寫入）勾選，按下｢套用｣－｢確定｣鈕後 完成更改權限。請將需修改權限檔案或資料夾依序修改完成
（圖3-24）。
步驟三 安裝TWE-COMMERCE
• 開啟瀏覽器在網址列中輸入（http://www.my-
shop.com.tw/twecommerce/twe_installer/），即會進入安裝 畫面。其餘步驟與在本機（localhost）WINDOWS作業系統 安裝上的方式完全相同。
• 如果只是上傳twecommerce資料夾裡面的檔案，則安裝時必 須在瀏覽器網址列輸入（http://www.my-
shop.com.tw/twe_installer/）。
