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

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

                    图1 导航树

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

 

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

    

 

 

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

     

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

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

    目录树示例

    TreeConts.hhc文件的代码如下:

    定义目录树的结构

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

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

    你可能感兴趣的:(html)