Transcript Joomla應用研習20130507

講師：羅仁治老師
•
•
•
•
•
•
1.Joomla的版本介紹
2.Joomla的模組及選單設定
3.Joomla延伸套件的種類
4.Joomla延伸套件的安裝、升級及移除
5.Joomla延伸套件的介紹
6.樣板的設定及客製化
• 發展期程
• 每六個月釋出小改版(STS)或大改版(LT S)
• STS(short term support)
• 支援期為7個月
• 主要版本.0 主要版本.1(如3.0 及1.6)
• LTS(long term support)
• 支援期為27個月
• 主要版本.5(如1.5 及2.5)
• 功能設定
• 設定出現在網頁
上的內容
• 由樣板決定模組的
數量及擺放位置
• 能夠彈性設定模組
出現的頁面
• 外觀設定
• 設定模組
CSS類別
• 可用類別
richbox-1
richbox-2
lightbox-1
lightbox-2
solid-1
solid-2
• 自訂html模組
• 自由度高
• 可圖文並存
• 與word編輯
器用法相同
• 選單模組
• 顯示選單
• 選單內容會顯示在
主要內容區塊中
• Menu類型
• menu-divmenu
• menu-topmenu
• menu-treemenu
• menu-mainmenu
• 讓menu顯示icon
• menu-iconmenu
• 功能
• 分類各類元件
• 針對內容分類
• 選單的icon
• jsn-icon-article
• jsn-icon-download
• jsn-icon-info
• jsn-icon-selection
• 等等
• 分為三類
• 元件-component
• 模組-module
• 外掛-plugin
• 延伸套件的安裝方法都相同
• 擴充套件->擴充套件管理
• 安裝容易
• 不用其他工具，如ftp等
• 一鍵安裝
• 延伸套件都是zip檔
• 易於升級
•
•
•
•
一鍵搜尋更新檔
一鍵更新
不必再用到ftp
脫離複製及貼上的剪貼作業
• 中央集權式的管理
• 類似App的管理方式
• 所有升級作業都集中管理
• 刪除方式多樣化
• 元件、模組及外掛有自己的刪除方式
• 能夠在擴充套件管理面板中，刪除選定的各式延伸套件
• 停用跟刪除的作用不同
• 停用只是不啟用，但不確定以後是否還會再使用。
• 刪除會放久將延伸套件移除。
• 延伸套件種類
• 元件
• 功能
• 檔案總管
• 檔案的上下傳
• 拖拉管理
• 下載網址
• http://extensions.joomla.org/extensions/core-enhancements/filemanagement/2630?qh=YToxOntpOjA7czo5OiJleHRwbG9yZXIiO30%3D
• 主要分三區 – 1.返回joomla後台 2.樹狀目錄 3.主要功能操作區
• 按右鍵會顯示快捷選單
• 套件種類
• 模組
• 外掛
• 功能
• 各類照片秀
• 可以當做外掛
或模組，彈性應用
• 設定選項多，能夠
做不同變化
• 下載網址
• http://extensions.joomla.org/extensions/photos-aimages/galleries/content-photo-gallery/11426
• 到外掛管理區
• 擴充套件->外掛管理
• 以sig搜尋
• 啟用(點狀態的紅鈕就會變成綠色按鈕)
• 預設的相片目錄是images
• 用法
• 在文章編輯內加入{gallery}birds{/gallery}
• {gallery}{/gallery} 是外掛的用法
• birds是指定將images目錄下的brids目錄的相片展示出來
• 細部調整
• 由外掛管理中的sigplus進行調整
• 模組的用法與外掛類似
• 套件種類
• 元件
• 模組
• 功能
•
•
•
•
影像以疊合方式顯示多個目錄下的影像
除了適用於pc外，也能在iPad及iPhone上展示
有四種顯示樣式可供選擇
繁多的設定選項
• 下載網址
• http://vm.xmlswf.com/joomla-modules/joomla-accordion-gallery
• 操作步驟：
• 從元件中新增分類(categories)
• 一個分類表示一個摺疊選項
• 新增多個分類
• 在各個分類中上傳圖片
• 新增Accordion Gallery模組
• 設定模組的顯示位置
• 設定各項顯示參數
• 觀看成果
• 套件種類
• 外掛
• 模組
• 功能
• 以疊合方式顯示常見問題
• 以更豐富的方式展現網站內容
• 使原有內容更易讀，更具有組織性
• 下載網址
• http://extensions.joomla.org/extensions/directory-adocumentation/faq/11949
• 安裝
• 安裝完外掛後必須到外掛管理中啟用
• 模組的操作方法
• 安裝Accordion FAQ的模組
• 新增一篇文章，將要疊合的標題設為”標題樣式3”
• 最後一個標題設成”標題樣式3”，代表結束，不會顯示
• 新增模組
• 設定顯示位置
• 設定出現頁面
• 設定顯示文章
• 測試結果
• 文章標題設為”標題樣式3”
• 模組中設定顯示位置、出現頁面及顯示文章
• 外掛的操作方法
• 安裝Accordion FAQ的外掛
• 啟動外掛
• 文章中的FAQ標題前插入語法(開始及結束標題不會顯示)
{accordionfaq faqid=faq1}
• 套件種類
• 外掛
• 功能
• 在編輯器縮減圖片大小時，自動製作縮圖。
• 前台頁面點縮圖時顯示原圖
• 下載網址
• http://extensions.joomla.org/extensions/photos-aimages/images/articles-images/6263
• 安裝
• 安裝完外掛後必須到外掛管理中啟用
• Favicon的功能
• 在瀏覽器上顯示網站的圖示
• Favicon的檔案格式
• 16px x 16px
• 副檔名為ico
• 能夠以Photoimpact製作
• 將favicon圖檔以extplorer上傳到
• Joomla根目錄/templates/樣板檔名稱
• 清除瀏覽器的瀏覽資料，重新瀏覽，就可以看到成果。
• 操作步驟
• 插入自訂html模組
• 模組位置設定為logo
• Html
• 決定網頁的結構
• 表格
<table></table>
• 標題
<h1></h1>
<h2></h2>
• 分隔區塊
<div></div>
• CSS
• 決定網頁的外觀
• 字型
• 顏色
• 外框等
• 以eXtplorer建立
test資料夾
• test資料夾內建立
a.html檔案
• 開啟瀏覽器
• http://ip/test/a.html
• 安裝chrome
• 開啟JavaScript
控制台
• 拷貝一份樣板檔
• 更改templateDetails.xml檔
• images/icons/
icons-uni.png
• Icon大小
• 24 x 24像素
• 改完後覆蓋原檔
• 第一步
• icons-uni.png
增加94像素的高度
• 與前一個icon
的距離為70像素
• 第二步
• 更改
css/template.css
檔
• 找到general
icon assignment
區塊
• 加入右圖的css內容
• 依據選取的樣板顏色，
修改css檔