资源简介

(共48张PPT)
第1单元 第4课
跨学科活动：向世界介绍我的学校
（清华大学版）七年级
下
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
信息意识
计算思维
数字化学习与创新
信息社会责任
理解在制作网页时应当确保信息准确的问题，遵守相关法规，认识到网页制作技术对社会信息流通的影响。
熟练使用工具和信息制作宣传网页，应用于校园搜索网页，创新性地结合校园的特点进行个性化介绍，提高形象效果。
运用算法构建网页内容的逻辑架构，提升信息传递效率，能够优化网页信息呈现方式，保障网页的宣传效果。
能够主动收集校园信息内容，了解宣传网页的制作流程，理解宣传网页应具备的信息，提高信息分类和整合的意识。
02
新知导入
02
新知导入
本课中你将体验：
如何根据需求来设计网页
如何根据设计来制作网页
如何对网页进行测试并优化发布
03
新知讲解
科技文化艺术节是学校一项颇具特色的活动，每年都会邀请一大批校外人士参加。为了能让更多人了解并积极参与，需要你组建一支团队，运用语文、英语、美术等学科知识，来设计制作一份便于社交媒体转发的、以“向世界介绍我的学校”为主题的宣传网页（见图1.4.1）。
情景导入
图1.4.1 宣传网页的设计与制作
03
新知讲解
“向世界介绍我的学校”的宣传对象主要有家长、
校友及其他校外嘉 宾等。宣传的主要目的是想帮
助大家更好地了解学校的过去、现在与未来。 因
此，介绍的内容可以是学校历史、教学环境、校园文化活动与未来发展规划等。请根据你学校的具体情况，罗列网页栏目，写出与这些栏目对应的宣传内容要求，以及需要呈现的文本、图片、视频、表格、超链接、表单、框架与内嵌程序等网页基本元素，并将这些信息填入表1.4.1中。
需求分析
03
新知讲解
表1.4.1 校园科技文化艺术节的网页设计需求
网页栏目 宣传内容要求 呈现的网页基本元素
学校概况 简要清晰地呈现学校的创办历史、办学宗旨、校园环境以及整体规模。 文本、图片、表格
校园生活 生动展现丰富多样的校园文化活动、社团组织以及校园生活设施，体现学校的活力与特色。 文本、图片、视频
教学管理 全面展示学校的教学体系，包括课程设置、教学成果、师资力量等，凸显学校的教学实力。 文本、图片、表格、超链接
德育工作 展示学校的德育理念、德育活动以及学生的品德培养成果。 文本、图片、视频
招生信息 详细说明学校的招生政策、招生计划以及招生流程，方便信息获取。 文本、表格、表单、超链接
03
新知讲解
为更好地完成这项任务，你的小组需要进行分工合作。小组成员的分工角色与合作职责，既可以照搬表1.4.2的范例，也可以根据实际情况另行设计。
分工合作
03
新知讲解
表1.4.2 项目小组的分工合作表
姓名 角色 职责
姜明 组长 主持整个项目开展过程，协调处理各种情况以确保完成项 目任务。
王依 组织员 组织各成员共同开展需求分析、规划实施与交流评价等具体活动。
谢家佳 记录员 记录并整理需求分析、规划实施与交流评价等活动的相关信息。
张涛 检察员 核查各项任务的完成情况，制作汇报PPT并负责对外展示交流。
03
新知讲解
明确了网页栏目、宣传内容和网页基本元素等设计需求之后，就可以开始设计、制作并发布宣传网页了。这个过程大致可分为收集处理素材、设计制作网页与测试优化发布三个环节。
规划实施
03
新知讲解
1、收集处理材料
根据各个栏目的宣传内容与基本元素的呈现要求，收集、处理素材并进行分类存放。素材的收集途径主要有网络搜索与自主开发两种。素材的类型主要有文本、图片、音频与视频等。原始素材通常需要进行处理才可以使用。文本素材需要进行文字与
语法的检查，图片素材通常需要裁剪、拼
接及调整大小与亮度等，音视频素材则大
多需要进行剪辑。
03
新知讲解
请你根据宣传网页的设计需求，收集、处理相关素材并进行分类存放。 另外还要运用中文和英文两种语言来撰写一篇有号召力的宣传稿，用来吸引更多读者帮忙转发。
（一）素材收集
图片素材
校园建筑、校园景观、教学场景、校园活动 、师生风采。
2.视频素材
学校宣传片、 教学片段、校园活动视频。
文字素材
学校概况 、教学成果、 师资力量、 校园文化、学生故事。
03
新知讲解
《梦想起航的知识殿堂》
这里，是知识的宝库，是莘莘学子追逐理想、绽放青春的地方。
拥有悠久的历史和深厚的文化底蕴，多年来，秉持着为学生服务的教育宗旨，培养了一批又一批杰出人才，他们在各个领域发光发热，为社会的发展贡献力量。
走进校园，你会被那充满艺术气息的建筑和如诗如画的风景所吸引。现代化的教学楼、藏书丰富的图书馆、设施完备的体育馆，为师生们提供了优良的教学和学习环境。
亲爱的朋友们，无论你来自何方，欢迎你加入我们这个温暖的大家庭。让我们一起携手，向着未来，扬帆起航！
03
新知讲解
The Hall of Knowledge Where Dreams Set Sail
Here is a treasure house of knowledge, a place where countless students chase their ideals and blossom their youth.
With a long history and deep cultural heritage, over the years, upholding the educational purpose of serving students, it has cultivated a batch after batch of outstanding talents, who shine in various fields and contribute to the development of society.
Walking into the campus, you will be attracted by the art-filled buildings and picturesque scenery. The modernized teaching building, the rich library and the well-equipped gymnasium provide an excellent teaching and learning environment for teachers and students.
Dear friends, no matter where you come from, you are welcome to join our warm family. Let's join hands together and set sail towards the future!
03
新知讲解
阅读
宣传稿属于呼吁号召类的公文，通常有明确的发文对象与发文身份，要全格式书写，即“标题+称谓+正文+落款”。其中标题要吸引人，正文则要介绍宣传的内容、作用与意义，并在结尾鼓励大家积极转发。
03
新知讲解
2、设计制作网页
宣传网页的版面布局设计应与其结构和内容有关，如图1.4.2所示。例如，如果设计的是适用于智能手机、平板电脑等移动终端浏览的“一张网页”结构，那么导航栏与活动简介通常放在版面的上方，其他栏目内容则依次放在下面，以便于用户浏览。如果是为台式计算机设计的“一张主页+多张子页”结构，则导航栏与活动简介应置于主页，其他栏目内容则分布在各个子页中。
03
新知讲解
“一张网页”结构的版面布局
“一张主页+多张子页”结构的版面布局
主页
子页
03
新知讲解
应该根据大多数浏览者习惯的终端设备，确定网页的数量结构。另外， 还可以通过网络了解更多的网页版面设计知识，并将其应用到宣传网页的 设计中。请将设计结果绘制在下方空白处。
03
新知讲解
配色方案也是网页设计的一项重要内容。科学、合理的网页配色，能让读者赏心悦目，并激发其深入阅读的兴趣。可以根据宣传的主题，选用适当的色彩，并运用互补色、相似色等色彩理论知识进行配色。
03
新知讲解
阅读
互补色是指色轮（见图1.4.3）上相对的两
个颜色。比如蓝色和橙色、红色和绿色、
黄色和紫色等。互补色具有非常强烈的对
比度，在颜色饱和度很高的情况下，可以呈现很强的视觉效果。
相似色是指在色轮上相邻的三个颜色。运用相似色可以在同一个色调中，创造出视觉上的丰富质感和层次感。
03
新知讲解
图1.4.3 色轮
03
新知讲解
在制作宣传网页时，要选择适用的开发工具。可供选择的开发工具，既有HTML之类的编程语言，也有美篇之类的可视化开发工具，甚至可以直接利用微博、公众号等社交媒体进行编辑和发布。
03
新知讲解
阅读
H5网页是指采用HTMI5前端技术设计的网页。它既包含文本图片、音频、视频与动画等传统网页元素，也有表单、投票与分享等新功能，因此被称为交互式多媒体广告页面，常用于智能手机上浏览的网页。
03
新知讲解
请根据小组成员的技术能力、实验室条件以及网页设计需求等情况选择合适的网页开发工具，并开始制作网页。
03
新知讲解
3、测试优化发布
网页制作完成之后，还要经过测试与优化才能发布。测试就是通过预览，或者让网页在不同浏览器或客户端软件中进行渲染，再逐项查验网页的基本元素是否达到排版、功能及人机互动等方面的设计效果，以防止出现各种错误。优化就是对网页基本元素的内容进行审查，并对测试效果或出现的问题进行改进，以确保网页质量。发布是将网页上传到网络供他人浏览与传播。发布方式通常取决于发布环境，最简单的方式就是使用制作工具直接发布。
03
新知讲解
请对你们小组制作的宣传网页进行测试、优化和发布，并将测试发现的问题和优化建议记录在表1.4.3中。
03
新知讲解
网页基本元素 查验结果 优化建议
文本 栏目中学校创办时间表述有错别字；招生信息栏目招生计划数据为上一年度未更新 仔细校对所有文本，修正错别字；及时更新招生等栏目过时信息
图片 栏目中社团活动照片说明文字与实际不符 重新核对图片说明文字
表格 无 无
超链接 超链接跳转错误 检查并修正所有错误超链接地址
表单 招生咨询表单无法提交 对表单进行代码优化
视频 无 无
框架与内嵌程序 报名系统时间选择框无法正常弹出 修复校园活动报名系统时间选择框
表 1.4.3 测试情况与优化建议
03
新知讲解
项目成果交流，分为成果整理与交流两个环节。成果整理，就是整理设计需求分析表、素材收集与处理、网页版面设计、网页测试情况、网页优化建议及正式发布网页等成果，并制作汇报交流用的PPT。
项目成果评价，可基于表1.4.4的评价量规，对自己与他人的项目成果进行客观的评价，并记录评价结果。
交流评价
03
新知讲解
项目成果 评价标准 评价方式
优 良 一般 自评 他评
设计需求分析表 栏目内容设计科学网页元素运用合理 栏目内容设计较为科学，网页元素运用基本合理 其他
素材收集与处理 按需收集，处理规范有分类存放 按需收集，处理基本规范，有分类存放 其他
宣传撰写 分中英文撰写，行文流畅，格式规范 分中英文援写，格式规范 其他
网页版面设计 与网页数量结构匹配，页面布局合理 与网页数量结构匹配页面布局基本合理 其他
表1.4.4 项目成果评价量规
03
新知讲解
配色方案设计 能使用色彩理论知识进行配色，且科学合理，效果显著 能使用色彩理论知识进行配色，基本科学合理 其他
网页测试情况 进行了逐项测试，记录完整、详细 进行了逐项测试，记录完整，但不够详细 其他
网页优化建议 有科学、全面的针对性优化建议 有针对性优化建议但不够全面 其他
正式发布网页 视觉效果好，用户体验感强 视觉效果一般或用户体验感一般 其他
（续表）
04
课堂练习
一、选择题
1、 以下元素在制作网页中没有涉及的是 （ ）
A. 图片 B. 超链接
C. 视频 D. 3D建模
2、制作宣传网页时，正常的素材处理流程是（ ）
A.收集→分类→处理→使用 B.处理→收集→分类→使用
C.分类→收集→处理→使用 D.收集→处理→分类→使用
二、判断题
1、 H5网页是指采用HTMI5前端技术设计的网页。 （ ）
2、宣传稿要全格式书写，即“标题+正文+落款”。 （ ）
D
A
√
×
04
课堂练习
三、操作题
用PPT或手绘方式设计一个包含 “学校概况 / 教学成果 / 校园文化 / 校园风光" 的水平导航栏。
05
拓展延伸
制作宣传网页的注意事项
1、明确目标与定位
明确制作网页的目的，不同的目的决定了网页内容和风格的
侧重点，分析目标受众的风格喜好，以便确定合适的内容、
语言风格和设计元素。
2、注重设计与布局
避免使用过多的颜色、字体和复杂的图案，选择简洁明了的设计风格，在网页中保持颜色方案、字体风格、图标样式等视觉元素的一致性，运用网格系统和分栏布局，将内容合理地划分区域，使页面结构清晰，便于用户快速找到所需信息。

05
拓展延伸
制作宣传网页的注意事项
3、保证内容质量
确保宣传内容真实、准确，避免出现错别字、语法错误
和信息遗漏，重要信息放在突出位置，便于用户快速获
取关键信息。还应适当加入图片、视频、图表等多媒体
元素，增强内容的吸引力和表现力。
4、优化技术性能
优化代码、压缩图片和视频等资源，减少页面加载时间，在不同的设备和浏览器上进行测试，确保网页显示正常、功能完整，为用户提供一致的浏览体验。采取安全措施，防止数据泄露和恶意攻击，保护用户信息安全。
05
拓展延伸
网页的分类及特点
动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。
特点：
1、具有交互性，动态网页能够实时响应用户的操作和输入，为用户提供便捷的交互体验。
2、内容动态更新，可以与数据库进行交互，实时获取和显示最新的数据。
3、功能丰富多样，可以实现各种复杂的功能和应用，如在线购物车、在线支付、会员系统、论坛社区、在线游戏等。为用户提供更加全面和便捷的服务。
05
拓展延伸
网页的分类及特点
静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。
特点：
1、制作速度快，成本低。
2、模板一旦确定下来，不容易修改，更新比较费时费事。
3、常用于制作一些固定版式的页面。
4、通常用于文本和图像组成，常用于子页面的内容介绍。
5、对服务器性能要求较低，但对存储压力相对较大。
06
小结与评价
本单元你学习了：
网页制作与渲染
流媒体的实现
HTTP的缺陷与 HTTPS的优势
网页设计与制作实践
小结与评价
06
小结与评价
知识梳理
06
小结与评价
1、浏览器渲染网页时，首先解析的是 ( )
A. HTML 标签 B. CSS样式
C. JavaSeript 脚本 D. 视频
2、下列不属于流媒体应用原理的是 ( )
A. 网页渲染 B. 数据压缩
C. 分段发送 D. 流式传输
3、HTTP存在 、 及 等缺陷。
4、W3C标准规定，网页代码主要由 、 和 三部分组成，它们分别使用 HTML、CSS、JS 等编程语言来创建。
A
A
无连接状态
明文传输
不安全
结构
表现
行为
学习检测
06
小结与评价
5、 你的宣传网页作品都采用了哪些版面布局形式？为什么？
1、左右框架型布局
采用该布局，是因为它简洁直观，用户在左侧点击导航选项，右侧能迅速切换展示相关内容，交互性强。对于校园宣传网页而言，左侧导航可按照学校不同方面分类，如学术科研、学生活动、招生就业等，用户能精准定位自己感兴趣的内容，提升用户获取信息的效率。
2、封面型布局
选用这种布局，是因其视觉冲击力强，能瞬间抓住浏览者眼球，引导用户深入了解学校，同时保持页面的简洁美观，突出学校的独特魅力。
06
小结与评价
在本单元学习过程中，肯定少不了与他人进行互动交流、参与作品制作等活动。现在请就此进行总结与反思，以便更好地促进自身成长。
1. 从同伴那里学到过什么？
2. 向同伴分享过哪些观点？
3. 所运用的工具、方法是否得当？
4. 所开发作品是否值得推广应用？
反思评价
06
小结与评价
从同伴那里学到过什么？
从设计思路来看，有的同伴擅长从用户体验角度出发，提出了独特的导航栏设计方案；在素材收集方面，有同伴掌握高效的图片搜索技巧。
2. 向同伴分享过哪些观点？
强调不同布局形式需与学校宣传重点相匹配，应注重文字与图片、视频的搭配比例。
3. 所运用的工具、方法是否得当？
选用专业网页制作软件 Adobe Dreamweaver，其强大的代码编辑与可视化设计功能为我们提供了便利，能高效实现各种布局形式与交互效果，总体较为得当。
4. 所开发作品是否值得推广应用？
作品本身来看，我们制作的校园宣传网页具有一定推广应用价值。
07
课堂总结
1
引入新知内容
跨学科活动：向世界介绍我的学校
2
制作学校宣传网页
3
测试、优化并发布宣传网页
4
完成课堂练习
5
进行知识拓展
1
2
3
4
5
08
板书设计
跨学科活动：向世界介绍我的学校
1、进行新知引入
2、制作学校宣传网页
3、测试、优化并发布宣传
4、完成课堂练习
5、进行知识拓展
课后作业。
1、小组之间相互展示制作的宣传网页，找一找有什么问题。
09
课后作业
小组之间相互展示制作的宣传网页，找一找有什么问题。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑