响应式设计技术在视频网站开发中的应用

发布时间：2018-07-07 18:28

本文选题：响应式设计 + 视频网站　；参考：《东华大学》2014年硕士论文

【摘要】：随着计算机技术的不断发展,网络用户使用小屏幕移动设备(如平板电脑、手机)上网已成为趋势,另外超大屏幕显示器也在快速的普及,从而导致上网设备的尺寸差距与日俱增。面对形形色色的终端设备和千差万别的屏幕分辨率,传统的网页设计方法显得有些力不从心,而设计师不可能为每种终端设备专门设计一套网站系统。本文尝试通过响应式设计的开发方式,构建一个使系统页面随接入设备的显示大小不同而自行响应、动态调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户的系统。通过设计这样的交互系统,可以达到利用同一套代码,使网站内容在PC、平板电脑以及智能手机浏览器上都能正常的显示的目的。本论文的工作,针对上海市松江大学城体育视频网站的需求进行设计开发。论文首先对课题的研究背景和国内外研究现状做了较为深入的分析。在此基础上,首先对课题研究中所用到的响应式设计技术、以及与之相关的技术进行了介绍。然后对项目网站进行全面的需求分析,之后利用面向对象的思想和技术进行了网站系统的概要设计、详细设计、系统实现和系统测试。系统完成的主要功能包括： 1)运用HTML5结合jQuery技术进行自定义视频播放器； 2)运用Media Query技术实现不同终端上页面的特定样式； 3)每张页面都采用弹性布局,使页面元素可以随页面显示大小变化而进行调整； 4)利用Viewport技术对网页缩放进行控制； 5)完成系统管理,如视频管理、学校管理、用户管理。通过该网站的建设和使用,规范了网站在多平台上的设计,方便用户在任意终端设备上欣赏视频,为校园体育文化的推广提供了很好的平台。该系统在今后还将进一步发挥重要作用,为广大视频门户网站提供信息支持。
[Abstract]:With the development of computer technology, it has become a trend for network users to use small screen mobile devices (such as tablets, mobile phones) to surf the Internet. This leads to a growing gap in the size of Internet access devices. In the face of all kinds of terminal equipment and different screen resolution, the traditional method of web page design seems to be somewhat inadequate, but the designer can not design a website system for each kind of terminal equipment. In this paper, we try to construct a system page that can respond to the different display size of the access device, dynamically adjust the layout structure, and adjust the element specification style through the development of response design. A system that presents the same content in different formats to users of different devices. Through the design of such an interactive system, the same code can be used to make the website content can be displayed normally on PC, tablet computer and smartphone browser. The work of this paper is to design and develop the sports video website of Shanghai Songjiang University City. First of all, the research background and current research situation at home and abroad are analyzed deeply. On this basis, the response design technology used in the research and the related technology are introduced. Then the project website is analyzed comprehensively, and then the outline design, the detailed design, the system implementation and the system test of the website system are carried out by using the object-oriented thought and technology. The main functions of the system are as follows: 1) making use of HTML5 and jQuery technology to customize video player; 2) using Media query technology to realize the specific style of pages on different terminals; 3) each page adopts flexible layout, so that the page elements can be adjusted with the page display size; 4) using Viewport technology to control the zoom of the page; 5) complete the system management, Such as video management, school management, user management. Through the construction and use of the website, the design of the website on the multi-platform is standardized, and it is convenient for users to enjoy the video on any terminal equipment, which provides a good platform for the promotion of campus sports culture. The system will further play an important role in the future, providing information support for the majority of video portals.
【学位授予单位】：东华大学
【学位级别】：硕士
【学位授予年份】：2014
【分类号】：TP393.092

【参考文献】