本帖最后由 qizai9873 于 2009-10-7 16:39 编辑  
 
博客名称:DuoKa’Blog 
 
博客网址:http://www.iduoka.com/ 
 
DuoKa’Blog-写关于Wordpress的经验:比如Wordpress的插件推荐和Wordpress的使用修改经验,写关于AdSense优化技巧和经验心得,写关于WINDOWS电脑故障以及软件推荐,写关于互联网和搜索引擎的IT评论。 
 
博客名称:DuoKa’Shwo Zone 
 
博客网址:http://show.iduoka.com/ 
 
DuoKa’Shwo Zone记录多卡の布淇的健身减肥日志,记录了关于健身减肥、健身增肌、锻炼肌肉、器械使用、健身训练方案、营养补剂的辨别和食用方法说明等等。 
 
我的博客地址:http://www.iduoka.com 欢迎大家来交流一下 
 
博客收录这篇文章地址:http://www.iduoka.com/supesite-x-space-theme-style-tutorial/ 
今天我教大家怎么在网页下载器的帮助之下自己在模板上转换使用 
 
工具篇: 
下载网页的工具-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打开 
 
里面的内容替换成自己网站的内容保留框架就可以了 
 
全新的风格就完成了 
https://discuz.dismall.com/thread-819784-1-1.html 
 
 
参考篇:你们可以看看这文章进行参考比较详细 
http://download2.discuz.net/v5/doc/SupeSite_templates_help.wmv 
 
环境篇:Windows平台IIS一键整合安装包 
https://discuz.dismall.com/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里的代码 
 
<?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里的图片目录里你刚才存放的地方 
不然显示不了 
我现在教大家怎么做登陆窗口 
如图
 
 
 
显示的目标站点的登陆窗口 
 
显然使用不了 
 
我们看到刚才备份的空白文档 
找到-                 </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进行编辑 
 
现在是我教大家怎么使用个人 
空间之星 
看到目标站点的 
如图 
显示 
 
 
 
是一个静态化的显示 
 
用这段-   <!-- 空间之星开始 -->
 
 -   <!--{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>
 
  复制代码 进行替换 
具体自己查找自己的空间之星的代码 
 
 
 
 
这样空间之星的显示就完成 
 
会不会发觉很简单 
 
只要自己动手就行了 
 
依照原模板复制就可以执行 
比如广告函数==之类的记得加上去 
 
 
现在我教大家怎么样使用模块功能 
 
进到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风格区里去求人索要风格 
见作者商业化而进行羞辱 
这样做 
风气会很不好 
 
还有对不起,我只是想大家都学会自己做模板而已而不是要破坏谁的生意 
站长本来就要具备这些技能的 
 
要能快速3天-10天做好的所谓商业模板大多采用我这方法 
没技术含量,真正商业模板要做起来没一个月起细心雕琢不可能! 
赚商业模板别太黑心了 
快餐哪有这么贵的 
只是大家还没掌握的诀窍而已 
适当收点但别收那么多 
价格=质量 
 
我们本身也要检讨下 
 
我不是教大家投机取巧 
目的是要学会自己动手 
所谓自己动手,丰衣足食 
 
 
 
 
 
我的博客地址:http://www.iduoka.com 欢迎大家来交流一下 |