基于H5+C3的响应式系统的实现开题报告-毕业作品网站

设计题目

基于H5+C3的响应式系统的实现

开题日期

选题的根据:

１、理论意义

现如今随着互联网技术的不断发展，移动设备以及智能手机的广泛应用，尤其在今年新冠疫情期间，互联网在日常生活中扮演的角色越来越重要。网络用户群体不断增加，网页制作的重视程度也随之增大，网页制作技术将面临新的挑战。越来越多的人通过网络搜集信息，客户想要了解公司的情况，第一选择肯定是会首先通过网络搜索这家公司的信息。如果，这家公司连官方网站都没有或者网页“不堪入目”，大家就会认为这家公司不正规，没有实力。可见，官方网站已经是企业在互联网上的一张名片，对于一个企业已经具有某种象征性意义。

２、实际意义

针对固定布局迁移到移动终端时所带来的用户体验不足的问题，提出一种基于 HTML5+CSS3的响应式布局解决方案。首先用 HTML5 的语义化结构标记转换固定布局中带有语义化需求的 DIV标记；并在 <head>标记对中引入视口元素，使得网页能自我感知移动终端的视口尺寸和旋转取向；然后通过 CSS3 的媒体查询和弹性布局对网页布局进行响应式布局设计；并为图片和文字设置响应式代码；最后为一些需要特殊处理的响应式元素设置JS脚本，最终获取响应式布局网页。实验研究表明， HTML5+CSS3实现了网页在不同的终端之间自由切换和平滑过渡，为移动用户提供了舒适的呈现界面和良好的用户体验。

3、综述国内外有关本选题的设计动态和自己的见解

1．截止2015年，有80%的App将全部或部分基于HTML5。这意味着大部分APP的内容都将是以网页的形式呈现，典型的例子包含微信、Facebook等。（数据来源：国际科技媒体 Read Write web， 2015）

2.谷歌浏览器于9月1日起不再自动播放Flash。亚马逊宣布旗下网络的所有广告将不再使用Flash。在可预见的未来，Flash广告将被HTML5广告所替代。

3.朋友圈广告上线，据传起股20万，CPM40元。详情外链的H5页面可以用微信提供的模板，也可以自行定制。

4.响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。

5.2014年是响应式网站的元年，移动互联网用户数量已经超过了桌面用户。除了智能手机之外，使用平板电脑和手机上网的用户在持续增加。

以上信息反映了H5在内容营销的应用潜力。目前很多企业已经建立起了自己的响应式官网。这些网站的建立使得企业可以突破传统的PC媒介，在移动网络上开辟了属于自己的新天地。各大商家大企业都开始重构新的HTML5响应式网站，以求将自己的产品信息和企业动态更直接的展示给用户，并且通过丰富的交互去优化与用户沟通的过程。

研究内容

研究内容主要包括三个方面的内容，响应式Web设计的思想理论和相关技术基础，包括HTML5的特性、优势和CSS3特点等，以及响应式Web页面的设计与实现。其主要内容介绍如下：

第1章为绪论，首先介绍课题研究背景及意义，然后介绍了响应式Web开发设计的国内外研究现状

第2章为相关概念和技术的介绍，详细介绍响应式Web的相关技术基础，包括响应式Web开发设计的核心理念、新兴的HTML5技术、CSS3样式及其应用优势及响应式关键技术

第3章介绍基于响应式Web设计的内容管理系统的需求分析

第4章详细介绍基于响应式Web设计的内容管理系统

第5章为本文的总结

设计的进程安排

2020年12月08日前查阅收集文献资料，确定论题，准备开题报告

2020年12月11日前进一步研究目标、内容和方法，完成开题报告

2021年02月05日前调查与实践、收集资料，分析研究资料，撰写论文初稿

2021年03月30日前论文设计初稿完成

2021年04月30日前根据指导老师意见修改并完善论文

2021年05月08日前毕业设计论文定稿、提交

主要参考文献（列出作者、论文名称、期刊号、出版日期，参考文献应在五篇以上）

[1]王艳.探析HTML5与CSS3在网页设计中的新特性和优势[J].电脑编程技巧与维护，2016（21）：70-71.

[2]黄雪琴,耿强，陈显军.基于CSS+DIV的自适应宽度网页布局方法[J].计算机与现代化，2014(6)：53-55.

[3]刘德山.HTML5+CSS3 Web前端开发技术[M].北京:人民邮电出版社.

[4]弗雷恩,奇舞团.响应式Web:HTML5和CSS3实战[M].２版.北京:人民邮电出版社,2017:58-60.

[5]罗强,刘玉梅.浅谈响应式Web设计[J].科技风，2013（21）：93-93.

[6]唐俊开.HTML5技术与移动出版[M].北京：电子工业出版社，2013.

[7]连政.基于HTML5技术的移动Web前端设计与开发[D].浙江工业大学，2014.

[8]王庆,杨文晖.基于HTML5的移动Web技术[J].软件导刊，2013（12）：145-147.

指

导

教

师

意

见

指导教师签名：

年月日

教

研

室

意

见

负责人签名：

年　月　日