基于HTML5的旅游特产介绍平台的设计
2018-03-21王学昌
王学昌
摘 要 近年来，随着我国人民的物质生活不断提高，我国掀起了一场旅游热，旅游人数不断增加，大部分人都选择带走一些特产，旅游特产介绍平台的设计会使越来越多的旅游者受益。简要介绍了使用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部分代码如下：
123CSS部分的代码如下：
#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
