网页设计的教学设计

网页的设计教学目标：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.橙色橙色也像绿色一样具有其他两种原色的特征。橙色常给人的感觉是:快乐、开放、大方、亲密、直接、热烈、温暖、秋天、无拘束、有活力和感情洋溢。人的行动在橙色的氛围里没有任何拘束，因此橙色很大程度上代表了温暖和真挚的感情。6.紫色紫色令人联想到昏暗、神秘、深刻、内向、高贵、悲伤、禁止、魅力、暧昧、不可靠等等。它也同绿色、橙色一样，具有相邻的两个原色的部分特征。紫色越深，则反映出的效果越呆板、严格、不近人情，并给人以强烈的神秘感。7.棕色它常被人视为一种坚固的、诚实的、亲切、稳定和安全的颜色。它让人联想到脚下的土地、结实耐用的物件、动物皮毛的温暖、几近于平淡和无聊、随和、豪放、古典与怀旧、爱的严肃和值得信赖。（三）、文字的编排与设计要达到网页文字传达的有效性，必须重视文字编辑的整体效果，是网页文字能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的转世变化，使人易认、易懂、易读。网页文字的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容和表达信息的主题。网页字体与字体编排在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。网页文字设计技巧1.提高可读性（1）让你想表达的内容清晰、醒目，让浏览者一开始就可以明白你的意思。（2）避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦。（3）注意恰当的选择你所需要的字体，适当采用虚实对比、大小对比。（4）注意文字编排方向，注意安排阅览者的视线，适当运用直线与曲线编排。（5）根据视觉流程的原理，通常将重点放在右边。2.精于位置（1）注意文字的对齐、适当拉来间距、适当安排行距。（2）注意图文交错，既不要影响图形的观看，也不能影响文字的阅览。（3）文字不要顶天立地，也不要支持边角3.营造视觉美感文字作为网页形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。注意改变文字的位置和大小，适当调节字间距。对于段落文字的处理应注意，字体加大后，段落之间的距离也应该随之调整。小字体同样应用这一规则，不过是相反的。4.富于创造性设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。加入感受在字体里面，对文字的大小、间距、透明度做些调整，就会是完全不同的效果了。差别就在这里，也许只是一点小改动，但是需要你思考的却更多。有时候对文字的笔画做特殊的加工处理往往会产生一些意想不到的效果。而这样的处理是带有创造性的，同时人性化的味道也会更浓一些。这是电脑字体所无法替代的效果，带给观看者的感受自然会要强烈的多。网页文字设计方法笔画突变笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和特征。添加形象添加形象主要是通过在汉字局部笔画上添加与汉字表义相关的图像或图形来增加汉字的表意功能。将某个笔画换成有意义或有趣地图形，会使整个视觉活跃起来，海尔网页中“火”字的设计。.笔画连接笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。会意及象形会意及象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达文字的信息。表面装饰字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。（四）、图形图像的创意与设计图形图像能将信息传达得更具体、真实、直接、易于理解，从而高效率高质量的表达设计理念，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传构成要素——点、线、面点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存在于任何造型设计之中。作为视觉形式的语言，构成网页设计图形图像的最基本的要素是点、线、面，通常被人们称为“构成三要素”。在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补充，互相衬托，就可以创造出形式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。1.点点必须要以视觉的表现为前提，因此点是一种具有空间位置的视觉单位，而且有大小不同的面积和不同的外观特征以及属性。点可分为规则点和不规则点两类，如圆点、方点、三角点属于规则点，而锯齿点、泥点、雨点则属于不规则点。点无一定的大小和形状，点的概念是相对的，是与周围的视觉元素相比较而言的。只要与周围其他造型要素共同比较时具有凝聚视觉的作用，都可以称为点。点的判断完全取决于它所在的空间的相互关系上面，越小的形体越能给人点的感觉，点的面积变大就成了面。2.线任何形态都可以通过线的界定而确定下来。因此在网页设计中，线的布局安排主要体现在线的空间分割上。线的分割产生各种比例的面。在利用线进行页面分割时，既要考虑各形态元素彼此间支配的形状，又要注意空间所具有的联系，保证良好的视觉秩序感，这就要求被划分的空间有相应的主次关系、呼应关系和形式关系，以此来获得整体和谐的视觉空间。网页中的图文在直线的空间分割下，会得到清晰、条理的秩序，同时求得统一和谐的因素。而通过不同比例的空间分割，页面各空间将会产生对比与节奏感。线框的限定使网页中的动感与情感获得相应的稳定和规范。另外，线框细，版面则轻快而有弹性，当线框加粗，图像有被强调的感觉，同时诱导视觉注意；但若线框过粗，版面则变得稳定、呆板、空间封闭。线具有方向性、流动性、延续性，因此在网页设计中可以运用重复、近似、渐变、对比、密集等构成手法，将线进行不同方式的排列组合，会产生很多具有奇妙效果的视觉形态。3．面视觉形态中，面是一种形，体现了充实、厚重和整体并稳定的视觉效果。面除了有大小，还具有位置、形状、摆放角度等特征，在版面中具有平衡、丰富空间层次，烘托及深化主题的作用。经分割所产生的比例关系，是决定页面均衡、协调的重要因素。网页设计中要对面进行多样化处理，以避免重复、单调，做到相互衬托、相互呼应。面分为几何形和自由形两大类。五、小结：同学们根据网页设计的理念，修改duibi.html网页，将网页设计的构成要素全部考虑在内。六、作业：小组合作策划网站主题，并绘出网页设计图纸教学设计思想：网页作品的成败取决于网页的设计与制作，而网