1.本节课的主要内容为【网页设计组成与规范】。

2.【如图所示】本节课主要分为五个部分。

3.首先我们先来学习【常见的版块与组件】。

4.【板块】呢，就是网页设计整体版式。

5.【如图所示】根据网页类型的不同，我们相应的版块布局也是不一样的。

6.【如图所示】我们以锤子的网站为例给大家作为参考。

7.接下来给大家讲解一下【如何确定网页设计中的版块】。

8.【如图所示】我们首先要了解客户的需求，然后绘制手稿，最后绘制线框原型。

9.作为一名设计师呢，我们要学会【沟通与协作】。

10.接下来给大家介绍一下【网页中常见版块与组件】。

11.【如图所示】这里以360为例给大家做一个分析。

12.【如图所示】在网页的中段呢，有这几个常见的版块。

13.【如图所示】在网页的末尾呢，我们可以看到这三个版块，都是很常见的网页版快。

14.接下来给大家讲解一下【版块、组件样式与应用场景】。

15.【如图所示】首先给大家看一些【顶部导航】的一些样式以及它的一些特点和规范。

16.除了【顶部导航】之外呢，还有【浮动导航】，【如图所示】这是【浮动导航】的相应特点。

17.【如图所示】是我们【透底导航】的特点和相应的应用场景。

18.最后呢是【侧边导航】，大多数用于个人或者团队博客类的网站，在一些电商网站上也是很常见的一种导航形式。

19.接下来给大家讲解【轮播焦点图样式】。

20.【如图所示】为多个固定宽度的大图轮流播放，有多种切换样式，以及自动切换+手动切换两种方式。

21.【横向通栏】也是焦点图的一种表现方式，主要特点为横向铺满，视觉开阔、简约大气，但是与导航栏的样式要协调。

22.好的，接下来给大家讲解【新闻与产品】。

23.【如图所示】新闻列表的制作规范和特点。

24.在设计【产品展示】板块的时候呢，我们要注意产品展示中的信息元，明白信息员的优先级与设计中的主次，以及宫格与列表的模式选择。

25.接着给大家讲一下【现代与传统设计模式的区别】。

26.现代网页设计呢，有几个特点，【特点一】横向版块分解明显。

27.【特点二】减少过度的阴影修饰。

28.【特点三】构图、配色、字体上的设计更加大胆，敢于突破。

29.我们在设计网页的时候有着一些平台的规范，首先是【网页的设计尺寸】。

30.【如图所示】这是用户使用的屏幕分辨率的一个报表，我们在设计的时候要先满足主流的用户它们的显示器分辨率的大小，然后再着手去设计。

31.然后要考虑【网站行业的性质】，不同的网站它们展示的内容不同，相应的网页设计的时候大小也就不同。

32.【如图所示】我们在用PS进行制作的时候，新建画板里的Web选项就可以选择多种网页的预设尺寸。

33.【如图所示】这里呢给大家一个视觉宽度的建议，这个不是固定的，大家可以自行考虑。

34.接着给大家讲一下在设计中对于字体的选择，当然大家需要注意字体的版权问题，【如图所示】这个网页所使用的是常规的字体，没有什么刻意的设计。

35.【如图所示】这是一些常见的字体选择和字号的大小。

36.字体讲完了，接着给大家讲一下设计中【控件&样式管理】。

37.【如图所示】这是对于标准化控件的一个操作。

38.我们在设计的时候需要考虑到网页的一个交互性，【像下拉菜单】啊，【悬停状态】啊。

39.本节课程到此结束，下节课为大家讲解一下网页设计中的一些案例，谢谢观看。