《毕业设计（论文）-基于bootstrap开发的响应式网上书店前端开发制作》由会员分享，可在线阅读，更多相关《毕业设计（论文）-基于bootstrap开发的响应式网上书店前端开发制作（16页珍藏版）》请在金锄头文库上搜索。
1、全日制本科生毕业论文题 目： 基于bootstrap开发的响应式网上书店前端开发制作 学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术（师范）2012级 学生姓名： 学号： 指导教师： 职称： 副教授 2016 年 5 月 6 日 基于bootstrap开发的响应式网上书店前端开发制作摘 要：本论文详细描述的是一个基于bootstrap的响应式网上书店前端网页的设计与实现过程。网站的设计与制作主要使用bootstrap、html、css+div、JavaScript、jQuery等围绕网站的响应式制作进行。前台网页一共包含五个版块，首页、CSS类书籍、JavaScript类书籍、j
2、Query类书籍、PHP类书籍等。经测试，制作出的响应式网页可以兼容各大主流浏览器，还能够识别不同设备的尺寸从而展现优质的浏览效果。关键词：bootstrap；html；css+div；JavaScript；响应式全套设计加扣 3012250582Abstract：A detailed description of this paper is based on the bootstrap responsive front-end web page design and implementation process of online bookstore. Website design and
3、production of mainly use the bootstrap, HTML, CSS + div, JavaScript, jQuery and other surrounding the site response type production. At the front desk page that includes five sections, the home page, CSS class books, books on JavaScript, jQuery, PHP, books books, etc. After the test, make a responsi
4、ve page can be compatible with each big mainstream browsers, also able to identify the size of the different equipment and high-quality viewing effect.Key words：bootstrap；html；css+div；JavaScript；responsive随着无线网络的飞速发展以及人们生活水平的普遍提高,人们对移动终端设备的需求已经逐渐超越桌面端,即越来越多用户上网的方式已经从传统桌面端逐渐转移到了移动设备，响应式布局是移动互联网蓬勃发展的技
5、术产物,在移动互联网快速发展的今天，它占据了网页前端开发领域的核心地位1。如何设计开发一款能够自适应不同尺寸的移动设备的网站,为用户提供优质的浏览服务具有重大的意义。以Web前端书籍书店的网站为例，根据用户使用设备尺寸的大小调整页面的布局，这就使得不同设备浏览页面的效果会更加流畅2。响应式布局可以提供优质的用户体验，成为互联网今后发展的主流趋势之一3。1 bootstrap1.1 简介Bootstrap，源于Twitter，是目前最受市场欢迎的前端框架之一4。它由Twitter的设计师Jacob Thornton和Mark Otto合作开发，它是基于CSS、HTML、JAVASCRIPT的，使
6、得web开发更快捷。Bootstrap提供了优雅的CSS和HTML规范，它即是由动态CSS语言less写成5。1.2 Bootstrap 的特点Bootstrap是基于CSS3、HTML5开发的，它在jQuery的基础上进行了完善，使其更为个性化和人性化，形成一套特有的网站风格，并且能兼容大部分jQuery插件。1.3 为什么选择 Bootstrap 作为前端开发框架Bootstrap是基于CSS3、HTML5开发的，内置了很多具有独特风格的样式。Bootstrap包含了很多Web组件，根据这些组件，开发人员可以快速地制作一个漂亮、功能齐全的网站。Twitter网站上许多图标在 Bootstr
7、ap中用简单的一句代码就可以使用到你的网站项目中了，更为关键的是 Bootstrap支持响应式布局，即开发的网站项目可以有效适配手机、平板、PC设备。1.4 Bootstrap 的优点（1）便利性。Bootstrap封装了多种配色方案、页面布局等样式，开发人员可以通过调用内置强大的组件，非常简便的使用成熟的页面样式。（2）兼容性。使用Bootstrap前端框架开发出的页面，不仅能在移动设备上进行用户交互，同样在PC端也可以，同样的代码既可用PC端访问也可用移动端访问，真正的做到了多兼容性。（3）简洁性。不用写过多的 CSS和HTML代码，简单的几行代码就能实现理想的界面以及交互效果； （4）响
8、应式设计。Bootstrap框架的响应式CSS能根据设备尺寸的不同，自适应于PC端和移动端。 （5）开源。Bootstrap是完全开源的，使得技术无界限，用户使用更方便随心6。所以，使用Bootstrap前端框架来设计项目，将让前端开发更简单、快速，使不同设备浏览页面的效果会更加流畅。2 设计目的学习Bootstrap前端开发框架及javascript实现动态网页交互过程，让用户在不同的浏览设备上得到优质的网页浏览体验；熟练运用制作网页的各种工具和语言，如Adobe Dreamweaver、Adobe Photoshop、HTML5、CSS+div等。在加强设计者对理论知识的理解的同时，又让设
9、计者了解到了一个网站设计开发的过程，在实际应用中提高了自己的动手能力。3 需求分析现今社会，大部分人都有过网上购物的经历，人们在购物网站可以很方便的浏览商品、查询商品等，购买时既方便又快速。并且，随着移动技术的发展，越来越多的用户会使用不同的设备来浏览网页。这就使得我们开发的网上书店既要实现浏览商品、查询商品等基本功能，又要让人们在不同的浏览设备上得到优质的网页浏览体验，即使网页可以根据浏览设备尺寸的不同而自行响应，将相同的网页内容以不同的方式展现在使用不同设备的用户面前。开发网站需要的是一般计算机硬件资源就能开发，而且用户可以通过不同的设备进行浏览。利用Dreamweaver作为开发平台，使
10、用Bootstrap作为前端开发框架。开发这个系统所需的软件也都是开源的。这个系统可以使用PC端、ipad端、iPhone6 plus端、iPhone6端等进行浏览网页上的信息，用户随时随地都能上网去浏览信息，对自己满意的商品可以进行购买。网站的页面简单明了、舒适大方、方便操作。4 系统用户用例图系统的参与者有：用户和管理员。顶层用例图是网站全部用户的用例图，如图4-1。图4-1 顶层用例图4.1 用户用例图图4-2 用户用例图4.2 管理员用例图图4-3 管理员用例图5 系统业务流图（1） 用户登录注册：当用户要进行购买商品时要进行登录，没有登录帐号则进行注册，登录后便可进行购物。（2） 购
11、物车：用户对自己满意的商品加入购物车，也可以对自己购物车的信息进行修改。（3） 订单查询：用户可以对自己买下的商品进行查询，查询是否发货等。（4） 管理员登录后台：给管理员进行后台管理的一个登录界面，也阻止了其他人进入这个界面等。（5） 书籍管理：管理员进行书籍的添加、修改、删除的操作。（6） 订单管理：管理员对订单的确认、发货等进行操作。系统业务流图如图5-1所示。图5-1 系统业务流图6 系统规划在对电子商务网站进行开发之前,首先合理的应用软件工程的方法,对网站进行整体规划及布局,否则就会导致设计开发工作量大,网站系统不符合要求等,更为糟糕的是,可能还会导致整个系统根本就无法运转。在确定向
12、用户展示什么商品后，使用Bootstrap前端开发框架及HTML5、javascript等开发语言，利用Adobe Dreamweaver、Adobe Photoshop等工具对网站进行设计开发，使网页根据浏览设备尺寸的不同而自行响应，让用户在使用不同的浏览设备时都能得到优质的浏览体验。系统实现的主要功能如下。（1）商品浏览模块：用户可查看各类产品；（2）产品信息模块：用户可以浏览产品的基本信息、价格等；（3）搜索模块：用户可以根据自己的需求，搜索自己想要购买的物品；（4）购物指南模块：包括用户可以免费注册账户、开通支付宝等；（5）购物保障模块：可为用户提供所购买的商品的发票及售后服务等；（6
13、）支付方式模块：用户可以根据自身的条件来选择支付方式。7 系统分析 整个系统功能设计如图7-1 所示:Web前端书籍书店菜单店长推荐书籍CSS类书籍javascript类书籍jQuery类书籍PHP类书籍图7-1 系统功能图7.1 网页功能分析网页需要实现的功能：用户使用不同的设备都能体验到优质的浏览效果7。网页的设计与制作应该依据设备环境及用户行为的不同而进行相应的调整和响应。无论用户正在使用PC还是移动设备，我们的页面都应该能够根据用户使用设备的不同自动切换图片尺寸及分辨率等，开发人员可以使用包括弹性网格和图片、布局、CSS media query等方法进行实践。也就是说，页面可以根据用户
14、设备环境的不同而自行响应8。7.2 响应式分析响应式设计的实现主要有三步：（1）使用meta标签让当前视图（viewport）的宽度等于设备的宽度：media (min/max-width:*px)；（2）HTML结构；（3）媒介查询Media根据条件告诉浏览器如何为指定视图宽度渲染页面9。在移动端中，以苹果公司旗下研发的智能手机系列为例，其各系列设备分辨率如下表。表7.1 苹果各系列智能手机分辨率表设备iPhone分辨率iPhone5 系列320 x 568iPhone6 系列375 x 667iPhone6 plus系列414 x 736ipad 系列768 x 1024响应式布局原理如图
15、7-2所示。7.3 网站总体设计与制作7.3.1 网站的PC端版制作在做网页之前，我确定了做网页的五个步骤。（1）明确网站主题：网站主题就是要明确制作的网站所要包含的主要内容。（2）搜集素材：在明确了制作网站的主题以后，围绕主题开始搜集需要的素材。（3）规划网站：网站规划包含网站的结构、网站的格调、栏目的设置、版面规划、色彩搭配、文字图片的应用等。（4）选择合适的制作工具：选择一款应用起来简单但性能强大的软件往往能够起到事半功倍的成效。（5）制作网页：在制作网页时，先把网页大致的框架布局好，再逐渐小的结构设计进行完善。网站的设计可以从网站标志、色彩、字体等方面着手。网站给人的第一印象是来自视觉冲击，所以，网站给人的第一印象很重要。不同的色彩搭配能够会产生不同的视觉效果，从而有可能会影响用户的情绪，从而影响网站的宣传及用户的使用量等。即在网站的整体设计中，色彩搭配要协调，给用户一种舒适的体验。在该设计中，网站的色彩以白色、藏青色、绿色和淡红色为主，给用户一种轻松、简约的感觉。在
