简介这是一套面向餐厅、餐饮品牌及网页初学者的纯静态网站模板基于HTML、CSS与JavaScript实现无需数据库和服务器脚本下载解压后即可快速搭建美食展示、菜单浏览、宴会预订、新闻发布、联系咨询等页面。模板共包含91个文件以html页面为主体配以jpg/png图片、css样式、js交互脚本、gif动效及字体图标文件压缩包约14.09MB适合直接部署或作为静态网页实战练习。目前已有1730人学习下载。除了首页、菜品、婚礼宴会、创始人、活动、新闻、简介、预订、联系等完整页面外资源还提供多套背景图、按钮素材和字体文件页面结构清晰、命名规范便于替换图文内容。对想快速搭建餐饮官网或学习静态网页布局的人而言是一份可直接使用且便于二次修改的参考模板。1. 为什么餐厅官网还在用纯静态HTML模板接到一个餐饮客户的官网需求对方预算不高、内容更新不频繁、还要求一周内看到可点可看的完整站点。大多数人的第一反应是上 WordPress 或找一套现成的后台系统但打开这套美食餐厅网站的 HTML 静态模板之后我的判断变了当站点是 10 个页面左右、核心诉求是品牌展示和预订引导时纯静态页面反而是交付效率最高、后续维护成本最低的方式。没有数据库意味着没有注入风险没有服务端脚本意味着随便丢到任意一台 Web 服务器上就能跑。这套模板里其实塞进了一个完整的多页站点结构包含主页、菜单、宴会、活动、新闻、创始人、预订和联系页静态模板的边界比很多人想象中宽得多。给同样在评估静态方案的人一个真实参考。2. 拆解美食餐厅静态模板的目录结构与资源依赖2.1 十个 HTML 页面之间的导航关系这套模板的页面文件命名很直白每个页面承担一个明确的信息模块。index.html是唯一的主页入口导航栏里串联起其他所有子页面。food.html是菜品陈列页Wedding.html处理宴会和婚礼场景的展示Events.html对应活动信息news.html和newshow.html构成新闻列表与详情页的关系founder.html讲创始人和品牌故事about.html是餐厅整体介绍Book.html是预约表单页contact.html放地址、电话和联系表单。页面之间的关系不是扁平散落而是两个层级列表页到详情页是一层news.html点进newshow.html主页到栏目页是另一层。profile.html单独存在实现的是用户侧的信息展示在纯静态语境下它更多承担「关于我们」的补充说明或会员权益介绍。导航公共部分在每个页面头部重复出现这是静态模板典型的组织方式——公共片段靠复制粘贴维护页面数量少的时候完全不觉得痛。从实际改造的角度建议先理一遍所有a标签的href指向。常见做法是打开每个 HTML 文件检索href把页面间的跳转关系画出来确认没有指向不存在文件的死链。2.2 CSS 分层与视觉组件归类css/目录下共有 6 个样式文件职责划分比较清晰文件名作用范围典型内容css.css全站核心样式布局骨架、栏目区块、导航、页脚public.css公共样式与重置清除默认边距、统一字体、工具类slick.css轮播组件样式图片轮播的外层容器、箭头、圆点lightbox.css灯箱效果样式图片点击放大后的遮罩层、关闭按钮chosen.css下拉选择框样式表单里可选菜单项的自定义下拉框ie-css3.htcIE6 行为文件让旧版 IE 支持圆角、阴影等 CSS3 效果ie-css3.htc不是标准 CSS 文件而是一个 HTC 行为脚本当年用来给 IE6 打 CSS3 补丁。如果目标用户群已经跟 IE6 彻底没关系这个文件连同对它的引用可以一并移除。视觉组件方面首页的indexbg.jpg是整页背景图menu-bg.jpg和Events-bg.jpg是栏目横幅背景l-bottom.png、l-top.png、con-top.png、con-bottom.png这一组图片是圆角容器四个角的装饰素材对应的是老式 CSS 滑动门技术——在 CSS3 圆角属性普及之前圆角全靠切图拼出来。2.3 JS 库选型jQuery 生态与特效依赖js/目录下的脚本文件透露了这套模板的交互实现路径。jquery.js和slick.js是主流的 jQuery 轮播方案lightbox.js负责图片的灯箱查看。这三个库在当时的静态模板里几乎是标配slick 做横幅和菜品图轮播lightbox 做菜品的细节大图预览。chosen.jquery.js让原生select下拉框变得可搜索、可打 tag在Book.html这类表单页里用来选择用餐人数或宴会套餐。需要注意的文件是prototype.js和scriptaculous.js。这两个库比 jQuery 更早流行scriptaculous.js提供Effect系列动画。当 prototype 和 jQuery 同时被引入时两个库都会抢全局的$符号控制台会报出$ is not a function或在 jQuery 里取到别的对象。常见做法是给 jQuery 开启noConflict模式在模板的公共脚本头部加上// 引入顺序prototype.js - scriptaculous.js - jquery.js - effects.js // 将 $ 的所有权交还给 prototypejQuery 改用全名调用 jQuery.noConflict(); // 原有 effects.js 里基于 $ 的调用可以这样改造 jQuery(document).ready(function($) { // 这里的 $ 仍然是 jQuery内部逻辑不用改 $(#foodCarousel).slick(); });这段代码的逻辑是调用noConflict()后全局的$变量交还给 prototype 库jQuery 对象只能用jQuery这个全名访问但ready回调里传入的$参数仍然是 jQuery 的引用所以原有基于$的选择器和链式调用不用逐行改。如果模板在Action.js或effects.js里大量混合用了两个库的方法建议不要按加载顺序猜胜负直接用上面的方式显式隔离。2.4 字体与图片资源的本地化处理myfont系列文件.eot、.woff、.ttf、.svg是一套完整的font-face字体四种格式对应不同浏览器的字体加载需求EOT 是 IE 专用WOFF 是 Web 标准格式TTF 是本地安装字体回退SVG 是早期 iOS Safari 的兜底方案。模板里出现demo.html和demo.css是字体的测试演示页不是站点功能页面可以不纳入导航。实际部署时删掉demo*文件同时确认css.css里的font-face路径指向的是myfont.woff等真实存在的文件。图片资源的命名带有明显的切图痕迹btn-slide-open.png和btn-slide-close.png是折叠面板的展开/收起按钮prevlabel.gif和nextlabel.gif是轮播左右箭头ajax-loader.gif是异步请求时的加载动画blk70.png是半透明黑色遮罩底图bullet.gif是列表项前的小圆点标记。这些图片全部引用自images/和upload/两个目录替换内容时只要保持文件名不变改图即可这是静态模板对非技术人员最友好的点。upload/目录下的图片是内容型素材img1.jpg到img11.jpg、img9.png等是菜品或餐厅环境的实拍图对应后台管理系统中上传目录的角色。区分「结构图」和「内容图」是后面做整站替换时的一个关键认知images/里的图动不得动了布局就崩upload/里的图随便换换完就是一个新餐厅的样子。3. 从模板到上线菜单页与预订表单的改造实录3.1 替换菜品数据从硬编码结构到可读性优先打开food.html会发现菜品信息全部是硬编码写在 HTML 里的一个菜品通常对应一个div或li结构里面包含图片、名称、简介和价格。这种做法的好处是简单直接缺点是菜单一旦超过 20 道菜维护起来就很痛苦。改造成本最低的方式不是引入数据绑定框架而是把菜品卡片的结构先看懂。先看一下food.html里菜品区块的原始结构找到单个菜品卡片的完整代码段。常见做法是先确定一个菜品卡片的模板然后决定你要手动复制替换还是写一个小脚本批量生成。如果只有 30 道菜手动替换加统一搜索替换就够如果菜单是动态变化的建议跳出静态页方案去考虑轻量数据文件。替换菜品时先批量处理图片。建议把真实菜品图统一放进upload/目录沿用原有的img1.jpg到img11.jpg编号文件名不变则页面上其他引用也不会断。然后逐个修改卡片里的alt文本和菜名标题alt文本可以嵌入菜品全名和分类关键词这对 SEO 的图片搜索有正向作用。!-- 替换前模板默认的占位内容 -- div classfood-item img srcupload/img3.jpg altFood Name / h3Lobster Thermidor/h3 p classdescA classic French dish with rich cream sauce./p p classprice$25.00/p /div !-- 替换后换成餐厅实际菜品与中文描述 -- div classfood-item img srcupload/img3.jpg alt蒜香黄油烤龙虾 / h3蒜香黄油烤龙虾/h3 p classdesc波士顿龙虾现烤搭配蒜香黄油汁和时令蔬菜每日限量供应。/p p classprice¥168/p /div这段代码里的food-item类名在css.css中有对应样式改内容不改类名样式就全部继承。图片文件名保持img3.jpg不变避免去改 JS 里可能存在的预加载列表。价格从美元改成人民币时注意css.css中.price选择器是否有针对货币符号的字体设置有的老模板会单独为$符号指定一种字体导致中文语境下的¥符号显示异常遇到就直接把该选择器的font-family改为继承。3.2 改造 Book.html 预订表单从假提交到真实流程Book.html里的预订表单基本是纯前端演示表单的action属性要么指向空页面要么直接填了#。静态模板的天然短板就在这里——表单提交必须依赖一个外部服务。选型上有两条路第一对接现成的表单托管服务第二部署一个极小的后端接收 POST 请求。静态页这边只需要改表单的action和method。先找到表单标签把method设为POSTaction指向你选的接收方。Chosen 插件改造过的下拉框会生成一个隐藏的select和一层可见的div结构表单提交时原生select的name属性仍然会作为参数名传出去所以不用改动 Chosen 的结构只需在select上保留name值。form idbookingForm methodPOST actionhttps://formspree.io/f/yourEndpoint !-- 姓名 -- label forname姓名/label input typetext idname namecustomerName required placeholder请输入您的姓名 / !-- 日期 -- label fordate预订日期/label input typedate iddate namebookingDate required / !-- 人数select 保留 nameChosen 只改造外观 -- label forguests用餐人数/label select idguests nameguestCount classchosen-select option value11 位/option option value22 位/option option value44 位/option option value66 位/option option value88 位以上/option /select !-- 特殊要求 -- label formessage备注/label textarea idmessage namespecialRequest rows3/textarea button typesubmit提交预订/button /form表单参数名customerName、bookingDate、guestCount、specialRequest在服务端接收时一一对应。如果对接的是表单托管服务这个参数的 key 就映射到服务后台配置的字段名如果是自建后端接口逻辑也只需要读这几个字段。Chosen 插件初始化代码在页面底部注意它必须放在 jQuery 加载之后jQuery(document).ready(function($) { // 将 select 初始化为可搜索的 Chosen 下拉框 $(.chosen-select).chosen({ // 当选项不足 10 个时不显示搜索框界面更干净 search_contains: true, disable_search_threshold: 10 }); });这段代码把预约人数、套餐选择这类下拉框升级成可搜索形式。search_contains: true表示输入关键词时做模糊匹配disable_search_threshold: 10表示选项少于等于 10 个时自动隐藏搜索框。特别注意 Chosen 会同步修改原生select的样式CSS 里chosen.css不能删否则下拉框会退化成浏览器默认样式且定位异常。3.3 用 CSS 变量统一品牌色这套老模板的全部颜色都是硬编码的十六进制值散落在css.css的各个选择器里。改品牌色时如果语义化地全局搜索替换很容易误伤页面里其他同色元素。现在所有现代浏览器都支持 CSS 自定义属性可以用最小改动把颜色抽出来。先在css.css最顶部重置样式之前或之后不重要定义一组品牌变量:root { --brand-brown: #4a2c17; /* 主色调深棕用于标题、页脚背景 */ --brand-gold: #c8a96a; /* 辅助色香槟金用于按钮、价格、装饰线 */ --bg-cream: #faf6f0; /* 页面底色米白用于内容区背景 */ }然后针对需要变色的高频选择器做一次精准替换。比如原模板中.food-item h3 { color: #4a2c17; }改成color: var(--brand-brown).price { color: #c8a96a; }改成color: var(--brand-gold)。注意这一步不需要把全部几百个颜色值都抽出来只抽品牌识别度最高的 3 到 5 个即可。如果时间紧还有一个更快的方案用 VS Code 或 Sublime 的全局搜索替换把主色值整体换成新色值但前提是旧颜色没有用在图片或背景图的半透明叠加层上。用 CSS 变量是更可控的方案因为它把「哪些位置跟品牌色绑定」的决策显性化了后面再做节假日氛围换色或深浅色模式时只需要覆盖这几个变量。4. 旧版模板的两个隐形坑IE6 兼容与脚本冲突4.1 IE6 目录与 HTC 行为的去留压缩包里单独有一个IE6/目录里面是一组图片iesj_03.jpg、iesj_05.jpg等和IE6.html页面。这是当年针对 IE6 专门制作的降级页面或兼容样式。现在把站点部署到公网后IE6 的流量几乎可以忽略不计这个目录及其引用应当被移除。判断依据是打开任意一个 HTML 文件搜索IE6或.htc凡是在条件注释里引用的代码块都可以整段删掉。以css.css或 HTML 头部常见写法为例找到这样的引用!--[if lt IE 7] link relstylesheet typetext/css hrefcss/ie-css3.htc / ![endif]--直接删除即可。这些条件注释只在 IE 低版本中加载现代浏览器里它们被视为普通注释不删也不会报错但会白白多出几个无效请求。IE6.html文件同理如果确认站点不服务古董浏览器整个文件可以移出发布目录。保留这个目录的唯一理由是一个极端的兼容性场景——如果你所在的地区还有大量的 XP 系统用户但这对一个餐厅站点来说不现实。移除后建议在浏览器开发者工具里过一遍所有页面确认没有出现Failed to load resource: htc之类的请求错误。4.2 prototype、scriptaculous 与 jQuery 的 $ 冲突这套模板最典型的隐患出现在js/目录里同时存在prototype.js和jquery.js时。两个库一先一后被加载后加载的那一方会覆盖前一个的$全局变量。如果页面脚本里先用了$(elementId)这样的 prototype 写法后加载的 jQuery 就会让这个调用变成 jQuery 的选择器两者行为完全不同一个返回 DOM 元素一个返回 jQuery 对象后续的.value或.style直接报 undefined。排查手段分两步。第一步打开浏览器控制台输入typeof $看返回值是function还是object还是报未定义第二步在effects.js或Action.js的代码里检索是否同时混用了$()和jQuery()。凡是引入 prototype 和 jQuery 的页面统一在 jQuery 加载之后、业务脚本加载之前加上jQuery.noConflict()。// 在 jquery.js 之后、slick.js / chosen.jquery.js / effects.js 之前执行 // 把 $ 的名额让给 prototypejQuery 函数改用全名引用 jQuery.noConflict(); // 如果 effects.js 内部想继续用 $ 简写用 IIFE 包一层 (function($) { // 这里的 $ 形参是 jQuery与全局 prototype 的 $ 互不干扰 $(#banner).slick({ dots: true, arrows: true, autoplay: true }); })(jQuery);noConflict()的原理是把 jQuery 库在 window 上占用的$属性释放掉但jQuery这个全名仍然可用。上面这段代码用立即执行函数把jQuery作为实参传进去函数内部的$形参指向的就是 jQuery 对象。这样改造后effects.js原有基于$的代码不需要逐个修改而 prototype 的$也在全局恢复了自己的功能。注意如果slick.js内部依赖 jQuery 的$它在初始化时实际接收的是 jQuery 对象不受全局$的影响所以 noConflict 不会破坏轮播。4.3 图片体积与首屏加载优化images/下的背景图都是整张大尺寸 JPGindexbg.jpg和menu-bg.jpg这类横幅图的单张体积可能接近 1MB。网站在本地打开很快一旦部署到服务器首屏加载时间就会被这几张背景图拖住。先给图片做一个体检用自动化工具统计体积# 统计 images 目录下文件体积按大小降序排列取前 15 ls -lS images/ | head -15 # 批量转为 WebP 格式需要配合 cwebp 工具 for img in images/*.jpg; do cwebp -q 75 $img -o ${img%.jpg}.webp done上面的命令把 JPG 文件以 75% 质量参数转成 WebP 格式一般肉眼几乎分辨不出差异但体积普遍能缩小 50% 到 70%。转换完成后需要同步修改 HTML 里的img标签或 CSS 里的background-image路径文件名从.jpg改为.webp。如果不想逐条改更常见的做法保守一点只把首屏可见的背景图indexbg.jpg、menu-bg.jpg压缩质量从 Photoshop 导出时选「连续」JPG 并降低到 60% 到 70% 质量尺寸保持原样这样不需要改任何代码引用。对轮播里的菜品图也可以使用懒加载方案把newshow.html和其他列表页里的首屏以下图片加上loadinglazy属性这是 HTML5 原生能力不需要额外脚本。5. 把静态模板当原型静动态协作下的效率杠杆5.1 用静态页先对齐交互与视觉这套模板不只是拿来直接上线的它在项目流程里更常用的角色是设计原型。餐厅官网这类项目最大的不确定性通常不在技术实现而在视觉调性和页面信息架构。与其在研发环境里一边写后端一边调样式不如先把模板里的index.html、food.html、Book.html给客户看点击导航、播放轮播、填写表单真实体验 10 个页面之间的逻辑关系。静态模板的加载速度远超后台渲染演示时没有接口超时或数据为空的尴尬。拿到这套模板后前端可以快速做一件事把css.css中的颜色替换成客户品牌色、把upload/里的菜品图换成客户提供的实拍图、把food.html里的菜名和价格替换成真实数据。整个过程一小时内能完成得到一个完全像样的高保真原型。这个原型在后端方案评审时就是最直观的需求文档产品经理不用对着 Axure 线框图和客户解释「这个位置将来会放一张大图」。5.2 静态页转动态页保留什么当原型确认、决定转成正式动态站点时静态模板中有三样东西最有转移价值。一是css.css和public.css里已经调试好的间距、字体、按钮、表单样式整体迁移到 React 或 Vue 项目中写成全局样式或 CSS Modules视觉一致性天然保留。二是页面结构中的信息层级about.html、founder.html、Wedding.html这几个展示型页面的内容顺序是经过设计的转动态时按新闻、活动、宴会等模型建表字段直接对齐原先的 HTML 区块。三是myfont这组字体文件本身就是设计资产原样拷到新项目的静态资源目录即可。反过来静态模板里不建议保留的部分是与 DOM 强耦合的旧特效脚本effects.js、scriptaculous.js不适合直接搬进现代框架因为框架操作虚拟 DOMjQuery 直接改 DOM 的写法会造成状态不同步。正确的做法是找到对应的现代替代库轮播用 Swiper、灯箱用 Photoswipe、下拉选择用 Select2视觉上通过样式覆盖来贴近原版。通过这套替换静态模板既当好了原型的角色又为正式实现提供了可复用的样式资产。一个额外有用的技巧把模板中的book.html、contact.html这类表单页保留为纯静态文件部署到 CDN 上与主站动态站的根路径之间做反向代理。表单通过表单托管服务接收数据主站负责业务逻辑。这样做让预订入口即便在主站维护、数据库迁移、或后端暂时不可用的时段仍然能正常工作。静态页面放在边缘节点上响应速度比动态渲染的页面快一个数量级对访问量集中在饭点前后的餐厅站点来说这个稳定性收益非常直接。本文还有配套的精品资源点击获取