《Web前端开发——网页设计》单元设计（教案）.docxVIP

《Web前端开发之网页设计》课程教学单元设计 教学单元1 Web前端开发概述 授课教师： 授课班级: 学时：2 教学条件 预装Web前端开发工具HBuilder等的计算机；局域网环境；教学广播软件 教学素材 教材、教学文档、教学课件、案例项目库、教学平台等 教学目标设计 知识目标： B/S体系架构 B/S架构工作原理 前端后端的基本概念 网站与网页的基本概念 静态网页与动态网页的概念 浏览器内核工作原理 HBuilderX的使用 能力目标： 了解WEB系统的工作原理以及WEB相关基本概念；了解主流浏览器。 了解前端常用技术，以及前端技术的发展前景。 了解前端常用开发工具，掌握HBuilderX的下载、安装及常用快捷键。 教学内容 B/S体系架构 B/S架构工作原理 前端后端的基本概念 前后端开发技术栈 网站与网页的基本概念 静态网页与动态网页的概念 主流浏览器简介 浏览器内核工作原理 前端常用技术 前端技术发展前景 HBuilderX的使用 重点： B/S体系架构 B/S架构工作原理 静态网页与动态网页的概念 浏览器内核工作原理 前端常用技术 HBuilderX的使用 难点： B/S体系架构 B/S架构工作原理 浏览器内核工作原理 HBuilderX的使用 教学过程设计 任务1-1：Web前端开发概述 （2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务 引入 什么是Web前端开发?什么是Web全栈开发？什么是前端、后端？ 教师讲授 启发引入 多媒体 教师：问题提问 学生：问题讨论 知识讲解 B/S体系架构 B/S架构工作原理 前端后端的基本概念 网站与网页的基本概念 静态网页与动态网页的概念 浏览器内核工作原理 HBuilderX的使用 启发讲解 讨论归纳 多媒体 课件演示 教师：知识讲解 学生：记录笔记 师生互动交流 示范 操作 操作1：网站内容、样式、交互的演示。 操作2：前后端数据交互演示。 问题引导 操作演示 分析归纳 多媒体 系统演示 老师：操作演示 学生：观摩思考 老师：归纳总结 实战 训练 实战1：区分静态网页与动态网页。 实战2：不同浏览器解析的差异。 动手实践 做中学 多媒体 系统操作 学生：实践操作 老师：巡视检查 评估 讨论 展示学生实战任务完成的效果。 评估讨论实战任务完成的正确性。 评估讨论实战任务完成的规范性； 记载学生实战认为完成的考核结果。 教师启发 讨论归纳 分数激励 实训项目单 学生：演示交流 老师：点评激励 课堂 总结 前后端的技术栈区别。 浏览器兼容性。 教师讲解 多媒体 课件演示 学生：整理笔记 老师：引导创新 课后作业 1.1在线练习 作业练习 在线练习平台 老师：布置作业 提出要求 学生：完成作业  《Web前端开发之网页设计》课程教学单元设计 教学单元2 HTML基础 授课教师： 授课班级: 学时：12 教学条件 预装Web前端开发工具HBuilder等的计算机；局域网环境；教学广播软件 教学素材 教材、教学文档、教学课件、案例项目库、教学平台等 教学目标设计 知识目标： HTML基本概念 HTML文档的基本结构 HTML标签与元素 文本类标签的使用 图片及路径的使用 超链接的使用 列表的使用 表格的使用 表单的使用 容器与框架的使用 能力目标： 了解HTML的基本概念。 掌握HTML常用标签的用法。 能够使用文本类标签对HTML文档中的文字排版设计。 能够使用img标签加载图片。 能够使用超链接标签实现跳转。 能够使用列表标签定义列表。 能够使用表格展示数据。 能够使用表单控件设计表单。 能够使用器与框架标签进行网页布局设计。 教学内容 HTML基本概念，HTML文档的基本结构。 HTML标签与元素，HTML属性 文本类标签的使用。 图片标签的使用。 超链接的使用。 列表标签的使用。 表格标签的使用。 表单标签及表单控件的使用。 容器与框架标签的使用。 重点： 文字排版设计。 插入图片。 超链接的使用。 表格设计。 表单设计。 DIV的使用。 难点： 转义字符的含义。 相对路径与绝对路劲。 锚点超链接。 单元格的合并。 表单控件的使用。 DIV标签划分页面。 教学过程设计 任务2-1：了解HTML （2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务 引入 什么是HTML? 教师讲授 启发引入 多媒体 教师：问题提问 学生：问题讨论 知识讲解 HTML的发展史 HTML文档的基本结构 HTML标签与元素 HTML属性 启发讲解 讨论归纳 多媒体 课件演示 教师：知识讲解 学生：记录笔记 师生互动交流 示范 操作 操作1：创建HTML文档。 操作2：HTML标签属性的使用。 问题引导 操作演示 分析归纳 多媒体 系统演