admin 管理员组

文章数量: 1086019


2024年5月10日发(作者：页面设计要求)

第9课 网页数据编码 教学设计

课 题

教

学

目

标

重

难

点

网页数据编码

1. 通过了解网页的数据编码，理解网页的数据请求与响应过程。

2. 通过体验网页表单，了解网页表单数据交互的过程。

教学重点：了解网页的数据编码，理解网页的数据请求与响应过程。

教学难点：通过体验设置网页表单，了解网页表单数据交互的过程。

课前准备

课时安排

1. 网络教室。

2. 在线应用相关软件或平台。

1课时

教师活动 学生活动 设计意图

通过话题引导，激发

参与讨论

学生学习兴趣，引出

本课课题。

一、

引

入

话题引入：你知道网页是如何实现交互的吗?你知道

网页数据有哪些编码方式?

一、网页的编码

（一）你知道什么是网页编码？

网页编码是指用于表示和处理网页文本内容的字符编码方

法。文本、图像、音频、视频等数据是通过HTML标签编码组织

在网页中，再由浏览器解释并呈现。

学习网页了解网页编码

编码

（二）常用的网页编码举例

文本的段落可以使用标签

组织；图像可以使 用标签

学习常见

了解常见的网页编

的网页编

码

了解网页的数据请

求与响应

二、

实现将其插入文本中；多媒体的播放可以使用

码

新

授

学习网页

的数据请

求与响应

二、网页的数据请求与响应

（一）你知道什么是网页的数据请求与响应？

网页需要通过请求与响应以获取HTML数据，网页中如有多

个媒体数据，则需要多次请求与响应，才能在网页上呈现。

（二）网页的数据请求与响应

学以致用

完成活动

活动一：使用标签添加图片文件，再尝试使用其他标签。

一

（一）

什么是网页中的交互？

三、网页中的交互

学习网页

网页中的交互是指用户与网页之间的互动行为，用户可以通

中的交互

了解网页中的交互

过鼠标、键盘或触摸等输入设备与网页进行交互，而网页则会根

据用户的操作做出相应的反馈或执行相应的动作。

了解网页中的交互

形式

了解创建表单的步

骤

（二）网页中的交互的形式：

1、点击链接

2、表单交互

3、按钮操作

4、鼠标悬停

5、下拉菜单

6、滚动交互

7、轮播图

8、弹出框和模态框

9、列表排序与过滤

10、拖放交互

学习网页

中的交互

形式

学习创建

表单的步

骤

（三）创建表单的基本步骤：

在HTML中，使用

标签创建表单元素，它会包裹表单

中的各个字段和提交按钮。

了解常见的表单字段

学习常见

的表单字

段

（四）常见的表单字段包括：

1、：文本输入框，用于接收用户输入的

文本。

学以致用

2、：密码输入框，用于接收用户输

入的密码，显示为密文。

3、：复选框，允许用户选择一个或

多个选项。

4、：单选按钮，允许用户从一组选项中

选择一个。

5、