1、网页的设计教学目标：1、掌握网页元素和网页构件的使用：2、能进行简单的网页设计；教学重点：网页构件的使用；网页设计； 教学难点：网页的设计； 课时：第 1 课时导入： 今天我们进入第六章网页的设计与制作的学习，一个成功的网站不仅仅在于它的内容的多少，功能的交互功能多强，设计也是关键的一项，它决定了网站的艺术美是否能吸引浏览者的眼球。新课：一、网页元素的组成打开 2007 年全国中小学信息技术大赛中获奖作品鄱阳湖白鹤 ，让学生观看并总结网页的组成元素有？文字、图片、动画、声音、超链接等。一般情况下，网页都应该具备这三种元素，但是也有的网页只有其中的两种，甚至只有一种。如有的网页就是为了展示一篇文
2、章，那么这个网页就没有必要放置图像；有的网页只用于显示一幅大尺寸的照片，也可以没有文字说明；而有的网页纯粹就是提供资料，就不必设置超链接，这样，这个网页就成为网络中某一个信息链的“终点”，即只有别的网页链接它。过渡：同学们想不想自己也做个网站呢？想做网站前提则是先设计网站，规划网站的主题，画出草图。二、网页设计现在给大家 5 分钟的时间设计一个学校网站的主页，内容包括网页的主题、思考内容 Angel 网页 Music 网页怎样突出的网页的主题网页的框架结构及特点以什么色调为主及作用图、文有何讲究网页版式设计的视觉因素为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从而影响人们的思想和
3、行为，我们必须按照人的视觉生理和心理特征，去设计我们的网页版式，以达到最佳的设计诉求。我们先来看一下人的视线移动规律： 人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。 视线的变化习惯于从左到右，从上到下和顺时针方向运动。 当视线沿既不水平，也不垂直的斜线方向移动时，在水平方向上下约 45o 的范围视线为从左到右移动，在垂直方向左右约 45o 的范围内，视线为从上到下移动。符合视觉规律 文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布，除非一些有特殊设计要求的版式或书法字体的版式。同时，页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断
4、地浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。 2重要信息置于“最佳视觉区域”在进行网页版式设计时，要考虑将最重要的信息或视觉流程的停留上安排在注目价值高的位置，这就是“最佳视觉区域” 。由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。版面中的不同区域会产生不同的注目程度，给人的心理感受也不同。它们给人的心理感受也是不同的；上部有轻快、上升、积极、愉悦之感；下部有沉重、稳定、压抑、消沉之感；左侧感觉轻松、舒展、自由、主动；右侧感觉庄重、局限、拘谨、被动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程的停留点安排在页面的
5、“最佳视域”内。3、避免视觉疲劳 1限制网页长度尽可能将网页限制在 1 屏以内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般控制在 13 屏，尽量不超过 5 屏。 2文字大小适中、行距合理在网页设计时应提供浏览者定制字体大小的功能。 3位置的一致减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。 4适量安排多媒体元素网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多媒体元素，并注意主次关系。 5合理配色如果将大篇幅极亮的文字设计在极暗的背景上，容易因视觉长时间过分紧张而产生疲劳。因此应注意网页的配色，使其适合浏览者长期浏
6、览。网页设计的构成要素（一） 、版式设计网页的版式设计，就是将文字、图形图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围内，运用造型元素和形式原理进行视觉的关联，从而将涉及意图以视觉形式表现出来。版式设计将各元素组合配置，使页面内容一目了然，并获得悦目的视觉效果。在设计时，需要运用统一、对比、对称、均衡、节奏、韵律等形式原理，来构造出和谐、流畅、自然的网页界面。 （展示两幅体现出对比和调和的网页的页面，让学生体会。 ）网页板式构成的类型：1、骨骼型 也称栏型，是一种规范的、理性的设计形式，类似于报刊的板式。常见的骨骼型有竖向的和横向的通栏、双栏、三栏、四栏等
7、，这种版式给人以和谐、理性的美。这种版式常用于公司网站的设计。 （展示页面，学生意会）2、国字型 口字型、同字型、回字形都归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、导航以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。 （展示页面，学生根据设计理念分析优缺点，重点分析）3、框架型 有左右框架型、上下框架型和综合框架型，这种版式常用语功能型的网站，如邮箱、论坛、博客等（展示页面，学生意会）4、中轴型 沿页面的中轴将图片、文字做水平或
8、垂直方向的排列，给人稳定、平静、含蓄、舒畅的感觉。 （展示页面，学生意会）5、 “匡 ”型布局或“T”型 布局可归于此类， “匡”型布局中，常见的类型有上面是标题与导航，左侧是展示图片的类型和最上面是标题及广告，左侧是导航链接的类型。 “T”布局就是指页面顶部为横条网站标志与广告条，下方左面为主菜单，右面显示内容的布局，因为菜单背景色彩较深，整体效果类似英文字母“T”，我们称之为“T”形布局。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人感觉枯燥无味。 6、 图片或文字在页面上作流线的编排构成，产生韵律与节奏。焦点型、满版
9、型、分割型、拐角型、流线型、对称型等等。 （展示页面，学生意会）（二） 、色彩搭配页面的色彩设计，直接影响阅读者的观赏兴趣，彩色的网页总是胜于单色的网页，网页也是一件艺术品，因为它既要求文字的优美流畅，有要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，是页面更加生动。所以我们在制作时一定要先确定网站的主题色，以下介绍几种色调。1、同类色比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。第一眼看上去给人温柔、雅致、安宁的心
10、理感受，便可知该组同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。2、暖色，如图中的黄色，橙色，红色，紫色等都属于暖色系列。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。暖色跟黑色调和可以达到很好的效果。高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。冷色，如图中的绿色，蓝色，蓝紫色等等都属于冷色系列。冷色系亮度越高，其特性越明显，能够使人的心情平静，清爽。冷色一般跟白色调和可以达到一种很好的效果。 3、冷暖色与此同时，在一个环境、区域范围里，色彩的属
11、性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下，黄色可以说这个时候是呈暖色，而出现在桔红、朱红、深红这几个区域环境下，黄色可以说在这个时候是呈冷色。同样的，蓝色相对绿色是冷色，紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求，环境协调度的需要等等做相应的搭配调整。 色相对比色相对比是指因色相之间的差别形成的对比。要增强色彩的表现力，当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。 明度对比明度对比是色彩明暗程度的对比，也称色彩的黑白度对比。两种不同明度的色彩并列时，会使明色更亮，而暗色更暗。将
12、同明度的灰色置于白底和黑底上，会感觉黑底上的灰色较亮；而白底上的灰色明度较暗。 纯度对比纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。 冷暖对比冷暖对比是指不同色彩之间的冷暖差别形成的对比。色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。 面积对比是指两个或更多色块的对比，这是一种多与少、大与小之间的对比。面积的对
13、比，可以是中高低明度差的面积变化及中高低纯度差的面积变化。同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。 同种色的调和同种色的调和是相同色相、不同明度和纯度的色彩调和，使之产生秩序的渐进，在明度、纯度的变化上，为了不至于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其它颜色做点缀。该页面使用了同种色的绿色系，淡绿、草绿、墨绿通过明度、纯度的微妙变化产生缓和的节奏美感。色彩的心理效应色彩给人的感受是丰富而奇妙的。色彩的心理效应源于人们的生活经验。每个人对相同的网页色彩的感受可能有差异，不同的色彩对人产生的心理效应更不同。不同地域、文化、年龄、性格、兴趣等异同因素，是决定色
14、彩感受异同的根源。在这里从人类社会数年来的发展所有的高级情感的角度来谈一下不同色彩的象征意义和心理暗示。 网页主色调是绿色，铺盖面积比较大。由于高亮度的颜色会给人过轻、没分量的感觉，因此设计师采用起辅助效果的黑色，镇住轻飘的感觉，起到了很好的平衡作用。如果黑色出现在左上角，会和高亮度的绿色产生很强的对比，不适合以健康为主题的表达，设计师把深绿色放置在右上角，形成色彩均衡的做法是十分明智的。 主色调是掌握整个网页色彩气氛的主要因素，而辅色面积小，起强调或缓冲调和的作用。起强调作用的辅色是空间中动感和活力的来源，还可以因其色彩“点”的作用使主色在整个网页中得到连贯。辅色一般为醒目突出的色彩。网页配
15、色准则色彩和所表达的内容气氛相适合，选择色彩要和你网页的内涵相关联。所使用的色彩产生的联想不能与所表达的基调相违背。遵循色彩适应性原则，避免可能发生的视觉混淆。配色的运用因人而异，主要为追求色彩的和谐与稳定。 背景与文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景颜色可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，让人一目了然。为了让浏览者对网站留有深刻的印象，有些网站设计了独特的背景1、同类色调 同类色调能增强网页的统一效果。网页中基调有大面积的同类色产生，改变同类色彩的明度、纯度构成千变万化的色彩效果。2、蓝色调 强调精
16、密性、稳重型、科技型的网站，多采用蓝色调。因为深蓝色传达清高的感情色彩，是科技时代的代表色彩。 （附网页，学生意会）3、动感色调 娱乐、体育、儿童网站等多数需要表现出活泼、动感的视觉效果，尽量是用鲜艳的颜色会稳妥些，避免使用严肃、庄重的黑色，加入一些白色，会是页面具有单纯、明亮的感觉。 （附网页，学生意会）4、时尚色调 表现时尚感，可以采用冷色调，并搭配少量暖色作为点缀，当页面色彩过于丰富时，可以通过白色来缓解。 （附网页，学生意会）5、高雅色调 这类网站可用紫色、褐色、土黄色等来营造高雅氛围。 对比色的调和对比色的调和方法有：提高或降低对比色的纯度，在对比色之间插入分割色（金、银、黑、白、灰
17、等） ，采用双方面积大小不同的处理方法，对比色之间加入相近的类似色。黑色在绘画和艺术设计中它是可以与任何颜色相配的极色。它体现了高贵、高雅、消极、悲伤、沉稳、沉闷、死亡、邪恶、明确和坚定。网页设计中黑色的使用常常能达到四两拨千斤的作用，使与之邻近的界面信息成为视觉的焦点。白色与黑色相对的颜色，同样也是极色，可以与任何颜色相配。它常给人以“纯洁的、完美的、正义的、不可触及的、不可接近的、不可解释的、整洁的、神圣的、空洞的、无限的、沉默的”等心理暗示。灰色也是一种可以与任何颜色相配的颜色。灰色的色彩意象，在商业设计中，灰色具有柔和，高雅的意象，而且属于中间性格，男女皆能接受，所以灰色也是永远流行的
18、主要颜色，使用灰色时，大多利用不同的层次变化组合或他配其他色彩，才不会过于素、沉闷，而有呆板，僵硬的感觉。 红色在绘画和艺术设计的范畴里，红色往往给人以力量、生活的愉悦、高强度的感觉。红色传达着热量、魅力、友好、喜庆和个人魅力。红色有些时候用来做心理上的警示。 2.蓝色蓝色在视觉上往往给人一种被动、静谧、深邃、寒冷、潮湿、谨慎、忧郁、宗教、科技、冷静与理智的感觉。瑞士的两个色彩心理学专家对蓝色已有以下定论: 一种透彻的、女性化的颜色，可以制造安静、松弛的气氛。反之，它会引起人梦幻、童话、整洁、清爽的感觉。3.黄色 人们常常通过黄色联想到:太阳、温暖、自由、年轻、快乐、开放、奇特、乐观等等。人们
19、使用黄色往往是在心理上寻求一种朝气和活力、自主、自由不被拘束、幸运而舒适的感觉。 4.绿色绿色常使人联想起自然、和谐、安静、坚定和生命。绿色具有黄色和蓝色的某些特征，色环上绿色偏近黄色时，绿色就变得温暖、稚嫩、活泼、健康而无危害性。如果再加进一些白色，就会给人以一种女性的柔和与轻盈的感觉。 5.橙色橙色也像绿色一样具有其他两种原色的特征。橙色常给人的感觉是:快乐、开放、大方、亲密、直接、热烈、温暖、秋天、无拘束、有活力和感情洋溢。人的行动在橙色的氛围里没有任何拘束，因此橙色很大程度上代表了温暖和真挚的感情。 6.紫色紫色令人联想到昏暗、神秘、深刻、内向、高贵、悲伤、禁止、魅力、暧昧、不可靠等等
20、。它也同绿色、橙色一样，具有相邻的两个原色的部分特征。紫色越深，则反映出的效果越呆板、严格、不近人情，并给人以强烈的神秘感。 7.棕色它常被人视为一种坚固的、诚实的、亲切、稳定和安全的颜色。它让人联想到脚下的土地、结实耐用的物件、动物皮毛的温暖、几近于平淡和无聊、随和、豪放、古典与怀旧、爱的严肃和值得信赖。（三） 、文字的编排与设计要达到网页文字传达的有效性，必须重视文字编辑的整体效果，是网页文字能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的转世变化，使人易认、易懂、易读。网页文字的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容和表达信息的主题。网页字体与字体编排在网页设计中，字
21、体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。网页文字设计技巧 1.提高可读性 （1）让你想表达的内容清晰、醒目，让浏览者一开始就可以明白你的意思。（2）避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦。（3）注意恰当的选择你所需要的字体，适当采用虚实对比、大小对比。（4）注意文字编排方向，注意安排阅览者的视线，适当运用直线与曲线编排。（5）根据视觉流程的原理，通常将重点放在右边。 2. 精于位置 （1）注意文字的对齐、适当拉来间距、适当安排行距。（2）注意图文交错，既不要影响图形的观看，也不
22、能影响文字的阅览。（3）文字不要顶天立地，也不要支持边角 3. 营造视觉美感 文字作为网页形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。注意改变文字的位置和大小，适当调节字间距。对于段落文字的处理应注意，字体加大后，段落之间的距离也应该随之调整。小字体同样应用这一规则，不过是相反的。 4.富于创造性设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样
23、才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。加入感受在字体里面，对文字的大小、间距、透明度做些调整，就会是完全不同的效果了。差别就在这里，也许只是一点小改动，但是需要你思考的却更多。有时候对文字的笔画做特殊的加工处理往往会产生一些意想不到的效果。而这样的处理是带有创造性的，同时人性化的味道也会更浓一些。这是电脑字体所无法替代的效果，带给观看者的感受自然会要强烈的多。网页文字设计方法 笔画突变笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和特征。 添加形象添加形象主要是通过在汉字局部笔画上添加与汉字表义相关的图像或图形来增加汉字的
24、表意功能。将某个笔画换成有意义或有趣地图形，会使整个视觉活跃起来，海尔网页中“火”字的设计 。 . 笔画连接笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。 会意及象形会意及象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达文字的信息 。 表面装饰 字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。 （四） 、图形图像的创意与设计图形图像能将信息传达得更具体、真实、直接、易于理解，从而高效率高质量的表达设计理念，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传
25、构成要素点、线、面点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存在于任何造型设计之中。作为视觉形式的语言，构成网页设计图形图像的最基本的要素是点、线、面，通常被人们称为“构成三要素”。在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补充，互相衬托，就可以创造出形式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。 1.点点必须要以视觉的表现为前提，因此点是一种具有空间位置的视觉单位，而且有大小不同的面积和不同的外观特征以及属性。点可分为规则点和不规则点两类，如圆点、方点、三角点属于规则点，而锯齿点、泥点、雨点则属于不规则点
26、。 点无一定的大小和形状，点的概念是相对的，是与周围的视觉元素相比较而言的。只要与周围其他造型要素共同比较时具有凝聚视觉的作用，都可以称为点。点的判断完全取决于它所在的空间的相互关系上面，越小的形体越能给人点的感觉，点的面积变大就成了面。 2.线任何形态都可以通过线的界定而确定下来。因此在网页设计中，线的布局安排主要体现在线的空间分割上。线的分割产生各种比例的面。在利用线进行页面分割时，既要考虑各形态元素彼此间支配的形状，又要注意空间所具有的联系，保证良好的视觉秩序感，这就要求被划分的空间有相应的主次关系、呼应关系和形式关系，以此来获得整体和谐的视觉空间。网页中的图文在直线的空间分割下，会得到
27、清晰、条理的秩序，同时求得统一和谐的因素。而通过不同比例的空间分割，页面各空间将会产生对比与节奏感。线框的限定使网页中的动感与情感获得相应的稳定和规范。另外，线框细，版面则轻快而有弹性，当线框加粗，图像有被强调的感觉，同时诱导视觉注意；但若线框过粗，版面则变得稳定、呆板、空间封闭。线具有方向性、流动性、延续性，因此在网页设计中可以运用重复、近似、渐变、对比、密集等构成手法，将线进行不同方式的排列组合，会产生很多具有奇妙效果的视觉形态。 3面视觉形态中，面是一种形，体现了充实、厚重和整体并稳定的视觉效果。面除了有大小，还具有位置、形状、摆放角度等特征，在版面中具有平衡、丰富空间层次，烘托及深化主
28、题的作用。经分割所产生的比例关系，是决定页面均衡、协调的重要因素。网页设计中要对面进行多样化处理，以避免重复、单调，做到相互衬托、相互呼应。面分为几何形和自由形两大类。五、小结：同学们根据网页设计的理念，修改 duibi.html 网页，将网页设计的构成要素全部考虑在内。六、作业：小组合作策划网站主题，并绘出网页设计图纸教学设计思想：网页作品的成败取决于网页的设计与制作，而网页的设计是制作的前期规划，所以很有必要将网页设计的理念传输给同学们。作为网页设计与制作的第一课时，重点则侧重于设计，因为同学们都有上互联网的经历，亲身体验了网页的功能，所以对于万维网的基本结构和网页元素已有认识，故而不必再展开学习。对于设计，我们当然更多的是欣赏为主，但是一味的欣赏又会使我们的设计定格无思考，因而我采用探究式教学，让学生在自己现有的水准上去提升创意。为了抓住学生的眼球，此课件的首页我用班级活动照片做了点缀。另外网页设计是一门集美工与技术于一身的交叉学科，一节课的时间学习是很有限的，所以着重从网页元素的设计起始。
