之所以单独创建一下文件，是因为后边很多页面都要用，这样只需包含这个页面即可，不用每个页面再写这段代码了。数据库连接文件创建好后，下面就该在index.html调用了。注意：这里要将后缀改为php才行，如果还是html的话，那么它将直接输出，不会经过服务器加工。接下来打开index.php，在源代码的最顶部插入如下代码，把conn.php文件包含进来：

<?
include("inc/conn.php");
?>

记得要把inc文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧，把原来做的#news_list下的ul列表改为如下形式：

<ul>
<?
$sql="select * from news order by id desc limit 0,6";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
?>
<li><span><?=$row['add_time']?></span><a href="#"><?=$row['title']?></a></li>
<? }?>
</ul>

第一句是创建一个sql查询语句，表示查询news表以id的倒序排列且只查询前6条，接下来循环读取出来。上传预览一下吧，是不是变形了，一方面标题太长了，另一方面日期应该只显示月和日，日期通过程序只取月日两位，处理标题有两种方法，一种是用程序截取，一种是css超出隐藏。下面先把日期给改了，把<?=$row['add_time']?>替换为：<?=date('m-d',strtotime($row['add_time']))?>

把日期改短后，显示正常了，但为了防止以后出现长标题把页面撑乱，让程序员注意截取一下标题或者你用css来实现，css超出隐藏的话可以给li定义高度和overflow:hidden属性。得了，从数据库中读取数据出来，就这么简单，下面说一下幻灯部分的实现吧。

和上边的读取方法一样，只不过用if判断一下$pic是否为空，来解决开头没有|的问题。上传上再预览一下吧，看看是不是显示出来了呢？是吧，已经显示出来了，打开源代码看看，刚才我们添加的程序部分并没有显示出来，取而代之的是数据库中的数据，这就是程序的奇妙之处。

好了，有关程序部分就讲这么多了，相信你也该明白是怎么回事了，剩下的你可以自己对照着制作个试试，如果你想学习程序的话，给大家推荐以前我学过的教程，asp的话可以学习fif小组的asp视频教程，在百度里搜索：fif asp，就出来了，第一个结果便是网易学院的fif视频教程；如果你对php感兴趣的话，建议去php100中文网，听听张恩民老师讲解的php系列教程，相信很快你也会成为一个程序高手的。

五、页面调试及浏览器兼容

在和程序员配合完成网站的过程中或网站上线后，常常会出现一些小问题，比如页面撑开，显示错乱等，这时候就需要查找问题出在哪里了。查找这些问题，希望大家装上火狐浏览器（因为它是相对标准的浏览器，这样显得你更专业一些，嘿嘿，最主要是有调试用的插件），装上之后还需要装两个插件：web developer，firebug

插件的下载请点击上图中的获取附加组件，然后输入关键字搜索到后下载安装即可。

web developer作用很强大，如下图所示可以查看当前页面所用到的图片，包括css中的背景图片

firebug这是个更好的一个插件，使用时点击浏览器右下角的萤火虫图标或者按F12，会启用这个插件，如需查看某一部分代码，点击插件上的查看页面元素按钮后，鼠标移到网页上，会出现一个相应的框，当框选中需要查看源代码的元素后点击，在插件区域就显示出当前区域的代码及样式了，可以禁用某些样式，还可以添加新的样式来查找问题所在。

如上图，先点1中的查看页面元素按钮，然后鼠标移动到2的地方，将会出现图中所示的蓝色线框，然后点击鼠标，会在插件中选中3位置的代码并在4位置出现对该区域生效的所有样式，即是上边框选部分的代码和样式，当鼠标移动到圈4位置时，会出现一个禁止图标，点击后禁用当前样式，这样便于查找问题所在，另外还可以在后边双击插入新的样式。