好了，如果大家有問題的請提出！
如果沒有問題的，我們繼續，
相信我們最少要露小小顯示效果，才有興趣做下去。
跟著下載最下面連結的兩個圖像，它們是屬於 456bereastreet 的，為了示範，這沒有做改動。
把它們存放到您的佈景板中的/圖像優先取代/目錄：
includes/templates/您的佈景板/images/box.png
includes/templates/您的佈景板/images/borders.png
也把下面的 CSS 檔案 stylesheet_round.css，存放到：
includes/templates/您的佈景板/css/stylesheet_round.css
因為我們在做實驗，所以 CSS 檔案裡面的數值基本上照原檔的，暫時不修改。
/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
padding: 8px;
margin:1em 0;
background:#fff;
/* border:1px solid #666; */
}
/*.cbb h1 {
margin:0 -10px;
padding:0.3em 10px;
background: #FFF;
font:bold 1.2em/1 Arial, Helvetica, sans-serif; */
}
/* Insert the custom corners and borders for browsers with sufficient JavaScript support */
/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
margin:0.5em 0;
}
.left {
}
.right {
}
/* Rules for the top corners and border */
.bt {
background:url(../images/box.gif) no-repeat 100% 0;
margin:0 0 0 18px;
height:17px;
}
.bt div {
height:17px;
width:18px;
position:relative;
left:-18px;
background:url(../images/box.gif) no-repeat 0 0;
}
/* Rules for the bottom corners and border */
.bb {
background:url(../images/box.gif) no-repeat 100% 100%;
margin:0 0 0 18px;
height:17px;
}
.bb div {
height:17px;
width:18px;
position:relative;
left:-18px;
background:url(../images/box.gif) no-repeat 0 100%;
}
/* Insert the left border */
.i1 {
padding:0 0 0 12px;
background:url(../images/borders.gif) repeat-y 0 0;
}
/* Insert the right border */
.i2 {
padding:0 12px 0 0;
background:url(../images/borders.gif) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
background: White;
border:1px solid #fff;
border-width:1px 0;
padding: 1px 1px;
}
/* CSS for the box ends here */
/* Just a bit of styling for this example. Adjust as you wish. */
/* .cb h1 {
margin:0 -10px;
padding:0.3em 10px;
background: White;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
} */
可能您會在問，顯什麼韻色呢？什麼也看不見？
是的，我們只做了基本的功夫，但是如果您有留心的，我們上面全部只應用了 Zencart 的模板基本技術，什麼模板也是這樣產生的。
再簡單介紹一下：
您的佈景板放在檔案路徑：
includes/templates/您的佈景板
您的佈景板/ CSS 檔案 / 放在檔案路徑：
includes/templates/您的佈景板/css/stylesheet_round.css
您的佈景板/圖像/ 放在檔案路徑：
includes/templates/您的佈景板/images/box.png
includes/templates/您的佈景板/images/borders.png
您的佈景板/JavaScropt/ 放在檔案路徑：
includes/templates/您的佈景板/jscript/jscript_cb.js
其實沒有什麼大困難，它們全部都是佈景板 template_default 的反射，只要多用一些便可以習慣了，
跟著我們要一些顯示效果在網頁的中間部份，那這網頁的中間部份在什麼檔案呢？
如果您有安裝上面的 S-page Basic template 的，把下面檔案
============================================== includes/templates/您的佈景板/common/tpl_main_page.php
其中，第 77 行
<td valign="top" rowspan="2" class="center_column" width="100%"><?php require($body_code); ?></td>
因應 456bereastreet 的圖像效果的說明，
加入以下相關要求的 HTML 語法：
<div class="cbb"> Box content 我們的內容 == <?php require($body_code); ?> </div>改成之後，成為：
<td valign="top" rowspan="2" class="center_column" width="100%"><div class="cbb "><?php require($body_code); ?></div></td>
如果您用普通的模板的，請把以下的檔案
============================================== includes/templates/template_default/common/tpl_main_page.php
同樣把它複製到您的佈景板/常用佈景檔案 (common)/ 的路徑：
includes/templates/您的佈景板/common/tpl_main_page.php
再下來把檔案
includes/templates/您的佈景板/common/tpl_main_page.php
第 74 行，原本的源碼為：
<td valign="top" class="center_column" width="100%"><?php require($body_code); ?></td>
改成之後，成為：
<td valign="top" rowspan="2" class="center_column" width="100%"><div class="cbb "><?php require($body_code); ?></div></td>
最後的把檔案存放或上載，之後只要刷新瀏覽器便可看看您得到的效果！
您們成功了嗎？？
如果您要有不同的圖形和效果，只要按 456bereastreet 的網上說明，另外再做別的圖像，您便可以得到完全不同的效果！
跟著會介紹左右兩個側框盒的修改，請密切留意下回分解，不要錯過。
[附件已被管理員刪除]
