响应式网络课程设计

1、1研究背景响应式网页设计，是目前网页前端设计领域最前沿的 话题那么，什么是响应式网页设计，为什么把网页设计成响应式， 我们的网络课程制作为什么要遵循这一设计思路是本文阐述的重 点伴随着互联网高速发展， 各种类型的网络技术及应用服务纷纷涌 现从静态网站到动态网站，从 10到 20，日新月异的网络技术 和服务时刻在刷新我们的眼球 近些年，智能手机及平板电脑等移动 设备快速崛起，基于移动终端的互联网访问已经走入了我们的日常生 活，现在移动终端的网络访问量已超过基于普通电脑的访问量 因此 要求网络课程不仅要在普通电脑的大尺寸屏幕上可以为学习者提供 友好的用户界面和学习体验， 同时在各种不同分辨率的小尺

2、寸移动终 端上也应提供相对一致的学习体验 2 基本技术方案显然，面对这一 问题，原有的网络课程设计模式已经远远不能适应这一要求，那么， 如何让网络课程也能实现响应式设计， 并可以根据不同的终端设备给 出不同的输出信息数据， 我们根据现有的一些网站开发的技术手段和 前端页面的设计模式， 以及根据实际开发过程中总结出的一些实践方 法，一般使用以下手段来实现，比如把固定的数值包括位置定位、长 宽高、大小等变为相对的量， 这其中主要包括三个主要手段流体式表 格，液态图片，媒体选择器 2 1 流体式表格在流体式表格出现之 前的页面设计， 一般会使用固定的网页宽度设定， 这主要是因为当时 主流的电脑显示器

3、的分辨率是基本相同的， 固定的宽度可充分的使用 显示器宽度， 同时又不会使用户感觉页面过满 但随着电脑硬件的不 断发展变化， 屏幕尺寸和分辨率越变越大， 自适应宽度的网页逐渐问世，这种设计方式可占据整个浏览器页面适度的宽度， 同时随着页面 宽度的变化进行重新排列布局 流体式表格的概念就是将网页页面进 行栅格划分， 使用相对单位代替绝对单位， 使用相对单位来设置页面 元素的位置偏移和大小等变量， 这样可以使整个网页的布局模式和内 容大小随着宽度的变化而改变， 从而适应不同的显示需求 同时使用 基于的布局方式， 例如要进行经典的三列式排布， 我们可以将设置为 左浮动，并且宽度设置为 33，这样当宽

4、度改变时，这三个也一直会 在自己所在的区块里排成三列 因为我们设定了浮动式布局， 段落不 会因为页面的变化而出现重叠或分离的情况 流体式表格保证了网页 能够响应浏览器的宽度变化，同时保证不会出现横向滚动条2 2液态式图片液态式图片也可以称为响应式的图片， 这是一个比较抽象 的说法，我们可以这样理解， 那就是不仅要保持缩放图片时保持图片 的宽高比， 而且还要在移动终端上适当降低图片的分辨率 这个技术 的实现需要使用网页脚本检测当前设备的屏幕分辨率， 根据不同设备 的情况， 向网页中添加特定的请求信息或标记， 并将后续的网页页面 代码、页内图片、网页脚本和样式表等加载请求定向到网站虚拟路径 上当这

5、些请求到达网站的服务器端时， 网络服务器会根据发送来的 请求信息来决定这些请求所需要网页中是插入的大尺寸的高分辨率 图片还是小尺寸的低分辨率的图片， 并向请求用户进行液态图片相应 地反馈输出 对于小屏幕和低分辨率的移动设备， 大尺寸图片则不会 被用到使用液态式图片可以有效降低移动端的网络数据流量并提高 网页访问速度 233 媒体选择器中文名是层叠样式表，目前最新的 版本是第三版也就是 3，它能实现网页内容与表现分离的一种技术 流 体式表格为我们提供了响应式的页面布局方式， 不过在某些较小的屏 幕终端上， 如果页面没有办法容纳四列显示， 只能重新排列成三列或 者两列显示，那么，该如何响应此设备，

6、我们可以使用 3 媒体选择器 技术解决这个问题3 兼容之前的版本所支持的所有媒体类型， 例如， 等，并且 3 又添加了很多涉及媒体类型的最新的功能和属性， 包括最 大宽度、设备宽度、屏幕定向，横屏或竖屏及颜色设定等在 3 发布 之后出现的新的移动终端， 如苹果或安卓等设备， 都可以相对完整的 支持这些新属性 所以可以通过媒体选择器为新设备设置独特的样式， 而忽略不支持 3 的旧电脑中的老旧的浏览器 ; 可以根据使用预先设想 的使用目标创建多个不同类型的样式表， 以适应不同宽度范围的设备 类型而目前最高效的解决方案， 是将多个类型的选择器整合到一个 文件中 3 深入探讨有了流体式表格、液态图片、

7、 3 媒体选择器，已 经基本可以根据终端设备的不同屏幕尺寸及分辨率显示不同的课程 页面变化， 但响应式网页设计不仅如此， 还应包含一些其他方面的内 容，我们列举出如下的响应式网页设计的主要包含的几个方面 1 响应 不同终端的屏幕尺寸及分辨率变化 当终端的屏幕尺寸及分辨率发生 改变的时候，根据设备情况需要对页面菜单、文字、布局等做出动态 调整，使用户仍然能够获得友好的使用体验 ;2 响应设备操作行为变 化如鼠标拖拽上使用事件模拟拖拽， 触摸屏手势支持或其它移动设 备上特有的输入方式 ;3 网络状况自适应用户在慢速网络或网络延 迟较大的情况下可以选择不下载一些消耗带宽的资源 ;4 其他辅助功 能响

8、应根据不同的终端，调用程序所需要的传感器和控制器，如、 陀螺仪、电话、短信等功能 ;5 对使用场景做出响应根据用户身处 的不同使用环境，提供给用户不同网页体验 ;6 响应用户偏好因为 不同的用户有着不同的偏好，比如左右手，操作习惯，反映速度，眼 睛辨别能力，色彩喜好，关注内容不同等，网站都可以考虑做出响 应上述讨论的三个重要手段，主要是针对第一条内容针对第二条 内容则主要依靠浏览器和设备传感器的状态检测， 来实时动态调整课 程页面表现或运行方式， 相对于普通电脑上基于鼠标和键盘的人机交 互，触摸屏技术为我们带来了完全不同的互动方式与新的设计需求 ; 这两者又有各自所适用的领域 幸运的是， 要想

9、让网站满足不同设备 的需求，并非一件很难的事，只需要把注意力集中在某些地方比如 触屏设备无法对鼠标滑过或指针的一些行为做出响应， 因为触屏设备 中根本就没有鼠标指针的设定， 我们用手指点击屏幕就是单击， 因此 设计时不要让触屏设备出现任何依赖于鼠标的状态的触发模式 而其 他几个方面则可根据网络课程的实际情况来实现不同的需求， 例如视 频或图片比较多的课程， 就需要对网络状况进行检测， 以根据不同的 用户带宽显示不同的视频或图片质量， 以提高用户访问速度， 提升用 户体验而一门制作优良的网络课程， 如果能根据不同的用户给出不 同的用户体验，使课程的学习更加贴近用户的习惯，那么，这一课程 的受欢迎

10、程度肯定会大大提升 4 响应式网站制作流程从页面设计到 技术实现真格过程来说， 设计并制作一个响应式网络课程， 大致可以 划分为以下 4个过程 1网站美工，用户界面设计师， 描绘出页面的风 格和样式， 并确定网页在最大分辨率的设备下应显示的全部内容， 然 后在页面尺寸不断缩小的情况下， 如何布局， 什么样的页面元素比如 文字、图片、内容等需要改变显示方式进行隐藏，缩放或裁剪等，再 一一做出调整 ;2 使用相对单位对页面元素进行定位和设定，设置长 度、宽度、大小等 ;3 针对不同显示终端的屏幕尺寸和分辨率使用流 体式表格和液体图片实现响应 ;4 根据分辨率变化视情况加入适当的 媒体选择器来调整元

11、素 通过以上步骤， 一个可以适应各种平台和终 端的响应式网络课程基本实现， 经过后期的各种优化调整， 一个优秀 的并保持一致的用户体验的网络课程就呈现在了各种终端用户面前， 通过响应式网页设计， 大大减低了针对同一课程开发多个系统的工作 强度，实现了网络课程制作的效率化和通用性 响应式网页设计的优 点 1 网站制作的工作量相对较小， 不需要注册多个域名， 对于所有设 备适用 ;2 相对一致的用户体验，个性化的用户习惯响应，很贴近用 户平时的上网习惯 ;3 可根据不同的用户终端， 调用不同的终端工具， 实现设备的有效合理利用 5 结语通过实际应用检验，我们制作的响 应式的网络课程在学生学习过程中取得了较好的