好食味休闲食品网站的设计与实现

摘  要：休闲食品行业在2012年以前经历了连续近十年的高速发展，吸引了大批新进入者，且原有企业均有不同程度的产能扩张，业内企业的品牌影响力和产品创新力不足，市场同质低价竞争加剧，价格战成为业内企业不得不面对的现实，这种竞争状况一直持续至今。好食味网站是为提高了公司品牌的知名度，增加公司利益，让更多的消费者知道这个品牌，喜欢这个品牌网站主要实现的功能有：用户的浏览，用户在线留言，后台管理员可以实现对信息增、删、改、查，查看在线留言等功能。

    网站开发采用了div+css开发技术和jQuery网站特效，有网站首页、在线留言、后台管理等页面，界面设计以暖色为主，充分地表现出了网络化生活。网站版块多以书的形状作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。网站结合科讯CMS的技术，完成网站的用户浏览效果和网站后台管理员的管理网站的总体效果，将相应的代码替换成标签，使网站实现动态效果。

关键词：div+css 休闲食品网站 科讯CMS 

目 录

1 引言 1

1.1 好食味休闲食品网站的开发背景 1

1.2 好食味休闲食品网站的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 好食味休闲食品网站的开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Adobe Photoshop CS4 3

2.2.2 Dreamweaver CS4 3

2.2.3 IE 11 4

2.3 本项目应用的主要开发技术 5

2.3.1 科讯CMS 5

2.3.2 DIV+CSS 5

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

3.3 项目进度计划 8

4 项目需求分析 9

4.1 业务工作角色分析 9

4.2 概要设计 10

4.2.1 网站结构图 10

4.2.2 网站概要设计说明 10

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

5 SEO优化方案 14

5.1 域名空间 14

5.2 网站测速 15

5.3 分析网站结构和核心关键词 15

5.4 网站关键词布局分析 16

5.5 网站优化 16

5.5.1 内容优化 17

5.5.2 外部优化 17

5.5.3 设置keywords和description 17

5.5.4 面包屑导航 18

6 网站实现 19

6.1 网站后台界面设计与布局 19

6.1.1 后台登录界面 19

6.1.2 后台管理界面 19

6.2 网站前端界面设计与布局 20

6.2.1 首页 20

6.2.2 新闻中心界面 22

6.2.3 内容页 23

6.2.4 产品展厅界面 23

6.2.5 其他页面 24

6.2.6 在线留言页面 25

6.3 说明 26

6.3.1 项目文件命名规范 26

7 测试 27

7.1 测试 27

7.2 测试例子及其结果 28

7.2.1 页面效果测试 28

7.2.2 后台添加测试 28

8 总结与展望 29

致谢 30

参考文献 31