查看完整版本: 入门篇（上）｜从入门到精通 Discuz模版风格制作指南

入门篇（上）｜从入门到精通 Discuz模版风格制作指南

[b][size=4][color=#8b0000]入门篇
[/color][/size][/b][color=darkorange]如果您已经了解基本的风格制作，您可以跳过此部分。
当然，本文在入门的基础上会进行一定的扩展，可不要错过了哦。[/color]

[b][color=yellowgreen][color=deepskyblue]1.了解Discuz的模版机制[/color]
[/color][/b]Dz的模版风格由两个主要部分组成：一是[b]模版套系[/b]，二是[b]界面方案[/b]。
默认模版套系是一切风格的根本，其位于论坛目录下的templates/default，可以看到其中有很多的htm文件，这就是DZ的模版。今后的一切修改都要基于这个目录下的文件。
如果说模版套系是骨架，那么界面方案就是模版风格的血肉。其规定了模版风格的名称，使用的界面图片目录和Smilies 图片目录，以及决定风格表现的字体，表格，颜色。
了解了这些，对我们开始进行模版风格的制作是非常重要的。

[b][color=deepskyblue]2.制作属于自己的第一个风格
[/color][/b]大多数情况下，我们只是希望风格能切合自己的论坛主题，而不是其他的什么。为了避免千篇一律，才有了许许多多的风格，本节中，我们通过[b]修改界面方案[/b]，来制作属于自己的第一个风格。

假设你要制作一个环保网站，而DZ默认的蓝色又不能很好的体现这个主题，我们首先想到的就是找一个绿色的模版。就在这时，你看到了一个很不错的绿色模版。
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/eg_2OaUc7cJHUQB.jpg[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92155&nothumb=yes][b]eg.jpg[/b][/url] (42.38 KB)
2006-11-17 23:34


你很想使用这个模版，但是站长竟然不允许！没办法，自己动手，丰衣足食。
[color=red]（在这里要说明，我并不提倡在没有站长同意的情况下Rip网站的风格，毕竟是他人辛勤劳作的结晶）[/color]

我们来到自己网站的后台（以D5为准）。论坛管理——>界面风格，看到如下界面。
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/pic2_XdoQuOf44Dzi.jpg[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92156&nothumb=yes][b]pic2.jpg[/b][/url] (42.75 KB)
2006-11-17 23:34



在新增处填上您想要的风格名字，然后提交。这时新的界面已经添加成功了，我们点击详情。
里面还是空空如也，接下来就要开始风格制作啦!
首先是基本的风格设置 引用:[indent]界面方案名称:（[u]您设定的值[/u]）
匹配模板:[u]默认模版套系[/u]
论坛 logo：（[u]您设的Logo地址[/u]）
界面图片目录：images/green（[u]请创建这个目录[/u]）
Smilies 图片目录：images/smilies [u]默认表情目录即可[/u][/indent]
接下来是文字的设置。您可以对照默认的风格来进行设置。

[align=right][table=40][tr][td][color=darkorange][b]Tips:[/b][/color][color=#333333]其他可以对照默认风格的选项[/color][/td][/tr][tr][td]外表格宽度
主表格宽度
主表格边缘空隙
主表格边框宽度
主表格内边框宽度[/td][/tr][/table][/align]


直到这一步 内表格中超级链接文字颜色，不能按照默认的设置了，因为接下来的设置都涉及到模版的配色了。

怎么办？[b]您要去下载一个吸色器[/b] [url=http://www.skycn.com/soft/20596.html]http://www.skycn.com/soft/20596.html[/url]
之后对比下图来获取目标论坛(本例中的[url=http://www.5d6d.com/bbs.php]http://www.5d6d.com/bbs.php[/url])的不同部分的颜色。填入编辑界面方案之中。
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/s1_o68UaoCtldcB.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92157&nothumb=yes][b]s1.gif[/b][/url] (100.36 KB)
2006-11-17 23:34


[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/s2_QPfKL05qLWgF.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92158&nothumb=yes][b]s2.gif[/b][/url] (102.76 KB)
2006-11-17 23:34


[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/s3_QwWZtrltpgNE.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92159&nothumb=yes][b]s3.gif[/b][/url] (85.03 KB)
2006-11-17 23:34



看看你的配色和教程中的有什么不同，这里使用的是翅膀。提供的配色方案。
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/ps_SVpENyZ4MQl8.jpg[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92160&nothumb=yes][b]ps.jpg[/b][/url] (213.4 KB)
2006-11-17 23:34



完成啦！提交吧。
我们通过index.php?styleid=您的styleid(例如index.php?styleid=3)来看看刚才制作的风格。
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/demo_sK9R2q3qqhn6.jpg[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92161&nothumb=yes][b]demo.jpg[/b][/url] (82.57 KB)
2006-11-17 23:34


……怎么会这样？
[b]因为没有传图片[/b]。每个风格可以使用单独的图片目录以配合风格配色，记性好的朋友应该还记得开始设置了images/green，我们到[url=http://www.5d6d.com/bbs.php]http://www.5d6d.com/bbs.php[/url]上把需要用到的文件全部另存为到这个目录中。

[align=right][table=80][tr][td][b][color=#ff8c00]Tips:[/color][/b][/td][/tr][tr][td]为了防止图片缺漏，您可以对比默认图片目录中的文件保存目标网站的模版图片。[/td][/tr][/table][/align]
再看看……
[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0611/demo2_x7ct1r59Eqxf.jpg[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=92162&nothumb=yes][b]demo2.jpg[/b][/url] (79.44 KB)
2006-11-17 23:34


大功告成，您的第一个自己制作的风格就这样完成了。
现在，您可以导出您制作的风格，并与图片文件一起打包，发到网上与朋友们共享了！

我刚来~~~嘿嘿~~

实乃人间惨剧，竟无语凝噎

看了楼主的帖子,不由得精神为之一振,自觉七经八脉为之一畅,七窍倒也开了六窍半

大致看明白了，楼主的思维太过发散、太过跳跃了。楼主，加强集中精力叙述一件事情的能力。不要再发散了