资源简介

中小学教育资源及组卷应用平台
第4课《跨学科活动：向世界介绍我的学校》教学设计
课题 跨学科活动：向世界介绍我的学校 单元 第一单元 学科 信息科技 年级 七年级下
核心素养目标 信息意识：能够主动收集校园信息内容，了解宣传网页的制作流程，理解宣传网页应具备的信息，提高信息分类和整合的意识。计算思维：运用算法构建网页内容的逻辑架构，提升信息传递效率，能够优化网页信息呈现方式，保障网页的宣传效果。数字化学习与创新：熟练使用工具和信息制作宣传网页，应用于校园搜索网页，创新性地结合校园的特点进行个性化介绍，提高形象效果。信息社会责任：理解在制作网页时应当确保信息准确的问题，遵守相关法规，认识到网页制作技术对社会信息流通的影响。
教学重点 1、掌握制作宣传网页的技巧。
教学难点 1、测试、优化宣传网页。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 板书课题。视频引入本课中你将体验到：如何根据需求来设计网页 如何根据设计来制作网页 如何对网页进行测试并优化发布 学习新知引入，观看教学视频。 用提问的方式引入课题，增强课堂互动性。将学生的注意吸引到课堂。
讲授新课 一、新知讲解情景导入科技文化艺术节是学校一项颇具特色的活动，每年都会邀请一大批校外人士参加。为了能让更多人了解并积极参与，需要你组建一支团队，运用语文、英语、美术等学科知识，来设计制作一份便于社交媒体转发的、以“向世界介绍我的学校”为主题的宣传网页（见图1.4.1）。需求分析“向世界介绍我的学校”的宣传对象主要有家长、校友及其他校外嘉 宾等。宣传的主要目的是想帮助大家更好地了解学校的过去、现在与未来。 因此，介绍的内容可以是学校历史、教学环境、校园文化活动与未来发展规划等。请根据你学校的具体情况，罗列网页栏目，写出与这些栏目对应的宣传内容要求，以及需要呈现的文本、图片、视频、表格、超链接、表单、框架与内嵌程序等网页基本元素，并将这些信息填入表1.4.1中。表1.4.1 校园科技文化艺术节的网页设计需求网页栏目宣传内容要求呈现的网页基本元素学校概况简要清晰地呈现学校的创办历史、办学宗旨、校园环境以及整体规模。文本、图片、表格校园生活生动展现丰富多样的校园文化活动、社团组织以及校园生活设施，体现学校的活力与特色。文本、图片、视频教学管理全面展示学校的教学体系，包括课程设置、教学成果、师资力量等，凸显学校的教学实力。文本、图片、表格、超链接德育工作展示学校的德育理念、德育活动以及学生的品德培养成果。文本、图片、视频招生信息详细说明学校的招生政策、招生计划以及招生流程，方便信息获取。文本、表格、表单、超链接分工合作为更好地完成这项任务，你的小组需要进行分工合作。小组成员的分工角色与合作职责，既可以照搬表1.4.2的范例，也可以根据实际情况另行设计。表1.4.2 项目小组的分工合作表姓名角色职责姜明组长主持整个项目开展过程，协调处理各种情况以确保完成项 目任务。王依组织员组织各成员共同开展需求分析、规划实施与交流评价等具体活动。谢家佳记录员记录并整理需求分析、规划实施与交流评价等活动的相关信息。张涛检察员核查各项任务的完成情况，制作汇报PPT并负责对外展示交流。规划实施明确了网页栏目、宣传内容和网页基本元素等设计需求之后，就可以开始设计、制作并发布宣传网页了。这个过程大致可分为收集处理素材、设计制作网页与测试优化发布三个环节。1、收集处理材料根据各个栏目的宣传内容与基本元素的呈现要求，收集、处理素材并进行分类存放。素材的收集途径主要有网络搜索与自主开发两种。素材的类型主要有文本、图片、音频与视频等。原始素材通常需要进行处理才可以使用。文本素材需要进行文字与语法的检查，图片素材通常需要裁剪、拼接及调整大小与亮度等，音视频素材则大多需要进行剪辑。请你根据宣传网页的设计需求，收集、处理相关素材并进行分类存放。 另外还要运用中文和英文两种语言来撰写一篇有号召力的宣传稿，用来吸引更多读者帮忙转发。素材收集 1、图片素材 校园建筑、校园景观、教学场景、校园活动 、师生风采。视频素材学校宣传片、 教学片段、校园活动视频。3、文字素材 学校概况 、教学成果、 师资力量、 校园文化、学生故事。《梦想起航的知识殿堂》 这里，是知识的宝库，是莘莘学子追逐理想、绽放青春的地方。 拥有悠久的历史和深厚的文化底蕴，多年来，秉持着为学生服务的教育宗旨，培养了一批又一批杰出人才，他们在各个领域发光发热，为社会的发展贡献力量。 走进校园，你会被那充满艺术气息的建筑和如诗如画的风景所吸引。现代化的教学楼、藏书丰富的图书馆、设施完备的体育馆，为师生们提供了优良的教学和学习环境。亲爱的朋友们，无论你来自何方，欢迎你加入我们这个温暖的大家庭。让我们一起携手，向着未来，扬帆起航！The Hall of Knowledge Where Dreams Set SailHere 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!阅读宣传稿属于呼吁号召类的公文，通常有明确的发文对象与发文身份，要全格式书写，即“标题+称谓+正文+落款”。其中标题要吸引人，正文则要介绍宣传的内容、作用与意义，并在结尾鼓励大家积极转发。2、设计制作网页宣传网页的版面布局设计应与其结构和内容有关，如图1.4.2所示。例如，如果设计的是适用于智能手机、平板电脑等移动终端浏览的“一张网页”结构，那么导航栏与活动简介通常放在版面的上方，其他栏目内容则依次放在下面，以便于用户浏览。如果是为台式计算机设计的“一张主页+多张子页”结构，则导航栏与活动简介应置于主页，其他栏目内容则分布在各个子页中。应该根据大多数浏览者习惯的终端设备，确定网页的数量结构。另外， 还可以通过网络了解更多的网页版面设计知识，并将其应用到宣传网页的 设计中。请将设计结果绘制在下方空白处。配色方案也是网页设计的一项重要内容。科学、合理的网页配色，能让读者赏心悦目，并激发其深入阅读的兴趣。可以根据宣传的主题，选用适当的色彩，并运用互补色、相似色等色彩理论知识进行配色。阅读互补色是指色轮（见图1.4.3）上相对的两个颜色。比如蓝色和橙色、红色和绿色、黄色和紫色等。互补色具有非常强烈的对比度，在颜色饱和度很高的情况下，可以呈现很强的视觉效果。相似色是指在色轮上相邻的三个颜色。运用相似色可以在同一个色调中，创造出视觉上的丰富质感和层次感。在制作宣传网页时，要选择适用的开发工具。可供选择的开发工具，既有HTML之类的编程语言，也有美篇之类的可视化开发工具，甚至可以直接利用微博、公众号等社交媒体进行编辑和发布。阅读H5网页是指采用HTMI5前端技术设计的网页。它既包含文本图片、音频、视频与动画等传统网页元素，也有表单、投票与分享等新功能，因此被称为交互式多媒体广告页面，常用于智能手机上浏览的网页。请根据小组成员的技术能力、实验室条件以及网页设计需求等情况选择合适的网页开发工具，并开始制作网页。3、测试优化发布网页制作完成之后，还要经过测试与优化才能发布。测试就是通过预览，或者让网页在不同浏览器或客户端软件中进行渲染，再逐项查验网页的基本元素是否达到排版、功能及人机互动等方面的设计效果，以防止出现各种错误。优化就是对网页基本元素的内容进行审查，并对测试效果或出现的问题进行改进，以确保网页质量。发布是将网页上传到网络供他人浏览与传播。发布方式通常取决于发布环境，最简单的方式就是使用制作工具直接发布。请对你们小组制作的宣传网页进行测试、优化和发布，并将测试发现的问题和优化建议记录在表1.4.3中。表 1.4.3 测试情况与优化建议网页基本元素查验结果优化建议文本栏目中学校创办时间表述有错别字；招生信息栏目招生计划数据为上一年度未更新仔细校对所有文本，修正错别字；及时更新招生等栏目过时信息图片栏目中社团活动照片说明文字与实际不符重新核对图片说明文字表格无无超链接超链接跳转错误检查并修正所有错误超链接地址表单招生咨询表单无法提交对表单进行代码优化视频无无框架与内嵌程序报名系统时间选择框无法正常弹出修复校园活动报名系统时间选择框交流评价项目成果交流，分为成果整理与交流两个环节。成果整理，就是整理设计需求分析表、素材收集与处理、网页版面设计、网页测试情况、网页优化建议及正式发布网页等成果，并制作汇报交流用的PPT。项目成果评价，可基于表1.4.4的评价量规，对自己与他人的项目成果进行客观的评价，并记录评价结果。二、拓展延伸1、制作宣传网页的注意事项1、明确目标与定位
明确制作网页的目的，不同的目的决定了网页内容和风格的侧重点，分析目标受众的风格喜好，以便确定合适的内容、语言风格和设计元素。2、注重设计与布局
避免使用过多的颜色、字体和复杂的图案，选择简洁明了的设计风格，在网页中保持颜色方案、字体风格、图标样式等视觉元素的一致性，运用网格系统和分栏布局，将内容合理地划分区域，使页面结构清晰，便于用户快速找到所需信息。3、保证内容质量
确保宣传内容真实、准确，避免出现错别字、语法错误和信息遗漏，重要信息放在突出位置，便于用户快速获取关键信息。还应适当加入图片、视频、图表等多媒体元素，增强内容的吸引力和表现力。4、优化技术性能
优化代码、压缩图片和视频等资源，减少页面加载时间，在不同的设备和浏览器上进行测试，确保网页显示正常、功能完整，为用户提供一致的浏览体验。采取安全措施，防止数据泄露和恶意攻击，保护用户信息安全。2、网页的分类及特点动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。特点：1、具有交互性，动态网页能够实时响应用户的操作和输入，为用户提供便捷的交互体验。2、内容动态更新，可以与数据库进行交互，实时获取和显示最新的数据。3、功能丰富多样，可以实现各种复杂的功能和应用，如在线购物车、在线支付、会员系统、论坛社区、在线游戏等。为用户提供更加全面和便捷的服务。静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。特点：1、制作速度快，成本低。2、模板一旦确定下来，不容易修改，更新比较费时费事。3、常用于制作一些固定版式的页面。4、通常用于文本和图像组成，常用于子页面的内容介绍。5、对服务器性能要求较低，但对存储压力相对较大。三、课堂练习完成PPT36页——37页课堂作业。四、小结与评价本单元你学习了网页制作与渲染流媒体的实现HTTP的缺陷与 HTTPS的优势网页设计与制作实践知识梳理3、学习检测1、浏览器渲染网页时，首先解析的是 ( )A. HTML 标签 B. CSS样式C. JavaSeript 脚本 D. 视频 2、下列不属于流媒体应用原理的是 ( ) A. 网页渲染 B. 数据压缩C. 分段发送 D. 流式传输3、HTTP存在 无连接状态、明文传输及不安全等缺陷。4、W3C标准规定，网页代码主要由结构、表现和行为三部分组成，它们分别使用 HTML、CSS、JS 等编程语言来创建。5、 你的宣传网页作品都采用了哪些版面布局形式？为什么？1、左右框架型布局 采用该布局，是因为它简洁直观，用户在左侧点击导航选项，右侧能迅速切换展示相关内容，交互性强。对于校园宣传网页而言，左侧导航可按照学校不同方面分类，如学术科研、学生活动、招生就业等，用户能精准定位自己感兴趣的内容，提升用户获取信息的效率。2、封面型布局 选用这种布局，是因其视觉冲击力强，能瞬间抓住浏览者眼球，引导用户深入了解学校，同时保持页面的简洁美观，突出学校的独特魅力。 反思评价在本单元学习过程中，肯定少不了与他人进行互动交流、参与作品制作等活动。现在请就此进行总结与反思，以便更好地促进自身成长。1. 从同伴那里学到过什么？2. 向同伴分享过哪些观点？3. 所运用的工具、方法是否得当？4. 所开发作品是否值得推广应用？从同伴那里学到过什么？从设计思路来看，有的同伴擅长从用户体验角度出发，提出了独特的导航栏设计方案；在素材收集方面，有同伴掌握高效的图片搜索技巧。2、向同伴分享过哪些观点？强调不同布局形式需与学校宣传重点相匹配，应注重文字与图片、视频的搭配比例。3、所运用的工具、方法是否得当？选用专业网页制作软件 Adobe Dreamweaver，其强大的代码编辑与可视化设计功能为我们提供了便利，能高效实现各种布局形式与交互效果，总体较为得当。4、所开发作品是否值得推广应用？作品本身来看，我们制作的校园宣传网页具有一定推广应用价值。 了解为什么要制作校园宣传网页。了解需求，和制作网页需要的元素。填写表格。进行分工合作。进行规划实施。进行阅读。填写表格。进行交流评价。进行知识拓展。进行课堂练习。完成课堂总结。 引导学生了解宣传网页的应用。培养学生思考能力和学习能力。引导学生填写表格，培养学生的知识整理能力。引导学生进行分工合作，培养学生的合作意识，锻炼学生的动手能力。引导学生进行规划实施，收集处理相关素材，并进行网页的设计，和它的测试优化和发布，培养学生的动手能力，加深对知识的认识。增加知识内容。引导学生完成表格的填写，培养学生的观察能力和整合能力。锻炼学生的展示和分享能力，加深本课知识印象。拓宽学生的知识面。加深对本课知识的理解。培养学生的整合能力。
课堂小结 跨学科活动：向世界介绍我的学校1、进行新知引入2、制作学校宣传网页3、测试、优化并发布宣传网页4、完成课堂练习5、进行知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 小组之间相互展示制作的宣传网页，找一找有什么问题。 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑