Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
簡易電子商務網站Joomla!實務工作坊     講師:Asika   開課單位:悠識數位
認識Joomla!        來自非洲斯瓦希裡語意思是:「all together」或「as a whole」
Joomla! 的發展      Mambo (2001)     Joomla! 1.0 (2005)     Joomla!1.5 (2007)Joomla!1.6/1.7 (2011)     Joomla! 2.5 (2012)
What is CMS?• Content Management System  (內容管理系統)• 與Blog的比較:  o   巨量內容的管理  o   多人共用的環境  o   高度功能擴充性  o   長期維護的穩定
Joomla!的系統需求• Apache, PHP, MySQL 最常見的網路伺服器環境。  o   Apache 2.0 以上  o   PHP 5.2.4 以上  o   MySQL 5.0 以上  o   Linux, Windows 皆...
安裝 Joomla!
Joomla! 安裝流程1.   下載 Joomla! 安裝包 (zip壓縮檔)2.   解壓縮到安裝資料夾3.   輸入網址,進入安裝介面4.   輸入資料庫帳號密碼5.   跳過FTP設定6.   輸入網站基本資料7.   移除Instal...
下載 Joomla!•   由Joomla!台灣網站    下載•   www.joomla.org.tw
解壓縮• 將檔案全部解壓  縮到資料夾內
解壓縮後的結構
輸入網址進入安裝介面
確認上方方塊皆為綠色
輸入資料庫訊息• 主機名稱 o   一般是 localhost• 帳號密碼 o   MySQL帳號密碼• 資料庫 o   要安裝的資料庫名稱 o   在自己電腦安裝時,如果沒有先     創造資料庫,Joomla! 會幫你創     造一個• ...
FTP設定可跳過
輸入網站基本資料• 網站名稱   o   你想要的網站名稱• Email   o   管理員帳號的 Email,有訊息會通       知• 帳號密碼   o   建立一個管理員帳號• 範例資料   o   裝一些範例資料,可以了解內容是   ...
完成安裝
重安裝• 如果不移除 installation 資料夾,只是改名的話。日  後可以用來重新安裝Joomla!• 重安裝方法: 1.   將 installation 資料夾改名回到原本名稱 2.   將網站目錄下的 configuration....
Joomla! 的前後台  Frontend and Backend
前台
後台• http://your-site.com/administrator
Joomla! 的內容管理
Joomla! 內容類型• Content    – 文章• Category   – 分類• Menu       – 選單• Modules    – 模組(區塊)
分類與文章結構                 網站      分類              分類    分類分類         分類          文章    文章 文章         文章         文章    文章 文章 ...
選單結構內容層級           選單結構分類一            分類一  文章A            文章A  文章B            文章B分類二            分類二  文章C            文章C  文...
選單結構內容層級           選單結構分類一            文章A  文章A          文章D  文章B          分類一分類二              文章B  文章C          分類二  文章D  ...
所以使用者會看到...分類一         文章A 文章A        文章D 文章B        分類一分類二          文章B                    模組 文章C        分類二 文章D         ...
內容管理 Part II
分類管理
新增/編輯分類•
文章管理•
新增/編輯     文章•   標題    o 文章名稱•   別名    o 用來當做網址•   分類    o 選擇文章要放在哪個分類•   狀態    o 是否發佈這篇文章•   精選    o 要不要出現在首頁精選文章區•   文章建立...
選單管理
選單結構                 SiteMenu Type     Menu Type     Menu Type  Menu item     Menu item     Menu item  Menu item     Menu ...
選單結構         網站選單群組     選單群組    選單群組 選單項目     選單項目    選單項目 選單項目     選單項目    選單項目 選單項目     選單項目    選單項目 選單項目             選單項目
Joomla!的模組
什麼是模組               Banner 模組•                           計數器                            模組    menu 模組               主要頁面內容...
路徑模組mod_breadcrumb• 選單模組  mod_menu登入模組mod_login                 主要內容頁面(元件)                 main body (component)
觀看模組位置 I• 後台 選單列 > 擴充套件 > 佈景主題管理 > 選項• 預覽模組位置: o 啟用
觀看模組位置 II• 在頁面的網址後方,輸入:           ?tp=1• 例如:http://yoursite.com/index.php?tp=1
變更模組位置•(也可以手動輸入)
模組頁面指派• 選擇頁面即可(頁面=選單)
網站規劃
• 首頁       • 關於我們       • 最新消息通常,      o 新品情報         o 活動快訊       • 商品列表我們會從     o 分類A             • 子分類客戶那邊         • 子分...
讓我們做一個簡單的排版                           選單首頁   關於我們   最新消息           商品列表          FAQ    留言討論   聯絡我們             新品情報   分類A...
區分分類與單篇文章                           選單首頁   關於我們   最新消息           商品列表          FAQ    留言討論   聯絡我們             新品情報   分類A  ...
標出特殊功能                           選單首頁   關於我們   最新消息           商品列表          FAQ    留言討論   聯絡我們             新品情報   分類A    分...
我們需要的有:分類         文章• 最新消息     • 關於我們  o 新品情報   • 聯絡我們  o 活動快訊   • 購買流程• FAQ      • 售後服務  o 保養方式           • 常見問題
• 公司簡介           o 關於我們           o 交通位置經過重新       o 聯絡方式          • 新品情報整理        • 活動快訊(藍色為文章)   • FAQ           o   保養方...
• 首頁文章分類:       • 關於我們• 公司簡介      • 最新消息 o 關於我們       o 新品情報 o 交通位置       o 活動快訊 o 聯絡方式     • 商品列表• 新品情報        o 分類A     ...
首頁規劃圖
Axure RP•
功能需求清單功能需求購物車           元件留言板           元件討論區           元件檔案管理          元件相簿            元件流量統計 or 計數器   模組隨機文章          模組...
作業
作業• 設計一個你自己的網站架構,前台與後台。• 思考你會需要用到什麼樣的功能,列一個功能清  單出來。可以先上JED尋找你要的套件。• 從你的網站內容,簡易的規劃一下首頁的排版。• 安裝一個Joomla!網站,把你規劃的基礎內容都  先上架。...
下一次上課內容• 詳細講解 Joomla!的「擴充套件」與機制。• 介紹幾個最常見的商品展示與購物車套件。• 實際動手操作。
Thank you!
簡易電子商務網站 Joomla 實務工作坊
Upcoming SlideShare
Loading in …5
×

簡易電子商務網站 Joomla 實務工作坊

4,702 views

Published on

2012 悠識數位上課講義

若您有任何 Joomla 應用需求,歡迎至夏木樂洽詢: http://simular.co/

Published in: Education
  • Be the first to comment

簡易電子商務網站 Joomla 實務工作坊

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

×