易扬众和信息技术有限公司响应式网页制作

易扬众和信息技术有限公司响应式网页制作 计算机与信息科学学院 电子商务 2011级 董小芬指导教师 戴政国摘 要：本文总结了易扬众和信息技术有限公司响应式网页制作技术和经验，介绍了响应式网页的工作原理和项目实施过程，同时也介绍了该网页实现的响应式功能及效果。经测试，开发出的响应式网页能够兼容各大主流浏览器，能够识别不同设备的屏幕分辨率从而展现最佳的浏览效果。关键词：公司网页；响应式；HTML；CSS+DIV；JavaScript；jQuery； Abstract：This article summarizes the Yi Yang Zhong He Information Technology Co.,responsive web production technology and experience, introduces the principle of responsive web pages and project implementation process, but also introduced the web-enabled responsive function and effect. After testing, the development of responsive web pages compatible with major browser, the screen resolution can identify different devices which show the best view results.Key words：Company Website; Responsive; HTML; CSS+DIV; JavaScript; jQuery窗体顶端窗体底端1 研究背景随着互联网技术的日新月异与各种新技术的突破，响应式网站的设计与制作成为以后企业网站必然的发展方向，无论用户使用的是电脑还是手机，网页页面都能够自动切换分辨率、图片尺寸及相关布局，以适应不同的设备需求；换句话说，在未来网页应该有能力自动识别客户端设备屏幕的不同分辨率。响应式网页就是一个网页能够兼容多个终端而不是为每个终端做一个特定的版本，使用不同的设备浏览，响应式网页会自动检测设备宽度，从而呈现出适合该设备的网页效果1。这样，我们就可以省时省力不必为不断到来的新设备做专门的版本设计和开发了。2014年是响应式元年，一些大型网站如新浪、搜狐、淘宝等都已经实现了响应式，响应式网页设计与制作将会成为未来网页的必然选择。 2 需求分析越来越多的公司开始建立自己的网站，网站除了具有传播信息的功能外，还往往代表着该公司的形象；随着移动终端的兴起，响应式网页越来越迫切；同时网站建设逐渐趋向商业化和广告化，这些都对网页设计的艺术性提出了更高的要求。因此，在进行网页设计时必须满足一定的需求。第一、 移动终端逐渐发展壮大并趋向主流，客户在移动端浏览的网页必须要适合移动端的尺寸，网页需要在不同的设备上响应，因此网页需要设计成响应式网页，并尽可能优化用户体验。第二、网页设计的时候要考虑文字、图片布局的艺术性；网页需要实现前端客户系统的功能，主要功能如下。用户可以通过网页浏览公司的一些基本信息；用户可以通过网页查看公司新闻；用户可以通过网页查看公司的联系方式；用户可以在网页上随时发表自己的言论。3 系统分析 3.1 网页功能分析网页需要实现的功能：用户使用不同的设备都能得到最佳的浏览效果2。在PC端，设备尺寸相对较宽，网页显示的信息就相对比较健全。ipad浏览网页信息也比较健全，但因尺寸比PC窄，一些用于装饰网页的修饰内容会被隐藏。手机浏览网页时，因手机尺寸小一些，网页的一些功能会隐藏起来以适应手机浏览，如网页的导航条会隐藏，通过点击导航按钮来显示导航条；“我们”内页的管理团队为点击滑动的图片，在手机上也不再显示；“联系”内页的在线留言在手机上取消，只显示公司总部的联系方式，网页内容的排版在手机上会发生一定的变化。网页功能如图3-1所示。图3-1 网页功能图3.2 响应式分析响应式可以兼容不同的屏幕分辨率、清晰度以及屏幕定向方式竖屏、横屏，那么响应式是如何实现的呢？响应式的实现主要有三步。第一步，使用meta标记将视口转换成设备宽度， ；第二步，检测客户端的设备宽度；第三步，媒体查询，根据检测出来的宽度调用不同的样式。详细过程见图3-2。图3-2 响应式流程图4 开发所用语言4.1 HTML HTML为超文本标记语言的缩写，它是一种网页标识语言，用于网页编写。目前的最新版本是HTML5，其主要特点如下。一、HTML5是对以前版本的升级和简化，在文档类型上，刻意不使用版本声明，一份文档可以适应所有版本的HTML；二、HTML5引入了许多新的标记元素，根据内容类型的不同，可以分为内嵌、流、标题、交互、元数据、短语七大类；三、HTML5增加和删除了很多不必要的属性；四、在HTML5中新增了全局属性的概念，全局属性是指对任何元素都可以使用的属性3。当然，它不止只有这些特点，HTML5的功能和特点，在以后的学习中都会逐渐掌握。4.2 CSS+DIV CSS（层叠样式表）目前最新版本为CSS3，他是一种网页的装饰类，是能够真正做到网页表现与内容分离的一种样式。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。4.3 JavaScript JavaScript是一种客户端浏览器解析式脚本语言，用来给HTML网页增加动态功能4，有以下特性： 一、脚本语言：JavaScript是一种解释型的脚本语言,C、C+等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释； 二、基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象； 三、动态性：JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应； 四、跨平台性：JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持5。4.4 jQueryjQuery是一个兼容多浏览器的javascript库，核心理念是写得更少,做得更多。jQuery的语法设计可以使开发者更加便捷的完成任务，例如选择页面元素、动态更改页面样式及内容、控制响应事件、提供基本网页特效、快速实现通信以及扩展javascript内核等6。除此以外，jQuery提供API让开发者可以编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。5 响应式网页设计响应式网页设计Responsive Web Design，追求的就是根据用户设备的不同、用户设备屏幕大小的不同、用户设备朝向方式的不同，展现不同的网页效果，提高用户体验7。5.1 视口首先说明一下视口（viewport），视口就是以苹果为主导的手机厂商，为了能让用户在手机上也能看到完整的PC网页，大部分设备会欺骗浏览器返回一个较大的“视口”，视口和分辨率没有关系，iPhone、三星Note3等手机的视口都是980px。也就是说，一个width值为980px的盒子，能够在这样的手机中撑满整个页面，并且恰好不出现横向滚动条。理想中手机看网页尺寸应该与设备的宽度接近。因此，要实现响应式，首先要对视口进行约束，使视口的宽度固定为设备的宽度,就要使用下面的语句。 。其中，具体的约束内容写在content中，每个约束规则用逗号隔开。 width=device-width：命令视口的宽度为设备的宽度； initial-scale=1.0：命令视口默认的缩放等级为1； minimum-scale=1.0：命令视口最小缩放等级为1； maximum-scale=1.0：命令视口最大缩放等级为1； user-scalable=no：不许用户缩放页面8。 所有的响应式页面都要加上视口约束标记。5.2 媒体查询(media query)，实现样式更换使用media属性实现响应式，不需要写JS代码，浏览器直接根据media设置的宽度更换CSS样式。在本网页中，所有的样式都放在style.css文件中，使用时需要插入到HTML文件中去：。在style.css中，先写了网页的整体样式即PC端的样式，把PC端样式当作整体样式是为了适应本网页的设计，样式在移动端变化不是很大，布局相对变化要多一些，整体样式后面放置的是响应不同尺寸的样式，详细见附录8 。根据网页设计需求来确定响应式的样式和布局，本网页在宽度上设置了以下几个分段：max-width:1200px、max-width:1050px、max-width:705px、max-width:641px、max-width:481px ；因为一些样式在尺寸发生变化的时候任然需要保持原样，所以没有设置最小宽度min-width ，详细如下。media (max-width:1200px) 详细的样式 ；media (max-width:1050px) 详细的样式 ；media (max-width:705px) 详细的样式 ；media (max-width:640px) 详细的样式 ；media (max-width:480px) 详细的样式 。在上面的 中放置需要更换的样式，详细代码见附录8。media (max-width:1200px) 意思是当屏幕尺寸小于等于1200px时网页会加载该样式，同时先前的整体样式也会加载，media query加载多个样式表时，如果先前样式与media (max-width:1200px) 中的样式冲突时，以media (max-width:1200px) 中的样式为主，先前的样式自动失效。media (max-width:1050px) 及后面的媒体查询功能和media (max-width:1200px) 功能一样。其中media (max-width:1200px) 和media (max-width:1050px) 中的样式是为了适应不同尺寸的ipad横屏显示时的效果；media (max-width:750px) 和media (max-width:640px) 是为了适应不同尺寸的iPad竖屏显示时的效果；同时media (max-width:640px) 也用在手机横屏时的显示效果，而media (max-width:480px) 是为了适应不同尺寸的手机浏览网页时的显示效果。目前一般手机尺寸再300-400px之间，也有超大屏的在400px以上如apple iphone 6 plus就是414px，LG Optimus LTE,Optimus 4X HD屏幕宽度为424px9。为了适应尺寸进一步加大的手机，将该网页的手机响应尺寸设置在480px，即media (max-width:480px) ；也就是说当尺寸在480px以下时，所有手机浏览效果是一样的。5.3 流式布局在制作响应式时，用到最多的就是百分比宽度。流式布局，就是用百分比设置宽度的布局形式10。图5-1 流式布局示例 在图5-1中，蓝色区域为一个div,黄色区域为一个div，红色区域为一个div，具体如下。文字文字 CSS样式如下。div1 width:90%; height:200px; background:blue; margin:0 auto; div2 width:60%; height:150px; background:yellow; padding-left:10%; float:left; div3 width:20%; padding:0 5%; height:150px; background:red; float: left; 在这个例子中，子元素的width数值的参考标准是父元素，div1宽度是整个页面的90%，div2的宽度是div1宽度的70%，div3的宽度是div1宽度的30%。像上例这样，宽度width使用百分比，设备的尺寸发生变化时，div块的宽度也会随之发生变化。百分比数值，只能出现在width、padding、margin上，边框的宽度没有百分比。在易扬众和信息技术有限公司响应式网页设计与制作中，80%以上使用的是流式布局，只有一些需要固定宽度的地方使用的是具体的像素宽度。由此可见，流式布局也是响应式网页不可或缺的一部分11。6 项目实施6.1 硬件需求开发本设计过程中所需要的计算机设备及其有关的外部设备如下。机型：Lenovo-PC内存：4.0GB硬盘：500G；操作系统：Windows8.1正式版。在硬件方面，只需要一台正常运转的PC机即可。6.2 软件需求 开发此网页过程中的软件主要包括程序开发软件、图形处理软件、浏览器等。其中，浏览器主要包括目前各大主流浏览器，Internet Explorer、Safari、Opera、Chrome、Firefox，主要软件需求如表6.1所示。表6.1 软件需求表软件名称软件版本功能和用途Sublime Text3制作网页PhotoshopCS6处理图片Internet Explorer、 Safari、Opera、 Chrome、firefoxIE8.0以上测试网页6.3 Sublime TextSublime Text是一个代码编辑器，Sublime Text小巧绿色占用资源少并且速度非常快，跨平台支持Win/Linux，支持32位与64位操作系统，Sublime Text支持各种现在流行编程语言的语法高亮及代码补全等功能。同时此软件具有良好的扩展功能，它拥有完全开放的用户自定义配置功能。支持多行选择、多行编辑。该编辑器在界面上也比较有特色，它支持多种布局和代码缩略图，界面右侧的文件缩略图滑动条，可以让用户方便的观察当前窗口在文件中的位置。Sublime Text可以很好的恢复编辑状态，即当你修改了文件没有保存就退出了软件，无论是用户自己点击退出还是系统崩溃退出，再次启动软件后，都会完整的恢复之前的编辑状态，就像软件关闭前一样。对于Sublime Text，我只是初学者，还有许多功能在制作网页的过程中暂时都还没有用上，往后会一一体验。6.4 代码实施在程序开发过程中，功能的实现也有一定的顺序。首选，将静态页面开发出来，这其中主要用到的语言有HTML、CSS+DIV，开发顺序依次为index.html、about.html 、case.html 、service.html 、news.html 、job.html 、contact.html 。其次，添加网页动态效果，这其中主要用到的语言主要是JavaScript和jQuery，主要表现在“主页”页面的图片滚动区域、“我们”页面的跳跃的公司文化和管理团队区域、“联系”页面的选项卡区域等。再次，响应式设计与开发，首先实现的是整体样式，然后根据网页具体的布局进行不同宽度的样式设计。最后，检查并修改网页样式与布局，对网页进行优化，测试兼容，然后上传到服务器进行不同设备上的检测。整个过程如图6-2所示。图6-2 实施过程7 网站功能根据网页需求，本网页主要有七个功能块，分别是主页、我们、案例、服务、新闻、招聘、联络，各个块的详细内容如图7-1。图7-1 网页功能块7.1 网页详细功能 7.1.1 主页主页主要以导航为主，页面包括了内页的一些梗概，是整个网站的门户，点击相关内容可进入相应的内页。详细代码见附录1 ，“主页”的页面效果如图7-2。PC端效果 ipad效果 手机效果 图7-2 “主页”在不同设备的展示效果 毕业设计的网站是响应式网站，从上面的三张图可以看出在不同的设备上看到的效果有所不同PC端的内容要丰富很多，而手机端因受尺寸限制，一些内容就会被简化，尽量让用户看到最重要的信息，并且手机端的导航条需要点击右上角的图标才能显示出来。7.1.2 我们 此页面是对公司的一个详细介绍，主要包括企业文化、企业简介、管理团队、各地分公司四个模块，详细代码见附录2 ，“我们”的页面效果如图7-3。 PC端效果 ipad效果 手机效果图7-3 “我们”在不同设备的展示效果7.1.3 案例案例页面主要是公司的客户网站案例，本网站并未全部收录客户的网站，目前只整理了一部分。详细代码见附录3 。7.1.4 服务服务页面主要介绍公司业务以及公司主要的合作伙伴，主要业务及产品包括以下几个方面：易商中国、微信网站、电商策划运营、智能网站魔方、移动端应用定制、代理产品。详细代码见附录4 。7.1.5 新闻这个页面主要是公司的新闻活动，主要包括公司动态和媒体聚焦两部分，但因媒体聚焦部分暂时没有内容，就暂时把模块开发出来，等以后有了内容再加上。详细代码见附录5。7.1.6 招聘这个页面主要为公司的人才招聘页面，里面有公司的人才聘用方向和人数。详细代码见附录6 ，页面效果如图7-4。 PC端效果 Ipad效果 手机效果图7-4 “招聘”在不同设备的展示效果7.1.7 联系 这个页面主要为公司主要地区的联系方式以及留言的前端效果，因为毕业设计只涉及前端，不涉及后台，所以留言部分也只有一个前端的效果，无法提交给有效的接收文件，且留言也只有在PC端才能看到，ipad和手机上不显示。详细代码见附录7 。8 兼容性与网站测试兼容性测试是在程序开发的过程中就开始了，主要是检测网页能否在不同的浏览器上正常显示，浏览器的兼容性不一样，显示的效果不同，测试中需使网页在不同的浏览器中达到相同的效果。IE浏览器版本较多且IE6、IE7基本已被淘汰，所以本人的毕业设计中IE只兼容到IE8及以上，其他浏览器如Google Chrome、Safari、Opera、Firefox等主流浏览器基本可以正常浏览。这里需要提醒一下的是，IE8及以下不支持响应式media query，想使其兼容需要添加能实现兼容的库，目前实现media query IE兼容的库比较成熟的有respond.js和css3-mediaquery.js,这两个都有各自的优势和缺点，respond.js压缩后只有1k，但它只实现了对media query中最常用的min-width、max-width等的兼容；而css3-mediaquery.js压缩后有16k，但是实现了对所有css3规范中的media query特性的兼容。本网页对media query特性用到的不是特别多，所以采用respond.js来实现兼容。引入respond.min.js，但要把文件引入在css的后面，越早引入越好，这样在ie下面看到的页面出现闪屏的概率就越低，这是因为最初css会先渲染出来，如果 respond.js加载很慢很靠后，重新根据media query解析出来的css会再一次改变页面的布局效果，看起来就像闪屏的现象12。个人觉得，不考虑IE6-IE8的响应式兼容问题对用户体验影响不大，主要是因为在PC端效果都是一样的，不一样的是移动端，而移动端的浏览器基本上都是webkit核心的，webkit核心浏览器都兼容media query，所以影响不大。9 总结易扬众和信息技术有限公司是本人实习所在的公司，在公司实习期间主要负责网页设计与制作，参与美工网页设计的后期建议与修改，参与前端开发。这一段时间的实习，让我学习了许多：前端开发过程中代