当前位置:首页 >> 其它课程 >>

12 用表格为网页布局


广陈中学 2015 学年第一学期八年级信息技术教案

参悟稿:12 用表格为网页布局
主备: 审核:上课日期总第 课时

教学 目标

1. 通过分析不同的页面布局,理解布局在版面设计中的重要性。 2. 利用表格规划网页布局,掌握表格的插入、设置等操作方法。 用表格布局网页。 灵活掌握排列表格和设置表格属性的方

法。 教授式学习;任务驱动法; 教学过程 教具准备 范例

教学重点 教学难点 教学方法

教学环节

教师

学生

设计意图 通过提问、引导、比 较等方法,培养学生 辨别表格布局网页页 面的好处。

一、导入

展示 2 张素材相同布局不同的网页。 学生观察和比较 提问①: 哪张比较美观?对照课本图 12-1 两张网页,个别 至 12-4 常见网站主页构成图, 它属于哪种 回答问题。 类型?②:它是怎么布局的?教师分析网 页中所隐含的表格结构,总结用表格为网 页布局的重要性。 分析网页中所隐 含的表格结构, 并回答。

1、提问:这张网页是用几行几列的 表格布局的? 二、 析表格 教师展示表格结构。 布局 2、展示“网络世界”网站主页,让 学生分析表格结构。 任务一:打开自己的网站主页,设置 三、 设置网 网页大小。一起学习“日积月累” 。 页大小

通过提问、比较、学 生回答,教师示范演 示等方法,提高学生 如何利用表格布局网 页页面的能力。 培养自主学习的能力

学生读读“日积 月累” , 查找一下 自己屏幕的分辨 率。

任务二:根据自己的网站主页设计, 插入及编辑表格 插入表格。 并完成页面布局 个别学生演示插入表格。任务③对表 四、 插入及 格进行拆分,调整单元格。教师演示,并 编辑表格 作页面布局。 并完成页 面布局 提高任务:完成之前操作的学生确定 标题栏目和分栏目,并在主页中插入图片 部分学生完成 和文字。 展示个别学生的成果,并分析成功和 六、 课堂展 欠缺的地方。 示 学生分析,教师 总结

学生在制作过程中的合 作、讨论、展示、交流、 评价及归纳等方法,培养 学生的思考能力、语言组 织能力、语言表达能力、 归纳能力和审美能力。 提高任务让一部分学生 体会整体网页制作的过 程。 培养学生重视学习结果 的质量,并从中让他们获 得成功的体验。激发学习 网页制作的兴趣。


相关文章:
实训六 利用表格进行网页布局
实训六 利用表格进行网页布局课时: 3 班级: 计算机班 12 一、实训目的 实训日期: 2013-4-2 编写时期: 2013-3-29 1、了解网页设计常用的几种版式; 2、掌握...
项目二 使用表格布局页面(12)
项目二 使用表格布局页面表格是制作网页的灵魂,在实际应用中,表格排版的地位不可...12px">内容 这样的写法虽然直观,但是无法体现出层叠样式表的优势,因此并不推荐...
第三章 使用表格规划网页布局
第三章 使用表格规划网页布局_计算机软件及应用_IT/计算机_专业资料。第三章 使用...3、占位符: 当我们插入表格后,每个单元格的默认的高度是 12 像素的,但这些...
实验15 利用表格和框架技术进行网页布局设计
实验15 利用表格和框架技术进行网页布局设计 1.1 15.1 实验目的 1.掌握利用 ....html 依次负责到表格的 三行中,这样就完成了主页的设计,效果如图 15-12 ...
应用表格布局网页结构
[ 作者:阜宁县明达中学 姜秀菊 1078 更新时间:2010-6-12 来源:本站原创 ...4、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。 过程与...
实验三 使用表格布局页面_图文
实验三 使用表格布局页面浏览器显示效果图: 一、 实验目的:利用表格布局页面, ...文档贡献者 zyzhangyaozy 贡献于2015-12-24 相关文档推荐 暂无相关推荐文档 ...
2_用表格布局网站主页index (1)
2_用表格布局网站主页index (1)_互联网_IT/计算机_专业资料。第 2 周任务 ...然后 依次设置表格 2 中第 2~12 个单元格宽分别为 217、54、 57、42、32...
利用表格制作网页
利用表格制作网页实验目标 该网页将利用设计页面的布局,制楚雄师院的页面简介。通过...《12》在上一步插入表格的属性面板中,将对 齐方式设为居中对齐, 将鼠标置于...
表格布局网页的说课稿
2、对照式教学法:在说明应用表格布局网页的作用时,通过内容不相同而结构相同 两张网页进行对照,让学生自己发现网页的实质是有一个大体布局的结果。 说学法: ...
html习题(答案)
JPEG 格式对图片进行压缩后,还能再打开图片,然后对它重新整饰、编辑、压缩 12....A.CSS 样式表可以将格式和结构分离 B.CSS 样式表可以控制页面的布局 C.CSS ...
更多相关标签:
网页设计表格布局例子 | 表格布局网页 | 表格布局网页模板 | 利用表格布局网页 | html网页表格布局实例 | 网页设计表格布局 | 用表格进行网页布局 | 网页制作表格布局 |