web开发规范 - 图片规范

2024-04-06 06:06:32

基本规则

所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

图片格式仅限于gif || png || jpg;

命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

banner

全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。
另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。
普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
次级页的pip尺寸360X300，336X280
游标:100X100或120X120

LOGO的国际标准规范

为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
8831 这是互联网上最普遍的LOGO规格。
12060 这种规格用于一般大小的LOGO。
120*90 这种规格用于大型LOGO。

页面修饰图片处理

图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。

web开发规范 - 图片规范相关推荐

web开发 DIV+CSS规范命名集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 命名规则说明: 1).所有的命名最好都小写 2).属性的值一 ...
Flask Web开发：图片处理界面
一.问题描述制作一个抓取检测界面,在网页前端上传图片后,使用jQuery和AJAX将图片传到后端处理,再将处理后的图片返回到界面指定的位置. 初始界面如下: 点击选择图片按钮上传图片后,图片 ...
Web开发中图片上传功能总结
图片上传功能总结 1.添加文件上传所需jar包(commons-io-1.4.jar和commons-fileupload-1.1.1.jar) 2.在form表单上添加自带属性 enctyp ...
python之WEB开发：图片管理
1:背景图片管理 <body background="E:/PyCharm 2020.1.1/project/MySite/static/image/short_detect/inde ...
手机Web 开发中图片img 如何等比例缩放
如果图片本身没有设置 width.height属性的话,只需要修改 max-width:100%; 就可以了如果图片本身设置了 width.height属性的话,需要同时修改width 和heigh ...
前端代码开发规范。web开发规范。web开发注意事项。前端开发如何写出更规范的代码
一.图片观看: 二.文字描述: 1,web开发基本原则: 1.结构html,样式css,行为js:三者要分离,尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里; ...
Domino Web开发规则之一：Notes命名规范
所有的设计元素的命名都分成两部分,名称和别名,规定名称用中文命名,别名用英文,别名尽量使用简写,以WEB开发时不会产生较长的URL为前提,提高HTTP Request的响应速度.中文名称前面加上字母A ...
手机端web/app界面设计尺寸规范
手机端web/app界面设计尺寸规范移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
JAVA等多种程序开发的命名规范
良好的命名规范可以为团队合作开发推波助澜,无论在项目开发,还是产品维护上都起到了至关重要的作用.应该说命名规范是一种约定,也是程序员之间良好沟通的桥梁.另外古人相信只要知道一个人真正的名字就会获得凌驾 ...
WEB前端代码书写规范
WEB前端代码书写规范 1. 命名规范 a.ClassName命名 ClassName的命名应该尽量精短.明确,必须以单页面字母开头命名,且全部字母为小写,单词之间统一使用下划线 "_&qu ...

最新文章

热门文章