講師：羅仁治老師. 1.Joomla 的版本介紹 2.Joomla 的模組及選單設定 3.Joomla 延伸套件的種類 4.Joomla 延伸套件的安裝、升級及移除 5.Joomla 延伸套件的介紹 6. 樣板的設定及客製化.

Presentation on theme: "講師：羅仁治老師. 1.Joomla 的版本介紹 2.Joomla 的模組及選單設定 3.Joomla 延伸套件的種類 4.Joomla 延伸套件的安裝、升級及移除 5.Joomla 延伸套件的介紹 6. 樣板的設定及客製化."— Presentation transcript:

1 講師：羅仁治老師

2 1.Joomla 的版本介紹 2.Joomla 的模組及選單設定 3.Joomla 延伸套件的種類 4.Joomla 延伸套件的安裝、升級及移除 5.Joomla 延伸套件的介紹 6. 樣板的設定及客製化

3 發展期程 每六個月釋出小改版 (STS) 或大改版 (LT S) STS(short term support) 支援期為 7 個月 主要版本.0 主要版本.1( 如 3.0 及 1.6) LTS(long term support) 支援期為 27 個月 主要版本.5( 如 1.5 及 2.5)

4 功能設定 設定出現在網頁 上的內容 由樣板決定模組的 數量及擺放位置 能夠彈性設定模組 出現的頁面

5 外觀設定 設定模組 CSS 類別 可用類別 richbox-1 richbox-2 lightbox-1 lightbox-2 solid-1 solid-2

6 自訂 html 模組 自由度高 可圖文並存 與 word 編輯 器用法相同

7 選單模組 顯示選單 選單內容會顯示在 主要內容區塊中 Menu 類型 menu-divmenu menu-topmenu menu-treemenu menu-mainmenu 讓 menu 顯示 icon menu-iconmenu

8 功能 分類各類元件 針對內容分類 選單的 icon jsn-icon-article jsn-icon-download jsn-icon-info jsn-icon-selection 等等

9

10 分為三類 元件 -component 模組 -module 外掛 -plugin

11 延伸套件的安裝方法都相同 擴充套件 -> 擴充套件管理 安裝容易 不用其他工具，如 ftp 等 一鍵安裝 延伸套件都是 zip 檔

12 易於升級 一鍵搜尋更新檔 一鍵更新 不必再用到 ftp 脫離複製及貼上的剪貼作業 中央集權式的管理 類似 App 的管理方式 所有升級作業都集中管理

13 刪除方式多樣化 元件、模組及外掛有自己的刪除方式 能夠在擴充套件管理面板中，刪除選定的各式延伸套件 停用跟刪除的作用不同 停用只是不啟用，但不確定以後是否還會再使用。 刪除會放久將延伸套件移除。

14 延伸套件種類 元件 功能 檔案總管 檔案的上下傳 拖拉管理 下載網址 http://extensions.joomla.org/extensions/core-enhancements/file- management/2630?qh=YToxOntpOjA7czo5OiJleHRwbG9yZXIiO30%3D

15 主要分三區 – 1. 返回 joomla 後台 2. 樹狀目錄 3. 主要功能操作區 按右鍵會顯示快捷選單

16 套件種類 模組 外掛 功能 各類照片秀 可以當做外掛 或模組，彈性應用 設定選項多，能夠 做不同變化 下載網址 http://extensions.joomla.org/extensions/photos-a- images/galleries/content-photo-gallery/11426

17 到外掛管理區 擴充套件 -> 外掛管理 以 sig 搜尋 啟用 ( 點狀態的紅鈕就會變成綠色按鈕 )

18 預設的相片目錄是 images 用法 在文章編輯內加入 {gallery}birds{/gallery} {gallery}{/gallery} 是外掛的用法 birds 是指定將 images 目錄下的 brids 目錄的相片展示出來 細部調整 由外掛管理中的 sigplus 進行調整 模組的用法與外掛類似

19 套件種類 元件 模組 功能 影像以疊合方式顯示多個目錄下的影像 除了適用於 pc 外，也能在 iPad 及 iPhone 上展示 有四種顯示樣式可供選擇 繁多的設定選項 下載網址 http://vm.xmlswf.com/joomla-modules/joomla-accordion-gallery

20 操作步驟： 從元件中新增分類 (categories) 一個分類表示一個摺疊選項 新增多個分類 在各個分類中上傳圖片 新增 Accordion Gallery 模組 設定模組的顯示位置 設定各項顯示參數 觀看成果

21

22

23 套件種類 外掛 模組 功能 以疊合方式顯示常見問題 以更豐富的方式展現網站內容 使原有內容更易讀，更具有組織性 下載網址 http://extensions.joomla.org/extensions/directory-a- documentation/faq/11949 http://extensions.joomla.org/extensions/directory-a- documentation/faq/11949 安裝 安裝完外掛後必須到外掛管理中啟用

24 模組的操作方法 安裝 Accordion FAQ 的模組 新增一篇文章，將要疊合的標題設為 ” 標題樣式 3” 最後一個標題設成 ” 標題樣式 3” ，代表結束，不會顯示 新增模組 設定顯示位置 設定出現頁面 設定顯示文章 測試結果

25 文章標題設為 ” 標題樣式 3”

26 模組中設定顯示位置、出現頁面及顯示文章

27 外掛的操作方法 安裝 Accordion FAQ 的外掛 啟動外掛 文章中的 FAQ 標題前插入語法 ( 開始及結束標題不會顯示 ) {accordionfaq faqid=faq1}

28

29 套件種類 外掛 功能 在編輯器縮減圖片大小時，自動製作縮圖。 前台頁面點縮圖時顯示原圖 下載網址 http://extensions.joomla.org/extensions/photos-a- images/images/articles-images/6263 http://extensions.joomla.org/extensions/photos-a- images/images/articles-images/6263 安裝 安裝完外掛後必須到外掛管理中啟用

30

31

32

33

34

35 Favicon 的功能 在瀏覽器上顯示網站的圖示 Favicon 的檔案格式 16px x 16px 副檔名為 ico 能夠以 Photoimpact 製作 將 favicon 圖檔以 extplorer 上傳到 Joomla 根目錄 /templates/ 樣板檔名稱 清除瀏覽器的瀏覽資料，重新瀏覽，就可以看到成果。

36 操作步驟 插入自訂 html 模組 模組位置設定為 logo

37 Html 決定網頁的結構 表格 標題 分隔區塊 CSS 決定網頁的外觀 字型 顏色 外框等

38 以 eXtplorer 建立 test 資料夾 test 資料夾內建立 a.html 檔案 開啟瀏覽器 http://ip/test/a.html

39 安裝 chrome 開啟 JavaScript 控制台

40 拷貝一份樣板檔

41 更改 templateDetails.xml 檔

42

43

44 images/icons/ icons-uni.png Icon 大小 24 x 24 像素 改完後覆蓋原檔

45 第一步 icons-uni.png 增加 94 像素的高度 與前一個 icon 的距離為 70 像素 第二步 更改 css/template.css 檔 找到 general icon assignment 區塊 加入右圖的 css 內容

46 依據選取的樣板顏色， 修改 css 檔

47

48

49