你的位置:HBcms宏博内容管理系统 建站经验 正文
内容搜索
热门内容
  1. 网站logo在线设计,免..
  2. 域名解析文件hosts文件..
  3. 教你如何做网线接头:..
  4. qq怎么截图?如何在qq..
  5. 雅虎yahoo邮箱smtp和p..
  6. 新注册126邮箱或163邮..
  7. 幻灯片式的网页图片滚..
  8. 做网站怎么赚钱?什么..
  9. com域名和cn域名net域..
  10. Google支付系统(Googl..
推荐内容
  1. 做一个商业网站要多少..
  2. 国外服务器租用(国外..
  3. 深圳做网站的公司!=深..
  4. 网络原创投稿,转载精..
  5. 美国服务器租赁Window..
  6. 699元的美国服务器出租..
  7. 添加友情链接,速度别..
  8. “原始人”卷款潜逃事..
  9. 设置Godaddy支持zend ..
  10. 网页设计中常用的CSS命..
用DW制作模板全揭秘
  • 原作者:upwinder 添加时间:2007-10-19 发表时间:2007-10-19 人气:3390 来源:创力CMS开源社区
  • 一.模板篇

     

    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

    写入代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--HTTP头 by-www.aspoo.com-->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>名字随便取</title>
    <meta name="generator" content="Clwang">
    <meta name=keywords content="创力网,创力,创力论坛,创力文章系统,创力网站管理系统">
    <meta name="description" content="创力网站管理系统官方站。提供网页制作、网站建设、程序开发、插件开发、各类数据库转换等服务!">
    <meta name="MSSmartTagsPreventParsing" content="TRUE">
    <meta http-equiv="MSThemeCompatible" content="Yes">
    <link href="/Skins/Css/001.Css" rel="stylesheet" type="text/css">
    <script language = "JavaScript" src="/inc/js/stm31.js"></script>
    <script language = "JavaScript" src="/inc/js/Font.js"></script>
    <SCRIPT language="javaScript" src="/inc/js/cssmenu.js" type=text/javascript></SCRIPT>
    </head>
    <body style="width:780">

    其实这部分就是模块(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-height:1.5;}
    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);height: 28px;border: 1px solid #F1F1F1;}
    .headclassmenu{background: #E2E2E2;height: 28px;border: 1px dotted #D4D4D4;}
    .sidetitle /* 两侧小边标题栏,如用户登录、频道统计、网站调查、本站公告等sidebar*/
    {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, endcolorstr=#D6E8F5, startcolorstr=#75A7D0)
    border: 1px solid #81ACD8; font-weight: bold; height: 28px;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; height: 28px;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;
    height: 26px;
    }

    .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; height: 28px;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);height: 28px;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的

    <body style="width:780">

    下面进行编辑

    后台模板--模板主模块(Main_Style) --Cl.mainhtml(4)中的内容如下:

    <!--Top头部 by-www.aspoo.com-->
    <table class="headchannel">
    <tr>
    <td><div align="right"><img src="{%webdir%}images/icons/home.gif" align="absmiddle"> {%showchannel%} <img border="0" src="{%webdir%}images/guestbook/posttime.gif" align="absmiddle"> {%showdate%}</div></td>
    </tr>
    </table>
    <table>
    <tr>
    <td width="180" class="headlogobanner"><!--网站LOGO开始 -->
    {%showlogo(170,65)%}</td>
    <td rowspan="2" class="headlogobanner"><!--banner开始 -->
    {%showbanner(520,65)%}</td>
    </tr>
    </table>
    <table class="headpath">
    <tr>
    <td><!--你的位置 -->
    {%showpath%}</td>
    <td width="200"><div align="center"><a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('{%weburl%}')">设为首页</a>|<a href="javascript:window.external.addFavorite('{%weburl%}','{%webname%}')">加入收藏</a>|{%cssname%}</div></td>
    </tr>
    </table>
    <table class="headpath">
    <tr>
    <td width="50"><div align="center"><img src="{%picurl%}announce.gif" width="20" height="16"></div></td>
    <td>&nbsp;
    <MARQUEE scrollAmount=1 scrollDelay=4 width=96% align="left" onmouseover="this.stop()" onmouseout="this.start()">
    <!--公告开始 -->
    {%showannounce(2,5)%}
    </MARQUEE></td>
    </tr>
    </table>

    把里面的{%webdir%}替换为/

    后台模板--模板主模块(Main_Style) --Cl.mainhtml(4)中,点提交,更新缓存,如果有生成html的需要再生成下(建议在制作模板的时候不要选择生成,方便与修改。)

     


    好了,现在你可以编辑了头部了,编辑只后,把/改回为{%webdir%}并复制回到

    2-2.

    按照2-1的方法同样把模板主模块(Main_Style) --Cl.mainhtml(15)中的内容

    复制到a.html中去编辑。

    好了,现在我们手上已经有这样一个html文件了:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--HTTP头 by-www.aspoo.com-->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>名字随便取</title>
    <meta name="generator" content="Clwang">
    <meta name=keywords content="创力网,创力,创力论坛,创力文章系统,创力网站管理系统">
    <meta name="description" content="创力网站管理系统官方站。提供网页制作、网站建设、程序开发、插件开发、各类数据库转换等服务!">
    <meta name="MSSmartTagsPreventParsing" content="TRUE">
    <meta http-equiv="MSThemeCompatible" content="Yes">
    <link href="/Skins/Css/001.Css" rel="stylesheet" type="text/css">
    <script language = "JavaScript" src="/inc/js/stm31.js"></script>
    <script language = "JavaScript" src="/inc/js/Font.js"></script>
    <SCRIPT language="javaScript" src="/inc/js/cssmenu.js" type=text/javascript></SCRIPT>
    </head>
    <body style="width:780">

    <!--Top头部代码 by-www.aspoo.com.......................

    <!--Bottom底部代码 by-www.aspoo.com-->...........................

    咱们先把他当做一个不动产吧,现在可以做其他的页面了。

    3.各个页面的设计:

    3-1. 首页的修改

    将模板分模块(module_index)---(module_index)界面风格里的代码复制到a.html“不动产”中<!--Top头部代码 by-www.aspoo.com....................... 和<!--Bottom底部代码 by-www.aspoo.com-->...........................

    之间进行编辑,当然,你也可以自己重新做表格什么的,相信有DW插件想插入什么标签就很容易了,编辑的时候最好是用CSS去控制表格的大小、颜色、图片背景啊什么的。总之要注意下,里面如果编辑后有类似/skins/xxxx/xxxxx.jpg的在复制到后台模板前都换回{%picurl%}xxxxx.jpg,网页宽度换回为{%width%},你的网站名换为{%webname%},网站地址换为{%weburl%}.....然后在复制回去。

    3-2

    用同样方法修改后台模板的其他分模块、子模块吧.......

    做模板其实就这样简单,大家多试验,一定会成功的。

     

    css的修改就比较简单了,写发各自有各自的习惯,这里就不多说了。

    只要注意下修改后把原来的类似/skins/xxxx/xxxxx.jpg的在复制到后台模板前都换回{%picurl%}xxxxx.jpg,网页宽度换回为{%width%},你的网站名换为{%webname%},网站地址换为{%weburl%}.....就可以了。


    二.CSS的修改
  • 点这里复制本页地址发送给您QQ/MSN上的好友
  • 相关文章
  • 相关评论
  • 本文章所属分类:首页 建站经验