杭帮菜主题网页实战包：首页/概况/视频/图赏/注册五页源码+素材+教学文档+答案

本文还有配套的精品资源，点击获取

简介：专为网页设计课程期末实训准备的杭帮菜主题完整项目，包含五个功能明确的HTML5页面：首页负责整体导航与风格呈现；杭帮菜概况页梳理发展脉络与经典菜品；视频页集成教学视频并支持播放控制；图赏页用响应式布局展示高清美食图片；注册页实现邮箱、密码等字段的实时校验与交互反馈。所有页面采用语义化HTML5结构，CSS3完成渐变背景、弹性盒子布局、过渡动画等视觉效果，JavaScript原生代码驱动轮播图切换、选项卡动态加载、表单验证逻辑及视频API调用。资源包内含学生任务说明（.docx格式）、全部可运行源码（index.html及配套css/js文件）、分类整理的原始素材（文字、高清图片、教学视频）、参考样图、练习专用文件夹，以及教师可用的完整答案版本（杭帮美食答案），覆盖课前布置、课堂演示、学生动手、课后核对全流程。

1. 项目概述：为什么用“杭帮菜”做网页实训？

我带网页设计课七年，每年期末都得给学生找一个既不空洞、又不跑题的实战项目。纯做企业官网太模板化，做个人博客又缺乏业务逻辑，直到三年前把“杭帮菜”定为实训主题——不是图新鲜，而是它天然具备教学闭环所需的全部要素：有文化厚度可挖（历史脉络、地域特征），有视觉张力可展（龙井虾仁的翠绿、东坡肉的琥珀光泽），有交互场景可设（视频教程需控制、注册表单要校验、图集浏览要响应），更重要的是，它能让学生在写代码时真正“看见”自己做的东西——不是一堆div堆出来的抽象结构，而是能闻到醋鱼酸香、听见油锅滋啦声的活物。

这套“杭帮菜主题网页实战包”，就是我们教研组反复打磨三轮后沉淀下来的完整教学资产。它不是五个孤立页面的拼凑，而是一个有呼吸感的网站系统：首页是门面，用大图轮播+渐变导航栏建立第一印象；概况页是骨架，用时间轴+卡片式布局讲清“杭帮菜从南宋御膳房怎么走到今天外卖盒里”；视频页是触点，嵌入真实录制的“西湖醋鱼刀工演示”视频，并用原生JavaScript调用Video API实现播放/暂停/进度拖拽；图赏页是质感担当，所有图片按“冷盘-热炒-汤羹-点心”四类分组，用CSS Grid+媒体查询实现从手机竖屏到4K显示器的无缝适配；注册页是临门一脚，邮箱正则校验、密码强度实时反馈、提交前二次确认——每个交互细节都对应前端开发中最常踩的坑。

所有技术选型都卡在“够用但不超纲”的边界上：HTML5语义化标签（<header><article><figure>）强制使用，杜绝<div class="header">这种野路子；CSS3只用弹性盒子（Flexbox）和网格（Grid）布局，不用CSS-in-JS或预处理器，确保学生能看懂每一行样式；JavaScript全程原生，不引入jQuery，轮播图手写定时器+索引控制，表单验证用addEventListener('input')而非onsubmit一刀切。资源包里每一张图、每一段文案、每一个.js文件，都经过课堂实测——比如“视频素材”文件夹里的xihucuyu.mp4，特意压制成H.264编码+MP4容器，确保在Chrome/Firefox/Safari三端都能直接<video src>加载，避免学生卡在“视频放不出来”这种底层环境问题上。

关键词“杭帮美食”不是装饰词，它是贯穿整个项目的锚点：文字素材里“宋嫂鱼羹”的典故来自《梦粱录》，“油爆虾”的火候描述参考了杭州楼外楼老师傅口述；图片素材全部实拍，连“龙井虾仁”的茶叶都按真实比例铺在虾仁旁；就连注册页的提示语“请输入常用邮箱，我们将发送杭帮菜节气食谱”也暗合杭州二十四节气饮食文化。这不是做网页，是用代码复刻一座城市的味觉记忆。

2. 整体架构与技术选型逻辑

2.1 为什么坚持“五页单入口”而非SPA？

很多老师问：现在都流行Vue/React做单页应用，为什么还让学生写五个独立HTML文件？答案很实在：教学目标决定技术栈。网页设计课的核心能力是“理解浏览器如何解析HTML/CSS/JS”，而不是“学会框架语法”。当学生用<a href="about.html">跳转时，他必须亲手配置每个页面的<link rel="stylesheet">路径、处理跨页面的导航高亮状态、解决图片相对路径在不同层级下的失效问题——这些恰恰是真实项目中80%的初级错误来源。

我们做过对比实验：让两组学生分别用Vue Router和纯HTML实现相同功能。Vue组在第三天就能做出切换动画，但到第五天仍说不清v-if和v-show的DOM渲染差异；HTML组前两天反复调试../css/style.css和./css/style.css的区别，但到第五天已能徒手写出兼容IE11的渐变背景降级方案。这个选择背后是教学逻辑：先建立对“浏览器原生能力”的肌肉记忆，再谈框架封装。

提示：资源包中index.html作为唯一入口，其他页面通过<nav>中的绝对路径链接（如<a href="about.html">概况</a>）。所有CSS/JS文件统一放在css/和js/根目录下，避免学生陷入路径地狱。

2.2 CSS3响应式布局的三层防御体系

响应式不是加个@media就完事。我们为图赏页设计了三层适配策略，覆盖从iPhone SE到iMac Pro的所有设备：

第一层：视口基础
所有HTML文件顶部强制声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这里user-scalable=no看似反直觉，但教学实践证明：学生在调试时频繁双指缩放会误判布局问题，关闭缩放能让他们专注代码本身。

第二层：弹性容器
图赏页主结构采用display: grid，但关键在于断点设计：
-max-width: 768px（平板竖屏）：单列瀑布流，每张图宽100%，高度自适应；
-769px - 1024px（平板横屏）：双列网格，用grid-template-columns: repeat(2, 1fr)；
-min-width: 1025px（桌面端）：四列网格，但加入grid-auto-flow: dense处理图片高度不一导致的空白。

第三层：图片智能加载
不用<picture>元素搞复杂源集，而是用srcset配合sizes属性：

<img src="images/dongpo.jpg" srcset="images/dongpo-400.jpg 400w, images/dongpo-800.jpg 800w, images/dongpo-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" alt="东坡肉特写">

这样Chrome会根据设备像素比自动选择最合适的图片，既保证高清显示，又避免手机下载2MB大图。

注意：所有图片素材均提供三套尺寸（400px/800px/1200px宽），存放在images/子目录中，命名规则为菜品名-尺寸.jpg（如longjing-400.jpg），方便学生理解srcset的映射逻辑。

2.3 JavaScript交互的“最小必要原则”

视频页的播放控制是典型教学案例。我们刻意避开<video controls>自带控件，要求学生用原生JS重写：

• 播放/暂停按钮绑定video.play()和video.pause()；
• 进度条用<input type="range">，监听input事件实时设置video.currentTime；
• 音量控制用video.volume = range.value / 100；
• 最关键的是错误处理：当视频因网络中断无法加载时，video.addEventListener('error', () => {...})触发备用提示。

这个设计迫使学生直面“API调用失败”这一真实场景。资源包中video/目录下的error-handling.js文件，专门演示如何捕获MEDIA_ERR_NETWORK等错误码并给出友好提示：“视频加载失败，请检查网络后刷新页面”。

3. 核心页面实现详解

3.1 首页：语义化结构与视觉动效的平衡

首页不是炫技场，而是教学示范田。它的HTML结构严格遵循W3C语义化规范：

<header role="banner"> <nav aria-label="主导航"> <ul> <li><a href="index.html" aria-current="page">首页</a></li> <li><a href="about.html">概况</a></li> <!-- 其他导航项 --> </ul> </nav> </header> <main role="main"> <section aria-labelledby="hero-heading"> <h1 id="hero-heading">杭帮美食 · 舌尖上的杭州</h1> <div class="carousel"> <figure class="carousel-item active"> <img src="images/longjing.jpg" alt="龙井虾仁：碧绿茶芽衬鲜嫩虾仁"> <figcaption>龙井虾仁</figcaption> </figure> <!-- 其他轮播项 --> </div> </section> </main>

CSS动效设计要点：
- 导航栏悬停渐变：用background: linear-gradient(90deg, #c92a2a, #ee7a2a)配合transition: background 0.4s ease，避免生硬色块切换；
- 轮播图淡入：.carousel-item:not(.active) { opacity: 0; transition: opacity 0.5s ease; }，不依赖JavaScript动画库；
- 响应式字体：标题用clamp(1.5rem, 4vw, 3rem)，在小屏保可读性，大屏显气势。

JavaScript轮播图实现：
核心是维护一个currentIndex变量和setInterval定时器：

let currentIndex = 0; const items = document.querySelectorAll('.carousel-item'); const totalItems = items.length; function showNext() { // 移除当前激活态 items[currentIndex].classList.remove('active'); // 计算下一个索引（循环） currentIndex = (currentIndex + 1) % totalItems; // 添加激活态 items[currentIndex].classList.add('active'); } // 启动轮播 const intervalId = setInterval(showNext, 5000); // 手动切换时清除定时器，防止叠加 document.querySelector('.prev-btn').addEventListener('click', () => { clearInterval(intervalId); // ... 切换逻辑 });

这个实现刻意暴露了setInterval内存泄漏风险——学生必须学会在页面卸载时clearInterval(intervalId)，这是真实项目必备技能。

3.2 概况页：时间轴与卡片布局的语义表达

概况页要讲清杭帮菜发展史，我们放弃纯文字罗列，用HTML5<time>标签构建时间轴：

<ol class="timeline"> <li> <time datetime="1127">南宋建炎元年</time> <h3>御膳起源</h3> <p>宋室南渡，汴京厨师将中原烹饪技法融入江南食材...</p> </li> <!-- 更多时间节点 --> </ol>

CSS时间轴实现：
用伪元素::before绘制垂直线，position: relative定位时间点：

.timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #c92a2a, #ee7a2a); } .timeline li { position: relative; padding-left: 2rem; margin-bottom: 2rem; } .timeline time { display: inline-block; position: absolute; left: -6rem; width: 5rem; text-align: right; font-weight: bold; }

这种写法让学生直观理解“伪元素如何辅助语义化结构”，比用<div class="line">更符合HTML5精神。

代表菜品卡片采用<article>包裹，每个卡片包含：
-<header>：菜品名称+年代标签；
-<figure>：高清图+<figcaption>说明工艺特点（如“东坡肉：慢火煨炖三小时，肥而不腻”）；
-<footer>：关联链接（跳转至图赏页对应分类）。

3.3 视频页：原生Video API的深度教学

视频页video.html的核心是三个可控组件：播放器、进度条、音量条。我们提供video/目录下的xihucuyu.mp4（西湖醋鱼教学视频），时长4分32秒，分辨率1280×720。

HTML结构精简到极致：

<video id="tutorial-video" preload="metadata"> <source src="video/xihucuyu.mp4" type="video/mp4"> 您的浏览器不支持视频播放。 </video> <div class="video-controls"> <button id="play-btn">▶</button> <input type="range" id="progress-bar" min="0" max="100" value="0"> <button id="volume-btn">🔊</button> <input type="range" id="volume-bar" min="0" max="100" value="100"> </div>

JavaScript控制逻辑：
重点演示timeupdate事件的防抖处理——避免每毫秒都更新进度条造成卡顿：

const video = document.getElementById('tutorial-video'); const progressBar = document.getElementById('progress-bar'); // 使用requestAnimationFrame替代高频事件 let lastUpdateTime = 0; video.addEventListener('timeupdate', () => { const now = performance.now(); if (now - lastUpdateTime > 100) { // 100ms内只更新一次 const percent = (video.currentTime / video.duration) * 100; progressBar.value = Math.floor(percent); lastUpdateTime = now; } });

这个细节教会学生：性能优化不是后期加戏，而是从第一行代码就要考虑的事。

3.4 图赏页：响应式图片网格与懒加载

图赏页gallery.html的挑战在于：既要展示48张高清美食图（总大小超150MB），又要保证首屏秒开。解决方案是CSS Grid + Intersection Observer API：

<div class="gallery-grid" id="gallery-container"> <figure class="gallery-item">const galleryContainer = document.getElementById('gallery-container'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target.querySelector('img'); const realSrc = entry.target.dataset.src; img.src = realSrc; img.onload = () => img.classList.add('loaded'); // 触发CSS淡入 observer.unobserve(entry.target); // 加载后停止观察 } }); }, { threshold: 0.1 }); // 观察所有图片项 document.querySelectorAll('.gallery-item').forEach(item => { observer.observe(item); });

这里threshold: 0.1意味着图片进入视口10%时就开始加载，比默认0更早触发，提升用户体验。所有占位图placeholder.jpg统一为20KB灰度图，确保无图时页面结构不塌陷。

3.5 注册页：表单验证的渐进增强策略

注册页register.html是交互教学重点。我们设计了三层验证：

第一层：HTML5原生约束

<form id="register-form"> <input type="email" required placeholder="请输入邮箱" aria-describedby="email-error"> <input type="password" minlength="6" required placeholder="密码至少6位" aria-describedby="pwd-error"> <button type="submit">立即注册</button> </form>

required和minlength提供基础防护，但学生必须知道：这些只是“客户端装饰”，服务端永远要二次校验。

第二层：JavaScript实时反馈
监听input事件，用正则校验邮箱格式：

const emailInput = document.querySelector('input[type="email"]'); emailInput.addEventListener('input', () => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const isValid = emailRegex.test(emailInput.value); // 动态添加/移除错误提示类 emailInput.parentElement.classList.toggle('error', !isValid); });

关键技巧：错误提示不写死在HTML里，而是用aria-live="polite"区域动态注入，保障屏幕阅读器可访问。

第三层：提交前最终校验

form.addEventListener('submit', (e) => { e.preventDefault(); // 阻止默认提交 const isEmailValid = validateEmail(emailInput.value); const isPwdValid = validatePassword(pwdInput.value); if (isEmailValid && isPwdValid) { // 模拟AJAX提交 alert('注册成功！杭帮菜电子食谱已发送至您的邮箱。'); } });

这里故意不连接真实后端，用alert模拟成功反馈——教学目标是掌握前端验证逻辑，而非后端集成。

4. 教学文档与资源组织逻辑

4.1 学生任务说明书（要求.docx）的设计哲学

这份.docx文件不是操作手册，而是问题驱动的学习脚手架。全文不出现“请按以下步骤操作”，而是用12个递进式问题引导思考：

1. “首页轮播图为何要用<figure>而非<div>？查阅MDN文档，列出<figure>的三个语义化优势。”
2. “当用户在图赏页快速滚动时，部分图片加载延迟。请分析IntersectionObserver的threshold参数设为0.1 vs 0.5对用户体验的影响，并用DevTools的Network面板验证。”
3. “视频页的进度条拖拽后，有时视频会跳回开头。请检查video.currentTime赋值时机，结合canplay事件修复该问题。”

每个问题后附“教师提示”折叠区（Word中用标题样式实现），例如问题3的提示：“currentTime设置后需等待seeked事件触发才表示定位完成，否则可能被后续timeupdate覆盖”。这种设计迫使学生主动查文档、做实验，而非复制粘贴代码。

4.2 素材分类的工程化思维

资源包中图片素材/、文字素材/、视频素材/三个目录，表面是文件归类，实则是训练学生工程化素材管理能力：

• 图片素材/下按“拍摄场景”分文件夹：studio/（影棚白底图）、restaurant/（餐厅实拍环境图）、process/（制作过程特写图）。学生做图赏页时，必须理解：环境图适合首页大图，过程图适合视频页截图，白底图适合详情页放大查看。
• 文字素材/中history.txt和recipes.txt用UTF-8 BOM编码，避免学生用记事本打开乱码；glossary.md用Markdown语法，教他们用VS Code预览术语表。
• 视频素材/中xihucuyu.mp4和xihucuyu-subtitled.mp4并存，后者含中文字幕轨道，演示<track kind="subtitles">用法。

注意：所有素材文件名禁用中文和空格，统一用英文短横线（如dongpo-rou.mp4），这是前端开发铁律——学生第一次遇到<img src="东坡肉.jpg">在服务器404时，就会刻骨铭心记住这点。

4.3 “杭帮美食答案”版本的差异化设计

教师版答案杭帮美食答案/不是简单复制学生版，而是包含三类增值内容：

1. 错误案例库
errors/目录下存放典型错误文件：
-index-broken.html：导航链接写成href="about.htm"（少个l），演示404调试流程；
-gallery-no-responsive.css：用固定像素宽度写网格，对比gallery.css的响应式写法。

2. 性能优化报告
perf-report.pdf用Lighthouse扫描生成，标注每个页面的FCP（首次内容绘制）得分，并给出优化建议：“首页轮播图图片未压缩，建议用Squoosh工具将longjing.jpg从1.2MB降至320KB”。

3. 扩展练习题
extension/目录提供进阶挑战：
- “为视频页添加倍速播放功能（0.5x/1x/1.5x/2x），要求按钮状态同步显示当前倍速”；
- “修改注册页，当用户输入邮箱时，实时调用MailboxValidator API检测邮箱有效性（提供测试密钥）”。

这些内容不强制学生完成，但为学有余力者提供跃迁通道。

5. 实操常见问题与避坑指南

5.1 路径问题：学生最常栽跟头的“隐形杀手”

现象：首页能正常显示图片，但点击“概况”跳转到about.html后，所有图片404。

原因分析：学生在about.html中写<img src="images/longjing.jpg">，但about.html与index.html同级，而index.html中图片路径是<img src="images/longjing.jpg">——看似一样，实则about.html的相对路径基准是它自身所在目录。当about.html被浏览器解析时，images/目录相对于about.html的位置没变，但学生常误以为要写成../images/longjing.jpg。

解决方案：
-教学时强制使用根相对路径：所有资源引用以/开头，如<img src="/images/longjing.jpg">。这样无论在哪个页面，路径都从网站根目录开始计算；
-VS Code中安装“Path Intellisense”插件，输入/后自动提示images/、css/等目录，减少手动输入错误；
- 在css/目录下创建_paths.css文件，定义CSS变量：
css :root { --img-path: '/images/'; } .hero-img { background-image: url(var(--img-path) + 'longjing.jpg'); }

5.2 表单验证：正则表达式的“温柔陷阱”

现象：邮箱验证正则/^[^\s@]+@[^\s@]+\.[^\s@]+$/在测试时通过，但学生用test@example.co.uk却失败。

原因：正则未考虑多级域名（.co.uk），\.只匹配单个点，而co.uk中有两个点。更严重的是，学生常忽略国际化邮箱（如张三@杭州.com）的合法性。

教学对策：
- 明确告知学生：“前端邮箱验证只需防明显错误（空格、无@、无.），复杂校验交给后端”；
- 提供安全正则：/^[^\s@]+@[^\s@]+\.[^\s@]+$/（保持原样），并强调其局限性；
- 在教师版答案中演示fetch('/api/validate-email', {method: 'POST', body: JSON.stringify({email})})的伪代码，建立前后端分工意识。

5.3 视频兼容性：别让H.265毁掉一节课

现象：学生用手机拍摄的meishi.mp4在Chrome能播，在Safari黑屏。

原因：手机默认用H.265（HEVC）编码，而Safari虽支持，但部分iOS版本需特定容器格式。

避坑清单：
-教学视频必须用H.264编码：用FFmpeg转换命令ffmpeg -i input.mp4 -c:v libx264 -c:a aac output.mp4；
-提供MP4和WebM双格式：<source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">，WebM作为Firefox兼容兜底；
-禁用autoplay和muted属性：现代浏览器禁止有声视频自动播放，强行添加会导致控制台报错。

5.4 响应式调试：别信“手机模式”

现象：开发者工具中“iPhone X”预览完美，真机访问却布局错乱。

真相：Chrome DevTools的设备模拟只是近似，真实设备有DPR（设备像素比）、触摸事件、字体渲染差异。

实操建议：
-必做真机测试：用ngrok或localtunnel将本地服务暴露为公网URL，用手机扫码访问；
-添加视觉调试线：在CSS中临时加入* { outline: 1px solid red; }，快速定位浮动元素脱离文档流；
-监控视口变化：在JS中打印window.innerWidth和window.devicePixelRatio，发现某些安卓机devicePixelRatio为2.75而非整数，影响rem计算。

6. 教师授课建议与课堂节奏把控

6.1 分阶段教学节奏设计

我们把五周实训拆解为“认知-模仿-改造-创造”四阶段，每周聚焦一个页面：

6.2 课堂演示的“留白艺术”

我演示时从不写完整代码，而是用“半成品”制造认知缺口：

• 演示轮播图时，只写好HTML结构和CSS基础样式，JS部分留空，问学生：“如果只有currentIndex变量，怎么让图片动起来？”；
• 讲表单验证时，写出emailInput.addEventListener('input', ...)框架，但把正则表达式留白，让学生现场查MDN文档补全；
• 展示响应式时，先用max-width: 768px写好平板样式，然后删掉@media，问：“没有媒体查询，怎么让手机看到单列布局？”（引出flex-direction: column）。

这种“留白”迫使学生主动思考，而非被动接收答案。

6.3 作业批改的颗粒度控制

批改学生作业时，我按三个维度打分：

1. 语义化合规性（30%）：是否滥用<div>？<img>是否有alt？<nav>是否加aria-label？
2. 响应式鲁棒性（40%）：在Chrome/Firefox/Safari三端截图对比，布局错位扣分；用chrome://flags/#enable-experimental-web-platform-features开启新特性测试兼容性；
3. 交互真实性（30%）：视频能否拖拽进度？注册表单输入错误邮箱时，是否实时显示红色边框？不依赖alert，必须有视觉反馈。

提示：在教师版答案中，每个页面都附带test/目录，存放自动化测试脚本（如用Puppeteer检查轮播图是否自动切换），但仅作为教师参考，不提供给学生——保持探索乐趣。

7. 项目延伸与真实世界映射

做完这个项目，学生常问：“这和真实工作有什么关系？”我的回答是：它就是缩小版的真实项目。

• 首页轮播图对应电商首页Banner，学生写的setInterval逻辑，和淘宝首页的“猜你喜欢”轮播底层一致；
• 图赏页的懒加载，就是微信公众号文章图片加载策略的简化版；
• 注册页的邮箱实时校验，正是知乎注册流程的第一步；
• 甚至杭帮美食答案/中的错误案例库，就是大厂前端团队“Bug知识库”的教学版。

我们鼓励学生做一件小事：把register.html中的“杭帮菜电子食谱”改成自己家乡菜，替换3张图片、修改2段文案、调整1处配色——这个微小改动，就是从“完成作业”到“拥有作品”的质变。去年有学生把项目部署到GitHub Pages，链接发到杭州本地美食论坛，竟收到楼外楼行政总厨的私信：“你们拍的‘宋嫂鱼羹’步骤很准，下次来拍我们的新菜！”

这大概就是教学最欣慰的时刻：代码不再悬浮于屏幕之上，而是扎进真实世界的土壤里，长出看得见的枝叶。

（全文共计5820字）

本文还有配套的精品资源，点击获取

简介：专为网页设计课程期末实训准备的杭帮菜主题完整项目，包含五个功能明确的HTML5页面：首页负责整体导航与风格呈现；杭帮菜概况页梳理发展脉络与经典菜品；视频页集成教学视频并支持播放控制；图赏页用响应式布局展示高清美食图片；注册页实现邮箱、密码等字段的实时校验与交互反馈。所有页面采用语义化HTML5结构，CSS3完成渐变背景、弹性盒子布局、过渡动画等视觉效果，JavaScript原生代码驱动轮播图切换、选项卡动态加载、表单验证逻辑及视频API调用。资源包内含学生任务说明（.docx格式）、全部可运行源码（index.html及配套css/js文件）、分类整理的原始素材（文字、高清图片、教学视频）、参考样图、练习专用文件夹，以及教师可用的完整答案版本（杭帮美食答案），覆盖课前布置、课堂演示、学生动手、课后核对全流程。

本文还有配套的精品资源，点击获取