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

导航树在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文件即可。

网页导航树的简单快速美观之实现相关推荐

如何简单快速复制网页上的文字？
如何简单快速复制网页的文字如何简单快速复制网页的文字? 如何简单快速复制网页的文字? chrome 插件supercopy
简单易用的公司网页模板，助您快速建站
在当今数字化时代,拥有一个高质量的公司网页是每个企业成功的关键.然而,对于那些没有技术专业知识的人来说,创建一个专业的网页可能是一项艰巨的任务.但是,现在有许多简单易用的公司网页模板可用于帮助您快速建 ...
如何做一个简单的网页导航
如何运用html和css制作一个简单的网页导航代码示例: <!DOCTYPE html> <html><head><meta charset="u ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
流行趋势：打造极具吸引力的网页导航设计
为了让你的网站脱颖而出,不仅需要有丰富的高质量的内容,同时也要兼顾网站的创新性和功能性.从用户的角度出发好好想一下,怎样让你的网站用户体验更友好?简单的搜索功能是需要的,或者你也可以精心设计一下网站的 ...
网页导航菜单制作——快，很快，非常快
网页导航菜单已成为网页不可或缺的一部分,或许我们误以为它与网页是一个整体,而忽视了他的存在.不可否认,网页导航菜单与网页有密不可分的联系.但是,网页导航菜单也是需要独立编写的,特别是flash网页导航 ...
iPhone X 网页导航概念
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在移动应用程序设计中,选择汉堡菜单按钮还是标签栏作为导航一直是个古老的争论话题.目前看来,由于手机屏 ...
关于网页导航栏制作的几种方法与常见问题解决（新人向）
无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内 ...
bootstrap 导航菜单折叠位置_教大家如何编写一个网页导航条
导航条简单地说就是对你整个网站模块的简单介绍,你可以直接点击导航条某一个按钮或板块便可进入其相应的界面,如:网页.新闻.贴吧等 .在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们 ...

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

网页导航树的简单快速美观之实现相关推荐

最新文章

热门文章