4.2 获取网站素材 教案重大版 信息科技七年级上册.docx

课题

4.2获取网站素材

拟用1课时

年月日

教

学

目

标

1.了解中国网站的发展与影响；

2.明确网站设计的基本步骤，按需求合理规划网站功能；

3.根据需求收集、整理、加工网页素材；

4.根据实际需求选择恰当的网页设计工具设计网页；

5.了解域名的功能，发布网页。

德育教育

激发学生主动学习的兴趣，树立正确的信息意识。

重点

根据需求收集、整理、加工网页素材。

难点

根据实际需求选择恰当的网页设计工具设计网页。

教具

多媒体课件。

教法

教师讲解、小组讨论、独立思考

课型：新课

作业

板书设计

标注

教师活动

学生活动

一、引入

收集、整理、加工素材

通过活动1，同学们完成了网站建设的前期规划，明确了网站主题。接下来需要收集校园的图片、文字和视频素材并对它们进行分类、筛选和加工，才能将这些素材应用到网站页面设计中。

二、知识链接

1.万维网

万维网（WWW）是WorldWideWeb的简称，也称为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，接收发送的文件并保存。

③将素材添加到电子邮件的附件中发送给自己，在学校的计算机上登录电子邮箱，接收邮件并下载附件保存。

④直接在云盘、网盘中建立素材文件夹，所有素材上传到该文件夹，在学校计算机上登录云盘、网盘获取素材。

网页素材处理技巧

（1）文字素材

网页中的文字一般不需要做过多处理，只需要在网页设计时按一定规范设置字体、字号、颜色、行距等。

（2）图像素材

网页中的图像素材处理一般要满足以下要求。

①图像大小：一般在200KB以下，图片过大