Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「[1031]XOOPS佈景設計」目錄
MarkDown
7. 打造可控制佈景
1. HTML5入門
1-1 「範例」index.html
2. HTML5 與 CSS3
2-1 index.html（背景整合設定）
2-2 index.html（多背景）
2-3 index.html（標題文字外觀設定）
2-4 index.html（頁內樣式）
2-5 index.html（版面布局）
2-6 index.html（完整版面布局）
2-7 index.html（導覽列）
2-8 index.html（完整導覽列）
3. CSS3與版面布局
3-1 index.html（標題加上左邊框）
3-2 index2.html（position練習空檔）
3-3 index2.html（position:relative）
3-4 index2.html（position:relative+z-index 上下層）
3-5 index2.html（position:absolute）
3-6 index2.html（position:fixed）
3-7 index.html（兩欄式）
3-8 index3.html（用position來做三欄式）
3-9 index4.html（利用float做三欄式）
3-10 index.html（float兩欄式）
3-11 index.html（側邊作者欄+花邊）
4. 認識 BootStrap
4-1 bootstrap1.html 固定版面布局練習
4-2 bootstrap2.html 固定版面XOOPS布局練習
4-3 bootstrap2.html 流動版面XOOPS布局練習
4-4 bootstrap3.html 流動版面網頁排版練習
5. XOOPS佈景開發（上）
5-1 theme2014/index.html 基本頁面
5-2 theme2014/index.html 基本頁面+架構+justfont字型
5-3 css/style.css 主樣式表
5-4 theme2014/index.html 導覽列+XOOPS八區域+頁尾
5-5 theme2014/theme.html 樣板檔（大架構初步完成）
5-6 theme2014/xotpl/block.html （區塊樣板檔）
5-7 theme2014/css/xoops.css （XOOPS內容樣式表）
5-8 theme2014/xotpl/block_center.html （中間區塊樣板檔）
6. XOOPS佈景開發（下）
6-1 theme2014/theme.html 樣板檔（加入管理工具）
6-2 theme2014/xotpl/block.html （強化區塊樣板檔）
6-3 theme2014/xotpl/block_center.html （強化中間區塊樣板檔）
6-4 theme2014/css/xoops.css （XOOPS內容樣式表）
6-5 theme2014/css/style.css （主樣式表）
6-6 theme2014/modules/system/system_redirect.html 轉頁畫面
6-7 theme2014/language/tchinese_utf8/main.php
7. 打造可控制佈景
7-1 佈景結構參考
7-2 theme2014/theme.html （主佈景架構）
7-3 theme2014/theme.ini （佈景資訊檔）
7-4 theme2014/css/style.css
7-4 theme2014/config.php （佈景主設定檔）
7-5 theme2014/config2.php 額外設定
8. 進階佈景設計
8-1 theme2014/theme.html 主佈景架構
8-2 theme2014/language/tchinese_utf8/main.php 語系檔
9. 快速做出XOOPS佈景
9-1 themes/sailing_demo/theme.html
9-2 themes/sailing_demo/theme.ini
9-3 themes/sailing_demo/README
9-4 themes/sailing_demo/config.php
9-5 themes/sailing_demo/config2.php
9-6 themes/sailing_demo/templatemo_style.css (僅列修改部份)
7-2 theme2014/theme.html （主佈景架構）
\[1031\]XOOPS佈景設計 ================= [](http://www.tad0616.net/uploads/tad_book3/file/1031/theme_demo.zip) 1. 在 themes 建立資料夾，例如 school2014，以下稱之為「佈景目錄」 2. 建立 theme.html 至佈景目錄中， theme.html 需要以下樣板檔（<span style="color:#800000;">紅色的部份才是我們要編輯的檔案</span>）： 1. <span style="color:#000080;">tadtools/themes\_tpl/get\_var.html </span>（用來獲取佈景所有設定值，置於/tadtools/themes\_tpl/ 中，已內建） 2. <span style="color:#800000;">tpl/head.html</span>（載入「網頁檔頭」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 1. <span style="color:#000080;">tadtools/themes\_tpl/meta.html</span>（載入網頁meta設定，置於/tadtools/themes\_tpl/ 中，已內建） 2. <span style="color:#000080;">tadtools/themes\_tpl/link\_css.html</span>（載入各種CSS設定檔，置於/tadtools/themes\_tpl/ 中，已內建） 1. <span style="color:#800000;">css/xoops.css</span>（載入 XOOPS 基本 CSS 樣式，置於自身佈景目錄 /css中，需自行產生） 2. <span style="color:#800000;">css/style.css</span>（載入佈景相關 CSS 樣式，置於自身佈景目錄 /css中，需自行產生） - <span style="color:#800000;">css/block.css</span>（載入區塊 CSS 樣式，置於自身佈景目錄 /css中，需自行產生） 3. 另外還會載入各式XOOPS內建的CSS以及Bootstrap的CSS等，由於不是可以修改的部份，故略過。 3. <span style="color:#000080;">tadtools/themes\_tpl/theme\_css.html</span>（套用Tad Theme中的CSS設定，置於/tadtools/themes\_tpl/ 中，已內建） 3. <span style="color:#000080;">tadtools/themes\_tpl/navbar.html</span>（載入導覽列，置於/tadtools/themes\_tpl/ 中，已內建） 1. <span style="color:#000080;">tadtools/themes\_tpl/menu\_main.html（</span>載入下拉主選單，置於/tadtools/themes\_tpl/ 中，已內建） 2. <span style="color:#000080;">tadtools/themes\_tpl/menu\_my.html（</span>載入自訂選單，置於/tadtools/themes\_tpl/ 中，已內建） 3. <span style="color:#000080;">tadtools/themes\_tpl/menu\_user.html（</span>載入使用者選單，置於/tadtools/themes\_tpl/ 中，已內建） 4. <span style="color:#000080;">tadtools/themes\_tpl/menu\_login.html（</span>載入登入界面，置於/tadtools/themes\_tpl/ 中，已內建） 4. <span style="color:#800000;">tpl/header.html</span>（載入「頁首」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 1. <span style="color:#000080;">tadtools/themes\_tpl/slideshow\_responsive.html</span>（載入滑動圖文，置於/tadtools/themes\_tpl/ 中，已內建 ） 5. <span style="color:#800000;">tpl/$theme\_type.html</span>（載入「網頁布局」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 1. <span style="color:#800000;">tpl/leftBlock.html</span>（載入「左區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 2. <span style="color:#800000;">tpl/rightBlock.html</span>（載入「右區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 3. <span style="color:#800000;">tpl/centerZone.html</span>（載入「中間區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 1. <span style="color:#800000;">tpl/centerBlock.html.html</span>（載入「上中區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 2. <span style="color:#800000;">tpl/centerLeft.html</span>（載入「上中左區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 3. <span style="color:#800000;">tpl/centerRight.html</span>（載入「上中右區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 4. <span style="color:#800000;">tpl/xoopsContents.html</span>（載入「主內容」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 5. <span style="color:#800000;">tpl/centerBottom.html</span>（載入「下中區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 6. <span style="color:#800000;">tpl/centerBottomLeft.html</span>（載入「下中左區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 7. <span style="color:#800000;">tpl/centerBottomRight.html</span>（載入「下中右區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 8. <span style="color:#800000;">tpl/leftBottom.html</span>（載入「左下區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生，僅 theme\_type\_8.html 會用到） 9. <span style="color:#800000;">tpl/rightBottom.html</span>（載入「右下區域」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生，僅 theme\_type\_3.html、theme\_type\_4.html、theme\_type\_8.html 會用到） 10. <span style="color:#800000;">tpl/blockTitle.html</span>（載入「區塊標題」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生，上述每個區域樣板檔均會載入此檔） 6. <span style="color:#000080;">tadtools/themes\_tpl/show\_var.html</span>（開發佈景時用來顯示佈景所有設定值，置於/tadtools/themes\_tpl/ 中，已內建，做完佈景可刪除） 7. <span style="color:#800000;">tpl/footer.html</span>（載入「頁尾」樣板檔，置於自身佈景目錄 /tpl 中，需自行產生） 8. <span style="color:#000080;">tadtools/themes\_tpl/bootstrap\_js.html</span>（載入bootstrap設定，置於/tadtools/themes\_tpl/ 中，已內建 ） 9. <span style="color:#000080;">tadtools/themes\_tpl/my\_js.html</span>（載入自訂js，用來使左右區塊高度統一，置於/tadtools/themes\_tpl/ 中，已內建 ） 3. 編輯 config.php 及 theme.ini 等基本設定。
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
116
人線上 (
64
人在瀏覽
線上書籍
)
會員: 0
訪客: 116
更多…
7. 打造可控制佈景
