Windows 桌面风格页面制作点滴
时间：2007-02-17 来源：PHP爱好者
Windows桌面风格页面的想法
大约在一年半前，那时海娃刚学网页制作不久，整天为辛苦做的网页没有人看而发愁时，正好开始使用一个抓图的软件，于是在床上想：为什么不做一个桌面似的网页呢？那晚由于这个新想法，我真的兴奋了许久!这的确是一个很好的想法，很多网友在看到我的桌面网页时说，他们也有这种想法，只是由于各种原因没有做出来。 桌面网页的特色
桌面风格的网页做首页或者导航栏比较好，因为它简洁、直观，当浏览者进入桌面就看到网页有哪几个部分内容。根据内容和栏目的多少，来确定桌面图标的图像与多少，同样，在菜单和任务栏区，都可做新闻、信息链接。网页的实现
当时有这个想法时，我还没有接触过css，javascript，只是用frontpage来做简单的的网页，懂很简单的html。由于当时这种桌面风格的网页是由一个抓图软件而想起的，所以，开始就用抓来的图片加上热点链接来实现，也没有右键菜单。而下面的任务栏则是用框架网页来实现。严格的说，那不叫做桌面风格的网页，只能说是图片。对于有一定html、css、javascript基础的网页爱好者，实现这种桌面风格的网页是不难的。桌面中的元素：图标、菜单、对话框主要是用层的定位、显示隐藏、拖动等来实现的。可以说，样式表在实现桌面风格的起关键性作用！由于桌面网页比一般的网页工作量大很多，为了使制作者更好的改进，浏览者更容易看懂源文件，应将网页各个部分进行拆分。从系统桌面来看，大体上有以下几个部分：桌面图标、开始菜单、任务栏、右键菜单和对话框窗口。同样网页也分为这几部分，我们可以先把各个部分完成后，再把它们组合在一起。
主要制作工具：网页制作Frontpage2000、抓图HyperSnap-DX 4、图像处理工具、源文件编辑工具Notepad。（这只是我比较习惯的工具，大家可以根据自己的喜好选择工具）
制作环境：Windows2000专业版、IE5.0。具体细节表现： 菜单对与对话框的凸凹感：
我们天天看到的右键菜单、任务栏和开始菜单，都有立体感，我们通过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 style=".."></div>要使层有凸出感，我们可以先选择好层的背景，层的上、左边框用比背景颜色浅一些，而层的下、右边框用比背景深一些。同样如果定义有凹进感的层，上、左边要深，下、右边要浅。边框的宽度来改变立体感的强弱。像快速启动栏处的凸出感不太强，1px就可以了。大家可以看一个没有定义好样式表的情形。桌面图标：
从图标的要求与功能上来看，它应该可以拖动、双击打开链接、图标的外观与链接的内容相关等。这样要求我们来用每个层来定义一个图标，图标的拖动就是层的拖动和层的绝对定位。图标图片最好是透明的GIF图片，大小与图标大小一致32×32。我们可以用.ICO文件来转换成.GIF图形，或者用抓图软件来抓取系统桌面的图标。当然如果你的图像处理的水平不错，你可以做好更好看的图标。双击链接，我们可以通来onDblClick（双击）鼠标事件来完成。排列图标的实现，就是再一次对层的绝对定位。菜单：
菜单每个项目同样是用层。主要用到鼠标的悬停(onmouseover)、鼠标离开(onmouseout)来改变层的背景色，和菜单的隐藏与显示。开菜单栏的图片用24×24大小的GIF图片，菜单的下一级目录菜单可以用16×16大小的。同一类菜单放在一个层中来定位。开始菜单中的定位：
定位中通常用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="http://www.okasp.com/techinfo/*.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; 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>。大家可以点击色彩按钮看看效果：为了使网页更形象，我可以用键盘事件来进行网页操作，如用键盘打开开始菜单，Esc键隐藏对话框等等。这里要用到了onkeydown;下面是一个例子：
<script Language="javascript">
function keypress()
{
if(event.keyCode==13)window.open('http://homepage.yesky.com'，''，'');
｝
document.onkeydown = keypress
</script>
当在当前页回车时，就会打开网页陶吧http://homepage.yesky.com，这里的13代表回车键。
将下面代码存为htm文件，就会显示各个字母代码的数字（IE浏览器适用）。<script>
function show(){
alert(event.keyCode);}
</script>
<body onKeydown=show()> 网页进度条： 思路是根据源文件下载的进程来实现的，把源文件分为几个部分，每隔一部分，加一段代码，来动态改变一个图片的长度.显示出下载的进程和百分比。困难和解决:由于网页代码繁长，用到很多的小图片与大量的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' style='padding-left:16;padding-top:1;padding-bottom:1' onclick="+act+">"+txt+"</div>")}如果网页中有十处用到这个代码，我们就要写进十个上面粗体代码长度，但通用javascript，我们就可以只写十个这样的代码：
<script>link('pop('id.htm')'，'链接之一')</script>，这样使源文件更清晰，更容易看。把所用的到的funtion函数全部放在js文件中，这样不会使风页文件太大，而出现打不出的现象，同时也更好的管理。不足Windows桌面风格的网页只能是个网页，不能像windows系统一样的功能强大，再加上现在浏览器的差异性，在不同的浏览器下看到的效果也是大相径庭。收获和经验这个网页网页的实现过程，也是我认识了解css、javascript、html过程，是我水平进步的过程。从中也体验到编改写代码的乐趣，有时候为了一个代码要想很久，不能解决就到论坛求助，问题很快就解决了。如果大家有兴趣，可以到我的网页上最新版本 0324 下载源文件。要做出一个桌面风格的网页，对于网页初学者来，是有一定困难的。也许你对上面所提到的代码很陌生，那也没关系，只要你对网页学习有兴趣，认真学习网页制作的基础知识，相信不久你的手中会诞生出更有创意的网页。我们天天都和windows打交道，Windows的桌面对我们来说已经是熟得不能再熟了，但是朋友们是否见过Windows桌面风格的网页呢？这对我们来说倒很有几分新鲜感。笔者曾经尝试着做过这样一个Windows桌面风格的网页无忧视窗，大家不妨去感受一下，是不是有一些新奇的感觉？下面我以自己制作这个桌面网站的经历，给大家大略介绍一下Windows桌面风格页面的制作的点点滴滴，希望能起到一些抛砖引玉的作用，帮助大家拓展思路。
（出处：无忧视窗）
php爱好者站 http://www.ｐｈｐfans.net dreamweaver|flash|fireworks|photoshop.
大约在一年半前，那时海娃刚学网页制作不久，整天为辛苦做的网页没有人看而发愁时，正好开始使用一个抓图的软件，于是在床上想：为什么不做一个桌面似的网页呢？那晚由于这个新想法，我真的兴奋了许久!这的确是一个很好的想法，很多网友在看到我的桌面网页时说，他们也有这种想法，只是由于各种原因没有做出来。 桌面网页的特色
桌面风格的网页做首页或者导航栏比较好，因为它简洁、直观，当浏览者进入桌面就看到网页有哪几个部分内容。根据内容和栏目的多少，来确定桌面图标的图像与多少，同样，在菜单和任务栏区，都可做新闻、信息链接。网页的实现
当时有这个想法时，我还没有接触过css，javascript，只是用frontpage来做简单的的网页，懂很简单的html。由于当时这种桌面风格的网页是由一个抓图软件而想起的，所以，开始就用抓来的图片加上热点链接来实现，也没有右键菜单。而下面的任务栏则是用框架网页来实现。严格的说，那不叫做桌面风格的网页，只能说是图片。对于有一定html、css、javascript基础的网页爱好者，实现这种桌面风格的网页是不难的。桌面中的元素：图标、菜单、对话框主要是用层的定位、显示隐藏、拖动等来实现的。可以说，样式表在实现桌面风格的起关键性作用！由于桌面网页比一般的网页工作量大很多，为了使制作者更好的改进，浏览者更容易看懂源文件，应将网页各个部分进行拆分。从系统桌面来看，大体上有以下几个部分：桌面图标、开始菜单、任务栏、右键菜单和对话框窗口。同样网页也分为这几部分，我们可以先把各个部分完成后，再把它们组合在一起。
主要制作工具：网页制作Frontpage2000、抓图HyperSnap-DX 4、图像处理工具、源文件编辑工具Notepad。（这只是我比较习惯的工具，大家可以根据自己的喜好选择工具）
制作环境：Windows2000专业版、IE5.0。具体细节表现： 菜单对与对话框的凸凹感：
我们天天看到的右键菜单、任务栏和开始菜单，都有立体感，我们通过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 style=".."></div>要使层有凸出感，我们可以先选择好层的背景，层的上、左边框用比背景颜色浅一些，而层的下、右边框用比背景深一些。同样如果定义有凹进感的层，上、左边要深，下、右边要浅。边框的宽度来改变立体感的强弱。像快速启动栏处的凸出感不太强，1px就可以了。大家可以看一个没有定义好样式表的情形。桌面图标：
从图标的要求与功能上来看，它应该可以拖动、双击打开链接、图标的外观与链接的内容相关等。这样要求我们来用每个层来定义一个图标，图标的拖动就是层的拖动和层的绝对定位。图标图片最好是透明的GIF图片，大小与图标大小一致32×32。我们可以用.ICO文件来转换成.GIF图形，或者用抓图软件来抓取系统桌面的图标。当然如果你的图像处理的水平不错，你可以做好更好看的图标。双击链接，我们可以通来onDblClick（双击）鼠标事件来完成。排列图标的实现，就是再一次对层的绝对定位。菜单：
菜单每个项目同样是用层。主要用到鼠标的悬停(onmouseover)、鼠标离开(onmouseout)来改变层的背景色，和菜单的隐藏与显示。开菜单栏的图片用24×24大小的GIF图片，菜单的下一级目录菜单可以用16×16大小的。同一类菜单放在一个层中来定位。开始菜单中的定位：
定位中通常用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="http://www.okasp.com/techinfo/*.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; 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>。大家可以点击色彩按钮看看效果：为了使网页更形象，我可以用键盘事件来进行网页操作，如用键盘打开开始菜单，Esc键隐藏对话框等等。这里要用到了onkeydown;下面是一个例子：
<script Language="javascript">
function keypress()
{
if(event.keyCode==13)window.open('http://homepage.yesky.com'，''，'');
｝
document.onkeydown = keypress
</script>
当在当前页回车时，就会打开网页陶吧http://homepage.yesky.com，这里的13代表回车键。
将下面代码存为htm文件，就会显示各个字母代码的数字（IE浏览器适用）。<script>
function show(){
alert(event.keyCode);}
</script>
<body onKeydown=show()> 网页进度条： 思路是根据源文件下载的进程来实现的，把源文件分为几个部分，每隔一部分，加一段代码，来动态改变一个图片的长度.显示出下载的进程和百分比。困难和解决:由于网页代码繁长，用到很多的小图片与大量的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' style='padding-left:16;padding-top:1;padding-bottom:1' onclick="+act+">"+txt+"</div>")}如果网页中有十处用到这个代码，我们就要写进十个上面粗体代码长度，但通用javascript，我们就可以只写十个这样的代码：
<script>link('pop('id.htm')'，'链接之一')</script>，这样使源文件更清晰，更容易看。把所用的到的funtion函数全部放在js文件中，这样不会使风页文件太大，而出现打不出的现象，同时也更好的管理。不足Windows桌面风格的网页只能是个网页，不能像windows系统一样的功能强大，再加上现在浏览器的差异性，在不同的浏览器下看到的效果也是大相径庭。收获和经验这个网页网页的实现过程，也是我认识了解css、javascript、html过程，是我水平进步的过程。从中也体验到编改写代码的乐趣，有时候为了一个代码要想很久，不能解决就到论坛求助，问题很快就解决了。如果大家有兴趣，可以到我的网页上最新版本 0324 下载源文件。要做出一个桌面风格的网页，对于网页初学者来，是有一定困难的。也许你对上面所提到的代码很陌生，那也没关系，只要你对网页学习有兴趣，认真学习网页制作的基础知识，相信不久你的手中会诞生出更有创意的网页。我们天天都和windows打交道，Windows的桌面对我们来说已经是熟得不能再熟了，但是朋友们是否见过Windows桌面风格的网页呢？这对我们来说倒很有几分新鲜感。笔者曾经尝试着做过这样一个Windows桌面风格的网页无忧视窗，大家不妨去感受一下，是不是有一些新奇的感觉？下面我以自己制作这个桌面网站的经历，给大家大略介绍一下Windows桌面风格页面的制作的点点滴滴，希望能起到一些抛砖引玉的作用，帮助大家拓展思路。
（出处：无忧视窗）
php爱好者站 http://www.ｐｈｐfans.net dreamweaver|flash|fireworks|photoshop.
相关阅读 更多 +
