又到了一年两度的期末时刻网页设计课程的大作业又开始让不少人头疼了。如果你正在为“HTML5期末大作业”发愁又恰好是个河南学生或者对郑州这座城市有感情那我强烈建议你做这样一个选题郑州美景介绍网页。这个选题听起来普通但实际操作下来你会发现它既好搜集素材、又有足够的排版发挥空间还特别容易出效果拿去做web课程设计作业老师看了基本都会点头。这篇文章我就以“郑州美景HTMLCSS 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 classheader div classcontainer header-inner div classlogo h1a hrefindex.html郑州印象/a/h1 /div nav classnav ul lia hrefindex.html classcurrent首页/a/li lia hrefjingdian.html美景/a/li lia hrefmeishi.html美食/a/li lia hrefwenhua.html文化/a/li lia hrefliuyan.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 classfooter div classcontainer p版权所有 © 郑州印象 | 网页设计课程作业/p p联系邮箱example163.com/p /div /footerCSS只要居中、给个深色背景、浅色文字即可.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动态生成导航但对于HTMLCSS的静态网页作业来说没有那个必要。老师们看的是你“懂不懂结构”不是看你“用了多少框架”所以这里用最简单直接的方式就好。另外首页我加了锚点跳转点击首页的“探索美景”按钮会平滑滚动到首页的推荐区域。代码非常简单a href#recommend classbtn-more探索更多/a配合CSShtml { scroll-behavior: smooth; }这一行代码加上去锚点跳转就从生硬的瞬间切换变成了平滑滚动很多同学不知道这个小技巧实际上它能让你的页面手感提升一个档次。3.3 首页英雄区与图片卡片第一印象决胜点首页有一个大幅Banner区我称它为“英雄区”因为它是访客打开页面后最先看到的东西。Banner我用了一张郑州城市天际线的图片上面叠加了一个半透明深色遮罩再放上大标题和一句简介。这样做的目的是保证文字在任何背景下都能看清。实现方式是这样的section classbanner div classbanner-text h2天地之中 魅力郑州/h2 p一座承载千年文明、焕发现代活力的城市/p a hrefjingdian.html classbtn-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# methodpost classcontact-form div classform-group label forname姓名/label input typetext idname namename placeholder请输入你的姓名 /div div classform-group label性别/label input typeradio idmale namegender value男 checked label formale男/label input typeradio idfemale namegender value女 label forfemale女/label /div div classform-group label foremail邮箱/label input typeemail idemail nameemail placeholderexample163.com /div div classform-group label formessage留言内容/label textarea idmessage namemessage rows5 placeholder写下你对郑州的印象或建议/textarea /div button typesubmit classbtn-submit提交留言/button /formCSS上我统一了输入框的宽度、内边距、边框圆角聚焦时给一个边框高亮效果。这一步做完之后表单从浏览器默认的“灰底白框”变成了一个有设计感的模块视觉提升非常明显。提交按钮我用的是深砖红背景悬浮时变成浅金色与全站风格保持统一。4. Dreamweaver实操从新建站点到出成品4.1 为什么要先建立站点我知道现在很多人写网页直接用记事本或者VS Code提到Dreamweaver觉得老土。但说句公道话DW在做多页面站点管理这件事上对新手特别友好。它的“站点管理器”可以让你看到整个网站的文件树、检查链接是否断掉、在多个页面之间快速切换编辑这些都是IDE模式带来的效率。用DW的第一步是“新建站点”不是直接新建HTML文件。这一步很多人会跳过结果做到第3个页面就发现图片路径全乱套了。新建站点的操作路径是站点 → 新建站点 → 输入站点名称比如“zhengzhou-web”→ 选择本地站点文件夹。DW会记住你的站点根目录之后在这个站点里建的所有文件、引用的所有图片都基于这个根目录来写相对路径这是我推荐它的重要原因。4.2 用DW写HTMLCSS的正确姿势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 classclearfix/div.clearfix { clear: both; height: 0; }我建议如果你还在用浮动布局趁这次作业直接换成flex因为到了后面的课程大概率也是接触flex和grid早用早熟悉。5.3 页面在浏览器里显示乱码中文乱码的根源基本就是编码不一致。HTML文件本身保存成了GBK或ANSI但代码里声明了UTF-8浏览器按声明解码就乱了。解决办法是统一编码为UTF-8同时确保HTML文件的开头有声明meta charsetUTF-8另外用DW另存为的时候注意选择编码类型可以看到页面属性里的编码下拉框。如果你从网上下载了模板代码里面可能自带一套编码声明也要一并检查。5.4 页面在手机上打开错位虽然很多课程设计没有强制要求响应式但老师如果让你现场展示用教室电脑打开大概率是正常的可如果你自己用手机演示没有做适配的页面就会出现左右滑动或者错位。最直接的临时方案是在HTML头部加一行viewport声明meta nameviewport contentwidthdevice-width, initial-scale1.0这行代码不会让你的页面变成真正的响应式但至少能让移动端浏览器按设备宽度来渲染不至于出现整个页面被缩小成一团的问题。如果你想更进一步可以把固定宽度的width: 1200px改成max-width: 1200px再配合width: 100%在小屏幕上它会自动收缩这是最简单的一个适配技巧。5.5 作业提交后样式全丢这个问题的经典场景是在自己的电脑上一切正常发给老师或拷贝到别的电脑上打开页面变成了“裸奔”状态。原因很简单——你把HTML文件单独发过去了但没有把CSS文件和images文件夹一起发过去。HTML文件只是结构样式和图片都在外部文件里。所以我建议提交前把整个站点目录打包成zip压缩的时候确认一下压缩包里包含全部HTML、CSS和images文件夹。解压一次双击打开首页检查一遍再从压缩包里把原文件删掉或者重新打包能减少很多麻烦。写在最后的一点体会做了这么多年网页说句实话HTML和CSS是前端里最基础也最该扎实的部分。这个郑州美景的5页站做完你基本就把一个完整网站从规划到上线的流程走了一遍定主题、搭结构、写样式、调兼容、做检查。这套流程放到任何课程设计、甚至以后接私活做静态站都能直接用。如果你也是给自己家乡做介绍不用把内容局限在郑州换成你自己的城市把图片、文字、颜色换一换站点结构完全可以照搬。最后分享一个小技巧做完后把每一页的主题色截图保存下来放在页面底部作为设计说明的一部分很多老师喜欢看到这种“设计意识”的体现这也是我当年拿高分的一个重要原因。