Web UI技术的研究与应用
发布时间：2022-07-29 22:15
随着移动互联网的发展,市面上的移动终端种类越来越多,为了让学校的网页适应各种新媒体移动终端,加强网页信息化建设,论文研究Web UI（Website User Interface）相关技术,将其应用在我校数字图书馆等网站建设上,为我校信息化建设出力。Web UI又称网页产品页面设计,核心是通过给用户提供一个高分辨率自适应的响应式页面来提升网页的用户体验。早期,采用常见的显示终端各自配置一套网页样式的方式来实现响应式网页,这种方式不仅工作量巨大,而且适配能力有限。随着互联网技术的发展,Web UI的发展趋势越发的标准化、组件化,出现了各种响应式网页设计框架和开源的矢量图标库,使用它们能敏捷地开发出自适应各种移动终端的响应式的网页。本文选择当前流行的Bootstrap框架、开源字体矢量图标库Font Awesome并结合HTML5+CSS3+Javascript等技术,研究实现网页的响应式设计方案。将研究成果应用在学校数字图书馆网页的响应式网页设计上,使其能灵敏的适应不同屏幕的大小的移动终端,从而提升用户的浏览网页的观看体验。在Web UI的研究的实践中发现,现有的开源的矢量字体图标,仅支...
【文章页数】：94 页
【学位级别】：硕士
【文章目录】：
摘要
abstract
第1 章绪论
1.1 选题背景与意义
1.2 研究现状
1.2.1 Web UI发展现状
1.2.1.1 Web1.0 时期的传统Web UI
1.2.1.2 Web 2.0 的Web UI
1.2.1.3 Web3.0 的Web UI
1.2.2 响应式Web的研究现状
1.2.3 矢量图标的研究现状
1.3 研究内容与目的
1.4 论文组织结构
第2章 响应式设计技术综述
2.1 HTML5
2.1.1 HTML5主要特点
2.2 CSS3
2.2.1 CSS3的发展
2.2.2 CSS3主要特点
2.3 响应式布局
2.3.1 基本原理
2.3.2 Bootstrap框架
2.3.2.1 Bootstrap主要特色
2.3.2.2 Bootstrap主要组件
2.4 Font Awesome矢量图标库
2.4.1 Font Awesome图标的使用
第3章 自定义矢量图标库工具技术综述
3.1 矢量图标相关技术
3.1.1 SVG矢量图标
3.1.2 SVG Sprite雪碧图
3.2 Java Script和Ajax
3.2.1 Javascript
3.2.2 Ajax
3.3 Web服务端技术
3.3.1 Node.js
3.3.2 Express框架
第4章 响应式设计在图书馆网站的应用
4.1 需求分析
4.2 响应式网页的设计与实现
4.2.1 响应式栅格布局
4.2.2 响应式图片
4.2.3 矢量字体图标
4.3 成果展示
第5章 自定义矢量图标库研究与实现
5.1 需求分析
5.1.1 功能需求
5.1.2 非功能需求
5.2 总体设计
5.3 开发部署及使用环境
5.4 设计与实现
5.4.1 图库上传模块
5.4.2 图库编辑模块
5.4.2.1 图标压缩
5.4.2.2 图库编辑
5.4.2.3 合成图标
5.4.3 图库下载模块
5.5 使用说明
第6章 总结
6.1 主要工作
6.2 创新点
6.3 不足与展望
致谢
参考文献
附录
【参考文献】：
期刊论文
[1]利用Node.js开发前后端分离的系统——以图书馆地方文献系统为例[J]. 刘红卫. 天津科技. 2018(07)
[2]基于HTML 5+CSS3+jQuery的响应式布局网页设计[J]. 叶潮流,马林山. 梧州学院学报. 2018(03)
[3]Bootstrap框架在响应式Web设计中的应用[J]. 周萍,赵娜,李慕. 软件导刊. 2017(06)
[4]基于手机微信的实验教学网站[J]. 应继明,管正华,余康远,项紫晴,张航涛. 网络安全技术与应用. 2017(06)
[5]SVG在图形图像中的应用分析[J]. 王付阳. 福建电脑. 2016(02)
[6]Web应用性能提升优化的技术框架探讨[J]. 林秀. 电信快报. 2014(04)
硕士论文
[1]基于Node.js和WebSocket的即时通信系统的设计与实现[D]. 茆玉庭.南京邮电大学 2018
[2]基于HTML5和Node.js的高校教学辅助系统研究与实现[D]. 张树栋.山东师范大学 2018
[3]在线客服系统的前端设计与实现[D]. 林紫祥.南京大学 2018
[4]基于响应式网页技术的图书馆管理系统[D]. 朱晓.上海师范大学 2018
[5]Web页面中的大规模数据折线图优化方法研究[D]. 杨婷.浙江大学 2017
[6]基于MVVM的前端框架MTCG的设计与实现[D]. 于晶晶.天津大学 2017
[7]基于Android系统的移动GIS技术应用研究与开发[D]. 张广辉.华北电力大学(北京) 2017
[8]基于HTML5技术的企业增效管控系统的研究与应用[D]. 刘艺卓.华北电力大学 2016
[9]基于网络的丝绸图案创意系统的设计与实现[D]. 郑枫.浙江大学 2016
[10]Android App快速开发平台设计与实现[D]. 于珊.西安电子科技大学 2015
本文编号：3667282
【文章页数】：94 页
【学位级别】：硕士
【文章目录】：
摘要
abstract
第1 章绪论
1.1 选题背景与意义
1.2 研究现状
1.2.1 Web UI发展现状
1.2.1.1 Web1.0 时期的传统Web UI
1.2.1.2 Web 2.0 的Web UI
1.2.1.3 Web3.0 的Web UI
1.2.2 响应式Web的研究现状
1.2.3 矢量图标的研究现状
1.3 研究内容与目的
1.4 论文组织结构
第2章 响应式设计技术综述
2.1 HTML5
2.1.1 HTML5主要特点
2.2 CSS3
2.2.1 CSS3的发展
2.2.2 CSS3主要特点
2.3 响应式布局
2.3.1 基本原理
2.3.2 Bootstrap框架
2.3.2.1 Bootstrap主要特色
2.3.2.2 Bootstrap主要组件
2.4 Font Awesome矢量图标库
2.4.1 Font Awesome图标的使用
第3章 自定义矢量图标库工具技术综述
3.1 矢量图标相关技术
3.1.1 SVG矢量图标
3.1.2 SVG Sprite雪碧图
3.2 Java Script和Ajax
3.2.1 Javascript
3.2.2 Ajax
3.3 Web服务端技术
3.3.1 Node.js
3.3.2 Express框架
第4章 响应式设计在图书馆网站的应用
4.1 需求分析
4.2 响应式网页的设计与实现
4.2.1 响应式栅格布局
4.2.2 响应式图片
4.2.3 矢量字体图标
4.3 成果展示
第5章 自定义矢量图标库研究与实现
5.1 需求分析
5.1.1 功能需求
5.1.2 非功能需求
5.2 总体设计
5.3 开发部署及使用环境
5.4 设计与实现
5.4.1 图库上传模块
5.4.2 图库编辑模块
5.4.2.1 图标压缩
5.4.2.2 图库编辑
5.4.2.3 合成图标
5.4.3 图库下载模块
5.5 使用说明
第6章 总结
6.1 主要工作
6.2 创新点
6.3 不足与展望
致谢
参考文献
附录
【参考文献】：
期刊论文
[1]利用Node.js开发前后端分离的系统——以图书馆地方文献系统为例[J]. 刘红卫. 天津科技. 2018(07)
[2]基于HTML 5+CSS3+jQuery的响应式布局网页设计[J]. 叶潮流,马林山. 梧州学院学报. 2018(03)
[3]Bootstrap框架在响应式Web设计中的应用[J]. 周萍,赵娜,李慕. 软件导刊. 2017(06)
[4]基于手机微信的实验教学网站[J]. 应继明,管正华,余康远,项紫晴,张航涛. 网络安全技术与应用. 2017(06)
[5]SVG在图形图像中的应用分析[J]. 王付阳. 福建电脑. 2016(02)
[6]Web应用性能提升优化的技术框架探讨[J]. 林秀. 电信快报. 2014(04)
硕士论文
[1]基于Node.js和WebSocket的即时通信系统的设计与实现[D]. 茆玉庭.南京邮电大学 2018
[2]基于HTML5和Node.js的高校教学辅助系统研究与实现[D]. 张树栋.山东师范大学 2018
[3]在线客服系统的前端设计与实现[D]. 林紫祥.南京大学 2018
[4]基于响应式网页技术的图书馆管理系统[D]. 朱晓.上海师范大学 2018
[5]Web页面中的大规模数据折线图优化方法研究[D]. 杨婷.浙江大学 2017
[6]基于MVVM的前端框架MTCG的设计与实现[D]. 于晶晶.天津大学 2017
[7]基于Android系统的移动GIS技术应用研究与开发[D]. 张广辉.华北电力大学(北京) 2017
[8]基于HTML5技术的企业增效管控系统的研究与应用[D]. 刘艺卓.华北电力大学 2016
[9]基于网络的丝绸图案创意系统的设计与实现[D]. 郑枫.浙江大学 2016
[10]Android App快速开发平台设计与实现[D]. 于珊.西安电子科技大学 2015
本文编号：3667282
本文链接：https://www.wllwen.com/guanlilunwen/ydhl/3667282.html
