華燈初上

Joomla! 資訊網站

  • 首頁
    • 會員使用條款
    • 隱私權政策
  • Joomla!
    • Joomla! 新聞
    • J2Store 教學
    • Joomla! 核心
    • 元件文章
    • 佈景主題文章
    • 經驗、觀念分享
    • 外部網路資源
  • 書籍與授課
    • Joomla! 書籍簡介
    • 簡報分享
  • 討論區
  • 留言板
  • 會員登入
    註冊
    • 忘記你的帳號?
    • 忘記你的密碼?

    使用社群網站帳號登入

    你目前位置:  
  1. 首頁
  2. Joomla!
  3. 佈景主題文章
  4. Joomla! 的佈景主題:基本介紹
11 七月 2015

Joomla! 的佈景主題:基本介紹

Joomla! 3.4 Graphic
Image Credit: Chiara Aliotta and Helvecio Da Silva

佈景主題決定 Joomla! 網站的樣貌

佈景主題定義了網站畫面的主要色系、訊息文字的大小與顏色、模組區塊數量及位置,甚至元件/模組的版型規劃。

佈景主題在 Joomla! 的責任範圍(以 Protostar 佈景主題為例)
▲佈景主題在 Joomla! 的責任範圍(以 Protostar 佈景主題為例)

在管理區「佈景主題管理」畫面(歸類在「擴充套件」),你可以瀏覽、設定當前網站所安裝的佈景主題項目:包含前台與後台。你可在此預覽佈景主題的模組區塊規劃、編輯佈景主題,甚至製作專屬頁面規劃(layout)。

你可以安裝一個以上的佈景主題,以「選單項目」或「語言標籤」為單位分配。專業設計公司製作的付費佈景主題提供專業設計風格的網站畫面、多樣化的模組區塊分佈,同時因應搜尋引擎最佳化(SEO)。

當你要調整畫面部分元素(如字體間隔、段落等)時,付費佈景主題提供的參考資源:Quickstart、使用者手冊、展示網站等將協助你更精確掌握佈景主題的運作。

Joomla! 佈景主題檔案在哪裡?

Joomla! 佈景主題檔案位於網站根目錄的「templates」資料夾,各佈景主題存放在以佈景主題為名的子資料夾。Joomla! 佈景主題有三個重要的運作檔案,分別是:

  • index.php:網站首頁檔案,載入佈景主題需要的各項資源及定義。(頁面編碼、樣式定義、模組區塊規劃、運作框架等)
  • templateDetails.xml:記載佈景主題所使用的檔案、資料夾資訊,以及設定參數。
  • template.css(位於「css」資料夾中):定義網站畫面中各元素(文字、選單、按鈕等)所使用的 CSS 樣式。

Protostar 佈景主題使用的檔案/資料夾概述
▲Protostar 佈景主題使用的檔案/資料夾概述

佈景主題資料夾中的「favicon.ico」檔案負責顯示瀏覽器標題左方的網站圖示(favicon)
▲佈景主題資料夾中的「favicon.ico」檔案負責顯示瀏覽器標題左方的網站圖示(favicon)

「佈景主題管理」畫面

佈景主題管理畫面由「樣式」及「佈景主題」兩項功能畫面組成:在「樣式」畫面你可以看到網站所安裝的佈景主題列表,點選佈景主題名稱進入參數調整畫面;「佈景主題」畫面可以觀看佈景主題預覽圖片、預覽佈景主題在模組區塊的規劃(「佈景主題預覽」開啟時),或是開啟編輯器編輯佈景主題檔案。

佈景主題「樣式」畫面
▲佈景主題「樣式」畫面

點選佈景主題名稱前往詳細設定畫面
▲點選佈景主題名稱前往詳細設定畫面

「進階」分頁畫面設定佈景主題參數
▲「進階」分頁畫面設定佈景主題參數

「選單指派」分頁指定佈景主題負責哪些選單群組/選單項目畫面呈現
▲「選單指派」分頁指定佈景主題負責哪些選單群組/選單項目畫面呈現

「佈景主題」畫面可以看到佈景主題預覽圖片;點選「預覽」觀看佈景主題區塊規劃; 點選「(佈景主題名稱)細節與檔案」開啟佈景主題檔案管理畫面。
▲「佈景主題」畫面可以看到佈景主題預覽圖片;點選「預覽」觀看佈景主題區塊規劃;
點選「(佈景主題名稱)細節與檔案」開啟佈景主題檔案管理畫面。

透過佈景主題的檔案管理畫面,線上修改佈景主題檔案。
▲透過佈景主題的檔案管理畫面,線上修改佈景主題檔案。

當你在「樣式」畫面點選佈景主題的樣式名稱,畫面會切換到佈景主題的檔案管理畫面,在左方的樹狀列點選要編輯的檔案後,在右方的編輯區編輯。

線上修改佈景主題

配置 Protostar 佈景主題

Protostar 是 Joomla! 3 系列預設使用的佈景主題,風格清爽、簡單,而且具備 RWD 特性,可因應不同瀏覽設備調整顯示方式。阿寶以此為例說明佈景主題配置上的重點。

在佈景主題管理畫面中的「樣式」分頁,點選佈景主題名稱後前往配置畫面,功能豐富的佈景主題在這裡出現多個設定分頁,Protostar 的情況在「進階」分頁。

Protostar 佈景主題進階設定項目
▲Protostar 佈景主題進階設定項目

佈景顏色改用紅色(#cc0000),背景顏色改用橘色(#ff9900)的前台預覽。
▲佈景顏色改用紅色(#cc0000),背景顏色改用橘色(#ff9900)的前台預覽。

佈景主題的模組位置規劃

佈景主題定義網站畫面中模組與元件的出現位置,沒有分配到模組顯示的位置區塊會隱藏起來,空間由分配模組的位置區塊補上。在配置佈景主題設定的同時,建議你取得佈景主題的區塊規劃圖,原因有二:

  1. 正式運作的網站不建議開啟佈景主題預覽。
  2. Joomla! 提供佈景主題預覽畫面會與現有的圖片、文字重疊方便你對照,但是上述作法有時會讓你看不清楚位置區塊名稱。

在區塊規劃豐富的佈景主題,Joomla! 系統提供的佈景主題預覽畫面看起來會一團亂。
▲在區塊規劃豐富的佈景主題,Joomla! 系統提供的佈景主題預覽畫面看起來會一團亂。

你可以在佈景主題的說明文件或範例網站找到佈景主題的區塊規劃圖,Protostar 的區塊規劃如下圖所示。

Protostar 佈景主題的區塊規劃。
▲Protostar 佈景主題的區塊規劃。

指定佈景主題負責顯示的選單項目

你可以在網站上安裝多個佈景主題,依照設計風格分別負責網站不同區塊的畫面顯示,而指定負責範圍的設定畫面,就是佈景主題的「選單指派」分頁。

在「選單指派」畫面中指定佈景主題負責顯示的選單項目,在佈景主題指定為「預設」時可省略作業。以「項目勾選」方式指定哪些選單項目以此佈景主題呈現,你也可以用「選單群組」為單位,指派群組下所有選單項目都用相同佈景主題顯示,選單項目眾多時可節省時間。

你可以利用佈景主題的「樣式複製」功能,讓選單群組/群組在相同佈景主題中擁有不同的顏色配置。

以 Protostar 為例,點選樣式後再點選工具列「複製」按鈕後產生原有樣式的複本。
▲以 Protostar 為例,點選樣式後再點選工具列「複製」按鈕後產生原有樣式的複本。

編輯樣式複本,更改名稱、顏色配置等資訊。
▲編輯樣式複本,更改名稱、顏色配置等資訊。

在「選單指派」畫面中指定套用新樣式配置的選單群組/選單項目。
▲在「選單指派」畫面中指定套用新樣式配置的選單群組/選單項目。

比較套用不同樣式的選單項目畫面
▲比較套用不同樣式的選單項目畫面

配置 Isis 佈景主題

Isis 是 Joomla! 3 系列預設的管理區佈景主題,和 Protostar 一樣具備 RWD 特性,你可以前往配置畫面,更改佈景主題顏色、logo 圖片等設定。

Isis 佈景主題進階設定
▲Isis 佈景主題進階設定

「折疊管理區選單」設定為「是」時,管理區頂部選單在顯示寬度小於一定程度時自動收闔成下拉式按鈕,點選後縱向展開。
▲「折疊管理區選單」設定為「是」時,管理區頂部選單在顯示寬度小於一定程度時自動收闔成下拉式按鈕,點選後縱向展開。

Isis 的模組位置區塊規劃

Isis 沒有提供佈景主題預覽,請你依照下圖內容瞭解模組位置名稱及規劃。

Isis 模組位置規劃一
▲Isis 模組位置規劃一

Isis 模組位置規劃二
▲Isis 模組位置規劃二

back to top
Tags: Joomla!, Joomla! 3.4, 素人架站計畫, 佈景主題
  • 上一篇文章:如何安裝、配置新佈景主題,以及付費佈景主題的好處 如何安裝、配置新佈景主題,以及付費佈景主題的好處
  • 下一篇文章:轉換 Joomla! 1.5 佈景主題到 2.5 轉換 Joomla! 1.5 佈景主題到 2.5

服務條款 隱私權條款© 1999 - 2019 創用 CC 授權條款華燈初上由 A-Bo Lee 製作,以創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款釋出。All Rights Reserved. Powered by Helix3

Joomla!® is the trademark of Open Source Matters, Inc. in the United States and other countries. The Joomla!® name is used under a limited license granted by Open Source Matters. 華燈初上 is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

  • 首頁
    • 會員使用條款
    • 隱私權政策
  • Joomla!
    • Joomla! 新聞
    • J2Store 教學
    • Joomla! 核心
    • 元件文章
    • 佈景主題文章
    • 經驗、觀念分享
    • 外部網路資源
  • 書籍與授課
    • Joomla! 書籍簡介
    • 簡報分享
  • 討論區
  • 留言板
  • 會員登入
 
為使您有最好的使用體驗,本網站使用 cookies 功能記錄您的喜好。
We use cookies to ensure that we give you the best experience on our website.
我同意 / I accept