临海旅游网站前端设计

摘  要：“临海游记”旅游网站面向广大“穷游”人群。提供了更多更全面的关于临海的旅游攻略和风土人情。让旅游更加轻松，文化。同时通过一些作者文章对临海的介绍，吸引更多的游客前往临海旅游。

    网站开发采用了div+css开发技术，有网站首页、登录页、功能分页、地区分页、地区地图、资讯和社区等页面，界面设计以橙色和棕色为主，橙色是临海的主题色，也能展现出一种活力；而棕色则突显临海的古色古香。网站内容版块则以简洁清楚的淡灰色为主，布局清爽大方，符合交互要求。网站中加入CSS3的代码，实现了许多简单清新的动画效果。配合JQuery的使用，完成了许多新奇的效果。

关键词：div+css 旅游网站 CSS3 JQuery

目 录

1 引言 1

1.1 临海旅游网站的开发背景 1

1.2 临海旅游网站的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 临海旅游网站的开发环境 2

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

2.2.1 HBuilder 2

2.2.2 Adobe Photoshop CC 2015 3

2.2.3 Dreamweaver CS5 3

2.2.4 Microsoft Visual Studio Code 3

2.2.5 Mozilla Firefox（火狐） 4

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

2.3.1 CSS3 4

2.3.2 DIV+CSS 5

2.3.3 JQuery 5

3 项目概述 6

3.1 项目概述 6

3.2 项目风险 6

3.3 项目进度计划 7

4 项目需求分析 8

4.1 前端总体开发流程与设计 8

4.1.1 分层开发 8

4.1.2 代码编写 8

4.2 网站UI设计 8

4.2.1 UI设计 8

4.2.2 颜色配置 9

4.2.3 颜色配置 9

4.3 网站结构布局设计 10

4.3.1 网站首页结构 10

4.3.2 主题鲜明 10

4.4 网站功能实现 10

4.4.1 网站动态效果实现 10

4.4.2 利用CSS3 12

5 主要页面实现 13

5.1 界面设计 13

5.1.1 首页制作 13

5.1.2 梦游古城栏目分页 15

5.1.3 梦游古城栏目分页 17

5.1.4 登录/注册页 20

5.1.5 内容页 21

5.1.6 景点页 23

5.2 说明 24

5.2.1 项目文件命名规范 24

5.2.2 项目文件结构说明 25

6 总结与展望 26

致谢 27

参考文献 28