本帖最后由 大街 于 2010-7-23 23:13 编辑
在写这个教程之前，看了区域里一些前辈写的教程，大家写的好感人啊，看得我眼泪都快流出来了~~
但是唯一觉得的就是，大家的教程似乎都比较散，针对性很强，没有一个比较系统的完整的教程。
秉着授人以鱼不如授人以渔的中华美德，特意准备了这个比较系统的教程，分别从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的工具- <div class="ptn pbm bbda cl">
- <button type="button" id="postbtn" class="pn pnc z vm" style="margin: -6px 10px 0 0;">
- <strong>发帖</strong>
- </button>
- <p>欢迎回来 <strong>大街</strong>, <a href="https://discuz.dismall.com/home.php?mod=space&uid=915768&do=thread&view=me" title="我的帖子" class="xi2">我的帖子</a>, <a href="https://discuz.dismall.com/search.php?mod=forum&srchfrom=10000&searchsubmit=yes" title="查看新帖" class="xi2">查看新帖</a>
- </p>
- </div>
我们的这个div标签里面是由其他的内容的，比如文字，图片，按钮。当然，这些内容会占据一定的空间，而在这些内容下面或者周围还会有一些其他的div其他的内容，我们假设一下，没有规定这些内容我和你要保持多远的距离，我们则很可能被某个不怀好意的浏览器安排头碰头地挤在一起，这样看起来是不是很吃力呢？
那么内边距和外边距就是为了解决这个问题的，最浅显的理解，它们就是为了规定两个元素之间的距离的。
内边距：padding，外边距，margin。（这句话希望能在现在能拼写）
现在来看看内边距，内边距指的是元素的内容（比如文字图片）距离边框的距离，分为上下左右四个位置，一般设置的时候，是按照手表上从0点到12点的顺时钟方向填写的。比如我们现在看到的这个元素的内边距。
可以清晰看到它的图片的左右下有一段淡蓝色的空白范围，我们从对应的CSS上可以看到这段是这么定义的- 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，则可以看到内容的外边出现了一个方形的框。我们通常用这个来装饰用，可以为其设置式样，颜色，宽度。
看看这几个图片来理解一下吧：
比如这个帖子列表，看看他的式样：- border-bottom: 1px solid #E0E7ED;
在这里，样式还有如下：solid dotted dashed double，分别代表直线，点线，虚线，双线。大家有兴趣可以利用dom工具实际操作一下，利用上面的方法后，双击对应的CSS式样即可修改，比如我们把开始那个式样的直线改成虚线，我们来看看效果：
CSS盒式模型就介绍到这吧。各位可以通过dom工具实际操作一下加深理解。
如果想了解更多框模型请点击这里：
http://www.w3cschool.cn/css_boxmodel.asp.htm
四，DISCUZ页面结构
之所以要把这个没多少内容的东东单独列出来说一下，是因为我们在做或者修改discuz模板的时候首先要分清其页面各个元素的层次关系。
比如在首页，有一个根节点<html>所有的内容都在这个里面，而里面又分为两个节点<head><body>，我们的页面可见内容都放置在<body>这个节点下。
首先看看整个页面的背景，一般都是定义在body式样里的。其实我们可以做一个比喻，我们要在桌子上摆放各种图片，文稿。这样是有一个上下关系的，比如我首先铺一张花纹桌布作为背景，那么他肯定是在最底层的，因为body包括整个桌子的全部部分，这样才能在所有的地方都能看到这个桌布，而且不挡住其他元素。
同理，放置好桌布后，我们再在上面放置其他东西，比如再放一个相框，那么相框在桌子的上面，它的出现会挡住一部分背景。这就是一层一层的，按照从下到上的顺序，上面的元素会挡住下面的东西。我们制作页面也是一样，有些东西没处理好的话，也可能有些元素被遮盖了，但是在源文件里却可以看到。
比如我就是单单在桌面上摆放图片后，又摆放一本文稿，这个文稿出现的位置呢，在相框的旁边。
由于相框直接摆放在桌面上，文稿也直接摆放在桌面上，他们都可以成为桌面的子节点，而桌面就是父节点，相框和文稿成为同级节点。
在模板制作中，我们如果要在页面增加一个元素也要考虑这个级别问题。
如果我想在文稿上放一朵小花呢？因为是放在文稿上，会覆盖掉一部分文稿的内容，那么要把这朵花设置成文稿这个元素的子元素，也就是说，如果是div的话，则要写到父元素的<div></div>的内部。
在discuz的页面中，也大抵是这种方法进行铺盖的，我们可以通过dom工具来查看一些首页的body的下面同级别的子元素。- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head></head>
- <body id="nv_forum" class="pg_index" onkeydown="if(event.keyCode==27) return false;">
- <div id="append_parent"></div>
- <div id="ajaxwaitid"></div>
- <div class="wp a_h" style="line-height:80px;height:80px"></div>
- <div id="hd"></div>
- <div id="um" class="wp"></div>
- <div id="wp" class="wp"></div>
- <div class="wp a_f"></div>
- <div class="wp a_f"></div>
- <div id="ft" class="wp cl"></div>
- <script src="home.php?mod=misc&ac=sendmail&rand=1279253032" type="text/javascript"></script>
- </body>
- </html>
顺带还要说一下，大家可能会有疑惑，在载入中，这些同级的是按照什么顺序在桌布上排列呢？
这就涉及到了CSS的定位，下堂课会详细解释的，一般来说他们是按照普通流从上到下，按照实际文档的先后顺序来一个一个排列的。当然也可以通过浮动，绝对定位人为地改变。而对于各层，CSS里还有一个z-index的属性，可以人为地控制各层的显示关系。
今天我们主要介绍的是DOM调试工具，因为这个太重要了，所以首先介绍，大家务必多联系，一定要熟练运用。还介绍了框模型，discuz页面的层次问题，也很重要，我觉得可以先让大家了解一下。
下次我们会用一个帖子介绍XHTML和CSS的基础知识，内容比较多为了能在一个帖子里完结，大家务必做好准备~~~
关于目录：（写明必背的说明是极其重要的，不背下来寸步难行的）（如果有新的出来，我会在每个帖子主贴下面写好这个目录并做好超链接）
1，XHTML基本必背标签，DOM模型简介和在浏览器的定位，CSS盒式模型（必背）及DISCUZ的页面结构简析。
2，CSS的几个必须要背诵的知识，定位，选择器和基本语法。（必背）
3，DISCUZ模板编译原理及其相关。
4，创建自己的第一个模板之创建，结构修改，各种背景的修改和调整，一些遇到的基本错误的修正。
5，风格细节修改及基本图片修改（photo技术），Sprites技术简介和图片制作。
6，数据调用和修改与自增模块。
7，DZjs框架的使用，风格整体测试，查找和处理速度瓶颈。
|
[复制链接]
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
