文档文库
手机版
投诉建议
热门搜索:
心得体会
演讲稿
思想汇报
首页
心得体会
学习心得体会
培训心得体会
军训心得体会
社会实践
作风建设
工作心得体会
教育心得体会
演讲稿
演讲稿格式
演讲稿范文
竞聘演讲稿
师德演讲稿
三分钟演讲稿
思想汇报
思想汇报范文
转正思想汇报
大学生思想汇报
季度思想汇报
教师思想汇报
工作计划
工作计划格式
工作计划开头
工作计划结尾
总结与计划
工作计划模板
工作总结
年终工作总结
年度工作总结
个人工作总结
实习报告
实习报告范文
实习计划范文
实习鉴定范文
实习报告内容
个人简历
求职简历
简历范文
简历模板
简历表格
简历格式
祝福语
春节
除夕
元宵
端午节
合同范文
合同范本
合同样本
合同范本格式
首页
>
网页设计中图片该怎么排版
网页设计中图片该怎么排版
发布时间:2020-12-08 来源:
文档文库
小
中
大
字号:
手机查看
百度文库
-
让每个人平等地提升自我
网页设计中图片该怎么排版
图片优化在提高产品质量上也起到了举足轻重的作用,
而图片的排版设计是很重要的,那么网页设计中图片该怎么
排版呢?下面小编为大家解答一下,希望能帮到您!
Win8
和
iOS7
的出现,将互联网行业中很多产品设计带
回到原点,或许更是另一个新的起点。
Win8
的
Metro UI
、
iOS7
中图标的扁平化设计、
一直崇尚简约的豆瓣网、
还有顶
着时代工匠称号的老罗所设计的锤子
ROM
,无一不体现着简
约的风格。
言归正传,回到我们图片优化的主题上。在产品设计和
UI
设计阶段,
除了内容图片,
其他的图片都是起修饰的作用。
也就是对于传递信息来说并非本质性的。所以最大的优化就
是不要图片。在进入到研发阶段之前,就要确认设计,设计
本身是否需要用到那么多的图片,还是说可以做到更简洁!
Chrome
,
FF
等浏览器厂商为互联网的发展做了这么多贡
献,为什么我们还要让那些不兼容
CSS3
的浏览器阻碍互联
网的发展呢。因此,让我们直接使用
CSS
样式代替图片来实
现修饰效果!例如:半透明、圆角、阴影、高光、渐变等。
这些效果主流的浏览器都能够完美支持,而对于那些低端浏
1
百度文库
-
让每个人平等地提升自我
览器,我们并不会完全抛弃他们,
“渐进增强”则是一个很
好的解决方案。至于什么是渐进增强,这里不再用过多篇幅
去解释,如果感兴趣可以参考
CSS
“渐进增强”在
web
制作
中常见应用举例。
我们常见的图片格式有
JPEG
、
GIF
、
PNG
。
基本上,内容图片多为照片之类或图片构成较复杂的情
况,适用于
JPEG
。如网站中的
Banner
图、轮播图、大尺寸
背景图等。
修饰图片通常更适合用无损压缩的
PNG
。而我们主要用
到的
PNG
图片又分为
PNG-8
和
PNG-24
两种,
PNG-8
格式不支
持半透明,也是
IE6
兼容的图片存储方式。如果对图片质量
要求较高的半透明或全透明背景,保存成
PNG-24
更合适。
有时候会遇到在
IE6
下应用
PNG-24
图片的情况,关于
IE6
下
PNG Alpha
透明的解决方案可以参考
IE6
中
PNG Alpha
透
明。我在项目中常用的方法是
AlphaImageLoader
筛选器。
除了这些格式之外,
Chrome
、新版
Opera
、
Android 4+
支持
WebP
格式,
IE 9+
、
IE mobile 10+
支持
JPEG XR
。这两
个新格式都支持无损和有损压缩,都具有更良好的压缩比。
当然这需要为不同的浏览器返回不同的图片,增加了开发成
本,也增加存储成本。不过你省了流量或者相同流量下改善
了图片质量,提升了用户体验。这就需要根据项目需求进行
2
百度文库
-
让每个人平等地提升自我
取舍了。
CSS Sprites
,将同类型的图标或按钮等背景图合到一
张大图中,减少页面请求。
Icon Font
,将图标做成字体文件。优点是图标支持多
个尺寸,兼容所有浏览器,减少页面请求等。美中不足的是
只支持纯色的
icon
。
SVG
,对于绝大多数图案、图标等,矢量图更小,且可
缩放而无需生成多套图。现在主流浏览器都支持
SVG
了,所
以可放心使用!
图片压缩工具,可以在图片上线前使用压缩工具进行压
缩,获得更高的压缩比。我常用的压缩工具为
Yahoo
的。
data url
Base64
是网络上最常见的用于传输
8Bit
字节的编码方
式之一,可用于在
HTTP
环境下传递较长的标示信息。将图
片转化为
base64
编码格式,资源内嵌于
CSS
或
HTML
中,不
必单独请求。
该方式的优点是:
1.
减少了
HTTP
请求
2.
避免了图片重新上传,还要清理缓存的问题
3
百度文库
-
让每个人平等地提升自我
不足之处是:
1. IE6, IE7
不支持该类型编码的图片作为背景图
2.
增加了
CSS
文件的尺寸
3.
维护成本较高
按照
HTTP
协议设置合理的缓存
具体的缓存策略、部署策略这里就不展开了。
4
本文来源:
https://www.2haoxitong.net/k/doc/366cd5d7f7335a8102d276a20029bd64783e62a4.html
《网页设计中图片该怎么排版.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档
文档为doc格式
分享到:
相
关
案
例
南昌市新建一中高考喜报2021
2024-04-26
2021年高考语文试题全国卷二2021年河南高考语文试题答案公布
2024-04-26
正在进行安全检测...
2024-04-26
三种腹部减肥伸展操,瘦腹效果非常显著
2024-04-26
正在进行安全检测...
2024-04-26
男子减肥计划表精编版
2024-04-26
正在进行安全检测...
2024-04-26
第一师阿拉尔市人口集聚探讨
2024-04-26
锅生锈了怎么办能把锈清理干净
2024-04-26
2021年江苏省机械安全员C1证练习题和答案(Part4)
2024-04-26
相关推荐
1
网络的规划设计1
2
网络规划设计方案全集
3
某企业的网络拓扑设计图
4
学校语言文字工作汇报材料
5
惠民致远实验学校语言文字工作汇报材料
6
学校语言文字工作汇报材料
7
学校语言文字工作汇报材料
8
学校语言文字规范化工作汇报材料
9
学校语言文字工作汇报_工作汇报完整篇.doc
10
南原学校语言文字工作汇报材料
推荐内容
网页设计中图片该怎么排版
家庭网络设计方案
校园网络设计
大型企业网络设计
校园网络设计思路
自学考试公司法笔记(重点标记)
校园网络系统设计方案
校园网络详细设计方案
校园网络设计方案
校园网络安全方案设计