【diacuzX】门户diy风格模版制作教程。[静态页面套DZ]

wbcsa · 发表于 2011-9-2 10:50:01

本帖最后由 wbcsa 于 2014-3-2 15:16 编辑

简单说一下如何把自己做好的静态网页套到DZX上.

搞个QQ群，希望方便交流.想发广告的就别进来了！  群12715466。

我的站潼关 http://www.itongguan.com/ 虽然不是完全静态做的。但是学会了这边文章。改什么模版都是小才一碟儿！

我也是才开始研究DZX风格不久，有什么不对之处大家指出，多多交流共同提高。
------------------------------分割------华丽不？-----------------------------------------------------------------------------
下面就不拿自己的网站献丑了.截取一段腾讯新闻页举例说明下.

一、首先你要会PS, 设计出你的网页,当然其他软件也行，或者模仿一下别人的网站也可以.
然后切图，排版,成为静态HTML文件,测试好兼容性.

这里不详细说了.要是不懂html 还是需要去学一下再来看.

做好准备以后下面开始往DZ里面套！

二、（说明下这里只说的是门户页,因为BBS页的风格我还没研究，所以先用默认的BBS风格）
   1、为了不影响默认风格,首先我们复制一份默认风格见下图：

   2、到template\目下创建一个文件夹。名字自取，我这里就叫test1.

   3、到模板管理里面新增一个模板。名字自取,路径指定到刚才新建的文件夹.如下图

      4、设置好以后编辑刚才复制出来的风格,如下图
            5、设置好以后把这个风格设置为默认。
=========================================================================
三、下面开始正式门户制作。
   1、在刚才template\建立的test1文件夹下面创建2个文件夹分别命名为 common 和 portal。
   2、到template\default\common下面复制 common.css  head.htm和footer.html 粘贴到template\test1\common。
这里我们先不制作头部和底部先用默认的头和底.    3、然后把你设计的静态页面命名为index.htm复制到\template\test1\portal下.
   4、在论坛所在根目录下创建一个名为test1的文件夹，最好和你的新增模板的文件夹名字一样或者相似。只要自己方便识别就行.建立好之后把你静态页面的 css文件图片文件 js文件等全部复制到这个文件夹里面。
四、以上完成之后刷新下你的门户发现是没有加载样式的. 这表示你前面的工作成功,下面开始改代码！
   1、首先把你的静态页面的<body>以上和</body>一下全部删掉,包括body标签.
   2、把这句代码

<style id="diy_style" type="text/css"></style>

复制代码

复制到文件最顶部，下面这段复制到最底部

复制代码

3、把你的CSS文件调用进来，放到
<style id="diy_style" type="text/css"></style>下面就可以了，下面是我的，改好路径就好了.这里应该把CSS js全部调用进来.

<link href="test1/images/css.css" rel="stylesheet" type="text/css" />

复制代码

4、保存好后刷新下门户发现出了图片基本框架都出来了。图片错误是因为路径不对。把路径全部改过来。
      在原来路径前面加上刚才在根目录下创建的文件夹的名字就好了，全部替换就可以了。如图
==========================================================================
五、到此你的静态网页已经转换到DZ下了.下面开始添加框架和模块.    1、首先把不带CSS的标签替换成。<div id="diy1" class="area"></div>
            1-1、这个具体什么意思我也不知道，反正规则是 diy1 要和他所包含的的DIV标签的ID保持一致,且具有唯一性.class="area"保持不变。比如下图。飘红的部分是替换的.如图第二部分显示所有的都是diy1这样就错了.要保持唯一性.不能重复！ 如图二.

   这部分替换后我们就可以去diy页面添加框架和模块了
六、1、首先添加框架如下图。把所有框架的标题全部去掉.

2、添加模块
.添加帖子模块.  属性自己设置.这里没法演示.  根据自己的模版灵活掌握.  样式也要设置  边框外边距内边距都为0。潼关

举一反三.其他部分自己试试。

ps:有人问网页里文字是怎么出来的..
答：  大家看完教程多熟悉熟悉DIY里面的模块。就知道那些文字图片是怎么调用出来的了！

wbcsa · 发表于 2011-9-2 13:10:59

本帖最后由 wbcsa 于 2012-5-12 00:41 编辑

按照以上方法，任何网站的风格你都可以copy了！呵呵！

配合下面这篇教程。BBS加门户都可以做了！
https://discuz.dismall.com/thread-1369809-1-1.html

西安男科医院

491059590 · 发表于 2011-9-2 14:38:00

挺不错

zhuzhuxia2011 · 发表于 2011-9-3 15:44:28

新手学习~呵呵！

liquanorg · 发表于 2011-9-3 16:58:04

本帖最后由 liquanorg 于 2011-9-3 16:58 编辑

挺不错

签名www.qqgexingqianming.org
头像www.qqtouxiang.org
分组www.qqfenzu.cc
QQ帝国www.qqdiguo.net

ning0952 · 发表于 2011-9-4 13:13:21

挺起来不错

天自强 · 发表于 2011-9-4 22:41:16

很好很强大，学习了

胡丑牛 · 发表于 2011-9-5 13:31:39

学习了，谢谢~

hongyelx · 发表于 2011-9-6 21:42:28

谢谢分享啦，真的很有帮助呀！

罗汉绿草 · 发表于 2011-9-7 17:39:48

提示: 作者被禁止或删除内容自动屏蔽

		自动登录	找回密码
密码			立即注册

【diacuzX】门户diy风格模版制作教程。[静态页面套DZ]

本帖子中包含更多资源

评分