资源简介

中小学教育资源及组卷应用平台
第3课《编辑网页内容》教学设计
课题 编辑网页内容 单元 第四单元 学科 信息科技 年级 七年级上
核心素养目标 信息意识：能观察分析优秀网页的主题色、交互方式等信息呈现特点，理解其对用户体验和传达效果的影响。计算思维：能运用整体规划方法设计网页结构，选择合适工具丰富网页信息，并实现网页需求。数字化学习与创新：能利用拖拽工具或模板平台，结合配色方案和交互设计知识，动手制作主题突出、视觉协调的网页作品。信息社会责任：在网页制作中自觉使用授权素材、注明来源、保护用户隐私，并确保信息真实可靠，尊重原创。
教学重点 引导学生理解优秀网页的核心评价标准并能在分析案例时应用内容、技术、设计、创意四个维度的具体指标。指导学生掌握网页制作的常用方法并学会根据项目需求选择合适工具进行实践。培养学生对网页进行整体规划的能力，包括确定主题、设计栏目与导航、规划页面布局以及运用主题色建立统一风格。
教学难点 帮助学生理解抽象的网页设计原则并能在具体创作中有效运用，平衡美观与功能性。确保学生在网页制作实践中能正确处理技术细节，避免常见错误导致功能失效。引导学生深刻认识并自觉践行网页制作中的信息社会责任，将道德规范内化为创作习惯。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 本课要点科技节宣传网页已经初具雏形，但仍需进一步完善。本节课将认识更多的网页编辑工具，对当前的宣传网页进行整体规划和调整，结合主题设计配色方案、增加导航栏、添加交互动作、添加背景音乐等，提升网页呈现效果。制作一个网页是否需要掌握复杂的编程？不必须。现代工具有拖拽式平台和模板建站，无需代码即可快速搭建，如制作科技节宣传页。设计网页时信息越多越吸引人吗？并非如此。“少即是多”原则强调精简内容、优化布局以提升用户体验。从“星巴克绿”到“哔哩粉”：颜色的魔力大家有没有发现，打开百度，扑面而来是蓝红搭配的科技感；进入哔哩哔哩，粉白配色瞬间带来青春活力；就连肯德基的红色，是不是也让你有点饿？颜色，是网页无声的语言！这节课，我们就来学习如何像设计师一样，用主题色打造让人过目不忘的网页风格，为我们的科技节宣传网页“穿”上最合适的“外衣”。播放视频《html网页制作工具》。 每人抽取3张科技主题图片，小组投票选出最符合"未来感"的配色方案。对比两个网页版本（A版：5段文字+3张图；B版：1段核心文字+1张动态图），投票选择更吸引人的版本并说明理由。截取星巴克/哔哩哔哩/肯德基网页首屏，用取色器提取主色并标注RGB值，讨论颜色如何传递品牌调性。观看视频。 从真实图像中培养学生对色彩感知能力。帮助学生通过直观对比理解"少即是多"原则，培养学生内容筛选与视觉焦点设计能力。通过真实案例分析颜色与品牌DNA的绑定关系，帮助学生理解色彩作为视觉锤的核心作用。了解网页制作工具。
讲授新课 新知讲解：一、探索优秀的网页作品会吸引更多人的关注，产生更大的影响。那么，什么样的网页才能算得上优秀呢？二、议一议请各小组推荐并展示优秀的网页作品，分析这些网页作品的共性，交流网页作品的评价内容及标准。设计制作网页时通常需要考虑主题、技术、艺术等因素，网站则还需要考虑多个网页的风格是否一致、导航是否清晰等多方面的问题。优秀网页的3个共同点主题突出：一看就知道在讲什么（比如《绿色地球》全是环保内容）简单好用：手机电脑都能看，点哪里不会卡住好看有趣：配色舒服（不用太多颜色），有小小动画（比如按钮变色）网页评价标准（4个关键）内容（30分）：主题明确？文字图片是否相关？技术（30分）：链接能点吗？手机显示正常吗？设计（20分）：颜色字体协调吗？排版整齐吗？创意（20分）：有独特想法吗？（比如《Windows 12》模拟电脑桌面）三、写一写通过查阅资料和小组交流，了解不同类型的网页制作方法，填写下表。方法名称或制作平台地址编写代码用 HTML/CSS/JavaScript 手动写代码所见即所得平台码云 Pages、GitHub Pages拖拽式制作网页Wix（国外）、凡科网（国内）已有模板制作网页Canva 设计网站、阿里云速成美站四、能量加油站拖拽式网页制作工具有了拖拽式网页制作工具，可以快速搭建网站。这类工具不需要编写代码，自由拖拽就可以进行网页布局然后插入文字及图片等资源就能轻松、快速制作出一个网站了。五、探索网页整体规划设计制作网页之前，需要对网页进行整体规划。网页整体规划要考虑多方面内容，一般包含主题确定、栏目规划、页面规划、功能规划等方面。六、做一做请小组成员共同对宣传网页进行整体规划，确定宣传主题，设计宣传栏目，规划网页页面等，并绘制出规划草图。xx学校 简介 校园 …七、探索网页风格与主题色一个网站不可能只使用一种颜色那会令人感觉单调乏味；但是也不会用到所有颜色，那会让人感觉杂乱花哨。一个网站通常会有一种或两种主题色。好的主题色会让网页形成自己独特的风格，给浏览者留下深刻的印象，比如用绿色会让人感觉清新明快，用红色，有大气庄重之感。观察并记录几个常用网站的主题色，与同伴交流，说说这些主题色呈现出哪些特点，带给人何种感受。网页主题色特点与感受百度蓝色 + 红色科技感：蓝色冷静可靠，红色搜索按钮突出，让人感觉专业又醒目哔哩哔哩粉色 + 白色活力感：粉色年轻活泼（像动漫氛围），白色清爽，适合学生群体支付宝蓝色 + 浅蓝信任感：深浅蓝色搭配如银行，给人安全、稳重的印象 肯德基红色 + 白色热情感：红色刺激食欲（像番茄酱），白色干净，一看就想吃星巴克绿色 + 白色自然感：深绿如咖啡豆，搭配木纹元素，感觉环保又放松 八、探索为网页添加交互可以在网页中适当添加交互行为，增加了浏览者让网页的呈现更生动，与网页内容之间的互动。如随着鼠标的移动与操作，页面外观随之变化，会让网页更有趣；交互式表单可以让浏览者输入数据并保存；设置点赞功能，可收集浏览者的反馈数据等。九、写一写网页交互是指使用者与网页的互动过程，包括与网页的视觉和交互元素（如按钮、链接、表单等）的互动，以及通过网页提交的请求、网页的弹窗等反馈和响应。分组讨论交流，写出常见的网页交互方式。交互方式作用说明例子1. 点击跳转点文字/图片跳转到新页面导航菜单、文章"查看更多"2. 按钮反馈点击触发操作（如播放/提交）播放按钮、提交问卷3. 表单输入填写信息并发送登录框、搜索栏4. 展开菜单点击展开隐藏内容下拉菜单、折叠问答5. 动态响应鼠标悬停产生变化按钮变色、图片放大十、能量加油站少即是多少即是多（ Less is More ），是一种提倡简约反对过度装饰的设计理念。在互联网行业，倡导“简约的设计风格”“做减法”“把不必要的内容收起来”“7 加减2原则”等。反对过度装饰，并不是一味地追求简单，而是要努力降低用户的识别和操作成本，这才是“少”的本质。十一、设计选择网页制作工具规划网页布局确定配色方案优化导航栏添加背景音乐十二、实现网页工具或平台特点适合科技节吗？编写代码
（HTML/CSS/JS） 完全自由定制
需学编程基础
制作时间长△ 技术强的同学拖拽式工具
（Wix/凡科网） 像拼图一样简单
动画效果多（如粒子特效）
高级功能要付费 推荐模板建站
（Canva/阿里云） 改文字换图5分钟完成
自带科技感模板（蓝色系）
创意受限 推荐首选工具：模板建站（如Canva），直接搜“科技节”模板 > 替换文字图片 > 1小时完成备选工具：拖拽式工具（如凡科网）适，合：想加互动功能的同学（如3D旋转展品图片）2.确定网页配色方案排版决定了文字阅读的舒适性而配色很大程度影响着画面的美观。如果在寻找配色方案时毫无头绪，可以借助多样的数字化配色工具来帮助解决。尝试利用配色工具，结合科技节主题选择适合的网页配色方案。3.优化导航栏优秀的网站导航设计，就像海上灯塔、生活中的地图，指引人们的行动方向。常见的网站导航，根据所处位置不同，可分为标准顶部导航、侧边导航、底部导航等；根据显示的外观，可分为列表式导航、宫格式导航等请为科技节网页设计导航，让用户能够快速、准确地跳转到想要的页面。4.为网页添加背景音乐添加背景音乐后，用户浏览网站的同时可听到背景音乐。实现的方法是插入多媒体文件的标签。使用标签，不仅可以插入背景音乐还可以插入视频文件。基本语法是，如:将这段代码插入科技节宣传网的代码之间。网页上会显示右图所示的播放插件，单击播放按钮，播放与网页在同一文件夹中的指定音频文件 1.mp3。尝试修改插入的音乐文件、窗口大小、是否循环播放等。十三、拓展不同的终端有着不同的交互方式。计算机与移动设备的交互方式就有较大差异，因此在计算机上能正常运行的网页交互方式，放到移动端就可能出现问题。比较而言，移动端交互方式更丰富，例如利用手机陀螺仪的重力感应，可通过旋转屏幕实现跳转，用“摇一摇”功能切换页面，长按手机屏幕来保存图片等。随着移动设备的普及，设计适合在移动端呈现的网页作品显得非常必要。请你尝试设计制作适用于移动端的网页作品。编辑网页时，注意要将代码文件与网页素材放置在同一个文件夹中，因为网页中素材文件的路径一旦发生变化，会出现无法正常显示或播放的情况。十四、科技漫游“互联网+”做公益，寒假奉献有爱心部分中学生在假期里，尝试利用“互联网 +”的理念开展公益活动。他们通过网上众筹、网络直播等方式，提高公益活动的影响力和效果，同时锻炼了自己的创意、沟通、合作等方面的能力。正在读初中的商同学通过网上众筹，为儿童自闭症中心献上了自己的爱这位从8岁就开始做志愿者的女生，通过在自己的“微店”上售卖自制心。的爱心手工香皂，筹到5000余元善款。她也凭借这一善举，入选全国“最美中学生标兵”。“以前尝试过在校园或社区进行爱心义卖，不过由于时间空间有限等原因，次数少、影响小。”商同学表示，“通过网上众筹的方式爱心人士可随时了解我们的项目，统一制作、统一发货也节约了大量时间和成本，效果很好。”利用“互联网 +”做公益，让同学们在锻炼互联网创新能力的同时，也通过实践理解公益活动的真谛。十五、拓展延伸数字公民素养：网页中的信息责任尊重原创：不偷别人的“成果”只用授权素材：网页中的图片、音乐，必须来自免费可商用网站或获得作者允许。标明来源出处：引用他人文字、数据时，必须在网页底部清晰注明是谁创作的。确保真实：不传虚假“消息”发布前多验证：网页上的新闻、数据，要经过可靠渠道核对才能发布。拒绝误导设计：不用假按钮、夸张弹窗欺骗用户点击或填写信息。保护隐私：不乱要“信息”收集最少信息：表单只问真正需要的内容（如姓名、班级），不收集无关隐私。说清用途去向：明确告诉用户，填写的信息会被用来做什么。 一、探索说一说你认为什么是优秀的网页二、议一议分组解析3个推荐网页，用便利贴标注"主题突出区""简单好用点""好看有趣处"，汇总共性特征并绘制思维导图。三、写一写小组协作，通过查阅资料和小组交流，了解不同类型的网页制作方法，填写下表。四、能量加油站用易企秀选择校园科技节中文模板，替换标题为班级名、插入本班科技作品图片。五、探索小组用在线词云工具生成5个科技节主题关键词（如"创新""实验""未来"）。六、做一做用便签纸写下"活动预告""作品展厅"等栏目，5分钟内接力构建一级/二级栏目树状图并标注优先级。七、探索小组用Khroma.ai输入"科技节""未来感"关键词生成配色，与手动调色板对比，评选"最符合主题奖"。八、探索尝试使用拖拽工具添加"按钮悬停变色""图片放大"效果，对比修改前后的点击率变化。九、写一写分组讨论"点击跳转vs悬停反馈哪个更友好"，用投票工具统计观点，结合热力图数据验证结论。十、能量加油站尝试用设计工具（如Canva）将科技节海报从5种颜色简化为2种主色，小组投票选出"最清爽版"并说明理由。十一、设计小组协作规划制作网站的工具、定制网站设计方案。十二、实现小组协作完成网页制作。十三、拓展用移动端网页模板添加"左右滑动切换图片"功能，对比PC端鼠标点击与移动端手势的操作效率差异。十四、科技漫游分组策划"互联网+公益"方案（如线上义卖/知识众筹），用思维导图工具梳理目标人群、推广渠道、预算分配，制作3分钟路演PPT。十五、拓展延伸班级用在线协作工具（如Miro）共创"数字公民行为准则"，包含"尊重原创/核实信息/保护隐私"等条款，全体签名并生成电子证书。 一、探索提高学生的审美能力。二、议一议通过案例拆解，帮助学生建立对优秀网页的直观认知，理解三个核心共性的具象表现。三、写一写培养学生的资料收集资料能力，加强对不同制作方法特点的理解。四、能量加油站通过工具操作，理解"模板是框架，内容是核心"的设计逻辑，建立工具与真实场景的连接。五、探索引导学生通过可视化工具激发主题灵感，理解关键词对网页方向的作用。六、做一做通过协作构建信息架构，培养学生的规划与协作能力，掌握栏目规划中"用户需求＞内容数量"的取舍原则。七、探索引导学生体验AI工具在配色中的辅助作用，帮助学生理解技术如何赋能创意决策。八、探索通过即时反馈体验交互的趣味性，让学生理解"微交互提升用户体验"的设计原则。九、写一写通过观点碰撞理解交互方式适用的场景差异，培养学生的"用户场景决定交互形式"的决策思维。十、能量加油站引导学生通过视觉简化验证"颜色越少，重点越突出"的规律，建立"视觉层级＞装饰效果"的认知。十一、设计通过实际操作，培养学生的规划设计能力。十二、实现培养学生对信息工具的使用能力与创作能力。十三、拓展通过实操理解移动端"触控＞点击"的交互特性，帮助学生建立"自然手势优先"的设计意识。十四、科技漫游通过项目设计帮助学生理解"互联网+公益"的运作逻辑，培养"问题定位＞技术炫技"的策划思维。十五、拓展延伸通过集体承诺将信息责任内化为行为习惯，帮助学生建立"我的网页我负责"的主人翁意识。
课堂小结 编辑网页内容1、进行新知引入2、认识优秀网页三大特点3、熟悉常见网站配色感受4、掌握网页整体规划步骤5、进行相关知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 1、请为你们学校即将举办的“科技节”设计一个宣传网页。列出主要导航栏目名称。 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑