《印象阜宁 · 家乡介绍》网站 — 项目报告（详细讲解版）

适用对象：刚学 Web 的同学也能读懂的开发说明 + 代码导读。
填写区：下表请补全 学校、课程、姓名、学号、分工；答辩前在「截图」「心得」处按教师要求粘贴图片与文字。

项目	填写
课程名称
项目名称	印象阜宁 · 家乡介绍（静态多页面网站）
成员一（姓名 / 学号）	李濠宇 /
成员二（姓名 / 学号）	吴依芠 /
完成时间

一、项目概述（一分钟读懂）

这是一个纯前端、不需要服务器数据库的小型网站，用来介绍江苏省盐城市阜宁县：地理县情、特产、风俗、人文，以及新四军铁军相关的红色记忆。

技术栈：HTML5（页面结构）+ CSS3（版式与配色）+ 少量原生 JavaScript（手机菜单 + 滚动淡入动画）。
页面数量：5 个——index.html（首页）、overview.html（概况）、specialties.html（特产）、customs.html（风俗）、culture.html（人文）。
特点：所有页面共用同一套样式 css/style.css 和脚本 js/main.js，换页像翻书一样通过超链接跳转，没有登录、购物车、后台接口。

二、文件夹里有什么（给小白看的「地图」）

把项目文件夹想成一本杂志：每一页是一个 HTML 文件，统一的排版规则写在 CSS 里，一点点交互写在 JS 里，插图放在 images 里。

李濠宇 吴依芠 web大作业/
├── index.html          ← 首页（大图开场 + 导览 + 铁军板块）
├── overview.html       ← 概况（表格、区划、地图、历史）
├── specialties.html    ← 特产（四张图文卡片）
├── customs.html        ← 风俗（四张图文卡片）
├── culture.html        ← 人文（时间线 + 配图）
├── css/
│   └── style.css       ← 全站样式（颜色、字体、手机适配）
├── js/
│   └── main.js         ← 汉堡菜单 + 滚动显现
├── images/             ← 横幅、地图、纪念碑、各页配图（需与本站引用路径一致）
└── 项目报告.md         ← 本说明文档

为什么要分这么多 HTML？
老师课上常叫「多页面站点」：每个主题单独成页，地址栏会变（例如从 index.html 点到 overview.html），利于做课堂演示和内容分工。

三、网站是怎么「开发」出来的（推荐步骤）

下面是一套从零做完同款站点的思路，写报告时也可以当成「开发流程」叙述。

定栏目与文案
先列出：首页要点、概况里要哪些数据、特产/风俗各写几条、人文按时间还是按主题——避免写到一半大改结构。
画简单线框（可用纸笔）
每页：顶栏放哪些链接？正文是「大标题 + 段落」还是「卡片网格」？手机上是单列还是汉堡菜单？线框越简单越好，主要是定区块顺序。
先做一版「能点的骨架」
用 HTML 写出 header（顶栏）、main（主体）、footer（页脚），链接互相指到五个文件，暂时不追求好看，能跳转即可。
抽出公共部分，接 CSS
五页顶栏结构尽量一致，只在当前页给对应 <a> 加 class="active" 表示「你在这一页」。然后写 style.css：颜色、间距、字体、栅格。
做响应式
大屏幕导航横排；窄屏（如宽度小于 768px）隐藏横排、显示三条横线的汉堡按钮，点开出现下拉菜单——这些规则都在 style.css 底部的 @media 里。
加少量 JS
用 main.js 监听按钮点击、切换菜单 class；再用 IntersectionObserver 给带 fade-in 的元素滚动到可视区时加 visible，配合 CSS 做淡出/上移效果。
素材与自检
图片放进 images/，HTML 里 src 路径要和真实文件名、后缀（.jpg / .jpeg / .png）一致。用手机模式或真机看一下导航、表格横向滚动是否正常。

四、HTML 结构讲解（共性 + 各页差异）

4.1 每一页都差不多的「三段式」

打开任意一个 .html，大致都是：

<head>：写页面标题 <title>、字符集 UTF-8、手机适配 viewport、引入 Google 字体和 css/style.css。
<body>：
- <header class="site-header">：品牌 Logo 文字、汉堡按钮、<nav class="nav-main"> 里五个 <a href="...">。当前页给对应链接加 class="active"。
- <main>：这一页独有的标题、段落、表格、卡片等。
- <footer class="site-footer">：页脚两行说明。
底部 <script src="js/main.js">：在所有内容后面加载，保证要先有 DOM 再执行脚本。

小白提示：<a href="overview.html"> 这种是相对路径——浏览器会以「当前 HTML 所在文件夹」为基准找 overview.html，所以五个文件要放在同一层目录，不要随意挪到子文件夹而不改路径。

4.2 首页 `index.html` 在干什么

Hero 区：<section class="hero"> 里有一块全宽背景（CSS 用 hero-bg 引用 images/banner.png），上面叠加大标题、副标题、两个按钮链到概况/特产。
走进阜宁：两栏布局 two-col，一边是文字，一边是 quick-links 四个快速入口。
铁军板块：section-iron + iron-panel，左边 <figure> 插图，右边标题、段落、.spirit-grid 六宫格关键词，底下两个按钮。

语义化标签：main、section、header（站点头）、nav、figure、footer——对无障碍和 SEO 更友好，答辩时可以说「符合 HTML5 语义化习惯」。

4.3 概况页 `overview.html`

page-hero：内页顶部红金渐变条，中间大标题「县情概况」。
若干 section：section-alt 表示每隔一块换一种浅色背景，区分层次。
facts-table：用 <table> 做县情简表；外面包了 facts-wrap，CSS 设 overflow-x: auto，小屏可以横向滑动表格而不把版面撑破。
admin-grid：四街道、十三镇的列表，用 admin-block 卡片包住。
map-figure：images/ditu.jpeg 地图 + <figcaption> 说明。

4.4 特产 / 风俗页

结构高度相似：card-grid card-grid--pair 里多个 <article class="card">，每个卡片包含：

card-media：放图片；
card-badge：一条彩色顶边装饰；
card-body：标题 <h3> + 段落 <p>。

图片上可加 loading="lazy"：图片滚到附近再加载，略省流量（风俗、特产、人文里部分图用了这个属性）。

4.5 人文页 `culture.html`

timeline：左侧竖线 + 圆点，每个 timeline-item 是一段小标题和内容；部分条目下有 timeline-figure 配图和 figcaption。
这种「时间线」布局全靠 CSS 画竖线和圆点，没有用图表库。

五、CSS 讲解（`css/style.css` 怎么组织）

5.1 `:root` 里的「主题变量」

文件开头：

:root {
    --iron-red: #b42318;
    --gold: #d4af37;
    --paper: #faf6f0;
    /* ... */
}

含义：整站主色是「铁军红 + 金色点缀 + 纸色背景」。后面凡是写 color: var(--iron-red) 的地方，一改 :root 就能联动变色，维护方便。答辩可以说「使用 CSS 自定义属性做主题」。

5.2 顶栏固定与正文留白

.site-header 用了 position: fixed，贴在窗口最上方。下面 main 设了 padding-top: var(--nav-h)，否则正文第一行会被顶栏挡住。这是固定导航的经典写法。

5.3 首页 Hero 背景图

.hero-bg 的 background: url("../images/banner.png") center / cover：cover 会铺满区域并裁剪，不同比例屏幕都不容易露白。上面叠两层伪元素 ::before（深色渐变，让白字可读）、::after（底部淡出到纸色），过渡到下面内容。

5.4 栅格与卡片

card-grid：repeat(auto-fill, minmax(...)) 自动决定一行几个格子。
card-grid--pair：手机默认一列；@media (min-width: 768px) 时变两列，特产/风俗在平板、电脑上就是两列卡片。
card-media：aspect-ratio: 16/10 固定图片区域比例；img 用 object-fit: cover 裁切填满，避免有的图太高有的图太矮。

5.5 响应式 breakpoints（断点）

文件末尾集中写了：

max-width: 768px：显示 .nav-toggle，.nav-main 变成滑下来的全宽菜单（默认 translateY(-120%) 藏起，加 .is-open 滑入）。
max-width: 480px：顶栏略矮、品牌略小，节省小屏垂直空间。
prefers-reduced-motion: reduce：用户系统开了「减少动画」时，关掉 fade-in 位移动画和 hover 抬起效果——可访问性加分项。

六、JavaScript 讲解（`js/main.js` 逐段说明）

脚本包在一个立即执行函数 (function () { ... })(); 里，避免全局变量污染，这是比较常见的小技巧。

6.1 移动端菜单

var nav = document.querySelector(".nav-main");
var toggle = document.querySelector(".nav-toggle");

找到导航和按钮。若存在，给按钮加 click 监听：
nav.classList.toggle("is-open") 在开/关之间切换；同时改 aria-expanded、aria-label，方便读屏软件知道菜单是否展开。
给每个导航链接也监听点击：点完后 remove("is-open")，防止切页后菜单还悬在半空（虽然会跳转，但这是良好的交互习惯）。

6.2 滚动淡入（Intersection Observer）

var observer = new IntersectionObserver(function (entries) { ... }, { threshold: 0.12, rootMargin: "0px 0px -28px 0px" });
document.querySelectorAll(".fade-in").forEach(function (el) { observer.observe(el); });

含义：浏览器原生 API，用来观察「元素是否进入视口」。当某个 .fade-in 露出一部分（约 12%）时，给它加 class visible。
CSS 配合：.fade-in 默认透明且向下偏移；.fade-in.visible 变为不透明、回原位。observer.unobserve 在触发一次后取消观察，避免重复执行。

小白对比：若不用 Observer，就要监听 window scroll 自己算位置，代码更啰嗦且性能往往更差。

七、功能结构一览（答辩用简表）

从模块关系看，页面层由首页、概况、特产、风俗、人文五块组成；表现层统一由 css/style.css 提供主题色、栅格、组件样式与响应式规则；行为层由 js/main.js 负责移动端导航开关及滚动淡入；资源层为字体外链与本地图片。

模块	文件	主要功能
首页	`index.html`	全屏 Hero、本站导览、铁军精神六宫格与纪念碑配图
概况	`overview.html`	地理区位、县情简表、区划列表、县域地图、历史与老区
特产	`specialties.html`	四种风物卡片（图+文），桌面端两列
风俗	`customs.html`	四种民俗卡片（图+文），布局同特产
人文	`culture.html`	时间线叙述 + 配图、文物非遗拾零
公共样式	`css/style.css`	主题变量、顶栏、响应式、卡片/时间线、动效与无障碍
公共脚本	`js/main.js`	汉堡菜单、滚动淡入
静态资源	`images/`	横幅、地图、纪念碑及配图

网站模块图（Mermaid）

支持 Mermaid 的编辑器里可渲染；做 PPT 时可导出为图。

flowchart TB
    subgraph client[浏览器]
        NAV[顶栏导航 5 链接]
        subgraph pages[页面层]
            P0[index.html 首页]
            P1[overview.html 概况]
            P2[specialties.html 特产]
            P3[customs.html 风俗]
            P4[culture.html 人文]
        end
        subgraph assets[静态资源]
            CSS[css/style.css]
            JS[js/main.js]
            IMG[images/* 图片]
        end
        NAV --> P0 & P1 & P2 & P3 & P4
        P0 & P1 & P2 & P3 & P4 --> CSS
        P0 & P1 & P2 & P3 & P4 --> JS
        P0 & P1 & P2 & P3 & P4 --> IMG
    end

信息架构（栏目树）

印象阜宁
├── 首页 — 形象展示 / 导览 / 铁军记忆
├── 概况 — 地理 / 县情表 / 行政区划 / 地图 / 历史与老区
├── 特产 — 风物卡片（图文）
├── 风俗 — 民俗卡片（图文）
└── 人文 — 时间线 + 文物非遗拾零 + 阅读一座城

八、开发环境（按实际填写）

类别	说明
操作系统	如：Windows 11 / macOS
编辑器	如：Visual Studio Code、Cursor
浏览器与调试	Chrome / Edge / Safari（Device Toolbar 测手机宽度）
运行方式	双击打开 `index.html`，或 VS Code Live Server
版本管理（可选）	Git

九、核心代码导读（报告里可配图/标行号）

以下路径均相对于项目根目录，行号随文件演进可能略有出入，以编辑器为准。

文件	读什么	说明
`index.html`	顶栏 `nav`、`.hero`、`.iron-panel`	首页层次最丰富，适合讲语义化与分区
`overview.html`	`facts-table`、`admin-grid`、`map-figure`	表格 + 栅格 + 图注
`specialties.html` / `customs.html`	`article.card` 重复结构	「组件化」思想：同结构换内容
`culture.html`	`.timeline`、`.timeline-item`	纵向叙事版式
`css/style.css`	`:root`、`@media (max-width: 768px)`、`.fade-in`	主题、响应式、动画
`js/main.js`	全文约 36 行	导航 + Observer，适合逐行讲解

十、模块设计与实现（分工与截图区）

要求：每位成员只写自己承担的页面/功能；配 1～2 张页面截图 + 1～2 段核心代码截图（或注明源文件与行号）。公共文件请说明 你具体编写或修改的区块。

成员一（姓名：李濠宇）

1）负责范围（勾选并补充）

[ ] index.html（首页）
[ ] overview.html（概况）
[ ] specialties.html（特产）
[ ] customs.html（风俗）
[ ] culture.html（人文）
[ ] css/style.css（说明具体区块：__）
[ ] js/main.js
[ ] 图片素材搜集与替换（说明：__）

2）设计要点（简述 100～200 字）

3）页面效果截图

说明	插入截图
本人负责页面之一
（可选）关键交互	![成员一页面2]( )

4）核心代码说明

文件	说明
	例：见 `________` 约第～行

成员二（姓名：吴依芠）

1）负责范围（勾选并补充）

[ ] index.html（首页）
[ ] overview.html（概况）
[ ] specialties.html（特产）
[ ] customs.html（风俗）
[ ] culture.html（人文）
[ ] css/style.css（说明具体区块：__）
[ ] js/main.js
[ ] 图片素材搜集与替换（说明：__）

2）设计要点（简述 100～200 字）

3）页面效果截图

说明	插入截图
本人负责页面之一	![成员二页面1]( )
（可选）关键交互	![成员二页面2]( )

4）核心代码说明

文件	说明

方向	成员一（示例）	成员二（示例）
页面	概况、特产（数据与物产）	首页、风俗、人文（叙事与时间线）
样式	县情表、地图、卡片两列	Hero、时间线、铁军面板
脚本与素材	图片命名与特产/风俗配图	`main.js`、首页/人文大图

十一、个人心得体会

成员一（李濠宇）

（200～400 字：技术收获、分工协作、布局/兼容问题与解决等。）

成员二（吴依芠）

（200～400 字。）

十二、答辩前自检清单

[ ] 五个页面导航互通，当前页 active 正确
[ ] images/ 路径、扩展名与 HTML 中 src 一致
[ ] 手机宽度下汉堡菜单可展开/收起，链接可点
[ ] 报告截图清晰，代码片段有简短图题
[ ] 两人分工在封面或开头写清
[ ] 引用的外部字体需联网加载；离线演示可说明或改用系统字体（若教师允许）

十三、常见问题（小白向）

Q：为什么我的图片不显示？
A：检查文件名大小写、images/ 是否在项目里、HTML 里写的是 images/xxx 还是 ../images/xxx（从 css 里写背景图才需要 ../）。

Q：手机上菜单点不开？
A：确认 js/main.js 已引入、控制台无报错；确认 style.css 里 768px 以下 .nav-toggle 为 display: flex。

Q：算不算「动态网站」？
A：本作业是静态网站：内容由 HTML 写死，没有服务器拼页面。只有 JS 做了「菜单开关、滚动动画」，不叫后台动态生成。

文档版本：与当前仓库目录结构同步；若教师要求 Word，可复制各节到文档中并补截图。

文章作者：zhexian
文章标题：1
文章链接：https://zhexiange.com/43.html
本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自zhexian ！

📚 推荐阅读

手机扫码阅读

1