在写这个教程之前，看了地区里一些先进写的教程，各人写的好悦耳啊，看得我眼泪都快流出来了~~
可是独一认为的就是，各人的教程好像都较量散，针对性很强，没有一个较量体系的完备的教程。
秉着授人以鱼不如授人以渔的中华丽德，特意筹备了这个较量体系的教程，别离从XHTML+CSS和discuz模板建造道理的这些部门入手，让各人看后可以或许真正现实地建造可能仿制出一个模板。
前面三章内容会别离报告一些基本的DOM调试，CSS+XHTML基本，discuz编译道理，数据挪用，图片建造和模板建造进程等基本常识。
后头则均为手把手地现实操纵怎样仿制其他论坛气魄沤背同仿制任何网站气魄威风凛凛的要领，自行缔造新模板及错误批改和优化。
好了，空话少说，请列位同窗系好安详带，let's go！！！！


一，dom模子简介

之以是在这里起首先容dom模子,首要是两个缘故起因,起首是dom模子把整个文档当做一个把各类元素通过节点接洽起来的节点树,这样分类后可以很清楚地看到整个页面的布局和彼此接洽.其次是大多调试器材都可以操作dom来动态的操纵元素,可以即时地看到修改后的功效.
基于以上缘故起因,这个内容无论是做计划照旧只是简朴修改代码,都必需把握.
关于dom的又臭又长的界说和汗青,我想没有须要再让各人来研究了,有乐趣可以去网上本身找资料.
我们只要相识这几点,起首DOM(Document Object Model)，文档工具模子，是面向HTML和XML的应用措施接口,与说话赏识器等等没有相关，可是可以操作其会见并修改页面的元素.
然后就是DOM将文档筹划成由多个彼此毗连的节点级组成的文档，文档中的每个部门都可以看作是一个节点的衍生物。

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操纵，就不深入了，各人可以多操纵