Discuz模板制作教程

近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。

在做模板之前大家最好具备一些基本的网页制作方面的知识。那么咱们先来看看如何制作一套简单的模板流程。

 

1、在Photoshop中制作风格页面并切图保存；

2、制作html文档，css调整；

在开始前，先了介绍一下discuz!的几个模板文件：
1、header.htm--页面头部
2、discus.htm--论坛首页

3、index_header.htm--头部发帖按钮，和公告内容页。
4、footer.htm-- 页面底部
5、viewthread.htm--查看帖子内容

6、css_common.htm--公共样式css样式页面

7、css_script.htm--其他常用css样式页面 

 

首先我们要制作的这套模板叫test，那么我就在templates目录下建立一个test目录。     在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存到这个文件夹中。 templates/test 文件夹用于存放这套模板的htm文件，首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。然后分别打开着三个文件，可能这里你需要一些常用的htm语言常识，和一些基本的css语法。如果你不会的话可以去查阅一些资料。我们大多时候我们不必完全去重新做。默认模板的head等头部信息我们还是非常有必要要保留。   将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下（这是后台安装界面显示的缩略图）。 接 下来的工作要在论坛后台设置中来完成 （1） 进入论坛点击 “系统设置 ——> 界面——> 模板管理”， 在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如 （3）       然后切换到“系统设置 ——> 界面——>风格管理”，您就可以 在界面风格中看到您所定义的新的风格方案。点击安装就可以了！如下图： （4）   然后点击 [编辑] 后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。 具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注： http://www.discuz.net/viewthread.php?tid=1496344&amp;from=recommend_f 填写好后，点 击“提交”，更新一下缓存，就ok了。在这里我只是简略的介绍一下安装成品模板的方法。 在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm ,它的代码是： $extrahead {subtemplate css_script} 根据css的特点，在css_appendhtm里的样式将覆盖css_commen.htm中的文件的。注意只是覆盖原有的属性。没有修改的属性将依旧调用css_commen.htm的样式。这样我们各以节省很多的代码。 同样对于css_script.htm同样如css_commen.htm一样。你只需要在新建一个文件css_script_append.htm文件。将所需修改的样式拷贝到css_script_append.htm，但需要注意的是一定按dz的规范，将css样式写入你所修改的代码所在的标签中。例如： [CURSCRIPT = index] [/CURSCRIPT] 下面我将逐步介绍如何简单的调整htm模板文件和css，文件以帮助大家更好的了解如何更好的来了解模板文件。 一、首先我们将default默认模板文件夹下的： 1、header.htm--页面头部 2、discus.htm--论坛首页 4、footer.htm-- 页面底部 同时新建一个css_append.htm文件。用来填写你需要记录的css样式。 一般我们通常需要移动的元素和样式主要有以下集中元素。 网站头部：header.htm 1 头部登录注册菜单菜单，主要对应的htm代码标签为<div id="umenu"> </div>   主要对应的css样式为css_commen.htm中的： #menu { position: absolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; }        #menu li { display: inline; float: left; margin-left: 5px; {MENUBGCODE}; }               #menu a { float: left; padding: 0 14px; height: 25px; border: solid {MENUBORDER}; border-width: 1px 1px 0; background: transparent none; line-height: 25px; color: {MENUTEXT}; text-decoration: none; overflow: hidden; }                      #menu a.dropmenu { padding-right: 20px; background-image: url({IMGDIR}/arrow_down.gif); background-repeat: no-repeat; background-position: 95% 50%; }               #menu a:hover { border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; }               #menu li.current a { height: 26px; border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; } 2.网站logo.gif我们一般通过后台来调节他。主要对应的htm代码标签为： <h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2> 主要对应的样式为：#header .wrap { position: relative; padding: 24px 0 22px; }        #header h2 { float: left; } 当然有些css并不是直接加大元素上的有时候他们需要间接，复合来控制。至于效果你要自己修改看看。 3.头部的导航栏对顶主要对应的htm代码标签为： <div class="menu"></div> 主要对应的样式为css_commen.htm中的: #menu .menu1 { background:url({STYLEIMGDIR}/menu_bg.gif) no-repeat scroll 0 0 transparent;height:35px;margin:0;padding-left:25px;} #menu .menu1 ul { float:left; width:700px; } #menu a { font-size:14px; border:medium none; color:#7FA1C4; font-size:14px; line-height:27px;} #menu a:hover { background-color: transparent; } #menu li.current { background:url({STYLEIMGDIR}/menu_cur.gif) no-repeat scroll 0 0 transparent;} #menu li.current a { *height: 35px; border:0 solid {HEADERBORDERCOLOR}; background: {MENUHOVER} url({STYLEIMGDIR}/menu_cur.gif) repeat-x right -27px; overflow: hidden; height:35px; } #menu li { display:inline; float:left; margin-left:5px; height:27px; margin:4px 0 0; list-style:none outside none;} 一般都不文件大体上包含着三个元素至于一些细节问题你就要自己亲自动手试一试了。   二、下面是discuz.htm文件需要修改的地方。     主要对应得htm代码为discuz..htm中的： <div id="nav"></div> 主要对应的样式为css_commen.htm中的： #nav { margin: -8px auto 0; background: url({IMGDIR}/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; }        #nav, #nav a { color: {MENUHOVERTEXT}; }   通常在大家修改边内容区的时候需要修改：板块下面的背景和版块前面的默认图标。这里主要是通过以下css来控制实现的： .list { border-top: 3px solid {COMMONBORDER}; }        .content .list h3 { padding-left: 6px; color: {MIDTEXT}; line-height: 35px; }        .list td, .list th { height: 50px; padding: 6px 0; border-top: 1px dashed {COMMONBORDER}; color: {MIDTEXT}; }               .list th { background: url({IMGDIR}/forum.gif) 5px 10px no-repeat; padding-left: 45px !important; }               .narrowlist th { vertical-align: top; }               .list th.new { background-image: url({IMGDIR}/forum_new.gif); }                      .list th h2 em { font-weight: 400; }                             .list th h2 em strong { color: {NOTICETEXT} } 注意这里的变量{IMGDIR}这种php变量在。后台-》界面-》风格管理-》编辑-》高级模式 中都有。他会到你置顶的目录下去搜寻图片。如图：   内容列表： 主要对应得htm代码为： <div id="nav"></div> 主要对应的样式为css_commen.htm中的：   友情链接： 主要对应的htm代码为discuz..htm中的 <!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->        <div class="mainbox list">                             <h3>                      <span class="headactions"><img id="forumlinks_img" src="{STYLEIMGDIR}/$collapseimg[forumlinks].gif" alt="" οnclick="toggle_collapse('forumlinks');" /></span>                      {lang board_links}</h3>               <div id="forumlinks" style="$collapse[forumlinks]">               <!--{if $_DCACHE['forumlinks'][0]}-->                      <div class="forumlinks">                             <ul class="s_clear">$_DCACHE['forumlinks'][0]</ul>                      </div>               <!--{/if}-->               <!--{if $_DCACHE['forumlinks'][1]}-->                      <div class="forumimglink">                             $_DCACHE['forumlinks'][1]                      </div>               <!--{/if}-->               <!--{if $_DCACHE['forumlinks'][2]}-->                      <div class="forumtxtlink">                             <ul class="s_clear">                             $_DCACHE['forumlinks'][2]                             </ul>                      </div>               <!--{/if}-->               </div>        </div> <!--{/if}--> 主要对应的样式为css_script.htm中的： .forumlinks, .forumimglink, .forumtxtlink { padding: 6px; border-top: 1px solid {COMMONBORDER}; }               .forumlinks ul li { float: left; width: 49%; height: 50px; line-height: 1.4em; }               .forumimglink a { margin-right: 8px; }               .forumimglink img { margin: 2px 0; }                      .forumlogo { float: left; padding-top: 2px; width: 100px; }                      .forumcontent { padding-right: 18px; height: 50px; }                      .forumcontent p { overflow: hidden; height: 17px; color: {MIDTEXT}; }               .forumtxtlink li { float: left; margin-right: 5px; width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }     在线会员： 对应的dscuz..htm中的标签为： <div class="mainbox list" id="online"></div> #online h3 { font-weight: 400; } #online h3 a, #online h3 em, #online h3 strong { font-weight: 700; }   三、下面是index_header.htm文件需要修改的地方。 主要对应的htm标签风别为：头部——》<div class="pages_btns s_clear"></div> 主要涉及到的需要修改的css为css_commen.htm中的： .pages_btns { padding: 5px 0 1em; line-height: 30px; } 和css.script.htm中的： .postbtn, .replybtn { width: 67px; height: 30px; background: url({IMGDIR}/newtopic.gif) no-repeat 0 0; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; }               .replybtn { background-image: url({IMGDIR}/reply.gif); }               .postbtn a, .replybtn a { display: block; padding-left: 5px; color: #FFF; letter-spacing: 5px; }               .postbtn a:hover, .replybtn a:hover { text-decoration: none; }   底部公告内容- -》<div id="ann"></div> 主要涉及到的需要修改的css为css.script.htm中的：        #ann { margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid {COMMONBORDER}; border-width: 1px 0; background: {COMMONBG}; }               #ann dl { overflow: hidden; }               #ann dt { float: left; width: 5em; background: url({IMGDIR}/ann_icon.gif) no-repeat 0 50%; text-indent: 2em; font-weight: 700; }               #ann dd { margin-left: 30px; }                      #ann li {  padding-left: 10px; white-space: nowrap; }                             #ann em { margin-left: 5px; color: {MIDTEXT}; font-size: 0.83em; }               #annbody { height: 30px; overflow: hidden; padding-right: 16px; } 三、下面是index_navbar.htm文件需要修改的地方。   主要涉及到的需要修改的css为css_commen.htm中的： .itemtitle { clear: both; overflow: hidden; margin-bottom: 10px; line-height: 23px; } 四、首页边栏对应的html代码为： <div id="sidebar" class="side" style="$collapse[sidebar]"></div> 五、首页底部对应的html代码为： <div id="footer"></div> 主要涉及到的需要修改的css为css_commen.htm中的： #footer { padding: 1em 0; } #rightinfo { float: left; } #footlink { float: right; text-align: right; } #footer, #footer a { color: {FOOTERTEXT}; }