基于HTML5的旅游特產介紹平臺的設計

王學昌

摘 要 近年來，隨著我國人民的物質生活不斷提高，我國掀起了一場旅游熱，旅游人數不斷增加，大部分人都選擇帶走一些特產，旅游特產介紹平臺的設計會使越來越多的旅游者受益。簡要介紹了使用HTML5、CSS和JavaScript技術設計和優化平臺頁面的步驟。

【關鍵詞】旅游特產介紹 HTML5超文本標記語言 CSS JavaScript技術

1 引言

我們每個人心中都有一個旅游夢，當我們懷揣這夢想來到我們夢想中的地方時，我們自然少不了會去買些特產。但是我們怎么知道特產的原產地是怎樣的呢？我們又怎樣才能知道我們購買的特產的大致價格而不被一些商家欺騙呢？

近年來，全國各地掀起了一場旅游熱，不管是青少年，還是中年人，凡是有經濟條件的人，都想要每年至少出去旅游一次。根據一些數據看：2014年來全國游客有36.11億人次，比上年增長10.7%；2015年則有40.0億人次，比2014年增長10.5%；而到了2016年的時候，更是預計國內旅游44.4億人次，同比2015年增長11%。由此也就帶來了各地特產的大量銷售。為旅游者設計一個有關特產介紹和介紹旅游知識的平臺，使旅游者能夠擁有更好的旅游體驗。

HTML5 作為新一代萬維網的核心語言，同時還包括 CSS 與 JavaScript技術。 CSS3在圖片、布局的樣式控制上有很多優勢，在網頁視覺元素方面表現更加突出。 將 HTML5 與 CSS3 功能與優勢進行融合，將設計出界面友好、和諧的頁面。并且H1ML5 簡化了頁面設計，促使布局和樣式分離，并降低了腳本的復雜度，同時會減少對插件的依賴性。

2 HTML5設計平臺界面

首先要建立一個總文件夾，在其中建立html，javascript，css，images等子文件夾。

把不同的模塊放在不同的文件夾里，便于日后的管理，把這些子文件夾放置于一個總文件夾中，便于用鏈接，形成一個完整的平臺內容。

首頁采用網頁傳統1-3-1布局，最上部由平臺圖片和導航條組成；中部左側為頁內導航和美景展示，中間為特色推薦和景色推薦，右側則為日常小知識和旅游小知識；最下部為版權聲明等。

1-3-1布局代碼：

其次確定整體及每部分的位置以及背景色等，上下部分以上半部分為例，部分代碼為：

body{

font-size：14px；

}

#header{

width：100%；

height：300px；

background：#；

padding：0px；

margin：0px；

}

確定中部分為3份，部分實現代碼為：

.main{

width：100%

margin：0 auto；

background-color：#；

position：relative；

}

#leftmain，#rightmain{

width：20%；

position：absolute；

top：0；

}

#leftmain{

left：0；

}

#rightmain{

right：0；

}

#midmain{

background：#；

margin：0 5px；

}

實現了首頁的1-3-1布局之后，要對首頁做一個頁內導航，這樣更能方便瀏覽者對首頁的瀏覽，并且幫助瀏覽者了解首頁的所有內容，使瀏覽者更好的瀏覽。

對中部左側的業內導航部分實現跳轉功能，部分代碼如下：

如果不對頁內導航列表進行一些美化的話，頁內導航會顯得于頁面有些不和諧。對頁內導航進行一些美化，部分代碼實現如下：

#yeneidaohang{

background：#；

padding： 10px 20px；

margin：0；

}

#yeneidaohang ul li{

list-style：none；

font-size：16px；

height：30px；

background：url（../images/1.gif） no-repeat -5px -10px；

}

之后，利用link和hover屬性使鼠標在點擊導航前和劃過導航時的動態效果

#yeneidaohang ul li a：link{

color：#；

text-decoration：none；

cursor：hand；

}

#yeneidaohang ul li a：hover{

color：orange；

text-decoration：none；

cursor：hand；

}

之后，對中部左側的美景展示進行設計，部分代碼如下：

如果不對圖片設置一些屬性，那么圖片就會以它的原始大小來顯示，這樣可能會超過設置的左側大小，設置圖片屬性的部分代碼如下：

img{

width：400px；

height：300px；

border：solid #fff 2px；

text-align：center；

}

midmain中的特色推薦部分設計和左側美景展示基本相同，只是需要將圖片的大小改的較小些，依據所定義的中部main的大小以及在一行中所要放的圖片個數來確定圖片的大小，同時要對li設置一個float屬性。

midmain中的景點推薦部分需要圖片和文字結合，這里，只舉出一個例子的代碼：

景點推薦

景點名稱

景點簡介

在景點推薦中，可以通過設置color屬性來改變字體的顏色；可以通過設置text-align屬性使字體居中；可以通過設置font-family屬性改變字體的種類。

中部右側的日常小知識和旅游小知識模塊，用文字列表（用

、
• 標簽）可以解決，點擊內容后，鏈接到一個已經做好的相對應的新的頁面上。

  運用padding/margin屬性來適當的留白，會讓瀏覽者獲得更好的瀏覽體驗。

  中部左中右部分的盒內內容與邊框的距離：

  padding：10px 15px；

  各個部分之間設置區分開的距離：

  margin：0 3px；

  3 HTML5+CSS+JavaScript實現最上部圖片的自動切換

  頂部圖片可以使瀏覽者更好的了解主要內容，頂部的一個好的圖片會使瀏覽者的好感度上升很多，而使頂部的圖片自動切換，則會讓瀏覽者了解到更多的內容，也會吸引瀏覽者的目光。

  搭配使用HTML5、CSS和JavaScript，完美的實現圖片的自動切換：利用JavaScript代碼使最上部的圖片實現自動切換；利用HTML5和CSS定義圖片的顯示規范；在右下角處添加一些方格，鼠標點擊按鈕時，顯示相對應的的圖片，鼠標離開后，繼續自動播放圖片。

  HTML5部分代碼如下：

  

  123

  CSS部分的代碼如下：

  #headerimg{

  position：relative；

  }

  #btn{

  position：absolute；

  right：10px；

  bottom：10px；

  }

  #btn span{

  display：inline-block；

  width：10px；

  height：10px；

  border：solid #000；

  text-align：center；

  }

  實現自動切換的JavaScript部分代碼如下：

  var arr=new array；

arr[0]="images/4.jpg"；

arr[1]="images/5.jpg"；

arr[2]="images/6.jpg"；

var count=0；

function autoplay（）{

if（arr.lengh==count）{

count=0；

}

document.getElementById（"imgs"）.src=arr[count]；

count++；

}

var Timer=setInterval（autoplay，2000）；

Function clearTimer{

clearInterval（Timer）；

}

//鼠標懸停時顯示指定圖片

Function imgshow（n）{

clearTimer（ ）；

var index=parseInt（n）；

document.getElementById（"imgs"）.src=arr[index-1]；

count=index；

}

//鼠標離開后恢復自動播放

Function imgauto（ ）{

Timer= setInterval（autoplay，2000）；

}

4 HTML5+CSS實現導航內容

導航是一個指引瀏覽者的指路者，有了導航，瀏覽者能夠更快的找到想要找的內容，增加了瀏覽者的瀏覽體驗。

部分代碼如下：

利用CSS來改善導航，使導航更加實用。

#nav{

background：#；

text-align：center；

line-height：40px；

}

#nav ul{

list-style：none；

}

#nav ul li{

display：inline-block；

text-align：center；

font-size：16px；

width：80px；

line-height：35px；

}

#nav ul li a{

color：#000；

}

a：link{

font-size：16px；

text-decoration：none；

}

a：hover{

color：orange；

font-size：16px；

text-decoration：none；

cursor：hand；

}

5 結語

計算機網絡技術飛速發展不僅經濟發展，也能促使社會生活進步。Web生產技術決定了互聯網的呈現效果，HTML5 和 CSS3 技術在現代計算機中使用廣泛。旅游特產介紹平臺的設計為了更好的為旅游者服務，在創建過程中保證每一個設計都能使瀏覽者獲得最好的瀏覽體驗。對特產的介紹使旅游者能夠更好的了解自己所購的特產的產地和大致價格，并且還能獲得一些旅游攻略，從而使旅游者擁有更好的旅游體驗。

參考文獻

[1]張琳.淺析HTML5+CSS3在網頁設計中的新特性及優勢[J].西安文理學院學報（自然科學版），2017（11）.

[2]張玉晴，黃瑾娉.基于HTML5的跨平臺移動應用關鍵技術的研究與實現[J].工業控制計算機，2013，26（03）：56-58.

[3]趙玲，隋欣，陳寰等.基于SEO優化的響應式公益網站設計[J].電腦編程技巧與維護，2017（04）.

[4]解頤，方紅亮，曲珍等.基于HTML5腳本的旅游軟件開發[J].電腦編程技巧與維護，2017（04）.

作者單位

西藏大學 西藏自治區拉薩市 850000