《第六课我的网页》优质课教案下载

《第六课我的网页》优质课教案下载

赏析导入

网页的设计手法其实它是可以变化多样的，首先我们来分享几个风格不同的网页设计作品，今天我们作为网页设计师，可以从优秀的网页设计中获得一些灵感。在欣赏的过程中思考一个问题，网页设计吸引人的地方在哪里？是图片还是对内容的布局或是其他？

赏析三维风格、网格系统、暗调高亮风、形式感、极简风网页设计。

问：看了这些网页设计，你认为网页设计最吸引人的地方在哪？（自由回答）统一的风格

小结：网页设计的表现大多体现在配色、排版以及字体三方面，这三样结合得当都能制作出漂亮的网站。一个好的网站不一定要太多花哨的东西，比如使用极简网页也是可以很迷人的。今天我们就要学习以简约、干净为主要风格的网页。

主题与色彩

正如我们知道的，每种颜色都带有一种情感色彩，比如红色代表激情，这就解释了为何一种颜色的搭配只适用于一个设计，而不一定适应与另外的主题。当你改变配色方案时，它就与模板的整体感觉不搭。

说说你们选的主题可以用什么颜色做为主要基调，为什么？

有了主体色后我们就要开始学习色彩搭配

（一）精致的颜色

1.让设计快速出“彩”的方法

A、黑白灰主色调+亮色辅色；

通过提取出的颜色我们可以看到，上面的页面设计中采用了黑白灰做为主色调，使用亮黄色为辅色，虽然亮黄色为辅色，但是人们第一眼往往会注意亮黄色，而设计师把文字信息的字体颜色选为亮黄色也是对信息的强调。

B、选择图片主色调作为整体画面的主色调；

梵高美术馆官网，配色取自他的作品，温暖的黄色、丰富的蓝色配合清爽的绿色。

C、使用的颜色不要超过4种。

通过上面的案例我们发现，这些设计师所用的颜色都不会超过4种，而做为简约设计有时候只使用2种颜色，甚至只用黑白灰的变化来进行设计。

2.看似很复杂的颜色搭配其实很简单

A、? 统一明度和饱和度；

下图中的明度和饱和度非常协调，既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色，但是整个画面也是非常协调统一的，我们现在分析一下画面的颜色。

B、控制颜色的层次；

所谓颜色的层次我们依然用小牛电动车的图来分析，可以看到所有的颜色都提取出来后圆形中的颜色。

这样我们很容易的就能看出来颜色的层次，灰色系有7个层次，而红色系有4个层次，正因为这样的层次让整个设计显得非常丰富，并且有立体感而不至于太“平”。

活动一

选择与主题相符的色彩