1.10 后台首页设计
视频讲解
1.10.1 后台首页概述
程序开发人员在设计网站后台首页时,主要从后台管理人员对功能的易操作性、实用性、网站的易维护性考虑,因此采用了框架技术。52同城信息网后台首页主要包含以下内容:
发布付费的供求信息(包括公寓信息、招聘信息、求职信息、培训信息、家教信息、房屋信息、车辆信息、求购信息、出售信息、招商引资、寻人/物启示等),以及付费信息的浏览、审核及删除功能。
免费信息的浏览、审核及删除功能。
企业广告信息的发布、浏览、前台推荐显示、删除功能。
“网站首页”超链接,为管理员进入前台提供一个入口。
“退出登录”超链接,用于注销当前用户。
本案例中提供的后台首页如图1.35所示。该页面在本书资源包中的路径为\TM\01\cityinfo\admin\index.php。
图1.35 52同城信息网后台首页
1.10.2 后台首页技术分析
图1.36 网站后台框架流程
52同城信息网后台采用框架技术进行页面布局。所谓框架就是网页的各部分为相互独立的网页,又由一个网页将这些分开的网页组成一个完整的网页,显示在浏览者的浏览器中,重复出现的内容被固定下来,每次浏览者发出对页面的请求时,只下载发生变化的框架页面,其他子页面保持不变。
使用框架可以将容器窗口划分为若干个子窗口,在每个子窗口可以分别显示不同的网页。首先在开发工具中创建一个“左→中→右”的框架集,然后在标识①中添加“上→中→下”的框架集,最后在标识②中添加一个“左→右”的框架集,从而完成一个完整的后台框架。构建框架的流程如图1.36所示。
使用框架可以非常方便地完成导航工作。下面详细介绍框架网页的基本结构、设置框架集的属性和设置框架的属性。
1.框架网页的基本结构
框架网页通过一个或多个frameset和frame标记来定义。在框架网页中,将frameset标记置于head标记之后,以取代body标记的位置,当客户端浏览器不支持框架网页时,还可以使用noframes标记给出框架不能被显示时的替换内容。框架网页的基本结构如下:
2.设置框架集的属性
框架集包含如何组织各个框架的信息,可以通过frameset标记来定义。框架是按照行和列来组织的,可以使用frameset标记的下列属性对框架的结构进行设置。
(1)左右分割窗口属性cols。
在水平方向上将浏览器分割成多个窗口,可以通过框架的左右分割窗口属性cols实现。其语法格式如下:
<frameset cols="value,value,…"> <frame> <frame> </frameset>
其中,value用于指定各个框架的列宽,取值有像素、百分比(%)和相对尺寸(*)3种形式。
例如,若要通过框架将浏览器窗口划分为3列,其中第1列占浏览器窗口宽度的20%,第2列为120像素,第3列为浏览器窗口剩余部分的框架。代码如下:
<frameset cols="20%,120,*" > <frame> <frame> </frameset>
技巧
如果将cols属性设置为“*,*,*”,则表示将窗口划分成3个等宽的框架;如果将cols属性设置为“*,2*,3*”,则表示左边的框架占窗口宽度的1/6,中间的框架占窗口宽度的1/3,右边的框架占窗口宽度的1/2。
(2)上下分割窗口属性rows。
在垂直方向上将浏览器分割成多个窗口,可以通过框架的上下分割窗口属性rows实现。其语法格式如下:
<frameset rows="value,value,…"> <frame> <frame> </frameset>
其中value用于指定各个框架的行高,取值有像素、百分比(%)和相对尺寸(*)3种形式,设置方法与cols属性类似。例如,若要通过框架将浏览器窗口划分为3行,其中的第1行占浏览器窗口宽度的20%,第2行为120像素,第3行为浏览器窗口剩余部分的框架。代码如下:
<frameset rows="20%,120,*" > <frame> <frame> </frameset>
(3)框架边框显示属性frameborder。
该属性用于指定框架周围是否显示边框,取值为1(显示边框,默认值)或0(不显示边框)。
(4)framespacing。
该属性用于指定框架之间的间隔,以像素为单位。如果不设置该属性,则框架之间没有间隔。
(5)指定边框宽度属性border。
该属性用于指定边框的宽度,只有frameborder属性为1时有效。
3.设置框架的属性
使用<frame>标记可以设置框架的属性,包括框架的名称、框架是否包含滚动条以及在框架中显示的网页等。其语法格式如下:
<frame name="框架名称" src="文件" frameborder="数值" scrolling="值" [noresize] >
name:指定框架的名称。
src:指定在框架中显示的网页文件(包括HTML、ASP等网页文件)。
frameborder:指定框架周围是否显示边框,取值为1(显示)或0(不显示)。默认值为1。
scrolling:指定框架是否包含滚动条。如果将该属性设置为yes,则框架包含滚动条;若将该属性设置为no,则框架不包含滚动条;如果将该属性设置为auto,则在需要时包含滚动条。
noresize:可选属性,若指定了该属性,则不能调整框架的大小。
1.10.3 后台首页的实现过程
根据1.10.1节和1.10.2节的页面概述及实现技术分析,需要分别创建实现各区域的PHP文件,如实现Banner广告栏的top.php、功能导航栏的left.php、内容显示区的main.php和页尾文件的bottom.php等。实现该系统后台框架布局的完整代码如下:
例程12 代码位置:资源包\TM\01\cityinfo\admin\index.php
注意
在建设Web网站时,如何让不同分辨率的用户都能看到网页的最佳效果是程序员在设计之初所要考虑的首要问题。为了使屏幕的分辨率在大于1024×768像素的设置时仍然处于居中显示,只需要在设置框架布局时,在主框架两侧各设置一个宽度相同的blank.php空页即可。