第六课 我的网页 教案 2022—2023学年湘美版初中美术九年级下册

第6课 我的网页 教学目标： 能够了解构成网页风格的基本元素及基本作用。了解网页的常见风格和创意手法，学习运用网页版面结构搭配的基本技巧，尝试设计体现个性的网页图标及自己的个人网页。 重点：了解网页绘制步骤以及要注意的问题。 难点： 设计简单的网页。 1. 赏析导入 网页的设计手法其实它是可以变化多样的，首先我们来分享几个风格不同的网页设计作品，今天我们作为网页设计师，可以从优秀的网页设计中获得一些灵感。在欣赏的过程中思考一个问题，网页设计吸引人的地方在哪里？是图片还是对内容的布局或是其他？ 赏析三维风格、网格系统、暗调高亮风、形式感、极简风网页设计。 问：看了这些网页设计，你认为网页设计最吸引人的地方在哪？（自由回答）统一的风格 小结：网页设计的表现大多体现在配色、排版以及字体三方面，这三样结合得当都能制作出漂亮的网站。一个好的网站不一定要太多花哨的东西，比如使用极简网页也是可以很迷人的。今天我们就要学习以简约、干净为主要风格的网页。 2. 主题与色彩 正如我们知道的，每种颜色都带有一种情感色彩，比如红色代表激情，这就解释了为何一种颜色的搭配只适用于一个设计，而不一定适应与另外的主题。当你改变配色方案时，它就与模板的整体感觉不搭。 说说你们选的主题可以用什么颜色做为主要基调，为什么？ 有了主体色后我们就要开始学习色彩搭配 （一）精致的颜色 1.让设计快速出“彩”的方法 A、黑白灰主色调+亮色辅色； 通过提取出的颜色我们可以看到，上面的页面设计中采用了黑白灰做为主色调，使用亮黄色为辅色，虽然亮黄色为辅色，但是人们第一眼往往会注意亮黄色，而设计师把文字信息的字体颜色选为亮黄色也是对信息的强调。 B、选择图片主色调作为整体画面的主色调； 梵高美术馆官网，配色取自他的作品，温暖的黄色、丰富的蓝色配合清爽的绿色。 C、使用的颜色不要超过4种。 通过上面的案例我们发现，这些设计师所用的颜色都不会超过4种，而做为简约设计有时候只使用2种颜色，甚至只用黑白灰的变化来进行设计。 2.看似很复杂的颜色搭配其实很简单 A、  统一明度和饱和度； 下图中的明度和饱和度非常协调，既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色，但是整个画面也是非常协调统一的，我们现在分析一下画面的颜色。 B、控制颜色的层次； 所谓颜色的层次我们依然用小牛电动车的图来分析，可以看到所有的颜色都提取出来后圆形中的颜色。 这样我们很容易的就能看出来颜色的层次，灰色系有7个层次，而红色系有4个层次，正因为这样的层次让整个设计显得非常丰富，并且有立体感而不至于太“平”。 活动一 选择与主题相符的色彩 根据小组主题，讨论色彩搭配， 参考色彩搭配文案，选择2~4种颜色的卡纸作为网页设计的色彩方案。 说说配色思路 3. 排版与构图 布局是网站的基石。它最重要的作用就是让文字和内容以最合理、最具创意的方式呈现。 下面是几个版式设计的技巧： 1.对齐——最基础但也最重要 上面的设计师也是用的中间对齐方式，大写的V视觉冲击力非常强，而左上角的Logo信息和右下角的信息成为对角形式，让人感觉画面非常平衡而又稳定。 下面的图例是左右排版方式： 由此我们总结出对齐的版式的几个特点和作用： A、视觉聚焦； B、强化页面统一性和条理性； C、对视觉的导向作用。 2.对比——让画面不再平凡 作为简洁乃至极简的设计来说，对比非常重要，对比可以让人非常快速的阅读到重要信息，也可以让版面的设计有节奏感，让画面看起来不乏味。 上面的设计是小牛N1的设计，这两个设计是典型的左右排版。右侧放商品图片，左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据图片的属性来决定的。 上图是文案与图片的面积对比。 这个设计则与上图相反，文案面积很大，但是我们的视觉中心依然是手表，因为实物的照片往往会更加吸引人，这就是对比。还有一个对比不知道大家看出来没有，就是文案里的对比，标题选用大而粗的字体，其他信息则放的很小，大能又快又准的看清标题的内容，另外因为字体大小和粗细的变化让人感觉有节奏感。（除了图文对比还有什么对比） 3. 有“气质”的留白 在简约设计里的留白非常重要，现在国外很多设计师用留白法，但我觉得我们中国人才是留白的“老祖宗”，国画就是非常典型的例子。 下面我们来做个对比，我们把图上的一些不必要的复杂背景和文案给去除。增加留白的面积，让主要信息展示的更加清晰和明确。 下面是其他一些案例我们可以试着自己分析一下，注意留白不一定就是白色。 三、考究的字体 文字在网页设计中的位置极其重要，它承担着直观信息传播的用途，字体的选择更为讲究。 1.选用符合整体设计风格的字体 字体也是有自己的外貌、性格和风格的，当字体的风格与设计完美的融合在一起的时候，会给整个设计加分不少。 我们