流程网站前台页面显示技术,网站设计论文

流程网站前台页面显示技术,网站设计论文【题目】【第一章】【2.1-2.3】【2.4】【第三章】流程网站前台页面显示技术【第四章】【5.1】【5.25.3】【5.4-5.7】【总结/以下为参考文献】第3章流程网站前台页面显示技术3.1使用框架构建前台页面。为了能以美观、简洁、方便的界面展如今用户面前，此流程网站前台界面采用Bootstrap框架。使用该框架开发出来的页面会给人一种全新简洁的页面。来自Twitter的Bootstrap是当前最受欢迎的前端框架之一。基于、CSS、JAVASCRIPT的Bootstrap即简洁又灵敏，使得网页的开发愈加迅速。Bootstrap是Twitter的设计师JacobThornton与MarkOtto一起合作开发，它是一个前台页面样式框架。Bootstrap推出后遭到大量的追捧，在国外Bootstrap是GitHub上的热门开源项目，包括微软，美国宇航局都在使用该框架。它提供了简洁的规范和CSS规范，且由当下流行的动态CSS语言Less编写而成[26].Bootstrap是基于5和CSS3开发出来的，它以jQuery为基础，进行了更为人性化和个性化的完善设计，构成了一套具有自个特殊风格的网站，且大多数的jQuery插件都能够被兼容应用。Bootstrap的出现让前端应用开发更简单、更快速。任何程序开发人员都能够快速上手熟悉，且能够适配所有设备，能够使用于所有项目。Bootstrap中有着大量的Web小组件，只要你具有一定的编程基础，通过学习它的几个教程文档即可快速把握这些组件基本用法，能够快速开发出一个界面简洁、美观且功能齐全的网站，不会花费你多久的时间。在Bootstrap里常用的一些组件包括：模态框、媒体对象、警告对话框、导航、按钮组、手风琴控件、面包屑、缩略图、导航条、轮播控件、分页控件、排版、下拉菜单、按钮下拉菜单、进度条等。Bootstrap还包含了不少jQuery插件，像弹出框、标签页、形式对话框、滚动条等。这些jQuery插件让页面的动画效果变得愈加华美。但是在开发经过中发现使用Bootstrap对页面的代码量有所增加。造成网页代码过长，分析容易出错等不便缺点。所以使用Bootsrap开发页面一定要保持代码整洁，不然很容易造成由于疏忽而使某些功能失效。编译后的文件能够被快速应用于其他web项目，Bootstrap既提供了编译版的CSS文件和JS文件，即bootstrap.*;同时也提供了编译且压缩后的CSS文件和JS文件，即bootstrap.min.*.并且Bootstrap还提供了大量简洁美观的组件，如按钮组、按钮下拉菜单、导航的标签、pill、列表、警告对话框、进度条、模态对话框〔Modals〕等。能够讲没有Bootstrap的帮助，这个网站很难做到如此简洁美观。由于采用了一套响应式和移动设备优先的流式栅格系统，在屏幕或视口〔viewport〕尺寸增加的经过中，系统能够自动分为最多12列。这样对不同的显示设备，Bootstrap会自适应网页界面。流程网站前台页面采用Bootstrap构架不仅由于，它的美观、简洁、方便，设计时主要考虑到它技术文档资料丰富，容易查找。3.2使用Jquery快速开发前台页面脚本。流程网站前台中大量使用jQuery技术为简化Javascript代码的使用并加快网页加载速度。jQuery是轻量级的Javascript库。它是继prototype之后又一个优秀的产品，jQuery兼容CSS3,还兼容包括IE,火狐，Safari,Opera等知名阅读器，可惜jQuery2.0及后续版本将不再支持IE6/7/8阅读器。jQuery使用户能更方便地处理网页、事件实现动画效果，且能够方便地实现网站的AJAX功能。当下，jQuery的讲明文件非常完善，文档中对于各种应用解释的非常具体，并且它的一大优势就是提供很多美观的、完善的插件给用户使用[27].jQuery还能够使用户页面保持代码和网页内容的分离，换句话讲，你能够再也不用在网页代码里面编写一堆javascript来调用函数，而是只要定义页面中元素id即可。jQuery核心思想就是写得更少，做得更多，并且它是一个能够兼容多阅读器的javascript库。jQuery最早于2006年1月在纽约的barcamp发布。jQuery发布之后，来自世界各地的诸多JavaScript高手纷纷参加开发队伍中，华而不实以DaveMethvin团队为典型代表。jQuery当下已经发展成为在业界最为流行应用的javascript库，且有研究表示清楚，在互联网上排名前一万个访问量最多的网站中，应用jQuery技术的网站占大部分。jQuery另一特点是开源免费的。其独特的语法设计能够让开发人员愈加简洁和快速地进行开发工作。借助jQuery,开发人员还能够操作文档对象、选择DOM元素、制作动画效果、事件处理及使用Ajax等其它功能。与此同时，jQuery还提供API接口，开发者借此能够进行插件编写。借助jQuery模块化的功能，开发者能够轻松地制作功能强大的静态或者动态Web页面应用程序。jQuery,顾名思议，也就是JavaScript和查询，即是辅助JavaScript开发的库。当下jQuery有两个版本可供下载，华而不实已经被精简和压缩的Productionversion主要用于实际的网站运用，而未精简和压缩的Developmentversion则主要用于测试及开发。这里以jquery-1.8.0.js为例未压缩前的大小为254KB,压缩后的jquery-1.8.0.min.js大小是91KB.可见压缩后大小变化还是非常明显的，所以一般网站运行都采用压缩后的jquery版本，也能够在多个公共服务器中选择引用。通常情况下，将jQuery存储到CDN公共库上能够有效加快网站的载入速度和访问体验。CDN公共库即是将常用的JS库存放在CDN节点上，广大开发者能够方便地直接调用。相比于将JS库存放在服务器单机上，设立CDN公共库的形式愈加稳定和快速。当下，Google、Microsoft等多家国际性的公司给jQuery提供CDN服务，我们国家的新浪云计算〔SAE〕和百度云〔BAE〕等也提供相关服务。本流程网站采用的是的js文件，这样的好处在于，假如一个用户要访问网站页面，服务器会把改页面的jquery.js文件传给用户，一个jquery.min.js文件大小为92KB.假如几十个用户同时访问该页面，这样服务器要重复上传好几十个jquery.min.js文件到用户那里，这样势必造成服务器短时间内网络非常缓慢。而且公司服务器和网络资源非常有限。为解决这问题，采用把下载jquery.min.js文件的网络负担，让给提供下载jquery文件的网站。考虑到网页的兼容性，流程网站前台页面中使用了不同版本的jQuery,来实现不同网页上的一些功能特效。3.3运用AJAX技术实现前台数据的异步更新。AJAX是AsynchronousJavascriptAndXML的简称，即JavaScript和XML.AJAX是一种用于开创建立交互式网页应用的网页开发技术，能够用于开创建立快速动态网页。AJAX借助后台和服务器之间进行少量的数据交换，能够使网页实现数据的异步更新和同步交互，即能够不需要重新加载整个网页的情况下，对网页中的某些数据和信息进行更新。[6]相比于传统的网页设计，传统的网页假如需要进行更新内容，需要重新加载整个网页并刷新页面。AJAX并非缩写词，是JesseJamesGaiiett创造的名词。从原则上来讲，AJAX不能算得上是一种全新的编程语言，从其本质上来讲是多种编程技术结合的产物。AJAX是一种能够用于开创建立更快、更好、交互性更强的Web应用程序的的编程技术。AJAX通过在客户端的阅读器进而网站服务器之间进行异步数据传输请求，使得前台网页能够从后台服务器请求更新少量的信息，而不用更新整个页面信息。首先前台使用Javascript向服务器提出请求，并处理用户操作数据，不影响用户体验。借助核心对象XMLHTTPRequest,前台的JavaScript能够在不重新加载整个网页的同时完成和后台服务器的数据交换。通过这一经过，可使复杂的网络应用程序变成一个个简单，方便的小程序来处理[28].AJAX是一种独立于Web服务器的Web应用程序开发技术，其基于Web标准主要包括JavaScript、XML、、CSS等，当下主流的阅读器也全部支持相关标准。AJAX具有应用程序独立于阅读器和平台的特点。能够讲假如没有AJAX这项技术，就没有今天那么多华美使用的动态网页。在网站前台页面中大部分使用的是Jquery的jQuery.post函数来实现AJAX技术的。下面对该方式方法的参数及使用做些简单介绍：例：jQuery.post〔url,data,success〔data,textStatus,jqXHR〕，datatype〕url:必需项，指定将请求发送到详细URL,这里我们要根据ZendFramework规则。Data:可选项，用于进行规定连同请求一起发送到服务器的数据、映射或字符串值。Success〔data,textStatus,jqXHR〕：可选项，用于在请求成功之后需要执行的回调函数。dataType:可选项，设定预期服务器所响应的数据类型，默认情况下执行智能判定〔xml、json、script或〕，系统中大量采用json数据类型。在流程网站中应用范围包括：动态模糊查询底层