[原创]用DW制作模板全揭秘

一.模板篇

1。初期准备工作



1-1.
首先安装无刀提供的DW插件（插件请到
http://bbs.aspoo.com/dispbbs.asp?boardID=8&ID=4118&page=1
下载），并且在网站根目录中新建立一个HTML文件，名字随便取个，比如a.html
1-2：
打开DW，新建立一个站点，目录就选择自己要做模板的这个目录。
1-3：
用dw打开刚才刚才这个a.html
写入代码：

名字随便取

其实这部分就是模块(main_style)界面风格Cl.mainhtml(1)和Cl.mainhtml(2)里面的，只是稍微精简一下而已。
注意下：以后在编辑各个板块的时候这个地方不能删除，也不要复制到后台模板中去。
1-4：
在/Skins/Css/中新建立一个CSS文件，取名字为001.css
输入：
a{TEXT-DECORATION: none;} /* 链接无下划线,有为underline */
a:hover{TEXT-DECORATION: underline;} /* 鼠标悬停时的链接 */
a:link {color: #465154;} /* 未访问的链接 */
a:visited {color: #465154;TEXT-DECORATION:none} /* 已访问的链接 */
a:active {color: #BA3B04} /* 点击激活的链接 */
html{ background: ##3366FF; }
body{ padding: 0 auto;margin: 0 auto;text-align:center;width:776px;background: #618FB6;} /*body全局设定*/
table{padding: 0;margin: 0;border-collapse:collapse;text-align:center;width:100%;word-break:break-all;}
body,td,th /*默认字体,大小及行高*/
{text-align: left; vertical-align: top;font-family: "宋体",Verdana, Arial, Helvetica, sans-serif;font-size: 12px; line-}
img{border:0;}
.headchannel /* 头部频道channle菜单的表格背景 HeadChannel */
{background: url({%picurl%}HeadChannel.gif);border: none;}
.headlogobanner /* logo & banner 表格背景 HeadLogoBanner*/
{background: #FFFFFF;border: 1px solid #F1F1F1;}
.headpath /*您的位置栏目背景HeadPath */
{background: url({%picurl%}PathBG.jpg);border: 1px solid #F1F1F1;}
.headclassmenu{background: #E2E2E2;border: 1px dotted #D4D4D4;}
.sidetitle /* 两侧小边标题栏,如用户登录、频道统计、网站调查、本站公告等sidebar*/
{filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#D6E8F5, startcolorstr=#75A7D0)
border: 1px solid #81ACD8; font-weight: bold; font-size: 14px;}
.sidecontent /* 两侧标题栏下方的具体内容sidecontent*/
{background: #F2F8FB;border-right: 1px double #E5E5E5; border-bottom: 1px double #E5E5E5;border-left: 1px dotted #E5E5E5;}
.maintitle/* 主内容标题栏， 如最近更新mainbar */
{filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#D6E8F5, startcolorstr=#75A7D0)
border: 1px solid #81ACD8; font-weight: bold; font-size: 14px;}
.maincontent /* 主内容标题栏下方具体内容，如最近更新的文章列表maincontent */
{background: #FFFFFF;border-right: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5;border-left: 1px solid #E5E5E5;}
.subtitle /* 栏目标题，如循环栏目，论坛新贴，最新留言等subbar */
{filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#FEFEFE, startcolorstr=#E5E5E5)
border: 1px solid #81ACD8;
font-weight: bold;

}
.subcontent /*栏目内容列表subcontent */
{background: #FFFFFF;border-right: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5;border-left: 1px solid #E5E5E5;}
.search /* 搜索表单，如搜索文章，软件，图片*/
{
border: 1px dotted #B6B6B6;
background: #F9FCFD;
}
.linktitle /* 友情链接标题栏*/
{filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#D6E8F5, startcolorstr=#75A7D0)
border: 1px solid #81ACD8; font-weight: bold; font-size: 14px;}
.linkcontent /* 友情链接内容栏,如图片链接和文字链接*/
{background: #FFFFFF;border-right: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5;border-left: 1px solid #E5E5E5;}
.footchannel /* 底部“与我同在”“友情链接”栏目条FootChannel*/
{background: url({%picurl%}PathBG.jpg);border-bottom: 2px double #7C7C7C;}
.footsiteinfo /* 底部站长想要公布的一些信息，如版权所有、在线情况、使用风格等FootSiteinfo*/
{filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#E5E5E5, startcolorstr=#ffffff)
background: #06C;border:8px 1px 1px 1px;border-color:#D8D8D8;border-style:solid;}
注：此CSS文件中已经注解的很清楚了，可自行修改或增删，但是在表格调用的时候自己得调用好。
把里面的{%picurl%} 替换为 /skins/你的风格图片包目录名/

2.从网页头部和尾部先开刀
2-1.
.把后台模板--模板主模块(Main_Style) --Cl.mainhtml(4)中的内容复制到a.html的

下面进行编辑
后台模板--模板主模块(Main_Style) --Cl.mainhtml(4)中的内容如下：
{%showchannel%}  {%showdate%}
{%showlogo(170,65)%}
{%showbanner(520,65)%}
{%showpath%}
设为首页|加入收藏|{%cssname%}
 
{%showannounce(2,5)%}
把里面的{%webdir%}替换为/
好了，现在你可以编辑了头部了，编辑只后，把/改回为{%webdir%}并复制回到 后台模板--模板主模块(Main_Style) --Cl.mainhtml(4)中，点提交，更新缓存，如果有生成html的需要再生成下（建议在制作模板的时候不要选择生成，方便与修改。）
2-2.
按照2-1的方法同样把模板主模块(Main_Style) --Cl.mainhtml(15)中的内容
复制到a.html中去编辑。
好了，现在我们手上已经有这样一个html文件了：

名字随便取

...........................
咱们先把他当做一个不动产吧，现在可以做其他的页面了。
3.各个页面的设计：
3-1. 首页的修改
将模板分模块(module_index)---(module_index)界面风格里的代码复制到a.html“不动产”中...........................
之间进行编辑，当然，你也可以自己重新做表格什么的，相信有DW插件想插入什么标签就很容易了，编辑的时候最好是用CSS去控制表格的大小、颜色、图片背景啊什么的。总之要注意下，里面如果编辑后有类似/skins/xxxx/xxxxx.jpg的在复制到后台模板前都换回{%picurl%}xxxxx.jpg，网页宽度换回为{%width%}，你的网站名换为{%webname%},网站地址换为{%weburl%}.....然后在复制回去。
3-2
用同样方法修改后台模板的其他分模块、子模块吧.......
做模板其实就这样简单，大家多试验，一定会成功的。

二.CSS的修改

css的修改就比较简单了，写发各自有各自的习惯，这里就不多说了。
只要注意下修改后把原来的类似/skins/xxxx/xxxxx.jpg的在复制到后台模板前都换回{%picurl%}xxxxx.jpg，网页宽度换回为{%width%}，你的网站名换为{%webname%},网站地址换为{%weburl%}.....就可以了。