资源简介

(共33张PPT)
第17课　制作网页展活动
第四单元　校园活动线上展
义务教育信息科技课程资源　七年级
——邂逅厦门之美
厦门正迎来2026 厦门元宵旅游嘉年华，该活动以 “非遗 + 科技” 为核心，覆盖园博苑灯会、五缘湾启动盛典、中山路赛博非遗等七大玩法。
你受聘为鹭岛数字创想馆首席网页设计师，需完成三个关卡的网页制作任务，打造集滨海风光、闽南文化、数字体验于一体的城市宣传网页，向全球传递厦门之美。
罗海燕
罗海燕
鹭岛网页设计师成长之路
第一关
第二关
第三关
罗海燕
第
一
关
绘制鹭岛蓝图
——规划你的数字鹭岛
罗海燕
制作网站
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动1-1
小组讨论，选择厦门的一处美景或美食，确定主题，进行网页设计。
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动1-2
可以使用老师提供的素材，也可以适当搜集补充素材。
注意：搜集素材时要挑选、去伪、下载无版权的素材。
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动1-3
网站结构
网站结构包括主页、子页、内容组织、布局和主题风格等。
主页
子页
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动1-3
设计栏目
01
美食主要栏目 美景主要栏目
简介 简介
历史文化 历史文化
宝藏餐厅 交通道路
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动1-3
设计版面布局
02
绘制简单的网站结构图
罗海燕
鹭岛网页设计师成长之路
第一关
第二关
第三关
罗海燕
第
二
关
见证代码花开
——用HTML点亮鹭岛之美
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
英文标点
空格
空格
width：宽度
height：高度
px：像素
学生上机任务：1.用“记事本”打开半成品代码，
2.使用添加一行代码
3.用浏览器打开观察效果，图片宽和高的大小自己调整
4.提交网页
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
1.双引号要用上档键
1.按住上档键，不松开
2.按一下双引号
居中显示
如何新增图文以及内容居中？
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动2-2：动手做，存作品
注意：
调细节用删除按钮删除模块，调整布局
存文件——复制代码到记事本，保存为html文件。
开始
搭框架
填内容
调细节
存文件
试运行
结束
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动2-2 学生作品展示
罗海燕
鹭岛网页设计师成长之路
第一关
第二关
第三关
罗海燕
第
三
关
AI赋能
——体验智能生成网页
罗海燕
利用人工只能生成简单网页
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动3
输入提示词：
请用简单标签生成主题为“厦门/鼓浪屿” 的HTML网页，包含标题、简介、历史文化、建通路线等栏目，下面正中间放一张图片。
罗海燕
图片无法显示
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
罗海燕
图片文件路径为images/7.jpg ，且需与网页文件存在同一目录下。
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
探究活动3 学生作品展示
罗海燕
图片为编码形式
鹭岛网页设计师成长之路
第一关
第二关
第三关
罗海燕
确定主题
搜集素材
确定结构
制作网页
美化网页
发布网站
你更喜欢哪种方式呢？我们还需要学习HTML语言吗？
AI生成
人工编写
1.极速生成与低成本
2.零技术门槛
3.智能优化与迭代
1.高度定制化
2.创意与独特性
3.复杂交互与功能实现
HTML 是根基，AI是工具
“AI生成框架+人工优化细节”的高效模式
罗海燕
鹭岛网页设计师成长之路
第一关
第二关
第三关
罗海燕
1、确定好网页主题后，还要确定主页、导航菜单、内容组织、网页布局和
拓展与提升
1.制作厦门主题宣传网站时，确定主页、导航菜单、内容组织和网页布局的环节，属于制作网站基本流程中的哪一步？（）
A. 搜集素材 B. 确定结构 C. 制作网页 D. 美化网页
2.下列关于网页素材搜集的做法，符合信息社会责任要求的是（）
A. 随意截取有版权的商业图片使用
B. 下载无版权素材并对素材去伪存真
C. 截掉素材中的原创 LOGO 后直接使用
D. 引用他人网站资源不注明出处
3.在 HTML 语言中，想要将厦门美食、美景的多个独立网页链接成一个完整网站，需要使用的核心标签是（）
A.

B. C. D.

4.小宇用 HTML 制作厦门鼓浪屿主题网页，想要插入鼓浪屿全景图片，应使用的正确标签是（）
A.

鼓浪屿全景.jpg

B.
C. 图片
D.
5.关于网页制作的 AI 生成和人工编写两种方式，下列说法错误的是（）
A. AI 生成网页的优势是极速、零技术门槛
B. 人工编写网页能实现高度定制化和创意独特性
C. HTML 是网页制作的根基，AI 仅能作为辅助工具
D. 无需学习 HTML，直接用 AI 生成就能做出优质个性化网页
参考答案
1.B 2.B 3.C 4.B 5.D
罗海燕
1、确定好网页主题后，还要确定主页、导航菜单、内容组织、网页布局和
课堂小结
罗海燕

展开更多......

收起↑