《网页制作流程网页制作流程》由会员分享,可在线阅读,更多相关《网页制作流程网页制作流程(20页珍藏版)》请在金锄头文库上搜索。
1、,通览设计 稿,寻找现有 资源,布局,确定公用 结构 样式,模块 拆分,开始 工作,页面制作流程, ,全局观 切图技巧 图片质量,技巧&经验,页面的构成元素, ,布局 模块 内容,全局观念,布局,模块拆分,整理公用结构和样式,左图右文字的内容布局,模块:标题+内容, ,全局观+制作流程 切图技巧 图片质量,技巧&经验,主要工具 Photoshop, ,拷贝所选区域:Ctrl+Shift+C 和 Ctrl+C 的使用 制作CSS Sprites 合成图片时可打开辅助网格,用于快速拖 放图片到指定位置 。 快捷键 ctrl+; 设定:编辑-首选项-参考线,网格和切片 利用PS的动作可以快捷的完成上
2、述过程,切图技巧,选择 区域,复制,新建图层,粘贴,存储为 web格式, ,全局观 切图技巧 图片质量,技巧&经验,GIF JPG PNG, ,图形 VS 照片 真彩色图像VS调色板图像 透明 和 alpha通道(RGBA) 隔行扫描,需要了解的图像知识, ,Graphics Interchange Format 图像互换格式 调色板图像 透明:允许一个二进制类型的透明度 支持动画 无损 逐行扫描 (LZW压缩算法),GIF, ,Joint Photographic Expert Group 真彩色图像 不支持透明 不支持动画 有损 支持隔行扫描,JPG & JPEG, ,PNG is Not GIF? Portable Network Graphics 便携式网络照片,PNG, ,支持真彩色和调色板 支持完全的alpha透明 支持动画但无跨浏览器解决方案 无损 支持隔行扫描,PNG, ,PNG8 调色板色 PNG24 真彩色不包括alpha透明通道 PNG32 真彩色包括alpha透明通道,Photoshop存储为WEB格式没有PNG32? http:/ ,Zen Coding 结果代码 学习:http:/ 利用其他工具的自动完成功能,感谢大家,