Windows桌面风格页面制作点滴.doc

1、 Windows 桌面风格页面制作点滴具体细节表现： 菜单对与对话框的凸凹感： 我们天天看到的右键菜单、任务栏和开始菜单，都有立体感，我们通过 css 来实现这种效果是很容易的。具体是通过 border（边框） ，在上下左右设置不同的颜色，以达到立体感的效果。以下面的例子说明： 样式表：.upborder-right: #000000 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8

2、D0 在要用立体感的层上加上 class=up 例子： 要使层有凸出感，我们可以先选择好层的背景，层的上、左边框用比背景颜色浅一些，而层的下、右边框用比背景深一些。同样如果定义有凹进感的层，上、左边要深，下、右边要浅。边框的宽度来改变立体感的强弱。像快速启动栏处的凸出感不太强，1px 就可以了。大家可以看一个没有定义好样式表的情形。 桌面图标：从图标的要求与功能上来看，它应该可以拖动、双击打开链接、图标的外观与链接的内容相关等。这样要求我们来用每个层来定义一个图标，图标的拖动就是层的拖动和层的绝对定位。图标图片最好是透明的 GIF 图片，大小与图标大小一致 3232。我们可以用.ICO 文件来

3、转换成.GIF 图形，或者用抓图软件来抓取系统桌面的图标。当然如果你的图像处理的水平不错，你可以做好更好看的图标。双击链接，我们可以通来 onDblClick（双击）鼠标事件来完成。排列图标的实现，就是再一次对层的绝对定位。 菜单：菜单每个项目同样是用层。主要用到鼠标的悬停(onmouseover)、鼠标离开(onmouseout)来改变层的背景色，和菜单的隐藏与显示。开菜单栏的图片用 2424 大小的 GIF 图片，菜单的下一级目录菜单可以用1616 大小的。同一类菜单放在一个层中来定位。 开始菜单中的定位：定位中通常用 top:XX;left:XX;而开始菜单要用 bottom:XX 来定

4、位，因为不管浏览器窗口的大小，菜单都在在最底处。开始菜单放在一个表格中，分为两个单元格，左边放在网站标记图片，右键放所有的菜单项目：关机、注销、帮助 下面以图示的形式说明开始菜单的制作细节：具体细节表现： 菜单对与对话框的凸凹感： 我们天天看到的右键菜单、任务栏和开始菜单，都有立体感，我们通过 css 来实现这种效果是很容易的。具体是通过 border（边框） ，在上下左右设置不同的颜色，以达到立体感的效果。以下面的例子说明： 样式表：.upborder-right: #000000 2px solid; border-top: #FFFFFF 2px solid; border-left:

5、#FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8D0 在要用立体感的层上加上 class=up 例子： 要使层有凸出感，我们可以先选择好层的背景，层的上、左边框用比背景颜色浅一些，而层的下、右边框用比背景深一些。同样如果定义有凹进感的层，上、左边要深，下、右边要浅。边框的宽度来改变立体感的强弱。像快速启动栏处的凸出感不太强，1px 就可以了。大家可以看一个没有定义好样式表的情形。 桌面图标：从图标的要求与功能上来看，它应该可以拖动、双击打开链接、图标的外观与链接的内容相关等。这样要求我们来用

6、每个层来定义一个图标，图标的拖动就是层的拖动和层的绝对定位。图标图片最好是透明的 GIF 图片，大小与图标大小一致 3232。我们可以用.ICO 文件来转换成.GIF 图形，或者用抓图软件来抓取系统桌面的图标。当然如果你的图像处理的水平不错，你可以做好更好看的图标。双击链接，我们可以通来 onDblClick（双击）鼠标事件来完成。排列图标的实现，就是再一次对层的绝对定位。 菜单：菜单每个项目同样是用层。主要用到鼠标的悬停(onmouseover)、鼠标离开(onmouseout)来改变层的背景色，和菜单的隐藏与显示。开菜单栏的图片用 2424 大小的 GIF 图片，菜单的下一级目录菜单可以用

7、1616 大小的。同一类菜单放在一个层中来定位。 开始菜单中的定位：定位中通常用 top:XX;left:XX;而开始菜单要用 bottom:XX 来定位，因为不管浏览器窗口的大小，菜单都在在最底处。开始菜单放在一个表格中，分为两个单元格，左边放在网站标记图片，右键放所有的菜单项目：关机、注销、帮助 下面以图示的形式说明开始菜单的制作细节： 开始菜单的制作细节： 序号 1 处是一个图片，放在单格中，将单格的背景设置为这个图片上端的颜色，单格的定位为底边对齐，这样做的好处是为了使当菜单长度大于图片时，不会出现颜色突变。用 Frontpage 和抓图工具可以完成。思路是用一个渐变的色条作表格的背景

8、，在上面写是所要的文字，调整好文字的颜色、字体，然后抓图，再通过 FP 里面的图像工具来转换角度。 序号 2 处是大小为 2424 的 GIF 透明图像，可以抓系统菜单中的图标。 序号 3 处是一段空隙，这里不要用空格，可以用一段隐藏的文字符号来代替。这是一个例子：- 序号 4 处的箭头是用的 Webdings 字体：4。背景色为深蓝色，是因为鼠标放在上面，通过鼠标形为来动态改变菜单层的样式表。例如： onMouseOver=this.className=over onMouseOut=this.className=overout 序号 5 处是用的水平线;为了使它更真实，要用样式表来控制它的

9、样式，例如：hrwidth:95%;border: 1px inset #F0F0F0 序号 6 处的空隙同样不要用空格;我们可以用 hspace(水平间距) 、vspace(垂直间距 )。在图像的定位中，要用绝对垂直居中（align=“absmiddle“） ，不然文字会与图像下边对齐;正常的表达：制作思路：把它们定位在一个表格中，每一个单元格中放置一个图片。这个大的表格定位在最底下，用上面提到的 bottom，表格的宽度调用 screen.width。用不同的样式表来控制各个部分的凹凸外观。用鼠标的形为来动态改变调用已经定义好的样式表。在快速启动栏中，要用到鼠标的 over，out，dow

10、n，up 四个行为。例如：onMouseXX=this.className=XX。快速启动栏处的图标大小为 2020，单元格的宽度要大于 24，因为太小了，当然悬停的时候，整个任务栏可能会左右移动。 窗口与对话框： 对话框中有可以拖动的标题栏，关闭窗口的关闭按钮。拖动形为就是层的拖动，关闭对话框就是层的隐藏。为了使对话框窗口能在各种分辨率下居中，我们可以调用 screen.width、screen.height （窗幕的宽与高） ，例如： style=“position: absolute; top:expression(screen.height-150)/2); left:expressi

11、on(screen.width-200)/2); width: 200; height: 150“ 网页主题变化： 现在很多网页都有换肤的功能，这样使网页更加个性化。为了使桌面风格的网页也有类似桌面主题的功能，我们可以使用改变样式表文件的链接：写几个有不周风格的样式表，通过 javascript 来调用，达到改变主题的功能。样式表的链接读法要改为： 这里的 id=css中的 css 与上面 javascript 中的 css.href 中的 css 指的是同一个。请看一下几个主题的效果（如图）： 另一存改变样式表的方法为改变 className:。大家可以点击色彩按钮看看效果：困难和解决: 由

12、于网页代码繁长，用到很多的小图片与大量的javascript。网页的更新维护将是一件很头痛的事。 下面是一些解决的方法：对于每个层的 ID 名称的的命名，要根据层的内容。例如个人说明的层用 id=“readme“ 开始菜单 id=“startmenu“等等。这样是为了更好的对源文件进行改进和优化。同一类层的 z-index 设置相同，谁在上，谁在下，都是要考虑的。 对于很多重复使用的一项代码，我们可以用 document.write 来写成javascript，像桌面图标等，下面是一个例子： function link(act，txt)document.write(“+txt+“) 如果网页中

13、有十处用到这个代码，我们就要写进十个上面粗体代码长度，但通用 javascript，我们就可以只写十个这样的代码：，这样使源文件更清晰，更容易看。 把所用的到的 funtion 函数全部放在 js 文件中，这样不会使风页文件太大，而出现打不出的现象，同时也更好的管理。 不足 Windows 桌面风格的网页只能是个网页，不能像 windows 系统一样的功能强大，再加上现在浏览器的差异性，在不同的浏览器下看到的效果也是大相径庭。 收获和经验 这个网页网页的实现过程，也是我认识了解 css、javascript 、html过程，是我水平进步的过程。从中也体验到编改写代码的乐趣，有时候为了一个代码要想很久，不能解决就到论坛求助，问题很快就解决了。如果大家有兴趣，可以到我的网页上下载源文件。 要做出一个桌面风格的网页，对于网页初学者来，是有一定困难的。也许你对上面所提到的代码很陌生，那也没关系，只要你对网页学习有兴趣，认真学习网页制作的基础知识，相信不久你的手中会诞生出更有创意的网页。