当前位置：首页>网站源码>代码书山海,网页载春秋——交大附属黄浦实验中学七年级信息科技学科活动

代码书山海,网页载春秋——交大附属黄浦实验中学七年级信息科技学科活动

2026-08-11 05:13:44

当代码生长出枝叶，当网页晕染开色彩，七年级同学们的春夏时光，便有了不同于往日的意义。

在这个万物生长的季节里，交大附属黄浦实验中学的七年级同学们以一场历时三个月的网页设计之旅，为这个春夏写下了独特的注脚。从初春三月零基础敲下第一行代码，到盛夏六月呈现出一个个完整的网页作品，“代码书山海，网页载春秋”不仅是一句主题，更是这段成长的真实写照。

从零开始，用代码搭建世界

三月初春，同学们第一次接触网页制作。起初的工具朴素得有些“原始”——Windows自带的记事本。一个字母一个字母地敲下<html>、<body>，保存、双击、在浏览器中打开。当屏幕上出现第一行文字时，机房里的惊叹声此起彼伏。

很快，记事本被VSCode取代，语法高亮、自动补全让效率大大提升。四月起，同学们开始综合运用HTML标签与CSS样式，为页面“设计造型”——字体、颜色、边距、对齐、浮动、定位，一个个技术点被攻克，一张张页面从黑白到多彩。五月，AI平台正式融入课堂，但它的角色不是“代写工具”，而是“灵感伙伴”和“智能助教”。同学们学会了向AI提出精准的问题，理解、甄别、修改AI给出的代码示例，让技术真正为己所用。

胡云霞老师的校园网页：收藏被忽略的风景

技术是骨架，内容才是灵魂。为了让网页有温度、有情感，胡老师带着同学们走出机房，走进校园。

五月的校园，阳光正好。同学们人手一台平板电脑，走遍校园的每一个角落：晨光里的操场、午后的林荫道、独特的中草药基地“思源香庭”、教学楼走廊里那扇总是被阳光照亮的窗……他们用镜头捕捉平日里匆匆路过却不曾驻足的风景。

回到机房后，这些影像被嵌入一个个网页中。有的同学制作了“校园植物图鉴”，为思源香庭里的每一株植物配上照片和介绍；有的同学用镜头记录下食堂阿姨、保安大叔、保洁师傅的工作日常，做成了“校园守护者”主题页面——那些被忽略的面孔，第一次在网页中被郑重地看见。

七2班陈佳悦

七4班戴亦熠

七6班赵纭

七2班俞昱黄

七4班裘沁杉

七7班葛梓墨

最终，一百多个以“校园角落”为主题的网页汇聚成一部立体的“校园影像志”，每一页都是一双少年眼睛的独特视角。

裘丽雅老师的兴趣部落：让热爱在网页中安家

如果说胡老师引导同学们向外看——看见校园，那么裘老师则鼓励同学们向内看——看见自己。

“把你们学到的网页设计技能，用在你们真正热爱的事情上。”裘老师在课堂上这样说。

于是，兴趣在网页中找到了新的载体——

热爱体育竞技的同学建起了“校园体育文化站”，不仅收录了各项赛事上的高光时刻，还把自己对比赛战术的理解做成了图文并茂的专栏；喜欢阅读的同学搭建了“个人读书笔记”页面，给每一本读过的书设计了独立的“卡片”，写下标签；痴迷音乐的同学做出了个人音乐推荐站，通过超链接用播放列表和专辑封面讲述自己的听觉故事；热衷动漫的同学更是创造了风格鲜明的二次元主题页，配色、字体、图标都透着属于这个年龄的执着与热忱……