第3课站点的创建与管理 教案(表格式) -《网页设计与制作案例教程(第2版)》同步教学(航空工业出版社)

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

第3课站点的创建与管理 教案(表格式) -《网页设计与制作案例教程(第2版)》同步教学(航空工业出版社)

资源简介

课题 站点的创建与管理( 一 )
课时 2课时(180 min)
教学目标 知识技能目标: (1)认识Dreamweaver CC工作界面 (2)了解Dreamweaver CC的初始化设置 (3)掌握调整Dreamweaver CC工作界面的方法 思政育人目标: (1)体验网页制作工具的使用方法,培养基本的工作能力 (2)练习创建站点,锻炼学生的实践能力,培养学生的探究精神。
教学重难点 教学重点:Dreamweaver CC工作界面 教学难点:调整Dreamweaver CC工作界面
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课:课前任务→ 考勤(2 min)→ 问题导入(10 min)→传授新知(23 min)→课堂抢答(10 min) 第2节课:问题导入(5 min)→ 任务实施(25 min)→ 实践探究(10 min)→ 课堂小结(3 min)→ 作业布置(2 min)
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务,和学生负责人取得联系,让其提醒同学通过文旌课堂APP,查阅资料,了解Dreamweaver CC软件 【学生】按照教师要求完成课前任务 通过课前的预热,让学生了解所学软件,激发学生的学习欲望
考勤
(2 min) 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性,掌握学生的出勤情况
问题导入
(10 min) 【教师】提出以下问题: 阅读教材,说一说什么是Dreamweaver CC软件,它的主要作用是什么? 【学生】思考、举手发言 Dreamweaver CC是一款集网页制作和网站管理于一身,所见即所得的可视化网页编辑软件。 通过问题导入,引导学生思考,调动学生的主观能动性,了解本节课要学习的内容
传授新知
(23 min) 【教师】通过学生的发言,引入新的知识点,介绍Dreamweaver CC 一、Dreamweaver CC的工作界面 【教师】安装Dreamweaver CC,展示其工作界面,帮助学习理解 Dreamweaver CC的工作界面比较简洁,主要由应用程序栏、工具栏和文档标签栏等组成。 (详见教材) 【教师】布置以下学习任务: 根据教材提示,安装软件,探索Dreamweaver CC软件应用程序栏、工具栏、文档标签栏的功能 【学生】思考、实际操作 【教师】巡视课堂纪律,对学习有困难的学生进行帮助 1.应用程序栏 应用程序栏位于工作区顶部,左侧显示菜单栏,右侧包含工作区切换器(可在其下拉列表中选择不同的工作区模式)和程序窗口控制(最小化、最大化及关闭)按钮 2.工具栏 工具栏用于放置一些常用按钮,如打开文档、文件管理等。此外,单击工具栏最下方的自定义工具栏按钮可以打开“自定义工具栏”对话框,在该对话框中能够自由设置工具栏中要显示的按钮。 3.文档标签栏 文档标签栏依次显示当前打开的所有网页文档的标签(标签上显示相应网页文档的名称)及其关闭按钮;当某个文档链接了外部文档时,其文档标签下方将显示当前文档源代码及其链接的文档名,单击对应的链接按钮,可打开其所链接的文档。 (详见教材) 【教师】展示Dreamweaver CC软件的界面,辅助学习理解Dreamweaver CC界面的文档工具栏的功能 4.文档工具栏 文档工具栏位于文档标签栏上方,包括代码、拆分、设计等按钮,单击它们可切换至对应的视图模式。 代码:在文档窗口中显示代码视图。代码视图是用于编写HTML、CSS、JavaScript,以及其他任何类型代码的手工编码环境。 设计:在文档窗口中显示设计视图。设计视图中显示的效果类似于在浏览器中看到的效果,用户可以在该视图中直接编辑网页中的各个对象,并且在对网页文档进行操作之后,网页代码会自动更新。 实时视图:单击“设计”按钮右侧的三角按钮,在展开的下拉列表中选择“实时视图”选项,文档窗口中即显示实时视图,其与设计视图类似,但能更逼真地显示文档在浏览器中的效果,还可以与文档进行交互。 (详见教材) 【教师】展示Dreamweaver CC软件的界面,辅助学习理解Dreamweaver CC界面的状态栏、“插入”面板、“文件”面板等菜单的功能 5.状态栏 状态栏位于文档窗口底部,它提供了当前文档的一些基本信息。 6.“插入”面板 “插入”面板包含用于创建和插入对象(如表格、图像等)的按钮,在设计视图或代码视图中定位插入点后单击某个按钮可插入对应的元素。例如,要在页面中插入图像,可先定位插入点,然后单击“Image”按钮。 7.“文件”面板 使用“文件”面板可查看和管理站点中的所有文件与文件夹,包括网页文件中使用的素材文件和网页文件 8.“CSS设计器”面板 使用“CSS设计器”面板能够非常方便地创建CSS样式。通过该面板设置属性后,CSS文件将自动更新代码。 【教师】布置以下学习任务: 根据教材提示,自主探索“CSS设计器”面板的功能 【学生】思考、实际操作、探索 【教师】巡视课堂纪律,对学习有困难的学生进行帮助 “CSS设计器”面板由以下窗格组成。 源:列出与文档相关的所有CSS样式表。单击窗格左上方的 按钮,可以创建新的CSS文件或将已有的CSS文件附加到文档,也可以直接在页面中定义样式。 媒体:显示在“源”窗格中所选样式文件中的全部媒体查询。如果不选择特定媒体查询,则此窗格将显示与文档关联的所有媒体查询。 选择器:显示在“源”窗格中所选样式文件中的全部选择器。如果同时还选择了某个媒体查询,则此窗格将只显示该媒体查询下的选择器。 属性:显示能够为指定选择器设置属性的列表。 (详见教材) 二、Dreamweaver CC的初始化设置 Dreamweaver CC中的一些属性设置可以根据个人的喜好及习惯进行调整,方法为单击“编辑”菜单,在展开的下拉菜单中选择“首选项”选项,打开“首选项”对话框,然后进行设置。下面介绍几个常用设置。 字体:在“分类”列表框中选择“字体”选项,对话框右侧显示字体设置区,在其中可以设置代码的字体样式及字号等。 实时预览:在“分类”列表框中选择“实时预览”选项,对话框右侧显示实时预览设置区,在界面上方的列表框中可以修改用于查看页面效果的默认浏览器,选择对应浏览器选项后勾选“主浏览器”复选框,然后单击“应用”按钮即可 界面:在“分类”列表框中选择“界面”选项,对话框右侧显示界面设置区,单击界面上方的正方形按钮即可切换Dreamweaver CC的主题颜色。 【学生】聆听、思考、理解、记忆 通过讲解,让学生了解Dreamweaver CC的工作界面,通过讲解和对Dreamweaver CC的分析,掌握Dreamweaver CC软件的初始化设置
课堂抢答 (10 min) 【教师】提出Dreamweaver CC工作界面不同组成部分的名称,让学生抢答各组成部分的作用 【学生】聆听、抢答、说出Dreamweaver CC工作界面不同组成部分的作用 通过课堂抢答加深学生对所学知识的认识,活跃课堂气氛
第二节课
问题导入
(5 min) 【教师】提问引出新知识点 我们上节课已经了解了Dreamweaver CC工作界面,那么大家想一想如何调整Dreamweaver CC工作界面呢? 【学生】思考、发言 用问题导入,让学生主动探究调整Dreamweaver CC工作界面
任务实施
(25 min) 【教师】演示调整Dreamweaver CC工作界面的操作,并对其进行分析 使用Dreamweaver CC制作或编辑网页时,经常需要打开、关闭某个面
板,或对其工作界面进行各种调整。下面学习调整Dreamweaver CC工作界
面的常见操作。 (1)快速打开与关闭面板组。默认状态下,文档窗口右侧为面板组。按“F4”键可将其关闭;再次按“F4”键可恢复原来的状态。 (2)折叠与扩展面板组。单击面板组右上角的控制按钮 ,即可将面板组折叠起来,想要展开时再次单击该按钮 即可。 (3)添加面板。单击“窗口”→“行为”菜单,即可在工作区中添加“行为”面板。 (4)移动面板。鼠标左键按住“行为”面板的上方,向工作区右侧的面板组上方靠近,面板组将显示蓝色边框,此时松开鼠标,即可将该面板合并到面板组中,如图2-14所示。 (5)关闭面板。 (6)重置工作区。 (详见教材) 【学生】观察、记录、理解,上机操作 【教师】巡堂指导,及时解决学生的问题 通过任务实施,让学生们主动参与学习,对调整Dreamweaver CC工作界面相关操作留下印象,在实践过程中理解、巩固知识点
实践探索
(10 min) 【教师】组织学生阅读“高手点拨”中的内容,尝试在Dreamweaver CC中进行更多操作 【学生】自主学习、理解、上机操作 【教师】巡堂指导,及时解决学生的问题 通过实践探索,使学生进一步巩固所学知识,了解更多关于Dreamweaver CC的知识
课堂小结
(3 min) 【教师】简要总结本节课的要点 本节课了解了Dreamweaver CC的基本界面,Dreamweaver CC软件的初始化,通过实践学习了如何调整Dreamweaver CC的工作界面。希望大家在课下多加复习,熟悉Dreamweaver CC的基本界面的元素和调整方法。 【学生】总结回顾知识点 总结知识点,巩固印象
作业布置
(2 min) 【教师】布置课后作业 (1)完成相关课后习题。 (2)找一找哪些网页能够利用Dreamweaver CC完成。 【学生】完成课后任务 延展知识面,巩固所学知识
教学反思 本节课教学整体效果不错,部分环节让学生自己阅读教材自主学习,或者通过动手操作学习Dreamweaver CC的界面组成和调整方法,学生积极性很强,上课配合度很高。在以后的学习中应该尽可能的让学生参与学习过程,避免课堂成为教师的一言堂。

展开更多......

收起↑

资源预览