网络规划课程设计报告

第第页网络规划课程设计报告

1、讨论背景

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

2、基本技术方案

显着，面对这一问题，原有的网络课程设计模式已经远远不能适应这一要求，那么，如何让网络课程也能实现响应式设计，并可以依据不同的终端设备给出不同的输出信息数据，我们依据现有的一些网站开发的技术手段和前端页面的设计模式，以及依据实际开发过程中总结出的一些实践方法，一般运用以下手段来实现，比如把固定的数值包括位置定位、长宽高、大小等变为相对的量，这其中主要包括三个主要手段：流体式表格，液态图片，媒体选择器。

2.1流体式表格

在流体式表格涌现之前的页面设计，一般会运用固定的网页宽度设定，这主要是由于当时主流的电脑显示器的辨别率是基本相同的，固定的宽度可充分的运用显示器宽度，同时又不会运用户感觉页面过满。但随着电脑硬件的不断进展改变，屏幕尺寸和辨别率越变越大，自适应宽度的网页渐渐问世，这种设计方式可占据整个阅览器页面适度的宽度，同时随着页面宽度的改变进行重新排列布局。流体式表格的概念就是将网页页面进行栅格划分，运用相对单位代替绝对单位，运用相对单位来设置页面元素的位置偏移和大小等变量，这样可以使整个网页的布局模式和内容大小随着宽度的改变而转变，从而适应不同的显示需求。同时运用基于div的布局方式，例如要进行经典的三列式排布，我们可以将div设置为左浮动，并且宽度设置为33%，这样当宽度转变时，这三个div也一贯会在自己所在的区块里排成三列。由于我们设定了浮动式布局，段落不会由于页面的改变而涌现重叠或分别的状况。流体式表格保证了网页能够响应阅览器的宽度改变，同时保证不会涌现横向滚动条。

2.2液态式图片

液态式图片也可以称为响应式的图片，这是一个比较抽象的说法，我们可以这样理解，那就是不仅要保持缩放图片时保持图片的宽高比，而且还要在移动终端上适当降低图片的辨别率。这个技术的实现需要运用网页脚本检测当前设备的屏幕辨别率，依据不同设备的状况，向网页中添加特定的web恳求信息或标记，并将后续的网页html页面代码、页内图片、网页脚本和样式表等加载恳求定向到网站虚拟路径上。当这些恳求到达网站的`服务器端时，网络服务器会依据发送来的恳求信息来决断这些恳求所需要网页中是插入的大尺寸的高辨别率图片还是小尺寸的低辨别率的图片，并向恳求用户进行液态图片相应地反馈输出。对于小屏幕和低辨别率的移动设备，大尺寸图片那么不会被用到。运用液态式图片可以有效降低移动端的网络数据流量并提高网页访问速度。

2.3css3媒体选择器

css中文名是层叠样式表，目前最新的版本是第三版也就是css3，它能实现网页内容与表现分别的一种技术。流体式表格为我们提供了响应式的页面布局方式，不过在某些较小的屏幕终端上，假如页面没有方法容纳四列显示，只能重新排列成三列或者两列显示，那么，该如何响应此设备，我们可以运用css3媒体选择器技术解决这个问题。css3兼容之前的css版本所支持的全部媒体类型，例如：screen，print，handheld等，并且css3又添加了许多涉及媒体类型的最新的功能和属性，包括最大宽度、设备宽度、屏幕定向，横屏或竖屏及颜色设定等。在css3发布之后涌现的新的移动终端，如苹果或安卓等设备，都可以相对完整的支持这些新属性。所以可以通过媒体选择器为新设备设置独特的样式，而忽视不支持css3的旧电脑中的老旧的阅览器；可以依据运用预先设想的运用目标创建多个不同类型的样式表，以适应不同宽度范围的设备类型。而目前最高效的解决方案，是将多个类型的选择器整合到一个css文件中。

3、深入探讨

有了流体式表格、液态图片、css3媒体选择器，已经基本可以依据终端设备的不同屏幕尺寸及辨别率显示不同的课程页面改变，但响应式网页设计不仅如此，还应包含一些其他方面的内容，我们列举出如下的响应式网页设计的主要包含的几个方面：〔1〕响应不同终端的屏幕尺寸及辨别率改变。当终端的屏幕尺寸及辨别率发生转变的时候，依据设备状况需要对页面菜单、文字、布局等做出动态调整，运用户仍旧能够获得友好的运用体验；〔2〕响应设备操作行为改变。如鼠标拖拽〔iPad上运用JavaScript事项模拟拖拽〕，触摸屏手势支持或其它移动设备上特有的输入方式；〔3〕网络状况自适应。用户在慢速网络或网络延迟较大的状况下可以选择不下载一些消耗带宽的资源；〔4〕其他帮助功能响应。依据不同的终端，调用程序所需要的传感器和掌握器，如GPS、陀螺仪、电话、短信等功能；〔5〕对运用场景做出响应。依据用户身处的不同运用环境，提供应用户不同网页体验；〔6〕响应用户偏好。由于不同的用户有着不同的偏好，比如左右手，操作习惯，反映速度，眼睛辨别技能，色调喜好，关注内容不同等，网站都可以考虑做出响应。上述争论的三个重要手段，主要是针对第一条内容。针对第二条内容那么主要依靠阅览器和设备传感器的状态检测，来实时动态调整课程页面表现或运行方式，相对于一般电脑上基于鼠标和键盘的人机交互，触摸屏技术为我们带来了完全不同的互动方式与新的设计需求；这两者又有各自所适用的领域。幸运的是，要想让网站满意不同设备的需求，并非一件很难的事，只需要把留意力集中在某些地方。比如：触屏设备无法对鼠标滑过或指针的一些行为做出响应，由于触屏设备中根本就没有鼠标指针的设定，我们用手指引击屏幕就是单击，因此设计时不要让触屏设备涌现任何依靠于鼠标的状态的触发模式。而其他几个方面那么可依据网络课程的实际状况来实现不同的需求，例如：视频或图片比较多的课程，就需要对网络状况进行检测，以依据不同的用户带宽显示不同的视频或图片质量，以提高用户访问速度，提升用户体验。而一门制作优良的网络课程，假如能依据不同的用户给出不同的用户体验，使课程的学习更加贴近用户的习惯，那么，这一课程的受欢迎程度确定会大大提升。

4、响应式网站制作流程

从页面设计到技术实现真格过程来说，设计并制作一个响应式网络课程，大致可以划分为以下4个过程：〔1〕网站美工，用户界面设计师，描绘出页面的风格和样式，并确定网页在最大辨别率的设备下应显示的全部内容，然后在页面尺寸不断缩小的状况下，如何布局，什么样的页面元素比如文字、图片、内容等需要转变显示方式进行隐蔽，缩放或裁剪等，再一一做出调整；〔2〕运用相对单位对页面元素进行定位和设定，设置长度、宽度、大小等；〔3〕针对不同显示终端的屏幕尺寸和辨别率运用流体式表格和液体图片实现响应；〔4〕依据辨别率改变视状况加入适当的媒体选择器来调整元素。通过以上步骤，一个可以适应各种平台和终端的响应式网络课程基本实现，经过后期的各种优化调整，一个优秀的并保持全都的用户体验的网络课程就呈现在了各种终端用户面前，通过响应式网页设计，大大减低了针对同一课程开发多个系统的工作强度，实现了网络课程制作的效率化和通用性。响应式网页设计的优点：〔1〕网站制作的工作量相对较小，不需要注册多个域名，对于全部设备适用；〔2〕相对全都的用户体验，性格化的用户习惯响应，很贴近用户平常的上网习惯；〔3〕可依据不同的用户终端，调用不同的终端工具，实现设备的有效合理利用。

5、结语