《“三人行旅游网”网站前端设计与实现毕业设计论文.pdf》由会员分享，可在线阅读，更多相关《“三人行旅游网”网站前端设计与实现毕业设计论文.pdf（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要摘要随着人们的生活水平越来越高，人们的物质生活提高的同时，也 在追求着精神生活的提高，所以，旅游成了人们必不可少的一项，在 信息化的时代里，只有通过互联网技术才能让更多的信息整合在一 起，让人们更加的方便与快捷！本毕业设计的题目是“三人行旅游网”网站前台设计与实现，主 要从以下几个方面进行阐述：对网站的主页和分页进行了规划，对页 面内容以及素材进行了归纳和收集，对网站设计内容进行网站的制作 与实现。关键字：旅游、网站前台设计、CSSThis document is produced by free version of Print2Flash.Visit for more informat
2、ion目录前言.1第一章网站设计背景.11.1旅游网站发展现状.11.2网站建设需求分析.11.3网站整体结构.2第二章网站建设技术.52.1 Dreamwever 网页制作.52.2 Photoshop 图像处理.10第三章前期准备.123.1素材收集整理.123.2 LOGO 设计.123.3 Banner 设计.143.4导航条设计.17第四章网站前台设计与实现.194.1首页设计实现.194.2其他页面设计实现.21总结.27致谢.28参考文献.29This document is produced by free version of Print2Flash.Visit for mo
3、re information-a 刖 B随着互联网的快速发展，我们的学习、生活和思维方式等等，都 发生了巨大的变化。随着电子商务的发展，线下区域实体店铺客流量 及销售效果都大幅下降，使得区域商铺和区域销售受到巨大冲击，而 创建旅游网站可以让那些想更好的了解到景区景点的相关信息的人 们在家里也可以实现相关信息的查询，尤其是旅游景点的特色、风景 照片等等，为喜好旅游的朋友们提供了一种足不出户的浏览方式，这 样可以较好的提高公司的业务量。This document is produced by free version of Print2Flash.Visit for more informatio
4、n第一章网站设计背景1.1旅游网站发展现状1.1旅游网站发展现状旅游业素有“无烟产业”和“永远的朝阳产业”之美誉，随着社 会的发展，旅游行业已经成为全国甚至全世界发展最快速的产业之O旅游业对城市经济的拉动、社会就业的带动以及对文化和环境的促 进作用日益浮现，随着旅游行业的蓬勃发展，各种旅游网站也应运而生。为了赶上当今的形势，我们为了更好的满足那些小众旅行者的需求，所以 我们开发此网站。1.2网站建设需求与分析1.2网站建设需求与分析主要建立一个完整的旅游网站，提供对各旅游景点综合信息的查 询与管理，需要有美观的界面设计。除此之外，需要的功能主要如下：1.用户可以通过该网站的主页即可浏览全国主要
5、的景点信息，同 时可以通过分页查询景点的风景样图，了解景区景点概貌。2.通过留言板模块的制作和浏览者形成一定的互动。3.同时有利于景区管理部门的管理，加强双边的沟通与协作，以 提高和改善管理水平，使游客通过对网站的浏览可以对景点有比较真 实和丰富的了解，为游客提供一个全面的旅游景点查询服务，对景点 本身做一个比较好的宣传和推广。1This document is produced by free version of Print2Flash.Visit for more information1.3网站整体结构1.3网站整体结构本网站的结构主要由首页、旅游、机票、酒店、车票、门票、客 户留言、
6、攻略等几大部分组成。其网站结构如下：三人行旅游网门票 留言 攻略首页旅游机票酒店车票周边游国内机票国内酒店火车票_ I _ 国内游国际机票国际机票汽车票出境游 定制游This document is produced by free version of Print2Flash.Visit for more information1、“首页”栏目：主要是让浏览者能够第一时间的了解这是一个旅 游网站，以及一些旅游景点的展示。2、“旅游”栏目：主要是为顾客提供周边游、国内游、出境游、定 制游等多种类型的旅游方式。3、“机票”栏目：主要是为顾客提供一站式的旅游机票查询以及购 买。4、“酒店”栏目：主
7、要是为顾客提供旅游目的地的酒店查询及预定。5、“车票”栏目：主要是为顾客提供短途旅行的火车票以及汽车票 查询及购买。6、“门票”栏目：主要是为顾客提供旅游目的地热门景点的优惠门 票购买。7、“留言”栏目：主要是为顾客提供一个给我们这个年轻的新网站 改进意见的窗口。8、“攻略”栏目：主要是为顾客提供一些热门景点的游玩攻略，让 顾客可以得到一个更好地游玩体验。由这些组成部分构建了本网站的框架，使得网站具有条理性不会 显得凌乱，本网站的色调主要以蓝色和部分白色背景为主，给人一种 清新、舒适、愉悦的感觉，使顾客在查看旅游产品的同时保持心情的 舒畅，在了解“三人行”这一品牌的同时，让顾客更好地认识它，本
8、 旅游网站包括了旅游景点、出行工具、住宿条件等等，JS特效的展 示使得整个网站更加生动，不会显得特别呆板。This document is produced by free version of Print2Flash.Visit for more information第二章网站建设技术2.1 Dreamweaver 网页制作2.1 Dreamweaver 网页制作1、Dreamwever功能、特点及性质：直观：Dreamweaver可以在属性窗口中直观编辑网页框架，各种表格、表单、图片、动画、视频，都可以直接插入。对象属性的修改直接可 以通过属性面板进行修改。方便快捷的文字排版编辑方便代码
9、与编辑窗口拆分显示方式，可以通过代码区域的修改直接看 到效果的变化，非常方便设计者编辑代码。2、Dreamwever 的应用（1）新建站点 在本地硬盘上新建一个文件夹命名为CC作为本地站点的根文 件夹，在其内部新建images文件夹用于存放网站使用的图片。打开Dreamweaver,点击新建站点命令，在高级选项中的本地 根文件夹选择新建文件夹CC,最后点击确定可以在屏幕右侧的文件 面板中看到创建的站点本地视图。如下：This document is produced by free version of Print2Flash.Visit for more information图2.1创建站
10、点（2）新建页面在屏幕右下角的文件面板中鼠标右键单击站点，在弹出的菜单中 选择新建文件并命名为index,html.（3）页面布局双击index,html进入该页面的编辑状态，在插入工具条中选 择表格，表格的设置如下：5This document is produced by free version of Print2Flash.Visit for more information图2.2表格大小插入表格后点击表格第一行，在屏幕下方的属性栏将其宽设置 为1000、高设置为300,照此方法将第二行设置为高30,第三行设 置为高900,第四行设置为高150,宽均为1 000.属性栏如下图所示:图
11、2.3属性栏一个简单的网页结构就出来了，效果图如下:图2.4网页结构接下来就可以利用Dreamweaver来对网页进行文字和图片的编辑。2.2 PhotoShop图片处理2.2 PhotoShop图片处理6This document is produced by free version of Print2Flash.Visit for more information1、PhotoShop cs6的功能、特点及性质对于此次毕业设计，我们使用的图片处理软件版本是PhotoShop cs6,该软件Photoshop可以进行非常快速的对图片对象进行编辑、与其他图片进行图像合成、对不好的样张进行校色
12、调色及特效渲染。对损坏图片进行修复等等。比如LOGO的设计，网上下载图片照片的 修改，实地拍摄照片的调节。2、PhotoShop在该网站中的应用本网站的LOGO、banner以及网站内的所有图片都是经由 PhotoShop制作和美化。Logo效果图如下：kkIANRtNXING.COM图2.5 LOG0效果图Banner效 果 图 如 下图2.6 Banner效果图7This document is produced by free version of Print2Flash.Visit for more information第三章前期准备3.1素材收集整理3.1素材收集整理1、图片收集本
13、网站的所有图片均通过百度搜索引擎收集，通过搜索旅游素材 和搜索国内国外景点和酒店得到所有图片，图片收集完成之后，通过 自己大学期间所学到的知识，利用PhotoShop对这些图片进行编辑、美化、裁剪以及调整图像大小得到自己所期望得到的图片效果，最后 在进行网站制作的时候将它们放入到网站中去。2、文字收集网站中的文字大多是地点名、景点名、酒店名和旅游路线，这些 也都是利用百度搜索引擎得来，然后利用Dreamweaver对网站中的这 些文字进行大小、字体、颜色调整，以求让文字与网页协调统一。3、素材的整理网站中所有收集来的素材都统一放在一个文件夹里面，新建站点 时候创建的文件夹CC里面包含子文件夹i
14、mages、css,images子文 件夹里面存放的是所有收集来的景点、酒店图片、LOGO以及Banner 等图片。3.2 LOGO 设计3.2 LOGO 设计本网站以蓝色系和紫色系为主，蓝色和紫色给人带来一种积极向 上、充满青春、充满活力和充满希望的感觉，希望人们不管遇到什么 困难挫折，或者被什么所困扰，都能够借助旅行来让自己心情愉悦并8This document is produced by free version of Print2Flash.Visit for more information 且找回自信解决难题。本网站LOGO主要以网站名称“三人行”为主题设计，采用三个“人”字组合
15、而成，让人可以第一时间联想到“三人行旅游网”，字 体样式是叶根友毛笔行书2.0版，颜色是6 55ae4,先将三个“人”字组合成类似于“众”的样式，然后在下方加入“三人行旅游网”的 中文字样，最后再在下方加入网站网址SA NRENXING.COM”，这样就 构成了“三人行旅游网”的L0G0o本网站LOGO的实现步骤如下：(1)打开PhotoShop软件，新建一个高80px,宽80px空白图片。图3.1新建空白图片(2)使用文字输入工具，然后将字体调整为叶根友毛笔行书2.0 版，字体颜色调整为6 55ae4,分别输入三个“人”，字体大小为18,三人行旅游网、SA NRENXING.COM,字体大小
16、为12,再一次排列好位 置。9This document is produced by free version of Print2Flash.Visit for more information图3.2 LOGO素材处理（3）将做好的LOGO图片进行JPG格式保存，保存至images文 件夹方便使用。3.3 banner 3.3 banner 设计Banner广告放在首页最上方最显眼的位置，我们的广告语是“让 我们来一场说走就走的旅行”，让浏览者看到后能够完全放下包袱、了无牵挂的来一场说走就走的、愉快的旅行。本网站的banner由 LOG。、广告语、图片素材组成，沿袭了本网站的简约风格。字体
17、采 用的叶根友毛笔行书2.0版本，字体颜色为6 55ae4。图3.3 banner效果图10This document is produced by free version of Print2Flash.Visit for more information本网站banner的设计，也是采用的Photoshop软件操作完成,具体步骤如下:(1)打开Photoshop软件，新建一个宽为lOOOpx,高为300px的空白图片。图3.4新建空白图片(2)打开已处理好的素材图片，在图片左上角插入LOGO。11This document is produced by free version of Pr
18、int2Flash.Visit for more informationPs文me 麟 mm 沽0 建 裁cd sdo）顺m 殍口曲 sj（4），A i S E3 氏 y 祁明彦.00%-曜；ioo%；&t w 对齐#$：绸酿 r banner-jpg 6 6.7%（RGB/8W,xX图3.5插入LOGO图片(3)输入“来一场说走就走的旅行”、“了无牵挂”文字文本。图3.6 banner处理(4)将处理好的图片保存为JPG格式,保存至images文件夹中。12This document is produced by free version of Print2Flash.Visit for m
19、ore information3.4导航条设计3.4导航条设计网站主导航位于banner的下方，通常网站的主导航主要包括网 站的首页和各个子页面的导入链接。方便用户快捷的到达不同的网 页，同时也方便用户一目了然的了解网站的主要信息。首页 掠游 机票 SJS 车票 门票 客户留言 攻略图3.7首页导航条本网站导航条分别由“首页”、“旅游”、“机票”、“酒店”、“车票”、“门票”、“客户留言”、“攻略”八个部分组成，其背 景颜色以深蓝色为主，符合整个网页的色彩风格。在制作中使用了 Dreamweaver软件，采取无序列表ulx/ul和有序列表lix/li配合a 链接CSS样式实现下拉导航条，代码如
20、下图：inde.x.h：rnl 却 XQ有房凹赢厨商，标SS：无标跛档 CL U 瓯思，|峪西松正5353皿555657585960555657585960故 1X1111X-XX1X1111X-XX i.Irani”,菖页。l：Xalixa hief=zhojbianyot.hcml勒骈 内溶Cl.xa iiieciujliiv/ou.huu-/aX/ll?liXs hr-ef-dinshiyou.hemlhreE=,*,tR Sfft.Sclixa tireE*,SIIS-clixa hre f=cuu:ieij ludiaa.hunl 一拒内葛店 href-guajijiadion.ht
21、mlIS际酉店 SS大车票汽车票 rs nxa are =xenui myaa.r.tmi:?/3 bb s clixa axefaonaLue.hHl丈娴H-49E K/TI 世图3.8导航条代码13This document is produced by free version of Print2Flash.Visit for more information图3.9导航条css样式代码14This document is produced by free version of Print2Flash.Visit for more information第四章网页设计制作4.1首页设计制
22、作4.1首页设计制作网站的首页是顾客点击进入网站之后第一眼看到的网页，是网站 的形象展示，一个好的网站首页能够给浏览者留下一个非常深刻的印 象，可以带来更多的访问量。首页设计的原则一是要抓住用户的眼球,再就是让用户能够快速的找到自己需要的信息。1、本网站页面布局以蓝色为主，结合文字、图片进行设计，首 页由五部分组成，页面首部是banner以及下拉导航条，中间主要是 产品的分类展示，尾部是文字链接、版权信息，结构简单明了。15This document is produced by free version of Print2Flash.Visit for more information 图4
23、.1首页页面布局本网站首页由以下几个部分组成：（1）顶部是banner,由LOGO与图片素材组成，让顾客知道我 们网站的主旨就是给顾客带来一场毫无包袱的旅行，说走就走。（2）导航条的作用是让顾客了解我们网站的基本内容、页面，同时为顾客的查询提供便利。（3）内容一部分是热门城市、当季主题、人气景点，为顾客的 出行提供多种选择。（4）内容二部分是出行地点的详细介绍，包括出行路线和价格。（5）底部就是由文字链接和版权信息所组成。16This document is produced by free version of Print2Flash.Visit for more information图4
24、.2首页效果图4.2其他页面制作4.2其他页面制作1、“旅游”页面：创建了周边游、国内游、出境游、定制游四 个栏目，为顾客提供了多种多样的出游路线。本网页采用静态网页，用图片进行布局，利用鼠标经过效果添加了边框填充，让网页更加的 生动。文字内容主要是通过添加CSS样式来排版，左侧导航条采用无 序列表ul和有序列表li通过a链接加css样式实现。效果图如下：17This document is produced by free version of Print2Flash.Visit for more information图4.3出境游效果图2、“机票”页面：为顾客提供了国际机票和国内机票的查
25、询和 预定。本网页采用了鼠标经过图像进行背景色变色，其效果图和实现 代码如下图：This document is produced by free version of Print2Flash.Visit for more information图4.4机票页面效果图图4.5机票页面实现代码3、“酒店”页面：与国内外酒店进行强强联合，为顾客提供多 种多样的优质酒店选择。本网页采用静态网页，用图片进行布局，利 用鼠标经过效果添加了边框填充，文字内容主要是通过添加CSS样式 来排版，让网页更加的生动。其效果图和实现代码如下：19This document is produced by free v
26、ersion of Print2Flash.Visit for more information图4.6酒店页面效果图图4.7酒店页面实现代码4、“客户留言”页面：该页面能实现交流目的，让客户对公司 的发展和改进提供宝贵的意见，这样公司才能够更好的完善自己。该20This document is produced by free version of Print2Flash.Visit for more information 页面主要通过插入表单和按钮加a链接来实现，其效果图和实现代码如下图：图4.8客户留言页面效果图图4.9客户留言页面实现代码5、“攻略”页面：该页面为新顾客提供老顾客的出
27、行心得和游玩攻略，让新顾客在游玩中能够减少第一次的许多困扰。该页面由文 字加图片混排组成，通过CSS样式产生鼠标经过的变换效果，底部的 翻页通过div属性加A链接实现。其效果图和实现代码如下图:21This document is produced by free version of Print2Flash.Visit for more information二业却十古悄二北凤图国际机场斗花湾）二北十吉情景区 二北华宇北龙湾理兵倡）白化台的 业街三亚来城深城彩邑动物园注城冰雪.桂林族游攻略（正碎的样林山*甲天下5日抽2017/10/22TO/26曰本香JII言松行天鬼闱7版小拿段、琴平扣仔妹
28、奏旅行20-10-22出发|共5天途径：日本信松Td!n*tsu）行程：栗林公园小豆岛高松机场酒J11县厅舍玉藻公园灌概公园高松港沃使之路性刀比罗宫斯图粮行2017-12-06出发|共5天途径：桂琳行程：相公山 龙眷梯田湘象刘三姐东西登酒龙河洒江四湖 磨盘山码头游秀瞧准外桃源）ffi翔金 抗红谣梯田观杲区4艮子岩龙脊大理.图4.9.1攻略页面效果图图4.9.2翻页部分实现代码This document is produced by free version of Print2Flash.Visit for more information总结经过一个月左右的时间进行毕业设计书写，“三人行旅游网
29、”网 站前台设计与实现终于完成了。从最开始的选题到作品设计到设计说 明的完成，每一次制作都非常的认真，这对于本人是一次极大的挑战。因为工作原因从一开始我就落后别人的进度，前期又面临确定网站主 题、风格和格局的难题，但是当我静下心来勾画出网站设计框架图然 后一步一步地开始下手进行制作，网站也就慢慢的完成了。虽然这次的毕业设计不完美，但是我已经尽我所能，在以后的时 间我会更加努力的加深专业知识的学习，让自己做出的网站越来越 好。通过这次的毕业设计作品与实现过程，让本人更加全面的学习了 专业知识，让我体会到知识结合实践才会达到更好的效果。虽然大学 生活已接近尾声，但是本人在学习道路上才刚开始，越来越
30、热爱自己 选择的专业，希望之后可以从事以专业相关的工作并努力发展下去。23This document is produced by free version of Print2Flash.Visit for more information致谢本毕业实践报告是在物流信息学院潘彪老师的悉心指导下完成，这次是本人作为大学生交的最后一次作业，随着毕业设计书写的完 成，大学生活与接近尾声。借此机会感谢大学三年以来帮助与鼓励自 己的所有老师、同学、朋友们。特别要感谢我的指导老师潘彪老师，潘老师从选题到设计作品到 毕业设计书写都一直认真负责的给予我细心的指导并帮我们修改，帮 助我们顺利完成毕业设计，在此我
31、向他表示衷心的谢意。结束大学生活后，无论在生活与工作中我都会努力学习，不断提 高自己，完善自己，成为自己想成为的样子。24This document is produced by free version of Print2Flash.Visit for more information参考文献1 潘果.电子商务实务D.湖南：湖南现代物流职业技术学院，2012年2 吴涛主编，网站全程设计技术(修订本)，北京：清华大学出版社；北京交通大学出版社3 张琳.高职网页设计课程的教学生态模式研究J.教育现代化，2015,4(10):99-1 01.4 郑伟、薛岚.高职院校图形类专业网页设计与制作课程建设
32、改革的探讨J.艺术科技，2014,26(3):283-2835 徐国平.网页设计与制作M.北京：机械工业出版社.2008年6 胡姗.个人网页设计与制作口.电脑学习.2009年，第2期，28-29页7 张登辉，刘义红.网站制作基础及应用M.北京：中国水利出版社，2007 年8 赵祖荫.电子商务网站建设教程(第2版)M.北京：清华大学出版社，2008年9 耿跃鹰.网页制作与网站开发，入门到精通M.北京：清华大学出版社，2008年1 0 杨选辉.网页设计和制作教程M.北京：清华大学出版社，2009年25This document is produced by free version of Print2Flash.Visit for more information26This document is produced by free version of Print2Flash.Visit for more information