WEB前端教程：来做一个漂亮的网站
充分应用上之前学习到的各种布局方式，尽可能几种方式都运用尝试一次，比较各种布局的适用场景
课程目标
经过前面章节的练习，我们基本把 HTML 和 CSS 的基本知识进行了一遍学习。新的任务，将会用三节的时间，来学习如何将一个设计稿转化为网页，通过这个过程实战我们之前学到的各种 CSS 知识。
课程描述
首先对上一个任务进行复习，如果还没有完成上一课任务的同学，请先完成上一个任务。
切图
阅读
按照设计师提供的设计稿，实现 HTML 页面，需要将设计稿切分成为最终在页面中呈现的一个个图片，我们一般称之为“切图”，在不同公司，切图的工作可能是不同职位做，可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样，这是我们需要掌握的一个基本功能，正常来说，小半天我们就能基本掌握这项技能了。
- 前端开发人员也要会的切图技巧(opens new window)
- 前端工程师必备的 PS 技能 切图篇(opens new window)
- 做一个会 PS 切图的前端开发(opens new window)
编码
使用 VS Code 等开发工具，按照如下设计图，进行页面的实现。
要求
- 代码风格符合某种编码规范
- 尽可能按照设计稿的尺寸进行实现
- 设计稿中的图片或文字素材在实现时可以不一致
- 充分应用上之前学习到的各种布局方式，尽可能几种方式都运用尝试一次，比较各种布局的适用场景
- 设计稿中下方导师介绍图片，左上角灰色底表示，鼠标 hover 到图片上时的效果变化。
- 不需要考虑兼容 IE 浏览器
复习
阅读
将之前的材料以及自己搜索到的材料进行多次阅读，并重点阅读 W3C 规范。
- W3C Visual formatting model(opens new window)
- W3C Flexbox(opens new window)
- W3C Grid(opens new window)
- 多列布局(opens new window)
重构你的代码
根据上面的阅读学习，重构你的代码，优化代码结构及细节。
提交
把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。
总结
找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
- 日期，今天的学习总用时，今天学习的目标是什么，是否达成
- 哪些东西今天了解得比较透彻，说说自己的理解
- 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
- 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-19 13:48
- 阅读 ( 487 )
- 分类：WEB前端开发
