【融职培训】Web前端学习 第2章 网页重构10 还原设计稿

一、概述

通过前几节的内容，我们已经掌握了html与css的基础知识，本节我们使用之前学过的知识来还原一张设计稿。

Photoshop的基本操作

在还原设计稿时，我们需要使用photoshop打开psd格式的设计稿，作为前端工程师，我们不需要太多的ps技巧，只需要了解一些简单的基本操作即可。

1. alt+滚轮 缩放图片
2. 空格+鼠标左键 拖动图片
3. shift+m 切换到选取工具，使用鼠标左键选择，ctrl+d可以取消选取。
4. F8查看信息，可以查看选取内容的尺寸。
5. shift+t 切换到文字工具。
6. 单击色盘可以吸取颜色
7. ctrl+r 切换显示标尺
8. 鼠标左键可以从标尺中拖出辅助线，取消辅助线可以将其拖入标尺
9. shift+c 切换到切片工具，选择切片后。
10. 选择切片后，按alt+shift+ctrl+s:存储为web和设备所用格式，就可以看到切片选择的对应图片了。

开发规范

在还原设计稿之前，我们了解一下制作规范。

1. 统一使用class定义样式。
2. class命名要有语义。
3. class命令，多个单词使用下划线命名
4. 切图要精确单1px。
5. 文字描述不要用图片。

以上是对初学者的一些规范，在实际项目开发中，公司应该会给出具体的规范要求，到时候按照公司的要求制作即可。

二、网页重构

在实际工作中，UI设计师在设计网页的过程中，会留存很多网页中图片的源文件，我们在还原设计稿的时候，直接让设计师把网页相关的图片给我们即可。

有了网页中的图片素材，接下来我们使用phoneshop打开psd格式的设计稿，按照相应的尺寸还原设计稿即可，响应尺寸如下所示：

1. 设计稿整体的宽度
2. 盒子模型中的宽度，高度，以及边距尺寸
3. 字体大小

三、注意事项

对于初学者来说，还有很多内容是需要注意的。

高度自适应问题

网页中的很多位置是不应该设置固定高度的：

例如列表容器的高度应该根据列表元素的个数决定其高度，列表元素个数越多，列表高度越高。

列表容器是不应该设置高度的。

还有文章容器的整体高度，也应该根据内容的增多而逐渐增高。

在布局的时候，这些效果都不应该设置高度。

宽度自适应问题

在第07节中我们了解到，块元素默认情况独立成行，严谨的说，应该是：

块元素默认情况下占父级元素宽度的100%

因此，在网页制作中，如果块元素（例如div，ul，li等），我们希望其宽度占容器元素的100%，则可以不设置width属性。

如果是body标签自己的块元素，不设置宽度，其实际宽度会随着浏览器宽度的变化而变化，这样就实现了元素适应浏览器的宽度。

例如融职教育首页的头部，就是一个适应网页宽度的容器。

四、课后练习

完成融职教育首页的设计稿