初中美术湘美版九年级下册第6课 我的网页教案及反思

这是一份初中美术湘美版九年级下册第6课 我的网页教案及反思，共6页。教案主要包含了考究的字体等内容，欢迎下载使用。

教学目标：
能够了解构成网页风格的基本元素及基本作用。了解网页的常见风格和创意手法，学习运用网页版面结构搭配的基本技巧，尝试设计体现个性的网页图标及自己的个人网页。
重点：了解网页绘制步骤以及要注意的问题。
难点： 设计简单的网页。
赏析导入
网页的设计手法其实它是可以变化多样的，首先我们来分享几个风格不同的网页设计作品，今天我们作为网页设计师，可以从优秀的网页设计中获得一些灵感。在欣赏的过程中思考一个问题，网页设计吸引人的地方在哪里？是图片还是对内容的布局或是其他？
赏析三维风格、网格系统、暗调高亮风、形式感、极简风网页设计。
问：看了这些网页设计，你认为网页设计最吸引人的地方在哪？（自由回答）统一的风格
小结：网页设计的表现大多体现在配色、排版以及字体三方面，这三样结合得当都能制作出漂亮的网站。一个好的网站不一定要太多花哨的东西，比如使用极简网页也是可以很迷人的。今天我们就要学习以简约、干净为主要风格的网页。
主题与色彩
正如我们知道的，每种颜色都带有一种情感色彩，比如红色代表激情，这就解释了为何一种颜色的搭配只适用于一个设计，而不一定适应与另外的主题。当你改变配色方案时，它就与模板的整体感觉不搭。
说说你们选的主题可以用什么颜色做为主要基调，为什么？
有了主体色后我们就要开始学习色彩搭配
（一）精致的颜色
1.让设计快速出“彩”的方法
A、黑白灰主色调+亮色辅色；
通过提取出的颜色我们可以看到，上面的页面设计中采用了黑白灰做为主色调，使用亮黄色为辅色，虽然亮黄色为辅色，但是人们第一眼往往会注意亮黄色，而设计师把文字信息的字体颜色选为亮黄色也是对信息的强调。
B、选择图片主色调作为整体画面的主色调；
梵高美术馆官网，配色取自他的作品，温暖的黄色、丰富的蓝色配合清爽的绿色。
C、使用的颜色不要超过4种。
通过上面的案例我们发现，这些设计师所用的颜色都不会超过4种，而做为简约设计有时候只使用2种颜色，甚至只用黑白灰的变化来进行设计。
2.看似很复杂的颜色搭配其实很简单
A、 统一明度和饱和度；
下图中的明度和饱和度非常协调，既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色，但是整个画面也是非常协调统一的，我们现在分析一下画面的颜色。
B、控制颜色的层次；
所谓颜色的层次我们依然用小牛电动车的图来分析，可以看到所有的颜色都提取出来后圆形中的颜色。
这样我们很容易的就能看出来颜色的层次，灰色系有7个层次，而红色系有4个层次，正因为这样的层次让整个设计显得非常丰富，并且有立体感而不至于太“平”。
活动一
选择与主题相符的色彩
根据小组主题，讨论色彩搭配，
参考色彩搭配文案，选择2~4种颜色的卡纸作为网页设计的色彩方案。
说说配色思路
排版与构图
布局是网站的基石。它最重要的作用就是让文字和内容以最合理、最具创意的方式呈现。
下面是几个版式设计的技巧：
1.对齐——最基础但也最重要
上面的设计师也是用的中间对齐方式，大写的V视觉冲击力非常强，而左上角的Lg信息和右下角的信息成为对角形式，让人感觉画面非常平衡而又稳定。
下面的图例是左右排版方式：
由此我们总结出对齐的版式的几个特点和作用：
A、视觉聚焦；
B、强化页面统一性和条理性；
C、对视觉的导向作用。
2.对比——让画面不再平凡
作为简洁乃至极简的设计来说，对比非常重要，对比可以让人非常快速的阅读到重要信息，也可以让版面的设计有节奏感，让画面看起来不乏味。
上面的设计是小牛N1的设计，这两个设计是典型的左右排版。右侧放商品图片，左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据图片的属性来决定的。
上图是文案与图片的面积对比。
这个设计则与上图相反，文案面积很大，但是我们的视觉中心依然是手表，因为实物的照片往往会更加吸引人，这就是对比。还有一个对比不知道大家看出来没有，就是文案里的对比，标题选用大而粗的字体，其他信息则放的很小，大能又快又准的看清标题的内容，另外因为字体大小和粗细的变化让人感觉有节奏感。（除了图文对比还有什么对比）
3. 有“气质”的留白
在简约设计里的留白非常重要，现在国外很多设计师用留白法，但我觉得我们中国人才是留白的“老祖宗”，国画就是非常典型的例子。
下面我们来做个对比，我们把图上的一些不必要的复杂背景和文案给去除。增加留白的面积，让主要信息展示的更加清晰和明确。
下面是其他一些案例我们可以试着自己分析一下，注意留白不一定就是白色。
三、考究的字体
文字在网页设计中的位置极其重要，它承担着直观信息传播的用途，字体的选择更为讲究。
1.选用符合整体设计风格的字体
字体也是有自己的外貌、性格和风格的，当字体的风格与设计完美的融合在一起的时候，会给整个设计加分不少。
我们来仔细观察一下眼镜、相机与字体（文案）的关系。眼镜和相机的款式都是非常复古的，有种民国时代的感觉，因此设计师选用了一种仿古字体来配合图案，给人非常统一的感觉，配上精彩的文案就会给人一个民国时期的场景，这也可以叫带入感。如果我们把图中的字体换成非常现代的艺术字会怎么样？
换了字体后可以看出，虽然每个字体单独看都不错，但是与配图放在一起就感觉非常的不搭，立刻失去了文案和图片想要传达的那种“工匠”的感觉。
自主分析：
英文的选择也是如此，看上图，英文Animal Prints是动物图案的意思，你会发现右侧的女性人物应该是穿着一条连衣裙的，因此我猜测这是关于女性服装的一个设计，而且是属于比较成熟的那种（看模特身材就能看出来），因此在选择字体的时候应该选择偏细腻柔美的字体，而不是黑粗体。
2.选用字形结构简单的字体
这个设计可以看到整体就是以文字为主来组合设计的，无论英文还是中文，都使用了字形非常简单的字体，加上字体本身的大小粗细使画面非常有节奏感，而且不会觉得全是字。从这我们可以引出另一个理论，在某些情况下字体既是信息传达的载体，又是一种艺术图形。
下面来个反面教材：
这里我们先不说这个专题设计的构图、颜色，只说一下文字，除了9.9元比较明显的突出了卖点以外，其他基本都非常杂乱，字体的字形被改的面目全非。
3.“牛叉”的中文字体
每种字体都有自己的历史背景，例如隶书，平民是不能用的，魏碑是专门刻在碑上的字体等。而且中文也是唯一一种成为艺术的文字——书法。
英文也可以设计成书法体，表现更有张力，更加符合勇士的感觉。
活动二：
小组讨论根据网页版面设计
用选择的卡纸进行拼贴
请小组代表来讲一讲你们设计的创意思路。
活动三：
根据卡纸设计的版面，用ps或者其他的绘图软件进行创意设计
超链接
新建FrntPage网站建立空白网页，插入图片→选择自选图形（格式填充和直线都改成无填充颜色）→选中需要超链接的透明自选图案按“插入”→超链接→选择要链接的第二层网页保存即可。
活动四：
用FrntPage小组合作完成一个网页设计
展示与评价
总结
网页设计还有许多元素需要我们去考虑设计，比如图标、导航、动画、音乐等，而简约的设计是设计发展进程中的必然结果，这是一种优化的过程，也就是做减法，把不必要的，干扰信息传达的元素删除掉，保留最基本最为有用的东西，我们今天也从排版、颜色、字体三个方面来具体的讲解了怎样做简约的网页设计，其归根结底，好的设计的基本原理是不会变的。