资源简介

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

展开更多......

收起↑