Web界面安全宽度
网页的内容宽度必须≤web安全宽度
常用web安全宽度:(基于电脑分辨率)1200px、1000px、990px、980px、970px、960px
颜色模式:RGB
适合用在浏览器中显示的图像格式:Gif、Png、Jpg
网页布局
分析流程:从上到下、从左到右、从内到外(按页面构成模块分析)
三种布局级别:
1、行(横排)布局
2、列(浮动)布局 float
3、①行布局时,margin-top值在父子级间共用;margin上下值在行布局时共用,浮动后就变为边界增加了
②clear只允许用在最后一个布局对象上(不推荐随意使用)
clear--清除其他元素的浮动值对本元素的影响; {clear:left/right/both;}
设计流程
分析:网格结构、页面安全宽度
创建结构(参考线和矩形):一定要按照页面模块来分组(建立图层组)
添加效果(图层样式)
添加内容、文字、图片
贴图(高清图)
贴图类型:通栏图像(图文结合)、广告图像(图文结合)、产品图像(全部给单色背景、实景、渐变色背景,在一定范围内背景效果要一致、产品角度要一致)
字体规范
文字边缘设置:
常用字体:宋体、黑体、微软雅黑
常用字号:12px、14px、16px、18px
小号文字(12px、14px)边缘给“无”、大号文字边缘要消除锯齿
标题多用黑体、微软雅黑或宋体加粗,正文建议用宋体
web界面(没有溢出)宽度:用屏幕分辨率的宽度减去浏览器滚动条宽度
Photoshop切片
【文件】->【导出】->【存储为Web所用格式】->【[优化]界面】 选择所需的切片(按shift多选)
预设:PNG-24、PNG-8
存储->切片:选中的切片->保存(会自动在文件夹中自动创建images文件夹,内含切片),下一次存储切片时只需选到images文件夹所在的文件夹,保存切片会自动存入images文件夹内,不需要进入images文件夹再保存,否则会在images文件夹内自创另一层images文件夹