经典教程:discuz x2 风格模板完整教程
![经典教程:discuz x2 风格模板完整教程](https://img.360docs.net/img2b/01bhprg76dhak40mihtz-b1.webp)
![经典教程:discuz x2 风格模板完整教程](https://img.360docs.net/img2b/01bhprg76dhak40mihtz-f2.webp)
没有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.
2.
5.
欢迎回来 大街, href="https://www.360docs.net/doc/2514457937.html,/home.php?mod=space&uid=91 5768&do=thread&view=me" title="我的帖子" class="xi2">我的帖子 href="https://www.360docs.net/doc/2514457937.html,/search.php?mod=forum&srch from=10000&searchsubmit=yes" title="查看新帖" class="xi2">查看新帖
6.
7.
复制代码
我们会发现这些内容都放在一个
的标签内部,div就是division,意思是分割、区域、分组。我们就把这一块当做一整块的元素来看待。我们的这个div标签里面是由其他的内容的,比如文字,图片,按钮。当然,这些内容会占据一定的空间,而在这些内容下面或者周围还会有一些其他的div 其他的内容,我们假设一下,没有规定这些内容我和你要保持多远的距离,我们则很可能被某个不怀好意的浏览器安排头碰头地挤在一起,这样看起来是不是很吃力呢?
那么内边距和外边距就是为了解决这个问题的,最浅显的理解,它们就是为了规定两个元素之间的距离的。
内边距:padding,外边距,margin。(这句话希望能在现在能拼写)
现在来看看内边距,内边距指的是元素的内容(比如文字图片)距离边框的距离,分为上下左右四个位置,一般设置的时候,是按照手表上从0点到12点的顺时钟方向填写的。比如我们现在看到的这个元素的内边距。
可以清晰看到它的图片的左右下有一段淡蓝色的空白范围,我们从对应的CSS
上可以看到这段是这么定义的
1.padding: 0px 20px 12px 3px;
复制代码
按照我们上面说的顺序,这个就是代表上->右->下->左的内边距,看看上面那个图片,是不是就是这个了?
BTW1:某个选择器比如这个图片是放在
里,在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工具实际操作一下加深理解。
如果想了解更多框模型请点击这里:
https://www.360docs.net/doc/2514457937.html,/css_boxmodel.asp.htm
四,DISCUZ页面结构
之所以要把这个没多少内容的东东单独列出来说一下,是因为我们在做或者修改discuz模板的时候首先要分清其页面各个元素的层次关系。
比如在首页,有一个根节点所有的内容都在这个里面,而里面又分为两个节点
,我们的页面可见内容都放置在这个节点下。首先看看整个页面的背景,一般都是定义在body式样里的。其实我们可以做一个比喻,我们要在桌子上摆放各种图片,文稿。这样是有一个上下关系的,比如我首先铺一张花纹桌布作为背景,那么他肯定是在最底层的,因为body包括整个桌子的全部部分,这样才能在所有的地方都能看到这个桌布,而且不挡住其他元素。
同理,放置好桌布后,我们再在上面放置其他东西,比如再放一个相框,那么相框在桌子的上面,它的出现会挡住一部分背景。这就是一层一层的,按照从下到上的顺序,上面的元素会挡住下面的东西。我们制作页面也是一样,有些东西没处理好的话,也可能有些元素被遮盖了,但是在源文件里却可以看到。
比如我就是单单在桌面上摆放图片后,又摆放一本文稿,这个文稿出现的位置呢,
在相框的旁边。
由于相框直接摆放在桌面上,文稿也直接摆放在桌面上,他们都可以成为桌面的子节点,而桌面就是父节点,相框和文稿成为同级节点。
在模板制作中,我们如果要在页面增加一个元素也要考虑这个级别问题。
如果我想在文稿上放一朵小花呢?因为是放在文稿上,会覆盖掉一部分文稿的内容,那么要把这朵花设置成文稿这个元素的子元素,也就是说,如果是div的话,则要写到父元素的
的内部。在discuz的页面中,也大抵是这种方法进行铺盖的,我们可以通过dom工具来查看一些首页的body的下面同级别的子元素。
1.
"https://www.360docs.net/doc/2514457937.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2.
3.
4.
onkeydown="if(event.keyCode==27) return false;">
5.
6.
7.
style="line-height:80px;height:80px">
8.
9.
10.
11.
12.
13.
14.
15.
16.
复制代码
大家看看上面的代码就是首页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,每个元素都由开始标签和结束标签组成(空元素除外,如
)。3,元素之间保持对称的嵌套。
4,元素的属性必须有属性值,而且要用引号标注。(如
checked=’checked’ />,而且我们一定要注意,这里所有的属性和属性值都必须写成这样的格式如align=”left”,width=”123px” 这里前面是属性,中间等号,后面用双引号或者单引号标示属性值)
什么叫标签什么叫属性?
比如
东西只能成对出现,如果这两个标签之间没有任何内容,才可以写成单个的
文本相关标签
有粗体,斜体,强调文本等,这些都可以指定id,class,style等核心属性。各位不要小瞧这些属性的作用,事实上有时候加一些标签的目的不是为了获取粗体等效果的,而是为了把这些文字通过这些属性变成更为复杂的式样的。
在这里不得不提到一个标签,我们在模板里经常可以看到,它有个什么鸡巴用呢?其实要说这个得把这三个一起说一下,, , 和 可以包含,反过来不可以。 列表相关标签 比如这段代码: 关于列表还有 图像相关标签 也就是 alt,这个当图片显示失败的时候就会以这个提示的内容代替图片,当网络不好等情况下,这个是很有必要的,尤其是对手机用户,他们或许禁用了图片,你们写上这个属性给他们留条活路吧~~~ height,width,这两个指定图片的高宽。 超级链接标签 这个需要有开始和结束标签,属性包括href用来指定指向的资源,还有一个target用来指定用那个框架来加载新资源。我们用得比较多的是这一句,target=”_blank”用来在新窗口中打开,其实还可以使用_self,_top,_parent 等值。 关于这个还可以使用name属性来确定瞄点。 表格相关标签 有些同志认为现在用div+css 可以代替table了嘛,其实在很多地方这都是不可取代的,不信可以去看看帖子列表页,是不是用了table? 其实关于表格的相关标签还有很多比如 表单相关标签 我们经常要与服务器交互信息,提交数据,文档等。这是一个很麻烦的东东,但是确是最需要掌握的东东之一,各位同学不要害怕,让吾来慢慢带领各位寻路…… 首先看一个最简单的表单提交东东: 1. 2. 3. 4. 复制代码 好吧这是一个最简单的表单提交代码,通过分析这个代码我们可以得到以下信息: 1,所有内容都写在form这个标签对的内部,里面写其他标签增加内容。2, Input标签很不错,可以通过type来化为不同的肉身。 3,表单提交到本身,且通过GET方式。(什么是GET,POST提交方式?他们都是表单提交数据时候的请求的方式,GET会在浏览器里显示需要提交的数据,比如这个点击提交后就会在浏览器出现如下字符php?a=aaa,如果我有多个框的内容要填,则是这样的形式php?a=aaa&b=bbb。而 POST不能在地址栏看到。他们的区别除了安全性能,提交数据的大小,GET最多只能2k以内,如果要上传文件,则必须选用POST方式。其余还有很多不同,什么不同我也不想说,纸上来的终觉浅,你们不自己折腾我说了等于0)。这两个参数是必选的,如果是在discuz7中,这个提交后,应该是通过了特殊的extract处理,在程序中可以直接使用$a这个变量,但是在x中,是在$_G这个数组里。如果是非DZ中,可以使用$_GET[‘a’]得到这个值。 4,第一个input类型是文本,会出现一个框供大家填入文字信息,第二个类型是submit,会出现一个提交按钮,显示为提交字样,点击之后会把内容提交到服务器。 大家可以通过这个示例来了解一下表单提交的过程,接下来详细说说这两个标签的属性: 复制代码 我们可以对比一下上面的代码,增加了一个enctype属性,input的type属性改成了file,method改成了post。 这样点击提交后,上传的文件会自动保存到$_FILES数组里,然后通过php等来处理。 还有一种text/plain。 首先说明这是一个单标签,大家从上面的例子也可以看出,都提到了type属性,我们现在就来总结一下这个属性值: text:文本。这个时候再添加一个属性value=”aaa”,则会把aaa当做初始值。password:这个指定密码,设置成这个后会显示为点点。 hidden:如果你有心研究过discuz的代码的话,一定可以频繁地看到这个属性在表格中的应用,因为在表单中要判断请求来源的合法性,一般都会增加一些你表面看不到但是实际上跟随表单一起提交到了服务器的变量和数据,就是用这个东东了。看不到,但是值也被提交了。 radio:单选框。 checkbox:复选框。 file:文件上传域。 submit,reset:提交,重置按钮。 还有如下属性必须掌握: checked:在选择框的时候,表示初始位置的选择情况。我们上面也说了XHTML 的四条规则,所以这个必须写成这样:checked=’checked’,而以前直接写成checked就成了。 disabled:加载的时候禁用该元素,应该注意,当input设置成这个的时候,是能看到的,但是这个内容却不能修改,内容也不能被提交。这个要和上面的hidden属性值相区别。 readonly:这个的效果类似上面,只能读不能输入。常用来做那种比如DZ里的性别一旦填写不可修改的效果。 maxlength:指定文本框中所允许输入的最大字符数。 name:为这个输入框设定一个唯一的名字,提交后当做变量名。 在处理表单时候的多说一句: 一般专业的代码工人(请原谅我这样的称呼,因为真相永远比谎言更动人~~)都会在input前使用label标签。 一般是这样用的: 这个label的作用就是当你点击姓名的时候,鼠标的焦点会切换到这个for对应id的框内。 很多网站都有这样的效果,不是吗? 这里的for 指定了a,这个会关联到id为a的元素。 当然可以用另外一种方法,不用使用for。 关于表单还有如下标签大家可以了解一下: 还有一些需要了解的标签: 这个是xhtml的根元素。 关于XHTML最后还要说一说head标签里的东东 3,使用内联样式 这是个偷懒的方法,比如我在修改一个div的样式,需要增加一个效果,那么简便的方法莫过于直接在这个div标签里添加一个style属性: 就像这样,本公子经常使用这种方法,很方便呢,不过代价就是想修改的时候经常找不到地方。 如果我采用的是外联的方式,利用第一种方法设置好,那么xhtml的部分已经完全完成了,接下来就是对照xhtml里的id或者class来写CSS了。 CSS的基本语法: 看这个代码 Body { font-size:12px;background-color:black;} 我们来分析上面的代码,可以得到如下信息: 1,最前面的是选择器,用来选择XHTML文件中的某个标签等关联的样式,这里可以看到是body标签。 2,关于这个选择器的样式内容写在一个大括号内部,里面的格式是属性:值;这样的格式,中间是冒号,后面是分号。同时可以指定该选择器的多个属性和值。 3,这个页面的字体大小被设置成12px,背景颜色被设置成黑色。 补充:其实可以同时有多个选择器,用逗号隔开即可。 接下来我们会按照这个代码从左到右的顺序依次介绍选择器,基本属性。 CSS选择器: 如果我把xhtml中的每一个元素比如一段文字,图片,表格当做一个个明星,文字天王,图片歌后,表格影帝兼摄影师。那么在CSS中则存在他们的造型师,比如上面的那个代码就是body先生的造型师,他前面的body表明他就是body明星的造型师。 所以在CSS样式中,大括号前面的名字表示的就是他们所负责的明星的名字,当然是可以一个造型师负责多个明星。 我们随便打开一个CSS文档,会发现前面的名字有下面三中格式,第一种都和XHTML中的标签同名,第二种前面有#,第三种前面有. 先说第一种属性选择器: 我们在上面的文中学习了很多的标签,那么第一种就是利用他的原始标签来定位。 比如定义页面的背景 1.body { background:black;font-size:12px;} 复制代码 如果是多个选择器使用同一个属性和值,可以这样 1.h1,h2 { font-size:20px;} 复制代码 面对稍微复杂的情况,可以用多个选择器来定位,成为派生选择器,比如对应父元素里的子元素 1.li a { color:red;} 复制代码 还能对某个标签的某个属性和值进行限制: tag[attr] tag中具有attr属性的情况 tag[attr = value] 其中attr的为value的情况,这个的优先级大于上面的tag[attr ~= value] 其属性值为多个,其中一个为value的情况 tag[attr |= value] 其属性值为多个,第一个为value的情况*这两种支持的浏览器不多,仅供参考 利用这个比如某个div中,就可以用这样的选择器 1.div[class=a] 复制代码 来选择。 第二种情况,id选择器 在XHTML中我们可以看到,基本所有的标签都可以使用id这个核心属性。 相当于给某个标签起了一个独一无二的名字。 那么我们在css中可以直接利用id来定位, 比如 那么在CSS中,对应的式样可以直接写成 #a {} 这个也可以使用派生选择器。 应当注意的是,这个ID是独一无二的,每个页面只能使用一次 比如在循环中的,li就不能指定id属性,否则CSS会失效。 第三种情况,class选择器 上面说过的ID选择器是独一无二的,那么为了重复利用 我们就可以使用class选择器来批量设置式样。 这个也可以使用派生选择器。 关于继承: 在这里遵循一个子元素默认使用父元素的属性和值 但是子元素的优先级大于父元素的规则。就是说如果子元素有设置字体神马的,则使用子元素的式样,否则默认使用父元素的。 下面重点介绍一些重要的属性: 字体部分: font:这个是一个复合属性,可以包括字体,大小,风格,加粗等。当然如果只写一个,可以利用具体的font-size等。 color:颜色 text-shadow:阴影,但是对IE没有效果 text-transform:首字母大写,这个效果很不错,可以选择到文字的第一个字母,单独设置样式,弄成报纸上那种第一个是大字的效果。 line-height:行高 letter-spacing:文字与文字之间的间隔 word-spacing:单词之间的间隔 段落部分: text-indent:段落文本的缩进 text-align:设置文本的对齐方式,比如左或者右 背景部分: background:这个可以写入颜色,图片,位置,重复,固定等属性,我们看看首页的目录背景设置代码: 1.background: url(https://www.360docs.net/doc/2514457937.html,/static/image/common/mu.png) no-repeat 100% -33px; 复制代码 多个属性中间使用一个空格隔开的 首先是背景图片,格式是url()里面写入地址,当然在discuz中由于模版编译,这个是可以写入一个常量的。 在这里也可以写入背景颜色,但是只有在图片不生效或者不存在的时候才会显示第三个是重复,这个是不重复,也可以repeat,repeat-x,repeat-y,分别重复,x重复,y重复。 第四个是图像位置,可以是百分比或者像素值。父元素的左上角为0,0坐标,横向为x,竖向为y。两个分别代表其位于x和y的位置。 大小部分: width,height:宽和高 max-height,min-height,max-width,max-height:分别指出最大最小的高或者宽。 边框部分: border:这也是一个复合属性,可以指定颜色,样式等,单独某个位置的某个式样可以用这种方式:border-top-color 这个部分上一章介绍过,可以自己去看看。 还有通用的部分: display:如果这个设置成none,则元素不可见。还可以设置成block强制设置为块。 cursor:光标式样。 位置部分: position:可以是relative,absolute分别以上一个元素的相对位置做参考,脱离文档流处于漂浮状态。或者static,以页面作为参考系;还有一个fixed,和absolute相似,但是其是以当前屏幕的大小为参考系,和页面脱离了关系。z-index:这个指定层。 top,bottom,left,right,这些分别指定上下左右,参考系以position的值为准。 CSS定位: 一般浏览器载入一个页面,会按照里面的元素从上而下的位置排列,称为普通流。但事实上为了获得我们想要的式样,常常需要对这些元素进行位置的调整。 在上面已经说了位置部分的CSS属性 下面简单对relative,absolute和float进行比较 relative是以上一个元素为参考物。假设所有的元素都以原始的顺序排列,这里对某一个元素位置进行定位,得到的是偏移上一个元素的位置。而下一个元素的位置则为默认这个元素位置不变的所在位置。 absolute绝对定位,会把这个元素从文档流里删除,使其漂浮上去了。而且会影响下一个元素的位置,这个时候下一个元素会把这个绝对定位的元素当做不存在而占用这个元素的位置。他的定位则是相对于父元素的定位。 float这个属性大家一定看得很多了吧。 比如在dz首页中的左右分栏就利用了这一个。首先,它也是一个脱离了普通流的元素,漂浮在上面和一般的元素是不会相撞的,但是会掩盖。如果两个元素都是浮动的,则可以在普通流的上面相撞。 一般可以向左浮动或者向右浮动。而且这个漂浮是位于父元素的内部的。而不是脱离了整个页面的框架。 浮动和position不能同时使用。他也能影响下一个元素的位置。 在div中,在普通流中,每个框的出现都是独立的一个段落,上下方式,而不是左右。这也是discuz的首页左右边栏使用float的原因,float只有左右两个值,能够把框放到一行里。 在父元素的框架里,如果里面的元素都是浮动的,则会错位,因为这个时候父元素在普通流里空掉了。这个时候要借助一个clear的属性。 他们的主要区别是上面的内容了,还有一些必须要了解的属性请点击这个查看:https://www.360docs.net/doc/2514457937.html,/css/css_positioning_floating.asp 如果要再写的话肯定是重复了,就不写了,自己看吧。 超链接的CSS属性 在超链接中,有一些效果,比如鼠标放上去的时候,点击的时候,普通的时候会呈现出不同的效果,这个也叫做CSS伪类。 这个点击这里可以看到: https://www.360docs.net/doc/2514457937.html,/css/css_pseudo_classes.asp 这些内容稍微了解一下就可以了。 好像说明一二节,我们还是没有和discuz扯上太多关系,那么从下一节开始,我们将真正步入discuz模板制作之路了。 因为下一节我们将开始讲述discuz模板引擎原理,这三节完毕后,大家应该对模板的修改有一个最基本的原理上的认识了。 打了好多字,好累……呼…呼呼…大口喘气中…… 本章内容很多,写了很多天,如果有疏忽不能避免,请指正!! 首先以7.X系列为例子,我们打开一个论坛,在域名后面会有一个文件,这个文件可能是index.php,forumdisplay.php等等。 大家解压discuz的压缩包看看,在根目录下,也有这么一些文件,大家去看看,是不是我们能够直接输入的地址的文件在这里基本都有啦? 我们打开帖子列表,forumdisplay.php?fid=1为例子,就会看到一个包含页头页尾精美样式和信息的HTML页面。 但是我们打开这个php文件,却发现里面的东西并不多。 这是什么缘故呢? 我们现在首先来研究一下打开一个页面的原理。 1,包含进了一些重要的文件。 1.require_once './include/common.inc.php'; 2.require_once DISCUZ_ROOT.'./include/forum.func.php'; 复制代码 第一个文件里,服务器会判断用户类型,保持用户状态,判断论坛开启状态,初始化数据库,载入常用函数库等。 在第二个文件里,会包含进与论坛相关的函数库。 2,接下来看到的将会是大段的代码,我们仔细查看会发现这些无非是一些判断,然后是赋值。 这里出现了很多的变量。所以这个过程可以看作是获取这个页面的所有的信息的过程,比如帖子列表,用户名列表等数组信息。 3,看最后一句,有这样的代码: 1.include template($template); 复制代码 大家可以从英文单词里判断,这个一定是和模板有关吧? 等到最后,原来所看到的HTML到最后才载入啊。。。 所以从上面的分析我们可以基本知道这个根目录下的文件的工作过程。 而我们知道,如果是一个纯静态空间,里面都是HTML代码,我们也可以做出和论坛一模一样的网站。 但是却不能自动更新。 所以我们也可以分析出,我们的PHP空间最后输出的也肯定是和上面的一样的HTML代码。 不同的是静态空间的文件是事先生成好的,而我们通过DZ这个系统,通过PHP 空间工作,最后也生成和上面一样的HTML代码。 说到这里,同学们肯定会问:那么discuz系统的HTML是在哪里生成的呢?又要如何改变他呢? 休息一下,本公子大便一下先……速速就回…… 好吧,大便回来神清气爽~~嘿,还真对得起咱这张脸~~ 我们来了解一下PHP的工作, PHP是一种可以混合php代码和HTML代码的语言 比如在一个PHP文件里,可以直接写入HTML代码 然后在需要写php代码的地方加上,在里面写代码就可以了 这种模板和代码混合的写法称为原生态写法,现在流行的wordpress就是这种写法,很多高手崇尚这种写法。 比如这个代码就是原生态的写法完成的: 1. "https://www.360docs.net/doc/2514457937.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2. language_attributes(); ?>> 3. 4. echo $title; ?> 5. 6. 7. wp_admin_css( 'login', true ); 8. wp_admin_css( 'colors-fresh', true ); 9. 10. if ( $is_iphone ) { ?> 复制代码 但是我个人看了这种代码是会头疼的。。。因为太乱了。。。又不美观。。。而且如果很多人来写这个工程,就乱套了。 能不能把模板和代码分开呢?这样美工就能专注模板了。。。 所以DISCUZ也这么干了。 我们把所有的PHP代码单独写在一起,放在某个页面的上面,里面都是一些赋值了的变量,比如这个帖子的内容。 下面再载入模板,就像我们上面看到的分析一样,那个第三步就相当于把那个模板页面所有内容放到这个forumdisplay页面的最下面 当然,这个包含进来的模板是经过编译的,也就是把那个特有我们写的模板转变成PHP和HTML混合的代码。 所以最后我们得到的这个PHP页面里究竟变成了什么了呢? 有童鞋说出来了,这样得到的不就是一个混合了HTML和PHP代码的原生态写法的php文件吗? 对的。。。模板编译的结果就是最后给服务器运行一个原生态写法的php文件。 由于discuz模板编译的过程,是把templates文件下里对应的模板文件转变成原生态的写法 然后存放在cache的文件夹里,然后再包含进根目录下的文件里 所以大家也可以在缓存文件夹里的模板文件夹里查看到某个页面经过编译的原生态的php代码。 上面说了,经过模板编译的过程,把templates里面的htm文件变成原生态写法的php文件 那么我们可以肯定,上面的template函数肯定经过了一些特殊处理,把一定格式的htm文件转变成php文件 而这个htm文件一定要遵循某些符合这个函数转变规律的写法才行,否则就会编译错误。 而这个写法也就是我们这堂课的重点了。 既然要知道编译过程,我们首先还得来研究一下这个template函数 打开global.func.php,global是全局的意思,这个文件里有所有用途频繁的函数,而DZ命名也很有规律,比如这个里面都是函数,所以是func,如果里面有类呢?就是class了,大家有兴趣自己看看是不是? 代码如下: 1.function template($file, $templateid = 0, $tpldir = '') { 2. global $inajax, $hookscript; 3. if(strexists($file, ':')) { 4. list($templateid, $file) = explode(':', $file); 5. $tpldir = './plugins/'.$templateid.'/templates'; 6. } 7. $file .= $inajax && ($file == 'header' || $file == 'footer') ? '_ajax' : ''; 8. $tpldir = $tpldir ? $tpldir : TPLDIR; 9. $templateid = $templateid ? $templateid : TEMPLATEID; 10. $tplfile = DISCUZ_ROOT.'./'.$tpldir.'/'.$file.'.htm'; 11. $filebak = $file; 12. $file == 'header' && CURSCRIPT && $file = 'header_'.CURSCRIPT; Discuz!模板二次开发的模板语法介绍: 相信大多数朋友都看过discuz的模板文件的代码了。不同于传统的静态html代码,dz的静态模板可以说是动态化得模板文件了。这里集合了,一些特有的php变量和逻辑判断。下面我将为大家整理一下常用的dz模板二次开发规范,希望有助于大家更好的制作模板。DZ的模板引擎原理是通过特殊的Discuz!模板标签来完成特定的循环和判断的。它不同于PHP本身自带的脚本语言。大家可能有很多人写过PHP的程序,也都使用过类似if($abc == 1) {} else {}的判断。Discuz!模板引擎会将Discuz!模板标签中的关键字替换成php自身的脚本语句,然后存入缓存目录forumdata/templates目录中生成一个可供PHP程序包含和调用的模板文件。 那在DZ的模板引擎中我们该如何使用Discuz!模板标签呢? 下面给大家列举DZ模板引擎中常见、常用的模板语句: 一、直接输出变量:{$abc}或{echo $abc} 二、输出数组中某个变量:{$arr[0]} 三、IF判断语句: 我abc小于1 我abc为1 我abc大于1 四、Loop循环语句: 这里是{$val} 上面这段loop语句,DZ会将其转换成php自身的循环语句: If(is_array($abc)) { Foreach($abc AS $key => $val) { } } 五、在模版文件中使用PHP语句:{eval $abc = 1;}注意:这里必须带”;”结尾。 六、在本模板中引用其他的模板:如我们要包含头部模板文件(header.htm)可以这样写:{subtemplate header} 在模版中使用语言包中的中文语句:{lang xxxxx},在这里xxxxx就是语言包中任意一个数组的键值。 如:templates/default/https://www.360docs.net/doc/2514457937.html,ng.php(语言包)内有下面的数组 $language = array ( 'discuz_lang' => 'templates', 'click_here' => '点击这里', 'ban_member' => '禁止', 'input_invalid' => '填写无效', 'title_none' => '无标题', 'title' => '标题', } 大家可以使用{lang title},这样在模板输出的时候则会显示”标题”两个字。 当你了解了Discuz!模板开发语法之后,我们就一起来熟悉一下,常用的数据库表含义,与主题表中常用字段的含义,这样方便你使用sql语句灵活调用个性的内容,如:按会员性别调用头像,在首页右侧边栏调用女性会员头像等等这样各个性的需求,在此我们丛老师为我们讲解常用数据库表、字段及sql语句。 数据常用的帖子表有:cdb_threads,cdb_posts 我们仅以了解数据库中该如何根据结构来获得自己需要的信息。 用户名和密码均为root。也可以查看安装后的readme.txt说明文件 接着我们还是来围绕今天的题目,来知道哪些数据表和数据字段对调用“帖子列表”有帮助。 打开phpmyadmin,找到现在你们本机用于演示的数据库。如图: cdb_threads表红色标记的,则是discuz!中最重要的主题列表。,回复主题在哪个表呢? 其实,回复帖子的库文件是:cdb_posts。我们在这里先只使用cdb_thread,以数据库的方式获取,最新的帖子列表数据和第一讲标签调用有区别,大家一起跟我做。 cdb_threads中有几个重要的字段: tid (大家很熟悉了),每个主题唯一的一个帖子ID fid(所在论坛版块的ID号) Erwin工具使用指南(版本号:V ) 文档修订状况 目录 第一章基本概念 (4) 数据模型(Modal) (4) 视图 (4) 逻辑视图(Logical) (4) 物理视图(Physical) (4) 第二章操作指南 (6) 新建模型 (6) 视图切换 (7) 新建主题区域 (7) 切换主题区域 (9) 编辑主题区域 (10) 选择现有数据实体到指定的主题区域。 (10) 在主题区域新建数据实体 (11) 在主题区域删除数据实体 (12) 数据实体导航 (13) 第一章基本概念 1.1数据模型(Modal) 数据模型是数据实体(Entity)和数据实体间的关系(Relationship)总和。可以简单的理解认为数据实体就是对应数据库表,实体间的关系就是表之间的关系。 1.2视图 Erwin对数据模型提供两种视——逻辑视图、物理视图。 1.2.1逻辑视图(Logical) 是以业务需求的概念对数据模型进行描述。通俗的说,在逻辑视图中我们可以用中文或描述性的语言来描述数据实体(表)和数据实体的属性(字段)。下面就是一个对车辆信信息实体的逻辑视图。 1.2.2物理视图(Physical) 物理视图与逻辑视图一一对应,物理视图是针对一种具体的数据库进行逻辑视图的物理映射。通俗的说,在物理视图中我们必须为每一个在逻辑视图中出现的数据实体(表)指定一个可被具体数据库接纳的表名称,譬如我们使用MySQL作为我们的数据库实现,我们就必须为具体的实体指定一个数据库表名(英文单词或词组),同样的对实体属性(字段)的命名也需进行转换,数据类型也需要具体为数据库支持的数据类型。下面就是对应车辆信息实体针对MySQL数据的物理视图。 接触Discuz!有一段时间了,使用的风格都是别人的免费品。一来自己的美工水平实在不行,二来网上很少有比较完整的模板制作教程。因为工作的需要,现特写了一份模板的制作教程。小弟才疏学浅,不对之处还请指正。 模板制作前请将你的界面设计好,并制作成html+CSS 的格式。这里我就 以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。效果图如下: (图1) 在开始前,先了介绍一下discuz!的几个模板文件:1、header.htm --------------------------------------页面头部2、discus.htm---------------------------------------------------------------论坛首页3、footer.htm---------------------------------------------------------------页面底部4、viewthread--------------------------------------------------------------查看帖子内容 discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是header.htm+discus.htm+footer.htm 这三个文件共同作用的效果。Heaer.htm 对应的是: (图2) w w w .a i w a n s h a .c o m Footer.htm 对应的是: (图3) 剩下的就是discuz.htm 文件显示的了。 当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm 和footer.hmt 文件通常还会被其它的模版文件引用。也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利用,减少劳动的效果。下面我们就开始制作: 首先,现在我要制作的这套模板叫test,那么我就在templates 目录下建立一个test 目录。在test 目录下再新建一个images 文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。templates/test 文件夹用于存放这套模板的htm 文件,在这个目录中新建三个文件header.htm、discuz.htm、footer.htm,打开你设计好的主页html 文件,将你想作为头部的那一段代码复制粘贴到header.htm 文件中, 相应的将作为底部的那一段代码复制粘贴到footer.htm 文件中,其余的代码复制粘贴到discuz.htm 文件中。 最后在discuz.htm 文件的最顶部和最底部分别加上:{subtemplate header}和{subtemplate footer} 这两句算是discuz 的语言,意思是将header.htm 和footer.htm 文件包含进来,这样就构成了一个完整的主页面了。接下来的工作要在论坛后台设置中来完成(1)进入论坛点击“系统设置——>界面——>模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如图 4: (图4) (2)在“界面——>风格管理”中,在新增界面风格后填入方案名称“test”然后提交即可!(3)提交方案名称后,您就可以在界面风格中看到您所定义的新的风格方案。如下图: w w w .a i w a n s h a .c o m Discuz模板教程 接触Discuz! 有一段时间了,使用的风格都是别人的免费品。一来自己的美工水平实在不行,二来网上很少有比较完整的模板制作教程。因为工作的需要,现特写了一份模板的制作教程。小弟才疏学浅,不对之处还请指正。 模板制作前请将你的界面设计好,并制作成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。效果图如下: (图1) 在开始前,先了介绍一下discuz!的几个模板文件: 1、 header.htm --------------------------------------页面头部 2、 discus.htm---------------------------------------------------------------论坛首页 3、 footer.htm---------------------------------------------------------------页面底部 4、 viewthread--------------------------------------------------------------查看帖子内容 discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是 header.htm+discus.htm+footer.htm这三个文件共同作用的效果。 Heaer.htm对应的是: (图2) Footer.htm对应的是: (图3) 剩下的就是discuz.htm文件显示的了。 当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm和footer.hmt文件通常还会被其它的模版文件引用。也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利用,减少劳动的效果。 下面我们就开始制作: 首先,现在我要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。templates/test文件夹用于存放这套模板的htm文件,在这个目录中新建三个文件header.htm、discuz.htm、footer.htm,打开你设计好的主页html文件,将你想作为头部的那一段代码复制粘贴到header.htm文件中, 相应的将作为底部的那一段代码复制粘贴到footer.htm文件中,其余的代码复制粘贴到discuz.htm文件中。 最后在discuz.htm文件的最顶部和最底部分别加上:{subtemplate header} 和{subtemplate footer} 这两句算是discuz的语言,意思是将header.htm和footer.htm文件包含进来,这样就构成了一个完整的主页面了。 接下来的工作要在论坛后台设置中来完成 (1)进入论坛点击“系统设置——> 界面——> 模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如图4: (图4) (2)在“界面——> 风格管理” 中,在新增界面风格后填入方案名称“test”然后提交即可! Discuz教程 插件制作的基本思路是:(初学者适用) 1.形成插件思路 2.制作插件界面 3.构架程序模块 4.搭建存储数据 5.填充功能语句 6.检查应用错误 7.完善插件功能 前言:为方便互联网数万Discuz!爱好者,更加深入了解Discuz!软件,本人在熟悉Discuz!过程中,顺便将个人经验写给大家。本贴内容由本人定期更新。本贴只介绍Discuz!中部分技术点,本贴紧属个人观点,不足之处,请各位多多指教,在下先此谢过!。“Discuz!”在下文中简称“DZ”。要弄DZ二次开发,必须至少具备如下技能:1)能够理很好理解MVC构架的原理(虽然DZ不是MVC架构的) 2)扎实的PHP基础,熟悉结构化程序,OOP程序的写法及应用 3)熟悉MYSQL就用,掌握SQL语言,懂SQL优化者更佳 4)熟悉使用Discuz!的各项功能 一)Discuz!的文件系统目录 注:想搞DZ开发,就得弄懂DZ中每个文件的功能。 a) Admin:后台管理功能模块 b) Api:DZ系统与其它系统之间接口程序 c) Archiver:DZ中,用以搜索引擎优化的无图版 d) Attachments:DZ中,用户上传附件的存放目录 e) Customavatars:DZ中,用户自定义头像的目录 f) Forumdata:DZ缓存数据的存放目录 g) Images:DZ模板中的图片存放目录 h) Include:DZ常用函数库,基本功能模块目录 i) Ipdata:DZ统计IP来路用的数据 j) Plugins:DZ插件信息的存放目录 k) Templates:DZ模板文件的存放目录 l) Wap:DZ无线,Wap程序处理目录 二)必须记熟Discuz!数据库设计的每个表的功能,每个表中每个字段的功能。 关于DZ数据库设计文档,请参阅DZ相关的项目文档(请从本贴附件中下载) 三)Discuz!的流程控制 a) 后台流程控:DZ后台所有的功能,均需要注册到admincp.php文件,每个功能都至少有一个或一个以上的Action(动作),在admincp.php中,可以定义Action的执行权限,分别为:“admin==1”管理员,或“admin==2 || admin==3”超级版主和版主,每个Action对应一个脚本文件,脚本文件的命名为action.inc.php(*.inc.php),并存放在admin目录下,如执行:admincp.php?action=dodo,相当于执行admin目录下的dodo.inc.php文件 b) 前台流程控制:前台的流程控制比较简单:流程是自由的,如: 首页:index.php 会员注册:register.php; 会员登录:logging.php 发贴程序:post.php 会员信息:member.php 论坛内容:forumdisplay.php 查看贴子:member.php …大部分功能,此处不一一列出… c) DZ根目下的config.inc.php属于整个DZ系统的配置文件 四)Discuz!的数据处理过程 a) DZ对mysql的数据库操作处理全部封装在dbstuff(db_mysql.class.php)类中 b) 所在的外部数据均通过“daddslashes()”初步过滤,然后再过滤,再根据需要处理 五)Discuz!的显示控制(网站多样式风格输出) a) 显示层就是大家通常所看到的网站风格了。DZ中每套风络分别在templates及images下对应一个风格文件的存放目录。网站风格的制作,请参阅详细的DZ风格制作文档 b) DZ网站风格文件处理的原理:其实很简单,DZ使用template.func.php中的parse_template()以PHP正则运算把htm模文件中的模板标签,转换成了PHP代码,并根据styleid保存在forumdata/templates下,这个有点像Smarty 中的技术。 六)DZ中的语言处理 a) DZ前台及后台中、英语言的实现,均是把语句定义成了语变量,然后在模板输入,语句变量的赋值,均放在模板目录中的*.lang.php文件中,DZ在生成网站风格时就加载了这相应的语言包。 七)DZ如何处理用户信息(存取、计算、更新过程) 模板制作前请将你的界面设计好,并制作成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。效果图如下: (图1) 在开始前,先了介绍一下discuz!的几个模板文件: 1、 header.htm --------------------------------------页面头部 2、 discus.htm---------------------------------------------------------------论坛首页 3、 footer.htm---------------------------------------------------------------页面底部 4、 viewthread--------------------------------------------------------------查看帖子内容 discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是 header.htm+discus.htm+footer.htm这三个文件共同作用的效果。 (图2) Footer.htm对应的是: (图3) 剩下的就是discuz.htm文件显示的了。 当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm和footer.hmt文件通常还会被其它的模版文件引用。也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利用,减少劳动的效果。 下面我们就开始制作: 首先,现在我要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。templates/test文件夹用于存放这套模板的htm文件,在这个目录中新建三个文件header.htm、discuz.htm、footer.htm,打开你设计好的主页html文件,将你想作为头部的那一段代码复制粘贴到header.htm文件中, 相应的将作为底部的那一段代码复制粘贴到footer.htm文件中,其余的代码复制粘贴到discuz.htm文件中。 最后在discuz.htm文件的最顶部和最底部分别加上:{subtemplate header} 和{subtemplate footer} 这两句算是discuz的语言,意思是将header.htm和footer.htm文件包含进来,这样就构成了一个完整的主页 面了。 接下来的工作要在论坛后台设置中来完成 (1)进入论坛点击“系统设置——> 界面——> 模板管理”,在新增模板后填入模板名称,模板文 件所在目录,板权信息然后提交即可!如图4: (图4) Getting Started with ER win (Erwin 入门) by Dr. Peter Wolcott Department of Information Systems and Quantitative Analysis College of Information Science and Technology University of Nebraska at Omaha(由内布拉斯加州的奥马哈大学信息科学与技术学院门的信息系统和定量分析博士彼得著) Introduction (介绍) ER win is a popular data modeling tool used by a number of major companies in Omaha and throughout the world. (Erwin是受奥马哈和世界各地的一些主要的公司欢迎的数据模型工具) The product is currently owned, developed, and marketed by Computer Associates, a leading software developer.(该产品是由具有领导地位的CA软件开发公司拥有、开发和销售) The product supports a variety of aspects of database design, including data modeling, forward engineering (the creation of a database schema and physical database on the basis of a data model), and reverse engineering (the creation of a data model on the basis of an existing database) for a wide variety of relational DBMS, including Microsoft Access, Oracle, DB2, Sybase, and others.该软件为多种多样的关系型数据库管理系统,包括 Microsoft Access,甲骨文,Sybase,DB2,和其他人提供支持数据库设计的各个方面,包括数据建模、正向工程(在现有的数据模型的基础上创建数据模式和物理数据库)和逆向工程(在现在的数据库基础上创建数据模型) This brief tutorial steps you through the process of creating a data model using ER win.(你可以通过这个简单教程中的步骤运用Erwin来创建数据模 型) It will not explain all aspects of ERwin, but will show you the minimum necessary to create and use data models for this class. (这个课程不可能全面地讲解Erwin,但它向你展示了必要的最基本的创建和使用数据模型的知识) It consists of three major segments, which correspond to the project-related assignments in your class: (这个课程由三个主要部分组成,它与有关项目任务相符) 1.Creation of a basic data model (Conceptual data model) 创建一个 基本的数据模型(概念数据模型) 2.Creation of a database schema 建立数据库模式 3.Creation of the database创建数据库 没有XHTML基础,不知道什么是CSS?没关系~~~ 从今天开始,我会给各位从0开始讲解如果动手做一个完整的模板。 我相信只要你有兴趣,再抽出一点时间,还得花费一点记忆力(有些东西必须背下来,临时翻书不是好习惯),应付一些基本的样式修改和模板仿制应该还是没问题的。 本教程会很基础,请各位高手轻轻地飘过~~~~~ 首先说一说前期要准备的工具。 工具的选择: 1,当然是FTP啦,个人推荐cuteftp,速度很快…… 2,修改工具:我个人推荐notepad2,原因是体积小速度快能高亮不要钱,而且味道还很好吃呢。。。使用是请把这个工具关联到FTP的默认修改工具里面。 3,DOM树查看工具的选择:这个是用来快速定位CSS的选择器的。现在一般的浏览器都能支持DOM模型了,比如opera,IE7起,chrome,FF……(什么?360?什么?遨游?什么……?疼讯?赶紧扔掉!!!!!),一般这四个浏览器是必须的,因为要比较调试出来的CSS 在各个浏览器是否兼容。最后还要考虑IE6的情况,(这个IE6,虽然被千夫所指,但是仍然有很多人在使用,你能怎么办?) 关于IE6,请到微软官网上下载一个专用开发插件。 (以上工具介绍纯属自愿,如果你有自己习惯的工具,请飘过~~) 关于风格系别的选择: 现在国内主流网站,我觉得大多数追着两种潮流,第一种是欧美的那种绚丽的,圆角的,立体阴影的特点的,详见国内各大微薄。。。这种网站风格有许许多多的导航网站。因为图片很多,结构复杂。模仿起来也比较费劲。但是只要把他们的结构弄清楚后,也是简单的。 还有一种就是日系(我个人巨爱啊……) 日系的网站简约大方,一眼看过去重点突出(无论是上面的两个基本点还是下面的一个中心 )。但是其实日系的网站虽然简单,但还真没有几个人做的好看的,因为,你不知道怎么配色啊…… 一般看来,美系的字体都稍大,而日系字体偏小。 千万不要把这两种风格综合起来,因为那样剧难看(其实不是剧难看,而是难看致死,死到没JJ,比如某网站风格……) 好吧,先说明,我更新的时间不会太快,大概好几天更新一个。 由于水平有限,如果发现有错误,请迅速指出来,免得误人。。。 Erwin教程 erwin是一个数据库关系实体模型(ER Model)设计工具,与Power Designer(Sybase公司开发)成为最常用的两种数据库设计工具。目前该工具被CA收购,成为CA数据库解决方案中的一个关键部分。与微软的Vision相比,erwin只能设计er model,而且设计界面选项较多,相对来说并不那么友好,增加了使用的难度。但如果你是一个出色的数据库应用开发者,那你一定会发现erwin的好处。因为在设计模型层次和复杂度提高以后,visio难以应付众多的数据对象设计和对象之间的关系设计。而且erwin提供了数据库正向工程、逆向工程和文档正向工程功能,可以把设计直接实施到数据库后者把数据库中的对象信息读到erwin设计中,也可以生成设计文档,格式还可以自动定义。在本教程中,将告诉大家我是怎样简单的使用erwin来进行数据库设计的。这里强调了简单二字,就是说有很多只有20%机会用到的80%的功能本教程是不会介绍的。本文用到的erwin版本是4.0。 教程一:Table & Subject Areas Table是数据库中最基本的物理元素,保持了应用的持久数据。在普通的信息系统数据库结构设计中,有90%的工作是在设计table。而table的字段定义和表间的关系,也反映了整个系统的数据流图和大致的业务流程。 Subject Areas是erwin提供逻辑元素,在实际数据库中并不存在。它的含义是把物理元素和逻辑元素按照实际意义划分成各个主题,在主题域中添加对元素的引用,起到一个按图索骥和目录的作用。有一个缺省的主题域Main Subject Area,所有的元素都会在该主题域中存在。在我本人的设计方法中,我会新建诸如“参数表”,“分户表”,“控制表”,“临时表”,“明细表”,“日志表”和“总帐”等主题域。 下面跟着我的说明,一步一步来设计table: 装好erwin4.0后,打开程序。提示你是创建一个新模型还是打一个已有的,选择创建新模型。在Model Type中选择Physical(物理模型),下面的Target Database默认值就是Oracle8.x,使用默认值,点击OK,创建了一个空白的模型。 [经验] Discuz!模板制作教程 本帖最后由 PuBor于 2010-10-1 01:05 编辑 接触Discuz! 有一段时间了,使用的风格都是别人的免费品。一来自己的美工水平实在不行,二来网上很少有比较完整的模板制作教程。因为工作的需要,现特写了一份模板的制作教程。小弟才疏学浅,不对之处还请指正。 模板制作前请将你的界面设计好,并制作成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。效果 图如下: (图1) 在开始前,先了介绍一下discuz!的几个模板文件: 1、 header.htm --------------------------------------页面头部 2、 discus.htm-------------------------------------------------论坛首页 3、 footer.htm------------------------------------------------页面底部 4、 viewthread---------------------------------------------查看帖子内容 discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是header.htm+discus.htm+footer.htm这三个文件共同作用的效果。 Heaer.htm对应的是: (图2) Footer.htm对应的是: (图3) 剩下的就是discuz.htm文件显示的了。 当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm和footer.hmt文件通常还会被其它的模版文件引用。也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利 用,减少劳动的效果。 下面我们就开始制作: 首先,现在我要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。templates/test文件夹用于存放这套模板的htm文件,在这个目录中新建三个文件header.htm、discuz.htm、footer.htm,打开你设计好的主页html文件,将你想作为头部的那一段代码复制粘贴到header.htm文件中, 相应的将作为底部的那一段代码复制粘贴到footer.htm文件中,其余的代码复制粘贴到 discuz.htm文件中。 最后在discuz.htm文件的最顶部和最底部分别加上:{subtemplate header} 和 {subtemplate footer} 竭诚为您提供优质文档/双击可除 discuz,更换模板 篇一:discuz!论坛系统diy模块模板使用教程 discuz!论坛系统diy模块模板使用教程 今天为大家讲解一下在使用diy过程中的一些技巧与方法 仔细阅读,受益匪浅 一、如何在模块中增加“标题”及“更多”的链接如下图样式 方法: 通过框架或模块都可以实现上述样式,我们以框架为例,我们在diy的时候选中要编辑的框架点击编辑如下图所示之后点击标题 在弹出的层中可以添加标题及链接,位置选择居左如下 图所示同时可以设置标题的颜色及大小 接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示,会“复制”出一份新的标题你只需修改就可以了 把其中的“精彩教程”改成“更多”,链接以及字体、 颜色都进行修改就可以了,这里的位置一定要选择“居右” 完成,这样框架就有了标题及更多,模块的方法同上 二、diy的模块中如何调整链接的颜色如下图样式 方法: 选中要修改的模块,点击编辑,选择数据如下图所示 在弹出层中选择编辑如下图所示 篇二:模板插件-discuz的专业模板插件修改 templates/default默认模板文件包 |https://www.360docs.net/doc/2514457937.html,ng.php道具语言包 |---activity_applylist.htm活动特殊主题列表 |---activity_export.htm |https://www.360docs.net/doc/2514457937.html,ng.php后台管理界面语言包(后台搜索依赖此文件) |https://www.360docs.net/doc/2514457937.html,ng.php后台管理菜单语言包 |https://www.360docs.net/doc/2514457937.html,ng.php后台管理,跳转提示信息语言包 |---adv.htm论坛广告功能处理模板文件,被各个页面广告位调用 |---ajax_attachlist.htmajax获取附件列表模板文件 |---ajax_imagelist.htmajax获取图片列表模板文件 |---ajax_magiclist.htm |---announcement.htm公告查看页 Erwin工具使用指南(版本号:V 1.0) 文档修订状况 目录 第一章基本概念 (4) 1.1 数据模型(Modal) (4) 1.2 视图 (4) 1.2.1 逻辑视图(Logical) (4) 1.2.2 物理视图(Physical) (4) 第二章操作指南 (6) 2.1 新建模型 (6) 2.2 视图切换 (7) 2.3 新建主题区域 (7) 2.4 切换主题区域 (9) 2.5 编辑主题区域 (10) 2.5.1 选择现有数据实体到指定的主题区域。 (10) 2.5.2 在主题区域新建数据实体 (11) 2.5.3 在主题区域删除数据实体 (12) 2.6 数据实体导航 (13) 第一章基本概念 1.1 数据模型(Modal) 数据模型是数据实体(Entity)和数据实体间的关系(Relationship)总和。可以简单的理解认为数据实体就是对应数据库表,实体间的关系就是表之间的关系。 1.2 视图 Erwin对数据模型提供两种视——逻辑视图、物理视图。 1.2.1 逻辑视图(Logical) 是以业务需求的概念对数据模型进行描述。通俗的说,在逻辑视图中我们可以用中文或描述性的语言来描述数据实体(表)和数据实体的属性(字段)。下面就是一个对车辆信信息实体的逻辑视图。 1.2.2 物理视图(Physical) 物理视图与逻辑视图一一对应,物理视图是针对一种具体的数据库进行逻辑视图的物理映射。通俗的说,在物理视图中我们必须为每一个在逻辑视图中出现的数据实体(表)指定一个可被具体数据库接纳的表名称,譬如我们使用MySQL作为我们的数据库实现,我们就必须为具体的实体指定一个数据库表名(英文单词或词组),同样的对实体属性(字段)的命名也需进行转换,数据类型也需要具体为数据库支持的数据类型。下面就是对应车辆信息实体针对MySQL数据的物理视图。 Discuz模板修改教程演示 Discuz教程演示, 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)然后点击[编辑] 后就可以进入该模板的风格配色方案的编辑页面,此根据你的界面风格配色方案设置一下你的配色方案。 具体的设置参数,主要对应的前台显示效果参照如下链接地址的标注: _f 填写好后,点击“提交”,更新一下缓存,就ok了。在这里我只是简略的介绍一下安装成品模板的方法。 在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm ,它的代码是:$extrahead {subtemplate css_script} 根据css的特点,在css_appendhtm里的样式将覆盖css_commen.htm中的文件的。注意只是覆盖原有的属性。没有修改的属性将依旧调用css_commen.htm的样式。这样我们各以节省很多的代码。 同样对于css_script.htm同样如css_commen.htm一样。你只需要在新建一个文件 接触Discuz! 有一段时间了,使用的风格都是别人的免费品。一来自己的美工水平实在不行,二来网上很少有比较完整的模板制作教程。因为工作的需要,现特写了一份模板的制作教程。小弟才疏学浅,不对之处还请指正。 模板制作前请将你的界面设计好,并制作成html+CSS的格式。这里我就以大魔王的“蓝色经典”作为样版(知识共享,希望大魔王不要介意,如有侵权,请及时通知我)。效果图如下: (图1) 在开始前,先了介绍一下discuz!的几个模板文件: 1、 header.htm --------------------------------------页面头部 2、 discus.htm---------------------------------------------------------------论坛首页 3、 footer.htm---------------------------------------------------------------页面底部 4、 viewthread--------------------------------------------------------------查看帖子内容 discuz!论坛的页面通常是几个模板文件共同作用下达到的效果,如图1就是header.htm+discus.htm+footer.htm这三个文件共同作用的效果。 Heaer.htm对应的是: (图2) Footer.htm对应的是: (图3) 剩下的就是discuz.htm文件显示的了。 当然你要将首页显示的效果就制作成一个文件模板也是可以的,这里之所以分开,是因为header.htm和footer.hmt文件通常还会被其它的模版文件引用。也就是说,其它的页面(比如发贴的页面)的头部、底部与首页的头部、底部完全一样,分开来写就可以达到重复利用,减少劳动的效果。 下面我们就开始制作: 首先,现在我要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。templates/test文件夹用于存放这套模板的htm文件,在这个目录中新建三个文件 header.htm、discuz.htm、footer.htm,打开你设计好的主页html文件,将你想作为头部的那一段代码复制粘贴到 header.htm文件中, 相应的将作为底部的那一段代码复制粘贴到footer.htm文件中,其余的代码复制粘贴到discuz.htm文件中。 最后在discuz.htm文件的最顶部和最底部分别加上:{subtemplate header} 和{subtemplate footer} 这两句算是discuz的语言,意思是将header.htm和footer.htm文件包含进来,这样就构成了一个完整的主页面了。 接下来的工作要在论坛后台设置中来完成 (1)进入论坛点击“系统设置——> 界面——> 模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如图4: (图4) (2)在“界面——> 风格管理” 中,在新增界面风格后填入方案名称“test”然后提交即可! (3)提交方案名称后,您就可以在界面风格中看到您所定义的新的风格方案。如下图: ERWIN操作手册 操作手册 文档修订 版本日期更改人描述(注明修改的条款或页)V1.0 王朝操作手册 2003年9月8日 山东浪潮齐鲁软件产业股份有限公司 电子政务产品事业部 目录 1.通过Erwin 建立er1文件...........................................................................................................2 2用ERWin 的方法将ERWin 中的表导入到数据库中.................................................................6 3用ERWin 的方法将数据库表结构导入到ERWin 中 (18) Erwin 数据库设计工具 介绍 数据库设计错误将会导致在很长一段时间内不断听到各种抱怨,因此,选择 一个适合的数据库开发工具对数据环境进行规范将非常重要 . Erwin 在物理数据库的生成和反向生成、双向同步和比较功能方面居领先地位 ,可以进行逆向工程、能够自动生成文档、支持与数据库同步、支持 团队式 开发,所支持的数据库多达20多种。 Erwin 数据库设计工具可以用于设 计生成客户机/ 服务器、Web 、Intranet 和数据仓库等应用程序数据库。 1.1.通过通过Erwin 建立er1文件文件 在开始\程序菜单中打开Erwin,在Erwin 主窗口中单击create model 图标弹出如下窗口: 在new model type选项中选择physical项,在database中选择oracle类型,version中选择9.x版本,如下图: 点击ok按钮. 1.1建表 Discuz!模板风格制作: 1、在Photoshop中制作风格页面并切图保存; 2、制作html文档,css调整; 在制作html文件之前,您必须熟悉Discuz ! 模板的元素和css。需要注意的是,在定制您的css的时候建议您参 考Discuz!模板文件css.htm来制作,这样您所制作出来的模板文件就可以方便的在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样式页面 8、viewthread.htm --- 阅读主题 9、forumdisplay.htm --- 论坛主题列表 10、forumdisplay_subforum.htm --- 子论坛列表 当然刚开始接触模板制作也可以只修改其中的一部分,只要将css.htm,header.htm,footer.htm这三个文件按照您的风格制作出来就可以让模板风格作变换,其他文件也可以根据您对风格的要求进行调整。 Discuz!模板文件的简单讲解: 刚接触discuz!模板文件,您会发现在这些htm文件中包含着很多像: ………… {template css} …… $charset {lang memberlist} {MAINTABLECOLOR} 这样6类在一般htm文件中不常见的语句和变量,这些语句是Discuz!模版中的特有语句,具体说明如下: ………… 这类语句并非普通HTML中的注释语句,而是Discuz!特有的模板判断语法,就好比php或者,
,
这一个,因为他本身就是一个单个标签,图像定义在src属性里,主要说说他的属性,src,这个用来指定文件图片所在的位置,大家可以想想一下超链接关联到另一个资源使用的href,这两个的不同,一个是指定本身,一个是指向外部。
定义一个表格,属性包括align:表格自身的对齐方式。border:指定边框的宽度。width:指定表格的宽度。等
定义表格的一行,table row。里面的属性可以有align,用于指定其中的文本的水平对齐方式。valign,指定文本的垂直对齐方式。等 定义单元格,这个是作为 的子节点,在一行里分多个车厢。重要的属性值包括:align:用于指定文本的对其方式。colspan:用于指定这个车厢占用了几个车厢的长度,定义该单元格跨多少列。rowspan:用于指定这个车厢占用了几个铁轨的宽度,定义该单元格横跨了多少行。 等,但是个人建议首先把上面三个标签用熟练了再去看其余的,才不会思维混乱。~
这个是定义六种标题,事实上我们也经常用这个来设置页面里的某一些标题,当然,式样都是处理过的。比如discuz系统的logo大家看看源代码,它是不是定义在
的标签内呢?看看它的源代码和式样:
换行。
定义水平线。注意这两个书写要规范化,中间有空格,后面有斜线。dz模板开发教程
Erwin工具使用指南
discuz模板制作彷站教程
Discuz模板教程
Discuz教程
discuz模版制作
ERwin使用说明(中英文)
经典教程:discuz x2 风格模板完整教程
ERwin简单教程
Discuz!模板制作教程
discuz,更换模板
Erwin工具使用指南
Discuz模板修改教程演示
教你Discuz模板制作详细步骤
ERWin简明教程
discuz 模板教程