February 18,2007

[翻譯]Joomla! 1.0.12版及較舊版本 樣板教學 5of9

原文: Hazman  
出處 : xtremeOpenSource 

Joomla! 程式碼
下列是讓Joomla!的功能在你的樣版起作用的必要程式碼。它們是展示內容所必備的,而且得放在我們的index.php檔案內。

下列左方是簡略的敘述,右方則是對應的程式碼。
網頁路徑(Pathway)...................... <?php mosPathWay(); ?>
左方內容(Left Content)................. <?php mosLoadModules ( 'left' ); ?>
中間內容(Center Content)............... <?php mosMainBody(); ?>
右方內容(Right Content)................ <?php mosLoadModules ( 'right' ); ?>
頁尾(Footer)................ <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>

網頁路徑(Pathway
)
我們會從網頁路徑(Pathway)開始。網頁路徑(Pathway),也被稱為麵包屑,是由幾個小連結構成的,可以指出我們現在的網頁位置所在,通常放在靠近頁面的最上方。就像說明你所在的地圖。
我們要把網頁路徑(Pathway)放在主要內容表格的中間欄。
如下方,複製到index.php檔案裡。
<?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 '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?>
</head>

<body>

<div id="main_container">

<div id="header">
Header
</div>

<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">

<td width="150">
Left Column Content
</td>

<td width="100%">
Center Column Content
<?php mosPathWay(); ?>
</td>

<td width="150">
Right Column Content
</td>

</tr>
</table>

</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>


網頁路徑的CSS
現在我們增加 網頁路徑(Pathway)的屬性。
複製到template_css.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
*/

body {

}

tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}

/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}

/********** Pathway **********/
.pathway {
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 9px;
padding : 0px;
}

a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}

a.pathway:hover {
color : #3366cc;
font-weight : normal;
text-decoration : none;
}


Posted by waking_life at 樂多Roodo! │14:36 │回應(0)引用(0)樣式表心法
樂多分類:網路/3C 共同主題:Joomla! 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2772717