Web界面设计

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文件夹