`
hududumo
  • 浏览: 250791 次
文章分类
社区版块
存档分类
最新评论

[IE9] 如何让你的网站在IE9和Win7任务栏上更闪亮

 
阅读更多

IE9引入了Pinned Sites 新概念。Pinned Sites允许用户把网站像Windows应用程序一样“钉”在Windows 7 任务栏上。用户可以直接点击任务栏上的图标打开网站,可以通过Jump list直接访问网站的各个功能,甚至可以直接在任务栏图标上浮动缩略图完成一些任务(比如播放、停止网站上的视频)。 可以看出,IE9在努力缩小网站和Windows应用程序之间的差异, 让网站成为Windows桌面的主角

下图显示了我的win7任务栏的几个pinned sites: cnn.com (第二个图标), CSDN博客(第三个图标),和51CTO博客(第四个图标)。

点击CNN图标打开pinned site,用户可以看到窗口左上角明显看到CNN的网站图标,浏览器的“前进”、“后退”按钮颜色变成了CNN网站的主色调-红色。 由此让用户产生感觉是:我在用CNN.com , 而不是在用IE浏览器。 网站是主角。

接下来回到Web开发者关心的问题 如果用户“钉”了你的网站,IE9如何决定在IE窗口左上角以及win7任务栏的图标,以及如何决定“前进”、“后退”按钮的颜色? 作为站长,我能不能定制?

答案是:

IE9会使用你网站的Favicon作为IE窗口以及Win7任务栏的图标。(如果不了解favicon,请参见百科:http://baike.baidu.com/view/1237286.htm)。 如果favicon.ico 中有32x32 大小的图标,IE9会使用该图标。如果只有16x16大小, IE9会在周围加一个白色边框。 本文第一张图中的CSDN博客51CTO博客任务栏图标就是加了白色边框的,打开之后的的效果如下2图,看上去不够美观,希望CSDN和51CTO的站长能修改一下 :)

从上图可以看到 CSDN的前进/后退按钮颜色是红色;51CTO的按钮是蓝色的,和favicon的颜色很接近。 这是因为IE9根据favicon的主要颜色来决定前进/后退按钮颜色。 主要颜色是由一种图像模糊算法计算出来的,在多数情况下应该都是正确的。 如果你希望自己定制这个颜色,可以在网站的代码里面加入msapplication-navbutton-color名称的meta标签来实现。 以下示例代码定义favicon并将前进/后退按钮定制成红色:

注:颜色定义支持任何HTML颜色标识。

总结:为了让你的网站更好支持IE9 pinned sites,请在网站上加入32x32 (甚至48x48)的favicon,并且加入msapplication-navbutton-color的meta标签。

欢迎和我联系交流IE9开发问题。我会在接下来的博文中介绍Pinned Sites的Jump List和缩略图开发。

>> 原创文章的版权属于作者,转载请注明出处(http://blog.csdn.net/WinGeek/), 谢谢。 <<

分享到:
评论

相关推荐

    (代码方式!)如何让IE记住用户名和密码!绝对可以用(代码方式,物有所值!!!加精!~!)

    在早期的Web开发中,Internet Explorer作为主流浏览器之一,其兼容性和功能支持是开发者必须考虑的因素之一。让IE记住用户名和密码的功能,可以通过设置Cookie或者利用HTTP Basic Auth等方式实现。本篇文章将重点...

    JS+CSS海量闪亮导航栏下到你手软

    标题 "JS+CSS海量闪亮导航栏下到你手软" 暗示了这个压缩包文件包含了一系列使用JavaScript和CSS编写的动态、视觉效果丰富的导航栏代码示例。这些导航栏设计通常用于网站,以提供用户友好的界面,帮助用户在网站的...

    Win7官方主题 清新水果

    晶莹闪亮的葡萄、娇艳欲滴的蓝莓、酸甜诱人的柠檬、红宝石般的石榴……微软日前奉上了一款“可口”的Windows 7主题《新鲜水果》,秋天是收获的季节,闭上眼想象广袤的田野,空气里似乎弥漫着瓜果的香气。这款主题...

    让语文课堂更“闪亮”

    综上所述,打造“闪亮”的语文课堂不仅需要教师具备丰富的教学资源,还需要创新的教学设计和灵活的教学策略。通过激发学生兴趣、设计有效问题、营造感人情境以及提供深度反思的机会,我们可以显著提高初中语文教学的...

    PDF打印机 win7版可用的 非常不错!

    PDF打印机在IT行业中是一种非常实用的工具,尤其对于...使用PDF350 Pro这样的PDF解决方案,用户可以方便地在Win7系统中创建和管理PDF文档,提高工作效率。为了获得最佳体验和避免法律问题,建议购买官方授权的软件。

    让你的模型变得更加闪亮的g渲染程序

    【标题】:“让你的模型变得更加闪亮的g渲染程序” 在3D建模和动画领域,高质量的渲染是提升作品视觉效果的关键。本资源提供的是一款名为“g渲染程序”的工具,专为MMD(MikuMikuDance)平台设计,能够显著提升模型...

    让生命在烛光中闪亮.doc

    综上所述,“让生命在烛光中闪亮”这一标题所要传达的,不仅仅是一份对教师职业的赞美,更是一份对教育事业的期待和责任。教师在教育过程中所扮演的角色和所付出的努力,就如同那无声的烛光,默默照亮着学生的人生之...

    闪亮下载系统

    闪亮下载程序心血奉贤(包含2月23日最新数据)1、完整的三级会员管理系统(后台可以设置是否允许新用户注册),可以设置不同的软件让具有不同权限的会员下载,方便各位站长进行收费等项目。2、全后台设置网站信息,...

    GIF闪亮图片制作软件

    总之,"GIF闪亮图片制作软件"如Ulead GIF Animator 7.0,是图像创作者和设计师的有力工具,它提供了制作动态、视觉效果丰富的GIF图像所需的所有功能,无论是用于网站、社交媒体还是其他视觉传达目的,都能帮助用户...

    Python_一个为GPT提示工程策划的很棒的资源工具和其他闪亮的东西的列表.zip

    标题中的“Python_一个为GPT提示工程策划的很棒的资源工具和其他闪亮的东西的列表.zip”表明这个压缩包文件包含了一系列与Python编程语言相关的资源,特别是针对GPT(Generative Pre-trained Transformer)模型的...

    闪亮星星flash动图

    该动画使用flash简单制作而成,主要应用于课程作业需要,星星的闪亮是整个动画的亮点

    立体闪亮方块彩色简历表.doc

    以猎头公司的工作经历为例,如果你曾担任猎头顾问或助理,你需要明确阐述自己在这一岗位上的职责,比如如何有效地协调人才与企业的交流、提供专业的猎头服务和业务咨询等。这些描述帮助雇主了解你的工作态度和职业...

    闪亮告诉你不知道的视力杀手.docx

    为保护眼睛健康,除了使用闪亮蒸汽热敷眼罩这样的辅助护理产品外,还需要从生活习惯上做出改变。适当休息和避免长时间使用电子设备是必要的措施。在驾车时,可以定时休息眼睛,减少对眼睛的负担。而对于隐形眼镜的...

    十字路口黄灯闪亮时间的数学建模分析* (2004年)

    在这一部分的内容中,主要介绍了一篇发表于2004年的自然科学领域的论文,该论文主要运用数学建模,特别是微分方程建模的方法,来分析和优化城市交通十字路口黄灯的闪亮时间,目的是为了缓解日益严重的交通拥堵问题,...

    Unity教程之-制作闪亮的星星Star

    设置粒子的速度方向和速度值,可以控制星星的移动轨迹,让它们看起来像是在随机移动。 6. **寿命(Lifetime)**: 星星的寿命设置决定了它们存在的时间。通过设置较短的寿命,可以模拟出星星短暂闪烁然后消失的现象...

    璀璨中华,闪亮生命.pdf

    在《璀璨中华,闪亮生命》中,作者通过记录2011年感动中国十大人物颁奖盛典中的生动故事,向我们展示了中国精神的光辉和人性的温暖。其中,刘伟与胡忠、谢晓君夫妇的事迹尤其引人深思,他们以其非凡的人生经历和高尚...

    高闪亮字.rar高闪亮字.rar

    高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字.rar高闪亮字...

    一个简单的圣诞主题程序的示例代码,它可以在终端上显示一个闪亮的圣诞树和萤火虫的效果 代码使用Python 3编写

    一个简单的圣诞主题程序的示例代码,它可以在终端上显示一个闪亮的圣诞树和萤火虫的效果。代码使用Python 3编写。运行程序后,你将看到一个闪亮的圣诞树和随机移动的萤火虫。你可以尝试修改代码来改变树的形状或萤火...

    超酷闪亮图标(460个品png、jpg格式)

    在IT行业中,图标设计是...无论是在开发新产品还是优化现有界面时,这些图标都能为你的设计工作带来灵感和便利。在设计过程中,记得根据目标用户群体、平台规范以及品牌一致性来选择和定制图标,以实现最佳的用户体验。

Global site tag (gtag.js) - Google Analytics