当前位置:文档之家› HTML+CSS打造个性化Windows Aero桌面

HTML+CSS打造个性化Windows Aero桌面

HTML+CSS打造个性化Windows Aero桌面
HTML+CSS打造个性化Windows Aero桌面

HTML+CSS打造个性化Windows Aero桌面

首先,下载带有核心,可拖拽,可缩放,可选和效果核心组件的jQuery和jQuery UI。稍后我们将使用到这些组件。

一开始,当然是定义HTML代码。

Windows Aero HTML Demo

by Victor Cisneiros

See the tutorial here:https://www.doczj.com/doc/fe13289438.html,

#desktop div是我们称作desktop()jQuery函数的地方,它包括一个用户看不到的.preload div,用户可用它在图像呈现于屏幕前加载图像。我们不希望用户花太长时间等待图像加载。

.windows div是所有桌面视窗被保存的地方。

.wallpaper div会覆盖整个屏幕,然后展现视窗墙纸。

.taskbar是保存所有图标的地方,注意使用属性时带上了data前缀:它们是自定义的用户看不到的HTML5属性,可用来保存私人数据,这些数据可通过javascript访问。

最后,还有.contents div,它保存了任务栏中每个应用窗口的初始内容,注意data-app-id属性就像是任务栏中的图标,这个app-id就是将图标连接到各个内容的工具。data-glass-only表明了视窗内容将会是透明的,不会被白色背景覆盖。

现在,我们可以做一些CSS编码,首先设置墙纸覆盖整个屏幕。设置position: absolute,宽度100%,高度100%。

body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:0}

.preload,.contents{position:absolute;left:-9999px;top:-9999px}

.contents iframe{width:800px;height:600px}

.contents div{display:inline-block}

.wallpaper img{position:absolute;top:0;left:0;width:100%;height:100%} .windows{position:absolute;width:100%;height:100%;overflow:hidden;left:

注意我们使用的不是用display:none来隐藏.preload div。因为我们想让浏览器认为.preload可视,所以可更改其位置到与文档相关的-9999px。同样,要设置.contents iframes和div上设置display:inline-block,因为我们不希望他们占用整条线。

.windows div可将溢出设置为隐藏,因为我们不希望用户在桌面外移动视窗时出现滚动条。

现在,对任务栏进行风格设置

.taskbar{background:url('images/taskbar.png')repeat-x;position:absolute; height:40px;width:100%;bottom:0;left:0;z-index:99999999}

.apps{margin:00060px;padding:0;list-style:none;height:40px}

.apps li{background:url('images/sprites.png')repeat scroll00transparent; background-position:00;color:#fff;font-size:12px;font-weight:bold;float: left;width:60px;height:40px}

.apps li img{vertical-align:top;margin:4px14px0}

代码很简单,使用position:absolute将任务栏定位到与首个母元素相关的任务栏。使用z参数的较高值,这样任务栏的位置会高于其他物体。然后设置float往左到li,这样它就并排排列起来,而不是往下排列。

下面开始进行Javascript编码。

编写desktop()函数

(function($){

$.fn.desktop=function(){

$(this).each(function(){

$(this).addClass('desktop');

$(this).find('.wallpaper,.taskbar').disableSelection();

$(this).find('ul.apps').sortable({axis:'x',revert:250,distance:5});

var preload=$(this).find('.preload');

$(preload).append('');

$(preload).append('');

$(preload).append('');

$(preload).append('');

$(preload).append('');

$(preload).append('');

$(preload).append('');

$(preload).append('');

});

};

$.fn.disableSelection=function(){

return$(this).attr('unselectable','on').css({MozUserSelect:'none', KhtmlUserSelect:'none'}).bind('selectstart',function(){return false}); };

})(jQuery);

万一你想知道的第一行或最后一行是一个匿名函数,且调用该函数时是讲jQuery对象作为参数来传递,那么就将jQuery对象作为$参数使用。这是编写jQuery插件的时候常用的方法,因为一些库也使用$对象,这里它只是在匿名函数中被定义。

我们的desktop()函数在每个匹配的要素上重复,将.desktop添加进来,然后禁用.wallpaper和.taskbar.disableSelection是下面定义的方法,它使得用户不能选择和拖拽墙纸。另一个有用的disableSelection例子是拖动一个div,其中包含了我们不想被选中的文本。某些使用jQuery UI的disableSelection可以做到这一点,但是在Chrome 中无法进行此操作,所以必须自己定义。

调用任务栏中ul.apps可选函数时,sortable()是jQuery UI中的函数,它能通过拖拽选定一组DOM要素。axis:‘x’参数使得该项目只能被水平拖拽。revert:250参数将被拖拽的要素快速恢复到原位置。distance:5是开始选择前鼠标移动的最小像素。

运行页面,应该如下所示:

现在尝试拖拉任务栏上的图标,会发现图标可选。唯一的不足是在选择Windows7任务栏时不能顺利移动。笔者用jQuery UI试过,也不行。

最后是往.preload div添加图像使其加载。

然后,要在用户悬停鼠标或点击对图标进行点击时,让任务栏按钮的背景改变。这要借助于CSS,注意li如何将多个图像作为一个统一的背景图像进行使用。

将背景位置改为-Xpx–Ypx,X和Y是背景的起始像素位置。使用单独图像的优点是发出的HTTP请求较少,且背景更改时替换速度快。如果使用两个背景图片,那么加载时间会延长。

添加下列CSS

.apps li.none{background-position:00}

.apps li.hover{background-position:0-40px}

.apps li.selected{background-position:0-80px}

创建两个新函数:

$.fn.sprites=function(){

return$(this).each(function(){

$(this).hover(function(){

$(this).removeSpritesClasses().addClass('hover');

},function(){

$(this).removeSpritesClasses().addClass('none');

});

$(this).mousedown(function(){

$(this).removeSpritesClasses().addClass('selected');

});

$(this).mouseup(function(){

$(this).removeSpritesClasses().addClass('hover');

});

});

};

$.fn.removeSpritesClasses=function(){

return

$(this).removeClass('hover').removeClass('none').removeClass('selected');

};

第一个函数在每个匹配要素上重复,将hover事件设置为移除所有类(hover,none, selected)并在鼠标输入要素时添加hover类,然后在鼠标离开要素时设置类为none。函数同样会设置mousedown事件,即将类设置为被选定,而mouseup是设置类为悬停。

将其添加到桌面函数,

$(this).find('.apps li').sprites();

现在添加代码以便用户点击任务栏按钮时启动应用,不过现在还缺少实际应用窗口。在上面的代码后添加如下代码:

$(this).find('.apps li').click(function(e){

if(e.which==1&&$(this).css('position')!='absolute'){

if(!$(this).hasClass('active')){

$(this).startApp();

}else{

//nothing for now

}

}

});

然后定义所需函数

$.fn.startApp=function(){

html='

'+$(this).html()+''+

$.maxLength($(this).attr('data-app-name'))+'

';

$(this).removeClass().addClass('active').html(html).find('div').sprites(); };

$.maxLength=function(text){

return text.length>12?text.substring(0,12)+'...':text;

};

启动应用函数将激活类添加到li,并用一个以应用名称包裹旧内容的div替换了其内容。该函数随后便找到了新插入的div,然后在其上调用sprites函数,这样它便能在鼠标悬停或点击时更改背景。

添加新的CSS代码

.apps li.active{background:none;width:160px;white-space:nowrap}

.apps li.active div{background:url('images/sprites.png')no-repeat; background-position:-60px0;height:40px}

.apps li.active span{cursor:default;display:inline-block;margin:12px00 -5px}

.apps li.active div.none{background-position:-60px0}

.apps li.active div.hover{background-position:-60px-40px}

.apps li.active div.selected{background-position:-60px-80px}

.apps li.active div.selected img{margin:5px14px015px}

.apps li.active div.selected span{margin:13px00-4px}

li.active已无背景,相反子div还有。White-space:nowrap已经插入,所以如果有空间,应用名不会插入新代码行中。Display:inline-block被插入使得内联要素拥有空白集。

现在运行页面,点击桌面图标可以更改其背景并显示应用名

添加代码真实展现window。首先要注明变量:

var windowHTML=

'

\

class="text">\

\

\

\

\

\

\

\

\

\

\

\

\

\

\

';

然后,添加代码到starApp函数

var window=$(windowHTML);

$(this).parents('.desktop').find('.windows').append(window);

var content=$('.contents div[data-app-id='+$(this).attr('data-app-id')+']');

var width=$(content).width()+44;

var height=$(content).height()+62;

var wallpaper=$(this).parents('.desktop').find('.wallpaper img');

if($(content).attr('data-glass-only')=='true')

$(window).addClass('glass_only');

$(window).attr('data-app-id',$(this).attr('data-app-id'));

$(window).find('.title.text').text($(this).attr('data-app-name')); $(window).find('.content').append($(content).html());

$(window).width(width).height(height).css({left:($(wallpaper).width()-width) /2,top:($(wallpaper).height()-40-height)/2});

为使用刚刚定义过html代码的窗口创建一个DOM对象,然后将这个新窗口添加到deskto的.windows div。

然后检索窗口的默认内容。可以到具备相同data-app-id的.contents中选择div。计算窗口大小,然后搜索桌面图像。如果li具备data-glass-only属性,就将glass-only 类添加到div。然后将窗口的data-app-id属性与调用的li中data-app-id属性设置为相

同。

下一步是用li中的data-app-name的属性填满窗口中的.title.text。将被选内容的html复制到窗口的.content div。然后设置窗口的左上位置,使其停留在墙纸中间。-40值是忽略墙纸的任务栏部分。

下面我们需要一些CSS对窗口进行风格设置。添加:

.window{z-index:1;position:absolute}

.window.title{margin-right:140px;position:relative;height:30px;top:10px; left:15px;z-index:1;font-size:13px;overflow:hidden/*;text-shadow:0010px #fff,0010px#fff,0010px#fff,0010px#fff,0010px#fff*/} .window.title span{cursor:default;vertical-align:middle;white-space: nowrap;display:inline-block;height:30px}

.window.title span.text{background:url('images/glow_background.png'); display:inline-block;line-height:30px}

.window.title span.end{background:url('images/glow_right.png')no-repeat; display:inline-block;width:10px}

.window.title span.start{background:url('images/glow_left.png')no-repeat; display:inline-block;width:10px}

.window.buttons{position:absolute;height:20px;top:11px;right:19px;

z-index:10}

.window.glass{position:absolute;top:0;left:0;width:100%;height:100%; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing: border-box;box-sizing:border-box;padding:12px}

.window.glass.background{background:url('images/glass.png');height:100%}

.window.container{-webkit-border-image:url('images/window.png')20repeat; -moz-border-image:url('images/window.png')20repeat;border-image:

url('images/window.png')20repeat;padding-top:18px;border-width:20px;

-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing: border-box;box-sizing:border-box;width:100%;height:100%;position:absolute; left:0;top:0}

.window.container.outer_border{width:100%;height:100%;background:#fff; border:1px solid#bddaed;-webkit-border-radius:1px;-moz-border-radius:1px; border-radius:1px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; -o-box-sizing:border-box;box-sizing:border-box}

.window.container.content{overflow:hidden;width:100%;height:100%;border: 1px solid#1d3e58;-webkit-border-radius:1px;-moz-border-radius:1px;

border-radius:1px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; -o-box-sizing:border-box;box-sizing:border-box;}

.window.container iframe{border:0;width:100%;height:100%}

.glass_only.container.outer_border{border:1px solid transparent;background:

transparent}

.glass_only.container.content{border:1px solid transparent}

.glass_only.container.content p{margin:10px}

首先,设置.window位置为绝对值,使每个窗口位置都与文件相关。Z-index:1属性用于墙纸出现前。

Window div包含两个div,一个用于类背景(.glass),另一个用于内容(.container)。两个都必须在同一个位置,因此使用position:absolute和left:0;top:0,这样它们就会在窗口开始页启动。由于.container的注明要稍晚,所以它会停留在类之上。由于它们的width:100%,所以它们使用box-sizing:border-box CSS属性,这样任何多余的边界都会超过100%。为使边界考虑宽度问题,我们使用CSS3box-sizing属性。

另一个要用到的CSS3属性时border-image:url(‘images/window.png’)20repeat。基本上,它将图像分为九宫格,每宫为20像素,然后将这些图片用作div的边界。重复是重复上下左右边界的背景。下面是一幅图片,注意盒子的内部仅始于12像素处,这就是为什么.glass div要填满12个像素的原因。

运行页面,点击程序,便会弹出窗口

下面看看最小化,最大化和关闭按钮。如果你看到window HTML代码,会注

意到每个按钮由一个带按钮类的div,另一个存在于其中的div和一个span组成。Sprite div的大小与发亮的按钮图像一样,每个div会覆盖其他div。span 的大小与没有亮度的按钮一样大,所以这是一个与鼠标事件联动的区域。

添加下面的窗口创建代码

$(window).find('.minimize div span,.maximize div span,.close div span').sprites

注意,我们使用相同的sprites函数,不过这次增加了boolean参数。该参数指明了sprite类会应用到母元素而不是span。

将sprites函数改为

$.fn.sprites=function(parent){

return$(this).each(function(){

var element=parent?$(this).parent()[0]:this;

$(this).hover(function(){

if(!$(element).hasClass('button'))

$(element).removeSpritesClasses().addClass('hover');

},function(){

if(!$(element).hasClass('button'))

$(element).removeSpritesClasses().addClass('none');

});

$(this).mousedown(function(){

if(!$(element).hasClass('button'))

$(element).removeSpritesClasses().addClass('selected');

});

$(this).mouseup(function(){

if(!$(element).hasClass('button'))

$(element).removeSpritesClasses().addClass('hover');

});

});

};

这和之前的函数一样,只是要检查boolean参数,如果为真,就母元素(parent()函数其实会返回一个可以包裹许多要素的jQuery对象。选择使用[0]以便选择第一个DOM对象)。

现在,只需要一些CSS代码

.window.minimize div{background:url('images/sprites.png'); background-position:-220px0;position:absolute;width:66px;height: 64px;right:58px;top:-22px}

.window.minimize div span{position:absolute;z-index:2;display: inline-block;width:30px;height:20px;left:18px;top:22px}

.window.minimize div.none{z-index:auto;background-position:-220px 0}

.window.minimize div.hover{z-index:1;background-position:-220px -64px}

.window.minimize div.selected{z-index:1;background-position:

-220px-128px}

.window.maximize div{background:url('images/sprites.png'); background-position:-286px0;position:absolute;width:66px;height: 64px;right:30px;top:-22px}

.window.maximize div span{position:absolute;z-index:2;display: inline-block;width:26px;height:20px;left:20px;top:22px}

.window.maximize div.none{z-index:auto;background-position:-286px 0}

.window.maximize div.hover{z-index:1;background-position:-286px -64px}

.window.maximize div.selected{z-index:1;background-position:

-286px-128px}

.window.restore div{background:url('images/sprites.png'); background-position:-352px0;position:absolute;width:66px;height: 64px;right:30px;top:-22px}

.window.restore div span{position:absolute;z-index:2;display: inline-block;width:26px;height:20px;left:20px;top:22px}

.window.restore div.none{z-index:auto;background-position:-352px 0}

.window.restore div.hover{z-index:1;background-position:-352px -64px}

.window.restore div.selected{z-index:1;background-position:-352px -128px}

.window.close div{background:url('images/sprites.png'); background-position:-418px0;position:absolute;width:74px;height: 64px;right:-11px;top:-22px}

.window.close div span{position:absolute;z-index:2;display: inline-block;width:49px;height:20px;left:13px;top:22px}

.window.close div.none{z-index:auto;background-position:-418px0}

.window.close div.hover{z-index:1;background-position:-418px -64px}

.window.close div.selected{z-index:1;background-position:-418px -

注意,使用position:absolute来定位div,因为它们会彼此覆盖,span亦是如此。另一个要注意的是当前hovered/selected div拥有z-index:1,这会使它出现在其他div之前。.none div的z-index会自动将此前的设置为1的

z-index重置。

运行页面,在按钮上悬停鼠标便可改变背景

现在可以对创建的按钮进行设置事件。将下列代码添加到窗口创建代码中$(window).find('.minimize span').click(function(){

$(window).minimizeWindow();

});

$(window).find('.maximize span').click(function(){

if($(this).parent().parent().hasClass('maximize')){

$(window).maximizeWindow();

}

else if($(this).parent().parent().hasClass('restore')){

$(window).restoreWindow();

}

});

$(window).find('.close span').click(function(){

$(window).closeWindow();

});

定义以上四个函数

$.fn.maximizeWindow=function(){

var wallpaper=$(this).parents('.desktop').find('.wallpaper img');

$(this).resizable('disable');

$(this).saveSize('old');

$(this).css('left','-20px').css('top','-12px').width(wallpaper.width()+ 40).height(wallpaper.height()-6);

$(this).find('.maximize').removeClass('maximize').addClass('restore');

return$(this).removeClass('minimized').addClass('maximized');

};

$.fn.minimizeWindow=function(){

var wallpaper=$(this).parents('.desktop').find('.wallpaper img');

var button=$(this).parents('.desktop').find('.apps li[data-app-id='+ $(this).attr('data-app-id')+']');

$(this).saveSize();

$(this).stop().animate({left:$(button).offset().left-60,width:280,height:120,top: $(wallpaper).height()-150,opacity:0},500,function(){

$(this).hide();

});

return$(this).addClass('minimized');

};

$.fn.restoreWindow=function(){

$(this).resizable('enable');

$(this).css('left',$(this).attr('data-old-left')+'px').css('top',$(this).attr('data-old-top') +'px');

$(this).width($(this).attr('data-old-width')).height($(this).attr('data-old-height')); $(this).find('.restore').removeClass('restore').addClass('maximize');

return$(this).removeClass('maximized');

};

$.fn.closeWindow=function(){

var button=$(this).parents('.desktop').find('.apps li[data-app-id='+ $(this).attr('data-app-id')+']');

$(button).html($(button).find('img').outerHTML()).removeClass('active'); $(this).remove();

};

$.fn.showWindow=function(){

$(this).show().stop().animate({

left:$(this).attr('data-left'),width:$(this).attr('data-width'),

height:$(this).attr('data-height'),top:$(this).attr('data-top'),

opacity:1,

},500);

return$(this).removeClass('minimized');

};

$.fn.saveSize=function(prefix){

var prefix=prefix?prefix+'-':'';

if(!$(this).is(':animated')){

$(this).attr('data-'+prefix+'left',$(this).offset().left);

$(this).attr('data-'+prefix+'top',$(this).offset().top);

$(this).attr('data-'+prefix+'width',$(this).width());

$(this).attr('data-'+prefix+'height',$(this).height());

}

return$(this);

};

$.fn.outerHTML=function(){

return$(this).clone().wrap('

').parent().html();

};

maximizeWindow函数先找到桌面墙纸,然后禁用大小重设功能,用old前缀调用saveSize函数。saveSize函数在相同自定义数据属性中保留窗口的大小与

位置。前缀用来区分大小。

找到.maximize按钮,将类改为.restore使按钮改为恢复视窗按钮。从窗口移除.minimized类,然后添加.maximized类表明窗口已经被最大化。

minimizeWindow函数可查找桌面墙纸和任务栏中的响应li。保留窗口当前尺寸与位置。然后调用jQuery animate函数。该函数接收了反应CSS属性参数的hash。第二个参数是动作完成所需的时长,第三个函数是animate函数完成后的复查。

RestoreWindow将窗口尺寸和位置改回自定义数据属性中保存的值。然后将窗口最大化,再从窗口移除.maximized类。

closeWindow可以找到响应li,然后移除类。还能更改内容,使其只包含带有图像标签的outerHTML。最后从文件中移除窗口。

showWindow可在窗口最小化后恢复窗口的位置和尺寸。还记得desktop函数的注释么?用这个来替换:

var window=$(this).parents('.desktop').find('.window[data-app-id='+ $(this).attr('data-app-id')+']');

$(window).hasClass('minimized')?$(window).showWindow(): $(window).minimizeWindow

运行代码,便可以对窗口进行最大化,最小化,恢复以及关闭的操作。

本文由沈阳白癜风医院(https://www.doczj.com/doc/fe13289438.html,/)网站负责人阿牧整理分享,转载请注明!

开机后windows桌面无显示-高手轻松帮你解决

开机后windows桌面无显示?高手轻松帮你解决 导读:天天面对电脑,电脑自然少不了出现这样那样的故障,这是很常见的问题,要以平常心对待.对于电脑高手来说还好点,解决这些故障是比较容易的,但是对与新手而言,当出现问题的时候,往往就不知道怎么办了?下面我们就讲讲windows桌面无显示的解决之道吧. 开机后桌面无显示 一、explorer出现问题,可在别的装了同样系统的电脑上拷贝一个出来覆盖到本地系统盘目录下,explorer.exe在c:\\windows\\(这里假设系统盘符为C:)文件夹下。也可以从XP光盘中还原explorer.ex_文件。点击开始/运行,输入msconfig,点击“一般”选项卡中的“展开文件”,选择光盘盘符下的I386文件夹,找到explorer.ex_文件还原即可。 二、在桌面空白处单击鼠标右键,弹出右键快捷菜单,将鼠标移动到“排列图标”下的子菜单项中,看“显示桌面图标”项前面是否打了对勾,若没有,点击一下打上对勾即可显示桌面图标。若原本就是打上对勾的,可以点击一下将其取消,然后再次点击打上对勾。桌面图标应该就可以正常显示了。 电脑开机后不显示桌面图标等解决之道 最近,不少朋友的电脑出现开机后只有桌面背景,其他什么也没有,这个对平时用惯桌面操作的我们来说,十分别扭!出现这类情况主要是explorer.exe这个负责有关图形界面的系统进程出现了问题,这个进程是随系统安装进入电脑的,不少朋友选择重装系统来解决,这当然是最彻底解决系统故障的通用办法,但不是对症下药! 具体解决这类问题的办法是:恢复explorer.exe,即可解决(用命令复制还原一个,然后启用它即可) 那是不是要系统盘呢?不需要,系统的dllcache里面还有的哦 1、按ctrl+alt+del调出任务管理器,新建一个任务 2、输入以下命令(注意空格): cmd /k copy c:\windows\system32\dllcache\explorer.exe c:\windows 3、然后再次运行一个命令: explorer 搞定!有桌面图标了吧! 这是手动解决,不能每次都要这样选择吧,看看下面的方法! 开机之后还是什么也没有,只有我设置的桌面背景 -------------------------------------------------------------------------------- 呵呵!这是因为Explorer.exe这个进程仍然没运行!你按我说的做!朋友!三键齐按打开任务管理器!文件——新建任务——EXPLORER.EXE——确定这时桌面等肯定就有了!然后你在按照我说下面说的设置!就不用每次开机自己设置了!

windows桌面与窗口

《Windows桌面及窗口》教学设计 一、教材分析 本课是川教版《信息技术》七年级上册第十课的内容,它是小学初步了解桌面的基础上进一步的深化,也是学生进入初中的第一节实践课,看似简单操作的知识,对今后的学习具有重要的意义。 二、学情分析 教学面对的是刚步入初中的新同学,面对他们的知识水平,可能会参差不齐,但他们在新环境中好奇心强,再加上这是他们进入微机室的第一节课,因而他们可能好动,好表现自己。由于本节课教学知识有一部分在小学学生已经接触过了,在学习中表现欲望会更强,学习新知识的欲望也会很活跃。 三、教学目标 (一)知识与技能目标 1、了解桌面的组成。 2、学习窗口的菜单操作。 3、学习对话框的操作。 (二)过程与方法目标 1、通过对计算机的学习,培养学生分析问题、自主学习的能力。 2、通过对计算机的操作实践,培养学生运用信息技术解决实际问题的能力。 (三)情感目标 通过对计算机在日常生活中具体应用的介绍,激发学生对美好生活的向往并形成积极主动的学习和使用信息技术的态度。 四、教学的重点和难点 重点:1、掌握设置桌面的方法; 2、熟练掌握窗口和对话框的操作 难点:窗口和对话框的区别 五、教学环境 多媒体教室教具:WINDOWS XP操作系统 六、教法分析 将对比、讨论、提问等教学法融合起来贯穿于整个教学过程中 七、教学过程 1.导入新课 引入通过上一课的学习,同学们已经对计算机的操作系统有所了解,也知道了Dos操作系统和Windows操作系统有很大区别,进入Dos系统,我们看到的是字符界面,而进入Windows系统,我们看到的是图形界面。同学们知道图形界面中各个区域的名称及用途吗? 2、逐步讲解 1.桌面 活动一:观察桌面的组成,让学生用鼠标单击、双击、右击桌面不同的位置的任何一个对象或者桌面上空白位置并问他们发现了什么。 Windows启动成功后的整个背景画面就是桌面。桌面上有很多图标,这些图标也叫“快捷方式”,每一个快捷方式表示着一个程序。位于桌面最下方的是“任务栏”,任务栏里有

Windows桌面大变身——苹果篇

如何,好看吧。苹果桌面,错,准确的说,应该是仿苹果桌面^_^ ,是在Windows桌面下用软件和插件模仿的苹果桌面,怎样,想知道是如何完成的么,想知道就跟我来吧! 喜欢布置电脑桌面的大家一定知道,现下,美化桌面的软件有很多~~~~例如TGTSoft 公司发布的Style XP,还有DesktopX等,都是很不错的美化软件,他们都有各自的独门绝技,效果也很不错,但是都不全面,软件么,哪有十全十美的~~~,这篇文章就是指导大家如何利用这些美化软件来联合作战,让我们的桌面更吸引人~~~。 文中用到的软件: Style XP,TGTSoft公司出品的Style XP,现在最新版本是v2.3,该软件分为男人版和女人版,只是自带的桌面主题风格不同,功能都是一样的,既然我是男人,我们就用男人版做范例,MM们看到不要砍我哦-_-! ObjectDock,一个可以逼真模拟MacOSX Dock的软件,MacOSX Dock的一些功能它都实现了:包括图标的鼠标动态缩放感应、弹性的拖放、并支持可执行文件和文件夹的拖放建立快捷方式、DOCK上的图标支持.ico和PNG-24透明图形格式,图标支持自由更换、Dock 背景透明调节...可能是鉴于版权的敏感问题,ObjectDock 初始安装好后的图标都是第三方的,而不是MacOS X 的原汁原味图标,不过众多的自定义功能,已经足以让我们自己设定出接近拟真的MacOS X Dock了,呵呵。 ObjectBar,ObjectBar(MacVision)是一个能够让PC彻底地模仿成MAC的软件。不管是工作列、按钮、卷轴、视窗、快显功能表、开始功能表等皆能够变得和MAC OS 一模一样,不错吧。

在Windows里实现动态桌面的两种方法

在Windows里实现动态桌面的两种方法 你是否收集了一大堆漂亮的桌面图片,每天换来换去始终都不过瘾?你有没有想过让你的桌面“动”起来?要让桌面动起来并不难,网上就有把FLASH动画变成桌面的软件下载。其实不用借助软件,在WINDOWS里我们就可以自己让桌面“动”起来。下面就介绍一下在WINDOWS里实现动态桌面的两种方法。 当然你首先必须准备一个包含了FLASH动画的.html文件。 1、在桌面空白位置单击鼠标右键,在弹出的对话框里点击属性,可以打开显示属性对话框(你也可以通过我的电脑>控制面板>显示打开)。选择背景标签,点击下方的浏览按钮,在弹出的对话框里选择你准备好的.html文件,点“打开”回到显示属性对话框,这时可以看到你选择的文件在左边的文件框里了。点击“确定”,一般会弹出一个询问你是否启用Active Desktop的对话框,点击确定即可。看看你的动画是不是在桌面上“动”起来了。(其实这个方法很多朋友在换桌面的时候都用过,只不过没想到除了图片,网页文件也可以换。其实这不难想到,WINDOWS的频道栏不就类似于网页文件吗?) 2、同样打开显示属性对话框,选择Web标签。在“按Web页方式查看活动桌面”前的方框里打上勾,然后点击右边的“新建”按钮。将会弹出一个对话框问你是否关闭“显示”属性连接到画廊,点击“否”,在弹出的对话框里的“浏览”按钮,选择你的.html 文件,按“打开”返回并按“确定”,这时在web标签页左下方的文件框里会多出一个前面打了勾的文件。点击显示属性对话框里的“确定”按钮关闭对话框。桌面上就多了你的动画文件了,不过这时的动画文件并没有平铺桌面,你必须将鼠标移至文件框的边线附近,待出现双向箭头按住鼠标左键拖动边线调整至桌面大小。 现在你可以尽情发挥你的想象力了,你的动画有多炫,你的桌面就有多炫。你还可以做几个按钮放在桌面上,让它们指向你常去的网站,是不是方便多了。用这些方法不仅可以显示FLASH动画,JAVA特效也可以,总之只要你能用浏览器看到的效果,都可以在桌面上实现。

Windows桌面技巧

Windows 桌面配置技巧(一) 最近要出差一个月,家中号称“电脑白痴”的MM便开始暗自叫苦。不为别的,离开了我这个“电脑专家”,MM在使用电脑时,也就只剩下聊天和听歌的份儿了。而迷上网络游戏的小侄子,就更是少了很多乐趣。为了让全家都能好好的用上电脑,我不得不将Windows XP 系统改造了一番,以求获得最简单的“即点即用”操作,达到“童叟无欺”的使用要求。 移花接木——套个简单的系统“外壳” 对于MM来说,任何系统的设置、调节和复杂程序,都不在她的操作范围之内。既然如此,就需要将Windows XP中这些“不必要”的功能隐藏起来,只保留一些常用的上网聊天、听歌游戏功能,便能满足她的使用需要了。而要想让操作简单化,并对这些程序进行分类,就要使用到这款模拟Windows Media Center程序,这个小东西的界面效果非常漂亮,操作更是完全“傻瓜化”。 一、Windows XP桌面“换装” 安装Talisman Desktop软件,完成后不要重启系统,直接运行它,Talisman Desktop 便会用自带的桌面替换掉Windows XP系统当前的桌面。 在Talisman Desktop的桌面上点击右键,选择“Properties”命令,打开属性设置对话框。点击左侧的“system”标签卡,切换到系统设置界面。再点击“Program”项目,在右侧窗口中将“Language”设置为“Chinese Simplified”(如图1),点击“重绘”按钮,即可将程序设置为中文界面。 在桌面上再次点击右键,选择“主题”→“Media Center”命令,双击弹出的预览界面(如图2),即可将桌面变为Windows Media Center的样式了。现在桌面与Windows Media Center一样,会分类显示几个桌面功能按钮,包括音乐、DVD、视频等,点击不同按钮可执行不同的功能(如图3)。

Windows桌面组成

课时授课计划 ——学年学期授课教师: 教表4-1 序号 累计 授课日期月日月日月日月日授课班级 缺席学生 课题: Windows98桌面的组成 知识目标: 掌握任务栏的应用及窗口的组成及操作,能熟练的进行指法练习 能力目标:培养学生的动手能力 情感目标: 重点:任务栏的组成,熟练进行指法练习 难点:指法练习的熟练程度 解决措施:反复练习 课堂类型:讲授、演示 教具:计算机 复习要点:键盘分区,基准键位,击键方法及要求 方法或提问对象: 提问学生

教表4-2 课时授课计划付页 第1页时间内容方法 5’ 5’35’ 20’ 25’35’导入:对于采用图形用户界面的操作系统,我们对它的了 解应从它提供的工作界面入手,Windows所显示的窗口界 面,包括了两个关键的组成部分,桌面和任务栏。 讲授新课: 一.Windows98桌面的组成: 桌面、任务栏 二.Windows 98桌面和桌面图标: 1.桌面:屏幕的整个背景区域 2.常见图标: ○1我的电脑:管理计算机资源,进行磁盘、文件管理 ○2我的文档:保存文档,图形 ○3回收站:暂存用户删除的文件、文件夹 ○4网上邻居:访问局域网共享资源 ○5Internet:访问网络资源 三.Windows98任务栏: 开始按钮、 快速启动按钮、 应用程序区、 布告区、 时钟 四.Windows98的开始菜单: 1.收藏夹选项:收藏常用的Internet 地址 2.文档选项:我的文档选项和最近使用的十五个文档 3.查找选项:文件和文件夹 4.帮助选项:查找系统信息 5.运行选项 6.注销选项:切换用户等 7.关闭选项 8.打开选项 五.Windows98窗口的组成: 1.标题栏:最小化、最大化、关闭 2.菜单栏:所有菜单命令的集合 口述 讲授演示 讲授演示

70个windows7梦幻桌面视频下载

点此下载70个windows7梦幻桌面下载 第一次发帖,因为坛子不允许上传超过200K的文件,我也不知道怎么把我电脑里的视频发上来,所以我把下载地址的链接告诉大家,想下的就去看下吧!! 先看几个截图:

DreamScene的中文名称叫做梦幻桌面,它其实早在vista时代就被官方做为了旗舰版产品的增值程序,不过由于其并没有大张旗鼓的进行宣传,加之此增值程序包在梦幻桌面后也就没有再推出新的重量更新,因此梦幻桌面一直处于一个相对低调的位置。Vista的这个旗舰版增值程序包全称叫做Vista Ultimate Extras,不知道您还记不记得Windows 95下的PLUS!,那是Windows 95的一个升级包,里面具备许多娱乐组件,而对于Ultimate Extras,我们可以把它理解为vista的PLUS!,或者可以说是一套服务组件,而且只有Windows vista Ultimate的用户才可以享用它 不过不知道为什么,在最新的Windows 7中我们并没有看到这个功能的相关选项,莫非微软认为现在的Windows 7已经足够华丽而去除了这一功能?!答案当然是否定的。那么想继续用梦幻桌面怎么办?下面我们就来告诉你一些小技巧,我们就可以实现Windows 7对梦幻桌面的支持了。 Tips: 和Vista下一样,开启梦幻桌面前,必须先打开桌面Aero特效。使用方法: 首先下载我们提供的Windows 7梦幻桌面开启补丁,解压后运行Windows7-DreamScene.exe,安装程序会自动复制DreamScene.dll到%WinDir%System32 文件夹,复制DreamScene.dll.mui到%WinDir%System32en-US文件夹并添加所需

windows桌面管理(二)——设置屏幕保护程序和桌面背景

windows桌面管理(二)——设置屏幕保护程序和桌面背景 一、活动背景分析: 1、模块:windows桌面管理(二)——设置屏幕保护程序和桌面背景 2、年级:初中七年级 3、所用教材版本:宁夏义务教育教科书 4、学时数:1学时 5、地点:学生机房 二、教学目标 1、知识技能目标:学会设置屏幕保护程序,并能用多种方法设置自己喜欢的桌面背景。 2、过程与方法:在教师指导下自己根据书上的提示学习、掌握设置桌面及屏幕保护的操作技能与方法,并通过竞赛展示将学习激情推向高潮。 3、情感态度价值观:培养学生学习微机的兴趣,陶冶学生的审美情操,展示学生个性。 三、教学重点、难点 学会设置屏幕保护程序,并能用多种方法设置自己喜欢的桌面背景。(一)内容分析 本课是宁夏教育厅教研室编中学《信息技术》教科书七年级(上)第七课时的内容。是对WINDOWS操作系统中的常用设置作初步的了解,从内容上看,教材分为两部分。第一部分是屏幕保护的设置,第二部分是桌面图片的设置,主要是了解不同显示方式和学会选择自定义的图片,无论是桌面图片还是屏幕保护设置,都是围绕着一个目标“美化电脑、展示个性”。在学习、工作时,有一个清新、漂亮的桌面背景可以令人身心愉悦。 (二)学生分析 在小学阶段,同学们已经对桌面有了初步的了解,可以说是在学生已经学习了电脑基本管理后的一节课,本节课中学生在信息技术学科能力方面还是有些较

参差不齐,有少数学生信息技术素养较好,有些学生处于起步阶段,因些,在实践练习的部分针对不同学生对象作不同要求,让有一定基础的学生在练习过程中起到带动作用,对其他同学进行积极的帮助和共同学习。 三、教与学的实际过程描述 1.教与学的过程描述

《Windows桌面窗口菜单》教案

《Windows桌面窗口菜单》教案 课题:第十五课Windows桌面窗口菜单 教学要求: 1、对有关Windows的知识作一总结,使学生在概念上对其有一定的理解,对计算机的认识更加系统化。 2、通过本课的学习,强化计算机的操作能力,进一步理解计算机是人们处理信息的“工具”。 3、Windows操作系统的桌面、图标、任务栏、快捷方式、窗口、菜单等概念,这些概念并不要求学生去记忆,只要求知道它们的外观、功能并能熟练操作即可。 教学重点: 通过本课的学习,强化计算机的操作能力,进一步理解计算机是人们处理信息的“工具”。 教学过程: 一、谈话导入: Windows操作系统是计算机的管家,它管理着计算机的运行。我们使用计算机这一信息处理工具,也要由Windows系统管理。 Windows操作系统为我们提供了“桌面”、“窗口|”、“菜单”“文件夹”等多种管理工具,这些工具与计算机的程序有关,又与人对计算机的操作有关,既与计算机处理信息有关,又与人和计算机的信息有关。今天我们就一起学习Windows 的操作系统。 二、新授: 活动一、试一试:设置桌面背景和屏幕保护程序。 1、什么是桌面背景 桌面背景是用户打开计算机进入Windows操作系统后,所出现的桌面背景颜色及图片。我们可以选择单一的颜色作为桌面的背景,也可以选择BMP、JPG 等格式的文件作为桌面的背景。 2、设置方法: 教师出示下面文字,学生练习操作。

小提示: 设置桌面背景时,右击桌面任意空白处,在弹出的快捷菜单中选择“属性”命令,或单击“开始”按钮,选择“控制面板”命令,在弹出的“控制面板”对话框中双击“显示”图标,在打开的“显示属性”对话框中选择“桌面”选项卡,在“背景”列表框中可选择一幅喜欢的背景图片,也可以单击“浏览”按钮,在本地磁盘或网络中选择其他图片作为桌面背景。在“位置”下拉列表中有居中、平铺和拉伸三种选项,可调整背景图片在桌面上的位置。若想用纯色作为桌面背景,可在“背景”列表中选择“无”选项,在“颜色”下拉列表中选择喜欢的颜色,单击“应用”按钮。 3、练习:学生上机操作。 4、设置屏幕保护 教师演示: 设置屏幕保护时,在“显示属性”对话框中选择“屏幕保护程序”选项卡,在该选项卡的“屏幕保护程序”选项组中的下拉列表中,选择一种屏幕保护程序,即可看到它的显示效果。单击“设置”按钮,可对该屏幕保护程序进行一些设置;单击“预览”按钮,可预览该屏幕保护程序的效果,移动鼠标或敲击键盘即可结束屏幕保护程序;在“等待”文本框中可设置一定的时间并确定,这样如果计算机在这段时间内无操作就会启动屏幕保护程序。 学生操作 活动二、认识图标,任务栏,快捷方式 试一试 1、拖动任务栏到桌面的任何一侧或是顶端,看看桌面有什么变化? 2、鼠标指针移动到任务栏边,变为双箭头形时,拖动,看看有什么变化? 3、右击文档或常用工具,在桌面上创建“快捷方式” 4、练习“最大化,最小化,”打开多个窗口操作。 活动三、拓展知识 P42页:Windows操作系统的菜单 三、课堂小结

相关主题
文本预览
相关文档 最新文档