2008年7月5日 20:22

Joomla! 1.0.12網站建置2-安裝佈景主題樣板(多圖)

Joomla! 1.0.12網站建置2-安裝佈景主題樣板

版本:2008/07/05 V1.0.1
作者:簡睿
版權:歡迎轉載,但請註明作者與來 源連結

Joomla!網 頁的外觀是使用樣板(Templates)來管理的,只要更換樣板,就能把網頁的樣式與呈現都改變掉,在本文我用Free的樣 板:JSN Epic Free 2.0來示範如何輕易的變更網站的外觀。

下載資訊
將檔案下載並解壓縮到暫存目錄後,可 以發現有兩個子目錄:for_joomla_10是給Jomla! 1.0.x使用,而for_joomla_15則是給Joomla! 1.5使用,我們使用的是1.0的版本。首先要安裝的是擴充模組exmenu(Extended Menu),用來擴充選單功能的套件。

我們可以把Jommla!的模組(Modules) 視為Blog系統裡的側邊欄位(或稱插入欄位、自由欄位),不同的模組會以不同的樣式顯示在前端的網頁裡。Joomla!另一個重要的元件是選單,透過選 單我們才能建立各個網頁之間的連結。下列步驟複製已經存在的mainmenu而新增一個選單toolbarmenu:
  1. 管理區功能表→【選單】→【選單管理】
  2. 點選「mainmenu」,再按右上方的〔複製〕
    1. 新選單名稱:toolbarmenu
    2. 新模組名稱:toolbarmenu
  3. 選單名稱是其選單的唯一名稱,模組名稱則是顯示在【模組】→【網站模組】裡的項目名稱
Joomla!預設的選單模組是「mod_mainmenu」,它的功能較為簡單,我們可以上載擴充模組「exmenu」來取代預設的選單模組。這裡要能 分辨選單和選單模組的差異,選單模組是把選單呈現在前端網頁的設定,二者不要混淆了。

首先將 jsn_epic_free_2.0_unzip.me.first.zip解壓縮,我們需要的檔案是解開的for_joomla_10\ mod_exmenu.zip。請依下列步驟來安 裝exmenu模組:

安裝exmenu模組

  1. 登入管理區後,點選功能表【新增或移除程式】→【模組】,表示要新增模組。

  2. 先用〔瀏覽...〕找到 上述下載來的mod_exmenu.zip檔案後,再按〔上傳檔案 & 安裝〕install-module-1
  3. 稍待一會後就會出現安裝資訊的繼續網頁,按「繼續...」
  4. install-module-2
  5. 在新增模組網頁往下捲動能看剛安裝的mod_exmenu模組的話,就是安裝成功了。由此例可以了解模組的名稱固定皆以 mod_ 開頭。
  6. install-module-3

新增兩個Extended Menu模組

在一個Joomla!的網頁裡我們可以同時建立多個選單與選單模組,因此我們可以複製mod_exmenu再針對複製後的新模組來修改。複製 mod_exmenu的 步驟如下:
  1. 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
  2. 按右上方的〔複製〕圖示
  3. 在「Extended Menu」下方會出現「Copy of Extended Menu」
  4. 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁,依下列指示修改欄位:
    1. 標題:修改成此項目的標題,如「Ext Toolbar選單」
    2. 版面位置:toolbar
    3. 已發佈:變更成「是」
    4. Menu Name:在此處指定要合用的選單代碼,請先選用「toolbarmenu」
    5. 按右上方的〔儲存〕將上列變更儲存起來
再建立另一個名為「Ext 主選單」的Extended Menu模組:
  1. 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
  2. 按右上方的〔複製〕圖示
  3. 在「Extended Menu」下方會出現「Copy of Extended Menu」
  4. 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁,依下列指示修改欄位:
    1. 標題:修改成此項目的標題,如「Ext 主選單」
    2. 版面位置:left
    3. 已發佈:變更成「是」
    4. Menu Name:在此處指定要合用的選單代碼,請先選用「mainmenu」
    5. 按右上方的〔儲存〕將上列變更儲存起來

安裝新的佈景主題

Joomla!的模組分成網站管理區兩大類,分別用來設定前端網站後端管 理區的佈景。管理區的樣板是管理人員在使用的,現有 的應該足夠使用,建議不要修改,只要變更一般訪客會看到的前台網頁樣板即可。 以下為新增JSN Epic Free 2.0佈景樣板到Jommla!前端網頁的步 驟:
  1. 由Joomla!管理區功能表→【安裝或移除程式】→【佈景主題 - 網站】進入佈景主題維護網頁
  2. 按〔瀏覽〕並找到要上傳的for_joomla_10\jsn_epic_free_2.0_j10.zip, 選取好後按〔上傳檔案 & 安裝〕
  3. 看到上傳 「template - 成功」字樣後按〔繼續 ...〕
  4. 點選「JSN_Epic_Free」後按右上方的〔預設〕,以啟用此佈景主題 JSN-1
  5. 重新整理前端網頁,網站已經套用新的佈景樣板了
JSN new template

依新佈景來設置網站

安裝網站的小圖示

網站小圖示指的是顯示在瀏覽器網址左側的圖形,我們可以依下列步驟把自己設計的圖示顯示在自己的網站上:
  1. 使用圖示製作工具產生16px X 16px的.ico檔案,檔名固定為favicon.ico
  2. 把favicon.ico複製到「Joomla!安裝目錄\images」資料夾
  3. 如果重新整理後看到的圖示仍未改變的話,先清除瀏覽器的暫存檔案後再檢視應該就OK了
Favicon-1 Favicon-2

設定上方的標題區

變更Logo圖示

  1. 我們先使用功能表→【網站】→【媒體管理者】新增一個存放圖檔的新目錄(如建立JERRY目錄),再把要做為網站首頁Logo的 圖檔上傳到此目錄裡
  2. 再由【網站】→【佈景主題管理】→【網站佈景主題】點選「JSN_Epic_Free」後按右上方的〔編輯HTML〕
  3. 網頁顯示jsn_epic_free/index.php的檔案內容,找到$logo_path後,將其路徑修改成新增目錄的 Logo檔名
     將 $logo_path = "templates/jsn_epic_free/images/logo.png";
    改成 $logo_path = "images/JERRY/logo.png";
  4. 依新的logo圖檔的尺寸大小修改$logo_width與$logo_height。修改後記得按右上方的〔儲存〕
  5. 當然直接用文書編輯程式修改樣板的index.php是更快的方法,檔案完整路徑是c:\xampp\htdocs\ Joomla目錄\templates\jsn_epic_free\index.php

增加Suckerfish選單

接著在Logo圖形下方加入下拉式功能選單。
  1. 由管理區功能表→【模組】→【網站模組】找到先前建立的「Ext Toolbar選單」,點擊以進入設定網頁
  2. 顯示標題:否
  3. 版面位置:toolbar
  4. Menu Class Suffix:修改成「-suckerfish」
  5. Expand Menu:是
  6. 確認「Enable Menu Template」為「是」
迄今的成果如下圖所示,中間的黑色長條就是「toolbar」區,顯示的是「Ext Toolbar選單」模組:
JSN-5

增加圖片展示區

我們準備在標題區加入圖片展示區域,要使用的是JSN ImageShow模組。
  1. http://www.joomlashine.com/index.php?option=com_docman&task=doc_download&gid=3&Itemid=39下 載JSN ImageShow Free模組
  2. 由管理區功能表→【新增或移除程式】→【模組】上傳並安裝mod_jsn_imageshow_free_1.0.6_j10.zip
  3. 由【模組】→【網站模組】裡找到JSN ImageShow Free點擊之以進入設定網頁
    1. 顯示標題:否
    2. 版面位置:header
    3. 已發佈:是
    4. Height(px):250
    5. Image Folder:預設是/images/stories,我們可以用媒體管理建立新的目錄,再將之改成新的目錄(如images/photo,實體路徑是 c:\xampp\htdocs\Joomla目錄\images\photo),要展示的圖片即存入指定的目錄裡;JSN ImageShow Free版本最多只能顯示10個圖片,若需要更多功能則請購買PRO版本
    6. 把圖片複製到images/photo裡後重整前端網頁就能看到圖片的展示特效了。在設定網頁裡有更多的設定請自行測試、研 究。
    7. JSN-6

設定左方側邊欄位

變更主選單樣式

JSN Epic樣板有三種選單格式:Suckerfish、BulletTree與DivBar,Suckerfish menu在前文已出現過,現在再來設定BulletTree式的選單樣式:
  1. 管理區功能表→【模組】→【網站模組】,找到「Extended Menu」後複製成「Ext 主選單」
  2. 修改「Ext 主選單」模組:
    1. 顯示標題:否
    2. 版面位置:left
    3. Menu Class Suffix:-bullettree
    4. Module Class Suffix:-box box-grey
    5. Expand Menu:否
    6. 按右上方的〔儲存〕
  3. JSN-7

變更登入表單樣式

  1. 在【模組】→【網站模組】裡點選「登入表單」模組
  2. 變更下列欄位的設定值:
    1. 模組CSS字尾:-box box-green icon-user
    2. 按右上方的〔儲存〕
  3. 變身前 變身後
    Login form-before Login form-after

設定右方側邊欄位

變更投票樣式

  1. 在【模組】→【網站模組】裡點選「RSS新聞供稿」模組
  2. 變更下列欄位的設定值:
    1. 模組CSS字尾:-box box-blue icon-selection
    2. 按右上方的〔儲存〕
  3. 變身前 變身後
    Vote-before
    Vote-after

停止發佈不需要的模組

再由【模組】→【網站模組】裡把不需要的mod_mainmenu的所有模組都停止發佈,操作後前端網頁裡就看不到這些預設的選單了;找出所有 mod_mainmenu模組的方法是由右上方的「- 選擇類型 -」裡選取mod_mainmenu。

再將「新聞快報」模組的版面位置由top改為right。

最後成果

最後的網頁成果如下或拜訪http://jdev.tw/joomla檢 視:

final-page

##

  • emisjerry 發表於樂多Joomla!編輯本文
    樂多分類:網路/3C切換閱讀版型 │昨日人次:1 │累計人次:3368