《美景票务设计报告》由会员分享，可在线阅读，更多相关《美景票务设计报告（26页珍藏版）》请在金锄头文库上搜索。
1、宁波大红鹰学院信息工程学院课 程 设 计 报 告课程名称：WEB 编程基础综合实践 项目名称： 北京美景联动科技有限公司 班级名称： 13 信管 4 班项目成员： 翁晓珍 章素珍专业名称： 信息管理与信息系统完成时间: 2015 年 6 月信息工程学院制一、项目需求和背景北京美景联动科技有限公司是一家立足于旅游行业极具核心竞争力的新型公司，是一家基于移动互联网的电子门票营销企业。美景票务分销系统不仅仅是一个平台，更是一个高度有效的管理工具。通过集采的方式从资源方获得产品，渠道商通过美景票务分销平台，把电子票下发到客人手机上，客人凭借验证码去资源方消费。在验证的同时，平台会与资源方实时验证结算，
2、渠道方也能看到清晰的数据和准确的账单。充分利用现有的 B2B 平台，不断增加的产品数量和渠道商数量，快速的实现交易额的增长，来扩大基础业务。二、网站规划设计说明1、网站规划网 站 名 称 ： 北京美景联动科技有限公司网 站 主 题 ： 美景票务把从资源方获得的产品，通过电子票下发到客人手机上，让顾客实现网上购买景区电子门票，让资源方多一个销售的平台。并通过网站宣传，树立企业形象，提高企业知名度网 站 语 言 ： 简 体 中 文网 站 风 格 ： 以蓝白为主，给人以简洁轻松的感觉，并加以景区风景图，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点
3、。网 站 建 站 目 的 ：美景票务强大的核心技术团队，在票务产品电子化、资金实时清算、代理商渠道管理、电子订单处理、网络促销和数据分析等方面为旅游休闲娱乐领域的各类商家提供及时、准确的电子商务整体解决方案，引领景点电子票务潮流，一站式管理，全程营销。网 站 目 标 人 群 ：喜欢旅游的大众人群，想了解加入本公司的合作伙伴等。建站内容及说明（1）首页设计页头：简洁鲜明的公司 logo，突出公司表示给人加深印象，彰显企业文化 页面：页面包括导航条，公司的特色，成长历程，我们的服务和优秀团队（2）导航设计导航系统是有效连接网站各处的工具，它有效的分类网站内容并指向它所代表的内容。包括了首页，公司简
4、介，合作伙伴，产品与服务，新闻中心，联系我们，是通过超文本链接或图片链接，使浏览者能够在网站上自由前进或后退，而不会让浏览者使用浏览器上的前进或后退。美景联动票务首页导航栏：导航栏采用鼠标滑过自动下拉二级菜单的模式，一级菜单鼠标未经过前字体为蓝色，经过时为蓝色背景，白色字体。二级菜单未经过前是蓝色背景，灰色字体，鼠标经过时为杏色背景，蓝色字体。首页1、公司简介公司简介从历史足迹、内部结构、核心团队、美景的 2014 这四个方面具体地介绍公司，让购买我们票务的消费者了解支持我们，让有意愿加入我们的商家更加熟悉我们。2、合作伙伴合作伙伴分为景点项目和资源代理。3、产品与服务产品与服务主要针对消费者
5、，里面包含了景点介绍和地区选择，这里介绍了各大热门景点，消费者可以通过景区介绍根据兴趣在网站购买电子门票。4、新闻中心主要公布最新票务和门票活动。5、联系我们联系我们可以给我们提出意见和建议，或者有意愿加入我们，都非常欢迎。2、结构设计 中文版网页布局图（1）首页首页采用宽屏，为上中下三部分，头部放置 logo 和导航栏，让人一进入网站就知道我们的服务；中间大图一张张滚动，清楚明了；页尾放4 个小块进行对公司的简单介绍。符合商务简洁的设计风格。公司简介 合作伙伴 产品与服务 新闻中心 联系我们首页内部介绍历史进程 景点介绍资源代理 今日新闻登陆公司介绍(1)（2）登陆页登陆页分为资源方和代理商
6、，在同一个页面跳转。(2)内容页Logo导航栏大图 滚动机遇与特色页脚历程与成长 我们的服务 我们的团队背景图资源方 代理商用户名密码登陆（3）内容页内容页为长平滚动式，主要分为上下两部分，下部分分为左右两部分。上部分放置导航栏、logo 和图片彰显企业文化，下部分放主要内容。Logo导航栏标题页页脚展示页3、CI 形象设计Logo 公司提供。用蓝绿 2 中颜色，像是一座青山被蓝蓝的水围绕，景色怡人，也正凸显的我们的服务，美景票务，销售优美景区的门票。Logo 下加以黑色的美景票务字体，更加简洁明了。4、网站色彩(1)网站主色调该网站的主色彩是蓝色和白色，配以灰色和少量的橙色，文字为灰度，如下
7、图所示：图 1 配色采集蓝色使人舒爽，像天空一般，灰度的字体更适合人阅读，整体配色风格商务简洁，而橙色的使用，则使整个网站显示朝气蓬勃。(1)网页链接色表 1 导航链接色未访问过的链接（link）已访问过的链（visited）鼠标悬停（hover）color:#0000FF; text-decoration:none;color:#0000FF; text-decoration:none;color:#FFFFFF;text-decoration:none;font-weight:bold;5、技术方案序号 网站组成使用技术名称 效果说明11、网站所有文字页面2、静态图片3、表格HTML1、
8、出版在线的文档，其中包含了标题、文本、表格、等内容。 2、 通过超链接检索在线的信息。3、 为在同一页面浏览更多信息而设计表单，用于检索信息、定购票务等。 2 1、 网站动态菜单2、 动态图标 JAVASCRIPT1、 实现在一个 Web 页面中链接多个对象2、 与 Web 客户交互作用。从而可以开发客户端的应用程序等。3 1、 网站内的动态 按钮 CSS1、使用 CSS 的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。三、HTML 页面结构图图 1 首页 HTML 页面结构图#head#top#menu#bigp#mid#denglu#one #
9、two #three #fourfoot图 2 内容页 1HTML 页面结构图#container#head #top#menu#bigp#left #right#foot图 3 登陆页 2HTML 页面结构图四、页面 DIV 结构代码(包括主页和各内容页，注意三与四是一一对应的关系)首页：内容页：#container#denglu#menu登陆页：五、代码及注释CSSa,h1,h2,h3 text-align:center;color:#666666/对标题设置字体颜色和位置* margin:0;padding:0;border:0;list-style:none/通配符的设置,保证页面效果
10、一致#container margin:0 auto;width:1000px;/页面整体大小 在网页中居中显示#menu position: relative;z-index: 99999;/导航栏定位#nav a:link color:#0000FF;text-decoration:none;/导航鼠标未经过时字体颜色#nav a:visited color:#0000FF;text-decoration:none;/鼠标点击后字体颜色#nav a:hover color:#FFFFFF;text-decoration:none;font-weight:bold;background:#0
11、000FF;/鼠标悬停时字体颜色和背景色#foot width:1000px;height:20px;background:#fbcd70;float:left;margin-top:10px;position:absolute;z-index:999;clear:none/设置页脚的宽高 背景色 页边距 浮动以及位置#foot p font-size:12px;text-align:center; * margin:0;padding:0;list-style:none/通配符的设置,保证页面效果一致#container margin:0 auto;width:1000px;/设置页面整体宽
12、度#menu position: relative;z-index: 99999;/设置 mune 的位置#nav line-height: 24px;list-style-type: none;padding-top:40px;font-size:20px;padding-left:250px;/设置链接行高 字体大小和外边距#nav a:link color:#0000FF;text-decoration:none;/设置链接的颜色#nav a:visited color:#0000FF;text-decoration:none;/设置链接点击过后的样式#nav a:hover color
13、:#FFFFFF;text-decoration:none;font-weight:bold;/设置鼠标经过时链接样式#nav li float: left;width:120px;#nav li a:hover background:#0000FF;/设置鼠标经过时的背景色#foot width:1000px;height:20px;background:#fbcd70;clear:none;margin-top:350px/设置页脚宽高、背景色、页边距#foot p font-size:12px;text-align:center;/设置页脚字体大小body color:#898989;f
14、ont:12px/180% Arial, Helvetica, sans-serif, 新宋体;/设置文本字体color:#fff;font-size:14px;font-weight:bold;padding-top:-20px;#erji width:500px;float:right#two z-index:99999;margin-top:-280px;h2 text-align:center#three padding-top:20px;background:#fbcd70;margin-top:10px;设置盒子外边距、内边距、背景色#three img width:140px;h
15、eight:80px;margin-left:10px/设置图片宽高、页边距/设置页脚字体大小并居中body, html margin: 0px;border:none;-webkit-text-size-adjust:none;font-family: Arial, 宋体;font-size:12px;overflow: hidden;height:100%;background:#b9b9b9;* margin:0;padding:0;list-style-type:none;a, img border:none;/* searchbox*/.searchbox width:100%;padding:0px;height:32px;margin:0 auto;.searchbox #inputbox float:left;margin:5px 0px 0 5px;display:inline;width:146px;.searchbox #inputbox input background:none;padding:2px;height:20px;line-height:normal;width:116px;border:none;font-size:12px;font-family:Arial,
