我的模板我自己做-解析篇-完成

上一篇 / 下一篇  2006-11-10 10:34:26 / 个人分类:教程

查看( 24741 ) / 评论( 319 )
今天我教大家怎么在网页下载器的帮助之下自己在模板上转换使用

工具篇:
下载网页的工具-WEBDUP 或是OE好似叫MetaProducts offline  俗名叫:离线下载器 你们搜索下就能找到
可视化编辑:Dreamweaver
下载地址:http://www.greendown.cn/soft/2454.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
目标站的所使用的背景与美化图片都存放在images
default.htm为首页 今天我只做简单教程所以只下载了部分

把images更换你认为你想要的目录存放到
SS的images/目录里
用Dreamweaver,我简称DW
用DW打开原先我们下载的default.htm
如图


2.gif

可视化的优势就出来了
我们再打开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]-->
<scrīpt type="text/javascrīpt">
var siteUrl = "<?=S_URL?>";
</scrīpt>
<scrīpt src="{S_URL}/include/js/common.js" type="text/javascrīpt" language="javascrīpt"></scrīpt>
<scrīpt src="{S_URL}/include/SupeSitejs/common.js" type="text/javascrīpt" language="javascrīpt"></scrīpt>
</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

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

显然使用不了

我们看到刚才备份的空白文档
找到

CODE:

                </div>
                <div class="rightside">
                        <!-- 用户面板 -->
                        <div id="userpanel" class="sideblock">
                                <scrīpt src="{S_URL}/batch.panel.php" type="text/javascrīpt" language="javascrīpt"></scrīpt>
                        </div>
替换掉目标站点的登陆代码
如图

4.jpg
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>
进行替换
具体自己查找自己的空间之星的代码


6.jpg

{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"}--><!--性教育-->
复制到框架里
进行替换

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


12.jpg

13.jpg
完成效果


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

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




最后的效果











简单的教程
累啊

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


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


要能快速3天-10天做好的所谓商业模板大多采用我这方法
没技术含量,真正商业模板要做起来没一个月起细心雕琢不可能!

赚商业模板别太黑心了
快餐哪有这么贵的
只是大家还没掌握的诀窍而已
适当收点但别收那么多
我看了某人的所谓500商业模板
感觉寒心-粗糙死了-价格=质量

我们本身也要检讨下

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




[ 本帖最后由 qizai9873 于 2006-11-10 10:29 编辑 ]

TAG: 教程

我来说两句

(可选)

Open Toolbar