Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、XOOPS佈景設計須知

1. 要設計一個佈景，至少要懂HTML+CSS，有時還需要懂一些jquery，要設計一個可以再各種裝置都可以看的佈景，還需要懂得自適應設計（Responsive Web Design），要設計一個XOOPS佈景，您還得要懂smarty佈景引擎語法。
2. 正常的XOOPS佈景開發大致流程為：先做一個普通的HTML網頁，然後，套上XOOPS專屬的smarty佈景標籤，這樣就成了XOOPS佈景。
3. 可控制的XOOPS佈景則是可以讓使用者透過Tad Themes模組來針對佈景做設定，TadTools已經有內建一些共同樣板，所以，可以選用降低開發難度。
4. 佈景開發重點在於了解XOOPS的樣板結構及原理，因為XOOPS的樣板分成三大部份：主樣板、區塊樣板、模組樣板...等，尤其XOOPS2.5之後又加入了不少新功能，所以，這部份盡可能的去了解它的結構以及作用範圍，如此，日後才能隨心所欲的想改哪裡就改哪裡。
 
### 二、 設計佈景的正確觀念

1. 版型不應該用Table來建立，而是應該用<div>或這類本身不具意義的標籤來規劃版型。用表格會缺乏彈性，而且也不是新一代網站的正確作法，表格就應該拿來當作表格用。
2. HTML用來作為網頁結構的規劃，而非外觀的設計。外觀一律建議使用CSS來控制。
 
### 三、本次研習範例

嘉義場研習範例：[http://www.templatemo.com/templates/templatemo\_062\_white](http://www.templatemo.com/templates/templatemo_062_white)

嘉義場研習範例下載：[http://www.templatemo.com/preview/templatemo\_062\_white](http://www.templatemo.com/preview/templatemo_062_white)

臺南場研習範例：[http://www.templatemo.com/templates/templatemo\_353\_beauty\_class/](http://www.templatemo.com/templates/templatemo_353_beauty_class/)

臺南場研習範例下載: [http://www.templatemo.com/preview/templatemo\_353\_beauty\_class](http://www.templatemo.com/preview/templatemo_353_beauty_class)

### 四、 開發工具：[Sublime ](http://www.sublimetext.com/)或 [NotePad++](http://120.115.2.90/modules/tad_uploader/index.php?op=dlfile&cfsn=29&cat_sn=7&name=npp.zip)

1. Sublime[![yes](http://www.tad0616.net/modules/tadtools/ckeditor/plugins/smiley/images/thumbs_up.gif "yes")](https://www.dropbox.com/s/wyb7ila9zye3uh0/Sublime%20Text.zip)是小弟的主力工具，大力推薦，不過不是免費軟體。
2. NotePad++解壓縮後，直接執行npp/notepad++.exe即可。

:::