选

题

意

义

在信息飞速发展的时代，伴随着社会经济和科学技术的全面进步，以计算机与网络技术为基础的信息系统正处于蓬勃发展的阶段，现在网络的发展已呈现商业化、全民化、全球化的趋势。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径。
        随着3G、4G的发展和移动通信及WEB3.0技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。
         今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。
         响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

国

内

外

研

究

现

状

概

述

响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。所以响应式设计此时体现出了它的价值所在。
    有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。
    Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科"响应式架构(responsive architecture)"提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产"智能玻璃"：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私。
    将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
    显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。
     响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。

主

要

研

究

内

容

本次设计主要以HTML5、CSS3和JavaScript为主要开发技术，系统功能包括首页、关于我们、产品中心、新闻中心、联系我们、问题留言、招商联盟等板块
首页：网站首页是一个网站的入口网页，作用是引导互联网用户浏览网站以及其他部分的内容。
关于我们：介绍企业的文化背景，整体实力，服务宗旨，可以加深访客对企业的认知和了解用来提升和打造自己的品牌。
产品中心：展示各个种类产品的相关信息。
新闻中心：展示公司动态、行业资讯、家居常识、优惠活动等及时发布的消息。
联系我们：公司的详细地址，公司联系电话，座机号，手机号，传真机号，常用邮箱，在线QQ等。
问题留言：对网站有什么建议、投诉、需求，可以通过留言联系。
招商联盟：介绍与企业联盟的要求及联系方式。

拟采用

的研究

思路（

方法、

技术路

线、可

行性论

证等）

1. 家居网站的前景分析。

近年来，随着经济的发展，越来越多的人们对家居环境的需求越来越高，家庭生活舒适化，安全化成了现代人们的家居选择。特别是近年国内家居市场发展迅猛，且产品日新月异，逐渐渗透到了人们的生活中，改变了人们的生活习惯，也提高了生活方式。家居装饰作为装修的一部分，今后比重将会越来越大，家居装饰产业的前景依然广阔，但是产品需要整合提升，消费引导推动，渠道建立完善，家居网站的营销方式需要推陈出新。
2.结构化分析。
家居网站可以在网站的前台为消费者提供各种信息服务，在网站的后台，为员工提供简单智能的操作系统。后台提供信息，前台向消费者展示信息提供各种服务。
3.市场环境分析。
　　对于家居网站来说，人们生活水平的提高，人们对家居的要求也越来越高，在以往，只要有一个住的地方就行，现在讲究的是住的舒服，讲究的是体验。用户体验好的一定是那些用着舒服的家具产品，所以对于目前的市场来说家具网站的是由很大的发展前景的。
4.技术介绍
HTML5简介
    HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

CSS3概述

CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效、多栏布局等。
Javascript语言
    JavaScript语言是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML超级文本语言、JavaApplet（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而达到开发客户端应用程序的目的。JavaScript是通过嵌入或调入在标准HTML语言中实现，它的出现弥补了HTML语言的缺陷。
bootstrap前端框架
      Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

研究

工作

安排

及进

度

2019.09.25 - 2019.09.30 毕业论文（设计）下达任务、制定计划、动员准备
2019.10.08 - 2019.10.29 毕业论文（设计）选题
2019.10.08 - 2019.11.08 毕业论文（设计）开题阶段
2019.11.09 - 2020.01.07 完成系统开发
2020.01.08 - 2020.02.08毕业论文（设计）一稿撰写阶段
2020.02.09 - 2020.03.18 毕业论文（设计）二稿撰写阶段
2020.03.19 - 2020.03.25 毕业论文（设计）中期检查
2020.03.26 - 2020.04.08 毕业论文（设计）三稿撰写阶段
2020.04.09 - 2020.04.22 毕业论文（设计）论文查重
2020.04.23 - 2020.05.01 完成毕业论文攥写

参

考

文

献

目

录

[1]唐俊开，HTML5技术与移动出版[M].北京：电子工业出版社，2013.
[2]弗雷恩，响应式Web设计HTML5和CSS3实战[M].人民邮电出版社,2013.
[3]连政.基于HTML5技术的移动Web前端设计与开发[D].浙江工业大学,2014.
[4]王庆,杨文晖.基于HTML5的移动Web技术[J].软件导刊,2013(12):145-147.
[5]高湛.基于HTML5的资讯分享网站的设计与实现[D]. 华南理工大学,2013.
[6](英)弗雷恩(Frain,B.).响应式Web设计[M].人民邮电出版社,2012.
[7]罗强,刘玉梅.浅谈响应式Web设计[J]. 科技风,2013(21):93-93.