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

南芝恋

这一节我们开始来学习如何去修改首页，以满足我们的需求。

一、更改css

首先，我们自己制作的时候就不再需要原来的css文件了，那么我们先修改index.php中head里边的css链接：

1. <link rel="stylesheet" type="text/css" href="{S_URL}/templates/$_SCONFIG[template]/css/style.css" />

复制代码

我们将其修改为：

1. <link rel="stylesheet" type="text/css" href="{S_URL}/templates/$_SCONFIG[template]/css/hehe.css" />

复制代码

然后在css文件夹内新建一个hehe.css文件。

二、调整header部分

去掉了css文件，我们的页面现在是一团糟，那么现在我们就开始来整理这乱糟糟的局面。但是在你修改之前，你必须要有一个大概的计划，就是我们要把首页做成什么样子，要让它展现什么样的形式？否则，你会不知道从何入手。我们这里稍微仿效一下yahoo来做。 （注：广告代码会一律删除，如果需要可以自行添加。）

大家可以看到，整个页面内容是包含在<div id="wrap"></div>里边的，如果你感觉不爽，或者加载会慢，可以将其去掉，我们就不要这个外框架了。头尾删除代码。

那么现在我们先来整理头部部分，头部包含四部分，一个table，一个banner，一个menu和一个nav导航，既然仿效yahoo，那么我们应该让menu处于左列，而不应该在顶部了，所以我们将menu那部分代码剪切出去备用，而nav导航对于我们来说，在首页显得无关紧要，保留搜索代码，然后将其删除，现在来整理剩下的部分。

先来看table，这里边左边是logo，右边是菜单，我们不使用table，将这部分代码：

1. <table border="0" cellpadding="0" cellspacing="0" id="headertab">
   
2.     <tr>
   
3.         <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>
   
4.         <td id="topmenu"><ul>
   
5.                 <li><a href="{S_URL}/">首页</a></li>
   
6.                 <!--{loop $channels['menus'] $value}-->
   
7.                 <li><a href="$value[url]">$value[name]</a></li>
   
8.                 <!--{/loop}-->
   
9.                 <li><a href="{S_URL}/batch.search.php">搜索</a></li>
   
10.             </ul></td>
    
11.     </tr>
    
12. </table>

复制代码

修改为

1. <a href="{S_URL}/"><img src="{S_URL}/templates/$_SCONFIG[template]/images/logo.gif" alt="$_SCONFIG[sitename]" style="border: none;" /></a>
   
2. <ul>
   
3.     <li><a href="{S_URL}/">首页</a></li>
   
4.     <!--{loop $channels['menus'] $value}-->
   
5.     <li><a href="$value[url]">$value[name]</a></li>
   
6.     <!--{/loop}-->
   
7.     <li><a href="{S_URL}/batch.search.php">搜索</a></li>
   
8. </ul>

复制代码

然后我们在css里边进行定义：

1. /*设置全局*/
   
2. 
   
3. body { font-family::Geneva, Arial, Helvetica, sans-serif, "宋体"; font-size:12px; color:#000; background:#fff;}
   
4. body, ul, li, h1, h2, h3, h4, h5, h6, p { margin:0; padding:0;}
   
5. 
   
6. /*头部设置*/
   
7. 
   
8. #header { width:878px; margin:5px auto; height:60px; background:#F7F7F7; border:1px solid #C9C9C9; padding:10px;}
   
9.     #header img { float:left;}
   
10.         #header ul { float:right;}
    
11.         #header li { float:left; padding:5px 8px; font-size:14px;}

复制代码

我们作的页面宽度以900px为准，由于现在ie5.5几乎绝迹，所以我们不考虑ie5.5以及以下的浏览器。看下现在的样子：

恩，当然跟yahoo还差很多哦，我这个只是示例，大家如果自己作的话可以细致一点勾画。现在我们顶部还缺一个搜索框，把我们刚才保存的搜索代码加到header里边：

1. <form id="searchform" action="{S_URL}/batch.search.php" method="post">
   
2.     <input type="text" id="searchkey" name="searchkey" />
   
3.     <select name="type" id="type">
   
4.         <option value="">全部</option>
   
5.         <!--{loop $channels['types'] $value}-->
   
6.         <option value="$value[nameid]">$value[name]</option>
   
7.         <!--{/loop}-->
   
8.     </select>
   
9.     <button type="submit" value="true" name="subjectsearch">搜索</button>
   
10. </form>

复制代码

如果你很讨厌提交按钮是button，那么我们可以将其改成input，现在头部的代码为：

1. <div id="header">
   
2.     <a href="{S_URL}/"><img src="{S_URL}/templates/$_SCONFIG[template]/images/logo.gif" alt="$_SCONFIG[sitename]" style="border: none;" /></a>
   
3.     <ul>
   
4.                 <li><a href="{S_URL}/">首页</a></li>
   
5.                 <!--{loop $channels['menus'] $value}-->
   
6.                 <li><a href="$value[url]">$value[name]</a></li>
   
7.                 <!--{/loop}-->
   
8.                 <li><a href="{S_URL}/batch.search.php">搜索</a></li>
   
9.     </ul>
   
10.     <form id="searchform" action="{S_URL}/batch.search.php" method="post">
    
11.                 <input type="text" id="searchkey" name="searchkey" />
    
12.                 <select name="type" id="type">
    
13.                         <option value="">全部</option>
    
14.                         <!--{loop $channels['types'] $value}-->
    
15.                                 <option value="$value[nameid]">$value[name]</option>
    
16.                         <!--{/loop}-->
    
17.                 </select>
    
18.                 <input type="submit" value="搜索" class="submit" name="subjectsearch">
    
19.         </form>
    
20. </div>

复制代码

现在我们需要作的是调整搜索框的样式，在我们的css文件内加入以下代码：

1.     #header form { float:right; margin-top:8px;}
   
2.         #header input { width:580px; margin-left:5px;}
   
3.             #header input.submit { width:40px; cursor:pointer;}
   
4.         #header select { margin-left:5px;}

复制代码

看下现在的样式：

基本上都不已经弄好了，下一节会教大家来做下边的部分，如果这里有什么不懂可以回帖问下。

[ 本帖最后由 南芝恋 于 2008-1-3 16:58 编辑 ]

南芝恋

:)

cctvt

  good.............

cctvt

确实不错  最好把css对应的修改标明了  特方便 哈哈 支持下

chf

谢谢分享

cctvt

我想在头部 调用后台默认广告代码  在哪里增加？？  谢谢
我想把头部上下分成2大色块  比如上部色块是黑色的  下部是红色的  应该怎样弄？？

cctvt

就是类似这样的

cctvt

麻烦楼主给出完整的代码  学习下 谢谢

easyker

:) :) :) 不错

daofan

感谢楼主......