簡易電子商務網站 joomla 實務工作坊
DESCRIPTION
2012 悠識數位上課講義 若您有任何 Joomla 應用需求,歡迎至夏木樂洽詢: http://simular.co/TRANSCRIPT
![Page 1: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/1.jpg)
簡易電子商務網站
Joomla!實務工作坊
講師:Asika
開課單位:悠識數位
![Page 2: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/2.jpg)
認識Joomla!
來自非洲斯瓦希裡語
意思是:「all together」或「as a whole」
![Page 3: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/3.jpg)
Joomla! 的發展
Joomla! 2.5 (2012)
Joomla!1.6/1.7 (2011)
Joomla!1.5 (2007)
Joomla! 1.0 (2005)
Mambo (2001)
![Page 4: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/4.jpg)
What is CMS?
• Content Management System (內容管理系統)
• 與Blog的比較:
o 巨量內容的管理
o 多人共用的環境
o 高度功能擴充性
o 長期維護的穩定
![Page 5: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/5.jpg)
Joomla!的系統需求
• Apache, PHP, MySQL 最常見的網路伺服器環境。o Apache 2.0 以上
o PHP 5.2.4 以上
o MySQL 5.0 以上
o Linux, Windows 皆可。
• 1.6 以後,支援 Windows IIS 伺服器。
• 2.5 以後,支援 MSSQL 資料庫。
• 日後將繼續支援 Oracle, PostgreSQL
![Page 6: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/6.jpg)
安裝 Joomla!
![Page 7: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/7.jpg)
Joomla! 安裝流程1. 下載 Joomla! 安裝包 (zip壓縮檔)
2. 解壓縮到安裝資料夾
3. 輸入網址,進入安裝介面
4. 輸入資料庫帳號密碼
5. 跳過FTP設定
6. 輸入網站基本資料
7. 移除Installation資料夾,完成安裝
![Page 9: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/9.jpg)
解壓縮• 將檔案全部解壓
縮到資料夾內
![Page 10: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/10.jpg)
解壓縮後的結構
![Page 11: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/11.jpg)
輸入網址進入安裝介面
![Page 12: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/12.jpg)
確認上方方塊皆為綠色
![Page 13: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/13.jpg)
輸入資料庫訊息• 主機名稱
o 一般是 localhost
• 帳號密碼o MySQL帳號密碼
• 資料庫o 要安裝的資料庫名稱
o 在自己電腦安裝時,如果沒有先創造資料庫,Joomla! 會幫你創造一個
• 前綴字o 當一個資料庫裝了兩個Joomla!
時,可用前綴字區分。
![Page 14: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/14.jpg)
FTP設定可跳過
![Page 15: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/15.jpg)
輸入網站基本資料• 網站名稱
o 你想要的網站名稱
• Emailo 管理員帳號的 Email,有訊息會通
知
• 帳號密碼o 建立一個管理員帳號
• 範例資料o 裝一些範例資料,可以了解內容是
怎麼設定的。範例資料中也有操作教學
![Page 16: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/16.jpg)
完成安裝
![Page 17: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/17.jpg)
重安裝
• 如果不移除 installation 資料夾,只是改名的話。日後可以用來重新安裝Joomla!
• 重安裝方法:1. 將 installation 資料夾改名回到原本名稱
2. 將網站目錄下的 configuration.php 移除
3. 輸入網址即可重新安裝
4. 注意:重安裝後所有資料也會被移除
![Page 18: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/18.jpg)
Joomla! 的前後台Frontend and Backend
![Page 19: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/19.jpg)
前台
![Page 20: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/20.jpg)
後台• http://your-site.com/administrator
![Page 21: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/21.jpg)
Joomla! 的內容管理
![Page 22: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/22.jpg)
Joomla! 內容類型
• Content – 文章
• Category – 分類
• Menu – 選單
• Modules – 模組(區塊)
![Page 23: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/23.jpg)
分類與文章結構網站
分類
分類
文章
文章
文章
分類
文章
文章
分類
文章
文章
文章
分類
文章
文章
![Page 24: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/24.jpg)
選單結構內容層級 選單結構
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
![Page 25: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/25.jpg)
選單結構內容層級 選單結構
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
![Page 26: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/26.jpg)
所以使用者會看到...
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
後台 前台
模組Modules
show menu data
![Page 27: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/27.jpg)
內容管理 Part II
![Page 28: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/28.jpg)
分類管理
![Page 29: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/29.jpg)
新增/編輯分類
•
![Page 30: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/30.jpg)
文章管理
•
![Page 31: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/31.jpg)
新增/編輯
文章
• 標題o 文章名稱
• 別名o 用來當做網址
• 分類o 選擇文章要放在哪個分類
• 狀態o 是否發佈這篇文章
• 精選o 要不要出現在首頁精選文章區
• 文章建立資訊o 可以選擇作者與建立時間
![Page 32: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/32.jpg)
選單管理
![Page 33: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/33.jpg)
選單結構Site
Menu Type
Menu item
Menu item
Menu item
Menu item
Menu Type
Menu item
Menu item
Menu item
Menu Type
Menu item
Menu item
Menu item
Menu item
![Page 34: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/34.jpg)
選單結構網站
選單群組
選單項目
選單項目
選單項目
選單項目
選單群組
選單項目
選單項目
選單項目
選單群組
選單項目
選單項目
選單項目
選單項目
![Page 35: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/35.jpg)
Joomla!的模組
![Page 36: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/36.jpg)
什麼是模組
• Banner 模組
menu 模組
news 模組
計數器模組
login模組
主要頁面內容區
文章或元件
![Page 37: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/37.jpg)
• 選單模組mod_menu
登入模組mod_login
路徑模組mod_breadcrumb
主要內容頁面(元件)
main body (component)
![Page 38: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/38.jpg)
觀看模組位置 I
• 後台 選單列 > 擴充套件 > 佈景主題管理 > 選項
• 預覽模組位置:o 啟用
![Page 39: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/39.jpg)
觀看模組位置 II
• 在頁面的網址後方,輸入:?tp=1• 例如:http://yoursite.com/index.php?tp=1
![Page 40: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/40.jpg)
變更模組位置
•
(也可以手動輸入)
![Page 41: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/41.jpg)
模組頁面指派
• 選擇頁面即可(頁面=選單)
![Page 42: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/42.jpg)
網站規劃
![Page 43: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/43.jpg)
通常,我們會從客戶那邊拿到…
• 首頁• 關於我們• 最新消息
o 新品情報o 活動快訊
• 商品列表o 分類A
• 子分類• 子分類
o 分類Bo 分類C
• 子分類
• FAQo 購買流程o 保養方式o 售後服務o 常見問題
• 留言討論• 聯絡我們
![Page 44: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/44.jpg)
讓我們做一個簡單的排版
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
![Page 45: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/45.jpg)
區分分類與單篇文章
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
![Page 46: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/46.jpg)
標出特殊功能
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
使用商品展示元件 使用討論版元件
![Page 47: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/47.jpg)
我們需要的有:
分類
• 最新消息
o 新品情報
o 活動快訊
• FAQ
o 保養方式
文章
• 關於我們
• 聯絡我們
• 購買流程
• 售後服務
• 常見問題
![Page 48: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/48.jpg)
經過重新整理
• 公司簡介
o 關於我們
o 交通位置
o 聯絡方式
• 新品情報
• 活動快訊
• FAQ
o 保養方式
o 購買流程
o 售後服務
o 常見問題
(藍色為文章)
![Page 49: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/49.jpg)
• 首頁• 關於我們• 最新消息
o 新品情報o 活動快訊
• 商品列表o 分類A
• 子分類• 子分類
o 分類B
o 分類C• 子分類
• FAQo 購買流程o 保養方式o 售後服務o 常見問題
• 留言討論• 聯絡我們
文章分類:• 公司簡介
o 關於我們o 交通位置o 聯絡方式
• 新品情報• 活動快訊• FAQ
o 保養方式o 購買流程o 售後服務o 常見問題
元件:• 商品展示元件• 留言討論元件
![Page 50: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/50.jpg)
![Page 51: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/51.jpg)
首頁規劃圖
![Page 52: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/52.jpg)
Axure RP
•
![Page 53: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/53.jpg)
功能需求清單功能需求
購物車 元件
留言板 元件
討論區 元件
檔案管理 元件
相簿 元件
流量統計 or 計數器 模組
隨機文章 模組
熱文商品 模組
最新商品 模組
電子報 元件
電子報訂閱 模組
![Page 54: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/54.jpg)
作業
![Page 55: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/55.jpg)
作業
• 設計一個你自己的網站架構,前台與後台。
• 思考你會需要用到什麼樣的功能,列一個功能清單出來。可以先上JED尋找你要的套件。
• 從你的網站內容,簡易的規劃一下首頁的排版。
• 安裝一個Joomla!網站,把你規劃的基礎內容都先上架。可以先用假文填補頁面。
![Page 56: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/56.jpg)
下一次上課內容
• 詳細講解 Joomla!的「擴充套件」與機制。
• 介紹幾個最常見的商品展示與購物車套件。
• 實際動手操作。
![Page 57: 簡易電子商務網站 Joomla 實務工作坊](https://reader033.vdocuments.mx/reader033/viewer/2022051112/559e02151a28ab266a8b463c/html5/thumbnails/57.jpg)
Thank you!