FreeOZ论坛

标题: 用Dreamweaver CS3定制Discuz的风格模板 [打印本页]

作者: ubuntuhk 时间: 14-10-2008 04:29
标题: 用Dreamweaver CS3定制Discuz的风格模板
转自：http://www.discuz.net/viewthread.php?tid=452429

我的模板我自己做-解析篇-完成-2008年1月10日更新
今天我教大家怎么在网页下载器的帮助之下自己在模板上转换使用

工具篇:
下载网页的工具-WEBDUP 或是OE好似叫MetaProducts offline 俗名叫:离线下载器你们搜索下就能找到
可视化编辑:Dreamweaver
再使用Adobe Dreamweaver CS3可视化编辑DIV+CSS
(以前的Dreamweaver只能可视化表格式的,Dreamweaver CS3可视化DIV+CSS)

自己做模板不再求人

先上演示图给你们看看

要模仿的网站
http://www.enet.com.cn/gps/

2.jpg (143.31 KB)
2007-12-28 11:44

1.jpg (138.83 KB)
2007-12-28 11:44

另存该网站网页后用Adobe Dreamweaver CS3打开

里面的内容替换成自己网站的内容保留框架就可以了

全新的风格就完成了
http://www.discuz.net/thread-819784-1-1.html

参考篇:你们可以看看这文章进行参考比较详细
http://download2.discuz.net/v5/doc/SupeSite_templates_help.wmv

环境篇:Windows平台IIS一键整合安装包
http://www.discuz.net/thread-284586-1-1.html

工具准备齐全了
找到目标站点进行下载

教程开始
网页下载器的步骤我就不教了很简单的
已经下载回来之后
我们打开C盘download目录会发现以目标站为名的目录存在
打开

1.jpg (12.59 KB)
2006-11-10 09:08

目标站的所使用的背景与美化图片都存放在images
default.htm为首页今天我只做简单教程所以只下载了部分
把images更换你认为你想要的目录存放到
SS的images/目录里
用Dreamweaver,我简称DW
用DW打开原先我们下载的default.htm
如图

2.gif (26.65 KB)
2006-11-10 09:18

可视化的优势就出来了
我们再打开SS目录里的/templates/default/index.html.php
index.html.php为首页文件
用DW打开
可能出现乱码
可以用中文重新载入

index.html.php里的代码

<?exit?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>$title - Powered By SupeSite</title>
<link rel="Shortcut Icon" type="image/x-icon" href="{S_URL}/favicon.ico" />
<link href="{S_URL}/css/SupeSitemain.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var siteUrl = "<?=S_URL?>";
</script>
<script src="{S_URL}/include/js/common.js" type="text/javascript" language="javascript"></script>
<script src="{S_URL}/include/SupeSitejs/common.js" type="text/javascript" language="javascript"></script>
</head>

请复制这部分
覆盖到
我们下载回来的default.htm代码里顶部以上
<head>到</head>的这部分

以上代码<link href="{S_URL}/css/SupeSiteiehack.css" rel="stylesheet" type="text/css" media="screen" />
我们原样复制这段代码到后面形成
<link href="{S_URL}/css/SupeSiteiehack.css" rel="stylesheet" type="text/css" media="screen" />
<link href="{S_URL}/css/SupeSiteiehack.css" rel="stylesheet" type="text/css" media="screen" />
其实把第二段的
/css/SupeSiteiehack.css把SupeSiteiehack.css改成目标站点下载回来所的CSS名称
然后把目标站点的CSS放到SS里的css目录
如果不想这么复杂的话也可以把
目标站点的CSS写进SupeSiteiehack.css里

这样基本可以了

开始代码上的转换

由于我是在原基础上改进所以需要用DW打开新建空白文档把index.html.php代码复制出来贴到空白文档里
一备我们随时使用(也可以在templates新建一个自己的模板目录进行使用)

把default.htm更名为index.html.php覆盖掉
这样我们浏览器打开SS的时候就能看到
我们目标站点的基本形状已经取代了SS原始模板

对了记得把所有目标站点的图片与背景全部指望你存放在SS里的图片目录里你刚才存放的地方
不然显示不了
我现在教大家怎么做登陆窗口
如图

3.jpg (45.47 KB)
2006-11-10 09:41

显示的目标站点的登陆窗口

显然使用不了

我们看到刚才备份的空白文档
找到             </div>
            <div class="rightside">
                     
                     <div id="userpanel" class="sideblock">
                              <scriptsrc="{S_URL}/batch.panel.php" type="text/javascript"language="javascript"></script>
                     </div>复制代码
替换掉目标站点的登陆代码
如图

4.jpg (14.59 KB)
2006-11-10 09:45

DW可视化看到的是空白

用IE打开就显示出了登陆窗口

记得<link href="{S_URL}/css/SupeSiteiehack.css" rel="stylesheet" type="text/css" media="screen" />
这部分要做
不然登陆窗口没CSS会变形
而已登陆不了

一个登陆窗口就完成了
如果想要登陆窗口更好看的话
可以打开CSS进行编辑

现在是我教大家怎么使用个人
空间之星
看到目标站点的
如图
显示

{39286CCF-5814-4D39-9259-A5DEF154D333}0.jpg (35.59 KB)
2006-11-10 09:49

是一个静态化的显示

用这段  
  
<div id="spacestar" class="sideblock">
<h3>个人空间之星</h3>
<a href="#action/spaces#" class="more">MORE</a>
<ul>

<li><a href="$value"><img src="$value[photo]"alt="$value[spacename]" /></a><p><ahref="$value[url]">$value[username]</a></p>
</li>

</ul>
   </div>复制代码
进行替换
具体自己查找自己的空间之星的代码

[url=http://www.discuz.net/attachment.php?aid=89681&k=f83f950c40a10827516f2f7c7195aac0&t=1223911478&nothumb=yes]6.jpg (22.86 KB)
2006-11-10 09:53

{26044635-FA5C-43BD-BB10-E344B6BAF921}0.jpg (18.41 KB)
2006-11-10 09:53

这样空间之星的显示就完成

会不会发觉很简单

只要自己动手就行了

依照原模板复制就可以执行
比如广告函数==之类的记得加上去

现在我教大家怎么样使用模块功能

进到SS的后台
看到
模块功能我们选择创建模块

我想要建个资讯的模块

按照你的需要建立自己资讯模块

提交保存
我们只复制

这一段
然后打开目标站点

我只留下一个框架
其他去掉
把

复制到框架里
进行替换

这样
我想要的效果就完成了

12.jpg (66.56 KB)
2006-11-10 10:08

13.jpg (62.83 KB)
2006-11-10 10:08

完成效果

14.jpg (25.42 KB)
2006-11-10 10:11

所以应用到SS的创建模块功能
你自己无限循环使用

我们也可以做一个很漂亮的模板出来

最后的效果

简单的教程
累啊

我今天写这个教程的目的是教大家自己动手做模板
别再老徘徊在SS风格区里去求人索要风格
见作者商业化而进行羞辱
这样做
风气会很不好

还有对不起,我只是想大家都学会自己做模板而已而不是要破坏谁的生意
站长本来就要具备这些技能的

要能快速３天－１０天做好的所谓商业模板大多采用我这方法
没技术含量,真正商业模板要做起来没一个月起细心雕琢不可能！
赚商业模板别太黑心了
快餐哪有这么贵的
只是大家还没掌握的诀窍而已
适当收点但别收那么多
价格＝质量

我们本身也要检讨下

我不是教大家投机取巧
目的是要学会自己动手
所谓自己动手,丰衣足食

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/ibbs/)