网页制作图标

网页设计尺寸与PSWEB文件尺寸

  网页设计在初始要界定出网页的尺寸大小。就像绘画给出一块画版来。这样才能方便设计。  网页的尺寸受限于两个因素:一个是显示器屏幕。显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展。但目前也有为数不少的15寸显示器。另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等。  高度:  高度是可以向下延展的,所以一般对高度不限制。 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。  宽度:  1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。  2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005  3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001  注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。  所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。  如果是800的分辨率一般都设成770。但也有设成760的。  这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右。  网页设计标准尺寸:  1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。  2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间。就不会出现水平滚动条和垂直滚动条。  3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右  4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象。  页面标准按800*600分辨率制作,实际尺寸为778*434px  页面长度原则上不超过3屏,宽度不超过1屏  每个标准页面为A4幅面大小,即8.5X11英寸  全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px  另外120*90,120*60也是小图标的标准尺寸  每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K  标准网页广告尺寸规格  一、120*120,这种广告规格适用于产品或新闻照片展示。  二、120*60,这种广告规格主要用于做LOGO使用。  三、120*90,主要应用于产品演示或大型LOGO。  四、125*125,这种规格适于表现照片效果的图像广告。  五、234*60,这种规格适用于框架或左右形式主页的广告链接。  六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。  七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。  八、88*31,主要用于网页链接,或网站小型LOGO。  广告形式 像素大小 最大尺寸 备注  BUTTON 120*60(必须用gif) 7K  215*50(必须用gif) 7K  通栏 760*100 25K 静态图片或减少运动效果  430*50 15K  超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果  巨幅广告 336*280 35K  585*120  竖边广告 130*300 25K  全屏广告 800*600 40K 必须为静态图片,FLASH格式  图文混排 各频道不同 15K  弹出窗口 400*300(尽量用gif) 40K  BANNER 468*60(尽量用gif) 18K  悬停按钮 80*80(必须用gif) 7K  流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)  网页中的广告尺寸  1.首页右上,尺寸120*60  2.首页顶部通栏,尺寸468*60  3.首页顶部通栏,尺寸760*60  4.首页中部通栏,尺寸580*60  5.内页顶部通栏,尺寸468*60  6.内页顶部通栏,尺寸760*60  7.内页左上,尺寸150*60或300*300  8.下载地址页面,尺寸560*60或468*60  9.内页底部通栏,尺寸760*60  10.左漂浮,尺寸80*80或100*100  11.右漂浮,尺寸80*80或100*100

谁知道怎么做网页标签前面上加这个小图标啊

将以下代码加入html代码中的head中<link href="/images/favicon.ico" rel="shortcut icon" />/images/favicon.ico是图标的路径!备注,网页是有缓存的,如果修改之后没有效果请清空网页缓存文件,重试! 具体插在什么位置啊 直接在head下面吗 只要在head中就可以<head><link href="/images/favicon.ico" rel="shortcut icon" /></head> 加了 还是没用啊 是不是这样的 <head><link href="/images/favicon.ico" rel="shortcut icon" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首页</title><link href="head.css" rel="stylesheet" type="text/css" /></head>我图片 路径偶读正确啊

为什么网页中的图标常用16px,24px,32px 这些尺寸

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你!   图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主。不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力。   在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使用了。这些图案和标识通常是常见的、易于接受的、功能型的图形(文件夹、打印机、鼠标、箭头等),在随后的20多年间,这些图标逐渐发展成约定俗成的一套图形语言。在接下来的设计指南中,我想分享一些网页设计中图标使用的技巧,以及一些实用的免费图标素材合集,希望你能喜欢!   图标设计样式   我们通常所说的“图标设计”其实覆盖了相当大的一个范围。小到网页中那些纯色扁平小标识,大到PS和AI精雕细琢的拟物风APP图标,都在图标设计的范畴内。每个图标设计项目都有着不同的设计需求和图标风格,这些不同造就了图标设计的差异化。   目前所流行的极简风和扁平化设计,已经在全世界设计师中拥有了无数的拥簇。而之前一直不温不火的线性图标也已经成为了目前iOS系统的首选图标,其他的移动操作系统也正在逐步跟进。从风格上来说,图标并无对错之分,只能说是各自选择和偏向不一样罢了。   在我看来,扁平化设计和拟物化设计之间的竞争对比,对于网页设计而言是一件无比美妙的事情。这也对图标设计产生了影响,许多艺术领域的概念被引入到图标设计中来,比如光影变化,深度,等等。作为设计师的你如果更倾向于扁平化设计,那么你需要学习创建纹理,控制阴影,让你的设计看起来富有真实感。为此你需要进行大量的练习,但是这绝对是值得的。   企业品牌设计   虽然品牌设计看起来是显而易见的事情,但是它依然值得一提,因为那些优秀的网站通常有着优秀得令人难以置信的品牌设计。一个优秀的图标能向用户传达出品牌的理念和情感。当你为一个企业或者网站进行品牌设计的时候,品牌的图标、吉祥物或者符号应该让品牌和它的用户之间形成独特的情感联系。   当然,你也可以为品牌设计一系列不同的图标,每个图标包含不同的效果,传达不同的理念。图标设计的可能性是如此之多,你甚至可以设计出以个图标大合集,让所有不同的图标拥有相同的风格。由于每个图标都是独特的存在,但是风格又如此一致,当它们运用到网页中的时候,可以让整个网页拥有独特的气质,足以从诸多设计中脱颖而出。   MailBakery 就是这样一个典型的案例,它使用了个大图来宣传它们的服务。当光标移动到下方每一个图标上的时候,上方的大图内容会被替换成相应的图片内容,这样的图标+图片的组合在设计上保持着高度的一致性。   这些图标所对应的图片可以说是专门为网站定制的,但是这些图标却是某个免费图标集的一部分。你可以在几十个不同的网站上看到这些相同的图标,也就是说,这些图标作为潜在品牌设计的独特性,已经被忽略掉了,他们其实可以做的更好。   也正是因此,我常常建议有报复的图标设计师去学习为界面单独定制成套的图标集。对培养品牌、客户以及项目而言,这都是更为长远更有价值的事情。   导航链接   在过去,网页上的图标常常用作内容导航,也就是说,图标的内容和含义,同图标所指向的页面内容/性质高度相关或者一致。今天,Facebook上的导航也遵循着同样的原则。   虽然你不会一直遵循这样的设计方式,但是有必要且值得了解它。下拉菜单链接通常非常实用,因为用户会主动去了解每一个菜单的名称。但是如果在横向或者纵向上有十几个导航链接的话,通过图标来识别是比较可靠的方案。   视觉内容识别   在网页设计中使用业内图标最主要的原因是用来区分内容。图标可以从视觉上更清晰地传达信息,能够平衡包含大量文本的布局,所以,如何通过一个简单的图标来准确传达信息是设计师的必修课。   我最喜欢的案例就是GitHub的教学页面。页头使用Github的吉祥物和粉笔黑板营造出教育的氛围,当你向下滚动的时候,每个板块都有单独对应的图标,为你说明这以块是干啥的。   值得注意的是,每个图标都使用的是手绘的效果,虽然色彩不同,但是整体风格高度一致,明显是统一设计的一整套图标。更重要的是,每一个图标都明确直观地描述了它所在区块的内容。文字内容足以描述清楚细节,但是图标能高度概括地阐明信息。   你可以在 Glazed & Infused 的首页看到类似的设计效果。文字小区块详细地描述了他们的服务、咖啡和礼品卡的信息,而顶部的手绘图标则从视觉上阐明了内容的性质,更重要的是,这三个图标迅速地抓住了用户的眼球。   矢量背景   从重复平铺背景到矢量对象,你可以用矢量图形做很多事情。对网站背景的处理方式,已经远不止于平铺纹理那么单一了。通过矢量图形来创建覆盖整个背景的场景已经很容易了。   矢量图形可以很轻松地缩放,但是很难创造出逼真的效果。想制作出复杂样式的矢量图形并不容易,你需要通过大量的练习来熟悉在图形上构建图形的技巧,不过一旦学会还是蛮有趣的。在这里我们推荐一个好用的工具:Bota Iusti。   设计教程   跟踪学习在线的设计教程是提高图标设计技能的重要方式。想要精通设计技能没有捷径,唯有不断学习,坚持练习。   虽然图标设计是一个广泛的领域,但是许多教程是可以举一反三的,接下来提供的一系列教程非常实用,希望你能通过学习融入日常的设计中去。   16×16 px Icons   Weather Line Icons   Flat Social Icon   Tab Bar Icons   Bat Icon   Gem Icons   Water Pistol   Mail Alert   Notebook   Almost Flat   免费图标   40 Flat Icons   Mini Icons   Colorful Iconset   Simple Flat   Sport & Fitness   Chat & Email   Atitel Icons   Tab Bar Icons   Simple Lines   Flatified   Web Design Iconset   iOS Settings Icon   Colorful Switch   Synthesizer   Book App Icon

网站前面的图标是怎么弄的??

网站前面的图标是叫favicon.ico图标,也是显示一个自己个性的标志。你可以制作一个ico图标,并命名为favicon.ico。操作步骤:第一、百度一下“.ico图片制作”,就能找到很多.ico图片制作软件。第二、点击.ico图片制作软件,第三、选择一张图片,任意图片都可以,不过还是建议:用正方形图片,图片中标志尽量占据绝大部分,这样生成的.ico图片才能更加清晰。第四、上传成功后,需要选择.ico图片的尺寸大小,这个可以按照自己的需求来选择,一般选择48*48的比较好,这样的会比较清晰一些。第五、.ico图片制作软件生成一个.ico图标,但是要传到网站上,必须修改图片的名称为favicon.ico,这是固定格式,然后用FTP将favicon.ico图片上传到网站根目录下即可。

怎么把一个网站制作成手机桌面上的一个图标?是手机终端吗?怎么弄?

一个是通过手机的浏览器,保存书签在桌面一个是通过将网站做成app来放在桌面,难度取决于网站内容,架构,如果是一般的展示型网站,可以使用现在的简网,百度移动什么,或者搜索免费app制作一类的网站生成

ico网站标题图标的大小?

128*128 64*64 48*48 32*32 16*16一般都是这几种,看你的图片饱和度吧,自己试一下效果即可

怎样用CSS给网站title加小图标?

先制作好icon,然后再在<head>里面插入<link rel="Shortcut Icon" href="icon地址" type="image/x-icon">

制作网页如何做出“返回顶部”图标并固定在页面右下的位置?

<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>SCROLL</title> <style type="text/css"> </style> <script type="text/javascript"> var goToWhere = function (where)     {     var me = this;     clearInterval (me.interval);     me.site = [];     var dom = !/.*chrome.*/i.test (navigator.userAgent) ? document.documentElement : document.body;     var height = !!where ? dom.scrollHeight : 0;     me.interval = setInterval (function ()     {     var speed = (height - dom.scrollTop) / 16;     if (speed == me.site[0])     {     clearInterval (me.interval);     return null;     }     dom.scrollTop += speed;     me.site.unshift (speed);     }, 16);     }; </script> </head> <body> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div> <div id="back-up" onclick="goToWhere(0)" style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div> <div id="back-up" onclick="goToWhere(1)" style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div> </body> </html>

怎样用CSS给网站title加小图标?

先制作好icon,然后再在<head>里面插入<link rel="Shortcut Icon" href="icon地址" type="image/x-icon">

html 怎么添加ico小图标

你可以在线制作的你ICO筱图标,如果你觉得清晰度不够的话,你可以用制图软件制作ICO小图标,上传到你的服务器上;在你想要的网页上加入代码   <link href="ICO的图标地址" rel="shortcut icon" />刷新你的网站就能显示了;

建站需求填写

采购需求填写

采购需求

采购产品:
联系人:
* 联系电话:
公司名称:
补充说明:
* 验证码:
提交