Web前端开发之网页设计 教案全套 单元16 Web前端开发概述Bootstrap综合项目实战.docx

《Web前端开发之网页设计 教案全套 单元16 Web前端开发概述Bootstrap综合项目实战.docx》由会员分享，可在线阅读，更多相关《Web前端开发之网页设计 教案全套 单元16 Web前端开发概述Bootstrap综合项目实战.docx（38页珍藏版）》请在第一文库网上搜索。

1、Web前端开发之网页设计课程教学单元设计教学单元1Web前端开发概述授课教师：授课班级：学时：2教学条件预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件教学素材教材、教学文档、教学课件、案例项目库、教学平台等教学目标设计知识目标：B/S体系架构B/S架构工作原理前端后端的基本概念(4)网站与网页的基本概念(5)静态网页与动态网页的概念(6)浏览器内核工作原理(7)HBui1derX的使用能力目标：了解WEB系统的工作原理以及WEB相关基本概念；了解主流浏览器。了解前端常用技术，以及前端技术的发展前景。(3)了解前端常用开发工具，掌握HBUiIderX的下载、安装及常用

2、快捷键。教学内容B/S体系架构B/S架构工作原理前端后端的基本概念(4)前后端开发技术栈(5)网站与网页的基本概念(6)静态网页与动态网页的概念主流浏览器简介(8)浏览器内核工作原理前端常用技术(10)前端技术发展前景(11)HBUikierX的使用重点：B/S体系架构B/S架构工作原理静态网页与动态网页的概念(4)浏览器内核工作原理前端常用技术(6)HBuiIderX的使用难点：B/S体系架构B/S架构工作原理(3)浏览器内核工作原理(4)HBui1derX的使用任务1-1：Web前端开发概述(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入什么是Web前端开发?什么是Web全栈开发

3、？什么是前端、后端？教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)B/S体系架构B/S架构工作原理(3)前端后端的基本概念(4)网站与网页的基本概念(5)静态网页与动态网页的概念(6)浏览器内核工作原理(7)HBUikIerX的使用启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：网站内容、样式、交互的演操作2：前后端数据交互演示。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1区分静态网页与动态网页。实战2：不同浏览器解析的差异。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论

4、(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结前后端的技术栈区别。浏览器兼容性。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业11在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业Web前端开发之网页设计课程教学单元设计教学单元2HTM1基础授课教师：授课班级：学时：12教学条件预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件教学素材教材、教学文档、教学课件、案例项目库、教学平台等教学目标

5、设计知识目标：(8)HTM1基本概念HTM1文档的基本结构(IO)HTM1标签与元素(11)文本类标签的使用(12)图片及路径的使用(13)超链接的使用(14)列表的使用(15)表格的使用(16)表单的使用(17)容器与框架的使用能力目标：(4)了解HTM1的基本概念。(5)掌握HTM1常用标签的用法。(6)能够使用文本类标签对HTM1文档中的文字排版设计。能够使用img标签加载图片。(8)能够使用超链接标签实现跳转。(9)能够使用列表标签定义列表。(10)能够使用表格展示数据。(11)能够使用表单控件设计表单。(12)能够使用器与框架标签进行网页布局设计。教学内容(12) HTM1基本概念，

6、HTM1文(13) HTM1标签与元素，HTM1(14)文本类标签的使用。(15)图片标签的使用。(16)超链接的使用。(17)列表标签的使用。(18)表格标签的使用。(19)表单标签及表单控件的使用(20)容器与框架标签的使用。档的基本结构。属性O重点：文字排版设计。(8)插入图片。超链接的使用。(10)表格设计。(11)表单设计。(12)D1V的使用。难点：转义字符的含义。相对路径与绝对路劲。(3)锚点超链接。(4)单元格的合并。(5)表单控件的使用。(6)DIV标签划分页面。任务2-1：了解HTM1(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入什么是HTM1?教师讲授启发引入

7、多媒体教师：问题提问学生：问题讨论知识讲解(8) HTM1的发展史(9) HTM1文档的基本结构(IO)HTM1标签与元素(I1)HTM1属性启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：创建HTM1文档。操作2：HTM1标签属性的使用。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：创建HTM1文档,设置head、bodyO实战2：设置标签通用属性、专用属性、自定义属性值。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。(6)评估讨论实战任务完成的正确性。评估讨

8、论实战任务完成的规范性；(8)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结HTM1文档的基本构成。(4)归纳总结HTM1标签的语法格式。(5)归纳总结HTM1标签属性的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.1在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务2-2：掌握文本类标签的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入HTM1文档中文本排版设计教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)标题标签。段落标签。换行标签。(4)水平

9、线(5)文本格式化标签(6)转义字符启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用文本标签排版设计。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：使用标题标签定义标题。实战2：使用段落与换行标签分段。实战3：创建水平线。实战4：格式化文本实战5：插入转义字符动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。(3)评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师

10、：点评激励课堂总结(1)归纳总结文本排版方法。归纳总结文本格式化标签的作用。归纳总结常用转义字符的含义。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.2在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务2-3：掌握图片、路径、超链接的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入HTM1中插入图片和链接教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解图片标签。相对路径与绝对路径。超链接。(4)锚点(5)图片超链接启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1:绝对路径插入图片。操作2:

11、相对路径插入图片。操作3：超链接使用操作4：锚点超链接使用。操作4：图片超链接。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：HTM1文档中插入图片。实战2：同一页面锚点超链接。实战3：不同页面锚点超链接。实战4：图片超链接。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。(3)评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结相对路径与绝对路径的使用。锚点的使用。教师讲解多媒体课件演

12、示学生：整理笔记老师：引导创新课后作业2.3、2.4在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务2-4：掌握列表及表格的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入HTM1中展示数据表教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)有序列表(2)无序列表定义列表(4)表格启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1:列表显示文本。操作2：表格显示数据。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1:有序列表显示文本。实战2：无序列表显示文

13、本。实战3：定义列表显示文本。实战4：表格设计。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结列表的种类。归纳总结表格包含的元素。归纳总结单元格的合并方法。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后2.5、2.6在线练习作业作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务2-5：掌握表单的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入用户注册表单教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解表单的作用表单标签的属性表单控件启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1创建表单。操作2：表单控件的功能。操作3：用户注册表单设计。问题引导操作演示分析归纳多媒体系统演示