今天給大家講講 如何把已經切割好的 html 頁面或者模仿的頁面轉換成可供 DIY 的頁面

請跟隨教程一步一步操作   如有疑問請提出

以下以家居頻道為例為大家講解

我們常見的切割好的 html 頁面包含這麼幾個元素

如下圖   圖片資料夾、 CSS 資料夾、其它檔案或圖片資料夾、一個 html 頁面  

1.gif

2010-9-26 10:14 上傳

下載附件 (2.65 KB)

大家看下頁面效果

2.png

2010-9-26 10:32 上傳

下載附件 (1.61 MB)

接下來，我們就把這個頁面轉換成 DIY 頁面  

首頁我們用編輯工具開啟 index.html 頁面

我們為了能夠使用統一的頭部樣式，這裡面我們引入系統內建的頭部檔案 （header） 把頁面中的關於頭部的資訊刪除

如下圖所示

3.png

2010-9-26 10:50 上傳

下載附件 (79.28 KB)

把系統頭部 （header） 引入進來

引用程式碼

  1. <!--{subtemplate common/header}-->

如下圖所示

4.png

2010-9-26 10:53 上傳

下載附件 (14.82 KB)

給新的模板起個名字

如下程式碼

  1. <!--[name] 家居頻道模板 [/name]-->

如下圖所示

5.png

2010-9-26 11:22 上傳

下載附件 (15.25 KB)

接下來增加可供 DIY 的 CSS 樣式表

如下程式碼

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

如下圖所示

6.png

2010-9-26 11:27 上傳

下載附件 (16.22 KB)

頭部

接下來更換底部程式碼  

找到底部程式碼刪除掉 換成系統內建的通用底部程式碼   

如下圖所示

7.png

2010-9-26 11:44 上傳

下載附件 (22.92 KB)

增加如下程式碼

  1. <!--{subtemplate common/footer}-->

如下圖所示

9.png