24.6 前台首页设计

24.6 前台首页设计

视频讲解：光盘TMlx24前台首页设计．exe

前台首页一般没有多少实质的技术，主要是加载一些功能模块，如登录模块、导航栏模块、公告栏模块等，使浏览者能够了解网站内容和特点。首页的重要之处是要合理地对页面进行布局，既要尽可能地将重点模块显示出来，同时又不能因为页面凌乱无序，而让浏览者无所适从，产生反感。本系统的前台首页index.php的运行结果如图24.15所示。

图24.15 前台首页运行结果

24.6.1 前台首页技术分析

在前台首页中应用switch语句与Smarty模板中的内建函数include设计一个框架页面，实现不同功能模块在首页中的展示。

switch语句在PHP动态文件中使用，根据超链接传递的值，包含不同的功能模块。

include标签在Smarty模板页中使用，在当前模板页中包含其他模板文件。其语法如下：

{include file="file_name " assign=" " var=" "}

其中，file指定包含模板文件的名称；assign指定一个变量保存包含模板的输出；var传递给待包含模板的本地参数，只在待包含模板中有效。

24.6.2 前台首页实现过程

（1）创建index.php动态页。在index.php动态页中，应用include_once语句包含相应的文件，应用switch语句，以超链接中参数page传递的值为条件进行判断，实现在不同页面之间跳转。index.php的关键代码如下：

【例24.4】代码位置：光盘TMsl24index.php

<?php session_start(); header("Content-type: text/html; charset=UTF-8"); //设置文件编码格式 require("system/system.inc.php"); //包含配置文件 if(isset($_GET["page"])){ $page=$_GET["page"]; }else{ $page=""; } include_once("login.php"); include_once("public.php"); include_once("links.php"); switch($page){ case "hyzx": include_once "member.php"; $smarty->assign('admin_phtml', 'member.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'allpub': include_once 'allpub.php'; $smarty->assign('admin_phtml', 'allpub.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'nom': include_once 'allnom.php'; $smarty->assign('admin_phtml', 'allnom.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'new': include_once 'allnew.php'; $smarty->assign('admin_phtml', 'allnew.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'hot': include_once 'allhot.php'; $smarty->assign('admin_phtml', 'allhot.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'shopcar': include_once 'myshopcar.php'; $smarty->assign('admin_phtml', 'myshopcar.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'settle': include_once 'settle.php'; $smarty->assign('admin_phtml', 'settle.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; case 'queryform': include_once 'queryform.php'; $smarty->assign('admin_phtml', 'queryform.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; default: include_once 'newhot.php'; $smarty->assign('admin_phtml', 'newhot.tpl'); //将PHP脚本文件对应的模板文件名称赋给模板变量 break; } $smarty->display("index.tpl"); //指定模板页 ?>

（2）创建index.tpl模板页。在模板文件index.tpl中应用Smarty的include标签调用不同的模板文件，生成静态页面。其关键代码如下：

【例24.5】代码位置：光盘TMsl24systemtemplatesindex.tpl

<table width="850" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2">{include file='top.tpl'}</td> </tr> <tr> <td width="216" align="left" valign="top"> {include file='login.tpl'} {include file='public.tpl'} {include file='links.tpl'} </td> <td width="634" height="700" align="center" valign="top"> {include file='search.tpl'} <! --载入模板文件-->{include file=$admin phtml}</td> </tr> </table> <table width="850" border="0" cellspacing="0" cellpadding="0"> <tr> <td>{include file='buttom.tpl'}</td> </tr> </table>

说明

本系统的功能较多，结构比较复杂，对于初学者来说学起来可能会比较困难。所以，本书将系统中的各个功能模块所涉及的文件（如PHP、TPL、css、JS等）尽可能都单独实现。读者在学习其中某个模块时，可以将相关的文件统一放到同一个目录下单独测试。