简单说一下如何把自己做好的静态网页套到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、把这句代码
- <!--{subtemplate common/header}-->
- <style id="diy_style" type="text/css"></style>
复制代码
复制到文件最顶部，下面这段复制到最底部
<div class="blockcode" style="word-wrap: break-word; overflow: hidden; margin: 10px 0px; padding: 10px 0px 5px 10px; background-image: url(http://www.discuz.net/static/image/common/codebg.gif); background-color: rgb(247, 247, 247); color: rgb(102, 102, 102); zoom: 1; border: 1px solid rgb(204, 204, 204); background-position: 0px 0px; background-repeat: no-repeat repeat; ">
<div id="code_T7J" style="word-wrap: break-word; ">
<ol style="word-wrap: break-word; margin: 0px 0px 0px 10px !important; padding-right: 0px !important; padding-left: 0px !important; ">
<li style="word-wrap: break-word; margin: 0px 0px 0px 2em; padding: 0px 0px 0px 10px; list-style-type: decimal-leading-zero; font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif; font-size: 12px; line-height: 1.8em; "><em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; "><!--{subtemplate common/footer}--></em></li>
</ol>
</div>
<em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; "><em style="word-wrap: break-word; font-style: normal; color: rgb(51, 102, 153) !important; margin-left: 43px; font-size: 12px; cursor: pointer; ">复制代码</em></em></div>
<em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; ">3、把你的CSS文件调用进来，放到<font style="word-wrap: break-word; background-color: rgb(247, 247, 247); "><!--{subtemplate common/header}--><br style="word-wrap: break-word; " />
<style id="diy_style" type="text/css"></style>下面就可以了，下面是我的，改好路径就好了.这里应该把CSS js全部调用进来.</font></em>
<div class="blockcode" style="word-wrap: break-word; overflow: hidden; margin: 10px 0px; padding: 10px 0px 5px 10px; background-image: url(http://www.discuz.net/static/image/common/codebg.gif); background-color: rgb(247, 247, 247); color: rgb(102, 102, 102); zoom: 1; border: 1px solid rgb(204, 204, 204); background-position: 0px 0px; background-repeat: no-repeat repeat; ">
<div id="code_VgI" style="word-wrap: break-word; ">
<ol style="word-wrap: break-word; margin: 0px 0px 0px 10px !important; padding-right: 0px !important; padding-left: 0px !important; ">
<li style="word-wrap: break-word; margin: 0px 0px 0px 2em; padding: 0px 0px 0px 10px; list-style-type: decimal-leading-zero; font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif; font-size: 12px; line-height: 1.8em; "><em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; "><link href="test1/images/css.css" rel="stylesheet" type="text/css" /></em></li>
</ol>
</div>
<em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; "><em style="word-wrap: break-word; font-style: normal; color: rgb(51, 102, 153) !important; margin-left: 43px; font-size: 12px; cursor: pointer; ">复制代码</em></em></div>
<em style="word-wrap: break-word; font-style: normal; color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 12px; line-height: 18px; ">4、保存好后刷新下门户发现 出了图片 基本框架都出来了。<font color="#8b0000" style="word-wrap: break-word; "> 图片错误是因为路径不对。把路径全部改过来。</font><br style="word-wrap: break-word; " />
在原来路径前面加上刚才在根目录下创建的文件夹的名字就好了，全部替换就可以了。如图<ignore_js_op style="word-wrap: break-word; "><img _load="1" aid="1033520" class="zoom" file="http://att.discuz.net/data/attachment/forum/201109/02/1035116551luwps6un5657.jpg" id="aimg_1033520" initialized="true" inpost="1" lazyloaded="true" src="https://image.edbiji.com/doccon/20150115/20150115164251_951455_518.jpg" style="word-wrap: break-word; cursor: pointer; " width="594" zoomfile="http://att.discuz.net/data/attachment/forum/201109/02/1035116551luwps6un5657.jpg" /> </ignore_js_op><br style="word-wrap: break-word; " />
==========================================================================<br style="word-wrap: break-word; " />
五、到此你的静态网页已经转换到DZ下了.下面开始添加框架和模块. 1、首先把不带CSS的标签替换成。<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--><br style="word-wrap: break-word; " />
1-1、这个<!--[diy=diy1]-->具体什么意思我也不知道，反正规则是 <!--[diy=diy1]-->diy1 要和他所包含的的DIV标签的ID保持一致,且具有唯一性.class="area"保持不变。<font color="#ff0000" style="word-wrap: break-word; ">比如下图。飘红的部分是替换的.如图第二部分显示<u style="word-wrap: break-word; "><strong style="word-wrap: break-word; "><font size="4" style="word-wrap: break-word; ">所有的都是diy1这样就错了.要保持唯一性.不能重复！</font></strong></u> 如图二.</font><br style="word-wrap: break-word; " />
<ignore_js_op style="word-wrap: break-word; "><img _load="1" aid="1033542" file="http://att.discuz.net/data/attachment/forum/201109/02/110230a5boucf21cp6ckpf.jpg.thumb.jpg" id="aimg_1033542" initialized="true" inpost="1" lazyloaded="true" src="https://image.edbiji.com/doccon/20150115/20150115164251_406261_518.jpg" style="word-wrap: break-word; cursor: pointer; " zoomfile="http://att.discuz.net/data/attachment/forum/201109/02/110230a5boucf21cp6ckpf.jpg" /> </ignore_js_op><br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
<ignore_js_op style="word-wrap: break-word; "><img _load="1" aid="1033554" file="http://att.discuz.net/data/attachment/forum/201109/02/1113521y33161z77g9ym13.jpg.thumb.jpg" id="aimg_1033554" initialized="true" inpost="1" lazyloaded="true" src="https://image.edbiji.com/doccon/20150115/20150115164252_266255_518.jpg" style="word-wrap: break-word; cursor: pointer; " zoomfile="http://att.discuz.net/data/attachment/forum/201109/02/1113521y33161z77g9ym13.jpg" /> </ignore_js_op><br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
<font color="#ff00" style="word-wrap: break-word; "><font size="5" style="word-wrap: break-word; "><font color="#444444" style="word-wrap: break-word; "> 这部分替换后 我们就可以去diy页面添加框架和模块了</font></font></font><br style="word-wrap: break-word; " />
六、1、首先添加框架如下图。 把所有框架的 标题全部去掉.<br style="word-wrap: break-word; " />
<ignore_js_op style="word-wrap: break-word; "><img _load="1" aid="1033561" file="http://att.discuz.net/data/attachment/forum/201109/02/112105pi1z62u917u9v9bv.jpg.thumb.jpg" id="aimg_1033561" initialized="true" inpost="1" lazyloaded="true" src="https://image.edbiji.com/doccon/20150115/20150115164253_301852_518.jpg" style="word-wrap: break-word; cursor: pointer; " zoomfile="http://att.discuz.net/data/attachment/forum/201109/02/112105pi1z62u917u9v9bv.jpg" /> </ignore_js_op><br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
2、添加模块<br style="word-wrap: break-word; " />
.添加帖子模块. 属性自己设置.这里没法演示. 根据自己的模版灵活掌握. 样式也要设置 边框 外边距 内边距 都为0。<a href="http://www.itongguan.com/" style="word-wrap: break-word; color: rgb(51, 102, 153); " target="_blank"><font color="#ffffff" style="word-wrap: break-word; ">潼关</font></a><br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
举一反三.其他部分自己试试。 <br style="word-wrap: break-word; " />
<br style="word-wrap: break-word; " />
<font color="#8b0000" style="word-wrap: break-word; ">ps:</font><font color="#8b0000" style="word-wrap: break-word; ">有人问网页里文字是怎么出来的..</font><br style="word-wrap: break-word; " />
<font color="#8b0000" style="word-wrap: break-word; ">答： 大家看完教程多熟悉熟悉DIY里面的模块。就知道那些文字 图片 是怎么调用出来的了！ </font></em></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
|
