文档介绍：网页的版面设计【教学背景】本节课为教材的第四章第二节创作电子作品中的“网页的版面设计”的内容。学生在初中学过网页制作的很少;通过word的学习,学生对表格的建立与编辑有一定的基础。【教学目标】知识与技能:1、认识到网页版面设计的重要性。2、了解网页版面设计的常见布局方式。3、掌握在网页中用布局表格来布局页面的方法。过程与方法:能根据网站的主题、素材类型、风格,确定网页的布局方式。情感态度与价值观:通过实践创作的过程,形成主动学习和利用信息技术、参与信息作品创作的态度。重点难点:用布局表格布局页面。教学方法:讲解、演示、任务驱动【教学环境】硬件:多媒体网络教室软件:多媒体辅助教学软件【教学组织】1、安排1课时2、教师引导,兴趣活动。【教学过程】教学环节教师活动学生活动引入先让学生浏览两个网页页面,两个网页的内容一样,但一个网页经过版面设计,另一个没有。问哪个漂亮?指出:漂亮的网页页面能给人视觉享受,让人看了觉得非常舒服。它之所以让人看了觉得舒服,是因为对它进行了版面设计。——进入主题设问:什么是网页的版面设计?屏幕广播课件的主页,让学生看屏幕得知答案。浏览、思考、回答学习新知完成任务一、常见的网页布局类型当我们在网络中漫游时,一个个精彩的网页会呈现在我们面前。网页的精彩因素有哪些呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个重要的因素——网页的版面设计。同学们正在学习建立自己的网站,大家都希望自己制作的网页漂亮、有自己的风格,能够吸引别人的眼球。而要做到这些,我们在制作网页时,就要重视网页布局。“网页布局”顾名思义是指对网页元素的整体安排。了解网页布局的常见类型和各自的特点。观看不同的网页进一步了解不同的网页布局类型的特点学生阅读课件了解当前网页布局的常见类型及特点。1、拐角型。特点:简单明了,容易把握。2、“同”字型。特点:充分利用版面,信息量大。3、标题正文型。特点:简洁二、用布局表格来布局页面用Dreamweaver新建网页。目前因特网上大多数网页都是用表格布局的。但是,使用表格进行布局不太方便,因为最初创建表格是为了将数据排列整齐,而不是用于对网页进行布局。为了简化使用表格进行页面布局的过程,Dreamweaver提供了“布局”模式。在“布局”模式中,绘制布局表格或布局单元格就如同在Word中画矩形框一样容易。演示:用Dreamweaver新建网页,在布局模式下,绘制布局表格和布局单元格,移动位置,改变大小,强调布局表格与布局单元格的区别。分别新建三个网页绘制三种类型的网页布局。观看听讲观看演示。三、图文编排在完成布局之后,就可以输入文字,插入图片,并且对文本、图片进行必要的设置,再设置背景色或背景图片,使得整个网页浑然一体。简单的介绍在布局好的网页中插入一些基本的网页元素