《（中职）Web前端设计基础 项目一-1电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目一-1电子教案.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）Web 前端设计基础 项目一-1 电子教案教学课题教学课题项目 1 HTML 文档结构1.1 项目描述、1.2 知识准备授课班级授课班级授课时间授课时间教学目标教学目标知识目标知识目标1.掌握 HTML 5 文件的基本结构；2.掌握 HTML 5 基本标签；3.掌握 Sublime 编辑器的使用；4.了解 HTML5 语法的变化；5.了解 Chrome 浏览器中的开发者工具。能力目标能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析学情分
2、析网络已经成为人们学习、工作和娱乐中不可缺少的一部分，网页设计也成为学习计算机知识的重要内容之一。本项目来学习 HTML 基本概念和编写方法及浏览 HTML 文件的方法，使读者初步了解 HTML。教学重点教学重点1.HTML 5 文件的基本结构；2.HTML 5 基本标签；3.Sublime 编辑器的使用。教学难点教学难点1.HTML 5 文件的基本结构；2.HTML 5 基本标签；3.Sublime 编辑器的使用技巧。教学方法教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学过程教学环节教学环节教学内容教学内容师生活动师生活动新课导入给学生展示一个简单的网页页面，并通过网页页面的源
3、代码，导入 HTML 文件的基本结构。教师提出问题，学生可分组讨论，协作探究。技能学习一、一、HTML5HTML5 文件基本结构文件基本结构一个 HTML 5 文档中，必须包含标签，并且放在一个 HTML 5 文档中的开始和结束位置。之 间 通 常 包 含 两 个 部 分，分 别 为和，head 标签包含 html 头部信息，例如文档标题、样式定义等。body 包含文档主体部分，即网页内容。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目一-1 电子教案二、二、HTML5 基本标签基本标签1.文档类
4、型说明文档类型说明2.HTML 标签标签3.head 标签标签（1）标签中的标签HTML 页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在 HTML 文档中，标题信息设置在与之间。标题标签以开始，以结束。语法格式如下：（2）标签中的标签标签是标签内的一个辅助性标签。标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎来搜索到页面的信息。（3）标签中的标签标签用于外部文件的链接，一般用于链接外部CSS 样式表文件和 JS 文件。【例 1-1】创建一个 link链接外部 CSS 文件的实例。新建 CSS 文件夹（此文件夹与 1-1.html 文件在同
5、一目录中），在 CSS 文件夹中创建 style.css 文件。在 chrome 浏览器中预览，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目一-1 电子教案（4）标签中的标签 标签用于定义客户端页面脚本。（5）标签中的标签标签用于定义元素的 CSS 样式。【例 1-2】将例 1-1 用内嵌样式表示。4.body 标签标签网页所要显示的内容都要放在 body 标签内，它是 HTML文件的重点，标签的作用就是定义了网页主题内容的开始和结束。5.页面注释标签页面注释标签注释是在 HTML
6、 代码中插入描述性的文本，用来解释该代码或提示其他信息。三、三、Sublime 编辑器的使用编辑器的使用1Sublime Text 编辑器的安装编辑器的安装2Sublime Text 3 下下 Emmet 的使用技巧的使用技巧四、四、HTML 5 语法的变化语法的变化五、五、Chrome 浏览器的开发者工具浏览器的开发者工具1如何打开开发者工具如何打开开发者工具2开发者工具简介开发者工具简介教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳一、HTML 5 基本结构如图所示。二、HTML 5 基本标签及说明如下表所示。教师讲授
7、，学生归纳总结，并作适当的笔记。（中职）Web 前端设计基础 项目一-1 电子教案三、Sublime 编辑器的使用技巧课后作业一、选择题1.所 有 的 HTML 标 签 都 有 固 定 的 格 式，必 须 由_符号括起来。A()BC/*/D/2.下列_标签用于显示网页标题。ABCD3.下列_标签用于显示网页主体内容。ABCD二、简答题1.简述 HTML5 文件的基本结构。2.简述 Sublime 编辑器的使用技巧。三、上机实训上机完成例 1-1 和例 1-2 的实例操作。学生上机完成任务并提交，进行分组互评。教学反思教学反思（中职）Web 前端设计基础 项目一-1 电子教案感谢您的支持与使用感谢您的支持与使用如果内容侵权请联系删除如果内容侵权请联系删除仅供教学交流使用仅供教学交流使用