期末前端大作业：8页餐饮网站，HTML CSS JS静态模板直接交
这套东西, 它是专门为了给期末的前端Web大作业用的, 它是一个餐饮网站的静态模板一共有8个页面, 它这个是基于纯HTML、CSS、JavaScript来实现的, 所以, 不需要后端、也不需要数据库, 解压了就可以直接用, 页面视觉简洁大方, 涵盖了包括首页、菜品菜单、品牌故事、推荐套餐、客户评价、订座表单、交通联系、关于我们等等这些内容, 满足了课程设计中那个“完整网站”的交付要求。
8个页面结构
| 序号 | 页面 | 文件 | 核心内容 |
|---|---|---|---|
| 1 | 首页 | index.html | 轮播图、招牌菜展示、品牌标语、快捷入口 |
| 2 | 菜品菜单 | menu.html | 分类筛选（中/西/甜品/饮品）、菜品卡片、价格 |
| 3 | 品牌故事 | about.html | 餐厅历史、主厨介绍、理念图文 |
| 4 | 推荐套餐 | special.html | 3-4组套餐卡片、适用场景说明 |
| 5 | 客户评价 | review.html | 评分展示、文字评价列表 |
| 6 | 在线订座 | booking.html | 表单（姓名/电话/人数/日期/时间），JS前端校验 |
| 7 | 交通联系 | contact.html | 地图占位、地址电话、营业时间 |
| 8 | 关于我们/招贤纳士 | join.html | 团队文化、招聘信息 |
所有的页面都在共同使用同一套导航栏以及页脚, 点击各个链接进行跳转的功能是非常完整的。另外, 针对访问不存在页面的情况, 404页面的功能已经预先内置在系统中了。
技术实现说明
结构层使用了语义化的HTML5标签, 也就是header、nav、main、article和footer。每一页面只设置了一个H1标题, 保证层级关系非常清晰。
在样式这一层, 使用的是一个独立的style.css文件。它通过让布局具备响应式的特性, 能够适配宽度分别是1920像素、1280像素以及375像素这三种不同的宽度要求。在这个过程中, 没有任何框架的依赖存在。
在交互层的方面, 是通过原生的JavaScript代码来完成轮播图的展示、菜单的Tab切换效果、表单的数据校验、平滑滚动到指定的锚点位置以及页面返回到顶部的功能实现的, 整个过程里面没有使用jQuery库, 也没有引入任何其他的第三方外部依赖库。
图片需要统一在名为 images 的文件目录中进行命名, 并且已经被压缩到了两千字节两百KB的小以内, 这样可以保证打开页面的时候不会出现首屏白屏的状况。
使用步骤
1. 把那个压缩包解压开, 然后就能看到一个名为restaurant-site/的文件夹被提取出来了。
2. 你需要用任意一款编辑器来打开这个项目, 这里建议大家去使用VS Code, 然后你要找到index.html这个文件并进行双击操作, 这样就可以在浏览器里面看到全部八个页面的预览效果了。
3. 把images/这个目录里面的那些图片给替换掉, 换成你自己准备的素材材料, 这一点很重要, 一定要保持原来的尺寸比例不变, 千万别搞错了。
4. 去修改那些在每一个单独的HTML文件里面存在的, 包括店铺的名称呀, 菜品的名称哦还有价格方面的信息, 再或者是地址等等的具体文字内容。
5. 你需要去调整那个标签所对应的样式代码文件, 里面的style.css这一段内容找到, 然后针对:root变量区域里的主题颜色做修改。原本默认的是暖橙色, 具体数值是#E86A33, 你可以把它改为你想要的任意其他色值即可。
6. 关于订座表单这一内容的提交流程, 它是被放置在 booking.html 这个文件的底部部分的 代码段里面的情况，在现在这个默认的状态下, 当操作完成的时候, 是会弹出一个提示框来显示提醒信息的, 那么在需要把作业提交之前, 是可以选择把这个当前的弹出行为给注释掉的, 或者也可以选择把它修改为跳转到一个感谢页面去的这种方式来实现的。
交作业前的检查清单
一共有8个页面, 这几个页面都是可以正常进行访问的, 在导航链接方面没有发现死链的情况。
在手机的宽度为375px这种条件下进行查看的时候, 画面是不存在横向滚动这个问题的, 而且相应的按钮也是可以成功点击的。
控制台（F12）无JS报错。
所有的图片的地址都检查过了, 确认是正确的状况，不存在有404这种错误。
HTML这种文件格式的编码类型设置成为了UTF-8, 里面的中文内容是没有出现乱码问题的。
分别打开Chrome、Edge、Firefox这三种浏览器的页面。然后对每一个页面进行检查看是否有样式错乱的现象进行确认。这样做是在这三个浏览器中各自打开一次的步骤所要求的内容。
常见问题
打开文件后发现样式丢失了, 需要确认style.css文件和HTML文件是不是在同一个层级目录下, 并且路径有没有被改错, 同时还要清除浏览器的缓存, 具体操作是使用组合键Ctrl加上Shift再加上R。
轮播图不动:需要检查JavaScript文件是否被正确引入, 同时还要看看控制台里有没有报错的信息；此外，还得确认图片的文件名与代码中的设定是一致的。
表单发送操作发生之后, 浏览器端没有做出任何回应, 这时候你需要检查 booking.html 文件最下面的那一段脚本代码, 看看是不是被加了注释符号给屏蔽掉了, 还有弹窗提示 alert 是不是被浏览器的安全策略给挡在外面了拦截掉了。
如果要想添加页面:请先复制任意一个已经存在的页面文件, 然后去新建一个新的HTML文件, 这个新文件的名称要和原来那个页面的名称一样, 接着需要在整个网页的导航栏地方加一个指向这个新文件的链接即可, 但是要记得保持总共不超过8页, 这样就算完成了。
这个模板是静态文件的集合, 它不涉及服务器部署的问题, 它也不涉及任何框架相关的东西, 这一点是完全符合关于“HTML CSS JavaScript简洁餐饮网站”这门课程作业的要求的, 你可以直接就把这个当做一个成品提交给老师作为期末的大作业作品, 或者你也是可以基于现在这个已有的基础上再进行二次修改的工作。
常见问题
《期末前端大作业：8页餐饮网站，HTML CSS JS静态模板直接交》主要讲什么？
这套东西, 它是专门为了给期末的前端Web大作业用的, 它是一个餐饮网站的静态模板一共有8个页面, 它这个是基于纯HTML、CSS、JavaScript来实现的, 所以, 不需要后端、也不需要数据库…
文章提到了哪些重点？
另外, 针对访问不存在页面的情况, 404页面的功能已经预先内置在系统中了；结构层使用了语义化的HTML5标签, 也就是header、nav、main、article和footer
文章给出了哪些建议？
2. 你需要用任意一款编辑器来打开这个项目, 这里建议大家去使用VS Code, 然后你要找到index.html这个文件并进行双击操作, 这样就可以在浏览器里面看到全部八个页面的预览效果了。