您的当前位置:首页网页设计与制作教案9

网页设计与制作教案9

2022-06-30 来源:乌哈旅游


授课周次 课程章节 第10周 授课时间 年 月 日至 年 月 日 第1次课:运用表格布局网页 第2次课:运用层和框架布局网页 第1次课:能实现利用表格布局网页; 教学目的 第2次课:能实现利用层和框架布局网页。 第1次课: 1.网页布局的基本类型。 2.使用表格布局简单网页。 3.使用表格布局复杂网页。 内容提要 及板书设计 第2次课: 1.层的定义; 2.运用层布局网页的操作; 3.框架内容的插入和框架链接的操作; 第1次课: 重点;网页布局的基本类型;使用表格布局网页的操作方法。 难点:使用表格布局复杂网页。 重点、难点 解决方案:学做合一,实践任务 及解决方案 第2次课: 重点:运用层布局网页的操作;运用层布局网页的操作。 难点:运用层布局网页的操作;运用层布局网页的操作。 解决方案:学做合一,实践任务 序学时教 学 内 容 号 分配 1 运用表格布局网页 教学内容 2 运用层布局网页 时间分配 3 运用框架布局网页 4 5 90 45 45 教学形式 理实一体(√)理论教学( ) 第1次课:多媒体教学 教学手段 第2次课:多媒体教学 (在右栏勾选) 实验( )实训( ) 上机(√) 作业 作业完书面( )电子(√) 成方式 第1次课: 教学后记 第2次课: 附页:

1

序号 具体内容(课堂组织和教学过程设计) 第一步:问题导入(10分钟) 表格是网页设计中一个非常有用的工具,它不仅可以将相关数据有 第一次课 运用表格布局网页 序排列在一起,还可以精确定位文字、图像等网页元素在页面的位置,以实现各种不同的网页布局效果。你会利用表格布局网页吗? 通过引导学生回答问题引出本节课的教学内容。 第二步,知识讲解(15分钟) 知识讲解要点如下: 一、网页布局设计原则 1、重点突出 2、平衡协调 3、图文并茂 4、简洁清晰 二、网页布局的基本类型 1、“国”字形布局 2、“T”字形布局 3、标题正文型布局 4、“三”字形布局 5、POP布局 三、页面尺寸:分辨率越高,页面尺寸越大。 四、表格嵌套 五、表格宽度 1、最外层的表格,应选择像素为单位 2、内嵌表格,选择百分比和像素为单位均可 第三步,课堂实践(55分钟) 1、教师演示: (1)制作“足球明星”网页,利用表格实现网页的简单布局。 (2)制作“我的足球网”网页,利用表格实现网页的复杂布局 2、学生练习: (1)用表格创建一个如图所示的各展馆汽车详情图。 授课改进意见及实时教学效果记录 2

序号 具体内容(课堂组织和教学过程设计) 授课改进意见及实时教学效果记录 (2)用给定的素材包,利用表格布局制作如下网页。 第四步,教师总结(10分钟) 总结本次课的内容,要求掌握利用表格布局网页的方法,并能按要求完成相关网页的创建。 第二次课 运用层、框架布局网页 第一步,问题导入(10分钟) 层是一种网页元素定位技术,使用层可以以像素为单位精确定位页面元素,层也可以放置在页面的任何位置,使用层可以实现页面元素的重叠。而框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式,浏览者通过框架可以更为方便地在不同的页面之间跳转及操作。 那么如何使用层、框架来布局网页呢? 第二步,知识讲解(15分钟) 知识讲解要点如下: 一、层的定义 层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层在Dreamweaver 网页编辑区中可以自由移动,改变层在网页中的位置,便可实现层中网页元素位置的改变。

3

序号 具体内容(课堂组织和教学过程设计) 二、框架的定义 框架是把一个浏览器窗口划分为多个区域、每个区域都可以显示不同的HTML文档的网页布局方式,并且这些HTML文档都是独立里保存在站点中的,框架好比是提供了显示这些文档的容器。因此在使用框架结构时,框架中各个网页可以独立拖动滚动条来显示更多的内容,而不会影响框架的内容。 三、框架集 框架集是HTML文件中定义一组框架的布局和属性,包括框架的数目、大小和位置等。 四、浮动框架 浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,即整个页面并不是框架页面,但是却包含一个框架窗口,在框架窗口内显示相应的页面内容。 第三步,课堂实践(55分钟) 1、教师演示: (1)制作“环游世界”网页,利用层实现网页的布局。 (2)创建保存和修改框架及框架集。 2、学生练习: (1)利用层布局来制作如下的页面。 授课改进意见及实时教学效果记录 (2)练习创建框架及框架集并保存。 (3)练习框架内容插入及框架链接的操作。 第四步,教师总结(10分钟) 总结本次课知识点,总结操作中出现的问题。 4

因篇幅问题不能全部显示,请点此查看更多更全内容