资源简介

(共34张PPT)
第一单元 第2课
制作网页展活动
（桂科版）七年级
下
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
信息意识
计算思维
数字化学习与创新
信息社会责任
确保网页信息真实、准确、合法，不传播虚假信息、不良内容，尊重不同文化和价值观，保护用户隐私，避免对他人造成伤害或误导。
能独立规划网站结构并设计网页，积极探索创新网页，体会科技创新的意义。
能完整规划出一个网站的结构，熟悉网站制作的流程和网站的组成结构，熟练掌握制作网页的方法。
清楚制作网站的基本流程，通过对科技发展与通信方式演变的深入研究，增强对信息时代通信与网络技术动态变化的敏感度。
02
新知导入
活动背景
壮壮在网上搜集了各种有关“三月三”的宣传素材，包括特色美食、壮族服饰、节庆活动等。那网站应该如何设计才能有条理地呈现这么多内容，方便大家浏览阅读呢？
02
新知导入
活动目标
1、准确阐述网站的组成结构。
2、理解主页常见命名规则。
3、能够利用人工智能技术。
03
新知讲解
一、讨论
回顾你之前浏览过的网站，和老师、同学一起交流，说一说它们在呈现形式上都有哪些特点。
视觉布局方面
简洁明了型：像一些工具类网站（如百度搜索首页），页面元素布局简洁，以搜索框为核心，搭配少量导航和功能按钮，用户能快速找到操作入口，重点突出，便于高效获取服务。
交互设计方面
响应式设计：如今多数网站都支持响应式，能根据用户设备（手机、平板、电脑等）屏幕大小自动调整布局和显示方式，保证在不同终端都有良好的浏览体验。
内容呈现方面
图文并茂型：新闻资讯类网站（如腾讯新闻）在呈现新闻时，会搭配相关图片、视频等多媒体元素，让内容更直观生动，帮助用户更好理解新闻事件。
03
新知讲解
二、案例分析
左图下为某网站的截图，右图展示的是该网站对应的本地源文件。请根据图回答下列问题。
03
新知讲解
二、案例分析
请回答:1.已知网站是由多个网页组成的，那什么是主页？图中哪个文件对应该网站的主页
主页是一个网站的起始页面，相当于网站的门面，通常包含网站的核心信息、导航等，能引导用户访问网站的其他页面。
图中，“五色糯米饭首页.html” 对应该网站的主页 ，因为它的名称表明是首页，一般网站的首页文件会以“index.html”“default.html” 或类似包含 “首页” 字样的文件名来命名，起到引导和汇总网站主要内容的作用。
03
新知讲解
二、案例分析
2.你能根据图画出该网站的简易结构图吗 试一试，画一画。
03
新知讲解
选择一个你喜欢的主题并进行网站规划，将你的设计方案填入表中。
马上行动
我选择的主题
网站名称
设计意图 (用途、意义）
网站结构图
城市旅游攻略
CityTravelGuide
用途：为计划前往特定城市旅游的游客提供全面、实用的旅游信息，包括景点介绍、美食推荐、住宿指南、交通线路规划等。意义：帮助游客节省旅游规划时间，提升旅游体验，促进城市旅游文化传播。
首页（包含热门城市推荐、搜索框）
├── 景点介绍页面（按城市分区，每个景点有详细介绍、图片、开放时间等）
├── 美食推荐页面（按菜系、街区分类推荐特色美食及店铺）
├── 住宿指南页面（不同档次酒店、民宿推荐及预订链接）
├── 交通线路页面（机场、火车站、市内交通等详细线路及换乘信息）
└── 游客论坛页面（游客分享旅游经历、提问交流）
03
新知讲解
小贴士
网页一般使用 HTML、CSS 和JavaScript等语言构建其基础框架和功能。
HTML:编写网页的主要语言，用于定义网页的结构和内容。
CSS:层叠样式表(cascading style sheets)，用于设置网页的视觉样式，比如字体、颜色和布局。
JavaScript:一种用于实现网页交互功能的脚本语言，比如点击按钮后发生的动作。
制作网站的基本流程如所示。
03
新知讲解
小贴士
03
新知讲解
和老师、同学分享你的网站设计思路，组建属于你的网站搭建小分队。结合制作网站的基本流程，明确分工，利用表进一步细化你的网站搭建方案。
马上行动
网站主题 分工 网页内容及呈现形式 负责人
网页1
网页2
网页3
……
城市旅游攻略
首页：设置热门城市轮播图、搜索框、导航栏。以简洁大气的布局，搭配高清城市风景图片吸引用户。
景点介绍页：按城市分类，每个城市下细分多个景点板块，插入景点高清图片、360° 全景视频，文字介绍景点历史、特色等信息。
美食推荐页：按菜系、街区划分美食类别，展示美食图片、菜品详情、推荐店铺地址及用户评价，采用图文混排形式。
小李
小张
小王
03
新知讲解
三、做中学
利用人工智能技术辅助制作网页。
1.选择一个生成式人工智能网站。
可选择如 ChatGPT（需科学上网）、百度文心一言、字节跳动豆包等能生成 HTML 代码的人工智能工具 。
03
新知讲解
三、做中学
2.在对话框中输入想制作的网页主题及内容，如图所示。
像中那样，在对话框输入 “请帮我制作一张介绍五色糯米饭的网页，并生成对应 HTML 代码。网页内容包括但不局限于以下内容：开始标题为五色糯米饭，接下来是导航栏（包括首页、制作原料、制作过程、文化故事），然后是五色糯米饭的简要介绍，紧接着配上一张五色糯米饭的图片” 。
03
新知讲解
三、做中学
3.成功发送请求后生成 HTML 代码（如上图所示），用记事本保存代码，调整后用浏览器打开查看效果，如图所示。
获取生成的 HTML 代码，将代码复制到记事本保存为.html后缀的文件（如wuse_nuomi_fan.html ）。
用浏览器打开该文件，查看网页呈现效果
03
新知讲解
三、做中学
4.根据预览效果灵活调整生成请求，进一步完善网页效果，完成制作。
根据浏览器中网页的预览效果，若不满意，回到人工智能网站的对话框，进一步细化或修改请求。
比如 “导航栏字体颜色希望改为白色，背景色改为深蓝色”“五色糯米饭图片希望更换为更清晰的” 等，重新生成代码并替换原代码，直至达到满意的网页效果。
03
新知讲解
讨论
利用人工智能技术辅助制作网页，有什么优缺点？小组内展开讨论并做好记录。
优点
提高效率：能快速生成网页基础代码和框架，无需从最底层代码编写开始，节省大量时间和精力。
降低技术门槛：对于不熟悉复杂编程语法和技术的新手，人工智能可帮助他们实现创意。
提供创意启发：人工智能可根据输入主题，给出多种不同的网页布局、设计风格建议，激发制作者的创意灵感，开拓设计思路。
缺点
代码质量问题：生成的代码可能存在冗余、不规范的情况，在性能优化、兼容性等方面表现欠佳，需要人工进一步检查和调整。
缺乏个性化深度定制：难以完全精准契合复杂、独特的个性化需求，对于一些独特的交互逻辑、高度定制化的设计效果，人工智能生成的内容可能无法满足。
03
新知讲解
请你围绕同一个主题，分别用网页编辑工具和人工智能网站进行网页制作，对比两种制作方式生成的网页效果并记录在表中，体会科技创新的意义。
马上行动
网页编辑工具制作的网页 人工智能技术生成的网页
代码的质量与结构
个性化与创意展现
开发流程及效率
通常代码结构规范、质量较高，符合编程标准。
完全取决于制作者自身的创意和技术水平。
开发流程相对复杂，从创建项目、规划布局、等每个环节都需手动操作。
代码质量参差不齐，可能存在冗余、不规范的情况。
个性化程度相对受限，往往基于已有的大量数据和模板生成。
开发效率高，能快速生成网页初稿。
03
新知讲解
任务拓展
1.请利用人工智能技术生成跑马灯效果，并加到自己设计的网页中。
可以使用像 ChatGPT、豆包等人工智能。
向人工智能输入类似 “请生成一段能在网页中实现跑马灯效果的 HTML、CSS 和 JavaScript 代码”。
将生成的代码复制粘贴到自己设计的网页 HTML 文件合适位置（一般在标签内相关区域 ），保存文件后，用浏览器打开网页查看跑马灯效果。如果效果不理想，可再次调整指令让人工智能优化代码。
03
新知讲解
任务拓展
2. Markdown 语言是一种轻量级标记语言，它允许开发者使用易读易写的纯文本格式编写文档。请上网了解更多相关内容，尝试使用 Markdown 语言开展小组活动。
小组分工：确定小组内成员分工，如有人负责收集 Markdown 语法资料，有人负责在小组内讲解语法要点，有人负责实际用 Markdown 编写小组活动记录文档等。
资料收集与学习：通过搜索引擎查找 Markdown 官方文档、教程文章等资料，小组共同学习 Markdown 基本语法规则。
实践操作：小组成员各自选择一个主题，使用 Markdown 编写文档，然后互相交换文档，检查语法使用是否正确，分享编写过程中的技巧和遇到的问题。
总结交流：小组集中交流使用 Markdown 的体验，总结优点和不足，并讨论后续如何在小组日常工作学习中更好地运用 Markdown 语言。
04
课堂练习
一、选择题
1.以下哪种不是网页常用的构建语言？（ ）
A. HTML B. CSS C. Python D. JavaScript
2.利用人工智能技术辅助制作网页时，以下属于其缺点的是？（ ）
A. 提高效率 B. 降低技术门槛
C. 代码质量参差不齐 D. 提供创意启发
3关于网站主页，下列说法正确的是？（ ）
A. 网站主页可有可无
B. 网站主页就是网站的任意一个页面
C. 网站主页通常包含网站核心信息、导航等，是网站起始页面
D. 网站主页文件命名没有任何规律
C
C
C
04
课堂练习
二、判断题
使用人工智能生成网页代码后，无需再对代码进行任何修改就能直接使用 。 （ ）
自媒体可以随意发布未经核实的信息，只要标注为个人观点就不会有问题。 （ ）
X
X
05
拓展延伸
微交互设计在网页中的应用：微交互是指网页上那些细微的、与用户交互的动画效果或反馈机制。
响应式网页设计的新发展：除了适应不同屏幕尺寸，如今的响应式设计更注重不同设备的交互特点。
网页设计前沿趋势
05
拓展延伸
移动互联网中的位置服务与网页应用：借助 GPS、基站定位等技术，移动设备能精准获取用户位置信息。
移动互联网安全中的数据加密技术：为保护用户在移动互联网环境下的数据安全，数据加密技术至关重要。
移动互联网相关拓展
05
拓展延伸
自媒体信息传播中的版权保护：自媒体创作者在发布内容时，必须尊重他人的知识产权，不得未经授权使用他人的文字、图片、视频等作品。
虚假信息在信息传播中的危害及治理：虚假信息在网络传播中可能引发社会恐慌、误导公众决策等严重后果。
信息传播规范深化
05
拓展延伸
Markdown 在项目文档管理中的应用：在软件开发、团队项目协作等场景中，Markdown 语言可用于编写项目文档。
Markdown 与其他工具的集成使用：Markdown 能与多种工具集成，增强其功能。
Markdown 语言拓展
06
课堂总结
1
引入新知内容
2
准确阐述网站的组成结构
3
理解主页常见命名规则
4
完成课题练习
5
进行相关知识拓展
1
2
3
4
5
制作网页展活动
07
板书设计
制作网页展活动
1、进行新知引入
2、准确阐述网站的组成结构
3、理解主页常见命名规则
4、完成课堂练习
5、进行知识拓展
课后作业。
1、网页操作题
08
课后作业
制作网站时，围绕主题搜集相关资源后，前期应根据资源的形式，如文本、图片、音频、视频等进行初步分类，再进一步挑选适合网站定位的内容。若制作一个音乐分享网站，在搜集音频资源时， 可按照 进行分类。
音乐风格
08
课后作业
2、操作题
请使用人工智能工具（如豆包）生成一个介绍家乡特色景点的网页 HTML 代码，要求包含标题、导航栏（导航栏需有景点介绍、游玩攻略两个链接）、景点简要介绍和一张景点图片（假设图片路径为 “jingdian.jpg”）。生成代码后，将代码保存为.html 后缀文件，并用浏览器打开查看效果，最后将操作过程和遇到的问题记录下来。
08
课后作业
保存代码：将上述代码复制到一个文本编辑器中，例如 Notepad++、Visual Studio Code 等。
文件命名：将文件保存为 scenic_spot.html，确保文件扩展名为 .html。
准备图片：将名为 jingdian.jpg 的图片文件放在与 scenic_spot.html 相同的文件夹中。如果图片不在同一文件夹，需要修改 HTML 代码中 标签的 src 属性，指向图片的实际路径。
打开网页：找到保存好的 scenic_spot.html 文件，双击它，浏览器会自动打开该网页，你可以查看网页的显示效果。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑