Windows桌面风格页面制作点滴

80酷酷网    80kuku.com

  window|页面具体细节表现:

  菜单对与对话框的凸凹感:

  我们天天看到的右键菜单、任务栏和开始菜单,都有立体感,我们通过css来实现这种效果是很容易的。具体是通过border(边框),在上下左右设置不同的颜色,以达到立体感的效果。以下面的例子说明:

  样式表:.up{border-right: #000000 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8D0}

  在要用立体感的层上加上class=up 例子:<div class=up #000000 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #000000 2px solid; background-color: #D8D8D0}

  在要用立体感的层上加上class=up 例子:<div class=up 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="http://edu.cnzz.cn/NewsInfo/*.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(窗幕的宽与高),例如:

   absolute; top:expression((screen.height-150)/2); left:expression((screen.width-200)/2); width: 200; height: 150"

  网页主题变化:

  现在很多网页都有换肤的功能,这样使网页更加个性化。为了使桌面风格的网页也有类似桌面主题的功能,我们可以使用改变样式表文件的链接:写几个有不周风格的样式表,通过javascript来调用,达到改变主题的功能。
<script Language="javascript">
function changecss(tt)
{
css.href=tt;//tt是样式表文件的路径
}
</script>

  样式表的链接读法要改为:<link rel="stylesheet" id="css" type="text/css" href="XX.css">这里的id=css中的css与上面javascript中的css.href中的css指的是同一个。请看一下几个主题的效果(如图):

  另一存改变样式表的方法为改变className:
<SCRIPT>function c(css){id.className=css;}</SCRIPT>。大家可以点击色彩按钮看看效果:

困难和解决:

  由于网页代码繁长,用到很多的小图片与大量的javascript。网页的更新维护将是一件很头痛的事。

  下面是一些解决的方法:
  对于每个层的ID名称的的命名,要根据层的内容。例如个人说明的层用 id="readme" 开始菜单 id="startmenu"等等。这样是为了更好的对源文件进行改进和优化。同一类层的z-index设置相同,谁在上,谁在下,都是要考虑的。

  对于很多重复使用的一项代码,我们可以用document.write来写成javascript,像桌面图标等,下面是一个例子:

function link(act,txt)
{document.write("<div class=link onMouseOver=this.className='overlink' onMouseOut=this.className='link' >"+txt+"</div>")}

  如果网页中有十处用到这个代码,我们就要写进十个上面粗体代码长度,但通用javascript,我们就可以只写十个这样的代码:
<script>link('pop('id.htm')','链接之一')</script>,这样使源文件更清晰,更容易看。

  把所用的到的funtion函数全部放在js文件中,这样不会使风页文件太大,而出现打不出的现象,同时也更好的管理。

  不足

  Windows桌面风格的网页只能是个网页,不能像windows系统一样的功能强大,再加上现在浏览器的差异性,在不同的浏览器下看到的效果也是大相径庭。

  收获和经验

  这个网页网页的实现过程,也是我认识了解css、javascript、html过程,是我水平进步的过程。从中也体验到编改写代码的乐趣,有时候为了一个代码要想很久,不能解决就到论坛求助,问题很快就解决了。如果大家有兴趣,可以到我的网页上下载源文件。

  要做出一个桌面风格的网页,对于网页初学者来,是有一定困难的。也许你对上面所提到的代码很陌生,那也没关系,只要你对网页学习有兴趣,认真学习网页制作的基础知识,相信不久你的手中会诞生出更有创意的网页。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: