美景票务设计报告文档格式.docx
- 文档编号:14932644
- 上传时间:2022-10-26
- 格式:DOCX
- 页数:39
- 大小:1.51MB
美景票务设计报告文档格式.docx
《美景票务设计报告文档格式.docx》由会员分享,可在线阅读,更多相关《美景票务设计报告文档格式.docx(39页珍藏版)》请在冰豆网上搜索。
1、网站规划
网站名称:
北京美景联动科技有限公司
网站主题:
美景票务把从资源方获得的产品,通过电子票下发到客人手机上,让顾客实现网上购买景区电子门票,让资源方多一个销售的平台。
并通过网站宣传,树立企业形象,提高企业知名度
网站语言:
简体中文
网站风格:
以蓝白为主,给人以简洁轻松的感觉,并加以景区风景图,主题鲜明突出,要点明确,以简单明确的语言和画面体现站点的主题,表现网站的个性和情趣,办出网站的特点。
网站建站目的:
美景票务强大的核心技术团队,在票务产品电子化、资金实时清算、代理商渠道管理、电子订单处理、网络促销和数据分析等方面为旅游休闲娱乐领域的各类商家提供及时、准确的电子商务整体解决方案,引领景点电子票务潮流,一站式管理,全程营销。
网站目标人群:
喜欢旅游的大众人群,想了解加入本公司的合作伙伴等。
建站内容及说明
(1)首页设计
页头:
简洁鲜明的公司logo,突出公司表示给人加深印象,彰显企业文化
页面:
页面包括导航条,公司的特色,成长历程,我们的服务和优秀团队
(2)导航设计
导航系统是有效连接网站各处的工具,它有效的分类网站内容并指向它所代表的内容。
包括了首页,公司简介,合作伙伴,产品与服务,新闻中心,联系我们,是通过超文本链接或图片链接,使浏览者能够在网站上自由前进或后退,而不会让浏览者使用浏览器上的前进或后退。
美景联动票务首页导航栏:
导航栏采用鼠标滑过自动下拉二级菜单的模式,一级菜单鼠标未经过前字体为蓝色,经过时为蓝色背景,白色字体。
二级菜单未经过前是蓝色背景,灰色字体,鼠标经过时为杏色背景,蓝色字体。
☉首页
1、公司简介
公司简介从历史足迹、内部结构、核心团队、美景的2014这四个方面具体地介绍公司,让购买我们票务的消费者了解支持我们,让有意愿加入我们的商家更加熟悉我们。
2、合作伙伴
合作伙伴分为景点项目和资源代理。
3、产品与服务
产品与服务主要针对消费者,里面包含了景点介绍和地区选择,这里介绍了各大热门景点,消费者可以通过景区介绍根据兴趣在网站购买电子门票。
4、新闻中心
主要公布最新票务和门票活动。
5、联系我们
联系我们可以给我们提出意见和建议,或者有意愿加入我们,都非常欢迎。
公司简介
合作伙伴
产品与服务
新闻中心
联系我们
首页
内部介绍
历史进程
景点介绍
资源代理
今日新闻
登陆
公司介绍
2、结构设计
Ø
中文版网页布局图
(1)首页
首页采用宽屏,为上中下三部分,头部放置logo和导航栏,让人一进入网站就知道我们的服务;
中间大图一张张滚动,清楚明了;
页尾放4个小块进行对公司的简单介绍。
符合商务简洁的设计风格。
(1)
(2)登陆页
登陆页分为资源方和代理商,在同一个页面跳转。
(2)内容页
(3)内容页
内容页为长平滚动式,主要分为上下两部分,下部分分为左右两部分。
上部分放置导航栏、logo和图片彰显企业文化,下部分放主要内容。
3、CI形象设计
Logo公司提供。
用蓝绿2中颜色,像是一座青山被蓝蓝的水围绕,景色怡人,也正凸显的我们的服务,美景票务,销售优美景区的门票。
Logo下加以黑色的美景票务字体,更加简洁明了。
4、网站色彩
(1)网站主色调
该网站的主色彩是蓝色和白色,配以灰色和少量的橙色,文字为灰度,如下图所示:
图1配色采集
蓝色使人舒爽,像天空一般,灰度的字体更适合人阅读,整体配色风格商务简洁,而橙色的使用,则使整个网站显示朝气蓬勃。
(1)网页链接色
未访问过的链接(link)
已访问过的链(visited)
鼠标悬停(hover)
color:
#0000FF;
text-decoration:
none;
#FFFFFF;
text-decoration:
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
#mid
#denglu
#one
#two
#three
#four
foot
#container
#left
#right
#foot
图2内容页1HTML页面结构图
图3登陆页2HTML页面结构图
四、页面DIV结构代码(包括主页和各内容页,注意三与四是一一对应的关系)
首页:
<
divid="
container"
>
head"
>
top"
/div>
divid="
menu"
bigp"
denglu"
mid"
one"
two"
three"
four"
foot"
<
内容页:
left"
right"
登陆页:
五、代码及注释
a,h1,h2,h3{
text-align:
center;
color:
#666666
}//对标题设置字体颜色和位置
*{
margin:
0;
padding:
border:
list-style:
none
}//通配符的设置,保证页面效果一致
#container{
0auto;
width:
1000px;
}//页面整体大小在网页中居中显示
#menu{
position:
relative;
z-index:
99999;
}//导航栏定位
#nava:
link{
}//导航鼠标未经过时字体颜色
visited{
}//鼠标点击后字体颜色
hover{
font-weight:
background:
}//鼠标悬停时字体颜色和背景色
#foot{
height:
20px;
#fbcd70;
float:
left;
margin-top:
10px;
absolute;
999;
clear:
}//设置页脚的宽高背景色页边距浮动以及位置
#footp{
font-size:
12px;
*{
}//设置页面整体宽度
}//设置mune的位置
#nav{
line-height:
24px;
list-style-type:
none;
padding-top:
40px;
padding-left:
250px;
}//设置链接行高字体大小和外边距
}//设置链接的颜色
}//设置链接点击过后的样式
}//设置鼠标经过时链接样式
#navli{
left;
120px;
}
#navlia:
}//设置鼠标经过时的背景色
350px
}//设置页脚宽高、背景色、页边距
}//设置页脚字体大小
body{
#898989;
font:
12px/180%Arial,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 美景 设计 报告