Windows 桌面风格页面制作点滴 具体细节表现

　　菜单对与对话框的凸凹感：　　我们天天看到的右键菜单、任务栏和开始菜单，都有立体感，我们通过CSS来实现这种效果是很容易的。具体是通过border（边框），在上下左右设置不同的颜色，以达到立体感的效果。以下面的例子说明：

" C. e! L) e5 _
! s4 D# f5 f) ?) w: Q


　　样式表：.up{border-right: #000000 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8D0}
5 l0 w' T9 O2 J  X% w　　在要用立体感的层上加上class=up 例子：
$ ?$ T/ E, k# c- h* [4 J　　要使层有凸出感，我们可以先选择好层的背景，层的上、左边框用比背景颜色浅一些，而层的下、右边框用比背景深一些。同样如果定义有凹进感的层，上、左边要深，下、右边要浅。边框的宽度来改变立体感的强弱。像快速启动栏处的凸出感不太强，1px就可以了。大家可以看一个没有定义好样式表的情形。
% s! l0 @- b* U; S# h: m　　桌面图标：　　从图标的要求与功能上来看，它应该可以拖动、双击打开链接、图标的外观与链接的内容相关等。这样要求我们来用每个层来定义一个图标，图标的拖动就是层的拖动和层的绝对定位。图标图片最好是透明的GIF图片，大小与图标大小一致32×32。我们可以用.ICO文件来转换成.GIF图形，或者用抓图软件来抓取系统桌面的图标。当然如果你的图像处理的水平不错，你可以做好更好看的图标。双击链接，我们可以通来onDblClick（双击）鼠标事件来完成。排列图标的实现，就是再一次对层的绝对定位。
　　菜单：　　菜单每个项目同样是用层。主要用到鼠标的悬停(&111nmouseover)、鼠标离开(&111nmouseout)来改变层的背景色，和菜单的隐藏与显示。开菜单栏的图片用24×24大小的GIF图片，菜单的下一级目录菜单可以用16×16大小的。同一类菜单放在一个层中来定位。
7 u/ d. e, X0 @　　开始菜单中的定位：　　定位中通常用top:XX;left:XX;而开始菜单要用bottom:XX来定位，因为不管浏览器窗口的大小，菜单都在在最底处。开始菜单放在一个表格中，分为两个单元格，左边放在网站标记图片，右键放所有的菜单项目：关机、注销、帮助……
　　下面以图示的形式说明开始菜单的制作细节：
8 R: j( a) {; u, X! R! o, J开始菜单的制作细节： 　　序号1处是一个图片，放在单格中，将单格的背景设置为这个图片上端的颜色，单格的定位为底边对齐，这样做的好处是为了使当菜单长度大于图片时，不会出现颜色突变。用FrontPage和抓图工具可以完成。思路是用一个渐变的色条作表格的背景，在上面写是所要的文字，调整好文字的颜色、字体，然后抓图，再通过FP里面的图像工具来转换角度。
　　序号2处是大小为24×24的GIF透明图像，可以抓系统菜单中的图标。

# N- N+ }2 U* J

　　序号3处是一段空隙，这里不要用空格，可以用一段隐藏的文字符号来代替。这是一个例子：-----
, ~- t9 j) y+ q( D# @　　序号4处的箭头是用的Webdings字体：4。背景色为深蓝色，是因为鼠标放在上面，通过鼠标形为来动态改变菜单层的样式表。例如： &111nMouseOver=this.className='over' &111nMouseOut=this.className='overout'
5 C! J9 m; a. V( W) W+ X　　序号5处是用的水平线;为了使它更真实，要用样式表来控制它的样式，例如：hr{width:95%;border: 1px inset #F0F0F0}
　　序号6处的空隙同样不要用空格;我们可以用hspace(水平间距)、vspace(垂直间距)。在图像的定位中，要用绝对垂直居中（align=\"absmiddle\"），不然文字会与图像下边对齐;正常的表达：