代码书山海,网页载春秋——交大附属黄浦实验中学七年级信息科技学科活动
- 2026-09-21 10:40:28
当代码生长出枝叶，当网页晕染开色彩，七年级同学们的春夏时光，便有了不同于往日的意义。
在这个万物生长的季节里，交大附属黄浦实验中学的七年级同学们以一场历时三个月的网页设计之旅，为这个春夏写下了独特的注脚。从初春三月零基础敲下第一行代码，到盛夏六月呈现出一个个完整的网页作品，“代码书山海，网页载春秋”不仅是一句主题，更是这段成长的真实写照。
从零开始，用代码搭建世界
三月初春，同学们第一次接触网页制作。起初的工具朴素得有些“原始”——Windows自带的记事本。一个字母一个字母地敲下<html>、<body>，保存、双击、在浏览器中打开。当屏幕上出现第一行文字时，机房里的惊叹声此起彼伏。
很快，记事本被VSCode取代，语法高亮、自动补全让效率大大提升。四月起，同学们开始综合运用HTML标签与CSS样式，为页面“设计造型”——字体、颜色、边距、对齐、浮动、定位，一个个技术点被攻克，一张张页面从黑白到多彩。五月，AI平台正式融入课堂，但它的角色不是“代写工具”，而是“灵感伙伴”和“智能助教”。同学们学会了向AI提出精准的问题，理解、甄别、修改AI给出的代码示例，让技术真正为己所用。
胡云霞老师的校园网页：收藏被忽略的风景
技术是骨架，内容才是灵魂。为了让网页有温度、有情感，胡老师带着同学们走出机房，走进校园。
五月的校园，阳光正好。同学们人手一台平板电脑，走遍校园的每一个角落：晨光里的操场、午后的林荫道、独特的中草药基地“思源香庭”、教学楼走廊里那扇总是被阳光照亮的窗……他们用镜头捕捉平日里匆匆路过却不曾驻足的风景。
回到机房后，这些影像被嵌入一个个网页中。有的同学制作了“校园植物图鉴”，为思源香庭里的每一株植物配上照片和介绍；有的同学用镜头记录下食堂阿姨、保安大叔、保洁师傅的工作日常，做成了“校园守护者”主题页面——那些被忽略的面孔，第一次在网页中被郑重地看见。
七2班 陈佳悦
七4班 戴亦熠
七6班 赵 纭
七2班 俞昱黄
七4班 裘沁杉
七7班 葛梓墨
最终，一百多个以“校园角落”为主题的网页汇聚成一部立体的“校园影像志”，每一页都是一双少年眼睛的独特视角。
裘丽雅老师的兴趣部落：让热爱在网页中安家
如果说胡老师引导同学们向外看——看见校园，那么裘老师则鼓励同学们向内看——看见自己。
“把你们学到的网页设计技能，用在你们真正热爱的事情上。”裘老师在课堂上这样说。
于是，兴趣在网页中找到了新的载体——
热爱体育竞技的同学建起了“校园体育文化站”，不仅收录了各项赛事上的高光时刻，还把自己对比赛战术的理解做成了图文并茂的专栏；喜欢阅读的同学搭建了“个人读书笔记”页面，给每一本读过的书设计了独立的“卡片”，写下标签；痴迷音乐的同学做出了个人音乐推荐站，通过超链接用播放列表和专辑封面讲述自己的听觉故事；热衷动漫的同学更是创造了风格鲜明的二次元主题页，配色、字体、图标都透着属于这个年龄的执着与热忱……
七3班 江晟哲
七8班 唐 歆
七8班 张宸浩
七3班 顾 悦
七1班 范钦耘
七8班 姚佳辰
七8班 倪瑞琪
七5班 王博文
七8班 郜刘洋
七5班 杨 璟
七1班 赵易乐
七3班 宋安琪
七8班 韩 政
七3班 姜希艾
这些作品或许谈不上专业，但每一个页面都散发着独特的个人气息——那是兴趣被技术放大后的光芒。
山海未尽，春秋待续
三个月的旅程，同学们收获的远不止一项技能。
他们收获了“创造”的体验——从零到一构建一个完整的作品；他们收获了“看见”的能力——用镜头重新发现校园，也在兴趣深耕中更清晰地认识自己；他们更收获了“我可以”的信念——从面对代码报错一筹莫展，到冷静分析、主动求解，那份独立解决问题的底气，是这个夏天最珍贵的礼物。
网页设计活动虽然落幕，但数字化探索的旅程才刚刚开始。未来，我校信息科技课程将继续推进项目式学习，让科技教育与真实情境深度融合，让同学们在创造中感受科技的温度，在表达中提升信息素养。
用代码书写山海，用网页承载春秋——这群少年的数字故事，未完待续。
上海交通大学附属黄浦实验中学
撰稿 |
编辑 |
裘丽雅
裘丽雅
