网络课程总结 篇1
适用场景：网络课程开发前技术规划、移动设备适配方案制定
内容看点：多终端兼容设计方法、网页性能提升技巧
行文逻辑：分析需求→确定方案→实施技术→优化流程→总结成效
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、结语
通过实际应用检验，我们制作的响应式的网络课程在学生学习过程中取得了较好的效果，学生普遍反应课程学习更方便、更人性化。相信未来越来越多的网络课程会逐渐的开始支持多平台的响应式设计方案。本文虽然只是探讨面向多平台的响应式网络课程实现技术，但也是对各种新技术、新方法的抛砖引玉，希望通过本文使读者能够对网络课程的制作技术产生更多的好的想法和思路。
网络课程总结 篇2
适用场景：SDH设备操作培训、光纤熔接技术学习
内容看点：SDH设备操作指南、光纤熔接实操教程
行文逻辑：掌握仪器使用→学习组网结构→进行故障排除→完成光纤熔接
一、 课程设计的目的
1. 掌握光功率计，OTDR的使用
2. 学习光传输网络中的故障定位和故障排除
3. 学习建立光连接及建立2M电路
4. SDH网络在保护模式下倒换的实验
二、 课程设计的任务
1. 进行仪器仪表的学习和使用（掌握光功率计、光纤熔接的测试和使用），掌握SDH光传输网的组网结构，了解SDH传输设备的硬件组成。
2. 熟悉传输网管的操作界面，掌握SDH光传输网的组网方式，学习建立光连接及建立2M电路，SDH网络在保护模式下到换的实验，学习传输网络的故障定位和故障排除。
三、 课程设计的设备
1. 中兴ZXSM—600 SDH设备（分叉复用器）
2. SDH光传输网网管系统
3. 光功率计
4. 光切割机
5. 光熔接机
四、 课程设计准备
1. SDH设备的机盘操作指示灯处于正常工作状态
2. 网管服务器程序正常启动并与SDH传输设备正确连接
3. 网管的客户端程序正常启动
五、 设备设计及相关知识
1．光功率计
2.光纤熔接机 光功率计主要用于测量光路的吸收功率.
光纤熔接机主要用于光通信中，光缆的施工和维护。主要是靠
放出电弧将两头光纤熔化，同时运用准直原理平缓推进，以实
现光纤模场的耦合。
3.SDH光传输设备的硬件组成
ZXSM-600设备采用后背板+单板插件的方式，
1)定时单元
定时单元电源时钟板（PWCK）实现，为设备提供系统时钟，实现网络同步。定时单元的时钟源有多种选择：跟踪外部定时基准（BITS）、锁定某一方向的线路或支路时钟、在可用参考定时基准发上故障时进入保持或自由振荡模式。定时单元还可实现通过定时和环路定时，并能够为其它设备提供标准的参考基准输出。定时单元依据定时基准的状态信息实现定时基准的自动转换。
2)控制管理单元
控制管理单元有网络控制板（NCP）实现，完成网元设备的配置与管理，并通过ECC
实现网元间消息的收
发和传递。控制管理单元还提供与后台网管的多种接口。通过此单元可以对传输网进行集中网管。
2)光接口单元
本实验设备的光接口速率为STM-4，由STM-4光线路板OL4实现实现。光接口可作为设备的群路或支路接口，完成接口板的电/光转换和光/电转换、接收数据和时钟恢复、发送数据。
4)开销处理单元
开销处理单元在设备中主要由STM-4光线路板（OL4）、开销处理板（OHP）完成。开销处理单元用于分离SDH帧结构中的段开销和净荷数据，并对开销字节进行相应的处理。
5)交叉单元
交叉单元是SDH传输设备的核心功能单元，由交叉板（CS）完成。交叉单元完成AU-4，、TU-3、TU-12等级别的交叉连接，交叉单元是群路接口和支路接口之间业务信号传输的.纽带。
6)开销交换单元
开销交换单元由开销处理板（OHP）实现，完成段开销中的E1字节、E2字节、F1字节及一些未定义的开销字节间的交换功能。通过开销交换单元，可以将开销字节进入其他段开销继续传输，也可以实现网元的辅助功能。
7)电接口单元
电接口用于实现设备的局内接口，包括STM-1电接口以及E1、E3、E4等PDH电接口，由ES1板、EP1板等电接口板实现。电接口单元完成电信号的异步映射/去映射后将信号进入交叉单元。
8)辅助接口单元
辅助接口由辅助接口板（AI）实现，利用开销字节提供公务话音通道和辅助的数字通道、模拟通道。
六、通信网设计和管理步骤
1. 光纤熔接步骤
1）用剥纤钳剥去光纤的包层， 用酒精棉擦拭光纤，将光纤穿过热缩管。熔接完成后，可以用热缩管保护光纤熔接头。
2）切割、使端面平整，打开熔接机电源，选择合适的熔接方式。 3）制备光纤端面。
4）放置光纤。将光纤放在熔接机的V形槽中，小心压上光纤压板和光纤夹具，要根据光纤切割长度设置光纤在压板中的位置，并正确地放入防风罩中。
5）接续光纤。按下接续键后，光纤相向移动，移动过程中，产生一个短的放电清洁光纤表面，当光纤端面之间的间隙合适后溶接机停止相向移动，设定初始间隙，熔接机测量，并显示切割角度。在初始间隙设定完成后，开始执行纤芯或包层对准，然后熔接机减小间隙（最后的间隙设定），高压放电产生的电弧将左边光纤 熔到右边光纤中，最后微处理器计算损耗并将数值显示在显示器上。如果估算的损耗值比预期的要高，可以再次放电，放电后熔接机仍将计算损耗。
6）移出光纤并用加热器加固光纤。打开防风罩，将接机同时存贮熔接数据。其中包括：熔接模式、数据、估算损耗等。将光纤从熔接机上取出，再将热缩管放在裸纤中心，放到加热器中加热，完毕后从加热器中取出光纤。
