资源简介

中小学教育资源及组卷应用平台
《表格布局的应用》
授课班级 计算机（1）班 课程名称 网页设计与制作
课题 表格布局的应用
课堂类型 理实一体化教学 （采用实战案例引出基础知识的形式进行讲述，以达到“做中学”的效果）
课时 2学时 授课类型 新授课
教材 实战Dreamweaver CC 网页制作教程（第3版） 机械工业出版社 2019年11月 主编：刘天真
教材分析 【教材地位】 本书为计算机类专业的职业教育“十三五”规划教材，该书针对中等职业学校学生的认知特点和生活实际，从网页初学者的角度出发并紧跟世界主流制作技术的步伐，通过一个个具体的案例通俗易懂地讲解了Dreamweaver CC网站开发设计的相关知识，并通过综合网站的制作对它们的制作技巧进行了综合运用，使得学生的制作能力与真实的企业能力需求进行有效接轨。 【教材处理】 本次的教学内容来自本书第3章表格布局的应用。在本章中，教材所用实例过于简单且与之前技能知识点联系不够，结合学生目前的认知特点，我在此更换实例，同时加入超链接、脚本弹出对话框等元素使之成为综合性网页实例，以便学生以小组合作的形式去探索完成，提高学生的综合运用能力和自主学习能力。 【参考教材】 1、《网页设计与制作》 清华大学出版社，梁莉菁著，2020 2、《网页设计项目实战》 南开大学出版社，樊凡著，2017 3、《Dreamweaver CC 网页设计》清华大学出版社，2019
学情分析 本课程的教学对象是计算机专业二年级（1）班的学生，他们喜欢新奇的事物，接受能力和理解能力较强。此外，学生具有一定的计算机应用基础，会创建站点和制作简单的网页且之前已经学习过word表格的使用，对表格有一定的理解。在此基础上，学生能较轻松的掌握表格布局的应用。 但是也存在着一些问题：综合应用能力薄弱，自主学习能力较差，学生之间学差异较大。
教学目标 【知识与技能目标】 （1）理解表格的属性设置及使用方法； （2）掌握网页中表格布局的使用技巧； （3）增强网页中表格布局的合理运用能力。 【过程与方法目标】 （1）采用讲解演示法加强学生对表格及其属性设置的理解； （2）采用闯关式任务法帮助学生巩固和提高表格布局的综合运用能力和自主学习能力。 【情感态度与价值观目标】 （1）培养学生团队合作意识，增强集体荣誉感； （2）制作简单的表格布局网页，提高学生的自信心和成就感； （3）培养知识迁移的学习方法，提高学生的自主学习能力。
教学重难点 【教学重点】 表格与单元格的属性设置、单元格的合并与拆分、表格的嵌套 【教学难点】 表格在网页中的合理运用
教学方法 教法：讲解演示法、闯关式任务法 学法：小组合作法、自主探究法
教学资源 1、计算机类专业实训室301（一人一机、多媒体投影） 2、极域电子教室、Dreamweaver CC 2018软件 3、《表格布局的应用》教学课件、网页制作的相关素材、问卷星测试题
教学过程 设计流程图
教学过程
教学环节 教学内容及师生活动 设计意图
课前准备 教学环境测试 Dreamweaver CC 2018等软件是否正常，学生上交手机 分组名单、课后测试题 根据上节课学生的评价表及学习表现确定本次课巩固提升阶段的异质分组名单（见附页一） 二维码测试题是否能用 确保教学活动顺利实施
温故知新 （2min） 【内容回顾】 网页中有哪些基本元素？ 这些元素的插入方法有哪些？ 回顾旧知，铺垫接下来的学习
情境导入 （3min） 【人物展示】 观察图片中的人物，大家认识吗？ 【表格展示】 在本次冬奥会上，我国取得了怎样的成绩？其奖牌榜布局如何？ 以苏翊鸣事迹引出冬奥会奖牌榜，揭示表格布局，激发学生学习兴趣
教学环节 教学内容及师生活动 设计意图
新课讲授 （2min） 表格布局是最基础的网页布局方式。通过对网页中的表格布局，我们可以将数据、图片等元素有序的显示在网页上。当熟练掌握和灵活应用表格的各种属性后，可以结合布局创意使网页看起来赏心悦目。 理论基础
案例演示 （5min） 【制作冬奥会奖牌榜】 创建表格 菜单栏：插入--->表格 快捷键：Ctrl+Alt+T 基本组成元素：行、列、单元格、边框 参数介绍：表格宽度、边框粗细、单元格边距、单元格间距、标题、摘要等
2、设置属性 表格属性： Cellspace 单元格间距Border 边框 CellPad 单元格边距Background 背景 单元格属性： Align 水平 Valign 垂直
3、输入数据 文本直接输入 4、浏览器运行
初步认识和了解表格操作
教学环节 教学内容及师生活动 设计意图
实操练习 （15min） 【模仿练习】 学生参照教师演示步骤完成此表格的创建及各属性相关设置，可进行创新，如插入图片等。 制作简单表格 树立自信心
评价分析 （3min） 【作品评价】 教师利用电子极域教室软件广播几位学生的屏幕，师生共同评价。
点出优缺 提出改进
巩固提升 （40min） 【准备素材】 教师利用极域电子教室软件下发制作旧书店网页中用到的相关素材文件（见附页一）。 【创设情境】 最近，陈老师想要开一家旧书店，让我帮其制作一个网站首页，想到今天学习的表格布局，我决定让大家分组来帮其制作，看哪个小组做得更好。 在制作旧书店网页中共设有5道难关，请大家按照老师广播的分组名单尽快找到各自的组员，你们准备好了吗？ 闯关规则：我们共有5个小组，每个小组在规定时间内全队成员通过一关，即可获得一颗智慧星，最后全部通关队伍可获得一枚智勇勋章。在闯关过程中，各小组要发挥团队协助精神共克难关，遇到问题时可先通过阅读教材、课件和上网查询等方式自主解决，若还不能解决再向老师求助。 依据异质分组原则进行分组， 提高教学效率
教学环节 教学内容及师生活动 设计意图
巩固提升 （40min） 【制作旧书店网页】 第一关：设计表格，我在行（倒计时10min） 师：下发旧书店网页要用的相关素材并布置本关任务：利用素材并使用表格布局设计网页，在word表格中展示成果。 生：对照素材，小组讨论交流，利用Word表格展示出各小组将要设计的页面布局，并对表格中要添加的素材进行位置标识。 倒计时结束，教师宣布闯关情况，并展示小组的表格设计。
香奈儿曾说：“时尚转瞬即逝，唯有风格永存”，这句话适用于时尚圈，同样也适用于互联网发展的今天。随着时代的发展，不管多么强大的一项技术，总会一直被模仿然后被超越最终被替代，那些颠覆我们生活的技术也一次次被新的技术颠覆。而那些留存下来的创意永远是走心的。 当然好的创意，如果没有技术去实现那它也只是一个构想，没有技术去支持也是不可能实现的。 第二关：绘制表格，我能行（倒计时7min） 师：引导学生阅读教材并对比word表格的使用方法，探究实现表格的嵌套、单元格的合并与拆分。 生：根据第一关设计的页面布局，使用Dreamweaver CC 2018软件创建表格网页。 思考与讨论： 如何实现表格嵌套？ 如何进行单元格的合并与拆分？ 培养学生的集体荣誉感和合作探究能力 技术固然重要，但创意同样珍贵 组内探究 发散思维
教学环节 教学内容及师生活动 设计意图
巩固提升 （40min） 小提示：对比word表格的操作。 倒计时结束，教师宣布闯关情况，并介绍该关中所涉及到的知识点和关键操作。 一本书缺少了内容页，就算封面页再漂亮、再精致也只是个徒俱美丽空壳的纸版罢了。而一个网页不能有效的展示出所表达的内容，就像一个失去了灵魂，只剩下躯壳了的人。 技术已经实现，内容尤为重要。 第三关：填充表格，我能做（倒计时5min） 师：文字可以直接添加进表格，那图片该如何添加？ 生：小组交流讨论，合作学习。对比word表格中的图像添加方法，在自己的网页中加入文本和图像素材。 一个优美的网页会给人留下深刻的好印象，相当于一个企业的“门面”。 第四关：修饰表格，我会用（倒计时5min） 师：为学生提供思路，应用前面练习中用到的知识点。 生：回顾前面的练习中是如何修饰表格的，小组讨论交流，实现表格的美化修饰。 倒计时结束，教师宣布闯关情况。 在前面的制作冬奥会奖牌榜练习基础上进一步学习表格的填充和修饰
教学环节 教学内容及师生活动 设计意图
巩固提升 （40min） 第五关：探究实践，我也行（倒计时10min） 师：为导航栏里的内容设置超链接，点击导航栏里的“联系我们”弹出提示对话框。 生：小组合作探究，结合网上资源完成操作。 小提示：上网查询javascript对话框的使用方法。 倒计时结束，教师宣布闯关情况并展示小组成果。 【颁发勋章】 为通关队伍颁发智慧星，为最终全部通关队伍颁发智勇勋章。 巩固学生前面所学知识点并进行拓展，培养学生自主学习能力
教学环节 教学内容 设计意图
归纳总结 （10min） 【课堂“四评”】 【课堂小结】 表格与单元格的属性设置、单元格的合并与拆分 表格的嵌套及网页中表格布局的应用 【作业布置】 学生取回手机并扫描下方二维码，完成问卷星中的测试题并提交。 实施“四评”，调动学生参与评价的积极性 复习回顾 巩固测验
教学环节 教学内容 设计意图
归纳总结 （10min） 【拓展延伸】 在今天的学习中有同学发现：设计视图和实时视图的网页不一致。
对于这种问题我们该如何解决？请大家课后上网查询。
板书设计
教学反思 亮点： 1）采用“理实一体化”的教学模式，老师做中教，学生做中学，提高了学生的学习兴趣。 2）通过闯关式任务法和分组合作来突破重点，化解难点，提高学生的自主学习能力。 不足： 1）教态不够自然大方，课堂调控能力薄弱 2）细节上需要注意，Word表格而非World表格 改进措施： 1）加强刻意注意练习，提高教态和课堂调控能力 2）加强反向思维的练习，在寻找错误中修改并完善细节
附页一
【分组名单】
【素材文件】