网络规划课程设计报告.docx

网络规划课程设计报告

网络规划课程设计报告网络规划课程的设计与开发一直以来都是计算机应用的重要应用领域之一。以下是小编整理的网络规划课程设计报告，欢迎阅读。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）响应不同终端的屏幕尺寸及分辨率变化。当终端的屏幕尺寸及分辨率发生改变的时候，根据