Trip Fun长沙旅游网站设计.docx

《Trip Fun长沙旅游网站设计.docx》由会员分享，可在线阅读，更多相关《Trip Fun长沙旅游网站设计.docx（25页珍藏版）》请在第一文库网上搜索。

1、一、内容简介1（一）背景与意义：1（二）资料收集和分析1（三）方案的设计11 .网站的名称：“TripFun”长沙旅游网站12 .网站功能的设计：13 .网站栏目的规划图24 .网站设计资源图：2（四）方案的实施21 ,确定网站主题22 .网站的搭配33 .构建网站布局34 .设计软件的选择35 .网站页面素材的收集36 .网站页面的实现37 .网站推广38 、产品分析4（一）需求分析4（二）技术可行性分析4（三）方法分析4（四）可行性分析4三、设计草图5四、 设计过程与效果图81. ）PhOtOShoP部分81. 网站1ogo8（二）DreamWaVer部分92. 注册页面93. 登录页面1

2、04. 首页页头125. 首页内容136. 网站页脚16五、 作品效果图片16六、设计创意说明20七、设计总结20参考资料22产品名称“TripFun”旅游网站设计一、内容简介（一）背景与意义：“TripFun”旅游网站的设计是单纯是为了自己的爱好一一旅游，亦或者是我个人比较喜欢长沙，我想让更多的人了解这个城市。作为湖南的省会城市，她既有工业城市的发达，也是一个美丽风景与梦想并存的地方。作为湖南人，我以前非常向往长沙这个城市，于是乎三年前我来到这个城市。作为一个旅游爱好者，我去过橘子洲头，登过漫山红遍的岳麓山巅，见过繁华的五一广场，也徒步走过了长沙一株洲的百里毅行活动，见过远离市中心的平凡农村

3、，这些都向我展示了长沙每个独特的面孔。我喜欢长沙，我也想把长沙分享出去，为了让更多人的人更好地了解到长沙这个城市，“TripFun”长沙旅游网站就诞生了。（二）资料收集和分析本项目的相关资料是通过查阅网站、查找了相关资料收集了一些关于长沙的图文与视频以及融入了自己的想法和理解来制作和实现的。经过这次项目实践，我对网页制作有加深了一下掌握，也对长沙这个城市的人文生活、景观特色，街道文化以及长沙人的性格特点等有了更多的了解。最后,在设计的过程中，不仅能够让自己构架的熟练软件，对效果的适当使用，而且最的设计水平有了一定的帮助。（三）方案的设计本这次的毕业设计主要是制作一个旅游攻略的网站。项目主要有主

4、页以及登录注册两个页面以及两个单独的子页面。网站名称：“TripFun”长沙旅游网站1 .网站的名称：“TripFun”长沙旅游网站2 .网站功能的设计：网站功能的设计是通过参观了一些知名的旅游网站然后结合了自己的想法制作了包含1OGO、导航、banner.登录注册按钮、正文内容以及友情链接和宣传视频在内的元素。3.网站栏目的规划图舌尖上的长关于长沙沙X/）4.网站设计资源图:MSJTB*0SBKJtRRecwMwgtjTdpRxtttMiXMit9ttM9rAk9E4J密ASKM-3m女的网7个Ma图1-2网站资源图图1-1网站栏目规划图（四）方案的实施1 .确定网站主题打小就喜欢到处走到处

5、玩，长大后来到长沙这里，通过种种事件，我喜欢上了长沙的文化特色与风景美食，于是我就想把长沙分享出去，让更多和我一样的人喜欢上长沙。2 .网站的搭配页面采用了朴素的白色背景，用红色对一些重要的东西进行了标识。登录与注册页面采用了加了灰色蒙版的背景图片。3 .构建网站布局网站的布局是运用结构比较单一的模板样式构建完成的。首先完成首页内容及样式的布局，之后对其新建模板，再新建模板中的页，就得到自己想要的网站页面。最后将各个页面相关信息、内容运用上去即可，然后对网站进行整体色彩的搭配。4 .设计软件的选择一个成熟网站的制作是需要通过运用制作软件来共同制作并完成。首先，我选择的第一个软件就是AdobeD

6、reamWeaver软件，运用它来对网站进行大概的布局规划，制作出网站框架。其次就是运用了AdobePhotoShop软件，用此软件对网站所需的素材照片进行裁剪、美化、亮化、模糊等处理，让素材图片更加美化、生动的出现在网站页面上。5 .网站页面素材的收集现如今网络世界是很强大的，只有你想不到的，没有你搜不到的。利用网络的强大资源来搜集自己所需的网站页面素材，并将搜集的资料进行处理与美化，比如：对图片素材的大小进行调整、编辑、美化等处理。6 .网站页面的实现使用DreamWeaver代码编辑来编写网站的静态页面代码，依照自己构思的、绘画出的网站草图以及网站该实现的功能定位来编写网站网页代码；利用

7、DW中的div盒子布局和css代码样式来实现网站的静态页面。让网站实现各个页面之间的连接与跳转。同时，使用PhotoShop图像处理软件对网站页面所需要的图片素材进行美化、亮化、模糊、裁剪等等处理。7 .网站推广一个网站的浏览量都是需要靠推广来实现的，一个没有浏览量的网站不是一个成熟的网站。现如今我们所熟知的：百度、搜狗浏览器、谷歌浏览器等，这些浏览器的是最为常见的，也是应用最多的。所以我打算在这些浏览器上进行网站推广，与此同时，还可以在微信、微博这些新媒体上进行网站推广的实现；在进行网站推广的时候可以对网站的关键词进行挑选、优化等处理，当然还要考虑到网站兼容性问题。二、产品分析（一）需求分析

8、该网站主要是以“长沙旅游”来作为主题的一个网站。网站主要介绍长沙的人文信息，如景观特色、美食住宿等等，让大家更加进一步了解长沙。而且网站主页与各个子页面的连接与跳转都能让人们可以很快的找到自己想要了解的页面，让其有目的性的了解、去浏览。（二）技术可行性分析网站采用了DW的div与css技术对网站页面你进行构图布局和样式效果的实现；使用PS对网站图片素材进行编辑处理。结合这些技术的综合运用，实现网站的整体效果，从而满足人们的需求。（三）方法分析根据不同的网站、从不同的方面来完善自己的网站设计。取其精华去其糟粕，优点予以借鉴,缺点便加以改进,综合起来共同完成一个成熟网站的设计与实现。善于倾听和借鉴

9、周围人给的建议，根据周围朋友指出来的优缺点进一步完善自己的网站。（四）可行性分析旅游业随着经济的发展逐渐上升，如今的我们也想到处去看看、去走走，去领略世界各地的风俗和文化，去发现更多“新世界”。正因为网络世界的到来，人们更加喜欢网上冲浪，喜欢在网上了解自己想要了解的事物。三、设计草图1OGO导航登录&注册Banners3住宿推荐一出行攻略2文化长沙版权信息&友情链接卜图3-1网站首页图注册I用户协议第三方注册图3-3注册页图导航。标题美食，美食。美食。美食“图3-4舌尖上的长沙页面草图四、设计过程与效果图（一）PhotoShoP部分1.网站1Ogo网站的1og。运用了PhOtoShOP软件来制

10、作。设计想法：“乐游旅行，行遍天下。左侧是网站的名称，右侧选用了一张白底的脚掌图，然后将其填充为ft1296db01ogo的大小为100*45像素，右侧图标填充颜色为#1296db,上半部分文字“乐游旅行”采用了黑体字体，字体大小为15.17px;下半部分文字“TripFun”采用了黑体，大小为14.22px;中间用一条大小为3px的线段隔开，以提升1og。整体的层次感。制作过程与效果图如下：图4T填充后的脚掌图，颜色为#1296db图4-2左侧文字部分乐游旅行TripFun图4-31ogo效果图（二）DreanIWaVer部分1 .注册页面网站的用户注册页面是通过HTM1的表单来完成的样式采

11、用了CSS中的内嵌式，内容包括昵称、密码、手机号码。为了方便用户的使用，里面还添加了可以用QQ以及微信等第三方社交软件直接注册。效果与过程图如下:图4-4注册页代码图th1tp-qxV-eContent-Typ1111Bbackground:ur1CinagBbg.jpg);width:490px;hight630PXjtxt-a1ign：cntr;background:FFF;position:abso1ute;1ftx700p;top:100px;width:JOOpx;height:5Opx;borSx-raduB:5p-xpdding:0;nrgin0;poBiCXon;abvo1ut

12、;tops120px;1oft;65px;图4-5注册页样式图图4-6注册页效果图2 .登录页面登录页的制作方式是基于注册页而改变的，同样是使用了HTM1表单来制作,样式也是内嵌式，不过里面的内容要少，只有手机号或电子邮箱和密码两个文本框。没有注册的用户可以通过点击下面的链接非常方便的跳转到注册页。同时登录页也可以使用多家第三方社交软件登录，更便捷。tt-fnvirn-iarc-1ma9319o.Jp9*/*登条XnTransit1onai/ENM*httpZwfw.w).orgTRxhtm11DTDxhta11-trano1t1ona1.dtd*sty1?.图4-7登录页代码图background:ur1(MgBbg.jpg);J;:awWqum1，”&ahTTYPEhtf1PUB1IC-WJCDTDXHTK11.0XFSXI31-paword请人定碍.(:立讣册21-co1or：#fff;background-co1or：OCF;border-radius:25x;*GI17集f16条pgBrc*ingwchCpng*height40gr