4.2 获取网站素材 教案 2024—2025学年重大版（2023）初中信息科技七年级上册

重庆市商务学校备课教案 七年级信息技术刘亭亚 课题 4.2 获取网站素材 拟用1课时 年 月 日 教 学 目 标 1. 了解中国网站的发展与影响； 2. 明确网站设计的基本步骤，按需求合理规划网站功能； 3. 根据需求收集、整理、加工网页素材； 4. 根据实际需求选择恰当的网页设计工具设计网页； 5. 了解域名的功能，发布网页。 德育教育 激发学生主动学习的兴趣，树立正确的信息意识。 重点 根据需求收集、整理、加工网页素材。 难点 根据实际需求选择恰当的网页设计工具设计网页。 教具 多媒体课件。 教法 教师讲解、小组讨论、独立思考 课型：新课 作业 板书设计 标注 教师活动 学生活动 一、引入 收集、整理、加工素材 通过活动 1，同学们完成了网站建设的前期规划，明确了网站主题。接下来需要收集校园的图片、文字和视频素材并对它们进行分类、筛选和加工，才能将这些素材应用到网站页面设计中。 二、知识链接 1.万维网 万维网（WWW）是 World Wide Web 的简称，也称为 Web、3W 等。Web 是基于客户机 / 服务器方式的信息发现技术和超文本技术的综合。Web 服务器通过超文本标记语言（HTML）把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点，超文本之间采用超文本链接的方式形成一个庞大的信息资源库。 2.构成网页的元素 网页中的常见构成元素主要包括以下几种类型：文本、图像、超级链接、视频音乐、动画、表单和布局控件等。 （1）文本、图像、动画、视频 文本、图像、动画、视频是网页中的可见元素，是用户访问网页直接看到的内容。 （2）超级链接 超级链接在本质上属于一个网页的组成部分，它是一种同其他网页或站点进行链接的元素。所有网页链接在一起后，才能真正构成一个网站。超级链接是 Web 页面区别于其他媒体的重要特征，网页浏览者只要单击网页中的超级链接就可以自动跳转到超级链接的目标对象，可能是打开另一个网页，或进入另一个网站，或打开电子邮箱等。 （3）表单 表单用来完成网页的交互设计，其功能是接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端进行处理。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。校园网站中的“留言板”“用户注册”等板块都是表单的应用。 （4）布局控件 布局控件用来控制网页中信息的布局方式。早期布局控件主要由表格完成，随着在线网站设计的兴起，布局控件变得更快捷和直观。 3.HTML HTML 是一种基于 SGML（标准通用标记语言）的标记语言，是 Web 用于编辑网页的主要工具。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的互联网资源连接为一个整体。HTML 文本是由 HTML 命令组成的描述性文本，可以是说明文字、图形、动画、声音、表格、链接等。 三、方法与工具 1. 收集网页设计所需素材 根据网页构成元素，可以明确校园网页设计需要用到的素材主要包括文本、图像、音视频。随着 HTML5 标准的应用，Flash 动画已经被 GIF 图像和视频所替代，可以不在收集素材的范围之内，而超级链接、表单、布局控件主要由网页设计工具提供，无须收集。 （1）文本素材 校园网页中文本素材可由小组成员分工撰写或直接从学校微信公众号获取，主要包括学校简介、学校发展、学生活动、校园新闻、教学科研等方面的内容。 （2）图像素材 校园网页中的图像素材可使用手机、照相机等设备进行拍摄或从学校微信公众号获取，主要包括学校 Logo、景色照片、教师照片、学校各种活动照片和文本素材对应的图像等，但要注意涉及人物肖像的图像需要征得肖像所有权人的同意。 （3）音视频素材 校园网页中的音视频素材由小组成员进行录制、拍摄，也可以利用图像素材使用相应工具软件生成视频。 2.将素材分类整理至素材文件夹 收集的校园网站素材应该按图片、文档、视频及音频等分类存放到专门建立的计算机中素材文件夹或保存到云盘、网盘文件夹中，以方便后期处理及网页内容的填充。收集的素材可以通过以下几种形式传输至学校计算机教室的计算机中存放。 ①利用 USB 数据线将手机或照相机中数据保存到学校计算机的硬盘中。 ②利用 QQ 的“我的电脑”会话，将手机中的素材发送到“我的电脑”中。在学校的计算机上登录 QQ，接收发送的文件并保存。 ③将素材添加到电子邮件的附件中发送给自己，在学校的计算机上登录电子邮箱，接收邮件并下载附件保存。 ④直接在云盘、网盘中建立素材文件夹，所有素材上传到该文件夹，在学校计算机上登录云盘、网盘获取素材。 3. 网页素材处理技巧 （1）文字素材 网页中的文字一般不需要做过多处理，只需要在网页设计时按一定规范设置字体、字号、颜色、行距等。 （2）图像素材 网页中的图像素材处理一般要满足以下要求。 ①图像大小：一般在 200 KB 以下，图片过大会影响网站加载速度。 ②图像清晰度：要在控制大小的情况下兼顾清晰，清晰的图像可以给访问者带来更好的阅读体验。 ③图像的尺寸：网页中的图像根据用途不同，尺寸也有所不同。一般来说，网页背景图尺寸为 1 920 像素 ×650 像素；首页横幅尺寸为 1 920 像素 ×450像素（450~650 像素）；其他图像尺寸一般有 640 像素 ×640 像素、480 像素 ×360 像素等几种规格。 （3）视频素材 网页中的视频素材处理一般要满足以下要求。 ①视频格式：尽量采用主流的视频格式，如 MP4。 ②视频大小：为了保证网页加载速度及播放流畅程度，视频大小一般不要超过 20 MB（根据视频功能不同，大小可以有不同的标准）。 ③视频声音：在网页设计中使用视频时要设置主动静音，让用户决定是否打开视频声音。 ④视频长度：网页中的视频不能过长，一般在 60 秒之内（视频网站除外），太长的视频会分散访问者的注意力。 四.扩展阅读 1.HTML 的前世今生 五.思考与练习 基础部分 1. 万维网是 World Wide Web 的简称，也称为　　 　、　　　等。Web 是基于　　　　　的信息发现技术和超文本技术的综合。 2. 简要描述网页中的构成元素及各自的功能。 拓展部分 1. 请上网查阅资料，简要描述 HTML5 标准的新特性。 2. 请讨论可以通过哪些方式更安全、便捷地将收集到的素材在学校计算机教室使用？ 六、小结 教后记 本节课教授学生如何合法合规地获取网站素材，强调版权意识。学生们积极实践，搜索技巧与审美眼光均有提升。 5 学科网（北京）股份有限公司 $$