企业官网建设流程全解析

又到了一年两度的期末时刻，网页设计课程的大作业又开始让不少人头疼了。如果你正在为“HTML5期末大作业”发愁，又恰好是个河南学生，或者对郑州这座城市有感情，那我强烈建议你做这样一个选题：郑州美景介绍网页。这个选题听起来普通，但实际操作下来，你会发现它既好搜集素材、又有足够的排版发挥空间，还特别容易出效果，拿去做web课程设计作业，老师看了基本都会点头。

这篇文章我就以“郑州美景HTML+CSS 5页站”为例，把从选题拆解、页面规划到代码实现的完整思路和实操过程分享出来。整个过程用到的技术点就是HTML5加CSS，工具可以用Dreamweaver（也就是常说的DW），也可以用VS Code、HBuilderX这类编辑器，完全不影响。文章里我会把每一页的结构逻辑、核心代码、常见坑都讲清楚，你照着这个思路走，再做一点自己的替换，就是一份拿得出手的课程设计作业。

1. 项目拆解：家乡主题为什么“好交差又拿高分”

1.1 选题价值：数据好找、素材丰富、老师认可

先说选题。网页设计期末作业最怕什么？最怕选一个自己都不熟悉的话题。比如有人选“智能家居介绍”，图片要找半天，文案还得现编，做出来的页面自己都觉得假。而选“家乡介绍”就不一样了，你对这个地方有天然的情感连接和认知积累，写起来有底气，找图也精准。

具体到郑州这个城市，它的素材密度非常高：地标建筑有二七纪念塔、“大玉米”千玺广场、中原福塔；历史文脉有河南博物院、商城遗址；自然风光有黄河风景名胜区；周边还有嵩山少林寺这张国际名片。美食方面更是丰富：烩面、胡辣汤、灌汤包、焖饼……内容多到一页根本放不下，正好符合“5页站”的体量要求。

更重要的是，从老师评分的角度看，“家乡介绍”属于文化展示类网页，它天然需要你处理图文混排、导航跳转、色彩搭配这些核心考点。也就是说，这个题目看起来不难，但恰恰能把课程要求的HTML标签、CSS样式、页面布局都覆盖到，属于“性价比”极高的选题。

1.2 5页站结构：从“能用”到“像样”的关键规划

很多同学做多页站，习惯性地把5个页面做成“首页+3个内容页+联系页”，但页面之间毫无关联，导航只有一个返回首页的链接。这种做法在期末作业里非常吃亏，因为“网页规划与设计”这门课的核心考核点之一，就是站点结构是否合理、页面之间是否形成了完整的信息架构。

我做这个项目时的结构是这样的：

• index.html：首页，城市概览、大图轮播、城市名片卡片、精选推荐入口
• jingdian.html：美景页，郑州及周边的标志性景点图文展示
• meishi.html：美食页，郑州代表性美食的介绍与推荐
• wenhua.html：文化页，历史文脉、民俗特色、城市记忆
• liuyan.html：留言页，访问者信息收集表单，展示表单控件的运用

这个结构的好处在于：第一，每一页都有独立主题，内容不会重叠；第二，它们共享同一个顶部导航和底部版权信息，形成整体感；第三，首页作为总入口，通过图片链接把其他4个页面串起来，逻辑上是一个标准的“放射式”站点结构。

2. 页面原型与视觉风格定调

2.1 郑州这座城市给人的视觉关键词

动手写代码之前，我建议你先想一个问题：你要用视觉语言表达什么？

城市网页最怕做成“景点图片堆砌”，那和相册没有区别。我给这个项目定的调子是：厚重中带着现代感。郑州是八大古都之一，同时又是一个快速发展的现代化都市，所以我的视觉关键词有三个：古都的沉稳、中原的质朴、都市的现代。

落到具体设计上，就是主色调选偏深沉的红色系和米色系，红色呼应中原文化里的传统韵味，米色做底色让页面显得干净；辅助色用深灰和金色点缀，整体不会太跳跃。这种配色方案在DW里跑起来，无论在笔记本还是台式机的默认浏览器里看，都显得比较协调。

2.2 配色与字体方案：不花哨但很加分

我给这个项目定的具体配色方案如下：

• 主色：#8A1F2D（深砖红），用于导航栏、页脚、重点标题
• 辅助色：#C9A86C（浅金色），用于hover效果、边框装饰、小标签
• 背景色：#F7F5F0（米白），用于页面主体背景，比纯白更有质感
• 文字色：#333333（深灰），正文使用，保证长时间阅读舒适

字体方面，中文字体栈用的是"Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif，这样在Windows和Mac上显示效果都不会差太多。标题可以稍微加大字重和字号，正文用14到16像素，这是阅读比较舒服的区间。

这里有个经验：很多同学喜欢在网页里用花哨的艺术字体，但课程设计讲究的是“可读性优先”，字体种类越少、越统一，页面越显专业。一个页面最多用两种字体，这是底线。

2.3 5个页面的内容地图与导航关系

我在动工之前先用纸笔画了一个简单的站点地图，大致是这样的：

• 首页（index.html）：顶部导航 + 大幅Banner图 + “城市简介”文字区 + 3张名片卡片（景点、美食、文化）+ 底部版权
• 美景页（jingdian.html）：顶部导航 + 页面标题横幅 + 4个左右交替的景点图文块 + 景点信息表格 + 底部版权
• 美食页（meishi.html）：顶部导航 + 页面标题横幅 + 3列美食卡片 + “必吃清单”列表 + 底部版权
• 文化页（wenhua.html）：顶部导航 + 页面标题横幅 + 文化简介 + 三块文化模块（博物院/民俗/非遗）+ 底部版权
• 留言页（liuyan.html）：顶部导航 + 页面标题横幅 + 留言表单（姓名、性别、邮箱、留言内容、提交按钮）+ 表单说明文字 + 底部版权

这张站点地图我强烈建议你先画出来，哪怕是草稿。因为你在写代码的时候，每一页需要哪些区块、哪些样式是公用的、哪些是页面专属的，一目了然。后面调试的时候，也能快速定位是哪个区块出了问题。

3. 核心代码这样写，作业既不水又有含金量

3.1 公共头部与底部：5个页面统一灵魂

做多页站的第一步，不是写首页，而是先把“公共部分”定下来。所谓公共部分，就是5个页面共用的顶部导航和底部版权区。这样做的道理很简单：一个网站如果每个页面顶部长得不一样，用户就会觉得走错了站。

我的做法是在每个页面里都写同样的<header>和<nav>结构，再通过CSS统一样式。示例代码如下：

<!-- 公共头部 --> <header class="header"> <div class="container header-inner"> <div class="logo"> <h1><a href="index.html">郑州印象</a></h1> </div> <nav class="nav"> <ul> <li><a href="index.html" class="current">首页</a></li> <li><a href="jingdian.html">美景</a></li> <li><a href="meishi.html">美食</a></li> <li><a href="wenhua.html">文化</a></li> <li><a href="liuyan.html">留言</a></li> </ul> </nav> </div> </header>

对应的CSS，我用了flex布局让logo和导航一行排开，导航项用flex让间距自动撑开：

.container { width: 1200px; margin: 0 auto; } .header { background-color: #8A1F2D; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 999; } .header-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; } .logo h1 a { color: #fff; font-size: 24px; text-decoration: none; letter-spacing: 2px; } .nav ul { list-style: none; display: flex; } .nav ul li a { display: block; color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 8px 20px; font-size: 15px; border-radius: 4px; transition: all 0.3s ease; } .nav ul li a:hover, .nav ul li a.current { background-color: #C9A86C; color: #333; }

这里有两个点值得展开说。第一个是position: sticky; top: 0;，它能让导航栏在页面滚动时始终固定在顶部，这个效果在作业展示时非常加分，因为很多同学的页面往下滚动后就找不到导航了。第二个是.current这个类名，它表示“当前所在页面”的导航高亮，我在每个页面里会手动给对应的导航项加上这个类。这样用户在哪个页面，一眼就能看出来，这是网页设计里非常基础但很重要的“用户位置提示”。

底部版权区相对简单，我用的结构如下：

<footer class="footer"> <div class="container"> <p>版权所有 © 郑州印象 | 网页设计课程作业</p> <p>联系邮箱：example@163.com</p> </div> </footer>

CSS只要居中、给个深色背景、浅色文字即可：

.footer { background-color: #2C2C2C; color: #AAAAAA; text-align: center; padding: 24px 0; margin-top: 40px; font-size: 14px; line-height: 1.8; }

3.2 导航高亮与锚点跳转：细节见真章

刚才提到的.current高亮，实现上有一个常见的偷懒做法：直接复制粘贴公共代码，每个页面都改一下对应的类名。这个方法虽然土，但在课程设计阶段是最可靠、最不容易出错的。

如果你想让代码显得更有水平一点，也可以用后端模板或者JS动态生成导航，但对于HTML+CSS的静态网页作业来说，没有那个必要。老师们看的是你“懂不懂结构”，不是看你“用了多少框架”，所以这里用最简单直接的方式就好。

另外，首页我加了锚点跳转，点击首页的“探索美景”按钮，会平滑滚动到首页的推荐区域。代码非常简单：

<a href="#recommend" class="btn-more">探索更多</a>

配合CSS：

html { scroll-behavior: smooth; }

这一行代码加上去，锚点跳转就从生硬的瞬间切换变成了平滑滚动，很多同学不知道这个小技巧，实际上它能让你的页面手感提升一个档次。

3.3 首页英雄区与图片卡片：第一印象决胜点

首页有一个大幅Banner区，我称它为“英雄区”，因为它是访客打开页面后最先看到的东西。Banner我用了一张郑州城市天际线的图片，上面叠加了一个半透明深色遮罩，再放上大标题和一句简介。这样做的目的是保证文字在任何背景下都能看清。

实现方式是这样的：

<section class="banner"> <div class="banner-text"> <h2>天地之中 魅力郑州</h2> <p>一座承载千年文明、焕发现代活力的城市</p> <a href="jingdian.html" class="btn-more">探索美景</a> </div> </section>

.banner { height: 460px; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("images/zz-city.jpg") center center / cover no-repeat; } .banner-text { padding-top: 180px; text-align: center; color: #fff; } .banner-text h2 { font-size: 48px; letter-spacing: 4px; margin-bottom: 10px; } .banner-text p { font-size: 18px; margin-bottom: 24px; opacity: 0.9; } .btn-more { display: inline-block; background-color: #C9A86C; color: #333; padding: 10px 32px; border-radius: 30px; text-decoration: none; font-size: 16px; transition: all 0.3s; } .btn-more:hover { background-color: #fff; color: #8A1F2D; }

这种写法用到了CSS简写属性background，一行解决了图片路径、尺寸、位置和遮罩的问题，代码干净利落。

Banner下面就是“城市名片”区域，我用三张卡片分别推荐景点、美食和文化，每张卡片由图片、标题、简介和一个“查看详情”的链接组成。卡片本身用display: flex做三等分布局，这是本项目的核心布局方式。卡片悬浮时加一点上移效果，视觉反馈很明显，能体现你对CSS过渡动画的掌握。

.cards { display: flex; gap: 24px; margin: 40px 0; } .card { flex: 1; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 20px; }

3.4 美景/美食内容页排版：两套都能套用的模板

内容页我设计了两种排版模式，分别应对“图文交替”和“卡片网格”两种场景。

美景页用“左右交替图文块”，也就是一行是“图左文右”，下一行是“文左图右”。这种错落感能让长页面看起来不呆板。具体到实现，我控制图片块和文字块各占一半宽度，通过给奇数块加flex-direction: row-reverse来实现交替。这是CSS里非常经典的一个布局用法。

美食页则是标准的“卡片网格”，三列并排。如果内容有6样美食，就排两行；有9样，就排三行。每张卡片里放食物照片、名字、一句话特色描述和一个简单的推荐指数。

这两种排版模式，你做其他类型的网站也能直接复用，属于“学一次用三次”的技巧。

3.5 留言页表单：课程考核的常客，别丢分

留言页是表单控件知识点的主战场。很多同学嫌表单样式难调，就直接用浏览器默认效果，但其实表单恰恰是CSS能发挥很大作用的地方。我的表单包含了单行文本框、单选按钮、多行文本域和提交按钮，几乎覆盖了课堂上讲过的全部常用控件。

<form action="#" method="post" class="contact-form"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" placeholder="请输入你的姓名"> </div> <div class="form-group"> <label>性别</label> <input type="radio" id="male" name="gender" value="男" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女"> <label for="female">女</label> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="example@163.com"> </div> <div class="form-group"> <label for="message">留言内容</label> <textarea id="message" name="message" rows="5" placeholder="写下你对郑州的印象或建议"></textarea> </div> <button type="submit" class="btn-submit">提交留言</button> </form>

CSS上，我统一了输入框的宽度、内边距、边框圆角，聚焦时给一个边框高亮效果。这一步做完之后，表单从浏览器默认的“灰底白框”变成了一个有设计感的模块，视觉提升非常明显。提交按钮我用的是深砖红背景，悬浮时变成浅金色，与全站风格保持统一。

4. Dreamweaver实操：从新建站点到出成品

4.1 为什么要先建立站点

我知道现在很多人写网页直接用记事本或者VS Code，提到Dreamweaver觉得老土。但说句公道话，DW在做多页面站点管理这件事上，对新手特别友好。它的“站点管理器”可以让你看到整个网站的文件树、检查链接是否断掉、在多个页面之间快速切换编辑，这些都是IDE模式带来的效率。

用DW的第一步，是“新建站点”，不是直接新建HTML文件。这一步很多人会跳过，结果做到第3个页面就发现图片路径全乱套了。

新建站点的操作路径是：站点 → 新建站点 → 输入站点名称（比如“zhengzhou-web”）→ 选择本地站点文件夹。DW会记住你的站点根目录，之后在这个站点里建的所有文件、引用的所有图片，都基于这个根目录来写相对路径，这是我推荐它的重要原因。

4.2 用DW写HTML+CSS的正确姿势

DW有两种视图，设计视图和代码视图。我个人的建议是：代码视图为主，设计视图仅做预览参考。因为DW的实时渲染和浏览器实际效果有一定偏差，如果你过度依赖设计视图，提交作业后很可能出现“在DW里好好的，浏览器里全乱了”的翻车事故。

在DW里写代码时，有几个小功能我很常用。第一是代码提示，输入<或者CSS属性名时会自动弹出候选列表，能减少拼写错误。第二是“实时视图”，可以模拟浏览器效果，方便快速检查布局有没有明显问题。第三是“多文件预览”，DW支持在一个标签页里快速切换多个页面，省去来回开文件的麻烦。

我建议的编写顺序是：先写公共CSS，把所有页面的通用样式一次性搞定；然后从首页开始，一个页面一个页面地写HTML结构；每写完一个页面，就在浏览器里刷新检查一次。这样做的好处是问题能及时发现，不用到最后集中排错。

4.3 导出与提交前必须做的检查清单

网页写完到提交，中间还有几步不能省。第一步是清理文件，把不需要的备份文件、DW自动生成的_notes文件夹删掉或不要拷贝进提交包。第二步是检查文件路径，确保所有图片、CSS文件的路径都是相对路径，且没有使用本地绝对路径，不然老师在其他电脑上解压后，页面样式和图片会全部丢失。

第三步是检查文件编码。在DW里，做好的HTML文件应该统一另存为“UTF-8”编码，否则在浏览器里打开可能会出现中文乱码。具体操作是：修改 → 页面属性 → 标题/编码 → 编码选“UTF-8”。这个步骤很不起眼，但每年都有同学因为编码问题被扣分，非常可惜。

最后一步是用浏览器实际预览一遍。所有页面都点一遍，导航可以跳转、图片能显示、表单能正常输入内容，这些都确认了，再打包提交。

5. 常见问题与排查技巧实录

5.1 图片显示不出来，多半是路径问题

这是所有做网页的人都会遇到的头号问题。图片显示不出来，90%的原因都是路径写错了。你在DW站点里看文件结构是这样的：

zhengzhou-web/ ├── index.html ├── jingdian.html ├── meishi.html ├── wenhua.html ├── liuyan.html ├── css/ │ └── style.css └── images/ ├── zz-city.jpg ├── erqi.jpg ├── ...

那么在index.html里引用images文件夹下的图片，路径应该写images/zz-city.jpg，而不是../images/zz-city.jpg。../的意思是“上一级目录”，在根目录下的页面里多写一个../，路径就错了。

一个快速判断方法：打开页面后按F12打开开发者工具，切到Console或Network面板，如果看到Failed to load resource: 404之类的报错，基本就是路径或者文件名对不上。仔细核对一下文件名大小写，很多同学的图片是Zz-city.jpg，代码里写zz-city.jpg，在Windows上可能没问题，但在Mac和Linux上就会报错。

5.2 高度塌陷与浮动清除

如果你用了比较旧的浮动布局而不是flex，那么“父元素高度塌陷”这个问题大概率会遇到。简单说就是父盒子里的子元素都浮动了，父盒子自己却塌成了一条线，背景色和边框都没了。

解决办法有三种。第一种最稳妥：干脆用flex布局替代浮动布局，既能避免塌陷，代码也更简洁。第二种是给父元素加overflow: hidden;，能凑效但有可能把溢出的子元素裁掉。第三种是经典的空div清除法：

<div class="clearfix"></div>

.clearfix { clear: both; height: 0; }

我建议如果你还在用浮动布局，趁这次作业直接换成flex，因为到了后面的课程大概率也是接触flex和grid，早用早熟悉。

5.3 页面在浏览器里显示乱码

中文乱码的根源基本就是编码不一致。HTML文件本身保存成了GBK或ANSI，但代码里声明了UTF-8，浏览器按声明解码就乱了。解决办法是统一编码为UTF-8，同时确保HTML文件的开头有声明：

<meta charset="UTF-8">

另外，用DW另存为的时候注意选择编码类型，可以看到页面属性里的编码下拉框。如果你从网上下载了模板代码，里面可能自带一套编码声明，也要一并检查。

5.4 页面在手机上打开错位

虽然很多课程设计没有强制要求响应式，但老师如果让你现场展示，用教室电脑打开大概率是正常的；可如果你自己用手机演示，没有做适配的页面就会出现左右滑动或者错位。

最直接的临时方案是在HTML头部加一行viewport声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码不会让你的页面变成真正的响应式，但至少能让移动端浏览器按设备宽度来渲染，不至于出现整个页面被缩小成一团的问题。如果你想更进一步，可以把固定宽度的width: 1200px改成max-width: 1200px，再配合width: 100%，在小屏幕上它会自动收缩，这是最简单的一个适配技巧。

5.5 作业提交后样式全丢

这个问题的经典场景是：在自己的电脑上一切正常，发给老师或拷贝到别的电脑上打开，页面变成了“裸奔”状态。原因很简单——你把HTML文件单独发过去了，但没有把CSS文件和images文件夹一起发过去。HTML文件只是结构，样式和图片都在外部文件里。

所以我建议提交前把整个站点目录打包成zip，压缩的时候确认一下压缩包里包含全部HTML、CSS和images文件夹。解压一次，双击打开首页，检查一遍再从压缩包里把原文件删掉或者重新打包，能减少很多麻烦。

写在最后的一点体会

做了这么多年网页，说句实话，HTML和CSS是前端里最基础也最该扎实的部分。这个郑州美景的5页站做完，你基本就把一个完整网站从规划到上线的流程走了一遍：定主题、搭结构、写样式、调兼容、做检查。这套流程放到任何课程设计、甚至以后接私活做静态站，都能直接用。

如果你也是给自己家乡做介绍，不用把内容局限在郑州，换成你自己的城市，把图片、文字、颜色换一换，站点结构完全可以照搬。最后分享一个小技巧：做完后把每一页的主题色截图保存下来，放在页面底部作为设计说明的一部分，很多老师喜欢看到这种“设计意识”的体现，这也是我当年拿高分的一个重要原因。