前端设计毕业设计Word文件下载.docx
《前端设计毕业设计Word文件下载.docx》由会员分享，可在线阅读，更多相关《前端设计毕业设计Word文件下载.docx（27页珍藏版）》请在冰豆网上搜索。
该网站中还存在一些不足之处，如网站的留言系统、用户注册、用户登录没建立等等。
这些问题和功能有待于进一步学习和添加。
关键词：
网站设计XHTML、CSS、javaScript和JQuery
第一章绪论
1.1引言
新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。
，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活、旅游等各个方面发挥着重要的作用。
为了适应知识经济社会的需要，促进学习与交流。
网上交流和协作的功能比较普遍；
技术管理和资源管理受到重视。
随着互联网的普及和发展，必将有越来越多的企业及个人在英特网上拥有自己的网站。
网站建设成为企业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；
成为个人展示自我，与世界交流的重要平台。
越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。
Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。
旅游网站也是近十年来在我国逐步兴起和发展的，到现在已经初步形成了类型齐全、涵盖旅游业各个方面的网上旅游产业体系，旅游产品的在线宣传和销售正影响着越来越多的旅游者、旅游服务提供商和旅游管理者。
随着我国旅游业的迅猛发展，推进旅游信息化，广泛实现旅游电子政务、电子商务，建立高度发达的网上旅游系统，对于促进我国旅游业的跨越式发展有着重要的作用。
1.2旅游网站发展现状
1我国旅游网站发展概述
第一阶段（1997—2000年）：
我国真正出现基于互联网的旅游网站以1997年中国旅游资讯网和华夏旅游网的成立为标志。
此阶段旅游网站信息很少，网站只由一到数张设计简单、以景点介绍的简单文字为主的网页构成。
第二阶段（2000—2001年）：
2000年4月以网上预订为主的青旅在线诞生，电子商务模式首次引入旅游网站。
此阶段旅游网站提供的预订服务一般只包括交通及住宿企业的电话等联系方式，游客的预订仍需绕开网站，直接与相关企业打交道。
网站的资讯信息已日益丰富，并由层次分明、包含超级链接的网页组成。
第三阶段（2001—2002年）：
随着2001年2月金旅雅途网的成立，中国出现一批以网上交易平台服务为主要业务的旅游网站。
此时旅游网站已有较强的互动性，且开始提供一些在线服务。
网上预订的业务也大大增强，只是从网上预订客房后仍需通过银行等途径汇去所需款项，预订的飞机票等也必须派人上门递送，属于“鼠标加水泥”的模式。
第四阶段（2002—）：
2002年4月中国第一个旅游目的地营销系统“南海目的地营销系统”在广东省南海市建成，南海旅游网成为中国首个运行DMS的旅游网站。
从此阶段开始，功能强大的数据库系统使游客可以很方便地实现食、住、行、游、娱、购等信息的在线查询，甚至可以借助多媒体工具进行网上虚拟旅游。
未来的旅游网站的知识内容将日益丰富，栏目的内容将日益详细，分类将日益科学，单调的、一成不变的旅游行程表将被灵活多变的自助旅游的游程定制所替代，为游客提供个性化的旅游产品等智能服务将成为旅游网站的重要功能。
（二）网站分类
对于种类繁多的旅游网站可以从不同角度进行分类，如按网站性质的不同可将我国旅游网站分为如下七类：
政府旅游部门网站、应用服务供应商网站、旅游企业网站、专业旅游网站、网络内容供应商网站的旅游频道、各类旅游目的地咨讯网和地方性旅游网站、个人旅游网站。
此外，旅游网站还可按专业属性、服务类型、提供信息等不同要素进行分类。
（三）网站构建中存在的问题
目前我国旅游网站数量非常庞大，现在用各种搜索引擎搜索到的旅游网站已达数万家。
但是大多数旅游网站的构建无论从网页设计的科学性、有效性，还是从网站的服务内容、服务范围、服务功能来看，都非常不规范，存在不少问题。
以政府旅游网站为例，域名的使用就非常混乱，48%的省级政府旅游网站未使用的正规域名，网站的信息提供也参差不齐；
再以专业旅游网站为例，从网上选取50家较为成功的专业旅游网站进行了测评结果来看，酒店客房和机票的查询预订是专业旅游网站提供的主要功能，在选取的专业旅游网站中，100%的网站都提供了此两项功能，但从具体功能来看，尚无一家旅游网站能够提供客房的实时状况，如最近一天的客房销售情况和促销优惠的报价。
火车票的查询只有45%的网站提供，国内火车票的预订尚无一家网站开通，唯一一家开通火车票预订的是再见城市网站，也仅开通了欧洲火车通票预订。
能提供出租车预订的网站只占22.7%。
目前，在所选取的网站中尚无一家提供酒店、机票、出租车、门票的组合预订，而提供了门票或导游预订的也只有两家。
从预订方式来看，选取的网站都提供了网上预订功能，但提供网上支付功能的网站只占22.7%。
此外，绝大多数专业网站没有设计旅游投诉的功能。
既能体现旅游网站内涵又便于查询记忆的网站域名和网站LOGO。
名和标志LOGO的设计既要体现旅游网站的内涵，使游客通过网站的名称就可以对网站的产品及服务有一定的了解，又要具有鲜明特色，便于查询、记忆。
如携程旅游、再见城市、信天游、八千里路等旅游网站的中文域名就一目了然且极具个性。
美观大方且兼具合理性、系统性、逻辑性的网页。
先应充分考虑网页的美观度，其次可运用多媒体技术，在网页中加入FLASH、3D片头动画、三维实景演示及MPS、AVI、等音视频播放下载，加强旅游信息展示的生动直观性，此外，也应处理好首页打开速度与网页美观度之间的矛盾。
如可将图片以较小尺寸在首页上显示，通过点击放大浏览原图。
网站的网页结构设计必须注重科学性。
应在首页上设置网站信息的总目录。
另外应尽可能将主题内容放在首页，减少游客点击进入下层网页查阅的次数。
首页上的内容应定期更换，以提供最新最快的旅游资讯，更换下的内容可放入下层网页。
我国主要国际旅游客源地情况制作不同语言版本的网页。
我国地大物博、历史悠久，丰富多彩的旅游资源也不断吸引着全世界的寻幽猎奇的旅游者。
在开放的网络中，我国的旅游网站所面对的也是全球旅游市场，来自世界各地的游客都可能成为旅游网站的浏览者和客户。
目前我国大多数旅游网站只有中文简体一个语言版本，无法满足全球不同地域游客的需要，应根据我国现有的主要国际客源市场，尽量增设其他语言的网页版本，如中文繁体、英文、日文、韩文、法文、德文等，以满足不同语种和区域游客的需要。
此外，还可根据需要，单独开设面向不同国家、民族的外语版块，有针对性的提供相关信息。
在对各类旅游网站的各种要素进行了综合的测定分析后，笔者对未来中国旅游网站构建要素提出以下设想，以使现有网站更臻完善。
1.3本课题目的与意义
建立旅游网站是我个人的爱好，我希望自己的技术可以变为一种提高自我的表现，至于为何选择旅游这个主题进行建设网站，那是因为我个人对此较为了解，也是看目前形式下此类网站不多，要不就是内容不丰富，没有自己独特的创意才来建站，当然，我不排除有的一些好的旅游网站，只是很少，所以我想自己单独的制作出自己的旅游网站，一遍更多的人了解旅游的各个景点。
第二章开发工具和开发技术简介
2.1Dreamweaver简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。
它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。
DREAMWEAVER特点：
1、灵活的编写方式
Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。
2、可视化编辑界面
Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。
可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。
无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。
3、功能更多的CSS支持——CSS可视化设计、CSS检查工具
4、动态跨浏览器验证
当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。
动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。
5、强大的WEB站点管理功能
6、内建的图形编辑引擎
7、Dreamweaver的集成特性
Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。
8、丰富的媒体支持能力
可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。
Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。
Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。
9、超强的扩展能力
Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩Dreamweaver的功能，并且可以发布这些插件。
2.2PhotoShop简介
AdobePhotoshop是一个由AdobeSystems出品的专业图像处理软件。
与该公司的其它软件一样，Photoshop适用于MacOS及MicrosoftWindows两个操作系统，同时公司也发布了Unix操作系统上的版本。
Google也正在透过Wine资助Linux版Photoshop的研究。
Photoshop最初是由托马斯·
诺尔（ThomasKnoll）和约翰·
诺尔（JohnKnoll）这对兄弟于1987年制作的，但直到1990年后，这个软件才由Adobe公司首次发布。
Photoshop最初用于处理那些在当时价格不菲的扫描仪扫描下来的图像。
特性：
Photoshop主要处理以像素（Pixels）所构成的数字图像。
利用其广泛的编修与绘图工具，可以更有效的进行图片编辑工作。
独特的历史纪录浮动视窗和可编辑的图层效果功能使用户可以方便的测试效果。
对各种滤镜的支持更令使用者能够轻松创造出各种奇幻的效果。
目前，Photoshop也正在被更多的用于处理网络图片。
Photoshop的几个后续版本中捆绑了一个独立的软件ImageReady，加强了Photoshop对网络图像（主要是GIF图像文件）的支持功能。
而在CS3中ImageReady被Fireworks所代替。
PhotoshopCS3允许用户更容易升级到最新的硬件平台，支持苹果的Intel为内核的系统。
Photoshop被人们认为是最好的图像处理软件，但与著名的3DStudioMax一样，昂贵的价格使其难以普及。
这也令JascSoftware公司的PaintShopPro，GIMP小组的GIMP和友立信息的UleadPhotoImpact占领了相当的市场份额。
为了争夺市场，Adobe发布了一个Photoshop的简易版本PhotoshopElements。
虽然它对很多功能都作了限定，但继承了原软件的多数优秀功能，价格比Photoshop便宜不少。
2.3AdobeFlash简介
AdobeFlash，前称MacromediaFlash，简称Flash，前身FutureSplash，既指AdobeFlashProfessional多媒体创作程序，也指AdobeFlashPlayer。
自从Macromedia公司于2005年12月3日被Adobe公司收购，Flash也就成为了Adobe旗下的软件。
1、flash特性：
（1）被大量应用于因特网网页的矢量动画文件格式。
（2）使用矢量图形（VectorGraphics）的方式，产生出来的影片占用存储空间较小。
（3）使用Flash创作出的影片有自己的特殊文件格式（swf）
（4）该公司声称全世界97%的网络浏览器都内置Flash播放器（FlashPlayer）
（5）是Adobe提出的“富因特网应用”（RIA）概念的实现平台
（6）Flash6之后版本纳入面向对象程序概念。
与其他语言比较，不论是在数据库、XML、PHP等各种平台上，都能更进一步的相互结合应用。
（7）从用户体验的角度，是目前最好的前端技术。
2、主要文件格式：
（1）swf
是ShockwaveFlash的缩写，这是一个完整的影片档，无法被编辑。
有时会被念作“swiff”或“swaif”。
SWF在发布时可以选择保护功能，如果没有选择，很容易被别人输入到他的源文件中使用。
然而保护功能依然阻挡不了为数众多的破解软件，有不少闪客专门以此来学习别人的代码和设计方式。
（2）fla
Flash的源文件，只能用AdobeFlash打开编辑。
2.4HTML语言简介
HTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。
自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。
HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。
生成一个HTML文档主要有以下三种途径：
1、手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2、通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3、由Web服务器（或称HTTP服务器）一方实时动态地生成。
HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。
虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。
这就是为什么同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是2.0，它是基于SGML（StandardGeneralizedMarkupLanguage）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。
虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。
2.5CSS简介
CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
1.层叠式表的特点：
（1）便于页面的修改。
（2）便于页面风格的统一。
（3）减少网页的体积。
2.采用CSS布局相对于传统的TABLE网页布局而具有的优势：
（1）表现和内容相分离：
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。
这样的页面对搜索引擎更加友好。
（2）提高页面浏览速度：
对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
浏览器就不用去编译大量冗长的标签。
（3）易于维护和改版：
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
第三章需求分析
3.1网站系统分析
本旅游网站是为以旅游信息发布、旅游资料共享、浏览客户为核心的网站，宗旨是能及时、准确、完整发布游客需要的旅游信息。
浏览客户
浏览客户是只在浏览器端浏览网站信息的用户，也是整个网站信息需要面向的用户，其主要实现功能为：
（1）客户可浏览旅游新闻信息
（2）客户可浏览旅游线路信息
（3）客户可浏览旅游酒店信息
（4）客户可浏览旅游图片信息
（5）客户可浏览旅游景点信息
3.2功能性需求分类
我的网站总体分为5个网站栏目，分别是步行天下行首页、牛人专线、旅游线路、旅游攻略、其他资讯和二级页面。
1步行天下行首页
首页网页名称是index，首页是浏览者看到网站的第一个页面。
首页可以说是一个精华，他总体的概括了该旅游网站的大致内容，突出了主题。
2牛人专线
牛人专线的网页名称是zhuanxian，它是一级页面，当进入首页之后在导航条上直接选择即可将进入到该页面。
牛人转线这个页面主要介绍了各个地方的旅游。
3旅游线路
旅游线路网页名称是xianlu，同样是一级页面。
进入首页之后在导航条上即可选择该功能。
旅游线路主要介绍旅游的现在路线。
4旅游攻略
旅游攻略网页名称是gonglue，同样是一级页面。
旅游攻略主要可以看看各个景点的图片。
5其他资讯
其他资讯网页名称是zixun，同样是一级页面。
其他资讯主要是介绍现在有关旅游的各个资讯。
6二级页面
二级页面主要是对以上四个页面里的链接负责。
3.3非功能性需求
1.用户界面需求
用户界面需求主要是风格问题，首先确定了在整个网站页面中标题栏用白色为主色调，使网站产生一种优雅、舒适的气氛，使人可以长时间浏览，也不会觉得视觉疲劳。
其次，要要求导航条简洁明了。
然后正文要用14px宋体，鼠标移动的时候，字体将会变成浅灰色，这样看起来会很舒适很舒适。
另外，也可以用一些图片做背景图片加以修饰，也可以加一些图片滚动和图片切换来添加一些动态的效果，从而不显得那么单调，增加一些生机的气息。
2.软硬件环境需求
软件需求：
操作系统：
Windows2000或WindowsXP；
浏览器：
IE6.0及以上版本或FireFox3.0及以上版本。
开发工具：
Dreamweaver8.0（或记事本）+Fireworks8.0。
硬件需求：
要求处理器是Pentien3以上，并且内存>
=512MB和硬盘>
=40G。
3.网站质量需求
正确性：
要保证网站运行的正确性，无链接错误、图片显示错误及其他运行时错误。
性能效率：
网站设计要合理，代码无冗余，运行速度快。
易用性：
要导航栏目清晰、合理、简便易用。
清晰性：
导航栏目清晰，合理
可扩展性：
兼容性强，用户使用各主浏览器能有一致的用户体验
可靠性：
信誉度
第四章网站开发过程及实现
4.1创建站点
（1）启动Dreamweaver。
（2）打开“站点”菜单，选择“新建站点”命令。
如图4-1：
图4-1站点
（3）在弹出的“站点定义”对话框中的“站点名称”文本框中输入“步行天下行”，在下面的“本地根目录文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。
（4）随即在组合面板中点弹出“站点”面板，现在可以在其中添加页面了。
（5）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html”
（6）双击index.html，进入页面编辑状态。
4.2首页设计
首页是一个网站的门面，如同公司的形象，特别注重设计和规划。
它是用户首先见到的界面，它的好坏直接影响到网站的访问率。
为此，我从以下几个方面对主界面进行了设计。
1、在色彩搭配上，我用一种较明快的色彩为基调，配以相关的其他色彩，给用户一种鲜而不艳的美感。
2、在字体选用上，大小适当，尽量使用常用字体，适当配用艺术字。
3、在网页制作上，采用表格划分区域的手法，方便文字和图片的插入。
4、在内容上，主界面内容充实而不繁杂，既体现本站特色，又能满足用户需要。
在主页的基础上我把主页中加入了可编辑区域，并另存为了模板。
以后的页面都是在模板的基础上进行制作的。
使用模板功能有助于用户设计出风格一致的网页。
通过模板来创建和更新网页，不仅可以大大提高工作的效率，而且维护网站也会变得更加轻松。
步行天下行网首页如下图4-2：
图4-2界面首页
4.2.1首页顶部设计
其中的logo和Banner制作很简单，如下图4-3，是有一张图片和一个搜索框所制作的。
图4-3首页顶部
而制作这个logo和Banner的代码：
<
divid="
header"
>
<
divclass="
tu1"
ahref="
index.html"
imgsrc="
image/logo.jpg.png"
width="
450"
height="
100"
/>
/a>
/div>
banner"
>
<
q
升级会员 