基于boostrap框架下的旅游网站设计与实现.docx

珍岛旅游网站设计说明书开发人员：XXXvXXX人员分工安排：项目组长（XXX）负责需求的总体把握，和网站的总体策划。界面设计工程师（XXX）承担网站首页界面和各子页界面的设计开发工程师（XXX、XXX）承担网站编码工作测试工程师（XXX、XXX）承担整体网站测试工作说明文档+项目演示（XXX、XXX）网站说明文档的编写+项目演示PPT第1章项目需求和背景3第2章网站规划设计说明3第3章页面DIV结构代码4第4章代码及注释11第5章网站测试结果13第6章项目计划及分工15第7章总结16第1章项目需求和背景旅游新模式的出现。面对市场需求不新地提升，旅游公司也是不断增加，为了更好地吸引消费者，想尽办法吸引客户，满足不同客户的旅游要求，根据市场需求制定不同套餐，比如几天游、各类主题游、吃住模式等。新的营销方式不断涌现。现在是互联网社会，信息传播的很快，更新的更快,对于旅游公司来说，要抓住这些新的营销渠道，来宣传企业，挖掘更多的客户，必须搜索引擎竞价推广、自媒体推广、博客推广、百度推广等。第2章网站规划设计说明1、网站规划网站名称：珍岛旅游网站网站主题：通过网站宣传，各个地区的景色。输入法网站语言：简体中文网站风格：以炫彩色调为主，给人以一种舒适的感觉，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。(1)首页设计页头：准确无误的标识旅游网站。页面：各地方的风景展览。(2)导航设计旅游网站：首页、景区概况、文苑之旅、旅游攻略、舒雅住宅、新闻动态、留言中心、联系我们2、形象设计Logo：3、网站色彩(D网站主色调IH区概况文苑之IK舒Il住宅新圜动态HJ三中心联系现们该网站的主色彩是白色和绿色非常具有亲和力的颜色，它代表的是自然、自由与活力，是使用比较广泛的颜色之一.4、技术方案表2技术方案表序号网站组成使用技术效果说明11、网站所有文字页面2、静态图片3、表格HTML出版在线的文档，其中包含了标题、文本、表格、等内容。2网站内的动态按钮CSS使用CSS的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。3动态图JS轮播图4框架Bootstrap响应式框架第3章页面DIV结构代码（包括主页和各内容页）主页<headerclass="headerhome_p"><divclass=,container"><divclass=2logo,><ahref="index.html112<imgsrc="images/logo.png"alt=""><a><div><ahref="#mmenu"class="phone-na2><iclass="fafa-list,><i><a><divclass="logo-right2><navclass=,nav2><ul><li><ahref="index.htmItCIaSs="active1首页<a>Ii之<li><ahref=,sceniJoVerView.html,>景区概况<a><li><li><ahref="court_traVeLhtnI1”>文苑之旅<a><ul><li><ahref=,courJtraveLhtml,>茶艺中心<a><li><li><ahref="court_travelJtm>7j<axli><li><ahref="court_traveLhtml”>创意中心<a><li><li><ahref=11court_travel.html,>花草园艺<a><li><ul><li><li><ahref="ComfortabI舒雅住宅</a>Qj2_<li><ahref="news.html”>新闻动态<a><ul><li><ahref=',news.html,>公司新闻<a><li><li><ahref=2nws/Ttmr,>行业断闻<a>"A><ul><li><li><ahref="feedback.html">W>lL'<a><li><li><ahref="contact.html”>联系我们<a><Ii><ul><nav><divclass="search">spanclass="sea_x'><inputtype=""name=id=""placeholder=',ijyAil,><iclass=,fafa-search"><i><span><spanclass="y-z,><ahref=""class="zhactive”>中<a><ahref="”ClaSS=Hn»En<a><span>j<div>工div><div><header><!-bannerstart><sectionClaSS="banner"）<div><ahref=,index.html,><imgsrc="images/bannerl.jpgnalt=11"><a><div><div><ahref=,idex.html,><imgSrC=HirnageSbanner2JDng”alt=",><a><div><div><ahref="index.html"><imgsrc="images/banner3.png"alt=',xaxdiv><section><!-bannerend->diyclass=',jqgk,><di£class=,contai”><divclass="top_tit"><spanclass="spanl"><ahref="sceniJoVerVieW.html”>景K概况<a><SPan><br><spanclass="span2">SCENICOVERVIEW<span><div><pCiaSS=HWoWbounceln,>一上海珍寓商业管理有限公司位于国家级经济技术开发区，是首批专注于精品民宿的新型创业连锁平台。<br/>公司成立王2016年2月，注册资金1000万元。珍岛使命在于构筑“万众创新、大众创业”的新型平台，建立一个为历史和未来仇责的、“留得住浓浓的乡愁”的城镇化村落服务体系,<br/>为中国城镇化进程中的美丽乡村建设贡献一份力量。<p><divclass="×ia-×,><spanclass="img,><spa><div><div><div><divClaSS="wyzl”><divclass=,top-tit,><spanclass="spanl"><ahref="court_travel.html"><a><span><br><spanclass="span2,>C0URTTRAVEL<span><div><ulCiaSs="Clearfix”><liclass="wowbounce工n”><ahref="court_travel.html"><imgsrc=nimages/home_l.png"alt="*,class="vcenter,><i><i><a><ahref=,courjtraVeLhtmI,>万竹林海（一）<a><li><liclass="wowbounce工n”><ahref="court_travel.html"><imgsrc="images/home_2.png"alt=""class=',vcenter"><i><i><a>< ahref=,'cOUrt_travel.html,>万竹林海（二）<a><li><liclass="wowbounceln11>< ahref="court_travel.html"><imgsrc="images/home_3.png"alt=""ClaSS="vcener"xixixa>< ahref="court-travelhtml”>万竹林海（三）<a><li><ul><div><!-wyzlend-><divCIaSS="syzz”><divclass="top_tit"><spanclass="spanl"><ahref="sceniJoVerView.html”>舒雅住宅<a><SPan><br><spanclass=',span2">C0MF0RTABLERESIDENTIAL<span<div><divclass="syzz_conclearfix<divclass="left',><div><ahref="comfortable.html"><imgsrc="images/syzz_l.png"alt=""/class="vcenter"><i><i><a><div><div><ahref=2comfortable.html-><imgsrc="images/syzz_l.png"alt=""/class=,vcenter,><i><i><a><div><div><ahref=,'comfortable.html"><imgSrC=HimageSsyzzJLrpngnalt=""/class=,vcenter,>3ixixaxdiv><div><divclass="right',><imgSrC="images/fang.png"alt=""><divclass="fang_t2>_<span>客I<span><span>房卜span><span>b<span><span>绍<span><div><divclass=_fang_c“>桃花林知哈客太南100苞房型分为标Ia代两个美型，以满足善人的不同需求<div><divclass=,'pr-neCleaHzix”><spanclass="pr,>上一个<span>spanClass=,neTr个<span><div><div><div><divclass="xia-x11>CSPanclass="img"><SPan><div><div><!-syzzend-><divclass="home_news"><divclass=,news-con"><divclass=,top-tit,><spanclass="spanl"><ahref="news.html”>新闻动态<a><span><br><spanclass=',span211>NEWS<span><div><ul><liClass=nClearfixwowbounceln"j><divclass="news_left"><ahref="news.html”>暑假去哪玩?桃花苑天地避暑甚好！<a><P>暑期近在眼前，还在犹豫带孩子去哪儿玩吗？炎热的夏天，一颗躁动的心，背上收拾好的背包，走遍大好河山,感受大千世界，还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣，回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。<p><div><divclass="news_right"><span>07.21<span><time>2016<time><div><li><liclass=,clearfixwowbounceln"><divclass="news_left"><ahref=',news.html">花落流水春又去<a><P>春暖花年桃花苑天地精品大咖云集，活动丰富。不仅有适合小朋友们的春游活动，有适合老年朋友的喝茶加棋牌，还有书法大咖们的加盟，乃至电视真人秀节目的拍摄。这可把桃花宝宝们忙坏了，不过没关系，累并快乐叠，桃花宝宝非甯欢迎大家的到来<p><div><divclass="news_right”><span>05.25<span><time>2016<time><div><li><liclass="clearfix',><divClaSS=Unews_left"><ahref="news.html”>蝴蝶摘花来<a><P>清朝末年，先生在宁波开了一家面店，生意不错。一天，即将回国的美国华侨,登船前来到卜先生的店里吃面，离店时竟把一只皮箱落下了。先生打烂时才发现这只皮箱，但已无法找到失主，只好把皮箱小心收藏，等待着失主前来认领。<p><div><divclass="news_right',><span>05.25<span>jctime>2016<time><div><li><liclass="clearfix',><divCIaSS="news_left”><ahref="newshtml">这是我们想去的地方<a>卬春暖花开，桃花苑天地精品大咖云集，活动丰富。不仅有适合小朋友们的春游活动，有适合老年朋友的喝茶加棋牌，还有书法大咖们的加盟，乃至电视真人秀节11的一摄。这可把桃花宝宝桁坏了，不过没关系，累异快乐着，桃花宝宝非常欢迎大家的到来<p><div><divclass="news-right,>span>05.25<span><time>2016<time><div><li><ul><ahref=',news.html"class="more">MORE<a><div><div>«!二footerstart-><footerclass="footer,><divclass=,footer-con11><divClaSs="Con”><divclass=,nei"><divclass=""><ulClaSs="di_navclearfix”><li><ahref="scenic_overview.html112EMi51<a><li><li><ahref="COurJtraveLhtml”>文苑之旅<axli><lixahref=,comfortable.html,>f3¾<a><li<li><ahref=,news.html”>新闻动态<>><li><li><ahref="feedback.html”>留言中心<a><Ii><li><ahref="contact.html”>联系我们<axli><ul><divClaSS="links友情链接<ul><li><ahref=',>,>¾<<a><li><li><ahref=",>新浪微博<a><li><li><ahref=”>百度知道<a><li><ul><div><div><divclass="clear"Xdiv><divclass="lian,>地址：上海市虹口区水电路682号天虹商务大厦6F、7FHF<br/><a”仃=，叩,115.,>网站地图</-><什/><span><ahref="#"target="_blank"><imgsrc=2imagesyu.png2alt=11"><a>spanClaSS="er_a”><imgsrc="images/er.£ng2alt=",class=,one-img">珍岛公众号<imgsrc=,imageserwei.pngnalt=,nclass=,'er-img,7><span><span><div><div><div>div><divclass="copy">Copyright2016版权所有：上海珍寓茶业有限公司<div>/footer)<!-footerend-><!-移动端Mmenu-><navid="mmenu"><ul><li><ahref=',index.html"CIaSS="active,>>首页<axli>< li><ahref=11scenic-overyiew.底巾1,|>景区概况</3></1:1>< li><ahref="courttraVeLhtnI1”>文苑之旅<a><ul><li><ahref="court_travel.html”>万竹林海<a><li><li><ahref="court_travel.html">lJ>L'<axli><li><ahref=,courJtraVeLhtml,>花草园艺<axli><ul><li>< lixahref=,comFortable,html11>舒雅住宅<aX/Ii>< lixahref="news.htmV>三<a><ul><li><ahref="newshtml“>公司新¾<a><li><li><ahref=''news,html”>彳亍业新闻<n><li><ul><li><li><ahref=,jfeedback.html,>留言中心<a><li>clixahref="contact.html,>联系我们<axIi><ul><nav><div>第4章代码及注释主页：JS代码:$(function()$(".navulIia:last").css(',border","none");$('nav#mmenu,).mmenu(extensions:'effect-slide-menu,pageshadow,counters:false,navbar:title:'菜单，,navbars:content:IIIjZ)；/*index*/$('.banner)slick(dots:true,autoplay:trueAarrows:false,autoplaySpeed:3000,)；$(1syzz_con.left，)slick(dots:true,autoplay:true,arrowsztrueiautoplaySpeed:3000,)；$(".links1').hover(function()$(".linksul").slideDown(500),function()$(H.linksur).slidep(500)$("er_a“).hover(function()$(".er_imgH).show();,function()$(”.er_img”).hide();)$(".f_da").slick(fade:true,UseTransform:true,arrows:false,asNavFor:".f_xiao")$(Jf_xiao').slick(SlidesToShow:3,SlidesToScroll:ljarrows:true,fOcusOnSelect:true,UseTransform:true,asNavFor:".f_da")；varleft_img=(,leftimg").attr(',src");$(".pic_li").hover(function()varimg_src=$(this).find(',img").attr("src);$C.leftjmg,d.attSrCnAimg_src);jfunction()3)$(".!IaVL)hover(function()$(this).find("ul").fadeln(),function()$(this).find("ul").fadeut()11Z第5章网站测试结果1、PC端测试结果14-中Trun3°景区概况Scenicoverview上鳏岛商业管理有限公司位于国家级经济技术开发区，是首批专注于精品民宿的新型创业连锁平台。公司成立于201件2月，注册资金100O万元.珍岛使命在于构筑“万众创新、大众创业"的新型平台，建立f为历史和未来负责的、"留制胡派M乡愁”的嗨真例寸落服务体系，为中国城镇化进程中的美丽乡村建设贡献一份力量。°文苑之旅COURTTRAVEL第6章项目计划及分工项目组长：XXX班级：日期进程第14周(5.23-5.29)第15周(5.30-6.5)第16周(6.6-6.12)第17周(6.13-6.19)负责人项目计划项目需求搭建框架编写代码测试页面XXX景区介绍XXX度假推荐，IXXX旅游攻略XXX注册页面XXX登录页面XXX页反馈XXX关于我们页XXX设计说明书XXX系统测试XXX项目展示XXX2、分工完成情况XXX:项目计划，网站页面。XXX：总体方案，效果图，公众页面，系统测试。XXX：设计说明书，项目展示。第7章总结通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。利用bootstrap开发等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页.