版型製作.docVIP

版型製作 一.建立版型資料夾 3 1.版型架構 3 2.版型資料夾位置 4 3.必備的版型檔案theme.html 5 二. Dreamweaver　MX製作theme.html 5 1.建立theme.html 5 2.建立6列4欄表格 7 3.編輯儲存格id 9 4.切換程式碼輯模式 10 三. 完成後台佈景樣板檔 12 1.開啟『佈景置換語法』檔 12 2.取代主內容 13 3.取代『左邊區塊』 15 4.更改圖形路徑為XOOPS語法 17 5.複製佈景基本目錄 19 6.取代『前端佈景檔頭』 20 7.取代『前端佈景檔尾』 22 8.Xoops套用自己的佈景 24 四.安裝FireFox瀏覽器 25 1.安裝FireFox瀏覽器軟體 25 2.套件安裝 26 3.FireFox瀏覽網頁設計功能 28 4.檢視id_name功能 29 五．調整thmem.html網頁 30 1.啟動xoops首頁 30 2.修改學校logo圖形超連結 31 3.修改內容資料顯示位置 33 六．修改區塊樣式檔 34 1.使用Firefox檢視區塊名稱 34 2.Firefox預覽編修測試 35 3.到pspad中進行修改style.css樣式檔 37 4.右邊區塊自動判斷顯示與否 38 五.修改後台管理介面 39 1.建立後台themeadmin.html 39 2.?修改檔頭 40 3.修改檔尾 41 4.修改導覽 43 六．區塊版型修改 45 1.區塊版型所在位置 45 2 中間區塊樣版 46 一.建立版型資料夾 1.版型架構 【主內容】為必須選項,其餘可自設計調整 a. 請在themes底下建立一個my_theme目錄。 b. 利用您熟悉的網頁編輯工具，編輯一個theme.html檔，並 存於my_theme中。theme.html中可包含以下元件： 1) 「左邊區塊」：放在版面左邊的區塊其顯示之位置。 2) 「中間區塊」：放在版面中間的區塊其顯示之位置。 3) 「中間左邊區塊」：放在版面中間左邊的區塊其顯示位置。 4) 「中間右邊區塊」：放在版面中間右邊的區塊其顯示位置。 5) 「右邊區塊」：放在版面右邊的區塊其顯示之位置。 6) 「主要內容區」：秀出某模組的主畫面。 7) 「頁尾區」：此區會出現XOOPS2的版權宣告。 8) 「導覽列」：非必須。 9) 「廣告區」：非必須。 c. 以上所有元件並沒有規定一定非得放在哪裡不可並沒有規定一定非得放在哪裡不可。 d. 區塊若是放在儲存格中的話，建議儲存格別設高度，此外， 記得設定「垂直對齊垂直對齊」要對齊頂端頂端。 2.版型資料夾位置 自建的版型資料夾必須放在C:\AppServ\www\themes中, 請自行建立目錄名稱【my_theme】 3.必備的版型檔案theme.html 在目錄名稱【my_theme】必須有『theme.html』檔案才可以運作,這個檔案請使用網頁編輯工具設計 注意事項其副檔名必須是【.html】才能偵測到,而正確執行。 二. Dreamweaver　MX製作theme.html 1.建立theme.html 網頁必須先儲存後,才能開始編輯,完成後再進行儲存的動作 2.建立6列4欄表格 合併後請輸入儲存格的名稱顯示 3.編輯儲存格id 讓樣板檔套用讓樣板檔套用 CSS CSS 1. 在theme.html中各個元件的儲存格td設定其id值，以 便未來套用CSS設定： 1) 「左邊區塊」儲存格： id=leftcolumn 2) 「中間區塊」儲存格： id=centerCcolumn 3) 「中間左邊區塊」儲存格： id=centerLcolumn 4) 「中間右邊區塊」儲存格： id=centerRcolumn 5) 「右邊區塊」儲存格： id=rightcolumn 6) 「主要內容區」儲存格： id=content 7) 「頁尾區」儲存格： id=footerbar 8) 「導覽列」儲存格： id=headerbar 9) 「廣告區」儲存格： id=headerbanner td colspan=2 語法改為　td colspan=2 id=headerbanner 4.切換程式碼輯模式 完成後的區塊語法id宣告動作 三. 完成後台佈景樣板檔 1.開啟『佈景置換語法』檔 紅色區塊是要取代theme.html中的區塊內容 2.取代主內容 說明：相同方法請取代原先的區塊提示文字 3.取代『左邊區塊』 4.更改圖形路徑為XOOPS語法 5.複製佈景基本目錄 拷貝將『blocks』【css】【js】【language】【navigation】 貼到C:\AppServ\www\themes\my_theme資料夾中