经典教程：discuz x2 风格模板完整教程

没有XHTML基础，不知道什么是CSS？没关系~~~
从今天开始，我会给各位从0开始讲解如果动手做一个完整的模板。

我相信只要你有兴趣，再抽出一点时间，还得花费一点记忆力（有些东西必须背下来，临时翻书不是好习惯），应付一些基本的样式修改和模板仿制应该还是没问题的。

本教程会很基础，请各位高手轻轻地飘过~~~~~
首先说一说前期要准备的工具。

工具的选择：
1，当然是FTP啦，个人推荐cuteftp，速度很快……
2，修改工具：我个人推荐notepad2，原因是体积小速度快能高亮不要钱，而且味道还很好吃呢。

使用是请把这个工具关联到FTP的默认修改工具里面。

3，DOM树查看工具的选择：这个是用来快速定位CSS的选择器的。

现在一般的浏览器都能支持DOM模型了，比如opera，IE7起，chrome，FF……（什么？360？什么？遨游？什么……？疼讯？赶紧扔掉！！！！！），一般这四个浏览器是必须的，因为要比较调试出来的CSS 在各个浏览器是否兼容。

最后还要考虑IE6的情况，（这个IE6，虽然被千夫所指，但是仍然有很多人在使用，你能怎么办？）
关于IE6，请到微软官网上下载一个专用开发插件。

（以上工具介绍纯属自愿，如果你有自己习惯的工具，请飘过~~）
关于风格系别的选择：
现在国内主流网站，我觉得大多数追着两种潮流，第一种是欧美的那种绚丽的，圆角的，立体阴影的特点的，详见国内各大微薄。

这种网站风格有许许多多的导航网站。

因为图片很多，结构复杂。

模仿起来也比较费劲。

但是只要把他们的结构弄清楚后，也是简单的。

还有一种就是日系（我个人巨爱啊……）
日系的网站简约大方，一眼看过去重点突出（无论是上面的两个基本点还是下面的一个中心
）。

但是其实日系的网站虽然简单，但还真没有几个人做的好看的，因为，你不知道怎么配色啊……
一般看来，美系的字体都稍大，而日系字体偏小。

千万不要把这两种风格综合起来，因为那样剧难看（其实不是剧难看，而是难看致死，死到没JJ，比如某网站风格……）
好吧，先说明，我更新的时间不会太快，大概好几天更新一个。

由于水平有限，如果发现有错误，请迅速指出来，免得误人。

在写这个教程之前，看了区域里一些前辈写的教程，大家写的好感人啊，看得我
眼泪都快流出来了~~
但是唯一觉得的就是，大家的教程似乎都比较散，针对性很强，没有一个比较系统的完整的教程。

秉着授人以鱼不如授人以渔的中华美德，特意准备了这个比较系统的教程，分别从XHTML+CSS和discuz模板制作原理的这些部分入手，让大家看后能够真正实际地制作或者仿制出一个模板。

前面三章内容会分别讲述一些基础的DOM调试，CSS+XHTML基础，discuz编译原理，数据调用，图片制作和模板制作过程等基础知识。

后面则均为手把手地实际操作如何仿制其他论坛风格，仿制任何网站风格的方法，自行创造新模板及错误修正和优化。

好了，废话少说，请各位同学系好安全带，let's go！！！！
一，dom模型简介
之所以在这里首先介绍dom模型,主要是两个原因,首先是dom模型把整个文档当做一个把各种元素通过节点联系起来的节点树,这样分类后可以很清晰地看到整个页面的结构和相互联系.其次是大多调试工具都可以利用dom来动态的操作元素,可以即时地看到修改后的结果.
基于以上原因,这个内容无论是做设计还是只是简单修改代码,都必须掌握.
关于dom的又臭又长的定义和历史,我想没有必要再让大家来研究了,有兴趣可以去网上自己找资料.
我们只要了解这几点,首先DOM(Document Object Model)，文档对象模型，是面向HTML和XML的应用程序接口,与语言浏览器等等没有关系，但是可以利用其访问并修改页面的元素.
然后就是DOM将文档规划成由多个相互连接的节点级构成的文档，文档中的每个部分都可以看作是一个节点的衍生物。

二，dom tree在各个浏览器的查看和使用
1，在chrome浏览器查看页面结构。

chrome是一款一旦使用了就放不下的优秀无比的浏览器，本公子最开始是打算看看这个谷歌到底有个什么好的，结果后来才发现这个的博大精深，结果彻底深陷，把所有的东西都转投到谷歌门下，包括邮箱浏览器搜索引擎到后来的手机系统。

在帮助设计人员调试网页的方面，他们做了一个小小的附加功能，包括dom tree 的查看，操作，式样调试，网页元素查看，速度比对，大小比对，JS调试……这个小小的附加，一举超越其他所有的专业工具。

让人不得不对他们膜拜到五体投地。

（FF，乃们都可以去屎了）
在这里我只简单说说在chrome下的dom树的查看。

在自己需要查看的位置，把鼠标移到这个上面，比如我要查看首页的按钮位置的
网页代码的位置，和其相关CSS式样。

1》，把鼠标移到按钮上，右键单击，在菜单栏里选择最后一个审查元素，单击，就会出现一个弹出调试窗口（也有可能是在页面下方出现的，如果不习惯可以点击左下角的一个重叠的方形按钮，以便弹出窗口）
2》，大家可以看到这个窗口,左边为相应的页面，右边为对应的CSS式样。

从上面的操作我们可以获得如下信息，首先，可以得到与页面这个元素相关的页面结构信息，以反选高亮的方式表达，位于调试窗的左边。

第二，左边选好的元素的区域，又会以淡蓝色覆盖，这个表示的是与其相关的区域的范围，在这里大家还可以看到，这个区域里用框架隔开的，这里是由CSS里面的padding和margin决定的，这个内容将会在下面的框模型里详细介绍。

在实际操作中，我们也可以通过这样的方法来获取页面对应元素的位置，代码以及区域。

在DISCUZ中，由于采用模板和代码分离的技术，其HTML代码大多放在templates 文件夹里，这是一种DISCUZ独有的模板编译方法，所以他们和正常的HTML代码有些不同，同时，CSS代码也有些许改变，这个以后会详细介绍（由于这个模板引擎很不错，已经有高手将其独立出来了，比如 phpnew，我也在用）
比如以后我们需要修改某一个地方，就可以使用这个工具找到对应的结构，直接在模板文件夹里寻找相应代码，或者CSS对应的选择器（这个显示出来的选择器也有些许修改，后面会介绍的）。

这个方法是我们修改模板的首要工作，寻找需要修改的代码的位置。

希望大家都能够掌握。

接下来我还会为大家介绍在OPERA,FF,IE等中如何定位。

2，在OPERA浏览器中使用DOM工具查看页面元素
我使用的是最新的opera桌面浏览器，由于它的使用范围也很广泛，一般大家做完一个风格后，都需要使用opera打开各个页面看一下是否有错位或者其他问题出现。

如果发现了错误，可以使用这个工具便捷地实时动态调试。

1》，首先我们来看看如何打开调试工具，比如打开discuz的论坛首页，在页面的任意位置右键单击，选择菜单栏里的检查元素，便可在下方出现一个调试框，当然我个人喜欢把这个弹出来，点击调试框右上方的双口标志，看到如下界面：
从这个界面来看，和chrome的有几分相似，但是少了很多特色功能，比如元素的加载时间等。

这个默认是只要鼠标移到上面也可以看到相应的块状结构的范围。

我个人觉得和IE的调试器有几分相似。

左边是用DOM TREE的方式查看页面，右边是相应的式样。

这个也可以支持动态修改，比如我们来修改把首页发帖按钮的padding-top的值，如下图，在这个值的上面双击就可以了，出现编辑框，修改成50px看看效果。

大家都来操作一下感受一下吧~~
是不是也是很方便呢~~
这个调试工具貌似我一直没有发现能对左边的元素进行操作的方法。

这里课的目的只是为了了解这个动态的dom操作，就不深入了，大家可以多操作
3,在Firefox，IE中调试
关于Firefox，也是强大到不行，但是他本身不自带元素查看，我们需要去下载一个dom元素查看工具。

关于IE7起，我们可以在IE的工具栏打开开放工具调用DOM工具，它也支持动态修改，便于及时修改调试。

IE6则需要去微软官网下载一个专用的开发工具。

大家可以去搜索一下~不过这个的操作我觉得不是很方便。

因为这些操作都大同小异，大家务必要装好试一试，因为做风格务必要考虑其在各个主流浏览器里的兼容性。

三，CSS盒式模型
好吧,我告诉乃们,在CSS中,框模型不算是最重要的,但也算是最最重要的.
之所以在第一节里就开始说这个东东,是因为我们上面说了用DOM来查看整个页面的各个元素,比如在chrome中,它会很清晰的出现内边距外边距在页面中的大小.为了不让大家出现疑惑的感觉同时为了维护世界和平,我决定先给大家说说这个模型
首先一句话,比如是我们上面所说的那个按钮,我们来查查它的代码，利用我们上面介绍的查看dom tree的工具
1.<div class="ptn pbm bbda cl">
2.<button type="button" id="postbtn" class="pn pnc z vm"
style="margin: -6px 10px 0 0;">
3. <strong>发帖</strong>
4.</button>
5.<p>欢迎回来 <strong>大街</strong>, <a
href="/home.php?mod=space&amp;uid=91
5768&amp;do=thread&amp;view=me" title="我的帖子"
class="xi2">我的帖子</a>, <a
href="/search.php?mod=forum&amp;srch
from=10000&amp;searchsubmit=yes" title="查看新帖"
class="xi2">查看新帖</a>
6.</p>
7.</div>
复制代码
我们会发现这些内容都放在一个<div></div>的标签内部，div就是division，意思是分割、区域、分组。

我们就把这一块当做一整块的元素来看待。

我们的这个div标签里面是由其他的内容的，比如文字，图片，按钮。

当然，这些内容会占据一定的空间，而在这些内容下面或者周围还会有一些其他的div 其他的内容，我们假设一下，没有规定这些内容我和你要保持多远的距离，我们则很可能被某个不怀好意的浏览器安排头碰头地挤在一起，这样看起来是不是很吃力呢？
那么内边距和外边距就是为了解决这个问题的，最浅显的理解，它们就是为了规定两个元素之间的距离的。

内边距：padding，外边距，margin。

（这句话希望能在现在能拼写）
现在来看看内边距，内边距指的是元素的内容（比如文字图片）距离边框的距离，分为上下左右四个位置，一般设置的时候，是按照手表上从0点到12点的顺时钟方向填写的。

比如我们现在看到的这个元素的内边距。

可以清晰看到它的图片的左右下有一段淡蓝色的空白范围，我们从对应的CSS
上可以看到这段是这么定义的
1.padding: 0px 20px 12px 3px;
复制代码
按照我们上面说的顺序，这个就是代表上->右->下->左的内边距，看看上面那个图片，是不是就是这个了？
BTW1:某个选择器比如这个图片是放在<h2>里，在CSS里就这样表示，h2 {padding:0 20px;}这样的格式，大括号里分别写属性：值；多个也是如此。

这些内容在下一课的CSS选择器等内容中详细说明。

BTW2:一般这里的0px可以直接写成0，以减少CSS体积.
BTW3:可能大家在自行浏览CSS文档的时候会发现,这个的值不一定是有4个,现在我详细解说一下,如果是一个值的时候,比如padding:1px;这个时候，其上下左右的内边距都是1px；如果是两个的情况，第一个值表示上下边距，第二个值表示左右边距；如果有三个的情况，第一个表示上，第二个表示左右的边距，第三个表示下面的内边距。

这个规定在外边距margin里也适用。

BTW4:如果没有规定padding，则默认四周均为0。

margin同。

BTW5:为了直接了当地描述其各个边距，还有一种更为简便的方法，可以分别用padding- top,padding-right,padding-bottom,padding-left来描述。

这样的话，某些童鞋犀利地指出了，这样无论怎么样不是都增加了CSS体积么，那些人是不是精神有问题呀？一般大家在实际中是不怎么用这种方式的，如果非要用的话，出于尊重大家的意见，我个人也赞同那种看法。

下面看看外边距，margin，和内边距大体相同，不同的是，margin是根据国际海洋公约来规定的，它表示的距离是距离这个元素的边框的外边的距离。

margin和padding的不同：
这是比较容易混淆的概念了，一个内边距，一个外边距，其中的内外之分是以边框作为界限的。

如果把这个模型比作一个盘子里装食物，而边框则是这个盘子的四周的周长，如果我们的食物很多，我们的padding表示的就是食物外边到这个盘子的边界的距离，如果我把padding的值确定了，食物如果增多了，内边框不变的话，造成的后果就是边框增大了，也就是周长被撑开了变长了。

margin的部分表示的距离则是这个盘子的周长外边的距离，比如我有两个盘子，margin表示的距离则
是两个盘子的边长到边长的距离，大家可以这样想象，把他们想象成是两块磁铁之间的距离就可，他们彼此之间相隔了距离就像是盘子外的距离。

在这里有个外边距合并的问题，大家需要了解一下，是这么规定的：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

大家自己理解吧~~~
最后我们再轻微理解一下边框，border，这个是内外边框的分割线，如果把border设置一个宽度，比如1PX，则可以看到内容的外边出现了一个方形的框。

我们通常用这个来装饰用，可以为其设置式样，颜色，宽度。

看看这几个图片来理解一下吧：
比如这个帖子列表，看看他的式样：
1.border-bottom: 1px solid #E0E7ED;
复制代码
可以看到，他表示的是这个边框的底部，他设置了宽度为1像素的，式样为直线的，颜色为灰色的式样，也就是我们上面图片所看到的模样。

在这里，样式还有如下：solid dotted dashed double，分别代表直线，点线，虚线，双线。

大家有兴趣可以利用dom工具实际操作一下，利用上面的方法后，双击对应的CSS式样即可修改，比如我们把开始那个式样的直线改成虚线，我们来看看效果：
CSS盒式模型就介绍到这吧。

各位可以通过dom工具实际操作一下加深理解。

如果想了解更多框模型请点击这里：
/css_boxmodel.asp.htm
四，DISCUZ页面结构
之所以要把这个没多少内容的东东单独列出来说一下，是因为我们在做或者修改discuz模板的时候首先要分清其页面各个元素的层次关系。

比如在首页，有一个根节点<html>所有的内容都在这个里面，而里面又分为两个节点<head><body>，我们的页面可见内容都放置在<body>这个节点下。

首先看看整个页面的背景，一般都是定义在body式样里的。

其实我们可以做一个比喻，我们要在桌子上摆放各种图片，文稿。

这样是有一个上下关系的，比如我首先铺一张花纹桌布作为背景，那么他肯定是在最底层的，因为body包括整个桌子的全部部分，这样才能在所有的地方都能看到这个桌布，而且不挡住其他元素。

同理，放置好桌布后，我们再在上面放置其他东西，比如再放一个相框，那么相框在桌子的上面，它的出现会挡住一部分背景。

这就是一层一层的，按照从下到上的顺序，上面的元素会挡住下面的东西。

我们制作页面也是一样，有些东西没处理好的话，也可能有些元素被遮盖了，但是在源文件里却可以看到。

比如我就是单单在桌面上摆放图片后，又摆放一本文稿，这个文稿出现的位置呢，
在相框的旁边。

由于相框直接摆放在桌面上，文稿也直接摆放在桌面上，他们都可以成为桌面的子节点，而桌面就是父节点，相框和文稿成为同级节点。

在模板制作中，我们如果要在页面增加一个元素也要考虑这个级别问题。

如果我想在文稿上放一朵小花呢？因为是放在文稿上，会覆盖掉一部分文稿的内容，那么要把这朵花设置成文稿这个元素的子元素，也就是说，如果是div的话，则要写到父元素的<div></div>的内部。

在discuz的页面中，也大抵是这种方法进行铺盖的，我们可以通过dom工具来查看一些首页的body的下面同级别的子元素。

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2.<html xmlns="http://www.w
/1999/xhtml">
3. <head></head>
4. <body id="nv_forum" class="pg_index"
onkeydown="if(event.keyCode==27) return false;">
5. <div id="append_parent"></div>
6. <div id="ajaxwaitid"></div>
7. <div class="wp a_h"
style="line-height:80px;height:80px"></div>
8. <div id="hd"></div>
9. <div id="um" class="wp"></div>
10. <div id="wp" class="wp"></div>
11. <div class="wp a_f"></div>
12. <div class="wp a_f"></div>
13. <div id="ft" class="wp cl"></div>
14. <script
src="home.php?mod=misc&ac=sendmail&rand=1279253032"
type="text/javascript"></script>
15. </body>
16.</html>
复制代码
大家看看上面的代码就是首页body下的同级节点，这也是一个比较底层的内容了，大抵包括头部，菜单，内容，尾部这几个部分。

有一些似乎直接看不到的，是弹出窗等的在特殊情况下才出现的内容。

顺带还要说一下，大家可能会有疑惑，在载入中，这些同级的是按照什么顺序在桌布上排列呢？
这就涉及到了CSS的定位，下堂课会详细解释的，一般来说他们是按照普通流从上到下，按照实际文档的先后顺序来一个一个排列的。

当然也可以通过浮动，绝对定位人为地改变。

而对于各层，CSS里还有一个z-index的属性，可以人为地控制各层的显示关系。

今天我们主要介绍的是DOM调试工具，因为这个太重要了，所以首先介绍，大家务必多联系，一定要熟练运用。

还介绍了框模型，discuz页面的层次问题，也很重要，我觉得可以先让大家了解一下。

下次我们会用一个帖子介绍XHTML和CSS的基础知识，内容比较多为了能在一个帖子里完结，大家务必做好准备~~~
不要意思这几天都在外边玩~~接下来速度会大约一周两课~~
在上一堂课里，我们专门介绍了DOM工具的操作，以便即时地查看修改的效果，和查看欲知区域的代码和式样。

在这一堂课，我们将正式进入XHTML和CSS基础知识的世界，或许你对此知道一二，你应该在此基础上系统的学习，这样才不容易忘记；或许你已经很是了解了，无聊的话可以再来看看，以便加深了解。

如果你刚刚才打开电视机，没有关系，这里的前三章都是算作铺垫的，而真正的模板制作将在第四章正式开始。

请go on 睡觉ing
大家看到这个标题有没有吓了一跳呀，这些东西看起来那么多那么繁琐，你一个帖子说得了么？
这里我要先安慰各位一句，其实这些东西简单到世界上再也没有比这个更难的
了，如果您不是真心想学会的话那么您一定可以流畅地背诵他们。

事先说说要求：本药片一旦入眼，请务必反复背诵直到滚瓜烂熟为止，否则会产生严重的干扰，导致以前学的也忘记了。

而且要说明的是，这个帖子只会把XHTML和CSS的主要的内容全部说一下。

标签看上去看多，但是分类后却很容易掌握。

XHTML是什么？
加个X？是受DISCUZX的影响么？其实XHTML就是指更加标准的HTML，是一种更纯净的HTML。

现在我们应该用来代替HTML的东东。

这个标准可以从如下四条规则中看出：
1，文档只有一个根元素。

2，每个元素都由开始标签和结束标签组成（空元素除外，如<br /><hr />）。

3，元素之间保持对称的嵌套。

4，元素的属性必须有属性值，而且要用引号标注。

（如<input
checked=’checked’ />,而且我们一定要注意，这里所有的属性和属性值都必须写成这样的格式如align=”left”,width=”123px” 这里前面是属性，中间等号，后面用双引号或者单引号标示属性值）
什么叫标签什么叫属性？
比如 <xml>就叫做标签，其中<xml>叫做开始标签，</xml>叫做结束标签。

这个
东西只能成对出现，如果这两个标签之间没有任何内容，才可以写成单个的<xml />，注意这个中间需要加一个空格才能获得最大的兼容性。

属性是写在开始标签的括号里面的东东，不同的标签有不同的属性，但是也有一些是通用的核心属性，比如<a id=’a’>里面的id，还有class，style等，这些是用来关联到CSS 文档里的式样或者JS中的选择器的。

文本相关标签
有<b>粗体，<i>斜体，<em>强调文本等，这些都可以指定id，class，style等核心属性。

各位不要小瞧这些属性的作用，事实上有时候加一些标签的目的不是为了获取粗体等效果的，而是为了把这些文字通过这些属性变成更为复杂的式样的。

在这里不得不提到一个标签<span>，我们在模板里经常可以看到，它有个什么鸡巴用呢？其实要说这个得把这三个一起说一下，<span>,<p>,<div> 这三个圈中的文字都可以为他们设置特别的式样，但是不同在于：span连续作用在一行文字上，比如<span>我们</span><span>热爱</span><span>党</span>，在浏览器上看到的这五个让人热血沸腾的字仍然是一行，但是<p>和<div>都会把他们变成新一行，也就是好像在每个结束标签后加了一个换行一样。

而后两者的区别在于，P标签的话，文字上下之间隔得更远，因为他们是产生了新的段落。

注意：<p>可以包含<span>，反过来不可以。

列表相关标签
<ul>,<ol>,<li>这三个，我们用得最多的是UL和LI，因为一般的循环输入都会采用这个标签来制造统一的效果。

前面两个UL定义无序列表，就是说这个标签里面的多个<li>的前面不会自动标注1，2，3……这样的序数词。

他们都可以指定核心属性，这就是他们存在的意义。

比如这段代码：
关于列表还有<dl><dt><dd>标签，有兴趣可以自己看。

图像相关标签
也就是<img />这一个，因为他本身就是一个单个标签，图像定义在src属性里，主要说说他的属性，src，这个用来指定文件图片所在的位置，大家可以想想一下超链接关联到另一个资源使用的href，这两个的不同，一个是指定本身，一个是指向外部。

alt，这个当图片显示失败的时候就会以这个提示的内容代替图片，当网络不好等情况下，这个是很有必要的，尤其是对手机用户，他们或许禁用了图片，你们写上这个属性给他们留条活路吧~~~
height，width，这两个指定图片的高宽。

超级链接标签
这个的重要性就不用我多说了吧，<a />
这个需要有开始和结束标签，属性包括href用来指定指向的资源，还有一个target用来指定用那个框架来加载新资源。

我们用得比较多的是这一句，target=”_blank”用来在新窗口中打开，其实还可以使用_self,_top,_parent 等值。

关于这个还可以使用name属性来确定瞄点。