鬼先生的真实身份:网页界面设计技巧

　　引言

　　由于越来越多的企业开始建立自己的网站，网站除了具有传播信息的功能外，还往往代表企业的形象。网站建设商业化和广告化的趋势，对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持，但是，由于Windows标准控件的形状和颜色十分单一，网页的视觉效果可能会很差。例如：列表框和下拉列表框只能呈现凹陷边框，而且下拉列表的箭头的颜色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候，滚动条就不可避免的出现在网页的中间，破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色，网页的创作空间就会受到限制。因此，有必要实现网页中的自定义控件，以满足网页设计艺术化的要求。

　　编程原理

　　用客户端的JavaScript脚本语言，对HTML语言的< UL>< /UL>、< SPAN>< /SPAN>和< DIV>< /DIV>标记进行编程，可以在Internet Explore中实现网页中的菜单、树形结构目录、滚动条、列表框、下拉列表框及其它控件。

　　< SPAN>< /SPAN>标记定义了HTML文档中的一个行内间隔，可以给这个间隔赋一个id属性，给整个间隔一个统一的颜色、字体、边框、背景等属性，使整个间隔响应相同的事件，可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的某一项。多个< SPAN>< /SPAN>标记可以放在同一行内，组成下拉式菜单的菜单条。

　　< DIV>< /DIV>标记定义了HTML文档中的一个矩形区域，可以给这个区域赋一个id，给整个区域一个统一的颜色、字体、边框、背景等属性，使整个区域响应相同的事件，通过设置< DIV>< /DIV>标记的style.display属性为block或none可以在运行时动态的显示或隐藏这个区域，可以用这个标记制作树形结构目录的子目录、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。通过程序代码设置< DIV>< /DIV>标记的style.posLeft、style.posTop、style.posWidth、style.posHeight属性，可以在运行时动态的改变< DIV>< /DIV>区域的位置和大小，用来设计滚动条。

　　列表框和下拉列表框

　　在一个< DIV>< /DIV>标记中放置一组< SPAN>< /SPAN>标记，不同的< SPAN>< /SPAN>标记间用< BR>标记换行，形成一个列表框。给< SPAN>< /SPAN>标记添加事件，使其能根据鼠标的位置改变颜色。在< SPAN>< /SPAN>标记的onclick事件中，完成指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中，以便检索所选择的项目。

　　在网页中放置一个< SPAN>< /SPAN>标记作为下拉列表框。

　　在下拉列表框的右边放置另外一个< SPAN>< /SPAN>标记，设置这个< SPAN>< /SPAN>标记的背景图片，形成下拉箭头。在下拉列表框的下边放置一个< DIV>< /DIV>标记制作的列表框作为下拉列表，设置下拉列表的style.display属性为none，然后根据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序，将所选择的项目文本放在下拉列表框中。

　　弹出式菜单

　　由于网页不能响应鼠标右键，因此，在网页中只能用鼠标左键的click事件实现弹出式菜单。按照列表框的设计方法设计弹出式菜单，将弹出式菜单< DIV>< /DIV>标记的style.display属性设置为none。在document的click事件中，通过设置< DIV>< /DIV>标记的style.posLeft和style.posTop属性，将弹出式菜单移动到光标所在的位置，将< DIV>< /DIV>标记的style.display属性设置为block，显示菜单。当鼠标离开菜单时，隐藏菜单。

　　下拉式菜单

　　用一个< SPAN>< /SPAN>标记制作菜单条，菜单条< SPAN>< /SPAN>标记中嵌

　　套几个< SPAN>< /SPAN>标记作为子菜单。按照弹出式菜单的设计方法，分别为每一个子菜单设计下拉菜单。通过响应子菜单的鼠标事件，显示或隐藏下拉式菜单。

　　为了方便程序移植，可以将菜单数据放在数组里，在程序中通过document对象的write方法动态生成菜单。

　　滚动条

　　在网页中放置一个< DIV>< /DIV>标记作为滚动条的背景，设置背景的颜色和图片，背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个< DIV>< /DIV>标记作为滚动条的左右箭头，设置左右箭头的背景颜色和背景图片。在背景区域的中间放置一个< DIV>< /DIV>标记作为滚动条的滑块，设置滑块的背景颜色和背景图片，背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事件< DIV>< /DIV>标记用来响应鼠标事件，不设置这个标记的背景颜色和背景图片属性，使其透明。为了能正确的看到滚动条的各个部分并使事件< DIV>< /DIV>区域能截获鼠标事件，应使事件< DIV>< /DIV>标记的Z-INDEX属性最大，背景< DIV>< /DIV>标记的Z-INDEX属性最小。在事件< DIV>< /DIV>标记的鼠标事件中，通过比较鼠标window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。

　　在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条各个部件的大小和位置。在网页中放置一个< DIV>< /DIV>标记，将网页中需要滚动的部分都放在这个< DIV>< /DIV>区域中。在滚动条的滚动事件中通过改变这个标记的style.posLeft和style.posTop属性，实现网页的滚动。

　　用以上方法实现的滚动条，可以设计成任意的大小和颜色，放置在网页的任意位置，选择任意的图片作为箭头和滑块的背景，极大的满足艺术化设计网页的需求。

　　本文利用了HTML标记< SPAN>< /SPAN>和< DIV>< /DIV>的风格属性，在网页中实现了菜单、树形结构目录和自定义的滚动条、列表框、下拉列表框。到目前为止，只有运行在Windows平台下的浏览器Internet Explore支持这种风格属性，实际应用中应当判断客户浏览器类型，以便提供不同的网页。