《web前端设计》教案08.pdfVIP

教案

授课时间2018年4月25日第08周第5-8节

课程内容项目三BOM和DOM应用（HTML结构、CSS属性）

授课班级2016数字媒体应用技术1、2合班授课地点S301

1、了解DOM结构

知识目标

2、掌握HTML元素及常用CSS属性

教学目标能力目标1、能够在webstorm中直接编写代码制作网页

1、具有认真负责、吃苦耐劳、实事求是的工作态度和严谨细致的工作

素质目标

作风、良好的职业道德。

重点

1、HTML结构及常用元素

2、CSS常用属性

重点难点

难点

解决方法

JavaScript操作CSS属性

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习，如有疑问，

可发讨论和记笔记。

教学准备

3、教师登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情

况。根据学生课前预学提交的问题讨论，有针对性地调整知识点讲解的内容。

4、检查机房的广播设备。

课后作业课后练习

能力训练项

任务使用HTML编写网页，JavaScript读取并显示网页元素内容

目

教学过程

（根据教学设计延续）

一、任务引入

1、上一节课我们学习了定时器对象，并制作了在网页中飘动的广告。现在有这么一个情况，公司小王制

作了一个简单的注册页面，客户要求能在网页中显示注册页面各个网页元素的值。这种效果常规的uikit

和bootstrap等框架是无法实现的。那我们需要怎么样实现？引入本节课任务——使用HTML编写网页，

JavaScript读取并显示网页元素内容。

2、教师展示任务的效果。

二、任务内容

通过代码方式手工制作简单网页，熟悉常用HTML控件使用方法。通过代码方式直接制作网页，熟悉

HTML结构及常用的控件使用方法，并通过JavaScript尝试输出控件的值。

三、任务分析

1.使用webstorm，直接从代码的方式插入相关的控件。

2.测试控件各个属性的值，在代码中是如何表示的。

3.使用getElementById读取控件的value属性值。

四、知识讲解

1、表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选

框、复选框等等）输入信息的元素。

表单使用表单标签（form）定义。多数情况下被用到的表单标签是输入标签（input）。输入类

型是由类型属性（type）定义的。

提问：什么情况下用到表单？

答案：需要把网页数据发送给后台时。

2、文本域（TextFields）

3、单选按钮（RadioButtons）

提问：为什么把男性和女性的radio都设置为同一个name？

答案：方便以后通过name属性查找所有的radio控件。

4、复选框（Checkboxes）

5、下拉选择框（select）

6、多列文本输入框（textarea）

7、HTML5表单

HTML5例子

邮件:inputtypeemailnameuser_email/

网址:inputtypeurlnameuser_url/

小数:inputtypenumbernamepointsmin1max10/

范围：inputtyp