程序设计・Ｐｒｏｇｒａｍ Ｄｅｓｉｇｎ 基于ＨＴＭＬ５的旅游特产介绍平台的设计 文／王学昌 权声明等。 ＜１ ＜ａ ｈｒｅｆ－＝”样”＞景点推荐＜／ａ＞＜／ｌｉ＞ ＜１ｉ＞＜ａ ｈｒｅｆ＝” ”＞登录＜／ａ＞＜／ｌｉ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝’’＃”＞日常小知识＜／ａ＞＜／ｌｉ＞ 近年来，随着我国人民的物 质生活不断提高，我国掀起了一 场旅游热，旅游人数不断增加， 大部分人都选择带走一些特产， 旅游特产介绍平台的设计会使越 来越多的旅游者受益 简要介绍 了使用ＨＴＭＬ５、ＣＳＳ和ＪａｖａＳｃｒｉ口ｔ １．３．１布局代码： ＜ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝”ｈｅａｄｅｒ”＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝”ｍａｉｎ”＞＜／ｄｉｖ＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｌｅｆｌｍａｉｎ”＞＜／ｄｉｖ＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｍｉｄｍａｉｎ”＞＜／ｄｉｖ＞ ＜ｄｉｖ ｃｌａｓｓ＝”ｒｉｇｈｔｍａｉｎ”＞＜／ｄｉｖ＞ ＜ｌ ＜ａ ｈｒｅｆ＝”拌”＞旅游小知识＜／ａ＞＜／ｌｉ＞ ＜／ｕｌ＞ ＜／ｄｉｖ＞ 如果不对页内导航列表进行一些美化的 话，页内导航会显得于页面有些不和谐。对页 技术设计和优化平台页面的步骤。 ＜ｄｉｖ ｉｄ＝”ｆｏｏｔｅｒ”＞＜／ｄｉｖ＞ ＜／ｄｉｖ＞ 其次确定整体及每部分的位置以及背景 【关键词】旅游特产介绍ＨＴＭＬ５超文本标记 色等，上下部分以上半部分为例，部分代码为： 语言ＣＳＳ ＪａｖａＳｃｒ ｉｐｔ技术 ｂｏｄｙ｛ ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ； ） ＃ｈｅａｄｅｒ｛ １引言 ｗｉｄｔｈ：１００％； ｈｅｉｇｈｔ：３０Ｏｐｘ； 我们每个人心中都有一个旅游梦，当我 ｂａｃｋｇｒｏｕｎｄ：撑： 们怀揣这梦想来到我们梦想中的地方时，我们 ｐａｄｄｉｎｇ：０ｐｘ； 自然少不了会去买些特产。但是我们怎么知道 ｍａｒｇｉｎ：０ｐｘ； 特产的原产地是怎样的呢？我们又怎样才能知 ｝ 道我们购买的特产的大致价格而不被一些商家 确定中部分为３份，部分实现代码为： 欺骗昵？ ．ｍａｉｎ｛ 近年来，全国各地掀起了一场旅游热， ｗｉｄｔｈ：１０Ｏ％ 不管是青少年，还是中年人，凡是有经济条件 ｍａｒｇｉｎ：０ ａｕｔｏ； 的人，都想要每年至少出去旅游一次。根据一 ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：存： 些数据看：２０１４年来全国游客有３６．１ｌ亿人次， ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ： 比上年增长１０．７％；２０１５年则有４０．０亿人次， ） 比２０１４年增长１０．５％；而到了２０１６年的时候， ＃１ｅｆｔｍａｉｎ，＃ｒｉｇｈｔｍａｉｎ｛ 更是预计国内旅游４４．４亿人次，同比２０１５年 ｗｉｄｔｈ：２０％： 增长１ｌ％。由此也就带来了各地特产的大量销 ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ 售。为旅游者设计一个有关特产介绍和介绍旅 ｔｏｐ：Ｏ： 游知识的平台，使旅游者能够拥有更好的旅游 ｝ 体验。 ＃ｌｅｆｔｍａｉｎ｛ ＨＴＭＬ５作为新一代万维网的核心语言， ｌｅｆｔ：０； 同时还包括ＣＳＳ与ＪａｖａＳｃｎｐｔ技术。ＣＳＳ３在 ） 图片、布局的样式控制上有很多优势，在网页 ｔｍａｉｎ｛ 视觉元素方面表现更加突出。将ＨＴＭＬ５与 ｒｉｇｈｔ：Ｏ： ＣＳＳ３功能与优势进行融合，将设计出界面友 ｝ 好、和谐的页面。并且ＨＩＭＬ５简化了页面设 ＃ｒｎｉｄｍａｉｎ｛ 计，促使布局和样式分离，并降低了脚本的复 ｂａｃｋｇｒｏｕｎｄ：≠｝： 杂度，同时会减少对插件的依赖性。 ｍａｒｇｉｎ：０ ５ｐｘ； ２ ＨＴＭＬ５设计平台界面 ｝ 实现了首页的１．３．１布局之后，要对首页 首先要建立一个总文件夹，在其中建立 做一个页内导航，这样更能方便浏览者对首页 ｈｔｍｌ，ｊａｖａｓｃｒｉｐｔ，ＣＳＳ，ｉｍａｇｅｓ等子文件夹。 的浏览，并且帮助浏览者了解首页的所有内容， 把不同的模块放在不同的文件夹里，便 使浏览者更好的浏览。 于日后的管理，把这些子文件夹放置于一个总 对中部左侧的业内导航部分实现跳转功 文件夹中，便于用＜ｌｉｎｋ＞链接，形成一个完 能，部分代码如下： 整的平台内容。 ＜ｄｉｖ ｉｄ＝”ｙｅｎｅｉｄａｏｈａｎｇ”ａｌｉｇｎ＝＇’ｌｅｆｔ”＞ 首页采用网页传统１—３－１布局，最上部由 ＜ｈ２ ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞页内导航＜／ｈ２＞ 平台图片和导航条组成；中部左侧为页内导航 ＜ｕｌ ａｌｉｎｇ＝”ｌｅｆｔ”＞ 和美景展示，中间为特色推荐和景色推荐，右 ＜ｌｉ＞＜ａ ｈｒｅｆ＝” ”＞风景欣赏＜／ａ＞＜／ｌｉ＞ 侧则为日常小知识和旅游小知识：最下部为版 ＜ｌｉ＞＜ａ ｈｒｅｆ＝” ”＞特色推荐＜／ａ＞＜／ｌｉ＞ ・基金项目：西藏自治区大学生创新创业项目研究成果，项目编号：２０１ ７ＱＣＸ０８４。 ２３８・电子技术与软件工程Ｅｌｅｃｔｒｏｎｉｃ Ｔｅｃｈｎｏｌｏｇｙ＆Ｓｏｆｔｗａｒｅ Ｅｎｇｉｎｅｅｒｉｎｇ 内导航进行一些美化，部分代码实现如下： ＃ｙｅｎｅｉｄａｏｈａｎｇ｛ ｂａｃｋ￣，ｒｏｕｎｄ：＃； ｐａｄｄｉｎｇ：１ ０ｐｘ ２０ｐｘ； ｍａｒｇｉｎ：Ｏ； ） ＃ｙｅｎｅｉｄａｏｈａｎｇ ｕｌ ｌｉ｛ ｌｉｓｔ—ｓｔ５ ｌｅ：ｎｏｎｅ； ｆｏｎｔ—ｓｉｚｅ：１６ｐｘ； ｈｅｉｇｈｔ：３Ｏｐｘ； ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（．．／ｉｍａｇｅｓ／１．ｇｉｆ）ｎｏ—ｒｅｐｅａｔ －－５ｐｘ一１０ｐｘ； ） 之后，利用ｌｉｎｋ和ｈｏｖｅｒ属性使鼠标在点 击导航前和划过导航时的动态效果 ＃ｙｅｎｅｉｄａｏｈａｎｇ ｕｌ ｌｉ ａ：ｌｉｎｋ｛ ｃｏｌｏｒ：＃； ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ； ｃｕｒｓｏｒ：ｈａｎｄ； ） 抖ｙｅｎｅｉｄａｏｈａｎｇ ｕｌ ｌｉ ａ：ｈｏｖｅｒ｛ ｃｏｌｏｒ：ｏｒａｎｇｅ； ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ； ｃｕｒｓｏｒ：ｈａｎｄ； ｝ 之后，对中部左侧的美景展示进行设计， 部分代码如下： ＜ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝”ｖｉｅｗｈｅａｄｅｒ”＞风景欣赏＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝’’ｖｉｅｗ’’＞ ＜ｕ１＞ ＜ｌｉ＞＜ｉｍｇ ｓｒｃ＝”ｉｍａｇｅｓ／１．ｊｐｇ”＞＜／ｌｉ＞ ＜ｌｉ＞＜ｉｍｇ ｓｒｃ＝”ｉｍａｇｅｓ／２．ｊｐｇ”＞＜／１ ＜ｌｉ＞＜ｉｍｇ ｓｒｃ＝”ｉｍａｇｅｓ／３．ｊｐｇ”＞＜／ｌ ＜／ｕｌ＞ ＜／ｄｉｖ＞ ＜／ｄｉｖ＞ 如果不对图片设置一些属性，那么图片 就会以它的原始大小来显示，这样可能会超过 设置的左侧大小，设置图片属性的部分代码如 下： ｉｍｇ｛ ｗｉｄｔｈ：４０Ｏｐｘ； ｈｅｉｇｈｔ：３００ｐｘ； ｂｏｒｄｅｒ：ｓｏｌｉｄ＃ｆｆｆ２ｐｘ； ｔｅｘｔ—ａｌｉｎｇ：ｃｅｎｔｅｒ； ） Ｐｒｏｇｒａｍ Ｄｅｓｉｇｎ・程序设计 ｍｉｄｍａｉｎ中的特色推荐部分设计和左侧美 景展示基本相同，只是需要将图片的大小改的 较小些，依据所定义的中部ｍａｉｎ的大小以及 在一行中所要放的图片个数来确定图片的大 小，同时要对ｌｉ设置一个ｆｌｏａｔ属性。 ｍｉｄｍａｉｎ中的景点推荐部分需要图片和文 ＃ｈｅａｄｅｒｉｍｇ｛ ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ； ｌｉ＞ ＜／ｕｌ＞ ｝ ｂ协ｆ ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ； ｒｉｇｈｔ：１０ｐｘ； ＜／ｄｉｖ＞ 利用ＣＳＳ来改善导航，使导航更加实用。 ＃ｎａｖ｛ ｂａｃｋｇｒｏｕｎｄ：＃； 字结合，这里，只举出一个例子的代码： ＜ｄｉｖ＞ ＜ｄｉｖ＞＜ｈ２＞景点推荐＜／ｈ２＞＜／ｄｉｖ＞ ＜ｄｉｖ＞ ＜ｉｍｇ ｓｒｃ＝”ｉｍａｇｅｓ／４．ｊｐｇ”＞ ＜／ｄｉｖ＞ ＜ｄｉｖ＞ ＜ｈ３＞景点名称＜／ｈ３＞ ＜ｓｐａｎ＞景点简介＜／ｓｐａｎ＞ ＜／ｄｉｖ＞ ＜／ｄｉｖ＞ 在景点推荐中，可以通过设置ｃｏｌｏｒ属性 来改变字体的颜色：可以通过设置ｔｅｘｔ ａｌｉｇｎ 属性使字体居中；可以通过设置ｆｏｎｔ．ｆａｍｉｌｙ属 性改变字体的种类。 中部右侧的日常小知识和旅游小知识模 块，用文字列表（用＜ｕｌ＞、＜ｌｉ＞标签）可以解 决，点击内容后，链接到一个已经做好的相对 应的新的页面上。 运用ｐａｄｄｉｎｇ／ｍａｒｇｉｎ属性来适当的留白， 会让浏览者获得更好的浏览体验。 中部左中右部分的盒内内容与边框的距 离： ｐａｄｄｉｎｇ：１０ｐｘ １５ｐｘ； 各个部分之间设置区分开的距离： ｍａｒｇｉｎ：０ ３ｐｘ； ３ ＨＴＭＬ５＋ＣＳ￥＋ＪａｖａＳｃｒ ｉ ｐｔ实现最上部图 片的自动切换 顶部图片可以使浏览者更好的了解主要 内容，顶部的一个好的图片会使浏览者的好感 度上升很多，而使顶部的图片自动切换，则会 让浏览者了解到更多的内容，也会吸引浏览者 的目光。 搭配使用ＨＴＭＬ５、ＣＳＳ和ＪａｖａＳｃｒｉｐｔ， 完美的实现图片的自动切换：利用ＪａｖａＳｃｒｉｐｔ 代码使最上部的图片实现自动切换；利用 ＨＴＭＬ５和ＣＳＳ定义图片的显示规范；在右下 角处添加一些方格，鼠标点击按钮时，显示相 对应的的图片，鼠标离开后，继续自动播放图 片。 ＨＴＭＬ５部分代码如下： ＜ｄｉｖ ｉｄ＝”ｈｅａｄｅｒｉｍｇ’’＞ ＜ｄｉｖ＞ ＜ｉｍｇ ｓｒｃ＝ ｉｍａｇｅ￣ｌ ｄｐｇ ｉｄ－－ ｉｍｇｓ ） ＜／ｄｉｖ＞ ＜ｄｉｖｉｄ－－”ｂｔｎ”＞ ＜ＳＰａｎ ｏｎｍＯＨ ｓｅｏｖｅｒ＝“ｉｍｇｓｈＯＷ （１）”ｏｎｍｏｕｓｅｏｕｔ－＝“ｉｍｇａｎｔｏ（１”＞１＜／ｓｐａｎ＞ ＜ｓｐａｎ ｏｎｍｏｕｓｅｏＶｅｒ＝“ｉｍｇ ＳｈＯＷ （２）”ｏｎｌｎｏｕｓｅｏｕｔ＝“ｉｍｇａｕｔｏ（１”＞２＜／ｓｐａｎ＞ ＜ｓｐａｎ ｏｎｍｏｕｓｅｏｖｅｒ＝“ｉｍｇ Ｓｈ０Ｗ （３）”ｏｎｍｏｕｓｅｏｕｔ＝“ｉｍｇａｕｔｏ（）”＞３＜／ｓｐａｎ＞ ＜，ｄｉｖ＞ ＜／ｄｉｖ＞ ＣＳＳ部分的代码如下： ｂｏｔｔｏｍ：１０ｐｘ； ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ； ） ｌｉｎｅ—ｈｅｉｇｈｔ：４０ｐｘ： ＃ｂｍ ｓｐａｎ｛ ｝ ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ－ｂｌｏｃｋ； ＃ｎａｖｕｌ｛ ｗｉｄｔｈ：１０ｐｘ； ｌｉｓｔ－ｓｔｙｌｅ：ｎｏｎｅ； ｈｅｉｇｈｔ：ｌＯｐｘ； ｝ ｂｏｒｄｅｒ：ｓｏｌｉｄ＃０００； ＃ｎａｖｕｌｌｉ｛ ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ； ｄｉｓｐｌａｙ：ｉｎ１ｉｎｅ—ｂ１ｏｃｋ； ｝ ｔｅｘｔ—ａｌｉｎｇ：ｃｅｎｔｅｒ； 实现自动切换的ＪａｖａＳｃｒｉｐｔ部分代码如下： ｆｏｎｔ—ｓｉｚｅ：１６ｐｘ； Ｖａｒ ａ ｎｅｗ ａｒｒａｙ； ｗｉｄｔｈ：８Ｏｐｘ； ａｒｔ［０］＝”ｉｍａｇｅｓ／４．ｊｐｇ ｌｉｎｅ—ｈｅｉ ｔ：３５ｐｘ； ａｒｔ［１］ ”ｉｍａｇｅｓ／５．ｊｐｇ”； ） ａｒｒ［２］ ”ｉｍａｇｅｓ／６．ｊｐｇ”； ＃ｎａｙｕｌｌｉ ａ｛ Ｖａｒ ｃｏｕｎｔ＝Ｏ； ｃｏｌｏｒ：＃０００； ｆｕｎｃｔｉｏｎ ａｕｔｏｐｌａｙ０｛ ｝ ｉｆ（ａｒｒ．１ｅｎｇｈ＝ｃｏｕｎｔ）｛ ａ：ｌｉｎｋ｛ ｃｏｕｎｔ＝Ｏ； ｆｏｎｔ—ｓｉｚｅ：１ ６ｐｘ； ｊ ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ； ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（”ｉｍｇｓ”） ｝ ｓｒｃ＝ａｒｒ［ｃｏｕｎｔ］； ａ：ｈｏｖｅｒ｛ ＣＯＵｎｔ＋＋： ｃｏｌｏｒ：ｏｒａｎｇｅ； ｝ ｆｏｎｔ－ｓｉｚｅ：１ ６ｐｘ； ｖａｒ Ｔｉｍｅｒ＝ｓｅｔｌｎｔｅｒｖａｌ（ａｕｔｏｐｌａｙ，２０００）； ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ； Ｆｕｎｃｔｉｏｎ ｃｌｅａｒＴｉｍｅｒ｛ ｃｕｒｓｏｒ：ｈａｎｄ； ｃｌｅａｒｌｎｔｅｒｖａｌ（Ｔｉｍｅｒ）； ） ｝ ，／鼠标悬停时显示指定图片 ５结语 Ｆｕｎｃｔｉｏｎ ｉｍｇｓｈｏｗ（ｎ）｛ 计算机网络技术飞速发展不仅经济发展， ｃｌｅａｒＴｉｍｅｒ（）； 也能促使社会生活进步。Ｗｅｂ生产技术决定了 ｖａｒ ｉｎｄｅｘ＝ｐａｒｓｅｌｎｔ（ｎ）； 互联网的呈现效果，ＨＴＭＬ５和ＣＳＳ３技术在 ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（”ｉｍｇｓ”） 现代计算机中使用广泛。旅游特产介绍平台的 ｓｒｃ＝ａｒｔ［ｉｎｄｅｘ—ｌ】； 设计为了更好的为旅游者服务，在创建过程中 ｃｏｕｎｔ＝ｉｎｄｅｘ； 保证每一个设计都能使浏览者获得最好的浏览 ｝ 体验。对特产的介绍使旅游者能够更好的了解 ／／鼠标离开后恢复自动播放 自己所购的特产的产地和大致价格，并且还能 Ｆｕｎｃｔｉｏｎ ｉｍｇａｕｔｏ（）｛ 获得一些旅游攻略，从而使旅游者拥有更好的 Ｔｉｍｅｒ＝ｓｅｔＩｎｔｅｒｖａｌ（ａｕｔｏｐｌａｙ，２０００）； 旅游体验。 ｝ ４ ＨＴＭＬ５＋ＣＳＳ实现导航内容 参考文献 （ｉ】张琳．浅析ＨＴＭＬ５＋ＣＳＳ３在网页设计中的 导航是一个指引浏览者的指路者，有了 新特性及优势［Ｊ】．西安文理学院学报（自 导航，浏览者能够更快的找到想要找的内容， 然科学版），２Ｏ１７（１１）． 增加了浏览者的浏览体验。 ［２］张玉晴，黄瑾娉．基于ＨＴＭＬ５的跨平台移 部分代码如下： 动应用关键技术的研究与实现…．工业 ＜ｄｉｖｉｄ－－”ｎａｙ’ ＞ 控制计算机，２０１ ３，２６（０３）：５６－５８． ＜ｕＩ＞ ［３】赵玲，隋欣，陈寰等．基于ＳＥＯ优化的响 ＜１ ＜ａ ｈｒｅｆ＝－”１．ｈｔｍｌ”＞首页＜／ａ＞＜／ 应式公益网站设计…．电脑编程技巧与 ｌｉ＞ 维护，２０１ ７（０４）． ＜ｌｉ＞＜ａ ｈｒｅｆ＝’’２．ｈｔｍｌ”＞全部内容＜／ａ＞＜／ ［４］解颐，方红亮，曲珍等．基于ＨＴＭＬ５脚本 ｌｉ＞ 的旅游软件开发…．电脑编程技巧与维 ＜ｌｉ×ａ ｈｒｅｆ＝”３．ｈｔｍｌ”＞了解风土＜，ａ×， 护．２０ｌ７（０４）． ｌｉ＞ ＜ｌ ＜ａ ｈｒｅ ”４．ｈｔｍｌ”＞食品文化＜，ａ×， 作者单位 ｌｉ＞ 西藏大学西藏自治区拉萨市８５００００ ＜ｌｉ＞＜ａ ｈｒｅｆ－＝”５．ｈｔｍｌ”＞历史传说＜／ａ＞＜／ Ｅｌｅｃｔｒｏｎｉｃ Ｔｅｃｈｎｏｌｏｇｙ＆Ｓｏｆｔｗａｒｅ Ｅｎｇｉｎｅｅｒｉｎｇ电子技术与软件工程・２３９