青岛著名建筑网站设计与实践研究

籍远明　徐文舸

摘 要：随着互联网和web技术的飞速发展，用于构建网页的主要语言HTML也在不断完善和进步，HTML5作为下一代互联网的标准，是构建和呈现互联网内容的一种语言方式，给web世界带来了一次全新的变革。本文基于HTML5技术，设计开发了一个青岛著名建筑网站系统，在实际应用中论证了HTML5可以为网站开发提供更便利、更丰富、更高效的平台。

关键词：HTML5；著名建筑；网页设计

中图分类号：TP393 文献标识码：A 文章编号：1671-2064（2018）07-0020-01

青岛是一座景色优美、风光旖旎、享誉国内外的海滨旅游城市，青岛之美，绝不局限于波澜壮阔的大海和层峦叠翠的高山，青岛的建筑也是中西合璧、各具特色的风景之一，但凡来过青岛的人们，都会为哪些极具特色的建筑而津津乐道。本文基于HTML5软件设计一个具有鲜明特色、功能实用青岛著名建筑网站，让人们行走在青岛的特色建筑之间，从另一个角度来欣赏和领略这个城市的文化韵味，感受和体会它的历史脉络。

1 网站设计

HTML5是HTML的第5个版本，也是最新版本，被认为是未来互联网核心技术之一，作为当下最为热门的WEB技术，已经在互联网行业得到了普遍应用，特别是基于HTML5的WEB应用，更是给用户带来了感知体验上的巨大飞跃，并将WEB全面带入一个崭新平台，在这个HTML5应用平台上，视频、音频、图像、动画以及同电脑的交互都被标准化，使得互联网应用的一次开发、跨平台、跨终端运行成为可能。本文利用HTML5设计和开发一个青岛著名建筑网站，该网站的总体设计思路是：以文字、图片、动画、视频等为元素，基于HTML5技术，构建成为一个前端与后台互动交流的平台。为实现网站设计思想，考虑将网站分为两大板块，主版块和辅助板块，主版块主要包括网站Logo、欢迎页面、网站首页和著名建筑导航等，辅助板块包括有用户注册登记、新闻视窗、地图导航和留言互动等内容。

2 网站功能模块

打开青岛著名建筑网站，首先映入眼帘的是网站封面，即该网站的欢迎页面，在欢迎页面中创建header标签作为页眉，页眉背景颜色设置为天蓝渐变色，左上角设置本网站的Logo图案，页眉正中是“欢迎来到美丽青岛”的欢迎词。下方中间设置一个固定宽高的div，设置overflow属性为hidden，在这个div中设置一个由彩色花边四周包围着的，镶嵌其中一幅反映青岛红瓦绿树、碧海蓝天景色建筑物的鸟瞰图片，为提高网站的封面艺术效果，将该图片制作成从左往右滚动的动画模式。

在任何一个网站的首页中，导航栏一定是必不可少的元素，一般网页的导航栏通常设计在一个页面的靠上方。本网站设计的导航栏分为首页、新闻视窗、著名建筑、地图导航、留言板五个板块，利用超链接，当点击导航栏的任一部分后，分别跳转到首页、新闻视窗、著名建筑物列表、地图导航、留言板等对应的五个页面。使用伪类选择器给导航栏添加了当鼠标放在导航栏上的样式：

header>div：hover {

background： rgba（0， 171， 235， 0.8）；

}

当鼠标停留在导航栏上时，导航栏的背景颜色会变成蓝色；当鼠标离开时，导航栏的背景会恢复到黑色，方便实现超链接功能。

在网站的第二页面中，运用了Bootstrap中的轮播图组件，设置一个div，给它加上id为“myCarousel”，类名为“carousel”和“slide”，在这个div中加上轮播的指针、轮播的内容和轮播的导航按钮，将三张体现青岛地标建筑的图片加入轮播项目当中，对于突出本网站主题，起到了画龙点睛的效果。

在著名建筑导航板块，应用了turn.js插件格式，勾勒出一个翻书效果的古典建筑页面，来展示青岛各具特色、风格迥异的著名建筑美景，给人一种赏心悦目的感受。首先引入turn.js的一系列文件，再调用Ajax请求，请求并动态生成一个书籍封面以及包括27张图文并茂的青岛著名建筑详情介绍页面，紧接着进行初始化，设定书籍页面的高度与宽度，即可实现具有翻阅书籍效果的青岛著名建筑美景详情风貌效果的画面。

响应式布局能使一个网站兼容多个不同的终端，而不是在每个终端上做一个特定的版本，响应式布局可以为各种终端的用户提供更加舒適的界面和最佳的体验，它的原理是先进行媒体查询，然后根据查询到的不同媒体引入对应的CSS样式表，实现相应式布局。一般在网站开发中，设计响应式布局运用查询浏览器窗口的宽度，来判断网页在不同类型终端中打开，设计时，一般会根据浏览器窗口宽度设置1170px 以上、970px～1170px、750px～970px、750px以下四个宽度，分别对应大屏端、中屏端、平板电脑端、手机端四种终端，再根据这四种终端的尺寸引入对应合适的CSS样式表，即可实现响应式布局。在本网站设计和开发中，加入了响应式布局功能，可以分别实现以上四种不同终端的使用和展示。

用户注册登记模块中，首先由登陆者输入用户名、密码、再次输入密码和验证码四个内容，它们的类型设为布尔值的全局变量“false”，当进行用户名、密码、再次输入密码、验证码的验证时，如果格式正确或验证码正确，将相应的布尔值变成“true”，如果不正确，将布尔值设置为“false”。只有在四个布尔值同时为“true”时，才能发送信息到服务器端。

在首页登陆时，运用ajax向服务器发送用户名与密码，根据服务器返回的值进行判断，成功后，将用户名应用HTML5本地存储，储存在浏览器中。如果用户点击“七天内免登陆”项目，则将用户名存储在localStorage中，并保存上当前的时间。当客户再次打开这个页面时，将先调出这条本地存储，查看其中存储的时间与现在的时间进行对比，如果超过七天，则删除这条数据，需要重新登录；如果未超过七天，则保留数据，显示用户名，自动登录成功。如果用户没有选择“七天内免登陆”，则将用户的用户名存储在sessionStorage中，浏览器关闭后则自动删除。

百度地图JavaScript API是一套由百度开发，用JavaScript语言编写的应用程序接口，使用百度地图API即可在本网站中实现功能强大的地图导航，方便著名建筑搜寻功能。

3 结语

HTML5作为一种专门编写WEB内容的语言，是开放的WEB网络平台的奠基石，它通过创建一种标准化、直观的UI标记语言形式来简化网页的设计和构建。本文以HTML5技术标准为基础，对青岛著名建筑网站系统进行设计和研究，应用HTML5的新标签和CSS3的各种新属性，以及JavaScript的脚本特性，结合Bootstrap进行响应式布局开发，实现了与用户的交流互动，使青岛著名建筑网站设计更加丰富多彩。

参考文献

[1]陈希.基于HTML5的旅游网站设计[J].电脑知识与技术，2016，（27）：265-266.

[2]周灵，王莉莉，宋燕燕，等.一种基于HTML5的品牌宣传网站设计[J].计算机时代，2016，（8）：19-22.

[3]汪梅，汤书昆，陈敬宇.基于HTML5的宣纸文化网站设计研究[J].包装工程，2016，（8）：143-147.

[4]李春晓.基于HTML5的数字迎新统计网站设计与实现[J].电脑知识与技术，2015，（21）：28-29+32.