虎课网为您提供综合教程版块下的『研习设』我怀疑这种网页设计方式没几个人知道！图文教程，本篇教程使用软件为无，难度等级为初级练习，下面开始学习这节课的内容吧！

今天课程的内容【我怀疑这种网页设计方式没几个人知道！】本节课的难重点同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交，优秀的作品会额外获得100虎课币的奖励，可以用来兑换奖品。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一解答。

那我们开始今天的教程吧。

1.当你仔细分析一个网站的时候，会发现网站都是“模块化”的，“布拉德·佛罗斯特”思考了一个问题，物质都是由最小的元素慢慢组合形成的，那么在网站中是不是也遵循这个规则。

2.按照这个理论，在整个网页的设计过程中就被分为了五个环节，其中包含了：原子、分子、组织、模板、页面。

3.其中【原子】对应着网页中最小的元素，也就是【按钮、文本、颜色】，当原子之间相互结合就会变成新的元素【水分子】。

4.原子设计中存在的优势有：统一性、模块化、高效率、方便协作，接下来就知识点来详细的进行讲解。

5.看到这段文字，在这个文字中有设置了整个文字的规范，这么做的好处就是让整个网页更具有统一性。

6.【模块化】如果需要更改网页的内容，那么我们只需要去替换元素就可以实现，这里通过案例来进行讲解。

7.当工作中积攒下来的模块越来越多的时候，这些模块自然形成了一个网页的资料库，可以很好的提高团队的协作。

8.【原子部分】通过按钮来进行一个讲解，按钮可以被分为：实色按钮、线框按钮、文字按钮，这三种按钮的重要程度也是依次减少的。

9.通过按钮来进行分析，通常文字内容需要放置在中间的位置，然后上下左右的尺寸可以参考图中所示。

10.【原子】部分还有很多的内容，除去课程中所讲解到的【输入框、按钮、图标、选框按钮】以为还有【颜色和字体】。

11.继续往下，来讲解一下【导航栏】都有哪些元素组合而成，通常导航栏会有三种状态：正常状态、点击状态、无效状态。

12.【卡片】同样也是由这些原子所组成的，这个部分有了文字的规范、按钮、图片，接下来要做的就是将这些内容合理的拼搭在一起。

13.接下来讲解一下【组织和模板】这两个部分，通过图片了解一下一个单元形，通过重复的手法可以设计出多少种形式。

14.在分子阶段就设置好了单元形的形式，不管是怎么重新组合，这个网页都会给我们一种整体的感觉。

15.回顾所讲解到的知识点进行总结，难重点同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复。

16.视频学百遍，不如上手练一练！你学会了吗？最终效果如图示。

以上就是『研习设』我怀疑这种网页设计方式没几个人知道！图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！