14.4 首页设计
首页对于系统是至关重要的，决定用户对系统的第一印象。本系统首页页面设计简洁，主要包括以下三部分内容。
（1）首部导航栏：包括首页链接、注册。
（2）左侧显示区：包括最新博文、最新图片和系统时间模块。游客主要通过该页面浏览文章、浏览图片及发表评论。
（3）主显示区：为系统公告栏，显示系统及网站的最新资讯。
14.4.1 首页技术分析
在页面主显示区是一个公告栏模块。公告栏主要用于公布系统版本的更新或升级情况、网站的最新活动安排等，也可以链接一些精彩的博文。本系统的公告栏模块是通过<marquee>标签来实现的。<marquee>标签可以实现文字或图片的滚动效果。<marquee>标签的特点就是可以让文字或图片动起来，其常用属性如表14-1所示。
表14-1 marquee属性表
| 属性 | 属性值 | 说明 | 应用举例 |
| direction | left、right、down、up | 文字移动属性，分别表示从右往左、从左往右、从下到上、从上到下 | <marquee direction="up">从下往上移动</marquee> |
| behavior | scroll，slide，alternate | 文字移动方式，分别表示沿同一方向不停滚动、只滚动一次、在两个边界内来回滚动 | <marquee behavior="scroll">不停滚动</marquee> |
| loop | 数值1,2,3… | 循环次数，不指定则表示为无限循环 | <marquee behavior="scroll" loop="3">只滚动3次</marquee> |
14.4.2 首页的实现过程
博客管理系统首页采用二分栏结构。具体实现代码如下。
<?php
session_start();
include "Conn/conn.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>HBSI博客</title>
<link href="CSS/style.css" rel="stylesheet"/>
</head>
<?php
$str=array("河","北","软","件","职","业","技","术","学","院");
$word=strlen($str);
for($i=0;$i<4;$i++){
$num=rand(0,$word*2-1); //$word=$word*2-1
$img=$img."<img src='images/checkcode/".$num.".gif' width='16'
height='16'>"; //显示随机图片
$pic=$pic.$str[$num]; //将图片转换成数组中的文字
}
?>
<script src="JS/check.js" language="javascript">
</script>
<body onselectstart="return false">
<table width="757" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr align="right" valign="top">
<td height="149" colspan="2" background="images/head.jpg">
<table width="100%" height="149" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td height="51" align="right">
<br>
<table width="262" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td width="26" height="20"><a href="index.php"></a></td>
<td width="71" class="word_white"><a href="index.php"><span
style="FONT-SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: none">
首 页</span></a></td>
<td width="87"><a href="file.php"><span style="FONT-SIZE:9pt;
COLOR: #000000; TEXT-DECORATION: none">我的博客</span></a></td>
<td width="55"><a href="<?php echo (!isset($_SESSION
[username])?'Regpro.php':'safe.php'); ?>"><span style="FONT-
SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: none"><?php echo
(!isset($_SESSION[username])?"博客注册":"安全退出"); ?></span>
</a></td>
<td width="23"> </td>
</tr>
</table>
<br></td>
</tr>
<tr>
<td height="66" align="right"><p> </p></td>
</tr>
<tr>
<form name="form" method="post" action="checkuser.php">
<td height="20" valign="baseline">
<table width="100%" border="0" cellpadding="0" cellspacing=
"0">
<tr>
<td width="32%" height="20" align="center" valign=
"baseline"> </td>
<td width="67%" align="left" valign="baseline" style="text-
indent:10px;">
<?php
if(!isset($_SESSION[username])){
?>
用户名:
<input name=txt_user size="10">
密码:
<input name=txt_pwd type=password style="FONT-SIZE: 9pt; WIDTH: 65px"
size="6">
验证码:
<input name="txt_yan" style="FONT-SIZE: 9pt; WIDTH: 65px" size="8">
<input type="hidden" name="txt_hyan" id="txt_hyan" value="<?php echo
$pic;?>">
<?php echo $img; ?>
<input style="FONT-SIZE: 9pt" type=submit value=登录 name=sub_dl onClick=
"return f_check(form)">
<?php
}else{
?>
<font color="red"><?php echo $_SESSION[username]; ?>
</font> 河北软件职业技术学院网站欢迎您的光临！！！当
前时间：<font color="red"><?php echo date("Y-m-d l"); ?>
</font>
<?php
}
?>
</td>
<td width="1%" align="center" valign="baseline"> </td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</td>
</tr>
<tr>
<td width="236" height="501" background=" images/left.jpg">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td height="155" align="center" valign="top"> <?php
include "cale.php"; ?></td>
</tr>
<tr>
<td height="125" align="center" valign="top"><br>
<table width="200" border="0" cellspacing="0" cellpadding=
"0">
<tr>
<td><table width="201" border="0" cellspacing="0"
cellpadding="0" valign="top" style="margin-top:5px;">
<?php
$sql=mysql_query("select id,title from tb_article order by
now desc limit 5");
$i=1;
while($info=mysql_fetch_array($sql)){
?>
<tr>
<td width="201" align="left" valign="top">
<a href="article.php?file_id=<?php
echo $info[id];?>" target="_blank"><?php echo $i."、
".substr($info[title],0,20);?></a>
</td>
</tr>
<?php
$i=$i+1;
}
?>
<tr>
<td height="10" align="right"><a href="file_more.
php"><img src=" images/more.gif" width="27" height=
"9" border="0"> </a></td>
</tr>
</table></td>
</tr>
</table></td></tr>
<tr>
<td height="201" align="center" valign="top"> <br>
<table width="145" border="0" cellspacing="0" cellpadding=
"0">
<tr>
<td>
</td>
</tr>
</table> </td>
</tr>
</table>
</td>
<td width="521" height="501" align="center" background="images/right.
jpg">
<table width="100%" height="98%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="372" align="center"><table style="WIDTH: 252px"
cellspacing=0 cellpadding=0>
<tbody>
<tr>
<td style="WIDTH: 429px; HEIGHT: 280px" colspan=3 rowspan=2
align="center">
<a href="file.php" >
<label style="background: #FCC;font-size:36px; color:
#000; font-weight:bold">
发表新博文
</label>
</a>
<marquee onMouseOver=this.stop()
style="WIDTH: 426px; HEIGHT: 280px" onMouseOut=this.start()
scrollamount=2 scrolldelay=7 direction=up>
<span style="FONT-SIZE: 9pt"><center>
河北软件职业技术学院网站欢迎您！！！
</center>
</span>
</marquee>
</td>
</tr>
<tr></tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="66"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
首页运行效果如图14-12所示。
图14-12 博文系统首页
注意，通过include命令包含Conn/文件夹下的conn.php，该文件中保存着创建数据库连接的代码，因为系统中多个页面都要与数据库创建连接，所以把创建数据库连接的代码写在独立的文件中。代码如下。
<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("db_tmlog",$link);
mysql_query("set names gb2312");
?>