工具篇:
下载网页的工具-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目录会发现以目标站为名的目录存在
打开
目标站的所使用的背景与美化图片都存放在images
default.htm为首页 今天我只做简单教程所以只下载了部分
把images更换你认为你想要的目录存放到
SS的images/目录里
用Dreamweaver,我简称DW
用DW打开原先我们下载的default.htm
如图
可视化的优势就出来了
我们再打开SS目录里的/templates/default/index.html.php
index.html.php为首页文件
用DW打开
可能出现乱码
可以用中文重新载入
index.html.php里的代码
QUOTE:
<?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" />
<!--[if IE]>
<link href="{S_URL}/css/SupeSiteiehack.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<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里的图片目录里你刚才存放的地方
不然显示不了
我现在教大家怎么做登陆窗口
如图
显示的目标站点的登陆窗口
显然使用不了
我们看到刚才备份的空白文档
找到
CODE:
</div>
<div class="rightside">
<!-- 用户面板 -->
<div id="userpanel" class="sideblock">
<script src="{S_URL}/batch.panel.php" type="text/javascript" language="javascript"></script>
</div>替换掉目标站点的登陆代码如图
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
是一个静态化的显示
用这段
CODE:
<!-- 空间之星开始 -->
<!--{block name="userspace" parameter="isstar/1/showdetail/1/order/u.lastpost DESC/limit/0,3/cachetime/14400/cachename/spacestar/tpl/data"}-->
<div id="spacestar" class="sideblock">
<h3>个人空间之星</h3>
<a href="#action/spaces#" class="more">MORE</a>
<ul>
<!--{loop $_SBLOCK['spacestar'] $value}-->
<li><a href="$value[url]"><img src="$value[photo]" alt="$value[spacename]" /></a><p><a href="$value[url]">$value[username]</a></p>
</li>
<!--{/loop}-->
</ul>
</div>进行替换具体自己查找自己的空间之星的代码
{26044635-FA5C-43BD-BB10-E344B6BAF921}0.jpg
这样空间之星的显示就完成
会不会发觉很简单
只要自己动手就行了
依照原模板复制就可以执行
比如广告函数==之类的记得加上去
现在我教大家怎么样使用模块功能
进到SS的后台
看到
模块功能我们选择创建模块
我想要建个资讯的模块
按照你的需要建立自己资讯模块
提交保存
我们只复制
<!--{block name="spacenews" parameter="catid/72/order/i.dateline ASC/limit/0,4/cachetime/900/subjectlen/30/subjectdot/1/showdetail/1/messagelen/30/cachename/sex/tpl/item_subject_list"}--><!--性教育-->
这一段
然后打开目标站点
我只留下一个框架
其他去掉
把
<!--{block name="spacenews" parameter="catid/72/order/i.dateline ASC/limit/0,4/cachetime/900/subjectlen/30/subjectdot/1/showdetail/1/messagelen/30/cachename/sex/tpl/item_subject_list"}--><!--性教育-->
复制到框架里
进行替换
这样
我想要的效果就完成了
完成效果
所以应用到SS的创建模块功能
你自己无限循环使用
我们也可以做一个很漂亮的模板出来
最后的效果
简单的教程
累啊
我今天写这个教程的目的是教大家自己动手做模板
别再老徘徊在SS风格区里去求人索要风格
见作者商业化而进行羞辱
这样做
风气会很不好
还有对不起,我只是想大家都学会自己做模板而已而不是要破坏谁的生意
站长本来就要具备这些技能的
要能快速３天－１０天做好的所谓商业模板大多采用我这方法
没技术含量,真正商业模板要做起来没一个月起细心雕琢不可能！
赚商业模板别太黑心了
快餐哪有这么贵的
只是大家还没掌握的诀窍而已
适当收点但别收那么多
价格＝质量
我们本身也要检讨下
我不是教大家投机取巧
目的是要学会自己动手
所谓自己动手,丰衣足食
[ 本帖最后由 qizai9873 于 2008-1-10 00:32 编辑 ]
最新回复
我把自己的财路给断了
不过我还没给人做过商业模板大多都是朋友义务做做
对了
DZ的论坛风格也可以照上面的进行制作
[ 本帖最后由 qizai9873 于 2006-11-10 10:21 编辑 ]
非常感谢
建议置顶加精
如果有个视频的教程，就更好了
哈哈