html布局总结

一张jpg或者psd格式的图片变成现代浏览器上的网页到底经历了什么？

网页样式与布局之photoshop切图篇:
前景图：网页中表达内容的相关图，例如：产品图、logo图、brand图等
背景图：网页中起到修饰作用的图
图片的切和取：

1. 选择ps中的切片工具按住鼠标左键沿图片边缘扩大选区，直到选区和图片尺寸一样大小
2. 点击文件-存储为web所用格式（alt+shift+ctrl+s）
3. 预设jpg高或者png24+存储
4. 选择：选中的切片+图像+保存
5. ps会自动生成一个images的保存切片的文件夹

注意点及部分常用快捷键：
1. 网页尺寸为像素。所以ps中的单位调为像素。编辑-首选项-单位与标尺-调整为像素
2. 辅助测量的标尺线。ctrl+r调出ps标尺线
3. 选框的拖动。空格键+鼠标左键
4. 画布缩放。alt+鼠标滚轮或者ctrl加上加减号
5. 画布还原。ctrl+1
6. 一步撤销和多步撤销。ctrl+z；ctrl+alt+z
7. 切片的选中。ctrl+鼠标左键
8. 标尺以一像素移动。shift+鼠标左键

在网页制作中用到的常规ps的工具有：
1. 移动工具
2. 选框工具：测量尺寸大小
3. 切片工具：切出网页所需的前景图和背景图
4. 吸管工具：选取网页中的颜色
5. 文字工具：测量文字的大小和颜色以及间距

常用窗口
1. 图层窗口（F7）
2. 信息窗口（F8）
3. 颜色窗口（F6）
4. 字符窗口
5. 段落窗口

网页的结构划分遵循逐级划分原则。
划分顺序：从外往里-从上往下-从左往右
图片的局部获取遵循一像素原则；在图片重复平铺时，获取重复循环的部分图片
一般性网页的一级拆分：
header头部+banner轮播图+main主题内容+footer底部