经典教程：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>, <ahref="/home.php?mod=space&amp;uid=915768&amp;do=thread&amp;view=me" title="我的帖子"class="xi2">我的帖子</a>, <ahref="/search.php?mod=forum&amp;srchfrom=10000&amp;searchsubmit=yes" title="查看新帖"class="xi2">查看新帖</a>6.</p>7.</div>复制代码我们会发现这些内容都放在一个<div></div>的标签内部，div就是division，意思是分割、区域、分组。

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

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

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