基于html的旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

這篇具有很好參考價值的文章主要介紹了基于html的旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

目錄
第一章緒論 1
1.1. 選題背景及意義 1
1.2. 國內(nèi)外研究現(xiàn)狀 1
1.3. 研究主要內(nèi)容 2
第二章開發(fā)工具的選用及介紹 3
2.1. 網(wǎng)頁開發(fā)技術(shù) 3
2.1.1. HTML簡介 3
2.1.2. DIV+CSS簡介 3
2.1.3. bootstrap 3
2.2. 網(wǎng)頁制作工具 4
2.2.1. Photoshop 4
2.2.2. Dreamweaver 4
2.2.3. visual studio code 4
2.2.4. firefox 5
第三章系統(tǒng)分析 6
3.1. 可行性研究 6
3.1.1. 經(jīng)濟(jì)上的可行性 6
3.1.2. 技術(shù)上的可行性 6
3.1.3. 操作上的可行性 6
3.2. 開發(fā)結(jié)構(gòu)分析 7
3.3. 功能需求分析 7
3.4. 數(shù)據(jù)流圖 8
3.5. 業(yè)務(wù)流程分析 9
3.6. 數(shù)據(jù)字典 10
第四章總體設(shè)計(jì) 14
4.1. 設(shè)計(jì)方案 14
4.2. 功能分解 14
4.3. 網(wǎng)站模塊設(shè)計(jì) 15
4.3.1. 前臺界面 15
4.3.2. 后臺管理 15
4.4. 數(shù)據(jù)庫設(shè)計(jì)與實(shí)現(xiàn) 16
第五章詳細(xì)設(shè)計(jì) 19
5.1. 網(wǎng)站前后設(shè)計(jì) 19
5.1.1. 首頁 19
5.1.2. 首頁中間部分 19
5.1.3. 關(guān)于蘇州 20
5.1.4. 酒店介紹 21
5.1.5. 酒店詳情 21
5.1.6. 關(guān)于我們 22
5.2. 網(wǎng)站后臺設(shè)計(jì) 23
5.2.1. 后臺首頁 23
5.2.2. 文章列表頁 23
第六章測試與總結(jié) 25
6.1. 編程環(huán)境展示 25
6.2. 前臺界面實(shí)現(xiàn) 25
6.3. 總結(jié) 26
參考文獻(xiàn) 27
致謝 28
第三章系統(tǒng)分析
3.1.可行性研究
3.1.1.經(jīng)濟(jì)上的可行性
實(shí)現(xiàn)旅游景點(diǎn)網(wǎng)站所需要花費(fèi)的時間，人力，金錢成本較該網(wǎng)站投入使用時能夠獲得的收益來講，差距是比較大的。所以，從經(jīng)濟(jì)方面討論時，開發(fā)該網(wǎng)站顯然是比較合理的。這樣可以對當(dāng)?shù)卮彐?zhèn)旅游信息進(jìn)行有效的整合和集中，及時的發(fā)布與更新，可以使旅客及時獲得各種景點(diǎn)、住宿、攻略等信息，方便得使消費(fèi)者獲得想要的信息，同時使企業(yè)盈利。這樣可以為當(dāng)?shù)亟?jīng)濟(jì)帶來更好的工作效益和社會效益，開發(fā)出本網(wǎng)站可以減少旅游人力成本，而且管理便捷，各功能實(shí)現(xiàn)迅速，以對數(shù)據(jù)實(shí)施有效的管理。管理上的有效便捷，信息得以及時獲取，選擇上的方便等所能達(dá)到的利益是不可估量的，這樣幫助村鎮(zhèn)實(shí)現(xiàn)信息化的同時幫助他們宣傳家鄉(xiāng)文化、提高收入。所以，從經(jīng)濟(jì)這個角度來說，可以進(jìn)行該網(wǎng)站的建設(shè)。
3.1.2.技術(shù)上的可行性
技術(shù)是否成熟關(guān)乎該網(wǎng)站能否可以順利進(jìn)行，是不可忽視的一個重要方面。技術(shù)可行性的研究是指的目前而言已知的的各項(xiàng)技術(shù)中哪些可以高質(zhì)量的完成對該軟件系統(tǒng)的開發(fā)。同時要兼顧已有的軟硬件配置的要求。就本系統(tǒng)而言，需要軟硬件配置較高的PC機(jī)，Windows操作系統(tǒng)，另外，需要安裝SQL2005數(shù)據(jù)庫服務(wù)器，JDK, Myeclipse，tomcat，任意瀏覽器，配置好基本的所需環(huán)境以后，采用合java，JSP語言進(jìn)行旅游景點(diǎn)網(wǎng)站的設(shè)計(jì)、開發(fā)與運(yùn)行。從技術(shù)上來說，這些基本的軟件系統(tǒng)開發(fā)所需技術(shù)是不成問題的。
3.1.3.操作上的可行性
首先，進(jìn)行網(wǎng)站設(shè)計(jì)的幾種軟件都具有較高的普及性和較高的可操作性，設(shè)計(jì)人員可以較為輕松地使用軟件對旅游景點(diǎn)網(wǎng)站進(jìn)行設(shè)計(jì)和完善。第二，管理員可對客戶進(jìn)行驗(yàn)證，對信息平臺的信息進(jìn)行發(fā)布，修改，管理，還可以實(shí)現(xiàn)酒店預(yù)訂，修改，刪除等各種功能。第三，客戶可以在提示下進(jìn)行一系列的留言，預(yù)訂，查看等各項(xiàng)功能。而這些功能都是比較簡單可行的，這些功能也比較普遍化，一般人員勝任是沒有問題的。這樣說來，從操作上來說是可行的。
結(jié)合以上分析與介紹，從經(jīng)濟(jì)、技術(shù)、操作等方面來說，現(xiàn)有的有效環(huán)境和條件、技術(shù)是可以開發(fā)出一個具有較高可操作性和功能強(qiáng)大的個性化旅游景點(diǎn)網(wǎng)站，實(shí)現(xiàn)各項(xiàng)功能，完成測試。
蘇州的歷史非常的久遠(yuǎn)，本文轉(zhuǎn)載自http://www.biyezuopin.vip/onews.asp?id=14208有著眾多的旅游景點(diǎn)和好玩的地方，蘇州旅游網(wǎng)是集景點(diǎn)展示，人文地理，新聞發(fā)布等為一體的旅游管理的網(wǎng)站，該網(wǎng)站具備游覽信息瀏覽功能。還可以對游客的瀏覽信息進(jìn)行實(shí)時的反饋，最終實(shí)現(xiàn)一鍵就可以留言。
前端頁面使用響應(yīng)式設(shè)計(jì)，使得網(wǎng)站能夠自動識別手機(jī)、平板、電腦的分辨率，自動調(diào)整網(wǎng)頁大小。網(wǎng)站采取HTML的特性優(yōu)化網(wǎng)頁的提示功能，并且提高加載速率。讓各個平臺的用戶能夠方便的瀏覽信息。
后臺的管理員能夠?qū)包c(diǎn)的信息、資訊的信息以及管理人員執(zhí)行CURD的操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper header col-xs-12">
  <div class="container nav-wrapper">
    <div class="head-top">
      <div class="logo col-md-6 col-sm-4 col-xs-12"><img src="img/login.png"></div>
      <div class="logo-right col-md-6 col-sm-8 col-xs-12">
        <div class="search col-md-12 col-sm-12"> <i class="taobao"></i> <i class="sina"></i> <i class="wx"></i>
          <form class="navbar-form col-xs-6" role="search">
            <div class="form-group">
              <input type="text" class="form-control" name="search" value="" placeholder="請輸入關(guān)鍵字">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<!--導(dǎo)航-->
<div class="navs">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="index.html">首頁</a> </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="content.html">關(guān)于蘇州</a></li>
          <li><a href="jdjs.html">酒店介紹及報價</a></li>
          <li><a href="list.html">最新優(yōu)惠政策</a></li>
          <li><a href="">預(yù)定流程</a></li>
          <li><a href="text.html">蘇州旅游需知</a></li>
          <li><a href="yhzc.html">關(guān)于我們</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<div class="clearfix"></div>
<!--banner-->
<div class="banner">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="img/banner1.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">人和假期</div>
	          <p>蜜月盡在蘇州 </p>
	          <p>咨詢電話：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="80" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京時間</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">蘇州時間</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
      <div class="item"> <img src="img/banner2.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">浪漫沙灘的氣味</div>
	          <p>你是風(fēng)兒我是沙 </p>
	          <p>咨詢電話：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京時間</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">蘇州時間</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
      <div class="item"> <img src="img/banner3.jpg" alt="...">
        <div class="carousel-caption-con">
	      <div class="container">
	        <div class="col-md-4 col-sm-4 col-xs-12">
	          <div class="banner-title">蔚藍(lán)色的心跳</div>
	          <p>讓心情隨波浪跳動 </p>
	          <p>咨詢電話：010-56149580</p>
	        </div>
	        <div class="col-md-4 col-sm-4 col-xs-12 weather">
	        	<div class="title"></div>
	        	<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 bj">
				<div class="title">北京時間</div>
				<div class="bjtime"></div>
			</div>
	        <div class="col-md-2 col-sm-2 col-xs-12 md">
	        	<div class="title">蘇州時間</div>
				<div class="mdtime"></div>
	        </div>
	      </div>
	    </div>
      </div>
    </div>
    
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<div class="container">
  <div class="main col-md-12">
    <div class="row products">
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/zzgz.jpeg" style="width:340px;height:340px;" class="img-responsive">
        <div class="products_title">周莊古鎮(zhèn)</div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/qlst.jpeg" style="width:340px;height:340px;" class="img-responsive">
        <div class="products_title">七里山塘</div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12"><img src="img/hqs.jpeg"  style="width:340px;height:340px;"  class="img-responsive">
        <div class="products_title">虎丘山風(fēng)景區(qū)</div>
      </div>
    </div>
    <div class="row news">
      <div class="col-md-4 col-sm-4 col-xs-12"><!--img src="img/main1.png" class="img-responsive"-->
        
        <div class="kePublic"> 
          <!--效果html開始-->
          <div class="mkeFocus">
            <div class="mkeUl">
              <ul>
                <li><b class="bg"></b><b class="text">七月份</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban1.jpg" /></a><p class="yj">原價：80450元/人</p><p class="xj">現(xiàn)價：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">八月份</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban2.jpg" /></a><p class="yj">原價：80450元/人</p><p class="xj">現(xiàn)價：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">蘇州</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban3.jpg" /></a><p class="yj">原價：80450元/人</p><p class="xj">現(xiàn)價：56900元/人</p></li>
                <li><b class="bg"></b><b class="text">浪漫</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban4.jpg" /></a><p class="yj">原價：80450元/人</p><p class="xj">現(xiàn)價：56900元/人</p></li>
              </ul>
              <div class="mkeLbtn"></div>
              <div class="mkeRbtn"></div>
            </div>
          </div>
          <!--效果html結(jié)束-->
          <div class="tejia"></div> 
        </div>
      </div>
      <div class="col-md-8 col-sm-8 col-xs-12">
      	<div class="row">
	        <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18愛情喜劇電影《蘇州遇見愛》</a></h4>
	          <div class="minute">截至昨日，參加南博會的南亞國家已經(jīng)確認(rèn)展位748個，比去年第五屆南亞國家商品展增長了30.2%。蘇州的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18愛情喜劇電影《蘇州遇見愛》</a></h4>
	          <div class="minute">截至昨日，參加南博會的南亞國家已經(jīng)確認(rèn)展位748個，比去年第五屆南亞國家商品展增長了30.2%。蘇州的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18愛情喜劇電影《蘇州遇見愛》</a></h4>
	          <div class="minute">截至昨日，參加南博會的南亞國家已經(jīng)確認(rèn)展位748個，比去年第五屆南亞國家商品展增長了30.2%。蘇州的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div>
	        </div>
	         <div class="col-md-12 index_news_list">
	          <h4><a href="#">2013.04.18愛情喜劇電影《蘇州遇見愛》</a></h4>
	          <div class="minute">截至昨日，參加南博會的南亞國家已經(jīng)確認(rèn)展位748個，比去年第五屆南亞國家商品展增長了30.2%。蘇州的展位雖然不如巴基斯坦、斯里蘭卡、印度等國，但其主要推介的海洋產(chǎn)品和旅游項(xiàng)目非常具有特色。</div>
	        </div>
		</div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper footer">
  <div class="service">
    <div class="container">
    	<div class="col-md-3 col-sm-12">
    		<div class="link_logo"></div>
    	</div>
    	<div class="col-md-6 col-sm-12">
    		<div class="link_tel"></div>
    	</div>
    	<div class="col-md-3 col-sm-12 fx">
    		<div class="bshare-custom icon-medium">
    			<div class="bsPromo bsPromo2"></div>
				<a title="分享到一鍵通" class="bshare-bsharesync" href="javascript:void(0);"></a>
				<a title="分享到QQ空間" class="bshare-qzone"></a>
				<a title="分享到新浪微博" class="bshare-sinaminiblog" href="javascript:void(0);"></a>
				<a title="分享到人人網(wǎng)" class="bshare-renren" href="javascript:void(0);"></a>
				<a title="更多平臺" class="bshare-more bshare-more-icon more-style-addthis"></a>
			</div>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
		</div>
    </div>
  </div>
  <div class="container">
    <div class="friendlink">
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wx_link.png" class="img-responsive"></a></div>
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/taobao_link.png" class="img-responsive"></a></div>
      <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wb_link.png" class="img-responsive"></a></div>
    </div>
    <div class="copyright col-md-12">
      <p>版權(quán)所有：人和假期旅游咨詢   咨詢電話：15611549285 傳真：010-66094197</p>
      <p>北京西城區(qū)復(fù)興門內(nèi)大街45號 4號樓101室 郵編：100801    京IPC備1300362號 <a href="javascript:void(0)" target="_blank"></a></p>
    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*367);
$(".mkeRbtn").click(function(){
	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
	cnum--;
	if(cnum<0){
	cnum=rnum-1;	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
});

function autoPlay(){
  	cnum++;
	if(cnum>(rnum-1)){
	cnum=0	
	}
	$(".mkeUl ul").animate({"left":-cnum*367},300);
	$(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,4000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});
</script>
<script language="javascript">
		var myDate = new Date();
		var y =	myDate.getFullYear();    //獲取完整的年份(4位,1970-????)
		var M =	myDate.getMonth();       //獲取當(dāng)前月份(0-11,0代表1月)
		var D =	myDate.getDate();        //獲取當(dāng)前日(1-31)
		var week =	myDate.getDay();         //獲取當(dāng)前星期X(0-6,0代表星期天)
		var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ",] 
		var H =	myDate.getHours();       //獲取當(dāng)前小時數(shù)(0-23)
		var Mt =	myDate.getMinutes();     //獲取當(dāng)前分鐘數(shù)(0-59)
		time ='蘇州　'+y+'年'+(M<10 ? "0"+ M : M)+'月'+(D<10 ? "0"+ D : D)+'日'+' '+'星期'+days[week];
		bjtime = (H<10 ? "0"+ H : H)+':'+(Mt<10 ? "0"+ Mt : Mt);
		mdtime = (H<10 ? "0"+ H+2 : H+2)+':'+(Mt<10 ? "0"+ Mt : Mt);
		$(".weather .title").text(time);
		$(".bjtime").text(bjtime);
		$(".mdtime").text(mdtime);
</script>
</body>
</html>

基于html的旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

文章來源地址http://www.zghlxwxcb.cn/news/detail-440729.html

到了這里，關(guān)于基于html的旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！