从0开始学做DISCUZ风格之四——动手做第一个风格

好了，看了上面三个教程的内容后，各位是不是觉得和做模板关联不大呢？
好吧，如果上面三课的内容没有学好，接下来的东西可能会看不明白哟~~

首先说说工具准备：DOM工具，FTP工具，记事本，浏览器.

大家学习的时候可以依次模仿DZ风格，模仿DZ以往版本PW风格等类似论坛风格，模仿任意网站风格，自创风格的制作的顺序介绍。。
这个是根据这几个和DZ论坛的结构的相似性的大小来确定的。

这一节课我们的内容是仿制同结构的DISCUZX风格。就像我们小时候写作文之前，老师会先让我们仿句，造句一样。仿制应该是第一步了。
这里特别声明：请尊重模板原创人员的心血，不要在实际中使用仿制的风格。
在这里我们仅仅是为了学习，但是不允许大家使用仿制的风格。

在制作之前，我们首先来回忆一下我们第一课里说过的DISCUZ的页面结构的问题。
在制作风格的时候，我们首先对于这个页面的结构要有一定的了解。我们打开DOM工具，来看看DZX的页面结构。
首先是位于body节点下的几个主要子节点的结构：

如果是仿制同版本DISCUZ页面结构，那将是一件非常简单的事情，因为结构相同，不必考虑结构问题。大家只要注意我们下面会说的几个地方就可以。


目录结构，这里是仿制的一个重点和难点。


论坛列表部分。这里一般涉及到分列表的头部的风格仿制。


弹出页面。这个是典型的ajax应用了。

接下来，我们来了解一下这个在ftp上看到的不同。了解一下模板制作需要在服务器上操作的部分。
首先打开的是根目录下的template文件夹，这个里面的每个文件夹代表一个独立风格的文件夹，里面装的是这个风格模板，CSS式样，图片。

制作一个风格，首先需要做一些前期工作，这些工作是必须的，但是操作步骤却不是唯一的。
现在我介绍一种常用的步骤，大家可以看图。

然后我们来看看，如果仿制一个风格，到底需要修改的部分有哪些呢？
两个风格截然不同，看上去仿制很麻烦，但是事实上我们需要修改的部分却很少。
首先明确：我们修改模板，使用dom工具查看源论坛，我们的顺序一般为从底层结构开始，首先是整个页面的字号，字体等。
然后是最底层的整个页面背景，然后是目录，表头等。
我们现在开始动手吧~~

今天我们来手动做一个最简单的模板，为了让这个教程有一般价值，我们来动手模仿新浪微薄模板到X。希望大家学会一般方法。
首先看看他们的初始图。


这样看起来难度是不是很大？没关系，大家根据我上面说的步骤一步一步做就可以了。
注意看看宽度，新浪是956px，X默认是970px，我们先在把这个宽度改过来。
在上面说过的extend_common.css里添加这样一段

1. .wp {
   
2. width: 956px;
   
3. }
   
4. .mn {
   
5. width: 630px;
   
6. }
   
7. #ct {
   
8. background: white;
   
9. }
   
10. #hd .wp {
    
11. background: none;
    
12. }
    
13. [/quote]这段代码做一些前期的宽度调整。
    
14. 首先我们按照从底层做起的原则，首先做底层背景。
    
15. 我们用DOM查到微薄的背景如下：[indent]body {
    
16. background: #9EDFE8 url([img]http://timg.sjs.sinajs.cn/miniblog2style/images/tlogin/bdybg.jpg[/img]) no-repeat 50% 0%;
    
17. background-color: #9EDFE8;
    
18. }

复制代码

现在我们首先把这个图片上传到2010那个文件夹里的image里
然后去后台填写背景。

这样修改后，我们会发现，现在样式变成了这样，我们去对比一下，是不是背景搞定了？


还有一些主体部分比如颜色，我们发现超链接的颜色不一致，我们在后台风格设置修改一下；
接下来是里面的部分，我们看看这个结构其实也很像吧，都有边栏，而且都有上面和下面的部分（我真啰嗦呀）
嗯嗯，好吧，由于我们做的只是论坛部分。所以这些主体部分都属于论坛，如果是模板的话我们要换到forum文件夹里去了。

等等，差点忘了，这个尾部是属于公共的，我们先来搞定尾部吧。
我们先来查查新浪微薄底部的式样：

1. .bodybt {
   
2. background: url([img]http://timg.sjs.sinajs.cn/miniblog2style/images/tlogin/bdybt.png[/img]) no-repeat;
   
3. height: 54px;
   
4. padding: 20px 10px 0px 26px;
   
5. position: relative;
   
6. width: 920px;
   
7. }

复制代码

这里是不是有一个图片啊？所以先把这个图片放到我们的图片夹子里去；
然后写入CSS文档如下代码：

1. /*footer*/
   
2. #ft {
   
3. background:url({STYLEIMGDIR}/bdybt.png) no-repeat;
   
4. margin: -5px auto 0;
   
5. }
   
6. #ft p { padding:0 15px;}

复制代码

大家请思考一下，为什么要修改了一些东西？
看到的结果如下：


好吧，接下来我们转移到forum文件夹，来进行主体部分的修改。但是CSS的部分还是在common文件夹里。
首先看看他们比较风骚的上面左边的式样：

1. .login_l .tit {
   
2. background: url([img]http://timg.sjs.sinajs.cn/miniblog2style/images/tlogin/tit.jpg[/img]) no-repeat;
   
3. float: right;
   
4. height: 164px;
   
5. margin-top: 13px;
   
6. position: relative;
   
7. width: 682px;
   
8. }

复制代码

这里有一个背景图片，不错，我们要移植到相应的区域。首先看看对应的结构，大约是对应class="bm cl mtn"这个div
添加如下式样：

1. /*main top left*/
   
2. .mn {
   
3. background:white url({STYLEIMGDIR}/ml.jpg) no-repeat;
   
4. }
   
5. .cl .mtn { height:213px;}
   
6. #ct {
   
7. border:none;
   
8. }
   
9. .ptn {
   
10. padding-top: 127px !important;
    
11. }

复制代码

得到的结果如下：


同理对右边的进行设置背景：

1. /*main top right*/
   
2. .sd { background:white url({STYLEIMGDIR}/mr.png) no-repeat;}

复制代码

得到如下结果：我们会发现，由于我们现在的右边宽度为323px，而图片宽度为267px；
所以我们有两种办法，第一是修改图片，第二是修改右侧宽度。
我很懒。。。所以懒得开photoshop，就修改页面宽度算了~~
所以修改如下式样：

1. .mn {
   
2. width: 689px;
   
3. }
   
4. /*main top right*/
   
5. .sd { background:white url({STYLEIMGDIR}/mr.png) no-repeat;width:267px;}

复制代码

现在看看是否正常：


好吧，看上去似乎好了，我们来看看在不同浏览器和分辨率下的效果，使用ctrl++或者ctrl+-查看发现基本无碍。

[quote]由于我们本次课程的目的只是为了引导大家走入模板制作的大门，所以到这里为止了。接下来的具体细化的工作还要看大家自己的了。
如果有什么不明白的地方，欢迎随时提问。
如果你在看这个教程，请务必自己动手来做做看，如果这堂课有很不明白的话，则需要去看前三课的内容。
这堂课的风格查看地址：http://poosou.sk.9.chengguan.cc/forum.php

郑重申明：这一课和下一课全部是仿制风格。各位同学在仿制风格后，请不要使用仿制风格，尊重原创人员的劳动成果。这两课的内容仅供学习，制作完成后的仿制风格不得发布或者使用。

这堂课我们说了制作风格的一些前期工作，和结构相似的风格的简单仿制。下一堂课，我们将介绍模板大的结构调整，以及自定义脚本的撰写。

本期作业：请利用discuzx为基础，仿制如下网址的风格的某一个，做好后请给出预览地址。
http://hollyhue.myshopify.com/
http://cssnature.org/
http://www.adobeusergroup.nl/
http://www.wakeinteractive.com/

留个位置做作业解答

顶一顶，大家好好看看

这个必须支持

终于能看了额！！ 火速插入学习~

作业问题：

我想给整个板块列表区和旁边的边栏弄个背景 结果……

disuczX的门户~~~~~~~~~~【除了DIY，就没别的办法制作模板了吗？】





楼主有水平就写个门户首页的制作教程。非DIY的

(EM:131:)  很辛苦，支持。

好东西啊 楼主加油啊

灰常好的教程。

应该多发点这类的东西。