第21课模板与库( 二 ) 教案(表格式)-《网页设计与制作案例教程(第2版)》同步教学(航空工业出版社)

资源下载
  1. 二一教育资源

第21课模板与库( 二 ) 教案(表格式)-《网页设计与制作案例教程(第2版)》同步教学(航空工业出版社)

资源简介

课题 模板与库( 二 )
课时 2课时(90 min)
教学目标 知识技能目标: (1)熟悉库项目的基础知识。。 (2)能够使用Dreamweaver CC为网页中创建并应用库项目。 思政育人目标: (1)学习模板和库,增强专业技能,提高工作效率。 (2)学习工匠精神,培养认真、严谨的工作态度。
教学重难点 教学重点:库项目的基础知识 教学难点:使用Dreamweaver CC为网页中创建并应用库项目
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课:课前任务→ 考勤(2 min)→ 问题导入(5 min)→传授新知(23 min)→课堂讨论(15 min) 第2节课:任务实施(25 min)→ 实践探索(15 min)→ 课堂小结(3 min)→ 作业布置(2 min)
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务,和学生负责人取得联系,让其提醒同学通过文旌课堂APP,查阅资料,了解网页中的库项目 【学生】按照教师要求完成课前任务 通过课前的预热,让学生了解所学软件,激发学生的学习欲望
考勤 (2 min) 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性,掌握学生的出勤情况
问题导入 (5 min) 【教师】提出以下问题: 请说说库的作用是什么? 【学生】思考、举手发言 使用库项目可以将网页中常用的页面元素保存起来,然后在多个网页中重复使用。 通过问题导入,引导学生思考,调动学生的主观能动性,了解本节课要学习的内容
传授新知 (38 min) 【教师】通过学生的发言,引入新的知识点,介绍创建、应用、编辑库项目的方法 一、创建库项目 【教师】提出以下问题: 什么是库项目? 【学生】阅读、思考、举手发言 库项目是一种特殊类型的文件,拓展名为lbi。我们可以将网页中的任意元素定义为库项目,如图像、表格、文本、声音等。 (详见教材) 【教师】展示Dreamweaver中的库项目,帮助学习理解 库项目可以在多个网页中重复使用,当更改某个库项目时,所有应用该库项目的网页都可以同时更新。例如,假设为某公司建立一个大型站点时,公司想让其广告语出现在站点的每个网页上,但是还没有确定最终的广告语。此时就可以创建一个包含临时广告语的库项目并插入到每个网页中,当公司提供了最终的广告语后,就可以通过更改库项目使所有网页自动更新。 (详见教材) 【教师】提出以下问题: 针对图像等元素,网页中只是保存了指向图像等文件的路径,以后通过置换图像来更新网页不也一样吗? 【学生】阅读、思考、举手发言 其实是不一样的。例如,假设将一幅广告图像创建为库项目,则图像及其尺寸、链接、目标等属性均包含在库项目中。以后修改广告时,只要修改一次库项目及其属性,就可以自动更新全部使用该库项目的网页。如果不将广告图像创建为库项目,尽管可以通过置换图像来更新网页,但是还必须分别在各网页中为其设置链接等属性。 (详见教材) 【教师】演示使用Dreamweaver CC在网页中创建库项目 (1)打开“blog”站点,双击“文件”面板中的网页文档“index.html”,将其打开。在“设计”视图中选中网页最下方的

标签,然后单击“工具”→“库”→“增加对象到库”菜单,打开“Dreamweaver”对话框和“资源”面板。 (2)单击“确定”按钮,可以看到在“资源”面板中生成了库项目,其名称处于可编辑状态。 (3)在文本框中输入库项目名称,此处为“footer”,然后按“Enter”键确认,打开“更新文件”对话框,单击“更新”按钮,完成库项目的命名。 (详见教材) 【学生】观察、记录、理解 二、应用库项目 【教师】演示使用Dreamweaver CC在网页中创建库项目 库项目的应用方法为,首先定位插入点,然后选中库项目并单击“资源”面板底部的“插入”按钮 ,将库项目插入到文档中。 (详见教材) 【学生】观察、记录、理解 【教师】展示Dreamweaver中的网页库项目属性面板,帮助学习理解 “属性”面板中各设置项的意义如下。 “Src”信息:显示库项目源文件的名称和在站点中存放的位置。 “打开”按钮:单击可打开库项目源文件并进行编辑。 “从源文件中分离”按钮:单击可断开所选库项目与其源文件之间的链接,使库项目成为普通对象。 “重新创建”按钮:若应用后的库项目有所改动,单击该按钮可用新的库项目覆盖旧的库项目。 三、编辑库项目 【教师】演示使用Dreamweaver CC在网页中编辑和更新库项目 想要编辑库项目时,可在“资源”面板中双击库项目,将其在文档窗口中打开,然后进行编辑即可。 在编辑库项目后,对其进行保存操作时,将打开“更新库项目”对话框,询问是否更新使用了库项目的网页,单击“更新”按钮后,打开“更新页面”对话框,在“查看”下拉列表中选择“整个站点”选项,然后单击“完成”按钮即可。 (详见教材) 【学生】观察、记录、理解 【课堂互动】教师提出以下问题: 你了解电商设计师吗?让我们了解一下侯帅的故事? 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 大多从事电商设计工作的人,都听过“侯帅”这个名字,他是2015年度中国十强电商设计师之一。他创建的工作室曾服务过上百家网店,涉及服装、电器、美妆、食品等众多领域,他发布在各大设计类网站的作品人气超高……这些都离不开他努力、坚持的学习态度和专注、严谨的敬业精神。 【学生】聆听、思考、记忆、实际操作 通过讲解,让学生了解如何创建、应用、 编辑库项目
课堂讨论 (15 min) 【教师】组织学生阅读“侯帅”的故事,并让学生以小组为单位讨论以下问题: 这个故事带给你怎样的启发?你认为如何才能做好电商设计工作? 【学生】阅读、思考、小组讨论,有小组代表上台发表讨论结果 【教师】与学生一起评价各组的发言 以学生为主体,针对学生接受能力的差异性,让优秀学生带动其他学生掌握知识点
第二节课
任务实施 (25 min) 【教师】演示在Dreamweaver CC中应用库项目完善“传承经典网”介绍页的操作,对其进行分析 (1)继续在任务一任务实施中创建的文档中操作,或用本书配套素材“项目九”→“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件,然后打开“index.html”网页文档。 (2)选中
标签的所有内容,打开“资源”面板,单击面板下方的“新建库项目”按钮 ,打开“Dreamweaver”对话框,单击“确定”按钮,创建库项目。 (3)“资源”面板添加一个库项目,其名称处于可编辑状态,将其命名为“sheet_3”,按“Enter”确定,打开“更新文件”对话框,单击“更新”按钮,完成库项目的添加。 (4)保存“index.html”。双击“文件”窗口的“about.html”,将其在文档窗口中打开,在
标签后添加一个class属性值为center的
标签。 (5)将鼠标置于
标签中,在“资源”面板中选中“sheet_3”选项,然后单击面板下方的“插入”按钮,添加库项目。 (6)保存“about.html”,按“F12”键查看页面效果。 (详见教材) 【教师】巡堂指导,及时解决学生的问题 利用任务实施,让学生们主动参与学习,熟悉在Dreamweaver 中创建库的步骤
实践探索 (15min) 【教师】组织学生自主练习,创建并应用模板制作“图书交易网”小说投稿页 【学生】参照任务实施的步骤上机操作 【教师】巡堂指导,及时解决学生的问题 通过实践探索,使学生进一步巩固所学知识,了解更多关于网页模板的知识
课堂小结 (3 min) 【教师】简要总结本节课的要点 本节课学习了创建、应用、编辑库项目的基本操作,并通过实践练习了使用Dreamweaver CC应用库项目制作网页的方法。希望大家在课下多加练习,掌握库项目的相关知识和操作。 【学生】总结回顾知识点 总结知识点,巩固印象
作业布置 (2 min) 【教师】布置课后作业 (1)完成相关课后习题。 (2)查阅资料,了解更多关于库项目的知识。 【学生】完成课后任务 延展知识面,巩固所学知识
教学反思 这节课整体节奏较好,但学生主动提问较少。根据新课程的要求,教师由传统的知识传授者转变为学生学习的组织者;教师成为学生学习活动的引导者,而不再是主导者;教师应从“师道尊严”的架子中走出来,成为学生学习的参与者,师生合作学习,共同进步。

展开更多......

收起↑

资源预览