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

接着上一节，我们继续制作主体部分。

嗯，在制作之前我们首先要想好我们分成几栏？按照yahoo的网站，我们也来做三栏，分别为left，center和right。那么我们现在来确立主体的布局：

1. <div id="topcontent">
   
2.     <div id="left"></div>
   
3.         <div id="center"></div>
   
4.         <div id="right"></div>
   
5. </div>

复制代码

确立好整体框架后，我们首先来填充左边的栏目，首先是分类的导航，将我们之前保存的那部分代码放进left里边。

1. <div id="left">
   
2.     <!--{if !empty($channels['types']['news'])}-->
   
3.     <!--{block name="category" parameter="type/news/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/36800/cachename/category_news/tpl/data"}-->
   
4.     <dl>
   
5.         <dt><strong><a href="#action/news#">$channels['menus']['news']['name']</a></strong></dt>
   
6.         <!--{loop $_SBLOCK['category_news'] $value}-->
   
7.         <dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
   
8.         <!--{/loop}-->
   
9.     </dl>
   
10.     <!--{/if}-->
    
11.     <!--{if !empty($channels['types']['blog'])}-->
    
12.     <!--{block name="category" parameter="type/blog/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/37800/cachename/category_blog/tpl/data"}-->
    
13.     <dl>
    
14.         <dt><strong><a href="#action/blog#">$channels['menus']['blog']['name']</a></strong></dt>
    
15.         <!--{loop $_SBLOCK['category_blog'] $value}-->
    
16.         <dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
    
17.         <!--{/loop}-->
    
18.     </dl>
    
19.     <!--{/if}-->
    
20.     <!--{if !empty($channels['types']['image'])}-->
    
21.     <!--{block name="category" parameter="type/image/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_image/tpl/data"}-->
    
22.     <dl>
    
23.         <dt><strong><a href="#action/image#">$channels['menus']['image']['name']</a></strong></dt>
    
24.         <!--{loop $_SBLOCK['category_image'] $value}-->
    
25.         <dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
    
26.         <!--{/loop}-->
    
27.     </dl>
    
28.     <!--{/if}-->
    
29.     <!--{if !empty($channels['types']['video'])}-->
    
30.     <!--{block name="category" parameter="type/video/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_video/tpl/data"}-->
    
31.     <dl>
    
32.         <dt><strong><a href="#action/video#">$channels['menus']['video']['name']</a></strong></dt>
    
33.         <!--{loop $_SBLOCK['category_video'] $value}-->
    
34.         <dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
    
35.         <!--{/loop}-->
    
36.     </dl>
    
37.     <!--{/if}-->
    
38.     <!--{if !empty($channels['menus']['group'])}-->
    
39.     <!--{block name="category" parameter="type/group/isroot/1/ischannel/2/order/c.displayorder/limit/0,10/cachetime/39800/cachename/category_group/tpl/data"}-->
    
40.     <dl>
    
41.         <dt><strong><a href="#action/group#">$channels['menus']['group']['name']</a></strong></dt>
    
42.         <!--{loop $_SBLOCK['category_group'] $value}-->
    
43.         <dd><a href="$value[url]" title="$value[name]">$value[name]</a></dd>
    
44.         <!--{/loop}-->
    
45.     </dl>
    
46.     <!--{/if}-->
    
47. </div>

复制代码

然后中间部分，头条新闻、热点回复和热门标签：

1. <div id="center">
   
2.     <!--一周点击排行头条-->
   
3.     <!--{block name="spacenews" parameter="dateline/604800/showattach/1/showdetail/1/order/i.viewnum DESC/limit/0,1/subjectlen/34/subjectdot/1/messagelen/160/messagedot/1/cachetime/18600/cachename/headnews/tpl/data"}-->
   
4.     <div id="headline">
   
5.         <!--{if !empty($_SBLOCK[headnews])}-->
   
6.         <!--{loop $_SBLOCK[headnews] $value}-->
   
7.         <!--{if !empty($value[a_thumbpath])}-->
   
8.         <a href="$value[url]"><img src="$value[a_thumbpath]" alt="" /></a>
   
9.         <!--{/if}-->
   
10.         <h1><a href="$value[url]">$value[subject]</a></h1>
    
11.         <p>$value[message]</p>
    
12.         <!--{/loop}-->
    
13.         <!--{/if}-->
    
14.     </div>
    
15.     <!-- 一周回复热点 -->
    
16.     <!--{block name="spaceblog" parameter="notype/1/dateline/604800/order/i.replynum DESC/subjectlen/34/limit/0,15/cachetime/13600/showspacename/1/cachename/newinfos/tpl/data"}-->
    
17.     <div id="focus">
    
18.         <h2>回复热点</h2>
    
19.         <ul>
    
20.             <!--{loop $_SBLOCK[newinfos] $value}-->
    
21.             <li>[<a href="#action/$value[type]#">{$lang[$value[type]]}</a>] <a href="$value[url]">$value[subject]</a></li>
    
22.             <!--{/loop}-->
    
23.         </ul>
    
24.     </div>
    
25.     <!--{block name="tag" parameter="order/spaceallnum DESC/limit/0,20/cachetime/21600/cachename/hottag/tpl/data"}-->
    
26.     <div id="hottag">
    
27.         <h3>热门标签</h3>
    
28.         <div>
    
29.             <!--{loop $_SBLOCK['hottag'] $value}-->
    
30.             <a href="$value[url]">$value[tagname]<em>($value[spaceallnum])</em></a>
    
31.             <!--{/loop}-->
    
32.         </div>
    
33.     </div>
    
34. </div>

复制代码

右边部分放上幻灯片、控制面板、站点公告和一周好评榜：

1. <div id="right">
   
2.     <!--最新日志图片幻灯片 开始-->
   
3.     <!--{block name="spacenews" parameter="haveattach/1/showattach/1/order/i.dateline DESC/limit/0,4/cachetime/13930/cachename/picblog/tpl/data"}-->
   
4.     <div id="slideimg">
   
5.         <!--{if !empty( $_SBLOCK['picblog'])}-->
   
6.         <script type="text/javascript" language="javascript">
   
7.                 <!--                       
   
8.                 var xsTextBar = 1; //是否显示文字链接，1为显示，0为不显示
   
9.                 var xsPlayBtn = 0; //是否显示播放按钮，1显示，0为不显示
   
10.                 var xsImgSize = new Array(220,180); //幻灯图片的尺寸，格式为“宽度,高度”
    
11.        
    
12.                 var xsImgs = new Array();
    
13.                 var xsImgLinks = new Array();
    
14.                 var xsImgTexts = new Array();
    
15.                
    
16.                 <!--{eval $i=0;}-->
    
17.                 <!--{loop $_SBLOCK['picblog'] $key $value}-->
    
18.                 xsImgs[$i] = "$value[a_thumbpath]";
    
19.                 xsImgLinks[$i] = "<!--{eval echo url_remake($value['url']);}-->";
    
20.                 xsImgTexts[$i] = "<!--{eval echo addslashes($value[subject])}-->";
    
21.                 <!--{eval $i++;}-->
    
22.                 <!--{/loop}-->
    
23.                 //-->
    
24.                 </script>
    
25.         <script language="javascript" type="text/javascript" src="{S_URL}/include/js/slide.js"></script>
    
26.         <!--{/if}-->
    
27.     </div>
    
28.     <!-- 用户面板 -->
    
29.     <div id="userpanel">
    
30.         <div id="user_line"></div>
    
31.         <script src="{S_URL}/batch.panel.php?rand={eval echo rand(1, 999999)}" type="text/javascript" language="javascript"></script>
    
32.     </div>
    
33.     <!--{block name="announcement" parameter="order/displayorder/limit/0,7/cachetime/96400/subjectlen/30/cachename/announce/tpl/data"}-->
    
34.     <div id="announcement">
    
35.         <h3>站点公告</h3>
    
36.         <ul>
    
37.             <!--{if empty($_SBLOCK['announce'])}-->
    
38.             <li>暂时没有公告</li>
    
39.             <!--{else}-->
    
40.             <!--{loop $_SBLOCK['announce'] $value}-->
    
41.             <li><a href="$value[url]">$value[subject]</a></li>
    
42.             <!--{/loop}-->
    
43.             <!--{/if}-->
    
44.         </ul>
    
45.     </div>
    
46.     <div id="haoping">
    
47.         <h3>一周好评榜</h3>
    
48.         <ul>
    
49.             <!--{if !empty($_SBLOCK['recommendnews'])}-->
    
50.             <!--{loop $_SBLOCK['recommendnews'] $value}-->
    
51.             <li><a href="$value[url]">$value[subject]</a></li>
    
52.             <!--{/loop}-->
    
53.             <!--{/if}-->
    
54.         </ul>
    
55.     </div>
    
56. </div>

复制代码

嗯，然后我们现在来调整这段的css：

1. #topcontent { width:900px; margin:10px auto; clear:both;}
   
2.     #topcontent #left { width:160px; float:left;}
   
3.             #left dl { margin:0 0 10px 0; border:1px solid #C9C9C9; clear:left; min-height:150px;}
   
4.                 *html #left dl { height:150px;}
   
5.                 #left dt { height:12px; font-weight:bold; background:#F2F2F2; border-bottom:1px solid #929292; padding:5px; margin-bottom:5px;}
   
6.                     #left dt a { text-decoration:none;}
   
7.                 #left dd { padding:5px 10px; float:left;}
   
8.        
   
9.         #topcontent #center { float:left; width:500px; margin-left:10px;}
   
10.             #center #headline { border:1px solid #C9C9C9; padding:5px; height:80px;}
    
11.                         #center #headline img { width:100px; height:80px; border:0; float:left; margin-right:10px;}
    
12.                         #center #headline h1 { font-size:16px; font-weight:bold;}
    
13.                         #center #headline p { margin-top:5px; line-height:150%;}
    
14.                         #topcontent #center #focus { margin-top:10px; border:1px solid #C9C9C9; height:160px; max-height:140px; >max-height:160px;}
    
15.                             #topcontent #center #focus h2 { font-size:12px; font-weight:bold; background:#F1F1F1; height:15px; margin:1px; padding:5px;}
    
16.                                 #topcontent #center #focus ul { padding:5px;}
    
17.                                 #topcontent #center #focus li { line-height:180%; width:240px; float:left; overflow:hidden;}
    
18.                         #center #hottag { margin-top:10px; border:1px solid #C9C9C9; min-height:40px;}
    
19.                         *html #center #hottag { height:40px;}
    
20.                             #hottag h3 { font-size:12px; font-weight:bold; background:#F1F1F1; height:12px; padding:5px;}
    
21.                                 #hottag div { margin:5px;}
    
22.                                     #hottag div a { padding:2px 5px;}
    
23.                        
    
24.         #topcontent #right { float:right; margin-left:10px; width:220px;}
    
25.             #right #slideimg img { border:0;}
    
26.                 #right #slideimg #slideprev { float:left; padding:5px 0; height:16px; background:#F1F1F1;}
    
27.                 #right #slideimg #slidenext { float:right; padding:5px 0; height:16px; background:#F1F1F1;}
    
28.                 #right #slideimg #slidetext { text-align:center; padding:5px 0; height:16px; background:#F1F1F1;}
    
29.             #right #userpanel { border:1px solid #C9C9C9; margin-top:10px;}
    
30.                     #userpanel h3 { font-size:12px; font-weight:bold; margin-top:-20px; padding-left:10px;}
    
31.                         #userpanel ul.msgtitlelist { margin:5px;}
    
32.                         #userpanel li { line-height:200%;}
    
33.                             #userpanel li a { padding:0 5px;}
    
34.                         #right #userpanel #user_line { height:26px; background:#F2F2F2;}
    
35.                         form#login { padding:0; border:0; overflow:hidden; margin-top:-24px;}
    
36.                                 form#login fieldset { border:0; padding: 0 10px; margin: 0;}
    
37.                                 form#login legend { line-height: 26px; margin-bottom: 5px; margin-left:-5px; font-weight:bold; }
    
38.                                 form#login p { padding:5px 0;}
    
39.                                     form#login p label { margin-right:5px;}
    
40.                                         form#login p input { width:120px; height:14px;}
    
41.                                         form#login p.cookietime { display:none;}
    
42.                                         form#login p button#dologin { float:right; margin-right:24px !important; +margin-right:30px !important;}
    
43.                 #right #announcement, #right #haoping { min-height:40px; height:auto; border:1px solid #C9C9C9; margin-top:10px;}
    
44.                 *html #right #announcement, *html #right #haoping { height:40px;}
    
45.                     #announcement h3, #haoping h3 { font-size:12px; font-weight:bold; height:12px; padding:5px; background:#F2F2F2;}
    
46.                         #announcement ul, #haoping ul { margin:5px 10px;}
    
47.                         #announcement li, #haoping li { line-height:160%; padding-left:5px;}

复制代码

大家看下现在的表现:


基本上就是教各位如何去调整各模块的设置，至于具体的表现可以自己修改，我这里基本上都采用默认，没有细微的去调整，结构确定好，css调起来也容易。各位有不明白的可以回帖问下。

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

:)

支持一个

谢谢分享，努力学习中、、、、、、

  very good

谢谢分享，努力学习中、、、、、、

我是菜鸟，对程序语言不懂，实在看不懂。

我比较喜欢用像动易asp版系统那样的模板标签，要什么东西从模板标签里点一下，然后设置一下便可。
比如我要在前台栏目页获取文章的图片做列表，那么只要点一下图片列表标签设置一下即可，这样很简单。

希望能照顾一下像我这样的菜鸟。

:)

不行了，还是先占位，回头看吧，谢谢LZ

12岁  强悍
哈哈

申明  12岁真人不是12岁