ss6.0模板制作教程（一）

南芝恋 · 发表于 2008-1-2 10:57:37

我以综合首页为例，向各位简要介绍一下ss的模板结构和制作方法，希望能够起到抛砖引玉的作用。我会首先配以图片简要介绍一下index.php里边的模块，然后再实际的调整一下，以让各位更加明确。如果你已经很熟悉的话，就可以不用看了哈，主要面对的对象是初级入门者，不过要求稍微懂一些html和css的知识，否则的话你可以需要先去学习一些html和css的有关知识了。

一、第一部分：header

header部分的代码如下：

<div id="header">
<table border="0" cellpadding="0" cellspacing="0" id="headertab">
<tr>
<td id="logo"><a href="{S_URL}/"><img src="{S_URL}/templates/$_SCONFIG[template]/images/logo.gif" alt="$_SCONFIG[sitename]" style="border: none;" /></a> </td>
<td id="topmenu"><ul>
<li><a href="{S_URL}/">首页</a></li>
<li><a href="$value[url]">$value[name]</a></li>
<li><a href="{S_URL}/batch.search.php">搜索</a></li>
</ul></td>
</tr>
</table>
<div class="banner">$ads[pageheadad]</div>
<div id="menu">
<dl>
<dt><strong><a href="#action/news#">$channels['menus']['news']['name']</a></strong></dt>
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
</dl>
<dl>
<dt><strong><a href="#action/blog#">$channels['menus']['blog']['name']</a></strong></dt>
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
</dl>
<dl>
<dt><strong><a href="#action/image#">$channels['menus']['image']['name']</a></strong></dt>
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
</dl>
<dl>
<dt><strong><a href="#action/video#">$channels['menus']['video']['name']</a></strong></dt>
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
</dl>
<dl>
<dt><strong><a href="#action/group#">$channels['menus']['group']['name']</a></strong></dt>
<dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
</dl>
</div>
<div id="navigation">
<form id="searchform" action="{S_URL}/batch.search.php" method="post">
<input type="text" id="searchkey" name="searchkey" />
<select name="type" id="type">
<option value="">全部</option>
<option value="$value[nameid]">$value[name]</option>
</select>
<button type="submit" name="subjectsearch" value="true">搜索</button>
</form>
<p>您的位置：<a href="{S_URL}/">首页</a></p>
</div>
</div>

复制代码

相对应的部分如下图所示：

这部分相对来说比较简单，大家应该都能分得清把，如果有不明白的可以回帖问下，这里就不再赘述了。

第二部分：幻灯片、头条、控制面板等区域

这部分的代码如下：

<div class="sideR">
<div id="userpanel" class="block topblock">
<script src="{S_URL}/batch.panel.php?rand={eval echo rand(1, 999999)}" type="text/javascript" language="javascript"></script>
</div>
<div id="announcement" class="block" style="height: 165px; overflow: hidden;">
<h3>站点公告</h3>
<ul class="msgtitlelist">
<li>暂时没有公告</li>
<li><a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
<div id="polls" class="block" style="height: 149px; overflow: hidden;">
<h3>站点调查</h3>
<ul class="msgtitlelist">
<li>暂时没有调查</li>
<li><a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>
<div class="sideL">
<div id="slideimg" class="block cleanblock topblock" style="height: 205px; overflow: hidden;">
<script type="text/javascript" language="javascript">
<!--
var xsTextBar = 1; //是否显示文字链接，1为显示，0为不显示
var xsPlayBtn = 0; //是否显示播放按钮，1显示，0为不显示
var xsImgSize = new Array(200,167); //幻灯图片的尺寸，格式为“宽度,高度”
var xsImgs = new Array();
var xsImgLinks = new Array();
var xsImgTexts = new Array();
xsImgs[$i] = "$value[a_thumbpath]";
xsImgLinks[$i] = "";
xsImgTexts[$i] = "";
//-->
</script>
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/slide.js"></script>
</div>
<div class="block" style="height: 216px; overflow: hidden;">
<h3>一周好评榜</h3>
<ul class="msgtitlelist">
<li><a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>
<div class="mainarea">
<div id="headline" class="block cleanblock topblock">
<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
</div>
<div id="focus">
<ul class="msgtitlelist linelist">
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>
</div>

复制代码

相应的部分如下图所示：

这部分我们以mainarea为例，简要介绍一下ss文件里的一些东西：

<div class="mainarea">
<div id="headline" class="block cleanblock topblock">
<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
</div>
<div id="focus">
<ul class="msgtitlelist linelist">
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>

复制代码

在ss的模板文件内，大家会经常看到这样子的语句：

复制代码

其实，这个类似论坛的JS调用，通过SS后台创建模块得到模块代码或者是JS代码。大可不必管这些东西，只需要复制模块的时候不要丢下这个就行了。

还有就是循环的语句，比如

<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>

复制代码

记得这个是有头有尾的哦，它的意思就是在loop中间的部分会进行循环，输出多条数据。

再看下if语句：

<a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>

复制代码

这个就是一个判断，比如第一条，也就是假如$_SBLOCK[headnews]非空的话执行下边的语句，记得这个也是有头尾的，复制模块的时候认清if的开头和结尾。

第三部分：资讯

资讯部分的代码如下：

<div id="newsblock">
<div class="blocktitle"> <a href="#action/news#" class="more">更多</a>
<h2>资讯</h2>
</div>
<div class="content" style="margin-bottom: 10px;">
<div class="sideR">
<div id="topicnews" class="block" style="height: 240px; overflow: hidden;">
<h3>月点击图文头条</h3>
<p class="blockintro"><a href="$value[url]"><img src="$value[a_thumbpath]" class="blockintroimg" alt="$value[subject]" /></a>$value[message]... <a href="$value[url]">阅读更多</a></p>
</div>
</div>
<div class="sideL">
<div class="block" style="height: 240px; overflow: hidden;">
<h3>评论更新</h3>
<ul class="msgtitlelist">
<li><a href="$value[url]" target="_blank">$value[subject]</a></li>
</ul>
</div>
</div>
<div class="mainarea">
<ul class="msgtitlelist linelist">
<li><cite>#date("m-d", $value["dateline"])# </cite><a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>
</div>

复制代码

资讯主要分为左中右三部分，分别为sideL、mainarea和sideR，恩，这个应该也没什么说的把，大家应该都能看得清楚。相对应部分的图片为：

第四部分：日志

这部分代码为：

<div id="blogblock">
<div class="blocktitle"> <a href="#action/blog#" class="more">更多</a>
<h2>日志</h2>
</div>
<div class="content" style="margin-bottom: 10px;">
<div class="sideR">
<div id="hotspace" class="block stat" style="height: 240px;"> <a href="#action/spaces#" class="more">所有空间</a>
<h3>空间排行</h3>
<ol>
<li><em>$value[spaceallnum]</em><a href="$value[url]">$value[spacename]</a></li>
</ol>
</div>
</div>
<div class="sideL">
<div id="cityspace" class="block cleanblock">
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/city.js"></script>
<form action="{S_URL}/batch.search.php" method="post">
<button type="submit" name="usersearch" value="true">同城
空间</button>
<script language="javascript" type="text/javascript">showprovince('province', 'city', '');</script>
<script language="javascript" type="text/javascript">showcity('city', '');</script>
</form>
</div>
<div id="hottag" class="block boldblock">
<h3>热门标签</h3>
<div style="height: 10.5em;">
<a href="$value[url]">$value[tagname]<em>($value[spaceallnum])</em></a>
</div>
</div>
</div>
<div class="mainarea">
<ul class="msgtitlelist linelist">
<li><cite><a href="#uid/$value[uid]#">$value[username]</a> </cite><a href="$value[url]">$value[subject]</a></li>
</ul>
</div>
</div>
</div>

复制代码

日至模块其实跟资讯差不多，只不过在左侧部分多了一个同城空间，也不再多说了，相应部分如图所示：

第五部分：圈子、图片、影音、商品

这四部分的机构几乎一样，以圈子为例，代码如下：

<div id="groupblock">
<div class="blocktitle"> <a href="#action/group#" class="more">更多</a>
<h2>圈子</h2>
</div>
<div class="contentL" style="margin-bottom: 10px;">
<div class="sideL">
<div id="commendimage" class="block" style="height: 214px; overflow: hidden;">
<h3>最新圈子</h3>
<ul class="msgtitlelist">
<li><cite><a href="#uid/$value[uid]#" target="_blank" title="圈主">$value[username]</a></cite><a href="$value[url]" target="_blank">$value[groupname]</a></li>
</ul>
</div>
</div>
<div class="mainarea">
<div id="updategroup">
<ul class="imgthumblist" style="margin-left: -4px; width: 559px;">
<li class="smallthumb">
<div><a href="$value[url]" title="$value[groupname], by $value[username]"><img src="$value[logo]" alt="$value[groupname]" /></a></div>
<p><a href="$value[url]">$value[groupname]</a><span class="smalltxt" title="共有$value[usernum]位会员"> ($value[usernum])</span></p>
</li>
</ul>
</div>
</div>
</div>
</div>

复制代码

这个模块主要分为两部分，分别为sideL和mainarea，比较简单，也不多说了，对应的部分如图所示：

第五部分：文件、书签。。。以及一些专题模块等

这部分和资讯模块几乎一样，就不再说了，如果有不懂的地方可以回帖问下。

第六部分：友情链接

友情链接代码如下：

<div id="links"> <a class="more" href="#action/site/type/link#">更多链接</a>
<h3>友情链接</h3>
<ul class="pic">
$imglink
</ul>
<ul class="text">
$txtlink
</ul>
</div>

复制代码

这部分需要在后台站点设置--其他设置里边设置友情链接的数目后才能显示的，也很简单就能看清楚了，对应部分如图所示：

第七部分：#footer

<div id="footer">
<div class="banner"> $ads[pagefootad] </div>
<p> <a href="{S_URL}/">$_SCONFIG[sitename]</a> | <a href="{B_URL}/" target="_blank">交流论坛</a> | <a href="{S_URL}/?action/site/type/panel">快捷面板</a> | <a href="{S_URL}/?action/site/type/map">站点地图</a> | <a href="{S_URL}/?action/site/type/link">友情链接</a> | <a href="{S_URL}/?action/spaces">空间列表</a> | <a href="{S_URL}/archiver/">站点存档</a> | <a href="mailto:$_SCONFIG[adminemail]">联系我们</a> </p>
<p id="copyright"> Powered by <a href="http://www.supesite.com" target="_blank"><strong>Supe<span>Site</span></strong></a> <em>
<?=S_VER?>
</em> © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
{eval debuginfo();} </p>
</div>

复制代码

这里是底部部分，也很容易看懂，唯一不足的是上边那一排导航应该用列表更合适，如图所示：

首页就这么多东西，其实其他页面也差不多，其实也没什么，大家仔细看一下就会明白了，这一部分是写给那些不愿意看ss模板文件的朋友，其实ss模板没有那么吓人，也没有那么难，相对来说比Discuz!模板要简单一些，更多的应该是大家都比较懒，不愿意动手，其实我也很懒。。。然后，下一篇我会教大家作一下首页的变动，有兴趣的朋友可以看下。如果有什么地方不明白可以回帖问下。

[ 本帖最后由南芝恋于 2008-1-2 15:35 编辑 ]

南芝恋 · 发表于 2008-1-2 15:36:24

:) 有不明白的可以回帖问下
很简单的东西
多看看动动手就好了的

夢娜麗沙的眼屎 · 发表于 2008-1-2 15:41:00

先顶再学习！

紫琼 · 发表于 2008-1-2 15:42:51

支持！

ewader · 发表于 2008-1-2 15:45:06

期待下篇

☆★UFO★☆ · 发表于 2008-1-2 15:50:36

强烈

支持！

萧湘月 · 发表于 2008-1-2 15:57:33

晕
老大你说的header在那个文件夹下的呢
找不到哦

南芝恋 · 发表于 2008-1-2 16:00:50

templates/default/index.html.php文件内

萧湘月 · 发表于 2008-1-2 16:06:18

你说的东西好像要用Dreamweaver打开才能看到吧
我用写字板打开是看不到你说的内容的
我用Dreamweaver打开就看到了
然后这些代码和对应的页面我基本也看懂了
我想问一下头部里<td id="topmenu"><ul>
是不是就是logo右边的东西呢？
我尝试把他放在logo的下面来始终不行
请指教～
我是菜鸟

萧湘月 · 发表于 2008-1-2 16:06:59

晕
现在用写字板打开有能看到了。。。
无语了
可能是我搞错了吧

		自动登录	找回密码
密码			立即注册

[教程] ss6.0模板制作教程（一）

评分