资源简介

任务二 创建网站的主页 框架网页布局 教学设计
1教学目标
1．知识与技能
（1）了解网页设计中框架布局和表格布局的作用。
（2） 掌握网页中框架、表格的制作方法、表格属性的设置方法，能够在单元格中正确插入文字和图片。
（3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。
2．过程与方法
（1）掌握frontpage软件使用，培养学生迁移学习的能力。
（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。
（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的能力。
3．情感态度与价值观
（1）通过学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的能力。
（2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。
2教学方法
探究学习法、模仿学习法。
3重点难点
1．教学重点：
（1）了解框架、表格在网页设计中的重要作用和功能。
（2）掌握插入、编辑表格的方法及表格的属性设置方法。
（3）掌握单元格的修饰与属性设置。
2．教学难点：
表格属性和单元格属性设置
4教学过程
活动1【导入】网站知识介绍
（1）网站是由一些互相关联的网页构成的一个整体。一个网站通常包 含多个网页，其起始网页称为主页（home page）,也叫首页，它是网站的门面，体现了整个网站的主题、风格及架构，还具有引导功能。
（2）网站站点的建立
将D:myschool文件夹转换为空白站点。
活动2【讲授】网页的布局
一、网页的框架布局
（1）主页的框架布局
网页中采用框架布局，可以在同一浏览器中显示多个网页页面。
展示网站的主页，引导学生分析其框架结构，得出主页的框架。
任务1 规划主页框架布局
打开站点，新建网站，引导学生借助frontpage软件中提供的框架模板完成主页的框架布局。然后完成框架网页中各个框架页面的属性设置及文件名的建立。
二、网页的表格布局
网页布局：指网页中图像、文字的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。
简单来说，可以把网页中的内容看成是一个一个的“矩形块”，把多个“矩形块”按照行和列的方式组织起来，就构成了一个网页。
（1）分析表格结构
展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材中的例子（top1.htm），分析结构，得出表格的布局（如表格有几行几列，哪些行做了哪些处理）。
任务2 规划网页表格布局
分层完成该任务，基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的同学可以跳出课本，自行设计表格网页布局，并将自己的表格设计绘制在书本上。
学生可根据自己的实际情况选择任务难度，并动手分析与创意设计。
建议：使用嵌套的表格来布局。
设计意图：分层教学，培养学生模仿以及创新能力。
（2）完成表格布局
FrontPage中表格的插入和编辑与Word中的表格操作类似，教师无需讲解，引导学生进行知识迁移。
任务3 制作top1.htm页面，用表格布局该网页
打开top1.htm网页，按前面分析的要求插入一个表格。调整表格结构（主要是行列的插入、删除，单元格的合并、拆分、调整大小等）。
老师可安排操作熟练的同学进行演示。
任务4 表格属性以及单元格属性的设置
表格属性的设置，如去除网格线、设置表格背图片等。设置单元格属性。
强调：学会利用右击后弹出的快捷菜单中的命令。
学生根据自己的实际情况选择任务难度，可按教师具体要求修饰、调整表格，也可根据自己的意图修饰、调整表格。（表格边框的调整都需掌握）
设计意图：完成必须要求掌握的知识同时，给学生一定的自主空间，鼓励他们去创新，而非一成不变的生硬模仿。
（3）充实网页页面内容
任务5 在表格中插入图片、输入文字
建议：插入图片对象前，对图片做一定处理，例如选择风格统一的图片，调整图片大小至同一尺寸等。注意图片的保存。
三、总结与评价
本节课我们学习了框架布局和表格布局的使用，在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。展示页面制作完成的优秀作品，表扬完成任务的同学，对未完成的同学给予激励，鼓励他们利用课余时间继续完成。
小结：
（1）框架布局在FrontPage中起到的作用：嵌入网页。
（1）表格布局在FrontPage中起到的作用：定位对象。
（2）表格、单元格属性的设置。
课件14张PPT。网页的布局设计 网站是由一些互相关联的网页构成的一个整体。一个网站通常包
含多个网页，其起始网页称为主页（home page）,也叫首页，它是网
站的门面，体现了整个网站的主题、风格及架构，还具有引导功能。回顾：将D:myschool文件夹转换为空白站点。网页布局：指网页中图像、文字的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。简单来说，可以把网页中的内容看成是一个一个的“矩形块”，把多个“矩形块”按照行和列的方式组织起来，就构成了一个网页。布局方式：表格布局、框架布局和层叠样式表网页的布局设计1行3列的表格网页的布局设计1行3列的表格了解准备建设网站的素材参数：top1.htm框架top1.htmtop3.htmtop2.htm主页的框架布局top1.htmtop2.htmtop3.htm主页的框架布局title_top.gif(10) TM.gif(72) TN1.gif(39) T01.gif(22) 主页的框架布局任务一：创建网站的框架主页。上、中、下框架页面的名称分别为：top1.htm、top2.htm、top3.html,主页名称为index.htm。上框架的高度为121像素、下框架的高度22像素。框架top1.htmtop2.htmtop3.htm高度：121像素高度：22像素主页的框架布局制作top1.htm页面 三行一列
宽度：778像素
高度：121像素宽度：778 像素 高度：10像素宽度：778 像素 高度：72像素宽度：778 像素 高度：39像素网页的表格布局制作top1.htm页面任务二：根据教材P119的提示，结合给出的素材，完成制作top1.htm页面素材（D:myschool）： BG.GIF 、title_top.gif、 TM1.GIF、
TM2.GIF、TM3.GIF、 TN1.GIF、小结：网页的布局可以借助框架布局和表格布局两种，框架布局可实现多个网页在同一个浏览器中显示；表格布局是实现图片、文字等对象的定位显示，其整体布局思路从上到下，然后从左到右，分别制作不同的内容。
进行网页的布局设计时，需要全盘考虑图片的高度和宽度。以确定各个布局位置的大小。网页的布局设计

展开更多......

收起↑