《静态网页设计制作》教案全套-教学设计赵健 项目1-12 Dreamweaver 2021概述-时尚资讯网站设计综合实例

说明一、教案是教师组织实施教学活动必备的教学文件，是教学检查的必要内容，使用前通常经过系部、学院两级试教审批，改革课、新开课必须经过系(部)试教审批，学院组织对重点课程进行试教审批。试教未通过、审批手续不全的不得用于授课。二、教案的编写应依据人才培养方案和课程标准，教师在充分研究教材的基础上，区分教学对象、课程类别、教学内容等进行编写，应体现任课教师的风格。不同教学班次应使用不同的教案。三、任课教师在授课前应根据学科、专业、方向的发展情况、新的教学要求以及教学对象的实际水平，及时补充、修改或重新进行教案的编写，以保持教学活动的先进性和适用性。四、教案中每次课后应有留给学生的作业(如思考讨论题、学生应查阅的有关书籍资料等)、小结等。课程结束后教案的教学后记中应有课程总结(包括基本情况、好的方面、存在问题、改进措施、意见建议等内容)。五、授课过程中，教案由教师本人负责保管，授课使用结束后由教研室指定专人于每学期结束前统一送至教学档案室存档。教案审批表学年度第2学期课程静态网页设计制作授课对象计算机专业专科生专业计算机和大数据班级人数80授课学时50（理论25、实验25）授课地点院部院部领导：年月日学校主管教学副校长：年月日备注年月日《静态网页设计制作》教学方案内容(标题)项目一Dreamweaver2021概述 任务1Dreamweaver2021窗口组成 任务引入 知识准备 一、菜单栏 二、文档工具栏 三、通用工具栏 四、“插入”面板 五、文档窗口 六、“属性”面板 七、浮动面板组 任务2文件操作 任务引入 知识准备 一、打开文件 二、创建文件 三、存储文件 四、设置文档属性 项目总结 项目实战 实战一认识Dreamweaver2021界面 实战二新建HTML文件并保存 课时4教学目标及要求知识目标：熟悉Dreamweaver2021的启动方法；熟悉Dreamweaver2021的工作界面；掌握Dreamweaver2021的文件操作。能力目标：为后续学习Dreamweaver2021积累必要的背景知识。素养目标：使学生对Dreamweaver2021有一个较系统和全面的认识。重点难点及其处理重点:（1）Dreamweaver2021窗口组成。（2）文件操作。难点：（1）认识Dreamweaver2021界面。（2）新建HTML文件并保存。处理方法：结合实例，有针对性对学习Dreamweaver2021积累必要的背景知识。教学方法（1）讲授（2）加强课堂指导，及时解决学生学习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）新建HTML文件并保存。（2）预习：项目二。备注

《静态网页设计制作》教学方案内容(标题)项目二HTML与CSS基础 任务1HTML基础 任务引入 知识准备 一、HTML语言概述 二、HTML的语法特性 任务2常用的HTML标签 任务引入 知识准备 一、文档的结构标签 二、注释标签 三、文本格式标签 四、排版标签 五、列表标签 六、表格标签 七、表单标签 八、其他标签 任务3CSS基础 任务引入 知识准备 一、CSS概述 二、CSS样式表的组成 任务4CSS设计器 任务引入 知识准备 一、创建和附加样式表 二、定义媒体查询 三、定义CSS选择器 四、设置CSS属性 综合案例CSS样式的应用 项目总结 项目实战 实战一编写网页文件 实战二用CSS样式控制文本样式 课时6教学目标及要求知识目标：了解HTML语法的3种表达方式；熟悉HTML中常用的一些标签；掌握创建CSS规则的方法；学会如何定义媒体查询；学会如何设置CSS属性；学会利用CSS样式定义一些特殊的HTML属性。能力目标：能够灵活应用HTML与CSS基础知识。素养目标：基础入手，不断更新所学知识，培养持之以恒的学习态度。重点难点及其处理重点:（1）常用的HTML标签。（2）CSS设计器。难点：（1）编写网页文件。（2）用CSS样式控制文本样式。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授（2）加强课堂指导，及时解决学生学习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）用CSS样式控制文本样。（2）预习：项目三。备注

《静态网页设计制作》教学方案内容(标题)项目三构建本地站点 任务1站点概述 任务引入 知识准备 一、Internet服务器和本地计算机 二、本地站点与远端站点 任务2构建本地站点 任务引入 知识准备 任务3管理本地站点和站点文件 任务引入 知识准备 一、管理站点 二、操作站点文件或文件夹 任务4站点发布 任务引入 知识准备 一、配置远程站点 二、上传、下载与同步更新 项目总结 项目实战 实战一在本机上创建站点bz 实战二为创建的站点设置服务器 课时4教学目标及要求知识目标：了解服务器与本地计算机的联系与区别；了解远端站点和本地站点的区别；掌握构建本地站点的方法和步骤；学会打开、编辑、删除和复制站点；学会创建、删除、编辑站点文件，刷新本地站点文件列表。能力目标：能够根据自己的需要掌握构建本地站点的方法。素养目标：学会理论联系实际，明白实践是检验真理的唯一标准。重点难点及其处理重点：（1）站点概述；（2）站点概述。难点：（1）在本机上创建站点bz。（2）为创建的站点设置服务器。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）为创建的站点设置服务器。（2）预习：项目四备注

《静态网页设计制作》教学方案内容(标题)项目四文本与图像 任务1在网页中插入文本 任务引入 知识准备 一、插入文本 二、设置文本属性 三、创建列表项 四、插入日期 任务2在网页中插入图像 任务引入 知识准备 一、关于图像 二、插入图像 三、图像的属性 四、修改图像尺寸 五、创建翻转图像 六、设置背景图像 项目总结 项目实战 实战一在网页中插入文本和日期 实战二在网页中插入图像和文字 课时4教学目标及要求知识目标：学会在网页中插入文本并设置文本属性；学会在网页中插入日期；学会创建各种链接并管理链接；学会使用热点制作图像映射。能力目标：使学生具备操作网页中文本与图像的相关能力。素养目标：体会传统文化设计作品的构图精髓，善于发现和融合特色元素。重点难点及其处理重点：（1）在网页中插入文本；（2）在网页中插入图像。难点：（1）在网页中插入文本和日期。（2）在网页中插入图像和文字。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）在网页中插入图像和文字。（2）预习：项目五。备注

《静态网页设计制作》教学方案内容(标题)项目五制作超链接 任务1认识超级链接 任务引入 知识准备 任务2制作、管理超链接 任务引入 知识准备 一、创建文本超链接 二、创建图像链接 三、链接到命名锚点 四、创建E-Mail链接 五、虚拟链接和脚本链接 六、使用“URLs”面板管理超链接 任务3使用热点制作图像映射 任务引入 知识准备 综合实例文本与链接网页实例 项目总结 项目实战 实战一创建脚本链接 实战二制作图像映射 课时4教学目标及要求知识目标：学会创建文本、图像和E-Mail链接;学会连接到命名锚点;学会利用“URLs”面板管理超链接;学会使用热点制作图像映射。能力目标：能够熟练掌握制作使用超链接的相关知识。素养目标：学会不求甚解，实事求是，真正掌握所学内容。重点难点及其处理重点：（1）认识超级链接；（2）制作、管理超链接。难点：（1）创建脚本链接。（2）制作图像映射。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）制作图像映射。（2）预习：项目六。备注

《静态网页设计制作》教学方案内容(标题)项目六制作多媒体网页 任务1添加声音 任务引入 知识准备 一、关于声音 二、链接到音频文件 三、嵌入音乐文件 任务2HTML5多媒体 任务引入 知识准备 一、插入HTML5视频 二、设置HTML5视频属性 三、插入HTML5音频 四、设置HTML5音频属性 任务3Flash对象 任务引入 知识准备 一、添加Flash动画 二、插入Flash视频内容 三、修改Flash视频属性 项目总结 项目实战 实战一在网页中添加声音 实战二插入Flash视频 课时4教学目标及要求知识目标：学会在网页中插添加声音；学会在网页中插入HTML5媒体对象；学会在网页中插入Flash对象。能力目标：能够掌握制作多媒体网页的方法。素养目标：培养学生对本课程的兴趣以及自主探索能力。重点难点及其处理重点：（1）添加声音；（2）HTML5多媒体。难点：（1）在网页中添加声音;（2）插入Flash视频。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）插入Flash视频。（2）预习：项目七。备注

《静态网页设计制作》教学方案内容(标题)项目七用表格规划网页 任务1创建表格 任务引入 知识准备 一、创建表格、单元格 二、创建嵌套表格 任务2表格操作 任务引入 知识准备 一、选定表格对象 二、设置表格和单元格属性 三、扩展表格模式 四、增加、删除行或列 五、拆分、合并单元格 六、在表格中添加内容 七、复制、粘贴单元格 八、导出/导入表格数据 九、表格排序 综合案例利用表格布局页面 项目总结 项目实战 实战一创建表格和嵌套表格 实战二对表格进行排序 课时4教学目标及要求知识目标：学会创建表格、设置表格和单元格属性;掌握表格的各种操作。能力目标：能够让学生掌握用表格规划网页的方法。素养目标：注重培养分析能力，主动拓宽自己的视野，充分发挥创造力。重点难点及其处理重点：（1）创建表格；（2）表格操作。难点：（1）创建表格和嵌套表格；（2）对表格进行排序。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）对表格进行排序。（2）预习：项目八备注《静态网页设计制作》教学方案内容(标题)项目八Div+CSS布局 任务1Div+CSS概述 任务引入 知识准备 任务2CSS盒模型 任务引入 知识准备 一、CSS盒模型简介 二、常用的盒模型属性 任务3CSS层叠顺序 任务引入 知识准备 一、外部样式 二、内部样式 三、行内样式 四、导入样式 任务4CSS布局块 任务引入 知识准备 一、创建div标签 二、编辑div标签 三、可视化CSS布局块 任务5常用CSS布局版式 任务引入 知识准备 一、一列布局 二、两列布局 三、三列布局 综合案例Div标签应用实例 项目总结 项目实战 实战一制作简易公告栏 实战二利用CSS规则隐藏布局块 课时4教学目标及要求知识目标：了解CSS盒模型的属性；了解CSS的四种样式的区别；学会创建和编辑div标签以及设置CSS布局块的可视化；学会创建常用的CSS布局版式。能力目标：能够让学生利用div+css布局网页。素养目标：培养积极探索、迎难而上，培养坚持不懈的科学精神。重点难点及其处理重点：（1）Div+CSS概述。（2）CSS盒模型。难点：（1）制作简易公告栏。（2）利用CSS规则隐藏布局块。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）利用CSS规则隐藏布局块。（4）预习：项目九。备注《静态网页设计制作》教学方案内容(标题)项目九应用表单 任务1创建表单网页 任务引入 知识准备 一、插入表单 二、文本字段和文件域 三、选择框 四、单选按钮与复选框 五、按钮 六、图像按钮 七、隐藏域 任务2处理表单 任务引入 知识准备 项目总结项目实战 实战一文档中插入文本字段 实战二在文档中插入复选按钮组 课时4教学目标及要求知识目标：学会插入表单，在表单中插入文本字段和文件域；学会插入选择框、单选按钮和复选框；学会插入图像按钮和其他各种按钮；学会处理表单。能力目标：能够掌握表单的插入和应用方法。素养目标：培养认真细致的工作作风和精益求精的工匠精神。重点难点及其处理重点：（1）创建表单网页；（2）处理表单。难点：（1）文档中插入文本字段。（2）在文档中插入复选按钮组。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）在文档中插入复选按钮组。（2）预习：项目十。备注《静态网页设计制作》教学方案内容(标题)项目十模板与库 任务1模板 任务引入 知识准备 一、“模板”面板 二、建立模板 三、定义可编辑区域 四、定义重复区域 五、定义可选区域 六、定义嵌套模板 七、应用模板创建文档 八、应用模板到页 九、修改模板并更新站点 十、管理模板 任务2库 任务引入 知识准备 一、库面板 二、创建及使用库项目 三、操作库项目 综合案例模板与库的应用 项目总结 项目实战 实战一在模板文档中插入可选区域 实战二制作版权声明 课时4教学目标及要求知识目标：学会建立模板并设置模板属性；学会定义可编辑、重复和可选区域；学会定义嵌套模板以及应用模板创建网页；学会创建库项目和操作库项目。能力目标：能够掌握发布与部署的方法。素养目标：在掌握技能目标的同时，培养读者融会贯通、严谨务实的优秀品质。重点难点及其处理重点：（1）模板；（2）库。 难点：（1）在模板文档中插入可选区域。（2）制作版权声明。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：9787111363415．北京：\o"电子工业出版社"\o"机械工业出版社"机械工业出版社，2016[2].李妍//郭峰//柴俊霞．

Web静态网页设计与排版．ISBN：9787302419471．北京：\o"清华大学出版社"清华大学出版社，2016[3].任长权//李可强//闫鹏飞

．静态网页制作技术教程．ISBN：9787113233990.北京：\o"中国铁道出版社"中国铁道出版社，2017及其要求课外作业（1）制作版权声明。（2）预习：项目十一。备注《静态网页设计制作》教学方案内容(标题)项目十一Dreamweaver2021的内置行为 任务1行为概述 任务引入 知识准备 一、事件与动作 二、“行为”面板 三、附加行为到页面元素 四、编辑行为 任务2Dreamweaver2021的内置行为 任务引入 知识准备 一、调用JavaScript 二、改变属性 三、检查插件 四、jQuery效果 五、转到URL 六、交换图像/恢复交换图像 七、弹出信息 八、打开浏览器窗口 九、显示-隐藏元素 十、检查表单 十一、设置文本 十二、预先载入图像 项目总结 项目实战 实战一为网页按钮调用JavaScript行为 实战二改变标签的属性 课时4教学目标及要求知识目标：了解事件和动作的概念以及“行为”面板的功能；学会附加行为到页面元素以及编辑行为；学会创建Dreamweaver几种常见的内置行为。能力目标：能够学会创建Dreamweaver几种常见的内置行为。素养目标：学会理论联系实际，明白实践是检验真理的唯一标准。重点难点及其处理重点：（1）行为概述；（2）Dreamweaver2021的内置行为。 难点：（1）为网页按钮调用JavaScript行为。（2）改变标签的属性。处理方法：结合实例讲授及演示操作；并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献[1].胡汉辉//孔岚．静态网页设计与制作．ISBN：97871113634