大二Web期末作业课程设计——美食网站设计与实现
随着互联网的发展，线上美食分享和预订逐渐成为了一种生活方式。本次课程设计的主题是“美食网站设计与实现”，旨在通过HTML、CSS和JavaScript来创建一个美观且功能完备的美食网站。在这个项目中，我们将实现基础的页面结构、样式设计以及交互功能。
网站结构
我们的网站将包含几个主要部分：首页、菜品展示、关于我们和联系方式等。为了便于理解，以下是一个简化的HTML代码示例，展示了我们的基本页面结构。
1. HTML代码示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到美食网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#dishes">菜品展示</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>首页</h2>
<p>在这里你可以找到各种美味的菜谱和餐厅推荐。</p>
</section>
<section id="dishes">
<h2>菜品展示</h2>
<div class="dish">
<img src="dish1.jpg" alt="美食1">
<h3>美食名称</h3>
<p>美食描述</p>
</div>
<div class="dish">
<img src="dish2.jpg" alt="美食2">
<h3>美食名称</h3>
<p>美食描述</p>
</div>
<!-- 可以继续添加更多菜品 -->
</section>
<section id="about">
<h2>关于我们</h2>
<p>我们是一群美食爱好者，致力于分享美味的食谱和餐厅推荐。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>如有任何问题，请通过邮箱联系我们：</p>
<p><a href="mailto:example@example.com">example@example.com</a></p>
</section>
<footer>
<p>© 2023 美食网站. 版权所有.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS样式示例
接下来，我们为我们的美食网站添加一些基本的样式，以提升网站的视觉效果。
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #ff6347;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 10px;
}
.dish {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
position: absolute;
width: 100%;
bottom: 0;
}
3. JavaScript功能示例
为了提高网站的交互性，我们还可以加入一些简单的JavaScript，让用户能够更好地与网站互动。下面是一个简单的JavaScript代码示例，用于添加点击事件。
document.addEventListener('DOMContentLoaded', function() {
const dishes = document.querySelectorAll('.dish');
dishes.forEach(dish => {
dish.addEventListener('click', function() {
alert('你点击了' + this.querySelector('h3').innerText);
});
});
});
总结
通过这次美食网站的设计与实现，我们不仅掌握了HTML、CSS和JavaScript的基本应用，还提升了网页设计的能力。在未来的学习中，我们可以继续扩展网站的功能，例如添加用户评论、评分系统、食谱搜索等，使网站更加完善和实用。希望通过我的努力，这个网站能成为一个美食爱好者共享美食的平台。
