开始菜单中的定位:定位中通常用top:XX;left:XX;而开始菜单要用bottom:XX来定位,因为不管浏览器窗口的大小,菜单都在在最底处。开始菜单放在一个表格中,分为两个单元格,左边放在网站标记图片,右键放所有的菜单项目:关机、注销、帮助....下面以图的形式说明开始菜单的制作细节:
序号1 处是一个图片,放在单格中,将单格的背景设置为这个图片上端的颜色,单格的定位为底边对齐,这样做的好处是为了使当菜单长度大于图片时,不会出现颜色突变。用Frontpage和抓图工具可以完成。思路是用一个渐变的色条作表格的背景,在上面写是所要的文字,调整好文字的颜色、字体,然后抓图,再通过FP里面的图像工具来转换角度。
序号2 处是大小为24×24的GIF透明图像,可以抓系统菜单中的图标。
序号3 处是一段空隙,这里不要用空格,可以用一段隐藏的文字符号来代替。这是一个例子:<span style="visibility: hidden">-----</span>
序号4 处的箭头是用的Webdings字体:<font face="Webdings">4</font>。背景色为深蓝色,是因为鼠标放在上面,通过鼠标形为来动态改变菜单层的样式表。例如: onMouseOver=this.className='over' onMouseOut=this.className='overout'
序号5 处是用的水平线;为了使它更真实,要用样式表来控制它的样式,例如:hr{width:95%;border: 1px inset #F0F0F0}
序号6 处的空隙同样不要用空格;我们可以用hspace(水平间距)、vspace(垂直间距)。在图像的定位中,要用绝对垂直居中(align="absmiddle"),不然文字会与图像下边对齐;正常的表达:
<img src="*.gif" align="absmiddle" width="24" height="24" hspace="6" vspace="1">

任务栏..
从上面两个图片中,可以看出,图像是主要部分,思路是:把它们定位在一个表格中,每一个单元格中放置一个图片。这个大的表格定位在最底下,用上面提到的bottom,表格的宽度调用screen.width。用不同的样式表来控制各个部分的凹凸外观。用鼠标的形为来动态改变调用已经定义好的样式表。在快速启动栏中,要用到鼠标的over,out,down,up四个形为。例如:onMouseXX=this.className='XX'。快速启动栏处的图标大小为20×20,单元格的宽度要大于24,因为太小了,当然悬停的时候,整个任务栏可能会左右移动。
窗口与对话框: 对话框中有可以拖动的标题栏,关闭窗口的关闭按钮。拖动形为就是层的拖动,关闭对话框就是层的隐藏。为了使对话框窗口能在各种分辨率下居中,我们可以调用screen.width、screen.height(窗幕的宽与高),例如:
style="position: absolute; top:expression((screen.height-150)/2); left:expression((screen.width-200)/2); width: 200; height: 150"
|