close
[翻譯]Joomla! 1.0.12版及較舊版本 樣板教學 1of9
Joomla! 1.0.12版及較舊版本 樣板教學
在這個教程中，你會學習到如何製作一個相當簡單的Joomla樣版，然而，很多HTML和CSS的細節沒談到，如果你希望更深層了解HTML和CSS，我建議你在Google搜尋HTML和CSS的教學，你會找到無數的資源。
編輯器
這個教程只用來使用製作Joomla!1.0.X版本的樣版，你可以使用任何你喜歡使用的文字編輯器，如DreamWeaver或FrontPage，我使用 1stPage 2000，我過去一直是使用這個軟體，它是開源軟體(免費)。但是，我必須警告你，這個編輯器不是WYSIWYG(所見即所得)編輯器，所以事先的HTML和CSS的了解是必要的，才能用這個編輯器製作出一個有效的樣版。
開頭
創建一個樣板的資料夾和檔案
建立一個資料夾，命名為simple。這也會是我們樣板的名稱。
打開新建立的simple資料夾，在這裡面增加建立兩個資料夾，命名其中一個資料夾為css，另一個為images，這兩個資料夾都是以小寫英文字母命名，css資料夾用來存放css檔案，images資料夾是用來存放這個樣版所使用的全部圖片，但就這個教學來說，我們還不會使用任何圖片，所以保留這個空資料夾。
好的，讓我們開始吧－用編輯器開一個空白的頁面，把檔案存在simple資料夾，命名為index.php。然後我們開啟另一個空白頁面，命名為template_css.css，存放在css資料夾。
樣版的index.php標頭程式碼
這幾行程式碼是保護你的網站。這防止其他人因為任何理由直接存取樣版的檔案，也給PHP檔案定義，讓它只能被Joomla!識別。在你的樣版裡放置這些程式碼是很重要的。
樣版說明
在樣版說明裡，我們增加個人的說明，譬如說樣版的名稱、作者、作者的信箱、版權聲明等等。你不想這麼做的話，也可以不在你的css裡放置這些訊息。我這麼做是為了讓程式碼更有條理。
Meta標籤程式碼
聲明Joomla!的版權，還有你在管理後台裡輸入的資訊，這也讓你的動態頁面的標題隨著頁面的內容變化
編輯程式碼
這段程式碼叫出Joomla!內建的文字內容編輯器，這個功能可以讓使用者透過樣版(前台)來改變這個網站，取代透過管理員的控制面版(後台)。
CSS程式碼
這段程式碼定義樣版呈現所需要的CSS(Cascading Style Sheet)樣式表 。
我們的樣版的 index.php標頭現在看起來應該跟下面所列的程式碼一樣。
我們把它複製進去樣版的index.php檔案。
在這個教程中，你會學習到如何製作一個相當簡單的Joomla樣版，然而，很多HTML和CSS的細節沒談到，如果你希望更深層了解HTML和CSS，我建議你在Google搜尋HTML和CSS的教學，你會找到無數的資源。
編輯器
這個教程只用來使用製作Joomla!1.0.X版本的樣版，你可以使用任何你喜歡使用的文字編輯器，如DreamWeaver或FrontPage，我使用 1stPage 2000，我過去一直是使用這個軟體，它是開源軟體(免費)。但是，我必須警告你，這個編輯器不是WYSIWYG(所見即所得)編輯器，所以事先的HTML和CSS的了解是必要的，才能用這個編輯器製作出一個有效的樣版。
開頭
創建一個樣板的資料夾和檔案
建立一個資料夾，命名為simple。這也會是我們樣板的名稱。
打開新建立的simple資料夾，在這裡面增加建立兩個資料夾，命名其中一個資料夾為css，另一個為images，這兩個資料夾都是以小寫英文字母命名，css資料夾用來存放css檔案，images資料夾是用來存放這個樣版所使用的全部圖片，但就這個教學來說，我們還不會使用任何圖片，所以保留這個空資料夾。
好的，讓我們開始吧－用編輯器開一個空白的頁面，把檔案存在simple資料夾，命名為index.php。然後我們開啟另一個空白頁面，命名為template_css.css，存放在css資料夾。
樣版的index.php標頭程式碼
這幾行程式碼是保護你的網站。這防止其他人因為任何理由直接存取樣版的檔案，也給PHP檔案定義，讓它只能被Joomla!識別。在你的樣版裡放置這些程式碼是很重要的。
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo ''; ?>
$iso = split( '=', _ISO );
// xml prolog
echo ''; ?>
樣版說明
在樣版說明裡，我們增加個人的說明，譬如說樣版的名稱、作者、作者的信箱、版權聲明等等。你不想這麼做的話，也可以不在你的css裡放置這些訊息。我這麼做是為了讓程式碼更有條理。
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
Meta標籤程式碼
聲明Joomla!的版權，還有你在管理後台裡輸入的資訊，這也讓你的動態頁面的標題隨著頁面的內容變化
編輯程式碼
這段程式碼叫出Joomla!內建的文字內容編輯器，這個功能可以讓使用者透過樣版(前台)來改變這個網站，取代透過管理員的控制面版(後台)。
id ) { initEditor(); } ?>
CSS程式碼
這段程式碼定義樣版呈現所需要的CSS(Cascading Style Sheet)樣式表 。
" ; ?>
我們的樣版的 index.php標頭現在看起來應該跟下面所列的程式碼一樣。
我們把它複製進去樣版的index.php檔案。
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo ''; ?>
id ) { initEditor(); } ?>
" ; ?>
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo ''; ?>
id ) { initEditor(); } ?>
" ; ?>
全站熱搜
留言列表
