西餐美食网站前端设计

摘  要：随着信息化时代的高速发展，人们的日常已离不开计算机科学的运用，而网络的高速发展加速了这一趋势，使得人们生活水平，消费水平，享受水平，对西餐美食的追求也日益提高，美食文化也受到越来越多的人关注。

本网站是运用前台技术加后台技术的美食网站，本网站主要包括以下几个模块：首页、美食介绍、菜谱、美食时态、登录、注册。网站拥有轮播、热门菜品、精品推荐、视频教程、用户的登录注册功能，以及好看的交互效果，给用户带来更好的体验。

网站开发采用了div+css+js+jq+php+Mysql开发技术，有网站首页、登录页、注册页、菜谱页、美食介绍页、美食时态页、视频教程页，界面设计以黑白为主，极强的表现了网络化生活。网站版块多以西餐美食的形式作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。

关键词：JQery框架 PHP语言 Mysql数据库西餐美食网站 

目 录

1 引言1

1.1 西餐美食网站的开发背景1

1.2 西餐美食网站的意义与设计目的1

2 开发工具及环境介绍2

2.1 西餐美食网站的开发环境2

2.2 西餐美食网站的开发环境3

2.2.1 Sublime Text33

2.2.2 Adobe Photoshop CS63

2.2.3 Google Chrome4

2.2.4 Mozilla Firefox4

2.2.5 WampServer5

2.2.6 MySQL5

2.2.7 SQLyog5

2.2.8 XMind5

2.3 本项目运用的主要开发技术6

2.3.1 HTML语言6

2.3.2 DIV+CSS6

2.3.3 java script6

2.3.4 JQuery7

2.3.5 PHP7

2.3.6 SQL结构化查询语言7

2.3.7 Ajax8

3 项目概述9

3.1 项目概述9

3.2 项目风险9

3.3 项目进度计划10

4 项目需求分析11

4.1 业务工作角色分析11

4.2 概要设计12

4.2.1 网站结构图12

4.2.2 网站概要设计说明13

4.3 现行研究存在的问题及解决办法15

5 数据库设计16

5.1 数据库结构16

5.2 数据库表16

5.3 数据库设计命名规范16

6 网站实现17

6.1 网站前台界面设计与布局17

6.1.1 前台首页界面及功能17

6.1.2 前台美食介绍界面及功能18

6.2 网站前后台界面连接设计与布局24

6.2.1 前后台登录页24

6.2.2 前后台注册页25

6.3 说明27

6.3.1 项目文件命名规范27

6.3.2 项目文件结构说明27

7 测试29

7.1 测试29

7.2 测试例子及其结果29

7.2.1 页面效果测试29

7.2.2 后台登录注册测试30

8 总结与展望33

致谢34

参考文献35