网页导航树的简单快速美观之实现

最新推荐文章于 2021-03-20 05:11:47 发布

一杯闲

最新推荐文章于 2021-03-20 05:11:47 发布

阅读量6.8k

点赞数

分类专栏： html 文章标签： object styles properties javascript 图形 html

本文链接：https://blog.csdn.net/hbccgg/article/details/6384548

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

导航树在Web应用中较为广泛。它能够向浏览者展示清晰、层次分明的信息组织结构形式，从而使浏览者较易从总体上把握信息架构。如图1所示：

图1 导航树

目前讨论较多的导航树的实现，大多是编写JavaScript代码，无论从程序方法上还是界面效果上都不太令人满意。内容表技术可以快速构建导航目录树，编程更为简单、界面更为友好。

内容表(Table of Contents)的扩展名为hhc，它也是一个HTML文件。内容表主要用于定义目录树的树形结构，需要与HHCTRL.OCX控件配合使用。它主要使用两个<OBJECT>标记来定义目录树的外观及其链接的网页，一般形式为：

第一个<OBJECT>标记定义窗口样式，参数FrameName用于指定在哪个页面打开被链接的文件，这个参数较为重要。实际使用时，可将网页分成左右两部分。单击目录树的叶结点时，在右边的窗口（right_frame）打开相应的网页。第二个<OBJECT>标记定义目录树的结点。参数Name定义结点的文字说明，参数Local说明该结点所链接的文件，参数ImageNumber用于指定该结点的图形编号（有1~42种图形可供选择）。在构造具体的目录树时，我们还需要利用<UL>和<LI>标记形成目录树的层次结构。

HHCTRL.OCX控件不需要用户额外安装或下载，微软已经将其随操作系统一起发布。该ActiveX控件的ID号为adb880a6-d8ff-11cf-9377-00aa003b7a11，实际应用时只需将其Item1参数赋值为某个hhc文件即可。

下面我们来看一个实例，主页面tree.html代码为：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>目录树示例</title> </HEAD> <body> <div style="FONT-SIZE: 8pt" mce_style="FONT-SIZE: 8pt" width=300 height=200> <object id="hhctrl" type="application/x-oleobject" style="BACKGROUND-ATTACHMENT:scroll;width:132px;height=150px;LEFT: 0px;BORDER-LEFT:2px;BORDER-TOP:2px;BORDER-BOTTOM:2px;BORDER-RIGHT: 2px;BORDER-LEFT-STYLE:outset;BORDER-TOP-STYLE:outset; BORDER-BOTTOM-STYLE:outset;BORDER-RIGHT-STYLE:outset;TOP:0px; BACKGROUND-COLOR: #FFFFFF" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" width=300 height=200 align="middle"> <param name="Command" value="Contents"> <param name="flags" value="0x0,0x35,0xFFFFFFFF"> <param name="Item1" value="TreeConts.hhc"> </object> </div> </body> </html>

TreeConts.hhc文件的代码如下：

<HTML><HEAD><TITLE>定义目录树的结构</TITLE></HEAD> <BODY> <OBJECT type="text/site properties"> <param name="Window Styles" value="0x800027"> <param name="FrameName" value="right_frame"> </OBJECT> <UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="计算机科学系"> <param name="ImageNumber" value="1"> </OBJECT> <UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="计算机软件"> <param name="Local" value="jsjrj.html"> <param name="ImageNumber" value="14"> </OBJECT> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="计算机应用"> <param name="Local" value="jsjyy.html"> <param name="ImageNumber" value="13"> </OBJECT> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="计算机科学"> <param name="Local" value="jsjkx.html"> <param name="ImageNumber" value="13"> </OBJECT> </UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="经济管理学院"> <param name="ImageNumber" value="1"> </OBJECT> <UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="信息管理系"> <param name="ImageNumber" value="3"> </OBJECT> <UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="信息管理"> <param name="Local" value="xxgl.html"> <param name="ImageNumber" value="27"> </OBJECT> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="电子商务"> <param name="Local" value="ddsw.html"> <param name="ImageNumber" value="39"> </OBJECT> </UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="国际贸易系"> <param name="ImageNumber" value="1"> </OBJECT> <UL> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="国际贸易"> <param name="Local" value="gjmy.html"> <param name="ImageNumber" value="39"> </OBJECT> <LI> <OBJECT type="text/sitemap"> <param name="Name" value="国际金融"> <param name="Local" value="gjjr.html"> <param name="ImageNumber" value="39"> </OBJECT> </UL> </UL> </UL> </BODY></HTML>

运行tree.html后，效果如图1所示。

如果想修改导航树的内容，只需要简单地用记事本修改一下TreeConts.hhc文件即可。