您现在所在位置:主页 > 服务项目 > 网站建设 > 网站建设知识 >

discuz制作门户首页DIY模板教程

时间:2013-09-03 09:35     点击:次     文章来源:西安网站建设|设计     [关闭]

一、做 discuz门户模板 首先你要会PS, 设计出你的网页,当然其他软件也行,或者模仿一下别人的网站也可以。 然后切图,排版,成为静态HTML文件,测试好兼容性。 这里不详细说了。
 

一、做discuz门户模板首先你要会PS, 设计出你的网页,当然其他软件也行,或者模仿一下别人的网站也可以。

然后切图,排版,成为静态HTML文件,测试好兼容性。

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

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

二、(说明下这里只说的是门户页,因为BBS页的风格我还没研究,所以先用默认的BBS风格)

1、为了不影响默认风格,首先我们复制一份默认风格见下图:

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

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

 
f69264fd5266d016a2953994972bd40734fa354c.jpg
4、设置好以后 编辑刚才复制出来的风格,如下图

 
91965fb1cb134954427d68c0564e9258d0094af9.jpg
5、设置好以后把这个风格设置为默认。  =========================================================================

三、下面开始正式门户制作。

1、在刚才template建立的test1文件夹下面创建2个文件夹分别命名为 common 和 portal。

2、到templatedefaultcommon下面复制 common.css head.htm和footer.html 粘贴到template est1common。

这里我们先不制作头部和底部先用默认的头和底。 3、然后把你设计的静态页面命名为index.htm复制到 emplate est1portal下。

4、在论坛所在根目录下创建一个名为test1的文件夹,最好和你的新增模板的文件夹名字一样或者相似。只要自己方便识别就行。建立好之后 把你静态页面的 css文件 图片文件 js文件等 全部复制到这个文件夹里面。

四、以上完成之后刷新下你的门户发现是没有加载样式的。 这表示你前面的工作成功,下面开始改代码!

1、首先把你的静态页面的以上和一下全部删掉,包括body标签。

2、把这句代码

<!--{subtemplate common/header}-->

 

复制代码复制到文件最顶部,下面这段复制到最底部

<!--{subtemplate common/footer}-->

复制代码 3、把你的CSS文件调用进来,放到<!--{subtemplate common/header}-->

下面就可以了,下面是我的,改好路径就好了。这里应该把CSS js全部调用进来。

 

复制代码 4、保存好后刷新下门户发现 出了图片 基本框架都出来了。 图片错误是因为路径不对。把路径全部改过来。

在原来路径前面加上刚才在根目录下创建的文件夹的名字就好了,全部替换就可以了。如图

 
045a9b540923dd541b1027ccd109b3de9d8248f9.jpg
==========================================================================

五、到此你的静态网页已经转换到DZ下了。下面开始添加框架和模块。 1、首先把不带CSS的标签替换成。<!--[diy=diy1]-->

<!--[/diy]-->

 

1-1、这个<!--[diy=diy1]-->具体什么意思我也不知道,反正规则是 <!--[diy=diy1]-->diy1 要和他所包含的的DIV标签的ID保持一致,且具有唯一性.class=“area”保持不变。比如下图。飘红的部分是替换的。如图第二部分显示所有的都是diy1这样就错了。要保持唯一性。不能重复! 如图二。

 
1f5fdb24ab18972b7ab6a776e6cd7b899f510a4c.jpgc66a0f54564e92589e57064a9c82d158cdbf4ef9.jpg
这部分替换后 我们就可以去diy页面添加框架和模块了

六、1、首先添加框架如下图。 把所有框架的 标题全部去掉。
121d844e9258d109e3802916d158ccbf6d814df9.jpg

文章由http://www.west258.com-西安网站制作|西安网站建设|西安网络公司,转载请保留出处,谢谢!

  • 西安唐华精工环境工程有限公司

    西安唐华精工环境工

  • 陕西出版集团

    陕西出版集团

  • 西安金泰展览展示有限公司

    西安金泰展览展示有

  • 美果设计培训中心

    美果设计培训中心

  • 长安教育网

    长安教育网

主营业务: G3云推广 网站建设 小程序开发 APP开发 微信公众号开发 400电话 免费注册公司/代理记账 网站托管


总部:西安市长乐西路17号第四军医大学3区综合楼4楼
业务外联部:  钟楼  高新  北郊
邮编:710000        QQ:350795135   1021809792
电话:15249183019
网址:www.west258.com       邮箱:zff_by@163.com