基于Bootstrap技术企业网站设计与实现.docVIP

基于Bootstrap技术企业网站设计与实现 　　摘 要： 目前企业官网对个性化需求和响应式布局的要求越来越紧迫。通过阐述企业网站的需求和功能，分析系统的前端设计、UI设计和系统结构布局等，基于Bootstrap技术采用“PHP+MySQL”?_发模式实现了响应式企业网站，极大地提高了网站的开发效率，并使网站适应不同移动设备的浏览。 　　关键词： Bootstrap； 响应式布局； Web开发； 移动设备 　　中图分类号：TP39 文献标志码：A 文章编号：1006-8228（2017）08-17-03 　　Abstract： At present， the demands for the individual requirements and the responsive layout of enterprises official website are becoming more and more urgent. By describing the requirements and functions of the whole enterprises official website， the front-end design， UI design and system layout of the system are analyzed， and with Bootstrap framework， PHP + MySQL development model is used to achieve a responsive enterprise website， which greatly improves the efficiency of the development of the website， and makes the website adapt different mobile devices. 　　Key words： Bootstrap； responsive layout； Web development； mobile device 　　0引言 　　在信息技术高速发展的这个时代，网络作为最为方便快捷的媒介越来越被人们所接受，网络已融入我们的生活。自2015年HTML5在国内兴起，新技术不断推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比以前的HTML更容易维护和管理，而且还能实现跨平台开发，减少开发成本。 　　近年来，移动互联网技术的飞速发展，移动端的上网率高于传统PC，而在移动端上，传统网站又难以做到兼容所有的设备尺寸，越来越多的商家传统门户官网已经不能满足用户的体验，各大商家、大企业都开始重构新的HTML5+Bootstrap响应式网站，以求将自己的产品信息和企业动态，更直接展示给用户，并通过丰富的交互去优化与用户沟通的过程。网页内容更加多姿多彩，板块、内容更加丰富，而且能够适应不同屏幕尺寸，在这个移动设备逐步普及的时代，能更快更好地将第一手信息送到用户手上[1-2]，不仅方便了企业的宣传和销售工作，同样也普及了人们的需要。因此，立足于设计一个兼顾不同尺寸的移动设备，同时兼顾网站开发的资金、技术、时间以及人力成本的响应式官网，以体现各大企业官网转型做响应式也是势在必得的过程。 　　1 需求分析 　　1.1 用例图 　　用例图用来描述系统与参与者之间的相互作用，也可以说它是从用户角度出发来描述如何使用系统。首先要理清下面几个概念。 　　角色：角色代表某一事件发生的参与者，用一个小人表示。在通常的网络项目中，角色常被用来代表使用网站的用户，但角色的作用并不局限于此，它也可以用来代表与系统交互的其他实体。 　　用例：用例代表系统可以实现的功能，通常一个用例代表一组功能，它实质上规定了系统实现功能的范围。在实际项目开发过程中，一个项目中往往涉及很多个用例，此时需要将其分解成若干个子系统实现，以便于理解。在UML中，用例用一个椭圆表示。本网站管理系统如图1所示。 　　1.2 网站功能 　　本网站是企业类型网站，具有如下几个功能。 　　⑴ 建立企业形象，诠释企业发展、结构以及一些企业的产品。 　　⑵ 本网站上的图片，文字等信息可以随意的更改，可以根据企业的战略发展进行合适的调整。 　　⑶ 本网站的采用良好的标签技术，通过标签的使用可以减少网站的大小和占用的资源。 　　⑷ 网站建设是按照网站属性进行网页设计的，设计风格按照用户浏览习惯。 　　具体网站前端构建方案如表1所示。 　　2 系统前端设计 　　2.1 前端总体开发流程与设计 　　Web前端开发主要包括三个基本技能要素：HTML5、CSS3和JavaScript，前端工程师不仅要掌