基于HTML5的旅游特產(chǎn)介紹平臺(tái)的設(shè)計(jì)

王學(xué)昌

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

【關(guān)鍵詞】旅游特產(chǎn)介紹 HTML5超文本標(biāo)記語言 CSS JavaScript技術(shù)

1 引言

我們每個(gè)人心中都有一個(gè)旅游夢，當(dāng)我們懷揣這夢想來到我們夢想中的地方時(shí)，我們自然少不了會(huì)去買些特產(chǎn)。但是我們怎么知道特產(chǎn)的原產(chǎn)地是怎樣的呢？我們又怎樣才能知道我們購買的特產(chǎn)的大致價(jià)格而不被一些商家欺騙呢？

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

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

2 HTML5設(shè)計(jì)平臺(tái)界面

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

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

首頁采用網(wǎng)頁傳統(tǒng)1-3-1布局，最上部由平臺(tái)圖片和導(dǎo)航條組成；中部左側(cè)為頁內(nèi)導(dǎo)航和美景展示，中間為特色推薦和景色推薦，右側(cè)則為日常小知識(shí)和旅游小知識(shí)；最下部為版權(quán)聲明等。

1-3-1布局代碼：

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

body{

font-size：14px；

}

#header{

width：100%；

height：300px；

background：#；

padding：0px；

margin：0px；

}

確定中部分為3份，部分實(shí)現(xiàn)代碼為：

.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；

}

實(shí)現(xiàn)了首頁的1-3-1布局之后，要對首頁做一個(gè)頁內(nèi)導(dǎo)航，這樣更能方便瀏覽者對首頁的瀏覽，并且?guī)椭鸀g覽者了解首頁的所有內(nèi)容，使瀏覽者更好的瀏覽。

對中部左側(cè)的業(yè)內(nèi)導(dǎo)航部分實(shí)現(xiàn)跳轉(zhuǎn)功能，部分代碼如下：

如果不對頁內(nèi)導(dǎo)航列表進(jìn)行一些美化的話，頁內(nèi)導(dǎo)航會(huì)顯得于頁面有些不和諧。對頁內(nèi)導(dǎo)航進(jìn)行一些美化，部分代碼實(shí)現(xiàn)如下：

#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屬性使鼠標(biāo)在點(diǎn)擊導(dǎo)航前和劃過導(dǎo)航時(shí)的動(dòng)態(tài)效果

#yeneidaohang ul li a：link{

color：#；

text-decoration：none；

cursor：hand；

}

#yeneidaohang ul li a：hover{

color：orange；

text-decoration：none；

cursor：hand；

}

之后，對中部左側(cè)的美景展示進(jìn)行設(shè)計(jì)，部分代碼如下：

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

img{

width：400px；

height：300px；

border：solid #fff 2px；

text-align：center；

}

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

midmain中的景點(diǎn)推薦部分需要圖片和文字結(jié)合，這里，只舉出一個(gè)例子的代碼：

景點(diǎn)推薦

景點(diǎn)名稱

景點(diǎn)簡介

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

中部右側(cè)的日常小知識(shí)和旅游小知識(shí)模塊，用文字列表（用

、
• 標(biāo)簽）可以解決，點(diǎn)擊內(nèi)容后，鏈接到一個(gè)已經(jīng)做好的相對應(yīng)的新的頁面上。

  運(yùn)用padding/margin屬性來適當(dāng)?shù)牧舭?，?huì)讓瀏覽者獲得更好的瀏覽體驗(yàn)。

  中部左中右部分的盒內(nèi)內(nèi)容與邊框的距離：

  padding：10px 15px；

  各個(gè)部分之間設(shè)置區(qū)分開的距離：

  margin：0 3px；

  3 HTML5+CSS+JavaScript實(shí)現(xiàn)最上部圖片的自動(dòng)切換

  頂部圖片可以使瀏覽者更好的了解主要內(nèi)容，頂部的一個(gè)好的圖片會(huì)使瀏覽者的好感度上升很多，而使頂部的圖片自動(dòng)切換，則會(huì)讓瀏覽者了解到更多的內(nèi)容，也會(huì)吸引瀏覽者的目光。

  搭配使用HTML5、CSS和JavaScript，完美的實(shí)現(xiàn)圖片的自動(dòng)切換：利用JavaScript代碼使最上部的圖片實(shí)現(xiàn)自動(dòng)切換；利用HTML5和CSS定義圖片的顯示規(guī)范；在右下角處添加一些方格，鼠標(biāo)點(diǎn)擊按鈕時(shí)，顯示相對應(yīng)的的圖片，鼠標(biāo)離開后，繼續(xù)自動(dòng)播放圖片。

  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；

  }

  實(shí)現(xiàn)自動(dòng)切換的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）；

}

//鼠標(biāo)懸停時(shí)顯示指定圖片

Function imgshow（n）{

clearTimer（ ）；

var index=parseInt（n）；

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

count=index；

}

//鼠標(biāo)離開后恢復(fù)自動(dòng)播放

Function imgauto（ ）{

Timer= setInterval（autoplay，2000）；

}

4 HTML5+CSS實(shí)現(xiàn)導(dǎo)航內(nèi)容

導(dǎo)航是一個(gè)指引瀏覽者的指路者，有了導(dǎo)航，瀏覽者能夠更快的找到想要找的內(nèi)容，增加了瀏覽者的瀏覽體驗(yàn)。

部分代碼如下：

利用CSS來改善導(dǎo)航，使導(dǎo)航更加實(shí)用。

#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 結(jié)語

計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)飛速發(fā)展不僅經(jīng)濟(jì)發(fā)展，也能促使社會(huì)生活進(jìn)步。Web生產(chǎn)技術(shù)決定了互聯(lián)網(wǎng)的呈現(xiàn)效果，HTML5 和 CSS3 技術(shù)在現(xiàn)代計(jì)算機(jī)中使用廣泛。旅游特產(chǎn)介紹平臺(tái)的設(shè)計(jì)為了更好的為旅游者服務(wù)，在創(chuàng)建過程中保證每一個(gè)設(shè)計(jì)都能使瀏覽者獲得最好的瀏覽體驗(yàn)。對特產(chǎn)的介紹使旅游者能夠更好的了解自己所購的特產(chǎn)的產(chǎn)地和大致價(jià)格，并且還能獲得一些旅游攻略，從而使旅游者擁有更好的旅游體驗(yàn)。

參考文獻(xiàn)

[1]張琳.淺析HTML5+CSS3在網(wǎng)頁設(shè)計(jì)中的新特性及優(yōu)勢[J].西安文理學(xué)院學(xué)報(bào)（自然科學(xué)版），2017（11）.

[2]張玉晴，黃瑾娉.基于HTML5的跨平臺(tái)移動(dòng)應(yīng)用關(guān)鍵技術(shù)的研究與實(shí)現(xiàn)[J].工業(yè)控制計(jì)算機(jī)，2013，26（03）：56-58.

[3]趙玲，隋欣，陳寰等.基于SEO優(yōu)化的響應(yīng)式公益網(wǎng)站設(shè)計(jì)[J].電腦編程技巧與維護(hù)，2017（04）.

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

作者單位

西藏大學(xué) 西藏自治區(qū)拉薩市 850000