网页设计的教学设计

网页的设计教学目标：1、掌握网页元素和网页构件的使用：2、能进行简单的网页设计；教学重点：网页构件的使用；网页设计；教学难点：网页的设计；课时：第1课时导入：今天我们进入第六章网页的设计与制作的学习，一个成功的网站不仅仅在于它的内容的多少，功能的交互功能多强，设计也是关键的一项，它决定了网站的艺术美是否能吸引浏览者的眼球。新课：一、网页元素的组成打开2007年全国中小学信息技术大赛中获奖作品《鄱阳湖白鹤》，让学生观看并总结网页的组成元素有？文字、图片、动画、声音、超链接等。一般情况下，网页都应该具备这三种元素，但是也有的网页只有其中的两种，甚至只有一种。如有的网页就是为了展示一篇文章，那么这个网页就没有必要放置图像；有的网页只用于显示一幅大尺寸的照片，也可以没有文字说明；而有的网页纯粹就是提供资料，就不必设置超链接，这样，这个网页就成为网络中某一个信息链的“终点”，即只有别的网页链接它。过渡：同学们想不想自己也做个网站呢？想做网站前提则是先设计网站，规划网站的主题，画出草图。二、网页设计现在给大家5分钟的时间设计一个学校网站的主页，内容包括网页的主题、思考内容Angel网页Music网页怎样突出的网页的主题网页的框架结构及特点以什么色调为主及作用图、文有何讲究网页版式设计的视觉因素为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从而影响人们的思想和行为，我们必须按照人的视觉生理和心理特征，去设计我们的网页版式，以达到最佳的设计诉求。我们先来看一下人的视线移动规律：人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。视线的变化习惯于从左到右，从上到下和顺时针方向运动。当视线沿既不水平，也不垂直的斜线方向移动时，在水平方向上下约45o的范围视线为从左到右移动，在垂直方向左右约45o的范围内，视线为从上到下移动。符合视觉规律文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布，除非一些有特殊设计要求的版式或书法字体的版式。同时，页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断地浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。2．重要信息置于“最佳视觉区域”在进行网页版式设计时，要考虑将最重要的信息或视觉流程的停留上安排在注目价值高的位置，这就是“最佳视觉区域”。由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。版面中的不同区域会产生不同的注目程度，给人的心理感受也不同。它们给人的心理感受也是不同的；上部有轻快、上升、积极、愉悦之感；下部有沉重、稳定、压抑、消沉之感；左侧感觉轻松、舒展、自由、主动；右侧感觉庄重、局限、拘谨、被动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程的停留点安排在页面的“最佳视域”内。3、避免视觉疲劳1．限制网页长度尽可能将网页限制在1屏以内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般控制在1—3屏，尽量不超过5屏。2．文字大小适中、行距合理在网页设计时应提供浏览者定制字体大小的功能。3．位置的一致减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。4．适量安排多媒体元素网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多媒体元素，并注意主次关系。5．合理配色如果将大篇幅极亮的文字设计在极暗的背景上，容易因视觉长时间过分紧张而产生疲劳。因此应注意网页的配色，使其适合浏览者长期浏览。网页设计的构成要素（一）、版式设计网页的版式设计，就是将文字、图形图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围内，运用造型元素和形式原理进行视觉的关联，从而将涉及意图以视觉形式表现出来。版式设计将各元素组合配置，使页面内容一目了然，并获得悦目的视觉效果。在设计时，需要运用统一、对比、对称、均衡、节奏、韵律等形式原理，来构造出和谐、流畅、自然的网页界面。（展示两幅体现出对比和调和的网页的页面，让学生体会。）网页板式构成的类型：1、骨骼型也称栏型，是一种规范的、理性的设计形式，类似于报刊的板式。常见的骨骼型有竖向的和横向的通栏、双栏、三栏、四栏等，这种版式给人以和谐、理性的美。这种版式常用于公司网站的设计。（展示页面，学生意会）2、国字型口字型、同字型、回字形都归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、导航以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。（展示页面，学生根据设计理念分析优缺点，重点分析）3、框架型有左右框架型、上下框架型和综合框架型，这种版式常用语功能型的网站，如邮箱、论坛、博客等（展示页面，学生意会）4、中轴型沿页面的中轴将图片、文字做水平或垂直方向的排列，给人稳定、平静、含蓄、舒畅的感觉。（展示页面，学生意会）5、“匡”型布局或“T”型布局可归于此类，“匡”型布局中，常见的类型有上面是标题与导航，左侧是展示图片的类型和最上面是标题及广告，左侧是导航链接的类型。“T”布局就是指页面顶部为横条网站标志与广告条，下方左面为主菜单，右面显示内容的布局，因为菜单背景色彩较深，整体效果类似英文字母“T”，我们称之为“T”形布局。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人感觉枯燥无味。6、图片或文字在页面上作流线的编排构成，产生韵律与节奏。焦点型、满版型、分割型、拐角型、流线型、对称型等等。（展示页面，学生意会）（二）、色彩搭配页面的色彩设计，直接影响阅读者的观赏兴趣，彩色的网页总是胜于单色的网页，网页也是一件艺术品，因为它既要求文字的优美流畅，有要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，是页面更加生动。所以我们在制作时一定要先确定网站的主题色，以下介绍几种色调。1、同类色比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。2、暖色，如图中的黄色，橙色，红色，紫色等都属于暖色系列。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。暖色跟黑色调和可以达到很好的效果。高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。冷色，如图中的绿色，蓝色，蓝紫色等等都属于冷色系列。冷色系亮度越高，其特性越明显，能够使人的心情平静，清爽。冷色一般跟白色调和可以达到一种很好的效果。3、冷暖色与此同时，在一个环境、区域范围里，色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下，黄色可以说这个时候是呈暖色，而出现在桔红、朱红、深红这几个区域环境下，黄色可以说在这个时候是呈冷色。同样的，蓝色相对绿色是冷色，紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求，环境协调度的需要等等做相应的搭配调整。色相对比色相对比是指因色相之间的差别形成的对比。要增强色彩的表现力，当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。明度对比明度对比是色彩明暗程度的对比，也称色彩的黑白度对比。两种不同明度的色彩并列时，会使明色更亮，而暗色更暗。将同明度的灰色置于白底和黑底上，会感觉黑底上的灰色较亮；而白底上的灰色明度较暗。纯度对比纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。冷暖对比冷暖对比是指不同色彩之间的冷暖差别形成的对比。色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。面积对比是指两个或更多色块的对比，这是一种多与少、大与小之间的对比。面积的对比，可以是中高低明度差的面积变化及中高低纯度差的面积变化。同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。同种色的调和同种色的调和是相同色相、不同明度和纯度的色彩调和，使之产生秩序的渐进，在明度、纯度的变化上，为了不至于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其它颜色做点缀。该页面使用了同种色的绿色系，淡绿、草绿、墨绿通过明度、纯度的微妙变化产生缓和的节奏美感。色彩的心理效应色彩给人的感受是丰富而奇妙的。色彩的心理效应源于人们的生活经验。每个人对相同的网页色彩的感受可能有差异，不同的色彩对人产生的心理效应更不同。不同地域、文化、年龄、性格、兴趣等异同因素，是决定色彩感受异同的根源。在这里从人类社会数年来的发展所有的高级情感的角度来谈一下不同色彩的象征意义和心理暗示。网页主色调是绿色，铺盖面积比较大。由于高亮度的颜色会给人过轻、没分量的感觉，因此设计师采用起辅助效果的黑色，镇住轻飘的感觉，起到了很好的平衡作用。如果黑色出现在左上角，会和高亮度的绿色产生很强的对比，不适合以健康为主题的表达，设计师把深绿色放置在右上角，形成色彩均衡的做法是十分明智的。主色调是掌握整个网页色彩气氛的主要因素，而辅色面积小，起强调或缓冲调和的作用。起强调作用的辅色是空间中动感和活力的来源，还可以因其色彩“点”的作用使主色在整个网页中得到连贯。辅色一般为醒目突出的色彩。网页配色准则色彩和所表达的内容气氛相适合，选择色彩要和你网页的内涵相关联。所使用的色彩产生的联想不能与所表达的基调相违背。遵循色彩适应性原则，避免可能发生的视觉混淆。配色的运用因人而异，主要为追求色彩的和谐与稳定。背景与文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景颜色可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，让人一目了然。为了让浏览者对网站留有深刻的印象，有些网站设计了独特的背景1、同类色调同类色调能增强网页的统一效果。网页中基调有大面积的同类色产生，改变同类色彩的明度、纯度构成千变万化的色彩效果。2、蓝色调强调精密性、稳重型、科技型的网站，多采用蓝色调。因为深蓝色传达清高的感情色彩，是科技时代的代表色彩。（附网页，学生意会）3、动感色调娱乐、体育、儿童网站等多数需要表现出活泼、动感的视觉效果，尽量是用鲜艳的颜色会稳妥些，避免使用严肃、庄重的黑色，加入一些白色，会是页面具有单纯、明亮的感觉。（附网页，学生意会）4、时尚色调表现时尚感，可以采用冷色调，并搭配少量暖色作为点缀，当页面色彩过于丰富时，可以通过白色来缓解。（附网页，学生意会）5、高雅色调这类网站可用紫色、褐色、土黄色等来营造高雅氛围。对比色的调和对比色的调和方法有：提高或降低对比色的纯度，在对比色之间插入分割色（金、银、黑、白、灰等），采用双方面积大小不同的处理方法，对比色之间加入相近的类似色。黑色在绘画和艺术设计中它是可以与任何颜色相配的极色。它体现了高贵、高雅、消极、悲伤、沉稳、沉闷、死亡、邪恶、明确和坚定。网页设计中黑色的使用常常能达到四两拨千斤的作用，使与之邻近的界面信息成为视觉的焦点。白色与黑色相对的颜色，同样也是极色，可以与任何颜色相配。它常给人以“纯洁的、完美的、正义的、不可触及的、不可接近的、不可解释的、整洁的、神圣的、空洞的、无限的、沉默的”等心理暗示。灰色也是一种可以与任何颜色相配的颜色