美景票務(wù)設(shè)計報告

美景票務(wù)設(shè)計報告寧波大紅鷹學(xué)院信息工程學(xué)院

課

程

設(shè)

計

報

告

課程名稱：

《WEB編程根底綜合實踐》

工程名稱：

北京美景聯(lián)動科技有限公司

班級名稱：

13信管4班

工程成員：

翁曉珍

章素珍

專業(yè)名稱：

信息治理與信息系統(tǒng)

完成時間:

2023年6月

信息工程學(xué)院制

一、工程需求和背景

北京美景聯(lián)動科技有限公司是一家立足于旅*業(yè)極具核心競爭力的新型公司，是一家基于移動互聯(lián)網(wǎng)的電子門票營銷企業(yè)。美景票務(wù)分銷系統(tǒng)不僅僅是一個平臺，更是一個高度有效的治理工具。通過集采的方式從資源方獲得產(chǎn)品，渠道商通過美景票務(wù)分銷平臺，把電子票下發(fā)到客人手機上，客人憑借驗證碼去資源方消費。在驗證的同時，平臺會與資源方實時驗證結(jié)算，渠道方也能看到清楚的數(shù)據(jù)和精確的賬單。充分利用現(xiàn)有的B2B平臺，不斷增加的產(chǎn)品數(shù)量和渠道商數(shù)量，快速的實現(xiàn)交易額的增長，來擴大根底業(yè)務(wù)。

二、網(wǎng)站規(guī)劃設(shè)計說明

1、網(wǎng)站規(guī)劃

網(wǎng)站名稱：北京美景聯(lián)動科技有限公司

網(wǎng)站主題：美景票務(wù)把從資源方獲得的產(chǎn)品，通過電子票下發(fā)到客人手機上，讓顧客實現(xiàn)網(wǎng)上購置景區(qū)電子門票，讓資源方多一個銷售的平臺。并通過網(wǎng)站宣傳，樹立企業(yè)形象，提高企業(yè)知名度

網(wǎng)站語言：簡體中文

網(wǎng)站風(fēng)格：以藍白為主，給人以簡潔輕松的感覺，并加以景區(qū)風(fēng)景圖，主題鮮亮突出，要點明確，以簡潔明確的語言和畫面表達站點的主題，表現(xiàn)網(wǎng)站的共性和情趣，辦出網(wǎng)站的特點。

網(wǎng)站建站目的：

美景票務(wù)強大的核心技術(shù)團隊，在票務(wù)產(chǎn)品電子化、資金實時清算、代理商渠道治理、電子訂單處理、網(wǎng)絡(luò)促銷和數(shù)據(jù)分析等方面為旅游休閑消遣領(lǐng)域的各類商家供應(yīng)準時、精確的電子商務(wù)整體解決方案，引領(lǐng)景點電子票務(wù)潮流，一站式治理，全程營銷。

網(wǎng)站目標人群：

喜愛旅游的群眾人群，想了解參加本公司的合作伙伴等。

建站內(nèi)容及說明

（1）首頁設(shè)計

頁頭：簡潔鮮亮的公司logo，突出公司表示給人加深印象，彰顯企業(yè)文化

頁面：頁面包括導(dǎo)航條，公司的特色，成長歷程，我們的效勞和優(yōu)秀團隊

（2）導(dǎo)航設(shè)計

導(dǎo)航系統(tǒng)是有效連接網(wǎng)站各處的工具，它有效的分類網(wǎng)站內(nèi)容并指向它所代表的內(nèi)容。包括了首頁，公司簡介，合作伙伴，產(chǎn)品與效勞，新聞中心，聯(lián)系我們，是通過超文本鏈接或圖片鏈接，使掃瞄者能夠在網(wǎng)站上自由前進或后退，而不會讓掃瞄者使用掃瞄器上的前進或后退。

美景聯(lián)動票務(wù)首頁導(dǎo)航欄：導(dǎo)航欄采納鼠標滑過自動下拉二級菜單的模式，一級菜單鼠標未經(jīng)過前字體為藍色，經(jīng)過時為藍色背景，白色字體。二級菜單未經(jīng)過前是藍色背景，灰色字體，鼠標經(jīng)過時為杏色背景，藍色字體。

☉首頁

1、公司簡介

公司簡介從歷史腳印、內(nèi)部構(gòu)造、核心團隊、美景的2023這四個方面詳細地介紹公司，讓購置我們票務(wù)的消費者了解支持我們，讓有意愿參加我們的商家更加熟識我們。

2、合作伙伴

合作伙伴分為景點工程和資源代理。

3、產(chǎn)品與效勞

產(chǎn)品與效勞主要針對消費者，里面包含了景點介紹和地區(qū)選擇，這里介紹了各大熱門景點，消費者可以通過景區(qū)介紹依據(jù)興趣在網(wǎng)站購置電子門票。

4、新聞中心

主要公布最新票務(wù)和門票活動。

5、聯(lián)系我們

聯(lián)系我們可以給我們提出意見和建議，或者有意愿參加我們，都特別歡送。

2、構(gòu)造設(shè)計

首頁

登陸

公司簡介

產(chǎn)品與效勞

聯(lián)系我們

新聞中心

合作伙伴

公司介紹

內(nèi)部介紹

今日新聞

景點介紹

資源代理

歷史進程

?

中文版網(wǎng)頁布局圖

（1）首頁

首頁采納寬屏，為上中下三局部，頭部放置logo和導(dǎo)航欄，讓人一進入網(wǎng)站就知道我們的效勞；中間大圖一張張滾動，清晰明白；頁尾放4個小塊進展對公司的簡潔介紹。符合商務(wù)簡潔的設(shè)計風(fēng)格。

頁腳

歷程與成長

我們的效勞

機遇與特色

我們的團隊

Logo

大圖

滾動

(1)

登陸

導(dǎo)航欄

（2）登陸頁

登陸頁分為資源方和代理商，在同一個頁面跳轉(zhuǎn)。

背景圖

代理商

資源方

(2)內(nèi)容頁

用戶名

密碼

（3）內(nèi)容頁

內(nèi)容頁為長平滾動式，主要分為上下兩局部，下局部分為左右兩局部。上局部放置導(dǎo)航欄、logo和圖片彰顯企業(yè)文化，下局部放主要內(nèi)容。

展現(xiàn)頁

標題頁

頁腳

Logo

導(dǎo)航欄

3、CI形象設(shè)計

Logo公司供應(yīng)。用藍綠2中顏色，像是一座青山被藍藍的水圍繞，風(fēng)光怡人，也正凸顯的我們的效勞，美景票務(wù)，銷售美麗景區(qū)的門票。Logo下加以黑色的美景票務(wù)字體，更加簡潔明白。

4、網(wǎng)站顏色

(1)網(wǎng)站主色調(diào)

該網(wǎng)站的主顏色是藍色和白色，配以灰色和少量的橙色，文字為灰度，如下列圖所示：

圖1

配色采集

藍色使人舒爽，像天空一般，灰度的字體更適合人閱讀，整體配色風(fēng)格商務(wù)簡潔，而橙色的使用，則使整個網(wǎng)站顯示朝氣蓬勃。

(1)網(wǎng)頁鏈接色

未訪問過的鏈接（link）

已訪問過的鏈（visited）

鼠標懸停（hover）

color:#0000FF;

text-decoration:none;

color:#0000FF;

text-decoration:none;

color:#FFFFFF;text-decoration:none;

font-weight:bold;

表

1

導(dǎo)航鏈接色

5、技術(shù)方案

序號

網(wǎng)站組成

使用技術(shù)名稱

效果說明

1

1、網(wǎng)站全部文字頁面

2、靜態(tài)圖片

3、表格

HTML

1、

出版在線的文檔，其中包含了標題、文本、表格、等內(nèi)容。

2、

通過超鏈接檢索在線的信息。

3、

為在同一頁面掃瞄更多信息而設(shè)計表單，用于檢索信息、定購票務(wù)等。

1、

網(wǎng)站動態(tài)菜單

2、

動態(tài)圖標

JAVASCRIPT

1、

實現(xiàn)在一個Web頁面中鏈接多個對象

2、

與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。

1、

網(wǎng)站內(nèi)的動態(tài)按鈕

CSS

1、使用CSS的技術(shù)，網(wǎng)頁便會給人一種賞心悅目、工工整整的感覺，同時字體的顏色變化也使主頁變得更加生動活潑。

三、HTML頁面構(gòu)造圖

圖1

首頁HTML頁面構(gòu)造圖

#head

#top

#menu

#bigp

#denglu

#mid

#four

#three

#two

#one

foot

#container

圖2

內(nèi)容頁1HTML頁面構(gòu)造圖

#head

#top

#menu

#bigp

#left

#right

#foot

圖3

登陸頁2HTML頁面構(gòu)造圖

#container

#menu

#denglu

四、頁面DIV構(gòu)造代碼(包括主頁和各內(nèi)容頁，留意三與四是一一對應(yīng)的關(guān)系)

首頁：

內(nèi)容頁：

登陸頁：

五、代碼及解釋

CSS

a,h1,h2,h3

{

text-align:center;

color:#666666

}//對標題設(shè)置字體顏色和位置

{

margin:0;

padding:0;

border:0;

list-style:none

}//通配符的設(shè)置,保證頁面效果全都

#container

{

margin:0

auto;

width:1000px;

}//頁面整體大小

在網(wǎng)頁中居中顯示

#menu

{

position:

relative;

z-inde*:

99999;

}//導(dǎo)航欄定位

#nav

a:link

{

color:#0000FF;

text-decoration:none;

}//導(dǎo)航鼠標未經(jīng)過時字體顏色

#nav

a:visited

{

color:#0000FF;

text-decoration:none;

}//鼠標點擊后字體顏色

#nav

a:hover

{

color:#FFFFFF;

text-decoration:none;

font-weight:bold;

background:#0000FF;

}//鼠標懸停時字體顏色和背風(fēng)光

#foot

{

width:1000px;

height:20px;

background:#fbcd70;

float:left;

margin-top:10px;

position:absolute;

z-inde*:999;

clear:none

}//設(shè)置頁腳的寬高

背風(fēng)光

頁邊距

浮動以及位置

#foot

p

{

font-size:12px;

text-align:center;

{

margin:0;

padding:0;

list-style:none

}//通配符的設(shè)置,保證頁面效果全都

#container

{

margin:0

auto;

width:1000px;

}//設(shè)置頁面整體寬度

#menu

{

position:

relative;

z-inde*:

99999;

}//設(shè)置mune的位置

#nav

{

line-height:

24px;

list-style-type:

none;

padding-top:40px;

font-size:20px;

padding-left:250px;

}//設(shè)置鏈接行高

字體大小和外邊距

#nav

a:link

{

color:#0000FF;

text-decoration:none;

}//設(shè)置鏈接的顏色

#nav

a:visited

{

color:#0000FF;

text-decoration:none;

}//設(shè)置鏈接點擊過后的樣式

#nav

a:hover

{

color:#FFFFFF;

text-decoration:none;

font-weight:bold;

}//設(shè)置鼠標經(jīng)過時鏈接樣式

#nav

li

{

float:

left;

width:120px;

}

#nav

li

a:hover

{

background:#0000FF;

}//設(shè)置鼠標經(jīng)過時的背風(fēng)光

#foot

{

width:1000px;

height:20px;

background:#fbcd70;

clear:none;

margin-top:350px

}//設(shè)置頁腳寬高、背風(fēng)光、頁邊距

#foot

p

{

font-size:12px;

text-align:center;

}//設(shè)置頁腳字體大小

body

{

color:#898989;

font:12px/180%

Arial,Helvetica,sans-serif,“新宋體“;

}//設(shè)置文本字體

color:#fff;

font-size:14px;

font-weight:bold;

padding-top:-20px;

#erji

{

width:500px;

float:right

}

#two

{

z-inde*:99999;

margin-top:-280px;

}

h2

{

text-align:center

}

#three

{

padding-top:20px;

background:#fbcd70;

margin-top:10px;

}設(shè)置盒子外邊距、內(nèi)邊距、背風(fēng)光

#three

img

{

width:140px;

height:80px;

margin-left:10px

}//設(shè)置圖片寬高、頁邊距

}//設(shè)置頁腳字體大小并居中

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;

}

/*

searchbo**/

.searchbo*

{

width:100%;

padding:0px;

height:32px;

margin:0

auto;

}

.searchbo*

#inputbo*

{

float:left;

margin:5px

0px

0

5px;

display:inline;

width:146px;

}

.searchbo*

#inputbo*

input

{

background:none;

padding:2px;

height:20px;

line-height:normal;

width:116px;

border:none;

font-size:12px;

font-family:Arial,“宋體“;

color:#999;

outline:none;

}

.searchbo*

#inputbo*

input.focus_text

{

color:#333;

}

.searchbo*

#inputbo*

input.blur_text

{

color:#999;

}

.searchbo*

.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-inde*: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-inde*:

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-inde*:

1002;

color:

#fff;

}

.list

{

width:

261px;

height:

100%;

float:

left;

margin-left:

10px;

margin-right:

5px;

}

.line

{

width:

2px;

height:

100%;

background:

url(

/images/bo*float-line.png

)

center

no-repeat;

float:

left;

}

.listtable

{

width:

100%;

margin-top:

30px;

table-layout:

fi*ed;

}

.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/bo*line.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-inde*:

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

{

}

.bo*_icon

{

width:

55px;

height:

60px;

background:

url(

/images/bo*-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-inde*: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