Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「[1001]XOOPS網站門面專業設計」目錄
MarkDown
10-2 上課範例:style.css
1. 認識HTML、CSS
2. HTML基礎
3. 表格、圖片與版型
4. 連結、列表與組圖
4-1 上課範例
5. 認識HTML5
5-1 上課範例
6. 套用CSS
6-1 上課練習
7. CSS於區塊的應用
7-1 上課範例:index4.html
7-2 上課範例:style2.css
8. 表格、清單、超連結
8-1 上課範例:index4.html
8-2 上課範例:style2.css
9. CSS的位置控制
9-1 上課範例:index4.html
9-2 上課範例:style2.css
10-1 上課範例:index.html
10-2 上課範例:style.css
11. XOOPS佈景
11-1 需改造網站
12. 將網頁轉為樣板
12-1 上課範例:theme.html
12-2 上課範例:style.css
13. 整修、測試佈景
13-1 block.html
13-2 block_center.html
13-3 style.css
14. 線上修改樣板
14-1 上課範例:theme.html
14-2 上課範例:block_right.html
14-3 上課範例:style.css
14-4 上課範例:block.html
15. 實用CSS技巧
16. 樣板整合
16-1 上課範例:theme.html
16-2 上課範例:style.css
16-3 上課範例:block_right.html
16-4 上課範例:loginhtml
17. XOOPS佈景速成
18. 認識CSS Sprites
18-1 範例一:左半的圖
18-2 範例二:右半邊的圖
18-3 範例三:滑鼠移過切換(IE6相容版)
18-4 範例四:框出裡面的選項
18-5 範例五:完整版
11-1 需改造網站
\[1001\]XOOPS網站門面專業設計 ===================== ### 一、佈景設計的幾個考量: 1. 要套用到一個或者多個網站?決定佈景欲採用的設計方式(彈性或固定)。 2. 網站的XOOPS版本為何?用來決定區塊放置區數量及使用的樣板標籤語法 3. 網站的使用對象(年齡層)為何?用來決定字體大小及整體風格 4. 網站內容的多寡?用來決定佈景版型。 ### 二、XOOPS的外觀組成: 1. Theme佈景: - 「主佈景」:主佈景控制整個網站呈現結構,以及八個「區塊放置區」的位置分配。「主佈景」一律放置在「themes」中,一個資料夾就是一個佈景,內含「區塊放置區」樣板、CSS檔以及相關圖檔,其中的theme.html就是主樣板。 - 「區塊放置區」樣板:控制每個「區塊放置區」的基本區塊外觀,包含「區塊標題」以及「區塊內容」的統一呈現外觀。區塊樣板可以是獨立檔案,也可以結合到theme.html中(2.3以前僅五區,2.3以後有八區)。 2. Modules模組樣板: - 「模組」樣版:負責控制模組主畫面的呈現外觀。隨模組的樣板設計精細程度,可自行修改的程度也不同。「模組」樣板放置於模組中,亦即「modules/模組名稱/templates/」底下,凡有修改模組樣板檔內容,必須進行模組更新動作。 - 「區塊」樣板:負責控制單一區塊內容要呈現的外觀。區塊來自於模組,其樣板檔放置於「modules/模組名稱/templates/blocks」底下,凡有修改區塊樣板檔內容,一樣必須進行模組更新動作。 ### 三、關於XOOPS的佈景: 1. 所謂「樣板檔」,其實就是網頁html檔。XOOPS採用Smarty樣板引擎,把一般的html網頁加上smarty樣板標籤就成了XOOPS樣板檔。 2. 「主佈景」樣板與「區塊放置區」樣板都會被smarty樣板引擎編譯過,並放置於「/xoops\_data/caches/smarty\_compile」中,以加快讀取速度(2.2版以前是放置於/templates\_c中),欲修改之,僅能透過FTP上傳新佈景樣板檔。 3. 「模組」樣板及「區塊」樣板由模組開發者提供,安裝模組時,會將樣板存入資料庫,使用者日後可以透過瀏覽器界面(後台的「樣板管理」)來修改樣板內容。 ### 四、製作XOOPS的佈景流程: 1. 請到「後台→一般設定→基本參數設定 」將「從/themes/yourtheme/templates更新模組的樣板文件 」選「是」,如此修改佈景才會有作用。 2. 先設計好一個完整的網頁→把網頁變成XOOPS樣板→套用後進行CSS微調。 3. 開始修改各區塊或模組外觀,以配合佈景風格。
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
144
人線上 (
97
人在瀏覽
線上書籍
)
會員: 0
訪客: 144
更多…