摘 要

生活在全球信息化浪潮愈演愈烈的当下，我们每个人都拥抱着这个日新月异的世界，尽情享受着互联网技术高速发展所带给我们的方便与快捷，从以前的报纸到如今各式各样的移动设备，我们与外界信息产生联系的载体变得更加轻便快捷，与此同时，人们对于获取信息并与之交互的质量，也有了更高的要求。而围绕着如今我们获取信息的最主要来源——移动设备，也诞生了与之相关的诸多课题，其中一个引人入胜的问题就是，面对着尺寸大小迥异的各种移动设备，包括PC端，我们如何使相同的内容不因尺寸大小的缘故而丧失良好的浏览体验，使之都呈现出令人满意的效果？因此，很早就有人提出了“一次设计，普遍应用”的设想，也就是让基于相同代码的同一个网页在不同大小的屏幕上能够自动适应，由此在不同种类的设备上被浏览。我们称之为“自适应网页”。一个外观简洁大方，功能完备且在各种设备上能通过改变自身布局以及各种元素以达到最佳浏览效果的网站主页，可以起到良好的宣传效果，对于用户体验来说也有着积极的意义。

本文将围绕一个基于HTML5语言的自适应工业网站系统设计实例展开论述，首先明确该课题的研究目的及意义，总结国内外的发展现状，之后对该网站的几个主要模块进行确立，明确该工业网站面向用户的主要功用，再结合当前主流的几家大型网站的布局及开发思路，做到既突出该工业网站自身特色，同时紧跟当下前端开发潮流，达到所预期的自适应的目标，也具有良好的用户体验。

本次设计基于WebStorm2019平台，以HTML5、JavaScript、CSS3为主要语言，使用的市面上流行的适合中小型网站的MySQL数据库，将网站的设计内容分为主界面、导航条模块、用户注册登录系统、客服系统以及特效样式部分进行分步骤设计，在主界面模块完成网站主页面以及各个子页面的主体框架，导航条模块单独负责主页面和各个子页面之间的跳转和返回，用户注册登陆系统用来保证用户对于自己交易的记录和保存，客服系统可以有效优化用户体验，建立起更完善的网页交互系统，合适的特效样式可以提高网页的美观程度，也是从另一个角度对用户体验的完善，所有模块设计完成之后，可以通过浏览器审查元素进行网站整体效果测试。

关键词：自适应，工业网站，HTML5

Abstract

Live in the increasingly worsening global informationization tide today, each of us embrace this fast-changing world, enjoy the Internet technology high speed development brings us convenient and quick, from previous papers until now all kinds of mobile devices, we are the carrier of information into contact with the outside world has become more convenient and quick, at the same time, the quality of the people to obtain information and interact with it, also have higher requirements. And around now we get the main source of information, mobile devices, also was born of the related subjects, one of the intriguing question is faced with different size of various mobile devices, including PC, how can we make the same content because of the size and not lose a good browsing experience, make it present a satisfactory effect? For this reason, the idea of "once for all, once for all" has long been mooted, meaning that the same web page based on the same code can be automatically adapted to different sizes of screens and thus viewed on different kinds of devices. We call it the adaptive Web. A website home page with simple and generous appearance, complete functions and the best browsing effect can be achieved by changing its layout and various elements on various devices, which can play a good publicity effect and has positive significance for user experience.

This article will revolve around a system based on an adaptive industrial site design example, the first clear research purpose and significance of the topic, summarizes the domestic and foreign development present situation, after several main modules of the website establishment, clear the industry web site for the major function of the user, coupled with the current mainstream of several large web site layout and development train of thought, do both highlight the characteristics of the industry web site itself, at the same time keep up with the front end development trend, achieve the purpose of the expected adaptive, also has a good user experience.

This design is based on WebStorm2019 platform to HTML, JavaScript, CSS 3 as the main language, the use of the market popular MySQL database is suitable for small and medium-sized web site, the site design contents of the main interface, navigation module, user registration, login system, service system and special design style parts step by step in the main interface module to complete the website home page as well as the main body of each page frame, navigation module solely responsible for the main page and jump between each page and return, User registration landing system used to ensure that the user for their trading record and save, customer service system can effectively optimize the user experience, build perfect web interactive systems, an appropriate style of special effects can improve the beautiful degree of the web, from another Angle to improve the user experience, all module design is completed, can undertake site via a browser review element integral effect test.

Keywords: Adaptive, Industrial web, HTML5

目 录

第1章 绪论 1

1.1 课题的研究目的与意义 1

1.2 国内外的研究发展现状 1

1.2.1 国内的研究发展现状 1

1.2.2 国外的研究发展现状 2

第2章 系统的总体设计 4

2.1 网站功能需求分析 4

2.2 总体设计 4

2.3 数据库的设计 5

2.3.1 关系描述 6

2.3.2 数据表设计 6

2.4 本章小结 7

第3章 系统的详细设计 8

3.1 开发工具介绍 8

3.1.1 开发工具Webstorm 8

3.1.2 开发语言HTML5、CSS3、JavaScript 8

3.2 数据库介绍 9

3.3 网站架构 9

3.4 主界面模块 10

3.5 导航条模块 12

3.6 用户注册登录模块 15

3.7 客服模块 18

3.8 特效模块 19

3.9 本章小结 20

第4章 系统测试与分析 21

4.1 系统测试 21

4.2 系统测试分析 24

4.3 本章小结 24

第5章 总结与展望 25

5.1 总结 25

5.2 展望 26

参考文献 27

致谢 28

第1章 绪论

1.1课题的研究目的与意义

随着电脑和移动设备智能化的推进,电脑与手持移动设备的空间界限也开始逐渐变得模糊,如今再分别为两个移动设备端和PC端分别设置不同空间布局的两个站点的这种操作方式的效率就难免显得有点低下,为了做到真正的“一劳永逸”，自适应的移动网页制作设计技术就在这样的背景下迅速流行起来。在这一门新兴的网页开发设计技术出现之前,开发人员想要达成这样的目标一般首先要考虑和面临的就是固定宽度和流式布局的选择^[1],宽度完全可变且固定文字大小的网页开发技术在体验上可能会差一点,但是更容易开发和改进,可变宽文字大小的体验也实际上会好一些,但这并不是绝对的,即使是固定宽度和流式布局,页面上真正宽度可变的元素实际上也并不多——按钮、图片和侧栏等元素通常都是固定大小的,这样一来真正宽度可变的元素就只剩下了文字,然而对于一些将用户体验放在首位的网页,又不会直接允许其文字的宽度过于随意的发生变化,这就是为什么一些包含元素较多的的产品页面不直接采用固定宽度和流式布局的原因。事实上，完全意义上的固定宽度和流动式响应布局是无法实现的,因为如果不正确地设定最小的宽度,当窗口太小时页面内容就会自动变得完全流动不可以阅读。如果不正确地设定最大的宽度,大屏上一段文字就会拉长到几千像素也就会变得无法正常阅读。移动互联网设备的大量出现无疑是对于传统的定宽和流动响应式布局的主要冲击和挑战^[2],这个时候,本次毕业设计所要重点探讨的自适应网站布局就非常的有必要了^[3]。

1.2国内外的研究发展现状

1.2.1国内的研究发展现状

近几年，国内的移动互联网正处于蓬勃发展之中，自从2012年首次提出“互联网 ”理念以来，国内的许多互联网企业纷纷寻求将原本的业务同传统行业联系起来的方法，作为门面工程的Web前端开发首当其冲。受到2010年响应式网站问世并普及的影响，起初大多数国内的前端开发工作者都认为，响应式网站就是友好移动目标的最好、最快、最省的方案，但经过初期及上升期的探索之后，人们发现了响应式网站相较自适应布局的不足之处，其针对改善移动体验的目的并没有达到最优化，通常会选择性地将一部分内容隐藏以适应小页面，而且响应式网站无法区分移动端，既浪费了带宽，加载耗时也更长。加之各大浏览器性能的提升，比如初期曾占国内使用率高达36.29%的IE浏览器，从2013年正式发布第10代之后，其相较于IE9所增添的30多种全新的现代Web标准可以适应更加丰富的可视化效果、更复杂和响应程度更高的页面布局。在这之后，更多优秀的浏览器接连涌现，百花争艳。2014年，凭借内容领域占得先机的UC优视全面并入阿里巴巴集团，而在不久后的2016年，360又联合昆仑万维收购了此前陷入危机的Opera浏览器，这些企业集团的变革都使得国内的浏览器性能日新月异，对Web前端开发工作者也更加友好，这些因素都催生了国内自适应网页设计应用的新浪潮。2019年8月9日，华为在其开发者大会上正式发布的操作系统鸿蒙OS,也具有灵活适配全场景丰富终端形态的强大功能，这无疑是国内前端开发的新高峰。

1.2.2国外的研究发展现状

2009年3月,Marcottee首先探讨了在web布局的网格中如何引入自适应百分比的宽度以方便实现相应的流式百分比布局的必要性和基本原理^[4]。所谓的流式百分比布局,有时也称之为流体排列布局,是通过改变元素的排列方式来达到网页元素适应设备屏幕的宽度和尺寸的技术目的。流式布局，顾名思义，就是使网页中的各种元素都具有流体一般的性质，将不同尺寸的屏幕看作流体流动过程中的障碍和壁垒，网页元素为了适应这种壁垒能够改变自身的布局和结构，最终达到二者和谐统一的效果。一般来说，网页的每一个元素在容器系统默认的状态下,都是处于朝向左上方的相对流体浮动排列的状态^[5],假如删掉了排在前列的元素,排在后面的元素就会自动向左上方靠拢，进行补位,这样就保证了网页元素在排列上的相对连续性。流体浮动排列技术是流式百分比布局中目前使用最多的百分比技术之一,浮动可使不同的元素实现横向的排列。固定自适应宽度元素使用绝对宽度单位的设定,如px,自适应的宽度元素则使用相对宽度单位的设定,例如宽度百分比或者tem。在此基础上,2010年5月他又正式提出了响应式Web设计这一理念,即借助网页对媒体查询屏幕处理技术可以自动检测网页屏幕的分辨率,并且选择在网页中加载CSS3准则、同时通过结合目前主流式的布局设计方法,实现了网页对媒体查询屏幕的自适应屏幕处理^[6]。CSS3使得网页对媒体查询的屏幕处理功能进一步被完善和强化,增加了对设备的控制和条件设置。2011年,网页设计师Aarongustafson在《自适应网页设计》里率先明确提出了自适应网页设计的基本概念,和响应式的网页不同,自适应网页设计的概念是基于动态的断点布局使用静态的布局,一旦页面被浏览器加载就根本无法再对浏览器进行自动的适应,自适应网页设计会通过自动检测网页屏幕的大小和分辨率来决定是否加载适当的设备和工作条件进行布局。因此,当一个用户在电脑上打开网页浏览器之后浏览网页时,该浏览器的网站功能会通过自动检测并决定如何选择该浏览器桌面媒体查询屏幕的最佳位置进行布局^[7]。此种设计方法一经成功提出,受到了用户和业界的广泛好评和关注,在技术的开发和实践中也得到了越来越多的广泛应用,并进一步使技术得到了不断的完善与改进和发展。自2001年6月1日发布的ios6开始,苹果公司就已经正式开始全面调整使用自身相适应的产品布局,事实证明这一设计极大的推动了苹果公司以iPhone、iPad和Mac等主的IOS生态系统的构建,而在近日发布的"为iPhone和iPad搭建自适应用户界面"的声明中,苹果强调,WWDC19已宣布,自2000年4月起,提交至AppStore的App必须使用Xcode的Storyboard搭建启动页,App界面也必须能适应所有显示屏尺寸。自适应移动网页的设计也在其他国外网站和优秀企业的发展中已经扮演了重要的角色。亚马逊移动端的网页访问速度就因为采用自适应网页技术而使其比以往的响应式移动网页提高了40%。不仅如此,在2017年,亚马逊的自适应网站还为其移动用户大量提供了在其移动端和平板设备上同时使用“amazon.com”全站点的机会。与亚马逊做法类似的还有奢侈品和购物服务网站avenue3,其首席市场营销服务官Carinvancuuren表示:“采用自适应网页设计使avenue3能够突出其移动端的发现和商务功能,从而使客户能够随时随地浏览和购物。而且,智能手机和平板电脑的订单增长了40%,移动流量翻了一番,平均移动交易增长了7%。”近几年来,越来越多的亚马逊网站在amaopc端和智能手机端已经都采用了全新的自适应网页设计,在不同的移动设备上用户浏览自适应网页时已经成为可以很好的提升用户体验和感受到自适应移动网页的设计。