网页编程 课程设计 网站Word格式.docx

网页编程 课程设计 网站Word格式.docx

《网页编程 课程设计 网站Word格式.docx》由会员分享，可在线阅读，更多相关《网页编程 课程设计 网站Word格式.docx（28页珍藏版）》请在冰豆网上搜索。

3.2.3景点门票页面13

3.2.4全部景点页面13

3.2.5旅行文章界面14

3.2.6关于爱旅派页面14

3.2.7部分景点页面15

3.2.8景点门票页面15

3.2.9注册和登陆页面16

3.3源程序清单（关键代码）16

4、测试与实验结果26

4.1出境旅游页面26

4.2马尔代夫订购页面27

5、设计总结28

参考文献30

1、选题

1.1题目背景

随着信息技术的发展，计算机技术在我们的日常生活中已经占据着越来越重要的位置，各行各业的发展都离不开网络的支持，旅游行业也借着网络来宣传自己。

本课题是为旅游者开发的一个综合性网站，是利用HTML技术和CSS技术实现的。

主要完成对旅游网站的展示，主要功能是把世界不同的景点按一定的分类方式用不同的页面展现给大家，为爱旅游的朋友提供一个导航的作用，通过对各个景点的详细介绍，让读者对想去的地方了解后通过网站的订购，可以参加网站平台提供的桥梁，参加旅行社去世界各地旅行。

旅游网站作为信息技术与旅游业高度结合的产物，旅游市场营销的一个重要发展趋向就是人本化、信息化和高效化。

无疑就是这一发展趋势的集中体现。

1999年，世界旅游组织明确将旅游网络作为信息时代旅游市场营销的重要的战略方式和手段。

明确的信息传递是旅游业的天性，这就意味着因特网和网络技术在提升旅游目的地竞争力和市场营销方面的重要作用。

互联网的交互性、实时性、丰富性和便捷性等优势促使传统旅游业迅速融入网络经济的浪潮之中。

现在全球电子商务交易总额中，旅游电子商务已占到1/5份额，成为全球电子商务的第一行业。

网络作为新的旅游信息平台，为旅游业的发展提供了新的契机。

旅游业竞争日益激烈。

另一方面也使得旅游网络营销成为各个国家、地区和旅游企业在市场竞争中求全获胜的重要法宝。

许多旅游企业通过加入全球分销系统、旅游产品预订系统，现代科技尤其是现代交通与通讯技术、计算机与网络技术的发展一方面使越来越多的人从事旅游活动成为可能。

或组建专门旅游网站进行全球性的网络营销，以借此提升竞争力。

旅游方式的个性化与散客化越来越多的旅游者倾向于选择独具特色的旅游目的地进行自助旅游。

2006年，旅游方式散客化、个性化已经成为当前旅游业的重要发展趋势。

携程网的一项网上调查结果表明，肯定不会跟团游”和基本不会选择跟团游人数占到被调查者总数的47.2％，比去年同期的37.3％提高了近10个百分点。

有数据显示，发达国家50％以上的旅游产品是散客旅游产品，美国的数字更是高达90％以上。

网络已经超过电视、报纸等传统媒体成为旅游信息传播的第一媒介；

国旅游网络预订的市场规模也以每年30％以上的速度增长，互联网成为机票、饭店和旅游线路等产品极具潜力的分销渠道。

2005年中国在线旅游市场规模为12.5亿元，占当年中国旅游市场的0.24％。

预计到2010年，中国在线旅游市场规模将超过130亿元，占整个旅游市场的1％以上。

而早在2004年美国网上旅游服务市场就已达到520亿美元，占整个美国旅游市场份额的23％。

关键词：

网页设计，Dreamweaver，旅游网站

1.2系统实现的具体分工

1.2.1选题

该旅游网站可以系统的展现各个地区的旅游信息，让人们方便快捷的了解这个地区和这个地区的地方特色。

相比较于一般的旅游网站，该网站的包含的景点较为丰富，更能够满足不同旅游者的需求。

1.2.2团队分工

表1.1项目分工一览表

角色

姓名

承担的具体任务

组长

杨海振

主页、二级页面

组员

程浩

材料收集、部分页面

刘永超

1.3开发环境和技术

开发环境：

这次网页课程设计是在Windows8.1的操作系统上以及Dreamweaver、Flash 

和Photoshop等软件的基础上通过用HTNL语言和CSS布局完成的。

开发技术：

该旅游网站以Dreamweaver为设计平台，使用HTML技术和CSS布局实现的。

主要利用Dreamweaver工具来设计，完成了网站各个页面的实现和设计。

HTML简介：

超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperTextMark-upLanguage）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。

它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

CSS简介：

级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

Dreamweaver简介：

AdobeDreamweaver，简称“DW”，中文名称"

梦想编织者"

，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

AdobeDreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。

它有Mac和Windows系统的版本。

随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。

Dreamweaver自MX版本开始，使用了Opera的排版引擎"

Presto"

作为网页预览。

2、需求分析

2.1网站所需功能

本网站能够为用户提供世界各地的旅游信息，用户能够通过网站这个平台订购具体的景点旅游。

经过分析本网站主要功能要能够从全部景点、国内旅游、出境旅游、特色旅游、景点门票、旅行天数每个方面系统详细介绍和整合世界各地的旅游信息，其中本网站主要展现国外的一些特色景点，并提供了门票预订功能，在看到了想要旅游的景点后可以快速的进行订票选择。

并且网站有单独的页面为读者提供旅游指南和旅游方面的美文赏析。

2.2功能模块图

网站总体结构图：

2.3各模块介绍

2.3.1主页模块

图2.3.1

一打开主页面首先是爱旅派网站的logo，然后是标题区，为网站浏览者展现了本网站主要提供的功能和服务，接着是导航区在这里提供了两种旅游方式有国内旅游和国外旅游并提供了一些特色旅游选项供游客选择。

此外主页还展现了本网站的部分旅游景点的风景图片。

2.3.2关于我们模块

图2.3.2

在本页面详细的介绍了本网站的相关信息，包括网站站长、合作伙伴等。

2.3.3出境推荐旅游模块

图2.3.3

本页面为先要旅行的游客们整理并推荐了几处国外特色旅游景点，如果有旅客想要到国外旅游，又没有好去处的时候可以点进这个页面，相信可以找到想要去的地方。

在本页面展现了部分景区旅行的价位供旅客参考，选择。

2.3.4旅行美文模块

图2.3.4

本网站除了为旅客展现独特和亮丽的旅游名胜外，还提供了旅行美文的阅读，在本页面你可以阅读到一些旅行美文，让你在身体力行的同时加上文字的熏陶，让你的旅行更加的美好。

3、系统实现

3.1涉及知识点

1、html语言的应用

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（外语：

Head）、和“主体”部分（外语：

Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容

2、利用DIV+CSS进行布局

DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。

CSS（Cascading 

style 

sheets层叠样式表）利用CSS样式表对布局、字体、颜色、以及以及其他图文效果实现更加精确的控制。

CSS的定义主要由三部分构成:

①.选择符（selector）:

一般是要定义样式的HTML标记（如BODY，P）。

②.属性（properties）：

如font-size,font-style,color。

③.属性值（value）:

为属性的值，如color值有white，red。

3、锚点标记的使用 

实现网页迅速返回指定位置，为网页阅读提供方便，减少读者频繁的翻动鼠标。

4、运用Photoshop工具 

图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时最好借助Photoshop工具来编辑图片。

文本的插入在层内或框架内完成较好，但不能设置为艺术字体，因此需要运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。

5、使用Flash工具 

只要是动态效果都可以用Flash工具，音乐、闪动图片等。

6、使用链接 

为方便读者的查阅，在各页面底部都设置了页面链接。

7、插入跳转菜单

为了使读者能快捷的回到自己感兴趣的页面，于是在各个页面都插入了跳转菜单。

8、插入滚动文字 

9、设置交替图像，鼠标放置停止图片切换 

10、设置水平循环滚动的图片 

11、框架的使用 

12、背景图像的固定 

13、插入音乐文件 

3.2系统运行（主要运行界面抓图）

3.2.1网站主页

图3.2.1界面

主页（index.html）：

这个页面的内容主要有链接到各个功能模块的链接组，还有较为详细的以Spry折叠式效果为布局的链接组。

有几个较为热门的景点的图文介绍和旅游文化的图文介绍来激发用户的对旅游的向往和增强他们继续浏览本网站的动力。

3.2.2二级页面全部景点

出境旅游模块（overseas.html）：

这个页面先向读者推荐了一些国外热门的旅游景点，然后列举出了本网站所提供的所有的国外旅游的景点。

图3.2.2界面

特色旅游模块：

这个页面通过瀑布流的布局效果向大家展示了古镇、休闲度假、度蜜月等等特色的景点图文模块。

原先的设想是用户通过滑动鼠标滚轴可以浏览不断加载的许许多多的景点，在这里我们只是展示部分效果为例。

3.2.3景点门票页面

图3.2.3界面

景点门票模块：

这个页面通过旅游花费的多少为分类向大家展现了不同花费的景点，使用户找到适合自己预期旅游费用的景点。

3.2.4全部景点页面

图3.2.4界面

全部景点模块（all-style.html）：

这个页面提供了用户可以通过不同条件的筛选浏览自己喜欢的一类景点。

由于目前我们的水平有限，所以我们只是制作成了一个静态的布局效果，没有实际的筛选能力，提供的链接都是一些空链接。

3.2.5旅行文章界面

图3.2.5界面

旅游文章模块：

这个页面先向大家展示了关于旅游的一些旅游文章、资讯、书籍、音乐等。

随后又列举出了旅游美文和旅游攻略两大类文章列表。

3.2.6关于爱旅派页面

图3.2.6界面

关于我们模块：

这个页面通过选项卡式的布局向读者介绍了关于本网站的主旨、本网站的所属机构（河南城建学院）并对本机构做了简要介绍、本网站的制作目的、和本网站的版权声明等等。

3.2.7部分景点页面

3.2.8景点门票页面

图3.2.8界面

3.2.9注册和登陆页面

图3.2.9界面

用户登录、免费注册模块：

用户可以通过这两个模块加入爱旅派登录到本网站，来订购喜欢的景点旅行。

3.3源程序清单（关键代码）

马尔代夫订购页面html代码：

<

!

doctypehtml>

html>

--InstanceBegintemplate="

/Templates/Untitled-1.dwt"

codeOutsideHTMLIsLocked="

false"

-->

head>

metacharset="

utf-8"

>

--InstanceBeginEditablename="

doctitle"

title>

爱旅派-马尔代夫<

/title>

--InstanceEndEditable-->

head"

linkhref="

style/maldives-style.css"

rel="

stylesheet"

type="

text/css"

/head>

body>

divclass="

header"

<

title"

logo"

ahref="

index.html"

imgsrc="

images/mylogo1.png"

width="

200"

height="

100"

alt="

爱旅派"

longdesc="

/a>

/div>

header-link"

user-login"

p>

userlogin.html"

登陆本站<

|<

userregister.html"

免费注册<

/p>

aboutwo"

about.html"

关于我们<

mailto:

2257766755@"

联系我们<

nav"

hgroup"

ul>

li>

首页<

/li>

all-style.html"

全部景点<

tickets.html"

景点门票<

article.html"

旅行文章<

旅游天数<

关于爱旅派<

/ul>

EditRegion3"

main"

mymain"

ljyd"

tablewidth="

1200"

400"

border="

0"

cellpadding="

cellspacing="

tbody>

tr>

tdwidth="

600"

rowspan="

9"

images/medf.png"

"

/>

/td>

tdid="

frist"

#"

name="

lkyd"

洛阳到马尔代夫自由行天堂岛卡尼岛梦幻岛<

/tr>

mynumber1"

门市价：

13800元<

td>

爱旅派价：

strongid="

mynumber2"

8900<

/strong>

元起<

出发城市：

洛阳<

发团日期：

天天发团，请至少提前<

9<

天报名<

预定类型：

label>

inputname="

RadioGroup1"

radio"

id="

RadioGroup1_0"

value="

单选"

跟团游

/label>

inputtype="

name="

RadioGroup1_1"

自由行<

br>

出发日期：

labelfor="

date"

Date:

预定人数：

number"

min="

1"

成人<

儿童<

button"

立刻预订"

/tbody>

/table>

jdjs"

header-abc"

myheader-abc"

景点介绍<

article"

dao"

天堂岛<

天堂岛（ParadiseIsland）是马尔代夫非常著名的度假海岛，在马尔代夫岛屿分级中属于第六级。

天堂岛（ParadiseIsland）坐落在北马累北环礁，距离马累国际机场及首都马累大约9.6公里。

岛的总长度为931米，宽为250米，走一圈不会超过一个小时。

电影《日落之后》（AftertheSunset）就是在天堂岛拍摄的。

images/tiantangdao.jpg"

399"

天堂岛四面环海，在美丽的印度洋的怀抱里，您将能够轻而易举地享受到灿烂的日光浴，欣赏到神奇罕见、千姿百态的海底生物及珊瑚群。

在这里您将忘却一切烦恼，抛开一切忧愁，尽情享受大自然赐予我们的这一世外桃源。

卡尼岛<

蜜月天堂的后花园,<

clubmed<

images/kanidao.jpg"

1085"

657"

这边是严寒冬日，却憧憬着火辣辣的一夏。

这不，海啸之后重建的ClubMed卡尼岛度假村热闹开张了，狂风暴雨也浇不灭她如火的热情，这个原本萧瑟寒冷的冬季，有了卡尼岛之旅，寒冬也变成了火辣的夏日度假，更加成了蜜月旅行的首选。

从前看过一则广告，在碧蓝的海水中散落着一个个绿色的小岛，绿色又被一圈雪白的沙滩包围着，海滩外面又是一圈若有若无的浅蓝，浅蓝再外面，才是宝石一样的深蓝……，世间<

还有美的如此不真实的地方吗？

后来才知道，这块净土，被称作“地球上最后的香格里拉”，就是位于印度洋上的马尔代夫。

多个小珊瑚岛组成了这个奇妙的没有城市感念的岛国。

踏上卡尼岛的那一刻起，似乎真的走进了天堂的后花园，一切都是美的那么自然，美得无法用语言形容。

梦幻岛<

images/menghuandao.jpg"

1000"

750"

梦幻岛意味水晶白色的沙子。

这个度假胜地是一个独自拥有的小海岛，以他美丽的热带风情、独特而地道的Maldivan建筑风格与大自然混为一体。

梦幻岛职员会以他们的热情和友好帮助您实现您的愿望。

在接触的度假胜地中梦幻岛拥有最好的房间，配备了各种便利设施，拥有的房间和设施是根据来自世界各地的游客的各种需求而设计。

梦幻岛海滩以Tari村庄而闻名，Tari村庄是一个世界著名冲浪的度假胜地与岛屿，拥有主办世界冲浪竞赛的特权。

游客常去的有天堂岛，满月岛，卡尼岛，法鲁岛，班多士岛，拉古娜岛，泰姬岛等。

卡尼岛是俱乐部会员制，岛上有专门的中文G.O，那里基本上所有消费都包括在团费里，游客基本不用再有额外支出。

卡尼岛上还有大量的水上屋，因此欲领略水上屋风情的游客比较容易订到房间。

库仑巴也叫椰子岛，这个岛服务很好，房子很漂亮，设施比较现代化，服务比较细致周到，伙食也不错。

虽然费用略贵一点，但细致周到的服务会让游客觉得物有所值。

其唯一的缺憾是没有水上屋。

拉古纳岛景色最美，有世界上最棒的沙滩之称。

不过拉古纳的房间设施、服务、伙食都不如椰子岛，拉古纳的水上屋只有17间，因此想去旅行的游客需要提前预定。