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 這樣就錯了. 要保持唯一性. 不能重複！如圖二.