Joomla 應用研習

Joomla應用研習 講師：羅仁治老師

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

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

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

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

2-1.模組的設定 • 自訂html模組 • 自由度高 • 可圖文並存 • 與word編輯器用法相同

2-1.模組的設定 • 選單模組 • 顯示選單 • 選單內容會顯示在主要內容區塊中 • Menu類型 • menu-divmenu • menu-topmenu • menu-treemenu • menu-mainmenu • 讓menu顯示icon • menu-iconmenu

2-2.選單的設定 • 功能 • 分類各類元件 • 針對內容分類 • 選單的icon • jsn-icon-article • jsn-icon-download • jsn-icon-info • jsn-icon-selection • 等等

2-2.選單的設定

3.Joomla延伸套件的種類 • 分為三類 • 元件-component • 模組-module • 外掛-plugin

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

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

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

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

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

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

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

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

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

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

5-3.Joomla的延伸套件-Accordion Gallery

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

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

5-4.Joomla的延伸套件-Accordion FAQ • 文章標題設為”標題樣式3”

5-4.Joomla的延伸套件-Accordion FAQ • 模組中設定顯示位置、出現頁面及顯示文章

5-4.Joomla的延伸套件-Accordion FAQ • 外掛的操作方法 • 安裝Accordion FAQ的外掛 • 啟動外掛 • 文章中的FAQ標題前插入語法(開始及結束標題不會顯示) {accordionfaqfaqid=faq1}

5-4.Joomla的延伸套件-Accordion FAQ

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

5-5.Joomla的延伸套件-mavikThumbnails

5-6.插入Google 地圖

5-6.插入Google地圖

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

6-2不同頁面顯示不同的logo • 操作步驟 • 插入自訂html模組 • 模組位置設定為logo

6-3html及css概略介紹 • Html • 決定網頁的結構 • 表格<table></table> • 標題 <h1></h1> <h2></h2> • 分隔區塊 <div></div> • CSS • 決定網頁的外觀 • 字型 • 顏色 • 外框等

6-4html及css實例操作 • 以eXtplorer建立test資料夾 • test資料夾內建立a.html檔案 • 開啟瀏覽器 • http://ip/test/a.html

6-5客製化樣板的準備工作-1 • 安裝chrome • 開啟JavaScript控制台

6-5客製化樣板的準備工作-2 • 拷貝一份樣板檔

6-5客製化樣板的準備工作-2 • 更改templateDetails.xml檔

6-5客製化樣板的準備工作-2

6-6更換icon • images/icons/icons-uni.png • Icon大小 • 24 x 24像素 • 改完後覆蓋原檔

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

6-7更換背景 • 依據選取的樣板顏色，修改css檔

6-7更換背景

6-8修改選單的背景顏色

6-9更改模組的背景

Joomla 應用研習