又到了期末赶网页大作业的季节群里不少同学都在问“HTML5期末大作业做什么题目好”“6页网站怎么凑够”“DW怎么导出作业”。如果你点进来是因为同样被网页设计作业卡住了那这个“水果超市网站设计6页HTMLCSSJavaScript”项目正好可以作为一个完整参考。它覆盖了静态页面、布局排版、JS交互、表单校验这几个课程设计里最常见的考点技术栈不复杂页面数量刚好能撑起一份作业的体量老师验收时想挑毛病都难。我拿这个题目完整走了一遍从规划到打包提交的流程把每个页面怎么拆、每块交互怎么写、哪些地方老师会重点看、哪些坑绝对不能踩一条条整理出来。不管你是打算照着做一个水果超市还是想改成鲜花店、奶茶店、宠物用品店思路都一样可以套。下面直接进入正题。1. 项目思路拆解为什么选“水果超市”这个题6页怎么分配1.1 课程设计选题的黄金标准水果超市全踩中了期末大作业选题这事很多人一开始就搞错了。他们说“选个看起来高级的”比如智能家居控制台、人工智能网站、区块链科普站结果做着做着发现两个致命问题一是素材找不到二是功能撑不起来。老师评的是“页面完成度”和“技术点覆盖度”不是题目有多炫。水果超市这个选题恰好是学生作业里最“安全”的一类。理由有四个素材极其好找。水果图片色彩鲜艳、识别度高不管是去免费图库还是自己拍都能凑出一套风格统一的产品图。对于没有设计基础的同学来说图片好看页面就成功了一半。商品分类天然清晰。水果按照时令、产地、进口、礼盒、果切等维度可以拆出好多个子分类每个分类都能对应一个页面区块或筛选条件结构怎么搭都不别扭。电商主流程完整。网站首页展示、商品列表、购物车、结算下单、关于我们这五个页面一铺开六页作业的内容量就满了而且每个页面都有明确的“功能任务”不是互相重复的充数页面。贴近真实行业答辩有话讲。老师问“你为什么要做这个网站”可以说“水果生鲜电商是这几年增长很快的零售业态用户在线选购水果的场景很普遍所以我做了一个垂直品类的网购商城”这句话既安全又显得思考过选题。相比之下个人博客、旅游网站这类题不是不能做但功能上很难撑起六页容易做到第三页就发现除了换图没什么可写的。电商类网站是“天然的功能富矿”这也是我推荐这类题目的核心原因。1.2 6页站点的信息架构不是凑页数是走通一条下单链路很多同学做多页站点时是“想到哪页做哪页”最后页面之间没有逻辑关系。正确做法是先画一张站点地图把用户从进入网站到完成购买的全流程走一遍再根据流程定页面。水果超市这个项目我用的是主链路加辅助页面的结构页面文件名页面名称核心内容页面职责index.html首页品牌Banner轮播、时令推荐、热销榜单、会员引导吸引用户、分发流量fruits.html全部水果商品卡片列表、分类筛选、价格排序商品浏览与筛选cart.html购物车已选商品列表、数量修改、删除、金额统计订单确认前的临时存储checkout.html结算页收货信息表单、配送方式、支付方式、订单汇总模拟下单about.html关于我们品牌故事、门店信息、联系方式信息背书、凑足页面news.html 或 sale.html促销活动/水果知识专题文章或活动页丰富网站内容层次这六个页面前四个互相之间是有真实跳转关系的——首页点“立即购买”跳商品列表列表点“加入购物车”后切到购物车页购物车点“去结算”跳到结算页。后两个页面起到品牌展示和内容补充作用同时方便导航栏左右两侧都有链接视觉上均衡。这种设计的聪明之处在于它把“6页”从一个生硬的数量要求变成了一个完整业务流程的自然产物。老师在点链接时能看到一个真正能“用”起来的网站而不是六个孤立页面堆在一起。1.3 技术选型原生HTML5CSS3JavaScript就够了别给自己加戏课程设计这个场景下技术选型最忌讳的是“炫技”。有些同学一上来就想着用Vue、React、Bootstrap觉得用框架显得厉害。但实际上课程大纲如果只教了HTMLCSSJS你用框架写完答辩时老师问“这个组件是什么原理”你答不上来反而扣分。框架引入的是外部文件离线演示时万一CDN加载失败整个页面直接白屏这是作业演示现场最尴尬的事故。老师最看重的是你“手工实现功能”的能力。轮播是自己写的购物车是自己用JavaScript操作的这些才是作业的核心亮点。所以这个项目我用的是纯原生三件套HTML5负责页面结构与语义化标签CSS3负责布局、动画与响应式适配原生JavaScript负责轮播、筛选、购物车存储与表单校验。工具方面如果你学校指定用Dreamweaver那可以用DW来新建站点和管理文件但我个人建议实际写代码时用VS Code或HBuilder这类轻量编辑器体验比DW好太多写完再用DW打开提交即可。下面我展开讲讲具体怎么做。2. 先搭公共层目录结构、导航、全局样式专业和业余的分水岭我见过太多期末作业六个页面六个样字体不统一、间距不统一、导航颜色深浅不一。这种作业哪怕功能齐全老师一眼就能看出来是东拼西凑的。专业的做法是先做“公共层”把所有页面共用的东西一次搞定。2.1 目录结构设计从第一分钟就按“工程化”的方式组织不少同学的作业文件夹长这样桌面新建文件夹里面乱七八糟堆了三十张图片和六个HTML文件。文件名还是“新建文档(5).html”。这个印象分就丢了。一个合格的课程设计站点目录应该这样组织fruit-shop/ ├── index.html ├── fruits.html ├── cart.html ├── checkout.html ├── about.html ├── sale.html ├── css/ │ ├── style.css // 全局样式变量、重置、公共组件 │ ├── index.css // 首页专用样式 │ └── fruits.css // 列表页专用样式 ├── js/ │ ├── main.js // 公共脚本导航高亮、购物车角标 │ ├── slider.js // 首页轮播 │ ├── cart.js // 购物车逻辑 │ └── checkout.js // 表单校验 └── images/ ├── banner/ ├── fruits/ └── icons/用二级目录把CSS、JS、图片分开图片再按用途建子目录命名统一用小写字母加连字符。这样做的好处是文件多了之后不会乱老师打开文件夹看结构就知道你“有工程意识”后续你维护代码也轻松得多。所有文件名我建议都用英文不要用中文名或拼音避免某些环境下路径解析报错。2.2 导航和页脚怎么做到六个页面完全一致站点导航是用户浏览的骨架也是最容易出问题的地方。要么这个页面的导航少了个链接要么那个页面的导航样式变了。解决办法有两个方向第一种适合新手也最稳妥——写一个统一的导航HTML代码块六个页面直接复制粘贴。听起来笨但确保了结构一致你在CSS里定义的样式自然也就一致了。第二种稍微高级一点用JavaScript动态生成导航。在页面底部引入一个公共JS文件用JS把导航HTML渲染到指定容器里。好处是后期改导航只需要改一处坏处是如果JS文件加载失败整个站的导航都会消失。对于课程设计我个人更推荐第一种“复制粘贴法”稳定压倒一切。但要做两点优化第一给body加一个自定义属性或给每个页面的导航链接加不同的class用来标记“当前页高亮”。比如在fruits.html里导航中的“全部水果”这个链接加一个classactiveCSS里对.active设置高亮颜色用户一眼就能看出自己在哪个页面。第二页脚内容里一定不要出现真实个人信息。学校如果要求放学号和姓名可以用XXX占位如果能不放就不放公开演示时保护隐私比什么都重要。页脚一般包含版权声明、联系方式、ICP备案占位文案、社交图标结构完整即可。2.3 全局CSS规范用CSS变量管住整套视觉风格网页设计作业最常见的问题就是“配色失控”。这个按钮是红色那个标题是蓝色背景一会儿白一会儿灰。要解决这个问题得在全局样式表里先用CSS变量定义一套“设计令牌”就像装修先定主色调一样。:root { --color-primary: #43a047; /* 主色新鲜绿 */ --color-primary-dark: #2e7d32; /* 深绿用于hover */ --color-accent: #ff8f00; /* 点缀色橙黄用于价格/按钮 */ --color-bg: #f7f9f8; /* 页面背景 */ --color-card: #ffffff; /* 卡片背景 */ --color-text: #212121; /* 主文字 */ --color-text-light: #757575; /* 次要文字 */ --radius: 10px; /* 圆角统一 */ --shadow: 0 2px 12px rgba(0,0,0,0.08); /* 卡片阴影 */ }后续所有页面的样式都从这些变量取色整个网站的风格就自动统一了。比如商品卡片可以写成.product-card { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }这套“重置样式CSS变量公共组件类”的结构是我做前端项目时的固定习惯。课程设计不用搞太复杂但把reset、变量、公共类这三层搭好后面写页面就是填空题。3. 核心页面实现首页轮播、商品列表、购物车、结算校验全流程网站的主心骨是四个有交互功能的页面。我把每一步的做法和原理都讲透代码量不大但每个细节都是能拿分的地方。3.1 首页轮播图最经典也最容易翻车的JS交互轮播图是课程设计里的“标配功能”几乎所有老师都会重点看。实现方式有很多种我推荐用最简单、最不容易出错的“淡入淡出式轮播”核心思路是所有图片叠放在同一个容器里只有当前激活的那张透明度为1其余为0配合定时器循环切换。div classbanner-slider idbannerSlider div classslide active stylebackground-image: url(images/banner/banner1.jpg);/div div classslide stylebackground-image: url(images/banner/banner2.jpg);/div div classslide stylebackground-image: url(images/banner/banner3.jpg);/div button classprev idprevBtn#10094;/button button classnext idnextBtn#10095;/button div classdots span classdot active/span span classdot/span span classdot/span /div /divconst slides document.querySelectorAll(.slide); const dots document.querySelectorAll(.dot); let currentIndex 0; let timer null; function goToSlide(index) { // 超出边界时回到第一张/最后一张 if (index slides.length) index 0; if (index 0) index slides.length - 1; slides.forEach((s, i) s.classList.toggle(active, i index)); dots.forEach((d, i) d.classList.toggle(active, i index)); currentIndex index; } function nextSlide() { goToSlide(currentIndex 1); } // 自动播放 timer setInterval(nextSlide, 3000); // 鼠标悬停时暂停移开时继续 const slider document.getElementById(bannerSlider); slider.addEventListener(mouseenter, () clearInterval(timer)); slider.addEventListener(mouseleave, () { timer setInterval(nextSlide, 3000); }); document.getElementById(prevBtn).addEventListener(click, () goToSlide(currentIndex - 1)); document.getElementById(nextBtn).addEventListener(click, () goToSlide(currentIndex 1));这个实现有四个细节值得注意第一定时器要先清除再重新设置否则鼠标反复悬停会产生多个定时器导致轮播速度越来越快第二点击左右按钮和自动播放触发的是同一个goToSlide函数逻辑统一第三指示器圆点要和当前索引绑定点击圆点也可以跳转到对应图片第四轮播图容器要设置overflow: hidden图片区域固定高度避免布局被撑乱。这里有个经验之谈不要一上来就追求那种“横向滑动”的轮播效果它涉及位置计算和过渡动画容易出现“从最后一张切回第一张时整块空白”的bug。淡入淡出视觉上同样专业、稳定得多评分上完全不吃亏。3.2 商品列表页网格布局、筛选、排序、加入购物车一个不少商品列表页是水果超市网站的信息核心也是功能点最多的页面。我把它拆成三块布局、筛选、交互。布局这块直接使用CSS Grid一行代码解决响应式问题.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }这个写法的妙处在于minmax(220px, 1fr)的意思是“每个卡片至少220px宽有余量就均分”配合auto-fill自动换行。不需要写媒体查询宽屏显示5列窄屏自动降为2列、1列比传统的float布局高出一个段位。每张商品卡片的结构要包含图片、名称、规格/产地、价格、加入购物车按钮。我推荐用data属性在HTML上存好商品数据div classproduct-card>document.querySelector(.product-grid).addEventListener(click, function(e) { if (e.target.classList.contains(add-cart-btn)) { const card e.target.closest(.product-card); const product { id: card.dataset.id, name: card.querySelector(h3).textContent, price: parseFloat(card.dataset.price), image: card.querySelector(img).src, count: 1 }; addToCart(product); } });哪怕以后往页面里加50个商品也不用改一行JS代码。这种“思考后端兼容性”的写作业方式在答辩时会成为明显的加分项。3.3 购物车页用localStorage让数据真正“存”下来购物车是很多同学最头疼的页面因为它的数据不是写死在HTML里的而是从其他页面带过来的。这里必须借助localStorage——浏览器提供的一种本地存储能力数据以字符串形式保存在浏览器中刷新页面后依然存在。规范的做法是所有商品数据统一存放在一个数组里数组转成JSON字符串后存进localStorage。操作购物车的四个核心方法分别是读取、写入、添加和删除我封装成下面这样// 获取购物车数据 function getCart() { const cart localStorage.getItem(fruitCart); return cart ? JSON.parse(cart) : []; } // 保存购物车数据 function saveCart(cart) { localStorage.setItem(fruitCart, JSON.stringify(cart)); } // 添加商品已存在则数量1不存在则push新对象 function addToCart(product) { const cart getCart(); const existed cart.find(item item.id product.id); if (existed) { existed.count 1; } else { cart.push(product); } saveCart(cart); updateCartBadge(); } // 删除商品 function removeFromCart(id) { let cart getCart(); cart cart.filter(item item.id ! id); saveCart(cart); renderCart(); }使用find和filter这两个数组方法操作数组比用for循环遍历简洁得多也是JavaScript基础语法里最值的掌握的部分。加号按钮就是找到当前商品把count加1再重新渲染减号按钮则是count减1减到0时自动从数组中删除“清空购物车”直接saveCart([])即可。提供一个购物车徽标功能在所有页面的导航栏购物车图标右上角显示当前购物车商品总数。这个函数放在公共JS里页面加载时调用一次数据变化时再更新一次整个站都联动起来效果很“专业”。每次存数据前记得处理一个边界情况localStorage中有可能存的是空字符串或非法JSONJSON.parse会直接报错。稳妥做法是外面包一层try...catch或者判断一下cart变量是否为空数组不然在隐私模式或清理缓存后会出现“脚本错误”的弹窗。3.4 结算页正则校验表单最后一次把关“会不会用JS”结算页的难点不是布局而是表单校验。常见的字段有收货人、手机号、所在地区、详细地址、配送时间、支付方式。每个字段都要有“失焦时校验”“提交时校验”这两道防线。我用一个函数统一处理function validateField(input) { const value input.value.trim(); const rule input.dataset.rule; // 通过data-rule指定校验规则 let valid true; let message ; if (!value) { valid false; message 该项不能为空; } else if (rule phone) { // 手机号1开头的11位数字 const phoneReg /^1[3-9]\d{9}$/; if (!phoneReg.test(value)) { valid false; message 请输入正确的手机号; } } else if (rule email) { // 再比如邮箱基础格式校验 const emailReg /^\w\w\.\w$/; if (!emailReg.test(value)) { valid false; message 请输入正确的邮箱地址; } } // 其他规则按需扩展... input.classList.toggle(invalid, !valid); const tip input.parentElement.querySelector(.error-tip); if (tip) tip.textContent message; return valid; }提交按钮的点击事件里对所有必填项循环执行validateField只要有一个返回false就阻止表单提交并在第一个错误位置聚焦。全部通过后可以做两件事弹出一个“下单成功模拟”的提示框同时清空购物车数据——因为用户已经完成了购买动作。这里可以顺手把localStorage里的fruitCart清掉形成完整的业务闭环。表单校验这块的加分技巧是“友好反馈”——不要只在提交时一次性报错而是输入框失去焦点时就提示用户改了内容之后错误提示自动消失。这一点小小的体验优化老师演示时只要输入一次错误手机号就能感受到比写一千字说明文档都管用。4. 踩坑实录期末大作业最常见的8个问题与排查方法这部分是实操中血泪换来的经验。下面的问题你只要做过网页作业十有八九会遇到而且它们高度雷同。4.1 中文乱码字符编码问题最容易被忽略六个页面全部中文内容但浏览器打开后是乱码。最常见的两个原因一是HTML文件没有写meta charsetUTF-8二是用Dreamweaver或记事本编辑文件时文件本身被保存成了ANSI或其他编码。排查顺序是先看head区有没有meta charsetUTF-8没有就加上有但还是乱码就用编辑器把文件另存为UTF-8格式。养成“新建文件第一行就先写文档类型和meta charset”的习惯能省掉后面一大堆麻烦。注意DW在某些情况下默认编码是GB2312如果你把DW文件拿到VS Code里改最好统一把编码转成UTF-8否则提交后换台电脑可能就乱码了。4.2 图片不显示十有八九是路径问题不是图片坏了很多同学喜欢在HTML里写绝对路径比如img srcC:\Users\张三\Desktop\fruit-shop\images\apple.jpg在自己电脑上能显示老师把文件夹复制到别的电脑或者U盘里打开路径全断了。正确写法是使用相对路径。站点根目录下的index.html引用图片写成images/apple.jpg如果是在子目录的页面里引用则写成../images/apple.jpg。一个简单的判断方法从当前HTML文件出发一层一层数到目标图片中间经过了哪些文件夹就写上哪些。图片不显示时按顺序排查文件名有没有写错注意大小写和后缀、路径层级对不对、图片文件本身是否损坏、浏览器控制台Network标签页里图片的加载状态返回是200还是404。其中404就是路径问题200就是CSS样式问题。4.3 JavaScript不生效九成是作用域和加载顺序的问题最常见的情况是把script标签写在head里代码直接操作document.querySelector但此时DOM还没解析完获取到的是null于是整个脚本报错。几个解决方案把script标签移到body结束标签之前这是最经典也是最稳妥的写法。把代码包在DOMContentLoaded事件里等DOM渲染完再执行。document.addEventListener(DOMContentLoaded, function() { // 在这里写初始化代码 });另一个高频问题是在函数内部定义了变量另一个函数里却访问不到。养成好习惯需要在多个函数之间共享的数据定义在全局作用域用let或const声明不要再用var绑定事件时函数名要带括号还是不带括号这个细节也很多人搞混——addEventListener第二参数填的是函数本身不带括号括号是立即调用一写错就变成undefined或立刻执行。4.4 购物车数据莫名其妙消失隐私模式的坑用浏览器的无痕/隐私模式打开网站时localStorage默认不可用的。师生演示用普通窗口访问问题不大但你自己测试时如果开了无痕窗口会发现购物车始终是空的。遇到这种情况优先检查是不是测试环境的问题再检查代码。另一个节奏问题是IDE卡死导致文件没保存改了半天JS刷新页面发现没变化。很多编辑器不会自动保存尤其是DW写完代码记得CtrlS然后强制刷新浏览器CtrlF5避免缓存干扰。说实话我帮别人排查期末作业问题时至少有两成是“文件忘保存”引发的惨案。4.5 导航栏定位和页面锚点的冲突首页如果内容很长很多同学会设置导航固定在顶部position: fixed。这时点击页脚里的“回到顶部”按钮或锚点链接会出现标题被固定在顶部的导航栏挡住的问题。解决方法是给锚点目标区块添加scroll-margin-top属性值设为导航栏高度再加一点余量例如section { scroll-margin-top: 80px; }这个问题的出现频率非常高但老师未必每个作业都会测到锚点跳转所以更多是影响实际体验遇到时知道方法就好。4.6 图片太多导致页面加载卡顿水果超市网站特别容易犯这个毛病因为水果图片高清大图很漂亮有人直接下载原图上传。结果首页三张Banner每张3MB打开网页转圈好几秒。处理方式很直接所有图片在放入站点前先用工具压缩一下。我个人的习惯是Banner图宽度控制在1920px以内质量压缩到80%商品图宽度800px以内体积尽量压到200KB以下。可以使用一些免费的在线压缩工具也可以用Photoshop的“导出为Web格式”。这一点做了之后网站的演示流畅度完全两个档次。4.7 页面间跳转失效点了导航没反应所有页面做完之后一定要从头到尾把所有导航链接点一遍并检查是否有遗漏页面。尤其是“购物车”图标按钮很多人只做了首页的其他页面没有给购物车图标加hrefcart.html导致用户在商品列表页想打开购物车却点不动。这个问题很隐性老师随机点两个页面就可能踩到所以页面全部完成后按“首页→商品列表→详情/筛选→加入购物车→购物车→结算→下单成功”这条完整链路走一遍缺哪补哪。4.8 浏览器兼容检查用Chrome验收不用管IE课程设计不要过度纠结兼容性。现在的主流浏览器是Chrome和Edge学校验收一般也是用这些。你只需要确保在Chrome里表现正常再用Edge打开看一眼不会有太大问题即可。不要用IE浏览器测试它连flex和grid都不完整支持会让你的样式全面崩盘。5. 提交前自检清单照着打勾避免答辩翻车最后这一步特别关键。很多同学功能做完了但提交时缺文件、漏页面、结构混乱直接拉低分数。我把自检项整理成一个表格你可以在提交前逐项确认。5.1 功能与结构自查表检查项检查标准是否通过页面数量是否有6个完整HTML页面是 / 否页面跳转每个页面导航链接是否都能正确跳转是 / 否图片资源图片路径是否是相对路径所有图片能正常显示是 / 否全局风格六个页面配色、字体、布局是否统一是 / 否HTML语义化是否使用了header、nav、main、footer等语义标签是 / 否CSS布局是否使用了Flex或Grid进行布局是 / 否JS交互是否有轮播、筛选、购物车、表单校验中至少三项是 / 否响应式适配缩小窗口后布局是否不崩、不出现横向滚动条是 / 否编码格式所有文件是否为UTF-8打开无乱码是 / 否文件命名所有文件名为英文无空格、无中文、无特殊符号是 / 否上面的表格里前五项是“一票否决项”有任何一项不通过老师都会觉得你是敷衍了事。后五项是“加分巩固项”做得越完整分数上限越高。5.2 代码规范和答辩话术的四个建议关键代码加注释。不是每行都加而是在轮播切换、购物车存储、表单校验这些功能块的函数上方用一行中文注释说明这函数是干嘛的。老师翻代码时能快速看出你的工程思路。文件夹命名清晰。整个站点文件夹用“项目名_姓名_学号”这种格式命名例如fruit-shop_张伟_2021001。压缩时用ZIP格式不要用7z或RAR避免老师电脑打不开。准备一个演示顺序。答辩时不要从首页开始平铺直叙点一遍应该按“亮点”走先打开首页展示轮播和视觉设计然后点进商品列表演示筛选和排序再演示加入购物车和数量增减最后演示表单校验——故意输错一个手机号让页面立刻给出错误提示然后改正再提交。你实际操作一遍比嘴上说“我做了很多功能”有力得多。图片来源要记录。如果用了网上的图片最好在CSS或HTML注释里标注图片来源或者直接使用无版权图库的图片。这不是必须的但万一老师追问你可以从容回答也体现了版权意识。写在最后的一些体会我做这个水果超市项目最大的感受是课程设计最怕的不是不会写代码而是没有“整体规划”的概念。六个页面如果当作六个独立任务去做最后一定是一盘散沙但如果先定信息架构、再做公共层、然后逐个填充功能页面整个过程会顺畅得多。这套方法换个题目照样成立——把水果换成书、花、零食、数码配件逻辑一模一样。另外如果你还有富余时间可以在“促销活动”页里加一个简单的秒杀倒计时或者给商品卡片加一个点击弹出详情弹窗的效果这些都是老师喜欢的小惊喜而且实现的难度不高。最后提醒一下做作业的过程中记得随时保存备份写坏了大不了重来别等最后一天才动手。按照上面这套思路去做你的HTML5期末大作业稳了。
