《网页设计的教学设计.doc

网页的设计 教学目标： 掌握网页元素和网页构件的使用： ；教学重点： 网页构件的使用网设计教学难点：网页的设计课时：一般情况下，网页都应该具备这三种元素，但是也有的网页只有其中的两种，甚至只有一种。如有的网页就是为了展示一篇文章，那么这个网页就没有必要放置图像；有的网页只用于显示一幅大尺寸的照片，也可以没有文字说明；而有的网页就是提供资料，就不必设置超链接，这样，这个网页就成为网络中某一个信息链的“终点”，即只有别的网页链接它。Angel网页 Music网页 怎样突出的网页的主题 网页的框架结构及特点 以什么色调为主及作用 图、文有何讲究 网页版式设计的视觉因素 为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从而影响人们的思想和行为，我们必须按照人的视觉生理和心理特征，去设计我们的网页版式，以达到最佳的设计诉求。我们先来看一下人的视线移动规律： 人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。 视线的变化习惯于从左到右，从上到下和顺时针方向运动。 当视线沿既不水平，也不垂直的斜线方向移动时，在水平方向上下约45o的范围视线为从左到右移动，在垂直方向左右约45o的范围内，视线为从上到下移动。 符合视觉规律 文字横向编排 由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布，除非一些有特殊设计要求的版式或书法字体的版式。同时，页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断地浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。 2．重要信息置于“最佳视觉区域” 在进行网页版式设计时，要考虑将最重要的信息或视觉流程的停留上安排在注目价值高的位置，这就是“最佳视觉区域”。由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。 版面中的不同区域会产生不同的注目程度，给人的心理感受也不同。它们给人的心理感受也是不同的；上部有轻快、上升、积极、愉悦之感；下部有沉重、稳定、压抑、消沉之感；左侧感觉轻松、舒展、自由、主动；右侧感觉庄重、局限、拘谨、被动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程的停留点安排在页面的“最佳视域”内。 3、避免视觉疲劳 1．限制网页长度 尽可能将网页限制在1屏以内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般控制在1—3屏，尽量不超过5屏。 2．文字大小适中、行距合理 在网页设计时应提供浏览者定制字体大小的功能。 3．位置的一致 减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。 4．适量安排多媒体元素 网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多媒体元素，并注意主次关系。 5．合理配色 如果将大篇幅极亮的文字设计在极暗的背景上，容易因视觉长时间过分紧张而产生疲劳。因此应注意网页的配色，使其适合浏览者长期浏览。 网页设计的构成要素 （一）、版式设计 网页的版式设计，就是将文字、图形图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围内，运用造型元素和形式原理进行视觉的关联，从而将涉及意图以视觉形式表现出来。版式设计将各元素组合配置，使页面内容一目了然，并获得悦目的视觉效果。在设计时，需要运用统一、对比、对称、均衡、节奏、韵律等形式原理，来构造出和谐、流畅、自然的网页界面。（展示两幅体现出对比和调和的网页的页面，让学生体会。） 网页板式构成的类型： 1、骨骼型 也称栏型，是一种规范的、理性的设计形式，类似于报刊的板式。常见的骨骼型有竖向的和横向的通栏、双栏、三栏、四栏等，这种版式给人以和谐、理性的美。这种版式常用于公司网站的设计。（展示页面，学生意会） 2、国字型 口字型、同字型、回字形都归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、导航以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。（展示页面，学生根据设计理念分析优缺点，重点分析） 3、框架型 有左右框架型、上下框架型和综合框架型，这种版式常用语功能型的网站，如邮箱、论坛、博客等（展示页面，学生意会） 4、中轴型 沿页面的中轴将图片、文字做水平或垂直方向的排列，给人稳定、平静、含蓄、舒畅的感觉。（展示页面，学生意会） 5、 “匡”型布局或“T”型 布局可归于此类，“匡”型布局中，常见的类型有上面是标题与导航，左侧是展示图片的类型和最上面是标题及广告，左侧是导航链接的类型。“T”布局就是指页面顶部为横条网站标