基于网页美工设计的美食网店的设计与实现-CSDN博客

本文链接：https://blog.csdn.net/newlw/article/details/134545263

目录
第一章绪论 3
1.1 课题研究的背景 3
1.2 课题研究的意义 4
第二章相关技术介绍 6
2.1 HTML技术 6
2.2 Dreamweaver技术 6
2.3 Photoshop技术 7
2.4 网页美工技术 8
第三章需求分析 9
3.1网站实现的目标 9
3.2美食博客网站的主要功能 9
第四章网站总体设计 10
4.1网站架构设计 10
4.2业务流程设计 11
4.3网页美工设计 12
第五章系统详细设计与实现 13
5.1网页美工模块 13
5.1.1.网页美工设计思路 13
5.2首页模块 15
5.2.1.导航栏模块 15
5.2.2首页界面设计模块 16
5.3菜谱模块 20
5.3.1菜谱界面设计 20
5.3.2后台菜谱功能设计 22
5.4健康模块 23
5.4.1 健康界面设计 23
5.5分享模块 26
5.5.1 分享界面设计 26
5.6视频模块 28
5.6.1 视频界面设计 28
第六章结束语 31
参考文献 32
致谢 33
3.2美食博客网站的主要功能
美食博客网站主要是负责各种美食文章的检查、用户注册身份的检查和改善，和其他内容的改善和检查，这个网站的主要功能如下：
（1）用户可以在不登录的状态下进行商品的浏览，并且可以在特定页面注册加入。
（2）后台管理员根据事实信息对美食信息进行修改、删除、分类等操作。
（3）轮播图功能：管理员可以将新上架产品进行推广。

第四章网站总体设计
4.1网站架构设计
针对上述的需求分析后得出结论，此次网站的主要结构信息包括用户对网页前端的查看，用户浏览博客，用户前端进行注册加入我们，用户前端进行视频的查看，用户前端进行查看文章、视频、轮播图，后台管理人员对于文章内容的管理，后台管理员对网站页面，轮播图的管理，视频管理，加入我们，跳转动画五大主要模块。具体网站功能结构如下图4-1网站功能结构所示。
在这里插入图片描述

图4-1网站功能结构图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>说句食话网站首页</title>
<link href="dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet">
<link href="css/owl.carousel.css" type="text/css" rel="stylesheet">
<link href="css/animate.min.css" type="text/css" rel="stylesheet">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</head>

<body>
	<div class="w3layouts-header"> 
		<nav class="navbar navbar-default">
			<div class="container"> 
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">说句食话</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">说句食话&nbsp;</a>
				</div> 
				<div id="navbar">
					<ul class="nav navbar-nav navbar-right">
						<li class="hover-effect"><a href="index.html">首页</a></li>
						<li class="hover-effect"><a href="recipes.html">菜谱</a></li>
						<li class="hover-effect"><a href="health.html">健康</a></li>
						<li class="hover-effect"><a href="master.html">分享</a></li>
						<li class="hover-effect"><a href="video.html">视频</a></li> 
					</ul>
				</div> 
			</div>
		</nav>
        </div>

<div class="slider">
	<ul class="rslides" id="slider">
        <li>
            <img src="images/1pp.jpg" alt="">
        </li>
        <li>
            <img src="images/jk.jpg" alt="">
        </li> 
        <li>
            <img src="images/fg.jpg" alt="">
        </li>
        <li>
            <img src="images/12.jpg" alt="">
        </li>
        <li>
            <img src="images/5.jpg" alt="">
        </li>
	</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
	<script>
		$(function () {
			$("#slider").responsiveSlides({
				auto: true,
				nav: true,
				speed: 600,
				namespace: "callbacks",
				pager: true,
			});
		});
	</script>


<div class="about">
		<p><h3>学习制作美食以及了解美食的网站，在这个网站你可以发现有许多的特色美食也可以学会制作很多美食以及健康的生活。</h3>
		</p>
		<p><h3>只跟你"说句食话"</h3>
		</p>
 <div class="box">
   <div class="left"><img src="images/11.jpg"></div>
   <div class="center">
    <h3>说句食话&nbsp;</h3>
    <p><i class="fa fa-hand-o-right"></i>优质服务，精益求精。</p>
    <p><i class="fa fa-hand-o-right"></i>绿色健康，我做您满意</p>
    <p><i class="fa fa-hand-o-right"></i>团结协作，尽善尽美</p>
    <p><i class="fa fa-hand-o-right"></i>品质专业，顾客至上。</p>
    <p><i class="fa fa-hand-o-right"></i>服务源于心，真诚赢信任。</p>
    <p><i class="fa fa-hand-o-right"></i>窗口虽小，服务无限。</p>
   </div>
   <div class="zhong">
   <img src="images/oo.jpg">
   </div>
   <div class="right">
   <h3>说句食话&nbsp;</h3>
    <p><i class="fa fa-hand-o-right"></i>但愿人长久，健康永相伴。  </p>
    <p><i class="fa fa-hand-o-right"></i>爱心相连，服务永远。</p>
    <p><i class="fa fa-hand-o-right"></i>和谐的环境，阳光的心情。</p>
    <p><i class="fa fa-hand-o-right"></i>超凡品质，超越价值。</p>
    <p><i class="fa fa-hand-o-right"></i>品质有缺陷，寸步难行。</p>
    <p><i class="fa fa-hand-o-right"></i>服务只有更好，没有最好。</p>
   </div>
 </div>
 </div>
</div>