数字网页设计论文提纲

论文题目：Web UI技术的研究与应用

摘要：随着移动互联网的发展,市面上的移动终端种类越来越多,为了让学校的网页适应各种新媒体移动终端,加强网页信息化建设,论文研究Web UI（Website User Interface）相关技术,将其应用在我校数字图书馆等网站建设上,为我校信息化建设出力。Web UI又称网页产品页面设计,核心是通过给用户提供一个高分辨率自适应的响应式页面来提升网页的用户体验。早期,采用常见的显示终端各自配置一套网页样式的方式来实现响应式网页,这种方式不仅工作量巨大,而且适配能力有限。随着互联网技术的发展,Web UI的发展趋势越发的标准化、组件化,出现了各种响应式网页设计框架和开源的矢量图标库,使用它们能敏捷地开发出自适应各种移动终端的响应式的网页。本文选择当前流行的Bootstrap框架、开源字体矢量图标库Font Awesome并结合HTML5+CSS3+Javascript等技术,研究实现网页的响应式设计方案。将研究成果应用在学校数字图书馆网页的响应式网页设计上,使其能灵敏的适应不同屏幕的大小的移动终端,从而提升用户的浏览网页的观看体验。在Web UI的研究的实践中发现,现有的开源的矢量字体图标,仅支持单色图标且提供图标样式有限,无法满足个性化网页设计的需求。因此选择研究并实现自定义矢量图标库作为论文的创新要点,来弥补开源矢量图标库的不足。技术实现上,选择支持多色图的SVG矢量图标格式,通过研究把SVG矢量图标精简压缩且合并成SVG Sprite（SVG雪碧图）矢量图标库,在网页中使用SVG Sprite图标库,仅需一次载入,就能在HTML的任意位置重复使用,操作上十分方便简洁而且支持CSS修改图标样式。在此基础上,结合HTML5、CSS3、Javascript、Ajax和Node.js等技术实现一套便捷的自定义矢量图标库工具。主页包含以下功能:定制矢量图标库,图标编辑（增、删、改）,图标选配压缩,配套生成图标导航和使用说明。使用个性化定制的的轻量级的矢量图标库不仅满足了个性化网页设计的需求,还提高了网页的开发效率和加载速度。研究表明使用响应式网页设计技术可以开发出更生动、更具交互性和适配性的网站,能灵敏的适应各种移动终端。而自定义矢量图标库弥补了现有开源图标库的不足,拥有良好的发展前景。将以上研究成果应用在我校的网页设计上,能加快学校信息化建设的步伐。

关键词：Web UI;矢量图标;SVG;SVG Sprite;响应式Web设计

学科专业：工程硕士（专业学位）

摘要

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 不足与展望

致谢

参考文献