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

• JSN Epic Free 2.0
• 商業使用必須購買PRO版本（美金25元）
  

1. 管理區功能表→【選單】→【選單管理】
2. 點選「mainmenu」，再按右上方的〔複製〕
1. 新選單名稱：toolbarmenu
2. 新模組名稱：toolbarmenu
3. 選單名稱是其選單的唯一名稱，模組名稱則是顯示在【模組】→【網站模組】裡的項目名稱
   

安裝exmenu模組

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


2. 先用〔瀏覽...〕找到 上述下載來的mod_exmenu.zip檔案後，再按〔上傳檔案 ＆ 安裝〕
3. 稍待一會後就會出現安裝資訊的繼續網頁，按「繼續...」

4. 在新增模組網頁往下捲動能看剛安裝的mod_exmenu模組的話，就是安裝成功了。由此例可以了解模組的名稱固定皆以 mod_ 開頭。

新增兩個Extended Menu模組

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. 按右上方的〔儲存〕將上列變更儲存起來

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. 按右上方的〔儲存〕將上列變更儲存起來

安裝新的佈景主題

1. 由Joomla!管理區功能表→【安裝或移除程式】→【佈景主題 - 網站】進入佈景主題維護網頁
2. 按〔瀏覽〕並找到要上傳的for_joomla_10\jsn_epic_free_2.0_j10.zip， 選取好後按〔上傳檔案 ＆ 安裝〕
3. 看到上傳 「template - 成功」字樣後按〔繼續 ...〕
4. 點選「JSN_Epic_Free」後按右上方的〔預設〕，以啟用此佈景主題
5. 重新整理前端網頁，網站已經套用新的佈景樣板了

依新佈景來設置網站

安裝網站的小圖示

1. 使用圖示製作工具產生16px X 16px的.ico檔案，檔名固定為favicon.ico
2. 把favicon.ico複製到「Joomla!安裝目錄\images」資料夾裡
3. 如果重新整理後看到的圖示仍未改變的話，先清除瀏覽器的暫存檔案後再檢視應該就OK了

設定上方的標題區

變更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選單

1. 由管理區功能表→【模組】→【網站模組】找到先前建立的「Ext Toolbar選單」，點擊以進入設定網頁
2. 顯示標題：否
3. 版面位置：toolbar
4. Menu Class Suffix：修改成「-suckerfish」
5. Expand Menu：是
6. 確認「Enable Menu Template」為「是」

增加圖片展示區

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裡後重整前端網頁就能看到圖片的展示特效了。在設定網頁裡有更多的設定請自行測試、研 究。

設定左方側邊欄位

變更主選單樣式

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. 按右上方的〔儲存〕

變更登入表單樣式

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

變身前	變身後

設定右方側邊欄位

變更投票樣式

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

變身前	變身後

停止發佈不需要的模組

最後成果