网页设计的教学设计.doc

网页的设计教学目标:1、掌握网页元素和网页构件的使用:2、能进行简单的网页设计;教学重点:网页构件的使用;网页设计;教学难点:网页的设计;课时:第1课时导入:今天我们进入第六章网页的设计与制作的学习,一个成功的网站不仅仅在于它的内容的多少,功能的交互功能多强,设计也是关键的一项,它决定了网站的艺术美是否能吸引浏览者的眼球。新课:一、网页元素的组成打开2007年全国中小学信息技术大赛中获奖作品《鄱阳湖白鹤》,让学生观看并总结网页的组成元素有?文字、图片、动画、声音、超链接等。一般情况下,网页都应该具备这三种元素,但是也有的网页只有其中的两种,甚至只有一种。如有的网页就是为了展示一篇文章,那么这个网页就没有必要放置图像;有的网页只用于显示一幅大尺寸的照片,也可以没有文字说明;而有的网页纯粹就是提供资料,就不必设置超链接,这样,这个网页就成为网络中某一个信息链的“终点”,即只有别的网页链接它。过渡:同学们想不想自己也做个网站呢?想做网站前提则是先设计网站,规划网站的主题,画出草图。二、网页设计现在给大家5分钟的时间设计一个学校网站的主页,内容包括网页的主题、思考内容Angel网页Music网页怎样突出的网页的主题网页的框架结构及特点以什么色调为主及作用图、文有何讲究网页版式设计的视觉因素为了增强人们对网页的注意程度,提高对于网页内容的理解程度,从而影响人们的思想和行为,我们必须按照人的视觉生理和心理特征,去设计我们的网页版式,以达到最佳的设计诉求。我们先来看一下人的视线移动规律:?人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。?视线的变化习惯于从左到右,从上到下和顺时针方向运动。?当视线沿既不水平,也不垂直的斜线方向移动时,在水平方向上下约45o的范围视线为从左到右移动,在垂直方向左右约45o的范围内,视线为从上到下移动。符合视觉规律?文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳,因此将文字尽量横向排布,除非一些有特殊设计要求的版式或书法字体的版式。同时,页面尽量保持横向尺寸固定,竖向尺寸不固定,目的是使人们能连续不间断地浏览页面。需要注意的是,应避免页面左右、上下都能滚动,这会给浏览者带来极大的不便。?“最佳视觉区域”在进行网页版式设计时,要考虑将最重要的信息或视觉流程的停留上安排在注目价值高的位置,这就是“最佳视觉区域”。由于人们习惯于将视线从左到右、从上到下移动,因而视区中的不同位置注目程度不同。版面中的不同区域会产生不同的注目程度,给人的心理感受也不同。它们给人的心理感受也是不同的;上部有轻快、上升、积极、愉悦之感;下部有沉重、稳定、压抑、消沉之感;左侧感觉轻松、舒展、自由、主动;右侧感觉庄重、局限、拘谨、被动。因此,在进行网页版式设计时,应考虑将重要信息或视觉流程的停留点安排在页面的“最佳视域”内。3、避免视觉疲劳?,即满屏,浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长,一般控制在1—3屏,尽量不超过5屏。?、行距合理在网页设计时应提供浏览者定制字体大小的功能。?,按照人的阅读习惯,固定导航的位置。免去用户去找导航的麻烦。?,而是要形成动静相宜的效果,因此需要适