Discuz X 門戶 diy 風格模版製作教程

一、首先你要會 PS, 設計出你的網頁, 當然其他軟體也行，或者模仿一下別人的網站也可以. 然後切圖，排版, 成為靜態 HTML 檔案, 測試好相容性.

這裡不詳細說了. 要是不懂 html 還是需要去學一下再來看.

做好準備以後下面開始往 DZ 裡面套！

二、（說明下這裡只說的是門戶頁, 因為 BBS 頁的風格我還沒研究，所以先用預設的 BBS 風格）
1 、為了不影響預設風格, 首先我們複製一份預設風格見下圖：

2 、到 template 目下建立一個資料夾。名字自取，我這裡就叫 test1.

3 、到模板管理裡面新增一個模板。名字自取, 路徑指定到剛才新建的資料夾. 如下圖

4 、設定好以後編輯剛才複製出來的風格, 如下圖

5 、設定好以後把這個風格設定為預設。
=========================================================================
三、下面開始正式門戶製作。
1 、在剛才 template 建立的 test1 資料夾下面建立 2 個資料夾分別命名為 common 和 portal 。
2 、到 template/default/common 下面複製 common.css head.htm 和 footer.html 貼上到 template/test1/common 。
這裡我們先不製作頭部和底部先用預設的頭和底. 3 、然後把你設計的靜態頁面命名為 index.htm 複製到 emplate/test1/portal 下.
4 、在論壇所在根目錄下建立一個名為 test1 的資料夾，最好和你的新增模板的資料夾名字一樣或者相似。只要自己方便識別就行. 建立好之後把你靜態頁面的 css 檔案圖片檔案 js 檔案等全部複製到這個資料夾裡面。
四、以上完成之後重新整理下你的門戶發現是沒有載入樣式的. 這表示你前面的工作成功, 下面開始改程式碼！
1 、首先把你的靜態頁面的<body> 以上和</body> 一下全部刪掉, 包括 body 標籤.
2 、把這句程式碼

<style id="diy_style" type="text/css"></style>

複製到檔案最頂部，下面這段複製到最底部

3 、把你的 CSS 檔案呼叫進來，放到
<style id="diy_style" type="text/css"></style> 下面就可以了，下面是我的，改好路徑就好了. 這裡應該把 CSS js 全部呼叫進來.

<link href="test1/images/css.css" rel="stylesheet" type="text/css" />

4 、儲存好後重新整理下門戶發現出了圖片基本框架都出來了。圖片錯誤是因為路徑不對。把路徑全部改過來。
在原來路徑前面加上剛才在根目錄下建立的資料夾的名字就好了，全部替換就可以了。如圖

==========================================================================
五、到此你的靜態網頁已經轉換到 DZ 下了. 下面開始新增框架和模組.
1 、首先把不帶 CSS 的標籤替換成。<div id="diy1"
></div>
1-1 、這個 具體什麼意思我也不知道，反正規則是
diy1
要和他所包含的的 DIV 標籤的 ID 保持一致, 且具有唯一性. 保持不變。比如下圖。飄紅的部分是替換的. 如圖第二部分顯示所有的都是 diy1 這樣就錯了. 要保持唯一性. 不能重複！如圖二.