美景票务设计报告 本文关键词：票务，美景，报告，设计
美景票务设计报告 本文简介：宁波大红鹰学院信息工程学院课程设计报告课程名称：《WEB编程基础综合实践》项目名称：北京美景联动科技有限公司班级名称：13信管4班项目成员：翁晓珍章素珍专业名称：信息管理与信息系统完成时间:2015年6月信息工程学院制一、项目需求和背景北京美景联动科技有限公司是一家立足于旅游行业极具核心竞争力的新型
美景票务设计报告 本文内容：
宁波大红鹰学院信息工程学院
课
程
设
计
报
告
课程名称：
《WEB编程基础综合实践》
项目名称：
北京美景联动科技有限公司
班级名称：
13信管4班
项目成员：
翁晓珍
章素珍
专业名称：
信息管理与信息系统
完成时间:
2015年6月
信息工程学院制
一、项目需求和背景
北京美景联动科技有限公司是一家立足于旅游行业极具核心竞争力的新型公司，是一家基于移动互联网的电子门票营销企业。美景票务分销系统不仅仅是一个平台，更是一个高度有效的管理工具。通过集采的方式从资源方获得产品，渠道商通过美景票务分销平台，把电子票下发到客人手机上，客人凭借验证码去资源方消费。在验证的同时，平台会与资源方实时验证结算，渠道方也能看到清晰的数据和准确的账单。充分利用现有的B2B平台，不断增加的产品数量和渠道商数量，快速的实现交易额的增长，来扩大基础业务。
二、网站规划设计说明
1、网站规划
网站名称：北京美景联动科技有限公司
网站主题：美景票务把从资源方获得的产品，通过电子票下发到客人手机上，让顾客实现网上购买景区电子门票，让资源方多一个销售的平台。并通过网站宣传，树立企业形象，提高企业知名度
网站语言：简体中文
网站风格：以蓝白为主，给人以简洁轻松的感觉，并加以景区风景图，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。
网站建站目的：
美景票务强大的核心技术团队，在票务产品电子化、资金实时清算、代理商渠道管理、电子订单处理、网络促销和数据分析等方面为旅游休闲娱乐领域的各类商家提供及时、准确的电子商务整体解决方案，引领景点电子票务潮流，一站式管理，全程营销。
网站目标人群：
喜欢旅游的大众人群，想了解加入本公司的合作伙伴等。
建站内容及说明
（1）首页设计
页头：简洁鲜明的公司logo，突出公司表示给人加深印象，彰显企业文化
页面：页面包括导航条，公司的特色，成长历程，我们的服务和优秀团队
（2）导航设计
导航系统是有效连接网站各处的工具，它有效的分类网站内容并指向它所代表的内容。包括了首页，公司简介，合作伙伴，产品与服务，新闻中心，联系我们，是通过超文本链接或图片链接，使浏览者能够在网站上自由前进或后退，而不会让浏览者使用浏览器上的前进或后退。
美景联动票务首页导航栏：导航栏采用鼠标滑过自动下拉二级菜单的模式，一级菜单鼠标未经过前字体为蓝色，经过时为蓝色背景，白色字体。二级菜单未经过前是蓝色背景，灰色字体，鼠标经过时为杏色背景，蓝色字体。
☉首页
1、公司简介
公司简介从历史足迹、内部结构、核心团队、美景的2014这四个方面具体地介绍公司，让购买我们票务的消费者了解支持我们，让有意愿加入我们的商家更加熟悉我们。
2、合作伙伴
合作伙伴分为景点项目和资源代理。
3、产品与服务
产品与服务主要针对消费者，里面包含了景点介绍和地区选择，这里介绍了各大热门景点，消费者可以通过景区介绍根据兴趣在网站购买电子门票。
4、新闻中心
主要公布最新票务和门票活动。
5、联系我们
联系我们可以给我们提出意见和建议，或者有意愿加入我们，都非常欢迎。
2、结构设计
首页
登陆
公司简介
产品与服务
联系我们
新闻中心
合作伙伴
公司介绍
内部介绍
今日新闻
景点介绍
资源代理
历史进程
?
中文版网页布局图
（1）首页
首页采用宽屏，为上中下三部分，头部放置logo和导航栏，让人一进入网站就知道我们的服务；中间大图一张张滚动，清楚明了；页尾放4个小块进行对公司的简单介绍。符合商务简洁的设计风格。
页脚
历程与成长
我们的服务
机遇与特色
我们的团队
Logo
大图
滚动
(1)
登陆
导航栏
（2）登陆页
登陆页分为资源方和代理商，在同一个页面跳转。
背景图
代理商
资源方
(2)内容页
用户名
密码
（3）内容页
内容页为长平滚动式，主要分为上下两部分，下部分分为左右两部分。上部分放置导航栏、logo和图片彰显企业文化，下部分放主要内容。
展示页
标题页
页脚
Logo
导航栏
3、CI形象设计
Logo公司提供。用蓝绿2中颜色，像是一座青山被蓝蓝的水围绕，景色怡人，也正凸显的我们的服务，美景票务，销售优美景区的门票。Logo下加以黑色的美景票务字体，更加简洁明了。
4、网站色彩
(1)网站主色调
该网站的主色彩是蓝色和白色，配以灰色和少量的橙色，文字为灰度，如下图所示：
图1
配色采集
蓝色使人舒爽，像天空一般，灰度的字体更适合人阅读，整体配色风格商务简洁，而橙色的使用，则使整个网站显示朝气蓬勃。
(1)网页链接色
未访问过的链接（link）
已访问过的链（visited）
鼠标悬停（hover）
color:#0000FF;
text-decoration:none;
color:#0000FF;
text-decoration:none;
color:#FFFFFF;text-decoration:none;
font-weight:bold;
表
1
导航链接色
5、技术方案
序号
网站组成
使用技术名称
效果说明
1
1、网站所有文字页面
2、静态图片
3、表格
HTML
1、
出版在线的文档，其中包含了标题、文本、表格、等内容。
2、
通过超链接检索在线的信息。
3、
为在同一页面浏览更多信息而设计表单，用于检索信息、定购票务等。
2
1、
网站动态菜单
2、
动态图标
JAVASCRIPT
1、
实现在一个Web页面中链接多个对象
2、
与Web客户交互作用。从而可以开发客户端的应用程序等。
3
1、
网站内的动态按钮
CSS
1、使用CSS的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。
三、HTML页面结构图
图1
首页HTML页面结构图
#head
#top
#menu
#bigp
#denglu
#mid
#four
#three
#two
#one
foot
#container
图2
内容页1HTML页面结构图
#head
#top
#menu
#bigp
#left
#right
#foot
图3
登陆页2HTML页面结构图
#container
#menu
#denglu
四、页面DIV结构代码(包括主页和各内容页，注意三与四是一一对应的关系)
首页：
内容页：
登陆页：
五、代码及注释
CSS
a,h1,h2,h3
{
text-align:center;
color:#666666
}//对标题设置字体颜色和位置
{
margin:0;
padding:0;
border:0;
list-style:none
}//通配符的设置,保证页面效果一致
#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:#0000FF;
}//鼠标悬停时字体颜色和背景色
#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;
}//设置页面整体宽度
#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:#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;
font: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;
height: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,“宋体“;
color:#999;
outline:none;
}
.searchbox
#inputbox
input.focus_text
{
color:#333;
}
.searchbox
#inputbox
input.blur_text
{
color:#999;
}
.searchbox
.sreachbtn
{
width:64px;
height:28px;
line-height:28px;
overflow:hidden;
cursor:pointer;
padding:0;
border:none;
background:none;
font-size:14px;
color:#990000;
font-weight:800;
}
/*
options*/
#options
{
float:left;
width:114px;
height:32px;
color:#333;
}
#options
dl
dt
div
{
background:
url(
/images/selete_bg.png
)
center
no-repeat;
}
#options
dl
{
position:relative;
z-index:4;
width:114px;
height:100%;
}
#options
dt
{
overflow:hidden;
width:114px;
height:28px;
padding:0px;
background:none;
}
#options
dd
{
width:110px;
height:100px;
display:none;
color:#666;
margin-left:3px;
margin-top:0px;
background:url(
/images/selete-hover.png
)
bottom
no-repeat;
}
#options.hover
dl
dt
div
{
background:
url(
/images/selete-hover.png
)
top
no-repeat;
}
#options
dd
span
{
display:block;
zoom:1;
padding-left:9px;
margin-left:
2px;
margin-right:
2px;
line-height:
22px;
cursor:
pointer;
}
#options
span.hover
{
background:#f5f5f5;
color:#333;
}
.menu
{
width:
85px;
height:
100%;
float:
left;
cursor:
pointer;
}
.menu_hover
{
background-color:
#4bb212;
}
.menu_txt1
{
line-height:
14px;
font-size:
12px;
font-weight:
bold;
margin-top:
10px;
margin-left:
17px;
color:
#fff;
}
.menu_txt2
{
line-height:
12px;
font-size:
11px;
margin-left:
17px;
color:
#fff;
}
.menulist
{
width:
85px;
padding-top:
5px;
padding-bottom:
10px;
background:
url(
/images/menu-two-bg.png
)
repeat;
position:
absolute;
top:
80px;
left:
10px;
display:
none;
z-index:
100;
}
.menuitem
{
line-height:
30px;
color:
#fff;
background:
url(
/images/line2.png
)
center
bottom
no-repeat;
text-align:
center;
cursor:
pointer;
padding-left:
0px;
}
.menuitem_hover
{
background-color:
#4bb212;
}
.tab
{
width:
124px;
height:
60px;
float:
left;
color:
#fff;
}
.tab_hover
{
background:
url(
/images/navfoot-hover.png
)
no-repeat;
color:
#000;
text-shadow:
1px
1px
1px
#fff;
}
.tab_txt1
{
line-height:
14px;
font-size:
12px;
font-weight:
bold;
margin-top:
15px;
margin-left:
22px;
}
.tab_txt2
{
line-height:
14px;
font-size:
11px;
margin-left:
22px;
}
.tablist
{
width:
868px;
height:
161px;
position:
absolute;
bottom:
90px;
margin:
0
auto;
display:
none;
z-index:
1002;
color:
#fff;
}
.list
{
width:
261px;
height:
100%;
float:
left;
margin-left:
10px;
margin-right:
5px;
}
.line
{
width:
2px;
height:
100%;
background:
url(
/images/boxfloat-line.png
)
center
no-repeat;
float:
left;
}
.listtable
{
width:
100%;
margin-top:
30px;
table-layout:
fixed;
}
.listtable
td
{
line-height:
23px;
background:
url(
/images/icon_liststyle_2.png
)
left
center
no-repeat;
padding-left:
14px;
word-break:
keep-all;
white-space:
nowrap;
overflow:
hidden;
text-overflow:ellipsis;
color:
#DFDFDF;
}
.listtable
a
{
color:
#DFDFDF
!important;
word-break:
keep-all;
white-space:
nowrap;
overflow:
hidden;
text-overflow:ellipsis;
}
a.a1:HOVER,a.a1:LINK,a.a1:VISITED
{
color:
#fff;
text-decoration:
none;
}
a.a1:HOVER
{
text-decoration:
underline;
}
a.a2:HOVER,a.a2:LINK,a.a2:VISITED
{
color:
#999999;
text-decoration:
none;
font-weight:
bold;
text-align:
center;
}
a.a3:HOVER,a.a3:LINK,a.a3:VISITED
{
color:
#fff;
text-decoration:
none;
}
a.a3:HOVER
{
text-decoration:
underline;
}
a.a4:HOVER,a.a4:LINK,a.a4:VISITED
{
color:
#000;
text-decoration:
none;
}
a.a4:HOVER
{
text-decoration:
underline;
}
ul,li
{
list-style:none;
margin:0;
padding:0;
}
.data
li
{
padding-left:
20px;
height:
130px;
}
.data
li
div
{
width:
90px;
height:
65px;
}
.table_contact
{
float:
left;
margin-left:
20px;
margin-right:
0px;
}
.table_contact
th
{
line-height:
40px;
text-align:
left;
}
.table_contact
td
{
line-height:
30px;
text-align:
left;
min-width:
60px;
width:60px;
}
.table_contact
a:HOVER,.table_contact
a:LINK,.table_contact
a:VISITED
{
color:
#000;
text-decoration:
none;
}
.table_contact
a:HOVER
{
color:#FF0000;
}
.table_menu
{
float:
left;
margin-left:
20px;
margin-right:
0px;
}
.table_menu
th
{
line-height:
40px;
text-align:
left;
}
.table_menu
td
{
line-height:
25px;
text-align:
left;
min-width:
60px;
background:
url(
/images/point.png
)
no-repeat
left
10px;
padding-left:
12px;
}
.table_menu
a:HOVER,.table_menu
a:LINK,.table_menu
a:VISITED
{
color:
#000;
text-decoration:
none;
}
.table_menu
a:HOVER
{
color:#FF0000;
}
.table_menu
td.tdclear
{
background:
none;
padding:
0px;
height:
auto;
}
.theme
{
width:
159px;
height:
88px;
float:
left;
position:
relative;
cursor:
pointer;
}
.theme_tag
{
position:
absolute;
top:
10px;
left:10px;
width:
5px;
height:
35px;
background:
url(
/images/boxline.png
)
no-repeat;
display:
none;
}
.theme_txt1
{
position:
absolute;
top:
10px;
left:
15px;
color:
#FFFFFF;
font-weight:
bold;
font-family:
微软雅黑
;
font-size:13px;
text-shadow:
0px
1px
0px
#808080;
}
.theme_txt2
{
position:
absolute;
top:
30px;
left:
15px;
color:
#000000;
font-family:
微软雅黑
;
font-size:12px;
text-shadow:
0px
1px
0px
#C0C0C0;
}
.theme_select
{
background:url(
/images/bg-big.png
)
repeat
!important;
}
/**.theme_select
div.theme_tag
{
display:
block;
}*/
.theme_select
div.theme_txt1,.theme_select
div.theme_txt2
{
left:
20px;
}
.theme_select
div.theme_txt2
{
color:
#CCCCCC
!important;
text-shadow:
0px
0px
0px
#000
!important;
}
.show
{
width:
159px;
height:
88px;
overflow:
hidden;
position:
absolute;
display:
none;
}
.show_tag
{
position:
absolute;
width:
5px;
height:
33px;
background:
#FFFFFF;
}
.show_txt1
{
position:
absolute;
color:
#FFFFFF;
font-family:
微软雅黑
;
font-size:
30px;
line-height:30px;
font-weight:
bold;
width:
310px;
}
.show_txt2
{
position:
absolute;
color:
#F7FBF2;
font-family:
微软雅黑
;
font-size:
12px;
line-height:24px;
font-weight:
bold;
width:
320px;
height:
100px;
}
.show_close
{
position:
absolute;
width:
25px;
height:
20px;
background:
url(
/images/icon_close.png
)
center
no-repeat;
cursor:
pointer;
z-index:
2;
}
.show_more
{
position:
absolute;
width:
75px;
line-height:
23px;
text-align:
center;
color:
#fff;
cursor:
pointer;
}
.btn
{
width:
26px;
height:
20px;
float:
left;
cursor:
pointer;
}
.btn_select
{
}
.box_icon
{
width:
55px;
height:
60px;
background:
url(
/images/box-icon.png
)
repeat;
float:
right;
margin-left:
2px;
}
.newitem
{
width:
110px;
line-height:
54px;
margin:
0px
auto;
border-bottom:
1px
#9798A8
solid;
font-weight:
bold;
padding-left:
2px;
}
.msginput
{
width:210px;
height:24px;
background:none;
border:none;
margin-left:15px;
margin-top:0px;
padding-top:2px;
line-height:normal;
font-size:12px;
font-family:Arial,“宋体“;
color:#999;
float:left;
outline:none;
}
.msgtitle
{
float:left;
width:60px;
text-align:right;
line-height:27px;
color:#666666;
font-family:“宋体“;
}
.msg_focus
{
color:#333;
}
.msg_blur
{
color:#999;
}
.msgarea
{
background:none;
border:none;
width:274px;
margin-left:15px;
margin-bottom:3px;
padding-top:5px;
height:71px;
overflow:auto;
line-height:normal;
font-size:12px;
font-family:Arial,“宋体“;
color:#999;
outline:none;
resize:none;
}
.ha1:HOVER,a.ha1:LINK,a.ha1:VISITED
{
color:
#000;
text-decoration:
none;
}
.ha2:HOVER,a.ha2:LINK,a.ha2:VISITED
{
color:
#fff;
text-decoration:
none;
}
#menu
{
position:
relative;
z-index:9999
}
#nav
{
line-height:
24px;
list-style-type:
none;
padding-top:40px;
font-size:20px;
padding-left:300px;
}
#nav
a
{
display:
block;
width:
120px;
text-align:center;
color:#0000FF}
#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;
}
#nav
li
{
float:
left;
width:120px;
}
#nav
li
a:hover
{
background:#0000FF;
}
#nav
li
ul
{
line-height:
27px;
list-style-type:
none;
text-align:left;
left:
-999em;
width:
180px;
position:
absolute;
}
#nav
li
ul
li
{
float:
left;
width:
180px;
background:#9DD7EC;
}
#nav
li
ul
a
{
display:
block;
width:
156px;
text-align:left;
padding-left:24px;
}
#nav
li
ul
a:link
{
color:#666;
text-decoration:none;
}
#nav
li
ul
a:visited
{
color:#666;
text-decoration:none;
}
#nav
li
ul
a:hover
{
color:#0349DC;
text-decoration:none;
font-weight:normal;
background:#FFFFB3;
}
#nav
li:hover
ul
{
left:
auto;
}
#nav
li.sfhover
ul
{
left:
auto;
}
#foot
{
width:1366px;
height:20px;
background:#fbcd70;
float:left;
margin-top:620px;
position:absolute;
z-index:99999999;
}
#foot
p
{
font-size:12px;
text-align:center;
}
JS
0?
““:
““)
+
“sfhover“;
}
sfEls[i].onMouseDown=function()
{
this.className+=(this.className.length>0?
““:
““)
+
“sfhover“;
}
sfEls[i].onMouseUp=function()
{
this.className+=(this.className.length>0?
““:
““)
+
“sfhover“;
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new
RegExp(“(
?|^)sfhover//b“),““);}}}
window.onload=menuFix;
//-->//点击每个小图标切换显示大图和详细内容
六、网站测试结果
1、IE10.0下测试结果
主页效果图
登陆页效果图
内容页效果图
2、
FF下测试结果
主页效果图
登陆页效果图
内容页效果图
六、项目计划及分工
1、项目计划表
电子商务网站设计
项目计划表
项目组长:
班级:
日期:
进程
第1次课
(10.11.)
第2次课
(10.13.)
第3次课
(10.19.)
第4次课
(10.19.)
第5次课
(10.19.)
负责人
项目计划
章素珍翁晓珍
总体方案
章素珍翁晓珍
效果图
章素珍
HTML
翁晓珍
CSS
章素珍翁晓珍
JS
章素珍翁晓珍
整体修改
章素珍翁晓珍
设计报告
章素珍翁晓珍
系统测试
章素珍翁晓珍
答辩
章素珍翁晓珍
2、分工完成情况
章素珍：积极完成各项内容
翁晓珍：积极完成各项内容
七、总结
翁晓珍：
通过这次网页设置，我深切体会到学好html和css的重要性。认识到在平时的课堂中和课下作业中需要打好基础，掌握、理解好各种标签的必要性。
网页制作并没有想象中那么简单，不是敲键盘就能行的，要通过很多遍的调试和修改。但同时，我也觉得，网页制作在熟悉了各种代码格式之后，还要保持自己的创造性和灵感，面对企业的网站设计，这不同于学校里交一份作业这么简单，除了页面搭配，还要以访问者的角度去审度自己设计的网站，是否会让访问者过目不忘，只有做到这一点才能够说明这一份网站设计是成功的，而我也有很多要去学习和修改的地方。
这次网页设计中，锻炼了我的网页排版技能，培养了我的耐心和细致，同时也提高了我的审美能力,知道了一些基本配色方案。希望在以后的学习中学到更多的有关网页设计的知识。
章素珍：
在学习网页制作的过程中，我深深体会到一点“有付出，就终有回报”，你的付出与你的
回报终究是成正比的。经过了多少漫漫长路，经过了多少忘我的投入，经过了多少波折，我们的网页完成了。
拿图片来说，网页必须适当地加一些图片，增加可看性，让人一目了然，让人去思考，去了解它。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小，图片的大小在很大程度上影响了网页的传输速度。还有在做网页时用的图片经常会用到PS切片，这时不能忘了换成web所需的格式，png格式在有些浏览器中不兼容也就不能显示，要选用jpg.jpeg或者jif.
做好网页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。