美食主题HTML5网页设计作业成品-刀削面(10页)HTML+CSS+JS+报告.zip

共65个文件

jpg：39个

html：20个

png：2个

版权申诉

HTML5

课程设计

201 浏览量 2024-12-03 10:05:01 上传评论收藏 18.61MB ZIP 举报

该压缩包文件涉及的是一项关于美食主题的HTML5网页设计作业成品，其主要内容围绕着中国的传统美食——刀削面。作业成品包括了一个完整的网站项目，该网站项目通过HTML、CSS和JavaScript技术实现了10个页面的设计与开发。该作品不仅包含了网页设计的基本技能，还可能涉及到用户体验、交互设计以及前端开发等多方面的知识。具体来说，该文件可能包括以下几个方面的知识点： 1. HTML5页面设计：HTML5是最新版本的超文本标记语言，它带来了新的元素和属性，使得网页设计更加语义化，同时也支持更多的多媒体内容。在该作业中，学生需要利用HTML5的标签来构建网页的基本结构。 2. CSS样式应用：CSS（层叠样式表）是网页设计中用于描述网页呈现样式的语言。通过CSS，可以定义字体、颜色、间距、布局等元素的样式。在这个项目中，CSS被用来设计和美化页面，实现美观的视觉效果。 3. JavaScript交互实现：JavaScript是一种广泛应用于网页开发的脚本语言，它能够提供动态交互效果，增强用户体验。在这份作业中，学生可能使用JavaScript来实现页面上的交互功能，如菜单的展开与折叠、图片的轮播显示等。 4. 美食主题的创意设计：刀削面作为中国传统美食的代表，在这个网页设计作业中，学生需要围绕刀削面这一主题进行创意构思，包括但不限于对刀削面的文化介绍、制作方法的展示、食用感受的分享等。 5. 网站报告撰写：网站报告通常包含了项目的概述、设计过程、技术实现、功能描述及个人反思等内容。这份报告文档能够反映出学生在项目中的学习成果和遇到的问题，以及如何解决这些问题。 6. 前端开发流程的掌握：整个网页设计作业成品不仅包含最终的网站文件，还包括了从项目规划到实现的全过程。学生需要掌握前端开发的基本流程，包括需求分析、页面布局规划、技术选型、编码实现、测试调试以及最终的部署上线。该作品除了能够展示学生的技术能力，还能够体现其对于美食文化的理解和对于网站用户体验的关注。通过这个项目，学生能够将理论知识与实践相结合，为将来从事网页设计和前端开发工作打下坚实的基础。

资源推荐

资源详情

资源评论

收起资源包目录

美食主题HTML5网页设计作业成品——刀削面(10页) html+css+js+报告.zip （65个子文件）

美食主题HTML5网页设计作业成品——刀削面(10页) html+css+js+报告

刀削面（有JS）

soup.html 4KB

main.html 2KB

use.html 3KB

roll.js 1KB

value.html 2KB

css

common.css 4KB

origin.html 3KB

make.html 2KB

trait.html 2KB

index.html 4KB

images

main.jpg 428KB

use2.jpg 375KB

make7.jpg 318KB

focus2.jpg 437KB

make6.jpg 405KB

make1.jpg 375KB

focus1.jpg 648KB

trait.jpg 300KB

use3.jpg 400KB

make4.jpg 663KB

logo.png 10KB

soup.jpg 406KB

use4.jpg 405KB

make9.jpg 185KB

make3.jpg 671KB

origin.jpg 513KB

value.jpg 329KB

use1.jpg 318KB

make2.jpg 400KB

make5.jpg 917KB

make8.jpg 468KB

刀削面（无JS）

soup.html 4KB

main.html 2KB

use.html 3KB

value.html 2KB

css

common.css 3KB

origin.html 3KB

make.html 2KB

trait.html 2KB

index.html 4KB

images

main.jpg 428KB

use2.jpg 375KB

make7.jpg 318KB

make6.jpg 405KB

make1.jpg 375KB

focus.jpg 648KB

trait.jpg 300KB

use3.jpg 400KB

make4.jpg 663KB

logo.png 10KB

soup.jpg 406KB

use4.jpg 405KB

make9.jpg 185KB

make3.jpg 671KB

origin.jpg 513KB

value.jpg 329KB

use1.jpg 318KB

make2.jpg 400KB

make5.jpg 917KB

make8.jpg 468KB

网站报告.docx 1.68MB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>刀削面网</title> <link rel="stylesheet" type="text/css" href="css/common.css"/> </head> <body> <div class="container"> <div class="header"> <ul> <li class="logo"> <a href="index.html"><img src="images/logo.png"/><span>刀削面</span></a> </li> <li class="nav"> <a href="index.html">首页</a> <a href="origin.html">起源</a> <a href="trait.html">特征</a> <a href="use.html">食材</a> <a href="make.html">做法</a> <a href="soup.html">卤汁</a> <a href="main.html">要诀</a> <a href="value.html">营养</a> <a href="register.html">注册</a> <a href="login.html">登录</a> </li> </ul> </div> <div class="wrapper"> <div class="main"> <div class="text"> <h2>卤汁分类</h2> <img src="images/soup.jpg"/> <p>一、肉卤</p> <p>猪肉：沫肉，分两种，瘦的是肥的三倍，瘦肉要最大块，肥的要最小块。</p> <p>锅里倒点色拉油，先把肥肉的油炼出来，炼的稍干些，捞出来。将香叶、花椒、大料、白蔻、肉蔻、香果……这些放的油里炸一下，小火。这些东西有一点就够了，别太多，一两颗就行。火越小越好炼出香味后，把这些调料都捞出来。</p> <p>放一勺左右豆瓣酱，炒到里面的油都成了红色，满锅都是红色的泡。再把瘦肉放进去炒一会，再放鲜姜末、葱末、蒜末。要注意的是葱加蒜的量等于姜。按顺序放（姜、葱、蒜）。每放一种就炒十几秒钟。炒后再放料酒、老抽、生抽，还有少量醋。醋要少，味精十克左右，再炒一会儿。</p> <p>倒高汤，汤是肉的3.5倍。刚加好汤的时候要先尝汤的咸度，主要是给肉块入味儿。开大火，汤开后，改小火。还有最主要的两步，放香料包，按一定比例放在料包里。这个你自己得调放的锅里，人不能走开。煮一会儿，有两分钟左右，尝一下汤，会出得香味，取出。再放另外一个料包，各煮一定时间取出。</p> <p>二、三鲜卤</p> <p>【主料】：水发海参100克，水发鱿鱼100克，熟鸡肉100克，鸡蛋500克。</p> <p>【辅料】：猪油50克、葱结50克、精盐适量、花椒2克、蒜瓣5瓣、味精5克、料酒25克、酱油50克、姜末5克。</p> <p>【做法方法】：1．将海参、鱿鱼改刀成小片状，沸水焯过待用，熟鸡肉改刀成小片，葱切段。2．猪油上火烧热，投入花椒、葱段炸出香味成葱油，去掉葱和花椒待用；将鱿鱼片、海参片、鸡肉片投入锅中略炒，加调味原料调拌均匀取出备用；3．锅上火放入骨头汤2500克烧开，将海参等物料放入调好口味，用水淀粉勾芡，鸡蛋打散，放入汤中即成三鲜汤卤。</p> <p>三、番茄雪菜卤</p> <p>【主料】：番茄2只、雪菜500克。</p> <p>【辅料】：猪油50克、葱结50克、精盐适量。</p> <p>【做法方法】：1．将番茄切小块，雪菜切末待用。2．锅上放2500克水，将番茄和雪菜放入其中，并加猪油，烧汤。3．在锅中放入调味料调好口味，即成番茄雪菜卤。总之，汤卤的做法千变万化，一条原则就是以咸鲜口为主，这比较符合北方人的口味。</p> <p>四、茄香牛肉</p> <p>【主料】：中筋面粉400克，水180克，盐1/2小匙，牛腩300克，番茄1颗，小白菜2颗，酸菜1大匙，红烧汤头，葱花1大匙。</p> <p>【做法方法】：1.将水与盐加入中筋面粉中混合拌匀，揉至光滑的稍硬面团即可。2.煮一锅滚水，将面团削入滚水中煮熟，即成刀削面，装碗备用。3.将牛腩及番茄切斜厚片，一同加入红烧汤头炖煮约50分钟至入味。4.将作法3的汤与料加入刀削面碗中，并加入氽烫过的小白菜、酸菜，撒上葱花即可。</p> </div> </div> </div> <div class="footer">Copyright @ 2022 daoxiaomian.com 刀削面网版权所有</div> </div> </body> </html>

评论收藏

内容反馈

版权申诉