2.7　前台首页设计

当今时代，很多人都十分重视事物的第一印象，第一印象基本上就决定对某个事物的看法和态度，在网络中更是如此，网站给人的第一印象如果不好，那么就会有很多人因此而不去浏览该网站，无论网站的内容是否丰富。可以说网站首页设计的成功与否直接影响着整个网站的发展。

2.7.1　前台首页概述

网站首页是整个网站的脸面，既要突出企业的形象，又要展示出网站强大的功能。如果网站首页设计得非常成功，那无疑是为整个网站的成功增添了一个砝码。BCTY365网上社区首页的设计以企业的品牌形象为基础，全力打造网站的整体功能，重点推出企业的软件产品，具体内容如下。

　网站菜单导航：包括“首页”“技术支持”“在线订购”“社区论坛”“软件下载”“升级下载”“购买须知”“联系我们”等导航菜单。

　用户注册和登录模块：实现用户注册、会员登录、找回密码和修改密码的功能。

　网站公告：主要用于发布社区中的一些新消息和重大事件。

　编程词典模块：推广企业的软件产品。

　软件下载模块：展示企业提供的适用版和免费的软件产品。

　常见问题模块：列举出编程中常见问题的解决方案。

　社区论坛模块：浏览社区论坛中的部分帖子。

　升级下载模块：提供一些软件的升级版本下载。

上述内容就是BCTY365网上社区首页中体现出的内容，为了更加直观地了解网上社区首页的设计，这里先预览一下社区首页，该首页在本书资源包中的路径为\TM\02\bcty365\index.php，如图2.21所示。

BCTY365网上社区首页的设计看上去很复杂，由多个版块组成，但实现的过程非常简单。总体架构使用一个2行3列的表格和一个3行3列的表格，将其分割成不同的版块，然后使用脚本语句从数据库中读取数据，最后将数据循环输出到页面中，其中网站的头尾文件使用include包含语句调用。首页的框架结构如图2.22所示。

2.7.2　前台首页技术分析

作为网站首页，不一定要具有什么特殊的技术或者功能，应该是以简洁、鲜明、突出企业形象、展示网站的功能为主。即使使用的是一个静态页面，只要能够将内容表达全面、完整，那么这个首页设计也是非常成功的。

在本案例首页的设计中，应用到一个文字循环滚动的技术，通过该技术来输出社区中发布的公告信息。该技术是通过JavaScript脚本和div标签来共同实现的，其实现的原理是：首先创建一个div标签，然后在div标签中输出公告信息，最后通过JavaScript来对div标签进行操作，实现div标签中内容的滚动输出。该技术的实现在index.php页中完成，其中使用的JavaScript脚本的代码如下：

例程03　代码位置：资源包\TM\02\bcty365\index.php

在div标签中，主要是输出数据库中存储的公告信息，并且对输出的信息进行截取和替换，规范输出的内容。div标签中的程序代码如下：

在首页中使用滚动条是一个比较不错的方法，可以增加网页的动态效果，增加网页的观赏性，而且不会影响到网页的浏览速度。

2.7.3　前台首页的实现过程

　前台首页使用的数据表：tb_tell、tb_soft、tb_bccd、tb_bb、tb_cjwt、tb_bbs、tb_sjxz

开发网站首页主要就是连接数据库，从数据库中读取数据，最后应用循环语句将数据库中的数据输出到前台页面。由于使用的代码较多，而且多数都是重复使用，所以这里只给出首页中公告发布模块的代码。

公告发布模块主要实现从数据库中读取公告数据，将数据在首页中滚动输出，并且对公告信息的长度进行控制，保证内容的整齐、规范。详细代码可以参考本书资源包中的TM\02\bcty365\index.php文件。index.php文件的部分代码如下：

例程04　代码位置：资源包\TM\02\bcty365\index.php

代码贴士

❶应用unhtml()和msubstr()自定义函数去除输出字符串中的空格和控制输出字符串的长度。

❷strlen()：获取指定字符串的长度。

❸str_replace()：实现字符串的替换。