page contents

WEB前端教程:来做一个漂亮的网站

充分应用上之前学习到的各种布局方式,尽可能几种方式都运用尝试一次,比较各种布局的适用场景

attachments-2022-10-UrvB4HbG634f8faa9337f.png课程目标

经过前面章节的练习,我们基本把 HTML 和 CSS 的基本知识进行了一遍学习。新的任务,将会用三节的时间,来学习如何将一个设计稿转化为网页,通过这个过程实战我们之前学到的各种 CSS 知识。

课程描述

首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。

切图

阅读

按照设计师提供的设计稿,实现 HTML 页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”,在不同公司,切图的工作可能是不同职位做,可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样,这是我们需要掌握的一个基本功能,正常来说,小半天我们就能基本掌握这项技能了。

编码

使用 VS Code 等开发工具,按照如下设计图,进行页面的实现。

要求

  • 代码风格符合某种编码规范
  • 尽可能按照设计稿的尺寸进行实现
  • 设计稿中的图片或文字素材在实现时可以不一致
  • 充分应用上之前学习到的各种布局方式,尽可能几种方式都运用尝试一次,比较各种布局的适用场景
  • 设计稿中下方导师介绍图片,左上角灰色底表示,鼠标 hover 到图片上时的效果变化。
  • 不需要考虑兼容 IE 浏览器

复习

阅读

将之前的材料以及自己搜索到的材料进行多次阅读,并重点阅读 W3C 规范。

重构你的代码

根据上面的阅读学习,重构你的代码,优化代码结构及细节。

提交

把你的代码提交到 Github ,把 Github 地址提交到作业里,如果有余力的同学,可以学习如何在 Github 中预览你的 HTML 代码,并提交预览地址。

总结

找一个你可以记录笔记的地方,可以是电脑里的记事本或是手边的笔记本(不做任何限制),记录下今天的学习笔记,包括以下内容:

  • 日期,今天的学习总用时,今天学习的目标是什么,是否达成
  • 哪些东西今天了解得比较透彻,说说自己的理解
  • 哪些东西今天了解到了一些,还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答,把问题记录下来,以待后续解决


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等

attachments-2022-10-FrROrQP5634f8ece5f9f3.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1300 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1300 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章