品牌创意企业推荐 推荐: 网站建设 北京网站建设 
 
搜索 竞赛 产业 文案 论吧 论坛 酷站 矢量库 图片库 设计网址 作品集> 注册 - 登陆
首 页设计资讯大赛征集平面设计UI设计CG/动画工业设计建筑环境数码影像教程区设计访谈 精品欣赏会员作品集
>> 论坛发布优秀教程申请个人教程专区
推荐:经典素材资源
滚动新闻:[6-10]融于意,形于展!---52design作品集、设计师网上联展!
当前位置: 首页 >> 教程 >> HTML/CSS教程 >>正文
创造收藏夹中的个性化图标
资讯/教程/作品在线投稿  - 进入素材基地 - 论坛讨论 - 查看更多相关内容
时 间:2007-8-20 17:04:41   作者:   来 源:   浏览:
现在在浏览网页的时候,你会发现很多网站都会有“将我加入收藏夹”的选项,也许你的网站中同样有这样的选项,因为这确实是让浏览者记住网站的一个好方法。但是,当收藏夹中的网站越来越多,所有的网站都是一个丑丑的蓝色 IE 小图标加上一个网站名,让人感到无所适从。怎样才能在这众多的网站中脱颖而出呢?正当你麻木地盯着那堆看起来一模一样又毫无生气的书签的时候,忽然发现其中一个书签看起来很不一样,有个让人眼睛一亮的logo!没错,如果能把那个IE小图标换成一个个性化的Logo,一定能够吸引人注意。现在就让我们进入正题,看看怎样做出这样的效果。
请注意:这招只对 Windows平台的 IE 5.0 或者更新版本的浏览器才能奏效。不过请放心,在其他版本或者作业系统的浏览器上面并不会有任何不良副作用,只不过没有效果而已。
·设计师个人作品集火热申请中!
·查询网站排名推荐您用Chianz排名查询
·“论吧”正式上线 欢迎参与主题讨论
·全球经典酷站推荐欣赏
·矢量素材 给设计师提供强大后盾
·加入设计师论坛,精彩无限
·设计网址大全,免费收录所有设计站点


第一步:首先你必须要制作一个看起来既清楚又容易辨识的小图示,为了使做出来的图标与原来的图标风格相似,我们将图标的大小定义为16x16 像素。要制作这种图标文件,你必须要使用相关的图形编辑软件才行。你可以自己从一大堆这样的Icon制作软体里面挑一个来用。这些软件多半可以汇入一些常见的图形格式,例如 BMP 或者 GIF 格式,好让你可以不一定要在里面从无到有重新制作一个图形文件。此外在制作图形文件的时候,你可能需要把色盘设定成只使用标准的 16 色 Windows 色盘,这样做出来的图形才会在各种配置的机器上看起来都是一样的。还有一点很重要:为了显示你的特色,最好不要偷懒!虽然可以直接从一大堆别人已做好的图形拿来用,但想要别人对你的网站留有印象,图标的原创性就显得比较重要了。所以还是自己来做吧,然后把你的作品储存成 ICO 格式,记得文件名要叫做“favicon.ico”。

第二步:
把刚刚制作好的 favicon.ico 文件上传到你的网站根目录去。如果你的网址是:http://www.webjx.com 那么你的 favicion.ico 就应该被放在下面这个URL下http://www.webjx.com/favicion.ico
每当有网友要把你的网站(不管是网站中的哪一页)加入“我的最爱”的时候,IE 浏览器便会到你的网站根目录去寻找看看有没有favicon.ico这个文件,如果有的话,这个文件就会被用来当作书签上面的图示了。但是如果你没办法把文件上传到上面所说的根目录怎么办(比方说你的网页空间是和其他人共享的)?或者你只是要为网站中的某个特定页面设定书签图示,甚至你希望网站中不同页面可以有不同的图片呢?没关系,这时候你可以在网页原始码的 <HEAD>标签里区里面加上下面的设定:
<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http://www.webjx.com/favicon.ico">
<TITLE>My Title</TITLE>
</HEAD>
记得要把上面的http://www.webjx.com/favicon.ico代换成你自己的 URL 。使用这个做法的话,就不一定要把图形文件放在网站的根目录下面了,你可以放在任何位置,甚至直接连结到其他网站上面的图形文件也可以,而且图形文件的文件名也不一定要叫做 favicon.ico,可以自己随便取。不过要注意的是使用这个做法的话,只有在网友把有加入上面 HTML 语法的页面加入书签的时候才会有作用。
下面是一个Script代码,将它加入到你的网页中,则会提示网友将本页加入收藏夹。
<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)&& (parseInt(navigator.appVersion) >= 4))
{
var sText = "<U><SPAN STYLE=’color:blue;cursor:hand;’";
sText += "onclick=’window.external.AddFavorite(location.href,";
sText += "document.title);’>添加进收藏夹</SPAN></U>";
document.write(sText);
}
//-->
</SCRIPT>

大功告成!只要有网友将你的网站加入收藏夹中,你的 logo 就会出现在收藏夹目录里面了。不过有一点请记住:你的 logo 在网友还没将你的网站加入书签以前是不会被看见的,而且有些免费网页空间并不支援 ico 图形格式。
本文链接:


52design素材资源库52design图片库52design酷站营

我爱设计网www.52design.com
(在线编辑:morion) 】【打印】【关闭】【设计论坛】【设计师作品集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站地址,且不准打上各自站点的水印。

经典设计欣赏 设计关键字:VI 新锐 包装 装帧 海报 地产广告 画册 名片 标志 软件界面 ICO 网页
SPORTSLIST 平面广告
SPORTSLI
Puma 平面广告
Puma 平面广
Wataniya 平面广告欣赏
Wataniya
Penalty 平面广告
Penalty
HSBC平面广告
HSBC平面广告
Michaels Arts 平面广告
Michaels
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
当日文章推荐 查看更多相关内容
Dreamweaver| 用 Dreamweaver 4 制作 [8-20]HTML/CSS| 给网页文字加上即时提示 [8-20]
印前技术| 从印制谈降低图书成本 [8-20]CoreaDreaw| Excel表格导入Coreldraw [8-20]
Maya| 改变Sprites型粒子的方向 [8-20]Flash| Flash制作动漫中常用的眨眼效果动 [8-20]
Flash| Flash轻松实现五彩变换多边形鼠标 [8-20]3D MAX| 3D MAX教程:Loft建鼠标模型 [8-20]
Photoshop| Photoshop教程:打造月亮之下 [8-20]Photoshop| Photoshop教程:滤镜特效制作 [8-20]
理论文献| 网络时代图片银行的作用与摄影师的新课 [8-20]理论文献| 从艺术摄影到摄影的艺术 [8-20]
会员作品集推荐 查看更多推荐会员作品
平面作品 | 插画作品 | 网页作品 | 包装作品 | 软件UI | 室内设计 | 数码摄影作品 | 建筑环境 | 工业设计 | 其他
LogoIDEAL玩具汇森玩具群英会萃手术
老鼠动力阳光屋顶卡卡走-迷卡卡走-迷卡卡走-迷

数据载入中...
视觉焦点
优秀作品在线投稿
·
Michaels Arts 平面广告
Michae
生活境界楼书
生活境界楼书
港澳花园广告欣赏
港澳花园广告
茶包装欣赏
茶包装欣赏

站点新入
MAYA简单金属材质的制作
MAYA简单
Flash制作动漫中常用的眨眼效果动画
Flash制
展区
·翰海博网诚聘资深网页设计师 (2-29止)
·招聘全职美工 (8-30止)
·儒林设计工作室_招聘 (6-30止)
·WEB/GUI界面设计师 (1-10止)
·高薪诚聘网页美工 (1-28止)
·招聘资深平面设计师 (1-31止)
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:hpfmall
网站地址:http://www.hpfmall.com/
加入时间:2008-9-5 11:23:47
网站名称:themeforest
网站地址:http://themeforest.net/
加入时间:2008-9-5 11:12:59
网站名称:captiva.chevrolet
网站地址:http://captiva.chevrolet.com.cn/freedom/
加入时间:2008-9-5 11:12:28
网站名称:albumcreative
网站地址:http://www.albumcreative.com/
加入时间:2008-9-5 11:12:00
网站名称:p1w1max
网站地址:http://www.p1w1max.com/
加入时间:2008-9-5 11:07:04
网站名称:pixel-mix
网站地址:http://pixel-mix.sinacool.com/
加入时间:2008-9-5 11:06:04
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿