- 论坛徽章:
- 0
|
在Web页面上制作WINDOWS风格的菜单
李启拴
随着Internet应用的发展，网页的制作技术已成为人们关注的热点，如何设计出界面美观、下载速度快、操作方便、信息密集度高的WEB页面成为页面制作者的最终目标。下面给大家介绍一种在WEB页面上制作菜单的方法，这种方法有如下一些优点：
* 仿WINDOWS中的菜单风格。
*下载速度快，它仅是由DHTML代码构造出来的，因此页面的字节数很小。
* 易于动态维护菜单的栏目数及子菜单中的项目数。
* 可实现多级菜单。
一、这种制作方法主要涉及以下一些基本知识：
1、DHTML：它是基于HTML和CSS(Cascading Style Sheet)，HTML就是我们一般所写的超文本标记语言，CSS指的是页面上的每个元素都具有一个Style属性，通过改变Style属性，可动态地改变页面上各元素的显示属性。设置方法如下：
如在HTML文件中有一段文本：
<p>; Some Text Here </p>;
为了通过CSS来控制这一段文本，需要修改它的属性：
<p id=txttitle1" style= font-size:50px;color: green>;Some Text Here</p>;
其中id 是给该段文本定义了一个参考名，从而就可通过该ID在_JSCRIPT或_VBSCRIPT中引用它；style即是定义的CSS，它包含很多属性项，如上例中的font-size、color，在SCRIPT中可以动态地来改变这些属性项，从而实现动态改变显示风格的效果，它的语法如下：
style=”属性名1：属性值1；属性名2：属性值2;......;”
下面是本例中所用到的几个CSS属性：
color：指定元素的字体颜色。
background-color：指定元素的背景颜色。
Position：指定元素的定位方式，缺省情况下是顺序定位，即各个元素顺序排列，如果要指定某一元素显示在屏幕上的某一确定位置，则应指定position属性为绝对定位方式，即position:absolute。
Top：元素的左上角距窗口上边框的距离。
Left：元素的左上角距窗口左边框的距离。
Cursor：光标类型。
Filter：实现滤镜效果。
2、DHTML中的事件触发机制：onclick,onload,onfilterchange等等。
3、DHTML的目标模型：是目标的树形结构，如同在Windows文件系统中的路径一样，参考一个文件时要指定其路径，同样在DHTML中参照页面上的某个元素时，要指定其层次路径，一般表示为：document.all.元素ID.属性。
4、_Vbscript或_Jscript：这是DHTML中内部的操作语言，因此要了解其语法、函数等。
下面是一个实例，具体来介绍一下这种菜单的实现方法。
上述代码实现的效果如图1所示。
（图注WEB-1） 图1
需要说明的几个问题：
* 在以上例子中，为了减小代码的长度，已将弹出菜单简化成了一个，即弹出的菜单都一样。
* 上例中，代码看起来很多，事实上整个页面才5134字节，制作起来也很容易，大部分工作只是拷贝和粘贴。
* 如果您想在自己的机器上演示一下上述效果，则只需要将上例中的代码拷贝下来，然后另存为一个HTML类型（如 menu.htm）的文件，然后用鼠标双击该文件即可看到这种效果，也可访问http://liqishuan.163.net/menu.htm 直接看到。 |
|
免费注册
发表于 2003-09-27 11:27
