期末大作业选题选来选去，最后落在“郑州美景”这种家乡介绍型网站上的同学，我猜你多半是图一个“好写、好凑、好答辩”。这话不假，但它绝不是那种糊弄事的模板页面——一个5页的HTML+CSS静态网站，只要规划得当，既能覆盖HTML5的常用标签，又能把CSS布局、盒子模型、浮动/弹性布局、表单、锚点这些考点全串起来，比那些花里胡哨却讲不清楚原理的选题要实用得多。这篇文章我就拿“郑州美景”这个实际项目，把从DW建站、目录规划、5个页面的内容划分、CSS样式统一到最后的浏览器兼容排查，完整走一遍。适合正在做web课程设计的学生，也适合想快速上手静态网页开发、又不想一上来就碰框架的朋友。
1. 项目整体设计与页面规划
1.1 为什么选“家乡介绍”当期末大作业
期末网页设计作业最怕两件事：一是题目太抽象，二是内容太空。电商页面、公司官网这类选题容易掉进“图多字少、交互全靠抄”的尴尬；“家乡介绍”这类题目好就好在，数据资料触手可及，而且允许你从自己熟悉的角度切入，不用编。对郑州这个城市来说，“绿城”“铁路枢纽”“中原文化”“烩面”“二七塔”都是自带记忆点的素材，一套页面就能把文本、图片、列表、超链接、表格甚至表单全都安排上。
更重要的是，这个选题天然适合HTML+CSS去实现。它不需要复杂的JavaScript交互也能成立——当然，你愿意在轮播图或返回顶部上加一点JS，那是加分项；如果只交静态页面，5个HTML文件加上一套统一CSS，也完全能撑起一个逻辑完整的课程设计。它恰好踩在课程大纲的“静态网页设计与制作”范围内，答辩时老师问起来，你有充分的理由说明为什么这样规划信息架构。
1.2 5页结构拆解与导航设计
5页不是随便凑的，我建议按“总—分—细”来排：
- 首页（index.html）：城市名片，包含主视觉Banner、一句话城市简介、热门景点快速入口，相当于整站索引。
- 景点介绍（scenery.html）：郑州核心景点图文卡片，比如二七纪念塔、河南博物院、黄河文化公园、只有河南戏剧幻城等，用自适应卡片网格展示。
- 美食文化（food.html）：烩面、胡辣汤、灌汤包这些地方美食，配合图片和简单的介绍性文字，可以做一段“美食地图”列表。
- 历史人文（history.html）：郑州作为八大古都之一，商都遗址、城隍庙、东大街文庙，用时间线或图文混排展示。
- 旅游攻略（travel.html）：包含交通、住宿、行程规划表格或列表，加一个“留言板”或“信息反馈”表单，把表单元素用上。
导航栏在每个页面保持完全一致：首页、景点、美食、历史、攻略，当前页高亮。这是网页设计课程里必考的“面包屑/导航高亮”技巧。对应到实际操作，就是给每个页面的导航链接设置一个不同的class，再靠CSS选择器控制当前页样式。例如：
<nav class="main-nav"> <a href="index.html" class="active">首页</a> <a href="scenery.html">景点</a> <a href="food.html">美食</a> <a href="history.html">历史</a> <a href="travel.html">攻略</a> </nav>在CSS里通过.main-nav a.active { color: #fff; background: #b8860b; }标识当前页面，简单明了。如果漏改active，老师一打开子页面，导航高亮还停在“首页”，这种一眼就能看穿的低级错误千万别犯。
1.3 城市主题的视觉关键词
既然写“郑州美景”，视觉上就要跟这座城市的调性保持一致。郑州的城市气质可以提炼成三个词：黄土、黄河、中原人文。所以主色板我建议用暖橙色、深棕、米色，辅助色用低饱和度的绿（对应“绿城”的别称）。这种配色比默认的纯白加黑更容易出效果，同时不需要很高的美术功底。
字体上，正文用系统自带的微软雅黑/苹方，标题可以用较粗的笔画，不需要下载额外字体文件，减少加载路径出错的风险。如果一定要用艺术字体，建议用CSS的@font-face引入本地字体文件，而不是依赖远程CDN——课程设计交到老师电脑上，没有外网时CDN字体直接全挂。页面风格统一之后，哪怕5个页面的内容侧重点不同，看起来也像同一个完整的网站，这一点对分数影响很大。
2. 核心细节解析与实操要点
这一部分要真正站到“代码写得出来”的角度讲。很多同学在DW里拉了表格、拖了几个图片就开始做，结果CSS全写在标签内，交上去一看，样式乱得没法看。所以实操的第一步不是写代码，而是把“结构、表现、行为”分开——这里主要涉及HTML与CSS分离。
2.1 语义化标签到底怎么用
HTML5最明显的考点就是语义化标签。但你不需要堆砌一大堆<header><main><section><footer>显得很专业，关键是在合适的位置使用。比如首页的整体结构：
<body> <header class="site-header"> <h1>郑州·中原之心</h1> <nav>...</nav> </header> <main> <section class="banner"> <h2>欢迎来到郑州</h2> <p>...</p> </section> <section class="spots"> <!-- 景点卡片列表 --> </section> </main> <footer class="site-footer"> <p>© 2025 郑州家乡介绍 | 网页设计期末作业</p> </footer> </body>这样写有两个好处：一是老师一眼看到你用了HTML5新标签；二是CSS选择器可以直接选header、footer等，避免给每个div取一大堆无意义类名。不过要记得，section和article不要滥用，如果只是一个普通容器，用div反而更合适。
另一个容易忽略的点是图片语义化。景点照片不能只用img塞进去就完事，建议给每张图片加上alt属性。alt不只是为了无障碍，一旦图片因为路径问题加载失败，页面上会显示这段文字，答辩演示时能少很多尴尬。另外，<html lang="zh-CN">也别忘了写，这是个细节，部分浏览器和老师批注时会注意。
2.2 CSS布局：浮动、Flexbox还是Grid
“浮动、Flexbox、Grid”是当前静态网页设计的三个关键词。浮动布局是传统必考；Flexbox是目前最常用的一维布局；Grid则是二维布局的利器。期末作业怎么选？我的建议是：导航栏和卡片列表用Flexbox，整页的“左右两栏”用Flexbox，复杂一点的景点九宫格可以用Grid，浮动只需要会用就行——因为它已经算老技术，除非你的课程要求必须用浮动，否则没必要硬凑。三种方案对比可以看下面这张表：
| 方案 | 适合场景 | 上手难度 | 期末作业推荐度 |
|---|---|---|---|
| 浮动 float | 图文混排、传统多栏 | 中，需要清浮动 | 课程指定才用 |
| Flexbox | 导航、卡片、一维排列 | 低，逻辑直观 | 主力，强烈推荐 |
| Grid | 二维网格、复杂宫格 | 中，需要理解行/列 | 加分项，按需使用 |
举一个实例：景点介绍页的四张卡片要平均分布。用Flexbox就是三行代码：
.spot-grid { display: flex; flex-wrap: wrap; gap: 20px; } .spot-card { width: 300px; flex: 1 1 300px; }flex: 1 1 300px的意思是：允许子项放大、允许缩小、基础宽度300px。这样在宽屏下卡片会自动拉长，窄屏下会自动换行。而同样需求如果让浮动来实现，你必须算好每张卡片的宽度百分比、清除浮动、处理边距，麻烦得多。这个选择本身就是“作业展示知识点”和“作业展示效率”之间的平衡——老师不会因为你用了Flexbox给你扣分，反而会认可你学了新技术。
既然热搜词里那么多“CSS怎么居中”，我顺手把居中这件事说透。水平居中：块级元素用margin: 0 auto;，行内元素给父容器设text-align: center;。垂直居中：单行文字可以直接line-height等于容器高度；真正通用的做法是 Flexbox：父容器display: flex; align-items: center; justify-content: center;，子元素自动居中，远比position + transform好记。作业里如果有一块“标题居中、按钮居中”的需求，这三行搞定。
2.3 文本、图片与间距细节
网页看起来“有点糙”，往往不是配色问题，而是间距和字体的失控。我见过太多作业，整页文字贴在一起，图片跟图片之间没有呼吸感。建议正文段落设置line-height: 1.8，段落之间的margin-bottom在16px到24px之间；卡片内部统一用padding: 20px;，卡片与卡片之间用gap: 20px;，立刻能清爽很多。
再补一个老师爱看、实际也很实用的小技巧：文本溢出显示省略号。单行：
.single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行（需要在WebKit内核浏览器下生效）：
.multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }热搜词里那些“两行超出...”其实就在说这个。把它用在景点卡片或美食简介上，能保证卡片高度整齐，不会因为某段文字太长而把整行撑乱。不过要留意，-webkit-line-clamp在Firefox旧版本可能不支持，如果老师用旧浏览器检查，效果会失效，所以关键内容别完全依赖这个属性。
图片尺寸与路径管理同样是重灾区。很多同学从网上下载一堆高清大图，直接塞进页面，结果首屏加载慢得像老牛拉破车；还有一部分同学把图片路径写成C:\Users\...这种绝对本地路径，一挪动文件夹就全挂。正确做法是：在站点内建一个images目录，所有图片都放到这个目录下，HTML里用相对路径引用，例如images/erqi-tower.jpg。图片大小需要压缩成适合网页展示的尺寸，一般宽度在800到1200像素就够了，单张控制在200KB以内。如果不会用PS，在线压缩工具有一大把，也可以直接在DW里通过“图像”属性改显示尺寸——但那只改显示，不改源文件大小，尽量先压缩再导入。
注意：无论是首页还是子页面，只要引用的是同一套CSS和图片目录，路径基准是“当前HTML文件所在目录”。所以子页面如果要引用根目录的
css/style.css，记得写成../css/style.css，这个细节答辩时经常被问到。
3. 实操过程与核心环节实现
这一部分我按“用DW从零建站”的实际流程来讲。DW其实只是编辑器，它的核心价值有两个：一是可视化的站点管理，二是便捷的实时预览。不要被它的界面唬住，代码还是要手写（或半可视化），这样才能保证逻辑清楚。如果你用的是VS Code或HBuilder，思路完全一样，工具不挑人，挑的是你会不会组织站点。
3.1 新建站点与目录规划
在DW里，先选“站点 > 新建站点”，站点名称填“zhengzhou-travel”，本地站点文件夹选到你创建的课程设计文件夹。建好站点后，DW会自动搞定相对路径的根目录识别，你在index.html里写css/style.css，DW能直接跳转到对应文件，这对后期维护很重要。
推荐的目录结构：
zhengzhou-travel/ ├─ index.html ├─ scenery.html ├─ food.html ├─ history.html ├─ travel.html ├─ css/ │ └─ style.css ├─ images/ │ ├─ banner.jpg │ ├─ scenery/ │ ├─ food/ │ └─ history/ └─ js/ └─ main.js // 如果需要少量交互我特别想强调images下的分目录：把景点、美食、历史图片分开，虽然前期可能乱一两张，但等页面做到第4、5页时，你会谢天谢地——找图效率完全不一样。DW左侧的文件面板也能帮你直接拖入图片生成相对路径，不过自动生成的路径偶尔会带../或多一层目录，建议生成后看一眼。
3.2 首页制作：从Banner到景点快速入口
首页不必一上来就写完整。先在body里把框架搭出来，然后逐个填充模块。Banner区域我建议用一个相对定位的容器，里面放背景图或img图，叠加一层半透明的标题文字，这是现代网页很常见的设计。
实现方案：
<section class="banner"> <img src="images/banner.jpg" alt="郑州城市风光"> <div class="banner-text"> <h2>你好，郑州</h2> <p>一城历史，一城烟火</p> </div> </section>CSS对应：
.banner { position: relative; } .banner img { width: 100%; height: 400px; object-fit: cover; } .banner-text { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }这里的object-fit: cover能保证图片不被压缩变形，多余部分裁掉。position: absolute和transform是页面布局常用的组合，建议记下来。不过要注意，绝对定位会脱离文档流，你可能需要给.banner一个固定高度，或者在后面留出空间，具体情况按预览微调即可。
Banner下面就是景点快速入口。可以用4张卡片，每张卡片包含一张小图、一个景点名、一句介绍。这样做既填补首页内容，又通过a标签链接到scenery.html对应的锚点，形成全站互链。卡片的基本结构：
<div class="spot-card"> <a href="scenery.html#huanghe"> <img src="images/scenery/huanghe.jpg" alt="黄河文化公园"> <h3>黄河文化公园</h3> <p>近距离感受母亲河的雄浑壮阔。</p> </a> </div>这样一个卡片就是一组完整的链接，点击区域覆盖整张卡片，体验比只点文字好太多。你只需要给a标签的伪类加样式，鼠标移上去时卡片变色，这个“鼠标移入事件”完全可以靠CSS实现：
.spot-card a { display: block; text-decoration: none; color: #333; } .spot-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }不需要写任何JavaScript，交互感就出来了。
3.3 子页面模板复用
你当然不希望每页都重新写一遍导航和页脚。省事的做法是：先做好index.html的完整结构，然后把内容区清空，另存为scenery.html，再往内容区填充景点内容。不要复制DW的“模板”功能，那是给动态站点用的，期末作业没时间学那个。
重复的部分建议独立成HTML注释或代码片段，每次粘贴时留意当前页高亮类是否改好。比如index.html导航第一个链接是class="active"，到了scenery.html，就要把这个active移到第二个链接上。忘记改是最高频的错误，页面打开后导航高亮永远停在“首页”，特别尴尬。还有一种方法：每页都给body加一个不同ID，比如<body id="page-home">，然后在CSS里写：
#page-home .main-nav a[href="index.html"] { color: #fff; background: #b8860b; } #page-scenery .main-nav a[href="scenery.html"] { color: #fff; background: #b8860b; }这样即使你复制粘贴忘了手动改，只要body的ID正确，高亮也能自动落到当前页。这是一种更聪明的做法，适合做5页时使用。
3.4 表单页：把考点凑齐
在travel.html里加一个仿“留言板”的表单，这是把表单元素考点塞进作业里的最好方式。一个表单可以包括：文本框、单选、多选、下拉列表、文本域、提交和重置按钮。下面是一个简化示例：
<form action="#" method="post"> <label for="name">姓名</label> <input type="text" id="name" name="name" placeholder="请输入姓名"> <label>出行方式</label> <input type="radio" name="traffic" value="高铁" checked> 高铁 <input type="radio" name="traffic" value="自驾"> 自驾 <label for="city">常住城市</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <label for="message">想说的话</label> <textarea id="message" name="message" rows="4"></textarea> <button type="submit">提交</button> <button type="reset">重置</button> </form>用CSS给表单统一宽度、内边距和圆角，不需要任何JavaScript就能获得干净的外观。如果课程要求要有“表单验证”，再加一个required属性给输入框就行，这是HTML5原生支持的最基础验证，毫不需要额外代码。
给表单做样式时，可以顺手把input、select、textarea的font-family继承到页面的字体，否则表单控件经常使用浏览器默认字体，和全站风格格格不入。最小的写法是：
input, select, textarea, button { font-family: inherit; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }3.5 统一CSS与页面微调
全站共用一个css/style.css，把公共部分的样式，比如body、header、nav、footer、section通通写在这里。子页面各自的特异样式，可以写在页面内的<style>标签里，或者用额外的CSS文件，但最推荐的是把所有样式都归到style.css，用足够的类名区分区域，这样交作业时，老师查代码更方便。
统一字体、统一间距、统一配色是“看起来专业”最快的捷径。比如全局设置：
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.8; color: #333; background: #faf6ef; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }所有内容都包在<div class="container">里，页面在不同分辨率下都不会贴边，显得很规整。多花几分钟把每个模块的标题、段落间距调成统一节奏，最终效果会立刻变好。
4. 常见问题与排查技巧实录
上周帮我一个学弟排查他的家乡网页，光样式失效就花了一下午。做课程设计就是这样，写完代码不出问题才奇怪，问题在于你要会快速定位。这里把这些高频问题整理成一张速查表，你做到一半卡住了，直接对着查。
| 问题 | 可能原因 | 快速解决 |
|---|---|---|
| CSS样式完全失效 | link路径错误/选择器写错 | F12看Network面板，找404，check文件名大小写 |
| 图片不显示 | 相对路径错位 | 按层级修正../，单独打开图片地址测试 |
| 导航高亮错位 | 当前页active类未修改 | 检查对应文件里的链接class，或用body ID方案 |
| DW预览正常，浏览器样式旧 | 浏览器缓存 | 按Ctrl+F5强制刷新，以Chrome为准 |
| 表格样式难看 | 未设置边框合并 | 使用border-collapse: collapse; |
| 中文乱码 | 编码不一致 | 统一用UTF-8，给每个html加<meta charset="UTF-8"> |
4.1 CSS样式完全失效
症状：HTML能显示，但所有排版、颜色都没有。 排查顺序：
- 检查
link标签的href路径是否正确。打开浏览器开发者工具（F12），看Network面板有没有404。 - 检查CSS文件是否真的存在，文件名大小写是否一致。
- 检查CSS文件开头有没有奇怪的编码字符，比如UTF-8 BOM头。用DW另存为时注意编码选UTF-8，不要选带BOM的UTF-8，某些浏览器会解析出错。
一个更隐蔽的问题是：CSS文件正常，但选择器写错了。假如你的导航结构是.main-nav ul li a，但你CSS写的是.main-nav li a，可能也能用，但如果有一段ul有特殊样式，就会对不上。建议写结构时优先给最外层容器一个类，然后逐层用后代选择器，减少不必要的关键字匹配。
4.2 图片显示成破图/不显示
症状：图片区域一片空白，或左下角小图标。 排查方向：
- 相对路径错位：子页面中图片路径要以子页面所在位置为基准。比如
scenery.html在根目录，引用images/scenery/1.jpg是images/scenery/1.jpg；如果scenery.html放在pages子目录，则要写成../images/scenery/1.jpg。 - 图片格式问题：有些网页图片是WebP格式，旧版浏览器不支持，建议统一转成JPG或PNG。
- 图片本身损坏：用浏览器单独打开图片地址试试，能打开就说明不是图片问题。
4.3 导航高亮错位
这是我最常帮同学改的问题。你只需要记一个原则：每个页面的<nav>里，与当前页面对应的<a>上要有一个不同的标记（比如class="active"），然后在CSS里写：
.main-nav a.active { background-color: #b8860b; color: #fff; }如果你有5个页面，5个文件里就要手动改5处。如果嫌麻烦，可以后面学一点JavaScript，用location.pathname自动匹配当前页，但期末作业没有要求就没必要。
4.4 页面在DW预览正常，浏览器打开却是旧样式
DW的“实时视图”和系统浏览器内核不完全一致，经常出现缓存问题。遇到样式改了但没生效，先按Ctrl+F5强制刷新浏览器缓存。如果是DW内置预览和Chrome显示不一致，以Chrome为准，因为老师大概率用Chrome或Edge看你的作业。此外，DW里的“设计视图”对Flexbox和Grid支持不一定及时，如果你用了Flexbox布局，建议直接在浏览器里预览，不要对着DW的“设计视图”去微调尺寸，容易越调越乱。
4.5 兼容性与响应式的坑
课程设计通常只要求能在浏览器正常显示即可，但如果你想“加一点分”，可以给CSS加上一个简单的响应式设置，比如：
@media (max-width: 768px) { .spot-grid { flex-direction: column; } .container { padding: 0 10px; } .banner-text { left: 5%; } }这样至少表明你了解响应式设计。但注意，不要为了响应式把整个布局改成单一列后，桌面端却出了问题。优先级是保证默认样式完整，移动端适配是加分项，一旦默认样式崩了，其他都不用谈。
4.6 表格和列表的样式统一
如果你的网页里有较长的表格（比如旅游攻略里的交通信息表），建议给表格添加基础样式：边框合并、表头背景色、行悬浮高亮。
table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } th { background-color: #f2e8d5; } tbody tr:hover { background-color: #f9f4e9; }这种细节在答辩时能让你直接说出“我做了表格美化”，比满页默认表格有说服力得多。列表也一样，ul默认的小圆点样式在多数网页里并不加分，你可以用list-style: none;去掉，再给每项加左侧小图标或内边距，立刻能提升质感。
5. 验收检查与答辩要点
很多同学做完代码就以为万事大吉，结果一到答辩现场就出问题：文件夹拷到别的电脑，路径全乱；或者老师一问“你这个图片为什么是斜的”，当场语塞。所以最后的验收步骤也很关键。
5.1 自测清单
在提交之前，花30分钟过一遍下面的清单：
- 每个页面都能通过导航栏跳转，并且返回时不会迷路；
- 所有图片都能正常显示，没有破图；
- HTML和CSS文件分离，代码缩进清楚，有足够的注释；
- 当前页面的导航高亮正确；
- 在浏览器缩放到75%或放大到150%时，布局没有严重错位；
- 把整个文件夹拷贝到另一个位置，或者发给手机打开，确认所有相对路径仍然有效；
- 标题、正文无错别字，特别不要有“lorem ipsum”或复制粘贴残留的英文占位文字。
如果用了表单页面，还要确认一下：点“提交”按钮之后，虽然不会真的上传数据，但页面不会出现奇怪的报错；点“重置”按钮能清空内容。这些都是老师可能会现场试的操作。
5.2 答辩怎么说
答辩老师最常问几个问题，你提前想好回答角度：
- “为什么选这个主题？”——因为家乡介绍能综合运用文字、图片、列表、表单等元素，信息组织自然，并且郑州本身有丰富的历史文化和旅游素材。
- “CSS用了哪些布局？”——回答Flexbox实现导航/卡片，用
position实现Banner文字叠放，用border-collapse处理表格边框。 - “图片为什么压缩过？”——为了减少网页加载时间，体现对性能的考虑。
- “如果页面在手机上打开怎么办？”——说了响应式媒体查询，哪怕只是加了一条
@media，也能证明你考虑过。
不用背台词，用自己的话把项目过程讲一遍，反而更真实。老师不会要求你的项目多么高大上，他更关心这段代码是不是你自己敲的、你能不能解释清楚每一块结构。
5.3 还可以加分的两个小功能
如果想在作业里多一个亮点，又不想引入太多JS，可以加两个低成本功能：
- 页面顶部的“返回顶部”锚点链接：在footer里放一个
<a href="#top">返回顶部</a>，并在body开头加<a name="top"></a>或给header加id="top"。 - 图片的
hover效果：鼠标移上时轻微放大或加阴影，营造交互感。这段CSS很经典：
.spot-card img { transition: transform 0.3s ease, box-shadow 0.3s ease; } .spot-card img:hover { transform: scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }这两处都不会增加多少工作量，却是实实在在的“用户感受得到”的细节。如果你还有余力，可以在首页Banner上加一个基于CSSanimation的淡入效果，不用JavaScript也能给老师一种“这个页面会动”的印象。但所有交互都要提前测一遍，不要让加分项变成翻车项。
这个项目做到最后，我最大的体会是：期末网页设计作业拼的并不是花哨的酷炫效果，而是“结构完整、代码规范、主题一致”这三个词。只要把5个页面的信息链条理顺，让CSS把每个页面的视觉语言统一起来，哪怕图片都是网上找的公开素材，作业也能拿一个不错的分数。如果你时间充裕，还可以在首页加一个简单的图片轮播（用CSS动画做淡入淡出，不碰JS），或者把攻略页的表格换成一张自制的手绘地图，这会让你在众多“模板味”作业里一下子跳出来。别怕现在写得慢，等你做完了第一套完整站点，后面再要做别的小项目，思路完全是通的。
